gis弹窗

.env.development

@@ -0,0 +1,2 @@
+VITE_BASE_API='/api'
+

.env.production

@@ -0,0 +1 @@
+VITE_BASE_API=''

package-lock.json

@@ -8,6 +8,7 @@
       "name": "datacentergis",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.7",
         "echarts": "^5.4.3",
         "pinia": "^2.1.7",
         "postcss-px-to-viewport": "^1.1.1",
@@ -992,6 +993,21 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1082,6 +1098,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -1142,6 +1169,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz",
@@ -1562,6 +1597,38 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1850,6 +1917,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -2157,6 +2243,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
@@ -3240,6 +3331,21 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3309,6 +3415,14 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -3352,6 +3466,11 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/doctrine/-/doctrine-3.0.0.tgz",
@@ -3663,6 +3782,21 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3882,6 +4016,19 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -4067,6 +4214,11 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "echarts": "^5.4.3",
     "pinia": "^2.1.7",
     "postcss-px-to-viewport": "^1.1.1",

src/assets/main.css

@@ -18,3 +18,7 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
+
+.esri-sketch__panel {
+  background: #0080ff;
+}

src/components/map/GisMap.vue

@@ -6,28 +6,36 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { myBridge } from '@/utils/map/map.js';
-import { addTrajectory, addPoint, playTrajectory } from '@/utils/map/mapOperation.js';
+import { addPoint, addPolyLine, juHe } from '@/utils/map/mapOperation.js';
+import { useDrawPointStore } from '@/stores/drawPointManage';
 let bridge;
 let listen;
+// const drawPoint = useDrawPointStore();
 onMounted(() => {
   myBridge.bridgeContent = bridge = new CityGis.Bridge({
     id: 'map',
-    url: 'http://10.1.161.53:9082/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=3d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined',
+    url: 'http://10.1.161.53:9082/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=25d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined',
     onReady: function () {
       console.log('ready');
       //默认加载
-      addPoint('newAdress');
-      addPoint('touch');
+
+      // addPoint('newAdress');
+      // addPoint('touch');
     }
   });
 
   listen = (arg) => {
     console.log('listen', arg);
     switch (arg.action) {
-      case 'ViewComplete':
+      case 'userSketch': {
+        const data = arg?.data?.graphic?.geometry?.paths || [];
+
+        //保存数据
+        addPolyLine();
         break;
+      }
     }
   };
   //鼠标操作地图监听

src/service/api/mapRequest.js

@@ -0,0 +1,15 @@
+import { request } from '../request';
+
+export function getDataByArea() {
+  return request({
+    url: '/kanban/getDataByArea',
+    method: 'get'
+  });
+}
+
+export function getHistogramData() {
+  return request({
+    url: '/kanban/getHistogramData',
+    method: 'get'
+  });
+}

src/service/request.js

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+const request = axios.create({
+  baseURL: import.meta.env.VITE_BASE_API,
+  timeout: 10000
+});
+
+// request拦截器
+request.interceptors.request.use((config) => {
+  return config;
+});
+
+request.interceptors.response.use(
+  function (res) {
+    return res.data;
+  },
+  function (error) {
+    return new Error(error);
+  }
+);
+
+export { request };

src/stores/drawPointManage.js

@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useDrawPointStore = defineStore('drawPointStore', () => {
+  //当前绘制点位列表
+  const currentDrawPoint = ref([]);
+
+  //是否开始标会
+  const drawStartStatus = ref(true);
+
+  const setCurrentDrawPoint = () => {};
+  return { currentDrawPoint, drawStartStatus };
+});

src/stores/mapStore.js

@@ -6,12 +6,15 @@ import {
   addPoint,
   closePoint,
   playTrajectory,
-  startBidding
+  startBidding,
+  juHe
 } from '@/utils/map/mapOperation.js';
 
 export const useMapStore = defineStore('mapStore', () => {
   //当前图例高亮图标列表
   const currentToolSelectArray = ref(['newAdress', 'touch']);
+  //当前绘制点位列表
+  const currentDrawPoint = ref([]);
 
   //点亮地图工具图标
   const setCurrentToolSelectArray = (value) => {
@@ -54,7 +57,8 @@ export const useMapStore = defineStore('mapStore', () => {
       }
       case 'Bidding': {
         //标会工具
-        startBidding(false);
+        // startBidding(true);
+        startBidding(true);
         break;
       }
     }

src/utils/map/mapOperation.js

@@ -1,5 +1,5 @@
 import { myBridge } from './map';
-// import text from '@/utils/map/text.json';
+import test2 from './test2.json';
 export function invokeParams(ActionName, params) {
   console.log(ActionName, params);
   myBridge.bridgeContent.Invoke({
@@ -69,14 +69,43 @@ export function addPoint(name) {
         // height: '64px'
       }
     },
-    labels: [
-      {
-        fields: ['#.size'],
-        color: [255, 255, 255, 1],
-        size: 15,
-        labelPlacement: 'center-center'
-      }
-    ]
+    featureReduction: {
+      type: 'cluster',
+      clusterRadius: '100px',
+      popupTemplate: {
+        title: 'Cluster summary',
+        content: 'This cluster represents {cluster_count} earthquakes.',
+        fieldInfos: [
+          {
+            fieldName: 'cluster_count',
+            format: {
+              places: 0,
+              digitSeparator: true
+            }
+          }
+        ]
+      },
+      clusterMinSize: '24px',
+      clusterMaxSize: '60px',
+      labelingInfo: [
+        {
+          deconflictionStrategy: 'none',
+          labelExpressionInfo: {
+            expression: "Text($feature.cluster_count, '#,###')"
+          },
+          symbol: {
+            type: 'text',
+            color: '#ffffff',
+            font: {
+              weight: 'bold',
+              // family: 'Noto Sans',
+              size: '16px'
+            }
+          },
+          labelPlacement: 'center-center'
+        }
+      ]
+    }
   });
 }
 
@@ -247,18 +276,125 @@ export function playTrajectory() {
   });
 }
 
-//标会
+//标绘制线
 export function startBidding(visible = true) {
   invokeParams('userSketch', {
-    type: 'point',
+    type: 'point', //'point',
     visible: visible,
     isTools: true,
     position: 'top-right',
     activeSymbol: {
-      type: 'picture-marker',
-      url: new URL(`@/assets/image/bidding.png`, import.meta.url).href,
-      width: '24px',
-      height: '24px'
+      type: 'simple-marker',
+      size: 5,
+      color: 'red',
+      outline: {
+        width: 0.5,
+        color: 'white'
+      }
+    }
+  });
+}
+
+//画线
+export function addPolyLine(data) {
+  invokeParams('ShowData', {
+    name: 'car_layer1',
+    type: 'polyline',
+    data: {
+      url: data,
+      parsegeometry: "function(item){return [Number(item['x']), Number(item['y'])]}"
+    },
+    legendVisible: false,
+    popupEnabled: false,
+    renderer: {
+      type: 'simple',
+      label: '测试',
+      visualVariables: [],
+      symbol: {
+        type: 'line-3d',
+        symbolLayers: [
+          {
+            type: 'line',
+            size: 2,
+            material: {
+              color: 'black'
+            },
+            cap: 'round',
+            join: 'round'
+          }
+        ]
+      }
     }
   });
 }
+
+export function juHe() {
+  invokeParams('ShowData', {
+    name: 'car_layer',
+    // type: 'cluster',
+    isLocate: true,
+    data: {
+      url: new URL(`@/utils/map/test2.json`, import.meta.url).href,
+      parsegeometry: 'function(item){return {x:Number(item.X),y:Number(item.Y)}}'
+    },
+    popupEnabled: false,
+    legendVisible: false,
+    featureReduction: {
+      type: 'cluster',
+      clusterRadius: '200px',
+      // maxClusterRadius: 200,
+      labelingInfo: [
+        {
+          symbol: {
+            type: 'text',
+            color: '#004a5d',
+            font: {
+              size: '12px'
+            }
+          },
+          labelPlacement: 'center-center'
+        }
+      ],
+      labelsVisible: true,
+      popupEnabled: false,
+      minScale: 0,
+      maxScale: 0
+    },
+    renderer: {
+      type: 'unique-value',
+      field: 'STATUSNAME',
+      uniqueValueInfos: [
+        {
+          value: '已结案',
+          label: '已结案',
+          symbol: {
+            type: 'simple-marker',
+            size: 20,
+            color: 'green',
+            outline: {
+              width: 0.5,
+              color: 'white'
+            }
+          }
+        }
+      ]
+    }
+    // labels: [
+    //   {
+    //     fields: ['#.STATUSNAME'],
+    //     color: [255, 255, 255, 1],
+    //     size: 10,
+    //     labelPlacement: 'center-center'
+    //   }
+    // ]
+  });
+}
+
+//添加arcGisMap图层
+export function addArcgisMap() {
+  invokeParams('AddArcgisMap', {
+    name: '疾控图层',
+    url: 'https://zgscim.china-gis.com/server/rest/services/basemap/basemap_white/MapServer',
+    type: 'wmts'
+  });
+}

src/views/DataCenterGis/components/LeftMap.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script setup>
-import GisMap from '@/components/map/GisMap.vue'
-import Tools from './Tools.vue'
+import GisMap from '@/components/map/GisMap.vue';
+import Tools from './Tools.vue';
 </script>
 
 <style lang="scss" scoped>

src/views/DataCenterGis/components/RightPanel.vue

@@ -19,18 +19,51 @@
     <div class="partition-box">
       <div
         class="partition-card"
-        v-for="(item, index) in partitionData"
-        :key="index + item.name + ''"
+        v-for="(key, index) in Object.keys(partitionData)"
+        :key="index + key + ''"
       >
-        <div class="title">松江区</div>
-        <div class="text-box">
-          <span>发热门诊病例数据</span>
-          <span class="num">21</span>
-        </div>
-        <div class="text-box">
-          <span>超高温</span>
-          <span>2</span>
-        </div>
+        <div class="title">{{ key }}</div>
+        <template v-for="(childKey, index1) in Object.keys(partitionData[key])" :key="index1">
+          <template v-if="childKey == 'infection'">
+            <div class="text-box">
+              <span>传染病</span>
+              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
+            </div>
+          </template>
+          <template v-else-if="childKey == 'fever'">
+            <div class="text-box">
+              <span>发热</span> <span class="num">{{ partitionData[key][childKey][0].num }}</span>
+            </div>
+          </template>
+          <template v-else-if="childKey == 'fuzong'">
+            <div class="text-box text-box-border">
+              <span>腹综</span>
+              <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
+            </div>
+            <div
+              class="text-box text-child-box"
+              v-for="(item, index2) in partitionData[key][childKey]"
+              :key="index2"
+            >
+              <span>{{ item.type }}</span>
+              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
+            </div>
+          </template>
+          <template v-else-if="childKey == 'cold'">
+            <div class="text-box">
+              <span>感冒</span>
+              <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
+            </div>
+            <div
+              class="text-box text-child-box"
+              v-for="(item, index2) in partitionData[key][childKey]"
+              :key="index2"
+            >
+              <span>{{ item.type }}</span>
+              <span class="num">{{ partitionData[key][childKey][0].num }}</span>
+            </div>
+          </template>
+        </template>
       </div>
     </div>
   </div>
@@ -40,94 +73,9 @@
 import { onMounted, ref } from 'vue';
 import titleContent from './TitleContent.vue';
 import * as echarts from 'echarts';
+import { getDataByArea } from '@/service/api/mapRequest';
 import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
-const partitionData = [
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  },
-  {
-    name: '松江区',
-    data: '21',
-    hot: 2
-  }
-];
+const partitionData = ref({});
 
 const leftChartId = ref('');
 const rightChartId = ref('');
@@ -136,7 +84,61 @@ const initChart = (chartDom, option) => {
   const myChart = echarts.init(chartDom);
   option && myChart.setOption(option);
 };
+
+//分区看板
+const getLeftChartData = async () => {
+  try {
+    const res = await getDataByArea();
+    if (res.code == 200 && res.data) {
+      //重塑数据结构
+      Object.keys(res.data).forEach((key) => {
+        if (res.data && res.data[key]) {
+          res.data[key].forEach((item) => {
+            if (!partitionData.value[key]) {
+              partitionData.value[key] = {};
+            }
+            let keyName;
+            if (item.diseaseType == '1') {
+              //传染病
+              keyName = 'infection';
+            } else if (item.diseaseType == '2') {
+              //发热
+              keyName = 'fever';
+            } else if (item.diseaseType == '3') {
+              //腹宗
+              keyName = 'fuzong';
+            } else if (item.diseaseType == '4') {
+              //感冒
+              keyName = 'cold';
+            }
+            if (keyName) {
+              if (!partitionData.value[key][keyName]) {
+                partitionData.value[key][keyName] = [];
+              }
+              partitionData.value[key][keyName].push(item);
+            }
+          });
+        }
+      });
+      console.log(partitionData.value);
+    } else {
+      console.log(res.msg || 'getDataByArea:error');
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+//求和
+const getSum = (numArr) => {
+  return numArr
+    .map((item) => item.num)
+    .reduce((pre, next) => {
+      return pre + next;
+    });
+};
 onMounted(() => {
+  getLeftChartData();
   let xAxisData = [];
   const yAxisData = {
     data1: [],
@@ -210,7 +212,7 @@ onMounted(() => {
       width: 162px;
       background-image: url('@/assets/image/normal-bg.png');
       background-repeat: no-repeat;
-      background-size: 100% 80%;
+      background-size: 100% 60px;
       margin-bottom: 5%;
       .title {
         font-family: Microsoft YaHei;
@@ -228,13 +230,19 @@ onMounted(() => {
         display: flex;
         justify-content: space-between;
         font-size: 14px;
-        padding: 10px 10px 0 9px;
+        padding: 5px 5px 0 9px;
 
         .num {
           color: #0080ff;
           font-size: 16px;
         }
       }
+      .text-box-border {
+        border-bottom: 1px solid #0080ff;
+      }
+      .text-child-box {
+        padding-left: 20px;
+      }
     }
   }
 }

src/views/DataCenterGis/components/Tools.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tools-bar">
-    {{ currentToolSelectArray }}
     <div class="option-box" v-for="tool in toolsOptions" :key="tool.id" @click="handleSelect(tool)">
       <img
         :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"

vite.config.js

@@ -1,8 +1,8 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import postcssPxToViewport from 'postcss-px-to-viewport'
-import commonjs from 'vite-plugin-commonjs'
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import postcssPxToViewport from 'postcss-px-to-viewport';
+import commonjs from 'vite-plugin-commonjs';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -18,6 +18,17 @@ export default defineConfig({
       transformMixedEsModules: true // 是否转换混合的 ES 模块
     })
   ],
+  server: {
+    proxy: {
+      '/api': {
+        //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
+        target: 'http://10.1.161.187:7878/', // 需要代理的域名
+        secure: false,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
@@ -42,4 +53,4 @@ export default defineConfig({
       ]
     }
   }
-})
+});