From 14e02654e0545ee69456d64aef2f35c7c219d708 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Fri, 07 May 2021 11:26:49 +0800
Subject: [PATCH] 地图模式设备状态修改

---
 src/views/system/cs.vue |   94 +++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index 7d50a95..15c292f 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -99,20 +99,35 @@
       append-to-body="true"
       class="right-open"
     >
-      <el-divider ></el-divider>
+      <el-divider></el-divider>
       <div class="r-o-our">
         <avue-crud
           :option="options"
-          :data="datas"
-          :table-loading="loadings"
-          :page="pages"
           @on-load="onLoads"
+          :data="datas"
+          :page="pages"
           @search-change="searchChanges"
           @search-reset="searchResets"
           @row-click="rowClicks"
           @current-change="currentChanges"
           @size-change="sizeChanges"
         >
+          <template slot="states" slot-scope="scope">
+            <el-tag
+              :class="[
+                scope.row.states == '掉线'
+                  ? 'diaoxianl'
+                  : scope.row.states == '在线'
+                  ? 'zaixianl'
+                  : scope.row.states == '故障'
+                  ? 'guzhagnl'
+                  : scope.row.states == '预警'
+                  ? 'baojinl'
+                  : '',
+              ]"
+              >{{ scope.row.states }}</el-tag
+            >
+          </template>
         </avue-crud>
       </div>
     </el-dialog>
@@ -120,7 +135,7 @@
 </template>
 
 <script>
-import { getAll, getListliu, getListliuc } from "@/api/client/client";
+import { getListliu, getListliuc } from "@/api/client/client";
 import {
   getList,
   getDetail,
@@ -159,9 +174,10 @@
       datasourceBox: false,
       dialogVisible: false, //右侧弹窗
       onceData: {}, //数据
-      datas: "", //cc
+      datas: [], //cc
       loadings: true, //等待
       querys: {}, //搜索
+      isEdit:false,
       pages: {
         pageSize: 10,
         currentPage: 1,
@@ -173,6 +189,7 @@
         height: "auto",
         indexLabel: "序号",
         index: true,
+        card: true,
         menu: false,
         header: false,
         searchShow: true,
@@ -233,6 +250,8 @@
             label: "设备状态",
             prop: "states",
             width: 90,
+            slot: true,
+            // className: "cityClass1",
           },
         ],
       },
@@ -709,11 +728,13 @@
       // form是表单或者表格绑定的数据集,v-model='form'
       handler(val) {
         if (val) {
-          getDetail(this.form.id).then((res) => {
-            this.form = res.data.data;
-          });
-          this.form.wd = val.latitude;
-          this.form.jd = val.longitude;
+          if(that.isEdit){
+            getDetail(this.form.id).then((res) => {
+              this.form = res.data.data;
+              this.form.wd = val.latitude;
+              this.form.jd = val.longitude;
+            });
+          }
           //地址截取,从县/区开始截取,并且取从县区第一个出现的位置开始
           var address = val.formattedAddress.toString();
           if (address.search("县") != -1) {
@@ -730,7 +751,11 @@
           }
           //写入新的省市区
           that.form.province = val.addressComponent.province;
-          that.form.city = val.addressComponent.city;
+          if (val.addressComponent.city == "") {
+            that.form.city = val.addressComponent.province;
+          } else {
+            that.form.city = val.addressComponent.city;
+          }
           that.form.district = val.addressComponent.district;
         }
       },
@@ -880,6 +905,7 @@
     },
     beforeOpen(done, type) {
       if (["edit"].includes(type)) {
+        that.isEdit=true;
         getDetail(this.form.id).then((res) => {
           if (this.form.type == "1") {
             const data = res.data.data;
@@ -971,6 +997,10 @@
             });
           }
         });
+      }
+
+      if (["edit"].includes(type)) {
+        that.isEdit=false;        
       }
       done();
     },
@@ -1120,6 +1150,7 @@
     },
     changeDataOpen(dat) {
       //处理弹出框数据
+      console.log(dat);
       if (dat.length > 0) {
         for (var key in dat) {
           let states;
@@ -1149,13 +1180,13 @@
     },
     getMout(fid) {
       getListliuc(fid).then((res) => {
-      // console.log(res.data.data);
+        // console.log(res.data.data);
         this.getUser(res.data.data);
       });
     },
     getUser(dat) {
       //建立使用方搜索关键词
-      console.log(dat);
+      // console.log(dat);
       if (dat.length > 0) {
         this.users = [];
         for (var key in dat) {
@@ -1165,6 +1196,11 @@
           });
         }
       }
+      // this.users.push([
+      //   {
+
+      //   }
+      // ])
       this.options.column[2].dicData = this.users;
     },
     searchResets() {
@@ -1192,14 +1228,20 @@
     onLoads(pages, params = {}) {
       // this.$message.success("分页信息:" + JSON.stringify(pages));
       // this.pages.total = 40;
+      // console.log(1)
       this.loadings = true;
+      //  console.log(2)
       let values = {
         ...params,
       };
+      // console.log(3)
       // getListliu(1, 10, {}, val.id).then((res) => {
       var useId = this.onceData.deptId;
+      // console.log(4)
       getListliu(pages.currentPage, pages.pageSize, values, useId).then(
         (res) => {
+          // console.log(5)
+          // console.log(pages.currentPage, pages.pageSize, values, useId,332332)
           // console.log(this.datas);
           // getListliu('1', '10', {}, '1353972967828533249').then((res) => {
           //拿到数据
@@ -1344,10 +1386,10 @@
 
   .el-dialog {
     margin: 0 auto !important;
-    height: 98%;
+    height: 100%;
     overflow: hidden;
     position: fixed;
-    top: 1%;
+    top: 0;
     right: 0;
     .el-dialog__body {
       position: absolute;
@@ -1388,4 +1430,24 @@
     overflow: auto;
   }
 }
+.diaoxianl {
+  border: 1px solid #fff;
+  color: #fff;
+  background-color: #cdcdcd;
+}
+.zaixianl {
+  border: 1px solid #fff;
+  color: #fff;
+  background-color: #32c1a2;
+}
+.guzhagnl {
+  border: 1px solid #fff;
+  color: #fff;
+  background-color: #f49966;
+}
+.baojinl {
+  border: 1px solid #fff;
+  color: #fff;
+  background-color: #f35b5b;
+}
 </style>

--
Gitblit v1.9.3