some modfiy
This commit is contained in:
jiaming
parent
d3980afde7
commit
daeb70c182
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="header">
|
|
||||||
<div class="left">技术支持：河南东方世纪交通科技股份有限公司</div>
|
|
||||||
<div class="middle">漯周界-机电设备电子档案</div>
|
|
||||||
<border-box-2 class="right">
|
|
||||||
综合管理台
|
|
||||||
</border-box-2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Header'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import url('../../assets/style/index.less');
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
height: 80px;
|
|
||||||
|
|
||||||
.left, .middle, .right {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
left: 35px;
|
|
||||||
bottom: 0px;
|
|
||||||
font-size: @EFHLFS;
|
|
||||||
color: @EFHLTC;
|
|
||||||
}
|
|
||||||
|
|
||||||
.middle {
|
|
||||||
font-size: @EFHMFS;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 0px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
width: 140px;
|
|
||||||
font-size: @EFHRFS;
|
|
||||||
right: 130px;
|
|
||||||
bottom: -20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,23 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="electronic-file">
|
<div id="electronic-file">
|
||||||
<ef-header />
|
<!-- <ef-header /> -->
|
||||||
|
<div class="header">
|
||||||
|
<div class="left">{{ technicalSupport }}</div>
|
||||||
|
<div class="middle">{{ topMiddleTitle }}</div>
|
||||||
|
<border-box-2 class="right">
|
||||||
|
综合管理台
|
||||||
|
</border-box-2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<border-box-1 class="content">
|
<border-box-1 class="content">
|
||||||
<border-box-3 class="left">
|
<border-box-3 class="left">
|
||||||
<div class="left-title">豫皖省界站</div>
|
<div class="left-title">{{ leftchart1StationName }}</div>
|
||||||
|
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>310</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart1Data ? multipleSum(...leftchart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
||||||
<capsule-chart class="left-chart" />
|
<capsule-chart class="left-chart" :data="leftchart1Data" />
|
||||||
|
|
||||||
<decoration-2 class="left-d2" />
|
<decoration-2 class="left-d2" />
|
||||||
|
|
||||||
<div class="station-name">纸店收费站</div>
|
<div class="station-name">{{ leftchart2StationName }}</div>
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>120</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart2Data ? multipleSum(...leftchart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
|
||||||
<ring-chart class="left-chart" :data="testRingData" />
|
<ring-chart class="left-chart" :data="leftchart2Data" />
|
||||||
|
|
||||||
<div class="station-name">沈丘收费站</div>
|
<div class="station-name">{{ leftchart3StationName }}</div>
|
||||||
<div class="left-device-num"><div>设备运行总数</div><div>188</div></div>
|
<div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart3Data ? multipleSum(...leftchart3Data.data.map(({ value }) => value)) : 0}}</div></div>
|
||||||
<capsule-chart class="left-chart" />
|
<capsule-chart class="left-chart" :data="leftchart3Data" />
|
||||||
</border-box-3>
|
</border-box-3>
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|
@ -31,32 +38,32 @@
|
||||||
|
|
||||||
<div class="rtl-device-num">
|
<div class="rtl-device-num">
|
||||||
<div class="device-num-container">
|
<div class="device-num-container">
|
||||||
设备总数<number-show :number="2137" />
|
设备总数<number-show :number="rightTopChartData ? multipleSum(...rightTopChartData.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>1315</div>
|
<div>{{ rightTopChartData.data[0].value }}</div>
|
||||||
<div>收费站</div>
|
<div>{{ rightTopChartData.data[0].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>415</div>
|
<div>{{ rightTopChartData.data[1].value }}</div>
|
||||||
<div>监控中心</div>
|
<div>{{ rightTopChartData.data[1].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ring-chart :data="testRingData" />
|
<ring-chart :data="rightTopChartData" />
|
||||||
|
|
||||||
<div class="device-num-container">
|
<div class="device-num-container">
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>90</div>
|
<div>{{ rightTopChartData.data[2].value }}</div>
|
||||||
<div>道路外场</div>
|
<div>{{ rightTopChartData.data[2].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="num-item">
|
<div class="num-item">
|
||||||
<div>317</div>
|
<div>{{ rightTopChartData.data[3].value }}</div>
|
||||||
<div>其他</div>
|
<div>{{ rightTopChartData.data[3].title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -65,28 +72,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">漯周界高速监控中心</div>
|
<div class="rtr-title">{{ rightchart1StationName }}</div>
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
<div class="rtr-chart-container">
|
||||||
<div class="device-num">
|
<div class="device-num">
|
||||||
<div>415</div>
|
<div>{{ rightchart1Data ? multipleSum(...rightchart1Data.data.map(({ value }) => value)) : 0 }}</div>
|
||||||
<div>设备运行总数</div>
|
<div>设备运行总数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<capsule-chart class="rtr-chart" />
|
<capsule-chart class="rtr-chart" :data="rightchart1Data" />
|
||||||
</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">漯周界高速服务区</div>
|
<div class="rtr-title">{{ rightchart2StationName }}</div>
|
||||||
|
|
||||||
<div class="rtr-chart-container">
|
<div class="rtr-chart-container">
|
||||||
<div class="device-num">
|
<div class="device-num">
|
||||||
<div>70</div>
|
<div>{{ rightchart2Data ? multipleSum(...rightchart2Data.data.map(({ value }) => value)) : 0}}</div>
|
||||||
<div>设备运行总数</div>
|
<div>设备运行总数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ring-chart class="rtr-chart" :data="testRingData" />
|
<ring-chart class="rtr-chart" :data="rightchart2Data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-4>
|
</border-box-4>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -94,29 +101,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">项城收费站</div>
|
<div class="station-name">{{ bottomChart1StationName }}</div>
|
||||||
<ring-chart :data="testRingData" />
|
<ring-chart :data="bottomChart1Data" />
|
||||||
</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">周口收费站</div>
|
<div class="station-name">{{ bottomChart2StationName }}</div>
|
||||||
<ring-chart :data="testRingData" />
|
<ring-chart :data="bottomChart2Data" />
|
||||||
</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">谭庄收费站南</div>
|
<div class="station-name">{{ bottomChart3StationName }}</div>
|
||||||
<ring-chart :data="testRingData" />
|
<ring-chart :data="bottomChart3Data" />
|
||||||
</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">谭庄收费站北</div>
|
<div class="station-name">{{ bottomChart4StationName }}</div>
|
||||||
<ring-chart :data="testRingData" />
|
<ring-chart :data="bottomChart4Data" />
|
||||||
</div>
|
</div>
|
||||||
</border-box-4>
|
</border-box-4>
|
||||||
|
|
||||||
|
|
@ -127,16 +134,183 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import efHeader from './header'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ElectronicFile',
|
name: 'ElectronicFile',
|
||||||
components: {
|
|
||||||
efHeader
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
testRingData: {
|
technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
|
||||||
|
topMiddleTitle: '漯周界-机电设备电子档案',
|
||||||
|
|
||||||
|
// 左边第一个图表数据
|
||||||
|
leftchart1StationName: '豫宛省界站',
|
||||||
|
leftchart1Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 85,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 44,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 125,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
title: '供配电系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 66,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 左边第二个图表数据
|
||||||
|
leftchart2StationName: '纸店收费站',
|
||||||
|
leftchart2Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 37,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 12,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 105,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 62,
|
||||||
|
title: '供配电系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 29,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 左边第三个图表数据
|
||||||
|
leftchart3StationName: '沈丘收费站',
|
||||||
|
leftchart3Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 119,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 88,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 55,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 101,
|
||||||
|
title: '供配电系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 15,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 右边顶部图表数据
|
||||||
|
rightTopChartData: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 1315,
|
||||||
|
title: '收费站'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 415,
|
||||||
|
title: '监控中心'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 90,
|
||||||
|
title: '道路外场'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 317,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 右边第一个图表数据
|
||||||
|
rightchart1StationName: '漯周界高速监控中心',
|
||||||
|
rightchart1Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 12,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 126,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 36,
|
||||||
|
title: '供配电系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 8,
|
||||||
|
title: '其他'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 右边第二个图表数据
|
||||||
|
rightchart2StationName: '漯周界高速服务区',
|
||||||
|
rightchart2Data: {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 100,
|
value: 100,
|
||||||
|
|
@ -152,7 +326,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 32,
|
value: 32,
|
||||||
title: '供配电系统'
|
title: '供配电'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 12,
|
value: 12,
|
||||||
|
|
@ -166,8 +340,131 @@ export default {
|
||||||
'#ffc53d',
|
'#ffc53d',
|
||||||
'#469f4b'
|
'#469f4b'
|
||||||
],
|
],
|
||||||
active: true,
|
active: false
|
||||||
labelLine: true
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
bottomChart1StationName: '项城收费站',
|
||||||
|
bottomChart1Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 45,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 75,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 96,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 16,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
bottomChart2StationName: '周口收费站',
|
||||||
|
bottomChart2Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 129,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 15,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 22,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 64,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
bottomChart3StationName: '谭庄收费站南',
|
||||||
|
bottomChart3Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 88,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 57,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 23,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 底部第一个图表数据
|
||||||
|
bottomChart4StationName: '谭庄收费站北',
|
||||||
|
bottomChart4Data: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 15,
|
||||||
|
title: '收费系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 110,
|
||||||
|
title: '通信系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 23,
|
||||||
|
title: '监控系统'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 66,
|
||||||
|
title: '供配电系统'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: [
|
||||||
|
'#00baff',
|
||||||
|
'#3de7c9',
|
||||||
|
'#ffffff',
|
||||||
|
'#ffc53d',
|
||||||
|
'#469f4b'
|
||||||
|
],
|
||||||
|
active: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -183,6 +480,37 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
height: 80px;
|
||||||
|
|
||||||
|
.left, .middle, .right {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
left: 35px;
|
||||||
|
bottom: 0px;
|
||||||
|
font-size: @EFHLFS;
|
||||||
|
color: @EFHLTC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
font-size: @EFHMFS;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 140px;
|
||||||
|
font-size: @EFHRFS;
|
||||||
|
right: 130px;
|
||||||
|
bottom: -20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
height: calc(~"100% - 80px");
|
height: calc(~"100% - 80px");
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue