From cc1c0a396698648256c350f6f0fe2cb2f0b02c7e Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Wed, 27 Mar 2024 15:44:10 +0800
Subject: [PATCH] 许可按钮放出，备案审批按钮放出
---
src/views/home/indexEchart.js | 652 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 427 insertions(+), 225 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 169adaa..cd3f3d0 100644
--- a/src/views/home/indexEchart.js
+++ b/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
};
--
Gitblit v1.9.3