From 129a14cb0daef48afe7f6cf930cb478c3461f13f Mon Sep 17 00:00:00 2001
From: 23688nl <329261568@qq.com>
Date: Thu, 8 Sep 2022 16:26:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=EF=BC=9A=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=A1=B9=E7=9B=AE=E8=AF=A6=E6=83=85=E4=B8=8B=20?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=BD=91=E5=85=B3=E4=B8=AD=20=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=97=A0=E6=95=B0=E6=8D=AE=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Amap/components/shopLocation/index.vue    | 181 +++++++-------
 .../profileV2/DeviceManage/EDeviceTable.vue   | 229 ++++++++++++------
 2 files changed, 247 insertions(+), 163 deletions(-)

diff --git a/src/components/Amap/components/shopLocation/index.vue b/src/components/Amap/components/shopLocation/index.vue
index 84749a00..9a952e6c 100644
--- a/src/components/Amap/components/shopLocation/index.vue
+++ b/src/components/Amap/components/shopLocation/index.vue
@@ -1,103 +1,110 @@
 <template>
   <div class="amap-shop-location">
-		<div id="container" style="width:100%; height:100%"></div>
-	</div>
+    <div id="container" style="width: 100%; height: 100%"></div>
+  </div>
 </template>
 <script>
-import AMap from 'AMap'
+import AMap from "AMap";
 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: true
-		}
-	},
+    mapCenter: {
+      type: Object,
+      default: {
+        lng: 116.397428,
+        lat: 39.90923,
+        address: "",
+      },
+    },
+
+    zoom: {
+      type: [String, Number],
+      default: 10,
+    },
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return {
-			aMap: null,
-			pointResult: {
-				lng: 119.275254,
-        		lat: 26.028928,
-				address: ''
-			}
-		};
+      aMap: null,
+      pointResult: {
+        lng: 119.275254,
+        lat: 26.028928,
+        address: "",
+      },
+    };
   },
-	mounted() {
-		this.initMap()
-	},
-	methods: {
-		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
-			})
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    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,
+      });
 
-			var marker = new AMap.Marker({
-					position: this.aMap.getCenter(),
-					icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
-					offset: new AMap.Pixel(-13, -30),
-					// 设置是否可以拖拽
-					draggable: this.draggable,
-					cursor: 'move',
-					// 设置拖拽效果
-					raiseOnDrag: false
-			});
-			if (this.draggable) {
-				marker.on('dragging', this.showInfoM);
-				marker.on('mouseout', this.showInfoOut);
-			}
-			marker.setMap(this.aMap);
-		},
-		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
-		}
-	}
+      var marker = new AMap.Marker({
+        position: this.aMap.getCenter(),
+        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+        offset: new AMap.Pixel(-13, -30),
+        // 设置是否可以拖拽
+        draggable: this.draggable,
+        cursor: "move",
+        // 设置拖拽效果
+        raiseOnDrag: false,
+      });
+      if (this.draggable) {
+        marker.on("dragging", this.showInfoM);
+        marker.on("mouseout", this.showInfoOut);
+      }
+      marker.setMap(this.aMap);
+    },
+    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) {
+          console.log('---',status, result)
+          if (status === "complete" && result.info === "OK") {
+            // console.log(result.regeocode.formattedAddress);
+            var address = result.regeocode.formattedAddress;
+            _this.pointResult.address = address;
+          } else {
+            _this.$message.error('高德地图获取地址失败！');
+          }
+          _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-shop-location {
-	.amap-marker:first-child .amap-icon img {
-			width: 25px;
-			height: 34px;
-	}
+  .amap-marker:first-child .amap-icon img {
+    width: 25px;
+    height: 34px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue b/src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue
index 07731b93..cbf6c05a 100644
--- a/src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue
+++ b/src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue
@@ -10,7 +10,12 @@
       <el-row>
         <el-col :span="5">
           <el-form-item label="型号名称" prop="prodKey">
-            <el-select v-model="queryParams.prodKey" placeholder="请选择项目类型" clearable size="small">
+            <el-select
+              v-model="queryParams.prodKey"
+              placeholder="请选择项目类型"
+              clearable
+              size="small"
+            >
               <el-option
                 v-for="dict in projectModelList"
                 :key="dict.prodKey"
@@ -75,68 +80,121 @@
       </el-row>
     </el-form>
     <div class="table-container" v-show="showChildrenView === false">
-      <e-simple-card title="" extra="" class="object-device-card" v-for="(devItem, idx) in list" :key="idx">
+      <e-simple-card
+        title=""
+        extra=""
+        class="object-device-card"
+        v-for="(devItem, idx) in list"
+        :key="idx"
+      >
         <template slot="cardHeader" class="card-custom-head">
-          <div :class="devItem['deviceState'] == 'ONLINE' ? 'card-left' : 'card-left off-line'">
-            <icon v-if="devItem['deviceState'] == 'ONLINE'" class="iconfont iconSYS_STA_1"/>
-            <icon v-else class="iconfont iconlixian"/>
-            <span style="margin-left: 8px;">{{ devItem['deviceState'] == 'ONLINE' ? '在线' : '离线' }}</span>
+          <div
+            :class="
+              devItem['deviceState'] == 'ONLINE'
+                ? 'card-left'
+                : 'card-left off-line'
+            "
+          >
+            <icon
+              v-if="devItem['deviceState'] == 'ONLINE'"
+              class="iconfont iconSYS_STA_1"
+            />
+            <icon v-else class="iconfont iconlixian" />
+            <span style="margin-left: 8px">{{
+              devItem["deviceState"] == "ONLINE" ? "在线" : "离线"
+            }}</span>
           </div>
           <div class="card-right">
             <span class="c-label">线路数:</span>
-            <span class="c-number">{{ devItem.routeCount || 0}}</span>
+            <span class="c-number">{{ devItem.routeCount || 0 }}</span>
 
             <el-dropdown>
-              <icon class="el-icon-s-operation card-opt-i"/>
+              <icon class="el-icon-s-operation card-opt-i" />
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="handleChildrenDevice(devItem)">查看线路列表</el-dropdown-item>
+                <el-dropdown-item @click.native="handleChildrenDevice(devItem)"
+                  >查看线路列表</el-dropdown-item
+                >
                 <el-dropdown-item>修改服务指向</el-dropdown-item>
                 <el-dropdown-item>设备巡检记录</el-dropdown-item>
                 <el-dropdown-item>设备参数调整</el-dropdown-item>
                 <el-dropdown-item>内置定时配置</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-
           </div>
         </template>
         <template slot="cardBody">
           <div class="object-device-body">
             <div class="card-body-info">
               <div class="card-body-left">
-                <img :src="devItem['deviceImage'] ? getIotFileUrl(devItem['deviceImage']) : '/images/devcie_default.png'" />
+                <img
+                  :src="
+                    devItem['deviceImage']
+                      ? getIotFileUrl(devItem['deviceImage'])
+                      : '/images/devcie_default.png'
+                  "
+                />
               </div>
               <div class="card-body-right">
-                <span :title="devItem.deviceName">{{ devItem.deviceName }}</span>
+                <span :title="devItem.deviceName">{{
+                  devItem.deviceName
+                }}</span>
                 <span :title="devItem.deviceKey">{{ devItem.deviceKey }}</span>
-                <span :title="devItem.deviceAddress">{{ devItem.deviceAddress }}</span>
+                <span :title="devItem.deviceAddress">{{
+                  devItem.deviceAddress
+                }}</span>
               </div>
             </div>
             <div class="card-body-footer">
               <!-- {{ renderCardFooter(devItem) }} -->
-              <div :class="devItem.alarmProcessStatus == 1 ? 'card-footer' : 'card-footer dev-error'">
+              <div
+                :class="
+                  devItem.alarmProcessStatus == 1
+                    ? 'card-footer'
+                    : 'card-footer dev-error'
+                "
+              >
                 <icon class="iconfont icontongzhi"></icon>
-                <span stle="margin-left: 10px;" class="footer-title">{{ devItem.alarmProcessStatus == 1 ? '正常' : `时间：${devItem.alarmTime} ${devItem.alarmTypeName || '--'}` }}</span>
+                <span stle="margin-left: 10px;" class="footer-title">{{
+                  devItem.alarmProcessStatus == 1
+                    ? "正常"
+                    : `时间：${devItem.alarmTime} ${
+                        devItem.alarmTypeName || "--"
+                      }`
+                }}</span>
               </div>
             </div>
           </div>
         </template>
       </e-simple-card>
+      <div
+        v-if="!list || list.length <= 0"
+        style="
+          width: 100%;
+          height: 300px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+      >
+        暂无数据
+      </div>
     </div>
     <div v-if="showChildrenView">
       <e-device-children
         :gatewayDevice="showGatewayInfo"
         :sourceId="sourceId"
         :deviceType="deviceType"
-        @handleLinkToHome="handleLinkToHome"></e-device-children>
+        @handleLinkToHome="handleLinkToHome"
+      ></e-device-children>
     </div>
   </div>
 </template>
 <script>
 import ESimpleCard from "@/components/Cards/index";
-import EDeviceChildren from './EDeviceChildren'
+import EDeviceChildren from "./EDeviceChildren";
 import { webSocketProjectGatewayUrl } from "@/config/env";
-import { listProjectDevice, listProjectModel } from '@/api/iot/project_new'
-import { getIotFileUrl } from "@/utils/hciot"
+import { listProjectDevice, listProjectModel } from "@/api/iot/project_new";
+import { getIotFileUrl } from "@/utils/hciot";
 const deviceStatusOpt = {
   ONLINE: "在线",
   OFFLINE: "离线",
@@ -147,7 +205,7 @@ export default {
   name: "EDeviceTable",
   components: {
     ESimpleCard,
-    EDeviceChildren
+    EDeviceChildren,
   },
   props: {
     sourceId: {
@@ -226,14 +284,14 @@ export default {
       projectModelList: [],
       stompClient: null,
       socket_flag: true,
-      timeout_flag: null
+      timeout_flag: null,
     };
   },
   watch: {
     sourceId(val) {
       if (val) {
         this.initHTML();
-        this.showChildrenView = false
+        this.showChildrenView = false;
       }
     },
     deviceType(val) {
@@ -243,7 +301,7 @@ export default {
     },
   },
   created() {
-    this.initHTML()
+    this.initHTML();
   },
   methods: {
     getIotFileUrl,
@@ -256,7 +314,7 @@ export default {
     handleChildrenDevice(gatewayDevice) {
       this.showChildrenView = true;
       this.showGatewayInfo = gatewayDevice;
-      this.$forceUpdate()
+      this.$forceUpdate();
     },
     // 子设备列表 返回 网关设备列表
     handleLinkToHome() {
@@ -267,26 +325,38 @@ export default {
       return (
         <template>
           <div class="card-body-left">
-            <image src={item['deviceImage'] ? item['deviceImage'] : '/images/devcie_default.png'}></image>
+            <image
+              src={
+                item["deviceImage"]
+                  ? item["deviceImage"]
+                  : "/images/devcie_default.png"
+              }
+            ></image>
           </div>
-           <div class="card-body-right">
-            <span>{ item.deviceId }</span>
-            <span>{ item.deviceSecret }</span>
-            <span>{ item.deviceAddress }</span>
+          <div class="card-body-right">
+            <span>{item.deviceId}</span>
+            <span>{item.deviceSecret}</span>
+            <span>{item.deviceAddress}</span>
           </div>
         </template>
-      )
+      );
     },
     // 卡片 底部 报警状态
     renderCardFooter(item) {
       return (
         <template>
-          <div class={item.deviceStatus == 0 ? 'card-footer' : 'card-footer dev-error'}>
+          <div
+            class={
+              item.deviceStatus == 0 ? "card-footer" : "card-footer dev-error"
+            }
+          >
             <icon class="iconfont icontongzhi"></icon>
-            <span>{item.deviceStatus == 0 ? '正常' : 'card-footer dev-error'}</span>
+            <span>
+              {item.deviceStatus == 0 ? "正常" : "card-footer dev-error"}
+            </span>
           </div>
         </template>
-      )
+      );
     },
     handleQuery() {
       this.getGatewayList();
@@ -299,24 +369,29 @@ export default {
     getProjectModelList() {
       listProjectModel({
         projectId: this.sourceId,
-        deviceTags: this.deviceType || ''
-      }).then(res => {
-        this.projectModelList = res.data
-      })
+        deviceTags: this.deviceType || "",
+      }).then((res) => {
+        this.projectModelList = res.data;
+      });
     },
     // 获取 项目网关设备列表
     getGatewayList() {
-      this.list = []
-      listProjectDevice(Object.assign({
-        projectId: this.sourceId,
-        deviceTags: this.deviceType || ''
-      }, this.queryParams)).then(res => {
-        this.list = res.rows
+      this.list = [];
+      listProjectDevice(
+        Object.assign(
+          {
+            projectId: this.sourceId,
+            deviceTags: this.deviceType || "",
+          },
+          this.queryParams
+        )
+      ).then((res) => {
+        this.list = res.rows;
         if (this.stompClient) {
-          this.closeSocket()
+          this.closeSocket();
         }
-        this.connection()
-      })
+        this.connection();
+      });
     },
     // 创建一个ws 监听获取报警实时数据
     connection() {
@@ -329,9 +404,9 @@ export default {
       if (!this.list || this.length <= 0) {
         return;
       }
-      let deviceIds = this.list.map(v => v['deviceId'])
+      let deviceIds = this.list.map((v) => v["deviceId"]);
       this.stompClient = new WebSocket(
-        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${ deviceIds.toString() }`
+        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
       );
       this.stompClient.onmessage = this.socket_message;
       this.stompClient.onclose = this.socket_onclose;
@@ -341,20 +416,20 @@ export default {
       const data = JSON.parse(evt.data);
 
       // this.actualEnergyCensus = data.params || {};
-      console.log('socket-message:', data)
-      this.handleDeviceInfo(data)
+      console.log("socket-message:", data);
+      this.handleDeviceInfo(data);
       this.$forceUpdate();
     },
     // 处理 socket 数据返回 赋值问题
     handleDeviceInfo(param) {
       if (this.list && this.list.length > 0) {
-        this.list = this.list.map(v => {
-          if (v['deviceId'] === param['deviceId']) {
-            return Object.assign(v, param)
+        this.list = this.list.map((v) => {
+          if (v["deviceId"] === param["deviceId"]) {
+            return Object.assign(v, param);
           } else {
-            return v
+            return v;
           }
-         })
+        });
       }
     },
     socket_onclose(e) {
@@ -377,18 +452,19 @@ export default {
       clearTimeout(this.timeout_flag);
     },
     getGuid() {
-      return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(/[xy]/g, function(
-        c
-      ) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
+      return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
     },
   },
   destroyed() {
-    this.closeSocket()
-  }
+    this.closeSocket();
+  },
 };
 </script>
 <style lang="scss">
@@ -409,37 +485,38 @@ export default {
     .object-device-card {
       width: 285px;
       height: 164px;
-      background: #FFFFFF;
-      border: 1px solid #E4EBF4;
-      box-shadow: 0px 0px 8px 0px rgba(17,76,157,0.26);
+      background: #ffffff;
+      border: 1px solid #e4ebf4;
+      box-shadow: 0px 0px 8px 0px rgba(17, 76, 157, 0.26);
       border-radius: 5px;
       margin: 5px;
       .card-left {
         font-size: 14px;
         font-family: Source Han Sans CN;
         font-weight: 400;
-        color: #00C805;
+        color: #00c805;
       }
       .off-line {
-        color: #DA2710;
+        color: #da2710;
       }
       .card-right {
         display: flex;
         font-size: 14px;
         font-family: Source Han Sans CN;
         font-weight: 400;
-        color: #6B778C;
+        color: #6b778c;
         align-items: baseline;
-        .c-label {}
+        .c-label {
+        }
         .c-number {
           color: #344567;
           margin: 0 8px;
         }
         .card-opt-i {
           font-size: 18px;
-          -ms-transform:rotate(90deg); /* IE 9 */
-          -webkit-transform:rotate(90deg); /* Safari and Chrome */
-          transform:rotate(90deg);
+          -ms-transform: rotate(90deg); /* IE 9 */
+          -webkit-transform: rotate(90deg); /* Safari and Chrome */
+          transform: rotate(90deg);
         }
         .card-opt-i:hover {
           color: #46a6ff;
@@ -482,7 +559,7 @@ export default {
             font-family: Source Han Sans CN;
             font-weight: 300;
             color: #344567;
-            >span {
+            > span {
               display: block;
               width: 100%;
               overflow: hidden;
@@ -513,7 +590,7 @@ export default {
             }
           }
           .dev-error {
-            color: #DC3520;
+            color: #dc3520;
           }
         }
       }