feat:地图接口联调，告警记录改轮播

src/api/system/equdata.js

@@ -16,6 +16,14 @@ export function deviceOver(query) {
     params: query
   })
 }
+// 查询设备型号总览
+export function deviceType(query) {
+  return request({
+    url: '/system/display/deviceType',
+    method: 'get',
+    params: query
+  })
+}
 // 查询报警总数
 export function count(query) {
   return request({
@@ -57,3 +65,12 @@ export function alarmStatusList(query) {
     params: query
   })
 }
+
+// 查询地图GPS
+export function mapGpsView(query) {
+  return request({
+    url: '/system/display/mapGpsViewV2',
+    method: 'get',
+    params: query
+  })
+}

src/views/datav/LeftChart1.vue

@@ -241,11 +241,12 @@ export default {
         align-items: center;
         justify-content: center;
         img {
-          width: 20px;
-          height: 20px;
+          width: 30px;
+          height: 30px;
         }
         .word {
-          font-size: 12px;
+          margin-top: 5px;
+          font-size: 16px;
         }
         .number {
           color: #fcca00;

src/views/datav/LeftChart11.vue

@@ -2,21 +2,24 @@
   <div class="left-chart-11">
     <!-- <div class="lc1-header">张三收费站</div> -->
     <div class="under-title"><b>告警记录</b></div>
+    <!-- <dv-scroll-board :config="config" /> -->
     <div class="right-container">
-      <div class="right-box" v-for="(item, index) in dataList">
+      <dv-scroll-board :config="config" />
+
+      <!-- <div class="right-box" v-for="(item, index) in dataList">
         <div class="top">
           <div class="top-left">{{ item.alarmMessage }}</div>
           <div class="top-right">{{ item.createtime }}</div>
         </div>
         <div class="middle">{{ item.name }} ({{ item.telno }})</div>
         <div class="under">告警地址：{{ item.location }}</div>
-      </div>
+      </div> -->
     </div>
-    <div class="page-box" v-show="queryParams.pageTotal">
+    <!-- <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> -->
   </div>
 </template>
 
@@ -32,10 +35,49 @@ export default {
         pageSize: 7,
         pageTotal: null,
       },
+      config: {
+        // header: ["时间", "病害信息", "数量", "标段"],
+        data: [
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+          // [
+          //   `
+          //   <div class="right-box">
+          //     <div class="top">
+          //       <div class="top-left">111</div>
+          //       <div class="top-right">222</div>
+          //     </div>
+          //     <div class="middle">333 (444)</div>
+          //     <div class="under">告警地址：555</div>
+          //   </div>
+          //   `,
+          // ],
+        ],
+        // data: [],
+        // index: true,
+        columnWidth: [50],
+        align: ["center"],
+        rowNum: 5,
+        waitTime: 1500,
+        // headerBGC: "#1981f6",
+        // headerHeight: 20,
+        oddRowBGC: "rgba(0, 44, 81, 0.8)",
+        evenRowBGC: "rgba(10, 29, 50, 0.8)",
+      },
     };
   },
   mounted() {
-    this.initData();
+    // this.initData();
   },
   methods: {
     initData() {
@@ -55,13 +97,52 @@ export default {
             telno: hideTel,
           };
         });
-        let pageTotal = res.total / this.queryParams.pageSize;
-        if (String(pageTotal).indexOf(".") > -1) {
-          pageTotal = parseInt(pageTotal) + 1;
-        } else {
-          pageTotal = pageTotal;
-        }
-        this.queryParams.pageTotal = pageTotal;
+        console.log(this.config.data,'445566');
+
+        console.log('我先执行');
+
+        this.config = {
+          ...this.config,
+          data: (this.dataList || []).map((item) => {
+            return [
+              `<div class="right-box">
+                <div class="top">
+                  <div class="top-left">${item.alarmMessage}</div>
+                  <div class="top-right">${item.createtime}</div>
+                </div>
+                <div class="middle">${item.name} (${item.telno})</div>
+                <div class="under">告警地址：${item.location}</div>
+            </div>`,
+            ];
+          }),
+        };
+
+        // this.config.data=[]
+        // let list = [];
+        // this.dataList.forEach((item) => {
+        //   list.push([
+        //     `<div class="right-box">
+        //         <div class="top">
+        //           <div class="top-left">${item.alarmMessage}</div>
+        //           <div class="top-right">${item.createtime}</div>
+        //         </div>
+        //         <div class="middle">${item.name} (${item.telno})</div>
+        //         <div class="under">告警地址：${item.location}</div>
+        //     </div>`,
+        //   ]);
+        // });
+        // console.log(list,'我是list');
+        // this.config.data = list;
+        // console.log(this.config.data,'112233');
+
+        // 分页
+        // let pageTotal = res.total / this.queryParams.pageSize;
+        // if (String(pageTotal).indexOf(".") > -1) {
+        //   pageTotal = parseInt(pageTotal) + 1;
+        // } else {
+        //   pageTotal = pageTotal;
+        // }
+        // this.queryParams.pageTotal = pageTotal;
       });
     },
     hideMiddleDigits(phoneNumber) {
@@ -88,7 +169,57 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+::v-deep .dv-scroll-board .rows .row-item {
+  height: 20% !important;
+  line-height: normal !important;
+  display: flex;
+  align-items: center;
+}
+::v-deep .dv-scroll-board .rows .ceil {
+  height: 100%;
+  width: 100% !important;
+}
+::v-deep .right-box {
+  height: 100%;
+  color: #fff;
+  font-size: 14px;
+  padding: 0 10px;
+  // background-color: #fff;
+  margin-bottom: 5px;
+  // border-bottom: 1px solid #22659e;
+  .top {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // border-bottom: 1px solid #f1f0f0;
+    // line-height: 30%;
+    .top-left {
+      color: #ff2626;
+      font-size: 20px;
+    }
+  }
+  .middle {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    // line-height: 30%;
+    // border-bottom: 1px solid #f1f0f0;
+  }
+  .under {
+    height: 33%;
+    display: flex;
+    align-items: center;
+    // line-height: 30%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+  }
+}
+
+// 以下可能要废掉
 .left-chart-11 {
   width: 100%;
   height: 100%;
@@ -116,7 +247,7 @@ export default {
     border-radius: 5px;
     background: rgba(1, 58, 131, 0.4);
     .right-box {
-      height: 14%;
+      // height: 14%;
       color: #fff;
       font-size: 14px;
       padding: 0 10px;
@@ -172,23 +303,5 @@ export default {
       margin-left: 20px;
     }
   }
-  // .left-list {
-  //   margin-top: 10px;
-  //   .left-container {
-  //     // width: 100%;
-  //     text-align: center;
-  //     // height: 50px;
-  //     // background-color: green;
-  //     margin-top: 10px;
-  //     display: flex;
-  //     // color:red;
-  //     .container-topdown {
-  //       width: 100%;
-  //       display: flex;
-  //       flex-direction: column;
-  //       // border: 1px solid red;
-  //     }
-  //   }
-  // }
 }
 </style>

src/views/datav/index.vue

@@ -1,11 +1,24 @@
 <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>{{ dateTime }}</div>
+          <div>
+            <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>
       <div class="main">
@@ -47,7 +60,7 @@
           </div>
         </div>
         <div class="right">
-          <Left-Chart-11 />
+          <Left-Chart-11 ref="updateData" />
         </div>
       </div>
     </div>
@@ -60,8 +73,6 @@ import LeftChart11 from "./LeftChart11";
 import LeftChart99 from "./LeftChart99";
 import LeftChart2 from "./LeftChart2";
 
-
-
 import equMap from "./Map.vue";
 
 import { percent, alarmList } from "@/api/system/datav";
@@ -80,54 +91,85 @@ export default {
       mapLoading: false,
       percentData: {},
       flag: false,
-      isFullscreen:false,// 初始状态为非全屏
+      isFullscreen: false, // 初始状态为非全屏
+      dateTime: "",
     };
   },
   mounted() {
     this.initData();
+    this.currentTime();
   },
   methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      var _this = this;
+      let yy = new Date().getFullYear();
+      let mm =
+        new Date().getMonth() + 1 < 10
+          ? "0" + (new Date().getMonth() + 1)
+          : new Date().getMonth() + 1;
+      let dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      _this.dateTime =
+        yy + "- " + mm + "-" + dd + "- " + hh + ":" + mf + ":" + ss;
+    },
+
     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;
-            }
-        },
+      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("我刚执行");
       });
+      this.$refs.updateData.initData();
     },
     initMap(AMap) {
-      console.log('进来了');
+      console.log("进来了");
       this.AMap = AMap;
       this.map = new AMap.Map("map", {
         // 设置地图容器id
         // viewMode: "3D", // 是否为3D地图模式
         zoom: 5, // 初始化地图级别
         center: [105.602725, 37.076636], // 初始化地图中心点位置
+        mapStyle: "amap://styles/darkblue", //地图样式
       });
       this.clickMarker = new this.AMap.Marker();
       alarmList().then((res) => {
@@ -175,7 +217,7 @@ export default {
       this.markers = [];
       let icon = "";
       data.forEach((item) => {
-        // this.getCalss(item.alarm_type);
+        // icon=this.getCalss(item.alarm_type);
 
         switch (item.alarm_type) {
           case 16:
@@ -199,7 +241,7 @@ export default {
             break;
         }
         // console.log("执行了");
-        // console.log("icon", icon);
+        console.log("icon", icon);
         const marker = new AMap.Marker({
           position: new AMap.LngLat(item.gps_long, item.gps_lat),
           offset: new AMap.Pixel(-13, -30),
@@ -242,13 +284,13 @@ export default {
                       item.name ? item.name : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">手机号</span><span class="value">${
-                      item.telno?item.telno:''
+                      item.telno ? item.telno : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">所在位置</span><span class="value">${
-                      item.address?item.address:''
+                      item.address ? item.address : ""
                     }</span></p>
                     <p class="equ-info-item"><span class="label">告警时间</span><span class="value">${
-                      item.createtime?item.createtime:''
+                      item.createtime ? item.createtime : ""
                     }</span></p>
                     </div>`,
               anchor: "top-center",
@@ -310,7 +352,7 @@ export default {
   background: url(../../assets/image/bg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  overflow: auto;
+  overflow: hidden;
 
   // #dv-full-screen-container {
   //   background-image: url("./img/bg.png");
@@ -358,7 +400,7 @@ export default {
           }
         }
         .under-box {
-          height: 90%;
+          height: 81%;
           display: flex;
         }
       }
@@ -389,14 +431,21 @@ export default {
       color: #1ae1e6;
       font-size: 24px;
       flex: 1;
-      margin-left:40%;
+      margin-left: 44%;
+      margin-top:0.5%;
     }
-    .mh-right{
-      width: 5%;
-      margin-top:2%;
-      img{
-        width: 20px;
-        height: 20px;
+    .mh-right {
+      width: 25%;
+      margin-top: 2%;
+      padding-right:30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     font-size: 24px;
+     color:#00e1e1;
+      img {
+        width: 30px;
+        height: 30px;
       }
     }
 

src/views/test/BottomCharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="box">
     <div class="box-title">
-      <dv-decoration-5 class="header-center-decoration" />
+      <dv-decoration-5 :dur="dur" class="header-center-decoration" />
       <div class="center-title">{{ this.title }}</div>
     </div>
     <slot class="content" name="default"></slot>
@@ -19,7 +19,9 @@ export default {
   },
 
   data() {
-    return {};
+    return {
+      dur:4
+    };
   },
 };
 </script>

src/views/test/LeftChart1.vue

@@ -7,26 +7,59 @@
 <script>
 export default {
   name: "LeftChart1",
+  props: {
+    datalist: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
       option: {
         series: [
           {
             type: "pie",
-            data: [{ name: "可口可乐", value: 93 }],
+            data: [],
             radius: ["50%", "75%"],
-            axisTick:{
-
-            },
+            axisTick: {},
             insideLabel: {
-              show: true,
-              formatter: "{value}",
+              show: false,
+              formatter: "{value}%",
             },
+            outsideLabel:{
+              show:true,
+              formatter:"{name}  {value}个  {percent}%",
+              style:{
+                fontSize:18,
+              }
+            }
           },
         ],
       },
     };
   },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(this.datalist,'我是ist');
+      this.option.series[0].data=this.datalist.map(item=>{
+        return{
+          name:item.deviceStr,
+          value:item.count
+        }
+      })
+      // addDevice().then(res=>{
+      //   let xlist=res.data.map(item=>item.month)
+      //   let ylist=res.data.map(item=>item.count)
+      //   console.log(xlist,777);
+      //   console.log(ylist,888);
+      //   this.option.xAxis.data=xlist
+      //   this.option.series[0].data=ylist
+      // })
+    },
+  },
 };
 </script>
 

src/views/test/LeftChartUnder.vue

@@ -18,34 +18,10 @@ export default {
   data() {
     return {
       config: {
-        data: [
-          // {
-          //   name: "40",
-          //   value: 0.2,
-          // },
-          // {
-          //   name: "50",
-          //   value: 0.8,
-          // },
-          // {
-          //   name: "60",
-          //   value: 0.5,
-          // },
-          // {
-          //   name: "70",
-          //   value: 0.2,
-          // },
-          // {
-          //   name: "80",
-          //   value: 0.4,
-          // },
-          // {
-          //   name: "90",
-          //   value: 0.1,
-          // },
-        ],
+        data: [],
         colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
         unit: "人",
+        showValue: true
       },
     };
   },
@@ -68,7 +44,7 @@ export default {
 <style lang="scss">
 .left-chart-3 {
   width: 100%;
-  height: 33%;
+  height: 70%;
   display: flex;
   flex-direction: column;
 

src/views/test/RightBottom.vue

@@ -28,102 +28,6 @@ export default {
       config: {
         // header: ["时间", "病害信息", "数量", "标段"],
         // data: [
-        //   ["2019-07-01 19:25:00", "路面危害-松散", "5", "xxxxxxx"],
-        //   ["2019-07-02 17:25:00", "路面危害-路面油污清理", "13", "xxxxxxx"],
-        //   ["2019-07-03 16:25:00", "交安设施-交通标志牌结构", "6", "xxxxxxx"],
-        //   ["2019-07-04 15:25:00", "路基危害-防尘网", "2", "xxxxxxx"],
-        //   ["2019-07-05 14:25:00", "交安设施-交通标志牌结构", "1", "xxxxxxx"],
-        //   ["2019-07-06 13:25:00", "路面危害-松散", "3", "xxxxxxx"],
-        //   ["2019-07-07 12:25:00", "路基危害-防尘网", "4", "xxxxxxx"],
-        //   ["2019-07-08 11:25:00", "路面危害-路面油污清理", "2", "xxxxxxx"],
-        //   ["2019-07-09 10:25:00", "交安设施-交通标志牌结构", "5", "xxxxxxx"],
-        //   ["2019-07-10 09:25:00", "路基危害-防尘网", "3", "xxxxxxx"],
-        // ],
-        // data: [
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
-        //   [
-        //     `<div class="box">
-        //       <div class="box-left">
-        //         <div class="box-left-top">
-        //           <div>设备ID:<span class="idspan">3500000</span></div>
-        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
-        //         </div>
-        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
-        //       </div>
-        //       <div class="box-right">王艺涵</div>
-        //     </div>`,
-        //   ],
         //   [
         //     `<div class="box">
         //       <div class="box-left">

src/views/test/index.vue

@@ -16,7 +16,9 @@
         </div>
         <div class="left-content">
           <dv-border-box-13>
-            <Border-Item title="设备型号总览"><Left-Chart-1 /></Border-Item>
+            <Border-Item title="设备型号总览"
+              ><Left-Chart-1 v-if="deviceTypeflag" :datalist="deviceTypeList"
+            /></Border-Item>
           </dv-border-box-13>
         </div>
         <div class="left-under">
@@ -81,7 +83,6 @@ import LeftChart2 from "./LeftChart2";
 import LeftChartUnder from "./LeftChartUnder";
 import equMap from "./Maps";
 
-
 import BorderItem from "./BottomCharts";
 import aaa from "./aaa";
 import bbb from "./bbb";
@@ -89,7 +90,17 @@ import bbb from "./bbb";
 import RightBottom from "./RightBottom";
 import MiddleChart from "./MiddleChart";
 
-import { deviceView,userAgeAll,count,deviceOver,alarmStatusList,addDevice,addUser } from "@/api/system/equdata";
+import {
+  deviceView,
+  userAgeAll,
+  count,
+  deviceOver,
+  alarmStatusList,
+  addDevice,
+  addUser,
+  mapGpsView,
+  deviceType,
+} from "@/api/system/equdata";
 
 export default {
   name: "DataView",
@@ -110,48 +121,82 @@ export default {
       mapLoading: false,
       equTotalData: {},
       equDataFlag: false,
-      userAgeFlag:false,
-      userTotalFlag:false,
-      userDataFlag:false,
-      alarmListFlag:false,
-      xylistFlag:false,
-      xyUserFlag:false,
-      userAgeList:[],
-      alarmList:[],
-      xDataList:[],
-      yDataList:[],
-      xUserList:[],
-      yUserList:[],
-      userTotalData:0,
+      userAgeFlag: false,
+      userTotalFlag: false,
+      userDataFlag: false,
+      alarmListFlag: false,
+      xylistFlag: false,
+      xyUserFlag: false,
+      deviceTypeflag: false,
+      userAgeList: [],
+      alarmList: [],
+      xDataList: [],
+      yDataList: [],
+      xUserList: [],
+      yUserList: [],
+      userTotalData: 0,
     };
   },
   mounted() {
     this.deviceView();
     this.userAgeAll();
-    this.userTotal()
-    this.getUserData()
-    this.getAlarmStatusList()
+    this.userTotal();
+    this.getUserData();
+    this.getAlarmStatusList();
     this.getEquData();
-    this.getAddUser()
+    this.getAddUser();
+    this.getDeviceType();
   },
   methods: {
-    getAddUser(){
-      addUser().then(res=>{
-        let xlist=res.data.map(item=>item.month)
-        let ylist=res.data.map(item=>item.count)
-        this.xUserList=xlist
-        this.yUserList=ylist
-        this.xyUserFlag=true
-      })
+    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-container");
+        // 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;
+      }
+    },
+    getDeviceType() {
+      deviceType().then((res) => {
+        this.deviceTypeList = res.data.list;
+        this.deviceTypeflag = true;
+      });
+    },
+    getAddUser() {
+      addUser().then((res) => {
+        let xlist = res.data.map((item) => item.month);
+        let ylist = res.data.map((item) => item.count);
+        this.xUserList = xlist;
+        this.yUserList = ylist;
+        this.xyUserFlag = true;
+      });
     },
     getEquData() {
-      addDevice().then(res=>{
-        let xlist=res.data.map(item=>item.month)
-        let ylist=res.data.map(item=>item.count)
-        this.xDataList=xlist
-        this.yDataList=ylist
-        this.xylistFlag=true
-      })
+      addDevice().then((res) => {
+        let xlist = res.data.map((item) => item.month);
+        let ylist = res.data.map((item) => item.count);
+        this.xDataList = xlist;
+        this.yDataList = ylist;
+        this.xylistFlag = true;
+      });
     },
     deviceView() {
       deviceView().then((res) => {
@@ -159,29 +204,38 @@ export default {
         this.equDataFlag = true;
       });
     },
-    userTotal(){
+    userTotal() {
       count().then((res) => {
-        this.userTotalData=res.data
-        this.userTotalFlag=true
+        this.userTotalData = res.data;
+        this.userTotalFlag = true;
       });
     },
-    getUserData(){
-      deviceOver().then(res=>{
-        this.userData=res.data
-        this.userDataFlag=true
-      })
+    getUserData() {
+      deviceOver().then((res) => {
+        this.userData = res.data;
+        this.userDataFlag = true;
+      });
     },
-    userAgeAll(){
-      userAgeAll().then(res=>{
-        this.userAgeList=res.data.list
-        this.userAgeFlag=true
-      })
+    userAgeAll() {
+      userAgeAll().then((res) => {
+        this.userAgeList = res.data.list;
+        this.userAgeFlag = true;
+      });
     },
-    getAlarmStatusList(){
-      alarmStatusList().then(res=>{
-        this.alarmList=res.data
-        this.alarmListFlag=true
-      })
+    getAlarmStatusList() {
+      alarmStatusList().then((res) => {
+        this.alarmList = res.data.map((item) => {
+          let hideName = "";
+          if (item.name.length >= 2) {
+            hideName = item.name[0] + "*" + item.name.substring(2);
+          }
+          return {
+            ...item,
+            name: hideName,
+          };
+        });
+        this.alarmListFlag = true;
+      });
     },
     initMap(AMap) {
       this.AMap = AMap;
@@ -190,14 +244,62 @@ export default {
         // viewMode: "3D", // 是否为3D地图模式
         zoom: 3.85, // 初始化地图级别
         center: [101.835078, 42.90488], // 初始化地图中心点位置
+        mapStyle: "amap://styles/darkblue", //地图样式
+      });
+      var cluster;
+      const gridSize = 60;
+      // 数据中需包含经纬度信息字段 lnglat
+      var points = [
+        // { lnglat: ["116.86846822500229", "33.904682432073166"] },
+        // { lnglat: ["116.85693472623825", "33.88754011287255"] },
+        // { lnglat: ["116.85693472623825", "33.88754011287255"] },
+        // { lnglat: ["116.85668259859085", "33.88756039064183"] },
+        // { lnglat: ["116.8569615483284", "33.887618689228496"] },
+        // { lnglat: ["116.85713320970535", "33.887466605958934"] },
+        // { lnglat: ["116.85698837041855", "33.88756546008415"] },
+        // { lnglat: ["116.85688644647598", "33.88763389755545"] },
+        // { lnglat: ["108.7104383111", "34.03344626696758"] },
+        // { lnglat: ["108.70837301015854", "34.03073918476941"] },
+        // { lnglat: ["108.70164602994919", "34.00430204307751"] },
+        // { lnglat: ["108.70918840169907", "34.02465331926583"] },
+        // { lnglat: ["108.70991796255112", "34.02430859718817"] },
+        // { lnglat: ["108.70207518339157", "34.00304228666131"] },
+        // { lnglat: ["108.70090574026108", "34.00421586255809"] },
+        // { lnglat: ["108.70879143476486", "34.0323538021479"] },
+      ];
+      mapGpsView().then((res) => {
+        points = res.data;
+        if (cluster) {
+          cluster.setMap(null);
+        }
+        //默认样式
+        cluster = new AMap.MarkerCluster(this.map, points, {
+          gridSize: gridSize,
+        });
       });
+
       // this.mapLoading = false;
       // this.secherPlace(AMap);
       // this.districtSearch(AMap);
       // this.ruler(AMap);
-      this.mapZoomChange();
-      this.aaa();
+      // this.mapZoomChange();
+      // this.aaa();
     },
+    // initMap(AMap) {
+    //   this.AMap = AMap;
+    //   this.map = new AMap.Map("map", {
+    //     resizeEnable: true,
+    //     // viewMode: "3D", // 是否为3D地图模式
+    //     zoom: 3.85, // 初始化地图级别
+    //     center: [101.835078, 42.90488], // 初始化地图中心点位置
+    //   });
+    //   // this.mapLoading = false;
+    //   // this.secherPlace(AMap);
+    //   // this.districtSearch(AMap);
+    //   // this.ruler(AMap);
+    //   this.mapZoomChange();
+    //   this.aaa();
+    // },
     // 索引点聚合
     // drawCluster(isCheck, isCheck2) {
     //   // console.log(this.$refs.tree.getCheckedKeys(true));

src/views/test/topHeader.vue

@@ -1,8 +1,23 @@
 <template>
   <div id="top-header">
     <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
+    <dv-decoration-5 :dur="dur" class="header-center-decoration" />
+    <!-- <dv-decoration-8 class="header-right-decoration" :reverse="true" /> -->
+    <div class="header-right-decoration right-box"><div>{{ dateTime }}</div>
+          <div>
+            <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="center-title">易益康养</div>
   </div>
 </template>
@@ -10,6 +25,48 @@
 <script>
 export default {
   name: "TopHeader",
+  data(){
+    return{
+      dur:4,
+      dateTime: "",
+      isFullscreen: false, // 初始状态为非全屏
+    }
+  },
+  mounted() {
+    this.currentTime();
+  },
+  methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      var _this = this;
+      let yy = new Date().getFullYear();
+      let mm =
+        new Date().getMonth() + 1 < 10
+          ? "0" + (new Date().getMonth() + 1)
+          : new Date().getMonth() + 1;
+      let dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      _this.dateTime =
+        yy + "- " + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
+    },
+
+    toggleFullscreen(){
+      this.$parent.toggleFullscreen()
+    },
+  }
 };
 </script>
 
@@ -17,7 +74,7 @@ export default {
 #top-header {
   position: relative;
   width: 100%;
-  height: 20%;
+  height: 10%;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
@@ -33,6 +90,18 @@ export default {
     width: 25%;
     height: 60px;
   }
+  .right-box{
+    display: flex;
+      justify-content: space-between;
+      align-items: center;
+     font-size: 24px;
+     color:#00e1e1;
+     padding-right:30px;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+  }
 
   .center-title {
     position: absolute;
@@ -40,6 +109,7 @@ export default {
     font-weight: bold;
     left: 50%;
     top: 0;
+    color: #00e1e1;
     transform: translateX(-50%);
   }
 }