<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="视图" name="first">
      <div class="mainContentBox">
        <div class="box">
          <div class="titleText">防静电监控</div>
          <div class="itemBox">
            <div class="item" v-for="(item, index) in option" :key="index">
              <div class="sc"></div>
              <div class="gw">工位:{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mainContentBox">
        <div class="box">
          <div class="titleText">温湿度监控</div>
          <div class="charts">
            <div id="dailystoragecharts1"></div>
            <div id="dailystoragecharts2"></div>
          </div>
          <el-divider />
          <div class="charts">
            <div id="dailystoragecharts3"></div>
            <div id="dailystoragecharts4"></div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="报表" name="second">
      <Tables v-if="activeName === 'second'" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import Tables from "./tables.vue";
import * as echarts from "echarts";
const option = [
  "JG-装配1",
  "JG-装配2",
  "JG-装配3",
  "JG-捡练4",
  "JG-捡练5",
  "预期套01",
  "JG-测试1",
  "JG-装配4",
  "JG-测试2",
  "入库工位",
];
const activeName = ref("first");

const charts1 = shallowRef(null);
const charts2 = shallowRef(null);
const charts3 = shallowRef(null);
const charts4 = shallowRef(null);
onMounted(() => {
  charts1.value = echarts.init(document.getElementById("dailystoragecharts1"));
  charts2.value = echarts.init(document.getElementById("dailystoragecharts2"));
  charts3.value = echarts.init(document.getElementById("dailystoragecharts3"));
  charts4.value = echarts.init(document.getElementById("dailystoragecharts4"));
  charts1.value.setOption({
    title: {
      text: "温度",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 12,
        itemStyle: {
          color: "#FFAB91",
        },
        progress: {
          show: true,
          width: 30,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 60,
          fontWeight: "bolder",
          formatter: "{value} °C",
          color: "inherit",
        },
        data: [
          {
            value: 20,
          },
        ],
      },
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: "#FD7347",
        },
        progress: {
          show: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 20,
          },
        ],
      },
    ],
  });
  charts2.value.setOption({
    title: {
      text: "温度",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: "{c}°C",
    },
    xAxis: {
      type: "category",
      data: ["1:00", "3:00", "5:00", "7:00", "9:00", "11:00", "13:00"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} ℃",
      },
    },
    series: [
      {
        data: [32, 20, 19, 23, 34, 23, 30],
        type: "line",
        smooth: true,
      },
    ],
  });
  charts3.value.setOption({
    title: {
      text: "湿度",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 12,
        itemStyle: {
          color: "#FFAB91",
        },
        progress: {
          show: true,
          width: 30,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 40,
          fontWeight: "bolder",
          formatter: "{value} %RH",
          color: "inherit",
        },
        data: [
          {
            value: 20,
          },
        ],
      },
      {
        type: "gauge",
        center: ["50%", "60%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: "#FD7347",
        },
        progress: {
          show: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 20,
          },
        ],
      },
    ],
  });
  charts4.value.setOption({
    title: {
      text: "湿度",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: "{c}RH",
    },
    xAxis: {
      type: "category",
      data: ["1:00", "3:00", "5:00", "7:00", "9:00", "11:00", "13:00"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} RH",
      },
    },
    series: [
      {
        data: [32, 20, 19, 23, 34, 23, 30],
        type: "line",
        smooth: true,
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.box {
  height: 30wh;
  .itemBox {
    display: grid;
    margin-left: 100px;
    margin-top: 5px;
    grid-template-columns: repeat(
      auto-fill,
      minmax(80px, 1fr)
    ); /* 自动填充列，每列最小宽度为100像素 */
    grid-gap: 5px; /* 设置网格项之间的间距为20像素 */
    .item {
      display: inline-block;

      height: 100px;
      .sc {
        height: 60px;
        width: 60px;
        border-radius: 30px;
        margin-bottom: 10px;
        background-color: green;
        margin: 0 auto;
      }
      .gw {
        text-align: center;
      }
    }
  }
}
.charts {
  display: flex;
}
#dailystoragecharts1 {
  padding: 10px;
  width: 35%;
  height: 400px;
  border: 1px solid #ccc;
}
#dailystoragecharts2 {
  padding: 10px;
  width: 65%;
  height: 400px;
  border: 1px solid #ccc;
}
#dailystoragecharts3 {
  padding: 10px;
  width: 35%;
  height: 400px;
  border: 1px solid #ccc;
}
#dailystoragecharts4 {
  padding: 10px;
  width: 65%;
  height: 400px;
  border: 1px solid #ccc;
}
</style>
