modify Town Component

src/views/HomeView.vue

@@ -2,6 +2,31 @@
   <div id="LayoutContent">
     <MapHolder ref="mapLoaderRef"></MapHolder>
     <Header @navSelect="navSelect"></Header>
+
+    <!-- 镇域专题 -->
+    <div id="TownContainer" v-if="$ifMenu('2', '5')">
+      <div class="select-title">所属街道</div>
+      <NewSelect
+        class="select-container"
+        @selectEvent="specialTownSelect"
+        v-model="streetSelectVal"
+        :options="streetOptions"
+        :value="streetSelectVal"
+      />
+      <MenuCard
+        class="town-right-problems"
+        :menuData="{
+          type: 'card',
+          title: '历年频发问题Top10',
+          titleWidth: 85,
+          boxWidth: '400'
+        }"
+      >
+        <template slot="top"><TopCard /></template>
+      </MenuCard>
+    </div>
+
+    <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
     <div id="leftMenus" v-if="$ifMenu('1', '')">
       <MenuCard :menuData="menus.left[0]">
@@ -51,7 +76,7 @@
         v-model="streetSelectVal"
         :options="streetOptions"
         :value="streetSelectVal"
-        @selectEvent="selectEvent"
+        @selectEvent="homeSelect"
       />
       <div id="mainMenus_topRight">
         <MenuCard :menuData="menus.main[0]">
@@ -79,13 +104,27 @@
         </MenuCard>
       </div>
       <div class="legend-line"></div>
-      <MenuCard id="mainMenus_bottomLegend" :menuData="{ type: 'chart', title: '图例', boxWidth: '150', boxHeight: '180' }"
+      <MenuCard
+        id="mainMenus_bottomLegend"
+        :menuData="{
+          type: 'chart',
+          title: '图例',
+          boxWidth: '150',
+          boxHeight: '180',
+        }"
         ><div class="legend-container">
           <div class="left-container">
-            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
+            <div
+              class="legend-icon"
+              v-for="(item, index) in legendData"
+              :key="index"
+              :style="{ background: item }"
+            ></div>
           </div>
           <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
+            <div class="lengend-title" v-for="item in buttonData" :key="item">
+              {{ item }} 类
+            </div>
           </div>
         </div>
       </MenuCard>
@@ -98,7 +137,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -108,7 +148,8 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -121,7 +162,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
@@ -137,11 +179,18 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
 import TopCard from "@/components/common/TopCard";
+// 镇域专题组件
 export default {
   name: "HomeView",
   components: {
@@ -153,7 +202,7 @@ export default {
     TagCard,
     ChartCard,
     TagTableCard,
-    TopCard
+    TopCard,
   },
   data() {
     return {
@@ -161,19 +210,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -221,16 +270,16 @@ export default {
             title: "浦东新区自然资源分布TOP10",
             boxWidth: "360",
             boxHeight: "370",
-            boxBackground: "rgba(0,39,77,0.6)"
-          }
+            boxBackground: "rgba(0,39,77,0.6)",
+          },
         ],
         right: [
           { type: "card", title: "资金投入情况", titleWidth: 64 },
           { type: "card", title: "资源环境项目", titleWidth: 64 },
           { type: "card", title: "历年频发问题TOP5", titleWidth: 81},
           { type: "card", title: "土地类问题", titleWidth: 60 },
-          { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
-        ]
+          { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
+        ],
       },
       buttonData: ["A", "B", "C"],
       legendData: ["#E565FF", "#0055FF", "#00FFD5"],
@@ -238,20 +287,20 @@ export default {
       AData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       BData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       CData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       streetSelectVal: "全部街道",
-      streetOptions: []
+      streetOptions: [],
     };
   },
   methods: {
@@ -279,10 +328,15 @@ export default {
           break;
       }
     },
-    selectEvent(val) {
+    // home页面下拉框
+    homeSelect(val) {
       console.log(val, "current street");
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+    },
+    // 镇域专题下拉框
+    specialTownSelect(val) {
+      this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
+    },
   },
   created() {
     // 目录
@@ -318,10 +372,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -331,7 +385,41 @@ export default {
   height: 100%;
   box-sizing: border-box;
 }
-/* 左侧菜单列 */
+/* 镇域专题 */
+#TownContainer {
+  position: relative;
+  background: rgba(100, 100, 100, 0.8);
+  height: calc(100% - 60px);
+  width: 100%;
+  top: 60px;
+  z-index: 999;
+  pointer-events: none;
+  .select-title {
+    position: absolute;
+    left: 60px;
+    top: 27px;
+    width: 80px;
+    height: 30px;
+    color: #fff;
+    line-height: 30px;
+    font-size: 18px;
+    cursor: auto;
+    pointer-events: auto;
+  }
+  .select-container {
+    position: absolute;
+    left: 150px;
+    top: 30px;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .town-right-problems {
+    position: absolute;
+    right: 10px;
+    top: 30px;
+  }
+}
+/* Home目录 -- 左侧菜单列 */
 #leftMenus {
   position: absolute;
   left: 5px;