增加设备综合数据看板页面
parent
e0f5ae616e
commit
e8edb52bda
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
<top-header />
|
||||
<div class="main-content">
|
||||
<!-- <digital-flop />-->
|
||||
<cards />
|
||||
|
||||
<div class="block-left-right-content">
|
||||
<ranking-board />
|
||||
|
||||
<div class="block-top-bottom-content">
|
||||
<div class="block-top-content">
|
||||
<rose-chart />
|
||||
|
||||
<water-level-chart />
|
||||
|
||||
<scroll-board />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topHeader from './index5/topHeader'
|
||||
import digitalFlop from './index5/digitalFlop'
|
||||
import rankingBoard from './index5/rankingBoard'
|
||||
import roseChart from './index5/roseChart'
|
||||
import waterLevelChart from './index5/waterLevelChart'
|
||||
import scrollBoard from './index5/scrollBoard'
|
||||
import cards from './index5/cards'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
topHeader,
|
||||
digitalFlop,
|
||||
rankingBoard,
|
||||
roseChart,
|
||||
waterLevelChart,
|
||||
scrollBoard,
|
||||
cards
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url("~@/assets/board/bg.png");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-left-right-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.block-top-bottom-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.block-top-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div id="cards">
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="(card, i) in cards"
|
||||
:key="card.title"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">{{ card.title }}</div>
|
||||
<div class="card-header-right">{{ '0' + (i + 1) }}</div>
|
||||
</div>
|
||||
<dv-charts class="ring-charts" :option="card.ring" />
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">{{ card.desc }}</div>
|
||||
<div class="footer-detail">
|
||||
<dv-digital-flop :config="card.total" style="width:70%;height:35px;" />条
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">已处理</div>
|
||||
<div class="footer-detail">
|
||||
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
|
||||
getCompletedRate,
|
||||
} from "@/api/kanban/spectaculars";
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data () {
|
||||
return {
|
||||
cards: [
|
||||
{
|
||||
title: "点检",
|
||||
desc: "今日",
|
||||
total: {
|
||||
number: [],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#ea6027',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
num: {
|
||||
number: [],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#26fcd8',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
ring: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: -Math.PI / 2,
|
||||
endAngle: Math.PI * 1.5,
|
||||
arcLineWidth: 13,
|
||||
radius: '80%',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
backgroundArc: {
|
||||
style: {
|
||||
stroke: '#224590'
|
||||
}
|
||||
},
|
||||
details: {
|
||||
show: true,
|
||||
formatter: '完成占比{value}%',
|
||||
style: {
|
||||
fill: '#1ed3e5',
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#03d3ec']
|
||||
}
|
||||
},
|
||||
],
|
||||
equipmentinfo: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
// const { randomExtend } = this
|
||||
|
||||
const _this = this;
|
||||
const titles = ['点检', '巡检', '保养', '维修'];
|
||||
const dataMap = { // 建立标题与数据字段的映射关系
|
||||
'点检': ['spotInspectionTotal', 'spotInspectionFinish'],
|
||||
'巡检': ['inspectionTotal', 'inspectionFinish'],
|
||||
'保养': ['maintenanceTotal', 'maintenanceFinish'],
|
||||
'维修': ['repairTotal', 'repairFinish']
|
||||
};
|
||||
getCompletedRate({
|
||||
poolName: "ds_1000",
|
||||
}).then((response) => {
|
||||
if (response.data) {
|
||||
_this.equipmentinfo = response.data;
|
||||
|
||||
this.cards = titles.map(title => {
|
||||
const [totalKey, finishKey] = dataMap[title];
|
||||
const total = this.equipmentinfo[totalKey] || 0; // 避免除零
|
||||
const finish = this.equipmentinfo[finishKey] || 0;
|
||||
const ratio = Number((finish / total).toFixed(2));
|
||||
return {
|
||||
|
||||
title: title,
|
||||
desc: title === '保养' || '巡检' ? '本月' : '今日',
|
||||
total: {
|
||||
number: [total],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#ea6027',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
num: {
|
||||
number: [finish],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#26fcd8',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
ring: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: -Math.PI / 2,
|
||||
endAngle: Math.PI * 1.5,
|
||||
arcLineWidth: 13,
|
||||
radius: '80%',
|
||||
data: [{ name: '占比', value: ratio || 0 }],
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
backgroundArc: {
|
||||
style: {
|
||||
stroke: '#224590'
|
||||
}
|
||||
},
|
||||
details: {
|
||||
show: true,
|
||||
formatter: '完成占比{value}%',
|
||||
style: {
|
||||
fill: '#1ed3e5',
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#03d3ec']
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(this.createData, 30000)
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 45%;
|
||||
|
||||
.card-item {
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
width: 22%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
height: 20%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-header-left {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
padding-right: 20px;
|
||||
font-size: 40px;
|
||||
color: #03d3ec;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
padding: 5px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
background-color: rgba(6, 30, 93, 0.7);
|
||||
border-radius: 3px;
|
||||
|
||||
.footer-title {
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-detail {
|
||||
font-size: 20px;
|
||||
color: #1294fb;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
|
||||
.dv-digital-flop {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div id="digital-flop">
|
||||
<div
|
||||
class="digital-flop-item"
|
||||
v-for="item in digitalFlopData"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="digital-flop-title">{{ item.title }}</div>
|
||||
<div class="digital-flop">
|
||||
<dv-digital-flop
|
||||
:config="item.number"
|
||||
style="width:100px;height:50px;"
|
||||
/>
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.digitalFlopData = [
|
||||
{
|
||||
title: '点检',
|
||||
number: {
|
||||
number: [randomExtend(20000, 30000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '次'
|
||||
},
|
||||
{
|
||||
title: '巡检',
|
||||
number: {
|
||||
number: [randomExtend(20, 30)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#f46827',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '次'
|
||||
},
|
||||
{
|
||||
title: '保养',
|
||||
number: {
|
||||
number: [randomExtend(20, 30)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#40faee',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '次'
|
||||
},
|
||||
{
|
||||
title: '维修',
|
||||
number: {
|
||||
number: [randomExtend(10, 20)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '次'
|
||||
},
|
||||
// {
|
||||
// title: '隧道',
|
||||
// number: {
|
||||
// number: [randomExtend(5, 10)],
|
||||
// content: '{nt}',
|
||||
// textAlign: 'right',
|
||||
// style: {
|
||||
// fill: '#f46827',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// unit: '个'
|
||||
// },
|
||||
// {
|
||||
// title: '服务区',
|
||||
// number: {
|
||||
// number: [randomExtend(5, 10)],
|
||||
// content: '{nt}',
|
||||
// textAlign: 'right',
|
||||
// style: {
|
||||
// fill: '#40faee',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// unit: '个'
|
||||
// },
|
||||
// {
|
||||
// title: '收费站',
|
||||
// number: {
|
||||
// number: [randomExtend(5, 10)],
|
||||
// content: '{nt}',
|
||||
// textAlign: 'right',
|
||||
// style: {
|
||||
// fill: '#4d99fc',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// unit: '个'
|
||||
// },
|
||||
// {
|
||||
// title: '超限站',
|
||||
// number: {
|
||||
// number: [randomExtend(5, 10)],
|
||||
// content: '{nt}',
|
||||
// textAlign: 'right',
|
||||
// style: {
|
||||
// fill: '#f46827',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// unit: '个'
|
||||
// },
|
||||
// {
|
||||
// title: '停车区',
|
||||
// number: {
|
||||
// number: [randomExtend(5, 10)],
|
||||
// content: '{nt}',
|
||||
// textAlign: 'right',
|
||||
// style: {
|
||||
// fill: '#40faee',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// unit: '个'
|
||||
// }
|
||||
]
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#digital-flop {
|
||||
position: relative;
|
||||
height: 15%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
|
||||
.dv-decoration-10 {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
height: 5px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.digital-flop-item {
|
||||
width: 20%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 3px solid rgb(6, 30, 93);
|
||||
border-right: 3px solid rgb(6, 30, 93);
|
||||
}
|
||||
|
||||
.digital-flop-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div id="top-header">
|
||||
<dv-decoration-8 class="header-left-decoration" />
|
||||
<dv-decoration-5 class="header-center-decoration" />
|
||||
<dv-decoration-8 class="header-right-decoration" :reverse="true" />
|
||||
<div class="center-title">设备管理综合数据</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopHeader'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#top-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-center-decoration {
|
||||
width: 40%;
|
||||
height: 60px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.header-left-decoration, .header-right-decoration {
|
||||
width: 25%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
top: 15px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue