<template>
  <Card title="标养室管理">
    <div class="box">
      <div class="leftEcharts1" ref="leftEcharts1">111</div>
      <div class="leftEcharts2" ref="leftEcharts2">111</div>
     
    </div>
    <div class="environment">
        <div class="item">
          <div class="icon temperature"></div>
          <div class="info">
            <div class="label">室内温度</div>
            <div class="value">
              <span>{{ currentData.temperature || 0 }}</span> ℃
            </div>
          </div>
          <br />
        </div>
        <div class="item" style="margin-top:100px">
          <div class="icon humidity"></div>
          <div class="info">
            <div class="label">室内湿度</div>
            <div class="value">
              <span>{{ currentData.humidity || 0 }}</span
              >%RH
            </div>
          </div>
        </div>
      </div>
  </Card>
</template>

<script>
import {
  getstandardDevListApi,
  selectStandardDevStatisticsBySnApi,
  selectDayCurrentDataListApi
} from "@/assets/js/api/markingRoom";
import Card from "../components/Card.vue";
import echarts from 'echarts4';
export default {
  components: { Card },
  data() {
    return {
      currentData: {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      },
      searchSn: "",
      devSn: "",
      dustData_24: [],
      humidityList:[],//湿度
      temperatureList:[],//温度
      xData:[],//x轴时间
    };
  },
  mounted() {
    this.createdEchart1()
    this.createdEchart2()
    if (this.$store.state.projectSn) {
      this.searchSn = this.$store.state.projectSn;
      this.$nextTick(() => {
        this.getDevList();
        this.getRealTimeData();
      });
    } else {
      this.initData();
    }
  },
  methods: {
     //近24小时数据-图表渲染
     selectDustNoiseData() {
      let data = {
        projectSn: this.searchSn,
        devSn: this.devSn,
      };
      selectDayCurrentDataListApi(data).then((res) => {
        console.log('近24小时数据',res)
        this.dustData_24 = res.result;
        this.dustData_24.forEach(item=>{
          this.humidityList.push(item.humidity)
          this.temperatureList.push(item.temperature)
          this.xData.push(item.receiveTime.split(' ')[1])
        })
        this.createdEchart1(); 
        this.createdEchart2(); 
      });
    },
    //echarts图1红
    createdEchart1() {
      let chart1 = echarts.init(this.$refs["leftEcharts1"]);
      this.option1 = {
        // backgroundColor: "#05224d",
        tooltip: {},
        grid: {
          top: "65%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#6a9cd5",
                margin: 20,
              },
            },
            axisTick: { show: true },
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 150,
            splitNumber: 3,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLine: { show: false },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "异常流量",
            type: "line",
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            symbolSize: 0,

            lineStyle: {
              normal: {
                color: "#F56C35 ", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(61,234,255, 0.3)" },
                    { offset: 0.7, color: "rgba(61,234,255, 0)" },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 100, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: this.temperatureList,
          },
        ],
      };
      chart1.setOption(this.option1);

    },
    //echarts图2蓝
    createdEchart2() {
      let chart2 = echarts.init(this.$refs["leftEcharts2"]);
      this.option2 = {
        // backgroundColor: "#05224d",
        tooltip: {},
        grid: {
          top: "65%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#6a9cd5",
                margin: 20,
              },
            },
            axisTick: { show: true },
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 150,
            splitNumber: 3,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLine: { show: false },
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: { show: false },
          },
        ],
        series: [
          {
            name: "异常流量",
            type: "line",
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            symbolSize: 0,

            lineStyle: {
              normal: {
                color: "#3deaff", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "rgba(61,234,255, 0.3)" },
                    { offset: 0.7, color: "rgba(61,234,255, 0)" },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 100, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: this.humidityList,
          },
        ],
      };
      chart2.setOption(this.option2);

    },
    //标养室管理数据
    getRealTimeData() {
      selectStandardDevStatisticsBySnApi({
        projectSn: this.searchSn,
        devSn: this.devSn,
      }).then((res) => {
        console.log("标养室数据------", res);
        this.currentData = res.result.currentData;
      });
    },
    //获取设备列表--环境监测实时数据--下拉
    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.getRealTimeData();
          this.selectDustNoiseData()

        }
      });
    },
    //初始化数据
    initData() {
      this.searchSn = this.projectsn;
      this.currentData = {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      };
      this.devSn = "";
      if (this.personnelTypeChart) {
        this.personnelTypeChart.clear();
      }

      this.getDevList();
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 540px;
  display: flex;
  flex-flow: column;
  .leftEcharts1{
    width: 300px;
    height: 300px;
    margin: -160px 0 0 0px;
  }
  .leftEcharts2{
    width: 300px;
    height: 300px;
    margin: -150px 0 0 0px;  }
}
.environment {
  color: #fff;
  margin-left: 67%;
  margin: -135% 0 0 74%;
  .item {
    display: flex;
    align-items: center;
    margin-top: 80px;
 
    .icon {
      width: 40px;
      height: 40px;
      &.temperature {
        background: url(../assets/images/quality/i-temperature.png) no-repeat;
        background-size: contain;
        margin-left: 3px;
      }
      &.humidity {
        background: url(../assets/images/quality/i-humidity.png) no-repeat;
        background-size: contain;
        margin-left: 3px;
      }
      // &.spray {
      //   background: url(../assets/images/quality/i-spray.png) no-repeat;
      //   background-size: contain;
      // }
    }
    .info {
      .value {
        margin-top: 4px;
        font-size: 14px;
        text-align: center;
        span {
          color: #f7d502;
          // margin-right: 10px;
        }
      }
    }
  }
  .btn {
    margin: 8px auto;
    width: 408px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #02d5d2;
    background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
