|
|
@ -17,20 +17,20 @@ |
|
|
|
:highlight-current="true" |
|
|
|
:expand-on-click-node="false" |
|
|
|
:auto-expand-parent="false"> |
|
|
|
</el-tree> |
|
|
|
</el-tree> |
|
|
|
<!-- <el-checkbox-group class="device" v-model="devices" @change="onDeviceChange"> |
|
|
|
<el-checkbox v-for="(item,index) in deviceTypeList" :label="item.value" >{{ item.label }}</el-checkbox> |
|
|
|
</el-checkbox-group> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cright"> |
|
|
|
<div style="display: flex;justify-content: flex-end;padding-right: 20px;"><Search ref="search" /></div> |
|
|
|
<div v-if="curid === ''" style="height:300px"></div> |
|
|
|
<div class="tag1A" v-if="curid==='8' ">方向:济南<span>←</span></div> |
|
|
|
<div class="tag2A" v-if="curid==='8' "><span>→</span>方向:菏泽</div> |
|
|
|
<div class="tag1A" v-if=" curid==='9'">方向:出口<span>←</span></div> |
|
|
|
<div class="tag2A" v-if=" curid==='9'"><span>→</span>方向:入口</div> |
|
|
|
<div :hidden="curid==='' || curid==='7'" class="charts "id="charts"></div> |
|
|
|
|
|
|
|
<div class="tag1A" v-if="curid==='7' ">方向:济南<span>←</span></div> |
|
|
|
<div class="tag2A" v-if="curid==='7' "><span>→</span>方向:菏泽</div> |
|
|
|
<div class="tag1A" v-if=" curid==='8'">方向:出口<span>←</span></div> |
|
|
|
<div class="tag2A" v-if=" curid==='8'"><span>→</span>方向:入口</div> |
|
|
|
<div :hidden="curid==='' || curid==='6'" class="charts "id="charts"></div> |
|
|
|
|
|
|
|
<div style="overflow: none;height: 450px"> |
|
|
|
<Table :data="tableData" style="width: 99%;margin-top: 30px;" height="430px"> |
|
|
|
<ElTableColumn v-for="(item,index) of tableCols" :label="item.label" :prop="item.value" align="center" /> |
|
|
@ -70,38 +70,41 @@ export default { |
|
|
|
id:'a', |
|
|
|
label:'交通事件', |
|
|
|
children:[ |
|
|
|
{ id:'1', label:'事故多发路段'}, |
|
|
|
{ id:'1', label:'事件多发路段'}, |
|
|
|
{ id:'2', label:'事件类型分析'}, |
|
|
|
{ id:'3', label:'事故车型分析'}, |
|
|
|
{ id:'4', label:'事故时间分析'}, |
|
|
|
{ id:'5', label:'事故地市分布'}, |
|
|
|
{ id:'6', label:'交通管制情况统计'}, |
|
|
|
{ id:'3', label:'事件时间分析'}, |
|
|
|
{ id:'4', label:'事件地市分布'}, |
|
|
|
{ id:'5', label:'交通管制情况统计'}, |
|
|
|
] |
|
|
|
},{ |
|
|
|
id:'b', |
|
|
|
label:'天气情况统计', |
|
|
|
children:[ |
|
|
|
{ id:'7', label:'天气情况统计'}, |
|
|
|
{ id:'6', label:'天气情况统计'}, |
|
|
|
] |
|
|
|
},{ |
|
|
|
id:'c', |
|
|
|
label:'交通量统计', |
|
|
|
children:[ |
|
|
|
{ id:'8', label:'门架车流量'}, |
|
|
|
{ id:'9', label:'收费站车流量'}, |
|
|
|
{ id:'7', label:'门架车流量'}, |
|
|
|
{ id:'8', label:'收费站车流量'}, |
|
|
|
] |
|
|
|
},{ |
|
|
|
id:'d', |
|
|
|
label:'交通事故情况', |
|
|
|
children:[ |
|
|
|
{ id:'10', label:'事故类型统计'}, |
|
|
|
{ id:'9', label:'事故类型统计'}, |
|
|
|
{ id:'10', label:'事故车型分析'}, |
|
|
|
{ id:'11', label:'事故时间分析'}, |
|
|
|
{ id:'12', label:'事故地市分布'}, |
|
|
|
{ id:'13', label:'事故路段分布'}, |
|
|
|
] |
|
|
|
},{ |
|
|
|
id:'e', |
|
|
|
label:'拥堵情况', |
|
|
|
children:[ |
|
|
|
{ id:'11', label:'拥堵地点统计'}, |
|
|
|
{ id:'12', label:'路段平均拥堵时长'}, |
|
|
|
{ id:'14', label:'拥堵地点统计'}, |
|
|
|
{ id:'15', label:'路段平均拥堵时长'}, |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
@ -111,7 +114,7 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(()=>{ |
|
|
@ -133,13 +136,13 @@ export default { |
|
|
|
methods: { |
|
|
|
getKeys(){ |
|
|
|
let keys = this.$refs.menu.getCheckedKeys().filter(x=>!isNaN(x)); |
|
|
|
|
|
|
|
|
|
|
|
return keys; |
|
|
|
}, |
|
|
|
bind(){ |
|
|
|
let id = this.$refs.menu.getCurrentKey(); |
|
|
|
let query = this.$refs.search.searchQuery(); |
|
|
|
const {thisTime,lastTime} = query; |
|
|
|
const {lastTime,thisTime} = query; |
|
|
|
if(id==='1'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/sectionAnalysis', |
|
|
@ -148,16 +151,16 @@ export default { |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
|
|
|
|
this.tableCols = [{label:'路段桩号',value:'stakeMark'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
this.tableCols = [{label:'路段桩号',value:'stakeMark'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length === 0){ |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
@ -166,7 +169,7 @@ export default { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.stakeMark); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
@ -177,16 +180,16 @@ export default { |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'事故类型',value:'eventType'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
this.tableCols = [{label:'事故类型',value:'eventType'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length === 0){ |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
@ -194,130 +197,67 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.eventType); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200) |
|
|
|
}) |
|
|
|
} else if(id==='3'){ |
|
|
|
let unit = '时'; |
|
|
|
if(query.type === '1'){unit='日'} |
|
|
|
else if(query.type === '0'){unit='月'} |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/accidentModelAnalysis', |
|
|
|
url: '/business/sdhsEvent/eventTimeAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [ |
|
|
|
{label:'事故类型',value:'name'}, |
|
|
|
{label:'货车'+thisTime,value:'货车'+thisTime}, |
|
|
|
{label:'小型车'+thisTime,value:'小型车'+thisTime}, |
|
|
|
{label:'客车'+thisTime,value:'客车'+thisTime}, |
|
|
|
{label:'货车'+lastTime,value:'货车'+lastTime}, |
|
|
|
{label:'小型车'+lastTime,value:'小型车'+lastTime}, |
|
|
|
{label:'客车'+lastTime,value:'客车'+lastTime} |
|
|
|
] |
|
|
|
|
|
|
|
chartsOptions3.series[0].name = '货车'+thisTime |
|
|
|
chartsOptions3.series[1].name = '小型车'+thisTime |
|
|
|
chartsOptions3.series[2].name = '客车'+thisTime |
|
|
|
chartsOptions3.series[3].name = '货车'+lastTime |
|
|
|
chartsOptions3.series[4].name = '小型车'+lastTime |
|
|
|
chartsOptions3.series[5].name = '客车'+lastTime |
|
|
|
if(_.keys(result.data).length === 0){ |
|
|
|
this.tableCols = [{label:'事件时间',value:'time'},{label:thisTime+'事件总量(起)',value:'num'},{label:lastTime+'事件总量(起)',value:'numYes'}] |
|
|
|
let _tableData = [] |
|
|
|
|
|
|
|
chartsOptions3.series[0].data = [] |
|
|
|
chartsOptions3.series[1].data = [] |
|
|
|
chartsOptions3.series[2].data = [] |
|
|
|
chartsOptions3.series[3].data = [] |
|
|
|
chartsOptions3.series[4].data = [] |
|
|
|
chartsOptions3.series[5].data = [] |
|
|
|
this.myChart.setOption(chartsOptions3); |
|
|
|
chartsOptions4.series[0].name = thisTime; |
|
|
|
chartsOptions4.series[1].name = lastTime; |
|
|
|
this.curid = id; |
|
|
|
if(_.keys(result.data[thisTime]).length === 0){ |
|
|
|
chartsOptions4.series[0].data = [] |
|
|
|
chartsOptions4.series[1].data = [] |
|
|
|
chartsOptions4.xAxis.data = []; |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
let _tableData = [] |
|
|
|
for(let i in result.data[thisTime]){ |
|
|
|
const _row = {name:i} |
|
|
|
_row['货车'+thisTime] = result.data[thisTime][i]['货车']||0 |
|
|
|
_row['小型车'+thisTime] = result.data[thisTime][i]['小型车']||0 |
|
|
|
_row['客车'+thisTime] = result.data[thisTime][i]['客车']||0 |
|
|
|
|
|
|
|
_row['货车'+lastTime] = result.data[lastTime][i]['货车']||0 |
|
|
|
_row['小型车'+lastTime] = result.data[lastTime][i]['小型车']||0 |
|
|
|
_row['客车'+lastTime] = result.data[lastTime][i]['客车']||0 |
|
|
|
_tableData.push(_row) |
|
|
|
_tableData.push({ |
|
|
|
idx:parseInt(i), |
|
|
|
time:i.toString()+ unit, |
|
|
|
num:result.data[thisTime][i.toString()], |
|
|
|
numYes:result.data[lastTime][i.toString()] |
|
|
|
}) |
|
|
|
} |
|
|
|
_tableData.sort(function(a,b){return a.idx-b.idx}) |
|
|
|
this.tableData = _tableData; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions3.xAxis.data = _tableData.map(x=>x.name); |
|
|
|
chartsOptions3.series[0].data = _tableData.map(x=>x['货车'+thisTime]) |
|
|
|
chartsOptions3.series[1].data = _tableData.map(x=>x['小型车'+thisTime]) |
|
|
|
chartsOptions3.series[2].data = _tableData.map(x=>x['客车'+thisTime]) |
|
|
|
chartsOptions3.series[3].data = _tableData.map(x=>x['货车'+lastTime]) |
|
|
|
chartsOptions3.series[4].data = _tableData.map(x=>x['小型车'+lastTime]) |
|
|
|
chartsOptions3.series[5].data = _tableData.map(x=>x['客车'+lastTime]) |
|
|
|
this.myChart.setOption(chartsOptions3); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='4'){ |
|
|
|
let unit = '时'; |
|
|
|
if(query.type === '1'){unit='日'} |
|
|
|
else if(query.type === '0'){unit='月'} |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/accidentTimeAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'事故时间',value:'time'},{label:thisTime+'事故总量(起)',value:'num'},{label:lastTime+'事故总量(起)',value:'numYes'}] |
|
|
|
let _tableData = [] |
|
|
|
|
|
|
|
chartsOptions4.series[0].name = thisTime; |
|
|
|
chartsOptions4.series[1].name = lastTime; |
|
|
|
this.curid = id; |
|
|
|
if(_.keys(result.data[thisTime]).length === 0){ |
|
|
|
chartsOptions4.series[0].data = [] |
|
|
|
chartsOptions4.series[1].data = [] |
|
|
|
chartsOptions4.xAxis.data = []; |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
for(let i in result.data[thisTime]){ |
|
|
|
_tableData.push({ |
|
|
|
idx:parseInt(i), |
|
|
|
time:i.toString()+ unit, |
|
|
|
num:result.data[thisTime][i.toString()], |
|
|
|
numYes:result.data[lastTime][i.toString()] |
|
|
|
}) |
|
|
|
} |
|
|
|
_tableData.sort(function(a,b){return a.idx-b.idx}) |
|
|
|
this.tableData = _tableData; |
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions4.series[0].data = _tableData.map(x=>x.num) |
|
|
|
chartsOptions4.series[1].data = _tableData.map(x=>x.numYes) |
|
|
|
chartsOptions4.xAxis.data = _tableData.map(x=>x.time); |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.resize(); |
|
|
|
},200) |
|
|
|
},200) |
|
|
|
}) |
|
|
|
} else if(id==='5'){ |
|
|
|
} else if(id==='4'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/selectRegionAnalysis', |
|
|
|
url: '/business/sdhsEvent/selectEventRegionAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
console.log(result) |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'发生地区',value:'city'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
this.tableCols = [{label:'发生地区',value:'city'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length===0){ |
|
|
@ -326,21 +266,21 @@ export default { |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions.xAxis.data = result.data.map(x=>x.city); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='6'){ |
|
|
|
} else if(id==='5'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/selectStationAnalysis', |
|
|
|
method: 'post', |
|
|
@ -354,7 +294,7 @@ export default { |
|
|
|
{label:thisTime+'限行',value:thisTime+'restriction'}, |
|
|
|
{label:lastTime+'封闭',value:lastTime+'close'}, |
|
|
|
{label:lastTime+'限行',value:lastTime+'restriction'}, |
|
|
|
] |
|
|
|
] |
|
|
|
chartsOptions6.series[0].name = thisTime+'封闭' |
|
|
|
chartsOptions6.series[1].name = thisTime+'限行' |
|
|
|
chartsOptions6.series[2].name = lastTime+'封闭' |
|
|
@ -367,7 +307,7 @@ export default { |
|
|
|
this.myChart.setOption(chartsOptions6); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
@ -381,9 +321,9 @@ export default { |
|
|
|
this.myChart.setOption(chartsOptions6); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
} else if(id==='7'){ |
|
|
|
} else if(id==='6'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/selectWeather', |
|
|
|
method: 'post' |
|
|
@ -393,27 +333,27 @@ export default { |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
if(result.data.dataList.length===0){ |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
let col = [{label:'地区',value:'regionName'}] |
|
|
|
for(let i in result.data.column){ |
|
|
|
col.push({label:result.data.column[i],value:i}) |
|
|
|
} |
|
|
|
this.tableCols = col; |
|
|
|
this.tableCols = col; |
|
|
|
this.tableData = result.data.dataList; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
} else if(id==='8'){ |
|
|
|
} else if(id==='7'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/gantryAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
|
|
|
|
this.tableCols = [{label:'方向',value:'dir'},{label:'门架',value:'name'},{label:'车流量',value:'num'}] |
|
|
|
|
|
|
|
this.tableCols = [{label:'方向',value:'dir'},{label:'门架',value:'name'},{label:'车流量',value:'num'}] |
|
|
|
|
|
|
|
chartsOptions8.legend.data[0].name = thisTime+'车流量' |
|
|
|
chartsOptions8.legend.data[1].name = lastTime+'车流量' |
|
|
@ -459,15 +399,15 @@ export default { |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='9'){ |
|
|
|
} else if(id==='8'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/TollBoothStatisticsList', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
|
|
|
|
this.tableCols = [{label:'方向',value:'dir'},{label:'收费站',value:'name'},{label:'车流量',value:'num'}] |
|
|
|
|
|
|
|
this.tableCols = [{label:'方向',value:'dir'},{label:'收费站',value:'name'},{label:'车流量',value:'num'}] |
|
|
|
|
|
|
|
chartsOptions8.legend.data[0].name = thisTime+'车流量' |
|
|
|
chartsOptions8.legend.data[1].name = lastTime+'车流量' |
|
|
@ -477,7 +417,7 @@ export default { |
|
|
|
|
|
|
|
chartsOptions8.series[2].name = thisTime+'车流量' |
|
|
|
chartsOptions8.series[3].name = lastTime+'车流量' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let _tableData = [] |
|
|
|
for(let i of result.data[thisTime+'exit']){ |
|
|
@ -509,58 +449,228 @@ export default { |
|
|
|
chartsOptions8.series[1].data =result.data[lastTime+'exit'].map(x=>x.trafficVolume) |
|
|
|
chartsOptions8.series[2].data = result.data[thisTime+'entrance'].map(x=>x.trafficVolume) |
|
|
|
chartsOptions8.series[3].data =result.data[lastTime+'entrance'].map(x=>x.trafficVolume) |
|
|
|
|
|
|
|
|
|
|
|
this.myChart.setOption(chartsOptions8); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='10'){ |
|
|
|
} else if(id==='9'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/selectAccidentType', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'事故类型',value:'eventSubclass'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
this.tableCols = [{label:'事故类型',value:'eventSubclass'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length===0){ |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.eventSubclass); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='10'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/accidentModelAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [ |
|
|
|
{label:'事故类型',value:'name'}, |
|
|
|
{label:'货车'+thisTime,value:'货车'+thisTime}, |
|
|
|
{label:'小型车'+thisTime,value:'小型车'+thisTime}, |
|
|
|
{label:'客车'+thisTime,value:'客车'+thisTime}, |
|
|
|
{label:'货车'+lastTime,value:'货车'+lastTime}, |
|
|
|
{label:'小型车'+lastTime,value:'小型车'+lastTime}, |
|
|
|
{label:'客车'+lastTime,value:'客车'+lastTime} |
|
|
|
] |
|
|
|
|
|
|
|
chartsOptions3.series[0].name = '货车'+thisTime |
|
|
|
chartsOptions3.series[1].name = '小型车'+thisTime |
|
|
|
chartsOptions3.series[2].name = '客车'+thisTime |
|
|
|
chartsOptions3.series[3].name = '货车'+lastTime |
|
|
|
chartsOptions3.series[4].name = '小型车'+lastTime |
|
|
|
chartsOptions3.series[5].name = '客车'+lastTime |
|
|
|
if(_.keys(result.data).length === 0){ |
|
|
|
|
|
|
|
chartsOptions3.series[0].data = [] |
|
|
|
chartsOptions3.series[1].data = [] |
|
|
|
chartsOptions3.series[2].data = [] |
|
|
|
chartsOptions3.series[3].data = [] |
|
|
|
chartsOptions3.series[4].data = [] |
|
|
|
chartsOptions3.series[5].data = [] |
|
|
|
this.myChart.setOption(chartsOptions3); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
let _tableData = [] |
|
|
|
for(let i in result.data[thisTime]){ |
|
|
|
const _row = {name:i} |
|
|
|
_row['货车'+thisTime] = result.data[thisTime][i]['货车']||0 |
|
|
|
_row['小型车'+thisTime] = result.data[thisTime][i]['小型车']||0 |
|
|
|
_row['客车'+thisTime] = result.data[thisTime][i]['客车']||0 |
|
|
|
|
|
|
|
_row['货车'+lastTime] = result.data[lastTime][i]['货车']||0 |
|
|
|
_row['小型车'+lastTime] = result.data[lastTime][i]['小型车']||0 |
|
|
|
_row['客车'+lastTime] = result.data[lastTime][i]['客车']||0 |
|
|
|
_tableData.push(_row) |
|
|
|
} |
|
|
|
this.tableData = _tableData; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions3.xAxis.data = _tableData.map(x=>x.name); |
|
|
|
chartsOptions3.series[0].data = _tableData.map(x=>x['货车'+thisTime]) |
|
|
|
chartsOptions3.series[1].data = _tableData.map(x=>x['小型车'+thisTime]) |
|
|
|
chartsOptions3.series[2].data = _tableData.map(x=>x['客车'+thisTime]) |
|
|
|
chartsOptions3.series[3].data = _tableData.map(x=>x['货车'+lastTime]) |
|
|
|
chartsOptions3.series[4].data = _tableData.map(x=>x['小型车'+lastTime]) |
|
|
|
chartsOptions3.series[5].data = _tableData.map(x=>x['客车'+lastTime]) |
|
|
|
this.myChart.setOption(chartsOptions3); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='11'){ |
|
|
|
let unit = '时'; |
|
|
|
if(query.type === '1'){unit='日'} |
|
|
|
else if(query.type === '0'){unit='月'} |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/accidentTimeAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'事故时间',value:'time'},{label:thisTime+'事故总量(起)',value:'num'},{label:lastTime+'事故总量(起)',value:'numYes'}] |
|
|
|
let _tableData = [] |
|
|
|
|
|
|
|
chartsOptions4.series[0].name = thisTime; |
|
|
|
chartsOptions4.series[1].name = lastTime; |
|
|
|
this.curid = id; |
|
|
|
if(_.keys(result.data[thisTime]).length === 0){ |
|
|
|
chartsOptions4.series[0].data = [] |
|
|
|
chartsOptions4.series[1].data = [] |
|
|
|
chartsOptions4.xAxis.data = []; |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
for(let i in result.data[thisTime]){ |
|
|
|
_tableData.push({ |
|
|
|
idx:parseInt(i), |
|
|
|
time:i.toString()+ unit, |
|
|
|
num:result.data[thisTime][i.toString()], |
|
|
|
numYes:result.data[lastTime][i.toString()] |
|
|
|
}) |
|
|
|
} |
|
|
|
_tableData.sort(function(a,b){return a.idx-b.idx}) |
|
|
|
this.tableData = _tableData; |
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions4.series[0].data = _tableData.map(x=>x.num) |
|
|
|
chartsOptions4.series[1].data = _tableData.map(x=>x.numYes) |
|
|
|
chartsOptions4.xAxis.data = _tableData.map(x=>x.time); |
|
|
|
this.myChart.setOption(chartsOptions4); |
|
|
|
this.myChart.resize(); |
|
|
|
},200) |
|
|
|
}) |
|
|
|
} else if(id==='12'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/selectRegionAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
console.log(result) |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'发生地区',value:'city'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length===0){ |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.tableData = [] |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
chartsOptions.xAxis.data = result.data.map(x=>x.city); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='13'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/accidentSectionAnalysis', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
|
|
|
|
this.tableCols = [{label:'路段桩号',value:'stakeMark'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length === 0){ |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
|
this.curid = id; |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.stakeMark); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
}) |
|
|
|
} else if(id==='14'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/congestedLocation', |
|
|
|
method: 'post', |
|
|
|
data: query |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return this.$message.error(result?.msg); |
|
|
|
this.tableCols = [{label:'拥堵类型',value:'eventSubclass'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
this.tableCols = [{label:'拥堵类型',value:'eventSubclass'},{label:thisTime+' 数量(起)',value:thisTime},{label:lastTime+' 数量(起)',value:lastTime}] |
|
|
|
chartsOptions.series[0].name = thisTime; |
|
|
|
chartsOptions.series[1].name = lastTime; |
|
|
|
if(result.data.length===0){ |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
@ -568,15 +678,15 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.eventSubclass); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
} else if(id==='12'){ |
|
|
|
} else if(id==='15'){ |
|
|
|
request({ |
|
|
|
url: '/business/sdhsEvent/congestedTime', |
|
|
|
method: 'post', |
|
|
@ -590,9 +700,9 @@ export default { |
|
|
|
this.tableData = [] |
|
|
|
chartsOptions.series[0].data = [] |
|
|
|
chartsOptions.series[1].data = [] |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
this.$message.warning('暂无数据') |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tableData = result.data; |
|
|
@ -600,13 +710,13 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
chartsOptions.series[0].data = this.tableData.map(x=>x[thisTime]) |
|
|
|
chartsOptions.series[1].data = this.tableData.map(x=>x[lastTime]) |
|
|
|
|
|
|
|
|
|
|
|
chartsOptions.xAxis.data = this.tableData.map(x=>x.stakeMark); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.setOption(chartsOptions); |
|
|
|
this.myChart.resize(); |
|
|
|
}, 200); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
}else { |
|
|
|
this.$message.warning('暂未配置') |
|
|
@ -615,7 +725,7 @@ export default { |
|
|
|
onTreeClick(e){ |
|
|
|
this.curid = '' |
|
|
|
this.myChart.dispose(); |
|
|
|
|
|
|
|
|
|
|
|
this.myChart = echarts.init(document.getElementById("charts")); |
|
|
|
if(e.id === 'a'){ |
|
|
|
this.$refs.menu.setCurrentKey(1); |
|
|
@ -630,7 +740,7 @@ export default { |
|
|
|
} else { |
|
|
|
this.$refs.menu.setCurrentKey(e.id); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.bind() |
|
|
|
}, |
|
|
|
handleCheckedTreeNodeAll(value) { |
|
|
@ -696,7 +806,7 @@ export default { |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
padding:10px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
.cright{ |
|
|
|
flex: 1; |
|
|
|