From 7b803f4c1d2b94f4a6421d400038bfe77136521f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 14:01:39 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/vue-smart-ai

---
 src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue |  177 +++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 123 insertions(+), 54 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue b/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue
index 611813b..e43bbdf 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/lkgManage.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="lkg-manage">
     <div class="import-btn">
-      <label> 涓婁紶 LKJ 鏁版嵁鏂囦欢: </label>
-      <el-button
+      <!-- <label> : </label> -->
+      <!-- <el-button
         size="mini"
         type="primary"
         @click="uploadDirectoryTrigger"
         :loading="uploading"
-      >鐐瑰嚮涓婁紶</el-button>
+        >涓婁紶 LKJ 鏁版嵁鏂囦欢</el-button
+      > -->
+      <span
+        class="icon iconfont"
+        @click="uploadDirectoryTrigger"
+        style="font-size: 34px; color: #92abd1"
+        >&#xe7b0;</span
+      >
       <input
         ref="directoryInput"
         @change="importDirectory"
@@ -19,8 +26,21 @@
     </div>
 
     <div class="lkg-list">
-      <el-table :data="lkgData" stripe style="width: 100%">
-        <el-table-column type="index" width="100" label="搴忓彿"></el-table-column>
+      <el-table
+        :data="lkgData"
+        stripe
+        style="width: 100%"
+        :header-cell-style="{
+          background: '#2D52D7',
+          color: '#fff',
+          height: '50px',
+        }"
+      >
+        <el-table-column
+          type="index"
+          width="120"
+          label="搴忓彿"
+        ></el-table-column>
         <el-table-column prop="CarNumber" label="鏈鸿溅鍙�"></el-table-column>
         <el-table-column prop="TrainNumber" label="杞︽"></el-table-column>
         <el-table-column prop="Driver1" label="鍙告満"></el-table-column>
@@ -29,7 +49,12 @@
         <el-table-column prop="EndTime" label="缁撴潫鏃堕棿"></el-table-column>
         <el-table-column label="鎿嶄綔">
           <template slot-scope="scope">
-            <i class="el-icon-delete del-icon" @click="delLKG(scope.row)"></i>
+            <div class="icon-wrap">
+              <span class="iconfont icon del-icon" @click="delLKG(scope.row)"
+                >&#xe775;</span
+              >
+            </div>
+            <!-- <i class="el-icon-delete del-icon" ></i> -->
           </template>
         </el-table-column>
       </el-table>
@@ -38,92 +63,136 @@
 </template>
 
 <script>
-import { uploadLKG, getLKGData, delLKGData } from "@/api/shuohuang"
+import { uploadLKG, getLKGData, delLKGData } from "@/api/shuohuang";
 
 export default {
   data() {
     return {
       uploading: false,
-      lkgData: []
-    }
+      lkgData: [],
+    };
   },
   mounted() {
     this.fetchLKGData();
   },
   methods: {
     uploadDirectoryTrigger() {
-      this.$refs['directoryInput'].click();
+      this.$refs["directoryInput"].click();
     },
     importDirectory() {
       let _this = this;
       _this.uploading = true;
-      let formData = new FormData;
-      for (let i = 0; i < this.$refs['directoryInput'].files.length; i++) {
-        formData.append('files', this.$refs['directoryInput'].files[i])
+      let formData = new FormData();
+      for (let i = 0; i < this.$refs["directoryInput"].files.length; i++) {
+        formData.append("files", this.$refs["directoryInput"].files[i]);
       }
 
-      uploadLKG(formData).then(res => {
-        if (res && res.success) {
-          this.$message.success("涓婁紶鎴愬姛")
-        }
-        _this.uploading = false;
-        this.fetchLKGData();
-      }).catch(err => {
-        this.$message.warning("涓婁紶澶辫触", err)
-        _this.uploading = false;
-      })
+      uploadLKG(formData)
+        .then((res) => {
+          if (res && res.success) {
+            this.$message.success("涓婁紶鎴愬姛");
+          }
+          _this.uploading = false;
+          this.fetchLKGData();
+        })
+        .catch((err) => {
+          this.$message.warning("涓婁紶澶辫触", err);
+          _this.uploading = false;
+        });
     },
     fetchLKGData() {
-      getLKGData().then(rsp => {
+      getLKGData().then((rsp) => {
         if (rsp && rsp.success) {
           this.lkgData = rsp.data;
         }
-      })
+      });
     },
     delLKG(row) {
+      this.$confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?", "鎻愮ず", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning",
+      })
+        .then(() => {
+          delLKGData({ id: row.ID })
+            .then((rsp) => {
+              if (rsp && rsp.success) {
+                this.$message.success("鍒犻櫎鎴愬姛");
+              } else {
+                this.$message.warning("鍒犻櫎澶辫触");
+              }
 
-      this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?', '鎻愮ず', {
-        confirmButtonText: '纭畾',
-        cancelButtonText: '鍙栨秷',
-        type: 'warning'
-      }).then(() => {
-
-        delLKGData({ id: row.ID }).then(rsp => {
-          if (rsp && rsp.success) {
-            this.$message.success("鍒犻櫎鎴愬姛")
-          } else {
-            this.$message.warning("鍒犻櫎澶辫触")
-          }
-
-          this.fetchLKGData()
-        }).catch(err => {
-          this.$message.warning("鍒犻櫎澶辫触")
+              this.fetchLKGData();
+            })
+            .catch((err) => {
+              this.$message.warning("鍒犻櫎澶辫触");
+            });
         })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '宸插彇娑堝垹闄�'
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "宸插彇娑堝垹闄�",
+          });
         });
-      });
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 .lkg-manage {
+  background: #fff;
+  padding: 25px 33px;box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+border-radius: 10px;
   .import-btn {
     text-align: left;
-    margin: 10px 20px;
+    margin-bottom: 10px;
+    span {
+      cursor: pointer;
+    }
+    button {
+      span {
+        color: #fff;
+      }
+    }
   }
 
   .lkg-list {
-    margin: 10px 20px;
+    // margin: 10px 20px;
+    .el-table--striped
+      .el-table__body
+      tr.el-table__row--striped
+      td.el-table__cell {
+      background: #f4f6f9;
+    }
+    .el-table__row > td {
+      border: none;
+    }
+    .el-table th.is-leaf {
+      border: none;
+    }
+    .el-table {
+      margin-top: 15px;
+      border: none;
+    }
+    th.el-table__cell > .cell {
+      color: #fff;
+    }
   }
-
-  .del-icon {
-    color: red;
+  .icon-wrap {
+    background: #9dabc1;
+    width: 24px; height: 24px;
+    border-radius: 50%;
+    text-align: center;
+    .del-icon {
+    color: #fff;
+    font-size: 21px;
     cursor: pointer;
   }
+  }
+  .icon-wrap:hover{
+    background: #D94141; 
+  }
+  
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0