~admin/zhba_enterprises.git

<template>
  <div class="securityAnalysis">
    <!-- securityAnalysis -->
    <div class="securityAnalysisleft">
      <div class="examine" ref="ech1">
        <!-- 保安员审查情况统计
        <div>饼图</div> -->
      </div>
      <div class="certificate" ref="ech2">
        <!-- 保安员持证情况统计
        <div>饼图</div> -->
      </div>
    </div>
    <div class="securityAnalysiscenter">
      <div class="examination" ref="ech3">
        <!-- 保安员考试情况统计
        <div>堆叠面积图</div> -->
      </div>
      <div class="dispatchUnit" ref="ech4">
        <!-- 派遣服务单位统计
        <div>柱状图</div> -->
      </div>
    </div>
    <div class="securityAnalysisright">
      <div class="dispatchSecurity" ref="ech5">
        <!-- 保安派遣情况统计
        <div>饼图</div> -->
      </div>
      <div class="socialSecurity" ref="ech6">
        <!-- 社保缴纳情况统计
        <div>饼图</div> -->
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getinformationselectExtype, //保安员审查情况统计
  getinformationselectHold, //保安员持证
  getinformationselectDis, //派遣服务单位
  getinformationstatistics, //保安员考试情况统计
  getinformationselectDisp, //保安派遣数量
  getinformationselectSoil, //社保缴纳情况统计
} from "@/api/securityAnalysis/securityAnalysis";
import { lang } from "moment";
export default {
  data() {
    return {
      EC1: "", //保安员审查情况统计 // 饼图
      EC2: "", //保安员持证情况统计 // 饼图
      EC3: "", //保安员考试情况统计 // 堆叠面积图
      EC4: "", //派遣服务单位统计 // 柱状图
      EC5: "", //保安派遣情况统计 // 饼图
      EC6: "", //社保缴纳情况统计 // 饼图
      deptid: "1412222599212257282",
    };
  },
  methods: {
    creatOurEcharts() {
      this.EC1 = echarts.init(this.$refs.ech1);
      this.EC2 = echarts.init(this.$refs.ech2);
      this.EC3 = echarts.init(this.$refs.ech3);
      this.EC4 = echarts.init(this.$refs.ech4);
      this.EC5 = echarts.init(this.$refs.ech5);
      this.EC6 = echarts.init(this.$refs.ech6);
      this.biginOUREC();
    },
    getEC1() {
      var that = this;
      getinformationselectExtype(this.deptid).then((res) => {
        // console.log(res);
        var a = res.data.data[0];
        var d = [
          {
            value: a.bzc,
            name: "未审核",
          },
          {
            value: a.zc,
            name: "已审核",
          },
        ];
 
        that.setEC1(d);
      });
    },
    setEC1(d) {
      var option, data;
      if (d) {
        data = d;
      } else {
        data = [
          { value: 1048, name: "搜索引擎" },
          { value: 735, name: "直接访问" },
          { value: 580, name: "邮件营销" },
          { value: 484, name: "联盟广告" },
          { value: 300, name: "视频广告" },
        ];
      }
      // console.log(data);
      option = {
        title: {
          text: "保安员审查情况统计",
          // subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            // data: data,
            data: [
              { value: 1, name: "在逃人员" },
              { value: 3, name: "吸毒人员" },
              { value: 10, name: "刑释解教人员" },
              { value: 5, name: "社会闲散青少年" },
              { value: 11, name: "艾滋病人" },
              { value: 26, name: "其他人员" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
 
      this.EC1.setOption(option);
    },
    getEC2() {
      var that = this;
      getinformationselectHold(this.deptid).then((res) => {
        var a = res.data.data[0];
        console.log(res);
        var d = [
          {
            value: a.wcz,
            name: "未持证",
          },
          {
            value: a.cz,
            name: "持证",
          },
        ];
 
        that.setEC2(d);
      });
    },
    setEC2(d) {
      var option;
      var option, data;
      if (d) {
        data = d;
      } else {
        data = [
          { value: 1048, name: "搜索引擎" },
          { value: 735, name: "直接访问" },
          { value: 580, name: "邮件营销" },
          { value: 484, name: "联盟广告" },
          { value: 300, name: "视频广告" },
        ];
      }
      // console.log(data);
      option = {
        title: {
          text: "保安员持证情况统计",
          // subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
 
      this.EC2.setOption(option);
    },
    getEC3() {
      var that = this;
      getinformationstatistics(this.deptid).then((res) => {
        var a = res.data.data,
          s = [],
          l = [];
        console.log(a); // 0 :理论 1：实操
        for (var k in a[0]) {
          l.push(a[0][k]);
          s.push(a[1][k]);
        }
        this.setEC3(s, l);
      });
    },
    setEC3(s, l) {
      var xd = [],
        sd = [],
        ld = [];
      for (var i = 0; i < 100; i++) {
        xd.push(i + "分");
      }
      console.log(sd);
      var option = {
        title: {
          text: "保安员考试情况统计",
          left: "center",
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          // formatter(params) {
          //   console.log(params);
          //   var str = "";
          //   for (var x in params) {
          //     str += params[x].axisValue + ":" + params[x].data + "/n";
          //   }
          //   return str;
          // },
          formatter:
            "<span>实操成绩</span>({b0}) :  {c0}<span>人</span><br /><span>理论成绩</span>({b1}) :  {c1}<span>人</span>",
        },
        legend: {
          data: ["实操成绩", "理论成绩"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // data: ["0~60分", "60~80分", "80~90分", "90~100分"],
            data: xd,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "实操成绩",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // data: [1, 2, 3, 1],
            data: [
              1, 0, 0, 0, 3, 2, 1, 0, 4, 0, 5, 0, 4, 0, 0, 9, 7, 0, 2, 0, 5, 0,
              0, 0, 7, 9, 0, 0, 7, 0, 5, 0, 7, 1, 0, 9, 2, 0, 0, 0, 3, 0, 0, 0,
              7, 9, 0, 0, 7, 0, 5, 0, 7, 24, 2, 9, 7, 37, 0, 3, 5, 0, 0, 0, 7,
              9, 1, 0, 7, 0, 5, 4, 2, 0, 0, 9, 7, 35, 0, 0, 3, 0, 0, 12, 7, 9,
              0, 0, 7, 0, 2, 0, 7, 0, 0, 9, 7, 0, 0, 1,
            ],
            // data: s,
          },
          {
            name: "理论成绩",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              4, 0, 5, 0, 7, 3, 2, 9, 7, 1, 0, 3, 5, 0, 9, 7, 0, 2, 0, 0, 7, 0,
              2, 0, 7, 0, 0, 9, 5, 0, 0, 0, 7, 9, 0, 0, 7, 0, 5, 0, 7, 1, 0, 9,
              2, 0, 0, 50, 3, 0, 30, 0, 7, 9, 0, 20, 7, 40, 0, 0, 0, 7, 9, 1, 0,
              7, 0, 5, 4, 2, 0, 0, 9, 7, 35, 0, 0, 3, 0, 0, 12, 7, 9, 0, 7, 0,
              0, 11, 0, 0, 0, 3, 2, 1, 0, 4, 0, 5, 0, 3,
            ],
            // data: l,
          },
        ],
      };
 
      this.EC3.setOption(option);
    },
    getEC4() {
      var that = this;
      getinformationselectDis(this.deptid).then((res) => {
        var a = res.data.data,
          xd = [],
          d = [];
        // console.log(a);
        for (var k in a) {
          xd.push(a[k].name);
          d.push(a[k].num);
        }
        that.setEC4(d, xd);
      });
    },
    setEC4(d, xd) {
      var xxd = [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "一月",
          "二月",
        ],
        dd = [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70];
      var option = {
        title: {
          text: "派遣服务单位统计",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: xxd,
          // data: xd,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            data: dd,
            // data: d,
            type: "bar",
          },
        ],
      };
      this.EC4.setOption(option);
    },
    getEC5() {
      var that = this;
      getinformationselectDisp(this.deptid).then((res) => {
        var a = res.data.data,
          d = [];
        // console.log(a);
        for (var k in a) {
          d.push({
            value: a[k].num,
            name: a[k].real_name,
          });
        }
        that.setEC5(d);
      });
    },
    setEC5(d) {
      var option;
 
      option = {
        title: {
          text: "保安派遣情况统计",
          // subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            // data: d,
            data: [
              {
                value: 4,
                name: "未派遣",
              },
              {
                value: 3,
                name: "已派遣",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
 
      this.EC5.setOption(option);
    },
    getEC6() {
      var that = this;
      getinformationselectSoil(this.deptid).then((res) => {
        var a = res.data.data[0];
        // console.log(a);
        var d = [
          {
            value: a.nmuwj,
            name: "未缴纳社保",
          },
          {
            value: a.numj,
            name: "已缴纳社保",
          },
        ];
 
        that.setEC6(d);
      });
    },
    setEC6(d) {
      var option;
 
      option = {
        title: {
          text: "社保缴纳情况统计",
          // subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            data: d,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
 
      this.EC6.setOption(option);
    },
    biginOUREC() {
      this.getEC1();
      this.getEC2();
      this.getEC3();
      this.getEC4();
      this.getEC5();
      this.getEC6();
      // this.setEC1();
      // this.setEC2();
      // this.setEC3();
      // this.setEC4();
      // this.setEC5();
      // this.setEC6();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.creatOurEcharts();
    });
    // console.log(echarts);
  },
};
</script>
 
<style lang="scss">
$widths: 30%;
.securityAnalysis {
  width: 100%;
  height: 100%;
  // border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  .securityAnalysisleft,
  .securityAnalysiscenter,
  .securityAnalysisright {
    // border: 1px solid #000;
    width: 30%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }
  .securityAnalysiscenter {
    width: 40% !important;
  }
  .examine,
  .certificate,
  .examination,
  .dispatchUnit,
  .dispatchSecurity,
  .socialSecurity {
    width: 100%;
    height: 49%;
    // border: 1px solid #000;
    box-sizing: border-box;
    background-color: #fff;
  }
  // .securityAnalysisleft {
  //   width: $widths;
  // }
  // .securityAnalysiscenter {
  //   width: $widths;
  // }
  // .securityAnalysisright {
  //   width: $widths;
  // }
}
</style>