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

zhongrj

2024-03-27 cc1c0a396698648256c350f6f0fe2cb2f0b02c7e

 src/views/home/indexEchart.js

@@ -1,28 +1,46 @@
import * as echarts from "echarts";
import nc from "../../../public/nc.json";
function left1Data(allData) {
  let nameArr = [];
  let data1 = [];
  let data2 = [];
  let data3 = [];
  let data4 = [];
  let data5 = [];
  // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
  allData.forEach(item => {
    nameArr.push(item.name);
    data1.push(item.server.confess);
    data2.push(item.server.staff);
    data3.push(item.server.security);
    data4.push(item.server.armed);
    data1.push(item.server.confess || 0);
    data2.push(item.server.staff || 0);
    data3.push(item.server.security || 0);
    data4.push(item.server.armed || 0);
    data5.push(item.server.region || 0);
  });
  nameArr.reverse();
  data1.reverse();
  data2.reverse();
  data3.reverse();
  data4.reverse();
  data5.reverse();
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    color: [
      '#2ec7c9',
      '#b6a2de',
      '#5ab1ef',
      '#ffb980',
      "#2ec7c9",
      "#b6a2de",
      "#5ab1ef",
      "#ffb980",

      // "#fac858",
      // "#73c0de",
@@ -31,24 +49,27 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    legend: {
      data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
      bottom: "1%",
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
    },
    // legend: {
    //   data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
    //   bottom: "1%",
    //   itemWidth: 20,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   // formatter: function (legend1) {
    //   //   return legend1;
    //   // }
    // },
    grid: {
      top:'5%',
      top: "5%",
      left: "5%",
      right: "6%",
      bottom: "10%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    xAxis: {
@@ -75,14 +96,14 @@
        name: "自招保安单位",
        type: "bar",
        stack: "total",
        barWidth: 20,
        barWidth: 17,
        emphasis: {
          focus: "series"
        },
        data: data1
      },
      {
        name: "保安培训公司",
        name: "保安培训学校",
        type: "bar",
        stack: "total",
        emphasis: {
@@ -91,7 +112,7 @@
        data: data2
      },
      {
        name: "保安服务公司",
        name: "本市保安公司",
        type: "bar",
        stack: "total",
        emphasis: {
@@ -107,6 +128,15 @@
          focus: "series"
        },
        data: data4
      },
      {
        name: "分公司",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data5
      }
    ]
  };
@@ -126,6 +156,13 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    color: [
@@ -137,27 +174,36 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    legend: {
      data: ["持证人数", "未持证人数"],
      bottom: "1%",
      left: "13%",
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      top:'5%',
      top: "10%",
      left: "5%",
      right: "6%",
      bottom: "15%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: 40
      },
      data: nameArr
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -170,19 +216,12 @@
        show: false
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      data: nameArr
    },
    series: [
      {
        name: "持证人数",
        type: "bar",
        // barWidth:30,
        barWidth: 20,
        barWidth: 15,
        stack: "total",
        emphasis: {
          focus: "series"
@@ -197,6 +236,62 @@
          focus: "series"
        },
        data: data2
      }
    ]
  };
  return option;
}

function left3Data(allData) {
  let data = [
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" }
  ];
  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" //设置文字颜色
      }
    },
    color: ["#008DEC", "#886EFF"],
    // legend: {
    //   right: "8%",
    //   bottom: "10%",
    //   itemHeight: 10,
    //   show: true,
    //   selectedMode: false,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   data: ['男', '女'],
    //   orient: "vertical"
    // },
    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"
        }
      }
    ]
  };
@@ -238,10 +333,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -303,10 +398,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -356,129 +451,47 @@
}

function right3Data(allData) {
  let data = [
    {
      name: "新建县",
      value: 154
    },
    {
      name: "安义县",
      value: 611
    },
    {
      name: "红谷滩新区",
      value: 400
    },
    {
      name: "西湖区",
      value: 200
    },
    {
      name: "东湖区",
      value: 250
    },
    {
      name: "经开区",
      value: 281
    },
    {
      name: "青云谱区",
      value: 320
    },
    {
      name: "高新区",
      value: 231
    },
    {
      name: "湾里区",
      value: 210
    },
    {
      name: "进贤县",
      value: 187
    },
    {
      name: "青山湖区",
      value: 190
    }
  ];
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  let sumValue = 1000;
  // let objData = array2obj(data, "name");
  let optionData = getData(data);

  function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
      array.forEach(function(t) {
        res.push(t[key]);
      });
    }
    return res;
  }

  function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }
    return resObj;
  }

  function getData(data) {
    var res = {
      series: [],
      yAxis: []
  let data = [];
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count;
  });
  datas.forEach(item => {
    let obj = {
      name: item.jurname,
      value: item.Count
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: "分局预警占比",
        type: "pie",
        clockWise: true,
        z: 2,
        hoverAnimation: false,
        radius: [90 - i * 8 + "%", 85 - i * 8 + "%"],
        center: ["30%", "50%"],
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name
          },
          {
            value: sumValue - data[i].value,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            hoverAnimation: false
          }
        ]
      });
      res.yAxis.push(data[i].name);
    }
    return res;
  }

    legendData.push(item.jurname);
    // sumValue += Number(item.Count)
    data.push(obj);
  });
  let option = {
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)"
      formatter: "{a}<br>{b}:{c}({d}%)",
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      type: "scroll",
      right: "5%",
      top: "5%",
      itemHeight: 10,
      show: true,
      itemGap: 8,
      selectedMode: false,
      textStyle: {
        color: "#fff",
        fontSize: 9
      },
      data: legendData,
      orient: "vertical"
    },
    color: [
      "#91cc75",
@@ -489,79 +502,268 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: "分局预警占比",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["35%", "55%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: "12",
        //     fontWeight: "bold"
        //   }
        // },
        labelLine: {
          show: false
        },
        data: data
      }
      // {
      //     name: '面积模式',
      //     type: 'pie',
      //     radius: [20, 140],
      //     center: ['75%', '50%'],
      //     roseType: 'area',
      //     itemStyle: {
      //         borderRadius: 5
      //     },
      //     data: [
      //         {value: 30, name: 'rose 1'},
      //         {value: 28, name: 'rose 2'},
      //         {value: 26, name: 'rose 3'},
      //         {value: 24, name: 'rose 4'},
      //         {value: 22, name: 'rose 5'},
      //         {value: 20, name: 'rose 6'},
      //         {value: 18, name: 'rose 7'},
      //         {value: 16, name: 'rose 8'}
      //     ]
      // }
    ]
  };
  return option;
}
function middleData(allData, type) {
  var ncMap = nc;
  // var convertData = function (allData) {
  //   var res = [];
  //   for (var i = 0; i < data.length; i++) {
  //     var geoCoord = geoCoordMap[data[i].name];
  //     if (geoCoord) {
  //       res.push({
  //         name: data[i].name,
  //         value: geoCoord.concat(data[i].value)
  //       });
  //     }
  //   }
  //   return res;
  // };
  let name = "";
  let label = "";
  let symbolUrl = "";
  let geoData = [];
  allData["table"].forEach((item, i) => {
    let obj = {};
    if (type === 1) {
      name = "保安员名称";
      label =
        "押运人员：" +
        item.realName +
        "<br />联系地址：" +
        item.address +
        "<br />所属公司：" +
        item.deptName +
        "<br />联系电话：" +
        item.phone;
      symbolUrl = require("@/assets/img/people.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 2) {
      name = "押运车辆";
      label =
        "押运车辆型号：" +
        item.mode +
        "<br />责任人：" +
        item.personInCharge +
        "<br />出厂日期：" +
        item.dateForProduction +
        "<br />厂商：" +
        item.detailObj;
      symbolUrl = require("@/assets/img/car.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 3) {
      name = "枪支";
      label =
        "枪支类型：" +
        item.gunMode +
        "<br />责任人：" +
        item.personInCharge +
        "<br />发证日期：" +
        item.issueTime +
        "<br />有效日期：" +
        item.validTime +
        "<br />发证单位：" +
        item.issueUnit +
        "<br />用枪编号：" +
        item.cardNumber;
      symbolUrl = require("@/assets/img/gun.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    }
    geoData.push(obj);
  });

    legend: {
      right: "2%",
      top: "3%",
      //   icon: "circle",
      itemHeight: 10,
      show: true,
      data: [
        "新建县",
        "安义县",
        "红谷滩新区",
        "西湖区",
        "东湖区",
        "经开区",
        "青云谱区",
        "高新区",
        "湾里区",
        "进贤县",
        "青山湖区"
      ],
      selectedMode: false,
      textStyle: {
        color: "#fff"
  echarts.registerMap("ncMap", ncMap);
  // echarts.registerMap('chinaMapOutline', chinaMapOutline);
  let option = {
    // backgroundColor: '#181F4E',
    // tooltip: {
    //   trigger: 'item',
    // },
    tooltip: {
      trigger: "item",
      formatter: function(params) {
        if (typeof params.value[1] == "undefined") {
          return params.name;
        } else {
          return params.name;
        }
      },
      orient: "vertical"
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      borderColor: "gray", //设置边框颜色
      extraCssText: "box-shadow: 0 0 3px rgba(   211,211,211, 0.5);",
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    grid: {
      top: "5%",
      bottom: "50%",
      left: "30%",
      containLabel: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        z: 3,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          inside: false,
    geo: {
      // silent: true,
      map: "ncMap",
      show: true,
      zoom: 1.04,
      top: "8%",
      label: {
        show: false,
        color: "#fff",
        emphasis: {
          textStyle: {
            color: "#fff",
            fontSize: 8
          },
          show: true
        },
        data: optionData.yAxis
            color: "#fff"
          }
        }
      },

      roam: true,
      itemStyle: {
        areaColor: "rgba(0,255,255,.02)",
        borderColor: "#00ffff",
        borderWidth: 1.5,
        shadowColor: "#00ffff",
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          color: "transparent", //悬浮背景
          textStyle: {
            color: "#fff"
          }
        }
      }
    ],
    xAxis: [
    },
    series: [
      {
        show: false
        map: "ncMap",
        // silent: true,
        type: "map",
        geoIndex: 0,
        // aspectScale: 0.75, //长宽比
        zoom: 1.14,
        label: {
          show: false,
          color: "#fff"
        },
        emphasis: {
          label: {
            color: "#fff"
          }
        },
        top: "10%",
        roam: true,
        itemStyle: {
          areaColor: "rgba(0,255,255,.02)",
          borderColor: "#00ffff",
          borderWidth: 1.5,
          shadowColor: "#00ffff",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: "transparent", //悬浮背景
            textStyle: {
              color: "#fff"
            }
          }
        }
      },
      {
        name: name,
        type: "scatter",
        coordinateSystem: "geo",
        // roam: false,
        symbol: "image://" + symbolUrl,
        symbolSize: [30, 30],
        label: {
          show: false,
          color: "#fff",
          fontSize: 9
        },
        itemStyle: {
          color: "#FF0000" //标志颜色
        },
        data: geoData,
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        emphasis: {
          scale: true
        },
        zlevel: 1
      }
    ],
    series: optionData.series
    ]
  };
  return option;
}
export default {
  left1Data,
  left2Data,
  left3Data,
  right1Data,
  right2Data,
  right3Data
  right3Data,
  middleData
};