5.29 修改车辆

package.json

@@ -22,6 +22,7 @@
     "js-cookie": "^3.0.1",
     "less": "3.9.0",
     "less-loader": "7",
+    "moment": "^2.30.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "swiper": "4.5.1",

public/static/config.js

@@ -14,6 +14,9 @@ window.$mapCfg = {
 window.$SYSTEMCONFIG = {
   SYS_NAME: "镇海平安企业（园区）", //"镇海平安企业（园区）", //系统名称
 };
+window.$TOKEN = {
+  SYS_TOKENS: "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE2ZDdkNTg5LTkxN2MtNDlkMS1iODhjLTMxN2E3Zjc4NzcwMyJ9.tEZrwiMSSNSkKVaP2TlOoQtvqgpV-0Vstqy8b9RqQOgSavblX2zRn_8a_6EZsLOtiRTaURvnlJ4HwPRotENhHQ", //"镇海平安企业（园区）", //系统名称
+};
 
 window.$SERVICE = {
   BASEURL:"http://121.41.91.94:8080/zhapi"

src/api/archives/index.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import request1 from '@/utils/request1'
 //基本信息
 export function baseInfo(params) {
     return request({
@@ -32,6 +33,14 @@ export function realTimePassageFlowFace(params) {
         params
     })
 }
+// 车辆3.0
+export function list(params) {
+    return request1({
+        url: '/user/record/list',
+        method: 'post',
+        params
+    })
+}
 //实时车辆卡口流量
 export function realTimePassageFlowVehicle(params) {
     return request({

src/utils/request.js

@@ -8,9 +8,11 @@ const request = axios.create({
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: 'http://121.41.91.94:12002/zhapi',
+  // baseURL: 'http://121.41.91.94:12002/zhapi',
-  //baseURL: `http://${window.location.host}/zhapi`,
+  // baseURL: 'http://172.18.113.50:8080/zhapi',
-  baseURL: window.$SERVICE.BASEURL,
+  // baseURL: 'http://172.18.113.50:8080/zhapi', // 刘建
+  baseURL: `http://${window.location.host}/zhapi`,
+  // baseURL: window.$SERVICE.BASEURL,
   timeout: 50000,
   headers: { "content-type": "application/json" },
 });
@@ -23,7 +25,7 @@ request.interceptors.request.use(
     // 是否需要防止数据重复提交
 
     if (getToken() && !isToken) {
-      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修z
       //console.log(config)
     }
     //防止重复提交

src/utils/request1.js

@@ -0,0 +1,98 @@
+import axios from "axios";
+//import Vue from 'vue'
+import vm from "../main";
+import { getToken } from "@/utils/auth";
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
+const request = axios.create({
+  //baseURL: 'http://172.18.113.50:8080/zhapi',
+  //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
+  //baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建
+  //baseURL: 'http://192.168.0.188:8888/zhapi',
+  // baseURL: 'http://121.41.91.94:12002/zhapi',
+  // baseURL: "http://218.92.207.242:20118/hjapi",
+  baseURL: "http://41.204.233.90:8118/hjapi",
+
+  //baseURL: `http://${window.location.host}/zhapi`,
+  // baseURL: window.$SERVICE.BASEURL,
+  timeout: 50000,
+  headers: { "content-type": "application/json" },
+});
+//const vm = Vue.prototype
+// request拦截器
+request.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    // 是否需要防止数据重复提交
+
+    if (getToken() && !isToken) {
+      console.log(777, window.$TOKEN.SYS_TOKENS);
+      config.headers["Authorization"] = "Bearer " + window.$TOKEN.SYS_TOKENS; // 让每个请求携带自定义token 请根据实际情况自行修z
+      //console.log(config)
+    }
+    //防止重复提交
+
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
+  }
+);
+
+// response 拦截器
+// 可以在接口响应后统一处理结果
+request.interceptors.response.use(
+  (response) => {
+    if (response.data) {
+      switch (response.data.code) {
+        case 200:
+          // 如果是返回的文件
+          if (response.config.responseType === "blob") {
+            return response.data;
+          }
+          // 兼容服务端返回的字符串数据
+          if (typeof response.data === "string") {
+            response.data = response.data
+              ? JSON.parse(response.data)
+              : response.data;
+          }
+          return response.data;
+
+        case 401:
+          if (vm.$route.name !== "login") {
+            vm.$message.warning({
+              content: "身份认证信息已失效，请重新登录。",
+              duration: 2,
+              onClose: () => {
+                // vm.$router.push({ name: "login" });
+              },
+            });
+          } else {
+            return Promise.reject();
+          }
+          break;
+        case 403:
+          vm.$message.warning({
+            content: response.data.msg,
+            duration: 3,
+          });
+          break;
+        case 500:
+          // 如果是返回的文件
+          vm.$message.warning({
+            content: response.data.msg,
+            duration: 3,
+          });
+          return response.data;
+      }
+    }
+  },
+  (error) => {
+    console.log("err" + error); // for debug
+
+    return Promise.reject(error);
+  }
+);
+
+export default request;

src/views/archives/kakou.vue

@@ -2,39 +2,88 @@
   <div class="mainBox scroll-target">
     <div class="topZS"></div>
     <div class="title">
-            人车流量（<span>{{ total }}</span>）
+      人车流量（<span>{{ total }}</span
+      >）
     </div>
     <el-form :model="formInline" class="search">
-            <el-form-item label="时间：" class="formItem" style="width:500px">
+      <el-form-item label="时间：" class="formItem" style="width: 500px">
-                <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+        <el-date-picker
-                    end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="GetchangeTime"
+          v-model="chooseTime"
-                    :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+          @change="GetchangeTime"
+          :picker-options="pickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        >
         </el-date-picker>
       </el-form-item>
-            <el-form-item label="身份证号：" class="formItem" v-if="activeName == 'first'">
+      <el-form-item
-                <el-input v-model.trim="formInline.idcard" clearable class="formIpt" @change="clearPage()"></el-input>
+        label="身份证号："
+        class="formItem"
+        v-if="activeName == 'first'"
+      >
+        <el-input
+          v-model.trim="formInline.idcard"
+          clearable
+          class="formIpt"
+          @change="clearPage()"
+        ></el-input>
       </el-form-item>
-            <el-form-item label="姓名：" class="formItem" v-if="activeName == 'first'" @change="clearPage()">
+      <el-form-item
-                <el-input v-model.trim="formInline.userName" clearable class="formIpt"></el-input>
+        label="姓名："
+        class="formItem"
+        v-if="activeName == 'first'"
+        @change="clearPage()"
+      >
+        <el-input
+          v-model.trim="formInline.userName"
+          clearable
+          class="formIpt"
+        ></el-input>
       </el-form-item>
-            <el-form-item label="车牌号：" class="formItem" v-if="activeName == 'second'" @change="clearPage()">
+      <el-form-item
-                <el-input v-model.trim="formInline.plateNo" clearable class="formIpt"></el-input>
+        label="车牌号："
+        class="formItem"
+        v-if="activeName == 'second'"
+        @change="clearPage()"
+      >
+        <el-input
+          v-model.trim="formInline.plateNo"
+          clearable
+          class="formIpt"
+        ></el-input>
       </el-form-item>
       <el-button type="primary" @click="getList()">搜索</el-button>
     </el-form>
     <el-tabs v-model="activeName" type="card" @tab-click="getList(1)">
       <el-tab-pane name="first">
-                <div slot="label" class="tabdv">人脸 </div>
+        <div slot="label" class="tabdv">人脸</div>
-                <div style="width: 100%; height: 622px;  display: flex; justify-content: space-between;"
+        <div
-                    v-if="activeName == 'first'">
+          style="
+            width: 100%;
+            height: 622px;
+            display: flex;
+            justify-content: space-between;
+            background-color: none;
+          "
+          v-if="activeName == 'first'"
+        >
           <div class="imgList">
-                        <div class="imgListItem" v-for="item in tableData" :key="item.id" @click="showDetail(item, $event)">
+            <div
+              class="imgListItem"
+              v-for="item in tableData"
+              :key="item.id"
+              @click="showDetail(item, $event)"
+            >
               <div class="detailImg">
-                                <img :src="item.globalPic">
+                <img :src="item.globalPic" />
               </div>
               <div class="ListItem">
                 <div class="detailText">
-                                    抓拍时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
+                  抓拍时间&nbsp;&nbsp;<span>{{ item.passTimeCn }}</span>
                 </div>
                 <div class="detailText">
                   经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
@@ -44,17 +93,19 @@
           </div>
           <div class="imgDetail" v-if="total">
             <div class="detailImg">
-                            <img :src="imgDetailList.personPic">
+              <img :src="imgDetailList.personPic" />
             </div>
             <div class="detailImg">
-                            <img :src="imgDetailList.globalPic">
+              <img :src="imgDetailList.globalPic" />
             </div>
             <div>
               <div class="detailText">
-                                抓拍时间&nbsp;&nbsp;<span>{{ imgDetailList.partitionField }}</span>
+                抓拍时间&nbsp;&nbsp;<span>{{ imgDetailList.passTimeCn }}</span>
               </div>
               <div class="detailText">
-                                经过位置&nbsp;&nbsp;<span>{{ imgDetailList.deviceAddress }}</span>
+                经过位置&nbsp;&nbsp;<span>{{
+                  imgDetailList.deviceAddress
+                }}</span>
               </div>
               <div class="detailText">
                 设备IP&nbsp;&nbsp;<span>{{ imgDetailList.cameraIp }}</span>
@@ -77,17 +128,76 @@
       </el-tab-pane>
       <el-tab-pane name="second">
         <div slot="label" class="tabdv">车辆</div>
-                <div style="width: 100%; height: 622px;  display: flex; justify-content: space-between;"
+        <div
-                    v-if="activeName == 'second'">
+          style="width: 100%; background-color: none !important"
-                    <div class="imgList">
+          v-if="activeName == 'second'"
-                        <div class="imgListItem" v-for="item in vechileList" :key="item.id"
+        >
-                            @click="showVechileDetail(item, $event)">
+          <el-table
+            :cell-style="{ background: 'revert' }"
+            :data="vechileList"
+            class="table"
+            style="
+              width: calc(100% - 40px);
+              margin: 20px;
+              background-color: none;
+            "
+            :row-style="tableRowStyle"
+            :header-row-style="tableHeaderColor"
+            :header-cell-style="tableHeaderCellColor"
+          >
+            <el-table-column type="index" width="50" label="序号">
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              prop="plateNo"
+              label="车牌号码"
+            >
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              prop="ownerName"
+              label="车主姓名"
+            >
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              prop="idcard"
+              label="身份证号"
+            >
+            </el-table-column>
+
+            <el-table-column
+              show-overflow-tooltip
+              prop="partitionField"
+              label="过车时间"
+            >
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              prop="deviceAddress"
+              label="经过位置"
+            >
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              prop="directionCn"
+              label="进出方向"
+            >
+            </el-table-column>
+          </el-table>
+          <!-- <div class="imgList">
+            <div
+              class="imgListItem"
+              v-for="item in vechileList"
+              :key="item.id"
+              @click="showVechileDetail(item, $event)"
+            >
               <div class="detailImg">
-                                <img :src="item.globalPic">
+                <img :src="item.globalPic" />
               </div>
               <div class="ListItem">
                 <div class="detailText">
-                                    过车时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
+                  过车时间&nbsp;&nbsp;<span>{{ item.passTimeCn }}</span>
                 </div>
                 <div class="detailText">
                   经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
@@ -97,17 +207,21 @@
           </div>
           <div class="imgDetail" v-if="total">
             <div class="detailImg">
-                            <img :src="vechileDetailList.platePic">
+              <img :src="vechileDetailList.platePic" />
             </div>
             <div class="detailImg">
-                            <img :src="vechileDetailList.globalPic">
+              <img :src="vechileDetailList.globalPic" />
             </div>
             <div>
               <div class="detailText">
-                                过车时间&nbsp;&nbsp;<span>{{ vechileDetailList.partitionField }}</span>
+                过车时间&nbsp;&nbsp;<span>{{
+                  vechileDetailList.passTimeCn
+                }}</span>
               </div>
               <div class="detailText">
-                                经过位置&nbsp;&nbsp;<span>{{ vechileDetailList.deviceAddress }}</span>
+                经过位置&nbsp;&nbsp;<span>{{
+                  vechileDetailList.deviceAddress
+                }}</span>
               </div>
               <div class="detailText">
                 设备IP&nbsp;&nbsp;<span>{{ vechileDetailList.cameraIp }}</span>
@@ -116,7 +230,9 @@
                 车牌号码&nbsp;&nbsp;<span>{{ vechileDetailList.plateNo }}</span>
               </div>
               <div class="detailText">
-                                车主姓名&nbsp;&nbsp;<span>{{ vechileDetailList.ownerName }}</span>
+                车主姓名&nbsp;&nbsp;<span>{{
+                  vechileDetailList.ownerName
+                }}</span>
               </div>
               <div class="detailText">
                 身份证号&nbsp;&nbsp;<span>{{ vechileDetailList.idcard }}</span>
@@ -125,17 +241,27 @@
                 联系方式&nbsp;&nbsp;<span>{{ vechileDetailList.phone }}</span>
               </div>
               <div class="detailText">
-                                进出方向&nbsp;&nbsp;<span>{{ vechileDetailList.directionCn }}</span>
+                进出方向&nbsp;&nbsp;<span>{{
-                            </div>
+                  vechileDetailList.directionCn
+                }}</span>
               </div>
             </div>
+          </div> -->
         </div>
       </el-tab-pane>
     </el-tabs>
     <div class="block">
-            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
+      <el-pagination
-                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+        style="float: right; margin: 5px"
-                :page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        class="msg-pagination-container"
+        :background="true"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-sizes="[8]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
       </el-pagination>
     </div>
     <div class="bottomZS"></div>
@@ -143,158 +269,235 @@
 </template>
 
 <script>
-import { realTimePassageFlowFace, realTimePassageFlowVehicle } from '@/api/archives'
+import {
+  realTimePassageFlowFace,
+  realTimePassageFlowVehicle,
+  list,
+} from "@/api/archives";
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import moment from "moment";
 export default {
-    props: ['companyID'],
+  props: ["companyID"],
   data() {
     return {
+      imgBsseUrl: "http://218.92.207.242:20118/",
       formInline: {},
       pageSize: 8,
       pageNum: 1,
-            activeName: 'first',
+      activeName: "first",
       total: 0,
       tableData: [],
+      // loading:true,
       vechileList: [],
-            chooseTime: '',
+      chooseTime: "",
       imgDetailList: {},
       vechileDetailList: {},
       pickerOptions: {
-                shortcuts: [{
+        shortcuts: [
-                    text: '近一周',
+          {
+            text: "近一周",
             onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-                        picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
-                    }
+            },
           },
           {
-                    text: '近一个月',
+            text: "近一个月",
             onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-                        picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
-                    }
+            },
           },
           {
-                    text: '近三个月',
+            text: "近三个月",
             onClick(picker) {
               const end = new Date();
               const start = new Date();
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-                        picker.$emit('pick', [start, end]);
+              picker.$emit("pick", [start, end]);
-                    }
-                }]
             },
-        }
+          },
+        ],
+      },
+    };
   },
   computed: {
     timeDefault() {
       const date = new Date();
-            let s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
+      let s1 =
+        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
       return s1;
-        }
+    },
   },
   created() {
-        this.formInline.startTime = this.timeDefault + ' 00:00:00';
+    this.formInline.startTime = this.timeDefault + " 00:00:00";
-        this.formInline.endTime = this.timeDefault + ' 23:59:59';
+    this.formInline.endTime = this.timeDefault + " 23:59:59";
-        this.getList()
+    this.getList();
   },
   mounted() {
     this.$nextTick(() => {
-            this.chooseTime = [this.timeDefault + ' 00:00:00', this.timeDefault + ' 23:59:59']
+      this.chooseTime = [
-        })
+        this.timeDefault + " 00:00:00",
+        this.timeDefault + " 23:59:59",
+      ];
+    });
   },
   methods: {
+    tableRowStyle({ rowIndex }) {
+      if ((rowIndex + 1) % 2 == 1) {
+        return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
+      } else {
+        return {
+          background: "rgba(61, 85, 102, 0.16)",
+          border: "0",
+          color: "#fff",
+        };
+      }
+    },
+    tableHeaderColor() {
+      return {
+        background:
+          "linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
+      };
+      // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
+    },
+    tableHeaderCellColor() {
+      return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
+    },
     getList(val) {
+      console.log(111, val);
       if (val) {
-                this.pageNum = val
+        this.pageNum = val;
       }
-            if (this.activeName == 'first') {
+      if (this.activeName == "first") {
-
+        this.formInline.plateNo = null;
-                this.formInline.plateNo = null
+        console.log(2222222);
-                realTimePassageFlowFace({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
+        //         axios
-                    this.tableData = res.data
+        //           .post(
-                    this.imgDetailList = res.data[0] || {}
+        //             "http://218.92.207.242:20118/hjapi/user/record/list",
-                    this.total = res.total
+        //             // {
-                    // if (!res.data.length) {
+        //             //   pageSize: this.pageSize,
-                    //     this.$message.warning('没有匹配数据')
+        //             //   pageNum: this.pageNum,
+        //             // },
+        //             {
+        //               headers: {
+        //                 Authorization: `
+        // Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjE3NTBjNTk5LTg4NDQtNDY4Yy05Njg5LTQ3ZWMzMmY0NjY5YSJ9.r8n2EG5nQTkn9pbIewTCq-f6LAy_VAmIY2GnWSUXZsZdpIqic8iWrlYvVaI86O1qPYTZ-1BeVdkGLzsgiJoobQ}`,
+        //               },
+        //             }
+        //           )
+        //           .then(function (response) {
+        //             console.log(response);
+        //           })
+        //           .catch(function (error) {
+        //             console.log(error);
+        //           });
+        // this.loading = true
+        console.log(3);
+        list({
+          pageSize: this.pageSize,
+          pageNum: this.pageNum,
+          ...this.formInline,
+          isAsc: "desc",
+          orderByColumn: "passTime",
+        }).then((res) => {
+          console.log(4);
+          // this.loading = false
+          this.tableData = res.rows;
+          this.tableData.forEach((item) => {
+            item.partitionField =
+              item.partitionField &&
+              moment(item.partitionField).format("YYYY-MM-DD HH:mm:ss");
+            // item.globalPic = this.imgBsseUrl +  item.globalPic
+            // item.personPic = this.imgBsseUrl +  item.personPic
+          });
+          this.imgDetailList = res.rows[0] || {};
+          this.total = res.total;
+          // if (!res.rows.length) {
+          //   this.$message.warning("没有匹配数据");
           // }
-                })
+        });
       } else {
-                this.formInline.idcard = null
+        this.formInline.idcard = null;
-                this.formInline.userName = null
+        this.formInline.userName = null;
-
+
-                realTimePassageFlowVehicle({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
+        realTimePassageFlowVehicle({
-                    this.vechileList = res.data
+          pageSize: this.pageSize,
-                    this.total = res.total
+          pageNum: this.pageNum,
-                    this.vechileDetailList = res.data[0] || {}
+          ...this.formInline,
+          companyId: this.companyID,
+        }).then((res) => {
+          this.vechileList = res.data;
+          this.total = res.total;
+          this.vechileDetailList = res.data[0] || {};
           // if (!res.data.length) {
           //     this.$message.warning('没有匹配数据')
           // }
-                })
+        });
       }
-
-
     },
     GetchangeTime() {
       console.log(this.chooseTime);
       if (this.chooseTime != null && this.chooseTime.length > 1) {
-                this.formInline.startTime = this.chooseTime[0]
+        this.formInline.startTime = this.chooseTime[0];
-                this.formInline.endTime = this.chooseTime[1]
+        this.formInline.endTime = this.chooseTime[1];
       } else {
-                this.formInline.startTime = null
+        this.formInline.startTime = null;
-                this.formInline.endTime = null
+        this.formInline.endTime = null;
       }
       this.pageNum = 1;
     },
     showDetail(item) {
-            this.imgDetailList = item
+      this.imgDetailList = item;
-            let imgs = document.querySelectorAll('.imgListItem')
+      let imgs = document.querySelectorAll(".imgListItem");
       let index = this.tableData.findIndex((i) => {
-                return i.globalPic == item.globalPic
+        return i.globalPic == item.globalPic;
-            })
+      });
-            imgs.forEach(a => {
+      imgs.forEach((a) => {
-                a.className = 'imgListItem'
+        a.className = "imgListItem";
-            })
+      });
-            imgs[index].className = 'imgListItem imgListItemFocus'
+      imgs[index].className = "imgListItem imgListItemFocus";
     },
     showVechileDetail(item) {
-            this.vechileDetailList = item
+      this.vechileDetailList = item;
-            let imgs = document.querySelectorAll('.imgListItem')
+      let imgs = document.querySelectorAll(".imgListItem");
       let index = this.vechileList.findIndex((i) => {
-                return i.globalPic == item.globalPic
+        return i.globalPic == item.globalPic;
-            })
+      });
-            imgs.forEach(a => {
+      imgs.forEach((a) => {
-                a.className = 'imgListItem'
+        a.className = "imgListItem";
-            })
+      });
-            imgs[index].className = 'imgListItem imgListItemFocus'
+      imgs[index].className = "imgListItem imgListItemFocus";
     },
     clearPage() {
-            console.log('clearPage');
+      console.log("clearPage");
       this.pageNum = 1;
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.pageNum = 1;
       this.pageSize = val;
-            this.getList()
+      this.getList();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.pageNum = val;
-            this.getList()
+      this.getList();
     },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
 .mainBox {
   width: 100%;
   height: 812px;
-    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
+  background: url("~@/assets/companyFile/背景22136.png") no-repeat;
   background-size: 100% 100%;
   padding: 70px 20px 60px;
   box-sizing: border-box;
@@ -312,7 +515,7 @@ export default {
     .monitorItem {
       height: 100%;
       width: calc(20% - 40px);
-            background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
+      background: url("~@/assets/companyFile/实时监控背景.png") no-repeat;
       background-size: 100% 100%;
       display: flex;
       justify-content: center;
@@ -324,14 +527,14 @@ export default {
         width: 100%;
         margin-top: 10px;
         margin-bottom: 4px;
-                color: #4CF993;
+        color: #4cf993;
         line-height: 20px;
         display: flex;
         align-items: center;
         justify-content: space-around;
 
         .left {
-                    color: #EAF6FF;
+          color: #eaf6ff;
         }
 
         .dian {
@@ -340,7 +543,7 @@ export default {
           height: 10px;
           width: 6px;
           height: 6px;
-                    background: #4CF993;
+          background: #4cf993;
           border-radius: 3px;
           margin: 0 5px;
         }
@@ -358,7 +561,7 @@ export default {
         justify-content: space-around;
 
         .left {
-                    color: #EAF6FF;
+          color: #eaf6ff;
         }
 
         .dian {
@@ -390,14 +593,13 @@ export default {
           align-items: center;
           justify-content: center;
           font-size: 14px;
-                    color: #FFFFFF;
+          color: #ffffff;
           letter-spacing: 0;
           font-weight: 400;
 
           i {
             font-size: 16px;
           }
-
         }
 
         img {
@@ -410,19 +612,18 @@ export default {
         height: 20px;
         width: 100%;
         font-size: 12px;
-                color: #FFFFFF;
+        color: #ffffff;
         letter-spacing: 1.75px;
 
         padding-left: 10px;
 
         .online1 {
-                    color: #4CF993;
+          color: #4cf993;
         }
 
         .outline1 {
           color: #ccc;
         }
-
       }
     }
   }
@@ -432,7 +633,6 @@ export default {
     right: 20px;
     top: 20px;
     display: flex;
-
   }
 
   /deep/.el-button--primary {
@@ -445,10 +645,10 @@ export default {
     text-align: center;
     background: rgba(0, 0, 0, 0);
     border: 0;
-        background: url('~@/assets/companyFile/2121.png') no-repeat;
+    background: url("~@/assets/companyFile/2121.png") no-repeat;
     background-size: 100% 100%;
     font-size: 14px;
-        color: #F8FBFF;
+    color: #f8fbff;
     letter-spacing: 0.89px;
     font-weight: 500;
   }
@@ -458,34 +658,33 @@ export default {
     margin-left: 20px;
 
     .el-form-item__label {
-            color: #EAF6FF;
+      color: #eaf6ff;
       letter-spacing: 1px;
       text-align: center;
       font-weight: 400;
-
-
     }
-
   }
 
-    /deep/.el-tabs--card>.el-tabs__header {
+  /deep/.el-tabs--card > .el-tabs__header {
     border: 0;
 
-
-
     .el-tabs__nav {
       border: 0;
     }
 
     .el-tabs__nav {
       opacity: 0.7;
-            background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
+      background-image: linear-gradient(
+        180deg,
+        rgba(234, 241, 248, 0.1) 0%,
+        rgba(208, 222, 238, 0.1) 100%
+      );
       border: 1px solid rgba(91, 116, 140, 1);
     }
 
     .el-tabs__item {
       font-size: 14px;
-            color: #EAF6FF;
+      color: #eaf6ff;
       letter-spacing: 1px;
       border: 0;
     }
@@ -497,7 +696,7 @@ export default {
     .el-tabs__item.is-active {
       border: 0;
       font-size: 14px;
-            color: #4BFFAD;
+      color: #4bffad;
       letter-spacing: 1px;
       background: rgba(129, 255, 204, 0.26);
     }
@@ -505,12 +704,10 @@ export default {
 
   /deep/.el-input__inner {
     // background: url('~@/assets/companyFile/2121.png') no-repeat;
-        background: url('~@/assets/companyFile/back003.png') no-repeat;
+    background: url("~@/assets/companyFile/back003.png") no-repeat;
     background-size: 100% 100%;
     border: 1px solid rgba(40, 132, 126, 1);
     color: rgba(234, 246, 255, 0.7);
-        ;
-
     .el-range-separator {
       color: #ccc;
     }
@@ -529,7 +726,79 @@ export default {
       height: calc(100% - 60px);
     }
   }
+  /deep/.el-input {
+    .el-input__inner {
+      // background: url('~@/assets/companyFile/2121.png') no-repeat;
+      background: url("~@/assets/companyFile/back003.png") no-repeat;
+      background-size: 100% 100%;
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: rgba(234, 246, 255, 0.7);
+    }
+  }
+
+  /deep/.el-table {
+    background: rgba(0, 0, 0, 0);
+
+    td.el-table__cell {
+      border: 0;
+    }
+
+    .xiangqing {
+      background: rgba(0, 0, 0, 0);
+      border: 0;
+      color: rgba(48, 196, 255, 0.7);
+      cursor: pointer;
+    }
+
+    .alarmType {
+      width: 72px;
+      height: 32px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.9);
+      letter-spacing: 1px;
+      font-weight: 400;
+
+      .red {
+        width: 100%;
+        height: 100%;
+        background: rgba(152, 7, 7, 0.21);
+        border: 1px solid rgba(214, 38, 38, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .yellow {
+        width: 100%;
+        height: 100%;
+        background: rgba(152, 95, 7, 0.21);
+        border: 1px solid rgba(255, 169, 38, 1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .blue {
+        width: 100%;
+        height: 100%;
+        background: rgba(6, 89, 197, 0.21);
+        border: 1px solid rgb(11, 108, 205);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
 
+      .green {
+        width: 100%;
+        height: 100%;
+        background: rgba(6, 184, 27, 0.21);
+        border: 1px solid rgb(1, 170, 43);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
   .imgList {
     box-sizing: border-box;
     width: calc(100% - 314px);
@@ -559,13 +828,11 @@ export default {
         margin: 0 auto;
         width: 96%;
         height: calc(100% - 90px);
-                ;
+        background: #d8d8d8;
-                background: #D8D8D8;
 
         img {
           width: 100%;
           height: 100%;
-                    ;
         }
       }
 
@@ -622,7 +889,6 @@ export default {
       font-family: PingFangSC-Regular;
       font-size: 12px;
       color: rgba(234, 246, 255, 0.86);
-            ;
       letter-spacing: 1.52px;
 
       span {
@@ -639,18 +905,15 @@ export default {
     height: 36px;
     line-height: 36;
     font-size: 16px;
-        color: #EBFFF4;
+    color: #ebfff4;
     letter-spacing: 2px;
     line-height: 36px;
-        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
+    text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
     font-weight: 400;
 
     span {
-            color: #FF9191;
+      color: #ff9191;
     }
   }
-
-
-
 }
 </style>

src/views/archives/monitor.vue

@@ -32,7 +32,7 @@
                     <div class="right"><i class="dian"></i><span>离线</span></div>
                 </div>
                 <div class="videoImg">
-                    <div class="boxshadow" v-if="isShow[index].show" @mouseleave="closeShadow(index)"
+                    <div class="boxshadow" @mouseleave="closeShadow(index)"
                         @click="showDia(item)">
                         <div><i class="el-icon-video-play"></i>&nbsp;&nbsp;查看实时监控</div>
                     </div>
@@ -44,7 +44,6 @@
                     <playVideo :video="{ url: item.wsFlv, index: index }" :control="true" v-if="diaVisible"></playVideo>
                 </el-dialog>
             </div>
-
         </div>
         <div class="block">
             <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"