<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-12-27 15:44:21
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-03 10:04:15
 * @FilePath: /huaxin-web/src/views/indexcomponents/index/Left/components/Top.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="left-top flex-d-b">
    <div class="title-text charsTitle">日期：{{ day }}</div>
    <div class="b flex-b">
      <div class="item">
        <Charts :options="options1" />
      </div>
      <div class="item">
        <Charts :options="options2" />
      </div>
      <div class="item">
        <Charts :options="options3" />
      </div>
      <!--<div class="item">
        <Charts ref="warn" :options="options4" />
      </div>-->
    </div>
  </div>
</template>

<script>
import Charts from "@/components/CharsCom/Chars.vue/";
import { clockStatistic } from "@/api/screenstatistic/statistic.js";
import { listInfo } from "@/api/warning/info";
import dayjs from "dayjs";
export default {
  components: {
    Charts,
  },
  name: "",
  data() {
    return {
      maxVal: 666,
      val1: 666,
      val2: 600,
      val3: 66,
      warnNum: 0,
      options1: {},
      options2: {},
      options3: {},
      options4:{},
      weekData: {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        7: "星期天",
      },
      day: "",
    };
  },
  mounted() {
    this.clockStatistic().then((res) => {
      // console.log(res);
      const { totalPeople, clickNum, noClickNum } = res.data;
      this.maxVal = totalPeople;
      this.val1 = totalPeople;
      this.val2 = clickNum;
      this.val3 = noClickNum;
      this.setOptions();
    });
    this.day = dayjs().format("YYYY/MM/DD") + " " + this.weekData[dayjs().day()];
    //this.warnStatistic();
  },
  methods: {
    clockStatistic() {
      return clockStatistic();
    },
    //警告提醒
    warnStatistic(){
      listInfo({ pageNum: 1,pageSize: 10,warnStatus:'0'}).then(res =>{
        if(res.code == 200){
            this.warnNum = res.total;
            this.setWarnOption();
            this.setWarnEvent();
        }
      })
    },
    setOptions() {
      this.options1 = {
        title: [
          {
            text: "{a|" + this.val1 + "}",
            show: true,
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: "#48F7FC",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "{a|" + "总人数" + "}",
            show: true,
            x: "center",
            y: "80%",
            textStyle: {
              rich: {
                a: {
                  fontSize: 14,
                  color: "#fff",
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["80%", "100%"],
        },
        angleAxis: {
          max: this.maxVal,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [this.val1],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "#000000",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#08F7FF",
                  },
                  {
                    offset: 1,
                    color: "#397CF7",
                  },
                ]),
              },
            },
          },
        ],
      };
      this.options2 = {
        title: [
          {
            text: "{a|" + this.val2 + "}",
            show: true,
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: "#0AFEAC",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "{a|" + "已打卡" + "}",
            show: true,
            x: "center",
            y: "80%",
            textStyle: {
              rich: {
                a: {
                  fontSize: 14,
                  color: "#fff",
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["80%", "100%"],
        },
        angleAxis: {
          max: this.maxVal,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [this.val2],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "#000000",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#0AFFA9",
                  },
                  {
                    offset: 1,
                    color: "#0AF7FF",
                  },
                ]),
              },
            },
          },
        ],
      };

      this.options3 = {
        title: [
          {
            text: "{a|" + this.val3 + "}",
            show: true,
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: "#FF6464",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "{a|" + "未打卡" + "}",
            show: true,
            x: "center",
            y: "80%",
            textStyle: {
              rich: {
                a: {
                  fontSize: 14,
                  color: "#fff",
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["80%", "100%"],
        },
        angleAxis: {
          max: this.maxVal,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [this.val3],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "#000000",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#FF0A0A",
                  },
                  {
                    offset: 1,
                    color: "#E06E3B",
                  },
                ]),
              },
            },
          },
        ],
      };
    },
    setWarnOption(){
      this.options4 = {
        title: [
          {
            text: "{a|" + this.warnNum + "}",
            show: true,
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 12,
                  color: "#FF6464",
                  fontWeight: "bold",
                },
              },
            },
          },
          {
            text: "{a|" + "警告提醒" + "}",
            show: true,
            x: "center",
            y: "80%",
            textStyle: {
              rich: {
                a: {
                  fontSize: 14,
                  color: "#fff",
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
        polar: {
          center: ["50%", "50%"],
          radius: ["80%", "100%"],
        },
        angleAxis: {
          max: this.maxVal,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [this.warnNum],
            name: "",
            type: "bar",
            roundCap: true,
            showBackground: true,
            backgroundStyle: {
              color: "#000000",
            },
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#FF0A0A",
                  },
                  {
                    offset: 1,
                    color: "#E06E3B",
                  },
                ]),
              },
            },
          },
        ],
      };
    },
    setWarnEvent(){
      this.$refs.warn.$refs.chars.addEventListener("click",() =>{
        this.$router.push({path:'/gasinfo/warning'})
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.left-top {
  width: 100%;
  height: 100%;
  // background: blue;
  .title-text {
    color: #fff;
  }
  .b {
    flex: 1;
    .item {
      width: 56px;
      height: 100%;
      // background: red;
    }
  }
}
</style>
