地图标会

src/components/map/GisMap.vue

@@ -8,7 +8,12 @@
 <script setup>
 import { onMounted } from 'vue';
 import { myBridge } from '@/utils/map/map.js';
-import { addPoint, addPolyLine, addTrajectory, playTrajectory } from '@/utils/map/mapOperation.js';
+import {
+  addImagePoint,
+  addJuHePoint,
+  addTrajectory,
+  playTrajectory
+} from '@/utils/map/mapOperation.js';
 import { useDrawPointStore } from '@/stores/drawPointManage';
 import {
   getTrajectorPointOnCarById,
@@ -26,9 +31,20 @@ onMounted(() => {
     onReady: function () {
       console.log('ready');
       //默认加载
-
-      // addJuHePoint('newAdress');
-      // addJuHePoint('touch');
+      addImagePoint('newAdress', [{ x: -1870.119238446634, y: -12912.502302966037 }], {
+        imageUrl: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href
+      });
+      addImagePoint(
+        'touch',
+        [
+          { x: 9604.191858692775, y: -19248.016463574288 },
+          { x: 13799.47156001244, y: -11944.303054916069 },
+          { x: 17672.277882889364, y: -9192.565371300574 }
+        ],
+        {
+          imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
+        }
+      );
     }
   });
 

src/stores/mapStore.js

@@ -39,17 +39,30 @@ export const useMapStore = defineStore('mapStore', () => {
       switch (value) {
         case 'newAdress': {
           //新址图标
-          addJuHePoint(value);
+          addImagePoint('newAdress', [{ x: -1870.119238446634, y: -12912.502302966037 }], {
+            imageUrl: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href
+          });
           break;
         }
         case 'touch': {
           //密接图标
-          const res = await getTrajectorPointOnPeople({ type: 1 });
-          if (res?.code == 200) {
-            addJuHePoint(value, res?.data || []);
-          } else {
-            console.log('获取传染病数据错误');
-          }
+          addImagePoint(
+            'touch',
+            [
+              { x: 9604.191858692775, y: -19248.016463574288 },
+              { x: 13799.47156001244, y: -11944.303054916069 },
+              { x: 17672.277882889364, y: -9192.565371300574 }
+            ],
+            {
+              imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
+            }
+          );
+          // const res = await getTrajectorPointOnPeople({ type: 1 });
+          // if (res?.code == 200) {
+          //   addJuHePoint(value, res?.data || []);
+          // } else {
+          //   console.log('获取传染病数据错误');
+          // }
           // addImagePoint(value, {
           //   imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
           // });

src/utils/chartsOptions.js

@@ -1,4 +1,4 @@
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
 
 export function stackRightOptions(xAxisData, yAxisData) {
   return {
@@ -16,11 +16,11 @@ export function stackRightOptions(xAxisData, yAxisData) {
     },
     grid: {
       top: 10,
-      bottom: 20
+      bottom: 20,
+      left: 35
     },
     series: [
       {
-        name: 'bar',
         type: 'bar',
         stack: 'one',
         data: yAxisData.data1,
@@ -32,7 +32,6 @@ export function stackRightOptions(xAxisData, yAxisData) {
         }
       },
       {
-        name: 'bar2',
         type: 'bar',
         stack: 'one',
         data: yAxisData.data2,
@@ -44,7 +43,6 @@ export function stackRightOptions(xAxisData, yAxisData) {
         }
       },
       {
-        name: 'bar3',
         type: 'bar',
         stack: 'one',
         data: yAxisData.data3,
@@ -56,7 +54,6 @@ export function stackRightOptions(xAxisData, yAxisData) {
         }
       },
       {
-        name: 'bar4',
         type: 'bar',
         stack: 'one',
         data: yAxisData.data4,
@@ -92,7 +89,7 @@ export function stackRightOptions(xAxisData, yAxisData) {
         }
       }
     ]
-  }
+  };
 }
 
 export function stackLeftOptions(xAxisData, yAxisData) {
@@ -100,7 +97,7 @@ export function stackLeftOptions(xAxisData, yAxisData) {
     xAxis: [
       {
         type: 'category',
-        data: ['2002', '2003', '2004', '2005', '2006', '2007', '2008'],
+        data: xAxisData,
         axisPointer: {
           show: false
         },
@@ -111,28 +108,27 @@ export function stackLeftOptions(xAxisData, yAxisData) {
     ],
     grid: {
       top: 10,
-      bottom: 20
+      bottom: 20,
+      left: 35,
+      right: 35
     },
     yAxis: [
       {
         type: 'value',
         min: 0,
-        max: 250,
         interval: 50
       },
       {
         type: 'value',
         min: 0,
-        max: 25,
-        interval: 5
+        interval: 50
       }
     ],
     series: [
       {
-        name: 'Evaporation',
         type: 'bar',
-        barWidth: 6,
-        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+        barWidth: 3,
+        data: yAxisData.data1,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -147,10 +143,43 @@ export function stackLeftOptions(xAxisData, yAxisData) {
         }
       },
       {
-        name: 'Precipitation',
         type: 'bar',
-        barWidth: 6,
-        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+        barWidth: 3,
+        data: yAxisData.data2,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#00D5FF'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,195,255,0)'
+            }
+          ])
+        }
+      },
+      {
+        type: 'bar',
+        barWidth: 3,
+        data: yAxisData.data4,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#00D5FF'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,195,255,0)'
+            }
+          ])
+        }
+      },
+      {
+        type: 'bar',
+        barWidth: 3,
+        data: yAxisData.data3,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -165,12 +194,11 @@ export function stackLeftOptions(xAxisData, yAxisData) {
         }
       },
       {
-        name: 'Temperature',
         type: 'line',
         smooth: true,
         yAxisIndex: 1,
         showSymbol: false,
-        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+        data: yAxisData.line,
         lineStyle: {
           color: '#FFD400',
           width: 1
@@ -190,5 +218,5 @@ export function stackLeftOptions(xAxisData, yAxisData) {
         }
       }
     ]
-  }
+  };
 }

src/views/DataCenterGis/components/RightPanel.vue

@@ -73,7 +73,7 @@
 import { onMounted, ref } from 'vue';
 import titleContent from './TitleContent.vue';
 import * as echarts from 'echarts';
-import { getDataByArea } from '@/service/api/mapRequest';
+import { getDataByArea, getHistogramData } from '@/service/api/mapRequest';
 import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
 const partitionData = ref({});
 
@@ -85,6 +85,74 @@ const initChart = (chartDom, option) => {
   option && myChart.setOption(option);
 };
 
+const getBarData = async () => {
+  try {
+    const res = await getHistogramData();
+    if (res.code == 200) {
+      const data = res?.data || [];
+      const dateArr = Object.keys(data);
+      const data1 = dateArr.map((item) => {
+        return { date: item, num: 0 };
+      });
+      const data2 = dateArr.map((item) => {
+        return { date: item, num: 0 };
+      });
+      const data3 = dateArr.map((item) => {
+        return { date: item, num: 0 };
+      });
+      const data4 = dateArr.map((item) => {
+        return { date: item, num: 0 };
+      });
+      Object.values(data).forEach((item) => {
+        item.forEach((element) => {
+          if (element.type == '1') {
+            data1.forEach((data) => {
+              if (element.month == data.date) {
+                data.num = element.num;
+              }
+            });
+          } else if (element.type == '2') {
+            data2.forEach((data) => {
+              if (element.month == data.date) {
+                data.num = element.num;
+              }
+            });
+          } else if (element.type == '3') {
+            data3.forEach((data) => {
+              if (element.month == data.date) {
+                data.num = element.num;
+              }
+            });
+          } else if (element.type == '4') {
+            data4.forEach((data) => {
+              if (element.month == data.date) {
+                data.num = element.num;
+              }
+            });
+          }
+        });
+      });
+
+      const yAxisData = {
+        data1: Object.values(data1).map((item) => item.num),
+        data2: Object.values(data2).map((item) => item.num),
+        data3: Object.values(data3).map((item) => item.num),
+        data4: Object.values(data4).map((item) => item.num)
+      };
+      const line = yAxisData.data1.map((item, index) => {
+        return (
+          (item + yAxisData.data2[index] + yAxisData.data3[index] + yAxisData.data4[index]) / 4
+        );
+      });
+      yAxisData.line = line;
+      initChart(rightChartId.value, stackRightOptions(dateArr, yAxisData));
+      initChart(leftChartId.value, stackLeftOptions(dateArr, yAxisData));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 //分区看板
 const getLeftChartData = async () => {
   try {
@@ -139,23 +207,7 @@ const getSum = (numArr) => {
 };
 onMounted(() => {
   getLeftChartData();
-  let xAxisData = [];
-  const yAxisData = {
-    data1: [],
-    data2: [],
-    data3: [],
-    data4: []
-  };
-
-  for (let i = 0; i < 10; i++) {
-    xAxisData.push('202' + i);
-    yAxisData.data1.push(+(Math.random() * 2).toFixed(2));
-    yAxisData.data2.push(+(Math.random() * 5).toFixed(2));
-    yAxisData.data3.push(+(Math.random() + 0.3).toFixed(2));
-    yAxisData.data4.push(+Math.random().toFixed(2));
-  }
-  initChart(rightChartId.value, stackRightOptions(xAxisData, yAxisData));
-  initChart(leftChartId.value, stackLeftOptions(xAxisData, yAxisData));
+  getBarData();
 });
 </script>
 

vite.config.js

@@ -19,6 +19,8 @@ export default defineConfig({
     })
   ],
   server: {
+    port: '8090',
+    host: '0.0.0.0',
     proxy: {
       '/api': {
         //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
@@ -34,6 +36,13 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/cityGIsApi/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
       }
+      // '^/citygis-gateway': {
+      //   //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
+      //   target: 'http://10.1.161.53:30080/', // 需要代理的域名
+      //   secure: false,
+      //   changeOrigin: true,
+      //   rewrite: (path) => path.replace(/^\/citygis-gateway/, 'citygis-gateway/')
+      // }
     }
   },
   resolve: {