Skip to content

T
traffic-front
Commit 1848a760 authored by chengcaixia's avatar chengcaixia
Browse files
Options

巡检平台提示框修改为可拖动

parent cfb30540
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 40 deletions
src/components/el-drag-dialog/drag.js 0 → 100644
View file @ 1848a760
export default {
bind(el, binding, vnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const getStyle = (function() {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr]
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr]
}
})()
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
const dragDomWidth = dragDom.offsetWidth
const dragDomHeight = dragDom.offsetHeight
const screenWidth = document.body.clientWidth
const screenHeight = document.body.clientHeight
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
// 获取到的值带px 正则匹配替换
let styL = getStyle(dragDom, 'left')
let styT = getStyle(dragDom, 'top')
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
} else {
styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '')
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
let left = e.clientX - disX
let top = e.clientY - disY
// 边界处理
if (-(left) > minDragDomLeft) {
left = -minDragDomLeft
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
if (-(top) > minDragDomTop) {
top = -minDragDomTop
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
// emit onDrag event
vnode.child.$emit('dragDialog')
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
\ No newline at end of file
src/components/el-drag-dialog/index.js 0 → 100644
View file @ 1848a760
import drag from './drag'
const install = function(Vue) {
Vue.directive('el-drag-dialog', drag)
}
if (window.Vue) {
window['el-drag-dialog'] = drag
Vue.use(install); // eslint-disable-line
}
drag.install = install
export default drag
\ No newline at end of file
src/views/Result.vue
View file @ 1848a760
......@@ -215,7 +215,11 @@
width: calc(100vw - 600px);
height: 100%;
float: left;
background: #888
background: #888;
.map {
width: calc(100vw - 600px);
height: 100%;
}
}
.picture{
height: 90%;
......@@ -267,10 +271,7 @@
.pic_active{
border: 5px solid #1296db;
}
.map {
width: calc(100vw - 600px);
height: 100%;
}
</style>
<script>
......@@ -398,9 +399,20 @@ export default {
};
},
mounted() {
let searchVal = sessionStorage.getItem("searchVal");
if (searchVal) {
this.filters = JSON.parse(searchVal);
if(this.$route.params.startTime && this.$route.params.endTime){
this.filters.dateTime = [this.$route.params.startTime, this.$route.params.endTime];
}
if(this.$route.params.equipment){
this.filters.plateNo = [this.$route.params.equipment];
}
if (this.filters.dateTime.length > 0 || this.filters.plateNo.length > 0) {
//do nothing
} else {
let searchVal = sessionStorage.getItem("searchVal");
if (searchVal) {
this.filters = JSON.parse(searchVal);
}
}
this.queryAllEquipment();
this.queryTravel();
......@@ -601,7 +613,7 @@ export default {
info.type2 = capital.label;
}
});
this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? 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.position]});
this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? 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.position]});
this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.type2 + ' | ' + (info.status == 1 ? '正常' : '异常') + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no});
}
});
......@@ -631,7 +643,7 @@ export default {
this.tableData.push({
plateNo: key,
startEndTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm:ss") + " - " + moment(val[0].timestamp).format("YYYY-MM-DD hh:mm:ss"),
startEndTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm") + " - " + moment(val[0].timestamp).format("YYYY-MM-DD hh:mm"),
startEndPoint: val[val.length - 1].position + " - " + val[0].position,
inspectDistance: (totalDistance/1000).toFixed(1) + 'km',
inspectNum: (val[0].inspectNum ? val[0].inspectNum : 0) + "个",
......
src/views/ResultDetail.vue
View file @ 1848a760
......@@ -104,6 +104,11 @@
label="图片路径"
prop="imagePath">
</el-table-column>
<el-table-column
v-if="isShowCol"
label="分组ID"
prop="groupId">
</el-table-column>
<el-table-column fixed="right" label="详情">
<template slot-scope="scope">
<el-button
......@@ -131,6 +136,7 @@
</div>
<el-dialog
v-el-drag-dialog
:visible.sync="isShowPicture"
:title="imgContent"
custom-class="customWidth"
......@@ -139,6 +145,32 @@
<img :src="bigImgUrl" width="100%" style="height: 100%;">
</div>
</el-dialog>
<el-dialog
title="确认信息"
v-el-drag-dialog
:visible.sync="dialogVisible1"
:modal="needModal"
width="30%"
>
<span>此情况是否为异常?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1 = false">否</el-button>
<el-button type="primary" @click="showDialog2">是</el-button>
</span>
</el-dialog>
<el-dialog
title="确认信息"
v-el-drag-dialog
:visible.sync="dialogVisible2"
:modal="needModal"
width="30%"
>
<span>此情况是否为异常?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">未处理</el-button>
<el-button type="primary" @click="updatePicStatus">已处理</el-button>
</span>
</el-dialog>
</div>
</template>
<style lang="less" scope>
......@@ -157,10 +189,12 @@ 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'
import { export_json_to_excel } from '@/excel/Export2Excel';
import elDragDialog from "@/components/el-drag-dialog";
export default {
name: 'detail',
directives: { elDragDialog },
data() {
return {
tableData: [
......@@ -180,6 +214,11 @@ export default {
imgContent: '',
bigImgUrl: '',
no: 0,
dialogVisible1: false,
dialogVisible2: false,
needModal: false,
groupId: null,
tableIndex: -1,
capitalOptions: [
{
label: '路面状况',
......@@ -285,7 +324,7 @@ export default {
created() {
let startTime = null;
let endTime = null;
let equipment = null
let equipment = null;
if(this.$route.params.startTime){
startTime = this.$route.params.startTime;
}
......@@ -467,35 +506,41 @@ export default {
}
}
return false;
},
},
showDialog2() {
this.dialogVisible1 = false;
this.dialogVisible2 = true;
},
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 = "正常";
});
this.dialogVisible1 = true;
this.groupId = row.groupId;
this.tableIndex = index;
}
},
updatePicStatus() {
this.dialogVisible2 = false;
this.tableData[this.tableIndex].status = "正常";
axios.post(`/roadlinks/updateImageStatus`, {
id: this.groupId
}).then((response) => {
if (response.data.code === 200) {
if (response.data.data) {
} else {
}
} else {
}
})
.catch((error) => {
console.log(error);
});
},
exportTravel(){
this.tableData.forEach((item, index) => {
item.no = index + 1 + '';
......
src/views/Task.vue
View file @ 1848a760
......@@ -187,7 +187,11 @@
.ov-map{
width: 100%;
height: 100%;
background: #888
background: #888;
.map {
width: 100%;
height: 100%;
}
}
}
.picture{
......@@ -212,10 +216,7 @@
}
}
}
.map {
width: 100%;
height: 100%;
}
</style>
<script>
import axios from 'axios';
......@@ -646,7 +647,14 @@ export default {
},
// 巡检结果查看
linkResult(index, row) {
this.$router.push({
name:"result",
params: {
startTime: this.filters.dateTime[0],
endTime: this.filters.dateTime[1],
equipment: row.plateNo
}
});
},
shutdown(index, row) {
console.log(index, row);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment