<template>
  <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
    <div class="layui-row" style="height: 5%">
      <module-title :title="securityTitle" :font="5"></module-title>
    </div>
    <div class="layui-row" style="height: 15%">
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
        <div class="resident-text">居民</div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
        <div class="plan-content">
          <div class="content-number">{{securityNotData[0].number}}</div>
          <div class="content-text">{{securityNotData[0].text}}</div>
        </div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
        <div class="security-check-content">
          <div class="content-number">{{securityNotData[1].number}}</div>
          <div class="content-text">{{securityNotData[1].text}}</div>
        </div>
      </div>
    </div>
    <div class="layui-row" style="height: 15%">
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
        <div class="items">
          <div class="item"><security-check-item :content="securityData[2]"></security-check-item></div>
          <div class="item"><security-check-item :content="securityData[3]"></security-check-item></div>
          <div class="item"><security-check-item :content="securityData[4]"></security-check-item></div>
        </div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
        <div class="house-entry-rate" id="houseEntryRate"></div>
      </div>
      <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="height: 100%">
        <div class="complete-rate" id="completeRate"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  title:"SafeOrderContentPage",
  data(){
    return{
      securityTitle:'安检统计',
      securityData:[{text:'本月计划数',number:4000},
        {text:'本月安检数',number:3412},
        {text:'正常入户',number:3000},
        {text:'到访不遇',number:400},
        {text:'长期无人',number:12}],
      //安检 非居民数据
      securityNotData:[{text:'本月计划数',number:4000},
        {text:'本月安检数',number:3412},
        {text:'正常入户',number:3000},
        {text:'到访不遇',number:400}],

      //工单统计
      workOrderTitle:'工单统计',
      workOrderDatas:[{text:'预约',number:4000},
        {text:'完成',number:3412},
        {text:'总量',number:3000},
        {text:'完成',number:2122},
        {text:'总量',number:5000},
        {text:'完成',number:4560}],
      dateType:'月',  //查询数据条件
      value3: '',
      target: ''    //查询数据条件
    }
  },
  ready(){
    this.houseEntryTate()
    this.completeRate()
  },
  methods:{
    completeRate() {
      let myChart = echarts.init(document.getElementById('completeRate'));
      let percentColor = "#fff"; //百分比颜色
      var innerColor = "#fbcc56"; //黄色
      /*---------------------缩放----------------------------*/
      let scale = 0.5;
      let option = {
        title: [
          {
            text: "完成率",
            x: "45%",
            y: "62%",
            textAlign: "center",
            textStyle: {
              color: "#fff",
              textAlign: "center",
              fontSize: 12 * scale,
              fontWeight: "bold",
            },
          },
        ],
        series: [
          //内圈圆环
          {
            name: "Line 0",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["50%", "55%"],
            radius: ["63%", "70%"],
            data: [
              {
                value: this.securityData[1].number,
                name: "计划安检",
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      colorStops: [
                        // !! 在此添加想要的渐变过程色 !!
                        {offset: 0, color: '#1594E7'},
                        {offset: 1, color: '#072066'}
                      ]
                    }
                  },
                },
                label: {
                  normal: {
                    formatter: "{d}%",
                    position: "center",
                    padding: [0, 0, 10, 0],
                    align: "left",
                    show: true,
                    textStyle: {
                      fontSize: 20 * scale,
                      fontWeight: "bold",
                      color: percentColor,
                    },
                  },
                },
              },
              {
                value: this.securityData[0].number - this.securityData[1].number,
                name: "已安检",
                itemStyle: {
                  normal: {
                    color: "none",
                  },
                },
              },
              {
                //画中间的图标
                name: "",
                value: 35,
                label: {
                  borderRadius: "100%",
                },
                itemStyle: {
                  color: "#ffffff",
                  normal: {
                    color: "#1594E7",
                    borderColor: "#1594E7",
                    borderWidth: 5,
                    borderRadius: '100%'
                  },
                },
                labelLine: {
                  show: false,
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#5886f0",
                  },
                },
              },
              {
                // 解决圆点过大后续部分显示明显的问题
                name: "",
                value: 4,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#5886f0",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#5886f0",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "pie",
            clockWise: true,
            hoverAnimation: false,
            radius: [23, "50%"],
            center: ["50%", "55%"],
            data: [
              {
                name: "aaa",
                value: 60,
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,.1)"
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    houseEntryTate() {
      let myChart = echarts.init(document.getElementById("houseEntryRate"));
      let percentColor = "#fff"; //百分比颜色
      var innerColor = "#fbcc56"; //黄色
      /*---------------------缩放----------------------------*/
      let scale = 0.5;
      let option = {
        title: [
          {
            text: "入户率",
            x: "45%",
            y: "62%",
            textAlign: "center",
            textStyle: {
              color: "#fff",
              textAlign: "center",
              fontSize: 12 * scale,
              fontWeight: "bold",
            },
          },
        ],
        series: [
          //内圈圆环
          {
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["50%", "55%"],
            radius: ["63%", "70%"],
            data: [
              {
                value: this.securityData[2].number,
                name: "计划安检",
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      colorStops: [
                        // !! 在此添加想要的渐变过程色 !!
                        {offset: 0, color: '#35ECAC'},
                        {offset: 1, color: '#072066'}
                      ]
                    }
                  },
                },
                label: {
                  normal: {
                    formatter: "{d}%",
                    position: "center",
                    padding: [0, 0, 10, 0],
                    align: "left",
                    show: true,
                    textStyle: {
                      fontSize: 20 * scale,
                      fontWeight: "bold",
                      color: percentColor,
                    },
                  },
                },
              },
              {
                value: this.securityData[1].number - this.securityData[2].number,
                name: "已安检",
                itemStyle: {
                  normal: {
                    color: "none",
                  },
                },
              },
              {
                //画中间的图标
                name: "",
                value: 35,
                label: {
                  borderRadius: "100%",
                },
                itemStyle: {
                  color: "#ffffff",
                  normal: {
                    color: "#35ECAC",
                    borderColor: "#35ECAC",
                    borderWidth: 5,
                    borderRadius: '100%'
                  },
                },
                labelLine: {
                  show: false,
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#5886f0",
                  },
                },
              },
              {
                // 解决圆点过大后续部分显示明显的问题
                name: "",
                value: 4,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "#5886f0",
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "#5886f0",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "pie",
            clockWise: true,
            hoverAnimation: false,
            radius: [23, "50%"],
            center: ["50%", "55%"],
            data: [
              {
                name: "aaa",
                value: 60,
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,.1)"
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  }
}
</script>
<style lang="less" scoped>
.items{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .item{
    color: white;
    font-size: vw(14);
    height: 23%;
    width: 100%;
    margin-top: 1%;
  }
}
.security-check-content{
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  .content-number{
    color: #87D8FF;
    font-size: 10vw;
    width: 100%;
    height: 40%;
  }
  .content-text{
    font-size: 4vw;
    width: 100%;
    color: white;
    height: 35%;
  }
}
.resident-text{
  font-size: 6vw;
  color: #F4AB41;
  margin-top: 20%;
  margin-left: 20%;
  width: 100%;
  height: 30%;
}
.plan-content{
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  .content-number{
    color: #34E9AB;
    font-size: 10vw;
    width: 100%;
    height: 40%;
  }
  .content-text{
    font-size: 4vw;
    color: white;
    width: 100%;
    height: 35%;
  }
}
</style>
