Merge branch 'master' of http://39.105.126.192:3000/yylc_sh/web_sh_audit

src/components/layout/MenuCard.vue

@@ -3,27 +3,27 @@
   <div
     class="menuMainBox"
     :style="{
-      width: boxWidth ? boxWidth + 'px' : '410px',
-      height: boxHeight + 'px',
-      border: type !== 'chart' ? '' : '1px solid #2FB8FF',
-      background: boxBackground ? boxBackground : ''
+      width: menuData.boxWidth ? menuData.boxWidth + 'px' : '410px',
+      height: menuData.boxHeight + 'px',
+      border: menuData.type !== 'chart' ? '' : '1px solid #2FB8FF',
+      background: menuData.boxBackground ? menuData.boxBackground : ''
     }"
   >
     <!-- 头部 -->
-    <div class="menuMainBox_top" v-if="type !== 'chart'">
+    <div class="menuMainBox_top" v-if="menuData.type !== 'chart'">
       <!-- 头部左侧 -->
-      <div class="menuMainBox_top_left" :style="{ width: titleWidth ? titleWidth + '%' : '50%' }">
+      <div class="menuMainBox_top_left" :style="{ width: menuData.titleWidth ? menuData.titleWidth + '%' : '50%' }">
         <!-- 左侧箭头图标 -->
         <div class="menuMainBox_top_left_iconS"></div>
         <!-- 标题 -->
-        <div class="menuMainBox_top_left_title">{{ title }}</div>
+        <div class="menuMainBox_top_left_title">{{ menuData.title }}</div>
         <!-- 右侧倾斜图标1 -->
         <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
         <!-- 右侧倾斜图标2 -->
         <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
       </div>
       <!-- 头部右侧 -->
-      <div class="menuMainBox_top_right" :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }">
+      <div class="menuMainBox_top_right" :style="{ width: menuData.titleWidth ? 110 - menuData.titleWidth + '%' : '60%' }">
         <!-- 方块1 -->
         <div class="menuMainBox_top_right_d1"></div>
         <!-- 方块2 -->
@@ -37,17 +37,17 @@
       </div>
     </div>
     <!-- 折线 -->
-    <div class="menuMainBox_topBottom" v-if="type !== 'chart'" :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }">
+    <div class="menuMainBox_topBottom" v-if="menuData.type !== 'chart'" :style="{ left: menuData.titleWidth ? menuData.titleWidth - 40 + '%' : '10%' }">
       <!-- 圆球 -->
       <div></div>
     </div>
-    <div class="menuMainBox_topChart" v-if="type === 'chart'">
+    <div class="menuMainBox_topChart" v-if="menuData.type === 'chart'">
       <div class="menuMainBox_topChart_title">
-        {{ title }}
+        {{ menuData.title }}
       </div>
     </div>
     <!-- 主题 -->
-    <div class="menuMainBox_main" v-if="type !== 'chart'">
+    <div class="menuMainBox_main" v-if="menuData.type !== 'chart'">
       <!-- 上部 -->
       <div class="menuMainBox_main_top">
         <slot name="top"></slot>
@@ -57,7 +57,7 @@
         <slot name="bottom"></slot>
       </div>
     </div>
-    <div class="menuMainBox_main" v-if="type === 'chart'">
+    <div class="menuMainBox_main" v-if="menuData.type === 'chart'">
       <!-- 上部 -->
       <div class="menuMainBox_main_all">
         <slot></slot>
@@ -75,14 +75,15 @@ export default {
   },
   mounted() {},
   /**
-   * type: 类型【card:卡片;chart:echart组件】,默认为card（非必填）
+   * menuData:
+   * type: 类型【card:卡片;chart:echart组件;imageMenu:图片菜单;legend:图例】,默认为card（非必填）
    * title: 标题（必填）
    * boxWidth: 宽，默认为410px（非必填）
    * boxHeight: 高，默认为auto（非必填）
    * boxBackground: 背景色，默认为渐变蓝色（非必填）
    * titleWidth: 标题宽度，默认为50（非必填）
    */
-  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground", "titleWidth"],
+  props: ["menuData"],
   methods: {},
   watch: {}
 };

src/views/HomeView.vue

@@ -4,11 +4,7 @@
     <Header @navSelect="navSelect"></Header>
     <!-- 左侧菜单列 1 -- 首页 -->
     <div id="leftMenus" v-if="$ifMenu('1', '')">
-      <MenuCard
-        :type="menus.left[0].type"
-        :title="menus.left[0].title"
-        :boxHeight="menus.left[0].height"
-      >
+      <MenuCard :menuData="menus.left[0]">
         <template slot="top">
           <TagTableCard :data="tagCardData2" />
         </template>
@@ -16,11 +12,7 @@
           <ChartCard :title="'近三年农田面积变化'" />
         </template>
       </MenuCard>
-      <MenuCard
-        :type="menus.left[1].type"
-        :title="menus.left[1].title"
-        :boxHeight="menus.left[1].height"
-      >
+      <MenuCard :menuData="menus.left[1]">
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData"></TagCard>
@@ -32,11 +24,7 @@
           <ChartCard :title="'近三年水域面积变化'" />
         </template>
       </MenuCard>
-      <MenuCard
-        :type="menus.left[2].type"
-        :title="menus.left[2].title"
-        :boxHeight="menus.left[2].height"
-      >
+      <MenuCard :menuData="menus.left[2]">
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData3"></TagCard>
@@ -48,6 +36,12 @@
         </template>
       </MenuCard>
     </div>
+    <!-- 左侧菜单列 2 -- 疑点筛查 -->
+    <div id="leftMenus" v-if="$ifMenu('2', '1')">
+      <MenuCard :menuData="menus.left[3]"> </MenuCard>
+      <MenuCard :menuData="menus.left[4]"> </MenuCard>
+      <MenuCard :menuData="menus.left[5]"> </MenuCard>
+    </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus" v-if="$ifMenu('1', '')">
       <div id="mainMenus_topLeft">所属街道</div>
@@ -59,13 +53,7 @@
         @selectEvent="selectEvent"
       />
       <div id="mainMenus_topRight">
-        <MenuCard
-          :type="menus.main[0].type"
-          :title="menus.main[0].title"
-          :boxWidth="menus.main[0].width"
-          :boxHeight="menus.main[0].height"
-          :boxBackground="menus.main[0].background"
-        >
+        <MenuCard :menuData="menus.main[0]">
           <div class="bar-btn">
             <div
               class="btn-style"
@@ -90,52 +78,28 @@
         </MenuCard>
       </div>
       <div class="legend-line"></div>
-      <MenuCard
-        id="mainMenus_bottomLegend"
-        :type="'chart'"
-        :title="'图例'"
-        :boxWidth="'160'"
-        :boxHeight="'180'"
-        :boxBackground="'rgba(255,255,255,0.1)'"
+      <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>
     </div>
     <!-- 右侧菜单列 -->
-    <div id="rightMenus" v-if="$ifMenu('1', '')">
-      <MenuCard
-        :type="menus.right[0].type"
-        :titleWidth="menus.right[0].titleWidth"
-        :title="menus.right[0].title"
-        :boxHeight="menus.right[0].height"
-      >
+    <div id="rightMenus">
+      <MenuCard :menuData="menus.right[0]" v-if="$ifMenu('1', '')">
         <template slot="top">
           <div class="menuCardFlex" style="justify-content: center">
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom">
-          <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
-      <MenuCard
-        :type="menus.right[1].type"
-        :titleWidth="menus.right[1].titleWidth"
-        :title="menus.right[1].title"
-        :boxHeight="menus.right[1].height"
-      >
+      <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
         <template slot="top">
           <div class="menuCardFlex">
             <TagCard :data="tagCardData"></TagCard>
@@ -143,15 +107,22 @@
             <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">
+          <TopCard />
+        </template>
+      </MenuCard>
+      <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '')">
+        <template slot="top">
+          <div class="menuCardFlex" style="justify-content: center">
+            <TagCard :data="tagCardData3"></TagCard>
+          </div>
+        </template>
+        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
-      <MenuCard
-        :type="menus.right[2].type"
-        :titleWidth="menus.right[2].titleWidth"
-        :title="menus.right[2].title"
-        :boxHeight="menus.right[2].height"
-      >
+      <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '')">
         <template slot="top">
           <TopCard />
         </template>
@@ -195,19 +166,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,
@@ -216,21 +187,27 @@ export default {
           { type: "menu", title: "土地资源" },
           { type: "menu", title: "水资源" },
           { type: "menu", title: "林地资源" },
+          { type: "imageMenu", title: "基本农田被违规占用", titleWidth: 81 },
+          { type: "imageMenu", title: "基本农田种林", titleWidth: 81 },
+          { type: "imageMenu", title: "基本农田抛荒", titleWidth: 81 },
+          { type: "imageMenu", title: "一般耕地被违规占用", titleWidth: 81 }
         ],
         main: [
           {
             type: "chart",
             title: "浦东新区自然资源分布TOP10",
-            width: "360",
-            height: "370",
-            background: "rgba(0,39,77,0.6)",
-          },
+            boxWidth: "360",
+            boxHeight: "370",
+            boxBackground: "rgba(0,39,77,0.6)"
+          }
         ],
         right: [
           { type: "menu", title: "资金投入情况", titleWidth: 64 },
           { type: "menu", title: "资源环境项目", titleWidth: 64 },
           { type: "menu", title: "历年频发问题TOP5", titleWidth: 81 },
-        ],
+          { type: "menu", title: "土地类问题", titleWidth: 60 },
+          { type: "menu", title: "土地类问题TOP5", titleWidth: 81 }
+        ]
       },
       buttonData: ["A", "B", "C"],
       legendData: ["#E565FF", "#0055FF", "#00FFD5"],
@@ -238,24 +215,25 @@ export default {
       AData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       BData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       CData: {
         soil: [],
         water: [],
-        forestry: [],
+        forestry: []
       },
       streetSelectVal: "全部街道",
-      streetOptions: [],
+      streetOptions: []
     };
   },
   methods: {
     navSelect: function (data) {
+      console.log(data);
       this.$store.commit("changeNavSelect", data);
     },
     clickEvent(type) {
@@ -317,10 +295,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>