许可按钮放出，备案审批按钮放出

zhongrj

2024-03-27 cc1c0a396698648256c350f6f0fe2cb2f0b02c7e

 src/views/securityUnitOperation/securityEchart.js

@@ -1,9 +1,52 @@
function bottomOption(data) {
function bottomOption(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i]);
  }
  let option = {
    title: {
      text: "公司运营趋势",
    // title: {
    //   text: "公司运营趋势",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "0%",
      containLabel: true
    },
    legend: {
      data: ["服务客户数量"],
      top: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    xAxis: {
@@ -35,7 +78,8 @@
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320, 132, 1111, 321, 342, 134],
        name: "服务对象数量",
        data: data,
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -44,16 +88,158 @@
  };
  return option;
}
function middleOption1(data) {
function bottomOption1(alldata) {
  let baoan = [];
  let chiz = [];
  let paiq = [];
  alldata.forEach(item => {
    for (var i in item) {
      for (var j in item[i]) {
        if (i === "baoan") {
          baoan.push(item[i][j]);
        } else if (i === "chiz") {
          chiz.push(item[i][j]);
        } else if (i === "paiq") {
          paiq.push(item[i][j]);
        }
      }
    }
  });
  let option = {
    title: {
      text: "公司保安类数据对比",
    // title: {
    //   text: "公司运营趋势",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",
      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "0%",
      containLabel: true
    },
    legend: {
      data: ["保安员数量", "派遣数量", "持证数量"],
      top: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "axis"
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      boundaryGap: false,
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    },
    yAxis: {
      // name: "（元）",
      type: "value",
      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "保安员数量",
        type: "line",
        stack: "总量",
        data: baoan
      },
      {
        name: "派遣数量",
        type: "line",
        stack: "总量",
        data: paiq
      },
      {
        name: "持证数量",
        type: "line",
        stack: "总量",
        data: chiz
      }
    ]
  };
  return option;
}
function middleOption1(alldata) {
  let baoan = [];
  let zc = [];
  let chiz = [];
  let sheb = [];
  let paiq = [];
  alldata.forEach(item => {
    for (var i in item) {
      for (var j in item[i]) {
        if (i === "baoan") {
          baoan.push(item[i][j]);
        } else if (i === "zc") {
          zc.push(item[i][j]);
        } else if (i === "chiz") {
          chiz.push(item[i][j]);
        } else if (i === "sheb") {
          sheb.push(item[i][j]);
        } else if (i === "paiq") {
          paiq.push(item[i][j]);
        }
      }
    }
  });
  let option = {
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      data: [
@@ -62,15 +248,311 @@
        "持证保安数",
        "过考保安数",
        "缴纳社保保安数",
        "缴纳社保数"
        "保安派遣"
      ],
      bottom: "2%",
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "3%",
      right: "2%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLabel: {
        color: "#fff"
      },
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "总保安数",
        type: "bar",
        barWidth: 9,
        data: baoan
      },
      {
        name: "正常保安数",
        type: "bar",
        barWidth: 9,
        data: zc
      },
      {
        name: "持证保安数",
        type: "bar",
        barWidth: 9,
        data: chiz
      },
      // {
      //   name: "过考保安数",
      //   type: "bar",
      //   barWidth: 9,
      //   data: []
      // },
      {
        name: "缴纳社保保安数",
        type: "bar",
        barWidth: 9,
        data: sheb
      },
      {
        name: "保安派遣",
        type: "bar",
        barWidth: 9,
        data: paiq
      }
    ]
  };
  return option;
}
function middleOption2(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i]);
  }
  let option = {
    // title: {
    //   text: "服务客户",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      data: ["客户数"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "10%",
      right: "2%",
      bottom: "25%",
      containLabel: false
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLabel: {
        color: "#fff",
        interval: 0,
        rotate: 40
      },
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    },
    yAxis: {
      type: "value",

      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "客户数",
        type: "bar",
        data: data
      }
    ]
  };
  return option;
}
function bottomOption2(alldata) {
  let data = [];
  let qcount = alldata["qcount"] || 0;
  data.push({ name: "青年", value: qcount });
  let zcount = alldata["zcount"] || 0;
  data.push({ name: "中年", value: zcount });
  let lcount = alldata["lcount"] || 0;
  data.push({ name: "老年", value: lcount });

  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    // legend: {
    //   data: ["青年", "中年", "老年"],
    //   top: "0%",
    //   itemHeight: 10,
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",
      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "5%",
      right: "30%",
      bottom: "4%",
      containLabel: true
    },
    series: [
      {
        name: "年龄结构",
        type: "pie",
        center: ["33%", "50%"],
        radius: "70%",
        data: data,
        label: {
          color: "#fff"
        }
      }
    ]
  };
  return option;
}

function economicMiddle(data1, data2) {
  let sbData = [];
  let pqData = [];
  for (var a in data1) {
    sbData.push(data1[a]);
  }
  for (var b in data2) {
    pqData.push(data2[b]);
  }
  let option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      data: ["缴纳社保人数", "公司派遣人数"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true
@@ -104,104 +586,92 @@
    },
    series: [
      {
        name: "总保安数",
        name: "缴纳社保人数",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
        data: sbData
      },
      {
        name: "正常保安数",
        name: "公司派遣人数",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
      },
      {
        name: "持证保安数",
        type: "line",
        stack: "总量",
        data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
      },
      {
        name: "过考保安数",
        type: "line",
        stack: "总量",
        data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
      },
      {
        name: "缴纳社保保安数",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
      },
      {
        name: "缴纳社保数",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
        data: pqData
      }
    ]
  };
  return option;
}
function middleOption2(data) {
function economicPieOption(allData) {
  let title = "总";
  let total = Number(allData.PCount) + Number(allData.WPCount);
  let option = {
    title: {
      text: "服务客户",
      textStyle: {
        color: "#fff"
    title: [
      {
        text: "{name|" + title + "}\n{val|" + total + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#fff",
              padding: [10, 0]
            },
            val: {
              fontSize: 20,
              fontWeight: "bold",
              color: "#fff"
            }
          }
        }
      }
    },
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      trigger: "item",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      data: ["客户数"],
      bottom: "5%",
      bottom: "0%",
      right: "5%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "7%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: "#fff"
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
      orient: "vertical"
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: "2011年",
        type: "bar",
        data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
        name: "人员分布",
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff"
        },
        data: [
          { value: allData.PCount, name: "已派遣人数" },
          { value: allData.WPCount, name: "未派遣人数" }
        ]
      }
    ]
  };
@@ -210,6 +680,10 @@

export default {
  bottomOption,
  bottomOption1,
  middleOption1,
  middleOption2
  middleOption2,
  economicMiddle,
  economicPieOption,
  bottomOption2
};