|
|
@ -13,7 +13,7 @@ |
|
|
|
<div class="info info_02 keep-ratio" origin="left"> |
|
|
|
<p v-if="item.dataGreen"><span>{{ item.dataGreen.title }}:</span><em class="green">{{ |
|
|
|
item.dataGreen.value }}</em><i v-if="item.dataGreen.unit">{{ item.dataGreen.unit }}</i></p> |
|
|
|
<p v-if="item.dataRed"><span>{{ item.dataRed.title }}:</span><em class="red">{{ item.dataRed.value |
|
|
|
<p v-if="item.dataRed"><span>{{ item.dataRed.title }}:</span><em :class="item.dataRed.color">{{ item.dataRed.value |
|
|
|
}}</em><i v-if="item.dataRed.unit">{{ item.dataRed.unit }}</i></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -28,7 +28,7 @@ |
|
|
|
<img class="arrow arrow_03" src="./img/arrowRight.svg" alt=""> |
|
|
|
<div class="manageTotal"> |
|
|
|
<h4 class="keep-ratio">济菏运管中心</h4> |
|
|
|
<p>内存:<em>20.79</em>/62.36GB CPU:<em>1.00</em>/12<br>存储:<em>25.68</em>/2328.93GB</p> |
|
|
|
<p>内存:<em>{{ summaryMem.memUsed }}</em>/{{ summaryMem.memTotal }}GB CPU:<em>{{ summaryMem.cpuUsed }}</em>/{{ summaryMem.cputTotal }}<br>存储:<em>{{ summaryMem.filUsed }}</em>/{{ summaryMem.filTotal }}GB</p> |
|
|
|
</div> |
|
|
|
<ul class="manageDetail"> |
|
|
|
<li v-for="item in manage"> |
|
|
@ -128,6 +128,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
summary: [], |
|
|
|
summaryMem:{}, |
|
|
|
manage: [], |
|
|
|
apply: [], |
|
|
|
positionArr: [ |
|
|
@ -152,7 +153,7 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initData(); |
|
|
|
this.mockData(); |
|
|
|
// this.mockData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
mockData() { |
|
|
@ -187,94 +188,252 @@ export default { |
|
|
|
this.summary = [ |
|
|
|
{ |
|
|
|
width: 287, |
|
|
|
dataAll: { title: "接入设备总数", value: 3015, unit: "套" }, |
|
|
|
dataGreen: { title: "设备类型数", value: 55, unit: "类" }, |
|
|
|
dataRed: { title: "故障数", value: 207, unit: "套" } |
|
|
|
dataAll: { title: "接入设备总数", value: '-', unit: "套" }, |
|
|
|
dataGreen: { title: "设备类型数", value: '-', unit: "类" }, |
|
|
|
dataRed: { title: "故障数", value: '-', unit: "套", color:'red' } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 376, |
|
|
|
dataAll: { title: "接入数据总数", value: 1251446, unit: "条" }, |
|
|
|
dataGreen: { title: "昨日接入数", value: 20624577, unit: "条" }, |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
dataAll: { title: "接入数据总数", value: '-', unit: "条" }, |
|
|
|
dataGreen: { title: "昨日接入数", value: '-', unit: "条" }, |
|
|
|
dataRed: { title: "环比", value: '-', unit: "%", color:'red' } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 287, |
|
|
|
dataAll: { title: "存储占用量", value: 32, unit: "GB" }, |
|
|
|
dataGreen: { title: "昨日新增", value: 55, unit: "GB" }, |
|
|
|
dataRed: { title: "环比", value: 20.5, unit: "%" } |
|
|
|
dataRed: { title: "环比", value: 20.5, unit: "%", color:'red' } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 376, |
|
|
|
dataAll: { title: "服务调用总数", value: 752524, unit: "次" }, |
|
|
|
dataGreen: { title: "昨日服务数", value: 21034145, unit: "次" }, |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" } |
|
|
|
dataRed: { title: "环比", value: 0.04, unit: "%" , color:'red'} |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 226, |
|
|
|
dataAll: { title: "内存", value: 0, total: 1800, unit: "G" }, |
|
|
|
dataGreen: { title: "使用率", value: 70.73, unit: "%" } |
|
|
|
dataAll: { title: "内存", value: '-', total: '-', unit: "G" }, |
|
|
|
dataGreen: { title: "使用率", value: '-', unit: "%" } |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 226, |
|
|
|
dataAll: { title: "CPU", value: 0, total: 126, unit: "" }, |
|
|
|
dataGreen: { title: "使用率", value: 56.35, unit: "%" } |
|
|
|
dataAll: { title: "CPU", value: '-', total: '-', unit: "" }, |
|
|
|
dataGreen: { title: "使用率", value: '-', unit: "%" } |
|
|
|
} |
|
|
|
]; |
|
|
|
const _manage = [ |
|
|
|
{ title: "ETC门架", value: 25800 }, |
|
|
|
{ title: "雷达", value: 25800 }, |
|
|
|
{ title: "一类交调站", value: 25800 }, |
|
|
|
{ title: "气象监测", value: 25800 }, |
|
|
|
{ title: "事件预警", value: 25800 }, |
|
|
|
{ title: "基础数据", value: 25800 }, |
|
|
|
{ title: "摄像机", value: 25800 }, |
|
|
|
{ title: "智能设备箱", value: 25800 } |
|
|
|
|
|
|
|
// 上1 设备数量 |
|
|
|
request({ url: 'business/metrics/device/count', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[0].dataAll.value = res.data; |
|
|
|
}); |
|
|
|
request({ url: 'business/metrics/product/count', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[0].dataGreen.value = res.data; |
|
|
|
}); |
|
|
|
request({ url: 'business/metrics/device-abnormal/count', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[0].dataRed.value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//上2 接入设备数量 |
|
|
|
let startTime = moment('1990-01-01 00:00:00').format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
let endTime = moment().format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{ |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
periodType:'year' |
|
|
|
}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[1].dataAll.value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
startTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'; |
|
|
|
endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'; |
|
|
|
|
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{ |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
periodType:'year' |
|
|
|
}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[1].dataGreen.value = res.data; |
|
|
|
startTime = moment().subtract(2, 'days').format('YYYY-MM-DD') + ' 00:00:00'; |
|
|
|
endTime = moment().subtract(2, 'days').format('YYYY-MM-DD') + ' 23:59:59'; |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{ |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
periodType:'year' |
|
|
|
}}).then(res2=>{ |
|
|
|
if (res2.code != 200) return; |
|
|
|
let res3 = ((res.data-res2.data)/res2.data * 10000/100); |
|
|
|
this.summary[1].dataRed.value = res3.toFixed(2); |
|
|
|
this.summary[1].dataRed.color = res3>0?'green':'red'; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
// 上3 存储占用量 |
|
|
|
// request({ url: 'business/metrics/iot-server/monitor-previous', method: 'get'}).then(res=>{ |
|
|
|
// console.log(res,'----------------') |
|
|
|
// }) |
|
|
|
|
|
|
|
|
|
|
|
//上5 内存占用 |
|
|
|
request({ url: 'business/metrics/iot-server/monitor', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.summary[4].dataAll.value = res.data.mem.used; |
|
|
|
this.summary[4].dataAll.total = res.data.mem.total; |
|
|
|
this.summary[4].dataGreen.value = (res.data.mem.used/res.data.mem.total* 10000/100).toFixed(2);; |
|
|
|
|
|
|
|
this.summary[5].dataAll.value = res.data.cpu.used; |
|
|
|
this.summary[5].dataAll.total = res.data.cpu.free; |
|
|
|
this.summary[5].dataGreen.value = res.data.cpu.used //(res.data.cpu.used/res.data.cpu.total* 10000/100).toFixed(2);; |
|
|
|
let arySysFiles = res.data.sysFiles; |
|
|
|
let filTotal = 0; |
|
|
|
let filUsed = 0; |
|
|
|
arySysFiles.forEach(e => { |
|
|
|
filTotal+= parseFloat(e.total.substr(0,e.total.length-3)) |
|
|
|
filUsed+= parseFloat(e.used.substr(0,e.used.length-3)) |
|
|
|
}); |
|
|
|
this.summaryMem = { |
|
|
|
memUsed: res.data.mem.used, |
|
|
|
memTotal: res.data.mem.total, |
|
|
|
cpuUsed: res.data.cpu.used, |
|
|
|
cpuTotal: res.data.cpu.free, |
|
|
|
filUsed: filUsed.toFixed(1), |
|
|
|
filTotal: filTotal.toFixed(1), |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.manage = [ |
|
|
|
{ title: "ETC门架", value: '-' }, |
|
|
|
{ title: "雷达", value: '-' }, |
|
|
|
{ title: "一类交调站", value: '-' }, |
|
|
|
{ title: "气象监测", value: '-' }, |
|
|
|
{ title: "事件预警", value: '-' }, |
|
|
|
{ title: "基础数据", value: '-' }, |
|
|
|
{ title: "摄像机", value: '-' }, |
|
|
|
{ title: "智能设备箱", value: '-' } |
|
|
|
]; |
|
|
|
// 门架流水数据统计 |
|
|
|
request({ url: 'business/odsTollEtctuData/countNumber', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[0].value = res.data; |
|
|
|
}); |
|
|
|
startTime = moment('1990-01-01 00:00:00').format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
endTime = moment().format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
const param = { |
|
|
|
startTime, |
|
|
|
endTime, |
|
|
|
periodType:'year' |
|
|
|
} |
|
|
|
//雷达 |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{...param, productId: 'hmbld'}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[1].value = res.data; |
|
|
|
}); |
|
|
|
//一类交调站 |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{...param, productId: 'zc-yzsqkdc-3131'}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[2].value = res.data; |
|
|
|
}); |
|
|
|
//气象监测 |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{...param, productId: 'zc-meteorological'}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[3].value = res.data; |
|
|
|
}); |
|
|
|
//摄像机 |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{...param, productId: 'video-event'}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[6].value = res.data; |
|
|
|
}); |
|
|
|
//智能设备箱 |
|
|
|
request({ url: 'business/metrics/message-access/count', method: 'get',params:{...param, productId: 'zc-shebeixiang-1883'}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[7].value = res.data; |
|
|
|
}); |
|
|
|
//基础数据 |
|
|
|
request({ url: 'business/moduleCall/basicDataNumber', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[5].value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
//事件预警 |
|
|
|
request({ url: 'business/warning/countNumber?warningSource', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.manage[4].value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//非机预警数据使用情况 |
|
|
|
const _dataShare = [ |
|
|
|
this.dataShare = [ |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: "收费站出口流水数据统计", value: 26805 }, |
|
|
|
{ title: "当天门架牌识流水数据统计", value: 26805 }, |
|
|
|
{ title: "收费站入口流水数据统计 ", value: 26805 }, |
|
|
|
{ title: "数据共享中心内存使用情况", value: 26805 }, |
|
|
|
{ title: "基础数据统计", value: 26805 }, |
|
|
|
{ title: "收费站出口流水数据统计", value: '-' }, |
|
|
|
{ title: "当天门架牌识流水数据统计", value: '-' }, |
|
|
|
{ title: "收费站入口流水数据统计 ", value: '-' }, |
|
|
|
{ title: "上月累计车流量", value: '-' }, |
|
|
|
{ title: "在途车流量", value: '-' }, |
|
|
|
{ title: "非机预警数据使用情况", value: '-' }, |
|
|
|
{ title: "门架流水数据统计", value: 26805 }, |
|
|
|
{ title: "数据共享中心CPU使用情况", value: 26805 }, |
|
|
|
{ title: "数据共享中心内存使用情况", value: '-' }, |
|
|
|
{ title: "年度累计车流量", value: '-' }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
{ title: '', value: '' }, |
|
|
|
]; |
|
|
|
|
|
|
|
const warningNumber = await request({ url: 'business/warning/countNumber?warningSource=6', method: 'get'}); |
|
|
|
if (warningNumber.code != 200) return; |
|
|
|
_dataShare[7].value = warningNumber.data; |
|
|
|
|
|
|
|
const odsExpNumber = await request({ url: 'business/odsTollExpassData/countNumber', method: 'get'}); |
|
|
|
if (odsExpNumber.code != 200) return; |
|
|
|
_dataShare[2].value = odsExpNumber.data; |
|
|
|
request({ url: 'business/odsTollExpassData/countNumber', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[2].value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
const odsEnpNumber = await request({ url: 'business/odsTollEnpassData/countNumber', method: 'get'}); |
|
|
|
if (odsEnpNumber.code != 200) return; |
|
|
|
_dataShare[4].value = odsEnpNumber.data; |
|
|
|
request({ url: 'business/odsTollEnpassData/countNumber', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[4].value = res.data; |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const odsViuNumber = await request({ url: 'business/odsTollViuData/countNumber', method: 'get'}); |
|
|
|
if (odsViuNumber.code != 200) return; |
|
|
|
_dataShare[3].value = odsViuNumber.data; |
|
|
|
|
|
|
|
|
|
|
|
// 门架流水数据统计 |
|
|
|
const odsEtcNumber = await request({ url: 'business/odsTollEtctuData/countNumber', method: 'get'}); |
|
|
|
if (odsEtcNumber.code != 200) return; |
|
|
|
_manage[0].value = odsEtcNumber.data; |
|
|
|
const basicNumber = await request({ url: 'business/moduleCall/basicDataNumber', method: 'get'}); |
|
|
|
if (basicNumber.code != 200) return; |
|
|
|
_manage[5].value = basicNumber.data; |
|
|
|
|
|
|
|
this.manage = _manage; |
|
|
|
this.dataShare = _dataShare; |
|
|
|
request({ url: 'business/odsTollViuData/countNumber', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[3].value = res.data; |
|
|
|
}); |
|
|
|
// 上月累计车流量 |
|
|
|
request({ url: 'business/traffic-statistics/history/accumulated-flow', method: 'get',params:{ |
|
|
|
periodType: 2, |
|
|
|
startTime: moment().subtract(1, 'month').format('YYYY-MM') + '-01 00:00:00', |
|
|
|
endTime: moment().format('YYYY-MM') + '-01 00:00:00' |
|
|
|
}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[5].value = res.data[0]?.trafficVolume || 0; |
|
|
|
}); |
|
|
|
// 在途车流量 |
|
|
|
request({ url: 'business/traffic-statistics/current/in-transit-vehicles', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[6].value = res.data[0]['total_flow']; |
|
|
|
}); |
|
|
|
|
|
|
|
request({ url: 'business/traffic-statistics/history/accumulated-flow', method: 'get',params:{ |
|
|
|
periodType: 1, |
|
|
|
startTime: moment().format('YYYY') + '-01-01 00:00:00', |
|
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss') |
|
|
|
}}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[9].value = res.data[0].trafficVolume; |
|
|
|
}); |
|
|
|
|
|
|
|
request({ url: 'business/warning/countNumber?warningSource=6', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
this.dataShare[7].value = res.data; |
|
|
|
}); |
|
|
|
request({ url: 'business/traffic-statistics/current/average-speed', method: 'get'}).then(res=>{ |
|
|
|
if (res.code != 200) return; |
|
|
|
// this.dataShare[3].value = res.data; |
|
|
|
console.log(res) |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
//设备调用次数查询 |
|
|
|
// |
|
|
|