<!-- 
 * @Description: 预警管理
 * @Author: huguodong 
 * @Date: 2023-12-15 15:44:05
!-->
<template>
  <div class="card content-main">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div ref="chart1" style="width: 600px; height: 378px"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div ref="chart2" style="width: 600px; height: 378px"></div>
      </el-col>
      <el-col :span="24">
        <div ref="chart3" style="width: 100%; height: 378px"></div>
      </el-col>
    </el-row>
  </div>
</template>
    
  <script setup lang="tsx" name="sysSpa">
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import { statistionApi } from "@/api";
import * as echarts from "echarts";

const value = ref(true);
const chart1 = ref(null);
const chart2 = ref(null);
const chart3 = ref(null);

onMounted(() => {
  getDataChart();
  getWeekData();
});
function getDataChart() {
  setTimeout(async () => {
    await statistionApi.warnstatistion({}).then((res: any) => {
      let { code, data } = res;

      if (code == 200) {
        let chartData1 = data.alarm.map((item: any) => {
          return {
            value: item.count,
            name: item.name
          };
        });
        let chartData2 = data.hand.map((item: any) => {
          return {
            value: item.count,
            name: item.name
          };
        });
        // let chartData = [
        //   {
        //     name: "1",
        //     value: 100
        //   },
        //   {
        //     name: "2",
        //     value: 200
        //   }
        // ];
        getCharts1(chartData1);
        getCharts2(chartData2);
      }
    });
  });
}
function getCharts1(data: any) {
  const chart = echarts.init(chart1.value);
  const option = {
    title: {
      text: "今日预警情况",
      // subtext: "Fake Data",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "今日预警情况",
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}
function getCharts2(data: any) {
  const chartstation = echarts.init(chart2.value);
  const option = {
    title: {
      text: "今日处理情况",
      // subtext: "Fake Data",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "今日处理情况",
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  chartstation.setOption(option);
  window.addEventListener("resize", function () {
    chartstation.resize();
  });
}

function getWeekData() {
  setTimeout(async () => {
    await statistionApi.weekstatistion({}).then((res: any) => {
      let { code, data } = res;

      if (code == 200) {
        // let chartData = data;
        let time = data.dataX;
        let chartData = data.dataY.map((item: any) => {
          return {
            data: item.data,
            name: item.name,
            type: "bar",
            barWidth: "12px", // 设置柱子粗细
            itemStyle: {
              borderRadius: [30, 30, 0, 0]
            }
          };
        });
        getCharts3(time, chartData);
      }
    });
  });
}
function getCharts3(time: any, data: any) {
  const chartstation3 = echarts.init(chart3.value);
  const option = {
    title: {
      text: "统计分析"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01]
    },
    xAxis: {
      type: "category",
      data: time
    },
    series: data
  };

  chartstation3.setOption(option);
  window.addEventListener("resize", function () {
    chartstation3.resize();
  });
}
</script>
    
  <style lang="scss" scoped>
.content-main {
  ::v-deep(.el-collapse-item__header) {
    flex: 1 0 auto;
    order: -1;
    height: 50px;
    line-height: 50px;
  }
  .collapse-title {
    display: flex;
    flex: 1 0 90%;
    align-items: center;
    justify-content: space-between;
    order: 1;

    // padding: 30px 0;
    .titlemodel {
      margin-right: 40px;

      // display: inline-block;
      font-size: 18px;
    }
    .btns {
      margin-left: 40px;
    }
  }
  .collapse-content {
    padding: 20px;
    .contentinfo {
      box-sizing: border-box;

      //   display: flex;
      //   justify-content: space-between;
      //   align-items: center;
      padding: 20px;
      margin-top: 20px;

      //   border-bottom: 1px solid #dcdfe6;
      //   background: red;
      border-radius: 10px;

      //   box-shadow: 3px 3px 3px #00000014, 3px -3px 3px #00000014, -3px 3px 3px #00000014, -3px -3px 3px #00000014;
      //   box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
      //     0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
      box-shadow: 0 2px 1px rgb(0 0 0 / 10%), 0 0 8px rgb(0 0 0 / 10%), 0 -1px 1px #ffffff, 0 0 0 #ffffff, 0 0 16px #ffffff;
      .modellabel {
        font-size: 16px;
      }
      .btns {
        margin-top: 20px;
        margin-right: 0;
        text-align: right;
      }
    }
  }
}
</style>
    
  