<template> <div class="gassVehicle gass-vehiche" > <drawer title="车辆信息" :inner="true" :width="drawerWidth" :mask="false"> <div class="scroll"> <el-row style="margin-bottom: 10px"> <el-col :span="14" style="margin-right: 30px"> <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable size="small" /> </el-col> <el-col :span="8"> <el-button type="primary" icon="el-icon-search" size="mini" @click="carInfoSearch()">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-col> </el-row> <el-table v-loading="loading" :data="infoList"> <el-table-column label="车牌号" align="center" prop="carNum" /> <!--<el-table-column label="品牌型号" align="center" prop="brandModel" />--> <!--<el-table-column label="车辆类型" align="center" prop="vehicleType">--> <!--<template slot-scope="scope">--> <!--<span v-if="scope.row.vehicleType == '1'">罐车</span>--> <!--<span v-if="scope.row.vehicleType == '2'">卡车</span>--> <!--</template>--> <!--</el-table-column>--> <!--<el-table-column label="车辆载重" align="center" prop="vehicleLoad" />--> <!--<el-table-column label="车辆大小" align="center" prop="vehicleSize" />--> <!--<el-table-column label="车辆限乘" align="center" prop="vehicleLimt" />--> <!--<el-table-column label="车辆检测信息" align="center" prop="vehicleInspect" />--> <el-table-column label="所属企业" align="center" prop="beyondEnterpriseName" /> <el-table-column label="责任人" align="center" prop="personLiable" /> <el-table-column label="联系电话" align="center" prop="phone" width="120"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-view" @click="getVehicleInfo(scope.row)" >车辆信息</el-button> <el-button size="mini" type="text" icon="el-icon-map-location" @click="getVehicleTravel(scope.row)" >车辆位置</el-button> </template> </el-table-column> </el-table> <!-- <el-pagination @current-change="handleCurrentChangvale" :page-size="queryParams.pageSize" layout="prev, pager, next, jumper" :total="total" :hide-on-single-page="total <= queryParams.pageSize" :key="total + '' + queryParams.pageSize" />--> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> </div> </drawer> <div id="map"></div> <!-- 查询车辆信息 --> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-form ref="form" :model="form" label-width="100px"> <el-row> <el-col :span="11"> <el-form-item label="车牌号" prop="carNum"> <el-input v-model="form.carNum" placeholder="请输入车牌号" :disabled="true"/> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="品牌型号" prop="brandModel"> <el-input v-model="form.brandModel" placeholder="请输入品牌型号" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="车辆类型" prop="vehicleType"> <el-input value="罐车" v-if="form.vehicleType == '1'" :disabled="true"/> <el-input value="卡车" v-if="form.vehicleType == '2'" :disabled="true"/> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="车辆载重" prop="vehicleLoad"> <el-input v-model="form.vehicleLoad" placeholder="请输入车辆载重" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="车辆大小" prop="vehicleSize"> <el-input v-model="form.vehicleSize" placeholder="请输入车辆大小" :disabled="true"/> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="车辆限乘" prop="vehicleLimt"> <el-input v-model="form.vehicleLimt" placeholder="请输入车辆限乘" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="车辆检测信息" prop="vehicleInspect"> <el-input v-model="form.vehicleInspect" placeholder="请输入车辆检测信息" :disabled="true"/> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="所属企业" prop="beyondEnterpriseName"> <el-input v-model="form.beyondEnterpriseName" placeholder="请输入所属企业" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="责任人" prop="personLiable"> <el-input v-model="form.personLiable" placeholder="请输入责任人" :disabled="true"/> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系电话" prop="phone"> <el-input v-model="form.phone" placeholder="请输入联系电话" :disabled="true"/> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <!-- <el-button type="primary" @click="submitForm">确 定</el-button>--> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <!--值班人员轨迹回放--> <el-dialog title="车辆轨迹回放" :visible.sync="backOpen" > <el-form :model="backForm" ref="backForm" :rules="rules" label-width="120px"> <el-row> <el-col :span="10"> <el-form-item label="车牌号" prop="carNum"> <!--<span>{{ backForm.carNum }}</span>--> <el-input v-model="backForm.carNum" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col> <el-form-item label="请选择时间段" prop="changeTime"> <el-radio-group v-model="backForm.changeTime" @change="radioChange"> <el-radio :label="1">最近2小时</el-radio> <el-radio :label="2">最近24小时</el-radio> <el-radio :label="3">自定义时间段</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="选择开始时间:" prop="beginTime"> <el-date-picker :disabled="backForm.changeTime != 3" v-model="backForm.beginTime" type="datetime" placeholder="选择开始时间" > </el-date-picker> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="选择结束时间:" prop="endTime"> <el-date-picker :disabled="backForm.changeTime != 3" v-model="backForm.endTime" type="datetime" placeholder="选择结束时间" > </el-date-picker> </el-form-item> </el-col> </el-row> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="searchLocations()">确 定</el-button> <el-button @click="backOpen = false">取 消</el-button> </span> </el-dialog> </div> </template> <script> import { getLastLocation ,listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfo } from "@/api/operationMonitor/vehicleInfo"; import { getVehicleLocations } from "@/api/operationMonitor/vehicleLocationInfo"; import MapCar from "./component/MapCar"; import { EditorMap } from "@/utils/mapClass/map"; import { mapGetters, mapActions } from "vuex"; import drawer from "./component/drawer"; import NullVUe from "@/components/bigWindow/Null"; import moment from "moment"; export default { name: "vechicle", components: { drawer }, data() { return { //地图 map: null, drawerWidth: '600px', // 遮罩层 loading: true, // 总条数 total: 0, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, carNum: null, brandModel: null, vehicleType: null, vehicleLoad: null, vehicleSize: null, vehicleLimt: null, vehicleInspect: null, beyondEnterpriseId: null, personLiable: null, phone: null, isDel: null, remarks: null }, // 燃气车辆信息表格数据 infoList: [], form: {}, // 是否显示弹出层 open: false, // 弹出层标题 title: "", //轨迹回放 backOpen: false, backForm:{ changeTime: 1, beginTime: "", endTime: "", carNum: "", vehicleId: "" }, rules: { changeTime: [ { required: true, message: "选择查询时间", trigger: ["blur", "change"], }, ], beginTime: [ { required: true, message: "请输入开始时间", trigger: "blur" }, ], endTime: [ { required: true, message: "请输入结束时间", trigger: "blur" }, ], } }; }, computed: { ...mapGetters(["company", "systemSetting"]) }, created() { this.getList(); }, mounted(){ const path = eval(this.systemSetting.map_center); this.map = new EditorMap( "map", { center: path, /* mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",*/ zoom: 14.5, }, this ); }, methods: { /** 查询燃气车辆信息列表 */ getList(){ this.loading = true; listInfo(this.queryParams).then(response => { this.infoList = response.rows; this.total = response.total; this.loading = false; }); }, /** 获取车辆信息操作 */ getVehicleInfo(row){ this.reset(); const vehicleId = row.vehicleId || this.ids getInfo(vehicleId).then(response => { this.form = response.data; this.open = true; this.title = "查看燃气车辆信息"; }); }, /**获取车辆轨迹操作*/ getVehicleTravel(row){ let param = {}; param.vehicleId = row.vehicleId; this.backForm.vehicleId = row.vehicleId; return getLastLocation(param).then(res =>{ if(res){ if(res.data.longitude && res.data.latitude){ res.data.iconType = 9; res.data.count=1; this.map.clearbackTrack(param.vehicleId) this.map.addDevice(res.data,MapCar); this.map.map.panTo([res.data.longitude, res.data.latitude]); }else{ this.$message({ message: '抱歉未获取到当前车辆位置信息!', type: 'warning' }); } } }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { vehicleId: null, carNum: null, brandModel: null, vehicleType: null, vehicleLoad: null, vehicleSize: null, vehicleLimt: null, vehicleInspect: null, beyondEnterpriseId: null, personLiable: null, phone: null, isDel: null, remarks: null }; this.resetForm("form"); }, radioChange(e) { if (e == 1) { this.backForm.beginTime = moment() .subtract(2, "h") .format("YYYY-MM-DD HH:mm:ss"); this.backForm.endTime = moment().format("YYYY-MM-DD HH:mm:ss"); } else if (e == 2) { this.backForm.beginTime = moment() .subtract(1, "d") .format("YYYY-MM-DD HH:mm:ss"); this.backForm.endTime = moment().format("YYYY-MM-DD HH:mm:ss"); } else { this.backForm.beginTime = ""; this.backForm.endTime = ""; } }, getCar(carNum){ this.backOpen=true; this.backForm.carNum =carNum; this.backForm.beginTime = moment().subtract(2, "h").format("YYYY-MM-DD HH:mm:ss"); this.backForm.endTime = moment().format("YYYY-MM-DD HH:mm:ss"); }, handleCurrentChangvale(val){ this.queryParams.pageNum = val; this.getList(); }, carInfoSearch(){ this.queryParams.pageNum = 1; this.getList(); }, resetQuery(){ this.queryParams.pageNum = 1; this.queryParams.carNum = null; this.getList(); }, searchLocations(){ this.$refs.backForm.validate(async (valid) => { if (valid) { if ( moment(this.backForm.beginTime).valueOf() > moment(this.backForm.endTime).valueOf() ) { this.msgError("开始时间不能大于结束时间"); this.backForm.endTime = ""; return; } if (this.backForm.changeTime != 3) { this.radioChange(this.backForm.changeTime); } else { this.backForm.beginTime = moment(this.backForm.beginTime).format( "YYYY-MM-DD HH:mm:ss" ); this.backForm.endTime = moment(this.backForm.endTime).format( "YYYY-MM-DD HH:mm:ss" ); } if(this.map.allDevice[9][0].getExtData().count>1){ this.map.clearbackTrack(); await this.getVehicleTravel({vehicleId:this.backForm.vehicleId}); }else{ this.map.allDevice[9][0].getExtData().count++ } getVehicleLocations(this.backForm).then(res =>{ let paths = []; let times = []; if(res.data.length == 1){ this.$message({ message: '抱歉当前车辆只能查看位置信息,无法形成轨迹!', type: 'warning' }); }else if(res.data.length == 0){ this.$message({ message: '抱歉该时段未查到当前车辆轨迹信息!', type: 'warning' }); }else{ res.data.forEach(item => { paths.push([item.longitude,item.latitude]); times.push(item.reportTime) }) this.map.backTrack(this.backForm.vehicleId,paths,times,NullVUe); this.backOpen = false; } }) } }); }, sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); } } }; </script> <style lang="scss" scoped> .gassVehicle{ positoin:relative; /*background-color: red;*/ height:calc(100vh - 50px); padding:20px; padding-bottom:0px; } #map{ /*position: fixed;*/ /*width:calc(100vw - 250px);*/ /*top:70px;*/ /*bottom:0;*/ height: 100%; width: 100%; } /*!* 表格最外边框 *! .el-table --border, .el-table --group{ border: none; }*/ .el-table{ background-color: #00afff !important; } </style>