<template>
  <!-- 
  <div class="container1" @click="fn(ajclmydUrl)">
    <div ref="gauge" class="gauge"></div>
  </div>
   -->
  <div class="container1" @click="fn2('static/imgs/ajlc.png')">
    <img src="static/imgs/ajlc.png" style="width: 99%; height: 99%;">
  </div>
</template>
    
<script>
import { getAjclmyd } from "@/api/ddzhxt.js";
export default {
  data() {
    return {
      fontSize: 30,
      fs: 0,
      value: 0,
      ajclmydUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-grade-ratio-ajmyd.html',
    };
  },
  created() {
    this.resizeFont();
    this.getAjclmyd();
  },
  watch: {
    fontSize() {
      this.gr();
    },
  },
  computed: {},
  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url, 
        area: ['80%', '80%'],
        title:'' ,
      });
    },
    fn2(imgSrc) {
      layer.open({
        type: 1,
        content: `<div style="padding:15px"><img src="${imgSrc}" style="width:100%"/></div>`,
        area: ['85%', '80%'],
        title:'' ,
        // skin: 'demo-class'
      });
    },
    resizeFont() {
      window.addEventListener("resize", () => {
        this.fs = window.innerWidth;
        this.fontSize = (this.fs / 100) * 1.5625;
        // console.log(this.fontSize);
      });
    },
    gr() {
      let myChart = this.$echarts.init(this.$refs.gauge);
      let option = {
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 8,
            // center: ['50%', '50%'],
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, "#FF6E76"],
                  [0.5, "#FDDD60"],
                  [0.75, "#58D9F9"],
                  [1, "#7CFFB2"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "10%",
              width: 20,
              offsetCenter: [0, "-60%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 8,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 19,
              lineStyle: {
                color: "auto",
                width: 6,
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: 12,
              distance: 10,
              axisLabel: {
                position: "inner",
              },
              formatter: function (value) {
                if (value === 87.5) {
                  return "优";
                } else if (value === 62.5) {
                  return "中";
                } else if (value === 37.5) {
                  return "良";
                } else if (value === 12.5) {
                  return "差";
                }
                return "";
              },
            },
            title: {
              offsetCenter: [0, "50%"],
              fontSize: 30,
            },
            detail: {
              fontSize: this.fontSize,
              offsetCenter: [0, "3%"],
              valueAnimation: true,
              formatter: function (value) {
                return value.toFixed(2) + "%";
              },
              color: "auto",
            },
            data: [
              {
                value: this.value,
              },
            ],
            radius: "140%",
            center: ["50%", "85%"],
          },
        ],
      };
      myChart.setOption(option);
      let sizeFun = function () {
        //     this.fs = window.innerWidth;
        //   this.fontSize = (this.fs / 100 ) * 1.5625
        //   console.log(this.fontSize);
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);
    },
    async getAjclmyd() {
      try {
        const res = await getAjclmyd();
        //  console.log(res);
        this.value = res.data.data.value;
        // setTimeout(() => {
        //   this.gr();
        // }, 300);
        this.$nextTick(()=>{
            this.gr();
           })
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
};
</script>
    
<style scoped lang="scss">
.container1 {
  /* border: 1px solid #00ffff;  */
  width: 17.0833vw;
  height: 21.5749vh;

  /* width: 1.5625vw; */
  .gauge {
    width: 17.0833vw;
    height: 21.5749vh;
  }
}
</style>