智能分析查询明细样式调整

Administrator

2022-01-04 0e4d44c2f5a7511d2eee72deecb76b5ba67358cd

 src/views/securityAnalysis/index.vue

@@ -40,7 +40,7 @@
    </div>
    <div class="securityAnalysisright">
      <div class="dispatchSecurity" ref="ech5">
        <!-- 保安派遣情况统计
        <!-- 保安员年龄分布情况统计
        <div>饼图</div> -->
      </div>
      <div class="socialSecurity" ref="ech6">
@@ -50,11 +50,13 @@
    </div>
    <div>
      <el-dialog
        width="90%"
        width="80%"
        :title="titles"
        append-to-body
        :visible.sync="dialogVisible"
        top="9vh"
        lock-scroll="false"
        top="1vh"
        center
      >
        <situation
          :card="{ deptId: deptid, jurisdiction: jurisdiction }"
@@ -105,8 +107,11 @@
  getinformationselectHold, //保安员持证
  getinformationselectDis, //派遣服务单位
  getinformationstatistics, //保安员考试情况统计
  getExamStatisInfo, //保安员考试情况统计
  getinformationselectDisp, //保安派遣情况
  getAgeStatistics, //保安员年龄分布情况
  getinformationselectSoil, //社保缴纳情况统计
  getEducationStatistics
} from "@/api/securityAnalysis/securityAnalysis";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";
@@ -143,7 +148,7 @@

      // czdata: [],
      sees: "",
      colors: ["#91CC75", "#FF3106"], //[正常，异常]；
      colors: ["#29C093", "#F34A4A"], //[正常，异常]；
    };
  },
  computed: {
@@ -257,7 +262,10 @@
          myTool1: {
            show: true,
            title: "",
            icon: "image://img/table.png",
            // icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
            // icon: "image://http://echarts.baidu.com/images/favicon.png",
            icon: "image://http://223.82.109.183:2080/img/table.png",
            // icon: "M271.68 304.64h472a32 32 0 1 0 0-64h-472a32 32 0 0 0 0 64z m0 234.88h408.64a32 32 0 0 0 0-64H271.68a32 32 0 1 0 0 64z m0 198.4h376.64a32 32 0 1 0 0-64H271.68a32 32 0 0 0 0 64z",
            onclick: function () {
              that.dialogVisible = true;
              that.sees = id;
@@ -479,33 +487,183 @@

      this.EC2.setOption(option);
    },
    //备份误删
    // getEC3() {
    //   var that = this;
    //   getinformationstatistics(this.deptid, this.jurisdiction).then((res) => {
    //     var a = res.data.data;
    //     // console.log(a, 22222222222222222222);
    //     // 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]);
    //     // }
    //     var l = a.llcj;
    //     var s = a.sccj;
    //     this.setEC3(s, l);
    //   });
    // },
    //后改
    getEC3() {
      var that = this;
      getinformationstatistics(this.deptid, this.jurisdiction).then((res) => {
        var a = res.data.data;
        // console.log(a, 22222222222222222222);
        // 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]);
        // }
        var l = a.llcj;
        var s = a.sccj;
        this.setEC3(s, l);
      getExamStatisInfo(this.deptid, this.jurisdiction).then((res) => {
        this.setEC3(res.data.data);
      });
    },
    setEC3(s, l) {
      var xd = [],
        sd = [],
        ld = [],
        that = this;
      for (var i = 0; i <= 100; i++) {
        xd.push(i + "分");
      }
      // console.log(sd);
    //备份，误删
    // setEC3(s, l) {
    //   var xd = [],
    //     sd = [],
    //     ld = [],
    //     that = this;
    //   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>",
    //     },
    //     toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
    //     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);
    // },
    //后改，考试数据统计
    setEC3(data) {
      //获取年份
      // let year = new Date().getFullYear();
      // var timeData = [];
      // for (let index = 1; index < 13; index++) {
      //   timeData.push(year+"-"+ index );
      // }
      const seriesdata = [];
      data.forEach((item) => {
        if (item.type == 1) {
          seriesdata.push({
            name: item.name + "-合格人数",
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series",
            },
            data: item.examSocreStatis,
          });
        }
        if (item.type == 2) {
          seriesdata.push({
            name: item.name + "-不合格人数",
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series",
            },
            data: item.examSocreStatis,
          });
        }
      });
      var datetime = [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ]
      //echarts 图表数据
      var option = {
        title: {
          text: "保安员考试情况统计",
@@ -515,43 +673,28 @@
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
            type: "shadow",
          },
          // 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>",
        },
        color: ["#91CD76", "#EF6667"],
        legend: {
          data: ["a", "b"],
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
        },
        toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
        legend: {
          data: ["实操成绩", "理论成绩"],
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: "3%",
          right: "5%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // data: ["0~60分", "60~80分", "80~90分", "90~100分"],
            data: xd,
            data: datetime
          },
        ],
        yAxis: [
@@ -559,43 +702,7 @@
            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,
          },
        ],
        series: seriesdata,
      };

      this.EC3.setOption(option);
@@ -684,7 +791,6 @@
        },
        series: [
          {
            // data: dd,
            data: data,
            type: "bar",
          },
@@ -694,24 +800,33 @@
    },
    getEC5() {
      var that = this;
      getinformationselectDisp(this.deptid, this.jurisdiction)
      getAgeStatistics(this.deptid, this.jurisdiction)
        .then((res) => {
          var a = res.data.data;
          // console.log(a, "111111");
          var b = that.changedata(a, "pnum", "wpnum", "已派遣", "未派遣");
          that.setEC5(b);
        })
        .catch((res) => {
          var b = that.changedata([], "pnum", "wpnum", "已派遣", "未派遣");
          that.setEC5(b);
          var data = res.data.data;
          var a = [
            {
              value:data[0],
              name:"18-30周岁"
            },
            {
              value:data[1],
              name:"30-45周岁"
            },
            {
              value:data[2],
              name:"45-60周岁"
            },
          ]
          console.log(a, "111111");
          this.setEC5(a);
        });
    },
    setEC5(d) {
      var option;
      d = this.setColor(d, this.colors);
      // d = this.setColor(d, this.colors);
      option = {
        title: {
          text: "保安派遣情况统计",
          text: "保安员年龄分布情况统计",
          // subtext: "纯属虚构",
          top: 25,
          left: "center",
@@ -719,19 +834,15 @@
        tooltip: {
          trigger: "item",
        },
        toolbox: this.gettoolbox("派遣情况查询", "保安员派遣情况明细", 5),
        toolbox: this.gettoolbox("保安员年龄分布情况查询", "保安员年龄分布情况明细", 5),
        legend: {
          // orient: "vertical",
          // left: "left",
          x: "center",
          y: "90%",
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            // data: d,
            data: d,
            emphasis: {
              itemStyle: {
@@ -741,7 +852,6 @@
              },
            },
            label: {
              // alignTo: "edge",
              formatter: "{b}\n({d}%)",
            },
          },
@@ -752,43 +862,25 @@
    },
    getEC6() {
      var that = this;
      getinformationselectSoil(this.deptid, this.jurisdiction)
      getEducationStatistics(this.deptid, this.jurisdiction)
        .then((res) => {
          var a = res.data.data;
          var b = that.changedata(
            a,
            "numj",
            "nmuwj",
            "已缴纳社保",
            "未缴纳社保"
          );
          that.setEC6(b);
        })
        .catch((res) => {
          var b = that.changedata(
            [],
            "numj",
            "nmuwj",
            "已缴纳社保",
            "未缴纳社保"
          );
          that.setEC6(b);
          that.setEC6(a);
        });
    },
    setEC6(d) {
      var option;
      d = this.setColor(d, this.colors);
      // d = this.setColor(d, this.colors);
      option = {
        title: {
          text: "社保缴纳情况统计",
          // subtext: "纯属虚构",
          text: "保安员学历分布情况统计",
          top: 25,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: this.gettoolbox("社保缴纳查询", "保安员社保缴纳明细", 6),
        toolbox: this.gettoolbox("保安员学历分布情况查询", "保安员学历分布情况明细", 6),
        legend: {
          // orient: "vertical",
          // left: "left",