修改大屏页面样式，对接接口

src/api/home.js

@@ -1,5 +1,4 @@
 import request from "@/util/axios";
-
 export const queryResolve = () =>
   request({
     url: "/api/blade-business/report/getMediateFinish",
@@ -12,28 +11,32 @@ export const querySubmit = () =>
     method: "get",
   });
 
-export const queryList = () =>
+export const queryList = (query) =>
   request({
     url: "/api/blade-business/report/getAppealList",
     method: "get",
+    params: query,
   });
 
-export const queryTrend = () =>
+export const queryTrend = (query) =>
   request({
     url: "/api/blade-business/report/getAppealByMon",
     method: "get",
+    params: query,
   });
 
-export const queryType = () =>
+export const queryType = (query) =>
   request({
     url: "/api/blade-business/report/getAppealTypePercent",
     method: "get",
+    params: query,
   });
 
-export const querySort = () =>
+export const querySort = (query) =>
   request({
     url: "/api/blade-business/report/getAppealHot",
     method: "get",
+    params: query,
   });
 
 // 矛盾解决数量
@@ -72,3 +75,17 @@ export const getStreetList = () =>
     url: "/api/blade-system/dict/common/getStreetList",
     method: "get",
   });
+
+export const getStreetPh = (query) =>
+  request({
+    url: "/api/blade-business/report/getReportSort",
+    method: "get",
+    params: query,
+  });
+
+export const getListDetail = (query) =>
+  request({
+    url: "/api/blade-business/appealMediate/getLastMediation",
+    method: "get",
+    params: query,
+  });

src/assets/fonts/font.css

@@ -20,3 +20,14 @@
     font-style: normal;  
 
   }
+  @font-face {  
+
+    font-family: 'SOUR';
+
+    src: url('../fonts/SourceHanSansCN-Bold.otf');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }

src/components/PieWithHuan.vue

@@ -0,0 +1,380 @@
+<template>
+  <div ref="dom" class="my-charts"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { on, off } from "@/libs/tools";
+import { nextTick } from "vue";
+let timerId = null;
+export default {
+  name: "pie",
+  props: {
+    value: Object,
+    totalNum:Number
+  },
+  mounted() {
+      this.total = this.value.data.reduce((totalNum, item) => totalNum + item.value, 0)
+    this.initData();
+  },
+  data() {
+    return {
+      dom: null,
+      option: null,
+      timerId: null,
+      total:0,
+      timerOut:null,
+    };
+  },
+
+  watch: {
+    totalNum:{
+      handler(newVal, oldVal) {
+        // this.total = newVal
+        this.initData();
+      },
+    },
+  },
+  methods: {
+    resize() {
+      // this.dom.resize()
+    },
+    initData() {
+      const self = this;
+      self.timerId = null
+      if(self.timerOut){
+        clearTimeout(self.timerOut)
+      }
+      nextTick(() => {
+        let angle = 0; //角度，用来做简单的动画效果的
+
+        let dom = echarts.init(this.$refs.dom);
+
+        let title = this.value.title;
+        
+        let arr1 = []; 
+        let arr2 = [];
+        let colorArr = this.value.data.map((val) => {
+          return val.color;
+        });
+        let xAxisData = this.value.data.map((val) => {
+          return val.name;
+        });
+        
+        // console.log(this.value.data)
+        // console.log(colorArr)
+
+        let option = {
+          title: {
+            text: self.total,
+            subtext: "纠纷总数",
+            top: '35%',
+            left: '24%',
+            textStyle: {
+              color: '#fff',
+              fontSize: 20,
+              fontWeight: 400
+            },
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 14,
+              fontWeight: 400
+            },
+            textAlign: 'center'
+        },
+          legend: {
+            show: true,
+            icon: "circle",
+            orient: "vertical",
+            right: "0",
+            top: "20%",
+            itemWidth: 11,
+            itemHeight: 11,
+            width:220,
+            itemGap: 30,
+            formatter: ["{a|{name}}"].join("\n"),
+            textStyle: {
+              rich: {
+                a: {
+                    width: 180, // 每个图例的宽度，具体根据字数调整
+                    // lineHeight: 1,
+                    color: "#fff",
+                },
+              },
+            },
+          },
+          color: colorArr,
+          tooltip: {
+            trigger: "item",
+          },
+          grid: {
+            left: "0",
+            right: "0",
+            top: "0",
+            bottom: "0",
+            // containLabel: true
+          },
+          series: [
+            // 紫色
+            {
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                return {
+                  type: "arc",
+                  shape: {
+                    cx: api.getWidth() / 4,
+                    cy: api.getHeight() / 2,
+                    r: Math.min(api.getWidth(), api.getHeight()) / 2,
+                    startAngle: ((0 + angle) * Math.PI) / 180,
+                    endAngle: ((90 + angle) * Math.PI) / 180,
+                  },
+                  style: {
+                    stroke: "#8383FA",
+                    fill: "transparent",
+                    lineWidth: 1.5,
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              // name: 'ring5', //紫点
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                let x0 = api.getWidth() / 4;
+                let y0 = api.getHeight() / 2;
+                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
+                let point = getCirlPoint(x0, y0, r, 90 + angle);
+                return {
+                  type: "circle",
+                  shape: {
+                    cx: point.x,
+                    cy: point.y,
+                    r: 4,
+                  },
+                  style: {
+                    stroke: "#8450F9", //绿
+                    fill: "#8450F9",
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            // 蓝色
+            {
+              // name: 'ring5',
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                return {
+                  type: "arc",
+                  shape: {
+                    cx: api.getWidth() / 4,
+                    cy: api.getHeight() / 2,
+                    r: Math.min(api.getWidth(), api.getHeight()) / 2,
+                    startAngle: ((180 + angle) * Math.PI) / 180,
+                    endAngle: ((270 + angle) * Math.PI) / 180,
+                  },
+                  style: {
+                    stroke: "#4386FA",
+                    fill: "transparent",
+                    lineWidth: 1.5,
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              // name: 'ring5', // 蓝色
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                let x0 = api.getWidth() / 4;
+                let y0 = api.getHeight() / 2;
+                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
+                let point = getCirlPoint(x0, y0, r, 180 + angle);
+                return {
+                  type: "circle",
+                  shape: {
+                    cx: point.x,
+                    cy: point.y,
+                    r: 4,
+                  },
+                  style: {
+                    stroke: "#4386FA", //绿
+                    fill: "#4386FA",
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              // name: 'ring5',
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                return {
+                  type: "arc",
+                  shape: {
+                    cx: api.getWidth() / 4,
+                    cy: api.getHeight() / 2,
+                    r: Math.min(api.getWidth(), api.getHeight()) / 2,
+                    startAngle: ((270 + -angle) * Math.PI) / 180,
+                    endAngle: ((40 + -angle) * Math.PI) / 180,
+                  },
+                  style: {
+                    stroke: "#0CD3DB",
+                    fill: "transparent",
+                    lineWidth: 1.5,
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            // 橘色
+            {
+              // name: 'ring5',
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                return {
+                  type: "arc",
+                  shape: {
+                    cx: api.getWidth() / 4,
+                    cy: api.getHeight() / 2,
+                    r: Math.min(api.getWidth(), api.getHeight()) / 2,
+                    startAngle: ((90 + -angle) * Math.PI) / 180,
+                    endAngle: ((220 + -angle) * Math.PI) / 180,
+                  },
+                  style: {
+                    stroke: "#FF8E89",
+                    fill: "transparent",
+                    lineWidth: 1.5,
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              // name: 'ring5',
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                let x0 = api.getWidth() / 4;
+                let y0 = api.getHeight() / 2;
+                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
+                let point = getCirlPoint(x0, y0, r, 90 + -angle);
+                return {
+                  type: "circle",
+                  shape: {
+                    cx: point.x,
+                    cy: point.y,
+                    r: 4,
+                  },
+                  style: {
+                    stroke: "#FF8E89", //粉
+                    fill: "#FF8E89",
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              // name: 'ring5', //绿点
+              type: "custom",
+              coordinateSystem: "none",
+              renderItem: function (params, api) {
+                let x0 = api.getWidth() / 4;
+                let y0 = api.getHeight() / 2;
+                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
+                let point = getCirlPoint(x0, y0, r, 270 + -angle);
+                return {
+                  type: "circle",
+                  shape: {
+                    cx: point.x,
+                    cy: point.y,
+                    r: 4,
+                  },
+                  style: {
+                    stroke: "#0CD3DB", //绿
+                    fill: "#0CD3DB",
+                  },
+                  silent: true,
+                };
+              },
+              data: [0],
+            },
+            {
+              name: title,
+              type: "pie",
+              radius: ["72%", "60%"],
+              // radius: "75%",
+              center: ["25%", "50%"],
+              hoverAnimation: false,
+              label: {
+                show: false,
+                normal: {
+                  show: false,
+                  position: "center",
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: function (obj) {
+                    return obj.data.color;
+                  },
+                },
+              },
+              data: this.value.data,
+            },
+          ],
+        };
+        this.option = option;
+        //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+        function getCirlPoint(x0, y0, r, angle1) {
+          let x1 = x0 + r * Math.cos((angle1 * Math.PI) / 180);
+          let y1 = y0 + r * Math.sin((angle1 * Math.PI) / 180);
+          return {
+            x: x1,
+            y: y1,
+          };
+        }
+
+        function draw() {
+          angle = angle + 1;
+          dom.setOption(option);
+          self.timerId = window.requestAnimationFrame(draw);
+        }
+        if (this.timerId) {
+          // dom.clear()
+          // dom.dispose()
+          cancelAnimationFrame(this.timerId);
+          // dom.setOption(option, true);
+          // myChart：图形绘制容器
+          // dom.removeAttribute('_echarts_instance_')
+        } else {
+          // setTimeout(() =>{
+            dom.setOption(option, true);
+          // },500)
+        }
+        self.timerOut = setTimeout(() => {
+          draw();
+        }, 2000);
+      });
+    },
+  },
+  beforeUnmount() {
+    cancelAnimationFrame(this.timerId);
+    off(window, "resize", this.resize);
+  },
+};
+</script>

src/data/allData.js

@@ -3,135 +3,139 @@
  */
 export const QingDaoArea = [
   {
-        name: '平度市',
+    name: "平度市",
     lonlat: [119.958734, 36.756091],
   },
   {
-        name: '莱西市',
+    name: "莱西市",
     lonlat: [120.422906, 36.813283],
   },
   {
-        name: '即墨区',
+    name: "即墨区",
     lonlat: [120.686578, 36.491572],
   },
   {
-        name: '黄岛区',
+    name: "黄岛区",
     lonlat: [119.901056, 35.88197],
   },
   {
-        name: '城阳区',
+    name: "城阳区",
     lonlat: [120.332269, 36.270448],
   },
   {
-        name: '崂山区',
+    name: "崂山区",
     lonlat: [120.609674, 36.184039],
   },
   {
-        name: '李沧区',
+    name: "李沧区",
     lonlat: [120.422765, 36.175832],
   },
   {
-        name: '市北区',
+    name: "市北区",
     lonlat: [120.371742, 36.112084],
   },
   {
-        name: '市南区',
+    name: "市南区",
     lonlat: [120.368115, 36.059835],
   },
-]
+];
 /**
  * 胶州镇街
  */
 export const JiaoZhouStreets = [
   {
-        name: '洋河镇',
+    name: "洋河镇",
     lonlat: [119.93812790669215, 36.10555101363873],
   },
   {
-        name: '里岔镇',
+    name: "里岔镇",
     lonlat: [119.81427191569176, 36.088312187216864],
   },
   {
-        name: '铺集镇',
+    name: "铺集镇",
     lonlat: [119.69961418613835, 36.10939977641625],
   },
   {
-        name: '九龙街道',
+    name: "九龙街道",
     lonlat: [120.05134785376572, 36.1910063974024],
   },
   {
-        name: '胶西街道',
+    name: "上合示范区",
+    lonlat: [120.098588, 36.168966],
+  },
+  {
+    name: "胶西街道",
     lonlat: [119.87578419752631, 36.22684798508332],
   },
   {
-        name: '胶北街道',
+    name: "胶北街道",
     lonlat: [119.96510683139181, 36.3662414967107],
   },
   {
-        name: '胶莱街道',
+    name: "胶莱街道",
     lonlat: [120.05558423842885, 36.43479965967534],
   },
   {
-        name: '李哥庄镇',
+    name: "李哥庄镇",
     lonlat: [120.176459, 36.336042],
   },
   {
-        name: '胶东街道',
+    name: "胶东街道",
     lonlat: [120.07256238227389, 36.343183055182685],
   },
   {
-        name: '中云街道',
+    name: "中云街道",
     lonlat: [119.9773152727287, 36.2800766934777],
   },
   {
-        name: '阜安街道',
+    name: "阜安街道",
     lonlat: [120.02124745283263, 36.28850013293789],
   },
   {
-        name: '三里河街道',
+    name: "三里河街道",
     lonlat: [119.987337307199, 36.23296421121942],
   },
-]
+];
 /**
  * 街道编码配置
  */
 export const JiaoZhouStreetsCodeObj = {
-    洋河镇: '370281111',
-    铺集镇: '370281105',
-    李哥庄镇: '370281102',  
-    九龙街道: '370281006',
-    胶西街道: '370281009',
-    胶北街道: '370281008',
-    胶东街道: '370281007',
-    阜安街道: '370281001',
-    中云街道: '370281002',
-    三里河街道: '370281004',
-    里岔镇: '370281108',
-    胶莱街道: '370281010',
-}
+  洋河镇: "370281111",
+  铺集镇: "370281105",
+  李哥庄镇: "370281102",
+  九龙街道: "370281006",
+  胶西街道: "370281009",
+  胶北街道: "370281008",
+  胶东街道: "370281007",
+  阜安街道: "370281001",
+  中云街道: "370281002",
+  三里河街道: "370281004",
+  里岔镇: "370281108",
+  胶莱街道: "370281010",
+};
 export const wangge3MapTexts = [
   {
-        name: '商城社区',
+    name: "商城社区",
     lonlat: [119.88975, 36.116219],
   },
   {
-        name: '商城社区2',
+    name: "商城社区2",
     lonlat: [119.81427191569176, 36.088312187216864],
   },
-]
+];
 export const wangge4MapTexts = [
   {
-        name: '龙泉社区第一网格',
+    name: "龙泉社区第一网格",
     lonlat: [120.059352, 36.360455],
   },
   {
-        name: '龙泉社区第二网格',
+    name: "龙泉社区第二网格",
     lonlat: [119.943088, 36.283618],
   },
-]
+];
 
-export const data1 = {}
+export const data1 = {};
 
 function getRandom(num) {
-    return parseInt(Math.random() * num)
+  return parseInt(Math.random() * num);
 }

src/libs/DHWs.js

@@ -5378,9 +5378,9 @@
     loginClient() {
       this.loginEnd = false;
       this.loginStartTime = Date.now();
-      console.log(`ws-this.loginStartTime-${this.loginStartTime}`);
+      // console.log(`ws-this.loginStartTime-${this.loginStartTime}`);
       const config = this.config;
-      console.log("ws-config", config);
+      // console.log("ws-config", config);
       let {
         loginIp,
         userCode,
@@ -5576,11 +5576,11 @@
         if (iframe) {
           _document = iframe.contentWindow.document;
         } else {
-          console.log("在iframe中且没有@psi/navigator");
+          // console.log("在iframe中且没有@psi/navigator");
         }
       } else {
         // iframe嵌入，且没有@psi/navigator
-        console.log("在iframe中且没有@psi/navigator");
+        // console.log("在iframe中且没有@psi/navigator");
       }
     }
     return _document;
@@ -5590,14 +5590,14 @@
    * @param {Obeject} domId 元素ID
    */
   function getDomById(domId) {
-    console.log("ws-getDomById", domId);
+    // console.log("ws-getDomById", domId);
     const domInfo = checkDomExit(domId);
     const width = domInfo.width;
     const height = domInfo.height;
     let x = domInfo.x;
     let y = domInfo.y;
     if (isIframe()) {
-      console.log("dom in iframe");
+      // console.log("dom in iframe");
       if (top["$nav"]) {
         // 通过navigator获取dom
         const iframe = top["$nav"].getIframeByPath();
@@ -5609,7 +5609,7 @@
           }
         }
       } else {
-        console.log("在iframe中且没有@psi/navigator");
+        // console.log("在iframe中且没有@psi/navigator");
         let iframeRect = self.frameElement.getClientRects();
         if (iframeRect && iframeRect[0]) {
           x += iframeRect[0].x;
@@ -5663,7 +5663,7 @@
      * @description 受信任站点
      */
     trusteSite(http) {
-      console.log("ws-trusteSite-http", http);
+      // console.log("ws-trusteSite-http", http);
       const config = this.config;
       const { loginIp, userCode } = config;
       this.postMessage("trusteSite", {
@@ -5727,7 +5727,7 @@
      * }
      */
     createCtrl(widgets) {
-      console.log("ws-createCtrl", widgets);
+      // console.log("ws-createCtrl", widgets);
       const _this = this;
       const config = this.config;
       const { loginIp, userCode } = config;
@@ -6203,7 +6203,7 @@
      * @description 客户端截图，以图搜图
      */
     goToSearchPic(data) {
-      console.log("ws-goToSearchPic", data);
+      // console.log("ws-goToSearchPic", data);
       if (data && data.params && data.params.array && Array.isArray(data.params.array)) {
         let menuCode = data.params.destinationCode;
         let param = {};
@@ -6281,7 +6281,7 @@
     destroyCtrlResult(data) {
       // 未发现这种情况，不好模拟，暂未调试
       // todo 修改ctrls 和 ids
-      console.log(data);
+      // console.log(data);
     },
   };
 
@@ -6804,7 +6804,7 @@
       if (this._options.debug) {
         // not using spread because compiled version uses Symbols
         // tslint:disable-next-line
-        console.log.apply(console, __spread(["RWS>"], args));
+        // console.log.apply(console, __spread(["RWS>"], args));
       }
     };
     ReconnectingWebSocket.prototype._getNextDelay = function () {
@@ -8355,7 +8355,7 @@
   const browser = Bowser.getParser(window.navigator.userAgent);
   //版本信息
   const DHWs_version = "1.0.33";
-  console.log(DHWs_version);
+  // console.log(DHWs_version);
   class Ws {
     constructor({
       url = "ws://localhost:1234",
@@ -8591,7 +8591,7 @@
      */
     postMessage(method, data) {
       if (method !== "heartbeat") {
-        console.log("postMessage", method, data);
+        // console.log("postMessage", method, data);
       }
       const { webSocket } = this;
       data.method = method;
@@ -8758,7 +8758,7 @@
               if (ReconnectStatus) {
                 resolve(true);
               } else {
-                console.log(`ws-in-keepConnect-reConnect-fail`);
+                // console.log(`ws-in-keepConnect-reConnect-fail`);
                 reject(false);
               }
             });
@@ -8788,7 +8788,7 @@
                   if (reLoginStatus) {
                     resolve(true);
                   } else {
-                    console.log(`ws-in-keeper-reLogin-fail`);
+                    // console.log(`ws-in-keeper-reLogin-fail`);
                     reject(false);
                   }
                 });
@@ -8800,19 +8800,19 @@
               // 连接成功
               if (ReconnectStatus) {
                 // 登录
-                console.log(`ws-in-keeper-reConnect-reLogin`);
+                // console.log(`ws-in-keeper-reConnect-reLogin`);
                 this.loginClient();
                 // 登录状态监测
                 this.detectLoginClient().then((loginStatus) => {
                   if (loginStatus) {
                     resolve(true);
                   } else {
-                    console.log(`ws-in-keeper-reLogin-fail`);
+                    // console.log(`ws-in-keeper-reLogin-fail`);
                     reject(false);
                   }
                 });
               } else {
-                console.log(`ws-in-keeper-reConnect-fail`);
+                // console.log(`ws-in-keeper-reConnect-fail`);
                 reject(false);
               }
             });
@@ -8826,7 +8826,7 @@
     getLocalDssVersion() {
       let _this = this;
       this.getVersion();
-      console.log(`ws-getLocalDssVersion-getVersionEnd-${this.getVersionEnd}`);
+      // console.log(`ws-getLocalDssVersion-getVersionEnd-${this.getVersionEnd}`);
       return new Promise((resolve, reject) => {
         if (!this.getVersionEnd) {
           // 连接中或者获取中
@@ -8891,7 +8891,7 @@
       }
       origin ? (downUrl = origin + downUrl) : (downUrl = location.origin + downUrl);
       type === "32" ? (downUrl = downUrl + "32.zip") : (downUrl = downUrl + ".zip");
-      console.log(downUrl);
+      // console.log(downUrl);
       window.open(downUrl);
     }
     /**
@@ -8899,7 +8899,7 @@
      * @params {Object} config 登录相关配置
      */
     login(config) {
-      console.log("ws-login-start");
+      // console.log("ws-login-start");
       this.loginFailCount = 0;
       // 如果登陆时用户名变更，更新userCode
       let { userName, token } = config;
@@ -8916,7 +8916,7 @@
       this.detectConnectQt().then((res) => {
         if (res) {
           // 若已登录，先注销
-          console.log("ws-login-start-this.isLoginSuccess", this.isLoginSuccess);
+          // console.log("ws-login-start-this.isLoginSuccess", this.isLoginSuccess);
           // if (this.isLoginSuccess) {
           // 	this.logout();
           // }
@@ -8984,7 +8984,7 @@
      * @description 连接客户端成功事件
      */
     onOpen() {
-      console.log("ws-onOpen");
+      // console.log("ws-onOpen");
       // chrome浏览器版本大于80，需要添加信任站点，加载http/https跨站点资源
       // if(this.config['browser'].name === 'chrome' && this.config['browser'].version && Number(this.config['browser'].version.split('.')[0]) >= 80) {
       // 	this.trusteSite(location.hostname);
@@ -9004,7 +9004,7 @@
      * @params {Object} event 接收客户端的消息数据
      */
     onMessage(event) {
-      console.log("onMessage", event);
+      // console.log("onMessage", event);
       try {
         const data = JSON.parse(event.data);
         const { method } = data;
@@ -9019,7 +9019,7 @@
         }
       } catch (e) {
         // 客户端协议中含有返回的不是Json数据
-        console.log("ws-error-客户端返回的消息不是Json数据", e);
+        // console.log("ws-error-客户端返回的消息不是Json数据", e);
       }
     }
     /**

src/libs/amap.js

@@ -1,6 +1,7 @@
 import qingdaoGeojson from "../data/qingdao.json";
 import jiaozhouGeojson from "../data/jiaozhou.json";
-import jiedaoGeojson from "../data/jiedao.json";
+// import jiedaoGeojson from "../data/jiedao.json";
+import jiedaoGeojson from "../data/newjiedao.json";
 import wangge3Geojson from "../data/wangge3.json";
 import wangge4Geojson from "../data/wangge4.json";
 import makerlan from "@/assets/images/maker-lan.png";
@@ -181,7 +182,6 @@ export const addJiaozhou = (amap) => {
       });
 
       polygon.on("click", (e) => {
-        console.log("点击的胶州 区域");
         let x = getRemInAmap(e.originEvent?.x);
         let y = getRemInAmap(e.originEvent?.y);
         selectedJiaozhou$.next({
@@ -215,7 +215,6 @@ export const addNullJiedao = (amap, level = 2, rankObj, hotType) => {
  * @param {*} hotType 热力图 形式 0：按积分 1： 按数量
  */
 export const addJiedao = (amap, level = 2, rankObj, hotType) => {
-  // console.log("对象是");
   // console.log(rankObj);
   // const hotCor1 = "#f9422f";
   // const hotCor2 = "#ffbe37";
@@ -225,9 +224,21 @@ export const addJiedao = (amap, level = 2, rankObj, hotType) => {
   // 红色：ae352c
   // 透明度均60%
   // const hotCor1 = "rgba(0,204,115,0.6)";
-  const hotCor1 = "rgba(0,251,106,0.6)";
-  const hotCor2 = "rgba(235,122,0,0.6)";
-  const hotCor3 = "rgba(174,53,44,0.6)";
+  // const hotCor1 = "rgba(0,251,106,0.6)";
+  // const hotCor2 = "rgba(235,122,0,0.6)";
+  // const hotCor3 = "rgba(174,53,44,0.6)";
+  // 色块：b02525（红）      80%     描边：f32525
+  //          2bfef1 （青）       55%                2bfef1
+  //        2badf6（蓝）       55%                2badf6
+  //          fbed14（黄）       70%                fbdd14
+  const hotCor1 = "rgba(176, 37, 37,0.8)"; //红
+  const hotCor2 = "rgba(251, 237, 20,0.7)"; //黄
+  const hotCor3 = "rgba(43, 173, 246,0.55)"; //蓝
+  const hotCor4 = "rgba(43, 254, 241,0.55)"; //绿
+  const hotCor5 = "#f32525";
+  const hotCor6 = "#fbdd14";
+  const hotCor7 = "#2badf6";
+  const hotCor8 = "#2bfef1";
 
   /**
    * 计算颜色
@@ -235,18 +246,39 @@ export const addJiedao = (amap, level = 2, rankObj, hotType) => {
    * @returns
    */
   function getCorByName(name) {
-    let fillColor = wangge2_border_a;
-
+    let fillColor = "";
+    let borderColor = "";
+    if (name == "上合示范区") {
+      fillColor = "transparent";
+    } else {
+      fillColor = wangge2_border_a;
+    }
+    if (hotType == 2) {
+      if (rankObj) {
+        let rank = rankObj?.[name];
+        if (rank == 4) {
+          fillColor = hotCor4;
+        } else if (rank == 3) {
+          fillColor = hotCor3;
+        } else if (rank == 2) {
+          fillColor = hotCor2;
+        } else if (rank == 1) {
+          fillColor = hotCor1;
+        }
+      }
+    } else {
       if (rankObj) {
         let rank = rankObj?.[name];
         // console.log(rank);
         // if (hotType === 0) {
-      if (rank < 75) {
-        fillColor = hotCor1;
-      } else if (rank >= 75 && rank <= 85) {
-        fillColor = hotCor2;
-      } else if (rank > 85) {
+        if (rank == 1) {
+          fillColor = hotCor4;
+        } else if (rank == 2) {
           fillColor = hotCor3;
+        } else if (rank == 3) {
+          fillColor = hotCor2;
+        } else if (rank == 4) {
+          fillColor = hotCor1;
         }
         // } else {
         //   if (rank < 3) {
@@ -258,8 +290,48 @@ export const addJiedao = (amap, level = 2, rankObj, hotType) => {
         //   }
         // }
       }
+    }
+
     return fillColor;
   }
+  function getBorCorByName(name) {
+    let fillColor = "";
+    let borderColor = "";
+    if (name == "上合示范区") {
+      fillColor = "transparent";
+    } else {
+      fillColor = wangge2_border_a;
+    }
+    if (hotType == 2) {
+      if (rankObj) {
+        let rank = rankObj?.[name];
+        if (rank == 4) {
+          borderColor = hotCor8;
+        } else if (rank == 3) {
+          borderColor = hotCor7;
+        } else if (rank == 2) {
+          borderColor = hotCor6;
+        } else if (rank == 1) {
+          borderColor = hotCor5;
+        }
+      }
+    } else {
+      if (rankObj) {
+        let rank = rankObj?.[name];
+        if (rank == 1) {
+          borderColor = hotCor8;
+        } else if (rank == 2) {
+          borderColor = hotCor7;
+        } else if (rank == 3) {
+          borderColor = hotCor6;
+        } else if (rank == 4) {
+          borderColor = hotCor5;
+        }
+      }
+    }
+
+    return borderColor;
+  }
   if (overlayGroup2) {
     overlayGroup2.show();
     // 如果已经有了就重新填充颜色
@@ -268,9 +340,10 @@ export const addJiedao = (amap, level = 2, rankObj, hotType) => {
       let obj1 = overlay.getExtData();
       let name = obj1?.name;
       let fillColor = getCorByName(name);
-
+      let borderColor = getBorCorByName(name);
       overlay.setOptions({
         fillColor,
+        strokeColor: borderColor,
       });
     });
     return;
@@ -283,12 +356,13 @@ export const addJiedao = (amap, level = 2, rankObj, hotType) => {
       // console.log(rankObj)
       // console.log(geojson)
       let fillColor = getCorByName(geojson?.properties?.name);
+      let borderColor = getBorCorByName(geojson?.properties?.name);
       return new AMap.Polygon({
         extData: geojson.properties,
         path: lnglats,
         strokeWeight: 3,
         fillOpacity: 0.5,
-        strokeColor: wangge2_border_a,
+        strokeColor: borderColor,
         fillColor: fillColor,
         zIndex: 99,
       });

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
+import recond from "../views/recond.vue";
 
 Vue.use(VueRouter);
 
@@ -10,6 +11,11 @@ const routes = [
     name: "home",
     component: HomeView,
   },
+  {
+    path: "/recon",
+    name: "recon",
+    component: recond,
+  },
   {
     path: "/about",
     name: "about",

vue.config.js

@@ -3,6 +3,7 @@ const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
+  publicPath: "./",
 
   // 开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
   devServer: {
@@ -11,8 +12,10 @@ module.exports = defineConfig({
       "/api": {
         //本地服务接口地址
         // target: 'http://localhost',
+        target: "http://192.168.1.106:80",
         // target: "http://192.168.1.106:80",
-        target: "http://192.168.3.32:80",
+        // target: "http://127.0.0.1:10000",
+        // target: "http://tmpshop.cas-air.cn",
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',
         ws: true,