| | |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <el-select class="select1" v-model="value1" placeholder="请选择"> |
| | | <el-select |
| | | class="select1" |
| | | v-model="value1" |
| | | placeholder="请选择" |
| | | @change="fenjuChange" |
| | | > |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | :key="item.id" |
| | | :label="item.title" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <el-select class="select2" v-model="value2" placeholder="请选择"> |
| | | <el-select |
| | | class="select2" |
| | | v-model="value2" |
| | | placeholder="请选择" |
| | | @change="changeCompanys" |
| | | > |
| | | <el-option |
| | | v-for="item in options2" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | :key="item.departmentid" |
| | | :label="item.enterpriseName" |
| | | :value="item.departmentid" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | |
| | | <div class="col-content"> |
| | | <div class="box-card"> |
| | | <span>社保缴纳人数</span> |
| | | <span>11291</span> |
| | | <span>较上月增加12人</span> |
| | | <span>{{ socialSecurity.num }}</span> |
| | | <span>较上月增加{{ socialSecurity.addNum }}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>社保缴纳总额(万)</span> |
| | | <span>410</span> |
| | | <span>较上月增加15万</span> |
| | | <span>社保缴纳总额(元)</span> |
| | | <span>{{ socialSecurity.money }}</span> |
| | | <span>较上月增加{{ socialSecurity.addMoney }}元</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>公司派遣人数</span> |
| | |
| | | <script> |
| | | import * as echarts from "echarts"; |
| | | import echartJs from "./securityEchart.js"; |
| | | import { lazyTreeJu } from "../../api/index/index"; |
| | | import { |
| | | getCompanys, |
| | | selectPCount, |
| | | selectTo, |
| | | queryYearSoil, |
| | | queryYearAn, |
| | | } from "../../api/securityUnitOperation/securityUnitOperation"; |
| | | export default { |
| | | data() { |
| | | return { |
| | | value1: "1", |
| | | value2: "1", |
| | | value0: "2012", |
| | | value1: "", |
| | | value2: "", |
| | | value0: "2012", |
| | | options0: [ |
| | | { |
| | | value: "2012", |
| | | label: "2012年" |
| | | label: "2012年", |
| | | }, |
| | | { |
| | | value: "2011", |
| | | label: "2011年" |
| | | label: "2011年", |
| | | }, |
| | | { |
| | | value: "2010", |
| | | label: "2010年" |
| | | label: "2010年", |
| | | }, |
| | | { |
| | | value: "2009", |
| | | label: "2009年" |
| | | label: "2009年", |
| | | }, |
| | | { |
| | | value: "2008", |
| | | label: "2008年" |
| | | label: "2008年", |
| | | }, |
| | | { |
| | | value: "2007", |
| | | label: "2007年" |
| | | } |
| | | label: "2007年", |
| | | }, |
| | | ], |
| | | options1: [ |
| | | { |
| | | value: "1", |
| | | label: "南昌市公安局" |
| | | }, |
| | | { |
| | | value: "2", |
| | | label: "东湖分局" |
| | | }, |
| | | { |
| | | value: "3", |
| | | label: "西湖分局" |
| | | }, |
| | | { |
| | | value: "4", |
| | | label: "青云谱分局" |
| | | }, |
| | | { |
| | | value: "5", |
| | | label: "青山湖分局" |
| | | } |
| | | ], |
| | | options2: [ |
| | | { |
| | | value: "1", |
| | | label: "江西省永安保安服务有限公司" |
| | | }, |
| | | { |
| | | value: "2", |
| | | label: "南昌市赣水保安服务有限公司" |
| | | }, |
| | | { |
| | | value: "3", |
| | | label: "江西中业兴达保安服务有限公司" |
| | | } |
| | | ] |
| | | options1: [], |
| | | options2: [], |
| | | socialSecurity: { |
| | | num: 0, |
| | | addNum: 0, |
| | | money: 0, |
| | | addMoney: 0, |
| | | }, |
| | | }; |
| | | }, |
| | | methods: { |
| | | setEchart() { |
| | | let data = []; |
| | | let bottomEchart = echarts.init(document.getElementById("bottomEchart")); |
| | | bottomEchart.setOption(echartJs.bottomOption(data)); |
| | | let middleEchart1 = echarts.init( |
| | | document.getElementById("middleEchart1") |
| | | ); |
| | | middleEchart1.setOption(echartJs.economicMiddle(data)); |
| | | let middleEchart2 = echarts.init( |
| | | document.getElementById("middleEchart2") |
| | | ); |
| | | middleEchart2.setOption(echartJs.economicPieOption(data)); |
| | | }, |
| | | toEconomicTable() { |
| | | this.$router.push({ path: "/securityUnitOperation/economicTable" }); |
| | | } |
| | | }, |
| | | getFenju() { |
| | | lazyTreeJu().then((res) => { |
| | | if (res.data.code === 200) { |
| | | this.options1 = res.data.data; |
| | | this.value1 = this.options1[0] ? this.options1[0].id : ""; |
| | | this.getCompanys(); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | fenjuChange() { |
| | | this.getCompanys(); |
| | | }, |
| | | pieChange() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | }; |
| | | selectPCount(params).then((res) => { |
| | | if (res.data.code === 200) { |
| | | let middleEchart2 = echarts.init( |
| | | document.getElementById("middleEchart2") |
| | | ); |
| | | middleEchart2.setOption(echartJs.economicPieOption(res.data.data[0])); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | getCompanys() { |
| | | getCompanys({ jurisdiction: this.value1 }).then((res) => { |
| | | if (res.data.code === 200) { |
| | | this.options2 = res.data.data; |
| | | this.value2 = this.options2[0] ? this.options2[0].departmentid : ""; |
| | | this.changeCompanys(); |
| | | } |
| | | }); |
| | | }, |
| | | getSocialSecurity() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | }; |
| | | selectTo(params).then((res) => { |
| | | if (res.data.code === 200) { |
| | | let data = res.data.data[0]; |
| | | this.socialSecurity.num = data.thismouth; |
| | | this.socialSecurity.addNum = data.thismouth - data.lastmonth; |
| | | this.socialSecurity.money = data.thisamount; |
| | | this.socialSecurity.addMoney = data.thisamount - data.lastamount; |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | getQueryYearSoil() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | }; |
| | | queryYearSoil(params).then((res) => { |
| | | if (res.data.code === 200) { |
| | | let middleEchart1 = echarts.init( |
| | | document.getElementById("middleEchart1") |
| | | ); |
| | | middleEchart1.setOption(echartJs.economicMiddle(res.data.data)); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | getQueryYearAn() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | }; |
| | | queryYearAn(params).then((res) => { |
| | | if (res.data.code === 200) { |
| | | let bottomEchart = echarts.init( |
| | | document.getElementById("bottomEchart") |
| | | ); |
| | | bottomEchart.setOption(echartJs.bottomOption(res.data.data)); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | changeCompanys() { |
| | | this.pieChange(); |
| | | this.getSocialSecurity(); |
| | | this.getQueryYearSoil(); |
| | | this.getQueryYearAn(); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.setEchart(); |
| | | } |
| | | this.getFenju(); |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |