大屏发布
This commit is contained in:
熊丽君
@ -26,8 +26,8 @@ import Pagination from "@/components/Pagination";
|
|||||||
import RightToolbar from "@/components/RightToolbar"
|
import RightToolbar from "@/components/RightToolbar"
|
||||||
|
|
||||||
// 将自动注册所有组件为全局组件
|
// 将自动注册所有组件为全局组件
|
||||||
import dataV from '@jiaminghi/data-view'
|
// import dataV from '@jiaminghi/data-view'
|
||||||
Vue.use(dataV)
|
// Vue.use(dataV)
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
Vue.prototype.getDicts = getDicts
|
Vue.prototype.getDicts = getDicts
|
||||||
|
|||||||
@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content-box">
|
|
||||||
<div><span>电池总数</span><span>748</span></div>
|
|
||||||
<div><span>电池白名单数</span><span>334</span></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.content-box {
|
|
||||||
// padding: 10px;
|
|
||||||
padding: 10px 30px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
height: calc(100% - 20px);
|
|
||||||
div{
|
|
||||||
// border: 1px solid #f00;
|
|
||||||
// box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
|
|
||||||
background-image: url("../../../assets/image/ltbg.png");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
padding: 10px 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
>span:nth-child(2){
|
|
||||||
font-weight:700;
|
|
||||||
font-size: 24px;
|
|
||||||
color: #ff4c4c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>div:nth-child(2) span:nth-child(2){
|
|
||||||
color: #35ffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
341
src/views/chart/custom_map_config.json
Normal file
341
src/views/chart/custom_map_config.json
Normal file
@ -0,0 +1,341 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"featureType": "land",
|
||||||
|
"elementType": "all",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "on",
|
||||||
|
"color": "#0b215c"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "water",
|
||||||
|
"elementType": "all",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "on",
|
||||||
|
"color": "#c4d7f500"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "green",
|
||||||
|
"elementType": "all",
|
||||||
|
"stylers": {
|
||||||
|
"color": "#dcf2d5ff",
|
||||||
|
"lightness": -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "education",
|
||||||
|
"elementType": "all",
|
||||||
|
"stylers": {
|
||||||
|
"color": "#d5a6bdff",
|
||||||
|
"lightness": -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "land",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"color": "#071848"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "highway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "highway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "nationalway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "nationalway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "provincialway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "provincialway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "cityhighway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "cityhighway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "scenicspotsway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "universityway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "vacationway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "railway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "subway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "subway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "subway",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "highwaysign",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "highwaysign",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "nationalwaysign",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "nationalwaysign",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "provincialwaysign",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "provincialwaysign",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "tertiarywaysign",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "tertiarywaysign",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "subwaylabel",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "subwaylabel",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "village",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "arterial",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "arterial",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "arterial",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "tertiaryway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "tertiaryway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "tertiaryway",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "fourlevelway",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "fourlevelway",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "fourlevelway",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "local",
|
||||||
|
"elementType": "geometry",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "local",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "local",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "districtlabel",
|
||||||
|
"elementType": "labels.text.fill",
|
||||||
|
"stylers": {
|
||||||
|
"color": "#19f1ecff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "districtlabel",
|
||||||
|
"elementType": "labels.text.stroke",
|
||||||
|
"stylers": {
|
||||||
|
"color": "#ffffff00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "districtlabel",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"featureType": "town",
|
||||||
|
"elementType": "labels",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"featureType": "town",
|
||||||
|
"elementType": "labels.icon",
|
||||||
|
"stylers": {
|
||||||
|
"visibility": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -7,51 +7,72 @@
|
|||||||
<!-- <div class="des">锐能在线设备：{{ devCount }}</div> -->
|
<!-- <div class="des">锐能在线设备：{{ devCount }}</div> -->
|
||||||
<div ref="bmap" id="main" style="width: 100%;height:65%;"></div>
|
<div ref="bmap" id="main" style="width: 100%;height:65%;"></div>
|
||||||
<div class="my_cenbottom">
|
<div class="my_cenbottom">
|
||||||
<div>产品总数：<span style="color:#4ee7e6">10</span></div>
|
<div>
|
||||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
产品总数：<span style="color:#4ee7e6">{{ productNum }}</span>
|
||||||
<div>产品总数：<span style="color:#d96dd6">10</span></div>
|
</div>
|
||||||
|
<div>
|
||||||
|
项目总数：<span style="color:#ff4c4c">{{ projectNum }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
客户总数：<span style="color:#d96dd6">{{ userNum }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my_cenbottom">
|
<div class="my_cenbottom">
|
||||||
<div>产品总数：<span style="color:#41dd83">10</span></div>
|
<div>
|
||||||
<div>产品总数：<span style="color:#edcc1a">10</span></div>
|
固件总数：<span style="color:#41dd83">{{ updateFileNum }}</span>
|
||||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
</div>
|
||||||
|
<div>
|
||||||
|
派单总数：<span style="color:#edcc1a">{{ orderNum }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
告警总数：<span style="color:#ff4c4c">{{ warnNum }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="left column">
|
<div class="left column">
|
||||||
<boxBoardBody class="flex">
|
<boxBoardBody class="flex">
|
||||||
<boxBoardTit slot="tit" tit="总览"></boxBoardTit>
|
<boxBoardTit slot="tit" tit="总览"></boxBoardTit>
|
||||||
<leftTop></leftTop>
|
<div class="content-box">
|
||||||
|
<div>
|
||||||
|
<span>电池总数</span><span>{{ deviceNum }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>电池白名单数</span><span>{{ whiteNum }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</boxBoardBody>
|
</boxBoardBody>
|
||||||
<div style="height:20px"></div>
|
<div style="height:20px"></div>
|
||||||
<boxBoardBody class="flex">
|
<boxBoardBody class="flex">
|
||||||
<boxBoardTit slot="tit" tit="工单总览"></boxBoardTit>
|
<boxBoardTit slot="tit" tit="派单总览"></boxBoardTit>
|
||||||
<div class="my_context">
|
<div class="my_context">
|
||||||
<div class="my_item">
|
<div class="my_item">
|
||||||
<el-progress
|
<el-progress
|
||||||
type="circle"
|
type="circle"
|
||||||
:percentage="33"
|
:percentage="num1"
|
||||||
:stroke-width="13"
|
:stroke-width="13"
|
||||||
color="#13cf5e"
|
color="#13cf5e"
|
||||||
stroke-linecap="square"
|
stroke-linecap="square"
|
||||||
></el-progress>
|
></el-progress>
|
||||||
<span>代派单：150</span>
|
<span>处理中：{{ handleNum }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="my_item">
|
<div class="my_item">
|
||||||
<el-progress
|
<el-progress
|
||||||
type="circle"
|
type="circle"
|
||||||
:percentage="22"
|
:percentage="num2"
|
||||||
:stroke-width="13"
|
:stroke-width="13"
|
||||||
|
stroke-linecap="square"
|
||||||
></el-progress>
|
></el-progress>
|
||||||
<span>处理中：100</span>
|
<span>审批中：{{ approveNum }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="my_item">
|
<div class="my_item">
|
||||||
<el-progress
|
<el-progress
|
||||||
type="circle"
|
type="circle"
|
||||||
:percentage="44"
|
:percentage="num3"
|
||||||
:stroke-width="13"
|
:stroke-width="13"
|
||||||
color="#ff9494"
|
color="#ff9494"
|
||||||
|
stroke-linecap="square"
|
||||||
></el-progress>
|
></el-progress>
|
||||||
<span>已关闭：200</span>
|
<span>已完成：{{ finishNum }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</boxBoardBody>
|
</boxBoardBody>
|
||||||
@ -95,14 +116,15 @@ import resize from '../dashboard/mixins/resize';
|
|||||||
|
|
||||||
import boxBoardTit from './boxBoardTit';
|
import boxBoardTit from './boxBoardTit';
|
||||||
import boxBoardBody from './boxBoardBody';
|
import boxBoardBody from './boxBoardBody';
|
||||||
import leftTop from './components/leftTop';
|
|
||||||
|
|
||||||
import { parseTime } from '@/utils/ruoyi';
|
import { parseTime } from '@/utils/ruoyi';
|
||||||
|
|
||||||
|
import myStyleJson from './custom_map_config.json';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Chart',
|
name: 'Chart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
components: { boxBoardTit, boxBoardBody, leftTop },
|
components: { boxBoardTit, boxBoardBody },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
bottomChart: null,
|
bottomChart: null,
|
||||||
@ -123,21 +145,53 @@ export default {
|
|||||||
'2': '待回单',
|
'2': '待回单',
|
||||||
'3': '已回单'
|
'3': '已回单'
|
||||||
},
|
},
|
||||||
myStyleJson: [
|
myStyleJson,
|
||||||
{
|
rnNum: 0,
|
||||||
featureType: 'land',
|
ttNum: 0,
|
||||||
elementType: 'geometry',
|
deviceNum: 0,
|
||||||
stylers: {
|
whiteNum: 0,
|
||||||
color: '#f5f6f7ff'
|
handleNum: 0,
|
||||||
}
|
finishNum: 0,
|
||||||
}
|
approveNum: 0,
|
||||||
]
|
projectNum: 0,
|
||||||
|
productNum: 0,
|
||||||
|
userNum: 0,
|
||||||
|
updateFileNum: 0,
|
||||||
|
orderNum: 0,
|
||||||
|
warnNum: 0
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
time() {
|
time() {
|
||||||
return parseTime(this.date, '{h} : {i} : {s}');
|
return parseTime(this.date, '{h} : {i} : {s}');
|
||||||
|
},
|
||||||
|
num1() {
|
||||||
|
return (
|
||||||
|
(
|
||||||
|
(this.handleNum /
|
||||||
|
(this.handleNum + this.approveNum + this.finishNum)) *
|
||||||
|
100
|
||||||
|
).toFixed(2) - 0 || 0
|
||||||
|
);
|
||||||
|
},
|
||||||
|
num2() {
|
||||||
|
return (
|
||||||
|
(
|
||||||
|
(this.approveNum /
|
||||||
|
(this.handleNum + this.approveNum + this.finishNum)) *
|
||||||
|
100
|
||||||
|
).toFixed(2) - 0 || 0
|
||||||
|
);
|
||||||
|
},
|
||||||
|
num3() {
|
||||||
|
return (
|
||||||
|
(
|
||||||
|
(this.finishNum /
|
||||||
|
(this.handleNum + this.approveNum + this.finishNum)) *
|
||||||
|
100
|
||||||
|
).toFixed(2) - 0 || 0
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -149,32 +203,74 @@ export default {
|
|||||||
timer = null;
|
timer = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.getData().then(({ code, msg, list, work, activity, devCount }) => {
|
this.getData().then(
|
||||||
if (200 == code) {
|
({
|
||||||
let spotList = [];
|
code,
|
||||||
list.map(v => {
|
msg,
|
||||||
spotList.push({
|
list,
|
||||||
id: v.id,
|
work,
|
||||||
deviceId: v.deviceId,
|
activity,
|
||||||
deviceName: v.deviceName,
|
devCount,
|
||||||
value: [parseFloat(v.longitude), parseFloat(v.latitude)]
|
deviceNum,
|
||||||
|
whiteNum,
|
||||||
|
handleNum,
|
||||||
|
finishNum,
|
||||||
|
approveNum,
|
||||||
|
deviceMonthNum,
|
||||||
|
rnNum,
|
||||||
|
ttNum,
|
||||||
|
projectNum,
|
||||||
|
productNum,
|
||||||
|
userNum,
|
||||||
|
updateFileNum,
|
||||||
|
orderNum,
|
||||||
|
warnNum,
|
||||||
|
warnMonthNum
|
||||||
|
}) => {
|
||||||
|
if (200 == code) {
|
||||||
|
let spotList = [];
|
||||||
|
list.map(v => {
|
||||||
|
spotList.push({
|
||||||
|
id: v.id,
|
||||||
|
deviceId: v.deviceId,
|
||||||
|
deviceName: v.deviceName,
|
||||||
|
value: [parseFloat(v.longitude), parseFloat(v.latitude)]
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
this.spotList = spotList;
|
// this.spotList = spotList;
|
||||||
this.devCount = devCount;
|
this.spotList = [];
|
||||||
|
this.devCount = devCount;
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.deviceNum = deviceNum;
|
||||||
this.initBmpChart();
|
this.whiteNum = whiteNum;
|
||||||
// this.initTicketAllChart(work);
|
|
||||||
// this.initAlarmAllChart(activity);
|
this.handleNum = handleNum;
|
||||||
this.initCenterChart(activity);
|
this.finishNum = finishNum;
|
||||||
this.initBottomChart();
|
this.approveNum = approveNum;
|
||||||
this.initTopChart();
|
|
||||||
this.initAlarmTrendChart();
|
this.rnNum = rnNum;
|
||||||
});
|
this.ttNum = ttNum;
|
||||||
|
|
||||||
|
(this.projectNum = projectNum),
|
||||||
|
(this.productNum = productNum),
|
||||||
|
(this.userNum = userNum),
|
||||||
|
(this.updateFileNum = updateFileNum),
|
||||||
|
(this.orderNum = orderNum),
|
||||||
|
(this.warnNum = warnNum);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initBmpChart();
|
||||||
|
// this.initTicketAllChart(work);
|
||||||
|
// this.initAlarmAllChart(activity);
|
||||||
|
this.initCenterChart(activity);
|
||||||
|
this.initBottomChart(deviceMonthNum);
|
||||||
|
this.initTopChart();
|
||||||
|
this.initAlarmTrendChart(warnMonthNum);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
);
|
||||||
|
|
||||||
// this.getTicketData().then(({ code, msg, day, month }) => {
|
// this.getTicketData().then(({ code, msg, day, month }) => {
|
||||||
// if (200 == code) {
|
// if (200 == code) {
|
||||||
@ -193,12 +289,12 @@ export default {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getTicketData() {
|
// getTicketData() {
|
||||||
return request({
|
// return request({
|
||||||
url: '/system/warning/warningList',
|
// url: '/system/warning/warningList',
|
||||||
method: 'get'
|
// method: 'get'
|
||||||
});
|
// });
|
||||||
},
|
// },
|
||||||
initTicketAllChart(ticketAll) {
|
initTicketAllChart(ticketAll) {
|
||||||
if (!this.ticketAllChart) {
|
if (!this.ticketAllChart) {
|
||||||
this.ticketAllChart = echarts.init(this.$refs.ticketAll);
|
this.ticketAllChart = echarts.init(this.$refs.ticketAll);
|
||||||
@ -254,25 +350,20 @@ export default {
|
|||||||
};
|
};
|
||||||
this.ticketAllChart.setOption(option);
|
this.ticketAllChart.setOption(option);
|
||||||
},
|
},
|
||||||
initAlarmTrendChart() {
|
initAlarmTrendChart(monthNum) {
|
||||||
this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
|
this.alarmTrendChart = echarts.init(this.$refs.alarmTrend);
|
||||||
|
let months = [];
|
||||||
|
let nums = [];
|
||||||
|
monthNum.map(item => {
|
||||||
|
// item.month += '月';
|
||||||
|
months.push(item.month);
|
||||||
|
nums.push(item.num);
|
||||||
|
});
|
||||||
let option = {
|
let option = {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
name: '数量',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: months,
|
||||||
'01月',
|
|
||||||
'02月',
|
|
||||||
'03月',
|
|
||||||
'04月',
|
|
||||||
'05月',
|
|
||||||
'06月',
|
|
||||||
'07月',
|
|
||||||
'08月',
|
|
||||||
'09月',
|
|
||||||
'10月',
|
|
||||||
'11月',
|
|
||||||
'12月'
|
|
||||||
],
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//这是x轴文字颜色
|
//这是x轴文字颜色
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -281,6 +372,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
name: '月份',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//这是x轴文字颜色
|
//这是x轴文字颜色
|
||||||
@ -291,20 +383,7 @@ export default {
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [
|
data: nums,
|
||||||
820,
|
|
||||||
932,
|
|
||||||
901,
|
|
||||||
934,
|
|
||||||
1290,
|
|
||||||
1330,
|
|
||||||
1320,
|
|
||||||
820,
|
|
||||||
932,
|
|
||||||
901,
|
|
||||||
934,
|
|
||||||
1290
|
|
||||||
],
|
|
||||||
// 线的颜色
|
// 线的颜色
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#06ccf9'
|
color: '#06ccf9'
|
||||||
@ -369,7 +448,7 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
initCenterChart(alarmAll) {
|
initCenterChart(alarmAll) {
|
||||||
// initCenterChart1(alarmAll) {
|
// initCenterChart1(alarmAll) {
|
||||||
this.centerChart = echarts.init(this.$refs.centerRight);
|
this.centerChart = echarts.init(this.$refs.centerRight);
|
||||||
let snapAlarmAll = [];
|
let snapAlarmAll = [];
|
||||||
for (let index = 0; index < 4; index++) {
|
for (let index = 0; index < 4; index++) {
|
||||||
@ -457,7 +536,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
initAlarmAllChart(alarmAll) {
|
initAlarmAllChart(alarmAll) {
|
||||||
// initCenterChart(alarmAll) {
|
// initCenterChart(alarmAll) {
|
||||||
// if (!this.alarmAllChart) {
|
// if (!this.alarmAllChart) {
|
||||||
// this.alarmAllChart = echarts.init(this.$refs.alarmAll);
|
// this.alarmAllChart = echarts.init(this.$refs.alarmAll);
|
||||||
// }
|
// }
|
||||||
@ -471,7 +550,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(snapAlarmAll);
|
console.log(snapAlarmAll);
|
||||||
debugger
|
debugger;
|
||||||
let level4 = '四级告警 ' + snapAlarmAll[3];
|
let level4 = '四级告警 ' + snapAlarmAll[3];
|
||||||
let level3 = '三级告警 ' + snapAlarmAll[2];
|
let level3 = '三级告警 ' + snapAlarmAll[2];
|
||||||
let level2 = '二级告警 ' + snapAlarmAll[1];
|
let level2 = '二级告警 ' + snapAlarmAll[1];
|
||||||
@ -566,25 +645,20 @@ export default {
|
|||||||
series: series
|
series: series
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
initBottomChart() {
|
initBottomChart(monthNum) {
|
||||||
this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
|
this.bottomChart = echarts.init(this.$refs.bottomLeftChart);
|
||||||
|
let months = [];
|
||||||
|
let nums = [];
|
||||||
|
monthNum.map(item => {
|
||||||
|
// item.month += '月';
|
||||||
|
months.push(item.month);
|
||||||
|
nums.push(item.num);
|
||||||
|
});
|
||||||
let option = {
|
let option = {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
name: '数量',
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: months,
|
||||||
'01月',
|
|
||||||
'02月',
|
|
||||||
'03月',
|
|
||||||
'04月',
|
|
||||||
'05月',
|
|
||||||
'06月',
|
|
||||||
'07月',
|
|
||||||
'08月',
|
|
||||||
'09月',
|
|
||||||
'10月',
|
|
||||||
'11月',
|
|
||||||
'12月'
|
|
||||||
],
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//这是x轴文字颜色
|
//这是x轴文字颜色
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -593,6 +667,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
name: '月份',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//这是y轴文字颜色
|
//这是y轴文字颜色
|
||||||
@ -615,7 +690,7 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
|
data: nums, //数据
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@ -648,7 +723,7 @@ export default {
|
|||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
@ -657,30 +732,39 @@ export default {
|
|||||||
color: '#fff'
|
color: '#fff'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series : [{
|
series: [
|
||||||
name: '设备详情',
|
{
|
||||||
type: 'pie',
|
name: '设备详情',
|
||||||
radius: ['40%', '70%'],
|
type: 'pie',
|
||||||
center: ['50%', '50%'],
|
radius: ['40%', '70%'],
|
||||||
data:[
|
center: ['50%', '50%'],
|
||||||
{ value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
|
data: [
|
||||||
{ value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
|
{
|
||||||
|
value: this.rnNum,
|
||||||
|
name: '锐能设备',
|
||||||
|
itemStyle: { color: '#0a7ef6' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: this.ttNum,
|
||||||
|
name: '铁塔设备',
|
||||||
|
itemStyle: { color: '#77c8ff' }
|
||||||
|
}
|
||||||
],
|
],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
},
|
},
|
||||||
normal:{
|
normal: {
|
||||||
label:{
|
label: {
|
||||||
show: true,
|
show: true
|
||||||
// formatter: '{b} : {c} ({d}%)'
|
// formatter: '{b} : {c} ({d}%)'
|
||||||
},
|
},
|
||||||
labelLine :{show:true}
|
labelLine: { show: true }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.topChart.setOption(option);
|
this.topChart.setOption(option);
|
||||||
@ -804,6 +888,7 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
background-image: url('../../assets/image/chartbg.png');
|
background-image: url('../../assets/image/chartbg.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
@ -815,12 +900,11 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
}
|
||||||
.center,
|
.center,
|
||||||
.left,
|
.left,
|
||||||
.right {
|
.right {
|
||||||
border: 1px solid #f00;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 28vw;
|
width: 28vw;
|
||||||
@ -853,6 +937,32 @@ export default {
|
|||||||
right: 0;
|
right: 0;
|
||||||
padding: 70px 35px 15px 2px;
|
padding: 70px 35px 15px 2px;
|
||||||
}
|
}
|
||||||
|
.content-box {
|
||||||
|
// padding: 10px;
|
||||||
|
padding: 10px 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
div {
|
||||||
|
// border: 1px solid #f00;
|
||||||
|
// box-shadow: 0px 0px 10px 2px rgb(60,172,238) inset;
|
||||||
|
background-image: url('../../assets/image/ltbg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
> span:nth-child(2) {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ff4c4c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:nth-child(2) span:nth-child(2) {
|
||||||
|
color: #35ffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
.my_context {
|
.my_context {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -875,11 +985,11 @@ export default {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
}
|
}
|
||||||
.my_cenbottom{
|
.my_cenbottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
margin-top: 23px;
|
margin-top: 23px;
|
||||||
div{
|
div {
|
||||||
width: 210px;
|
width: 210px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -887,7 +997,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
background-image: url('../../assets/image/xiaokuang.png');
|
background-image: url('../../assets/image/xiaokuang.png');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
span{
|
span {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -152,8 +152,8 @@ export default {
|
|||||||
<span>派单编号：{this.tableHeader.id}</span>
|
<span>派单编号：{this.tableHeader.id}</span>
|
||||||
<span>派单时间：{this.tableHeader.createTime}</span>
|
<span>派单时间：{this.tableHeader.createTime}</span>
|
||||||
<span>处理人：{this.tableHeader.nick_name}</span>
|
<span>处理人：{this.tableHeader.nick_name}</span>
|
||||||
<span>提交时间：{this.tableHeader.finishTime}</span>
|
<span>提交时间：{this.tableHeader.updateTime}</span>
|
||||||
<span>通过时间：{this.tableHeader.updateTime}</span>
|
<span>通过时间：{this.tableHeader.finishTime}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>派单备注：{this.tableHeader.note}</div>
|
<div>派单备注：{this.tableHeader.note}</div>
|
||||||
<div>驳回备注：{this.tableHeader.rejectNote}</div>
|
<div>驳回备注：{this.tableHeader.rejectNote}</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user