1612 lines
44 KiB
Vue
1612 lines
44 KiB
Vue
<template>
|
||
<div class="fullHeight greenPage">
|
||
<div class="headerBox">
|
||
<h1 class="title">
|
||
{{ $store.state.currentProDetail.projectName }} -
|
||
{{ $t('message.electricBox.switchBox')
|
||
}}{{ $t('message.electricBox.statistics') }}
|
||
</h1>
|
||
<closePage v-if="closeShow"></closePage>
|
||
</div>
|
||
<div class="leftLine"></div>
|
||
<div class="rightLine"></div>
|
||
<div class="bottomLine"></div>
|
||
<div class="greenContent">
|
||
<div class="top">
|
||
<div class="smallDiv smallDiv1 fullHeight">
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e1">{{ $t('message.electricBox.condition') }}</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="fullHeight echarts" ref="monitor"></div>
|
||
<div class="content">
|
||
<div>
|
||
{{ $t('message.electricBox.totalNumber') }}：{{
|
||
devStatistics.devTotalNum
|
||
}}
|
||
</div>
|
||
<div>
|
||
{{ $t('message.electricBox.online')
|
||
}}{{ $t('message.electricBox.facility') }}：{{
|
||
devStatistics.onlineNum
|
||
}}
|
||
</div>
|
||
<div>
|
||
{{ $t('message.electricBox.offline')
|
||
}}{{ $t('message.electricBox.facility') }}：{{
|
||
devStatistics.offlineNum
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerDiv fullHeight">
|
||
<div class="title">
|
||
<p class="e2">
|
||
{{ $t('message.electricBox.switchBox')
|
||
}}{{ $t('message.electricBox.realTimeData') }}
|
||
</p>
|
||
</div>
|
||
<div class="greenBtn selectDev">
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
<el-select
|
||
v-model="devSn"
|
||
placeholder="请选择"
|
||
size="mini"
|
||
@change="checkedData"
|
||
style="background-color: inherit"
|
||
>
|
||
<el-option
|
||
v-for="item in devList"
|
||
:key="item.id"
|
||
:label="item.devName"
|
||
:value="item.devSn"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div
|
||
class="centerChart"
|
||
style="box-sizing: border-box; padding: 50px 70px"
|
||
>
|
||
<div
|
||
v-for="(item, index) in realTimeData"
|
||
:key="index"
|
||
class="center_realTimeData"
|
||
>
|
||
<img :src="item.url" />
|
||
<div style="width: 85px">
|
||
<div
|
||
style="
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
"
|
||
>
|
||
{{ item.number }}
|
||
{{
|
||
item.type == 1
|
||
? $t('message.electricBox.volt')
|
||
: item.type == 2
|
||
? '℃'
|
||
: $t('message.electricBox.milliampere')
|
||
}}
|
||
</div>
|
||
<div
|
||
style="color: #bfa348; font-size: 14px; text-align: center"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="smallDiv fullHeight">
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e3">
|
||
{{ $t('message.electricBox.alarm')
|
||
}}{{ $t('message.electricBox.list') }}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent alarmBlockContent">
|
||
<div style="width: 100%; height: 120px" ref="alarmList"></div>
|
||
<vue-scroll>
|
||
<table class="greenTable">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
{{ $t('message.electricBox.alarm')
|
||
}}{{ $t('message.electricBox.facility') }}
|
||
</th>
|
||
<th>
|
||
{{ $t('message.electricBox.alarm')
|
||
}}{{ $t('message.electricBox.time') }}
|
||
</th>
|
||
<th>
|
||
{{ $t('message.electricBox.alarm')
|
||
}}{{ $t('message.electricBox.type') }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr
|
||
v-for="item in alarmListData.list"
|
||
:key="item.id"
|
||
style="height: 30px"
|
||
>
|
||
<td>{{ item.devName }}</td>
|
||
<td>{{ item.creatTime }}</td>
|
||
<td>{{ item.alarmType }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="alarmListData.list.length == 0"
|
||
style="top: 28%"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>{{ $t('message.electricBox.noData') }}</p>
|
||
</div>
|
||
</table>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e6">{{ $t('message.electricBox.hours24Data') }}</p>
|
||
</div>
|
||
<div>
|
||
<div class="operateBar">
|
||
<span
|
||
class="greenBtn"
|
||
@click="greenBtn(1)"
|
||
:class="checkedBtn == 1 ? 'checkedBtn' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.electricBox.voltage') }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="greenBtn(2)"
|
||
:class="checkedBtn == 2 ? 'checkedBtn' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.electricBox.electricity') }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="greenBtn(3)"
|
||
:class="checkedBtn == 3 ? 'checkedBtn' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.electricBox.leakCurrent') }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="greenBtn(4)"
|
||
:class="checkedBtn == 4 ? 'checkedBtn' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.electricBox.cableTemperature') }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="greenBtn(5)"
|
||
:class="checkedBtn == 5 ? 'checkedBtn' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t('message.electricBox.temperature') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="boxEcharts" v-if="allHourData.length > 0">
|
||
<div class="near24hChart" ref="near24hChart"></div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
class="notaDataStlye"
|
||
style="
|
||
position: absolute;
|
||
width: 92px;
|
||
height: 25px;
|
||
top: 80%;
|
||
left: 23%;
|
||
"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p style="color: #ccc; margin-left: 10px">暂无数据</p>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox fullHeight">
|
||
<div class="title">
|
||
<p class="e7">
|
||
{{ $t('message.electricBox.facility')
|
||
}}{{ $t('message.electricBox.console') }}
|
||
</p>
|
||
</div>
|
||
<vue-scroll>
|
||
<div
|
||
class="blockContent flex2"
|
||
style="padding: 15px 0; box-sizing: border-box"
|
||
>
|
||
<div
|
||
class="facility_info"
|
||
v-if="devStatistics.list.length > 0"
|
||
v-for="(item, index) in devStatistics.list"
|
||
:key="index"
|
||
>
|
||
<div class="title">
|
||
{{ item.devName }}
|
||
</div>
|
||
<div class="flex">
|
||
<div class="left">
|
||
<div>
|
||
{{ $t('message.electricBox.facility')
|
||
}}{{ $t('message.electricBox.state') }}
|
||
</div>
|
||
<div :class="item.isClosed == 1 ? 'state2' : 'state'">
|
||
{{ item.isClosed == 1 ? '离线' : '在线' }}
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div>
|
||
{{ $t('message.electricBox.facility')
|
||
}}{{ $t('message.electricBox.control') }}
|
||
</div>
|
||
<div class="switch">
|
||
<el-switch
|
||
v-model="item.switchState"
|
||
class="demo"
|
||
:disabled="true"
|
||
active-color="#FEC34A"
|
||
inactive-color="#858584"
|
||
:active-text="$t('message.electricBox.open')"
|
||
:inactive-text="$t('message.electricBox.close')"
|
||
></el-switch>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div
|
||
class="placeholderBox placeholderBox2"
|
||
v-else
|
||
style="top: 28%"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>{{ $t('message.electricBox.noData') }}</p>
|
||
</div> -->
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import {
|
||
getDevListApi,
|
||
getRealTimeDataApi,
|
||
getBoxAlarmStatisticsApi,
|
||
getDevStatisticsApi,
|
||
getSelectDataListApi,
|
||
} from "@/assets/js/api/electricBox";
|
||
import closePage from "@/components/closePage"
|
||
export default {
|
||
components: { closePage },
|
||
data() {
|
||
return {
|
||
closeShow: true,
|
||
projectSn: "",
|
||
devList: [],
|
||
devSn: "",
|
||
devName: "",
|
||
realTimeData: [
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dy.png"),
|
||
title:
|
||
"A" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.voltage"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dy.png"),
|
||
title:
|
||
"B" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.voltage"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dy.png"),
|
||
title:
|
||
"C" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.voltage"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/wd.png"),
|
||
title:
|
||
"A" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.cableTemperature"),
|
||
number: "0",
|
||
type: 2,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/wd.png"),
|
||
title:
|
||
"B" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.cableTemperature"),
|
||
number: "0",
|
||
type: 2,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/wd.png"),
|
||
title:
|
||
"C" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.cableTemperature"),
|
||
number: "0",
|
||
type: 2,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dl.png"),
|
||
title:
|
||
"A" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.electricity"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dl.png"),
|
||
title:
|
||
"B" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.electricity"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dl.png"),
|
||
title:
|
||
"C" +
|
||
this.$t("message.electricBox.mutually") +
|
||
this.$t("message.electricBox.electricity"),
|
||
number: "0",
|
||
type: 1,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/wd.png"),
|
||
title: this.$t("message.electricBox.temperature"),
|
||
number: "0",
|
||
type: 2,
|
||
},
|
||
{
|
||
url: require("../../../assets/images/electricOverview/dl.png"),
|
||
title: this.$t("message.electricBox.leakCurrent"),
|
||
number: "0",
|
||
type: 3,
|
||
},
|
||
],
|
||
alarmListData: {},
|
||
totalAlarmNum: "",
|
||
monthAlarmNum: "",
|
||
dayAlarmNum: "",
|
||
devStatistics: {},
|
||
checkedBtn: 1,
|
||
timeArr: [],
|
||
allHourData: [],
|
||
showDataA: [],
|
||
showDataB: [],
|
||
showDataC: [],
|
||
electricLeakage: [],
|
||
ambientTemperature: [],
|
||
near24hChart: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getDevList();
|
||
},
|
||
mounted() {
|
||
if (window.history.length != 1) {
|
||
this.closeShow = true
|
||
} else {
|
||
this.closeShow = false
|
||
}
|
||
this.getDevStatisticsData();
|
||
this.getBoxAlarmStatistics();
|
||
this.createdEcharts2([], [], [], []);
|
||
|
||
},
|
||
methods: {
|
||
//获取 配电箱实时数据 设备下拉列表
|
||
getDevList() {
|
||
console.log('调用了吗');
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getDevListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.result.length > 0) {
|
||
this.devList = res.result;
|
||
this.devSn = res.result[0].devSn;
|
||
this.devName = res.result[0].devName;
|
||
this.getSelectDataList();
|
||
this.getRealTimeData();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 切换设备
|
||
checkedData(value) {
|
||
this.devSn = value
|
||
console.log('切换设备', value);
|
||
this.getRealTimeData();
|
||
this.getSelectDataList();
|
||
this.near24hChart.clear();
|
||
this.$refs.near24hChart = ''
|
||
},
|
||
|
||
//获取设备的实时数据
|
||
getRealTimeData() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
projectSn: this.projectSn,
|
||
};
|
||
getRealTimeDataApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.realTimeData[0].number = res.result ? res.result.voltageA : 0;
|
||
this.realTimeData[1].number = res.result ? res.result.voltageB : 0;
|
||
this.realTimeData[2].number = res.result ? res.result.voltageC : 0;
|
||
this.realTimeData[3].number = res.result
|
||
? res.result.cableTemperatureA
|
||
: 0;
|
||
this.realTimeData[4].number = res.result
|
||
? res.result.cableTemperatureB
|
||
: 0;
|
||
this.realTimeData[5].number = res.result
|
||
? res.result.cableTemperatureC
|
||
: 0;
|
||
this.realTimeData[6].number = res.result
|
||
? res.result.phaseCurrentA
|
||
: 0;
|
||
this.realTimeData[7].number = res.result
|
||
? res.result.phaseCurrentB
|
||
: 0;
|
||
this.realTimeData[8].number = res.result
|
||
? res.result.phaseCurrentC
|
||
: 0;
|
||
this.realTimeData[9].number = res.result
|
||
? res.result.ambientTemperature
|
||
: 0;
|
||
this.realTimeData[10].number = res.result
|
||
? res.result.electricLeakage
|
||
: 0;
|
||
}
|
||
});
|
||
},
|
||
|
||
//报警列表
|
||
getBoxAlarmStatistics() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getBoxAlarmStatisticsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.alarmListData = res.result;
|
||
this.totalAlarmNum = res.result.alarmNum.totalAlarmNum
|
||
? res.result.alarmNum.totalAlarmNum
|
||
: 0;
|
||
this.monthAlarmNum = res.result.alarmNum.totalAlarmNum
|
||
? res.result.alarmNum.monthAlarmNum
|
||
: 0;
|
||
this.dayAlarmNum = res.result.alarmNum.totalAlarmNum
|
||
? res.result.alarmNum.dayAlarmNum
|
||
: 0;
|
||
this.createdEcharts1();
|
||
}
|
||
});
|
||
},
|
||
|
||
//创建图表 --- 配电箱
|
||
createdEcharts3() {
|
||
let that = this;
|
||
//项目进度
|
||
let monitor = echarts.init(this.$refs.monitor);
|
||
monitor.clear();
|
||
|
||
var text;
|
||
|
||
var dataArr = [
|
||
{
|
||
value: this.devStatistics.grade,
|
||
name: this.$t("message.electricBox.healthScore"),
|
||
},
|
||
];
|
||
var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#654C27", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.2,
|
||
color: "#846A42", // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#F9DB9E", // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#FEC34B", // 100% 处的颜色
|
||
},
|
||
]);
|
||
var colorSet = [
|
||
[0.91, color],
|
||
[1, "#342B18"],
|
||
];
|
||
var rich = {
|
||
white: {
|
||
fontSize: 14,
|
||
color: "#fff",
|
||
fontWeight: "500",
|
||
padding: [-93, 0, 0, 3],
|
||
},
|
||
bule: {
|
||
fontSize: 30,
|
||
fontFamily: "DINBold",
|
||
color: "#fff",
|
||
fontWeight: "700",
|
||
padding: [-88, 0, 0, 0],
|
||
},
|
||
radius: {
|
||
width: 350,
|
||
height: 80,
|
||
lineHeight: 80,
|
||
borderWidth: 1,
|
||
fontSize: 14,
|
||
color: "#fff",
|
||
borderRadius: 20,
|
||
textAlign: "center",
|
||
padding: [-100, 0, 0, 0],
|
||
},
|
||
};
|
||
var option = {
|
||
// backgroundColor: "#0E1327",
|
||
tooltip: {
|
||
formatter: "{a} <br/>{b} : {c}%",
|
||
},
|
||
|
||
series: [
|
||
{
|
||
//内圆
|
||
type: "pie",
|
||
radius: "100%",
|
||
center: ["50%", "50%"],
|
||
z: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#11100F",
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: this.devStatistics.grade,
|
||
},
|
||
{
|
||
//内圆
|
||
type: "pie",
|
||
radius: "92%",
|
||
center: ["50%", "50%"],
|
||
z: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#15130F",
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
//内圆
|
||
type: "pie",
|
||
radius: "84%",
|
||
center: ["50%", "50%"],
|
||
z: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1E1910",
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: [0],
|
||
},
|
||
{
|
||
type: "gauge",
|
||
name: this.$t("message.electricBox.outerAuxiliary"),
|
||
radius: "74%",
|
||
startAngle: "225",
|
||
endAngle: "-45",
|
||
splitNumber: "100",
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
},
|
||
],
|
||
// data: [{value: 1, name: 90}],
|
||
title: {
|
||
show: true,
|
||
offsetCenter: [0, 30],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontStyle: "normal",
|
||
fontWeight: "normal",
|
||
fontFamily: "微软雅黑",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [[1, "#806841"]],
|
||
width: 2,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
length: 20,
|
||
lineStyle: {
|
||
color: "#051932",
|
||
width: 0,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "gauge",
|
||
radius: "65%",
|
||
startAngle: "225",
|
||
endAngle: "-45",
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
var num = Math.round(value);
|
||
return (
|
||
"{bule|" +
|
||
num +
|
||
"}{white|分}" +
|
||
"{size|" +
|
||
"}\n{radius|" +
|
||
that.$t("message.electricBox.healthScore") +
|
||
"}"
|
||
);
|
||
},
|
||
rich: rich,
|
||
offsetCenter: ["0%", "0%"],
|
||
},
|
||
data: dataArr,
|
||
title: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colorSet,
|
||
width: 5,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
length: 25,
|
||
lineStyle: {
|
||
color: "#846B42",
|
||
width: 2,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
name: "灰色内圈", //刻度背景
|
||
type: "gauge",
|
||
z: 2,
|
||
radius: "52%",
|
||
startAngle: "225",
|
||
endAngle: "-45",
|
||
//center: ["50%", "75%"], //整体的位置设置
|
||
axisLine: {
|
||
// 坐标轴线
|
||
lineStyle: {
|
||
// 属性lineStyle控制线条样式
|
||
color: [[1, "#9F865A"]],
|
||
width: 2,
|
||
opacity: 1, //刻度背景宽度
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
// data: [{
|
||
// show: false,
|
||
// value: '80'
|
||
// }], //作用不清楚
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
show: 0,
|
||
},
|
||
},
|
||
{
|
||
name: "白色圈刻度",
|
||
type: "gauge",
|
||
radius: "52%",
|
||
startAngle: 225, //刻度起始
|
||
endAngle: -45, //刻度结束
|
||
z: 4,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
length: 8, //刻度节点线长度
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#E5B34A",
|
||
}, //刻度节点线
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0)",
|
||
fontSize: 12,
|
||
}, //刻度节点文字颜色
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
opacity: 0,
|
||
},
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
//内圆
|
||
type: "pie",
|
||
radius: "40%",
|
||
center: ["50%", "50%"],
|
||
z: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.RadialGradient(
|
||
0.5,
|
||
0.5,
|
||
0.8,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#FEC758",
|
||
},
|
||
|
||
{
|
||
offset: 0.8,
|
||
color: "#000000",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: [0],
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
|
||
//报警列表
|
||
createdEcharts1() {
|
||
let that = this;
|
||
var color = new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#EFD49F", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.2,
|
||
color: "#846A42", // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.6,
|
||
color: "#F9DB9E", // 100% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#FEC34B", // 100% 处的颜色
|
||
},
|
||
]);
|
||
|
||
let alarmList = echarts.init(this.$refs.alarmList);
|
||
alarmList.clear();
|
||
|
||
let option = {
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
center: ["16%", "50%"],
|
||
hoverAnimation: false,
|
||
radius: [38, 43],
|
||
x: "0%", // for funnel
|
||
data: [
|
||
{
|
||
name: "other",
|
||
value: 0,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6E4D0A",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: this.$t("message.electricBox.totalAlarm"),
|
||
value: this.totalAlarmNum,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
color: "#989899",
|
||
fontSize: 12,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
"{percent|" +
|
||
params.value +
|
||
"}\n" +
|
||
that.$t("message.electricBox.totalAlarm")
|
||
);
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: "#D2B34F",
|
||
fontSize: 20,
|
||
padding: [5, 0, 20, 0],
|
||
},
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: color,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "pie",
|
||
center: ["50%", "50%"],
|
||
radius: [38, 43],
|
||
hoverAnimation: false,
|
||
|
||
x: "0%", // for funnel
|
||
data: [
|
||
{
|
||
name: "other",
|
||
value: 0,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6E4D0A",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: this.$t("message.electricBox.monthAlarm"),
|
||
value: this.monthAlarmNum,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
color: "#989899",
|
||
fontSize: 12,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
"{percent|" +
|
||
params.value +
|
||
"}\n" +
|
||
that.$t("message.electricBox.monthAlarm")
|
||
);
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: "#D2B34F",
|
||
fontSize: 20,
|
||
padding: [5, 0, 20, 0],
|
||
},
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: color,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "pie",
|
||
center: ["84%", "50%"],
|
||
hoverAnimation: false,
|
||
radius: [38, 43],
|
||
x: "0%", // for funnel
|
||
data: [
|
||
{
|
||
name: "other",
|
||
value: 0,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6E4D0A",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: this.$t("message.electricBox.todayAlarm"),
|
||
value: this.dayAlarmNum,
|
||
label: {
|
||
normal: {
|
||
position: "center",
|
||
color: "#989899",
|
||
fontSize: 12,
|
||
padding: [0, 0, 20, 0],
|
||
formatter: function (params) {
|
||
return (
|
||
"{percent|" +
|
||
params.value +
|
||
"}\n" +
|
||
that.$t("message.electricBox.todayAlarm")
|
||
);
|
||
},
|
||
rich: {
|
||
percent: {
|
||
color: "#D2B34F",
|
||
fontSize: 20,
|
||
padding: [5, 0, 20, 0],
|
||
},
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: color,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
alarmList.setOption(option);
|
||
},
|
||
//获取 近24小时数据
|
||
getSelectDataList() {
|
||
let data = {
|
||
devSn: this.devSn,
|
||
projectSn: this.projectSn,
|
||
order:'asc'
|
||
};
|
||
getSelectDataListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.allHourData = res.result;
|
||
this.showDataA = [];
|
||
this.showDataB = [];
|
||
this.showDataC = [];
|
||
this.timeArr = []
|
||
console.log('看看数据', this.allHourData);
|
||
console.log('看看数据长度', this.allHourData.length);
|
||
if (res.result.length > 0) {
|
||
for (let i = 0; i < res.result.length; i++) {
|
||
let time = res.result[i].uploadTime.split(" ")[1];
|
||
this.timeArr.push(time);
|
||
this.showDataA.push(res.result[i].voltageA);
|
||
this.showDataB.push(res.result[i].voltageB);
|
||
this.showDataC.push(res.result[i].voltageC);
|
||
}
|
||
}
|
||
this.$nextTick(() => {
|
||
this.createdEcharts2(this.showDataA, this.showDataB, this.showDataC, this.timeArr);
|
||
})
|
||
}
|
||
});
|
||
},
|
||
|
||
//创建图表 --- 近24小时数据
|
||
createdEcharts2(dataA, dataB, dataC, timerArr) {
|
||
console.log('dataA', dataA);
|
||
console.log('dataB', dataB);
|
||
console.log('dataC', dataC);
|
||
console.log('timerArr', timerArr);
|
||
// if (this.allHourData.length == 0) {
|
||
// return;
|
||
// }
|
||
this.near24hChart = echarts.init(this.$refs.near24hChart);
|
||
this.near24hChart.clear();
|
||
console.log();
|
||
var option1 = {
|
||
grid: {
|
||
top: 20,
|
||
left: 50,
|
||
bottom: 20,
|
||
right: 25,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#FDC34A",
|
||
type : 'line'
|
||
},
|
||
},
|
||
},
|
||
color: ["#FDC34A"],
|
||
xAxis: {
|
||
type: "category",
|
||
data: timerArr,
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255,255,255,0.1)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name:
|
||
this.checkedBtn == 1
|
||
? "A相电压"
|
||
: this.checkedBtn == 2
|
||
? "A相电流"
|
||
: this.checkedBtn == 4 && "A相线缆温度",
|
||
data: dataA,
|
||
type: "line",
|
||
// smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#be8209', // 线条颜色
|
||
type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
|
||
},
|
||
// symbol: "none",
|
||
// areaStyle: {
|
||
// color: "#292017",
|
||
// },
|
||
show: true // 显示线条
|
||
},
|
||
{
|
||
name:
|
||
this.checkedBtn == 1
|
||
? "B相电压"
|
||
: this.checkedBtn == 2
|
||
? "B相电流"
|
||
: this.checkedBtn == 4 && "B相线缆温度",
|
||
data: dataB,
|
||
type: "line",
|
||
// smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#be8209', // 线条颜色
|
||
type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
|
||
},
|
||
// symbol: "none",
|
||
areaStyle: {
|
||
color: "#292017",
|
||
},
|
||
show: true // 显示线条
|
||
},
|
||
{
|
||
name:
|
||
this.checkedBtn == 1
|
||
? "C相电压"
|
||
: this.checkedBtn == 2
|
||
? "C相电流"
|
||
: this.checkedBtn == 4 && "C相线缆温度",
|
||
data: dataC,
|
||
type: "line",
|
||
// smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#be8209', // 线条颜色
|
||
type: 'solid' // 线条类型: 'solid', 'dashed', 'dotted'
|
||
},
|
||
// symbol: "none",
|
||
areaStyle: {
|
||
color: "#292017",
|
||
},
|
||
show: true // 显示线条
|
||
},
|
||
],
|
||
};
|
||
var option2 = {
|
||
grid: {
|
||
top: 20,
|
||
left: 50,
|
||
bottom: 20,
|
||
right: 25,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#FDC34A",
|
||
},
|
||
},
|
||
},
|
||
color: ["#FDC34A"],
|
||
xAxis: {
|
||
type: "category",
|
||
data: timerArr,
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255,255,255,0.1)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name:
|
||
this.checkedBtn == 3
|
||
? "漏电流"
|
||
: this.checkedBtn == 5 && "环境温度",
|
||
data:
|
||
this.checkedBtn == 3
|
||
? this.electricLeakage
|
||
: this.checkedBtn == 5 && this.ambientTemperature,
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
type: 'solid', // 线条类型: 'solid', 'dashed', 'dotted'
|
||
color: '#be8209', // 线条颜色
|
||
},
|
||
symbol: "none",
|
||
areaStyle: {
|
||
color: "#292017",
|
||
},
|
||
show: true // 显示线条
|
||
},
|
||
],
|
||
};
|
||
var option =
|
||
this.checkedBtn == 1 || this.checkedBtn == 2 || this.checkedBtn == 4
|
||
? option1
|
||
: option2;
|
||
this.near24hChart.setOption(option);
|
||
},
|
||
|
||
//获取所有设备统计
|
||
getDevStatisticsData() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getDevStatisticsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.devStatistics = res.result;
|
||
setTimeout(() => {
|
||
this.createdEcharts3();
|
||
}, 500)
|
||
}
|
||
});
|
||
},
|
||
//切换24小时数据的按钮 电压电流漏电流线缆温度环境温度
|
||
greenBtn(type) {
|
||
this.checkedBtn = type;
|
||
if (this.allHourData.length > 0) {
|
||
let data = this.allHourData;
|
||
this.showDataA = [];
|
||
this.showDataB = [];
|
||
this.showDataC = [];
|
||
this.timeArr = [];
|
||
let showData1 = [];
|
||
let showData2 = [];
|
||
let showData3 = [];
|
||
this.electricLeakage = [];
|
||
this.ambientTemperature = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
let time2 = data[i].uploadTime.split(" ")[1];
|
||
this.timeArr.push(time2);
|
||
if (type == 1) {
|
||
showData1.push(data[i].voltageA);
|
||
showData2.push(data[i].voltageB);
|
||
showData3.push(data[i].voltageC);
|
||
} else if (type == 2) {
|
||
showData1.push(data[i].phaseCurrentA);
|
||
showData2.push(data[i].phaseCurrentB);
|
||
showData3.push(data[i].phaseCurrentC);
|
||
} else if (type == 3) {
|
||
this.electricLeakage.push(data[i].electricLeakage);
|
||
} else if (type == 4) {
|
||
showData1.push(data[i].cableTemperatureA);
|
||
showData2.push(data[i].cableTemperatureB);
|
||
showData3.push(data[i].cableTemperatureC);
|
||
} else if (type == 5) {
|
||
this.ambientTemperature.push(data[i].ambientTemperature);
|
||
}
|
||
}
|
||
this.showDataA = showData1;
|
||
this.showDataB = showData2;
|
||
this.showDataC = showData3;
|
||
}
|
||
this.createdEcharts2(this.showDataA, this.showDataB, this.showDataC, this.timeArr);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url('./style.less');
|
||
.centerChart {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
.center_realTimeData {
|
||
background-image: url('../../../assets/images/electricOverview/bg2.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
height: 75px;
|
||
width: 195px;
|
||
margin-left: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/deep/ .demo .el-switch__label {
|
||
position: absolute;
|
||
display: none;
|
||
color: #fff;
|
||
}
|
||
/*打开时文字位置设置*/
|
||
/deep/ .demo .el-switch__label--right {
|
||
z-index: 1;
|
||
left: 3px;
|
||
}
|
||
/*关闭时文字位置设置*/
|
||
/deep/ .demo .el-switch__label--left {
|
||
z-index: 1;
|
||
right: 3px;
|
||
}
|
||
/*显示文字*/
|
||
/deep/ .demo .el-switch__label.is-active {
|
||
display: block;
|
||
}
|
||
/deep/ .demo.el-switch .el-switch__core,
|
||
.el-switch .el-switch__label {
|
||
width: 50px !important;
|
||
}
|
||
.facility_info {
|
||
width: 200px;
|
||
margin: 0 5px;
|
||
height: 100%;
|
||
padding: 0 20px 20px;
|
||
box-sizing: border-box;
|
||
background-image: linear-gradient(
|
||
rgba(21, 25, 33, 0.2),
|
||
rgba(101, 76, 39, 0.2)
|
||
);
|
||
.state {
|
||
width: 46px;
|
||
height: 46px;
|
||
line-height: 46px;
|
||
text-align: center;
|
||
color: #fff;
|
||
border: 8px solid #265045;
|
||
background: #3dbc9f;
|
||
border-radius: 50%;
|
||
margin: 10px auto 0;
|
||
font-size: 14px;
|
||
opacity: 1;
|
||
}
|
||
.state2 {
|
||
width: 46px;
|
||
height: 46px;
|
||
line-height: 46px;
|
||
text-align: center;
|
||
color: #fff;
|
||
border: 8px solid #393936;
|
||
background: #858584;
|
||
border-radius: 50%;
|
||
margin: 10px auto 0;
|
||
font-size: 14px;
|
||
opacity: 1;
|
||
}
|
||
.title {
|
||
font-family: PingFangSC-Semibold;
|
||
font-size: 15px;
|
||
color: #fffeff;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.left {
|
||
width: 50%;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
border-right: 1px dashed #403422;
|
||
box-sizing: border-box;
|
||
padding-right: 20px;
|
||
}
|
||
.right {
|
||
width: 50%;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
opacity: 0.8;
|
||
padding-left: 10px;
|
||
}
|
||
.switch {
|
||
margin-top: 4px;
|
||
height: 66px;
|
||
line-height: 66px;
|
||
}
|
||
}
|
||
.boxEcharts {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.near24hChart {
|
||
width: 100%;
|
||
height: 80%;
|
||
}
|
||
.checkedBtn {
|
||
background: #be8209;
|
||
}
|
||
.centerDiv {
|
||
.greenBtn {
|
||
height: 28px;
|
||
padding: 0;
|
||
z-index: 999;
|
||
/deep/ .el-input__inner {
|
||
background-color: rgba(108, 94, 46, 0);
|
||
border: none;
|
||
color: #e2c154;
|
||
}
|
||
}
|
||
}
|
||
</style> |