大屏发布
This commit is contained in:
熊丽君
@ -26,8 +26,8 @@ import Pagination from "@/components/Pagination";
|
||||
import RightToolbar from "@/components/RightToolbar"
|
||||
|
||||
// 将自动注册所有组件为全局组件
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
Vue.use(dataV)
|
||||
// import dataV from '@jiaminghi/data-view'
|
||||
// Vue.use(dataV)
|
||||
|
||||
// 全局方法挂载
|
||||
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 ref="bmap" id="main" style="width: 100%;height:65%;"></div>
|
||||
<div class="my_cenbottom">
|
||||
<div>产品总数：<span style="color:#4ee7e6">10</span></div>
|
||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
||||
<div>产品总数：<span style="color:#d96dd6">10</span></div>
|
||||
<div>
|
||||
产品总数：<span style="color:#4ee7e6">{{ productNum }}</span>
|
||||
</div>
|
||||
<div>
|
||||
项目总数：<span style="color:#ff4c4c">{{ projectNum }}</span>
|
||||
</div>
|
||||
<div>
|
||||
客户总数：<span style="color:#d96dd6">{{ userNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my_cenbottom">
|
||||
<div>产品总数：<span style="color:#41dd83">10</span></div>
|
||||
<div>产品总数：<span style="color:#edcc1a">10</span></div>
|
||||
<div>产品总数：<span style="color:#ff4c4c">10</span></div>
|
||||
<div>
|
||||
固件总数：<span style="color:#41dd83">{{ updateFileNum }}</span>
|
||||
</div>
|
||||
<div>
|
||||
派单总数：<span style="color:#edcc1a">{{ orderNum }}</span>
|
||||
</div>
|
||||
<div>
|
||||
告警总数：<span style="color:#ff4c4c">{{ warnNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left column">
|
||||
<boxBoardBody class="flex">
|
||||
<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>
|
||||
<div style="height:20px"></div>
|
||||
<boxBoardBody class="flex">
|
||||
<boxBoardTit slot="tit" tit="工单总览"></boxBoardTit>
|
||||
<boxBoardTit slot="tit" tit="派单总览"></boxBoardTit>
|
||||
<div class="my_context">
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="33"
|
||||
:percentage="num1"
|
||||
:stroke-width="13"
|
||||
color="#13cf5e"
|
||||
stroke-linecap="square"
|
||||
></el-progress>
|
||||
<span>代派单：150</span>
|
||||
<span>处理中：{{ handleNum }}</span>
|
||||
</div>
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="22"
|
||||
:percentage="num2"
|
||||
:stroke-width="13"
|
||||
stroke-linecap="square"
|
||||
></el-progress>
|
||||
<span>处理中：100</span>
|
||||
<span>审批中：{{ approveNum }}</span>
|
||||
</div>
|
||||
<div class="my_item">
|
||||
<el-progress
|
||||
type="circle"
|
||||
:percentage="44"
|
||||
:percentage="num3"
|
||||
:stroke-width="13"
|
||||
color="#ff9494"
|
||||
stroke-linecap="square"
|
||||
></el-progress>
|
||||
<span>已关闭：200</span>
|
||||
<span>已完成：{{ finishNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</boxBoardBody>
|
||||
@ -95,14 +116,15 @@ import resize from '../dashboard/mixins/resize';
|
||||
|
||||
import boxBoardTit from './boxBoardTit';
|
||||
import boxBoardBody from './boxBoardBody';
|
||||
import leftTop from './components/leftTop';
|
||||
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
|
||||
import myStyleJson from './custom_map_config.json';
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mixins: [resize],
|
||||
components: { boxBoardTit, boxBoardBody, leftTop },
|
||||
components: { boxBoardTit, boxBoardBody },
|
||||
data() {
|
||||
return {
|
||||
bottomChart: null,
|
||||
@ -123,21 +145,53 @@ export default {
|
||||
'2': '待回单',
|
||||
'3': '已回单'
|
||||
},
|
||||
myStyleJson: [
|
||||
{
|
||||
featureType: 'land',
|
||||
elementType: 'geometry',
|
||||
stylers: {
|
||||
color: '#f5f6f7ff'
|
||||
}
|
||||
}
|
||||
]
|
||||
myStyleJson,
|
||||
rnNum: 0,
|
||||
ttNum: 0,
|
||||
deviceNum: 0,
|
||||
whiteNum: 0,
|
||||
handleNum: 0,
|
||||
finishNum: 0,
|
||||
approveNum: 0,
|
||||
projectNum: 0,
|
||||
productNum: 0,
|
||||
userNum: 0,
|
||||
updateFileNum: 0,
|
||||
orderNum: 0,
|
||||
warnNum: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
time() {
|
||||
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() {
|
||||
@ -149,32 +203,74 @@ export default {
|
||||
timer = null;
|
||||
});
|
||||
|
||||
this.getData().then(({ code, msg, list, work, activity, devCount }) => {
|
||||
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.getData().then(
|
||||
({
|
||||
code,
|
||||
msg,
|
||||
list,
|
||||
work,
|
||||
activity,
|
||||
devCount,
|
||||
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.devCount = devCount;
|
||||
// this.spotList = spotList;
|
||||
this.spotList = [];
|
||||
this.devCount = devCount;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initBmpChart();
|
||||
// this.initTicketAllChart(work);
|
||||
// this.initAlarmAllChart(activity);
|
||||
this.initCenterChart(activity);
|
||||
this.initBottomChart();
|
||||
this.initTopChart();
|
||||
this.initAlarmTrendChart();
|
||||
});
|
||||
this.deviceNum = deviceNum;
|
||||
this.whiteNum = whiteNum;
|
||||
|
||||
this.handleNum = handleNum;
|
||||
this.finishNum = finishNum;
|
||||
this.approveNum = approveNum;
|
||||
|
||||
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 }) => {
|
||||
// if (200 == code) {
|
||||
@ -193,12 +289,12 @@ export default {
|
||||
method: 'get'
|
||||
});
|
||||
},
|
||||
getTicketData() {
|
||||
return request({
|
||||
url: '/system/warning/warningList',
|
||||
method: 'get'
|
||||
});
|
||||
},
|
||||
// getTicketData() {
|
||||
// return request({
|
||||
// url: '/system/warning/warningList',
|
||||
// method: 'get'
|
||||
// });
|
||||
// },
|
||||
initTicketAllChart(ticketAll) {
|
||||
if (!this.ticketAllChart) {
|
||||
this.ticketAllChart = echarts.init(this.$refs.ticketAll);
|
||||
@ -254,25 +350,20 @@ export default {
|
||||
};
|
||||
this.ticketAllChart.setOption(option);
|
||||
},
|
||||
initAlarmTrendChart() {
|
||||
initAlarmTrendChart(monthNum) {
|
||||
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 = {
|
||||
xAxis: {
|
||||
name: '数量',
|
||||
type: 'category',
|
||||
data: [
|
||||
'01月',
|
||||
'02月',
|
||||
'03月',
|
||||
'04月',
|
||||
'05月',
|
||||
'06月',
|
||||
'07月',
|
||||
'08月',
|
||||
'09月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
data: months,
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
@ -281,6 +372,7 @@ export default {
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '月份',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
@ -291,20 +383,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
820,
|
||||
932,
|
||||
901,
|
||||
934,
|
||||
1290,
|
||||
1330,
|
||||
1320,
|
||||
820,
|
||||
932,
|
||||
901,
|
||||
934,
|
||||
1290
|
||||
],
|
||||
data: nums,
|
||||
// 线的颜色
|
||||
lineStyle: {
|
||||
color: '#06ccf9'
|
||||
@ -369,7 +448,7 @@ export default {
|
||||
});
|
||||
},
|
||||
initCenterChart(alarmAll) {
|
||||
// initCenterChart1(alarmAll) {
|
||||
// initCenterChart1(alarmAll) {
|
||||
this.centerChart = echarts.init(this.$refs.centerRight);
|
||||
let snapAlarmAll = [];
|
||||
for (let index = 0; index < 4; index++) {
|
||||
@ -457,7 +536,7 @@ export default {
|
||||
},
|
||||
|
||||
initAlarmAllChart(alarmAll) {
|
||||
// initCenterChart(alarmAll) {
|
||||
// initCenterChart(alarmAll) {
|
||||
// if (!this.alarmAllChart) {
|
||||
// this.alarmAllChart = echarts.init(this.$refs.alarmAll);
|
||||
// }
|
||||
@ -471,7 +550,7 @@ export default {
|
||||
}
|
||||
}
|
||||
console.log(snapAlarmAll);
|
||||
debugger
|
||||
debugger;
|
||||
let level4 = '四级告警 ' + snapAlarmAll[3];
|
||||
let level3 = '三级告警 ' + snapAlarmAll[2];
|
||||
let level2 = '二级告警 ' + snapAlarmAll[1];
|
||||
@ -566,25 +645,20 @@ export default {
|
||||
series: series
|
||||
});
|
||||
},
|
||||
initBottomChart() {
|
||||
initBottomChart(monthNum) {
|
||||
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 = {
|
||||
xAxis: {
|
||||
name: '数量',
|
||||
type: 'category',
|
||||
data: [
|
||||
'01月',
|
||||
'02月',
|
||||
'03月',
|
||||
'04月',
|
||||
'05月',
|
||||
'06月',
|
||||
'07月',
|
||||
'08月',
|
||||
'09月',
|
||||
'10月',
|
||||
'11月',
|
||||
'12月'
|
||||
],
|
||||
data: months,
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
lineStyle: {
|
||||
@ -593,6 +667,7 @@ export default {
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '月份',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
//这是y轴文字颜色
|
||||
@ -615,7 +690,7 @@ export default {
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 900, 800], //数据
|
||||
data: nums, //数据
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -648,7 +723,7 @@ export default {
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
@ -657,30 +732,39 @@ export default {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series : [{
|
||||
name: '设备详情',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
data:[
|
||||
{ value: 580, name: '锐能设备',itemStyle: { color: '#0a7ef6' } },
|
||||
{ value: 484, name: '铁塔设备',itemStyle: { color: '#77c8ff' } },
|
||||
series: [
|
||||
{
|
||||
name: '设备详情',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
value: this.rnNum,
|
||||
name: '锐能设备',
|
||||
itemStyle: { color: '#0a7ef6' }
|
||||
},
|
||||
{
|
||||
value: this.ttNum,
|
||||
name: '铁塔设备',
|
||||
itemStyle: { color: '#77c8ff' }
|
||||
}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
},
|
||||
normal:{
|
||||
label:{
|
||||
show: true,
|
||||
// formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
labelLine :{show:true}
|
||||
}
|
||||
}
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
},
|
||||
normal: {
|
||||
label: {
|
||||
show: true
|
||||
// formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
labelLine: { show: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.topChart.setOption(option);
|
||||
@ -804,6 +888,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
background-image: url('../../assets/image/chartbg.png');
|
||||
background-size: cover;
|
||||
}
|
||||
@ -815,12 +900,11 @@ export default {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
// pointer-events: none;
|
||||
}
|
||||
.center,
|
||||
.left,
|
||||
.right {
|
||||
border: 1px solid #f00;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 28vw;
|
||||
@ -853,6 +937,32 @@ export default {
|
||||
right: 0;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -875,11 +985,11 @@ export default {
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.my_cenbottom{
|
||||
.my_cenbottom {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 23px;
|
||||
div{
|
||||
div {
|
||||
width: 210px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
@ -887,7 +997,7 @@ export default {
|
||||
align-items: center;
|
||||
background-image: url('../../assets/image/xiaokuang.png');
|
||||
background-size: cover;
|
||||
span{
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,8 +152,8 @@ export default {
|
||||
<span>派单编号：{this.tableHeader.id}</span>
|
||||
<span>派单时间：{this.tableHeader.createTime}</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>派单备注：{this.tableHeader.note}</div>
|
||||
<div>驳回备注：{this.tableHeader.rejectNote}</div>
|
||||
|
||||
Reference in New Issue
Block a user