<template>
  <div class="top-box">
    <el-form
      :model="form"
      label-width="auto"
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item label="除尘器名称">
        <el-select
          v-model="form.dustName"
          placeholder="请选择除尘器"
          style="width: 240px"
        >
        </el-select>
      </el-form-item>
      <el-form-item label="分析时间">
        <el-date-picker
          v-model="form.dateValue"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
        />
      </el-form-item>
    </el-form>
  </div>
  <div class="layout1">
    <div class="left-box">
      <div class="part1">
        <div class="chart-box" v-for="(item, index) in chartData" :key="item">
          <div :id="'chart' + index" class="chart-item"></div>
        </div>
      </div>
      <div class="warn-info"></div>
    </div>
    <div class="right-box">
      <div class="part1"></div>
      <div class="part2">
        <div class="dust-title">2号窑尾除尘器</div>
        <div class="dust-info">
          <div class="info-item" v-for="item in dustInfo" :key="item.label">
            <span class="lable">{{ item.label }}</span>
            <span class="value">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </div>
        <div class="indicator-box">
          <div class="indicator-item" id="indicatorOne"></div>
          <div class="indicator-item" id="indicatorTwo"></div>
        </div>
        <div class="position-info">
          <div class="left">
            <div class="part">
              <div class="point warn" v-for="item in 6" :key="item"></div>
            </div>
            <div class="part">
              <div class="point warn" v-for="item in 6" :key="item"></div>
            </div>
          </div>
          <div class="right">
            <div class="part">
              <div class="point warn" v-for="item in 6" :key="item"></div>
            </div>
            <div class="part">
              <div class="point warn" v-for="item in 6" :key="item"></div>
            </div>
          </div>
        </div>
        <div class="other-info">
          <div>
            <span>反吹仓室：</span>
            <span>3#仓-1排</span>
          </div>
          <div>
            <span>泄露仓室：</span>
            <span>5#仓、10#仓、13#仓</span>
          </div>
          <div>
            <span>故障仓室：</span>
            <span>5#仓、10#仓、13#仓</span>
          </div>
        </div>
      </div>
      <div class="warn-info"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
const form = reactive({
  dustName: "",
  dateValue: [],
});
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
};
const chartInstance = reactive([]);
const chartData = reactive([{}, {}, {}]);
const initChart = () => {
  chartData.forEach((item, index) => {
    if (chartInstance[index] && chartInstance[index].dispose) {
      chartInstance[index].dispose();
    }
    chartInstance[index] = echarts.init(
      document.getElementById("chart" + index)
    );
    chartInstance[index].setOption(option);
  });
};
const dustInfo = reactive([
  { label: "压差", value: "0.0", unit: "KPa" },
  { label: "粉尘浓度", value: "0.0", unit: "mg/m3" },
  { label: "电磁阀数量", value: "0.0", unit: "KPa" },
  { label: "仓室数量", value: "0.0", unit: "KPa" },
  { label: "布袋检测仪数量", value: "0.0", unit: "KPa" },
  { label: "脉冲检测仪数量", value: "0.0", unit: "KPa" },
]);
const option2 = {
  series: [
    {
      type: "gauge",
      startAngle: 260,
      endAngle: 300,
      center: ["50%", "75%"],
      radius: "90%",
      min: 0,
      max: 1,
      splitNumber: 8,
      axisLine: {
        lineStyle: {
          width: 3,
          color: [
            [0.25, "#FF6E76"],
            [0.8, "#67c23a"],
            [1, "#FF6E76"],
          ],
        },
      },
      pointer: {
        icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
        length: "12%",
        width: 20,
        offsetCenter: [0, "-60%"],
        itemStyle: {
          color: "auto",
        },
      },
      axisTick: {
        length: 0,
        lineStyle: {
          color: "auto",
          width: 2,
        },
      },
      splitLine: {
        length: 0,
        lineStyle: {
          color: "auto",
          width: 5,
        },
      },
      axisLabel: {
        color: "#464646",
        fontSize: 20,
        distance: -60,
        rotate: "tangential",
        show: false,
      },
      title: {
        offsetCenter: [0, "50%"],
        fontSize: 12,
      },
      detail: {
        fontSize: 20,
        offsetCenter: [0, 0],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value * 100) + "";
        },
        color: "inherit",
      },
      data: [
        {
          value: 0.7,
          name: "压差",
        },
      ],
    },
  ],
};
const indicatorOneInstance = ref();
const indicatorTwoInstance = ref();
const indicatorFun = (target, domId, option) => {
  if (target.value && target.dispose) {
    target.value.dispose();
  }
  target.value = echarts.init(document.getElementById(domId));
  target.value.setOption(option);
};

onMounted(() => {
  initChart();
  indicatorFun(indicatorOneInstance, "indicatorOne", option2);
  indicatorFun(indicatorTwoInstance, "indicatorTwo", option2);
});
</script>
<style lang="scss" scoped>
$borderColor: #bbbdc3;
.top-box {
}
.left-box {
  width: 45%;
  .part1 {
    border-radius: 15px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    height: 70vh;
    .chart-box {
      width: 100%;
      height: 31%;
      .chart-item {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.right-box {
  width: 45%;
  .part1 {
    width: 100%;
    height: 10vh;
    border-radius: 15px;
    background-color: #fff;
  }
  .part2 {
    margin-top: 20px;
    width: 100%;
    height: calc(60vh - 20px);
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
    padding: 20px 0;
    box-sizing: border-box;
    .dust-title {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      padding-bottom: 20px;
      border-bottom: 1px solid $borderColor;
    }
    .dust-info {
      padding: 20px 20px;
      border-bottom: 1px solid $borderColor;
    }
    .info-item {
      padding: 3px 0;
      span {
        display: inline-block;
      }
      .lable {
        width: 40%;
      }
      .value {
        width: 50%;
      }
      .unit {
        width: 10%;
      }
    }
    .indicator-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .indicator-item {
        width: 50%;
        height: 200px;
      }
    }
    .position-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 20px 20px 20px;
      .left,
      .right {
        padding: 5px;
        width: 48%;
        flex-wrap: wrap;
        // box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
        box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px 0px;
        // box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
      }
      .part {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .point {
        width: 20px;
        margin: 1% 3%;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
      }
      .point::after {
        content: "";
        display: block;
        padding-bottom: 100%; /* 9/16 * 100% = 56.25% */
      }
      .warn {
        background-color: rgb(217, 10, 10);
      }
      .health {
        background-color: #67c23a;
      }
    }
    .other-info {
      padding: 20px;
      border-top: 1px solid $borderColor;
    }
  }
}
.warn-info {
  margin-top: 10px;
  height: 15vh;
  border-radius: 15px;
  background-color: #fff;
}
.layout1 {
  display: flex;
  justify-content: space-between;
}
.layout2 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
</style>
