<template> <div class="detail"> <div class="box"> <el-row class="warp"> <!-- 查询区 --> <el-col :span="24" class="warp-breadcrum"> <!--搜索栏--> <el-col :span="24" class="toolbar"> <el-form :inline="true" :model="filters"> <el-form-item> <el-select v-model="filters.capitalType" multiple collapse-tags filterable placeholder="资产类型" > <el-option v-for="item in capitalOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- <el-autocomplete v-model="filters.channelName" :fetch-suggestions="queryChannelSearchAsync" placeholder="渠道" @select="handleChannelSelect" ></el-autocomplete> --> </el-form-item> <el-form-item> <el-button type="primary" @click="getCapitalDetails">搜索</el-button> </el-form-item> </el-form> </el-col> </el-col> <!-- 任务表 --> <div class="detail-table"> <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: calc(100vw - 240px);overflow:hidden;" 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> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> </el-pagination> </div> <!-- 任务统计 --> <!-- <div class="task-echarts"> <h3>任务统计</h3> <div class="echarts-box" id="echarts-box"></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'; export default { name: 'detail', data() { return { tableData: [ ], filters: { capitalType: [] }, showCol: false, currentPage:1, //初始页 pagesize:10, //每页的数据 loading: false, no: 0, capitalOptions: [ ], currentdate: '', }; }, mounted() { }, created() { this.filters.capitalType = []; if(this.$route.params.capitalName){ this.filters.capitalType.push(this.$route.params.capitalName); } this.getCapitalDetails(); this.getAllCapitals(); }, methods: { linkPic(index, row) { this.getCurrentDate(); var photoDate = row.finalOnlineTime ? row.finalOnlineTime : this.currentdate; window.open('http://106.52.130.113:9088/'+ photoDate + '/' + row.channelCode + '/' + row.code,'_blank'); }, getCurrentDate() { 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; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = year + seperator1 + month + seperator1 + strDate; this.currentdate = currentdate; }, linkActul(index, row) { this.$router.push({ path: '/overview', query: { equipment: row.code, channel: row.channelCode, plateNo: row.plateNo, } }); }, linkMileage(index, row) { this.$router.push({ 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, } }); }, queryEquipSearchAsync(queryString, cb) { var restaurants = this.equips; var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants; clearTimeout(this.timeout); this.timeout = setTimeout(() => { cb(results); }, 3000 * Math.random()); }, queryPlateSearchAsync(queryString, cb) { var restaurants = this.plateNos; var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants; clearTimeout(this.timeout); this.timeout = setTimeout(() => { cb(results); }, 3000 * Math.random()); }, queryChannelSearchAsync(query) { if (query !== '') { this.channelLoading = true; setTimeout(() => { this.channelLoading = false; this.channelOptions = this.list.filter(item => { return item.label.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); }, 200); } else { this.channelOptions = []; } }, // queryChannelSearchAsync(queryString, cb) { // var restaurants = this.channels; // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants; // clearTimeout(this.timeout); // this.timeout = setTimeout(() => { // cb(results); // }, 3000 * Math.random()); // }, createStateFilter(queryString) { return (state) => { return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0); }; }, handleEquipSelect(item){ if(item && item.value){ this.filters.equipmentNo = item.value; } }, handlePlateSelect(item){ if(item && item.value){ this.filters.plateNo = item.value; } }, handleChannelSelect(item){ if(item && item.channelId){ this.filters.channel = item.channelId; this.filters.channelName = item.value; } }, // 初始页currentPage、初始每页数据数pagesize和数据data handleSizeChange: function (size) { this.pagesize = size; console.log(this.pagesize) //每页下拉显示数据 }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; console.log(this.currentPage) //点击第几页 }, getAllCapitals() { axios.post(`/roadlinks/getAllCapitals`, { }).then((response) => { if (response.data.code === 200) { this.capitalOptions = []; if (response.data.data) { console.log(response.data.data); let capitals = response.data.data.capitals; let nameSet = new Set(); capitals.forEach((val) => { nameSet.add(val.capitalName); }); nameSet.forEach((item) => { if(item) { this.capitalOptions.push({value: item, label: item}); } }) } } else { } }) .catch((error) => { console.log(error); }); }, getCapitalDetails() { this.currentPage = 1; let capitalName = ''; if(this.filters.capitalType){ this.filters.capitalType.forEach((val) => { if(capitalName === '') { capitalName = capitalName + val; } else { capitalName = capitalName + ',' + val; } }); } axios.post(`/roadlinks/getCapitalDetails`, { capitalName: capitalName }).then((response) => { if (response.data.code === 200) { this.tableData = []; this.no = 0; if (response.data.data) { let nameMap = new Map(); response.data.data.forEach((val) => { if(val.lng && val.lat){ //nameSet.add(val.capitalName); let num = 1; if(nameMap.has(val.capitalName)){ num = nameMap.get(val.capitalName) + 1; nameMap.set(val.capitalName, num); }else{ nameMap.set(val.capitalName, num); } this.tableData.push({no: ++this.no, name: val.capitalName + num, position: val.position}); } }); } } }) .catch((error) => { console.log(error); }); }, 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)){ this.channels.forEach((val) => { if(val && val.value == this.filters.channelName){ this.filters.channel = val.channelId; } }); }else{ this.filters.channel = -99; } }else{ this.filters.channel = ''; } axios.post(`/roadlinks/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) => { 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") : ''; }); } this.tableData = response.data.data; } else { this.tableData = []; Message({ message: response.data.message, // type: 'error', // duration: '800', }); } }) .catch((error) => { console.log(error); }); }, }, }; </script>