增加设备综合数据看板页面
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