1880 lines
54 KiB
Vue
1880 lines
54 KiB
Vue
<template>
|
||
<div class="fullHeight dataBoardIndex">
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 环境监测 -->
|
||
{{$t('message.dataBoard.environmentMonitor')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<airQulityChart :show='true' :size='small'></airQulityChart>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<!-- <div class="blockTitle">雾炮喷淋</div> -->
|
||
<div class="blockTitle">
|
||
<!-- 设备情况 -->
|
||
{{$t('message.dataBoard.devDetail')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<vue-scroll>
|
||
<div class="devInfoBox">
|
||
<div class="item">
|
||
<img src="@/assets/images/dataBoard/online.jpg" alt="">
|
||
<div>
|
||
<p class="num" style="color:#5181F6">{{onlineDevNum}}</p>
|
||
<p>
|
||
<!-- 在线设备 -->
|
||
{{$t('message.dataBoard.onlineDev')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<img src="@/assets/images/dataBoard/offline.jpg" alt="">
|
||
<div>
|
||
<p class="num" style="color:#F67F51">{{offlineDevNum}}</p>
|
||
<p>
|
||
<!-- 离线设备 -->
|
||
{{$t('message.dataBoard.notOnlineDev')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="devListBox">
|
||
<ul>
|
||
<li v-for="(item,index) in devList" :key="index">
|
||
<p>{{ item.deviceName }}</p>
|
||
<span class="offline" v-if="item.isClosed==2">
|
||
<!-- 离线 -->
|
||
{{$t('message.dataBoard.notOnline')}}
|
||
</span>
|
||
<span class="online" v-else>
|
||
<!-- 在线 -->
|
||
{{$t('message.dataBoard.online')}}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- <table class="greenTable">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table.th1") }}
|
||
</th>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table.th2") }}
|
||
</th>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table.th3") }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in sprayDevList" :key="index">
|
||
<td>{{ item.deviceName }}</td>
|
||
<td>{{ item.deviceId }}</td>
|
||
<td>
|
||
<img
|
||
@click="sprayOperate(item.deviceId, 1)"
|
||
v-if="item.switchStatus == 1"
|
||
src="@/assets/images/greenOverview/icon-switch.png"
|
||
/>
|
||
<img
|
||
@click="sprayOperate(item.deviceId, 2)"
|
||
v-else
|
||
src="@/assets/images/greenOverview/icon-switch-green.png"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="sprayDevList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>暂无数据</p>
|
||
</div> -->
|
||
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 趋势图 -->
|
||
{{$t('message.dataBoard.tendencyChart')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="operateBar">
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(1)"
|
||
:class="checked == 1 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(2)"
|
||
:class="checked == 2 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(3)"
|
||
:class="checked == 3 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
@click="switchingData(4)"
|
||
:class="checked == 4 ? 'active' : ''"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
|
||
</span>
|
||
</div>
|
||
<div class="near24hChart" ref="near24hChart"></div>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="dustData_24.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center fullHeight">
|
||
<div class="top">
|
||
<div class="blockTitle blockTitle3">
|
||
<!-- 实时数据 -->
|
||
{{$t('message.dataBoard.realData')}}
|
||
</div>
|
||
<el-popover placement="bottom" width="70" trigger="click">
|
||
<ul class="devList">
|
||
<li
|
||
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
|
||
v-for="(item, index) in devList"
|
||
:key="index"
|
||
@click="realTimeMonitor(item)"
|
||
>
|
||
{{ item.deviceName }}
|
||
</li>
|
||
</ul>
|
||
<p class="greenBtn selectDev" slot="reference">
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ currentDevDetail.deviceName }}
|
||
<i class="el-icon-arrow-down"></i>
|
||
</p>
|
||
</el-popover>
|
||
<div style="width: 100%;display: flex;justify-content: center;">
|
||
<img style="width: 78%;" src="../../../assets/images/qualityManage/shuangtan.png" alt="">
|
||
</div>
|
||
<!-- <div class="realTimeData">
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/PM2.5@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>PM2.5</p>
|
||
<p>{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p>
|
||
|
||
<img v-if="plantCap.pm25AlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/PM10@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>PM10</p>
|
||
<p>{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p>
|
||
|
||
<img v-if="plantCap.pm10AlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/温度@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>
|
||
|
||
{{$t('message.dataBoard.temperature')}}
|
||
</p>
|
||
<p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
|
||
|
||
<img v-if="plantCap.temperatureAlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/湿度@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>
|
||
|
||
{{$t('message.dataBoard.humidity')}}
|
||
</p>
|
||
<p>{{plantCap.humidity?plantCap.humidity:'--'}}%</p>
|
||
|
||
<img v-if="plantCap.humidityAlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/编组 27.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>TSP</p>
|
||
<p>{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p>
|
||
|
||
<img v-if="plantCap.tspAlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/噪声@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>
|
||
|
||
{{$t('message.dataBoard.noise')}}
|
||
</p>
|
||
<p>{{plantCap.noise?plantCap.noise:'--'}}dB</p>
|
||
|
||
<img v-if="plantCap.noiseAlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="realTimeData_item">
|
||
<div class="realTimeData_item_img">
|
||
<img src="@/assets/images/greenOverview/风速@1x.png" alt="">
|
||
</div>
|
||
<div class="realTimeData_item_text">
|
||
<p>
|
||
|
||
{{$t('message.dataBoard.windSpeed')}}
|
||
</p>
|
||
<p>{{plantCap.windspeed?plantCap.windspeed:'--'}}m/s</p>
|
||
|
||
<img v-if="plantCap.windSpeedAlarmType == 1" src="@/assets/images/greenOverview/形状备份-2.gif" alt="">
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottomInner weatherBox">
|
||
<div class="blockTitle" :class="enabledProjectV2==3?'blockTitle4':'blockTitle2'" style="margin-bottom:6px"><i></i>晴雨表</div>
|
||
<div style="overflow:hidden;width:100%">
|
||
<div
|
||
class="weatherItem"
|
||
v-for="(item, index) in weatherList"
|
||
:key="index"
|
||
>
|
||
<p>
|
||
<span>{{ item.day }}</span>
|
||
<!-- <span>（{{ item.week }}）</span> -->
|
||
</p>
|
||
<div style="height: 10%"></div>
|
||
<div class="imgBox">
|
||
<img :src="item.url" />
|
||
</div>
|
||
<div style="height: 10%"></div>
|
||
<p class="weather">{{ item.wea }}</p>
|
||
<p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
|
||
<div style="height: 6%"></div>
|
||
<p>
|
||
{{ $t("message.environmentalOverview.wind_power") }}
|
||
{{ item.win_speed }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fullHeight aside">
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 空气分析 -->
|
||
{{$t('message.dataBoard.airAnalysis')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="operateBar">
|
||
<span
|
||
class="greenBtn"
|
||
:class="airType == 1 ? 'active' : ''"
|
||
@click="
|
||
airType = 1;
|
||
getAirQualityStatistics();
|
||
"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e5SelectArr")[0].title }}
|
||
</span>
|
||
<span
|
||
class="greenBtn"
|
||
:class="airType == 2 ? 'active' : ''"
|
||
@click="
|
||
airType = 2;
|
||
getAirQualityStatistics();
|
||
"
|
||
>
|
||
<img
|
||
v-for="item in 4"
|
||
:key="item"
|
||
:class="'arrow' + item"
|
||
class="arrow"
|
||
src="@/assets/images/greenOverview/arrow.png"
|
||
/>
|
||
{{ $t("message.environmentalOverview.e5SelectArr")[1].title }}
|
||
</span>
|
||
</div>
|
||
<div class="progressBox">
|
||
<vue-scroll>
|
||
<ul>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[0].num : 0
|
||
"
|
||
:color="'#1FCCC6'"
|
||
></el-progress>
|
||
<span class="type type1">{{
|
||
$t("message.environmentalOverview.typeList")[0]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[1].num : 0
|
||
"
|
||
:color="'#FFBB38'"
|
||
></el-progress>
|
||
<span class="type type2">{{
|
||
$t("message.environmentalOverview.typeList")[1]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[2].num : 0
|
||
"
|
||
:color="'#FE7A18'"
|
||
></el-progress>
|
||
<span class="type type3">{{
|
||
$t("message.environmentalOverview.typeList")[2]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[3].num : 0
|
||
"
|
||
:color="'#7718FE'"
|
||
></el-progress>
|
||
<span class="type type4">{{
|
||
$t("message.environmentalOverview.typeList")[3]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[4].num : 0
|
||
"
|
||
:color="'#890EA1'"
|
||
></el-progress>
|
||
<span class="type type5">{{
|
||
$t("message.environmentalOverview.typeList")[4]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<el-progress
|
||
:show-text="false"
|
||
:stroke-width="4"
|
||
:percentage="
|
||
airAnalysis.length > 0 ? airAnalysis[5].num : 0
|
||
"
|
||
:color="'#970C0C'"
|
||
></el-progress>
|
||
<span class="type type6">{{
|
||
$t("message.environmentalOverview.typeList")[5]
|
||
}}</span>
|
||
<span
|
||
>{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
|
||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 今日报警统计 -->
|
||
{{$t('message.dataBoard.todayAlarmStatistics')}}
|
||
</div>
|
||
<div class="blockContent">
|
||
<div class="safeChart" ref="safeChart"></div>
|
||
<div class="descBox fullHeight">
|
||
<div>
|
||
<!-- 噪声报警 -->
|
||
<div class="descItem descItem1">
|
||
<p class="text"><i class="dot purple"></i>
|
||
扬尘
|
||
{{$t('message.dataBoard.noiseAlarm')}}
|
||
</p>
|
||
<p class="num">{{alarmData.noiseNum}}</p>
|
||
</div>
|
||
|
||
<!-- <div class="descItem descItem1">
|
||
<p class="text"><i style="background: #ffbb38;" class="dot"></i>{{'TSP'+$t('message.dataBoard.alarm')}}</p>
|
||
<p class="num">{{alarmData.tspNum}}</p>
|
||
</div> -->
|
||
<div class="descItem descItem1">
|
||
<p class="text"><i style="background: #fe6c7f;" class="dot"></i>{{'PM2.5'+$t('message.dataBoard.excessiveAlarm')}}</p>
|
||
<p class="num">{{alarmData.pm25Num}}</p>
|
||
</div>
|
||
<!-- <div class="descItem">
|
||
<p class="text"><i class="dot green"></i>{{'PM10'+$t('message.dataBoard.excessiveAlarm')}}</p>
|
||
<p class="num">{{alarmData.pm10Num}}</p>
|
||
</div> -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox">
|
||
<div class="blockTitle">
|
||
<!-- 报警记录 -->
|
||
{{$t('message.dataBoard.alarmRecords')}}
|
||
</div>
|
||
<div class="blockContent alarmBlockContent">
|
||
<vue-scroll>
|
||
<table class="greenTable">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table2.th1") }}
|
||
</th>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table2.th2") }}
|
||
</th>
|
||
<th>
|
||
{{ $t("message.environmentalOverview.table2.th3") }}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, index) in alarmList" :key="index">
|
||
<td>
|
||
{{ item.deviceName }}
|
||
</td>
|
||
<td>{{ item.tempAlarmTime }}</td>
|
||
<td>{{ item.alarmTypeName }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="alarmList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import airQulityChart from "@/components/chart/airQulityChart";
|
||
import {
|
||
environmentDevList,
|
||
selectNewEnvironmentAlarmListApi,
|
||
getRealTimeDustNoiseDataApi,
|
||
sprayDevListApi,
|
||
selectDustNoiseDataApi,
|
||
getWeatherDataApi,
|
||
getAirQualityStatisticsApi,
|
||
sprayOperateDataApi,
|
||
getEnvironmentWarningInfo
|
||
} from "@/assets/js/api/environmentManage";
|
||
import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard"
|
||
export default {
|
||
components: { airQulityChart },
|
||
data() {
|
||
return {
|
||
devList: [],
|
||
currentDevDetail: {},
|
||
projectSn: "",
|
||
weatherInfo: {
|
||
data: [],
|
||
},
|
||
alarmList: [],
|
||
plantCap: {
|
||
crc: "--",
|
||
humidity: "--",
|
||
noise: "--",
|
||
plateHumidity: "--",
|
||
plateTemperature: "--",
|
||
pm10: "--",
|
||
pm25: "--",
|
||
pressure: "--",
|
||
temperature: "--",
|
||
tsp: "--",
|
||
voltage: "--",
|
||
winddirectionName: "--",
|
||
windspeed: "--",
|
||
},
|
||
checked: 1,
|
||
airType: 1,
|
||
airAnalysis: [],
|
||
weatherList: [],
|
||
todayAir: {
|
||
analysisData: "0",
|
||
analysisType: "优",
|
||
},
|
||
sprayDevList: [],
|
||
dustData_24: [],
|
||
alarmData:{
|
||
humidityNum: 0,
|
||
noiseNum: 0,
|
||
pm10Num: 2,
|
||
pm25Num: 2,
|
||
temperatureNum: 0,
|
||
totalAlarm: 4,
|
||
tspNum: 0,
|
||
windspeedNum: 0
|
||
},
|
||
onlineDevNum:0,
|
||
offlineDevNum:0,
|
||
enabledProjectV2:2,
|
||
realTimeDustNoiseDataTime:null,//圆形图实时刷新计时器
|
||
pm10Warning:'',
|
||
pm25Warning:'',
|
||
noiseWarning:'',
|
||
windSpeedWarning:''
|
||
};
|
||
},
|
||
created() {
|
||
this.enabledProjectV2=enabledProjectV2
|
||
this.projectSn = this.$store.state.projectSn;
|
||
},
|
||
mounted() {
|
||
this.loadWeather();
|
||
this.getAlarmList();
|
||
this.getAirQualityStatistics();
|
||
this.$nextTick(() => {
|
||
this.getDevList();
|
||
});
|
||
// this.getSprayDevList();
|
||
this.selectEnvironmentAlarmCountTotal()
|
||
},
|
||
methods: {
|
||
getEnvironmentWarningInfoApi(){
|
||
// console.log('执行');
|
||
getEnvironmentWarningInfo({
|
||
deviceId: this.currentDevDetail.deviceId,
|
||
projectSn: this.projectSn,
|
||
warningType: 1
|
||
}).then(res => {
|
||
console.log(res.result);
|
||
this.pm10Warning = res.result.pm10Warning
|
||
this.pm25Warning = res.result.pm25Warning
|
||
this.noiseWarning = res.result.noiseWarning
|
||
this.windSpeedWarning = res.result.windSpeed
|
||
this.createdEcharts2();
|
||
})
|
||
},
|
||
selectEnvironmentAlarmCountTotal(){
|
||
selectEnvironmentAlarmCountTotalApi({
|
||
sn: this.$store.state.projectSn,
|
||
selectType: 1
|
||
}).then((res) => {
|
||
this.alarmData=res.result
|
||
console.log(res.result);
|
||
this.createPieChart(
|
||
[
|
||
{ value: this.alarmData.noiseNum, name: '' },
|
||
{ value: this.alarmData.pm25Num, name: '' },
|
||
// { value: this.alarmData.pm10Num, name: '' },
|
||
// { value: this.alarmData.tspNum, name: '' },
|
||
],
|
||
|
||
// this.$refs.safeChart,["rgba(120, 111, 240, 1)","#fe6c7f","rgba(92, 226, 246, 1)","#ffbb38"],'报警总数'
|
||
this.$refs.safeChart,["#5CE2F6","#5181F6"],'报警总数'
|
||
);
|
||
});
|
||
},
|
||
createPieChart(data, div,color,title) {
|
||
let that = this;
|
||
let monitor = echarts.init(div);
|
||
// monitor.clear();
|
||
var option = {
|
||
color: color?color:["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||
title: {
|
||
show: true,
|
||
text: data[0].value+data[1].value,
|
||
// text: data[0].value+data[1].value+data[2].value+data[3].value,
|
||
x: "48%",
|
||
y: "36%",
|
||
z: 5,
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "rgba(255, 255, 255, 1)",
|
||
fontSize: 20,
|
||
},
|
||
subtext: title,
|
||
subtextStyle: {
|
||
color: "rgba(255, 255, 255, 0.8)",
|
||
fontSize: 13,
|
||
},
|
||
},
|
||
grid:{
|
||
right:0
|
||
},
|
||
legend: {
|
||
show:false
|
||
},
|
||
// tooltip: {
|
||
// // data: ['在线', '离线'],
|
||
// trigger: "item",
|
||
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||
// },
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
// if(color){
|
||
// option.series[0].radius=["75%", "85%"]
|
||
// option.title.x="45%"
|
||
// option.legend.show=false
|
||
// }
|
||
monitor.setOption(option);
|
||
},
|
||
sprayOperate(deviceId, operateType) {
|
||
sprayOperateDataApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
operateType: operateType,
|
||
deviceId: deviceId,
|
||
}).then((res) => {
|
||
this.sprayDevList = res.result;
|
||
});
|
||
},
|
||
getSprayDevList() {
|
||
sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
this.sprayDevList = res.result;
|
||
}
|
||
);
|
||
},
|
||
loadWeather() {
|
||
var _this = this;
|
||
getWeatherDataApi({ cityid: "" }).then((res) => {
|
||
var json = JSON.parse(res.result);
|
||
var list = json.data;
|
||
//
|
||
list.forEach((element, index) => {
|
||
// element.week=getWeek(element.date)
|
||
// element.date = element.date.substring(5,element.date.length)
|
||
element.url = require("@/assets/images/weather/" +
|
||
element.wea_img +
|
||
".png");
|
||
this.weatherList.push(element);
|
||
});
|
||
});
|
||
},
|
||
|
||
//空气质量分析--统计
|
||
getAirQualityStatistics() {
|
||
let data = {
|
||
type: this.airType,
|
||
projectSn: this.projectSn,
|
||
};
|
||
getAirQualityStatisticsApi(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
this.airAnalysis = res.result;
|
||
}
|
||
});
|
||
},
|
||
|
||
//获取环境设备列表--环境监测实时数据--下拉
|
||
getDevList() {
|
||
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
||
(result) => {
|
||
// console.log('列表', result)
|
||
this.devList = result.result;
|
||
console.log(this.devList)
|
||
if (result.result.length > 0) {
|
||
this.currentDevDetail = result.result[0];
|
||
this.offlineDevNum=0
|
||
this.onlineDevNum=0
|
||
this.devList.forEach(element => {
|
||
if(element.isClosed==2){
|
||
this.offlineDevNum++
|
||
}else{
|
||
this.onlineDevNum++
|
||
}
|
||
});
|
||
// console.log('645');
|
||
this.getRealTimeDustNoiseData();
|
||
this.realTimeDustNoiseDataTime = setInterval( () => {
|
||
this.getRealTimeDustNoiseData();
|
||
},5000)
|
||
this.selectDustNoiseData();
|
||
} else {
|
||
// this.createCenterChart();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
|
||
//切换环境单位
|
||
realTimeMonitor(value) {
|
||
if(this.realTimeDustNoiseDataTime){
|
||
clearInterval(this.realTimeDustNoiseDataTime)
|
||
}
|
||
// console.log('657');
|
||
this.currentDevDetail = value;
|
||
this.getRealTimeDustNoiseData();
|
||
this.realTimeDustNoiseDataTime = setInterval( () => {
|
||
this.getRealTimeDustNoiseData();
|
||
},5000)
|
||
// this.getRealTimeDustNoiseData();
|
||
|
||
this.selectDustNoiseData();
|
||
},
|
||
|
||
//获取环境设备详情数据
|
||
getRealTimeDustNoiseData() {
|
||
let data = {
|
||
deviceId: this.currentDevDetail.deviceId,
|
||
projectSn: this.projectSn,
|
||
};
|
||
console.log(data);
|
||
getRealTimeDustNoiseDataApi(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
console.log(res.result)
|
||
if (res.result) {
|
||
this.plantCap = res.result;
|
||
} else {
|
||
this.plantCap = {
|
||
crc: "--",
|
||
humidity: "--",
|
||
noise: "--",
|
||
plateHumidity: "--",
|
||
plateTemperature: "--",
|
||
pm10: "--",
|
||
pm25: "--",
|
||
pressure: "--",
|
||
temperature: "--",
|
||
tsp: "--",
|
||
voltage: "--",
|
||
winddirectionName: "--",
|
||
windspeed: "--",
|
||
};
|
||
}
|
||
// this.createCenterChart();
|
||
}
|
||
});
|
||
},
|
||
//获取报警列表
|
||
getAlarmList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
selectNewEnvironmentAlarmListApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.alarmList = res.result;
|
||
}
|
||
});
|
||
},
|
||
//近24小时数据
|
||
selectDustNoiseData() {
|
||
var now = new Date();
|
||
var yy = now.getFullYear(); //年
|
||
var mm = now.getMonth() + 1; //月
|
||
var dd = now.getDate(); //日
|
||
var time = yy + "-";
|
||
if (mm < 10) time += "0";
|
||
time += mm + "-";
|
||
if (dd < 10) time += "0";
|
||
time += dd;
|
||
let data = {
|
||
searchDate: time,
|
||
projectSn: this.projectSn,
|
||
deviceId: this.currentDevDetail.deviceId,
|
||
};
|
||
selectDustNoiseDataApi(data).then((res) => {
|
||
console.log(res.result)
|
||
this.getEnvironmentWarningInfoApi()
|
||
this.dustData_24 = res.result;
|
||
});
|
||
},
|
||
|
||
//切换 24小时数据
|
||
switchingData(value) {
|
||
this.checked = value;
|
||
this.createdEcharts2();
|
||
},
|
||
// 环境监测实时数据
|
||
realTimeData(){
|
||
|
||
},
|
||
//环境监测实时数据--图表 (圆形图)
|
||
createCenterChart() {
|
||
let centerChart = echarts.init(this.$refs.centerChart);
|
||
console.log("this.$refs.centerChart");
|
||
console.log(this.$refs.centerChart.offsetHeight);
|
||
centerChart.clear();
|
||
let detailData = this.$t("message.environmentalOverview.plantCap");
|
||
for (let i = 0; i < detailData.length; i++) {
|
||
if (detailData[i].id == 1) {
|
||
detailData[i].value = this.plantCap.humidity;//湿度
|
||
} else if (detailData[i].id == 2) {
|
||
detailData[i].value = this.plantCap.pm25;//pm2.5
|
||
} else if (detailData[i].id == 3) {
|
||
detailData[i].value = this.plantCap.temperature;//温度
|
||
} else if (detailData[i].id == 4) {
|
||
detailData[i].value = this.plantCap.tsp;//tsp
|
||
} else if (detailData[i].id == 5) {
|
||
detailData[i].value = this.plantCap.windspeed;
|
||
} else if (detailData[i].id == 6) {
|
||
detailData[i].value = this.plantCap.pm10;
|
||
} else if (detailData[i].id == 7) {
|
||
detailData[i].value = this.plantCap.winddirectionName;
|
||
} else if (detailData[i].id == 8) {
|
||
detailData[i].value = this.plantCap.pressure
|
||
? this.plantCap.pressure
|
||
: "--";
|
||
}
|
||
detailData[i].value += detailData[i].unit;
|
||
}
|
||
var plantCap = detailData;
|
||
var datalist = [
|
||
{
|
||
offset: [50, 50],
|
||
symbolSize: 100,
|
||
opacity: 0.95,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color:this.plantCap.humidityAlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.humidityAlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//湿度
|
||
{
|
||
offset: [30, 80],
|
||
symbolSize: 95,
|
||
opacity: 0.95,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: this.plantCap.pm25AlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.pm25AlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//pm2.5
|
||
{
|
||
offset: [15, 35],
|
||
symbolSize: 90,
|
||
opacity: 0.95,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: this.plantCap.temperatureAlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.temperatureAlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//温度
|
||
{
|
||
offset: [44, 16],
|
||
symbolSize: 70,
|
||
opacity: 0.95,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: this.plantCap.tspAlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.tspAlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//tsp
|
||
{
|
||
offset: [80, 58],
|
||
symbolSize: 65,
|
||
opacity: 0.95,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: this.plantCap.windSpeedAlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.windSpeedAlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//风速
|
||
{
|
||
offset: [76, 20],
|
||
symbolSize: 80,
|
||
opacity: 0.7,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: this.plantCap.pm10AlarmType == 0?"#35d17e":"#e54948",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: this.plantCap.pm10AlarmType == 0?"#49ddb2":"#f08456",
|
||
},
|
||
]),
|
||
},//pm10
|
||
{
|
||
offset: [64, 80],
|
||
symbolSize: 65,
|
||
opacity: 0.68,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: "#ff4141",
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "#ff8989",
|
||
// },
|
||
{
|
||
offset: 0,
|
||
color: "#35d17e",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#49ddb2",
|
||
},
|
||
]),
|
||
},//风向
|
||
|
||
// {
|
||
// offset: [90, 75],
|
||
// symbolSize: 50,
|
||
// opacity: 0.68,
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: "#6367E0",
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: "#B667F0",
|
||
// },
|
||
// ]),
|
||
// },
|
||
];
|
||
var datas = [];
|
||
for (var i = 0; i < plantCap.length; i++) {
|
||
var item = plantCap[i];
|
||
var itemToStyle = datalist[i];
|
||
datas.push({
|
||
name: item.name + "\n" + item.value,
|
||
value: itemToStyle.offset,
|
||
symbolSize: itemToStyle.symbolSize,
|
||
label: {
|
||
normal: {
|
||
textStyle: {
|
||
fontSize: 18,
|
||
fontWeight: 800,
|
||
lineHeight: 22,
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: itemToStyle.color,
|
||
opacity: itemToStyle.opacity,
|
||
},
|
||
},
|
||
});
|
||
}
|
||
let option1 = {
|
||
grid: {
|
||
show: false,
|
||
top: 10,
|
||
bottom: 10,
|
||
},
|
||
xAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
type: "value",
|
||
show: false,
|
||
min: 0,
|
||
max: 100,
|
||
nameLocation: "middle",
|
||
nameGap: 5,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
gridIndex: 0,
|
||
min: 0,
|
||
show: false,
|
||
max: 100,
|
||
nameLocation: "middle",
|
||
nameGap: 30,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: "effectScatter",
|
||
// symbol: 'circle',
|
||
// symbolSize: 120,
|
||
|
||
hoverAnimation: true,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
formatter: "{b}",
|
||
color: "#fff",
|
||
textStyle: {
|
||
fontSize: "20",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00acea",
|
||
},
|
||
},
|
||
data: datas,
|
||
},
|
||
],
|
||
};
|
||
centerChart.setOption(option1);
|
||
window.onresize = centerChart.resize;
|
||
},
|
||
//创建图表 --- 环境监测
|
||
createdEcharts3() {
|
||
let that = this;
|
||
//项目进度
|
||
let monitor = echarts.init(this.$refs.monitor);
|
||
monitor.clear();
|
||
// this.$t("message.projectSummary.actor")
|
||
var text;
|
||
var option = {
|
||
title: {
|
||
show: true,
|
||
text: this.todayAir.analysisType,
|
||
x: "49%",
|
||
y: "55%",
|
||
z: 8,
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: " rgb(147,169,205) ",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius: "62%",
|
||
splitNumber: 50,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[this.todayAir.analysisData / 500, "#1FCCC6"],
|
||
[1, "#111F42"],
|
||
],
|
||
width: 6,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "gauge",
|
||
// center: ['20%', '50%'],
|
||
radius: "80%",
|
||
min: 0, //最小刻度
|
||
max: 500, //最大刻度
|
||
splitNumber: 50, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: [[1, "rgba(0,0,0,0)"]],
|
||
},
|
||
},
|
||
//仪表盘轴线
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#4d5bd1",
|
||
distance: 14,
|
||
formatter: function (v) {
|
||
switch (v + "") {
|
||
case "0":
|
||
return "0";
|
||
case "50":
|
||
return "50";
|
||
case "100":
|
||
return "100";
|
||
case "150":
|
||
return "150";
|
||
case "200":
|
||
return "200";
|
||
case "250":
|
||
return "250";
|
||
case "300":
|
||
return "300";
|
||
case "350":
|
||
return "350";
|
||
case "400":
|
||
return "400";
|
||
case "450":
|
||
return "450";
|
||
case "500":
|
||
return "500";
|
||
}
|
||
},
|
||
}, //刻度标签。
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 50,
|
||
lineStyle: {
|
||
color: "#386EC1",
|
||
width: 2,
|
||
},
|
||
length: -4,
|
||
}, //刻度样式
|
||
splitLine: {
|
||
show: true,
|
||
length: -10,
|
||
lineStyle: {
|
||
color: "#386EC1",
|
||
},
|
||
}, //分隔线样式
|
||
detail: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
/*内部*/
|
||
{
|
||
type: "pie",
|
||
radius: ["0", "35%"],
|
||
center: ["50%", "50%"],
|
||
z: 8,
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
value: this.todayAir.analysisData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#141920",
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
rich: {
|
||
a: {
|
||
color: "#41BAE2",
|
||
align: "center",
|
||
fontSize: 31,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
return "{a|" + params.value + "}";
|
||
},
|
||
position: "center",
|
||
show: true,
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
/*外一层*/
|
||
{
|
||
type: "pie",
|
||
radius: "40%",
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
hoverAnimation: false,
|
||
center: ["50%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
},
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(69, 161, 255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
//外二层圈
|
||
{
|
||
type: "pie",
|
||
radius: "45%",
|
||
center: ["50%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
z: 0,
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
},
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(69, 161, 255,0.5)",
|
||
},
|
||
},
|
||
},
|
||
//最外层圈
|
||
{
|
||
type: "pie",
|
||
radius: "50%",
|
||
center: ["50%", "50%"],
|
||
avoidLabelOverlap: false,
|
||
z: 0,
|
||
hoverAnimation: false,
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
},
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(69, 161, 255,0.3)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
//创建图表 --- 近24小时数据
|
||
createdEcharts2() {
|
||
var xdata = [],
|
||
ydata = [];
|
||
let monitor = echarts.init(this.$refs.near24hChart);
|
||
let Alert;
|
||
let AlertNumber;
|
||
// this.pm10Warning = res.result.pm10Warning
|
||
// this.pm25Warning = res.result.pm25Warning
|
||
// this.noiseWarning = res.result.noiseWarning
|
||
// this.windSpeedWarning = res.result.windSpeed
|
||
monitor.clear();
|
||
this.dustData_24.forEach((element) => {
|
||
//
|
||
xdata.push(element.uploadDate.split(" ")[1]);
|
||
switch (this.checked) {
|
||
case 1:
|
||
ydata.push(element.pm25);
|
||
Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
|
||
AlertNumber = this.pm25Warning
|
||
break;
|
||
case 2:
|
||
ydata.push(element.pm10);
|
||
Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
|
||
AlertNumber = this.pm10Warning
|
||
break;
|
||
case 3:
|
||
ydata.push(element.windspeed);
|
||
Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
|
||
AlertNumber = this.windSpeedWarning
|
||
break;
|
||
case 4:
|
||
ydata.push(element.noise);
|
||
Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
|
||
AlertNumber = this.noiseWarning
|
||
break;
|
||
}
|
||
});
|
||
var option = {
|
||
grid: {
|
||
top: 20,
|
||
left: 50,
|
||
bottom: 20,
|
||
right: 20,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.1)",
|
||
},
|
||
},
|
||
},
|
||
color: ["rgba(108, 233, 240, 0.7)"],
|
||
xAxis: {
|
||
type: "category",
|
||
data: xdata,
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.3)",
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max: function() {
|
||
let maxArr = ydata
|
||
let maxNum = Math.max.apply(null,maxArr)
|
||
if (AlertNumber > maxNum){
|
||
return AlertNumber;
|
||
}
|
||
},
|
||
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: [
|
||
{
|
||
data: ydata,
|
||
type: "line",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
markLine: {
|
||
label:{
|
||
position:"middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
||
formatter: Alert
|
||
},
|
||
data: [{
|
||
type: "average",
|
||
yAxis: AlertNumber,
|
||
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||
// type:"solid",
|
||
color:"rgba(238, 99, 99)"
|
||
},
|
||
}],
|
||
silent: true
|
||
},
|
||
// markLine : {
|
||
// // symbol:"none", //去掉警戒线最后面的箭头
|
||
// label:{
|
||
// position:"middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
|
||
// formatter: Alert
|
||
// },
|
||
// data : [{
|
||
// silent: true, //鼠标悬停事件 true没有，false有
|
||
// lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||
// type:"solid",
|
||
// color:"rgba(238, 99, 99)"
|
||
// },
|
||
// yAxis: AlertNumber
|
||
// }]
|
||
// },
|
||
symbol: "none",
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(108, 233, 240, 0.7)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(108, 233, 240, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
if(this.realTimeDustNoiseDataTime){
|
||
clearInterval(this.realTimeDustNoiseDataTime)
|
||
}
|
||
}
|
||
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.realTimeData{
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap:wrap;
|
||
/*justify-content:space-between;*/
|
||
padding: 50px 100px;
|
||
.realTimeData_item{
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
width: 230px;
|
||
padding: 0px 50px;
|
||
margin-top: 60px;
|
||
.realTimeData_item_img{
|
||
box-sizing: border-box;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
/*margin: auto;*/
|
||
}
|
||
.progressBox {
|
||
font-size: 11px;
|
||
color: #ffffff;
|
||
padding: 10px 15px;
|
||
height: calc(100% - 50px);
|
||
ul {
|
||
// display: flex;
|
||
height: 100%;
|
||
}
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 16.66%;
|
||
span {
|
||
display: inline-block;
|
||
}
|
||
.type {
|
||
width: 60px;
|
||
margin-left: 8px;
|
||
position: relative;
|
||
padding-left: 10px;
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
left: 0;
|
||
top: 7px;
|
||
}
|
||
}
|
||
.type1::after {
|
||
background-color: #1fccc6;
|
||
}
|
||
.type2::after {
|
||
background-color: #ffbb38;
|
||
}
|
||
.type3::after {
|
||
background-color: #fe7a18;
|
||
}
|
||
.type4::after {
|
||
background-color: #7718fe;
|
||
}
|
||
.type5::after {
|
||
background-color: #890ea1;
|
||
}
|
||
.type6::after {
|
||
background-color: #970c0c;
|
||
}
|
||
}
|
||
.el-progress {
|
||
width: calc(100% - 110px);
|
||
}
|
||
/deep/.el-progress-bar__outer {
|
||
background-color: rgba(216, 216, 216, 0.08);
|
||
}
|
||
}
|
||
.weatherBox {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 254, 0.6);
|
||
width: 100%;
|
||
margin: 0 30px;
|
||
.weatherItem {
|
||
float: left;
|
||
width: 14.28%;
|
||
text-align: center;
|
||
padding-top: 13px;
|
||
margin-top: -5px;
|
||
// height: calc(100% - 13px);
|
||
height: 165px;
|
||
padding-bottom: 13px;
|
||
background: linear-gradient(
|
||
rgba(21, 25, 33, 0.06),
|
||
rgba(6, 248, 179, 0.06)
|
||
);
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(
|
||
rgba(6, 248, 179, 0.06),
|
||
rgba(21, 25, 33, 0.06)
|
||
);
|
||
}
|
||
&:first-child {
|
||
background: linear-gradient(
|
||
rgba(21, 25, 33, 0.12),
|
||
rgba(6, 248, 179, 0.12)
|
||
);
|
||
}
|
||
.imgBox {
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin: 15px 0;
|
||
justify-content: center;
|
||
}
|
||
.weather {
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
margin-bottom: 3px;
|
||
}
|
||
// .temp{
|
||
// margin-bottom: 16px;
|
||
// }
|
||
}
|
||
}
|
||
.centerChart,
|
||
.near24hChart {
|
||
width: 100%;
|
||
height: calc(100% - 38px);
|
||
// width: 200px;
|
||
// height: 500px;
|
||
}
|
||
.selectDev {
|
||
position: absolute!important;
|
||
right: 60px;
|
||
top: 0px;
|
||
padding-right: 5px;
|
||
z-index: 9999;
|
||
}
|
||
.el-icon-arrow-down {
|
||
color: #5CE2F6;
|
||
margin-left: 10px;
|
||
}
|
||
.devList {
|
||
li {
|
||
cursor: pointer;
|
||
text-align: center;
|
||
line-height: 22px;
|
||
&.active,
|
||
&:hover {
|
||
color: rgba(6, 248, 179, 0.8);
|
||
}
|
||
}
|
||
}
|
||
/deep/.el-popover {
|
||
min-width: auto;
|
||
}
|
||
.devInfoBox{
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
.item{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
img{
|
||
margin-right: 7px;
|
||
margin-left: 20px;
|
||
}
|
||
p{
|
||
opacity: 0.8;
|
||
font-size: 14px;
|
||
}
|
||
.num{
|
||
opacity: 1;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
.devListBox{
|
||
|
||
margin: 0 10px;
|
||
li{
|
||
height: 37px;
|
||
line-height: 37px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
background-color: rgba(68, 215, 182, 0.1);
|
||
span{
|
||
width: 55px;
|
||
height: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
p{
|
||
font-size: 16px;
|
||
opacity: 0.8;
|
||
padding-left: 32px;
|
||
}
|
||
.online{
|
||
// background-color: rgba(68, 215, 182, 0.54);
|
||
background-color: #319FC9;
|
||
}
|
||
.offline{
|
||
// background-color: rgba(151, 12, 12, 0.54);
|
||
background-color:#7BA0C0
|
||
}
|
||
}
|
||
|
||
//蓝色风格
|
||
.dataBoardPage_blue{
|
||
.weatherBox{
|
||
height: calc(100% - 50px);
|
||
margin: 28px 0 0;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: rgba(38, 104, 209, 0.1);
|
||
}
|
||
.weatherItem{
|
||
background: linear-gradient(
|
||
rgba(5, 11, 59, 0.1),
|
||
rgba(40, 109, 221, 0.1)
|
||
);
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(
|
||
rgba(40, 109, 221, 0.1),
|
||
rgba(5, 11, 59, 0.1)
|
||
);
|
||
}
|
||
&:first-child {
|
||
background: linear-gradient(
|
||
rgba(5, 11, 59, 0.3),
|
||
rgba(36, 100, 206, 0.3)
|
||
);
|
||
}
|
||
}
|
||
.blockTitle4{
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.selectDev{
|
||
right: 0;
|
||
}
|
||
.centerChart{
|
||
&::before{
|
||
content: "";
|
||
position: absolute;
|
||
top: 36px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 46px);
|
||
background-color: rgba(38, 104, 209, 0.1);
|
||
}
|
||
}
|
||
}
|
||
//湛蓝风格
|
||
.dataBoardPage_blue2{
|
||
.weatherBox{
|
||
height: calc(100% - 50px);
|
||
margin: 28px 0 0;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: rgba(2,99,152,0.2);
|
||
}
|
||
.weatherItem{
|
||
background: linear-gradient(
|
||
rgba(5, 11, 59, 0.1),
|
||
rgba(40, 109, 221, 0.1)
|
||
);
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(
|
||
rgba(40, 109, 221, 0.1),
|
||
rgba(5, 11, 59, 0.1)
|
||
);
|
||
}
|
||
&:first-child {
|
||
background: linear-gradient(
|
||
rgba(5, 11, 59, 0.3),
|
||
rgba(36, 100, 206, 0.3)
|
||
);
|
||
}
|
||
}
|
||
.blockTitle4{
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.selectDev{
|
||
right: 0;
|
||
}
|
||
.centerChart{
|
||
&::before{
|
||
content: "";
|
||
position: absolute;
|
||
top: 36px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(100% - 46px);
|
||
background-color: rgba(2,99,152,0.2);
|
||
}
|
||
}
|
||
}
|
||
.greenTable{
|
||
color: #fff !important;
|
||
}
|
||
.dataBoardContent .alarmBlockContent td{
|
||
color: #fff !important;
|
||
}
|
||
.dataBoardContent .alarmBlockContent th{
|
||
color: #fff !important;
|
||
}
|
||
|
||
|
||
</style>
|