| | |
| | | <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>饼图</div> --> |
| | | |
| | | <div class="examinesBtn" v-if="examineBtnVisiable"> |
| | | <!-- <el-radio-group |
| | | v-model="tabPosition" |
| | | size="small" |
| | | @change="handleClick" |
| | | > |
| | | <el-radio-button label="1">保安员审查情况统计</el-radio-button> |
| | | <el-radio-button label="2">企业登录预警情况统计</el-radio-button> |
| | | </el-radio-group> --> |
| | | <el-dropdown class="examinesBtnChouse" @command="handleClick"> |
| | | <span class="el-dropdown-link"> |
| | | {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i> |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item command="1">保安员审查情况统计</el-dropdown-item> |
| | | <el-dropdown-item command="2" |
| | | >企业登录预警情况统计</el-dropdown-item |
| | | > |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | | <!-- <div class="examinesBtnChouse"> |
| | | {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i> |
| | | </div> --> |
| | | </div> |
| | | <div class="certificate" ref="ech2"> |
| | | <!-- 保安员持证情况统计 |
| | | <div>饼图</div> --> |
| | | <div class="examines" v-show="showECH1"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('保安员审查情况明细', 1)" |
| | | /> |
| | | <div id="ech1" class="examinesin" ref="ech1">1</div> |
| | | </div> |
| | | <div class="examiness" v-show="!showECH1"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('企业登录情况明细', 7)" |
| | | /> |
| | | <div id="ech1s" class="examinessin" ref="ech1s"></div> |
| | | </div> |
| | | <!-- 保安员审查情况统计 |
| | | <div>饼图</div> --> |
| | | <div class="certificate"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('保安员持证情况明细', 2)" |
| | | /> |
| | | <div class="certificatein" ref="ech2"> |
| | | <!-- 保安员持证情况统计 |
| | | <div>饼图</div> --> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="czbut"></div> --> |
| | | </div> |
| | | <div class="securityAnalysiscenter"> |
| | | <div class="examination" ref="ech3"> |
| | | <!-- 保安员考试情况统计 |
| | | <div class="examination"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('保安员考试情况明细', 3)" |
| | | /> |
| | | <div class="examinationin" ref="ech3"> |
| | | <!-- 保安员考试情况统计 |
| | | <div>堆叠面积图</div> --> |
| | | </div> |
| | | </div> |
| | | <div class="dispatchUnit" ref="ech4"> |
| | | <!-- 派遣服务单位统计 |
| | | |
| | | <div class="dispatchUnit"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('派遣服务单位明细', 4)" |
| | | /> |
| | | <div class="dispatchUnitin" ref="ech4"> |
| | | <!-- 派遣服务单位统计 |
| | | <div>柱状图</div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="securityAnalysisright"> |
| | | <div class="dispatchSecurity" ref="ech5"> |
| | | <!-- 保安员年龄分布情况统计 |
| | | <div class="dispatchSecurity"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('保安员年龄分布情况明细', 5)" |
| | | /> |
| | | <div class="dispatchSecurityin" ref="ech5"> |
| | | <!-- 保安员年龄分布情况统计 |
| | | <div>饼图</div> --> |
| | | </div> |
| | | </div> |
| | | <div class="socialSecurity" ref="ech6"> |
| | | <!-- 社保缴纳情况统计 |
| | | <div class="socialSecurity"> |
| | | <img |
| | | src="http://61.131.136.25:2080/img/table.png" |
| | | alt="" |
| | | class="myToolbox" |
| | | @click="openMyToolBox('保安员学历分布情况明细', 6)" |
| | | /> |
| | | <div class="socialSecurityin" ref="ech6"> |
| | | <!-- 社保缴纳情况统计 |
| | | <div>饼图</div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div> |
| | |
| | | > |
| | | <!-- 保安员审查情况统计 --> |
| | | </situation> |
| | | |
| | | <loginRecord :card="{ jurisdiction: jurisdiction }" v-if="sees == 7"> |
| | | <!-- 保安员审查情况统计 --> |
| | | </loginRecord> |
| | | |
| | | <certificate |
| | | :card="{ deptId: deptid, jurisdiction: jurisdiction }" |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getinformationselectExtype, //保安员审查情况统计 |
| | |
| | | getinformationselectDisp, //保安派遣情况 |
| | | getAgeStatistics, //保安员年龄分布情况 |
| | | getinformationselectSoil, //社保缴纳情况统计 |
| | | getEducationStatistics |
| | | getEducationStatistics, |
| | | getLoginDataStatistics |
| | | } from "@/api/securityAnalysis/securityAnalysis"; |
| | | import { mapGetters } from "vuex"; |
| | | 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"; |
| | |
| | | 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: ["#29C093", "#F34A4A"], //[正常,异常]; |
| | | showECH1: true, //显示保安员审查情况统计或企业登录预警情况统计 |
| | | changeSizeTime: null, |
| | | examinesBtnChousetext: "保安员审查情况统计" |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | | userInfo: (state) => state.user.userInfo, |
| | | userInfo: state => state.user.userInfo |
| | | }), |
| | | ...mapGetters(["windowWidth", "windowHeight"]), |
| | | ids1() { |
| | | let ids1 = []; |
| | | this.selectionList1.forEach((ele) => { |
| | | this.selectionList1.forEach(ele => { |
| | | ids1.push(ele.id); |
| | | }); |
| | | return ids1.join(","); |
| | | }, |
| | | ids2() { |
| | | let ids2 = []; |
| | | this.selectionList2.forEach((ele) => { |
| | | this.selectionList2.forEach(ele => { |
| | | ids2.push(ele.id); |
| | | }); |
| | | return ids2.join(","); |
| | | }, |
| | | } |
| | | }, |
| | | watch: { |
| | | dialogVisible() { |
| | | if (this.dialogVisible == false && this.sees == "1") { |
| | | this.getEC1(); |
| | | this.getEC1(this.tabPosition); |
| | | } |
| | | if (this.dialogVisible == false && this.sees == "2") { |
| | | this.getEC2(); |
| | |
| | | this.getEC6(); |
| | | } |
| | | }, |
| | | windowWidth() { |
| | | let that = this; |
| | | if (that.changeSizeTime) { |
| | | return; |
| | | } else { |
| | | that.changeSizeTime = setTimeout(() => { |
| | | that.changeSize(); |
| | | clearTimeout(that.changeSizeTime); |
| | | that.changeSizeTime = null; |
| | | }, 600); |
| | | } |
| | | }, |
| | | windowHeight() { |
| | | let that = this; |
| | | if (that.changeSizeTime) { |
| | | return; |
| | | } else { |
| | | that.changeSizeTime = setTimeout(() => { |
| | | that.changeSize(); |
| | | clearTimeout(that.changeSizeTime); |
| | | that.changeSizeTime = null; |
| | | }, 600); |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | //更新图表尺寸 |
| | | changeSize() { |
| | | console.log("更新图表尺寸"); |
| | | this.EC1.resize(); |
| | | this.EC1s.resize(); |
| | | this.EC2.resize(); |
| | | this.EC3.resize(); |
| | | this.EC4.resize(); |
| | | this.EC5.resize(); |
| | | this.EC6.resize(); |
| | | }, |
| | | //tab 切换 |
| | | handleClick(val) { |
| | | // if (val == this.tabPosition) { |
| | | // return; |
| | | // } |
| | | if (val == 1) { |
| | | this.showECH1 = true; |
| | | this.examinesBtnChousetext = "保安员审查情况统计"; |
| | | } else { |
| | | this.showECH1 = false; |
| | | this.examinesBtnChousetext = "企业登录预警情况统计"; |
| | | } |
| | | this.tabPosition = val; |
| | | this.getEC1(val); |
| | | }, |
| | | creatOurEcharts() { |
| | | // return; |
| | | 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); |
| | |
| | | d = [ |
| | | { |
| | | value: yes, |
| | | name: okmsg, |
| | | name: okmsg |
| | | }, |
| | | { |
| | | value: not, |
| | | name: nomsg, |
| | | }, |
| | | name: nomsg |
| | | } |
| | | ]; |
| | | } else { |
| | | d = [ |
| | | { |
| | | value: 0, |
| | | name: okmsg, |
| | | name: okmsg |
| | | }, |
| | | { |
| | | value: 0, |
| | | name: nomsg, |
| | | }, |
| | | name: nomsg |
| | | } |
| | | ]; |
| | | } |
| | | // console.log(d, ok, no); |
| | |
| | | ? "0%" |
| | | : Math.round((num / total) * 10000) / 100.0 + "%"; |
| | | }, |
| | | openMyToolBox(titles, id) { |
| | | var that = this; |
| | | that.dialogVisible = true; |
| | | that.sees = id; |
| | | that.titles = titles; |
| | | }, |
| | | gettoolbox(title, titles, id) { |
| | | //由于在1366,,768分辨率下,会被覆盖掉不能点击,所以放弃 |
| | | return; |
| | | var that = this; |
| | | return { |
| | | show: true, |
| | | show: false, |
| | | itemSize: 25, |
| | | top: 20, |
| | | right: 20, |
| | | top: 5, |
| | | right: 15, |
| | | feature: { |
| | | myTool1: { |
| | | show: true, |
| | | title: "", |
| | | // 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 () { |
| | | zlevel: 999, |
| | | z: 999, |
| | | title: "点击查看详情", |
| | | icon: "image://http://61.131.136.25:2080/img/table.png", |
| | | onclick: function() { |
| | | that.dialogVisible = true; |
| | | that.sees = id; |
| | | that.titles = titles; |
| | | }, |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | }, |
| | | setColor(d, color) { |
| | | for (var k in d) { |
| | | var itemStyle = { |
| | | color: color[k], |
| | | color: color[k] |
| | | }; |
| | | d[k]["itemStyle"] = itemStyle; |
| | | } |
| | | console.log(d); |
| | | return d; |
| | | }, |
| | | getEC1() { |
| | | getEC1(tab) { |
| | | var that = this; |
| | | getinformationselectExtype(this.deptid, this.jurisdiction) |
| | | .then((res) => { |
| | | var a = res.data.data; |
| | | var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常"); |
| | | that.setEC1(b); |
| | | }) |
| | | .catch((res) => { |
| | | var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常"); |
| | | that.setEC1(b); |
| | | if (tab == 1) { |
| | | getinformationselectExtype(this.deptid, this.jurisdiction) |
| | | .then(res => { |
| | | var a = res.data.data; |
| | | var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常"); |
| | | that.setEC1(b); |
| | | that.EC1.resize(); |
| | | }) |
| | | .catch(res => { |
| | | var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常"); |
| | | that.setEC1(b); |
| | | that.EC1.resize(); |
| | | }); |
| | | } |
| | | 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); |
| | | that.EC1s.resize(); |
| | | }); |
| | | } |
| | | }, |
| | | setEC1(d) { |
| | | // console.log(d, 1); |
| | | this.examine1 = [ |
| | | { |
| | | title: "审查时间:", |
| | | value: this.getTime(), |
| | | value: this.getTime() |
| | | }, |
| | | { |
| | | title: "问题保安员人数:", |
| | | value: d[1].value + "人", |
| | | value: d[1].value + "人" |
| | | }, |
| | | { |
| | | title: "问题保安员比例:", |
| | | value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value), |
| | | }, |
| | | value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value) |
| | | } |
| | | ]; |
| | | var option, data; |
| | | data = this.setColor(d, this.colors); |
| | | option = { |
| | | title: { |
| | | text: "保安员审查情况统计", |
| | | text: this.examinetionTitle, |
| | | top: 25, |
| | | left: "center", |
| | | left: "center" |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | trigger: "item" |
| | | }, |
| | | legend: { |
| | | // orient: "vertical", |
| | | // left: "left", |
| | | x: "center", |
| | | y: "90%", |
| | | y: "90%" |
| | | }, |
| | | toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1), |
| | | // grid: { |
| | | // // left: "3%", |
| | | // right: "5%", |
| | | // // bottom: "3%", |
| | | // // containLabel: true, |
| | | // }, |
| | | // toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1), |
| | | 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, |
| | | shadowOffsetX: 0, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)", |
| | | }, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)" |
| | | } |
| | | }, |
| | | label: { |
| | | // alignTo: "edge", |
| | | formatter: "{name|{b}}\n({d}%)", |
| | | // minMargin: 5, |
| | | // edgeDistance: 10, |
| | | // lineHeight: 15, |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: "#999", |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | color: "#999" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | 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) => { |
| | | .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) => { |
| | | .catch(res => { |
| | | var b = that.changedata([], "cz", "wcz", "持证", "未持证"); |
| | | that.setEC2(b); |
| | | }); |
| | |
| | | text: "保安员持证情况统计", |
| | | // subtext: "纯属虚构", |
| | | top: 25, |
| | | left: "center", |
| | | left: "center" |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | trigger: "item" |
| | | }, |
| | | legend: { |
| | | // orient: "vertical", |
| | | // left: "left", x: "center", |
| | | x: "center", |
| | | y: "83%", |
| | | y: "83%" |
| | | }, |
| | | toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2), |
| | | // toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2), |
| | | series: [ |
| | | { |
| | | // name: "访问来源", |
| | |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)", |
| | | }, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)" |
| | | } |
| | | }, |
| | | label: { |
| | | // alignTo: "edge", |
| | | formatter: "{name|{b}}\n({d}%)", |
| | | // minMargin: 5, |
| | | // edgeDistance: 10, |
| | | // lineHeight: 15, |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: "#999", |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | color: "#999" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | 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() { |
| | | getExamStatisInfo(this.deptid, this.jurisdiction).then((res) => { |
| | | 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); |
| | | // 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) => { |
| | | data.forEach(item => { |
| | | if (item.type == 1) { |
| | | seriesdata.push({ |
| | | name: item.name + "-合格人数", |
| | | type: "bar", |
| | | stack: item.name, |
| | | emphasis: { |
| | | focus: "series", |
| | | focus: "series" |
| | | }, |
| | | data: item.examSocreStatis, |
| | | data: item.examSocreStatis |
| | | }); |
| | | } |
| | | if (item.type == 2) { |
| | |
| | | type: "bar", |
| | | stack: item.name, |
| | | emphasis: { |
| | | focus: "series", |
| | | focus: "series" |
| | | }, |
| | | data: item.examSocreStatis, |
| | | data: item.examSocreStatis |
| | | }); |
| | | } |
| | | }); |
| | | var datetime = [ |
| | | "1月", |
| | | "2月", |
| | | "3月", |
| | | "4月", |
| | | "5月", |
| | | "6月", |
| | | "7月", |
| | | "8月", |
| | | "9月", |
| | | "10月", |
| | | "11月", |
| | | "12月", |
| | | ] |
| | | "1月", |
| | | "2月", |
| | | "3月", |
| | | "4月", |
| | | "5月", |
| | | "6月", |
| | | "7月", |
| | | "8月", |
| | | "9月", |
| | | "10月", |
| | | "11月", |
| | | "12月" |
| | | ]; |
| | | //echarts 图表数据 |
| | | var option = { |
| | | title: { |
| | | text: "保安员考试情况统计", |
| | | left: "center", |
| | | top: 20, |
| | | top: 20 |
| | | }, |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | type: "shadow" |
| | | } |
| | | }, |
| | | color: ["#91CD76", "#EF6667"], |
| | | legend: { |
| | |
| | | icon: "circle", |
| | | itemWidth: 10, |
| | | itemHeight: 10, |
| | | itemGap: 20, |
| | | itemGap: 20 |
| | | }, |
| | | toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3), |
| | | // toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3), |
| | | grid: { |
| | | left: "3%", |
| | | right: "4%", |
| | | bottom: "3%", |
| | | containLabel: true, |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: "category", |
| | | data: datetime |
| | | }, |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: "value", |
| | | }, |
| | | type: "value" |
| | | } |
| | | ], |
| | | series: seriesdata, |
| | | series: seriesdata |
| | | }; |
| | | |
| | | this.EC3.setOption(option); |
| | |
| | | var date = new Date(); |
| | | var nowYear = date.getFullYear(); |
| | | var that = this; |
| | | getinformationselectDis(this.deptid, this.jurisdiction).then((res) => { |
| | | getinformationselectDis(this.deptid, this.jurisdiction).then(res => { |
| | | var a = res.data, |
| | | d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
| | | |
| | |
| | | } |
| | | }; |
| | | 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); |
| | |
| | | } |
| | | } |
| | | } |
| | | // console.log(d, "派遣服务单位"); |
| | | |
| | | // console.log(a, 123456); |
| | | // for (var k in a) { |
| | | // d.push(a[k]); |
| | | // } |
| | | // console.log(d); |
| | | that.setEC4(d); |
| | | }); |
| | | }, |
| | |
| | | "9月", |
| | | "10月", |
| | | "11月", |
| | | "12月", |
| | | "12月" |
| | | ]; |
| | | var date = new Date(); |
| | | var d = date.getFullYear(); |
| | |
| | | title: { |
| | | text: "派遣服务单位统计", |
| | | top: 20, |
| | | left: "center", |
| | | left: "center" |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | data: xxd, |
| | | data: xxd |
| | | // data: xd, |
| | | }, |
| | | toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4), |
| | | // toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4), |
| | | yAxis: { |
| | | type: "value", |
| | | type: "value" |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | formatter: d + "年{b} : {c} 个", |
| | | formatter: d + "年{b} : {c} 个" |
| | | }, |
| | | series: [ |
| | | { |
| | | data: data, |
| | | type: "bar", |
| | | }, |
| | | ], |
| | | type: "bar" |
| | | } |
| | | ] |
| | | }; |
| | | this.EC4.setOption(option); |
| | | }, |
| | | getEC5() { |
| | | var that = this; |
| | | getAgeStatistics(this.deptid, this.jurisdiction) |
| | | .then((res) => { |
| | | 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); |
| | | }); |
| | | getAgeStatistics(this.deptid, this.jurisdiction).then(res => { |
| | | 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; |
| | |
| | | text: "保安员年龄分布情况统计", |
| | | // subtext: "纯属虚构", |
| | | top: 25, |
| | | left: "center", |
| | | left: "center" |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | trigger: "item" |
| | | }, |
| | | toolbox: this.gettoolbox("保安员年龄分布情况查询", "保安员年龄分布情况明细", 5), |
| | | // toolbox: this.gettoolbox( |
| | | // "保安员年龄分布情况查询", |
| | | // "保安员年龄分布情况明细", |
| | | // 5 |
| | | // ), |
| | | legend: { |
| | | x: "center", |
| | | y: "90%", |
| | | y: "90%" |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)", |
| | | }, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)" |
| | | } |
| | | }, |
| | | label: { |
| | | formatter: "{b}\n({d}%)", |
| | | }, |
| | | }, |
| | | ], |
| | | formatter: "{b}\n({d}%)" |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | this.EC5.setOption(option); |
| | | }, |
| | | getEC6() { |
| | | var that = this; |
| | | getEducationStatistics(this.deptid, this.jurisdiction) |
| | | .then((res) => { |
| | | var a = res.data.data; |
| | | that.setEC6(a); |
| | | }); |
| | | getEducationStatistics(this.deptid, this.jurisdiction).then(res => { |
| | | var a = res.data.data; |
| | | that.setEC6(a); |
| | | }); |
| | | }, |
| | | setEC6(d) { |
| | | var option; |
| | |
| | | title: { |
| | | text: "保安员学历分布情况统计", |
| | | top: 25, |
| | | left: "center", |
| | | left: "center" |
| | | }, |
| | | tooltip: { |
| | | trigger: "item", |
| | | trigger: "item" |
| | | }, |
| | | toolbox: this.gettoolbox("保安员学历分布情况查询", "保安员学历分布情况明细", 6), |
| | | // toolbox: this.gettoolbox( |
| | | // "保安员学历分布情况查询", |
| | | // "保安员学历分布情况明细", |
| | | // 6 |
| | | // ), |
| | | legend: { |
| | | // orient: "vertical", |
| | | // left: "left", |
| | | x: "center", |
| | | y: "83%", |
| | | y: "83%" |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)", |
| | | }, |
| | | shadowColor: "rgba(0, 0, 0, 0.5)" |
| | | } |
| | | }, |
| | | label: { |
| | | // alignTo: "edge", |
| | |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: "#999", |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | color: "#999" |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | this.EC6.setOption(option); |
| | | }, |
| | | biginOUREC() { |
| | | this.getEC1(); |
| | | this.getEC1(1); |
| | | this.getEC2(); |
| | | this.getEC3(); |
| | | this.getEC4(); |
| | |
| | | // this.setEC4(); |
| | | // this.setEC5(); |
| | | // 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) => { |
| | | 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 { |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | |
| | | $widths: 20%; |
| | | .securityAnalysis { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 35px); |
| | | // border: 1px solid #000; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | box-sizing: border-box; |
| | | |
| | | .securityAnalysisleft, |
| | | .securityAnalysiscenter, |
| | | .securityAnalysisright { |
| | | // border: 1px solid #000; |
| | | // // border: 1px solid #000; |
| | | position: relative; |
| | | width: 29%; |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | // border: 1px solid red; |
| | | // box-sizing: border-box; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | |
| | | .securityAnalysiscenter { |
| | | width: 40% !important; |
| | | } |
| | | .examines, |
| | | .certificate, |
| | | .examination, |
| | | .dispatchUnit, |
| | | .dispatchSecurity, |
| | | .socialSecurity { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 49%; |
| | | // border: 1px solid #000; |
| | | box-sizing: border-box; |
| | | background-color: #fff; |
| | | } |
| | | // .examines { |
| | | // width: 100%; |
| | | // height: 49%; |
| | | // display: flex; |
| | | // align-items: center; |
| | | // background-color: #fff; |
| | | // } |
| | | // .examine { |
| | | // width: 100%; |
| | | // height: 100%; |
| | | // } |
| | | // .examine1 { |
| | | // width: 200px; |
| | | // div { |
| | | // margin-bottom: 10px; |
| | | // } |
| | | // } |
| | | // .securityAnalysisleft { |
| | | // width: $widths; |
| | | // } |
| | | // .securityAnalysiscenter { |
| | | // width: $widths; |
| | | // } |
| | | // .securityAnalysisright { |
| | | // width: $widths; |
| | | // } |
| | | |
| | | .certificate { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 49%; |
| | | // top: 13.3rem; |
| | | box-sizing: border-box; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .examinesBtn { |
| | | top: 0; |
| | | left: 0; |
| | | position: absolute; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background-color: #fff; |
| | | .examinesBtnChouse { |
| | | background-color: #409eff; |
| | | padding: 5px 10px; |
| | | border-radius: 5px; |
| | | color: #fff; |
| | | position: relative; |
| | | top: 20px; |
| | | z-index: 900; |
| | | text-align: center; |
| | | } |
| | | } |
| | | .examines, |
| | | .examiness { |
| | | width: 100%; |
| | | height: 49%; |
| | | // display: flex; |
| | | // align-items: center; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | //myself |
| | | .examinesin, |
| | | .examinessin, |
| | | .certificatein, |
| | | .examinationin, |
| | | .dispatchUnitin, |
| | | .dispatchSecurityin, |
| | | .socialSecurityin { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .myToolbox { |
| | | position: absolute; |
| | | top: 14px; |
| | | right: 20px; |
| | | width: 25px; |
| | | height: 25px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | &:hover { |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |