Merge branch 'master' of http://113.204.105.114:10011/TwoKe/zhgkpt-datav

app/src/components/unit3D.vue

@@ -7,6 +7,35 @@ const props = defineProps({
 })
 let chart, option;
 const pieChart3d = ref();
+const legendItems = ref([
+  {
+    name: '有管理单位（物业）',
+    color: '#5ef8c9'
+  },
+  {
+    name: '有管理单位（非物业）',
+    color: '#5e92f8'
+  },
+  {
+    name: '居民自主管理',
+    color: '#F4F85E'
+  },
+  {
+    name: '街道社区代管',
+    color: '#FC2626'
+  },
+  {
+    name: '其他管理形式',
+    color: '#1162fe'
+  },
+  {
+    name: '无管理主体',
+    color: '#FF7A00'
+  },
+])
+function showValue(name) {
+  return props.fierList.find(item => item.name === name)?.value
+}
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
@@ -14,6 +43,12 @@ function initChart() {
     ...item,
     label: {
       show: true
+    },
+    itemStyle: {
+      color:  (() => {
+      const temp = legendItems.value.find(i => i.name === item.name)
+      return temp.color
+    })()
     }
   })),
     0.75
@@ -228,22 +263,6 @@ function getPie3D(pieData, internalDiameterRatio) {
     typeof internalDiameterRatio !== "undefined"
       ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
       : 1 / 3;
-      
-  let labelSeries = {
-    id: 'labelSeries',
-    type: 'bar3D',
-    //zlevel:-9,
-    barSize: [0, 0],
-    data: [],
-    label: {
-        show: true,
-        formatter: function (params) {
-            return `${params.value[3]}`;
-        },
-        color: '#fff',
-        fontSize: '18px'
-    },
-};
   // 为每一个饼图数据，生成一个 series-surface 配置
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -292,47 +311,9 @@ function getPie3D(pieData, internalDiameterRatio) {
     );
     startValue = endValue;
     legendData.push(series[i].name);
-     // 判断增加 label 效果 @20210613
-    if (pieData[i].label && pieData[i].label.show) {
-        let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-        labelSeries.data.push({
-            name: series[i].name,
-            value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
-            itemStyle: {
-                opacity: 1,
-            },
-        });
-    }
   }
-  // 将 labelSeries 添加进去 @20210613
-  series.push(labelSeries);
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
-    color: [ "#FC2626", "#1162fe", "#F4F85E", "#FF7A00", "#5ef8c9", "#5e92f8"],
-    legend: {
-      // type: "scroll",
-      data: ["有管理单位（物业）", "有管理单位（非物业）", "居民自主管理", "街道社区代管", "其他管理形式", "无管理主体"],
-      icon: "roundRect",
-      orient: "vertical",
-      padding: 5,
-      itemGap: 10,
-      top: "8%",
-      right: 0,
-      itemWidth: 10, // 设置宽度
-      itemHeight: 10, // 设置高度
-      selectedMode: true,
-      textStyle: {
-        color: "#FFFFFF",
-        fontSize: 14,
-        lineHeight: 14,
-        rich: {
-          a: {
-            // verticalAlign: "middle",
-          },
-        },
-        padding: [0, 0, -3, 0],
-      },
-    },
     tooltip: {
       formatter: (params) => {
         if (params.seriesName !== "mouseoutSeries") {
@@ -413,6 +394,11 @@ function getPie3D(pieData, internalDiameterRatio) {
 <template>
   <div class="container">
     <div ref="pieChart3d" class="chart"></div>
+    <ul class="legend">
+      <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
+        '--bg': legend.color
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
+    </ul>
   </div>
 </template>
 
@@ -423,6 +409,29 @@ function getPie3D(pieData, internalDiameterRatio) {
   position: relative;
 }
 
+.container .legend {
+  position: absolute;
+  right: 10px;
+  top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 500;
+  & > li {
+    list-style: none;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  & > li::before {
+    content: "";
+    display: inline-block;
+    margin-right: 5px;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background-color: var(--bg);
+  }
+}
 .container::after {
   content: "";
   position: absolute;

app/src/views/Detail/components/YhModalContent.vue

@@ -75,8 +75,7 @@ export default {
   },
   props: {
     qy: String,
-    default: Object,
-    yhles: Array,
+    default: Object
   },
   watch: {
     default: {
@@ -93,15 +92,7 @@ export default {
       },
       immediate: true,
       deep: true,
-    },
-    yhles: {
-      handler(val) {
-        this.params.zdqx = val;
-        this.funList();
-      },
-      immediate: true,
-      deep: true,
-    },
+    }
   },
   methods: {
     funList() {

app/src/views/Home/components/BasicInfoModalContent.vue

@@ -30,10 +30,7 @@ export default {
   },
   props: {
     qy: String,
-    default: Object,
-    typeName: String,
-    fxdjs: String,
-    titleName: String,
+    default: Object
   },
   watch: {
     qy: {
@@ -45,43 +42,6 @@ export default {
       immediate: true,
       deep: true,
     },
-    typeName: {
-      handler(val) {
-        this.params.dl = val;
-        this.funUnitList();
-      },
-      immediate: true,
-      deep: true,
-    },
-    fxdjs: {
-      handler(val) {
-        this.params.fxdj = val;
-        this.funUnitList();
-      },
-      immediate: true,
-      deep: true,
-    },
-    titleName: {
-      handler(val) {
-       this.params={}
-        if (val == "超高层建筑总数（栋）") {
-        this.params.gd = "100米以上";
-        this.funUnitList();
-      }
-      if (val == "2000年底前老旧住宅建筑总数（栋）") {
-        this.params.jcnd = "2000年前";
-        this.params.dl = "居民建筑";
-        this.funUnitList();
-      }
-      if (val == "2000年底前老旧商业混合体建筑总数（栋）") {
-        this.params.jcnd = "2000年前";
-        this.params.dl = "公共建筑";
-        this.funUnitList();
-      }
-      },
-      immediate: true,
-      deep: true,
-    },
     value: {
       handler() {
         this.handUnitList();

app/src/views/Home/components/HiddenDangerDetection/HiddenDangerType.vue

@@ -59,7 +59,7 @@
     </div>
     <!-- 隐患 -->
     <basic-modal top="120px" ref="yhModal" name="“一楼一策”隐患整治清单">
-      <YhModalContent :default="yhModal" :yhles="yhles" />
+      <YhModalContent :default="yhModal" />
     </basic-modal>
   </div>
 </template>
@@ -77,8 +77,7 @@ export default {
     return {
       chart: null,
       timer: "",
-      yhModal: {},
-      yhles:[]
+      yhModal: {}
     };
   },
   watch: {
@@ -125,19 +124,6 @@ export default {
           backgroundColor: "#02809a",
           borderColor: "rgba(0,213,255, .6)"
         },
-        // legend: {
-        //   show: true,
-        //   right: 30,
-        //   bottom: 0,
-        //   itemWidth: 10,
-        //   itemHeight: 10,
-        //   itemGap: 8,
-        //   textStyle: {
-        //     color: "#fff",
-        //     fontSize: 14,
-        //   },
-        //   data: ["消防设施", "生命通道", "用电用气", "消防管理"],
-        // },
         color: ["#00a2ff", "#00eaff", "#16c843", "#C3C71B"],
         series: [
           // 数据展示层
@@ -280,8 +266,9 @@ export default {
       return dataArr;
     },
     showModlus(val) {
-      this.yhles.push(val)
-      console.log('------=www',this.yhles);
+      this.yhModal = {
+        zdqx: [val]
+      }
       this.showModal("yhModal");
     },
   },

app/src/views/Home/components/MapChartsCategory.vue

@@ -222,7 +222,14 @@ export default {
           value: 0,
         },
       ],
-      mapChart: null
+      mapChart: null,
+      mapType: {
+        '红色': '#ff0b0b',
+        '橙色': '#ff833d',
+        '黄色': '#fbff3d',
+        '蓝色': '#35c2ff',
+        '绿色': '#5aed9f'
+      }
     };
   },
   watch: {
@@ -277,11 +284,11 @@ export default {
   },
   methods: {
     convertMapData(data) {
-      const maxValue = (this.calcMaxData(data) / 5)
-      const intData = toInt(maxValue)
+      // const maxValue = (this.calcMaxData(data) / 5)
+      // const intData = toInt(maxValue)
       return data.map(item => ({...item,
           label: {
-            color: item.value < intData * 3 ? '#000' : '#fff'
+            color:  '#000'
           }
         }))
     },
@@ -461,7 +468,7 @@ export default {
                 color: "#fff",
               },
               itemStyle: {
-                areaColor: "#75b9da",
+                areaColor: "#9f5aed",
                 borderColor: "#fff",
                 shadowColor: "#5a9cdd",
                 shadowBlur: 0,

app/src/views/Home/components/RiskWarning.vue

@@ -12,7 +12,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>重大风险({{ riskList[3].sl }})</span>
+        <span>重大风险({{ showValue("重大风险") }})</span>
       </li>
       <li @click="showStice('较大风险')" style="margin-bottom: 12px;">
         <span
@@ -24,7 +24,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>较大风险({{ riskList[2].sl }})</span>
+        <span>较大风险({{ showValue("较大风险") }})</span>
       </li>
       <li @click="showStice('一般风险')" style="margin-bottom: 12px;">
         <span
@@ -36,7 +36,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>一般风险({{ riskList[0].sl }})</span>
+        <span>一般风险({{ showValue("一般风险") }})</span>
       </li>
       <li @click="showStice('低风险')">
         <span
@@ -48,7 +48,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>低风险({{ riskList[1].sl }})</span>
+        <span>低风险({{ showValue("低风险") }})</span>
       </li>
     </ul>
   </div>
@@ -93,6 +93,10 @@ export default {
     },
   },
   methods: {
+    showValue(label) {
+      const item = this.riskList.find(item => item.fxdj === label)
+      return item ? item.sl : 0
+    },
     initChart(srcData) {
       let data = [];
       srcData.forEach((p) => {
@@ -228,6 +232,19 @@ export default {
         //   },
         //   data: data.map((p) => p.name),
         // },
+        tooltip: {
+            show: true,
+            confine: true,
+            extraCssText: "z-index: 1000;",
+            backgroundColor: "#02809a",
+            borderColor: "rgba(0,213,255, .6)",
+            textStyle: {
+              color: "#fff",
+            },
+            formatter(params) {
+              return `${params.name}栋`
+            }
+          },
       };
       // console.log(option.legend);
       this.chart.setOption(option);

app/src/views/Home/index.vue

@@ -67,7 +67,7 @@
       </border-panel>
     </div>
     <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
-      <BasicInfoModalContent :qy="qy" :typeName="typeName" :fxdjs="fxdjs" :titleName="titleName" />
+      <BasicInfoModalContent :qy="qy" :default="defaultModel" />
     </basic-modal>
     <basic-modal top="120px" ref="autoManageModal"  name="自主管理">
       <zzglModul ref="zzglModul" 
@@ -121,9 +121,7 @@ export default {
       iotList: {},
       fireIndexType: 0,
       heatMap: [],
-      typeName: "",
-      fxdjs:'',
-      titleName:'',
+      defaultModel: {},
       mapType: {
         "红色": 90,
         "橙色": 70,
@@ -182,21 +180,37 @@ export default {
     },
     showTc(val) {
       if (val) {
-        this.typeName = val;
+        // this.typeName = val;
+        this.defaultModel = {
+          dl: val
+        }
         this.showModal("basicInfoModal");
       }
     },
     showFxyj(val){
-      this.fxdjs=val
+      this.defaultModel = {
+        fxdj: val
+      }
       this.showModal("basicInfoModal");
     },
     openBasicModal() {
       this.showModal("basicInfoModal");
     },
     UnitType(name){
-      console.log('000000000',name);
-      this.titleName=name
-      
+      const params={}
+        if (name == "超高层建筑总数（栋）") {
+        params.gd = "100米以上";
+      }
+      if (name == "2000年底前老旧住宅建筑总数（栋）") {
+        params.jcnd = "2000年前";
+        params.dl = "居民建筑";
+      }
+      if (name == "2000年底前老旧商业混合体建筑总数（栋）") {
+        params.jcnd = "2000年前";
+        params.dl = "公共建筑";
+      }
+      this.defaultModel = params
+      this.showModal("basicInfoModal");
     },
     // 风险预警
     getList(){