<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-09 17:55:24
 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="first-wrapper flex">
    <Title text="人员配比" />
    <div class="two">
      <Chars :options="options" />
      <div class="allNum flex">
        <div class="num">137</div>
        <div class="text">人数</div>
      </div>
    </div>
  </div>
</template>

<script>
let arr = [
  { value: 1048, name: "管理人员" },
  { value: 735, name: "值班人员" },
  { value: 580, name: "巡检人员" },
  { value: 484, name: "维修人员" },
  { value: 300, name: "包养人员" },
  { value: 300, name: "应急抢救人员" },
];
import Title from "@/views/indexComponents/allComponents/Title";
import Chars from "@/components/allCharsCom/Chars";
export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  data() {
    return {
      options: {
        // tooltip: {
        //   trigger: 'item'
        // },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "2%",
          top: 0,
          bottom: 0,
          textStyle: {
            color: "#ffffff",
            fontSize: 11,
          },
          icon: "diamond",
          formatter: (name) => {
            // 第一个空格
            let kg1 = "";
            if (name.length == 6) {
              for (let i = 0; i < 8; i++) {
                kg1 += " ";
              }
            } else {
              for (let i = 0; i < 14; i++) {
                kg1 += " ";
              }
            }
            let obj = arr.filter((item) => {
              return name == item.name;
            })[0];
            var total = arr.reduce((a, b) => {
              const value1 = b.value;
              return a + b.value;
            }, 0);
            //第二个空格
            let kg2 = "";
            for (let i = 0; i < 15; i++) {
              kg2 += " ";
            }
            const length = (obj.value + "").length;
            kg2 = kg2.slice(length);
            console.log();
            return (
              name +
              kg1 +
              obj.value +
              kg2 +
              Math.round((obj.value / total) * 100) +
              "%"
            );
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "75%"],
            center: ["20%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              emphasis: {
                formatter: "{b}\n{c}\n({d}%)",
                show: false,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 0,
              borderRadius: 20,
            },
            labelLine: {
              show: false,
            },
            data: arr,
          },
        ],
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.first-wrapper {
  width: 100%;
  height: 28.14%;
  // background: blue;
  flex-direction: column;
  > div {
    // width: 100%;
  }
  .two {
    flex: 1;
    position: relative;
    // background: wheat;
    .allNum {
      position: absolute;
      width: 40%;
      height: 100%;
      // background: rgba(255, 255, 1, 0.2);
      top: 0;
      flex-direction: column;
      justify-content: center;
      div {
        width: 100%;
        text-align: center;
        &.text {
          font-size: 20px;
          font-weight: 400;
          color: #cfcdcd;
        }
        &.num {
          font-size: 32px;
          color: #ffffff;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
