feat:定位报警监控联调

src/api/system/datav.js

@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+// 查询报警总数
+export function count(query) {
+  return request({
+    url: '/system/display/count',
+    method: 'get',
+    params: query
+  })
+}
+// 查询告警记录
+export function list(data) {
+  return request({
+    url: '/system/display/list',
+    method: 'get',
+    params: data
+  })
+}
+// 查询报警处理数量
+export function alarm(query) {
+  return request({
+    url: '/system/display/alarm',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询报警百分比
+export function percent(query) {
+  return request({
+    url: '/system/display/percent',
+    method: 'get',
+    params: query
+  })
+}
+// 查询定位信息
+export function alarmList(query) {
+  return request({
+    url: '/system/display/alarmList',
+    method: 'get',
+    params: query
+  })
+}

src/views/datav/LeftChart1.vue

@@ -1,77 +1,206 @@
 <template>
   <div class="left-chart-1">
     <!-- <dv-border-box-1 class="lc1-details">定位监护长者<span>430</span></dv-border-box-1> -->
-    <div class="lc1-details">定位监护长者<span>430</span></div>
-    <div class="left-list" >
-      <div class="left-container" v-for="(item,index) in config.data">
-        
+    <!-- <div class="lc1-details">定位监护长者<span>{{ number }}</span></div> -->
+    <div class="lc1-details">
+      定位监护长者
+      <dv-digital-flop :config="config1" style="width: 200px; height: 50px" />
+    </div>
+    <div class="left-list">
+      <div class="left-container">
+        <div class="container-topdown">
+          <img src="./img/sos.png" alt="" />
+          <div class="word">SOS告警</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{ data.un_alarmSOSSolve }}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number color">{{ data.alarmSOSSolve }}</div>
+          <div class="word">已处理</div>
+        </div>
+      </div>
+      <div class="left-container">
+        <div class="container-topdown">
+          <img src="./img/weilan.png" alt="" />
+          <div class="word">围栏告警</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{ data.un_alarmRailSolve }}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number color">{{ data.alarmRailSolve }}</div>
+          <div class="word">已处理</div>
+        </div>
+      </div>
+      <div class="left-container">
+        <div class="container-topdown">
+          <img src="./img/xinlv.png" alt="" />
+          <div class="word">心率告警</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{ data.un_alarmHeartSolve }}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number color">{{ data.alarmHeartSolve }}</div>
+          <div class="word">已处理</div>
+        </div>
+      </div>
+      <div class="left-container">
+        <div class="container-topdown">
+          <img src="./img/diedao.png" alt="" />
+          <div class="word">跌倒告警</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{ data.un_alarmFallSolve }}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number color">{{ data.alarmFallSolve }}</div>
+          <div class="word">已处理</div>
+        </div>
+      </div>
+      <div class="left-container">
+        <div class="container-topdown">
+          <img src="./img/didian.png" alt="" />
+          <div class="word">低电提醒</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number">{{ data.un_alarmLowSolve }}</div>
+          <div class="word">未处理</div>
+        </div>
+        <div class="container-topdown">
+          <div class="number color">{{ data.alarmLowSolve }}</div>
+          <div class="word">已处理</div>
+        </div>
+      </div>
+      <div class="left-container">
         <div class="container-topdown">
-          <img  src="./img/sos.png" alt="">
-          <!-- <img v-show="" src="./img/weilan.png" alt="">
-          <img v-show="" src="./img/xinlv.png" alt="">
-          <img v-show="" src="./img/diedao.png" alt="">
-          <img v-show="" src="./img/didian.png" alt="">
-          <img v-show="" src="./img/shebei.png" alt=""> -->
-          <div class="word">姓名</div>
+          <img src="./img/shebei.png" alt="" />
+          <div class="word">设备状态</div>
         </div>
         <div class="container-topdown">
-          <div class="number">{{item.label}}</div>
+          <div class="number">{{ data.un_alarmStatusSolve }}</div>
           <div class="word">未处理</div>
         </div>
         <div class="container-topdown">
-         <div class="number color">{{ item.value }}</div>
-         <div class="word">已处理</div>
+          <div class="number color">{{ data.alarmStatusSolve }}</div>
+          <div class="word">已处理</div>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
+import { count, alarm } from "@/api/system/datav";
 export default {
-  name: 'LeftChart1',
-  data () {
+  name: "LeftChart1",
+  data() {
     return {
       config: {
-        data: [
-          {
-            label:222,
-            name: '收费系统',
-            value: 167
-          },
-          {
-            label:222,
-            name: '通信系统',
-            value: 67
-          },
-          {
-            label:222,
-            name: '监控系统',
-            value: 123
-          },
-          {
-            label:222,
-            name: '供配系统',
-            value: 55
-          },
-          {
-            label:222,
-            name: '其他',
-            value: 98
-          },
-          {
-            label:222,
-            name: '其他',
-            value: 98
-          },
-        ],
-        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
-        unit: '件'
-      }
-    }
-  }
-}
+        // data: [
+        //   {
+        //     label:222,
+        //     name: '收费系统',
+        //     value: 167
+        //   },
+        //   {
+        //     label:222,
+        //     name: '通信系统',
+        //     value: 67
+        //   },
+        //   {
+        //     label:222,
+        //     name: '监控系统',
+        //     value: 123
+        //   },
+        //   {
+        //     label:222,
+        //     name: '供配系统',
+        //     value: 55
+        //   },
+        //   {
+        //     label:222,
+        //     name: '其他',
+        //     value: 98
+        //   },
+        //   {
+        //     label:222,
+        //     name: '其他',
+        //     value: 98
+        //   },
+        // ],
+        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
+        unit: "件",
+      },
+      number: null,
+      data: {},
+      config1: {},
+      currentValue:0,
+      digits: [0, 0, 0],
+      animationInterval: null,
+    };
+  },
+  mounted() {
+    this.initData();
+    // setInterval(() => {
+    //   this.power(360);
+    // }, 500);
+    // this.flipToValue(this.number); // 初始化显示数字
+    this.startAnimation()
+  },
+  methods: {
+    async initData() {
+      await count().then((res) => {
+        console.log(res, 999);
+        this.number = res.data;
+      });
+      alarm().then((res) => {
+        console.log(res, 444);
+        this.data = res.data;
+      });
+      this.config1 = {
+        number: [this.number],
+        content: `${String(this.number)}`,
+      };
+      console.log(typeof String(this.number),777);
+    },
+    // power(n) {
+    //   this.config1.number[0] = Math.floor(Math.random() * n + 1);
+    //   this.config1 = { ...this.config1 }; //对象解构，更新props
+    // },
+    // startAnimation() {
+    //   this.animationInterval = setInterval(() => {
+    //     const increment = this.number > this.currentValue ? 1 : -1;
+    //     this.currentValue += increment;
+    //     console.log(this.currentValue, increment,4545444);
+    //     this.flipToValue(this.currentValue);
+    //     // this.number = this.currentValue
+
+    //     if (this.currentValue === this.number) {
+    //       clearInterval(this.animationInterval);
+    //       setTimeout(() => {
+    //         this.currentValue = 0; // 重置当前值
+    //         this.startAnimation(); // 开始新一轮动画
+    //       }, 5000); // 5秒后重新开始
+    //     }
+    //   }, 50);
+    // },
+    // updateDigit(index, value) {
+    //   this.$set(this.digits, index, value);
+    // },
+    // flipToValue(value) {
+    //   const valueStr = String(value).padStart(3, '0');
+    //   for (let i = 0; i < 3; i++) {
+    //     this.updateDigit(i, Number(valueStr[i]));
+    //   }
+    // },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -102,44 +231,42 @@ export default {
       margin-left: 20px;
     }
   }
-  .left-list{
-    .left-container{
+  .left-list {
+    .left-container {
       // width: 100%;
       text-align: center;
       border-radius: 5px;
-      border:1px solid #1ae1e6;
+      border: 1px solid #1ae1e6;
       // height: 50px;
       // background-color: green;
       margin-top: 10px;
-      display:flex;
+      display: flex;
       background-color: #5d6986;
       // color:red;
-      .container-topdown{
+      .container-topdown {
         width: 100%;
         height: 57px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        img{
+        img {
           width: 20px;
           height: 20px;
         }
-        .word{
+        .word {
           font-size: 12px;
         }
-        .number{
-          color:#fcca00;
+        .number {
+          color: #fcca00;
           font-size: 20px;
           font-weight: bold;
         }
-        .color{
-          color:#fff;
+        .color {
+          color: #fff;
         }
       }
     }
   }
-
-  
 }
 </style>

src/views/datav/LeftChart11.vue

@@ -1,37 +1,27 @@
 <template>
   <div class="left-chart-11">
     <!-- <div class="lc1-header">张三收费站</div> -->
-    <div class="under-title"><b>在库设备数量</b></div>
-    <div class="right-container" v-for="(item,index) in config.data">
-      <div class="right-box">
+    <div class="under-title"><b>告警记录</b></div>
+    <div class="right-container" >
+      <div class="right-box" v-for="(item, index) in dataList">
         <div class="top">
-          <div class="top-left">{{ item.type }}</div>
-          <div class="top-right">{{ item.time }}</div>
+          <div class="top-left">{{ item.alarmMessage }}</div>
+          <div class="top-right">{{ item.createtime }}</div>
         </div>
-        <div class="middle">{{ item.name }} ({{ item.tel }})</div>
-        <div class="under">告警地址：{{ item.adr }}</div>
+        <div class="middle">{{ item.name }} ({{ item.telno }})</div>
+        <div class="under">告警地址：{{ item.location }}</div>
       </div>
     </div>
-    <!-- <div class="left-list" >
-      <div class="left-container" v-for="(item,index) in config.data">
-        <div class="container-topdown">
-          <div>姓名：</div>
-          <div>{{item.label}}</div>
-        </div>
-        <div class="container-topdown">
-          <div>未处理：</div>
-          <div>{{ item.name }}</div>
-        </div>
-        <div class="container-topdown">
-         <div> 已处理：</div>
-         <div>{{ item.value }}</div>
-        </div>
-      </div>
-    </div> -->
+    <div class="page-box" v-show="queryParams.pageTotal ">
+      <img src="./img/iconleft.png" alt="" @click="leftPage" />
+      <div>{{ queryParams.pageNum }}/{{ queryParams.pageTotal }}</div>
+      <img src="./img/iconright.png" alt="" @click="rightPage" />
+    </div>
   </div>
 </template>
 
 <script>
+import { list } from "@/api/system/datav";
 export default {
   name: "LeftChart1",
   data() {
@@ -40,58 +30,93 @@ export default {
         data: [
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "收费系统",
-            adr: 'ncjdhfcudjchnd',
+            adr: "ncjdhfcudjchnd",
           },
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "通信系统",
-            adr: 'cdkojhfcndoj',
+            adr: "cdkojhfcndoj",
           },
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "监控系统",
-            adr: 'ncsojhkla',
+            adr: "ncsojhkla",
           },
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "供配系统",
-            adr: 'ncjdokchnjsak',
+            adr: "ncjdokchnjsak",
           },
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "其他",
-            adr: 'cniskjojcnosakl',
+            adr: "cniskjojcnosakl",
           },
           {
             label: 222,
-            tel:15202013072,
-            name:'王艺涵',
-            time:'2023-09-12 09:50:00',
+            tel: 15202013072,
+            name: "王艺涵",
+            time: "2023-09-12 09:50:00",
             type: "其他",
-            adr: 'cniskjojcnosakl',
+            adr: "cniskjojcnosakl",
           },
         ],
         colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
         unit: "件",
       },
+      dataList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 7,
+        pageTotal: null,
+      },
     };
   },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      list(this.queryParams).then((res) => {
+        this.dataList = res.rows;
+        let pageTotal = res.total / this.queryParams.pageSize;
+        if (String(pageTotal).indexOf(".") > -1) {
+          pageTotal = parseInt(pageTotal) + 1;
+        } else {
+          pageTotal = pageTotal;
+        }
+        this.queryParams.pageTotal = pageTotal;
+      });
+    },
+    leftPage() {
+      if (this.queryParams.pageNum > 1) {
+        this.queryParams.pageNum--;
+        this.initData();
+      }
+    },
+    rightPage() {
+      if (this.queryParams.pageNum < this.queryParams.pageTotal) {
+        this.queryParams.pageNum++;
+        this.initData();
+      }
+    },
+  },
 };
 </script>
 
@@ -117,31 +142,40 @@ export default {
       line-height: 30px;
     }
   }
-  .right-container{
-    .right-box{
-      color:#101010;
+  .right-container {
+    .right-box {
+      color: #101010;
       font-size: 14px;
-      padding:0 10px;
+      padding: 0 10px;
       background-color: #fff;
       margin-bottom: 5px;
-      .top{
+      .top {
         display: flex;
         justify-content: space-between;
-        border-bottom:1px solid #f1f0f0;
+        border-bottom: 1px solid #f1f0f0;
         line-height: 30px;
-        .top-left{
-          color:#ff2626;
+        .top-left {
+          color: #ff2626;
         }
       }
-      .middle{
+      .middle {
         line-height: 30px;
-        border-bottom:1px solid #f1f0f0;
+        border-bottom: 1px solid #f1f0f0;
       }
-      .under{
+      .under {
         line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
       }
     }
   }
+  .page-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
   .lc1-details {
     // width: 250px;

src/views/datav/LeftChart99.vue

@@ -6,6 +6,8 @@
 </template>
 
 <script>
+import { percent } from "@/api/system/datav";
+
 export default {
   name: "LeftChart99",
   props: {
@@ -13,6 +15,10 @@ export default {
       type: String,
       default: "",
     },
+    value: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -26,10 +32,20 @@ export default {
             data: [
               {
                 name: "itemA",
-                value: 65,
+                value: Number(this.value),
                 gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
               },
             ],
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: [
+                  [Number(this.value)/100, "#1A8FC5"], //占总数的30.25%，即value/100，颜色为'#1A8FC5'
+                  [1, "#E1E8EE"], //基底大圈比例为1，颜色为'#E1E8EE'，
+                ],
+                width: 10, //环形的粗细
+              },
+            },
             axisLabel: {
               show: false,
             },
@@ -42,12 +58,14 @@ export default {
             dataItemStyle: {
               lineCap: "round",
             },
+            animationFrame: 10,
             details: {
               show: true,
               formatter: "{value}%",
+              valueToFixed:2,
               style: {
                 fill: "#1ed3e5",
-                fontSize: 10,
+                fontSize: 20,
               },
             },
           },
@@ -143,12 +161,12 @@ export default {
   flex-grow: 0;
   // flex-direction: column;
   // border: 1px solid green;
-  .title{
+  .title {
     height: 20%;
     text-align: center;
   }
 }
-.dv-border-box-8 .border-box-content{
+.dv-border-box-8 .border-box-content {
   display: flex;
 }
 </style>

src/views/datav/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="app-container">
-    <div id="data-view">
+    <div id="data-view" >
       <div class="main-header">
         <div class="mh-middle">数字健康社区定位系统</div>
+        <div class="mh-right">
+          <img src="./img/quanping.png" alt="" @click="toggleFullscreen" v-if="!isFullscreen">
+          <img src="./img/tuichuquanping.png" alt="" @click="toggleFullscreen" v-if="isFullscreen">
+        </div>
       </div>
       <div class="main">
         <div class="left">
@@ -17,12 +21,28 @@
             </div>
           </div>
           <div class="left-under">
-            <div class="under-title"><b>在库设备数量</b></div>
-            <dv-border-box-8 class="under-box">
-              <Left-Chart-99 title="我是我是"></Left-Chart-99>
-              <Left-Chart-99 title="我是我是"></Left-Chart-99>
-              <Left-Chart-99 title="我是我是"></Left-Chart-99>
-              <Left-Chart-99 title="我是我是"></Left-Chart-99>
+            <div class="under-title"><b>告警处理完成</b></div>
+            <dv-border-box-8 class="under-box" v-if="flag">
+              <Left-Chart-99
+                title="SOS报警处理"
+                :value="percentData.alarmSOS"
+              ></Left-Chart-99>
+              <Left-Chart-99
+                title="电子围栏报警"
+                :value="percentData.alarmRail"
+              ></Left-Chart-99>
+              <Left-Chart-99
+                title="跌倒报警"
+                :value="percentData.alarmFall"
+              ></Left-Chart-99>
+              <Left-Chart-99
+                title="设备在线率"
+                :value="percentData.alarmStauts"
+              ></Left-Chart-99>
+              <Left-Chart-99
+                title="全部报警"
+                :value="percentData.alarmAll"
+              ></Left-Chart-99>
             </dv-border-box-8>
           </div>
         </div>
@@ -49,6 +69,8 @@ import RightChart2 from "./RightChart2";
 import BottomCharts from "./BottomCharts";
 import equMap from "./Maps.vue";
 
+import { percent, alarmList } from "@/api/system/datav";
+
 export default {
   name: "DataView",
   components: {
@@ -65,35 +87,93 @@ export default {
   },
   data() {
     return {
-      mapLoading:false,
+      mapLoading: false,
+      percentData: {},
+      flag: false,
+      isFullscreen:false,// 初始状态为非全屏
     };
   },
+  mounted() {
+    this.initData();
+  },
   methods: {
+    toggleFullscreen() {
+            if (this.isFullscreen) {
+                // 退出全屏模式
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+                this.isFullscreen=false;
+            } else {
+                // 进入全屏模式
+                const content = document.querySelector('#data-view');
+                // console.log(content,888);
+                // return
+                if (content.requestFullscreen) {
+                    content.requestFullscreen();
+                } else if (content.mozRequestFullScreen) {
+                    content.mozRequestFullScreen();
+                } else if (content.webkitRequestFullscreen) {
+                    content.webkitRequestFullscreen();
+                }
+                this.isFullscreen=true;
+            }
+        },
+    initData() {
+      percent().then((res) => {
+        this.percentData = res.data;
+        this.flag = true;
+        console.log("我刚执行");
+      });
+    },
     initMap(AMap) {
       this.AMap = AMap;
       this.map = new AMap.Map("map", {
         // 设置地图容器id
         // viewMode: "3D", // 是否为3D地图模式
-        zoom: 3, // 初始化地图级别
+        zoom: 5, // 初始化地图级别
         center: [105.602725, 37.076636], // 初始化地图中心点位置
       });
       this.clickMarker = new this.AMap.Marker();
-      this.addMapMarkers(this.AMap, {
-        equList: [
-          { lng: 105.602725, lat: 37.076636 },
-          { lng: 113.8098755478859, lat: 34.75219686835205 },
-        ],
+      alarmList().then((res) => {
+        const data = res.data;
+        // console.log(data, 777);
+        this.addMapMarkers(this.AMap, data);
       });
+      // this.addMapMarkers(this.AMap, {
+      //   equList: [
+      //     { lng: 105.602725, lat: 37.076636 },
+      //     { lng: 113.8098755478859, lat: 34.75219686835205 },
+      //   ],
+      // });
       // this.getEquMap();
       // 暂时放这里
-      this.map.on("click", (e) => {
-        console.log(e, "e");
-        this.regeoCode(e.lnglat);
-      });
+      // this.map.on("click", (e) => {
+      //   console.log(e, "e");
+      //   this.regeoCode(e.lnglat);
+      // });
+    },
+    getCalss(type) {
+      console.log(type, "111");
+      let icon = "";
+      switch (type) {
+        case 16:
+          icon = require(`./img/sos.png`);
+          break;
+        case 25:
+          // 围栏
+          icon = require(`./img/weilan.png`);
+          break;
+      }
+      return icon;
     },
     // 地图覆盖物
     addMapMarkers(AMap, data) {
-      // console.log(data,'data');
+      console.log(data, "data");
       // // 项目中心点
       // const centerMarker = new AMap.Marker({
       //   position: new AMap.LngLat(data.projectLng, data.projectLat),
@@ -102,15 +182,40 @@ export default {
       // });
       // 设备分布点
       this.markers = [];
-      data.equList.forEach((item) => {
+      let icon = "";
+      data.forEach((item) => {
+        // this.getCalss(item.alarm_type);
+
+        switch (item.alarm_type) {
+          case 16:
+            icon = require(`./img/sos.png`);
+            break;
+
+          case 17:
+            // 跌倒
+            icon = require(`./img/didian.png`);
+            break;
+          case 22:
+            // 心率
+            icon = require(`./img/xinlv.png`);
+            break;
+          case 24:
+            icon = require(`./img/shebei.png`);
+            break;
+          case 25:
+            // 围栏
+            icon = require(`./img/weilan.png`);
+            break;
+        }
+        // console.log("执行了");
+        // console.log("icon", icon);
         const marker = new AMap.Marker({
-          position: new AMap.LngLat(item.lng, item.lat),
+          position: new AMap.LngLat(item.gps_long, item.gps_lat),
           offset: new AMap.Pixel(-13, -30),
-          // icon: require(`@/assets/map-icon/${item.classifyCode}-${
+          // icon: require(`./img/${item.alarm_type}-${
           //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
           //   }.png`),
-          icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
-          anchor: "bottom-center",
+          icon: icon,
           extData: {
             id: item.id,
             equNo: item.equNo,
@@ -121,70 +226,69 @@ export default {
           },
         });
         this.markers.push(marker);
-        this.map.add(marker);
+        // this.map.add(marker);
       });
-      // console.log('this.markers',this.markers);
-      // const overlayGroups = new AMap.OverlayGroup(this.markers);
-      // // 比例尺
-      // // const scale = new AMap.Scale();
+      const overlayGroups = new AMap.OverlayGroup(this.markers);
+      // 比例尺
+      const scale = new AMap.Scale();
 
-      // this.map.add(overlayGroups);
+      this.map.add(overlayGroups);
       // this.map.add(centerMarker);
-      // this.map.addControl(scale);
-
-      // // 鼠标点击marker弹出自定义的信息窗体
-      // overlayGroups.eachOverlay((overlay, index, collections) => {
-      //   const extData = overlay.getExtData();
-      //   overlay.on("click", () => {
-      //     const params = {
-      //       netCode: extData.netCode,
-      //       equNo: extData.equNo,
-      //     };
-      //     getEquInfo(params).then((res) => {
-      //       const info = res.data;
-      //       const id = extData.id;
-      //       const currentMarker = this.markers.find(
-      //         (item) => item._opts.extData.id === id
-      //       );
-      //       currentMarker.setIcon(
-      //         require(`@/assets/map-icon/${extData.classifyCode}-${
-      //           info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
-      //         }.png`)
-      //       );
-      //       const onlineEnum = {
-      //         0: "离线",
-      //         1: "在线",
-      //       };
-      //       info.projectName = data.projectName;
-      //       const infoWindow = new AMap.InfoWindow({
-      //         content: `<div class="equ-info-box">
-      //               <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
-      //                 info.equNo
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
-      //                 onlineEnum[info.online]
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
-      //                 info.equNo
-      //               }" data-name="${info.projectName}">${
-      //           info.alarmTotal
-      //         }</span></p>
-      //               <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
-      //                 info.positionTime
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
-      //                 info.brand
-      //               }</span></p>
-      //               <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
-      //                 info.gpsId
-      //               }</span></p>
-      //               </div>`,
-      //         anchor: "top-center",
-      //       });
-      //       infoWindow.open(this.map, overlay.getPosition());
-      //     });
-      //   });
-      // });
+      this.map.addControl(scale);
+
+      // 鼠标点击marker弹出自定义的信息窗体
+      overlayGroups.eachOverlay((overlay, index, collections) => {
+        const extData = overlay.getExtData();
+        overlay.on("click", () => {
+          data.forEach((item) => {
+            console.log(item, "item");
+            const infoWindow = new AMap.InfoWindow({
+              content: `<div class="equ-info-box">
+                    <p class="equ-info-item"><span class="label-type">【${
+                      item.alarm_msg
+                    }】</span></p>
+                    <p class="equ-info-item"><span class="label">姓名</span><span class="value tag">${
+                      item.name ? item.name : ""
+                    }</span></p>
+                    <p class="equ-info-item"><span class="label">手机号</span><span class="value">${
+                      item.telno?item.telno:''
+                    }</span></p>
+                    <p class="equ-info-item"><span class="label">所在位置</span><span class="value">${
+                      item.address?item.address:''
+                    }</span></p>
+                    <p class="equ-info-item"><span class="label">告警时间</span><span class="value">${
+                      item.createtime?item.createtime:''
+                    }</span></p>
+                    </div>`,
+              anchor: "top-center",
+            });
+            infoWindow.open(this.map, overlay.getPosition());
+          });
+
+          // const params = {
+          //   netCode: extData.netCode,
+          //   equNo: extData.equNo,
+          // };
+          // getEquInfo(params).then((res) => {
+          //   const info = res.data;
+          //   const id = extData.id;
+          //   const currentMarker = this.markers.find(
+          //     (item) => item._opts.extData.id === id
+          //   );
+          //   currentMarker.setIcon(
+          //     require(`@/assets/map-icon/${extData.classifyCode}-${
+          //       info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
+          //     }.png`)
+          //   );
+          //   const onlineEnum = {
+          //     0: "离线",
+          //     1: "在线",
+          //   };
+          //   info.projectName = data.projectName;
+
+          // });
+        });
+      });
 
       // // 地图的3km圆
       // const circle = new AMap.Circle({
@@ -214,6 +318,7 @@ export default {
   background: url(../../assets/image/bg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
+  overflow: auto;
 
   // #dv-full-screen-container {
   //   background-image: url("./img/bg.png");
@@ -229,12 +334,12 @@ export default {
     padding-right: 10px;
     .left {
       width: 70%;
-      .left-top{
+      .left-top {
         display: flex;
-        .top-left{
+        .top-left {
           width: 30%;
         }
-        .top-right{
+        .top-right {
           width: 70%;
         }
       }
@@ -271,9 +376,10 @@ export default {
 
   .main-header {
     height: 80px;
+    width: 100%;
     display: flex;
-    justify-content: center;
-    align-items: flex-start;
+    // justify-content: center;
+    // align-items: flex-start;
 
     .mh-left {
       font-size: 20px;
@@ -287,11 +393,71 @@ export default {
     .mh-middle {
       color: #1ae1e6;
       font-size: 24px;
+      flex: 1;
+      margin-left:40%;
     }
+    .mh-right{
+      width: 5%;
+      margin-top:2%;
+      img{
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    // .mh-left,
+    // .mh-right {
+    //   width: 450px;
+    // }
+  }
 
-    .mh-left,
-    .mh-right {
-      width: 450px;
+  ::v-deep.top-center {
+    // background-color: pink;
+  }
+  ::v-deep.amap-info-content {
+    // background-color: #1ae1e6;
+  }
+  ::v-deep.amap-info-sharp {
+    // background-color: #1ae1e6;
+  }
+  ::v-deep.equ-info-box {
+    padding: 6px 0 6px 8px;
+    .equ-info-item {
+      margin: 0;
+      // margin-bottom: 8px;
+      .label-type {
+        color: #f00404;
+      }
+      &.flex {
+        display: flex;
+        .value {
+          &:not(.copy) {
+            width: 200px;
+          }
+        }
+      }
+      .label {
+        display: inline-block;
+        width: 60px;
+        font-size: 13px;
+        color: #999;
+      }
+      .value {
+        color: #505050;
+        &.link {
+          color: #409eff;
+          cursor: pointer;
+          &:hover {
+            text-decoration: underline;
+            user-select: none;
+          }
+        }
+        &.copy {
+          padding: 0 15px;
+          color: #409eff;
+          cursor: pointer;
+        }
+      }
     }
   }
 

src/views/equBigData/LeftChart4.vue

@@ -17,158 +17,63 @@ export default {
   name: "LeftChart4",
   data() {
     return {
-      option: {},
-      // option: {
-      //   data: [
-      //     {
-      //       name: "收费系统",
-      //       color: "#00baff",
-      //     },
-      //     {
-      //       name: "监控系统",
-      //       color: "#ff5ca9",
-      //     },
-      //     {
-      //       name: "通信系统",
-      //       color: "#3de7c9",
-      //     },
-      //     {
-      //       name: "供配电系统",
-      //       color: "#f5d94e",
-      //     },
-      //   ],
-      //   textStyle: {
-      //     fill: "#fff",
-      //   },
-
-      //   xAxis: {
-      //     data: ["10/01", "10/02", "10/03", "10/04", "10/05", "10/06", "10/07"],
-      //     axisLine: {
-      //       style: {
-      //         stroke: "#999",
-      //       },
-      //     },
-      //     axisLabel: {
-      //       style: {
-      //         fill: "#999",
-      //       },
-      //     },
-      //     axisTick: {
-      //       show: false,
-      //     },
-      //   },
-      //   yAxis: {
-      //     data: "value",
-      //     splitLine: {
-      //       show: false,
-      //     },
-      //     axisLine: {
-      //       style: {
-      //         stroke: "#999",
-      //       },
-      //     },
-      //     axisLabel: {
-      //       style: {
-      //         fill: "#999",
-      //       },
-      //     },
-      //     axisTick: {
-      //       show: false,
-      //     },
-      //     min: 0,
-      //     max: 8,
-      //   },
-      //   series: [
-      //     {
-      //       name: "收费系统",
-      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
-      //       type: "bar",
-      //       barStyle: {
-      //         fill: "rgba(0, 186, 255, 0.4)",
-      //       },
-      //     },
-      //     {
-      //       name: "监控系统",
-      //       data: [2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5],
-      //       type: "line",
-      //       lineStyle: {
-      //         stroke: "#ff5ca9",
-      //       },
-      //       linePoint: {
-      //         radius: 4,
-      //         style: {
-      //           fill: "#ff5ca9",
-      //           stroke: "transparent",
-      //         },
-      //       },
-      //     },
-      //     {
-      //       name: "通信系统",
-      //       data: [1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3],
-      //       type: "line",
-      //       smooth: true,
-      //       lineArea: {
-      //         show: true,
-      //         gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"],
-      //       },
-      //       lineStyle: {
-      //         lineDash: [5, 5],
-      //       },
-      //       linePoint: {
-      //         radius: 4,
-      //         style: {
-      //           fill: "#00db95",
-      //         },
-      //       },
-      //     },
-      //     {
-      //       data: [0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2],
-      //       type: "line",
-      //       name: "供配电系统",
-      //       lineArea: {
-      //         show: true,
-      //         gradient: ["rgba(245, 217, 79, 0.8)", "rgba(245, 217, 79, 0.2)"],
-      //       },
-      //       lineStyle: {
-      //         stroke: "#f5d94e",
-      //       },
-      //       linePoint: {
-      //         radius: 4,
-      //         style: {
-      //           fill: "#f5d94e",
-      //           stroke: "transparent",
-      //         },
-      //       },
-      //     },
-      //   ],
-      // },
+      option: {
+        xAxis: {
+          // name: "第一周",
+          data: ["周一"],
+          axisLabel: {
+            style: {
+              fill: "#fff",
+              fontSize: 10,
+              rotate: 0,
+            },
+          },
+        },
+        grid: {
+          top: 30,
+          bottom: 20,
+        },
+        yAxis: {
+          // name: "销售额",
+          data: "value",
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [10],
+            type: "bar",
+            barWidth: 10,
+          },
+        ],
+      },
     };
   },
-  mounted(){
-    this.initData();
-  },
-  methods:{
-    initData(){
-      const option1 = {
-
-  xAxis: {
-    name: '第一周',
-    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  mounted() {
+    // this.initData();
   },
-  yAxis: {
-    name: '销售额',
-    data: 'value'
+  methods: {
+    // initData() {
+    //   const option1 = {
+    //     xAxis: {
+    //       name: "第一周",
+    //       data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+    //     },
+    //     yAxis: {
+    //       name: "销售额",
+    //       data: "value",
+    //     },
+    //     series: [
+    //       {
+    //         data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+    //         type: "bar",
+    //       },
+    //     ],
+    //   };
+    //   this.option = option1;
+    // },
   },
-  series: [
-    {
-      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
-      type: 'bar'
-    }
-  ]
-}
-this.option=option1
-    }
-  }
 };
 </script>
 

vue.config.js

@@ -36,6 +36,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: `http://118.195.207.241:8088`,
+        // target: `http://43.138.30.29:8080`,
+        //  target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''