| | |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | ></el-option> |
| | | </el-select> |
| | | <el-select |
| | | class="select1" |
| | | v-model="value1" |
| | | placeholder="请选择" |
| | | @change="fenjuChange" |
| | | > |
| | | <el-select class="select1" v-model="value1" placeholder="请选择" @change="fenjuChange"> |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.id" |
| | | :label="item.title" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | ></el-option> |
| | | </el-select> |
| | | <el-select |
| | | class="select2" |
| | | v-model="value2" |
| | | placeholder="请选择" |
| | | @change="changeCompanys" |
| | | > |
| | | <el-select class="select2" v-model="value2" placeholder="请选择" @change="changeCompanys"> |
| | | <el-option |
| | | v-for="item in options2" |
| | | :key="item.departmentid" |
| | | :label="item.enterpriseName" |
| | | :value="item.departmentid" |
| | | > |
| | | </el-option> |
| | | ></el-option> |
| | | </el-select> |
| | | <el-button @click="toOperationTable">进入数据统计表</el-button> |
| | | </div> |
| | |
| | | <div class="col-content"> |
| | | <div class="box-card"> |
| | | <span>总保安数</span> |
| | | <span>23708</span> |
| | | <span>较上月增加123人</span> |
| | | <span>{{card.baoanTotal}}</span> |
| | | <span>较上月增加{{card.addbaoanTotal}}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>正常保安员</span> |
| | | <span>22176</span> |
| | | <span>较上月增加13人</span> |
| | | <span>{{card.zcBaoan}}</span> |
| | | <span>较上月增加{{card.addzcBaoan}}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>持证保安员</span> |
| | | <span>21003</span> |
| | | <span>较上月增加31人</span> |
| | | <span>{{card.czBaoan}}</span> |
| | | <span>较上月增加{{card.addczBaoan}}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>过考保安员</span> |
| | | <span>21003</span> |
| | | <span>较上月增加31人</span> |
| | | <span>{{card.gkBaoan}}</span> |
| | | <span>较上月增加{{card.addgkBaoan}}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>服务客户</span> |
| | | <span>56</span> |
| | | <span>较上月增加34家</span> |
| | | <span>{{card.kh}}</span> |
| | | <span>较上月增加{{card.addkh}}家</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>缴纳社保</span> |
| | | <span>23708</span> |
| | | <span>较上月增加3人</span> |
| | | <span>{{card.sheb}}</span> |
| | | <span>较上月增加{{card.addsheb}}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>保安派遣</span> |
| | | <span>12720</span> |
| | | <span>较上月增加31人</span> |
| | | <span>{{card.baoanPq}}</span> |
| | | <span>较上月增加{{card.addbaoanPq}}人</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | queryCounts, |
| | | getCompanys, |
| | | queryYearKh, |
| | | queryYearG, |
| | | queryYearG |
| | | } from "../../api/securityUnitOperation/securityUnitOperation"; |
| | | export default { |
| | | data() { |
| | |
| | | value1: "", |
| | | value2: "", |
| | | value0: "2012", |
| | | card: { |
| | | baoanTotal: 0, |
| | | addbaoanTotal: 0, |
| | | zcBaoan: 0, |
| | | addzcBaoan: 0, |
| | | czBaoan: 0, |
| | | addczBaoan: 0, |
| | | gkBaoan: 0, |
| | | addgkBaoan: 0, |
| | | kh: 0, |
| | | addkh: 0, |
| | | sheb: 0, |
| | | addsheb: 0, |
| | | baoanPq: 0, |
| | | addbaoanPq: 0 |
| | | }, |
| | | 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: [], |
| | | options2: [], |
| | | options2: [] |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | this.$router.push({ path: "/securityUnitOperation/operationTable" }); |
| | | }, |
| | | getFenju() { |
| | | lazyTreeJu().then((res) => { |
| | | this.options1 = []; |
| | | this.value1 = ""; |
| | | lazyTreeJu().then(res => { |
| | | if (res.data.code === 200) { |
| | | this.options1 = res.data.data; |
| | | this.value1 = this.options1[0] ? this.options1[0].id : ""; |
| | |
| | | this.getCompanys(); |
| | | }, |
| | | getCompanys() { |
| | | getCompanys({ jurisdiction: this.value1 }).then((res) => { |
| | | 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 : ""; |
| | |
| | | getQueryCounts() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | deptid: this.value2 |
| | | }; |
| | | queryCounts(params).then((res) => { |
| | | queryCounts(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | debugger; |
| | | let data = res.data.data[0]; |
| | | this.card = { |
| | | baoanTotal: data.baoan.thisnum, |
| | | addbaoanTotal: data.baoan.thisnum - data.baoan.lastnum, |
| | | zcBaoan: data.zcbaoan.thisnum, |
| | | addzcBaoan: data.zcbaoan.thisnum - data.zcbaoan.lastnum, |
| | | czBaoan: data.czbaoan.thisnum, |
| | | addczBaoan: data.czbaoan.thisnum - data.czbaoan.lastnum, |
| | | gkBaoan: 0, |
| | | addgkBaoan: 0, |
| | | kh: data.kh.thisnum, |
| | | addkh: data.kh.thisnum - data.kh.lastnum, |
| | | sheb: data.sheb.thisnum, |
| | | addsheb: data.sheb.thisnum - data.sheb.lastnum, |
| | | baoanPq: data.paiq.thisnum, |
| | | addbaoanPq: data.paiq.thisnum - data.paiq.lastnum |
| | | }; |
| | | } |
| | | }); |
| | | }, |
| | | getQueryYearKh() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | deptid: this.value2 |
| | | }; |
| | | queryYearKh(params).then((res) => { |
| | | queryYearKh(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | let middleEchart2 = echarts.init( |
| | | document.getElementById("middleEchart2") |
| | |
| | | getQueryYearG() { |
| | | let params = { |
| | | jurisdiction: this.value1, |
| | | deptid: this.value2, |
| | | deptid: this.value2 |
| | | }; |
| | | queryYearG().then((res) => { |
| | | queryYearG().then(res => { |
| | | if (res.data.code === 200) { |
| | | let middleEchart1 = echarts.init( |
| | | document.getElementById("middleEchart1") |
| | |
| | | } |
| | | }); |
| | | }, |
| | | // 清空之前的查询结果 |
| | | clear() { |
| | | this.card = { |
| | | baoanTotal: 0, |
| | | addbaoanTotal: 0, |
| | | zcBaoan: 0, |
| | | addzcBaoan: 0, |
| | | czBaoan: 0, |
| | | addczBaoan: 0, |
| | | gkBaoan: 0, |
| | | addgkBaoan: 0, |
| | | kh: 0, |
| | | addkh: 0, |
| | | sheb: 0, |
| | | addsheb: 0, |
| | | baoanPq: 0, |
| | | addbaoanPq: 0 |
| | | }; |
| | | }, |
| | | changeCompanys() { |
| | | // this.getQueryCounts(); |
| | | this.clear(); |
| | | this.getQueryCounts(); |
| | | this.getQueryYearKh(); |
| | | this.getQueryYearG(); |
| | | }, |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.setEchart(); |
| | | this.getFenju(); |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |