提交代码

.eslintrc.js

@@ -195,5 +195,9 @@ module.exports = {
       objectsInObjects: false
     }],
     'array-bracket-spacing': [2, 'never']
-  }
+  },
+  globals: {
+    'AMap': false,
+    'AMapUI': false
+  },
 }

package.json

@@ -55,9 +55,12 @@
     "nprogress": "0.2.0",
     "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-amap": "^0.5.10",
     "vue-clipboard2": "^0.3.1",
     "vue-count-to": "1.0.13",
     "vue-cron-editor-buefy": "^0.2.17",
@@ -77,8 +80,6 @@
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
-    "sass": "1.32.0",
-    "sass-loader": "10.1.0",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
     "vue-template-compiler": "2.6.12"

public/index.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/iconfont.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_p77wcbhksgm.css">
-    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=aabc97a5e095102787d405719847ecf0"></script>
+    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0"></script>
 
 
     <script src="https://webapi.amap.com/maps?v=1.4.15&key=aabc97a5e095102787d405719847ecf0&plugin=AMap.PlaceSearch"></script>

src/api/app.js

@@ -47,7 +47,7 @@ export function appProjectDeviceList(query) {
 // app 项目列表
 export function appProjectList(query) {
   return request({
-    url: '/app/tenant/project/table',
+    url: '/app/tenant/project/list',
     method: 'get',
     params: query
   })

src/api/iot/device.js

@@ -88,3 +88,11 @@ export function getDataUploadListAt(data) {
   });
 }
 
+// 修改设备密码
+export function resetPssword(data) {
+  return request({
+    url: "/iot/device/reset-password",
+    method: "put",
+    data: data
+  });
+}

src/assets/icons/svg/bigS_alarm.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1623378107039" class="icon" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1169" xmlns:xlink="http://www.w3.org/1999/xlink" width="141.375" height="128"><defs><style type="text/css"></style></defs><path d="M1004.570947 897.158737h-112.990315V539.755789a322.829474 322.829474 0 1 0-645.632 0v357.402948H132.958316a15.306105 15.306105 0 0 0-16.168421 16.168421v64.997053a15.306105 15.306105 0 0 0 16.168421 16.168421h871.612631a15.306105 15.306105 0 0 0 16.168421-16.168421V913.515789a15.306105 15.306105 0 0 0-16.168421-16.357052z m-209.839158-97.468632H342.797474V539.755789a225.980632 225.980632 0 1 1 451.934315 0v259.934316zM536.468211 19.914105h64.673684a15.306105 15.306105 0 0 1 16.168421 16.168421v97.549474a15.306105 15.306105 0 0 1-16.168421 16.168421h-64.673684a15.306105 15.306105 0 0 1-16.168422-16.168421V36.163368a15.306105 15.306105 0 0 1 16.168422-16.249263z m-253.305264 86.231579l56.589474-32.498526a16.168421 16.168421 0 0 1 22.608842 6.494316l48.505263 84.48a16.491789 16.491789 0 0 1-6.467368 22.743579L347.621053 219.728842a16.168421 16.168421 0 0 1-22.581895-6.494316l-48.505263-84.48a16.491789 16.491789 0 0 1 6.413473-22.743579z m-177.664 201.296842l32.336842-56.858947a17.812211 17.812211 0 0 1 22.608843-6.494316l83.941052 48.74779a18.054737 18.054737 0 0 1 6.467369 22.743579l-32.336842 56.858947a17.812211 17.812211 0 0 1-22.608843 6.494316l-83.941052-48.74779a16.491789 16.491789 0 0 1-6.467369-22.743579z m789.288421-12.988631l83.941053-48.74779a16.168421 16.168421 0 0 1 22.608842 6.494316l32.336842 56.858947a16.491789 16.491789 0 0 1-6.467368 22.743579L943.157895 380.550737a16.168421 16.168421 0 0 1-22.581895-6.494316l-32.336842-56.858947a16.491789 16.491789 0 0 1 6.575158-22.743579z m-166.265263-131.584l48.505263-84.48a17.812211 17.812211 0 0 1 22.608843-6.494316l56.589473 32.498526a18.054737 18.054737 0 0 1 6.440421 22.743579l-48.505263 84.48a17.812211 17.812211 0 0 1-22.581895 6.494316l-56.589473-32.498526a16.491789 16.491789 0 0 1-6.440421-22.743579z m-32.336842 360.636631h-101.591579l19.375158-134.736842a10.967579 10.967579 0 0 0-6.440421-9.754947h-1.616842a12.207158 12.207158 0 0 0-6.467368 3.260631l-164.648422 193.320421a8.084211 8.084211 0 0 0 1.616843 11.37179 5.901474 5.901474 0 0 0 4.850526 1.616842h103.289263l-19.375158 134.736842a10.967579 10.967579 0 0 0 6.440421 9.754948h1.616842a12.180211 12.180211 0 0 0 6.440421-3.260632l164.648421-193.320421a8.084211 8.084211 0 0 0-1.616842-11.37179 12.126316 12.126316 0 0 0-6.440421-1.616842z" fill="#E30000" p-id="1170"></path></svg>

src/assets/icons/svg/bigS_jc.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1623378112924" class="icon" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1311" xmlns:xlink="http://www.w3.org/1999/xlink" width="141.375" height="128"><defs><style type="text/css"></style></defs><path d="M818.499368 353.010526a45.541053 45.541053 0 0 1 0 63.407158l-264.838736 271.845053a43.115789 43.115789 0 0 1-61.197474 0.781474l-0.754526-0.781474-185.936843-190.113684a45.541053 45.541053 0 0 1 0.700632-64.10779 43.115789 43.115789 0 0 1 61.251368 0.727579l154.785685 158.396632 233.930105-239.993263a43.115789 43.115789 0 0 1 61.197474-0.727579l0.727579 0.727579zM180.547368 520.757895a88.926316 88.926316 0 1 1-108.43621-87.336421 500.843789 500.843789 0 0 1 296.421053-374.002527A492.436211 492.436211 0 0 1 562.176 20.021895a497.475368 497.475368 0 0 1 436.736 260.581052 27.270737 27.270737 0 0 1-10.778947 36.890948 26.947368 26.947368 0 0 1-36.675369-10.778948 443.311158 443.311158 0 0 0-825.451789 131.503158A89.519158 89.519158 0 0 1 180.547368 520.704z m941.325474 0a89.330526 89.330526 0 0 1-69.443368 87.309473 500.170105 500.170105 0 0 1-138.24 266.778948 496.047158 496.047158 0 0 1-788.695579-113.987369 27.270737 27.270737 0 0 1 11.317894-36.702315 26.947368 26.947368 0 0 1 36.055579 10.590315 443.338105 443.338105 0 0 0 825.505685-131.503158 89.680842 89.680842 0 0 1-47.427369-117.221052 88.926316 88.926316 0 0 1 170.927158 34.735158z" fill="#00B2CD" p-id="1312"></path></svg>

src/assets/icons/svg/bigS_jj.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1623378054358" class="icon" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1027" xmlns:xlink="http://www.w3.org/1999/xlink" width="141.375" height="128"><defs><style type="text/css"></style></defs><path d="M508.604632 300.166737h84.426105v256.323368h-84.426105v-256.323368z m42.199579 328.757895a56.158316 56.158316 0 0 0-54.676211 55.134315 54.676211 54.676211 0 1 0 109.379368 0 56.158316 56.158316 0 0 0-54.703157-55.053473zM746.442105 33.226105H354.142316L73.027368 316.604632v400.437894l281.088 277.557895H751.292632l281.114947-283.378526V316.604632z m189.952 638.356211l-224.498526 227.301052H393.431579L168.986947 676.378947V356.271158l224.498527-226.357895h313.694315l229.295158 226.357895v315.28421z" fill="#FFC000" p-id="1028"></path></svg>

src/components/Amap/components/bigscLocation/index.vue

@@ -69,7 +69,7 @@ export default {
       this.aMap = new AMap.Map("container", {
         center: [this.mapCenter.lng, this.mapCenter.lat],
         resizeEnable: true,
-        zoom: this.zoom,
+        // zoom: this.zoom,
         mapStyle: "amap://styles/" + this.theme
       });
       this.createMarker();
@@ -85,6 +85,7 @@ export default {
     },
     // 地图标点 点击事件
     markerClick(e) {
+      console.log('地图点击标注点！！')
       if (!this.infoWindow) {
         this.createInfoWindowO();
       }
@@ -93,22 +94,18 @@ export default {
     },
     // 创建设备定位的点
     createMarker() {
+      var markerList = [];
+      var _this = this;
       for (var i = 0; i < this.projectList.length; i++) {
         if (this.projectList[i].projectLat && this.projectList[i].projectLng) {
-          var marker = new AMap.Marker({
+          let marker = new AMap.Marker({
             position: [
               this.projectList[i].projectLng,
               this.projectList[i].projectLat
             ],
-            map: this.aMap,
+            // map: this.aMap,
             icon: markerIcon,
             offset: new AMap.Pixel(-13, -30),
-            // 设置是否可以拖拽
-            draggable: false,
-            // cursor: "move",
-            // 设置拖拽效果
-            raiseOnDrag: false,
-            clickable: true
           });
           var content = [];
           content.push(
@@ -125,11 +122,12 @@ export default {
               </div>
             </div>`
           );
-          var _this = this;
           marker.content = _this.createInfoWindow(content.join("<br/>"))
           marker.on("click", _this.markerClick);
+          markerList.push(marker);
         }
       }
+      this.aMap.add(markerList);
       this.aMap.setFitView();
     },
     // 实例化信息窗体

src/components/Amap/components/bigscLocation/indexV_2.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="amap-bigsc-location">
+    <div id="container" style="width:100%; height:100%"></div>
+  </div>
+</template>
+<script>
+import AMap from "AMap";
+import markerIcon from "@/assets/images/big/marker_noalarm.png";
+import markerAlarmIcon from "@/assets/images/big/marker_alarm.png";
+import infoTopIcon from "@/assets/images/big/map_top.png";
+import infoBotIcon from "@/assets/images/big/map_bottom.png";
+import infoAlarmIcon from "@/assets/images/big/map_alarm.png";
+import infoDeviceIcon from "@/assets/images/big/device_1.png";
+import infoCloseIcon from "@/assets/images/big/clors_map.png";
+export default {
+  name: "ShopLcation",
+  props: {
+    mapCenter: {
+      type: Object,
+      default: {
+        lng: 116.397428,
+        lat: 39.90923,
+        address: ""
+      }
+    },
+    zoom: {
+      type: [String, Number],
+      default: 10
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    projectList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      aMap: null,
+      pointResult: {
+        lng: 119.275254,
+        lat: 26.028928,
+        address: ""
+      },
+      theme: "6c31a547eb9387caefc013b7809e9d21",
+      infoWindow: null
+    };
+  },
+  mounted() {
+    this.initMap();
+  },
+  watch: {
+    projectList: {
+      handler: function(list, oldVal) {
+        // 创建设备定位的点
+        if (this.aMap) {
+          this.aMap.clearMap();
+        }
+        this.createMarker();
+        console.log("map_projectList: ", list);
+        // this.textFu();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    overview() {
+      if (this.aMap) {
+        this.aMap.setFitView();
+      }
+    },
+    initMap() {
+      this.pointResult["lng"] = this.mapCenter.lng;
+      this.pointResult["lat"] = this.mapCenter.lat;
+      this.aMap = new AMap.Map("container", {
+        center: [this.mapCenter.lng, this.mapCenter.lat],
+        resizeEnable: true,
+        // zoom: this.zoom,
+        mapStyle: "amap://styles/" + this.theme
+      });
+      this.createMarker();
+      // this.textFu();
+    },
+    // 创建窗口对象
+    createInfoWindowO() {
+      //鼠标点击marker弹出自定义的信息窗体
+      this.infoWindow = new AMap.InfoWindow({
+        isCustom: true, //使用自定义窗体
+        content: "",
+        offset: new AMap.Pixel(-3, -9)
+      });
+    },
+    // 地图标点 点击事件
+    markerClick(e) {
+      console.log("地图点击标注点！！");
+      if (!this.infoWindow) {
+        this.createInfoWindowO();
+      }
+      this.infoWindow.setContent(e.target.content);
+      this.infoWindow.open(this.aMap, e.target.getPosition());
+    },
+    // 开发测试方法
+    textFu() {
+      let marker = new AMap.Marker({
+        position: [116.4224009776628, 39.93482727239599],
+        icon: markerIcon,
+        offset: new AMap.Pixel(-13, -30)
+      });
+      var content = [];
+      content.push(
+        `<div class="info-block">
+          <span class="info-title">报警提醒</span>
+          <img class="info-close" src="${infoCloseIcon}"/>
+          <img class="info-top" src="${infoTopIcon}" />
+          <div class="info-wrap">
+            <div class="info-item"><span class="info-lable">项目：</span><span class="info-value">智慧园区项目</span></div>
+            <div class="info-item"><span class="info-lable">地址：</span><span class="info-value">智慧园区项目</span></div>
+            <div class="info-item"><span class="info-lable">报警总数：</span><span class="info-value">智慧园区项目</span></div>
+            <div class="alarm-icon-block">
+              <img class="alarm-icon" src="${infoAlarmIcon}"/>
+            </div>
+            <div class="list-device">
+              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span> </div>
+              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
+              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
+              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
+            </div>
+          </div>
+          <img class="info-bottom" src="${infoBotIcon}">
+        </div>`
+      );
+
+      const contentStr = this.createInfoWindow(content.join("<br/>"));
+      if (!this.infoWindow) {
+        this.createInfoWindowO();
+      }
+      this.infoWindow.setContent(contentStr);
+      this.infoWindow.open(this.aMap, [116.4224009776628, 39.93482727239599]);
+
+      this.aMap.add(marker);
+      this.aMap.setFitView();
+    },
+    // 创建设备定位的点
+    createMarker() {
+      var markerList = [];
+      var _this = this;
+      for (var i = 0; i < this.projectList.length; i++) {
+        if (this.projectList[i].projectLat && this.projectList[i].projectLng) {
+          let marker = new AMap.Marker({
+            position: [
+              this.projectList[i].projectLng,
+              this.projectList[i].projectLat
+            ],
+            // map: this.aMap,
+            icon: this.projectList[i].projectOverview['unProcessed']　> 0 ? markerAlarmIcon : markerIcon,
+            offset: new AMap.Pixel(-13, -30)
+          });
+          var content = [];
+          window['amapObj'] = this.aMap;
+          content.push(
+            `<div class="info-block">
+              <span class="info-title">报警提醒</span>
+              <img name="closeImg" class="info-close" onclick="window['amapObj'].clearInfoWindow()" src="${infoCloseIcon}"/>
+              <img class="info-top" src="${infoTopIcon}" />
+              <div class="info-wrap">
+                <div class="info-item"><span class="info-lable">项目：</span>
+                  <span class="info-value">${this.projectList[i].projectName}</span></div>
+                <div class="info-item"><span class="info-lable">地址：</span>
+                  <marquee style="margin: 0; width:calc(100% - 80px);" behavior="alternate" scrollamount="1" width="calc(100% - 40px)">
+                    <span class="info-value">${this.projectList[i].projectAddress}</span>
+                  </marquee>
+                </div>
+                <div class="info-item"><span class="info-lable">报警总数：</span>
+                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${this.projectList[i].projectOverview?.unProcessed}</span></div>
+                <div class="alarm-icon-block">
+                  <img class="alarm-icon" src="${infoAlarmIcon}"/>
+                </div>
+                <div class="list-device">
+                  ${this.resultDeviceListStr(this.projectList[i].deviceAlarmSimpleVoList || [])}
+                 </div>
+              </div>
+              <img class="info-bottom" src="${infoBotIcon}">
+            </div>`
+          );
+          marker.content = _this.createInfoWindow(content.join("<br/>"));
+          marker.on("click", _this.markerClick);
+          markerList.push(marker);
+        }
+      }
+      this.aMap.add(markerList);
+      this.aMap.setFitView();
+    },
+    resultDeviceListStr(list) {
+      var resultStr = '';
+      var _this = this;
+      window['_this'] = this;
+      if (list && list.length > 0) {
+        list.forEach(v => {
+          // if (v.unProcessAlarmTotal > 0) {
+            resultStr = resultStr +  `
+              <div class="item-device">
+                <img class="d-img" src="${infoDeviceIcon}" />
+                <span class="device-info" name="${v.deviceId}"
+                onclick="window['_this'].$router.push({ name:'systemDevice', params: { 'deviceId': ${v.deviceId}, 'tempType': 'details' } })"
+                style="${v.unProcessAlarmTotal > 0 ? 'color: #ff3739;':''}">${v.deviceName}</span>
+              </div>
+            `
+          // }
+        });
+      }
+      return resultStr;
+    },
+    st(v) {
+      console.log('srccc:', v)
+    },
+    // 实例化信息窗体
+    createInfoWindow(content) {
+      var info = document.createElement("div");
+      info.className = "custom-info input-card content-window-card";
+
+      // 定义中部内容
+      var middle = document.createElement("div");
+      middle.className = "info-middle";
+      middle.style.backgroundColor = "#ff2f6000";
+      middle.innerHTML = content;
+      info.appendChild(middle);
+
+      return info;
+    },
+    //关闭信息窗体
+    closeInfoWindow() {
+      this.aMap.clearInfoWindow();
+    },
+    getPositionByLonLats(lng, lat) {
+      var _this = this;
+      // console.log("经度："+lng+"纬度"+lat);
+      var lnglatXY = [lng, lat]; // 地图上所标点的坐标
+      AMap.service("AMap.Geocoder", function() {
+        // 回调函数
+        var geocoder = new AMap.Geocoder({});
+        geocoder.getAddress(lnglatXY, function(status, result) {
+          if (status === "complete" && result.info === "OK") {
+            // console.log(result.regeocode.formattedAddress);
+            var address = result.regeocode.formattedAddress;
+            _this.pointResult.address = address;
+          }
+          _this.$emit("mapEvent", _this.pointResult);
+        });
+      });
+    },
+    showInfoOut(e) {
+      // 当点标注失去鼠标焦点的时候就执行return 数据
+      this.getPositionByLonLats(
+        this.pointResult["lng"],
+        this.pointResult["lat"]
+      );
+      // this.$emit("")
+    },
+    showInfoM(e) {
+      this.pointResult["lat"] = e.lnglat.lat;
+      this.pointResult["lng"] = e.lnglat.lng;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.amap-bigsc-location {
+  width: 100%;
+  height: 100%;
+  .amap-marker:first-child .amap-icon img {
+    width: 25px;
+    height: 34px;
+  }
+  div.info-middle {
+    padding: 20px;
+    // background: #ff2f6000 !important;
+  }
+  div.info-block {
+    background-image: url("../../../../assets/images/big/mapbj_c_1.png");
+    background-size: cover;
+    display: flex;
+    padding: 12px;
+    font-size: 14px;
+    font-family: "Microsoft YaHei";
+    font-weight: 400;
+    padding-left: 5px;
+    // border: 1px solid red;
+    width: 350px;
+    // height: 280px;
+    flex-wrap: wrap;
+  }
+  img.info-top {
+    height: 40px;
+    width: 100%;
+    position: relative;
+    // top: -20px;
+  }
+  img.info-bottom {
+    height: 40px;
+    width: calc(100%);
+    position: relative;
+    // top: 20px;
+  }
+  div.info-wrap {
+    min-height: 220px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/mapbj_c_1.png");
+    background-size: contain;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  div.info-lable {
+    color: #07beff;
+    margin-right: 8px;
+    margin-left: 8px;
+    letter-spacing: 7px;
+    width: 50px;
+  }
+  div.info-value {
+    width: calc(100% - 60px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  span.tt {
+    margin-left: -6px;
+  }
+  div.input-card {
+    background-color: #ff2f6000;
+    box-shadow: 0;
+  }
+  div.info-item {
+    width: 100%;
+    display: flex;
+    padding-left: 30px;
+    height: 30px;
+  }
+
+  span.info-title {
+    position: relative;
+    top: 30px;
+    left: 140px;
+    font-size: 16px;
+    font-family: "Microsoft YaHei";
+    font-weight: 400;
+    color: #07b3f2;
+    line-height: 24px;
+    z-index: 1;
+  }
+  span.info-lable {
+    font-size: 14px;
+    font-family: "Microsoft YaHei";
+    font-weight: 400;
+    color: #07beff;
+    line-height: 28px;
+  }
+  span.info-value {
+    font-size: 14px;
+    font-family: "Microsoft YaHei";
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 28px;
+  }
+  div.alarm-icon-block {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  div.list-device {
+    width: 100%;
+    padding-left: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    padding-right: 30px;
+    max-height: 150px;
+    overflow: auto;
+    // justify-content: space-between;
+    // align-items: flex-start;
+  }
+  div.item-device {
+    background: rgba(1, 112, 255, 0);
+    height: 35px;
+    // border: 1px solid #00c0ff;
+    border-top: 1px solid #00c0ff75;
+    border-radius: 3px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0px 10px;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    width: 100%;
+  }
+  img.d-img {
+    margin-right: 10px;
+  }
+  span.device-info {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: calc(100% - 35px);
+  }
+  span.device-info:hover {
+    color: #00c0ff;
+  }
+  img.info-close {
+    position: relative;
+    left: 250px;
+    top: 25px;
+    z-index: 1;
+  }
+}
+</style>

src/components/Amap/components/personalBigscLocation/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="amap-bigsc-location">
+    <div id="container" style="width:100%; height:100%"></div>
+  </div>
+</template>
+<script>
+import AMap from "AMap";
+import markerIcon from "@/assets/images/big/map_marker-icon.png";
+export default {
+  name: "ShopLcation",
+  props: {
+    mapCenter: {
+      type: Object,
+      default: {
+        lng: 116.397428,
+        lat: 39.90923,
+        address: ""
+      }
+    },
+    zoom: {
+      type: [String, Number],
+      default: 10
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    deviceList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      aMap: null,
+      pointResult: {
+        lng: 119.275254,
+        lat: 26.028928,
+        address: ""
+      },
+      theme: "6c31a547eb9387caefc013b7809e9d21",
+      infoWindow: null
+    };
+  },
+  mounted() {
+    this.initMap();
+  },
+  watch: {
+    deviceList: {
+      handler: function(list, oldVal) {
+        // 创建设备定位的点
+        if (this.aMap) {
+          this.aMap.clearMap();
+        }
+        this.createMarker();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    overview() {
+      if(this.aMap) {
+        this.aMap.setFitView();
+      }
+    },
+    initMap() {
+      this.pointResult["lng"] = this.mapCenter.lng;
+      this.pointResult["lat"] = this.mapCenter.lat;
+      this.aMap = new AMap.Map("container", {
+        center: [this.mapCenter.lng, this.mapCenter.lat],
+        resizeEnable: true,
+        // zoom: this.zoom,
+        mapStyle: "amap://styles/" + this.theme
+      });
+      this.createMarker();
+    },
+    // 创建窗口对象
+    createInfoWindowO() {
+      //鼠标点击marker弹出自定义的信息窗体
+      this.infoWindow = new AMap.InfoWindow({
+        isCustom: true, //使用自定义窗体
+        content: '',
+        offset: new AMap.Pixel(-3, -9)
+      });
+    },
+    // 地图标点 点击事件
+    markerClick(e) {
+      console.log('地图点击标注点！！')
+      if (!this.infoWindow) {
+        this.createInfoWindowO();
+      }
+      this.infoWindow.setContent(e.target.content);
+      this.infoWindow.open(this.aMap, e.target.getPosition());
+    },
+    // 创建设备定位的点
+    createMarker() {
+      var markerList = [];
+      var _this = this;
+      for (var i = 0; i < this.deviceList.length; i++) {
+        if (this.deviceList[i].projectLat && this.deviceList[i].projectLng) {
+          let marker = new AMap.Marker({
+            position: [
+              this.deviceList[i].projectLng,
+              this.deviceList[i].projectLat
+            ],
+            // map: this.aMap,
+            // icon: markerIcon,
+            offset: new AMap.Pixel(-13, -30),
+          });
+          var content = [];
+          content.push(
+            `<div class="info-block">
+              <div class="info-lable">
+                <div class="t1">项目<span class="tt">:</span></div>
+                <div class="t1">地址<span class="tt">:</span></div>
+              </div>
+              <div class="info-value">
+                <div class="v1">${this.deviceList[i].projectName}</div>
+                <div class="v1">
+                <marquee style="margin: 0;" behavior="alternate" scrollamount="1" width="100%"><span>${this.deviceList[i].projectAddress}</span></marquee>
+                </div>
+              </div>
+            </div>`
+          );
+          marker.content = _this.createInfoWindow(content.join("<br/>"))
+          marker.on("click", _this.markerClick);
+          markerList.push(marker);
+        }
+      }
+      this.aMap.add(markerList);
+      this.aMap.setFitView();
+    },
+    // 实例化信息窗体
+    createInfoWindow(content) {
+      var info = document.createElement("div");
+      info.className = "custom-info input-card content-window-card";
+
+      // 定义中部内容
+      var middle = document.createElement("div");
+      middle.className = "info-middle";
+      middle.style.backgroundColor = "#ff2f6000";
+      middle.innerHTML = content;
+      info.appendChild(middle);
+
+      return info;
+    },
+    //关闭信息窗体
+    closeInfoWindow() {
+      this.aMap.clearInfoWindow();
+    },
+    getPositionByLonLats(lng, lat) {
+      var _this = this;
+      // console.log("经度："+lng+"纬度"+lat);
+      var lnglatXY = [lng, lat]; // 地图上所标点的坐标
+      AMap.service("AMap.Geocoder", function() {
+        // 回调函数
+        var geocoder = new AMap.Geocoder({});
+        geocoder.getAddress(lnglatXY, function(status, result) {
+          if (status === "complete" && result.info === "OK") {
+            // console.log(result.regeocode.formattedAddress);
+            var address = result.regeocode.formattedAddress;
+            _this.pointResult.address = address;
+          }
+          _this.$emit("mapEvent", _this.pointResult);
+        });
+      });
+    },
+    showInfoOut(e) {
+      // 当点标注失去鼠标焦点的时候就执行return 数据
+      this.getPositionByLonLats(
+        this.pointResult["lng"],
+        this.pointResult["lat"]
+      );
+      // this.$emit("")
+    },
+    showInfoM(e) {
+      this.pointResult["lat"] = e.lnglat.lat;
+      this.pointResult["lng"] = e.lnglat.lng;
+    }
+  }
+};
+</script>
+<style lang="scss">
+.amap-bigsc-location {
+  width: 100%;
+  height: 100%;
+  .amap-marker:first-child .amap-icon img {
+    width: 25px;
+    height: 34px;
+  }
+  div.info-middle {
+    padding: 20px;
+    // background: #ff2f6000 !important;
+  }
+  div.info-block {
+    width: 198px;
+    height: 76px;
+    background-image: url("../../../../assets/images/big/mapbj_v1.png");
+    background-size: cover;
+    display: flex;
+    padding: 12px;
+    font-size: 14px;
+    font-family: "Microsoft YaHei";
+    font-weight: 400;
+    padding-left: 5px;
+  }
+  div.info-lable {
+    color: #07beff;
+    margin-right: 8px;
+    margin-left: 8px;
+    letter-spacing: 7px;
+    width: 50px;
+  }
+  div.info-value {
+    width: calc(100% - 60px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  span.tt {
+    margin-left: -6px;
+  }
+  div.input-card {
+    background-color: #ff2f6000;
+    box-shadow: 0;
+  }
+}
+</style>

src/components/Amap/components/vueAmap/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="app">
+    <div class="amap-wrapper">
+      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      arriveCoor: [108.947025, 34.2613255], //坐标点
+      arrive: "", //位置信息,
+      Amap: null
+    };
+  },
+  mounted() {
+    this.mapDraw(this.arriveCoor);
+    // this.mapCoor(this.arriveCoor);
+  },
+  methods: {
+    mapDraw(arriveCoor) {
+      this.Amap = new AMap.Map("map-location", {
+        //map-location是嵌地图div的id
+        resizeEnable: true, //是否监控地图容器尺寸变化
+        zoom: 16, //初始化地图层级
+        center: arriveCoor //初始化地图中心点
+      });
+      // 定位点
+      // this.addMarker(arriveCoor);
+    },
+    // 实例化点标记
+    addMarker(arriveCoor) {
+      var _this = this;
+      var marker = new AMap.Marker({
+        icon: "", //图片ip
+        imageSize: "20px",
+        position: arriveCoor,
+        offset: new AMap.Pixel(-13, -30),
+        // 设置是否可以拖拽
+        draggable: true,
+        cursor: "move",
+        // 设置拖拽效果
+        raiseOnDrag: true
+      });
+      // marker.setMap(this.Amap);
+      this.Amap.add([marker])
+    },
+    // 查询坐标
+    mapCoor(lnglatXY) {
+      var _this = this;
+      AMap.service("AMap.Geocoder", function() {
+        //回调函数
+        var geocoder = new AMap.Geocoder({});
+        geocoder.getAddress(lnglatXY, function(status, result) {
+          if (status === "complete" && result.info === "OK") {
+            //获得了有效的地址信息:
+            _this.arrive = result.regeocode.formattedAddress;
+          } else {
+            _this.arrive = "暂无位置";
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.amap-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/Breadcrumb/index.vue

@@ -35,7 +35,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/Index', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

src/components/SelectTable/indexbox.vue

@@ -215,6 +215,7 @@ export default {
   updated() {
     if (this.optionTrue && this.tableList.length <= 0) {
       this.handleQuery2();
+      this.optionTrue = false;
     }
   },
   methods: {

src/config/env.js

@@ -8,18 +8,20 @@ let iotWebSocketBaseUrl = ''
 let sysWebSocket = 'ws://'
 let prodApi = '/prod-api';
 var hrefHost = window.location.host;
+let iotWebSocketAlarmBaseUrl = '';
 
 
 if (env.NODE_ENV == 'development') {
   flowIotUrl = 'http://127.0.0.1:1880/#flow/'
-  iotHost = '192.168.18.139'
+  iotHost = '192.168.18.139';
+  hrefHost = "192.168.18.139"
 } else if(env.NODE_ENV == 'production') {
   // if (hrefHost.indexOf('.gkiiot.com') >= 0) {
   //   iotHost = 'iot.gkiiot.com'
   // }
 } else if(env.NODE_ENV == 'test') {
 }
-
+iotWebSocketAlarmBaseUrl = sysWebSocket + hrefHost  + ':8899/ws/alarm/live'
 sysWebSocket = sysWebSocket + hrefHost + prodApi;
 iotWebSocketBaseUrl = sysWebSocket + '/ws/dev/up/'
 iotPlatformUrl = 'http://' + iotHost + '/prod-api'
@@ -27,5 +29,6 @@ iotPlatformUrl = 'http://' + iotHost + '/prod-api'
 export {
   iotPlatformUrl,
   sysWebSocket,
-  iotWebSocketBaseUrl
+  iotWebSocketBaseUrl,
+  iotWebSocketAlarmBaseUrl
 }

src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: '智慧用电管理系统',
+      title: '智慧能源综合管理系统',
       logo: logoImg
     }
   }

src/main.js

@@ -27,6 +27,8 @@ import RightToolbar from "@/components/RightToolbar"
 import iView from 'iview'
 import 'iview/dist/styles/iview.css'
 
+import VueAMap from 'vue-amap';
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -56,7 +58,14 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.use(iView)
 Vue.use(VueClipboard)
-
+Vue.use(VueAMap);
+VueAMap.initAMapApiLoader({
+  key: 'aabc97a5e095102787d405719847ecf0',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4',
+  uiVersion: '1.0'
+});
 
 Vue.use(permission)
 

src/router/index.js

@@ -60,20 +60,53 @@ export const constantRoutes = [
     children: [
       {
         path: '/index',
-        component: (resolve) => require(['@/views/bigScreen/v1/index'], resolve),
+        component: (resolve) => require(['@/views/bigScreen/v2/index'], resolve),
         name: 'BigScreen',
         meta: {
-          title: '数据总览', icon: 'dashboard', noCache: true,  affix: true
+          title: '数据总览', icon: 'dashboard', noCache: true, affix: true
         }
       },
-    ]},
+    ]
+  },
+  {
+    path: '/device',
+    component: Layout,
+    redirect: '/device/device',
+    children: [
+      {
+        path: '/device/device',
+        component: (resolve) => require(['@/views/iot/device/index'], resolve),
+        hidden: true,
+        name: 'Device',
+        meta: {
+          title: '设备管理', icon: 'dashboard', noCache: false, affix: false
+        }
+      },
+    ]
+  },
+  {
+    path: '/device_oneself',
+    component: Layout,
+    redirect: '/device_oneself/device_oneself',
+    children: [
+      {
+        path: '/device_oneself/device_oneself',
+        component: (resolve) => require(['@/views/personal/device/index'], resolve),
+        hidden: true,
+        name: 'Device_oneself',
+        meta: {
+          title: '我的设备', icon: 'dashboard', noCache: false, affix: false
+        }
+      },
+    ]
+  },
   {
     path: '/src',
     component: Layout,
     redirect: 'srcindex',
     children: [
       {
-        path: 'srcindex',
+        path: '/srcindex',
         component: (resolve) => require(['@/views/index'], resolve),
         name: '系统概览',
         meta: { title: '系统概览', icon: 'button', noCache: true, affix: false }

src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: '智慧用电管理系统',
+  title: '智慧能源综合管理系统', // 智慧用电管理系统
 
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light

src/views/bigScreen/v1/index.vue

@@ -26,8 +26,23 @@
             <device-proportion-wrap :projectId="projectId"></device-proportion-wrap>
             <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
           </div>
-          <div class="map-block-1">
-            <map-wrap :fullscreen="fullscreen" :countResult="alarmInfoResult" @eventFullscreen="eventFullscreenMap" :projectList="projectList"></map-wrap>
+          <div class="map-block-1" :style="userLoginType !=='PERSONAL'?'border: 1px solid #0790b9;':''">
+            <map-wrap
+              v-if="userLoginType !=='PERSONAL'"
+              tempUserType="userLoginType"
+              :fullscreen="fullscreen"
+              :countResult="alarmInfoResult"
+              @eventFullscreen="eventFullscreenMap"
+              :projectList="projectList"
+            ></map-wrap>
+            <map-wrap-personal
+              v-else
+              :fullscreen="fullscreen"
+              tempUserType="userLoginType"
+              :countResult="alarmInfoResult"
+              @eventFullscreen="eventFullscreenMap"
+              :projectList="projectList"
+            ></map-wrap-personal>
           </div>
           <div class="bottom-block-1">
             <alarm-table-list-wrap :projectId="projectId"></alarm-table-list-wrap>
@@ -52,10 +67,12 @@ import TodayRatioWrap from "./profile/todayRatio";
 import TypeDistributionWrap from "./profile/typeDistribution";
 import trendWrap from "./profile/trend";
 import MapWrap from "./profile/mapWrap";
+import MapWrapPersonal from "./profile/personalCenter";
+import { iotWebSocketAlarmBaseUrl } from "@/config/env";
 
 import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
 export default {
-  name: "BigScreenWraps",
+  name: "Device_oneself",
   components: {
     HeadWrap,
     DeviceProportionWrap,
@@ -64,7 +81,8 @@ export default {
     TodayRatioWrap,
     TypeDistributionWrap,
     trendWrap,
-    MapWrap
+    MapWrap,
+    MapWrapPersonal
   },
   data() {
     return {
@@ -75,37 +93,79 @@ export default {
       projectList: [],
       projectId: null,
       regionalismId: null,
-      fullscreen: false
+      fullscreen: false,
+      thisScrollTopY: 0,
+      userLoginType: "",
+      stompClient: null,
+      socket_flag: true
     };
   },
   mounted() {
     // 计算缩放比例
     this.resize_window();
-    window.addEventListener("resize", () => {
-      this.resize_window();
-    });
-  },
-  created() {
-    document.getElementById("app").style.background = "#021c80";
+    this.userLoginType = this.$store.getters.userType;
+    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
     document.getElementById("con_lf_top_div").style.background = "#021c80";
     document.getElementById("con_lf_top_div").style.height =
       "calc(100vh - 84px)";
     document.getElementById("con_lf_top_div").style.overflow = "hidden";
     document.getElementById("con_lf_top_div").scrollTop = 0;
+    window.addEventListener("resize", () => {
+      this.resize_window();
+    });
+  },
+  watch: {
+    $route(to, from) {
+      if (from.fullPath === '/index'){
+        document.getElementById("con_lf_top_div").style.background = "#fff";
+      } else if (to.fullPath === '/index') {
+        document.getElementById("con_lf_top_div").style.background = "#021c80";
+      }
+    }
+  },
+  created() {
+    document.getElementById("app").style.background = "#021c80";
     this.getProjectList();
     this.warningAnalysisList();
     this.homeCount();
+    this.connection();
   },
 
   methods: {
+    // 创建一个ws 监听获取报警实时数据
+    connection() {
+      if (this.stompClient) {
+        return;
+      }
+      if (!iotWebSocketAlarmBaseUrl) {
+        return;
+      }
+      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
+      this.stompClient.onmessage = this.socket_onmsg;
+      this.stompClient.onclose = this.socket_onclose;
+    },
+    socket_onmsg(evt) {
+      console.log("wsljcg:=", evt);
+    },
+    socket_onclose(e) {
+      this.stompClient = null;
+      if (this.socket_flag) {
+        this.socket_flag = false;
+        let _this = this;
+        setTimeout(function() {
+          _this.socket_flag = true;
+          _this.connection();
+        }, 10000);
+      }
+    },
     // 跳转路由是关闭全屏状态
     eventFullscreenMap(data) {
-      this.fullscreen = data.value
-      this.$refs.mainHead["fullscreen"] = data.value
+      this.fullscreen = data.value;
+      this.$refs.mainHead["fullscreen"] = data.value;
     },
     // 全屏或者关闭 返回状态
     eventFullscreen(data) {
-      this.fullscreen = data.value
+      this.fullscreen = data.value;
     },
     eventProjectId(data) {
       this.projectId = data;
@@ -130,7 +190,7 @@ export default {
       appProjectList({
         regionalismId: this.regionalismId
       }).then(response => {
-        this.projectList = response.rows;
+        this.projectList = response.data;
       });
     },
     // 查询警情信息
@@ -153,8 +213,9 @@ export default {
   },
   destroyed() {
     document.getElementById("app").style.background = "#fff";
-    document.getElementById("con_lf_top_div").style.background = "#fff0";
+    document.getElementById("con_lf_top_div").style.background = "#fff";
     document.getElementById("con_lf_top_div").style.overflow = "auto";
+    document.getElementById("con_lf_top_div").scrollTop = this.thisScrollTopY;
   }
 };
 </script>
@@ -190,7 +251,6 @@ export default {
         .map-block-1 {
           width: calc(100% - 400px);
           height: calc(100% - 270px);
-          border: 1px solid #0790b9;
         }
 
         .bottom-block-1 {

src/views/bigScreen/v1/profile/mapWrap.vue

@@ -9,29 +9,27 @@
       ref="bigscLocationMap"
       :projectList="projectList"
     ></amap-wrap>
-    <div class="top-wrap-1">
-      <div
-        v-for="item in labelList"
-        :key="item.valueKeys"
-        v-show="!(tempUserType === 'PERSONAL' && item.valueKeys === 'projectTotal')"
-      >
-        <div class="item-value">{{countResult[item.valueKeys]}}</div>
-        <img :src="item.image" style="pointer-events: none;" />
-        <div class="item-label" @click="routerTokeys(item.valueKeys)">{{item.label}}</div>
-      </div>
-    </div>
-    <div class="bottom-wrap-1">
-      <div>
-        <!-- <el-button class="mapButton" icon="iconfont iconquanping1"></el-button>全屏展示 -->
-      </div>
-      <div>
-        <el-button class="mapButton" icon="iconfont iconsheji" @click="overview"></el-button>全局总览
+    <div class="botton-top-wrap-1" :style="isFold ? 'height: 50px; display: flex; align-items: center;' : ''">
+      <div class="top-wrap-1" v-show="isFold === false">
+        <div
+          v-for="item in labelList"
+          :key="item.valueKeys"
+          v-show="!(tempUserType === 'PERSONAL' && item.valueKeys === 'projectTotal')"
+        >
+          <div class="item-value">{{countResult[item.valueKeys]}}</div>
+          <img :src="item.image" style="pointer-events: none;" />
+          <div class="item-label" @click="routerTokeys(item.valueKeys)">{{item.label}}</div>
+        </div>
+      </div>
+      <div class="fold-wrap" @click="isFold = !isFold">
+        <i :class="isFold ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
       </div>
     </div>
+
   </div>
 </template>
 <script>
-import amapWrap from "@/components/Amap/components/bigscLocation/index";
+import amapWrap from "@/components/Amap/components/bigscLocation/indexV_2";
 import imgs from "@/assets/images/big/maptp_v1.png";
 import { appProjectDeviceList } from "@/api/app";
 export default {
@@ -49,39 +47,40 @@ export default {
           label: "项目总数",
           valueKeys: "projectTotal",
           image: imgs,
-          routerKeys: 'project'
+          routerKeys: "project"
         },
         {
           guid: "2",
           label: "设备总数",
           valueKeys: "deviceTotal",
           image: imgs,
-          routerKeys: 'device'
+          routerKeys: "device"
         },
         {
           guid: "3",
           label: "在线设备",
           valueKeys: "onlineDeviceTotal",
           image: imgs,
-          routerKeys: 'device'
+          routerKeys: "device"
         },
         {
           guid: "4",
           label: "今日报警",
           valueKeys: "todayAlarmTotal",
           image: imgs,
-          routerKeys: 'alarm'
+          routerKeys: "alarm"
         },
         {
           guid: "2",
           label: "报警总数",
           valueKeys: "alarmTotal",
           image: imgs,
-          routerKeys: 'alarm'
+          routerKeys: "alarm"
         }
       ],
       deviceList: [],
-      tempUserType: null
+      tempUserType: null,
+      isFold: true
     };
   },
   created() {
@@ -91,126 +90,151 @@ export default {
     closeFullScreen() {
       let element = document.getElementById("con_lf_top_div");
       if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-        this.$emit('eventFullscreen', { value: false })
+        document.exitFullscreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.$emit("eventFullscreen", { value: false });
     },
     routerTokeys(keys) {
       if (this.fullscreen) {
-        this.closeFullScreen()
+        this.closeFullScreen();
       }
-      var routerPath = ''
+      var routerPath = "";
       switch (keys) {
-        case 'projectTotal':
-          routerPath = '/project/project'
-          if (this.$store.getters.userType === 'TENANT') {
-            routerPath = '/project_tenant/project_tenant'
+        case "projectTotal":
+          routerPath = "/project/project";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/project_tenant/project_tenant";
           }
           break;
-        case 'deviceTotal':
-          routerPath = '/device/device'
-          if (this.$store.getters.userType === 'TENANT') {
-            routerPath = '/device_tenant/device_tenant'
-          } else if (this.$store.getters.userType === 'PERSONAL') {
-            routerPath = '/device_oneself/device_oneself'
+        case "deviceTotal":
+          routerPath = "/device/device";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/device_tenant/device_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/device_oneself/device_oneself";
           }
           break;
-        case 'onlineDeviceTotal':
-          routerPath = '/device/device'
-          if (this.$store.getters.userType === 'TENANT') {
-            routerPath = '/device_tenant/device_tenant'
-          } else if (this.$store.getters.userType === 'PERSONAL') {
-            routerPath = '/device_oneself/device_oneself'
+        case "onlineDeviceTotal":
+          routerPath = "/device/device";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/device_tenant/device_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/device_oneself/device_oneself";
           }
           break;
-        case 'todayAlarmTotal':
-          routerPath = '/alarm/record'
-          if (this.$store.getters.userType === 'TENANT') {
-            routerPath = '/alarm_tenant/alarm_tenant'
-          } else if (this.$store.getters.userType === 'PERSONAL') {
-            routerPath = '/alarm_oneself/alarm_oneself'
+        case "todayAlarmTotal":
+          routerPath = "/alarm/record";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/alarm_tenant/alarm_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/alarm_oneself/alarm_oneself";
           }
           break;
-        case 'alarmTotal':
-          routerPath = '/alarm/record'
-          if (this.$store.getters.userType === 'TENANT') {
-            routerPath = '/alarm_tenant/alarm_tenant'
-          } else if (this.$store.getters.userType === 'PERSONAL') {
-            routerPath = '/alarm_oneself/alarm_oneself'
+        case "alarmTotal":
+          routerPath = "/alarm/record";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/alarm_tenant/alarm_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/alarm_oneself/alarm_oneself";
           }
           break;
       }
 
-      this.$router.push({ 'path': routerPath })
+      this.$router.push({ path: routerPath });
     },
     overview() {
       this.$refs.bigscLocationMap.overview();
-    },
+    }
   },
-  watch: {
-  }
+  watch: {}
 };
 </script>
 <style lang="scss">
 .big-map-wrap {
   height: 100%;
   width: 100%;
-  .top-wrap-1 {
-    width: 100%;
-    height: 200px;
-    position: relative;
-    top: -743px;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    // pointer-events: none;
-    > div {
-      width: 150px;
-      height: 150px;
-      display: -webkit-box;
+
+  .botton-top-wrap-1 {
+    position: fixed;
+    width: calc(58% + 4px);
+    top: 66px;
+    height: 230px;
+    background: linear-gradient(rgba(1,18,145,0.65) 0%,  rgba(3,63,99 ,0.5) 100%);
+    box-shadow: 0px 1px 3px #033f6380;
+    .top-wrap-1 {
+      width: 100%;
+      height: 200px;
+      // position: relative;
+      // top: -743px;
       display: flex;
-      -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
       align-items: center;
-      justify-content: center;
-      .item-value {
-        width: 100%;
+      justify-content: space-around;
+      // pointer-events: none;
+      > div {
+        width: 150px;
+        height: 150px;
+        display: "-webkit-box";
         display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        align-items: center;
         justify-content: center;
-        height: 35px;
-        font-size: 28px;
-        font-family: "Source Han Sans CN";
-        font-weight: 500;
-        color: #f7f2ea;
-        background: linear-gradient(180deg, #fbcf34 0%, #ff9b58 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        pointer-events: none;
-      }
-      .item-label {
-        width: 100%;
-        height: 16px;
-        font-size: 16px;
-        font-family: "Microsoft YaHei";
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 8px;
-        text-align: center;
-      }
-      .item-label:hover {
-        color: #fbcf34;
+        .item-value {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          height: 45px;
+          font-size: 28px;
+          font-family: "Source Han Sans CN";
+          font-weight: 600;
+          color: #f7f2ea;
+          background: linear-gradient(180deg, #fbcf34 0%, #ff9b58 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          pointer-events: none;
+          position: relative;
+          top: 22px;
+          font-size: 32px;
+        }
+        .item-label {
+          width: 100%;
+          height: 16px;
+          font-size: 16px;
+          font-family: "Microsoft YaHei";
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 8px;
+          text-align: center;
+        }
+        .item-label:hover {
+          color: #fbcf34;
+        }
       }
     }
+    .fold-wrap {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 30px;
+      color: #32bcdd;
+    }
+    .fold-wrap:hover {
+      color: #fff;
+      background: linear-gradient(180deg, #9c9c9c0d 0%, #f3a0698a 100%);
+    }
   }
   .bottom-wrap-1 {
     position: relative;
     top: -280px;
+    top: -50px;
     left: 90%;
     > div {
       margin-bottom: 5px;

src/views/bigScreen/v1/profile/personalCenter.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="bigscreen-personal-center">
+    <div v-for="item in list" :key="item.deviceKey" class="info-crad">
+      <div class="info-title">
+        <img :src="titleImg" />
+        {{item.deviceName}}
+      </div>
+      <div class="info-block">
+        <div class="device-info">
+          <img :src="deviceImg" />
+          <div class="info-state-wrap" :style="item.unProcessAlarmTotal > 0 ? 'color: red;': ''" v-text="item.unProcessAlarmTotal > 0 ? '报警': '正常'"></div>
+          <div class="info-lable">设备状态</div>
+        </div>
+        <div class="alarm-info" style="font-size: 20px;">
+          <img :src="alarmImg" />
+          <div class="info-alarm-num">0</div>个
+          <div class="info-lable">报警总数</div>
+        </div>
+        <el-button type="text" class="big-el-button" @click="toDeviceDetails(item)" icon="el-icon-search">查看详情</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import titleImg from "@/assets/images/big/z_title.png";
+import deviceImg from "@/assets/images/big/device_1.png";
+import alarmImg from "@/assets/images/big/alarm1.png";
+import { listDevice } from "@/api/personal/device";
+export default {
+  name: "personalCenter",
+  props: [""],
+  data() {
+    return {
+      titleImg,
+      deviceImg,
+      alarmImg,
+      list: []
+    };
+  },
+  created() {
+    this.getDeviceList()
+  },
+  methods: {
+    getDeviceList() {
+      listDevice({
+        pageNum: 1,
+        pageSize: 9999
+      }).then(response => {
+        this.list = response.rows;
+      });
+    },
+    toDeviceDetails(row) {
+      this.$router.push({ name: 'Device_oneself' , params: { deviceId: row.deviceId, tempType: 'details' }})
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bigscreen-personal-center {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -ms-flex-wrap: wrap;
+  padding-top: 10px;
+  float: left;
+  .info-crad {
+    width: 358px;
+    height: 243px;
+    background: rgba(0, 36, 125, 0.5);
+    /* -webkit-box-shadow: 0px 0px 18px 3px rgb(73 94 255 / 70%); */
+    box-shadow: 0px 0px 18px 6px #495effb3;
+    margin: 4px;
+    float: left;
+    display: flex;
+    flex-wrap: wrap;
+    background-image: url("../../../../assets/images/big/info_bg.png");
+    .info-title {
+      width: 100%;
+      height: 70px;
+      display: flex;
+      padding-left: 30px;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: flex-end;
+      font-size: 18px;
+      font-family: "Source Han Sans CN";
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 20px;
+      align-items: center;
+
+      > img {
+        margin-right: 5px;
+      }
+    }
+    .info-block {
+      height: calc(100% - 70px);
+      width: 100%;
+      display: flex;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .device-info {
+      width: 50%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      height: 80px;
+      > img {
+        margin-right: 10px;
+        margin-left: 20px;
+        width: 28px;
+      }
+      .info-state-wrap {
+        width: calc(100% - 80px);
+        height: 45px;
+        font-size: 24px;
+        font-family: "Source Han Sans CN";
+        font-weight: 400;
+        color: #04fefe;
+        line-height: 42px;
+      }
+      .info-lable {
+        font-size: 16px;
+        font-family: " Source Han Sans CN";
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 22px;
+        padding-left: 20px;
+        height: 25px;
+      }
+    }
+    .alarm-info {
+      width: 50%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      height: 80px;
+      > img {
+        margin-right: 10px;
+        margin-left: 20px;
+        width: 28px;
+      }
+      .info-alarm-num {
+        font-size: 30px;
+        font-family: "ShiShangZhongHeiJianTi";
+        font-weight: 400;
+        color: #fab03c;
+        line-height: 42px;
+        width: 80px;
+        overflow: hidden;
+      }
+      .info-lable {
+        font-size: 16px;
+        font-family: " Source Han Sans CN";
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 22px;
+        padding-left: 20px;
+        height: 25px;
+      }
+    }
+    .big-el-button {
+      margin-right: 15px;
+    }
+  }
+}
+</style>

src/views/bigScreen/v2/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    class="big-v1-wrap"
+    id="big-v1-wrap-id"
+    :style="{
+          'transformOrigin':'center top',
+          'transform':`scale(${scalseNum},${scalseNum})`,
+          '-webkit-transform':`scale(${scalseNum},${scalseNum})`,
+          '-moz-transform':`scale(${scalseNum},${scalseNum})`,
+          '-o-transform':`scale(${scalseNum},${scalseNum})`,
+          '-ms-transform':`scale(${scalseNum},${scalseNum})`
+      }"
+  >
+    <div class="main-block">
+      <head-wrap
+        ref="mainHead"
+        :handelTile="title"
+        :projectList="projectList"
+        @eventFullscreen="eventFullscreen"
+        @eventProjectId="eventProjectId"
+        @eventRegionalismId="eventRegionalismId"
+      ></head-wrap>
+      <div class="count-wrap">
+        <div class="count-left">
+          <div class="left-block-1">
+            <device-proportion-wrap :projectId="projectId"></device-proportion-wrap>
+            <wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
+          </div>
+          <div class="map-block-1" :style="userLoginType !=='PERSONAL'?'':''">
+            <map-wrap
+              v-if="userLoginType !=='PERSONAL'"
+              tempUserType="userLoginType"
+              :fullscreen="fullscreen"
+              :countResult="alarmInfoResult"
+              @eventFullscreen="eventFullscreenMap"
+              :projectList="projectList"
+            ></map-wrap>
+            <map-wrap-personal
+              v-else
+              :fullscreen="fullscreen"
+              tempUserType="userLoginType"
+              :countResult="alarmInfoResult"
+              @eventFullscreen="eventFullscreenMap"
+              :projectList="projectList"
+            ></map-wrap-personal>
+          </div>
+          <div class="bottom-block-1">
+            <alarm-table-list-wrap :projectId="projectId"></alarm-table-list-wrap>
+          </div>
+        </div>
+        <div class="right-block-1">
+          <today-ratio-wrap :result="resultInfo.warningAnalysisStatisticsVo || []"></today-ratio-wrap>
+          <type-distribution-wrap :result="resultInfo.alarmCategoriesList || []"></type-distribution-wrap>
+          <trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeadWrap from "./profile/head";
+import DeviceProportionWrap from "./profile/deviceProportion";
+import WraringInfoWrap from "./profile/wraringInfo";
+import AlarmTableListWrap from "./profile/alarmTableList";
+import TodayRatioWrap from "./profile/todayRatio";
+import TypeDistributionWrap from "./profile/typeDistribution";
+import trendWrap from "./profile/trend";
+import MapWrap from "./profile/mapWrap";
+import MapWrapPersonal from "./profile/personalCenter";
+import { iotWebSocketAlarmBaseUrl } from "@/config/env";
+
+import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
+export default {
+  name: "Device_oneself",
+  components: {
+    HeadWrap,
+    DeviceProportionWrap,
+    WraringInfoWrap,
+    AlarmTableListWrap,
+    TodayRatioWrap,
+    TypeDistributionWrap,
+    trendWrap,
+    MapWrap,
+    MapWrapPersonal
+  },
+  data() {
+    return {
+      title: "智慧能源综合管理系统",
+      scalseNum: 1,
+      resultInfo: {},
+      alarmInfoResult: {},
+      projectList: [],
+      projectId: null,
+      regionalismId: null,
+      fullscreen: false,
+      thisScrollTopY: 0,
+      userLoginType: "",
+      stompClient: null,
+      socket_flag: true
+    };
+  },
+  mounted() {
+    // 计算缩放比例
+    this.resize_window();
+    this.userLoginType = this.$store.getters.userType;
+    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
+    document.getElementById("con_lf_top_div").style.background = "#010a31";
+    document.getElementById("con_lf_top_div").style.height =
+      "calc(100vh - 84px)";
+    document.getElementById("con_lf_top_div").style.overflow = "hidden";
+    document.getElementById("con_lf_top_div").scrollTop = 0;
+    window.addEventListener("resize", () => {
+      this.resize_window();
+    });
+  },
+  watch: {
+    $route(to, from) {
+      if (from.fullPath === '/index'){
+        document.getElementById("con_lf_top_div").style.background = "#fff";
+      } else if (to.fullPath === '/index') {
+        document.getElementById("con_lf_top_div").style.background = "#010a31";
+      }
+    }
+  },
+  created() {
+    document.getElementById("app").style.background = "#010a31";
+    this.getProjectList();
+    this.warningAnalysisList();
+    this.homeCount();
+    this.connection();
+  },
+
+  methods: {
+    // 创建一个ws 监听获取报警实时数据
+    connection() {
+      if (this.stompClient) {
+        return;
+      }
+      if (!iotWebSocketAlarmBaseUrl) {
+        return;
+      }
+      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
+      this.stompClient.onmessage = this.socket_onmsg;
+      this.stompClient.onclose = this.socket_onclose;
+    },
+    socket_onmsg(evt) {
+      console.log("wsljcg:=", evt);
+    },
+    socket_onclose(e) {
+      this.stompClient = null;
+      if (this.socket_flag) {
+        this.socket_flag = false;
+        let _this = this;
+        setTimeout(function() {
+          _this.socket_flag = true;
+          _this.connection();
+        }, 10000);
+      }
+    },
+    // 跳转路由是关闭全屏状态
+    eventFullscreenMap(data) {
+      this.fullscreen = data.value;
+      this.$refs.mainHead["fullscreen"] = data.value;
+    },
+    // 全屏或者关闭 返回状态
+    eventFullscreen(data) {
+      this.fullscreen = data.value;
+    },
+    eventProjectId(data) {
+      this.projectId = data;
+      this.homeCount();
+      this.warningAnalysisList();
+    },
+    eventRegionalismId(data) {
+      this.regionalismId = data;
+      this.getProjectList();
+    },
+    resize_window() {
+      var w_height = 0;
+      if (this.fullscreen) {
+        w_height = Number(document.documentElement.clientHeight / 1080);
+      } else {
+        w_height = Number(document.documentElement.clientHeight / 1186);
+      }
+      this.scalseNum = w_height;
+    },
+    // 查询项目列表
+    getProjectList() {
+      appProjectList({
+        regionalismId: this.regionalismId
+      }).then(response => {
+        this.projectList = response.data;
+      });
+    },
+    // 查询警情信息
+    homeCount() {
+      homeCount({
+        alarmDivide: "ALARM",
+        projectId: this.projectId
+      }).then(res => {
+        this.alarmInfoResult = res.data;
+      });
+    },
+    // 查询获取告警分析等数据
+    warningAnalysisList() {
+      getWarningAnalysis({
+        projectId: this.projectId
+      }).then(res => {
+        this.resultInfo = res.data;
+      });
+    }
+  },
+  destroyed() {
+    document.getElementById("app").style.background = "#fff";
+    document.getElementById("con_lf_top_div").style.background = "#fff";
+    document.getElementById("con_lf_top_div").style.overflow = "auto";
+    document.getElementById("con_lf_top_div").scrollTop = this.thisScrollTopY;
+  }
+};
+</script>
+<style lang="scss">
+.big-v1-wrap {
+  width: 100%;
+  height: calc(100vh - 85px);
+  display: flex;
+  justify-content: center;
+  background-image: url("../../../assets/images/big/bigpg_v2.jpg");
+  cursor: default;
+  .main-block {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .count-wrap {
+      width: 100%;
+      height: calc(100% - 65px);
+      display: flex;
+      flex-wrap: wrap;
+      color: #fff;
+      background: #1531f508;
+      .count-left {
+        display: flex;
+        flex-wrap: wrap;
+        width: calc(100% - 400px);
+        height: calc(100%);
+        padding-left: 20px;
+        .left-block-1 {
+          width: 400px;
+          height: calc(100% - 300px);
+        }
+        .map-block-1 {
+          width: calc(100% - 420px);
+          height: calc(100% - 300px);
+        }
+
+        .bottom-block-1 {
+          width: calc(100% - 20px);
+          height: 300px;
+        }
+      }
+      .right-block-1 {
+        width: 400px;
+        height: calc(100%);
+        position: relative;
+        left: -20px;
+      }
+    }
+  }
+}
+.app-main {
+  width: 100%;
+  height: calc(100vh - 100px);
+  // background: #021c80;
+}
+.big-v1-wrap {
+  width: 1920px;
+  height: 1080px;
+  transform-origin: center top 0px;
+  position: relative;
+  left: 50%;
+  margin-left: -960px;
+}
+</style>
+

src/views/bigScreen/v2/profile/alarmTableList.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="big-alarm-table-list-wrap">
+    <div class="mk-top">{{title}}</div>
+    <div class="mk-conter">
+      <div class="query-right-div">
+        <el-checkbox-group v-model="queryCheckbox">
+          <el-checkbox label="warning">包含预警</el-checkbox>
+          <el-checkbox label="off">只显示离线报警</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <el-table
+        :data="list"
+        class="alarm-table alarm-table-tr"
+        height="212"
+        :highlight-pageNum-row="true"
+      >
+        <el-table-column prop="projectName" label="项目" v-if="userLoginType !=='PERSONAL'" align="center" width="350">
+          <template slot-scope="scope">
+            <div style="display: flex;align-items: center;">
+              <div :class="returnStartImg(scope.row.processStatus)">
+                <svg-icon
+                  icon-class="bigS_alarm"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'UNPROCESS'"
+                  style="color: #FF2F60;"
+                />
+                <svg-icon
+                  icon-class="bigS_jc"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'PROCESSED'"
+                  style="color: #25F094;"
+                />
+                <svg-icon
+                  icon-class="bigS_jj"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'IGNORE'"
+                  style="color: #FF8400;"
+                />
+                <span v-if="scope.row.processStatus === 'UNPROCESS'" style="color: #FF2F60;">报警</span>
+                <span v-if="scope.row.processStatus === 'PROCESSED'" style="color: #25F094;">已处理</span>
+                <span v-if="scope.row.processStatus === 'IGNORE'" style="color: #FF8400;">紧急</span>
+              </div>
+              <span style="margin-left: 10px;" v-text="scope.row.projectName"></span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="deviceName" label="线路" v-else align="center" >
+          <template slot-scope="scope">
+            <div style="display: flex;align-items: center;">
+              <div :class="returnStartImg(scope.row.processStatus)">
+                <svg-icon
+                  icon-class="bigS_alarm"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'UNPROCESS'"
+                  style="color: #FF2F60;"
+                />
+                <svg-icon
+                  icon-class="bigS_jc"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'PROCESSED'"
+                  style="color: #25F094;"
+                />
+                <svg-icon
+                  icon-class="bigS_jj"
+                  class="big-wraring-svg"
+                  v-if="scope.row.processStatus === 'IGNORE'"
+                  style="color: #FF8400;"
+                />
+                <span v-if="scope.row.processStatus === 'UNPROCESS'" style="color: #FF2F60;">报警</span>
+                <span v-if="scope.row.processStatus === 'PROCESSED'" style="color: #25F094;">已处理</span>
+                <span v-if="scope.row.processStatus === 'IGNORE'" style="color: #FF8400;">紧急</span>
+              </div>
+              <span style="margin-left: 10px;" v-text="scope.row.deviceName"></span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="projectAddress" label="地址" v-if="userLoginType !=='PERSONAL'" align="left"></el-table-column>
+        <el-table-column prop="deviceName" label="线路"  align="center" v-if="userLoginType !=='PERSONAL'" width="150"></el-table-column>
+        <el-table-column
+          prop="alarmDivide"
+          label="报警划分"
+          align="center"
+          width="150"
+          :formatter="alarmTypeFormatter"
+        ></el-table-column>
+
+        <el-table-column prop="typeName" label="报警类型" align="center" :width=" userLoginType !=='PERSONAL' ? 150 : ''"></el-table-column>
+        <el-table-column prop="alarmTime" label="报警时间" align="center"  :width=" userLoginType !=='PERSONAL' ? 160 : ''"></el-table-column>
+        <!-- <el-table-column prop="t6" label="耗时" align="center" width="150"></el-table-column> -->
+        <el-table-column prop="processStatus" label="状态" align="center" width="150">
+          <template slot-scope="scope">
+            <span v-if="scope.row.processStatus === 'UNPROCESS'" :style="'color: #FF2F60;'">未处理</span>
+            <span v-if="scope.row.processStatus === 'PROCESSED'" :style="'color: #25F094;'">已处理</span>
+            <span v-if="scope.row.processStatus === 'IGNORE'" :style="'color: #c0c4cc;'">忽略</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import { appAlarmRecordList } from "@/api/app";
+export default {
+  name: "alarmTableList",
+  props: ["projectId"],
+  data() {
+    return {
+      title: "实时报警列表",
+      queryCheckbox: [],
+      list: [],
+       userLoginType: ""
+    };
+  },
+  created() {
+    this.userLoginType = this.$store.getters.userType;
+    this.getAlarmRecrdList();
+  },
+  watch: {
+    projectId(val, oldval) {
+      this.getAlarmRecrdList();
+    },
+    queryCheckbox(val, oldVal) {
+      this.getAlarmRecrdList();
+    }
+  },
+  methods: {
+    returnStartImg(val) {
+      switch (val) {
+        case "UNPROCESS":
+          return "table-start-w bj-a";
+          break;
+
+        case "IGNORE":
+          return "table-start-w bj-jj";
+          break;
+
+        case "PROCESSED":
+          return "table-start-w bj-jc";
+          break;
+      }
+    },
+    alarmTypeFormatter(row) {
+      if (row.alarmDivide === "ALARM") {
+        return "报警";
+      } else if (row.alarmDivide === "WARNING") {
+        return "预警";
+      }
+    },
+    getAlarmRecrdList() {
+      appAlarmRecordList({
+        alarmDivide:
+          this.queryCheckbox.indexOf("warning") < 0 ? "ALARM" : undefined,
+        deviceState:
+          this.queryCheckbox.indexOf("off") >= 0 ? "OFFLINE" : undefined,
+        projectId: this.projectId || undefined,
+        pageNum: 1,
+        pageSize: 5
+      }).then(res => {
+        this.list = res.rows;
+      });
+    }
+  }
+};
+</script>
+<style lang="scss">
+.big-alarm-table-list-wrap {
+  width: 100%;
+  height: 290px;
+  display: flex;
+  flex-wrap: wrap;
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxgao-t.png");
+  }
+  .mk-conter {
+    width: 100%;
+    height: calc(100% - 60px);
+    justify-content: center;
+    padding-top: 10px;
+    background-image: url("../../../../assets/images/big/boxgao-c.png");
+    background-size: contain;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: calc(100%);
+    height: calc(100% - 60px);
+    padding: 0 20px;
+    .query-right-div {
+      width: calc(100%);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 60px;
+      height: 30px;
+      .el-checkbox__label {
+        color: #fff;
+      }
+    }
+    .alarm-table {
+      width: calc(100% - 20px);
+      margin-left: 20px;
+      .el-table__header-wrapper th,
+      .el-table .el-table__fixed-header-wrapper th {
+        background-color: #0124a9;
+        background-color: #002cd27d;
+        color: #fff;
+        height: 50px;
+        border: 0 !important;
+        font-size: 16px;
+        letter-spacing: 2px;
+      }
+      .el-table__empty-block {
+        background: #0124a600;
+      }
+      tr {
+        background: #0124a600;
+        color: #fff;
+      }
+      .el-table__body-wrapper {
+        background: #0124a600;
+      }
+      .el-table__body tr:hover > td {
+        background-color: #0124a600 !important;
+      }
+
+      .el-table__body tr.current-row > td {
+        background-color: #0124a9 !important;
+      }
+      .el-table__body-wrapper::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+      /*滚动条滑块*/
+      .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        background-color: #114f9d;
+      }
+      .has-gutter > tr {
+        color: #909399;
+        font-weight: 500;
+      }
+    }
+    .el-table {
+      background-color: #ffffff00;
+      td {
+        border-bottom: 1px solid #182762;
+      }
+    }
+    .table-start-w {
+      width: 88px;
+      height: 41px;
+      margin-right: 30px;
+      display: flex;
+      justify-content: space-evenly;
+      font-size: 15px;
+      font-family: "Adobe Heiti Std";
+      font-weight: normal;
+      color: #ffc000;
+      line-height: 25px;
+      align-items: center;
+      .big-wraring-svg {
+        font-size: 22px;
+      }
+    }
+    .bj-a {
+      background-image: url("../../../../assets/images/big/biao_06.png");
+    }
+    .bj-jc {
+      background-image: url("../../../../assets/images/big/biao_08.png");
+    }
+    .bj-jj {
+      background-image: url("../../../../assets/images/big/biao_03.png");
+    }
+  }
+  .alarm-table-tr {
+    .el-table__body-wrapper tbody tr {
+      background: #0124a600;
+      color: #fff;
+      background-size: cover;
+      width: 100%;
+      height: 50px;
+      margin-bottom: 10px;
+      // border: 1px solid red;
+    }
+  }
+
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-size: cover;
+    background-image: url("../../../../assets/images/big/boxgao-b.png");
+  }
+}
+</style>

src/views/bigScreen/v2/profile/deviceProportion.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="big-device-proportion-wrap">
+    <div class="title-t">{{title}}</div>
+    <echarts-radar-wrap
+      class="count-info"
+      :styles="'width: 100%; height: 240px;'"
+      eId="echartsGaugeDP" :option="radarOption"></echarts-radar-wrap>
+    <div class="bag-bottom"></div>
+  </div>
+</template>
+<script>
+import titleImg from "@/assets/images/big/b.png";
+import EchartsRadarWrap from "./echartsRadar";
+import { appDeviceStatistics } from '@/api/app'
+export default {
+  name: "DeviceProportionWrap",
+  components: {
+    EchartsRadarWrap
+  },
+  props: ['projectId'],
+  data() {
+    return {
+      list: [],
+      titleImg,
+      title: "所有设备占比分析",
+      radarOption: {
+        indicator: [
+          { name: "物联网断路器", max: 100 },
+          { name: "智能摄像机", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "烟雾传感器", max: 100 },
+          { name: "智能气表", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "智能电表", max: 100 },
+          { name: "智能水表", max: 100 }
+        ],
+        seriesList: [
+          {
+            value: [],
+            name: "预算分配（Allocated Budget）"
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    projectId(val) {
+      this.getDeviceProportionList()
+    }
+  },
+  created() {
+    this.getDeviceProportionList()
+  },
+  methods: {
+    getDeviceProportionList() {
+      appDeviceStatistics({ projectId: this.projectId }).then(res => {
+        const list = res.data;
+        this.radarOption.indicator = [];
+        this.radarOption.seriesList = [];
+        var _this = this;
+        for (var i = 0; i < list.length; i++) {
+          _this.radarOption.indicator.push({
+            name: list[i].deviceTypeName,
+            max: list[i].total <= 0 ? 1 : list[i].total
+          });
+          _this.radarOption.seriesList.push(list[i].thisTotal);
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss">
+.big-device-proportion-wrap {
+  width: 100%;
+  height: 300px;
+  .title-t {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02D9FD;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxleft-top.png");
+  }
+  .count-info {
+    width: 100%;
+    height: 240px;
+    background-image: url("../../../../assets/images/big/boxleft-center.png");
+    background-size: contain;
+    padding-top: 10px;
+  }
+  .bag-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
+  }
+}
+</style>

src/views/bigScreen/v2/profile/echartsBar.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="bigscreen-echarts-bar">
+    <div id="chartBar" :style="styles"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "echartsBar",
+  props: {
+    styles: {
+      type: String
+    },
+    colorList: {
+      type: [Array, String],
+      default: ""
+    },
+    option: {
+      stype: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  created() {
+    this.chart = null;
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      if (!this.chart) {
+        this.chart = echarts.init(document.getElementById("chartBar"));
+      }
+
+      const option = {
+        color: ["#3398DB"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          left: "20",
+          right: "20",
+          bottom: "25",
+          top: 15,
+          containLabel: true
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ["line", "bar"] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["报警总数", "未处理", "已处理"],
+            axisTick: {
+              alignWithLabel: false
+            },
+            axisLabel: {
+              interval: 0,
+              margin: 10,
+              textStyle: {
+                color: "#fff"
+              }
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: ["#1d2c65"],
+                width: 1,
+                type: "solid"
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              interval: 0,
+              margin: 10,
+              textStyle: {
+                color: "#fff"
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ["#1d2c65"],
+                width: 1,
+                type: "solid"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "数量：",
+            type: "bar",
+            barWidth: "40%",
+            data: this.option,
+            itemStyle: {
+              //通常情况下：
+              normal: {
+                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+                color: function(params) {
+                  var colorList = ["#00FCFF", "#FF2F60", "#25F094"];
+                  return colorList[params.dataIndex];
+                }
+              },
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  },
+  watch: {
+    option(val, oldVal) {
+      this.chart = null;
+      this.drawLine();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.bigscreen-echarts-bar {
+  height: 100%;
+}
+</style>

src/views/bigScreen/v2/profile/echartsGauge.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="bigscreen-echarts-gauge">
+    <div :id="eId" :style="styles"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts/core";
+import { GaugeChart } from "echarts/charts";
+import { CanvasRenderer } from "echarts/renderers";
+export default {
+  name: "echartsRadarWrap",
+  props: {
+    eId: {
+      type: String
+    },
+    styles: {
+      type: String
+    },
+    colorList: {
+      type: [Array, String],
+      default: ["#27d0ec"]
+    },
+    option: {
+      stype: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  created() {
+    this.chart = null;
+    echarts.use([GaugeChart, CanvasRenderer]);
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      if (!this.chart) {
+        this.chart = echarts.init(document.getElementById(this.eId));
+      }
+      const options = {
+        series: [
+          {
+            type: "gauge",
+            color: this.colorList,
+            progress: {
+              show: true,
+              width: 15
+            },
+            // axisLine: {
+            //   lineStyle: {
+            //     width: 15
+            //   }
+            // },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              length: 15,
+              show: false,
+              lineStyle: {
+                width: 2,
+                color: "#004299a3"
+              }
+            },
+            axisLabel: {
+              distance: 25,
+              show: false,
+              color: "#999",
+              fontSize: 10
+            },
+            anchor: {
+              show: false,
+              showAbove: true,
+              size: 5,
+              itemStyle: {
+                borderWidth: 2
+              }
+            },
+            title: {
+              text: "今日报警"
+            },
+            axisLine: {
+              // 坐标轴线
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                width: 15,
+                color: [
+                  [1, "#1d2c65"]
+                ]
+              }
+            },
+
+            detail: {
+              valueAnimation: true,
+              fontSize: 15,
+              color: this.colorList[0] || "#27d0ec",
+              offsetCenter: [0, "80%"]
+            },
+            data: [
+              {
+                value: this.option
+              }
+            ]
+          }
+        ]
+      };
+      this.chart.setOption(options);
+    }
+  },
+  watch: {
+    option(val, oldVal) {
+      this.chart = null;
+      this.drawLine();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.bigscreen-echarts-gauge {
+  height: calc(100% - 30px);
+  width: 100%;
+}
+</style>

src/views/bigScreen/v2/profile/echartsLineT.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="bigscreen-echarts-pie">
+    <div :id="eId" :style="styles"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "echartsRadarWrap",
+  props: {
+    eId: {
+      type: String
+    },
+    styles: {
+      type: String
+    },
+    colorList: {
+      type: [Array, String],
+      default: ""
+    },
+    option: {
+      stype: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  created() {
+    this.chart = null;
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    updateEchart() {
+      if (this.chart) {
+        this.chart = null;
+      }
+      this.drawLine();
+    },
+    drawLine() {
+      if (!this.chart) {
+        this.chart = echarts.init(document.getElementById(this.eId));
+      }
+      this.chart.setOption(this.option);
+    }
+  },
+  watch: {
+    option(val, oldVal) {
+      this.chart = null;
+      this.drawLine();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.bigscreen-echarts-pie {
+  position: relative;
+  height: 100%;
+  top: 0px;
+  width: 80%;
+}
+</style>

src/views/bigScreen/v2/profile/echartsPie.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="bigscreen-echarts-pie">
+    <div :id="eId" :style="styles" ></div>
+    <!-- <div v-else>暂无数据</div> -->
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "echartsRadarWrap",
+  props: {
+    eId: {
+      type: String
+    },
+    styles: {
+      type: String
+    },
+    colorList: {
+      type: [Array, String],
+      default: ""
+    },
+    option: {
+      stype: Object,
+      default: []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  created() {
+    this.chart = null;
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    updateEchart() {
+      if (this.chart) {
+        this.chart = null;
+      }
+      this.drawLine();
+    },
+    drawLine() {
+      if (!this.chart) {
+        this.chart = echarts.init(document.getElementById(this.eId));
+      }
+      const option = {
+        legend: {
+          top: "5",
+          right: "60",
+          type: "scroll",
+          orient: "vertical",
+          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
+          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
+          pageIconSize: 10, //翻页按钮大小
+          pageButtonItemGap: 1, //翻页按钮的两个之间的间距
+          textStyle: {
+            color: "#fff",
+            fontSize: 16
+          },
+
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [30, 70],
+            center: ["25%", "50%"],
+            roseType: "area",
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            label: {
+              show: false
+            },
+            itemStyle: {
+              borderRadius: 1
+            },
+            data: this.option
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  },
+  watch: {
+    option(val, oldVal) {
+      this.chart = null;
+      this.drawLine();
+    }
+  }
+};
+</script>
+<style lang="scss">
+.bigscreen-echarts-pie {
+  position: relative;
+  height: 100%;
+  top: 0px;
+  width: 80%;
+}
+</style>

src/views/bigScreen/v2/profile/echartsRadar.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="bigscreen-echarts-radar">
+    <div :id="eId" :style="styles"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "echartsRadarWrap",
+  props: {
+    eId: {
+      type: String
+    },
+    styles: {
+      type: String
+    },
+    colorList: {
+      type: [Array, String],
+      default: ""
+    },
+    option: {
+      stype: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  created() {
+    this.chart = null;
+  },
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      if (!this.chart) {
+        this.chart = echarts.init(document.getElementById(this.eId));
+      }
+      const option = {
+        title: {
+          text: ""
+        },
+        color: this.colorList,
+        tooltip: {},
+        legend: {
+          data: []
+        },
+        radar: {
+          nameGap: 5,
+          name: {
+            textStyle: {
+              color: "#fff",
+              backgroundColor: "#99999900",
+              borderRadius: 2,
+              padding: [1, 1]
+            }
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ["#515a6e00"] // 图表背景网格的颜色
+            }
+          },
+          axisLabel: {
+            // 坐标轴文本标签，详见axis.axisLabel
+            show: false,
+            textStyle: {
+              color: "#247bd7" // 坐标轴刻度文字的样式
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: "#0865da" // 图表背景网格线的颜色
+            }
+          },
+          indicator: this.option.indicator
+        },
+        series: [
+          {
+            name: "预算 vs 开销（Budget vs spending）",
+            type: "radar",
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "rgba(46, 255, 233, 1)", // 图表中各个图区域的边框线拐点颜色
+                lineStyle: {
+                  color: "rgba(30, 238, 255, 1)" // 图表中各个图区域的边框线颜色
+                },
+                areaStyle: {
+                  type: "default"
+                }
+              }
+            },
+            data: [
+              {
+                value: this.option.seriesList,
+                name: ""
+              }
+            ]
+          }
+        ]
+      };
+      console.log('radar',this.option, this.chart)
+      this.chart.setOption(option);
+    }
+  },
+  watch: {
+    option: {
+      handler: function (val, oldVal) {
+        this.chart = null;
+        this.drawLine();
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style lang="scss">
+.bigscreen-echarts-radar {
+  position: relative;
+  height: 100%;
+  top: 0px;
+}
+</style>

src/views/bigScreen/v2/profile/head.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="big-head-wrap">
+    <div class="left-wrap">
+      <!-- <i class="el-icon-map-location"></i>
+      <span class="span-info">全国</span>-->
+      <!-- <el-cascader :options="treeList" :props="{ checkStrictly: true }" clearable></el-cascader> -->
+      <treeselect
+        class="tree-select-wrap"
+        v-model="treeValue"
+        :options="treeList"
+        placeholder="全国"
+        v-show="tempUserType !== 'PERSONAL'"
+      />
+      <el-select
+        v-show="tempUserType !== 'PERSONAL'"
+        v-model="inputValue"
+        size="small"
+        filterable
+        placeholder="项目名称"
+        clearable
+      >
+        <el-option
+          v-for="item in projectList"
+          :key="item.projectId"
+          :label="item.projectName"
+          :value="item.projectId"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="title-wrap">{{handelTile}}</div>
+    <div class="right-wrap">
+      <span>{{days}}</span>
+      <span>{{weeks}}</span>
+      <span>{{time}}</span>
+      <!-- <el-button type="text" @click="signOut" title="退出大屏" plain icon="iconfont icontuichu"></el-button> -->
+      <el-button
+        type="text"
+        @click="fullScreen"
+        :title="fullscreen ? '退出全屏':'全屏' "
+        plain
+        :icon="fullscreen ? 'iconfont iconshousuo':'iconfont iconquanping1'"
+      ></el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { treeListRegionalism } from "@/api/system/regionalism";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "bigHeadWrap",
+  props: ["handelTile", "projectList"],
+  components: {
+    Treeselect
+  },
+  data() {
+    return {
+      inputValue: "",
+      days: "",
+      weeks: "",
+      time: "",
+      treeList: [],
+      treeValue: null,
+      tempUserType: null,
+      fullscreen: false
+    };
+  },
+  mounted() {
+    setInterval(this.getDate, 1000);
+  },
+  created() {
+    this.tempUserType = this.$store.getters.userType;
+    this.treeListRegionalism();
+    this.getDate();
+  },
+  watch: {
+    inputValue(val) {
+      this.$emit("eventProjectId", val);
+    },
+    treeValue(val) {
+      this.$emit("eventRegionalismId", val);
+    }
+  },
+  methods: {
+    // 退出大屏 默认进入项目首页
+    signOut() {
+      this.$router.push("/");
+    },
+    fullScreen() {
+      // let element = document.getElementsByClassName("big-head-wrap"); //设置后就是   id==con_lf_top_div 的容器全屏
+      let element = document.getElementById("con_lf_top_div"); //设置后就是   id==con_lf_top_div 的容器全屏
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+      }
+      this.fullscreen = !this.fullscreen;
+      this.$emit("eventFullscreen", { value: this.fullscreen });
+    },
+    treeListRegionalism() {
+      treeListRegionalism({}).then(res => {
+        this.treeList = res.data;
+      });
+    },
+    getDate() {
+      this.weeks = this.parseTime(new Date(), "星期{a}");
+      this.days = this.parseTime(new Date(), "{y}-{m}-{d}");
+      this.time = this.parseTime(new Date(), "{h}:{i}:{s}");
+    }
+  }
+};
+</script>
+<style lang="scss">
+.big-head-wrap {
+  height: 72px;
+  width: 100%;
+  display: flex;
+  background-image: url("../../../../assets/images/big/head_v2.png");
+  background-size: cover;
+  .left-wrap {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    // color: #fff;
+    font-size: 14px;
+    align-items: flex-end;
+    justify-content: left;
+    padding-left: 30px;
+    display: flex;
+    align-items: center;
+    padding-top: 20px;
+    > i {
+      line-height: 1.5;
+    }
+    .span-info {
+      display: block;
+      width: 70px;
+      margin-left: 5px;
+    }
+    .el-input {
+      min-width: 150px;
+    }
+    .el-input--small .el-input__inner {
+      // line-height: 36px;
+      background: #ff000000;
+      border-color: #007598;
+      border-color: #153678;
+      color: #fff;
+      margin-left: 10px;
+    }
+    .el-input__prefix {
+      top: -4px;
+    }
+    .tree-select-wrap {
+      height: 32px;
+      .vue-treeselect__control {
+        background: #fff0;
+        border-color: #007598;
+        border-color: #153678;
+        height: 32px;
+      }
+      .vue-treeselect__single-value {
+        color: #fff;
+      }
+    }
+  }
+  .title-wrap {
+    color: #fff;
+    width: calc(100% - 40%);
+    display: flex;
+    font-size: 36px;
+    font-family: "Source Han Sans CN";
+    font-weight: 500;
+    letter-spacing: 2px;
+    justify-content: center;
+    align-items: center;
+  }
+  .right-wrap {
+    width: 20%;
+    display: flex;
+    color: #fff;
+    font-size: 20px;
+    justify-content: space-around;
+    align-items: flex-end;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    padding-top: 20px;
+    margin-right: 30px;
+    .el-button--text {
+      border: 1px solid;
+      width: 30px;
+      height: 30px;
+      border-radius: 5px 0;
+      padding-top: 6px;
+      font-size: 16px;
+      .el-icon-setting {
+        font-weight: 600;
+      }
+    }
+    .el-button--text：hover {
+      background: transparent;
+    }
+  }
+}
+</style>

src/views/bigScreen/v2/profile/mapWrap.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="big-map-wrap">
+    <div class="mk-top"></div>
+    <div class="mk-conter">
+      <amap-wrap
+        :mapCenter="{
+        lng: 116.397428,
+        lat: 39.90923,
+        address: ''
+      }"
+        ref="bigscLocationMap"
+        :projectList="projectList"
+      ></amap-wrap>
+      <!-- <div
+        class="botton-top-wrap-1"
+        :style="isFold ? 'height: 50px; display: flex; align-items: center;' : ''"
+        >
+        <div class="top-wrap-1" v-show="isFold === false">
+          <div
+            v-for="item in labelList"
+            :key="item.valueKeys"
+            v-show="!(tempUserType === 'PERSONAL' && item.valueKeys === 'projectTotal')"
+          >
+            <div class="item-value">{{countResult[item.valueKeys]}}</div>
+            <img :src="item.image" style="pointer-events: none;" />
+            <div class="item-label" @click="routerTokeys(item.valueKeys)">{{item.label}}</div>
+          </div>
+        </div>
+        <div class="fold-wrap" @click="isFold = !isFold">
+          <i :class="isFold ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
+        </div>
+      </div>-->
+      <div class="map-top">
+        <div class="for-i-block" v-show="!(tempUserType === 'PERSONAL' && item.valueKeys === 'projectTotal')" v-for="item in labelList" :key="item.guid">
+          <div class="i-title">{{item.label}}</div>
+          <div @click="routerTokeys(item.valueKeys)" class="i-value" :style="'color: ' + item.color + ';border-bottom: 2px solid ' + item.color">{{countResult[item.valueKeys]}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import amapWrap from "@/components/Amap/components/bigscLocation/indexV_2";
+import imgs from "@/assets/images/big/maptp_v1.png";
+import { appProjectDeviceList } from "@/api/app";
+export default {
+  name: "mapWrap",
+  components: {
+    amapWrap
+  },
+  props: ["countResult", "projectList", "fullscreen"],
+  data() {
+    return {
+      imgs,
+      labelList: [
+        {
+          guid: "1",
+          label: "项目总数",
+          valueKeys: "projectTotal",
+          image: imgs,
+          routerKeys: "project",
+          color: '#97B1FC'
+        },
+        {
+          guid: "2",
+          label: "设备总数",
+          valueKeys: "deviceTotal",
+          image: imgs,
+          routerKeys: "device",
+          color: '#00C0FF'
+        },
+        {
+          guid: "3",
+          label: "在线设备",
+          valueKeys: "onlineDeviceTotal",
+          image: imgs,
+          routerKeys: "device",
+          color: '#00FF06'
+        },
+        {
+          guid: "2",
+          label: "报警总数",
+          valueKeys: "alarmTotal",
+          image: imgs,
+          routerKeys: "alarm",
+          color: '#E8512E'
+        },
+        {
+          guid: "4",
+          label: "今日报警",
+          valueKeys: "todayAlarmTotal",
+          image: imgs,
+          routerKeys: "alarm",
+          color: '#FFC659'
+        }
+      ],
+      deviceList: [],
+      tempUserType: null,
+      isFold: true
+    };
+  },
+  created() {
+    this.tempUserType = this.$store.getters.userType;
+  },
+  methods: {
+    closeFullScreen() {
+      let element = document.getElementById("con_lf_top_div");
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.$emit("eventFullscreen", { value: false });
+    },
+    routerTokeys(keys) {
+      if (this.fullscreen) {
+        this.closeFullScreen();
+      }
+      var routerPath = "";
+      switch (keys) {
+        case "projectTotal":
+          routerPath = "/project/project";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/project_tenant/project_tenant";
+          }
+          break;
+        case "deviceTotal":
+          routerPath = "/device/device";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/device_tenant/device_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/device_oneself/device_oneself";
+          }
+          break;
+        case "onlineDeviceTotal":
+          routerPath = "/device/device";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/device_tenant/device_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/device_oneself/device_oneself";
+          }
+          break;
+        case "todayAlarmTotal":
+          routerPath = "/alarm/record";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/alarm_tenant/alarm_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/alarm_oneself/alarm_oneself";
+          }
+          break;
+        case "alarmTotal":
+          routerPath = "/alarm/record";
+          if (this.$store.getters.userType === "TENANT") {
+            routerPath = "/alarm_tenant/alarm_tenant";
+          } else if (this.$store.getters.userType === "PERSONAL") {
+            routerPath = "/alarm_oneself/alarm_oneself";
+          }
+          break;
+      }
+
+      this.$router.push({ path: routerPath });
+    },
+    overview() {
+      this.$refs.bigscLocationMap.overview();
+    }
+  },
+  watch: {}
+};
+</script>
+<style lang="scss">
+.big-map-wrap {
+  height: 100%;
+  width: 100%;
+  .mk-top {
+    width: 100%;
+    height: 30px;
+    background-image: url("../../../../assets/images/big/boxmap-t.png");
+  }
+  .mk-conter {
+    width: 100%;
+    height: 651px;
+    padding: 0px 20px;
+    background-image: url("../../../../assets/images/big/boxmap-c.png");
+    .map-top {
+      width: 570px;
+      height: 134px;
+      background: #0000004d;
+      position: fixed;
+      top: 101px;
+      // left: -1px;
+      margin-right: 1px;
+      display: flex;
+      justify-content: space-evenly;
+      padding-top: 10px;
+      .for-i-block {
+        width: 109px;
+        height: 35px;
+        background: #142ea780;
+        .i-title {
+          width: 109px;
+          height: 35px;
+          background: #142ea780;
+          font-size: 16px;
+          font-family: "Source Han Sans CN";
+          font-weight: 400;
+          color: #ffffff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .i-value {
+          width: 109px;
+          height: 79px;
+          background: #3a4ead80;
+          font-size: 40px;
+          font-family: "Agency FB";
+          font-weight: 400;
+          color: #97b1fc;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .mk-bottom {
+    width: 100%;
+    height: 30px;
+    background-image: url("../../../../assets/images/big/boxmap-b.png");
+  }
+
+  .botton-top-wrap-1 {
+    position: fixed;
+    width: calc(58% + 4px);
+    top: 66px;
+    height: 230px;
+    background: linear-gradient(
+      rgba(1, 18, 145, 0.65) 0%,
+      rgba(3, 63, 99, 0.5) 100%
+    );
+    box-shadow: 0px 1px 3px #033f6380;
+    .top-wrap-1 {
+      width: 100%;
+      height: 200px;
+      // position: relative;
+      // top: -743px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      // pointer-events: none;
+      > div {
+        width: 150px;
+        height: 150px;
+        display: "-webkit-box";
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        .item-value {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          height: 45px;
+          font-size: 28px;
+          font-family: "Source Han Sans CN";
+          font-weight: 600;
+          color: #f7f2ea;
+          background: linear-gradient(180deg, #fbcf34 0%, #ff9b58 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          pointer-events: none;
+          position: relative;
+          top: 22px;
+          font-size: 32px;
+        }
+        .item-label {
+          width: 100%;
+          height: 16px;
+          font-size: 16px;
+          font-family: "Microsoft YaHei";
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 8px;
+          text-align: center;
+        }
+        .item-label:hover {
+          color: #fbcf34;
+        }
+      }
+    }
+    .fold-wrap {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 30px;
+      color: #32bcdd;
+    }
+    .fold-wrap:hover {
+      color: #fff;
+      background: linear-gradient(180deg, #9c9c9c0d 0%, #f3a0698a 100%);
+    }
+  }
+  .bottom-wrap-1 {
+    position: relative;
+    top: -280px;
+    top: -50px;
+    left: 90%;
+    > div {
+      margin-bottom: 5px;
+      font-size: 14px;
+      font-family: "Source Han Sans CN";
+      font-weight: 400;
+      color: #07beff;
+      line-height: 20px;
+    }
+    .mapButton {
+      padding: 5px;
+      width: 26px;
+      height: 26px;
+      background: #00629866;
+      border: 1px solid #008ee3;
+      border-radius: 2px;
+      color: #05bcff;
+      margin-right: 5px;
+    }
+  }
+
+  .amap-logo {
+    display: none;
+    opacity: 0 !important;
+  }
+  .amap-copyright {
+    opacity: 0;
+  }
+}
+</style>

src/views/bigScreen/v2/profile/personalCenter.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="bigscreen-personal-center">
+    <div class="mk-top">{{title}}</div>
+    <div class="mk-conter">
+      <div v-for="item in list" :key="item.deviceKey" class="info-crad">
+        <div class="info-title">
+          <img :src="titleImg" />
+          {{item.deviceName}}
+        </div>
+        <div class="info-block">
+          <div class="device-info">
+            <img :src="deviceImg" />
+            <div
+              class="info-state-wrap"
+              :style="item.unProcessAlarmTotal > 0 ? 'color: red;': ''"
+              v-text="item.unProcessAlarmTotal > 0 ? '报警': '正常'"
+            ></div>
+            <div class="info-lable">设备状态</div>
+          </div>
+          <div class="alarm-info" style="font-size: 20px; padding-right: 6px;">
+            <img :src="alarmImg" />
+            <div class="info-alarm-num">{{item.unProcessAlarmTotal}}</div>个
+            <div class="info-lable">报警总数</div>
+          </div>
+          <el-button
+            type="text"
+            class="big-el-button"
+            @click="toDeviceDetails(item)"
+            icon="el-icon-search"
+          >查看详情</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import titleImg from "@/assets/images/big/z_title.png";
+import deviceImg from "@/assets/images/big/device_1.png";
+import alarmImg from "@/assets/images/big/alarm1.png";
+import { listDevice } from "@/api/personal/device";
+export default {
+  name: "personalCenter",
+  props: [""],
+  data() {
+    return {
+      titleImg,
+      deviceImg,
+      alarmImg,
+      list: []
+    };
+  },
+  created() {
+    this.getDeviceList();
+  },
+  methods: {
+    getDeviceList() {
+      listDevice({
+        pageNum: 1,
+        pageSize: 9999
+      }).then(response => {
+        this.list = response.rows;
+      });
+    },
+    toDeviceDetails(row) {
+      this.$router.push({
+        name: "Device_oneself",
+        params: { deviceId: row.deviceId, tempType: "details" }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bigscreen-personal-center {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -ms-flex-wrap: wrap;
+  padding-top: 10px;
+  float: left;
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxmap-t.png");
+  }
+  .mk-conter {
+    width: 100%;
+    height: calc(100% - 60px);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    background-image: url("../../../../assets/images/big/boxmap-c.png");
+    background-size: contain;
+    justify-content: start;
+    padding: 0 20px;
+    .info-crad {
+      width: 358px;
+      height: 243px;
+      width: 333px;
+      background: rgba(0, 36, 125, 0.5);
+      /* -webkit-box-shadow: 0px 0px 18px 3px rgb(73 94 255 / 70%); */
+      box-shadow: 0px 0px 18px 6px #495effb3;
+      margin: 4px;
+      float: left;
+      display: flex;
+      flex-wrap: wrap;
+      background-image: url("../../../../assets/images/big/info_bg.png");
+      .info-title {
+        width: 100%;
+        height: 70px;
+        display: flex;
+        padding-left: 30px;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: flex-end;
+        font-size: 18px;
+        font-family: "Source Han Sans CN";
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 20px;
+        align-items: center;
+
+        > img {
+          margin-right: 5px;
+        }
+      }
+      .info-block {
+        height: calc(100% - 70px);
+        width: 100%;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      .device-info {
+        width: 50%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+        > img {
+          margin-right: 10px;
+          margin-left: 20px;
+          width: 28px;
+        }
+        .info-state-wrap {
+          width: calc(100% - 80px);
+          height: 45px;
+          font-size: 24px;
+          font-family: "Source Han Sans CN";
+          font-weight: 400;
+          color: #04fefe;
+          line-height: 42px;
+        }
+        .info-lable {
+          font-size: 16px;
+          font-family: " Source Han Sans CN";
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 22px;
+          padding-left: 20px;
+          height: 25px;
+        }
+      }
+      .alarm-info {
+        width: 50%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+        > img {
+          margin-right: 10px;
+          margin-left: 20px;
+          width: 28px;
+        }
+        .info-alarm-num {
+          font-size: 30px;
+          font-family: "ShiShangZhongHeiJianTi";
+          font-weight: 400;
+          color: #fab03c;
+          line-height: 42px;
+          width: 80px;
+          overflow: hidden;
+        }
+        .info-lable {
+          font-size: 16px;
+          font-family: " Source Han Sans CN";
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 22px;
+          padding-left: 20px;
+          height: 25px;
+        }
+      }
+      .big-el-button {
+        margin-right: 15px;
+      }
+    }
+  }
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxmap-b.png");
+  }
+}
+</style>

src/views/bigScreen/v2/profile/todayRatio.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="big-today-ratio-wrap">
+    <div class="mk-top">{{title}}</div>
+    <div class="mk-conter">
+      <div class="echarts-list-wrap">
+        <div v-for="item in rchartsList" :key="item.valueKeys">
+          <div class="title">{{item.title}}</div>
+          <echarts-gauge-wrap
+            :styles="item.styles"
+            :colorList="item.colorList"
+            :eId="item.valueKeys"
+            :option="tempResult[item.valueKeys]"
+          ></echarts-gauge-wrap>
+        </div>
+      </div>
+      <div class="info-tb-block">
+        <div>
+          <div>{{alarmTB}}%</div>
+          <div>同比</div>
+        </div>
+        <div>
+          <div>{{warningTB}}%</div>
+          <div>同比</div>
+        </div>
+      </div>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import EchartsGaugeWrap from "./echartsGauge";
+export default {
+  name: "todayRatio",
+  components: {
+    EchartsGaugeWrap
+  },
+  props: ["result"],
+  data() {
+    return {
+      tempResult: {
+        q1: 0,
+        q2: 0,
+        q3: 0,
+        q4: 0
+      },
+      alarmTB: 0,
+      warningTB: 0,
+      rchartsList: [
+        {
+          styles: "width: 100%; height: 100%;",
+          colorList: ["#27d0ec"],
+          valueKeys: "q1",
+          title: "今日报警"
+        },
+        {
+          styles: "width: 100%; height: 100%;",
+          colorList: ["#fdc46e"],
+          valueKeys: "q2",
+          title: "昨日报警 "
+        },
+        {
+          styles: "width: 100%; height: 100%;",
+          colorList: ["#27d0ec"],
+          valueKeys: "q3",
+          title: "今日预警"
+        },
+        {
+          styles: "width: 100%; height: 100%;",
+          colorList: ["#fdc46e"],
+          valueKeys: "q4",
+          title: "昨日预警"
+        }
+      ],
+      title: "最近2天警情同比"
+    };
+  },
+  watch: {
+    result: {
+      handler: function(val, oldVal) {
+        if (val) {
+          this.tempResult = {};
+          for (var i = 0; i < val.length; i++) {
+            if (val[i]["alarmDivide"] === "ALARM") {
+              this.tempResult["q1"] = val[i]["todayAlarm"];
+              this.tempResult["q2"] = val[i]["yesterdayAlarm"];
+              this.alarmTB = val[i]["dayOnDay"];
+            } else if (val[i]["alarmDivide"] === "WARNING") {
+              this.tempResult["q3"] = val[i]["todayAlarm"];
+              this.tempResult["q4"] = val[i]["yesterdayAlarm"];
+              this.warningTB = val[i]["dayOnDay"];
+            }
+          }
+        }
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.big-today-ratio-wrap {
+  width: 100%;
+  height: 390px;
+  display: flex;
+  flex-wrap: wrap;
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxleft-top.png");
+  }
+  .mk-conter {
+    width: 100%;
+    height: 330px;
+    background-image: url("../../../../assets/images/big/boxleft-center.png");
+    background-size: contain;
+    padding-top: 10px;
+    padding: 5px;
+    display: flex;
+    padding: 0 20px;
+    .echarts-list-wrap {
+      width: 80%;
+      height: 200px;
+      height: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      > div {
+        width: 50%;
+        height: calc(100% / 2);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        font-size: 14px;
+        font-family: "Source Han Sans CN";
+        font-weight: 400;
+        > .title {
+          position: relative;
+          top: 10px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          height: 30px;
+        }
+      }
+    }
+    .info-tb-block {
+      height: 100%;
+      display: flex;
+      width: 20%;
+      flex-wrap: wrap;
+      align-items: center;
+      font-size: 16px;
+      cursor: default;
+      > div {
+        width: 100%;
+        // height:  50%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: inherit;
+        justify-content: center;
+        > div {
+          width: 100%;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
+  }
+}
+</style>

src/views/bigScreen/v2/profile/trend.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="big-trend-wrap">
+    <div class="mk-top">{{title}}</div>
+    <div class="mk-conter">
+      <echarts-line-wrap
+        ref="echartsLineTrend"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></echarts-line-wrap>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import echartsLineWrap from "./echartsLineT";
+import * as echarts from "echarts";
+export default {
+  name: "typeDistribution",
+  components: {
+    echartsLineWrap
+  },
+  props: ['result'],
+  data() {
+    return {
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ['#FC6A16', '#1EEEFF'],
+        eId: "trendEchartsLine"
+      },
+      title: "报警预警趋势",
+      typeName: "alarm",
+      resultOption: {
+        color: ['#FC6A16', '#1EEEFF'],
+        title: {
+          text: "",
+          show: false
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          top: 5,
+          right: 5,
+          data: ["报警", "预警"],
+          icon: "circle",
+          textStyle: {
+            color: "#fff",
+            fontSize: 16
+          }
+        },
+        grid: {
+          left: "20",
+          right: "20",
+          bottom: "5",
+          top: 30,
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          show: true,
+          data: [],
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        series: [
+          {
+            name: "报警",
+            type: "line",
+            smooth: true,
+            symbolSize: 12,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(252,106,22,0.8)"
+                },
+                {
+                  offset: 1,
+                  color: "rgba(252,106,22,0.1)"
+                }
+              ])
+            },
+            label: {
+              show: false,
+              formatter: function(params) {
+                return echarts.format.formatTime("yyyy-MM-dd", params.value);
+              },
+              backgroundColor: "#7581BD"
+            },
+            data: []
+          },
+          {
+            name: "预警",
+            type: "line",
+            smooth: false,
+            symbolSize: 12,
+            data: []
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    result: {
+      handler: function(val, oldVal) {
+        this.resultOption.xAxis.data = val['name']
+        this.resultOption.series[0].data = val['alarm']
+        this.resultOption.series[1].data = val['warning']
+        this.updateEcharts()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 类型发生变化根据新数据刷新 图表信息
+    updateEcharts() {
+      this.$refs.echartsLineTrend.updateEchart()
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.big-trend-wrap {
+  width: 100%;
+  height: 287px;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxleft-top.png");
+  }
+
+  .mk-conter {
+    width: 100%;
+    height: calc(100% - 60px);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    background-image: url("../../../../assets/images/big/boxleft-center.png");
+    background-size: contain;
+    .tabs-block {
+      width: 305px;
+      height: 38px;
+      background: #bfbfbf94;
+      display: flex;
+      color: #fff;
+      > div {
+        width: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        letter-spacing: 7px;
+        cursor: default;
+      }
+      .div-select {
+        background: #0010ff;
+      }
+    }
+  }
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
+  }
+
+}
+</style>

src/views/bigScreen/v2/profile/typeDistribution.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="big-type-distribution-wrap">
+    <div class="mk-top">{{title}}</div>
+    <div class="mk-conter">
+      <div class="tabs-block">
+        <div @click="typeName = 'alarm'" :class="typeName === 'alarm' ? 'div-select' : ''">报警</div>
+        <div @click="typeName = 'waraing'" :class="typeName === 'waraing' ? 'div-select' : ''">预警</div>
+      </div>
+      <echarts-pie-wrap
+        ref="echartsPieType"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="templist[typeName]"
+      ></echarts-pie-wrap>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import EchartsPieWrap from "./echartsPie";
+export default {
+  name: "typeDistribution",
+  components: {
+    EchartsPieWrap
+  },
+  props: ['result'],
+  data() {
+    return {
+      resultList: [
+        { value: 40, name: "rose 1" },
+        { value: 38, name: "rose 2" },
+        { value: 32, name: "rose 3" },
+        { value: 30, name: "rose 4" }
+      ],
+      templist: {
+        alarm: [],
+        waraing: []
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: [],
+        eId: "typeEchartsPie"
+      },
+      title: "类型分布统计",
+      typeName: 'alarm'
+    };
+  },
+  watch: {
+    typeName(val, old) {
+      if (val) {
+        this.updateEcharts()
+      }
+    },
+    result: {
+      handler: function(list, oldVal) {
+        this.templist = {
+          alarm: [],
+          waraing: []
+        }
+        if (list) {
+          for(var i = 0; i < list.length; i++) {
+            console.log(list[i]['typeCode'].indexOf('a'))
+            if (list[i]['typeCode'].indexOf('a') === 0) {
+              this.templist['alarm'].push({ value: list[i].alarmTotal, name: list[i].typeName })
+            } else if (list[i]['typeCode'].indexOf('w') === 0) {
+              this.templist['waraing'].push({ value: list[i].alarmTotal, name: list[i].typeName })
+            }
+          }
+        }
+        console.log(this.templist)
+        this.updateEcharts()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 类型发生变化根据新数据刷新 图表信息
+    updateEcharts() {
+      this.$refs.echartsPieType.updateEchart()
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.big-type-distribution-wrap {
+  width: 100%;
+  height: 320px;
+  display: flex;
+  flex-wrap: wrap;
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxleft-top.png");
+  }
+  .mk-conter {
+    width: 100%;
+    height: calc(100% - 60px);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-top: 10px;
+    background-image: url("../../../../assets/images/big/boxleft-center.png");
+    background-size: contain;
+    .tabs-block {
+      width: 305px;
+      height: 38px;
+      background: #00029d;
+      display: flex;
+      color: #fff;
+      >div {
+        width: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        letter-spacing: 7px;
+        cursor: default;
+      }
+      .div-select {
+        background: #0010FF;
+      }
+    }
+  }
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
+  }
+}
+</style>

src/views/bigScreen/v2/profile/wraringInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="big-wraring-info-wrap">
+    <div class="mk-top">{{title}}</div>
+    <div class="conter-block">
+      <div class="count-block">
+        <div class="info-block-div alarm-ycl">
+          <div>
+            <svg-icon icon-class="bigS_jc" class="big-wraring-svg" />
+          </div>
+          <div>已处理</div>
+          <div >{{result.processed}}</div>
+        </div>
+        <div class="info-block-div alarm-wcl">
+          <div>
+            <svg-icon icon-class="bigS_jj" class="big-wraring-svg" />
+          </div>
+          <div style="color: #ffc000;">未处理</div>
+          <div >{{result.unProcessed}}</div>
+        </div>
+        <div class="info-block-div alarm-zs">
+          <div>
+            <svg-icon icon-class="bigS_alarm" class="big-wraring-svg" />
+          </div>
+          <div style="color: #e30000;">报警总数</div>
+          <div>{{result.alarmTotal}}</div>
+        </div>
+      </div>
+      <echarts-bar-wrap style="display: flex; justify-content: center;" :styles="'width: 90%; height: 180px;'" :option="radarOption"></echarts-bar-wrap>
+    </div>
+    <div class="mk-bottom"></div>
+  </div>
+</template>
+<script>
+import EchartsBarWrap from "./echartsBar";
+export default {
+  name: "wraringInfoWrap",
+  components: {
+    EchartsBarWrap
+  },
+  props: ["result"],
+  data() {
+    return {
+      title: "警情信息处理情况",
+      radarOption: []
+    };
+  },
+  created() {
+    this.radarOption = [0, 0, 0];
+  },
+  watch: {
+    result: {
+      handler: function(obj, oldVal) {
+        this.radarOption = [];
+        if (obj) {
+          this.radarOption.push(obj.alarmTotal);
+          this.radarOption.push(obj.unProcessed);
+          this.radarOption.push(obj.processed);
+        } else {
+          this.radarOption = [0, 0, 0];
+        }
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style lang="scss">
+.big-wraring-info-wrap {
+  width: 100%;
+  height: calc(100% - 300px);
+  .mk-top {
+    height: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: "Source Han Sans CN";
+    font-weight: 400;
+    color: #02d9fd;
+    padding-left: 0;
+    align-items: end;
+    padding-bottom: 0px;
+    letter-spacing: 1px;
+    background-size: cover;
+    padding-top: 4px;
+    background-image: url("../../../../assets/images/big/boxleft-top.png");
+  }
+
+  .conter-block {
+    width: 100%;
+    height: 350px;
+    background-image: url("../../../../assets/images/big/boxleft-center.png");
+    background-size: contain;
+    padding-top: 10px;
+    padding: 5px;
+    .count-block {
+      width: calc(100% - 40px);
+      height: 180px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin: 5px 20px;
+      .info-block-div {
+        width: 115px;
+        height: 165px;
+        border: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        padding: 20px 0;
+
+        > div {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          font-family: "Source Han Sans SC";
+        }
+        > div:nth-child(2) {
+          font-size: 16px;
+          color: #ffffff;
+          font-size: 16px;
+          font-weight: 400;
+          color: #00bedb;
+          line-height: 16px;
+        }
+        > div:nth-child(3) {
+          font-size: 34px;
+          font-family: "Agency FB";
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 36px;
+          height: 40px;
+        }
+        .big-wraring-svg {
+          font-size: 40px;
+        }
+      }
+      .alarm-zs {
+        background-image: url("../../../../assets/images/big/Group20.png");
+      }
+      .alarm-ycl {
+        background-image: url("../../../../assets/images/big/Group22.png");
+      }
+      .alarm-wcl {
+        background-image: url("../../../../assets/images/big/Group21.png");
+      }
+
+      .alarm-icon-block {
+        position: relative;
+        width: 49px;
+        height: 49px;
+        z-index: 1;
+        border: 2px solid #21ffff;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        top: -120px;
+        left: 155px;
+        background: #042fb4;
+        box-shadow: 0px 0px 60px 15px #012c9e;
+        > i {
+          color: #21ffff;
+          font-size: 30px;
+        }
+      }
+    }
+  }
+  .mk-bottom {
+    height: 30px;
+    width: 100%;
+    background-image: url("../../../../assets/images/big/boxleft-bottom.png");
+  }
+}
+</style>

src/views/iot/alarm/record/index.vue

@@ -15,10 +15,11 @@
           @change="queryTimeChange"
           clearable
           type="datetimerange"
+          :default-time="['00:00:00', '23:59:59']"
           range-separator="至"
           start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
+          end-placeholder="结束日期"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item label="告警类型" prop="typeName">
         <el-input
@@ -56,14 +57,20 @@
         <template slot-scope="scope">
           <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
         </template>
-      </el-table-column> -->
+      </el-table-column>-->
       <el-table-column label="推送内容" align="left" prop="alarmContent" />
       <el-table-column label="报警时间" align="center" prop="alarmTime" width="120">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="处理状态" width="100px" align="center" prop="processState" :formatter="stateFormatter"/>
+      <el-table-column
+        label="处理状态"
+        width="100px"
+        align="center"
+        prop="processState"
+        :formatter="stateFormatter"
+      />
       <el-table-column label="处理结果" align="left" width="150px" prop="processResult" />
       <el-table-column label="处理时间" align="center" prop="processTime" width="120">
         <template slot-scope="scope">
@@ -81,16 +88,11 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
   </div>
 </template>
 
 <script>
-import {
-  listRecord,
-  getRecord,
-  exportRecord
-} from "@/api/alarm/record";
+import { listRecord, getRecord, exportRecord } from "@/api/alarm/record";
 import Editor from "@/components/Editor";
 
 export default {
@@ -126,7 +128,7 @@ export default {
         typeCode: null,
         beginTime: null,
         endTime: null,
-        alarmDivide: 'ALARM'
+        alarmDivide: "ALARM"
       },
       // 表单参数
       form: {},
@@ -141,15 +143,21 @@ export default {
   methods: {
     queryTimeChange(val) {
       if (val) {
-        this.queryParams.beginTime = this.parseTime(val[0], '{y}-{m}-{d} {h}:{i}:{s}')
-        this.queryParams.endTime = this.parseTime(val[1], '{y}-{m}-{d} {h}:{i}:{s}')
+        this.queryParams.beginTime = this.parseTime(
+          val[0],
+          "{y}-{m}-{d} {h}:{i}:{s}"
+        );
+        this.queryParams.endTime = this.parseTime(
+          val[1],
+          "{y}-{m}-{d} {h}:{i}:{s}"
+        );
       } else {
         this.queryParams.beginTime = null;
         this.queryParams.endTime = null;
       }
     },
     stateFormatter(val) {
-      return  val === '2' ? '已处理' : '未处理'
+      return val === "2" ? "已处理" : "未处理";
     },
     indexFormatter(val) {
       return (
@@ -176,7 +184,7 @@ export default {
         this.form = res.data;
         this.open = true;
         this.title = `告警记录详情`;
-      })
+      });
     },
     /** 搜索按钮操作 */
     handleQuery() {

src/views/iot/alarm/type/index.vue

@@ -1,24 +1,6 @@
 <template>
   <div class="app-container alarm-type">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-      <!-- <el-form-item label="编码" prop="typeCode">
-        <el-input
-          v-model="queryParams.typeCode"
-          placeholder="请输入报警类型编码"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>-->
-      <!-- <el-form-item label="标签">
-        <el-input
-          v-model="queryParams.tag"
-          placeholder="请输入报警标签"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item> -->
       <el-form-item label="类型名称" prop="typeName">
         <el-input
           v-model="queryParams.typeName"
@@ -29,6 +11,42 @@
         />
       </el-form-item>
 
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select
+          v-model="queryParams.deviceType"
+          style="width: 100%;"
+          clearable
+          size="small"
+          placeholder="请输入报警设备类型"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="(keys, vals) in deviceTypeList"
+            :label="keys"
+            :value="vals"
+            :key="vals"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="报警划分" prop="alarmDivide">
+        <el-select
+          v-model="queryParams.alarmDivide"
+          style="width: 100%;"
+          clearable
+          size="small"
+          placeholder="请输入报警设备类型"
+          @change="handleQuery"
+        >
+          <el-option
+            :label="keys"
+            v-for="(keys, vals) in alarmDivideType"
+            :value="vals"
+            :key="vals"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -54,7 +72,7 @@
           @click="handleUpdate"
           v-hasPermi="['iot:type:edit']"
         >修改</el-button>
-      </el-col> -->
+      </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -86,11 +104,17 @@
       <!-- <el-table-column label="编码" align="left" sortable="custom" prop="typeCode" /> -->
       <el-table-column label="名称" align="left" sortable="custom" prop="typeName" />
       <el-table-column label="设备类型" align="center" prop="deviceTypeName" />
-      <el-table-column label="报警划分" align="center" width="100px" prop="alarmDivide" :formatter="alarmDivideForm" />
+      <el-table-column
+        label="报警划分"
+        align="center"
+        width="100px"
+        prop="alarmDivide"
+        :formatter="alarmDivideForm"
+      />
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <span v-if="scope.row.status === 0">启用</span>
-          <span v-else>关闭</span>
+          <span v-else>停用</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
@@ -124,7 +148,13 @@
     />
 
     <!-- 添加或修改告警类型对话框 -->
-    <el-dialog class="eldialog-wrap" :close-on-click-modal="false" :title="title" :visible.sync="open" width="500px" >
+    <el-dialog
+      class="eldialog-wrap"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="名称" prop="typeName">
           <el-input v-model="form.typeName" placeholder="请输入报警类型名称" />
@@ -169,7 +199,6 @@
             inactive-value="0"
           ></el-switch>
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
@@ -190,9 +219,9 @@ import {
 import { listDeviceTypeList } from "@/api/iot/device";
 // import { selectedProdmodel } from "@/api/device/prodmodel";
 const alarmDivideType = {
-  ALARM: '报警',
-  WARNING: '预警'
-}
+  ALARM: "报警",
+  WARNING: "预警"
+};
 export default {
   name: "AlarmType",
   data() {
@@ -221,6 +250,8 @@ export default {
         typeCode: undefined,
         typeName: undefined,
         tag: undefined,
+        deviceType: "",
+        alarmDivide: '',
         orderByColumn: "",
         isAsc: "desc"
       },
@@ -240,6 +271,7 @@ export default {
   created() {
     this.tenantId = this.$store.getters.tenantId;
     this.getList();
+    this.getDeviceTypeList();
   },
   methods: {
     indexFormatter(val) {
@@ -248,7 +280,7 @@ export default {
       );
     },
     alarmDivideForm(row) {
-      return this.alarmDivideType[row.alarmDivide]
+      return this.alarmDivideType[row.alarmDivide];
     },
     // 查询设备类型列表
     getDeviceTypeList() {
@@ -290,7 +322,7 @@ export default {
         deviceType: undefined,
         typeCode: undefined,
         typeName: undefined,
-        alarmDivide: 'ALARM',
+        alarmDivide: "ALARM",
         status: "1",
         tag: ""
       };
@@ -315,7 +347,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.getDeviceTypeList();
+      // this.getDeviceTypeList();
       this.open = true;
       this.title = "添加告警类型";
     },

src/views/iot/alarm/waringRecord/index.vue

@@ -15,6 +15,7 @@
           @change="queryTimeChange"
           clearable
           type="datetimerange"
+          :default-time="['00:00:00', '23:59:59']"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">

src/views/iot/device/index.vue

@@ -299,7 +299,7 @@ const lineTypeOpt = {
 };
 
 export default {
-  name: "Device",
+  name: "systemDevice",
   components: {
     SelectTableWrap,
     DetailsWrap,

src/views/iot/device/profile/info.vue

@@ -22,7 +22,7 @@
         </div>
         <!-- <div class="top-button">
           <el-button type="primary" @click="download" size="small">下载本地模拟器</el-button>
-        </div> -->
+        </div>-->
       </div>
     </div>
     <div class="group-list-table">
@@ -30,8 +30,8 @@
         <div class="table-row-col">
           <div class="title">设备ID</div>
           <div class="content">
-            <span class="name">{{infoData.deviceKey}}</span>
-            <el-button type="text" size="small" @click.stop="copyTexts(infoData.deviceKey)">复制</el-button>
+            <span class="name">{{infoData.deviceId}}</span>
+            <el-button type="text" size="small" @click.stop="copyTexts(infoData.deviceId)">复制</el-button>
           </div>
         </div>
         <div class="table-row-col">
@@ -43,13 +43,13 @@
         <div class="table-row-col">
           <div class="title">设备密码</div>
           <div class="content">
-            <span v-show="!showDevicePassword" class="centent">********</span>
+            <!-- <span v-show="!showDevicePassword" class="centent">********</span> -->
             <span
-              v-show="showDevicePassword"
               class="centent secret"
               :title="infoData.devicePassword"
             >{{infoData.devicePassword}}</span>
-            <el-button
+            <el-button type="text" size="small" @click.stop="upldatePassword">修改密码</el-button>
+            <!-- <el-button
               v-show="!showDevicePassword"
               type="text"
               size="small"
@@ -66,7 +66,7 @@
               type="text"
               size="small"
               @click.stop="showDevicePassword = false"
-            >隐藏</el-button>
+            >隐藏</el-button>-->
           </div>
         </div>
       </div>
@@ -140,10 +140,28 @@
         </div>
       </div>
     </div>
+    <!-- 添加或修改设备对话框 -->
+    <el-dialog
+      class="eldialog-wrap"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="设备密码：" prop="devicePassword">
+          <el-input v-model="form.devicePassword" @input="inputI" placeholder="选填--设备密码" clearable />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
+        <el-button size="mini" @click="open = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { updateDevice } from "@/api/iot/device";
+import { updateDevice, resetPssword } from "@/api/iot/device";
 export default {
   name: "DeviceInfo",
   props: ["infoData"],
@@ -161,10 +179,57 @@ export default {
         deviceName: "",
         deviceId: undefined
       },
-      rules: {}
+      rules: {
+        devicePassword: [
+          {
+            required: false,
+            validator: this.devicePassword,
+            trigger: "blur"
+          }
+        ]
+      },
+      form: {
+        devicePassword: ""
+      },
+      title: "",
+      open: false
     };
   },
   methods: {
+    devicePassword(rule, value, callback) {
+      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
+      if (this.form.devicePassword && !isExp.test(this.form.devicePassword)) {
+        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
+      } else {
+        callback();
+      }
+    },
+    inputI() {
+      this.$forceUpdate();
+    },
+    // 修改设备密码 弹窗打开
+    upldatePassword() {
+      this.form.devicePassword = this.infoData.devicePassword;
+      this.form.deviceId = this.infoData.deviceId;
+      this.title = `修改设备--${this.infoData.deviceName} 密码：`;
+      this.open = true;
+    },
+    // 修改设备密码 提交
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          resetPssword(this.form).then(response => {
+            this.open = false;
+            if (response.code === 200) {
+              this.msgSuccess("修改成功");
+            }
+            this.$emit("updateInfo", {
+              deviceId: this.infoData.deviceId
+            });
+          });
+        }
+      });
+    },
     copyTexts(val) {
       this.copeFu(val, this);
     },

src/views/iot/trigger/index.vue

@@ -43,7 +43,13 @@
           :index="indexFormatter"
           width="80px"
         ></el-table-column>
-        <el-table-column label="触发器名称" sortable="custom" width="250" align="left" prop="triggerName" />
+        <el-table-column
+          label="触发器名称"
+          sortable="custom"
+          width="250"
+          align="left"
+          prop="triggerName"
+        />
         <el-table-column label="推送内容" align="left" :aria-hidden="true" prop="templateContent" />
         <el-table-column label="状态" align="center" width="80">
           <template slot-scope="scope">
@@ -58,7 +64,12 @@
           prop="createTime"
           width="160"
         ></el-table-column>
-        <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
+        <el-table-column
+          label="操作"
+          width="200"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
           <template slot-scope="scope">
             <el-button
               size="mini"
@@ -74,7 +85,7 @@
               icon="el-icon-search"
               @click="details(scope.row)"
               v-hasPermi="['iot:trigger:edit']"
-            >查看</el-button> -->
+            >查看</el-button>-->
 
             <el-button
               size="mini"
@@ -134,14 +145,14 @@
       </el-dialog>
     </div>
 
-    <div
+    <!-- <div
       style="
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
+      position: fixed;
+      bottom: 10px;
+      right: 10px;
       "
       v-show="componectVal !== ''"
-    >
+      >
       <el-tooltip class="item" effect="dark" content="前往列表" placement="top">
         <el-button
           type="primary"
@@ -156,7 +167,7 @@
           circle
         ></el-button>
       </el-tooltip>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
@@ -204,12 +215,12 @@ export default {
   },
   watch: {
     $route() {
-      console.log('routeUpdate')
+      console.log("routeUpdate");
     }
   },
   created() {
     this.handleQuery();
-    this.getAlaramTypeList()
+    this.getAlaramTypeList();
   },
   methods: {
     sortChange(column) {
@@ -227,12 +238,12 @@ export default {
     },
     // 字典状态字典翻译
     statusFormat(row, column) {
-      for(var i = 0; i<this.alarmTypeList.length; i++) {
+      for (var i = 0; i < this.alarmTypeList.length; i++) {
         if (this.alarmTypeList[i].typeCode === row.alarmTypeCode) {
           return this.alarmTypeList[i].typeName;
         }
       }
-      return '';
+      return "";
     },
     // 新增dialog 无操作 关闭.
     dialogRecover() {
@@ -291,9 +302,9 @@ export default {
           });
       });
     },
-     /** 查询告警类型列表 */
+    /** 查询告警类型列表 */
     getAlaramTypeList() {
-      listAlarmType({pageNum: 1, pageSize: 9999}).then(response => {
+      listAlarmType({ pageNum: 1, pageSize: 9999 }).then(response => {
         this.alarmTypeList = response.rows;
       });
     },
@@ -301,7 +312,7 @@ export default {
       return (
         val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
       );
-    },
+    }
   }
 };
 </script>

src/views/personal/alarm/index.vue

@@ -17,6 +17,7 @@
           type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
+          :default-time="['00:00:00', '23:59:59']"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/views/personal/device/index.vue

@@ -122,7 +122,11 @@
 </template>
 
 <script>
-import { listDevice, exportDevice, listDeviceTypeList } from "@/api/personal/device";
+import {
+  listDevice,
+  exportDevice,
+  listDeviceTypeList
+} from "@/api/personal/device";
 // import { listDeviceTypeList } from "@/api/tenant/device";
 import DetailsWrap from "./profile/details";
 const deviceStatusOpt = {
@@ -137,7 +141,7 @@ const lineTypeOpt = {
 };
 
 export default {
-  name: "Device",
+  name: "Device_oneself",
   components: {
     DetailsWrap
   },
@@ -183,10 +187,21 @@ export default {
     };
   },
   created() {
+    this.initRouter();
     this.getDeviceTypeList();
     this.getList();
   },
+
   methods: {
+    initRouter() {
+      const rouetParams = this.$route?.params;
+      this.sourceId = rouetParams?.deviceId;
+      this.componectVal =
+        rouetParams["tempType"] && rouetParams["tempType"] !== "list"
+          ? "DetailsWrap"
+          : "";
+      console.log(rouetParams);
+    },
     sortChange(column) {
       const sort = {
         isAsc: column.order === "descending" ? "desc" : "asc",

src/views/personal/waring/index.vue

@@ -17,6 +17,7 @@
           type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
+          :default-time="['00:00:00', '23:59:59']"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/views/tenant/alarm/record.vue

@@ -15,6 +15,7 @@
           @change="queryTimeChange"
           clearable
           type="datetimerange"
+          :default-time="['00:00:00', '23:59:59']"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">

src/views/tenant/alarm/warning.vue

@@ -15,6 +15,7 @@
           @change="queryTimeChange"
           clearable
           type="datetimerange"
+          :default-time="['00:00:00', '23:59:59']"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">

src/views/tool/gen/index.vue

@@ -337,4 +337,4 @@ export default {
     }
   }
 };
-</script>
+</script>