feat: 工业园区安全生产综合服务监测大屏的细微调整

god-ui/src/views/bigscreen3/index.vue

@@ -27,6 +27,7 @@
           </div>
           <div class="alarm-icon-bg hot"></div>
         </div>
+        <div id="middleMap"></div>
       </div>
       <div
         class="content-main-item"
@@ -125,10 +126,25 @@ import {
   initChartStatic,
 } from "@/utils/bigscreenTool/index.js";
 import * as echarts from "echarts";
+
+window._AMapSecurityConfig = {
+    securityJsCode:'289153494763707d55b03878ace1cb08',
+}
+
+
 export default {
   components: { BigScreenTime },
   data() {
+    const add0 = (val) => {
+        const numVal = parseInt(val)
+        return numVal < 10 ? ('0' + numVal) : numVal.toString()
+    }
+    const formatter = (offset = 0, date = new Date()) => {
+        const d = new Date(date.getTime() - offset)
+        return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
+    }
     return {
+      map: null,
       height: "100%",
       pieData: [
         { value: 86.88, name: "电能" },
@@ -141,19 +157,19 @@ export default {
       lists: [
         {
           title: "三车间2号线 液压设备PH3689 出现压力异常，请前往处理!",
-          time: "2023-11-05 15:32:03",
+          time: formatter(69694512),
         },
         {
           title: "一车间照明设备异常，请前往处理!",
-          time: "2023-11-04 19:32:03",
+          time: formatter(100512566),
         },
         {
           title: "三车间 二氧化碳气体浓度超标，请前往处理!",
-          time: "2023-11-04 14:02:26",
+          time: formatter(184436251),
         },
         {
           title: "一车间公厕停水，请前往处理!",
-          time: "2023-11-02 09:05:00",
+          time: formatter(245426570),
         },
       ],
       alarm1: [
@@ -179,8 +195,16 @@ export default {
   mounted() {
     this.getEchart1Data();
     this.getEchart2Data();
+    this.initMap();
   },
   methods: {
+    initMap() {
+      this.map = new AMap.Map("middleMap", {
+        zoom: 11,//级别
+        center: [105.60178899809716, 27.14450662262202], //中心点坐标
+        mapStyle: 'amap://styles/blue',
+      });
+    },
     getEchart2Data() {
       //   calEquipNumPerWeek({ locationId: 0 }).then((response) => {
 
@@ -206,7 +230,7 @@ export default {
           //   color: this.colors,
           legend: {
             orient: "vertical",
-            top: "10%",
+            top: "center",
             right: "15%",
             textStyle: {
               color: "#fff",
@@ -218,7 +242,7 @@ export default {
               name: "",
               type: "pie",
               radius: ["40%", "70%"],
-              center: ["50%", "50%"],
+              center: ["37%", "50%"],
               // adjust the start angle
               startAngle: 180,
               label: {
@@ -349,10 +373,10 @@ export default {
             },
           },
           grid: {
-            x: 40,
-            x2: 40,
-            y: 25,
-            y2: 25,
+            left: '6%',
+            top: '19%',
+            right: '6%',
+            bottom: '13%'
           },
           tooltip: {
             trigger: "axis",
@@ -438,13 +462,20 @@ export default {
   margin-bottom: 0px;
   &.left-container {
     position: relative;
+    #middleMap {
+      width: calc(100% - 20px);
+      height: calc(100% - 20px);
+      margin: 10px 10px 10px 10px;
+    }
     .alarm1-wrapper {
       position: absolute;
+      z-index: 999;
       left: 6%;
       top: 8%;
     }
     .alarm2-wrapper {
       position: absolute;
+      z-index: 999;
       right: 18%;
       bottom: 18%;
     }