merge

.gitignore

 node_modules
 dist
+.idea

package-lock.json

@@ -9804,9 +9804,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.11",
-      "resolved": "http://registry.npm.taobao.org/lodash/download/lodash-4.17.11.tgz",
-      "integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40=",
+      "version": "4.17.19",
+      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226832494&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
+      "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks=",
       "dev": true
     },
     "lodash.defaultsdeep": {

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
+    "lodash": "^4.17.19",
     "script-loader": "^0.7.2",
     "vue-template-compiler": "^2.6.10"
   },

src/App.vue

 <template>
   <div id="app">
-    
-    <router-view/>
+    <router-view />
   </div>
 </template>
-<style lang="less">
 
+<style lang="less">
 </style>

src/config.js

@@ -10,4 +10,4 @@ const photoAddress = 'http://106.52.130.113:9088/';
 const imgAddress = 'http://152.136.233.116:8083/roadlinks/';
 const imgApi = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName=';
 
-export { address,photoAddress,imgApi,imgAddress };
+export { address, photoAddress, imgApi, imgAddress };

src/assets/data.js → src/data.js

-export default [
-  {
+import { CapitalClass1,CapitalClass2,Capital } from "./entity"
+
+captials = new CapitalClass1();
+
+cities = [{
     cityInfo: 'TianJin',
     cityName: '天津',
     status: 0,
@@ -56,3 +59,5 @@ export default [
     lng: 113.42,
   },
 ]
+
+export { cities,captials }

src/entity.js

+export class CapitalClass1 {
+  constructor() {
+    this.Type = '';
+    this.Count = 0;
+    this.Class2List = [];
+  }
+}
+
+export class CapitalClass2 {
+  constructor() {
+    this.SubType = '';
+    this.Count = 0;
+    this.CapitalList = [];
+  }
+}
+
+export class Capital {
+  constructor() {
+    this.Name = '';
+    this.Longitude = 0.0;
+    this.Latitude = 0.0;
+  };
+}

src/main.js

@@ -4,6 +4,7 @@ import Cookies from 'js-cookie';
 import ElementUI from 'element-ui';
 import BaiduMap from 'vue-baidu-map';
 import 'element-ui/lib/theme-chalk/index.css';
+import _ from 'lodash';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -12,10 +13,11 @@ Vue.use(ElementUI);
 Vue.use(BaiduMap, {
   ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
 });
+Object.defineProperty(Vue.prototype, '$_', { value: _ });
 
 Vue.config.productionTip = false;
 router.beforeEach((to, from, next) => {
-  window.scrollTo(0,0);
+  window.scrollTo(0, 0);
   if (to.matched.some(record => record.meta.requireAuth)) {
     // 判断该路由是否需要登录权限
     if (Cookies.get('id')) { // 判断当前的token是否存在
@@ -32,8 +34,9 @@ router.beforeEach((to, from, next) => {
     next();
   }
 });
-router.afterEach((to,from,next) => {
-  window.scrollTo(0,0);
+
+router.afterEach((to, from, next) => {
+  window.scrollTo(0, 0);
 });
 new Vue({
   router,

src/views/Detail.vue

@@ -19,18 +19,18 @@
                     v-for="item in capitalOptions"
                     :key="item.value"
                     :label="item.label"
-                    :value="item.value">
-                  </el-option>
+                    :value="item.value"
+                  ></el-option>
                 </el-select>
                 <!-- <el-autocomplete
                     v-model="filters.channelName"
                     :fetch-suggestions="queryChannelSearchAsync"
                     placeholder="渠道"
                     @select="handleChannelSelect"
-                ></el-autocomplete> -->
+                ></el-autocomplete>-->
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" v-loading="searchLoading" @click="getCapitalDetails">搜索</el-button>
+                <el-button type="primary" @click="getCapitalDetails">搜索</el-button>
               </el-form-item>
             </el-form>
           </el-col>
@@ -40,21 +40,12 @@
           <el-table
             :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             style="width: calc(100vw - 240px);overflow:hidden;"
-            border=true
-            highlight-current-row=true
+            border="true"
+            highlight-current-row="true"
           >
-            <el-table-column
-              label="序号"
-              prop="no">
-            </el-table-column>
-            <el-table-column
-              label="道路资产名称"
-              prop="name">
-            </el-table-column>
-            <el-table-column
-              label="道路资产位置信息"
-              prop="position">
-            </el-table-column>
+            <el-table-column label="序号" prop="no"></el-table-column>
+            <el-table-column label="道路资产名称" prop="name"></el-table-column>
+            <el-table-column label="道路资产位置信息" prop="position"></el-table-column>
           </el-table>
           <el-pagination
             @size-change="handleSizeChange"
@@ -63,37 +54,29 @@
             :page-sizes="[5, 10, 20, 40]"
             :page-size="pagesize"
             layout="total, sizes, prev, pager, next, jumper"
-            :total="tableData.length">
-          </el-pagination>
+            :total="tableData.length"
+          ></el-pagination>
         </div>
 
         <!-- 任务统计 -->
         <!-- <div class="task-echarts">
         <h3>任务统计</h3>
         <div class="echarts-box" id="echarts-box"></div>
-        </div> -->
+        </div>-->
       </el-row>
     </div>
   </div>
 </template>
-<style lang="less" scope>
-  .detail {
-    .box {
-      .el-pagination {
-        padding: 15px;
-      }
-    }
-  }
-</style>
+
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import echarts from 'echarts';
-import moment from 'moment';
-import { address, photoAddress } from '../config';
+import axios from "axios";
+import { Message } from "element-ui";
+import echarts from "echarts";
+import moment from "moment";
+import { address, photoAddress } from "../config";
 
 export default {
-  name: 'detail',
+  name: "detail",
   data() {
     return {
       tableData: [],
@@ -101,19 +84,15 @@ export default {
         capitalType: [],
       },
       showCol: false,
-      currentPage: 1, // 初始页
-      pagesize: 10, // 每页的数据
+      currentPage: 1, //初始页
+      pagesize: 10, //每页的数据
       loading: false,
       no: 0,
       capitalOptions: [],
-      currentdate: '',
-      searchLoading: false,
-
+      currentdate: "",
     };
   },
-  mounted() {
-
-  },
+  mounted() {},
   created() {
     this.filters.capitalType = [];
     if (this.$route.params.capitalName) {
@@ -125,27 +104,32 @@ export default {
   methods: {
     linkPic(index, row) {
       this.getCurrentDate();
-      const photoDate = row.finalOnlineTime ? row.finalOnlineTime : this.currentdate;
-      window.open(`${photoAddress + photoDate}/${row.channelCode}/${row.code}`, '_blank');
+      var photoDate = row.finalOnlineTime
+        ? row.finalOnlineTime
+        : this.currentdate;
+      window.open(
+        photoAddress + photoDate + "/" + row.channelCode + "/" + row.code,
+        "_blank"
+      );
     },
     getCurrentDate() {
-      const date = new Date();
-      const seperator1 = '-';
-      const year = date.getFullYear();
-      let month = date.getMonth() + 1;
-      let strDate = date.getDate();
+      var date = new Date();
+      var seperator1 = "-";
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
       if (month >= 1 && month <= 9) {
-        month = `0${month}`;
+        month = "0" + month;
       }
       if (strDate >= 0 && strDate <= 9) {
-        strDate = `0${strDate}`;
+        strDate = "0" + strDate;
       }
-      const currentdate = year + seperator1 + month + seperator1 + strDate;
+      var currentdate = year + seperator1 + month + seperator1 + strDate;
       this.currentdate = currentdate;
     },
     linkActul(index, row) {
       this.$router.push({
-        path: '/overview',
+        path: "/overview",
         query: {
           equipment: row.code,
           channel: row.channelCode,
@@ -155,19 +139,27 @@ export default {
     },
     linkMileage(index, row) {
       this.$router.push({
-        path: '/mileage',
+        path: "/mileage",
         query: {
           equipment: row.code,
           channel: row.channelCode,
           plateNo: row.plateNo,
-          startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
-          endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null,
+          startTime:
+            this.filters.dateTime && this.filters.dateTime.length > 0
+              ? this.filters.dateTime[0]
+              : null,
+          endTime:
+            this.filters.dateTime && this.filters.dateTime.length > 1
+              ? this.filters.dateTime[1]
+              : null,
         },
       });
     },
     queryEquipSearchAsync(queryString, cb) {
-      const restaurants = this.equips;
-      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      var restaurants = this.equips;
+      var results = queryString
+        ? restaurants.filter(this.createStateFilter(queryString))
+        : restaurants;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -175,8 +167,10 @@ export default {
       }, 3000 * Math.random());
     },
     queryPlateSearchAsync(queryString, cb) {
-      const restaurants = this.plateNos;
-      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      var restaurants = this.plateNos;
+      var results = queryString
+        ? restaurants.filter(this.createStateFilter(queryString))
+        : restaurants;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -184,12 +178,13 @@ export default {
       }, 3000 * Math.random());
     },
     queryChannelSearchAsync(query) {
-      if (query !== '') {
+      if (query !== "") {
         this.channelLoading = true;
         setTimeout(() => {
           this.channelLoading = false;
-          this.channelOptions = this.list.filter(item => item.label.toLowerCase()
-            .indexOf(query.toLowerCase()) > -1);
+          this.channelOptions = this.list.filter((item) => {
+            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
+          });
         }, 200);
       } else {
         this.channelOptions = [];
@@ -206,7 +201,11 @@ export default {
     //   }, 3000 * Math.random());
     // },
     createStateFilter(queryString) {
-      return state => (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
+      return (state) => {
+        return (
+          state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+        );
+      };
     },
     handleEquipSelect(item) {
       if (item && item.value) {
@@ -225,22 +224,24 @@ export default {
       }
     },
     // 初始页currentPage、初始每页数据数pagesize和数据data
-    handleSizeChange(size) {
+    handleSizeChange: function (size) {
       this.pagesize = size;
-      console.log(this.pagesize); // 每页下拉显示数据
+      console.log(this.pagesize); //每页下拉显示数据
     },
-    handleCurrentChange(currentPage) {
+    handleCurrentChange: function (currentPage) {
       this.currentPage = currentPage;
-      console.log(this.currentPage); // 点击第几页
+      console.log(this.currentPage); //点击第几页
     },
     getAllCapitals() {
-      axios.post(`${address}getAllCapitals`, {}).then((response) => {
+      axios
+        .post(address + `getAllCapitals`, {})
+        .then((response) => {
           if (response.data.code === 200) {
             this.capitalOptions = [];
             if (response.data.data) {
               console.log(response.data.data);
-            const { capitals } = response.data.data;
-            const nameSet = new Set();
+              let capitals = response.data.data.capitals;
+              let nameSet = new Set();
               capitals.forEach((val) => {
                 nameSet.add(val.capitalName);
               });
@@ -251,7 +252,6 @@ export default {
               });
             }
           } else {
-
           }
         })
         .catch((error) => {
@@ -260,29 +260,29 @@ export default {
     },
     getCapitalDetails() {
       this.currentPage = 1;
-      let capitalName = '';
+      let capitalName = "";
       if (this.filters.capitalType) {
         this.filters.capitalType.forEach((val) => {
-          if (capitalName === '') {
-            capitalName += val;
+          if (capitalName === "") {
+            capitalName = capitalName + val;
           } else {
-            capitalName = `${capitalName},${val}`;
+            capitalName = capitalName + "," + val;
           }
         });
       }
-      this.searchLoading = true;
-      axios.post(`${address}getCapitalDetails`, {
-        capitalName,
-      }).then((response) => {
-        this.searchLoading = false;
+      axios
+        .post(address + `getCapitalDetails`, {
+          capitalName: capitalName,
+        })
+        .then((response) => {
           if (response.data.code === 200) {
             this.tableData = [];
             this.no = 0;
             if (response.data.data) {
-            const nameMap = new Map();
+              let nameMap = new Map();
               response.data.data.forEach((val) => {
                 if (val.lng && val.lat) {
-                // nameSet.add(val.capitalName);
+                  //nameSet.add(val.capitalName);
                   let num = 1;
                   if (nameMap.has(val.capitalName)) {
                     num = nameMap.get(val.capitalName) + 1;
@@ -301,12 +301,11 @@ export default {
           }
         })
         .catch((error) => {
-          this.searchLoading = false;
           console.log(error);
         });
     },
     isInArray(arr, value) {
-      for (let i = 0; i < arr.length; i++) {
+      for (var i = 0; i < arr.length; i++) {
         if (value === arr[i]) {
           return true;
         }
@@ -315,7 +314,10 @@ export default {
     },
     queryEquipment() {
       if (this.filters.channelName) {
-        if (this.channelNames.length > 0 && this.isInArray(this.channelNames, this.filters.channelName)) {
+        if (
+          this.channelNames.length > 0 &&
+          this.isInArray(this.channelNames, this.filters.channelName)
+        ) {
           this.channels.forEach((val) => {
             if (val && val.value == this.filters.channelName) {
               this.filters.channel = val.channelId;
@@ -325,24 +327,41 @@ export default {
           this.filters.channel = -99;
         }
       } else {
-        this.filters.channel = '';
+        this.filters.channel = "";
       }
 
-      axios.post(`${address}getAllEquipments`, {
+      axios
+        .post(address + `getAllEquipments`, {
           code: this.filters.equipmentNo,
           channelId: this.filters.channel,
           plateNo: this.filters.plateNo,
           type: this.filters.type,
           status: this.filters.status,
-        startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
-        endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null,
-      }).then((response) => {
+          startTime:
+            this.filters.dateTime && this.filters.dateTime.length > 0
+              ? this.filters.dateTime[0]
+              : null,
+          endTime:
+            this.filters.dateTime && this.filters.dateTime.length > 1
+              ? this.filters.dateTime[1]
+              : null,
+        })
+        .then((response) => {
           if (response.data.code === 200) {
             if (response.data.data) {
               response.data.data.forEach((item) => {
-              item.status = (item.status ? '启用' : '未启用');
-              item.type = item.type == 1 ? '小客车' : (item.type == 2 ? '大客车' : (item.type == 3 ? '货车' : ''));
-              item.finalOnlineTime = item.finalOnlineTime ? moment(new Date(item.finalOnlineTime)).format('YYYY-MM-DD') : '';
+                item.status = item.status ? "启用" : "未启用";
+                item.type =
+                  item.type == 1
+                    ? "小客车"
+                    : item.type == 2
+                    ? "大客车"
+                    : item.type == 3
+                    ? "货车"
+                    : "";
+                item.finalOnlineTime = item.finalOnlineTime
+                  ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD")
+                  : "";
               });
             }
             this.tableData = response.data.data;
@@ -359,7 +378,16 @@ export default {
           console.log(error);
         });
     },
-
   },
 };
 </script>
+
+<style lang="less" scope>
+.detail {
+  .box {
+    .el-pagination {
+      padding: 15px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Home.vue

 <template>
   <div class="home">
-    
     <el-container>
-      
       <el-aside width="200px">
-    
         <el-menu
           :default-active="onRoutes"
           active-text-color="#41afdd"
           background-color="#323346"
-      class="el-menu-vertical-demo">
-      <div class="logo"><img src="../assets/logo_new.png" alt=""></div>
+          class="el-menu-vertical-demo"
+        >
+          <div class="logo">
+            <img src="../assets/logo_new.png" alt />
+          </div>
           <el-submenu index="1">
             <span slot="title" class="submenu_parent">道路资产管理</span>
-        <el-menu-item index="1-1" @click="goTo('/overview')" style="background:#252639 !important">
+            <el-menu-item
+              index="1-1"
+              @click="goTo('/overview')"
+              style="background:#252639 !important"
+            >
               <span slot="title" style="font-size: 16px">资产汇总</span>
             </el-menu-item>
-        <el-menu-item index="1-2" @click="goTo('/detail')" style="background:#252639 !important">
+            <el-menu-item
+              index="1-2"
+              @click="goTo('/detail')"
+              style="background:#252639 !important"
+            >
               <span slot="title" style="font-size: 16px">资产明细</span>
             </el-menu-item>
           </el-submenu>
@@ -25,10 +33,18 @@
           </el-menu-item>
           <el-submenu index="3">
             <span slot="title" class="submenu_parent">巡检结果管理</span>
-        <el-menu-item index="3-1" @click="goTo('/result')" style="background:#252639 !important">
+            <el-menu-item
+              index="3-1"
+              @click="goTo('/result')"
+              style="background:#252639 !important"
+            >
               <span slot="title" style="font-size: 16px">巡检结果查看</span>
             </el-menu-item>
-        <el-menu-item index="3-2" @click="goTo('/resultDetail')" style="background:#252639 !important">
+            <el-menu-item
+              index="3-2"
+              @click="goTo('/resultDetail')"
+              style="background:#252639 !important"
+            >
               <span slot="title" style="font-size: 16px">巡检结果明细</span>
             </el-menu-item>
           </el-submenu>
@@ -42,24 +58,96 @@
           <el-button type="text" class="exitSys" @click="esc">退出</el-button>
         </el-header>
         <el-main ref="el-main">
-      <router-view/>
+          <router-view />
         </el-main>
       </el-container>
-</el-container>
+    </el-container>
   </div>
 </template>
+
+<script>
+// @ is an alias to /src
+// import HelloWorld from '@/components/HelloWorld.vue';
+import Cookies from "js-cookie";
+
+export default {
+  name: "home",
+  data() {
+    return {
+      myId: "",
+      user: {
+        name: "张三",
+      },
+    };
+  },
+  components: {
+    // HelloWorld,
+  },
+  created() {
+    const myId = Cookies.get("id");
+    this.myId = myId;
+    const username = Cookies.get("username");
+    // console.log(this.$route.params.username);
+    this.user.name = username;
+  },
+  mounted() {
+    if (this.$route.path.replace("/", "") == "") {
+      this.goTo("/overview");
+    }
+  },
+  computed: {
+    onRoutes() {
+      // this.$route.path
+      // debugger
+      if (this.$route.path.replace("/", "") == "overview") {
+        return "1-1";
+      } else if (this.$route.path.replace("/", "") == "detail") {
+        return "1-2";
+      } else if (this.$route.path.replace("/", "") == "task") {
+        return "2";
+      } else if (this.$route.path.replace("/", "") == "result") {
+        return "3-1";
+      } else if (this.$route.path.replace("/", "") == "resultDetail") {
+        return "3-2";
+      } else {
+        return "1-1";
+      }
+    },
+  },
+  methods: {
+    // handleOpen(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+    // handleClose(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+    // 退出
+    esc() {
+      // alert(1);
+      Cookies.remove("id");
+      this.$router.push({
+        name: "login",
+      });
+    },
+    goTo(path) {
+      this.$router.replace(path);
+    },
+  },
+};
+</script>
+
 <style lang="less" scoped>
-.logo{
+.logo {
   line-height: 50px;
 }
-.exitSys{
+.exitSys {
   color: black;
   background: 0 0;
   padding-left: 0;
   padding-right: 0;
   font-size: 16px;
 }
-.el-container{
+.el-container {
   height: 100vh;
 }
 .el-header {
@@ -67,153 +155,76 @@
   color: #333;
   text-align: right;
   line-height: 60px;
-    .header-title{
+  .header-title {
     font-size: 20px;
     position: absolute;
   }
-    span{
+  span {
     margin-right: 15px;
     font-size: 16px;
   }
-  }
-  .el-aside {
+}
+.el-aside {
   // background-color: #4ca29d;
   color: #333;
   text-align: center;
   line-height: 200px;
-  }
-  .el-main {
+}
+.el-main {
   // background-color: #E9EEF3;
   color: #333;
   width: calc(100vw - 200px);
   // line-height: 160px;
-  }
-  body > .el-container {
+}
+body > .el-container {
   margin-bottom: 40px;
-  }
+}
 
-  .el-menu{
+.el-menu {
   height: 100%;
   padding-top: 40%;
   box-sizing: border-box;
-  }
-.el-menu-item:focus, .el-menu-item:hover{
+}
+.el-menu-item:focus,
+.el-menu-item:hover {
   background-color: #151628;
 }
-.el-submenu__title:focus, .el-submenu__title:hover{
+.el-submenu__title:focus,
+.el-submenu__title:hover {
   background-color: #151628 !important;
 }
-  .el-menu-item{
+.el-menu-item {
   // color: black;
-    font-size:18px;
-  }
-  .el-menu-item.is-active[data-v-fae5bece] {
+  font-size: 18px;
+}
+.el-menu-item.is-active[data-v-fae5bece] {
   background-color: #151628 !important;
-  }
-  .el-submenu{
-    .submenu_parent{
+}
+.el-submenu {
+  .submenu_parent {
     color: #80a0b9;
   }
-    span{
-      font-size:18px;
-    }
+  span {
+    font-size: 18px;
   }
-  .el-menu-item.is-active {
+}
+.el-menu-item.is-active {
   background-color: #151628 !important;
-    span{
+  span {
     color: #41afdd !important;
   }
-  }
+}
 
- .el-menu[data-v-fae5bece] {
+.el-menu[data-v-fae5bece] {
   background-color: #323346;
-  }
-  .el-menu-item * {
+}
+.el-menu-item * {
   color: #80a0b9;
-  }
-  .el-submenu__title{
-    color:#80a0b9;
-  }
-  .el-menu.el-menu--inline{
+}
+.el-submenu__title {
+  color: #80a0b9;
+}
+.el-menu.el-menu--inline {
   background: #323346;
-  }
-
-
+}
 </style>
\ No newline at end of file
-
-<script>
-// @ is an alias to /src
-// import HelloWorld from '@/components/HelloWorld.vue';
-import Cookies from 'js-cookie';
-
-export default {
-  name: 'home',
-  data() {
-    return {
-      myId: '',
-      user: {
-        name: '张三',
-      },
-    };
-  },
-  components: {
-    // HelloWorld,
-  },
-  created() {
-    const myId = Cookies.get('id');
-    this.myId = myId;
-    const username = Cookies.get('username');
-    // console.log(this.$route.params.username);
-    this.user.name = username;
-  },
-  mounted() {
-    if(this.$route.path.replace('/','') == ''){
-      this.goTo('/overview');
-    }
-  },
-  computed:{
-    onRoutes(){
-      // this.$route.path
-      // debugger
-      if(this.$route.path.replace('/','')=='overview'){
-          return '1-1'; 
-      }
-      else if(this.$route.path.replace('/','')=='detail'){
-          return '1-2'
-      }
-      else if(this.$route.path.replace('/','')=='task'){
-          return '2'
-      }
-      else if(this.$route.path.replace('/','')=='result'){
-          return '3-1'
-      }
-      else if(this.$route.path.replace('/','')=='resultDetail'){
-          return '3-2'
-      }
-      else{
-          return '1-1'; 
-      }
-
-    },
-  },
-  methods: {
-    // handleOpen(key, keyPath) {
-    // console.log(key, keyPath);
-    // },
-    // handleClose(key, keyPath) {
-    // console.log(key, keyPath);
-    // },
-     // 退出
-    esc() {
-      // alert(1);
-      Cookies.remove('id');
-      this.$router.push({
-        name: 'login',
-      });
-    },
-    goTo(path) {
-      this.$router.replace(path);
-    },
-  },
-};
-</script>

src/views/Login.vue

@@ -3,29 +3,50 @@
     <!-- status-icon:是否在输入框中显示校验结果反馈图标 -->
     <div class="box">
       <div class="information">
-      <h1 class="section-title" data-i18n-text="">登录</h1>
-   <el-form class="login-form"  status-icon :rules="loginRules"
-    ref="loginForm" :model="loginForm" label-width="0">
+        <h1 class="section-title" data-i18n-text>登录</h1>
+        <el-form
+          class="login-form"
+          status-icon
+          :rules="loginRules"
+          ref="loginForm"
+          :model="loginForm"
+          label-width="0"
+        >
           <el-form-item prop="username">
             <el-input
               @keyup.enter.native="handleLogin"
-      v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
+              v-model="loginForm.username"
+              auto-complete="off"
+              placeholder="请输入用户名"
+            >
               <i slot="prefix" class="elxingmingyonghumingnicheng"></i>
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
             <el-input
               @keyup.enter.native="handleLogin"
-      :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
-        <i class="el-icon-view el-input__icon"
-        :style="fontstyle" slot="suffix" @click="showPassword"></i>
+              :type="passwordType"
+              v-model="loginForm.password"
+              auto-complete="off"
+              placeholder="请输入密码"
+            >
+              <i
+                class="el-icon-view el-input__icon"
+                :style="fontstyle"
+                slot="suffix"
+                @click="showPassword"
+              ></i>
               <i slot="prefix" class="elmima"></i>
             </el-input>
           </el-form-item>
           <el-form-item>
-      <el-button type="primary"
-      size="small" @click.native.prevent="handleLogin"
-      class="login-submit" name='login'>登录</el-button>
+            <el-button
+              type="primary"
+              size="small"
+              @click.native.prevent="handleLogin"
+              class="login-submit"
+              name="login"
+            >登录</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -33,57 +54,55 @@
         <span @click="register">创建一个账户</span>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import { constants } from 'fs';
-import Cookies from 'js-cookie';
-import { address } from '../config.js';
+import axios from "axios";
+import { Message } from "element-ui";
+import { constants } from "fs";
+import Cookies from "js-cookie";
+import { address } from "../config.js";
 
 export default {
-  name: 'userlogin',
+  name: "userlogin",
   data() {
     // 用户名自定义验证规则
     return {
-      fontstyle: {
-      },
+      fontstyle: {},
       loginForm: {
-        username: '',
-        password: '',
-        verifycode: '',
+        username: "",
+        password: "",
+        verifycode: "",
       },
       checked: false,
-      identifyCodes: '1234567890',
-      identifyCode: '',
-      loginRules: { // 绑定在form表单中的验证规则
+      identifyCodes: "1234567890",
+      identifyCode: "",
+      loginRules: {
+        // 绑定在form表单中的验证规则
         username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { required: true, message: "请输入用户名", trigger: "blur" },
         ],
         password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
         ],
       },
-      passwordType: 'password',
+      passwordType: "password",
     };
   },
-  created() {
-  },
+  created() {},
   mounted() {
     // 验证码初始化
     // console.log(address);
   },
-  computed: {
-  },
+  computed: {},
   props: [],
   methods: {
     // 跳转到home页
     goToHome(id, username) {
       this.$router.push({
-        name: 'home',
+        name: "home",
         params: {
           id,
           username,
@@ -92,33 +111,35 @@ export default {
     },
     // 创建用户
     register() {
-      this.$router.push(
-        { path: '/registered' },
-      );
+      this.$router.push({ path: "/registered" });
     },
     // 通过改变input的type使密码可见
     showPassword() {
-      this.fontstyle === '' ? (this.fontstyle = 'color: red') : (this.fontstyle = ''); // 改变密码可见按钮颜色
-      this.passwordType === ''? (this.passwordType = 'password') : (this.passwordType = '');
+      this.fontstyle === ""
+        ? (this.fontstyle = "color: red")
+        : (this.fontstyle = ""); // 改变密码可见按钮颜色
+      this.passwordType === ""
+        ? (this.passwordType = "password")
+        : (this.passwordType = "");
     },
     // 点击登入按钮
     handleLogin() {
-      
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           // 路由跳转到任务页面
-          axios.post(address + 'login', {
+          axios
+            .post(address + "login", {
               username: this.loginForm.username,
               password: this.loginForm.password,
             })
             .then((response) => {
               if (response.data.code === 200) {
-                Cookies.set('id', response.data.data.id);
-                Cookies.set('username', this.loginForm.username);
+                Cookies.set("id", response.data.data.id);
+                Cookies.set("username", this.loginForm.username);
                 Message({
                   message: `登录${response.data.message}`,
-                  type: 'success',
-                  duration: '800',
+                  type: "success",
+                  duration: "800",
                 });
                 setTimeout(() => {
                   this.goToHome();
@@ -126,7 +147,7 @@ export default {
               } else {
                 Message({
                   message: response.data.message,
-                  type: 'error',
+                  type: "error",
                 });
               }
               console.log(response.data);
@@ -135,7 +156,7 @@ export default {
               console.log(error);
             });
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
@@ -149,39 +170,39 @@ export default {
 //   margin: 0;
 //   padding: 0;
 // }
-#nav{
+#nav {
   width: 100%;
   height: 100vh;
-  .box{
+  .box {
     position: absolute;
     left: 50%;
     margin-left: -247px;
     top: 45%;
     transform: translateY(-50%);
+  }
 }
-}
-#nav{
-  background: url('../assets/img/bglogo.jpeg');
+#nav {
+  background: url("../assets/img/bglogo.jpeg");
   background-size: 100%;
 }
-.identifybox{
+.identifybox {
   display: flex;
   justify-content: space-between;
-  margin-top:7px;
+  margin-top: 7px;
 }
-.iconstyle{
-  color:#409EFF;
+.iconstyle {
+  color: #409eff;
 }
 
-.information{
+.information {
   width: 470px;
   display: block;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-    padding: .75rem;
+  padding: 0.75rem;
   border-radius: 12px 12px 0 0;
-    background: #EEEEEE;
+  background: #eeeeee;
 }
 .section-title {
   border-bottom: 1px solid #ccc;
@@ -194,23 +215,24 @@ export default {
   font-weight: normal;
   margin: 12px;
 }
-.elxingmingyonghumingnicheng,.elmima{
+.elxingmingyonghumingnicheng,
+.elmima {
   font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.login-form{
+.login-form {
   padding: 10px 40px 0 40px;
   text-align: center;
 }
-.login-submit{
+.login-submit {
   text-align: center;
   padding: 12px 60px;
   background-color: rgb(62, 107, 226);
 }
-.login-submit:hover{
+.login-submit:hover {
   background-color: rgb(62, 107, 226);
 }
 .register {
@@ -223,7 +245,7 @@ export default {
   border-radius: 0 0 12px 12px;
   text-align: center;
   cursor: pointer;
-    span{
+  span {
     // display: block;
     height: 42px;
     line-height: 42px;

src/views/Overview.vue

@@ -8,34 +8,24 @@
           <el-table
             :data="tableData"
             style="width: 99.9%"
-            border=true
+            border="true"
             row-key="id"
             default-expand-all
             :cell-style="setUpFont"
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-            highlight-current-row=true
+            highlight-current-row="true"
           >
-            <el-table-column
-              label="序号"
-              width="200"
-              prop="no">
-            </el-table-column>
-            <el-table-column
-              label="道路资产名称"
-              prop="name">
-            </el-table-column>
-            <el-table-column
-              label="资产数量"
-              prop="number">
-            </el-table-column>
+            <el-table-column label="序号" width="200" prop="no"></el-table-column>
+            <el-table-column label="道路资产名称" prop="name"></el-table-column>
+            <el-table-column label="资产数量" prop="number"></el-table-column>
 
             <el-table-column fixed="right" label="明细" width="200">
-
               <template slot-scope="scope">
                 <el-button
                   v-if="scope.row.no != ''"
                   size="mini"
-                  @click="linkDetail(scope.$index, scope.row)">查看</el-button>
+                  @click="linkDetail(scope.$index, scope.row)"
+                >查看</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -47,96 +37,83 @@
               :page-size="pagesize"        
               layout="total, sizes, prev, pager, next, jumper"
               :total="tableData.length">  
-        </el-pagination> -->
+          </el-pagination>-->
         </div>
 
         <!-- 任务统计 -->
         <!-- <div class="task-echarts">
         <h3>任务统计</h3>
         <div class="echarts-box" id="echarts-box"></div>
-      </div> -->
+        </div>-->
       </el-row>
     </div>
   </div>
 </template>
-<style lang="less" scope>
-.overview{
-  .box{
-    .overview-line{
-      height: 30px;
-    }
-    .overview-table{}
-  }
-}
-</style>
+
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import echarts from 'echarts';
-import moment from 'moment';
-import { address } from '../config';
+import axios from "axios";
+import { Message } from "element-ui";
+import echarts from "echarts";
+import moment from "moment";
+import { address } from "../config";
 
 export default {
-  name: 'overview',
+  name: "overview",
   data() {
     return {
-      tableData: [
-        
-      ],
+      tableData: [],
       typeData: [
-        {value: 0, label: '全部'},
-        {value: 1, label: '小客车'},
-        {value: 2, label: '大客车'},
-        {value: 3, label: '货车'},
+        { value: 0, label: "全部" },
+        { value: 1, label: "小客车" },
+        { value: 2, label: "大客车" },
+        { value: 3, label: "货车" },
       ],
       statusData: [
-        {value: true, label: '启用'},
-        {value: false, label: '未启用'},
+        { value: true, label: "启用" },
+        { value: false, label: "未启用" },
       ],
       filters: {
-        equipmentNo: '',
-        plateNo: '',
-        channel: '',
-        channelName: '',
+        equipmentNo: "",
+        plateNo: "",
+        channel: "",
+        channelName: "",
         dateTime: [],
         type: 0,
         status: true,
       },
       totalnum: 0,
       showCol: false,
-      currentPage:1, //初始页
-      pagesize:10, //每页的数据
+      currentPage: 1, //初始页
+      pagesize: 10, //每页的数据
       equips: [],
       plateNos: [],
       channels: [],
       channelNames: [],
-      currentdate: '',
+      currentdate: "",
       no: 0,
       tableId: 0,
     };
   },
-  mounted() {
-    
-  },
+  mounted() {},
   created() {
     // this.getCurrentDate();
     this.getAllCapitals();
   },
   methods: {
-    setUpFont({row,column,rowIndex,columnIndex}){
-      if(row.no == '') {
-        return 'font-weight: 700';
-      }else {
-        return '';
+    setUpFont({ row, column, rowIndex, columnIndex }) {
+      if (row.no == "") {
+        return "font-weight: 700";
+      } else {
+        return "";
       }
     },
     linkDetail(index, row) {
       this.$router.push({
-        name:"detail", 
-        params:{
-          capitalName:row.name
-        }
-      })
+        name: "detail",
+        params: {
+          capitalName: row.name,
+        },
+      });
     },
     getCurrentDate() {
       var date = new Date();
@@ -155,7 +132,9 @@ export default {
     },
     queryEquipSearchAsync(queryString, cb) {
       var restaurants = this.equips;
-      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      var results = queryString
+        ? restaurants.filter(this.createStateFilter(queryString))
+        : restaurants;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -164,7 +143,9 @@ export default {
     },
     queryPlateSearchAsync(queryString, cb) {
       var restaurants = this.plateNos;
-      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      var results = queryString
+        ? restaurants.filter(this.createStateFilter(queryString))
+        : restaurants;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -173,7 +154,9 @@ export default {
     },
     queryChannelSearchAsync(queryString, cb) {
       var restaurants = this.channels;
-      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+      var results = queryString
+        ? restaurants.filter(this.createStateFilter(queryString))
+        : restaurants;
 
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
@@ -182,21 +165,23 @@ export default {
     },
     createStateFilter(queryString) {
       return (state) => {
-        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
+        return (
+          state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+        );
       };
     },
-    handleEquipSelect(item){
-      if(item && item.value){
+    handleEquipSelect(item) {
+      if (item && item.value) {
         this.filters.equipmentNo = item.value;
       }
     },
-    handlePlateSelect(item){
-      if(item && item.value){
+    handlePlateSelect(item) {
+      if (item && item.value) {
         this.filters.plateNo = item.value;
       }
     },
-    handleChannelSelect(item){
-      if(item && item.channelId){
+    handleChannelSelect(item) {
+      if (item && item.channelId) {
         this.filters.channel = item.channelId;
         this.filters.channelName = item.value;
       }
@@ -204,17 +189,16 @@ export default {
     // 初始页currentPage、初始每页数据数pagesize和数据data
     handleSizeChange: function (size) {
       this.pagesize = size;
-      console.log(this.pagesize)  //每页下拉显示数据
+      console.log(this.pagesize); //每页下拉显示数据
     },
-    handleCurrentChange: function(currentPage){
+    handleCurrentChange: function (currentPage) {
       this.currentPage = currentPage;
-      console.log(this.currentPage)  //点击第几页
+      console.log(this.currentPage); //点击第几页
     },
     getAllCapitals() {
-      
-      axios.post(address + `getAllCapitals`, {
-        
-      }).then((response) => {
+      axios
+        .post(address + `getAllCapitals`, {})
+        .then((response) => {
           if (response.data.code === 200) {
             this.tableData = [];
             this.no = 0;
@@ -228,95 +212,130 @@ export default {
               let relationMap = new Map();
               capitals.forEach((val) => {
                 //资产类型数量统计
-              if(val.capitalType){
-                if(capitalTypeMap.has(val.capitalType.trim())){
-                  capitalTypeMap.set(val.capitalType.trim(), capitalTypeMap.get(val.capitalType.trim()) + 1);
-                }else{
+                if (val.capitalType) {
+                  if (capitalTypeMap.has(val.capitalType.trim())) {
+                    capitalTypeMap.set(
+                      val.capitalType.trim(),
+                      capitalTypeMap.get(val.capitalType.trim()) + 1
+                    );
+                  } else {
                     capitalTypeMap.set(val.capitalType.trim(), 1);
                   }
                 }
-              if(val.capitalName){
+                if (val.capitalName) {
                   //资产名称数量统计
-                if(capitalNameMap.has(val.capitalName)){
-                  capitalNameMap.set(val.capitalName, capitalNameMap.get(val.capitalName) + 1);
-                }else{
+                  if (capitalNameMap.has(val.capitalName)) {
+                    capitalNameMap.set(
+                      val.capitalName,
+                      capitalNameMap.get(val.capitalName) + 1
+                    );
+                  } else {
                     capitalNameMap.set(val.capitalName, 1);
                   }
                 }
                 //类型和名称关联关系
-              if(relationMap.has(val.capitalType)){
+                if (relationMap.has(val.capitalType)) {
                   let nameSet = relationMap.get(val.capitalType);
-                if(val.capitalName){
+                  if (val.capitalName) {
                     nameSet.add(val.capitalName);
                   }
                   relationMap.set(val.capitalType, nameSet);
                 } else {
                   let nameSet = new Set();
-                if(val.capitalName){
+                  if (val.capitalName) {
                     nameSet.add(val.capitalName);
                   }
                   relationMap.set(val.capitalType, nameSet);
                 }
-              
               });
-            for(let [key,value] of capitalTypeMap){
-                let tableItem = {id: ++this.tableId, no: '', name: key, number: value, children: []};
+              for (let [key, value] of capitalTypeMap) {
+                let tableItem = {
+                  id: ++this.tableId,
+                  no: "",
+                  name: key,
+                  number: value,
+                  children: [],
+                };
                 let nameSet = relationMap.get(key);
-                if(nameSet){
+                if (nameSet) {
                   nameSet.forEach((cpname) => {
-                    tableItem.children.push({id: ++this.tableId, no: ++this.no, name: cpname, number: capitalNameMap.get(cpname)});
-                  })
+                    tableItem.children.push({
+                      id: ++this.tableId,
+                      no: ++this.no,
+                      name: cpname,
+                      number: capitalNameMap.get(cpname),
+                    });
+                  });
                 }
                 this.tableData.push(tableItem);
               }
               console.log(this.tableData);
             }
           } else {
-          
           }
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    isInArray(arr,value){
-	    for(var i = 0; i < arr.length; i++){
-	        if(value === arr[i]){
+    isInArray(arr, value) {
+      for (var i = 0; i < arr.length; i++) {
+        if (value === arr[i]) {
           return true;
         }
       }
       return false;
     },
     queryEquipment() {
-      if(this.filters.channelName){
-        if(this.channelNames.length > 0 && this.isInArray(this.channelNames,this.filters.channelName)){
+      if (this.filters.channelName) {
+        if (
+          this.channelNames.length > 0 &&
+          this.isInArray(this.channelNames, this.filters.channelName)
+        ) {
           this.channels.forEach((val) => {
-            if(val && val.value == this.filters.channelName){
+            if (val && val.value == this.filters.channelName) {
               this.filters.channel = val.channelId;
             }
           });
-        }else{
+        } else {
           this.filters.channel = -99;
         }
-      }else{
-        this.filters.channel = '';
+      } else {
+        this.filters.channel = "";
       }
 
-      axios.post(address + `getAllEquipments`, {
+      axios
+        .post(address + `getAllEquipments`, {
           code: this.filters.equipmentNo,
           channelId: this.filters.channel,
           plateNo: this.filters.plateNo,
           type: this.filters.type,
           status: this.filters.status,
-        startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
-        endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null
-      }).then((response) => {
+          startTime:
+            this.filters.dateTime && this.filters.dateTime.length > 0
+              ? this.filters.dateTime[0]
+              : null,
+          endTime:
+            this.filters.dateTime && this.filters.dateTime.length > 1
+              ? this.filters.dateTime[1]
+              : null,
+        })
+        .then((response) => {
           if (response.data.code === 200) {
             if (response.data.data) {
               response.data.data.forEach((item) => {
-              item.status = (item.status ? '启用' : '未启用');
-              item.type = item.type == 1 ? '小客车' : (item.type == 2 ? '大客车' : (item.type == 3 ? '货车' : ''));
-              item.finalOnlineTime = item.finalOnlineTime ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD") : '';
+                item.status = item.status ? "启用" : "未启用";
+                item.type =
+                  item.type == 1
+                    ? "小客车"
+                    : item.type == 2
+                    ? "大客车"
+                    : item.type == 3
+                    ? "货车"
+                    : "";
+                item.finalOnlineTime = item.finalOnlineTime
+                  ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD")
+                  : "";
               });
             }
             this.tableData = response.data.data;
@@ -333,7 +352,18 @@ export default {
           console.log(error);
         });
     },
-    
   },
 };
 </script>
+
+<style lang="less" scope>
+.overview {
+  .box {
+    .overview-line {
+      height: 30px;
+    }
+    .overview-table {
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Registered.vue

@@ -2,12 +2,19 @@
   <div class="registered">
     <div class="wrap">
       <div class="has-text-centered signin">
-        <span>已有账户？</span> <i @click="goToLogin">登录</i>
+        <span>已有账户？</span>
+        <i @click="goToLogin">登录</i>
       </div>
       <div class="formBody">
-        <h1 class="section-title" data-i18n-text="">创建用户</h1>
-    <el-form :model="ruleForm2"
-    status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+        <h1 class="section-title" data-i18n-text>创建用户</h1>
+        <el-form
+          :model="ruleForm2"
+          status-icon
+          :rules="rules2"
+          ref="ruleForm2"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
           <el-form-item label="用户名" prop="user">
             <el-input v-model="ruleForm2.user"></el-input>
           </el-form-item>
@@ -24,74 +31,73 @@
             <el-button type="primary" @click="submitForm('ruleForm2')" class="newUser">创建用户</el-button>
             <el-button @click="resetForm('ruleForm2')" class="reset">重置</el-button>
           </el-form-item>
-</el-form>
-
-</div>
-</div>
-
-</div>
+        </el-form>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import { setTimeout } from 'timers';
-import { address } from '../config';
+import axios from "axios";
+import { Message } from "element-ui";
+import { setTimeout } from "timers";
+import { address } from "../config";
 
 export default {
   data() {
     const validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入密码'));
+      if (value === "") {
+        callback(new Error("请输入密码"));
       } else {
-        if (this.ruleForm2.checkPass !== '') {
-          this.$refs.ruleForm2.validateField('checkPass');
+        if (this.ruleForm2.checkPass !== "") {
+          this.$refs.ruleForm2.validateField("checkPass");
         }
         callback();
       }
     };
     const validatePass2 = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'));
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
       } else if (value !== this.ruleForm2.pass) {
-        callback(new Error('两次输入密码不一致!'));
+        callback(new Error("两次输入密码不一致!"));
       } else {
         callback();
       }
     };
     return {
       ruleForm2: {
-        pass: '',
-        checkPass: '',
-        user: '',
-        mailAddress: '',
+        pass: "",
+        checkPass: "",
+        user: "",
+        mailAddress: "",
       },
       rules2: {
         pass: [
-          { validator: validatePass, trigger: 'blur' },
-          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+          { validator: validatePass, trigger: "blur" },
+          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
         ],
         checkPass: [
-          { validator: validatePass2, trigger: 'blur' },
-          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
-        ],
-        user: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { validator: validatePass2, trigger: "blur" },
+          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
         ],
+        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
         mailAddress: [
-          { required: true, message: '请填写电子邮箱', trigger: 'blur' },
+          { required: true, message: "请填写电子邮箱", trigger: "blur" },
         ],
       },
     };
   },
   methods: {
     sendEmail() {
-      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
-      if (this.ruleForm2.mailAddress != '' && !regEmail.test(this.ruleForm2.mailAddress)) {
+      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+      if (
+        this.ruleForm2.mailAddress != "" &&
+        !regEmail.test(this.ruleForm2.mailAddress)
+      ) {
         this.$message({
-              message: '邮箱格式不正确',
-              type: 'error'
-          })
-          this.ruleForm2.mailAddress = ''
+          message: "邮箱格式不正确",
+          type: "error",
+        });
+        this.ruleForm2.mailAddress = "";
       }
     },
     // 创建用户
@@ -99,7 +105,8 @@ export default {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           console.log(this.ruleForm2.user + this.ruleForm2.pass);
-          axios.post( address + 'register', {
+          axios
+            .post(address + "register", {
               username: this.ruleForm2.user,
               password: this.ruleForm2.pass,
               email: this.ruleForm2.mailAddress,
@@ -109,8 +116,8 @@ export default {
               if (response.data.code === 200) {
                 Message({
                   message: response.data.data,
-                  type: 'success',
-                  duration: '500',
+                  type: "success",
+                  duration: "500",
                 });
                 setTimeout(() => {
                   this.goToLogin();
@@ -118,7 +125,7 @@ export default {
               } else {
                 Message({
                   message: response.data.message,
-                  type: 'error',
+                  type: "error",
                 });
               }
               console.log(response.data);
@@ -127,7 +134,7 @@ export default {
               console.log(error);
             });
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
@@ -138,21 +145,18 @@ export default {
     },
     // 返回登录页面
     goToLogin() {
-      this.$router.push(
-        { path: '/login' },
-      );
+      this.$router.push({ path: "/login" });
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-
-.registered{
+.registered {
   height: 100vh;
-  background: url('../assets/img/regist.jpeg');
+  background: url("../assets/img/regist.jpeg");
   background-size: 100% 100%;
-  .wrap{
+  .wrap {
     width: 570px;
     position: absolute;
     left: 45%;
@@ -166,15 +170,15 @@ export default {
       font-size: 12px;
       color: #555;
       border-radius: 12px 12px 0 0;
-    i{
+      i {
         color: rgb(62, 107, 226);
         cursor: pointer;
       }
-}
-.has-text-centered {
+    }
+    .has-text-centered {
       text-align: center;
-}
-.formBody{
+    }
+    .formBody {
       .section-title {
         border-bottom: 1px solid #ccc;
         font-size: 28px;
@@ -185,18 +189,18 @@ export default {
         text-align: center;
         font-weight: normal;
         margin: 12px;
-}
+      }
       padding: 10px 40px 40px 40px;
       background: #eee;
       border-radius: 0 0 12px 12px;
-    .newUser{
+      .newUser {
         padding: 12px 30px;
         background-color: #3e6be2;
       }
-    .reset{
+      .reset {
         padding: 12px 30px;
       }
-}
+    }
   }
 }
 </style>

src/views/Result.vue

 <template>
-  <div class="result" ref="result">
+  <div class="result" ref="result" v-loading="screenLoading">
     <div class="box">
       <!-- 查询区 -->
          <el-col :span="24" class="warp-breadcrum">
@@ -156,7 +156,7 @@
       <div class="picture">
         <!-- <el-button type="primary" @click="exportImgInfo">导出</el-button> -->
         <ul>
-          <li v-for="(item,index) in imgs" :key="item" style="padding: 5px;"
+          <li v-for="(item,index) in groupImgs" :key="item" style="padding: 5px;"
               @mouseover="addActive(index)"
               @mouseout="removeActive(index)"
               @click="showPicture(index)">
@@ -181,7 +181,9 @@
         >
         <div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
           <img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
-          <div class="dash" :style="customStyle"  v-if="showRedBox"></div>
+          <div v-for="(item) in customStyleArray" :key="item">
+          <div class="dash" :style="item"  v-if="showRedBox"></div>
+          </div>
         </div>
     </el-dialog>
   </div>
@@ -295,6 +297,7 @@ import { export_json_to_excel } from '@/excel/Export2Excel';
 
 export default {
   name: 'result',
+
   data() {
     return {
       options: [{ value: 0, label: '全国' }],
@@ -314,6 +317,7 @@ export default {
         dateTime: [],
       },
       plateNoOptions: [],
+      groupImgs: [],
       allImgs: [],
       isShow: -1,
       points: [],
@@ -418,9 +422,11 @@ export default {
       positionRight: '',
       positionWidth: '',
       positionHeight: '',
-      scale: 0, // 适应比例
-      hscale: 0,
+      scale: 0, // 适应比例 1.6608996539792387
+      hscale: 0, // 1.9014084507042253
       searchLoading: false,
+      customStyleArray: [],
+      screenLoading: false,
     };
   },
   mounted() {
@@ -450,15 +456,21 @@ export default {
   methods: {
     loadBigImg() {
       //  console.log('---');
+      const newRedArray = [];
       this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
       this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
-
-      this.customStyle = {
-        top: `${this.positionRight / this.hscale}px`,
-        left: `${this.positionLeft / this.scale}px`,
-        width: `${this.positionWidth / this.scale}px`,
-        height: `${this.positionHeight / this.hscale}px`,
+      this.customStyleArray.forEach((e) => {
+        const customStyle = {
+          top: `${e.positionRight / this.hscale}px`,
+          left: `${e.positionLeft / this.scale}px`,
+          width: `${e.positionWidth / this.scale}px`,
+          height: `${e.positionHeight / this.hscale}px`,
         };
+        newRedArray.push(customStyle);
+      });
+
+      this.customStyleArray = newRedArray;
+      this.showRedBox = true;
     },
     getMapBounds(e) {
       const bounds = e.target.getBounds();
@@ -466,6 +478,7 @@ export default {
       this.carPoints = [];
       this.imgs = [];
       this.allPoints.forEach((item, index) => {
+        // eslint-disable-next-line no-undef
         const point = new BMap.Point(item.lng, item.lat);
         if (bounds.containsPoint(point)) {
           if (index <= 100) {
@@ -474,6 +487,7 @@ export default {
           }
         }
       });
+
       if (this.carPoints.length > 0) {
         this.center.lng = this.carPoints[0].lng;
         this.center.lat = this.carPoints[0].lat;
@@ -526,54 +540,84 @@ export default {
       document.getElementById(this.imgs[index].id).scrollIntoView();
       this.carPoints.forEach((val, index_) => {
         if (index_ === index) {
-          val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+          // eslint-disable-next-line no-param-reassign,global-require
+          val.url = val.status === 1 || val.status === 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
         } else {
-          val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+          // eslint-disable-next-line global-require,no-param-reassign
+          val.url = val.status === 1 || val.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
         }
       });
       this.isShow = index;
     },
+    // eslint-disable-next-line no-unused-vars
     removeclass(index) {
       this.carPoints.forEach((val) => {
-        val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+        // eslint-disable-next-line no-param-reassign,global-require
+        val.url = val.status === 1 || val.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
       });
       this.isShow = -1;
     },
     showPicture(index) {
-      this.bigImgUrl = this.imgs[index].url;
-      this.imgContent = this.imgs[index].content;
-      const vectorData = JSON.parse(this.imgs[index].vector);
+      this.customStyleArray = [];
+      this.bigImgUrl = this.groupImgs[index].url;
+      this.imgContent = this.groupImgs[index].content;
+      let vectorData = this.groupImgs[index].vector;
+
+      if (this.groupImgs[index].vector.length === 1) {
+        vectorData = JSON.parse(this.groupImgs[index].vector);
+      }
+
       if (vectorData && vectorData.location) {
         const point = vectorData.location;
-        if (point.length == 4) {
-          this.positionLeft = point[0];
-          this.positionRight = point[1];
-          this.positionWidth = point[2] - point[0];
-          this.positionHeight = point[3] - point[1];
-          this.customStyle = {
-            top: `${this.positionRight / this.hscale}px`,
-            left: `${this.positionLeft / this.scale}px`,
-            width: `${this.positionWidth / this.scale}px`,
-            height: `${this.positionHeight / this.hscale}px`,
+
+        if (point.length === 4) {
+          const style = {
+            positionLeft: point[0],
+            positionRight: point[1],
+            positionWidth: point[2] - point[0],
+            positionHeight: point[3] - point[1],
+
+          };
+
+          this.customStyleArray.push(style);
+        }
+      } else if (vectorData && vectorData.length > 0) {
+        vectorData.forEach((e) => {
+          vectorData = JSON.parse(e);
+          const point = vectorData.location;
+          if (point.length === 4) {
+            const style = {
+              positionLeft: point[0],
+              positionRight: point[1],
+              positionWidth: point[2] - point[0],
+              positionHeight: point[3] - point[1],
+
             };
+
+            this.customStyleArray.push(style);
           }
+        });
       }
-      this.showRedBox = true;
+
       this.isShowPicture = true;
+      setTimeout(() => { this.showRedBox = true; }, 300);
     },
     addActive(index) {
-      this.carPoints.forEach((val) => {
-        val.markerAnim = '';
-        val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+      this.carPoints.forEach((e) => {
+        e.markerAnim = '';
+        // eslint-disable-next-line global-require
+        e.url = e.status === 1 || e.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
       });
       this.isShow = index;
-      this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+      // eslint-disable-next-line global-require
+      this.carPoints[index].url = this.carPoints[index].status === 1 || this.carPoints[index].status === 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
       this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
     },
     removeActive(index) {
       this.isShow = -1;
       this.carPoints[index].markerAnim = '';
-      this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+      // eslint-disable-next-line global-require
+      this.carPoints[index].url = this.carPoints[index].status === 1 || this.carPoints[index].status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
     },
     handler({ BMap, map }) {
       console.log(BMap, map);
@@ -612,13 +656,13 @@ export default {
     },
     queryTravel() {
       sessionStorage.setItem('searchVal', JSON.stringify(this.filters));
-      if (this.filters.dateTime.length == 0) {
+      if (this.filters.dateTime.length === 0) {
         this.filters.dateTime = [`${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 00:00:00`, `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 23:59:59`];
       }
       let equipmentCode = '';
       if (this.filters.plateNo && this.filters.plateNo.length > 0) {
         this.filters.plateNo.forEach((item) => {
-          if (equipmentCode == '') {
+          if (equipmentCode === '') {
             equipmentCode += item;
           } else {
             equipmentCode += `,${item}`;
@@ -641,21 +685,20 @@ export default {
             this.allImgs = [];
             this.no = 0;
 
+            // eslint-disable-next-line no-var,no-restricted-syntax,vars-on-top
             for (var key in response.data.data) {
               if (response.data.data[key]) {
                 const gisArr = response.data.data[key];
                 gisArr.forEach((val) => {
                   if (val) {
                     // 计算轨迹长度
-                    const points = [];
-                    const startPoints = [];
-                    const endPoints = [];
                     let totalDistance = 0;
                     val.forEach((item, index) => {
                       if (item.longitude && item.latitude) {
                         if (item.images) {
                           // 资产及对应图片信息
                           item.images.forEach((info) => {
+                            // eslint-disable-next-line no-plusplus
                             this.no = ++this.no;
                             if (info.longitude && info.latitude) {
                               const result = gcoord.transform(
@@ -664,15 +707,18 @@ export default {
                                 gcoord.BD09,
                               );
                               this.capitalOptions.forEach((capital) => {
-                                if (capital.value == info.type2) {
+                                if (capital.value === info.type2) {
+                                  // eslint-disable-next-line no-param-reassign
                                   info.type2 = capital.label;
                                 }
                               });
                               this.allPoints.push({
-                                lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 || info.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: [`资产类型:${info.type2}`, `资产状态:${info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')}`, `位置:${info.position}`],
+                                // eslint-disable-next-line global-require,no-nested-ternary
+                                lng: result[0], lat: result[1], markerAnim: '', url: info.status === 1 || info.status === 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: [`资产类型:${info.type2}`, `资产状态:${info.status === 1 ? '正常' : (info.status === 2 ? '异常' : '新增')}`, `位置:${info.position}`],
                               });
                               this.allImgs.push({
-                                url: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`, content: `${info.info} | ${info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')} | ${info.position}`, number: this.no, id: `imageCard${this.no}`, vector: info.vector,
+                                // eslint-disable-next-line no-nested-ternary
+                                url: `${imgAddress}getCapitalImg?imgPath=${info.imagePath}`, content: `${info.info} | ${info.status === 1 ? '正常' : (info.status == 2 ? '异常' : '新增')} | ${info.position}`, number: this.no, id: `imageCard${this.no}`, vector: info.vector,
                               });
                             }
                           });
@@ -689,6 +735,7 @@ export default {
                               gcoord.WGS84,
                               gcoord.BD09,
                             );
+                            // eslint-disable-next-line eqeqeq
                             if (val[index + 1].linkId == val[index].linkId) {
                               totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
                             } else {
@@ -722,6 +769,35 @@ export default {
                 this.imgs.push(this.allImgs[index]);
               }
             });
+
+
+            this.$_.forEach(this.imgs, (o) => {
+              o.name = o.content.split('|').length > 0 ? o.content.split('|')[0] : '';
+              o.type = o.content.split('|').length > 1 ? o.content.split('|')[1] : '';
+            });
+
+            console.log(`lllllllllllllllllold${JSON.stringify(this.imgs)}`);
+            const imgsNew = this.imgs.map((item, index, arr) => {
+              /* const i =  this.$_.findIndex(users, function(o) { return o.user == 'barney'; }); */
+              const i = arr.find(_item => item.type === _item.type && item.url === _item.url);
+              if (i !== item) {
+                if (item.name) {
+                  i.content = `${item.name}  ${i.content}`;
+                }
+                i.vector.push(item.vector);
+                return undefined;
+              }
+              i.vector = [i.vector];
+              return i;
+            }).filter(item => item !== undefined);
+
+            imgsNew.forEach((e, index) => {
+              e.number = index + 1;
+            });
+            this.groupImgs = imgsNew;
+
+            console.log(`lllllllllllllllllnew${JSON.stringify(this.groupImgs)}`);
+
             if (this.carPoints && this.carPoints.length > 0) {
               // this.center.lng = '117.05089715211';
               // this.center.lat = '32.50339615603';
@@ -764,6 +840,7 @@ export default {
       return d * Math.PI / 180.0;
     },
     linkDetail(index, row) {
+      // eslint-disable-next-line no-unused-vars
       const startEndTime = row.startTime;
       console.log(row.startTime);
       console.log(row.endTime);
@@ -807,6 +884,7 @@ export default {
                 );
                 this.no = ++this.no;
                 this.allPoints.push({
+                  // eslint-disable-next-line global-require
                   lng: result[0], lat: result[1], markerAnim: '', url: require('../assets/img/map-marker_orange.png'), content: this.no, title: '', titleList: [`资产类型:${val.capitalType}`, `资产名称:${val.capitalName}`, '资产状态:正常', `位置:${val.position}`],
                 });
                 this.allImgs.push({
@@ -878,6 +956,7 @@ export default {
       console.log(this.form.registration);
       let level = '';
       this.form.registration.forEach((item, index) => {
+        // eslint-disable-next-line eqeqeq
         if (index == 0) {
           level += item;
         } else {
@@ -914,6 +993,7 @@ export default {
     },
     changeevent(value) {
       this.options.forEach((item) => {
+        // eslint-disable-next-line eqeqeq
         if (value == item.value) {
           this.center = item.label;
         }

src/views/ResultDetail.vue

@@ -127,7 +127,7 @@
       </template>
     </el-table-column>
   </el-table>
-  <el-pagination
+<!--  <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
@@ -135,7 +135,20 @@
         :page-size="pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tableData.length">
-  </el-pagination>
+  </el-pagination>-->
+
+        <!--   分页  修改   -->
+        <el-pagination
+          :current-page="pageOption.pageIndex"
+          :page-sizes="[5, 10, 20, 40]"
+          :page-size="pageOption.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageOption.totalCount"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+
+
       </div>
 
       <!-- 任务统计 -->
@@ -213,6 +226,12 @@ export default {
   directives: { elDragDialog },
   data() {
     return {
+      pageOption: {
+        pageIndex: 1,
+        pageSize: 20,
+        totalCount: 0,
+      },
+
       tableData: [
 
       ],
@@ -221,9 +240,6 @@ export default {
         status: null,
         dateTime: [],
       },
-
-      currentPage: 1, // 初始页
-      pagesize: 10, // 每页的数据
       loading: false,
       isShowCol: false,
       isShowPicture: false,

src/views/Task.vue

@@ -18,15 +18,15 @@
                   v-for="item in plateNoOptions"
                   :key="item.code"
                   :label="item.plateNo"
-                  :value="item.channelCode + '_' + item.code">
-                </el-option>
+                  :value="item.channelCode + '_' + item.code"
+                ></el-option>
               </el-select>
               <!-- <el-autocomplete
                     v-model="filters.channelName"
                     :fetch-suggestions="queryChannelSearchAsync"
                     placeholder="渠道"
                     @select="handleChannelSelect"
-              ></el-autocomplete> -->
+              ></el-autocomplete>-->
             </el-form-item>
             <el-form-item>
               <el-date-picker
@@ -39,8 +39,8 @@
                 end-placeholder="结束时间"
                 :default-time="['00:00:00', '23:59:59']"
                 value-format="yyyy-MM-dd HH:mm:ss"
-                :picker-options="pickerOptions">
-              </el-date-picker>
+                :picker-options="pickerOptions"
+              ></el-date-picker>
             </el-form-item>
             <!-- <el-form-item>
                   <el-select v-model="filters.type" placeholder="车辆类型">
@@ -51,10 +51,9 @@
                   <el-select v-model="filters.status" placeholder="启用状态">
                     <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
-            </el-form-item> -->
+            </el-form-item>-->
             <el-form-item>
-              <el-button type="primary" v-loading="searchLoading" @click="queryTravel">搜索
-              </el-button>
+              <el-button type="primary" v-loading="searchLoading" @click="queryTravel">搜索</el-button>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="exportTravel">导出轨迹</el-button>
@@ -67,66 +66,26 @@
         <el-table
           :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
           style="width: calc(100vw - 240px);overflow:hidden;"
-          border=true
-          highlight-current-row=true
+          border
+          highlight-current-row
         >
-          <el-table-column
-            label="序号"
-            width="50"
-            prop="no">
-          </el-table-column>
-          <el-table-column
-            label="车牌号"
-            width="140"
-            prop="plateNo">
-          </el-table-column>
-          <el-table-column
-            label="开始时间"
-            prop="startTime">
-          </el-table-column>
-          <el-table-column
-            label="结束时间"
-            prop="endTime">
-          </el-table-column>
-          <el-table-column
-            label="起点"
-            prop="startPoint">
-          </el-table-column>
-          <el-table-column
-            label="终点"
-            prop="endPoint">
-          </el-table-column>
-          <el-table-column
-            label="巡检距离"
-            width="80"
-            prop="inspectDistance">
-          </el-table-column>
-          <el-table-column
-            label="巡检时长"
-            width="80"
-            prop="inspectTime">
-          </el-table-column>
-          <el-table-column
-            label="平均车速"
-            width="100"
-            prop="averageSpeed">
-          </el-table-column>
+          <el-table-column label="序号" width="50" prop="no"></el-table-column>
+          <el-table-column label="车牌号" width="140" prop="plateNo"></el-table-column>
+          <el-table-column label="开始时间" prop="startTime"></el-table-column>
+          <el-table-column label="结束时间" prop="endTime"></el-table-column>
+          <el-table-column label="起点" prop="startPoint"></el-table-column>
+          <el-table-column label="终点" prop="endPoint"></el-table-column>
+          <el-table-column label="巡检距离" width="80" prop="inspectDistance"></el-table-column>
+          <el-table-column label="巡检时长" width="80" prop="inspectTime"></el-table-column>
+          <el-table-column label="平均车速" width="100" prop="averageSpeed"></el-table-column>
           <el-table-column fixed="right" label="巡检结果" width="100">
-
             <template slot-scope="scope">
-              <el-button
-                size="mini"
-                @click="linkResult(scope.$index, scope.row)">查看
-              </el-button>
+              <el-button size="mini" @click="linkResult(scope.$index, scope.row)">查看</el-button>
             </template>
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="120">
-
             <template slot-scope="scope">
-              <el-button
-                size="mini"
-                @click="linkTrail(scope.$index, scope.row)">轨迹查看
-              </el-button>
+              <el-button size="mini" @click="linkTrail(scope.$index, scope.row)">轨迹查看</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -137,131 +96,88 @@
           :page-sizes="[5, 10, 20, 40]"
           :page-size="pagesize"
           layout="total, sizes, prev, pager, next, jumper"
-          :total="tableData.length">
-        </el-pagination>
+          :total="tableData.length"
+        ></el-pagination>
       </div>
 
       <!-- 任务统计 -->
       <div class="ov-map" id="ov-map">
-        <baidu-map class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" scroll-wheel-zoom
-                   @ready="handler">
+        <baidu-map
+          class="map"
+          :center="center"
+          :zoom="zoom"
+          @zoomend="zoomEnd"
+          scroll-wheel-zoom
+          @ready="handler"
+        >
           <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
           <div v-for="(item) in carPoints" :key="item">
-            <bm-polyline :path="item.polylinePath" stroke-color="red" :stroke-opacity="1"
-                         :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
-            </bm-polyline>
-            <bm-point-collection :points="item.points" shape="BMAP_POINT_SHAPE_CIRCLE"
-                                 color="LightBLue" size="BMAP_POINT_SIZE_NORMAL"
-                                 @mouseover="showTitle" @mouseout="hideTitle"
-                                 @click="showPicture"></bm-point-collection>
+            <bm-polyline
+              :path="item.polylinePath"
+              stroke-color="red"
+              :stroke-opacity="1"
+              :stroke-weight="5"
+              :editing="false"
+              @lineupdate="updatePolylinePath"
+            ></bm-polyline>
+            <bm-point-collection
+              :points="item.points"
+              shape="BMAP_POINT_SHAPE_CIRCLE"
+              color="LightBLue"
+              size="BMAP_POINT_SIZE_NORMAL"
+              @mouseover="showTitle"
+              @mouseout="hideTitle"
+              @click="showPicture"
+            ></bm-point-collection>
             <div v-for="(item1, index) in item.points" :key="item1">
               <div v-if="index == 0 || index == item.points.length -1">
-                <bm-marker :position="{lng: item1.lng, lat: item1.lat}"
+                <bm-marker
+                  :position="{lng: item1.lng, lat: item1.lat}"
                   :offset="{width: 0, height: -24}"
-                           :icon="{url: item1.url, size: {width: 48, height: 48}}">
-                </bm-marker>
+                  :icon="{url: item1.url, size: {width: 48, height: 48}}"
+                ></bm-marker>
               </div>
             </div>
           </div>
           <bm-info-window :position="infoPosition" :show="infoWindow.show" :closeOnClick="false">
             <p v-html="infoWindow.contents"></p>
           </bm-info-window>
-          <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
-                        @changeBefore="changeBefore"></bm-city-list>
+          <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
         </baidu-map>
-
       </div>
     </div>
-    <el-dialog
-      :visible.sync="isShowPicture"
-      width="800px"
-    >
-      <img :src="bigImgUrl" width="100%">
+    <el-dialog :visible.sync="isShowPicture" width="960px">
+      <img :src="bigImgUrl" width="100%" />
     </el-dialog>
   </div>
-
 </template>
-<style lang="less" scope>
-  .BMap_Marker {
-    z-index: 10 !important;
-  }
-
-  .task {
-    height: 100%;
-    width: 100%;
-
-    .box {
-      height: 100%;
-      width: 100%;
-      float: left;
-
-      .el-pagination {
-        padding: 15px
-      }
-
-      .ov-map {
-        width: 100%;
-        height: 100%;
-        background: #888;
-
-        .map {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-
-    .picture {
-      height: 100%;
-      width: 30%;
-      float: left;
-
-      ul {
-        width: 100%;
-        height: 700px;
-        overflow-y: scroll;
-        margin: 0 auto;
-        margin-left: 10%;
-
-        li {
-          width: 80%;
-          height: auto;
-          float: left;
-          text-align: center;
-
-          img {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
 
-</style>
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import gcoord from 'gcoord';
-import moment from 'moment';
-import { address } from '../config';
-import { export_json_to_excel } from '@/excel/Export2Excel';
+import axios from "axios";
+import gcoord from "gcoord";
+import moment from "moment";
+import { Message } from "element-ui";
+import { address } from "../config";
+import { export_json_to_excel } from "@/excel/Export2Excel";
 
 export default {
-  name: 'task',
+  name: "task",
   data() {
     return {
       tableData: [],
       infoWindow: {
         show: false,
-        contents: '',
-      },
-      currentPage: 1, // 初始页
-      pagesize: 10, // 每页的数据
-      options: [{
-        value: 'beijing',
-        label: '北京',
-      }],
-      value: 'beijing',
+        contents: "",
+      },
+      currentPage: 1, //初始页
+      pagesize: 10, //每页的数据
+      options: [
+        {
+          value: "beijing",
+          label: "北京",
+        },
+      ],
+      value: "beijing",
       center: { lng: 116.30249408783744, lat: 39.23017874638128 },
       infoPosition: { lng: 0, lat: 0 },
       infoShow: false,
@@ -276,14 +192,14 @@ export default {
       dialogTableVisible: false,
       dataList: [],
       isShowPicture: false,
-      state: '',
+      state: "",
       timeout: null,
-      bigImgUrl: '',
+      bigImgUrl: "",
       filters: {
-        equipmentNo: '',
-        plateNo: '',
-        channel: '',
-        channelName: '',
+        equipmentNo: "",
+        plateNo: "",
+        channel: "",
+        channelName: "",
         dateTime: [],
         type: 0,
         status: true,
@@ -293,38 +209,40 @@ export default {
       plateNoOptions: [],
       infos: [],
       pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
+        shortcuts: [
+          {
+            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]);
             },
-        }],
           },
-      searchLoading: false,
-    };
+        ],
       },
-  mounted() {
-
+      searchLoading:false
+    };
   },
+  mounted() {},
   created() {
     this.queryAllEquipment();
     this.queryTravel();
@@ -335,7 +253,14 @@ export default {
       this.infoPosition.lat = e.point.lat;
       this.infos.forEach((item) => {
         if (item.lng == e.point.lng && item.lat == e.point.lat) {
-          this.infoWindow.contents = `${item.plateNo} <br/>日期:${item.date}<br/>时间:${item.time}<br/>位置:${item.position}`;
+          this.infoWindow.contents =
+            item.plateNo +
+            " <br/>日期:" +
+            item.date +
+            "<br/>时间:" +
+            item.time +
+            "<br/>位置:" +
+            item.position;
         }
       });
       this.infoWindow.show = true;
@@ -347,44 +272,78 @@ export default {
       this.infos.forEach((item) => {
         if (item.lng == e.point.lng && item.lat == e.point.lat) {
           // 根据坐标信息获取图片
-          this.bigImgUrl = `${address}getTrajectImg?channel=${item.channel}&equipment=${item.plateNo}&createTime=${item.date} ${item.time}`;// this.getTrajectImg(item.channel, item.plateNo, item.date + ' ' + item.time);
+          this.bigImgUrl =
+            address +
+            "getTrajectImg?channel=" +
+            item.channel +
+            "&equipment=" +
+            item.plateNo +
+            "&createTime=" +
+            item.date +
+            " " +
+            item.time;
+          //this.getTrajectImg(item.channel, item.plateNo, item.date + ' ' + item.time);
+          console.log(item.date);
+          console.log(item.time);
         }
       });
       // this.bigImgUrl = require('../assets/img/17615.jpg');
       this.isShowPicture = true;
     },
     getTrajectImg(channel, plateNo, createTime) {
-      axios.post(`${address}getTrajectImg`, {
-        channel,
+      axios
+        .post(address + `getTrajectImg`, {
+          channel: channel,
           equipment: plateNo,
-        createTime,
-      }).then((response) => {
-
+          createTime: createTime,
         })
+        .then((response) => {})
         .catch((error) => {
           console.log(error);
         });
     },
     exportTravel() {
       this.tableData.forEach((item) => {
-        item.no = `${item.no}`;
+        item.no = item.no + "";
       });
       require.ensure([], () => {
-        // tHeader为存放excel表头标题的数组
-        const tHeader = ['序号', '车牌号', '开始时间', '结束时间', '起点', '终点', '巡检距离', '巡检时长', '平均车速'];
-        // filterVal为tHeader标题对应的键值
-        const filterVal = ['no', 'plateNo', 'startTime', 'endTime', 'startPoint', 'endPoint', 'inspectDistance', 'inspectTime', 'averageSpeed'];
-        // list为要转化为excel文件的数据，是一个数组
+        //tHeader为存放excel表头标题的数组
+        const tHeader = [
+          "序号",
+          "车牌号",
+          "开始时间",
+          "结束时间",
+          "起点",
+          "终点",
+          "巡检距离",
+          "巡检时长",
+          "平均车速",
+        ];
+        //filterVal为tHeader标题对应的键值
+        const filterVal = [
+          "no",
+          "plateNo",
+          "startTime",
+          "endTime",
+          "startPoint",
+          "endPoint",
+          "inspectDistance",
+          "inspectTime",
+          "averageSpeed",
+        ];
+        //list为要转化为excel文件的数据，是一个数组
         const list = this.tableData;
-        // 用map方法处理list数据
-        const data = list.map(v => filterVal.map(j => v[j]));
-        // 自定义excel文件名
-        const fileName = '巡检任务';
+        //用map方法处理list数据
+        const data = list.map((v) => filterVal.map((j) => v[j]));
+        //自定义excel文件名
+        const fileName = "巡检任务";
         export_json_to_excel(tHeader, data, fileName);
       });
     },
     queryAllEquipment() {
-      axios.post(`${address}queryAllEquipment`, {}).then((response) => {
+      axios
+        .post(address + `queryAllEquipment`, {})
+        .then((response) => {
           if (response.data.code === 200) {
             if (response.data.data) {
               this.plateNoOptions = [];
@@ -406,26 +365,36 @@ export default {
     },
     queryTravel() {
       if (this.filters.dateTime.length == 0) {
-        this.filters.dateTime[0] = `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 00:00:00`;
-        this.filters.dateTime[1] = `${moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format('YYYY-MM-DD')} 23:59:59`;
-      }
-      let equipmentCode = '';
+        this.filters.dateTime[0] =
+          moment(
+            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
+          ).format("YYYY-MM-DD") + " 00:00:00";
+        this.filters.dateTime[1] =
+          moment(
+            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
+          ).format("YYYY-MM-DD") + " 23:59:59";
+      }
+      let equipmentCode = "";
       if (this.filters.plateNo && this.filters.plateNo.length > 0) {
         this.filters.plateNo.forEach((item) => {
-          if (equipmentCode == '') {
+          if (equipmentCode == "") {
             equipmentCode += item;
           } else {
-            equipmentCode += `,${item}`;
+            equipmentCode += "," + item;
           }
         });
       }
+
       this.searchLoading = true;
-      axios.post(`${address}getTravel`, {
+      var that = this;
+      axios
+        .post(address + `getTravel`, {
           startTime: this.filters.dateTime[0],
           endTime: this.filters.dateTime[1],
           equipment: equipmentCode,
-      }).then((response) => {
-        this.searchLoading = false;
+        })
+        .then((response) => {
+          that.searchLoading = false;
           if (response.data.code === 200) {
             if (response.data.data) {
               this.tableData = [];
@@ -435,15 +404,15 @@ export default {
               this.no = 0;
               for (var key in response.data.data) {
                 if (response.data.data[key]) {
-                const gisArr = response.data.data[key];
+                  let gisArr = response.data.data[key];
                   gisArr.forEach((val) => {
                     if (val) {
-                    // 计算轨迹长度
-                    const poly = [];
-                    const points = [];
-                    const linkMap = new Map();
-                    const startPoints = [];
-                    const endPoints = [];
+                      //计算轨迹长度
+                      let poly = [];
+                      let points = [];
+                      let linkMap = new Map();
+                      let startPoints = [];
+                      let endPoints = [];
                       let distance = 0;
                       let totalDistance = 0;
                       val.forEach((item, index) => {
@@ -451,17 +420,19 @@ export default {
                           const result = gcoord.transform(
                             [item.longitude, item.latitude],
                             gcoord.WGS84,
-                          gcoord.BD09,
+                            gcoord.BD09
                           );
 
-                        const dateTime = moment(item.timestamp).format('YYYY-MM-DD hh:mm:ss');
+                          let dateTime = moment(item.timestamp).format(
+                            "YYYY-MM-DD hh:mm:ss"
+                          );
                           this.infos.push({
                             lng: result[0],
                             lat: result[1],
-                          channel: key.split('_')[0],
-                          plateNo: key.split('_')[1],
-                          date: dateTime.split(' ')[0],
-                          time: dateTime.split(' ')[1],
+                            channel: key.split("_")[0],
+                            plateNo: key.split("_")[1],
+                            date: dateTime.split(" ")[0],
+                            time: dateTime.split(" ")[1],
                             position: item.position,
                           });
                           poly.push({ lng: result[0], lat: result[1] });
@@ -471,123 +442,94 @@ export default {
                             points.push({ lng: result[0], lat: result[1] });
                           }
                           if (index < val.length - 1) {
-                          if (val[index + 1].longitude && val[index + 1].latitude) {
+                            if (
+                              val[index + 1].longitude &&
+                              val[index + 1].latitude
+                            ) {
                               const result1 = gcoord.transform(
-                              [val[index + 1].longitude, val[index + 1].latitude],
+                                [
+                                  val[index + 1].longitude,
+                                  val[index + 1].latitude,
+                                ],
                                 gcoord.WGS84,
-                              gcoord.BD09,
+                                gcoord.BD09
                               );
                               if (val[index + 1].linkId == val[index].linkId) {
-                              distance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
-                              totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
+                                distance += Math.abs(
+                                  val[index + 1].roadEndDis -
+                                    val[index].roadEndDis
+                                );
+                                totalDistance += Math.abs(
+                                  val[index + 1].roadEndDis -
+                                    val[index].roadEndDis
+                                );
                               } else {
-                              distance += Math.abs(this.getDistance(result1[0], result1[1], result[0], result[1]));
-                              totalDistance += Math.abs(this.getDistance(result1[0], result1[1], result[0], result[1]));
+                                distance += Math.abs(
+                                  this.getDistance(
+                                    result1[0],
+                                    result1[1],
+                                    result[0],
+                                    result[1]
+                                  )
+                                );
+                                totalDistance += Math.abs(
+                                  this.getDistance(
+                                    result1[0],
+                                    result1[1],
+                                    result[0],
+                                    result[1]
+                                  )
+                                );
                               }
                               if (distance >= 500) {
-                              points.push({ lng: result1[0], lat: result1[1] });
+                                points.push({
+                                  lng: result1[0],
+                                  lat: result1[1],
+                                });
                                 distance = 0;
                               }
                             }
                           }
-
-                        // if(linkMap.has(item.linkId)){
-                        //   linkMap.get(item.linkId).push(item);
-                        // }else{
-                        //   let distances = [];
-                        //   distances.push(item);
-                        //   linkMap.set(item.linkId, distances);
-                        // }
                         }
                       });
-                    // let distance = 0;
-                    // let nullLinkTrails = [];
-                    // for(let [key,value] of linkMap){
-                    //   if(key){
-                    //     value.sort(this.sortNum);
-                    //     let dist = value[value.length - 1].roadEndDis - value[0].roadEndDis;
-                    //     distance += dist;
-                    //     let startNum = value[0].roadEndDis;
-
-                    //     value.forEach((tral, index) => {
-                    //       const tralResult = gcoord.transform(
-                    //         [tral.longitude, tral.latitude],
-                    //         gcoord.WGS84,
-                    //         gcoord.BD09,
-                    //       );
-
-                    //       if(tral.linkId && startNum){
-                    //         let reduce = tral.roadEndDis - startNum;
-                    //         if(reduce > 500) {
-                    //           startNum = tral.roadEndDis;
-                    //           let pointTime = moment(tral.timestamp).format("YYYY-MM-DD hh:mm:ss");
-                    //           points.push({lng: tralResult[0], lat: tralResult[1]});
-                    //         }
-                    //       }
-                    //     });
-                    //   }else{
-                    //     value.sort(this.sortByTime);
-                    //     for(var i = 0; i < value.length - 1; i++){
-                    //       const tralResult = gcoord.transform(
-                    //         [value[i].longitude, value[i].latitude],
-                    //         gcoord.WGS84,
-                    //         gcoord.BD09,
-                    //       );
-                    //       const tralResult1 = gcoord.transform(
-                    //         [value[i+1].longitude, value[i+1].latitude],
-                    //         gcoord.WGS84,
-                    //         gcoord.BD09,
-                    //       );
-                    //       let dis = this.getDistance(tralResult1[0],tralResult1[1],tralResult[0],tralResult[1]);
-                    //       distance += dis;
-                    //       nullLinkTrails.push(tralResult);
-                    //     }
-                    //   }
-                    // }
-                    // if(nullLinkTrails.length > 0){
-
-                    //   let startTrail = nullLinkTrails[0];
-                    //   nullLinkTrails.forEach((value) => {
-                    //     let dists = this.getDistance(value[0],value[1],startTrail[0],startTrail[1]);
-                    //     if(dists > 500){
-                    //       startTrail = value;
-                    //       points.push({lng: value[0], lat: value[1]});
-                    //     }
-                    //   });
-                    // }
-                    // 起点,终点添加到地图上
-                    // startPoints.forEach((startPoint) => {
-                    //   points.push(startPoint);
-                    // });
-                    // endPoints.forEach((endPoint) => {
-                    //   points.push(endPoint);
-                    // });
-                    // const startResult = gcoord.transform(
-                    //   [val[val.length - 1].longitude, val[val.length - 1].latitude],
-                    //   gcoord.WGS84,
-                    //   gcoord.BD09,
-                    // );
-                    // const endResult = gcoord.transform(
-                    //   [val[0].longitude, val[0].latitude],
-                    //   gcoord.WGS84,
-                    //   gcoord.BD09,
-                    // );
                       this.tableData.push({
                         no: ++this.no,
-                      plateNo: key.split('_')[1],
-                      startTime: moment(val[val.length - 1].timestamp).format('YYYY-MM-DD hh:mm:ss'),
-                      endTime: moment(val[0].timestamp).format('YYYY-MM-DD hh:mm:ss'),
+                        plateNo: key.split("_")[1],
+                        startTime: moment(val[val.length - 1].timestamp).format(
+                          "YYYY-MM-DD hh:mm:ss"
+                        ),
+                        endTime: moment(val[0].timestamp).format(
+                          "YYYY-MM-DD hh:mm:ss"
+                        ),
                         startPoint: val[val.length - 1].position,
                         endPoint: val[0].position,
-                      inspectDistance: `${(totalDistance / 1000).toFixed(1)}km`,
-                      inspectTime: `${((val[0].timestamp - val[val.length - 1].timestamp) / (1000 * 3600)).toFixed(1)}h`,
-                      averageSpeed: `${((totalDistance / 1000) / ((val[0].timestamp - val[val.length - 1].timestamp) / (1000 * 3600))).toFixed(1)}km/h`,
+                        inspectDistance:
+                          (totalDistance / 1000).toFixed(1) + "km",
+                        inspectTime:
+                          (
+                            (val[0].timestamp - val[val.length - 1].timestamp) /
+                            (1000 * 3600)
+                          ).toFixed(1) + "h",
+                        averageSpeed:
+                          (
+                            totalDistance /
+                            1000 /
+                            ((val[0].timestamp -
+                              val[val.length - 1].timestamp) /
+                              (1000 * 3600))
+                          ).toFixed(1) + "km/h",
                       });
                       if (points) {
-                      points[0].url = require('../assets/img/zhongdian.png');
-                      points[points.length - 1].url = require('../assets/img/qidian.png');
-                    }
-                    this.allPoints.push({ polylinePath: poly, points });
+                        points[0].url = require("../assets/img/zhongdian.png");
+                        points[
+                          points.length - 1
+                        ].url = require("../assets/img/qidian.png");
+                      }
+                      this.allPoints.push({
+                        no:this.no,
+                        polylinePath: poly,
+                        points: points,
+                      });
                       this.carPoints = this.allPoints;
                       this.center.lng = this.carPoints[0].polylinePath[0].lng;
                       this.center.lat = this.carPoints[0].polylinePath[0].lat;
@@ -605,43 +547,51 @@ export default {
           }
         })
         .catch((error) => {
-          this.searchLoading = false;
           console.log(error);
         });
     },
     getDistance(lng1, lat1, lng2, lat2) {
-      const EARTH_RADIUS = 6378.137;
-      const radLat1 = this.rad(lat1);
-      const radLat2 = this.rad(lat2);
-      const a = radLat1 - radLat2;
-      const b = this.rad(lng1) - this.rad(lng2);
-      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
-          + Math.cos(radLat1) * Math.cos(radLat2)
-          * Math.pow(Math.sin(b / 2), 2)));
-      s *= EARTH_RADIUS;
-      // s = Math.round(s * 10000d) / 10000d;
+      let EARTH_RADIUS = 6378.137;
+      let radLat1 = this.rad(lat1);
+      let radLat2 = this.rad(lat2);
+      let a = radLat1 - radLat2;
+      let b = this.rad(lng1) - this.rad(lng2);
+      let s =
+        2 *
+        Math.asin(
+          Math.sqrt(
+            Math.pow(Math.sin(a / 2), 2) +
+              Math.cos(radLat1) *
+                Math.cos(radLat2) *
+                Math.pow(Math.sin(b / 2), 2)
+          )
+        );
+      s = s * EARTH_RADIUS;
+      //s = Math.round(s * 10000d) / 10000d;
       s = Math.round(s * 10000) / 10000;
-      s *= 1000; // 乘以1000是换算成米
+      s = s * 1000; //乘以1000是换算成米
       return s;
     },
     rad(d) {
-      return d * Math.PI / 180.0;
+      return (d * Math.PI) / 180.0;
     },
 
     sortNum(a, b) {
       return a.roadEndDis - b.roadEndDis;
     },
     sortByTime(a, b) {
-      return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
+      return (
+        new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
+      );
     },
     // 初始页currentPage、初始每页数据数pagesize和数据data
-    handleSizeChange(size) {
+    handleSizeChange: function (size) {
       this.pagesize = size;
-      console.log(this.pagesize); // 每页下拉显示数据
+      console.log(this.pagesize); //每页下拉显示数据
     },
-    handleCurrentChange(currentPage) {
+    handleCurrentChange: function (currentPage) {
       this.currentPage = currentPage;
-      console.log(this.currentPage); // 点击第几页
+      console.log(this.currentPage); //点击第几页
     },
     handler({ BMap, map }) {
       console.log(BMap, map);
@@ -649,11 +599,10 @@ export default {
     updatePolylinePath(e) {
       this.polylinePath = e.target.getPath();
     },
-    changeBefore() {
-    },
+    changeBefore() {},
     linkTrail(index, row) {
       console.log(index, row);
-      document.getElementById('ov-map').scrollIntoView();
+      document.getElementById("ov-map").scrollIntoView();
 
       // this.$nextTick(() => {
       //   let tablePar = this.$refs["box"];
@@ -661,7 +610,7 @@ export default {
       // });
 
       this.imgs = [];
-      const point = this.allPoints[index];
+      let point = this.allPoints[index];
       this.carPoints = [];
       this.carPoints.push(point);
       this.center.lng = this.carPoints[0].polylinePath[0].lng;
@@ -669,18 +618,18 @@ export default {
     },
     // 巡检结果查看
     linkResult(index, row) {
-      let equipmentCode = '';
+      let equipmentCode = "";
       if (this.filters.plateNo && this.filters.plateNo.length > 0) {
         this.filters.plateNo.forEach((item) => {
-          if (equipmentCode == '') {
+          if (equipmentCode == "") {
             equipmentCode += item;
           } else {
-            equipmentCode += `,${item}`;
+            equipmentCode += "," + item;
           }
         });
       }
       this.$router.push({
-        name: 'result',
+        name: "result",
         params: {
           startTime: this.filters.dateTime[0],
           endTime: this.filters.dateTime[1],
@@ -693,15 +642,65 @@ export default {
     },
     zoomEnd(e) {
       this.zoom = e.target.getZoom();
-      if (this.carPoints && this.carPoints.length > 0 && this.carPoints.points && this.carPoints.points.length > 0) {
+      if (
+        this.carPoints &&
+        this.carPoints.length > 0 &&
+        this.carPoints.points &&
+        this.carPoints.points.length > 0
+      ) {
         this.center.lng = this.carPoints[0].points[0].lng;
         this.center.lat = this.carPoints[0].points[0].lat;
       }
     },
-    queryPlateSearchAsync() {
-
-    },
-
+    queryPlateSearchAsync() {},
   },
 };
 </script>
+
+<style lang="less" scope>
+.BMap_Marker {
+  z-index: 10 !important;
+}
+.task {
+  height: 100%;
+  width: 100%;
+  .box {
+    height: 100%;
+    width: 100%;
+    float: left;
+    .el-pagination {
+      padding: 15px;
+    }
+    .ov-map {
+      width: 100%;
+      height: 100%;
+      background: #888;
+      .map {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .picture {
+    height: 100%;
+    width: 30%;
+    float: left;
+    ul {
+      width: 100%;
+      height: 700px;
+      overflow-y: scroll;
+      margin: 0 auto;
+      margin-left: 10%;
+      li {
+        width: 80%;
+        height: auto;
+        float: left;
+        text-align: center;
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Video.vue

@@ -6,7 +6,6 @@
         <el-col :span="24" class="warp-breadcrum">
           <!--搜索栏-->
           <el-col :span="24" class="toolbar">
-              <el-form :inline="true" :model="filters">
             <el-form :inline="true" :model="filters">
               <el-form-item>
                 <el-select
@@ -20,15 +19,15 @@
                     v-for="item in plateNoOptions"
                     :key="item.code"
                     :label="item.plateNo"
-                      :value="item.channelCode + '_' + item.code">
-                    </el-option>
+                    :value="item.channelCode + '_' + item.code"
+                  ></el-option>
                 </el-select>
                 <!-- <el-autocomplete
                     v-model="filters.channelName"
                     :fetch-suggestions="queryChannelSearchAsync"
                     placeholder="渠道"
                     @select="handleChannelSelect"
-                  ></el-autocomplete> -->
+                ></el-autocomplete>-->
               </el-form-item>
               <el-form-item>
                 <el-date-picker
@@ -41,8 +40,8 @@
                   end-placeholder="结束时间"
                   :default-time="['00:00:00', '23:59:59']"
                   value-format="yyyy-MM-dd HH:mm:ss"
-                    :picker-options="pickerOptions">
-                  </el-date-picker>
+                  :picker-options="pickerOptions"
+                ></el-date-picker>
               </el-form-item>
               <!-- <el-form-item>
                   <el-select v-model="filters.type" placeholder="车辆类型">
@@ -53,7 +52,7 @@
                   <el-select v-model="filters.status" placeholder="启用状态">
                     <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
-                </el-form-item> -->
+              </el-form-item>-->
               <el-form-item>
                 <el-button type="primary" @click="queryVideos">搜索</el-button>
               </el-form-item>
@@ -66,38 +65,18 @@
           <el-table
             :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
             style="width: 100%;"
-    border=true
-    highlight-current-row=true
+            border="true"
+            highlight-current-row="true"
           >
-    <el-table-column
-      label="序号"
-      prop="no">
-    </el-table-column>
-    <el-table-column
-      label="车牌号"
-      prop="plateNo">
-    </el-table-column>
-    <el-table-column
-      label="起始时间"
-      prop="startTime">
-    </el-table-column>
-     <el-table-column
-      label="结束时间"
-      prop="endTime">
-    </el-table-column>
-    <el-table-column
-      label="巡检时长"
-      prop="inspectTime">
-    </el-table-column>
-    <el-table-column
-      label="停车地点"
-      prop="stopPoint">
-    </el-table-column>
+            <el-table-column label="序号" prop="no"></el-table-column>
+            <el-table-column label="车牌号" prop="plateNo"></el-table-column>
+            <el-table-column label="起始时间" prop="startTime"></el-table-column>
+            <el-table-column label="结束时间" prop="endTime"></el-table-column>
+            <el-table-column label="巡检时长" prop="inspectTime"></el-table-column>
+            <el-table-column label="停车地点" prop="stopPoint"></el-table-column>
             <el-table-column fixed="right" label="视频列表" width="100">
               <template slot-scope="scope">
-        <el-button
-          size="mini"
-          @click="playVideo(scope.$index, scope.row)">播放</el-button>
+                <el-button size="mini" @click="playVideo(scope.$index, scope.row)">播放</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -108,71 +87,56 @@
             :page-sizes="[5, 10, 20, 40]"
             :page-size="pagesize"
             layout="total, sizes, prev, pager, next, jumper"
-        :total="tableData.length">  
-  </el-pagination>
+            :total="tableData.length"
+          ></el-pagination>
         </div>
 
         <!-- 任务统计 -->
         <!-- <div class="task-echarts">
         <h3>任务统计</h3>
         <div class="echarts-box" id="echarts-box"></div>
-      </div> -->
+        </div>-->
       </el-row>
     </div>
   </div>
 </template>
-<style lang="less" scope>
-.detail{
-  .box{
-    .el-pagination{
-      padding: 15px;
-    }
-  }
-}
-</style>
+
 <script>
-import axios from 'axios';
-import { Message } from 'element-ui';
-import echarts from 'echarts';
-import moment from 'moment';
-import { address } from '../config';
+import axios from "axios";
+import echarts from "echarts";
+import moment from "moment";
+import { Message } from "element-ui";
+import { address } from "../config";
 
 export default {
-  name: 'detail',
+  name: "detail",
   data() {
     return {
-      tableData: [
-        
-      ],
+      tableData: [],
       filters: {
-        plateNo: '',
+        plateNo: "",
         dateTime: [],
       },
       plateNoOptions: [],
       showCol: false,
-      currentPage:1, //初始页
-      pagesize:10, //每页的数据
+      currentPage: 1, //初始页
+      pagesize: 10, //每页的数据
       loading: false,
       no: 0,
-      capitalOptions: [
-        
-      ],
-      currentdate: '',
-      
+      capitalOptions: [],
+      currentdate: "",
     };
   },
-  mounted() {
-    
-  },
+  mounted() {},
   created() {
     this.queryAllEquipment();
     this.queryVideos();
   },
   methods: {
     queryAllEquipment() {
-      axios.post(address + `queryAllEquipment`, {
-        
-      }).then((response) => {
+      axios
+        .post(address + `queryAllEquipment`, {})
+        .then((response) => {
           if (response.data.code === 200) {
             if (response.data.data) {
               this.plateNoOptions = [];
@@ -193,29 +157,35 @@ export default {
         });
     },
     queryVideos() {
-      if(this.filters.dateTime.length == 0){
-        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
-        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
+      if (this.filters.dateTime.length == 0) {
+        this.filters.dateTime[0] =
+          moment(
+            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
+          ).format("YYYY-MM-DD") + " 00:00:00";
+        this.filters.dateTime[1] =
+          moment(
+            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
+          ).format("YYYY-MM-DD") + " 23:59:59";
       }
       let equipmentCode = "";
-      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+      if (this.filters.plateNo && this.filters.plateNo.length > 0) {
         this.filters.plateNo.forEach((item) => {
-          if(equipmentCode == ""){
+          if (equipmentCode == "") {
             equipmentCode += item;
-          }else{
+          } else {
             equipmentCode += "," + item;
           }
         });
       }
-      axios.post(address + `queryVideos`, {
+      axios
+        .post(address + `queryVideos`, {
           startTime: this.filters.dateTime[0],
           endTime: this.filters.dateTime[1],
-        equipment: equipmentCode
-      }).then((response) => {
+          equipment: equipmentCode,
+        })
+        .then((response) => {
           if (response.data.code === 200) {
             if (response.data.data) {
-            
-            
             }
           } else {
             Message({
@@ -229,9 +199,17 @@ export default {
           console.log(error);
         });
     },
-    playVideo(index, row) {
-
-    }
+    playVideo(index, row) {},
   },
 };
 </script>
+
+<style lang="less" scope>
+.detail {
+  .box {
+    .el-pagination {
+      padding: 15px;
+    }
+  }
+}
+</style>