|
|
|
@ -112,9 +112,9 @@ export default { |
|
|
|
formatTooltip(val) { |
|
|
|
|
|
|
|
if(this.marks[val]){ |
|
|
|
return this.marks[val].remark; |
|
|
|
return this.marks[val]; |
|
|
|
} else { |
|
|
|
return this.marks[0].remark; |
|
|
|
return this.marks[0]; |
|
|
|
} |
|
|
|
}, |
|
|
|
play(){ |
|
|
|
@ -156,45 +156,18 @@ export default { |
|
|
|
} else { |
|
|
|
this.activeIcon = type; |
|
|
|
this.lnglats = {}; |
|
|
|
this.lnglatsNode = {}; |
|
|
|
request({ |
|
|
|
url: '/system/information/listTime', |
|
|
|
method: 'get' |
|
|
|
}).then(result=>{ |
|
|
|
}).then(async result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.silderVisible = true; |
|
|
|
|
|
|
|
const style = { |
|
|
|
color: '#9fe4fe' |
|
|
|
} |
|
|
|
const now = moment().format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
const list = result.rows; |
|
|
|
let marks = {0: { |
|
|
|
style, |
|
|
|
label: now.substr(11,5), |
|
|
|
remark: now, |
|
|
|
cid:0, |
|
|
|
}}; |
|
|
|
let total = list.length>9?9:list.length; |
|
|
|
let idx = 0; |
|
|
|
for(let i = list.length-1; i>=0;i--){ |
|
|
|
idx++; |
|
|
|
marks[idx] = { |
|
|
|
style, |
|
|
|
label: list[i].createTime.substr(11,5), |
|
|
|
remark: list[i].createTime, |
|
|
|
cid: list[i].id |
|
|
|
} |
|
|
|
} |
|
|
|
this.max = total; |
|
|
|
this.marks = marks; |
|
|
|
this.showLnglat(); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
async showLnglat(){ |
|
|
|
if(!this.lnglats[this.timeTick]){ |
|
|
|
// 实时路况 |
|
|
|
if(this.timeTick === 0){ |
|
|
|
// 保存数据 |
|
|
|
let res = await request({ url: '/business/traffic-statistics/current/getTheCurrentCongestedSection', method: 'get'}); |
|
|
|
let aryLine = []; |
|
|
|
res.data.forEach(e => { |
|
|
|
@ -205,28 +178,40 @@ export default { |
|
|
|
xyArr: lines, |
|
|
|
}) |
|
|
|
}); |
|
|
|
this.drawThumbail(res.data); |
|
|
|
this.lnglats[this.timeTick] = _.cloneDeep(aryLine); |
|
|
|
this.lnglatsNode[this.timeTick] = res.data; |
|
|
|
} else { |
|
|
|
let res = await request({ url: `/system/information/${this.marks[this.timeTick].cid}`, method: 'get'}); |
|
|
|
let _line = JSON.parse(res.data.otherConfig) |
|
|
|
let aryLine = []; |
|
|
|
_line.forEach(e => { |
|
|
|
const lines = e.link_lng_lats.split(';').map(x=>x.split(',')) |
|
|
|
aryLine.push({ |
|
|
|
width: 3, // 线宽度 |
|
|
|
color: '#FF0000', // 线颜色 |
|
|
|
xyArr: lines |
|
|
|
}) |
|
|
|
}); |
|
|
|
this.lnglats[this.timeTick] = _.cloneDeep(aryLine); |
|
|
|
this.lnglatsNode[this.timeTick] = _line; |
|
|
|
this.drawThumbail(_line); |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.drawThumbail(this.lnglatsNode[this.timeTick]); |
|
|
|
this.lnglats[0] = _.cloneDeep(aryLine); |
|
|
|
this.lnglatsNode[0] = res.data; |
|
|
|
|
|
|
|
const now = moment().format('HH:mm'); |
|
|
|
let marks = {0: now}; |
|
|
|
let total = 0; |
|
|
|
let idx = 0; |
|
|
|
for(let i in result.data){ |
|
|
|
idx++; |
|
|
|
total++; |
|
|
|
marks[idx] = i |
|
|
|
|
|
|
|
let aryLine = []; |
|
|
|
const _line = JSON.parse(result.data[i]) |
|
|
|
_line.forEach(e => { |
|
|
|
const lines = e.link_lng_lats.split(';').map(x=>x.split(',')) |
|
|
|
aryLine.push({ |
|
|
|
width: 3, // 线宽度 |
|
|
|
color: '#FF0000', // 线颜色 |
|
|
|
xyArr: lines |
|
|
|
}) |
|
|
|
}); |
|
|
|
this.lnglats[idx] = _.cloneDeep(aryLine); |
|
|
|
this.lnglatsNode[idx] = _line; |
|
|
|
} |
|
|
|
this.max = total; |
|
|
|
this.marks = marks; |
|
|
|
this.showLnglat(); |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
async showLnglat(){ |
|
|
|
this.drawThumbail(this.lnglatsNode[this.timeTick] ); |
|
|
|
Vue.prototype.mapIns.addPointByArr( {pointList:[]}, 'lineLayer', true); |
|
|
|
Vue.prototype.mapIns.removeLayerByName('lineLayer'); |
|
|
|
setTimeout(()=>{ |
|
|
|
|
