<template> <div class="detail"> <div class="box"> <!-- 查询区 --> <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" collapse-tags clearable 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-select v-model="filters.status" collapse-tags clearable filterable placeholder="目标状态" > <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item> <el-date-picker v-model="filters.dateTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="getImageGroups">搜索</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="exportTravel">导出</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 fit highlight-current-row=true > <el-table-column type="index" label="序号" width="50" > </el-table-column> <el-table-column label="巡检时间" prop="imageTime"> </el-table-column> <el-table-column label="巡检目标" prop="type2"> </el-table-column> <el-table-column label="目标位置" prop="position"> </el-table-column> <el-table-column label="目标状态" prop="status"> </el-table-column> <el-table-column v-if="isShowCol" label="图片路径" prop="imagePath"> </el-table-column> <el-table-column fixed="right" label="详情"> <template slot-scope="scope"> <el-button size="mini" @click="showPicture(scope.$index, scope.row)">查看</el-button> </template> </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> --> </div> <el-dialog :visible.sync="isShowPicture" :title="imgContent" custom-class="customWidth" > <div :style="'height:' + fullHeight + 'px;'"> <img :src="bigImgUrl" width="100%" style="height: 100%;"> </div> </el-dialog> </div> </template> <style lang="less" scope> .detail{ .box{ width: calc(100vw - 240px); .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 { export_json_to_excel } from '@/excel/Export2Excel' export default { name: 'detail', data() { return { tableData: [ ], filters: { capitalType: '', status: null, dateTime: [] }, currentPage:1, //初始页 pagesize:10, //每页的数据 loading: false, isShowCol: false, isShowPicture: false, imgContent: '', bigImgUrl: '', no: 0, capitalOptions: [ { label: '路面状况', value: 1 }, { label: '护栏', value: 2 }, { label: '龙门架', value: 101 }, { label: '矩形标牌', value: 201 }, { label: '圆形标牌', value: 202 }, { label: '三角标牌', value: 203 }, { label: '其它形状标牌', value: 209 }, { label: '可变信息牌(情报板)', value: 301 }, { label: 'T型杆', value: 401 }, { label: 'L型杆', value: 402 }, { label: 'I型立杆', value: 403 }, { label: '枪式摄像机', value: 801 }, { label: '相机', value: 802 }, { label: '补光灯', value: 803 }, { label: 'RSU天线', value: 804 }, { label: '测速雷达', value: 805 } ], statusOptions: [ { label: '全部', value: -1 }, { label: '正常', value: 1 }, { label: '异常', value: 2 }, { label: '新增', value: 3 } ], pickerOptions: { 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]); }, }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); }, }, { text: '最近三个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); }, }], }, currentdate: '', fullHeight: document.documentElement.clientHeight/1.5, }; }, mounted() { }, created() { let startTime = null; let endTime = null; let equipment = null if(this.$route.params.startTime){ startTime = this.$route.params.startTime; } if(this.$route.params.endTime){ endTime = this.$route.params.endTime; } if(this.$route.params.equipment){ equipment = this.$route.params.equipment; } if (startTime || endTime || equipment) { this.filters.dateTime = [moment(startTime).format("YYYY-MM-DD HH:mm:ss"), moment(endTime).format("YYYY-MM-DD HH:mm:ss")]; this.getImageGroupsByCon(startTime, endTime, equipment); } else { this.filters.status = 2; this.getImageGroups(); } }, methods: { getImageGroupsByCon(startTime, endTime, equipment) { axios.post(`/roadlinks/getImageGroupsByCon`, { startTimeMill: startTime, endTimeMill: endTime, equipment: equipment }).then((response) => { if (response.data.code === 200) { if (response.data.data) { response.data.data.forEach((val) => { val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增'); val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS"); this.capitalOptions.forEach((item) => { if(item.value == val.type2) { val.type2 = item.label; } }); }); this.tableData = response.data.data; } else { this.tableData = []; } } else { this.tableData = []; } }) .catch((error) => { console.log(error); }); }, getImageGroups() { 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'; } axios.post(`/roadlinks/getImageGroups`, { beginTime: this.filters.dateTime[0], endTime: this.filters.dateTime[1], capitalType: this.filters.capitalType, status: this.filters.status > 0 ? this.filters.status : null }).then((response) => { if (response.data.code === 200) { if (response.data.data) { response.data.data.forEach((val) => { val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增'); val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS"); this.capitalOptions.forEach((item) => { if(item.value == val.type2) { val.type2 = item.label; } }); }); this.tableData = response.data.data; } else { this.tableData = []; } } else { this.tableData = []; } }) .catch((error) => { console.log(error); }); }, 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; }, // 初始页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; }, showPicture(index, row) { this.imgContent = row.type2 + "|" + row.status + "|" + row.position; this.bigImgUrl = "/roadlinks/getCapitalImg?imgPath=" + row.imagePath; this.isShowPicture = true; if (row.status == "异常") { this.$confirm('此情况是否为异常?', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '是', cancelButtonText: '否' }) .then(() => { this.$confirm('是否已经处理改异常情况?', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '已处理', cancelButtonText: '未处理' }) .then(() => { this.tableData[index].status = "正常"; }) .catch(action => { // do nothing }); }) .catch(action => { this.tableData[index].status = "正常"; }); } }, exportTravel(){ this.tableData.forEach((item, index) => { item.no = index + 1 + ''; }) require.ensure([], () => { //tHeader为存放excel表头标题的数组 const tHeader = ["序号","巡检时间","巡检目标","目标位置","目标状态"]; //filterVal为tHeader标题对应的键值 const filterVal = ["no","imageTime","type2","position","status"]; //list为要转化为excel文件的数据,是一个数组 const list = this.tableData; //用map方法处理list数据 const data =list.map(v => filterVal.map(j => v[j])); //自定义excel文件名 const fileName="巡检结果明细"; export_json_to_excel(tHeader, data,fileName); }); } }, }; </script>