1. 图例悬浮弹窗

2. 自定义模型修改模型时弹窗显示模型名字，叠置分析按钮只在修改模型时显示

src/components/common/BottomForm/CustomModelDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    title="自定义模型"
+    :title="modelTitle ? modelTitle : '自定义模型'"
     :visible="outerDialogVisible"
     width="40%"
     center
@@ -29,6 +29,7 @@
     </el-checkbox-group>
     <span slot="footer" class="dialog-footer">
       <input
+        v-if="overlayBtnShow"
         type="button"
         value="叠置分析"
         class="overlay-btn"
@@ -52,6 +53,8 @@ export default {
     return {
       outerDialogVisible: false,
       innerDialogVisible: false,
+      overlayBtnShow: false,
+      modelTitle: null,
       inputName: "自定义模型1",
       checkedList: [],
       checkArr: [
@@ -91,6 +94,8 @@ export default {
       this.outerDialogVisible = true;
       this.checkedList = node.data.data;
       this.inputName = node.data.label;
+      this.overlayBtnShow = true;
+      this.modelTitle = node.data.label;
       this.$store.state.modelStatus = "modify";
     });
   },
@@ -98,6 +103,7 @@ export default {
     // 当容器销毁时，需要停止监听该事件
     this.$bus.$off("customModelEvent");
     this.$bus.$off("updateModel");
+    this.overlayBtnShow = false;
   },
   methods: {
     // 弹窗关闭时询问
@@ -114,6 +120,8 @@ export default {
     },
     // 底部按钮自定义模型事件
     customModelEvent() {
+      this.modelTitle = null;
+      this.overlayBtnShow = false;
       this.$store.state.modelStatus = "create";
       this.outerDialogVisible = true;
       this.checkedList = [];
@@ -202,7 +210,7 @@ export default {
   height: 40px;
   position: absolute;
   left: 50px;
-  bottom: 20px;
+  bottom: 22px;
   border-radius: 4px;
   cursor: pointer;
   color: #e6e6e6;

src/components/map/Legend.vue

@@ -30,18 +30,40 @@
             width: legendData.rightWidth ? legendData.rightWidth : '50%',
           }"
         >
-          <div
+          <el-popover
+            placement="right-start"
+            width="200"
+            :content="item.info"
+            trigger="hover"
+            v-for="item in legendData.legendTitle"
+            :key="item.name"
+          >
+            <div
+             slot="reference"
+              class="legend-title"
+              :style="{
+                width:
+                  legendData.rightItemWidth + 'px'
+                    ? legendData.rightItemWidth + 'px'
+                    : '50px',
+              }"
+            >
+              {{ item.name }}
+            </div>
+          </el-popover>
+          <!-- <div
             class="legend-title"
             v-for="item in legendData.legendTitle"
             :key="item"
             :style="{
-              width: legendData.rightItemWidth+'px'
-                ? legendData.rightItemWidth+'px'
-                : '50px',
+              width:
+                legendData.rightItemWidth + 'px'
+                  ? legendData.rightItemWidth + 'px'
+                  : '50px',
             }"
           >
             {{ item }}
-          </div>
+          </div> -->
         </div>
       </div>
     </MenuCard>
@@ -68,6 +90,35 @@ export default {
 </script>
 <style lang="less" scoped>
 @commonBorderColor: #00aaff;
+.tooltip {
+  display: block !important;
+  padding: 4px;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: black;
+    color: white;
+    border-radius: 16px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    display: none;
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+}
+
 .legend {
   pointer-events: auto;
   .legend-container {
@@ -109,6 +160,7 @@ export default {
         align-items: center;
         justify-content: flex-start;
         color: white;
+        pointer-events: auto;
       }
     }
   }

src/main.js

@@ -7,9 +7,7 @@ import "element-ui/lib/theme-chalk/index.css";
 // 添加字体（优设标题黑）
 import "./assets/font/font.css";
 import "./assets/global.css";
-
 import $ from "jquery";
-
 import { drag } from "./directives/drag";
 
 Vue.directive("drag", drag);

src/views/ComprehensiveAnalysis.vue

@@ -15,23 +15,13 @@
       @close="closeEvent"
     />
     <!-- 右上角工具栏 -->
-    <!-- <div class="comprehensive-analysis-toolbar">
+    <!--     <div class="comprehensive-analysis-toolbar">
       <div class="searchbox">
         <el-input
           placeholder="请输入地址、地块名称等"
           v-model="searchInput"
         ></el-input>
       </div>
-
-      <div class="layercontrol-container" v-show="layerControlBox">
-        <div class="layer-control-item" v-for="item in 4" :key="item">
-          <div class="left"><div class="left-eye"></div></div>
-          <div class="right">
-            <div class="right-line"></div>
-            <div class="right-text"></div>
-          </div>
-        </div>
-      </div>
     </div> -->
     <!-- 图例 -->
 
@@ -406,7 +396,9 @@ export default {
           delete map2DViewer.polygons[layer];
         }
       }
-      this.legendTitle = Object.keys(this.originalData);
+      this.legendTitle = Object.keys(this.originalData).map((v) => {
+        return { name: v, info: v };
+      });
       this.legendIcon = this.legendTitle.map((v) => {
         let color = publicFun.getRandomColor();
         return {
@@ -786,6 +778,7 @@ export default {
     .contant-container {
       width: 100%;
       height: 95%;
+      overflow: auto;
       display: flex;
       align-items: center;
       justify-content: center;

src/views/HomeView.vue

@@ -13,7 +13,7 @@
           menuIndex: '2',
           subMenuIndex: '5',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
       <div class="select-title">所属街道</div>
@@ -31,7 +31,7 @@
               type: 'card',
               title: streetSelectVal + '资源问题',
               titleWidth: 40,
-              boxWidth: '780'
+              boxWidth: '780',
             }"
           >
             <template slot="top">
@@ -47,7 +47,7 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -56,7 +56,7 @@
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400'
+              boxWidth: '400',
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -65,7 +65,10 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-if="$ifMenu('3', '')"
+    />
 
     <!-- 法律法规 -->
     <LawView id="LawContainer" v-if="$ifMenu('5', '1')" />
@@ -162,7 +165,7 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
     </div>
@@ -174,7 +177,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]">
         <template slot="top">
@@ -184,7 +188,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]">
         <template slot="top">
@@ -200,7 +205,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]">
         <template slot="top">
@@ -224,7 +230,13 @@ 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 publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -260,7 +272,7 @@ export default {
     Legend,
     WholeProcessManagement,
     FrequencyView,
-    LawView
+    LawView,
   },
   data() {
     return {
@@ -268,19 +280,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,
@@ -293,7 +305,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" }
+            gotoPageInfo: { index: "2", subIndex: "1", name: "土地资源" },
           },
           {
             type: "card",
@@ -301,7 +313,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "4", name: "水资源" }
+            gotoPageInfo: { index: "2", subIndex: "4", name: "水资源" },
           },
           {
             type: "card",
@@ -309,7 +321,7 @@ export default {
             menuIndex: "1",
             position: "left",
             minDomWidth: 420,
-            gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" }
+            gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" },
           },
           {
             type: "imageMenu",
@@ -321,7 +333,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -333,7 +345,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -345,7 +357,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
           },
           {
             type: "imageMenu",
@@ -357,8 +369,8 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "left",
-            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
-          }
+            gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+          },
         ],
         main: [
           {
@@ -369,8 +381,8 @@ export default {
             boxBackground: "rgba(0,39,77,0.6)",
             menuIndex: "1",
             position: "top",
-            minDomWidth: 1500
-          }
+            minDomWidth: 1500,
+          },
         ],
         right: [
           {
@@ -379,7 +391,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -387,7 +399,7 @@ export default {
             titleWidth: 64,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -395,7 +407,7 @@ export default {
             titleWidth: 81,
             menuIndex: "1",
             position: "right",
-            minDomWidth: 1000
+            minDomWidth: 1000,
           },
           {
             type: "card",
@@ -404,7 +416,7 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200
+            minDomWidth: 1200,
           },
           {
             type: "card",
@@ -413,46 +425,59 @@ export default {
             menuIndex: "2",
             subMenuIndex: "1",
             position: "right",
-            minDomWidth: 1200
-          }
-        ]
+            minDomWidth: 1200,
+          },
+        ],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
-      legendTitle: ["A类", "B类", "C类"],
+      legendTitle: [
+        {
+          name: "A类",
+          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
+        },
+        {
+          name: "B类",
+          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
+        },
+        {
+          name: "C类",
+          info: "自然资源资产较少(耕地林地总和低于 900公项)",
+        },
+      ],
       // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       legendIcon: [
         {
           background: "#E565FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#0055FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#00FFD5",
-          border: "none"
-        }
+          border: "none",
+        },
       ],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -461,12 +486,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -504,7 +529,7 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+    },
   },
   created() {
     // 目录
@@ -519,10 +544,19 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
-      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
+      let ADataSum =
+        soilData[category[i]].A +
+        waterData[category[i]].A +
+        forestryData[category[i]].A;
+      let BDataSum =
+        soilData[category[i]].B +
+        waterData[category[i]].B +
+        forestryData[category[i]].B;
 
-      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
+      let CDataSum =
+        soilData[category[i]].C +
+        waterData[category[i]].C +
+        forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -533,21 +567,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach(item => {
+    ADataArr.forEach((item) => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach(item => {
+    BDataArr.forEach((item) => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach(item => {
+    CDataArr.forEach((item) => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -563,10 +597,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>
@@ -834,14 +868,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }