From 2c461eb9efb980d55dfd7407ee70088fc90a4a7a Mon Sep 17 00:00:00 2001
From: 钟日健 <5689795+arsn@user.noreply.gitee.com>
Date: Tue, 08 Feb 2022 14:24:31 +0800
Subject: [PATCH] 保安员详情修改
---
src/views/securityAnalysis/index.vue | 487 +++++++++++++++++++++++++++---------------------------
1 files changed, 243 insertions(+), 244 deletions(-)
diff --git a/src/views/securityAnalysis/index.vue b/src/views/securityAnalysis/index.vue
index 9c4aa45..e6b3b88 100644
--- a/src/views/securityAnalysis/index.vue
+++ b/src/views/securityAnalysis/index.vue
@@ -2,26 +2,23 @@
<div class="securityAnalysis">
<!-- securityAnalysis -->
<div class="securityAnalysisleft">
- <!-- <div class="examines"> -->
- <!-- <div class="examine" ref="ech1"></div> -->
- <!-- <div class="examine1"> -->
- <!-- <div>审查时间：</div>
- <div>审查时间：</div>
- <div>问题保安员人数：</div>
- <div>问题保安员人数：</div>
- <div>问题保安员比例：</div>
- <div>问题保安员比例：</div> -->
- <!-- <div v-for="(item, index) in examine1" :key="index">
- {{ item.title }}<br />{{ item.value }}
- </div>
- </div> -->
<!-- 保安员审查情况统计
<div>饼图</div> -->
<!-- </div> -->
- <div class="examines" ref="ech1">
+
+ <div class="examinesBtn" v-if="examineBtnVisiable">
+ <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" size="small" @change="handleClick">
+ <el-radio-button label="1">保安员审查情况统计</el-radio-button>
+ <el-radio-button label="2">企业登录预警情况统计</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div id="ech1" class="examines" ref="ech1" style="visibility:visible;z-index:666">
+ </div>
+ <div id="ech1s" class="examiness" ref="ech1s" style="visibility:hidden;z-index:333">
+ </div>
<!-- 保安员审查情况统计
<div>饼图</div> -->
- </div>
+
<div class="certificate" ref="ech2">
<!-- 保安员持证情况统计
<div>饼图</div> -->
@@ -40,7 +37,7 @@
</div>
<div class="securityAnalysisright">
<div class="dispatchSecurity" ref="ech5">
- <!-- 保安派遣情况统计
+ <!-- 保安员年龄分布情况统计
<div>饼图</div> -->
</div>
<div class="socialSecurity" ref="ech6">
@@ -50,11 +47,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 }"
@@ -62,6 +61,13 @@
>
<!-- 保安员审查情况统计 -->
</situation>
+
+ <loginRecord
+ :card="{ jurisdiction: jurisdiction }"
+ v-if="sees == 7"
+ >
+ <!-- 保安员审查情况统计 -->
+ </loginRecord>
<certificate
:card="{ deptId: deptid, jurisdiction: jurisdiction }"
@@ -98,21 +104,25 @@
</div>
</div>
</template>
-
<script>
import {
getinformationselectExtype, //保安员审查情况统计
getinformationselectHold, //保安员持证
getinformationselectDis, //派遣服务单位
getinformationstatistics, //保安员考试情况统计
+ getExamStatisInfo, //保安员考试情况统计
getinformationselectDisp, //保安派遣情况
+ getAgeStatistics, //保安员年龄分布情况
getinformationselectSoil, //社保缴纳情况统计
+ getEducationStatistics,
+ getLoginDataStatistics
} from "@/api/securityAnalysis/securityAnalysis";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";
import certificate from "./child/certificate.vue";
import examination from "./child/examination.vue";
import situation from "./child/situation.vue";
+import loginRecord from "./child/loginRecord.vue";
import dispatch from "./child/dispatch.vue";
import assignment from "./child/assignment.vue";
import socialSecurity from "./child/socialSecurity.vue";
@@ -124,26 +134,28 @@
dispatch,
assignment,
socialSecurity,
+ loginRecord
},
data() {
return {
EC1: "", //保安员审查情况统计 // 饼图
+ EC1s: "", //登录预警统计 // 饼图
EC2: "", //保安员持证情况统计 // 饼图
EC3: "", //保安员考试情况统计 // 堆叠面积图
EC4: "", //派遣服务单位统计 // 柱状图
EC5: "", //保安派遣情况统计 // 饼图
EC6: "", //社保缴纳情况统计 // 饼图
deptid: "",
+ oneVisiable:true,
+ examineBtnVisiable:true,
jurisdiction: "",
-
+ tabPosition: 1,
+ examinetionTitle:"保安员审查情况统计",
examine1: [],
-
dialogVisible: false,
titles: "",
-
- // czdata: [],
sees: "",
- colors: ["#91CC75", "#FF3106"], //[正常，异常]；
+ colors: ["#29C093", "#F34A4A"], //[正常，异常]；
};
},
computed: {
@@ -168,7 +180,7 @@
watch: {
dialogVisible() {
if (this.dialogVisible == false && this.sees == "1") {
- this.getEC1();
+ this.getEC1(this.tabPosition);
}
if (this.dialogVisible == false && this.sees == "2") {
this.getEC2();
@@ -188,8 +200,21 @@
},
},
methods: {
+ //tab 切换
+ handleClick(val){
+ if(val==1){
+ document.getElementById("ech1").style.visibility = "visible";
+ document.getElementById("ech1s").style.visibility = "hidden";
+ }else{
+ document.getElementById("ech1").style.visibility = "hidden";
+ document.getElementById("ech1s").style.visibility = "visible";
+ }
+ this.tabPosition = val;
+ this.getEC1(val);
+ },
creatOurEcharts() {
this.EC1 = echarts.init(this.$refs.ech1);
+ this.EC1s = echarts.init(this.$refs.ech1s);
this.EC2 = echarts.init(this.$refs.ech2);
this.EC3 = echarts.init(this.$refs.ech3);
this.EC4 = echarts.init(this.$refs.ech4);
@@ -256,8 +281,8 @@
feature: {
myTool1: {
show: true,
- title: "",
- icon: "image://img/table.png",
+ title: "点击查看详情",
+ icon: "image://http://223.82.109.183:2080/img/table.png",
onclick: function () {
that.dialogVisible = true;
that.sees = id;
@@ -277,9 +302,10 @@
console.log(d);
return d;
},
- getEC1() {
+ getEC1(tab) {
var that = this;
- getinformationselectExtype(this.deptid, this.jurisdiction)
+ if(tab==1){
+ getinformationselectExtype(this.deptid, this.jurisdiction)
.then((res) => {
var a = res.data.data;
var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
@@ -289,9 +315,25 @@
var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
that.setEC1(b);
});
+ }
+ if(tab==2){
+ getLoginDataStatistics(this.jurisdiction).then((res)=>{
+ var b = res.data.data;
+ var data = [
+ {
+ value:b[0],
+ name:"近14天登录企业数"
+ },
+ {
+ value:b[1],
+ name:"近14天未登录企业数"
+ }
+ ]
+ that.setEC1s(data);
+ })
+ }
},
setEC1(d) {
- // console.log(d, 1);
this.examine1 = [
{
title: "审查时间：",
@@ -310,7 +352,7 @@
data = this.setColor(d, this.colors);
option = {
title: {
- text: "保安员审查情况统计",
+ text: this.examinetionTitle,
top: 25,
left: "center",
},
@@ -318,32 +360,16 @@
trigger: "item",
},
legend: {
- // orient: "vertical",
- // left: "left",
x: "center",
y: "90%",
},
toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
- // grid: {
- // // left: "3%",
- // right: "5%",
- // // bottom: "3%",
- // // containLabel: true,
- // },
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,
@@ -352,11 +378,7 @@
},
},
label: {
- // alignTo: "edge",
formatter: "{name|{b}}\n({d}%)",
- // minMargin: 5,
- // edgeDistance: 10,
- // lineHeight: 15,
rich: {
time: {
fontSize: 10,
@@ -370,55 +392,57 @@
this.EC1.setOption(option);
},
+ //登录情况统计
+ setEC1s(d) {
+ var option,data;
+ data = this.setColor(d, this.colors);
+ option = {
+ title: {
+ text: "",
+ top: 25,
+ left: "center",
+ },
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ x: "center",
+ y: "90%",
+ },
+ toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
+ series: [
+ {
+ type: "pie",
+ radius: "50%",
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ label: {
+ formatter: "{name|{b}}\n({d}%)",
+ rich: {
+ time: {
+ fontSize: 10,
+ color: "#999",
+ },
+ },
+ },
+ },
+ ],
+ };
+ this.EC1s.setOption(option);
+ },
getEC2() {
var that = this;
getinformationselectHold(this.deptid, this.jurisdiction)
.then((res) => {
var a = res.data.data;
- // console.log(a, "持证");
var b = that.changedata(a, "cz", "wcz", "持证", "未持证");
that.setEC2(b);
- // var datas = [];
- // for (var k in a) {
- // let b = "";
- // let c = [];
- // if (a[k].cz >= 1) {
- // b = {
- // czname: a[k].czname.split(","),
- // czptime: a[k].czptime.split(","),
- // };
- // // datas.push(a[k]);
- // // console.log(b, 123);
- // if (b.czname.length > 1) {
- // for (var n in b.czname) {
- // c.push({
- // czname: b.czname[n],
- // czptime: b.czptime[n] == 0 ? "" : b.czptime[n],
- // tpye: "持证",
- // });
- // }
- // } else {
- // c = [
- // {
- // czname: b.czname[0],
- // czptime: b.czptime[0] == 0 ? "" : b.czptime[0],
- // tpye: "持证",
- // },
- // ];
- // }
- // // console.log(c, 132456);
- // datas.push(...c);
- // }
- // if (a[k].wcz >= 1) {
- // b = {
- // wczname: a[k].wczname.split(","),
- // wczptime: a[k].wczptime.split(","),
- // };
- // console.log(b, 123);
- // }
- // }
- // // that.czdata = [...datas, ...datas];
- // that.czdata = datas;
})
.catch((res) => {
var b = that.changedata([], "cz", "wcz", "持证", "未持证");
@@ -461,11 +485,7 @@
},
},
label: {
- // alignTo: "edge",
formatter: "{name|{b}}\n({d}%)",
- // minMargin: 5,
- // edgeDistance: 10,
- // lineHeight: 15,
rich: {
time: {
fontSize: 10,
@@ -480,32 +500,53 @@
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);
+ 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(data) {
+ //获取年份
+ 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 +556,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 +585,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);
@@ -615,8 +605,6 @@
}
};
for (var k = 0; k < a.length; k++) {
- // console.log(a[k], k);
-
var overYear = a[k].end_time.slice(0, 4);
var overMout = a[k].end_time.slice(5, 7);
var bigYear = a[k].start_time.slice(0, 4);
@@ -635,13 +623,6 @@
}
}
}
- // console.log(d, "派遣服务单位");
-
- // console.log(a, 123456);
- // for (var k in a) {
- // d.push(a[k]);
- // }
- // console.log(d);
that.setEC4(d);
});
},
@@ -684,7 +665,6 @@
},
series: [
{
- // data: dd,
data: data,
type: "bar",
},
@@ -694,24 +674,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 +708,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 +726,6 @@
},
},
label: {
- // alignTo: "edge",
formatter: "{b}\n({d}%)",
},
},
@@ -752,43 +736,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",
@@ -828,7 +794,7 @@
this.EC6.setOption(option);
},
biginOUREC() {
- this.getEC1();
+ this.getEC1(1);
this.getEC2();
this.getEC3();
this.getEC4();
@@ -842,20 +808,22 @@
// this.setEC6();
},
},
+ created(){
+ if(this.userInfo.role_name == "保安公司管理员" || this.userInfo.role_name == "分公司管理员"){
+ this.examinetionTitle = "保安员审查情况统计";
+ this.examineBtnVisiable = false;
+ }else {
+ this.examinetionTitle = "";
+ }
+ },
mounted() {
this.$nextTick(() => {
var roleIds = this.userInfo.role_id.split(",");
- // console.log(this.userInfo);
- // this.deptid = this.userInfo.role_id;
roleIds.forEach((roleId) => {
getRoleDetail(roleId).then((res) => {
var roleAlias = res.data.data.roleAlias;
var roleName = res.data.data.roleName;
-
- // console.log(roleName);
- // console.log(res.data.data);
- // console.log(roleAlias);
- if (roleName != "保安公司管理员") {
+ if (roleName != "保安公司管理员" && roleName != "分公司管理员") {
this.deptid = "";
this.jurisdiction = this.userInfo.jurisdiction;
} else {
@@ -884,6 +852,7 @@
.securityAnalysiscenter,
.securityAnalysisright {
// border: 1px solid #000;
+ position: relative;
width: 29%;
height: 100%;
box-sizing: border-box;
@@ -895,8 +864,6 @@
.securityAnalysiscenter {
width: 40% !important;
}
- .examines,
- .certificate,
.examination,
.dispatchUnit,
.dispatchSecurity,
@@ -907,6 +874,38 @@
box-sizing: border-box;
background-color: #fff;
}
+
+ .certificate{
+ position: relative;
+ width: 100%;
+ height: 49%;
+ top: 13.30rem;
+ box-sizing: border-box;
+ background-color: #fff;
+ }
+
+ .examinesBtn{
+ position: absolute;
+ top: 1.5rem;
+ z-index: 999;
+ left: 8rem;
+ }
+ .examines{
+ position: absolute;
+ top: 0.25rem;
+ width: 100%;
+ height: 49%;
+ box-sizing: border-box;
+ background-color: #fff;
+ }
+ .examiness{
+ position: absolute;
+ top: 0.25rem;
+ width: 100%;
+ height: 49%;
+ box-sizing: border-box;
+ background-color: #fff;
+ }
// .examines {
// width: 100%;
// height: 49%;
--
Gitblit v1.9.3