<template>
  <div class="condition-analysis">
    <p class="yq-title">空调工作时段分析</p>
    <div class="search-box">
      <div class="choose-time" style="float: left">
        <span>选择楼宇</span>
        <el-select
          placeholder="请选择楼宇"
          size="mini"
          style="margin-left: 10px; width: 7.5rem"
          v-model="buildValue"
          @change="searchBuild"
        >
          <el-option
            v-for="(item, index) in buildings"
            :label="item.name"
            :value="item.id"
            :key="index"
          >
          </el-option>
        </el-select>
      </div>
      <div style="float: right">
        <el-date-picker
          size="mini"
          ref="buildDate"
          style="
            width: 9.375rem;
            margin-right: 10px;
            border-radius: 5px;
            background-color: rgb(152, 160, 173);
            border: 0;
          "
          v-model="chooseDateValue"
          :type="
            choseDate == 1
              ? 'year'
              : choseDate == 2
              ? 'month'
              : choseDate == 3
              ? 'date'
              : 'date'
          "
          :value-format="
            choseDate == 1
              ? 'yyyy'
              : choseDate == 2
              ? 'yyyy-MM'
              : choseDate == 3
              ? 'yyyy-MM-dd'
              : 'yyyy-MM-dd'
          "
          :placeholder="
            choseDate == 1
              ? '选择年份'
              : choseDate == 2
              ? '选择月份'
              : choseDate == 3
              ? '选择日期'
              : '选择日期'
          "
          clearable="false"
          @change="searchBuild"
        >
        </el-date-picker>
        <div class="change-tab" style="display:none;">
          <!-- <div
            @click="selectDate(1)"
            :style="{ backgroundColor: choseDate == 1 ? 'rgb(8,166,255)' : '' }"
          >
            年
          </div>
          <div
            @click="selectDate(2)"
            :style="{ backgroundColor: choseDate == 2 ? 'rgb(8,166,255)' : '' }"
          >
            月
          </div> -->
          <div style="color: #999; cursor: default">年</div>
          <div style="color: #999; cursor: default">月</div>
          <div
            @click="selectDate(3)"
            :style="{ backgroundColor: choseDate == 3 ? 'rgb(8,166,255)' : '' }"
          >
            日
          </div>
        </div>
      </div>
    </div>
    <div class="charts">
      <div style="position: relative">
        <div
          style="
            position: absolute;
            left: 1.25rem;
            top: 1.2rem;
            color: rgba(255, 255, 255, 0.35);
            font-size: 12px;
          "
        >
          空调名称:由东到西数字逐渐增大
        </div>
        <div class="legends">
          <div class="legends-block-left">
            <div></div>
            <span>工作时段</span>
          </div>
          <div class="legends-block-right">
            <div></div>
            <span>非工作时段</span>
          </div>
        </div>
        <div id="condition-work"></div>
        <!-- <div class="work_time_tool">
          <span
            :style="{ color: timeDateIndex == 9 ? '#909399' : '#fff' }"
            class="time_date_act"
            @click="preDate"
            >&lt;上一天</span
          >{{ timeDate[timeDateIndex]
          }}<span
            :style="{ color: timeDateIndex == 0 ? '#909399' : '#fff' }"
            class="time_date_act"
            @click="nextDate"
            >下一天&gt;</span
          >
        </div> -->
      </div>

      <div class="open-statistics">
        <!-- <lineCharts id="line-chart" ref="line" width="33rem" height="16.875rem"></lineCharts> -->
        <!-- <p>开机时长</p>
        <div id="open-num"></div> -->
        <p>查询日期室内平均温度</p>
        <div class="open-time">
          <div class="warm-chart">
            <div id="floor-temper3"></div>
            <p>{{ buildValue }}#1层</p>
          </div>
          <div class="warm-chart">
            <div id="floor-temper4"></div>
            <p>{{ buildValue }}#2层</p>
          </div>
          <div class="warm-chart">
            <div id="floor-temper5"></div>
            <p>{{ buildValue }}#3层</p>
          </div>
        </div>
        <p>近14天非工作时段开机空调统计</p>
        <el-table
          :data="closeData"
          class="total-source-table"
          :header-row-style="headerStyle"
          :row-style="rowStyle"
          height="200"
          v-loaddata="loadData"
        >
          <el-table-column
            prop="date"
            label="日期"
            align="center"
          ></el-table-column>
          <el-table-column label="|" width="15"></el-table-column>
          <el-table-column prop="location" label="设备位置" align="center">
          </el-table-column>
          <el-table-column label="|" width="15"></el-table-column>
          <el-table-column
            prop="equipCode"
            label="设备编号"
            align="center"
          ></el-table-column>
          <el-table-column label="|" width="15"></el-table-column>
          <el-table-column prop="openTime" label="未关机时段" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getFloorAvgTmp,
  getConditionBar,
  getConditionLine,
  getConditionTable,
} from "@/api/source/total";
import { dateFormat } from "@/util/date";
export default {
  data() {
    return {
      timeDateIndex: 0,
      timeDate: [
        "2022-10-25",
        "2022-10-24",
        "2022-10-23",
        "2022-10-22",
        "2022-10-21",
        "2022-10-20",
        "2022-10-19",
        "2022-10-18",
        "2022-10-17",
        "2022-10-16",
      ], //工作时间段日期选择
      choseDate: "3", //日期选择模式
      chooseDateValue: dateFormat(new Date(), "yyyy-MM-dd"), //日期选中值
      buildValue: "01",
      buildings: [
        // {
        //   id: "",
        //   name: "全部",
        // },
        {
          id: "01",
          name: "1号楼",
        },
        {
          id: "02",
          name: "2号楼",
        },
        {
          id: "03",
          name: "3号楼",
        },
        {
          id: "04",
          name: "4号楼",
        },
        {
          id: "05",
          name: "5号楼",
        },
        {
          id: "06",
          name: "6号楼",
        },
      ],
      dateValue: "",
      closeData: [],
      headerStyle: {
        background: "rgba(0,0,0,.2)",
      },
      rowStyle: {
        background: "transparent",
      },
      current: 1,
      size: 5,
      build: ["#1", "#2", "#3", "#4", "#5", "#6"],
      buildColor: [
        "rgb(56,169,255)",
        "rgb(44,246,172)",
        "rgb(255,243,91)",
        "rgb(236,105,67)",
        "rgb(126,207,142)",
        "rgb(242,155,119)",
      ],
      workTimeData: [], //空调工作时段
    };
  },
  mounted() {
    this.getData();
    setTimeout(() => {
      this.getData();
    }, 3600000);
  },
  methods: {
    preDate() {
      this.timeDateIndex =
        this.timeDateIndex < 9 ? this.timeDateIndex + 1 : this.timeDateIndex;
      this.getConditionBarData();
    },
    nextDate() {
      this.timeDateIndex =
        this.timeDateIndex > 0 ? this.timeDateIndex - 1 : this.timeDateIndex;
      this.getConditionBarData();
    },
    //日期类型
    selectDate(index) {
      this.choseDate = index;
      if (this.chooseDateValue) {
        if (index == 1) {
          this.chooseDateValue =
            this.chooseDateValue.length > 4
              ? this.chooseDateValue.substring(0, 4)
              : this.chooseDateValue;
        } else if (index == 2) {
          this.chooseDateValue =
            this.chooseDateValue.length < 5
              ? dateFormat(new Date(), "yyyy-MM")
              : this.chooseDateValue.length > 7
              ? this.chooseDateValue.substring(0, 7)
              : this.chooseDateValue;
        } else if (index == 3) {
          this.chooseDateValue =
            this.chooseDateValue.length < 5
              ? dateFormat(new Date(), "yyyy-MM-dd")
              : this.chooseDateValue.length < 10
              ? dateFormat(new Date(), "yyyy-MM-dd")
              : this.chooseDateValue;
        }
      }
      this.$nextTick(() => {
        this.getData();
      });
    },
    //楼宇选择
    searchBuild() {
      this.getData();
    },
    getToday(day) {
      //获取当天以及前7天的日期
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    getData() {
      this.getConditionBarData(); //工作时间甘特图
      this.getTemperData(); //平均温度
      this.getConditionTableData(); //进14天
    },
    getConditionBarData() {
      //获取甘特图数据
      getConditionBar(
        1,
        this.buildValue,
        this.choseDate,
        this.chooseDateValue ? this.chooseDateValue : ""
      ).then((res) => {
        let data = res.data.data;
        // let data = {}; //res.data.data;
        // data.workingList = [
        //   [
        //     "2022/10/25 9:00-2022/10/25 16:00",
        //     "2022/10/24 7:00-2022/10/24 9:00",
        //     "2022/10/24 11:00-2022/10/24 12:00",
        //     "2022/10/21 11:00-2022/10/21 12:00",
        //   ],
        //   [
        //     "2022/10/25 16:00-2022/10/25 21:00",
        //     "2022/10/24 8:00-2022/10/24 14:00",
        //     "2022/10/23 16:00-2022/10/23 21:00",
        //   ],
        //   [
        //     "2022/10/24 4:00-2022/10/24 10:00",
        //     "2022/10/24 12:00-2022/10/24 14:30",
        //   ],
        //   ["2022/10/24 15:00-2022/10/24 16:00"],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        // ];
        // data.unworkingList = [
        //   [
        //     "2022/10/24 9:00-11:00",
        //     "2022/10/24 1:00-6:00",
        //     "2022/10/23 16:00-2022/10/23 21:00",
        //   ],
        //   [
        //     "2022/10/24 15:00-2022/10/24 22:00",
        //     "2022/10/23 16:00-2022/10/23 21:00",
        //   ],
        //   ["2022/10/24 11:00-2022/10/24 12:00"],
        //   [
        //     "2022/10/24 9:00-2022/10/24 15:00",
        //     "2022/10/24 16:00-2022/10/24 20:00",
        //   ],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        //   [],
        // ];
        // data.equipNameList = [];
        // for (let i = 0; i < 22; i++) {
        //   data.equipNameList.push("空调" + (i + 1));
        // }
        data.equipNameList =
          data.equipNameList == undefined ? [] : data.equipNameList;
        data.workingList =
          data.workingList == undefined ? [] : data.workingList;
        data.unworkingList =
          data.unworkingList == undefined ? [] : data.unworkingList;
        let series = [];
        for (let i = 0; i < data.workingList.length; i++) {
          for (let j = 0; j < data.workingList[i].length; j++) {
            series.push({
              value: [
                i,
                `${data.workingList[i][j].substring(
                  0,
                  data.workingList[i][j].indexOf("-")
                )}`,
                `${data.workingList[i][j].substring(
                  data.workingList[i][j].indexOf("-") + 1
                )}`,
                "in",
              ],
            });
          }
        }
        for (let m = 0; m < data.unworkingList.length; m++) {
          for (let n = 0; n < data.unworkingList[m].length; n++) {
            series.push({
              value: [
                m,
                `${data.unworkingList[m][n].substring(
                  0,
                  data.unworkingList[m][n].indexOf("-")
                )}`,
                `${data.unworkingList[m][n].substring(
                  data.unworkingList[m][n].indexOf("-") + 1
                )}`,
                "out",
              ],
            });
          }
        }
        series.sort((a, b) => {
          return a.value[0] - b.value[0];
        }); //升序
        // console.log("series", series);
        this.getConditionWork(series, data.equipNameList);
        // {

        //     value: [0, `${baseDate} 12:00`, `${baseDate} 17:00`,'in']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
        // },
      });
    },
    getConditionLineData() {
      //折线图数据 - 废弃20221022
      getConditionLine(1, this.dateValue).then((res) => {
        const data = res.data.data;
        // console.log(data)
        let series = JSON.parse(JSON.stringify(data.workingNumberList));
        series.splice(0, 1);
        series.push(data.workingNumberList[0]);
        this.getOpenNum(series);
      });
    },
    //平均温度
    getTemperData() {
      getFloorAvgTmp(
        1,
        this.buildValue,
        this.choseDate,
        this.chooseDateValue ? this.chooseDateValue : ""
      ).then((res) => {
        const data = res.data.data;
        let floorTempOne = "0",
          floorTempTwo = "0",
          floorTempThree = "0";
        data.map((item) => {
          floorTempOne = item.floorNumber == "01" ? item.avgTemp : floorTempOne;
          floorTempTwo = item.floorNumber == "02" ? item.avgTemp : floorTempTwo;
          floorTempThree =
            item.floorNumber == "03" ? item.avgTemp : floorTempThree;
        });
        this.getFloorTemper2("floor-temper3", floorTempOne);
        this.getFloorTemper2("floor-temper4", floorTempTwo);
        this.getFloorTemper2("floor-temper5", floorTempThree);
      });
    },
    getConditionTableData() {
      //获取空调列表
      getConditionTable(
        1,
        this.current,
        this.size,
        "",
        this.choseDate,
        this.chooseDateValue ? this.chooseDateValue : ""
      ).then((res) => {
        this.closeData = res.data.data.records;
        for (let i = 0; i < this.closeData.length; i++) {
          this.closeData[i].date = this.closeData[i].startTime.substring(0, 10);
          this.closeData[i].startTime = this.closeData[i].startTime.substring(
            11,
            16
          );
          this.closeData[i].endTime = this.closeData[i].endTime.substring(
            11,
            16
          );
          this.closeData[i].location =
            Number(this.closeData[i].buildNumber) +
            "#" +
            Number(this.closeData[i].floorNumber) +
            "层";
        }
      });
    },
    loadData() {
      this.current += 1;
      getDailyList(
        this.area,
        this.value1[0],
        this.value1[1],
        this.current,
        this.size
      ).then((res) => {
        if (this.current <= res.data.data.pages) {
          const results = res.data.data.records;
          results.forEach((item) => {
            item.date = item.startTime.substring(0, 10);
            item.startTime = item.startTime.substring(11, 16);
            item.endTime = item.endTime.substring(11, 16);
            item.location =
              Number(item.buildNumber) + "#" + Number(item.floorNumber) + "层";
            this.closeData.push(item);
          });
        }
      });
    },
    searchCondition() {
      //废弃 20221022
      this.getConditionBarData();
      // this.getConditionLineData();
    },
    //空调工作和非工作时长甘特图
    getConditionWork(series, category) {
      let myChart = this.$echarts.init(
        document.getElementById("condition-work")
      );
      // let hoursArr = [];
      let now = new Date();
      let baseDate = this.chooseDateValue
        ? this.chooseDateValue
        : dateFormat(now, "yyyy-MM-dd");
      let baseDate2 = new Date(baseDate);
      let minDate = baseDate2.setDate(new Date(baseDate).getDate() - 10);
      let _min = dateFormat(new Date(minDate), "yyyy-MM-dd");
      console.log("mindate", baseDate, _min);
      // hoursArr = this.getDayList(); //this.getLastDayList(now, 23);
      // console.log(hoursArr);
      myChart.setOption({
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "weakFilter",
            height: 16,
            bottom: 0,
            start: 0,
            end: 100,
            handleIcon:
              "path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "65%",
            showDetail: false,
          },
          {
            type: "inside",
            id: "insideX",
            xAxisIndex: 0,
            filterMode: "weakFilter",
            start: 0,
            end: 100,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
          },
          {
            type: "slider",
            yAxisIndex: 0,
            zoomLock: true,
            width: 10,
            right: 10,
            top: 20,
            bottom: 20,
            start: category.length < 15 ? 0 : 60,
            end: category.length < 15 ? 100 : 100,
            handleSize: 0,
            showDetail: false,
          },
          {
            type: "inside",
            id: "insideY",
            yAxisIndex: 0,
            start: category.length < 15 ? 0 : 60,
            end: category.length < 15 ? 100 : 100,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: function (params) {
            console.info(params);
            let result = params.name + "：<br/>";
            // let result = params[0].name + "：<br/>";
            // for (let i = 0; i < params.length; i++) {
            //   if (params[i].data.value.length > 1) {
            //     // let value =
            //     //   params[i].data.value[1].substring(
            //     //     params[i].data.value[1].lastIndexOf(" ") + 1
            //     //   ) +
            //     //   "-" +
            //     //   params[i].data.value[2].substring(
            //     //     params[i].data.value[2].lastIndexOf(" ") + 1
            //     //   ) +
            //     //   (params[i].data.value[3] == "in"
            //     //     ? " 工作时段"
            //     //     : " 非工作时段");
            //     let value =
            //       params[i].data.value[1] +
            //       "-" +
            //       params[i].data.value[2] +
            //       (params[i].data.value[3] == "in"
            //         ? " 工作时段"
            //         : " 非工作时段");
            //     result = result + value + "</br>";
            //   }
            // }
            let value =
              params.value[1] +
              "-" +
              params.value[2] +
              (params.value[3] == "in" ? " 工作时段" : " 非工作时段");
            result = result + value + "</br>";
            return result;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
          top: "8%",
        },
        xAxis: {
          type: "time",
          position: "top",
          // interval: 3600 * 1000, //以一个小时递增
          // splitNumber: 12,
          // data: hoursArr,
          max: `${baseDate} 23:59`,
          min: `${_min} 00:00`, //`${baseDate} 00:00`, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
          axisLabel: {
            formatter: function (value, index) {
              var date = new Date(value);
              var day = date.getDate();
              var hours = date.getHours();
              var minute = date.getMinutes();
              if (hours == 0 && minute == 0) {
                return day + "日";
              } else if (hours <= 12) {
                if (hours % 2 == 0) {
                  return hours + "a";
                } else {
                  return;
                }
              } else {
                if (hours % 2 == 0) {
                  // return hours - 12 + "p";
                  return hours + "p";
                } else {
                  return;
                }
              }
            },
            // formatter: {
            //   day: "{d}日",
            //   hour: "{h}",
            //   minute: "{h}:{m}",
            // },
            textStyle: {
              color: "rgba(255,255,255,.7)", //更改坐标轴文字颜色
              fontSize: 14, //更改坐标轴文字大小
            },
            showMinLabel: false,
            showMaxLabel: false,
            align: "center",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.7)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisTick: {
            inside: true,
          },
        },

        yAxis: {
          type: "category",
          name: "",
          nameTextStyle: {
            color: "rgb(7,230,236)",
            fontSize: 14,
            padding: [0, 0, 0, -20],
            align: "left",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.7)",
            },
          },
          axisTick: {
            show: true,
            inside: true,
          },
          axisLabel: {
            color: "rgba(255,255,255,.7)",
            interval: 0,
          },
          data: category,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          // 用空bar来显示三个图例

          // { name: state[1], type: 'bar', data: [],barMaxWidth:10 },
          // { name: state[2], type: 'bar', data: [],barMaxWidth:10 },
          {
            type: "custom",
            renderItem: function (params, api) {
              //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
              var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
              var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
              var end = api.coord([api.value(2), categoryIndex]);
              // var height = api.size([0, 1])[1];
              var height = 10;
              return {
                type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height,
                },
                style: api.style(),
              };
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0, // data 中『维度0』对应到 Y 轴
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  if (
                    params.data !== null &&
                    params.data["value"] &&
                    params.data["value"][3] == "in"
                  ) {
                    return "rgb(70,138,239)";
                  } else {
                    return "rgb(190,119,99)";
                  }
                },
              },
            },
            data: series,
          },
        ],
      });
    },
    //24小时
    getDayList() {
      let result = [];
      for (let i = 0; i < 25; i++) {
        let h = i == 24 ? "23:59" : i <= 9 ? "0" + i + ":00" : i + ":00";
        result.push(
          this.timeDate[this.timeDateIndex]
            .replace("-", "/")
            .replace("-", "/") +
            " " +
            h
        );
      }
      return result;
    },
    //当前时间倒推
    getLastDayList(d, s) {
      let result = [];
      d.setHours(d.getHours());
      var _h = d.getHours() <= 9 ? "0" + d.getHours() : d.getHours();
      result.push(
        d.getFullYear() +
          "/" +
          (d.getMonth() + 1) +
          "/" +
          d.getDate() +
          " " +
          _h +
          ":00"
      );
      for (var i = 0; i < s; i++) {
        d.setHours(d.getHours() - 1);
        var h = d.getHours() <= 9 ? "0" + d.getHours() : d.getHours();
        result.push(
          d.getFullYear() +
            "/" +
            (d.getMonth() + 1) +
            "/" +
            d.getDate() +
            " " +
            h +
            ":00"
        );
      }
      return result.reverse();
    },
    //平均温度
    getFloorTemper2(id, value) {
      let myChart = this.$echarts.init(document.getElementById(id));
      myChart.setOption({
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 7,
              roundCap: true,
              itemStyle: {
                color: "rgb(0,237,254)",
              },
            },
            min: 0,
            max: 40,
            center: ["52%", "51%"],
            axisLine: {
              lineStyle: {
                width: 7,
                color: [[1, "transparent"]],
              },
            },
            radius: "93%",
            startAngle: 225,
            endAngle: -45,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            anchor: {
              show: false,
            },
            splitNumber: 4,
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 22,
              color: "rgb(0,237,254)",
              offsetCenter: [0, 15],
              formatter: value + "{b|℃}",
              fontFamily: "fantasy",
              fontWeight: "normal",
              rich: {
                b: {
                  fontSize: 15,
                  color: "rgb(0,237,254)",
                },
              },
            },
            data: [
              {
                value: value,
                name: "平均温度",
                title: {
                  show: true,
                  color: "rgba(255,255,255,.5)",
                  fontSize: 12,
                  offsetCenter: [0, -10],
                },
              },
            ],
          },
        ],
      });
    },
    //开机时长
    getOpenNum(series) {
      let myChart = this.$echarts.init(document.getElementById("open-num"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "10/11",
              "10/10",
              "10/11",
              "10/12",
              "10/13",
              "10/14",
              "10/15",
              "10/16",
              "10/17",
              "10/18",
              "10/19",
              "10/20",
            ],
            axisLabel: {
              color: "rgba(255,255,255,.7)",
              interval: 0,
              rotate: 45,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              color: "rgba(255,255,255,.7)",
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: this.buildValue,
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [0, 10, 500, 48, 68, 125, 15, 88, 45, 12, 45, 78],
            barWidth: 8,
            itemStyle: {
              color: "rgb(70,138,239)",
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.condition-analysis {
  display: inline-block;
  width: 64.312rem;
  height: 33.375rem;
  background-image: url(../../../../public/img/analysis/condition-analy.png);
  background-size: 100% 100%;
  position: relative;
  // overflow: hidden;

  .yq-title {
    margin: 0.7rem 0 0 2.5rem;
    color: white;
    font-weight: bold;
  }

  .change-tab {
    display: inline-flex;
    border: 1px solid #08a6ff;
    width: 7.5rem;
    justify-content: flex-start;
    border-radius: 0.312rem;
    cursor: pointer;
    font-size: 14px;
    z-index: 100;
    div {
      color: white;
      width: 50%;
      text-align: center;
      border-right: 1px solid rgb(8, 166, 255);
    }
  }
  .search-box {
    margin-top: 2.5rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    overflow: hidden;
    /deep/ .el-date-editor .el-input__inner {
      background-color: rgb(152, 160, 173);
      color: rgba(255, 255, 255, 0.7);
      border-color: rgb(152, 160, 173);
    }

    /deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
      color: white;
    }
  }
  .choose-time {
    // margin-top: 2.5rem;
    // margin-left: 1.25rem;

    span {
      color: rgb(8, 231, 235);
      font-size: 14px;
    }

    .search-btn {
      background-color: rgb(1, 238, 235);
      color: #0f93e1;
      border: 0;
      width: 4.687rem;
      margin-left: 0.937rem;
      font-size: 15px;
    }

    /deep/ .el-date-editor .el-input__inner {
      background-color: rgb(152, 160, 173);
      color: rgba(255, 255, 255, 0.7);
      border-color: rgb(152, 160, 173);
    }

    /deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
      color: white;
    }
    /deep/ .el-select .el-input__inner {
      background-color: rgb(152, 160, 173);
      color: rgba(255, 255, 255, 0.7);
      border-color: rgb(152, 160, 173);
    }

    /deep/ .el-select .el-input__inner::-webkit-input-placeholder {
      color: white;
    }
  }

  .charts {
    display: flex;
    .legends {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0.75rem;
      top: 0.937rem;
      &-block-left,
      &-block-right {
        display: flex;
        align-items: center;
        div {
          width: 0.937rem;
          height: 0.312rem;
          background-color: rgb(70, 138, 239);
          margin-right: 0.5rem;
        }
        span {
          color: white;
          font-size: 14px;
        }
      }
      &-block-right {
        margin-left: 1.25rem;
        div {
          background-color: rgb(190, 119, 99);
        }
      }
    }
    .work_time_tool {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1rem;
      color: #fff;
      font-size: 14px;
      text-align: center;
      .time_date_act {
        margin: 0 2rem;
        cursor: pointer;
      }
    }
  }

  #condition-work {
    width: 29.75rem;
    height: 23.75rem;
    margin: 1.25rem 0 0 1.25rem;
  }

  .open-statistics {
    width: 30rem;
    margin-left: 1.25rem;
    // 开机时长
    .open-time {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: calc(100% - 20px);

      .warm-chart {
        width: 7.5rem;
        height: 7.187rem;
        background-image: url(../../../../public/img/analysis/warm-charts.png);
        background-size: 100% 100%;
        position: relative;

        #floor-temper3,
        #floor-temper4,
        #floor-temper5 {
          width: 7.187rem;
          height: 6.875rem;
        }

        p {
          position: absolute;
          bottom: -0.312rem;
          left: 35%;
          font-size: 0.875rem;
          color: white;
        }
      }
    }
    p {
      color: rgb(7, 230, 236);
      font-size: 14px;
    }

    #open-num {
      width: 30rem;
      height: 9.375rem;
    }

    .total-source-table {
      background-color: transparent;
      width: 100%;
      max-height: 10rem;
      overflow-y: auto;
      margin-top: 0.937rem;
    }

    /deep/ .el-table th.is-leaf {
      background-color: transparent !important;
      border: 0;
      color: white;
    }

    /deep/ .el-table th.is-leaf:nth-of-type(even) {
      color: rgba(153, 153, 153, 0.3);
    }

    /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: transparent !important;
    }

    /deep/ .el-table td {
      border: 0;
      color: rgba(255, 255, 255, 0.7);
    }

    /deep/.el-table::before {
      background-color: transparent;
    }

    /deep/ .el-table__body-wrapper .el-table__row:nth-of-type(even) {
      background-color: rgba($color: rgb(41, 84, 125), $alpha: 0.3) !important;
    }
    /deep/ .el-table th.gutter {
      display: none !important;
    }
  }
}
</style>
