fixed bug
This commit is contained in:
jiaming
parent
dd84344faa
commit
83f1a68164
|
|
@ -2,7 +2,7 @@
|
||||||
<div id="electronic-file">
|
<div id="electronic-file">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="left">{{ technicalSupport }}</div>
|
<div class="left">{{ technicalSupport }}</div>
|
||||||
<div class="middle">{{ topMiddleTitle }}</div>
|
<div class="middle">{{ chart10Name }}</div>
|
||||||
<border-box-2 class="right">
|
<border-box-2 class="right">
|
||||||
综合管理台
|
综合管理台
|
||||||
</border-box-2>
|
</border-box-2>
|
||||||
|
|
@ -10,20 +10,20 @@
|
||||||
|
|
||||||
<border-box-1 class="content">
|
<border-box-1 class="content">
|
||||||
<border-box-3 class="left">
|
<border-box-3 class="left">
|
||||||
<div class="left-title">{{ leftchart1StationName }}</div>
|
<div class="left-title">{{ chart1Name }}</div>
|
||||||
|
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart1Data ? multipleSum(...leftchart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart1Data ? multipleSum(...chart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
||||||
<capsule-chart class="left-chart" :data="leftchart1Data" />
|
<capsule-chart class="left-chart" :data="chart1Data" />
|
||||||
|
|
||||||
<decoration-2 class="left-d2" />
|
<decoration-2 class="left-d2" />
|
||||||
|
|
||||||
<div class="station-name">{{ leftchart2StationName }}</div>
|
<div class="station-name">{{ chart2Name }}</div>
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart2Data ? multipleSum(...leftchart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart2Data ? multipleSum(...chart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
||||||
<ring-chart class="left-chart" :data="leftchart2Data" />
|
<ring-chart class="left-chart" :data="chart2Data" />
|
||||||
|
|
||||||
<div class="station-name">{{ leftchart3StationName }}</div>
|
<div class="station-name">{{ chart3Name }}</div>
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart3Data ? multipleSum(...leftchart3Data.data.map(({ value }) => value)) : 0}}</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ chart3Data ? multipleSum(...chart3Data.data.map(({ value }) => value)) : 0}}</div></div>
|
||||||
<capsule-chart class="left-chart" :data="leftchart3Data" />
|
<capsule-chart class="left-chart" :data="chart3Data" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|
@ -37,32 +37,32 @@
|
||||||
|
|
||||||
<div class="rtl-device-num">
|
<div class="rtl-device-num">
|
||||||
<div class="device-num-container">
|
<div class="device-num-container">
|
||||||
设备总数<number-show :number="rightTopChartData ? multipleSum(...rightTopChartData.data.map(({ value }) => value)) : 0" />
|
设备总数<number-show :number="chart10Data ? multipleSum(...chart10Data.data.map(({ value }) => value)) : 0" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rtl-chart-container">
|
<div class="rtl-chart-container">
|
||||||
<div class="device-num-container">
|
<div class="device-num-container">
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>{{ rightTopChartData.data[0].value }}</div>
|
<div>{{ chart10Data.data[0].value }}</div>
|
||||||
<div>{{ rightTopChartData.data[0].title }}</div>
|
<div>{{ chart10Data.data[0].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>{{ rightTopChartData.data[1].value }}</div>
|
<div>{{ chart10Data.data[1].value }}</div>
|
||||||
<div>{{ rightTopChartData.data[1].title }}</div>
|
<div>{{ chart10Data.data[1].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ring-chart :data="rightTopChartData" />
|
<ring-chart :data="chart10Data" />
|
||||||
|
|
||||||
<div class="device-num-container">
|
<div class="device-num-container">
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>{{ rightTopChartData.data[2].value }}</div>
|
<div>{{ chart10Data.data[2].value }}</div>
|
||||||
<div>{{ rightTopChartData.data[2].title }}</div>
|
<div>{{ chart10Data.data[2].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>{{ rightTopChartData.data[3].value }}</div>
|
<div>{{ chart10Data.data[3].value }}</div>
|
||||||
<div>{{ rightTopChartData.data[3].title }}</div>
|
<div>{{ chart10Data.data[3].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,28 +71,28 @@
|
||||||
|
|
||||||
<div class="right-top-right">
|
<div class="right-top-right">
|
||||||
<border-box-3 class="right-top-right-one">
|
<border-box-3 class="right-top-right-one">
|
||||||
<div class="rtr-title">{{ rightchart1StationName }}</div>
|
<div class="rtr-title">{{ chart9Name }}</div>
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
<div class="rtr-chart-container">
|
||||||
<div class="device-num">
|
<div class="device-num">
|
||||||
<div>{{ rightchart1Data ? multipleSum(...rightchart1Data.data.map(({ value }) => value)) : 0 }}</div>
|
<div>{{ chart9Data ? multipleSum(...chart9Data.data.map(({ value }) => value)) : 0 }}</div>
|
||||||
<div>设备运行总数</div>
|
<div>设备运行总数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<capsule-chart class="rtr-chart" :data="rightchart1Data" />
|
<capsule-chart class="rtr-chart" :data="chart9Data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
|
|
||||||
<border-box-4 class="right-top-right-two" :reverse="true">
|
<border-box-4 class="right-top-right-two" :reverse="true">
|
||||||
<div class="rtr-title">{{ rightchart2StationName }}</div>
|
<div class="rtr-title">{{ chart8Name }}</div>
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
<div class="rtr-chart-container">
|
||||||
<div class="device-num">
|
<div class="device-num">
|
||||||
<div>{{ rightchart2Data ? multipleSum(...rightchart2Data.data.map(({ value }) => value)) : 0}}</div>
|
<div>{{ chart8Data ? multipleSum(...chart8Data.data.map(({ value }) => value)) : 0}}</div>
|
||||||
<div>设备运行总数</div>
|
<div>设备运行总数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ring-chart class="rtr-chart" :data="rightchart2Data" />
|
<ring-chart class="rtr-chart" :data="chart8Data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-4>
|
</border-box-4>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -100,29 +100,29 @@
|
||||||
|
|
||||||
<border-box-4 class="right-bottom">
|
<border-box-4 class="right-bottom">
|
||||||
<div class="rb-item">
|
<div class="rb-item">
|
||||||
<div class="station-name">{{ bottomChart1StationName }}</div>
|
<div class="station-name">{{ chart4Name }}</div>
|
||||||
<ring-chart :data="bottomChart1Data" />
|
<ring-chart :data="chart4Data" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
<decoration-2 class="rb-d2" :reverse="true"/>
|
||||||
|
|
||||||
<div class="rb-item">
|
<div class="rb-item">
|
||||||
<div class="station-name">{{ bottomChart2StationName }}</div>
|
<div class="station-name">{{ chart5Name }}</div>
|
||||||
<ring-chart :data="bottomChart2Data" />
|
<ring-chart :data="chart5Data" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
<decoration-2 class="rb-d2" :reverse="true"/>
|
||||||
|
|
||||||
<div class="rb-item">
|
<div class="rb-item">
|
||||||
<div class="station-name">{{ bottomChart3StationName }}</div>
|
<div class="station-name">{{ chart6Name }}</div>
|
||||||
<ring-chart :data="bottomChart3Data" />
|
<ring-chart :data="chart6Data" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<decoration-2 class="rb-d2" :reverse="true"/>
|
<decoration-2 class="rb-d2" :reverse="true"/>
|
||||||
|
|
||||||
<div class="rb-item">
|
<div class="rb-item">
|
||||||
<div class="station-name">{{ bottomChart4StationName }}</div>
|
<div class="station-name">{{ chart7Name }}</div>
|
||||||
<ring-chart :data="bottomChart4Data" />
|
<ring-chart :data="chart7Data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-4>
|
</border-box-4>
|
||||||
|
|
||||||
|
|
@ -138,11 +138,11 @@ export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
||||||
topMiddleTitle: '漯周界-机电设备电子档案',
|
chart10Name: '机电设备电子档案',
|
||||||
|
|
||||||
// 左边第一个图表数据
|
// 左边第一个图表数据
|
||||||
leftchart1StationName: '豫宛省界站',
|
chart1Name: '收费站',
|
||||||
leftchart1Data: {
|
chart1Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 85,
|
value: 85,
|
||||||
|
|
@ -175,8 +175,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 左边第二个图表数据
|
// 左边第二个图表数据
|
||||||
leftchart2StationName: '纸店收费站',
|
chart2Name: '收费站',
|
||||||
leftchart2Data: {
|
chart2Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 37,
|
value: 37,
|
||||||
|
|
@ -210,8 +210,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 左边第三个图表数据
|
// 左边第三个图表数据
|
||||||
leftchart3StationName: '沈丘收费站',
|
chart3Name: '收费站',
|
||||||
leftchart3Data: {
|
chart3Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 119,
|
value: 119,
|
||||||
|
|
@ -243,24 +243,25 @@ export default {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
// 右边顶部图表数据
|
// 底部第一个图表数据
|
||||||
rightTopChartData: {
|
chart4Name: '收费站',
|
||||||
|
chart4Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 1315,
|
value: 45,
|
||||||
title: '收费站'
|
title: '收费系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 415,
|
value: 75,
|
||||||
title: '监控中心'
|
title: '通信系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 90,
|
value: 96,
|
||||||
title: '道路外场'
|
title: '监控系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 317,
|
value: 16,
|
||||||
title: '其他'
|
title: '供配电系统'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: [
|
color: [
|
||||||
|
|
@ -273,29 +274,25 @@ export default {
|
||||||
active: true
|
active: true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 右边第一个图表数据
|
// 底部第一个图表数据
|
||||||
rightchart1StationName: '漯周界高速监控中心',
|
chart5Name: '收费站',
|
||||||
rightchart1Data: {
|
chart5Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 80,
|
value: 129,
|
||||||
title: '收费系统'
|
title: '收费系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 12,
|
value: 15,
|
||||||
title: '通信系统'
|
title: '通信系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 126,
|
value: 22,
|
||||||
title: '监控系统'
|
title: '监控系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 36,
|
value: 64,
|
||||||
title: '供配电系统'
|
title: '供配电系统'
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 8,
|
|
||||||
title: '其他'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: [
|
color: [
|
||||||
|
|
@ -304,12 +301,75 @@ export default {
|
||||||
'#ffffff',
|
'#ffffff',
|
||||||
'#ffc53d',
|
'#ffc53d',
|
||||||
'#469f4b'
|
'#469f4b'
|
||||||
]
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
chart6Name: '收费站',
|
||||||
|
chart6Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 88,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 57,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 23,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
chart7Name: '收费站',
|
||||||
|
chart7Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 15,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 23,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 66,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 右边第二个图表数据
|
// 右边第二个图表数据
|
||||||
rightchart2StationName: '漯周界高速服务区',
|
chart8Name: '收费站',
|
||||||
rightchart2Data: {
|
chart8Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 100,
|
value: 100,
|
||||||
|
|
@ -342,25 +402,58 @@ export default {
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部第一个图表数据
|
// 右边第一个图表数据
|
||||||
bottomChart1StationName: '项城收费站',
|
chart9Name: '收费站',
|
||||||
bottomChart1Data: {
|
chart9Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 45,
|
value: 80,
|
||||||
title: '收费系统'
|
title: '收费系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 75,
|
value: 12,
|
||||||
title: '通信系统'
|
title: '通信系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 96,
|
value: 126,
|
||||||
title: '监控系统'
|
title: '监控系统'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 16,
|
value: 36,
|
||||||
title: '供配电系统'
|
title: '供配电系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 8,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 右边顶部图表数据
|
||||||
|
chart10Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1315,
|
||||||
|
title: '收费站'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 415,
|
||||||
|
title: '监控中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 90,
|
||||||
|
title: '道路外场'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 317,
|
||||||
|
title: '其他'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: [
|
color: [
|
||||||
|
|
@ -373,27 +466,6 @@ export default {
|
||||||
active: true
|
active: true
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部第一个图表数据
|
|
||||||
bottomChart2StationName: '周口收费站',
|
|
||||||
bottomChart2Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 129,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 15,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 22,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 64,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
color: [
|
||||||
'#00baff',
|
'#00baff',
|
||||||
'#3de7c9',
|
'#3de7c9',
|
||||||
|
|
@ -401,74 +473,59 @@ export default {
|
||||||
'#ffc53d',
|
'#ffc53d',
|
||||||
'#469f4b'
|
'#469f4b'
|
||||||
],
|
],
|
||||||
active: true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 底部第一个图表数据
|
path: '/rest/datav/device/interface/list',
|
||||||
bottomChart3StationName: '谭庄收费站南',
|
paths: []
|
||||||
bottomChart3Data: {
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 88,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 57,
|
|
||||||
title: '通信系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 23,
|
|
||||||
title: '监控系统'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 110,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
}
|
||||||
],
|
|
||||||
color: [
|
|
||||||
'#00baff',
|
|
||||||
'#3de7c9',
|
|
||||||
'#ffffff',
|
|
||||||
'#ffc53d',
|
|
||||||
'#469f4b'
|
|
||||||
],
|
|
||||||
active: true
|
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
async init () {
|
||||||
|
const { getAllPaths, getChartsData } = this
|
||||||
|
|
||||||
// 底部第一个图表数据
|
await getAllPaths()
|
||||||
bottomChart4StationName: '谭庄收费站北',
|
|
||||||
bottomChart4Data: {
|
await getChartsData()
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 15,
|
|
||||||
title: '收费系统'
|
|
||||||
},
|
},
|
||||||
{
|
getAllPaths () {
|
||||||
value: 110,
|
const { path, $http: { get } } = this
|
||||||
title: '通信系统'
|
|
||||||
},
|
return get(path).then(({ code, data }) => {
|
||||||
{
|
if (code === 'success') {
|
||||||
value: 23,
|
this.paths = data.interfaces
|
||||||
title: '监控系统'
|
} else {
|
||||||
},
|
console.error('数据返回异常!')
|
||||||
{
|
|
||||||
value: 66,
|
|
||||||
title: '供配电系统'
|
|
||||||
}
|
}
|
||||||
],
|
}).catch(e => {
|
||||||
color: [
|
console.error('DataV接口数据异常!')
|
||||||
'#00baff',
|
})
|
||||||
'#3de7c9',
|
},
|
||||||
'#ffffff',
|
getChartsData () {
|
||||||
'#ffc53d',
|
const { paths, getChartData, getChartsData } = this
|
||||||
'#469f4b'
|
|
||||||
],
|
return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
|
||||||
active: true
|
},
|
||||||
|
async getChartData ({ number, url }) {
|
||||||
|
const { $http: { get }, color } = this
|
||||||
|
|
||||||
|
return get(url).then(({ code, data }) => {
|
||||||
|
if (code === 'success') {
|
||||||
|
this[`chart${number}Name`] = data.name
|
||||||
|
this[`chart${number}Data`] = {
|
||||||
|
data: data.data,
|
||||||
|
color,
|
||||||
|
active: !(number === 2 || number === 8)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
console.error(`${number}接口异常`)
|
||||||
|
}
|
||||||
|
}).catch(e => console.error(`${number}接口异常`))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {},
|
created () {
|
||||||
created () {}
|
const { init } = this
|
||||||
|
|
||||||
|
init()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,30 +23,30 @@
|
||||||
|
|
||||||
<border-box-5 class="top-left-box-1">
|
<border-box-5 class="top-left-box-1">
|
||||||
<div class="tlb-text">
|
<div class="tlb-text">
|
||||||
<div>{{ topLeftCard1Data[0] }}</div>
|
<div>{{ chart1Data.monthSum }}</div>
|
||||||
<div class="small-text">{{ topLeftCard1Data[1] }}</div>
|
<div class="small-text">{{ chart1Data.lastMonthSum }}</div>
|
||||||
<div class="small-text">{{ topLeftCard1Data[2] }}</div>
|
<div class="small-text">{{ chart1Data.lastYearMonthSum }}</div>
|
||||||
</div>
|
</div>
|
||||||
</border-box-5>
|
</border-box-5>
|
||||||
|
|
||||||
<border-box-5 class="top-left-box-2" :reverse="true">
|
<border-box-5 class="top-left-box-2" :reverse="true">
|
||||||
<div class="tlb-text">
|
<div class="tlb-text">
|
||||||
<div>{{ topLeftCard2Data[0] }}</div>
|
<div>{{ chart1Data.personDayAvg }}</div>
|
||||||
<div class="small-text">{{ topLeftCard2Data[1] }}</div>
|
<div class="small-text">{{ chart1Data.personLastMonthDayAvg }}</div>
|
||||||
<div class="small-text">{{ topLeftCard2Data[2] }}</div>
|
<div class="small-text">{{ chart1Data.personLastYearMonthDayAvg }}</div>
|
||||||
</div>
|
</div>
|
||||||
</border-box-5>
|
</border-box-5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-right">
|
<div class="top-right">
|
||||||
<polyline-chart :data="topRightChart1Data">
|
<polyline-chart :data="chart2Data">
|
||||||
<div class="title-item">
|
<div class="title-item">
|
||||||
设备完好率月趋势
|
设备完好率月趋势
|
||||||
<decoration-3 />
|
<decoration-3 />
|
||||||
</div>
|
</div>
|
||||||
</polyline-chart>
|
</polyline-chart>
|
||||||
|
|
||||||
<polyline-chart :data="topRightChart2Data">
|
<polyline-chart :data="chart3Data">
|
||||||
<div class="title-item">
|
<div class="title-item">
|
||||||
设备故障月趋势
|
设备故障月趋势
|
||||||
<decoration-3 />
|
<decoration-3 />
|
||||||
|
|
@ -62,13 +62,13 @@
|
||||||
|
|
||||||
<div class="bottom-left-item">
|
<div class="bottom-left-item">
|
||||||
<div class="bli-title">机电设备完好率</div>
|
<div class="bli-title">机电设备完好率</div>
|
||||||
<div class="bli-value left-value">99.06</div>
|
<div class="bli-value left-value">{{ chart4Data.deviceNormalPercent }}</div>
|
||||||
<arc-ring-chart class="bli-chart" :data="bottomLeftChart1Data" />
|
<arc-ring-chart class="bli-chart" :data="chart4Data.data" />
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-left-item">
|
<div class="bottom-left-item">
|
||||||
<div class="bli-title">任务维修平均用时</div>
|
<div class="bli-title">任务维修平均用时</div>
|
||||||
<div class="bli-value right-value">55.0</div>
|
<div class="bli-value right-value">{{ chart5Data.avgTime}}</div>
|
||||||
<concentric-arc-chart class="bli-chart" :data="bottomLeftChart2Data" />
|
<concentric-arc-chart class="bli-chart" :data="chart5Data.data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-6>
|
</border-box-6>
|
||||||
|
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
<img src="./img/1.png" />人员贡献排行榜
|
<img src="./img/1.png" />人员贡献排行榜
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<scroll-board :data="bottomRightScrollBorad1Data" />
|
<scroll-board :data="chart6Data" />
|
||||||
</border-box-6>
|
</border-box-6>
|
||||||
|
|
||||||
<border-box-6 class="bottom-right-item">
|
<border-box-6 class="bottom-right-item">
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
<img src="./img/2.png" />故障设备排行榜
|
<img src="./img/2.png" />故障设备排行榜
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<scroll-board :data="bottomRightScrollBorad2Data" />
|
<scroll-board :data="chart7Data" />
|
||||||
</border-box-6>
|
</border-box-6>
|
||||||
|
|
||||||
<border-box-6 class="bottom-right-item">
|
<border-box-6 class="bottom-right-item">
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
<img src="./img/4.png" />故障位置排行榜
|
<img src="./img/4.png" />故障位置排行榜
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<scroll-board :data="bottomRightScrollBorad4Data" />
|
<scroll-board :data="chart9Data" />
|
||||||
</border-box-6>
|
</border-box-6>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,15 +116,20 @@ export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
||||||
topMiddleTitle: '漯周界-机电运维管理台',
|
topMiddleTitle: '机电运维管理台',
|
||||||
|
|
||||||
// 上部左边第一个卡片数据
|
// 上部左边卡片数据
|
||||||
topLeftCard1Data: ['22.0', '66', '0'],
|
chart1Data: {
|
||||||
// 上部左边第二个卡片数据
|
monthSum: 0,
|
||||||
topLeftCard2Data: ['0.1', '66', '0'],
|
lastMonthSum: 81,
|
||||||
|
lastYearMonthSum: 0,
|
||||||
|
personDayAvg: 0.1,
|
||||||
|
personLastMonthDayAvg: 0.3,
|
||||||
|
personLastYearMonthDayAvg: 0
|
||||||
|
},
|
||||||
|
|
||||||
// 上部右边第一个图表数据
|
// 上部右边第一个图表数据
|
||||||
topRightChart1Data: {
|
chart2Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -154,11 +159,12 @@ export default {
|
||||||
fixed: 2,
|
fixed: 2,
|
||||||
num: 10,
|
num: 10,
|
||||||
unit: '%'
|
unit: '%'
|
||||||
}
|
},
|
||||||
|
labelLine: ['设备完好率']
|
||||||
},
|
},
|
||||||
|
|
||||||
// 上部右边第二个图表数据
|
// 上部右边第二个图表数据
|
||||||
topRightChart2Data: {
|
chart3Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -221,7 +227,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部左边第一个图表数据
|
// 底部左边第一个图表数据
|
||||||
bottomLeftChart1Data: {
|
chart4Data: {
|
||||||
|
data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 19,
|
value: 19,
|
||||||
|
|
@ -246,9 +253,12 @@ export default {
|
||||||
],
|
],
|
||||||
color: ['#00c0ff', '#3de7c9', '#fff']
|
color: ['#00c0ff', '#3de7c9', '#fff']
|
||||||
},
|
},
|
||||||
|
deviceNormalPercent: 99.01
|
||||||
|
},
|
||||||
|
|
||||||
// 底部左边第二个图表数据
|
// 底部左边第二个图表数据
|
||||||
bottomLeftChart2Data: {
|
chart5Data: {
|
||||||
|
data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 0.38,
|
value: 0.38,
|
||||||
|
|
@ -276,9 +286,11 @@ export default {
|
||||||
arcGap: 5,
|
arcGap: 5,
|
||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
|
avgTime: 55.1
|
||||||
|
},
|
||||||
|
|
||||||
// 底部右边第一个滚动榜单数据
|
// 底部右边第一个滚动榜单数据
|
||||||
bottomRightScrollBorad1Data: {
|
chart6Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
title: '赵亚伟',
|
title: '赵亚伟',
|
||||||
|
|
@ -317,7 +329,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部右边第二个滚动榜单数据
|
// 底部右边第二个滚动榜单数据
|
||||||
bottomRightScrollBorad2Data: {
|
chart7Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
title: '液晶显示器',
|
title: '液晶显示器',
|
||||||
|
|
@ -379,7 +391,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底部右边第四个滚动榜单数据
|
// 底部右边第四个滚动榜单数据
|
||||||
bottomRightScrollBorad4Data: {
|
chart9Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
title: '收费广场',
|
title: '收费广场',
|
||||||
|
|
@ -403,10 +415,58 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
showItemNum: 4
|
showItemNum: 4
|
||||||
|
},
|
||||||
|
|
||||||
|
path: '/rest/datav/manage/interface/list',
|
||||||
|
paths: []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async init () {
|
||||||
|
const { getAllPaths, getChartsData } = this
|
||||||
|
|
||||||
|
await getAllPaths()
|
||||||
|
|
||||||
|
await getChartsData()
|
||||||
|
},
|
||||||
|
getAllPaths () {
|
||||||
|
const { path, $http: { get } } = this
|
||||||
|
|
||||||
|
return get(path).then(({ code, data }) => {
|
||||||
|
if (code === 'success') {
|
||||||
|
this.paths = data.interfaces
|
||||||
|
|
||||||
|
this.topMiddleTitle = data.title
|
||||||
|
} else {
|
||||||
|
console.error('数据返回异常!')
|
||||||
|
}
|
||||||
|
}).catch(e => {
|
||||||
|
console.error('DataV接口数据异常!')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getChartsData () {
|
||||||
|
const { paths, getChartData, getChartsData } = this
|
||||||
|
|
||||||
|
return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
|
||||||
|
},
|
||||||
|
async getChartData ({ number, url }) {
|
||||||
|
const { $http: { get } } = this
|
||||||
|
|
||||||
|
if (!url) return
|
||||||
|
|
||||||
|
return get(url).then(({ code, data }) => {
|
||||||
|
if (code === 'success') {
|
||||||
|
this[`chart${number}Data`] = data
|
||||||
|
} else {
|
||||||
|
console.error(`${number}接口异常`)
|
||||||
|
}
|
||||||
|
}).catch(e => console.error(`${number}接口异常`))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
const { init } = this
|
||||||
|
|
||||||
|
init()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue