监测图斑上图

src/components/echarts/EchartsMap.vue

@@ -41,7 +41,7 @@ export default {
     // }),
   },
   mounted() {
-    this.init();
+    // this.init();
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -51,14 +51,27 @@ export default {
     this.chart = null;
   },
   methods: {
-    init() {
+    init(datas, datatype) {
       this.$echarts.registerMap("YICHUN", this.mapData);
-      this.initChart();
+      this.initChart(datas, datatype);
     },
-    initChart() {
+    initChart(datas, datatype) {
       let that = this;
       that.chart = this.$echarts.init(document.getElementById("areaChart"));
       that.option = {
+        // visualMap: {
+        //   show: true,
+        //   type: "continuous", // 连续型映射
+        //   min: 0, // 最小值
+        //   max: 100, // 最大值
+        //   calculable: true, // 是否显示拖拽用的手柄（手柄可拖拽调整选中范围）
+        //   inRange: {
+        //     color: ["#ffffff", "#ff0000"], // 颜色渐变范围，可以根据需要调整颜色和范围
+        //   },
+        //   textStyle: {
+        //     color: "#fff", // 文本颜色，可根据需要调整
+        //   },
+        // },
         series: [
           {
             type: "map3D",
@@ -82,6 +95,9 @@ export default {
                 textShadowOffsetX: 2,
                 textShadowOffsetY: 2,
               },
+              formatter: (params) => {
+                return params.name + "\n" + params.value[datatype];
+              },
             },
             //光照阴影
             light: {
@@ -114,6 +130,7 @@ export default {
                 color: "#47E8F4", //地图高亮颜色
               },
             },
+            data: datas,
           },
         ],
       };
@@ -139,7 +156,7 @@ export default {
       handler(newVal, oldVal) {
         if (newVal) {
           this.oldGeoJson = oldVal;
-          this.init();
+          // this.init();
         }
       },
       deep: true,

src/views/pageCode/statistic/progress/config.js

@@ -58,85 +58,13 @@ export const judgeTable = [
       { label: "图斑数", prop: "szxzc", width: '60px' },
       { label: "图斑面积", prop: "name", width: '100px', align: 'center' },]
   },
-
-]
-
-
-// 基本信息详情
-export const jbxxInfos = [
-  { label: '地质灾害隐患点名称', value: 'zhmc', },
-  { label: '所在辖区', value: 'szxq', },
-  { label: '所在行政村', value: 'szxzc', },
-  { label: '规模等级', value: 'gmdj', },
-  { label: '经度', value: 'lzb', },
-  { label: '纬度', value: 'bzb', },
-  { label: '威胁人数(人)', value: 'wxrs', },
-  { label: '防灾责任划分', value: 'fzzrhf', },
-  { label: '事权划分', value: 'sqhf', },
-]
-export const zgdwInfos = [
-  { label: '主管单位名称', value: 'zgdw_mc' },
-  { label: '责任领导/职务/电话', value: 'fzr', isslot: true },//zgdw_zrld/zgdw_zrldzw/zgdw_zrlddh
-  { label: '直接责任人/职务/电话', value: 'zjfzr', isslot: true },//zgdw_zjfzr/zgdw_zjfzrzw/zgdw_zjfzrdh
-]
-export const qcqfInfos = [
-  { label: '群测群防员', prop: 'qf_fzr' },
-  { label: '联系电话', prop: 'qf_fzrdh' },
 ]
 
-// 检测资料
-// 隐患排查与整改情况
-export const yhpcInfos = [
-  { label: '排查责任单位', value: 'pc_pczrdw' },
-  { label: '排查负责人/联系电话', value: 'pcfzr', isslot: true },//pc_fzr/pc_fzrdh
-  { label: '警示标志', value: 'pc_jsbz' },
-  { label: '群测群防员配备', value: 'pc_qcqfypb' },
-  { label: '隔离防护设施', value: 'pc_glfhcs' },
-  { label: '其他问题隐患', value: 'pc_qtwtyh' },
-]
+// export const fileHeader = [
+//   { label: "资料名称", prop: "bz", align: 'center' },
+//   { label: "时间", prop: "jc_date", width: '120px' },
+//   { label: "操作", slot: "action", width: '80px', align: 'center' },
+// ]
 
-export const yhzgInfos = [
-  { label: '整改责任单位', value: 'zg_zrdw' },
-  { label: '整改负责人/联系电话', value: 'zgfzr', isslot: true },//zg_fzr/zg_fzrdh
-  { label: '整改措施', value: 'zg_cs' },
-  { label: '整改进展情况', value: 'zg_jzqk' },
-  { label: '整改完成/预计整改完成时间', value: 'zg_jd' },
-  { label: '下一步防治整改计划', value: 'zg_xybfa' },
-]
-
-//应急预案
-export const yjyaInfos = [
-  { label: '地点', value: 'dd' },
-  { label: '基本情况', value: 'jbqk' },
-  { label: '引发因素', value: 'yfys' },
-  { label: '危害对象', value: 'whdx' },
-  { label: '预警等级', value: 'yujdj' },
-  { label: '预警方法', value: 'yujff' },
-  { label: '应急等级', value: 'yjdj' },
-  { label: '应急方法', value: 'yjff' },
-  { label: '撤离路线', value: 'cllx' },
-  { label: '避灾地点', value: 'bzdd' },
-]
-export const jszdInfos = [
-  { label: '姓名', value: 'jszdr_xm' },
-  { label: '电话', value: 'jszdr_dh' },
-  { label: '单位', value: 'jszdr_dw' },
-]
-export const timeInfos = [
-  { label: '编制时间', value: 'bzsj' },
-  { label: '修编时间', value: 'xbsj' },
-]
-
-export const fileHeader = [
-  { label: "资料名称", prop: "bz", align: 'center' },
-  { label: "时间", prop: "jc_date", width: '120px' },
-  { label: "操作", slot: "action", width: '80px', align: 'center' },
-]
-export const fzrHeader = [
-  { label: "负责人", prop: "fzr", align: 'center' },
-  { label: "姓名", prop: "xm", width: '80px ', },
-  { label: "电话", prop: "dh", align: 'center' },
-  { label: "责任", prop: "zr", align: 'center' },
-]
 
 

src/views/pageCode/statistic/progress/index.vue

@@ -84,7 +84,7 @@
               :value="index"
             />
           </el-select>
-          <el-select v-model="ntype">
+          <el-select v-model="ntype" @change="changeNtype">
             <el-option
               v-for="item in typeoptions"
               :key="item.id"
@@ -174,6 +174,7 @@ const mapGeoJson = ref({
   type: "FeatureCollection",
   features: [],
 });
+const mapVals = ref([]);
 
 const tableData = ref([]);
 const data = reactive({
@@ -216,10 +217,10 @@ const showdata = reactive({
       { name: "已判定\n图斑\n(拆分后)", prop: "PDCFH" },
     ],
     result: [
-      { name: "已判定\n图斑", pro: "all" },
-      { name: "判定为\n合法用地", prop: "HFYD", prop3: "占比" },
-      { name: "判定为\n违法用地", prop: "WFYD", prop3: "占比" },
-      { name: "判定为\n其它用地", prop: "QTYD", prop3: "占比" },
+      { name: "已判定\n图斑", pro: "all", api: "pdjg" },
+      { name: "判定为\n合法用地", prop: "HFYD", prop3: "占比", api: "pdjg" },
+      { name: "判定为\n违法用地", prop: "WFYD", prop3: "占比", api: "pdjg" },
+      { name: "判定为\n其它用地", prop: "QTYD", prop3: "占比", api: "pdjg" },
     ],
   },
 
@@ -315,29 +316,40 @@ function getList() {
   // loading.value = true;
   listJctb(queryParams.value).then((res) => {
     tableData.value = res.data;
-    mapGeoJson.value = JSON.parse(res.data[1].geom);
-    console.log(mapGeoJson.value, "---");
-    // res.data.forEach((a) => {
-    //   mapGeoJson.value.features.push({
-    //     type: "Feature",
-    //     properties: {
-    //       adcode:a.xzqdm,
-    //       name: a.xzqmc,
-    //       // center: [116.310316, 39.956074],
-    //       // centroid: [116.23328, 40.026927],
-    //       childrenNum: 0,
-    //       level: "district",
-    //       // acroutes: [100000, 110000],
-    //       // parent: { adcode: 110000 },
-    //     },
-    //     geometry: parse(a.geom),
-    //   });
-    // });
+    // mapGeoJson.value = JSON.parse(res.data[1].geom);
+    mapGeoJson.value.features = [];
+    mapVals.value = [];
+    res.data.forEach((a, i) => {
+      if (i == 1) {
+        mapGeoJson.value.features.push({
+          type: "Feature",
+          properties: {
+            adcode: a.xzqdm,
+            name: a.xzqmc,
+            // center: [116.310316, 39.956074],
+            // centroid: [116.23328, 40.026927],
+            childrenNum: 0,
+            level: "district",
+            // acroutes: [100000, 110000],
+            // parent: { adcode: 110000 },
+          },
+          geometry: JSON.parse(a.geom),
+        });
+        mapVals.value.push({
+          name: a.xzqmc,
+          value: { Number: a.countNumber + 100, Sum: a.countSum },
+        });
+      }
+    });
+    changeNtype();
     // total.value = response.total;
     // loading.value = false;
   });
   listJz(queryParams.value).then((res) => {});
 }
+function changeNtype() {
+  echartsMap.value.init(mapVals.value, ntype.value == "0" ? "Number" : "Sum");
+}
 function setLnbh(data) {
   // this.eData.yName = `变化面积${this.unitList[this.nowunit].unit}`;
   // this.eData.xData = [];