<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>
