|
|
@@ -7,32 +7,51 @@
|
|
|
<ThreeModel1 class="three-model-layer" :data="mapSource" @when="when" @clickMapItem="clickMapItem">
|
|
|
</ThreeModel1>
|
|
|
<div class="sand-table-left" v-if="showPanel">
|
|
|
- <PanelSand class="left-panel" title="气象预测" :subTitle="timeStr + '实况'" style="height: 21vh">
|
|
|
+ <!-- <PanelSand class="left-panel" title="气象预测" :subTitle="timeStr + '实况'" style="height: 21vh">
|
|
|
<weather style="cursor: pointer" :data="tqmap1" @click="openWeatherDialog" />
|
|
|
</PanelSand>
|
|
|
- <!-- style="height: 42vh"
|
|
|
- style="height: 42vh" -->
|
|
|
<PanelSand class="left-panel" title="健康推荐">
|
|
|
- <!-- height="32vh" -->
|
|
|
<RankTable :data="rmls" @rowClick="clickHealthRow" height="23.2vh"></RankTable>
|
|
|
</PanelSand>
|
|
|
<PanelSand class="left-panel" title="停机信息">
|
|
|
<RankTable :data="sels" @rowClick="clickStopRow" height="23.2vh"></RankTable>
|
|
|
- <!-- <ComTable :data="sels"></ComTable> -->
|
|
|
+ </PanelSand> -->
|
|
|
+ <PanelSand class="left-panel" title="停机信息">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange" @click="changeBjSwitch">
|
|
|
+ <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="bjSwitch ? 'blue' : 'gray'">检修</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <RankTable :data="sels" @rowClick="clickStopRow" height="20vh"></RankTable>
|
|
|
</PanelSand>
|
|
|
-
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="预警情况">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange">
|
|
|
+ <span :class="warnSwitch === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch('z')">周</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="warnSwitch === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch('y')">月</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="warnSwitch === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch('n')">年</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="非停时长占比" @click="clickTime" style="cursor: pointer">
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
</div>
|
|
|
+ <div></div>
|
|
|
<div class="sand-table-right" v-if="showPanel">
|
|
|
- <PanelSand class="right-panel mg-t-16" title="视频监控">
|
|
|
+ <!-- <PanelSand class="right-panel mg-t-16" title="视频监控">
|
|
|
<el-row v-for="(pItem, pIndex) in videoArray1" :key="pIndex">
|
|
|
<el-col :span="12" class="pre-img-box" v-for="(cItem, cIndex) in pItem" :key="cIndex"
|
|
|
@click="openVideoDialog1(cItem)">
|
|
|
- <!-- <div class="mask"> -->
|
|
|
- <!-- <img :src="require('@assets/nxfImg/ship.png')" alt=""> -->
|
|
|
- <!-- </div> -->
|
|
|
- <!-- <hlsVideo class="pre-img videoBoxiframe" width="95%" height="8.657vh" :code="cItem.code"
|
|
|
- :class="cItem.class" v-if="cItem.switch" /> -->
|
|
|
-
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="mask"></div>
|
|
|
@@ -40,9 +59,6 @@
|
|
|
<PanelSandToolbar class="right-panel mg-t-16" title="预警情况">
|
|
|
<template v-slot:tools>
|
|
|
<div class="exchange" @click="changeWarnSwitch">
|
|
|
- <!-- <span :class="warnSwitch ? 'gray' : 'white'">预警</span> -->
|
|
|
- <!-- <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
- <span :class="warnSwitch ? 'blue' : 'gray'">故障</span> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:default>
|
|
|
@@ -52,82 +68,82 @@
|
|
|
<PanelSandToolbar class="right-panel mg-t-16" title="故障情况">
|
|
|
<template v-slot:tools>
|
|
|
<div class="exchange" @click="changeBjSwitch">
|
|
|
- <!-- <span :class="bjSwitch ? 'gray' : 'white'">故障</span> -->
|
|
|
- <!-- <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
- <span :class="bjSwitch ? 'blue' : 'gray'">记录</span> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:default>
|
|
|
<RadarPieChart height="21vh" :list="bjChartData" title="故障隐患情况" />
|
|
|
</template>
|
|
|
+ </PanelSandToolbar> -->
|
|
|
+ <PanelSand class="left-panel" title="停机信息">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange" @click="changeBjSwitch">
|
|
|
+ <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="bjSwitch ? 'blue' : 'gray'">检修</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <RankTable :data="sels" @rowClick="clickStopRow" height="20vh"></RankTable>
|
|
|
+ </PanelSand>
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="预警情况">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="exchange">
|
|
|
+ <span :class="warnSwitch === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch('z')">周</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="warnSwitch === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch('y')">月</span>
|
|
|
+ <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
|
|
|
+ <span :class="warnSwitch === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch('n')">年</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
|
|
|
+ </template>
|
|
|
+ </PanelSandToolbar>
|
|
|
+ <PanelSandToolbar class="right-panel mg-t-16" title="非停时长占比">
|
|
|
+ <template v-slot:default>
|
|
|
+ <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
|
|
|
+ </template>
|
|
|
</PanelSandToolbar>
|
|
|
</div>
|
|
|
- <!-- <div class="sand-table-bottom"
|
|
|
- :style="$store.state.themeName === 'dark' ? 'right: calc(50vw - 545px);' : 'right: calc(50vw - 590px);'"
|
|
|
- v-if="showPanel">
|
|
|
- <Ppanel title="利用小时" :data="riseNumber(gxkmap.bg_dxkyss)" dataColor="#0a82f2" :days="gxkmap.ydxkyss"
|
|
|
- :data1Icon="
|
|
|
- gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
|
|
|
- " :data1IconClass="
|
|
|
- gxkmap.tb_dxkyss < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- " :data2Icon="
|
|
|
- gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
|
|
|
- " :data2IconClass="
|
|
|
- gxkmap.hb_dxkyss < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- "></Ppanel>
|
|
|
- <Ppanel title="设备可利用率" class="stb-p" :data="riseNumber(gxkmap.bg_sbklyl)" dataColor="#0a82f2"
|
|
|
- daysUnit="%" :days="gxkmap.ysbklyl" :data1Icon="
|
|
|
- gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
|
|
|
- " :data1IconClass="
|
|
|
- gxkmap.hb_sbklyl < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- " :data2Icon="
|
|
|
- gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
|
|
|
- " :data2IconClass="
|
|
|
- gxkmap.tb_sbklyl < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- "></Ppanel>
|
|
|
- <Ppanel title="MTBF" class="stb-p" :data="'0.1' || riseNumber(gxkmap.bg_mtbf)" dataColor="#0a82f2"
|
|
|
- :days="gxkmap.mtbf" :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
|
|
|
- :data1IconClass="
|
|
|
- gxkmap.hb_mtbf < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- " :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'" :data2IconClass="
|
|
|
- gxkmap.tb_mtbf < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- "></Ppanel>
|
|
|
- <Ppanel title="MTTR" class="stb-p" :data="'0.1' || riseNumber(gxkmap.bg_mttr)" dataColor="#0a82f2"
|
|
|
- :days="gxkmap.mttr" :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
|
|
|
- :data1IconClass="
|
|
|
- gxkmap.hb_mttr < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- " :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'" :data2IconClass="
|
|
|
- gxkmap.tb_mttr < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- "></Ppanel>
|
|
|
- <Ppanel title="MTTF" class="stb-p" :data="'0.1' || riseNumber(gxkmap.bg_mttf)" dataColor="#0a82f2"
|
|
|
- :days="gxkmap.mttf" :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
|
|
|
- :data1IconClass="
|
|
|
- gxkmap.hb_mttf < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- " :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'" :data2IconClass="
|
|
|
- gxkmap.tb_mttf < 0
|
|
|
- ? 'svg-icon-sm svg-icon-yellow'
|
|
|
- : 'svg-icon-sm svg-icon-green'
|
|
|
- "></Ppanel>
|
|
|
- </div> -->
|
|
|
- <el-dialog title="" :custom-class="tableDialogClass" v-model="showHealthDialog" width="80%"
|
|
|
+ <div class="footer">
|
|
|
+ <div class="hover72Power">
|
|
|
+ <div
|
|
|
+ id="problem1"
|
|
|
+ class="cur"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></div>
|
|
|
+ <div class="hidBtn" @click="showStHourDialog"></div>
|
|
|
+ </div>
|
|
|
+ <div class="monthPower">
|
|
|
+ <div
|
|
|
+ id="problem2"
|
|
|
+ class="cur"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></div>
|
|
|
+ <div class="hidBtn" @click="showYfdlDialog"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="noTimeDialog"
|
|
|
+ width="80%"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div class="dialogTitle">
|
|
|
+ 非停时长占比
|
|
|
+ <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/frist')"></i>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <span>This is a message</span>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">Cancel</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">
|
|
|
+ Confirm
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <el-dialog title="" :custom-class="tableDialogClass" v-model="showHealthDialog" width="80%"
|
|
|
:destroy-on-close="true" :before-close="
|
|
|
(done) => {
|
|
|
tableDialogClass = 'modal animated a1 fadeOutLeftBig';
|
|
|
@@ -163,8 +179,8 @@
|
|
|
<el-input v-model="tableItem.typename" readonly></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog title="" :custom-class="tableDialogClass" v-model="showTableDialog" width="80%"
|
|
|
+ </el-dialog> -->
|
|
|
+ <!-- <el-dialog title="" :custom-class="tableDialogClass" v-model="showTableDialog" width="80%"
|
|
|
:destroy-on-close="true" :before-close="
|
|
|
(done) => {
|
|
|
tableDialogClass = 'modal animated a1 fadeOutLeftBig';
|
|
|
@@ -200,8 +216,8 @@
|
|
|
<el-input v-model="tableItem.stopHours" readonly></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- </el-dialog>
|
|
|
- <el-dialog title="天气详情" :custom-class="tableDialogClass" v-model="showWeatherDialog" width="80%"
|
|
|
+ </el-dialog> -->
|
|
|
+ <!-- <el-dialog title="天气详情" :custom-class="tableDialogClass" v-model="showWeatherDialog" width="80%"
|
|
|
:destroy-on-close="true" :before-close="
|
|
|
(done) => {
|
|
|
tableDialogClass = 'modal animated a1 fadeOutLeftBig';
|
|
|
@@ -209,7 +225,7 @@
|
|
|
}
|
|
|
" @closed="tableDialogClass = 'modal animated a1 fadeInLeftBig'">
|
|
|
<div class="weatherBox">
|
|
|
- <!-- <div class="l">
|
|
|
+ <div class="l">
|
|
|
<DoubleLineChart :height="'100%'" :list="weatherChart" />
|
|
|
</div>
|
|
|
<div class="r">
|
|
|
@@ -272,32 +288,25 @@
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog> -->
|
|
|
|
|
|
- <weather-dialog ref="weatherDia"></weather-dialog>
|
|
|
+ <!-- <weather-dialog ref="weatherDia"></weather-dialog> -->
|
|
|
|
|
|
- <el-dialog top="50px" title="查看视频" :custom-class="videoDialogClass" v-model="showVideoDialog" width="80%"
|
|
|
- :destroy-on-close="true" :before-close="
|
|
|
- (done) => {
|
|
|
- videoDialogClass = 'modal animated a1 bounceOut';
|
|
|
- delaylyFn(450, done);
|
|
|
- }
|
|
|
- " @closed="
|
|
|
- dialogVideoUrl = '';
|
|
|
- videoDialogClass = 'modal animated a1 bounceIn';
|
|
|
- ">
|
|
|
- <!-- <iframe
|
|
|
- class="videoBoxiframe"
|
|
|
- width="95%"
|
|
|
- height="800px"
|
|
|
- :src="dialogVideoUrl"
|
|
|
- /> -->
|
|
|
+ <!-- <el-dialog top="50px" title="查看视频" :custom-class="videoDialogClass" v-model="showVideoDialog" width="80%"
|
|
|
+ :destroy-on-close="true" :before-close="(done) => {
|
|
|
+ videoDialogClass = 'modal animated a1 bounceOut';
|
|
|
+ delaylyFn(450, done);
|
|
|
+ }
|
|
|
+ " @closed="
|
|
|
+ dialogVideoUrl = '';
|
|
|
+ videoDialogClass = 'modal animated a1 bounceIn';
|
|
|
+ ">
|
|
|
<hlsVideo class="videoBoxiframe" width="95%" height="800px" :code="dialogVideoUrl" />
|
|
|
- </el-dialog>
|
|
|
- <el-dialog title="场站综合评分" :custom-class="mainInfoDialogClass" v-model="showMainInfoDialog" width="80%"
|
|
|
+ </el-dialog> -->
|
|
|
+ <!-- <el-dialog title="场站综合评分" :class="mainInfoDialogClass" v-model="showMainInfoDialog" width="80%"
|
|
|
:destroy-on-close="true" :before-close="
|
|
|
(done) => {
|
|
|
mainInfoDialogClass = 'modal curModal animated a1 fadeOutUpBig';
|
|
|
@@ -327,7 +336,7 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog> -->
|
|
|
</div>
|
|
|
<router-view v-else />
|
|
|
</div>
|
|
|
@@ -354,6 +363,7 @@
|
|
|
import {
|
|
|
alarm_history,
|
|
|
} from "@/api/zhbj/index.js";
|
|
|
+ import jsonData from "./component/data.json";
|
|
|
export default {
|
|
|
// 名称
|
|
|
name: "SandTable",
|
|
|
@@ -379,15 +389,18 @@
|
|
|
data() {
|
|
|
const that = this;
|
|
|
return {
|
|
|
+ problem1: null,
|
|
|
+ problem2: null,
|
|
|
videoShow: true,
|
|
|
showPanel: false,
|
|
|
bjSwitch: false,
|
|
|
- warnSwitch: false,
|
|
|
+ warnSwitch: 'z',
|
|
|
timmer1: null,
|
|
|
showWeatherDialog: false,
|
|
|
showTableDialog: false,
|
|
|
showHealthDialog: false,
|
|
|
showMainInfoDialog: false,
|
|
|
+ noTimeDialog: false,
|
|
|
weathercollapse: "",
|
|
|
weatherChart: [{
|
|
|
title: "温度",
|
|
|
@@ -616,6 +629,221 @@
|
|
|
|
|
|
// 函数
|
|
|
methods: {
|
|
|
+ init(res) {
|
|
|
+ let that = this
|
|
|
+ // 72小时功率曲线
|
|
|
+ if (res.data["72time"] && res.data["72time"].length > 0) {
|
|
|
+ let xAxis = [];
|
|
|
+ let seriesSpeed = [];
|
|
|
+ res.data["72time"].forEach((it) => {
|
|
|
+ xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
|
|
|
+ seriesSpeed.push(it.speed);
|
|
|
+ });
|
|
|
+ let series = [
|
|
|
+ {
|
|
|
+ name: "故障次数",
|
|
|
+ data: seriesSpeed,
|
|
|
+ type: "line",
|
|
|
+ symbol: "none",
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ that.getPowerLine(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ "problem1"
|
|
|
+ );
|
|
|
+ that.getPowerLine2(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ "problem2"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPowerLine(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ name
|
|
|
+ ) {
|
|
|
+ let myChart;
|
|
|
+ let legendState = {};
|
|
|
+ if (this.problem1?.getOption) {
|
|
|
+ legendState = this.problem1.getOption().legend[0].selected;
|
|
|
+ }
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "故障次数趋势",
|
|
|
+ left: "5px",
|
|
|
+ top: "5px",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: 400,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
|
|
|
+ legend: {
|
|
|
+ right: "25",
|
|
|
+ top: "5",
|
|
|
+ itemWidth: 5,
|
|
|
+ itemHeight: 5,
|
|
|
+ data: ["故障次数"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ selected: legendState,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "5%",
|
|
|
+ height: "110px",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xAxis,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff", // 修改为需要的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ccc",
|
|
|
+ type: "dashed", // 修改为虚线
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "单位：次",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter(value) {
|
|
|
+ return parseFloat(value.toFixed(1));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let dom = document.getElementById(name);
|
|
|
+ dom && dom.removeAttribute("_echarts_instance_");
|
|
|
+
|
|
|
+ myChart = this.$echarts.init(dom);
|
|
|
+ this.problem1 = myChart;
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPowerLine2(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ name
|
|
|
+ ) {
|
|
|
+ let myChart;
|
|
|
+ let legendState = {};
|
|
|
+ if (this.problem2?.getOption) {
|
|
|
+ legendState = this.problem2.getOption().legend[0].selected;
|
|
|
+ }
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "故障次数趋势",
|
|
|
+ left: "5px",
|
|
|
+ top: "5px",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: "16",
|
|
|
+ fontWeight: 400,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
|
|
|
+ legend: {
|
|
|
+ right: "25",
|
|
|
+ top: "5",
|
|
|
+ itemWidth: 5,
|
|
|
+ itemHeight: 5,
|
|
|
+ data: ["故障次数"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ selected: legendState,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "5%",
|
|
|
+ height: "110px",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xAxis,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff", // 修改为需要的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ccc",
|
|
|
+ type: "dashed", // 修改为虚线
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "单位：次",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter(value) {
|
|
|
+ return parseFloat(value.toFixed(1));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let dom = document.getElementById(name);
|
|
|
+ dom && dom.removeAttribute("_echarts_instance_");
|
|
|
+
|
|
|
+ myChart = this.$echarts.init(dom);
|
|
|
+ this.problem2 = myChart;
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
openWeatherDialog() {
|
|
|
// this.showWeatherDialog = true;
|
|
|
this.$refs.weatherDia.showWeaterDialog()
|
|
|
@@ -939,21 +1167,25 @@
|
|
|
|
|
|
changeBjSwitch() {
|
|
|
this.bjSwitch = !this.bjSwitch;
|
|
|
- if (this.bjSwitch) {
|
|
|
- this.getRecordMGT();
|
|
|
- } else {
|
|
|
- this.getRepertoryMGT();
|
|
|
- }
|
|
|
+ // if (this.bjSwitch) {
|
|
|
+ // this.getRecordMGT();
|
|
|
+ // } else {
|
|
|
+ // this.getRepertoryMGT();
|
|
|
+ // }
|
|
|
},
|
|
|
|
|
|
- changeWarnSwitch() {
|
|
|
- this.warnSwitch = !this.warnSwitch;
|
|
|
- if (this.warnSwitch) {
|
|
|
- this.getStopMGT();
|
|
|
- } else {
|
|
|
- this.getWarnMGT();
|
|
|
- }
|
|
|
+ changeWarnSwitch(val) {
|
|
|
+ this.warnSwitch = val
|
|
|
+ // if (this.warnSwitch) {
|
|
|
+ // this.getStopMGT();
|
|
|
+ // } else {
|
|
|
+ // this.getWarnMGT();
|
|
|
+ // }
|
|
|
},
|
|
|
+ clickTime() {
|
|
|
+ this.noTimeDialog = true
|
|
|
+ console.log("cscscs===>>>>", "cscs")
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期钩子
|
|
|
beforeCreate() {
|
|
|
@@ -975,7 +1207,21 @@
|
|
|
},
|
|
|
mounted() {
|
|
|
// 渲染后
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.init(jsonData)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler(val) {
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.init(jsonData)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
+
|
|
|
beforeUpdate() {
|
|
|
// 数据更新前
|
|
|
},
|
|
|
@@ -1135,6 +1381,44 @@
|
|
|
.el-overlay {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 19vh;
|
|
|
+ position: relative;
|
|
|
+ bottom: -80vh;
|
|
|
+ z-index: 111;
|
|
|
+
|
|
|
+ .hover72Power,
|
|
|
+ .monthPower {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ background: rgba(41, 45, 53, 0.4);
|
|
|
+ border-radius: 6px;
|
|
|
+ position: relative;
|
|
|
+ .hidBtn {
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 5px;
|
|
|
+ width: 0;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hover72Power {
|
|
|
+ .hidBtn {
|
|
|
+ width: 125px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .monthPower {
|
|
|
+ .hidBtn {
|
|
|
+ width: 75px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
#sandTable.sand-table .curModal .el-dialog__body {
|
