<template>
  <div class="fullHeight greenPage">
    <div class="headerBox">
      <h1 class="title">
        {{ $store.state.currentProDetail.projectName }} -
        {{ $t('message.markRoomOverview.title') }}
      </h1>
      <closePage v-if="closeShow"></closePage>
    </div>
    <div class="leftLine"></div>
    <div class="rightLine"></div>
    <div class="bottomLine"></div>
    <div class="devBox">
      <span
        class="greenBtn"
        :class="{ active: item.devSn == currentDevDetail.devSn }"
        v-for="(item, index) in devList"
        :key="index"
        @click="realTimeMonitor(item)"
      >
        <img
          v-for="item in 4"
          :key="item"
          :class="'arrow' + item"
          class="arrow"
          src="@/assets/images/greenOverview/arrow.png"
        />
        {{ item.laboratoryName }}
      </span>
    </div>
    <div class="greenContent">
      <div class="top">
        <div class="smallDiv smallDiv1 fullHeight">
          <div class="blockBox">
            <div class="title">
              <p class="e1">{{ $t('message.markRoomOverview.e1') }}</p>
            </div>
            <div class="blockContent">
              <el-row class="fullHeight">
                <el-col :span="12" class="fullHeight">
                  <div class="tempChartBox">
                    <div class="fullHeight" ref="monitor"></div>
                  </div>
                </el-col>
                <el-col :span="12" class="fullHeight">
                  <div class="tempBox">
                    <div class="numBox">{{ realTimeData.temperature }}℃</div>
                    <p class="text">
                      <!-- 温度 -->
                      {{ $t('message.projectInfo.temperature') }}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="centerDiv fullHeight">
          <div class="realTimeDataBox">
            <p>
              <i :class="realTimeData.auxiliaryHeat == 1 ? 'on' : ''"></i>
              <!-- 辅热 -->
              {{ $t('message.projectInfo.auxiliaryHeating') }}
            </p>
            <p>
              <i :class="realTimeData.temperatureControl == 1 ? 'on' : ''"></i>
              <!-- 控温 -->
              {{ $t('message.projectInfo.temperatureControl') }}
            </p>
            <p>
              <i :class="realTimeData.humidification == 1 ? 'on' : ''"></i>
              <!-- 加湿 -->
              {{ $t('message.projectInfo.humidification') }}
            </p>
            <p>
              <i :class="realTimeData.fan == 1 ? 'on' : ''"></i>
              <!-- 风机 -->
              {{ $t('message.projectInfo.draughtFan') }}
            </p>
            <p>
              <i :class="realTimeData.arefaction == 1 ? 'on' : ''"></i>
              <!-- 除湿 -->
              {{ $t('message.projectInfo.dehumidification') }}
            </p>
          </div>
          <div class="centerDataBox">
            <p class="num">{{ currentDayAlarmNum }}</p>
            <p class="text">
              <!-- 今日报警次数 -->
              {{ $t('message.projectInfo.todayAlarmNum') }}
            </p>
          </div>
        </div>
        <div class="smallDiv fullHeight">
          <div class="blockBox">
            <div class="title">
              <p class="e3">{{ $t('message.markRoomOverview.e3') }}</p>
            </div>
            <div class="blockContent">
              <el-row class="fullHeight">
                <el-col :span="12" class="fullHeight">
                  <div class="tempChartBox">
                    <div class="fullHeight" ref="monitor2"></div>
                  </div>
                </el-col>
                <el-col :span="12" class="fullHeight">
                  <div class="tempBox">
                    <div class="numBox">{{ realTimeData.humidity }}%RH</div>
                    <p class="text">
                      <!-- 湿度 -->
                      {{ $t('message.projectInfo.wetValue') }}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="blockBox fullHeight">
          <div class="title">
            <p class="e6">{{ $t('message.markRoomOverview.e6') }}</p>
          </div>
          <div class="blockContent">
            <vue-scroll>
              <table class="greenTable">
                <thead>
                  <tr>
                    <th>
                      {{ $t('message.markRoomOverview.table2.th1') }}
                    </th>
                    <th>
                      {{ $t('message.markRoomOverview.table2.th2') }}
                    </th>
                    <th>
                      {{ $t('message.markRoomOverview.table2.th3') }}
                    </th>
                    <!-- <th>
                      {{ $t("message.markRoomOverview.table2.th4") }}
                    </th>
                    <th>
                      {{ $t("message.markRoomOverview.table2.th5") }}
                    </th> -->
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in alarmList" :key="index">
                    <td>
                      {{ item.laboratoryName }}
                    </td>
                    <td>{{ item.alarmTime }}</td>
                    <td>{{ item.alarmType }}</td>
                    <!-- <td>{{ item.alarmValue }}</td> -->
                    <!-- <td>{{ item.thresholdValue }}</td> -->
                  </tr>
                </tbody>
              </table>
              <div
                class="placeholderBox placeholderBox2"
                v-if="alarmList.length == 0"
              >
                <img src="@/assets/images/noData3.png" alt="" srcset="" />
                <p>
                  <!-- 暂无数据 -->
                  {{ $t('message.projectInfo.noData') }}
                </p>
              </div>
            </vue-scroll>
          </div>
        </div>
        <div class="blockBox fullHeight">
          <div class="title">
            <p class="e7">{{ $t('message.markRoomOverview.e7') }}</p>
          </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.markRoomOverview.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.markRoomOverview.e6SelectArr')[1].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.projectInfo.noData') }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import {
  getstandardDevListApi,
  selectNewCurrentDataApi,
  getStandardAlarmStatisticsApi,
  selectDayCurrentDataListApi,
} from "@/assets/js/api/markingRoom";
import closePage from "@/components/closePage"
export default {
  components: { closePage },
  data() {
    return {
      devList: [],
      currentDevDetail: {},
      projectSn: "",
      alarmList: [],
      checked: 1,
      airType: 1,
      airAnalysis: [],
      currentDayAlarmNum: 0,
      dustData_24: [],
      realTimeData: {
        arefaction: 0,
        auxiliaryHeat: 0,
        devSn: "",
        fan: 0,
        humidification: 0,
        humidity: "",
        id: 0,
        projectSn: "",
        receiveTime: "",
        runState: 0,
        temperature: "",
        temperatureControl: 0,
        closeShow: true,

      },
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
  },
  mounted() {
    if (window.history.length != 1) {
      this.closeShow = true
    } else {
      this.closeShow = false
    }
    this.$nextTick(() => {
      this.getDevList();
    });
  },
  methods: {
    //获取设备列表--环境监测实时数据--下拉
    getDevList() {
      getstandardDevListApi({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          // console.log('列表', result)
          this.devList = result.result;
          if (result.result.length > 0) {
            this.currentDevDetail = result.result[0];
            this.selectDustNoiseData();
            this.getAlarmList();
            this.getRealTimeData();
          }
        }
      );
    },

    //切换环境单位
    realTimeMonitor(value) {
      this.currentDevDetail = value;
      this.selectDustNoiseData();
      this.getAlarmList();
      this.getRealTimeData();
    },
    //获取实时数据
    getRealTimeData() {
      let data = {
        projectSn: this.projectSn,
        devSn: this.currentDevDetail.devSn,
      };
      selectNewCurrentDataApi(data).then((res) => {
        if (res.result) {
          this.realTimeData = res.result;
        }
        //         ▪  温度测量范围精度： -40℃~80℃ ±0.5℃
        // ▪  湿度测量范围精度： 0~99%RH ±1%RH
        this.createdEcharts3(this.$refs.monitor, this.realTimeData.temperature, -40, 80);
        this.createdEcharts3(this.$refs.monitor2, this.realTimeData.humidity, 0, 99);
      });
    },

    //获取报警列表
    getAlarmList() {
      let data = {
        projectSn: this.projectSn,
        devSn: this.currentDevDetail.devSn,
      };
      getStandardAlarmStatisticsApi(data).then((res) => {
        if (res.code == 200) {
          this.currentDayAlarmNum = res.result.currentDayAlarmNum;
          this.alarmList = res.result.alarmList;
        }
      });
    },
    //近24小时数据
    selectDustNoiseData() {
      let data = {
        projectSn: this.projectSn,
        devSn: this.currentDevDetail.devSn,
      };
      selectDayCurrentDataListApi(data).then((res) => {
        // console.log(res)
        this.dustData_24 = res.result;
        this.createdEcharts2();
      });
    },

    //切换  24小时数据
    switchingData(value) {
      this.checked = value;
      this.createdEcharts2();
    },
    //创建图表 --- 环境监测
    createdEcharts3(obj, TP_value, min, max) {
      let that = this;
      //项目进度
      let monitor = echarts.init(obj);
      monitor.clear();
      // var TP_value = this.realTimeData.temperature;
      var kd = [];
      var Gradient = [];
      var leftColor = "";
      var showValue = 0;
      var boxPosition = [65, 0];
      var TP_txt = "";
      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
      for (var i = 0, len = 135; i <= len; i++) {
        if (i < 10 || i > 130) {
          kd.push("");
        } else {
          if ((i - 10) % 20 === 0) {
            kd.push("-3");
          } else if ((i - 10) % 4 === 0) {
            kd.push("-1");
          } else {
            kd.push("");
          }
        }
      }
      //中间线的渐变色和文本内容
      if (TP_value > 20) {
        TP_txt = "温度偏高";
        Gradient.push(
          {
            offset: 0,
            color: "#93FE94",
          },
          {
            offset: 0.5,
            color: "#E4D225",
          },
          {
            offset: 1,
            color: "#E01F28",
          }
        );
      } else if (TP_value > -20) {
        TP_txt = "温度正常";
        Gradient.push(
          {
            offset: 0,
            color: "#93FE94",
          },
          {
            offset: 1,
            color: "#E4D225",
          }
        );
      } else {
        TP_txt = "温度偏低";
        Gradient.push({
          offset: 1,
          color: "#93FE94",
        });
      }
      if (TP_value > max) {
        showValue = max;
      } else {
        if (TP_value < min) {
          showValue = min;
        } else {
          showValue = parseInt(TP_value);
        }
      }
      // if (TP_value < -10) {
      //   boxPosition = [65, -120];
      // }
      leftColor = Gradient[Gradient.length - 1].color;
      // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
      var option = {
        // backgroundColor: '#0C2F6F',
        grid: {
          right: -450,
          bottom: 35,
          top: 35,
          left: 20,
        },
        title: {
          text: "温度计",
          show: false,
        },
        yAxis: [
          {
            show: false,
            data: [],
            min: 0,
            max: 135,
            axisLine: {
              show: false,
            },
          },
          {
            show: false,
            min: 0,
            max: 50,
          },
        ],
        xAxis: [
          {
            show: false,
            min: -10,
            max: 150,
            data: [],
          },
          {
            show: false,
            min: -10,
            max: 150,
            data: [],
          },
          {
            show: false,
            min: -10,
            max: 150,
            data: [],
          },
          {
            show: false,
            min: -5,
            max: 150,
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            // 对应上面XAxis的第一个对)象配置
            xAxisIndex: 0,
            data: [
              {
                value: showValue + Math.abs(min) + 10,
              },
            ],

            barWidth: 12,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
              },
            },
            z: 2,
          },
          {
            name: "白框",
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            data: [134],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#0C2E6D",
                barBorderRadius: 50,
              },
            },
            z: 1,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 2,
            barGap: "-100%",
            data: [135],
            barWidth: 25,
            itemStyle: {
              normal: {
                color: "#4577BA",
                barBorderRadius: 50,
              },
            },
            z: 0,
          },
          {
            name: "圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: 25,
            itemStyle: {
              normal: {
                color: "#93FE94",
                opacity: 1,
              },
            },
            z: 2,
          },
          {
            name: "白圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 1,
            symbolSize: 36,
            itemStyle: {
              normal: {
                color: "#0C2E6D",
                opacity: 1,
              },
            },
            z: 1,
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 40,
            itemStyle: {
              normal: {
                color: "#4577BA",
                opacity: 1,
              },
            },
            z: 0,
          },
          {
            name: "刻度",
            type: "bar",
            yAxisIndex: 0,
            xAxisIndex: 3,
            label: {
              normal: {
                show: true,
                position: "left",
                distance: 3,
                color: "white",
                fontSize: 11,
                formatter: function (params) {
                  if (params.dataIndex > 130 || params.dataIndex < 10) {
                    return "";
                  } else {
                    if ((params.dataIndex - 10) % 20 === 0) {
                      return params.dataIndex - Math.abs(min) - 10;
                    } else {
                      return "";
                    }
                  }
                },
              },
            },
            barGap: "-100%",
            data: kd,
            barWidth: 1,
            itemStyle: {
              normal: {
                color: "white",
                barBorderRadius: 120,
              },
            },
            z: 0,
          },
        ],
      };
      monitor.setOption(option);
    },
    //创建图表 --- 近24小时数据
    createdEcharts2() {
      var xdata = [],
        ydata = [];
      let monitor = echarts.init(this.$refs.near24hChart);
      monitor.clear();
      this.dustData_24.forEach((element) => {
        // 
        xdata.push(element.receiveTime.split(" ")[1]);
        switch (this.checked) {
          case 1:
            ydata.push(element.temperature);
            break;
          case 2:
            ydata.push(element.humidity);
            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(211, 172, 59, 1)"],
        xAxis: {
          type: "category",
          data: xdata,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLabel: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        series: [
          {
            data: ydata,
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
            },
            symbol: "none",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(211, 172, 59, 0.5)",
                },
                {
                  offset: 1,
                  color: "#13151C",
                },
              ]),
            },
          },
        ],
      };
      monitor.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
@import url('./style.less');
</style>