<template>
  <div class="fullHeight" style="padding: 0 40px">
    <div style="padding-top: 10px">
      <div class="pageTitle">
        <!-- 实时数据 -->
        {{$t('message.projectManage.realData')}}
        <div class="filterBox">
            <el-button type="primary" size="medium" style="margin-right:30px" @click="dialogVisible=true">
              <!-- 导出报警 -->
               {{$t('message.projectManage.exportAlarm')}}
            </el-button>
          <!-- <span class="devDetail"> {{$t('message.projectManage.isAcceptAlarm')+':'}}{{selectedDevDetail.isEnable==0?$t('message.projectManage.is'):$t('message.projectManage.isNot')}}</span> -->
          <span class="devDetail" v-show="selectedDevDetail.isEnable==1">{{$t('message.projectManage.notAcceptreason')+':'}}{{selectedDevDetail.reason}}</span>
          <el-select size="medium" v-model="devSn" @change="changeDev">
            <el-option
              v-for="(item, index) in devList"
              :key="index"
              :label="item.laboratoryName"
              :value="item.devSn"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="top">
        <div class="statusBox">
          <img src="@/assets/images/markRoomOverview/statusBG.png" alt="" />
          <span>{{ devState == 2 ? $t('message.projectManage.notOnline') :$t('message.projectManage.online') }}</span>
        </div>
        <div class="realTimeBox">
          <div class="numBlock">
            <img src="@/assets/images/markRoomOverview/numBG1.png" alt="" />
            <p><!-- 温度 -->{{$t('message.projectManage.temperature2')}}</p>
            <p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
            <p class="num" v-else>{{ currentData.temperature }}°C</p>
          </div>
          <div class="numBlock">
            <img src="@/assets/images/markRoomOverview/numBG2.png" alt="" />
            <p><!-- 湿度 -->{{$t('message.projectManage.humidity')}}</p>
            <p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
            <p class="num" v-else>{{ currentData.humidity }}%RH</p>
          </div>
          <div class="numBlock">
            <img src="@/assets/images/markRoomOverview/numBG3.png" alt="" />
            <p><!-- 今日报警次数 -->{{$t('message.projectManage.todayAlarmNum')}}</p>
            <p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
            <p class="num" v-else>{{ currentData.currentDayAlarmNum }}次</p>
          </div>
          <!-- <div class="numBlock">
            <img src="@/assets/images/markRoomOverview/numBG4.png" alt="" />
            <p>当前试块数</p>
            <p class="num">{{ currentData.sampleNum }}个</p>
          </div> -->
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="whiteBlock">
        <div class="pageTitle">
          <!-- 视频监控 -->
          {{$t('message.projectManage.videoMontor')}}
          <div class="filterBox">
            <el-popover placement="top" width="200" trigger="click">
              <ul class="videoListBox">
                <li
                  v-for="(item, index) in videoList"
                  :key="index"
                  @click="playVideo(item)"
                >
                  {{ item.videoName }}
                </li>
              </ul>
              <el-button slot="reference" size="medium">
                <!-- 选择视频 -->
                {{$t('message.projectInfo.chooseVideo')}}
              </el-button>
            </el-popover>
          
            <!-- <el-select size="medium" v-model="currentVideoItemId" @change="changeVideo">
                          <el-option v-for="(item, index) in videoList" :key="index" :label="item.videoName" :value="item.itemId"></el-option>
                      </el-select> -->
          </div>
         
        </div>
        <div class="placeholderBox" v-if="videoList.length == 0" style="position: absolute;top: 70%;left:25%">
            <img src="@/assets/images/noData.png" alt="" />
               <p>
              <!-- 暂无数据 -->
              {{$t('message.projectManage.noData')}}
              </p>
          </div>
        <div class="blockContent">
          <videoModule
            v-show="selectVideoList.length"
            class="playVideoBox"
            :type="'2x2'"
            :value="selectVideoList"
            :displayBottomMod="false"
            :winNumBer="4"
            :autoplay="false"
            :showCaptrue="false"
            :showControl="false"
            :showPlayback="false"
          ></videoModule>
        </div>
      </div>
      <div class="whiteBlock" ref="blockContent">
        <div class="pageTitle">
          <span
            class="item"
            :class="tabIndex == 1 ? 'active' : ''"
            @click="changeTabs(1)"
            ><!-- 历史运行数据 -->{{$t('message.projectManage.pageTitleList[0]')}}</span
          >
          <span
            class="item"
            :class="tabIndex == 0 ? 'active' : ''"
            @click="tabIndex = 0"
            ><!-- 报警记录 -->{{$t('message.projectManage.pageTitleList[1]')}}</span
          >
          <span
            class="item"
            :class="tabIndex == 2 ? 'active' : ''"
            @click="changeTabs(2)"
            ><!-- 环境分析报告 -->{{$t('message.projectManage.pageTitleList[2]')}}</span
          >
          <span
            class="item"
            :class="tabIndex == 3 ? 'active' : ''"
            @click="changeTabs(3)"
            ><!-- 试块分析报告 -->{{$t('message.projectManage.pageTitleList[3]')}}</span
          >
          <div class="filterBox">
            <el-date-picker
              v-show="tabIndex == 2 || tabIndex == 3"
              style="width: 260px"
              :clearable="false"
              v-model="dateRangeArr"
              type="daterange"
              align="right"
              unlink-panels
              :range-separator="$t('message.projectManage.to')"
              :start-placeholder="$t('message.projectManage.startData')"
              :end-placeholder="$t('message.projectManage.endData')"
              :picker-options="pickerOptions"
              size="medium"
              value-format="yyyy-MM-dd"
              @change="changeTabs(tabIndex)"
            >
            </el-date-picker>
            <el-date-picker
              v-show="tabIndex != 2 && tabIndex != 3"
              size="medium"
              @change="changeDate"
              v-model="date1"
              type="date"
              :placeholder="$t('message.projectManage.chooseDate')"
              value-format="yyyy-MM-dd"
              :clearable="false"
              style="width: 140px"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="blockContent" v-if="tabIndex == 0">
          <vue-scroll>
            <ul class="alarmList">
              <li v-for="(item, index) in alarmList" :key="index">
                <span><!-- 报警原因： -->{{$t('message.projectManage.alarmReason')+':'}}{{ item.alarmType }}</span>
                <!-- <span>报 警 值：{{item.alarmValue}}</span> -->
                <!-- <span>报警阈值：{{item.thresholdValue}}</span> -->
                <span><!-- 报警时间： -->{{$t('message.projectManage.alarmTime')+':'}}{{ item.alarmTime }}</span>
              </li>
            </ul>
          </vue-scroll>
          <div class="placeholderBox" v-if="alarmList.length == 0">
            <img src="@/assets/images/noData.png" alt="" />
            <p>
              <!-- 暂无数据 -->
              {{$t('message.projectManage.noData')}}
            </p>
          </div>
        </div>
        <div class="blockContent" v-if="tabIndex == 1">
          <div class="placeholderBox" v-if="dustData_24.length == 0">
            <img src="@/assets/images/noData.png" alt="" />
               <p>
              <!-- 暂无数据 -->
              {{$t('message.projectManage.noData')}}
              </p>
          </div>
          <div class="chart" ref="personnelType"></div>
        </div>
        <div class="blockContent" v-if="tabIndex == 2">
          <div class="titleHeade" style="display: flex;margin-top: 5%;">
            <div>湿度</div>
            <div style="margin-left: 20%;">温度</div>
            <div style="margin-left: 15%;">时间</div>
          </div>
          <vue-scroll>
            <ul class="alarmList">
              <li v-for="(item, index) in AnalysisData" :key="index">
                <span>{{ item.avgHumidity }}</span>
                <span>{{ item.avgTemperature }}</span>
                <span>{{ item.dayTitle }}</span>
              </li>
            </ul>
          </vue-scroll>
          <div class="placeholderBox" v-if="AnalysisData.length == 0">
            <img src="@/assets/images/noData.png" alt="" />
            <p><!-- 暂无数据 -->{{$t('message.projectManage.noData')}}</p>
          </div>
          <div class="chart" ref="devChart" :style="chartStyle"></div>
        </div>
        <div class="blockContent" v-if="tabIndex == 3">
          <div class="placeholderBox" v-if="sampAnalysisData.length == 0">
            <img src="@/assets/images/noData.png" alt="" />
            <p><!-- 暂无数据 -->{{$t('message.projectManage.noData')}}</p>
          </div>
          <div class="chart" ref="devChart2" :style="chartStyle"></div>
        </div>
      </div>
    </div>
    <!-- 选择要导出的报警时间段 -->
    <el-dialog :title="$t('message.projectManage.pleaseChooseExportAlarmTime')"
         :visible.sync="dialogVisible"
         :modal-append-to-body="false" width="667px">
        <div class="dialogContent" style="text-align:center">
            <el-date-picker
                v-model="daterange"
                type="daterange"
                :range-separator="$t('message.projectManage.to')"
                :start-placeholder="$t('message.projectManage.startData')"
                :end-placeholder="$t('message.projectManage.endData')" value-format="yyyy-MM-dd">
            </el-date-picker>
            <div class="dialog-footer" style="text-align:center">
                <el-button
                    class="cancleBtn"
                    @click="dialogVisible = false"
                    icon="el-icon-circle-close"
                    size="medium"
                    >{{ $t("message.alarmValueSet.cancel") }}
                </el-button>
                <el-button
                    type="primary"
                    icon="el-icon-circle-check"
                    @click="exportFn"
                    size="medium"
                    ><!-- 导出 -->{{$t('message.projectManage.export')}}
                </el-button>
          </div>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import { GetDateStr, timestampToTime } from "@/assets/js/util";
import {
  getstandardDevListApi,
  selectStandardCurrentDataListApi,
  selectStandardAlarmListByTimeApi,
  selectStandardDevStatisticsBySnApi,
  selectStandardAnalysisReportApi,
  selectSampleAnalysisReportApi,
} from "@/assets/js/api/markingRoom";
import videoModule from "@/components/videoModule/videoModule.vue";
export default {
  components: {
    videoModule,
  },
  props: ["projectsn"],
  watch: {
    projectsn: function () {
      this.initData();
    },
  },
  data() {
    return {
      devSn: "",
      devList: [],
      date1: GetDateStr(0, "-"),
      date2: GetDateStr(0, "-"),
      alarmList: [],
      currentData: {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      },
      devState: 2,
      dustData_24: [],
      tabIndex: 1,
      videoList: [],
      currentVideoItemId: "",
      selectVideoList: [],
      searchSn: "",
      personnelTypeChart: null,
      chartStyle: {
        width: "100%",
        height: "100%",
      },
      dateRangeArr: [],
      pickerOptions: {
        shortcuts: [
          {
            text: /* "最近一周", */this.$t('message.projectManage.dateList'[0]),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: /* "最近一个月", */this.$t('message.projectManage.dateList'[1]),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text:/*  "最近三个月", */this.$t('message.projectManage.dateList'[2]),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      AnalysisData: [],
      sampAnalysisData: [],
      selectedDevDetail:{
        isEnable:0,//是否启用，0是，1否
        reason:''
      },
      dialogVisible:false,
      daterange:[]
    };
  },
  mounted() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    // console.log(start.getTime(),end.getTime())
    this.dateRangeArr.push(timestampToTime(start.getTime(), "date"));
    this.dateRangeArr.push(timestampToTime(end.getTime(), "date"));
    // console.log(this.dateRangeArr);
    if (this.$store.state.projectSn) {
      this.searchSn = this.$store.state.projectSn;
      this.$nextTick(() => {
        this.getDevList();
      });
    } else {
      this.initData();
    }
  },
  methods: {
      exportFn(){
          let start = '',end='';
          if(this.daterange){
              start=this.daterange[0]
              end=this.daterange[1]
          }
          window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/download/exporExcelStandardDevAlarm?sn=" + this.searchSn +
        "&startTime=" + start +
        "&endTime=" + end;
        this.dialogVisible=false
      },
    //初始化数据
    initData() {
      this.searchSn = this.projectsn;
      this.alarmList = [];
      this.selectVideoList = [];
      this.devState = 2;
      this.currentData = {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      };
      this.dustData_24 = [];
      this.devSn = "";
      if (this.personnelTypeChart) {
        this.personnelTypeChart.clear();
      }

      this.getDevList();
    },
    changeDate() {
      this.getAlarmList();
      this.selectDustNoiseData();
    },
    playVideo(item) {
      this.selectVideoList = [item];
    },
    //获取设备列表--环境监测实时数据--下拉
    getDevList() {
      getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
        // console.log('列表', result)
        this.devList = result.result;
        if (result.result.length > 0) {
          this.devSn = result.result[0].devSn;
          this.selectedDevDetail=result.result[0]
          this.selectDustNoiseData();
          this.getAlarmList();
          this.getRealTimeData();
        }
      });
    },
    changeTabs(index) {
      this.tabIndex = index;
      this.$nextTick(() => {
        this.chartStyle.width = this.$refs.blockContent.clientWidth - 60 + "px";
        this.chartStyle.height = this.$refs.blockContent.clientHeight - 100 + "px";
        if (index === 1) {
          this.selectDustNoiseData();
        }
        if (index == 2) {
          this.getAnalysisReportData();
        }
        if (index == 3) {
          this.getSampleAnalysisReport();
        }
      });
    },
    //获取试块分析报告数据
    getSampleAnalysisReport() {
      let json = {
        projectSn: this.searchSn,
        devSn: this.devSn,
        startTime: this.dateRangeArr[0],
        endTime: this.dateRangeArr[1],
        type: 3,
      };
      selectSampleAnalysisReportApi(json).then((res) => {
        this.sampAnalysisData = res.result;
        let xData = [],
          yData1 = [],
          yData2 = [],
          yData3 = [],
          yData4 = [];
        this.sampAnalysisData.forEach((element, index) => {
          xData.push(element.dayTitle);
          yData1.push(element.addNum);
          yData2.push(element.curingExpireNum);
          yData3.push(element.formingNum);
          yData4.push(element.inspectionNum);
        });
        this.createBarChart(
          ["#5181F6", "#44D7B6", "#F67F51", "#9a78e7"],
          this.$refs.devChart2,
          xData,
          yData1,
          yData2,
          yData3,
          yData4
        );
      });
    },
    createBarChart(color, div, xData, yData1, yData2, yData3, yData4) {
      let that = this;
      let installChart = echarts.init(div);
      installChart.clear();
      let option = {
        grid: {
          top: 30,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color: color,
        legend: {
          textStyle: {
            color: "#9fa2ad",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: "添加样品数",
            type: "bar",
            data: yData1,
            barMaxWidth: 26,
            stack:"总数",
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
            },
          },
          {
            name:"养护到期样品数",
            type: "bar",
            data: yData2,
            barMaxWidth: 26,
            stack: "总数",
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
            },
          },
          {
            name:"成型样品数",
            type: "bar",
            data: yData3,
            barMaxWidth: 26,
            stack: "总数",
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
            },
          },
          {
            name: "送检样品数",
            type: "bar",
            data: yData4,
            barMaxWidth: 26,
            stack: "总数",
            label: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
            },
          },
        ],
      };

      installChart.setOption(option);
    },
    //获取环境分析报告数据
    getAnalysisReportData() {
      let json = {
        projectSn: this.searchSn,
        devSn: this.devSn,
        startTime: this.dateRangeArr[0],
        endTime: this.dateRangeArr[1],
        type: 3,
      };
      selectStandardAnalysisReportApi(json).then((res) => {
        this.AnalysisData = res.result;
        this.createDevChart(res.result, this.$refs.devChart);
      });
    },
    getRealTimeData() {
      selectStandardDevStatisticsBySnApi({
        projectSn: this.searchSn,
        devSn: this.devSn,
      }).then((res) => {
        this.devState = res.result.devState;
        this.currentData = res.result.currentData;
        this.videoList = res.result.videoList;
        this.videoList.forEach((element, index) => {
          if (index < 4) {
            this.selectVideoList.push(element);
          }
        });
      });
    },
    //近24小时数据
    selectDustNoiseData() {
      let data = {
        projectSn: this.searchSn,
        devSn: this.devSn,
        queryTime: this.date1,
      };
      selectStandardCurrentDataListApi(data).then((res) => {
        // console.log(res)
        this.dustData_24 = res.result;
        this.$nextTick(() => {
          let xdata = [],
            ydata1 = [],
            ydata2 = [];
          this.dustData_24.forEach((element) => {
            let time = element.receiveTime;
            xdata.push(time.split(" ")[1]);
            ydata1.push(element.humidity);
            ydata2.push(element.temperature);
          });
          console.log('历史运行数据绘图数据',xdata,ydata1,ydata2)
          this.createdEcharts(xdata, ydata1, ydata2);
        });
      });
    },
    //获取报警列表
    getAlarmList() {
      let data = {
        projectSn: this.searchSn,
        devSn: this.devSn,
        queryTime: this.date1,
      };
      selectStandardAlarmListByTimeApi(data).then((res) => {
        this.alarmList = res.result;
      });
    },
    //人员类型统计
    createdEcharts(xdata, ydata1, ydata2) {
      let personnelType = echarts.init(this.$refs.personnelType);
      this.personnelTypeChart = personnelType;

      let option = {
        color: ["rgba(72, 141, 236, 1)", "rgba(254, 175, 126, 1)"],
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{b} <br /> {a0}: {c0}<br /> {a1}: {c1}",
          axisPointer: {
            lineStyle: {
              color: "transparent",
            },
          },
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          backgroundColor: "rgba(236,236,236,0.75)",
        },
        grid: {
          left: 10,
          right: 30,
          bottom: 10,
          top: 30,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          axisTick: { show: false },
          data: xdata,
          axisLabel: {
            // rotate: 30,
            textStyle: {
              color: "#9fa2ad",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          show: true,
          // type: "time",
          axisTick: { show: false },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            // show: false,
            textStyle: {
              color: "#9fa2ad",
              fontSize: 10,
            },
          },
        },
        series: [
          {
            name: "湿度",
            data: ydata1,
            type: "line",
            symbolSize: 5,
            symbol: "circle",
            lineStyle: {
              width: 2,
            },
            smooth: true,

          },
          {
            name: "温度",
            data: ydata2,
            type: "line",
            symbolSize: 5,
            symbol: "circle",
            lineStyle: {
              width: 2,
            },
            smooth: true,

          },
        ],
      };
      personnelType.setOption(option);
    },
    changeDev() {
      
      this.selectDustNoiseData();
      this.getAlarmList();
      this.getRealTimeData();
      this.devList.forEach(element => {
        if(element.devSn==this.devSn){
          this.selectedDevDetail=element
          return
        }
      });
    },

    createDevChart(echartData, el) {
      let devChart = echarts.init(el);
      // let bgColor = "#fff";
      devChart.clear();
      let color = [
        "#5181F6",
        "#00DBB6",
        "#F67F51",
        "#FF515A",
        "#8B5CFF",
        "#00CA69",
      ];
      let symbolSize = 10;
      let xAxisData = [],
        yAxisData1 = [],
        yAxisData2 = [];
      xAxisData = echartData.map((v) => v.dayTitle);
      yAxisData1 = echartData.map((v) => v.avgTemperature);
      yAxisData2 = echartData.map((v) => v.avgHumidity);

      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };

      let option = {
        // backgroundColor: bgColor,
        color: color,
        legend: {
          textStyle: {
            color: "#9fa2ad",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              // console.log(v)
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                                  color[v.componentIndex]
                                };"></span>
                                ${v.seriesName}.${v.name}
                                <span style="color:${
                                  color[v.componentIndex]
                                };font-weight:700;font-size: 18px">${
                v.value
              }</span>`;
            });
            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          // axisPointer: {
          //     type: 'shadow',
          //     shadowStyle: {
          //         color: '#ffffff',
          //         shadowColor: 'rgba(225,225,225,1)',
          //         shadowBlur: 5
          //     }
          // }
        },
        grid: {
          top: 35,
          right: 0,
          left: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#9fa2ad",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: $t('message.projectManage.temperature2')+"(°C)",
            axisLabel: {
              textStyle: {
                getProjectChilderSystemUserListApiolor: "#9fa2ad",
              },
            },
            nameTextStyle: {
              getProjectChilderSystemUserListApiolor: "#9fa2ad",
              fontSize: 12,
              lineHeight: 24,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(231, 233, 243, 0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            name: this.$t('message.projectManage.humidity')+"(%RH)",
            axisLabel: {
              textStyle: {
                getProjectChilderSystemUserListApiolor: "#9fa2ad",
              },
            },
            nameTextStyle: {
              getProjectChilderSystemUserListApiolor: "#9fa2ad",
              fontSize: 12,
              lineHeight: 24,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(231, 233, 243, 0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: /* "温度", */$t('message.projectManage.temperature2'),
            type: "line",
            smooth: true,

            symbolSize: symbolSize,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yAxisData1,
          },
          {
            name: /* "湿度", */this.$t('message.projectManage.humidity'),
            type: "line",
            smooth: true,
            // showSymbol: false,

            symbolSize: symbolSize,
            zlevel: 3,
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yAxisData2,
          },
        ],
      };
      devChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.filterBox {
  position: absolute;
  right: 0;
  top: -10px;
}
.top {
  display: flex;
  align-items: center;
}
.statusBox {
  width: 22%;
  height: 250px;
  text-align: center;
  line-height: 250px;
  color: rgba(72, 141, 236, 1);
  font-size: 18px;
  position: relative;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  span {
    position: relative;
    z-index: 2;
  }
}
.numBlock {
  position: relative;
  flex: 1;
  height: 100%;
  color: #fff;
  font-size: 22px;
  img {
    // position: absolute;
    // left: 50%;
    // transform: translateX(-50%);
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  }
  p {
    z-index: 2;
    position: absolute;
    left: 36px;
    top: 30px;
  }
  .num {
    font-size: 38px;
    bottom: 30px;
    right: 36px;
    left: auto;
    top: auto;
  }
}
.realTimeBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78%;
  height: 176px;
}
.whiteBlock {
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
}
.bottom {
  margin-top: 30px;
  height: calc(100% - 367px);
  .whiteBlock {
    width: calc(50% - 75px);
    float: left;
    height: calc(100% - 30px);
    &:first-child {
      margin-right: 15px;
    }
    &:last-child {
      margin-left: 15px;
    }
  }
}
.chart {
  width: 100%;
  height: 100%;
}
.blockContent {
  height: calc(100% - 37px);
  position: relative;
}
.alarmList {
  color: rgba(50, 59, 93, 1);
  font-size: 14px;
  padding-top: 30px;
  li {
    padding: 12px 0;
    border-top: 1px dashed rgba(50, 59, 93, 0.32);
    &:last-child {
      border-bottom: 1px dashed rgba(50, 59, 93, 0.32);
    }
    span {
      margin-right: 40px;
      display: inline-block;
      min-width: 100px;
      &:first-child {
        min-width: 160px;
      }
    }
  }
}
.pageTitle {
  .item {
    margin-right: 15px;
    cursor: pointer;
  }
}
.active {
  color: @--color-primary;
}
.videoListBox {
  li {
    cursor: pointer;
    padding: 3px 0;
    &:hover {
      color: @--color-primary;
    }
  }
}
.devDetail{
  margin-right: 20px;
  font-size: 13px;
  font-weight: normal;
}
</style>