| | |
| | | > |
| | | </el-option> |
| | | </el-select> --> |
| | | <el-select |
| | | <!-- <el-select |
| | | class="select1" |
| | | v-model="value1" |
| | | ref="treeForm" |
| | | v-model="node.title" |
| | | placeholder="请选择" |
| | | @change="fenjuChange" |
| | | > |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.id" |
| | | :label="item.title" |
| | | :value="item.id" |
| | | > |
| | | <el-option style="height: auto;" :value="node"> |
| | | <el-tree |
| | | :data="options1" |
| | | default-expand-all |
| | | node-key="id" |
| | | @node-click="handleNodeClick" |
| | | :props="props" |
| | | > |
| | | </el-tree> |
| | | </el-option> |
| | | </el-select> |
| | | <el-select |
| | | </el-select> --> |
| | | <avue-input-tree |
| | | class="select1" |
| | | default-expand-all |
| | | v-model="value1" |
| | | placeholder="请选择内容" |
| | | type="tree" |
| | | :dic="options1" |
| | | :props="props" |
| | | @change="handleNodeClick" |
| | | ></avue-input-tree> |
| | | <avue-input-tree |
| | | class="select2" |
| | | default-expand-all |
| | | v-model="value2" |
| | | placeholder="请选择公司" |
| | | type="tree" |
| | | :dic="options2" |
| | | :props="props2" |
| | | @change="changeCompanys" |
| | | ></avue-input-tree> |
| | | <!-- <el-select |
| | | class="select2" |
| | | v-model="value2" |
| | | placeholder="请选择" |
| | |
| | | :value="item.departmentid" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-select> --> |
| | | <el-button @click="toEconomicTable">进入数据统计表</el-button> |
| | | </div> |
| | | |
| | |
| | | <span>较上月增加{{ socialSecurity.addNum }}人</span> |
| | | </div> |
| | | <div class="box-card"> |
| | | <span>社保缴纳总额(元)</span> |
| | | <span>{{ socialSecurity.money }}</span> |
| | | <span>较上月增加{{ socialSecurity.addMoney }}元</span> |
| | | <template v-if="socialSecurity.money / 10000 > 1"> |
| | | <span>社保缴纳总额(万元)</span> |
| | | <span>{{ (socialSecurity.money / 10000).toFixed(0) }}</span> |
| | | </template> |
| | | <template v-else> |
| | | <span>社保缴纳总额(元)</span> |
| | | <span>{{ Number(socialSecurity.money).toFixed(0) }}</span> |
| | | </template> |
| | | |
| | | <span |
| | | >较上月增加{{ |
| | | Number(socialSecurity.addMoney).toFixed(0) |
| | | }}元</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 { lazyTreeJu, lazyTrees } from "../../api/index/index"; |
| | | import { |
| | | getCompanys, |
| | | selectPCount, |
| | |
| | | loading1: true, |
| | | loading2: true, |
| | | loading3: true, |
| | | enterpriseName: "" |
| | | enterpriseName: "", |
| | | props: { |
| | | children: "children", |
| | | label: "title", |
| | | value: "id" |
| | | }, |
| | | props2: { |
| | | children: "children", |
| | | label: "enterpriseName", |
| | | value: "departmentid" |
| | | }, |
| | | node: {} //选中的记录 |
| | | }; |
| | | }, |
| | | methods: { |
| | | //点击节点 |
| | | handleNodeClick(data) { |
| | | this.value1 = data; |
| | | this.getCompanys(); |
| | | }, |
| | | toEconomicTable() { |
| | | this.$router.push({ |
| | | path: |
| | |
| | | }); |
| | | }, |
| | | getFenju() { |
| | | lazyTreeJu().then(res => { |
| | | this.options1 = []; |
| | | this.value1 = ""; |
| | | this.node = {}; |
| | | lazyTrees().then(res => { |
| | | if (res.data.code === 200) { |
| | | this.options1 = res.data.data; |
| | | this.value1 = this.options1[0] ? this.options1[0].id : ""; |
| | | this.node = this.options1[0]; |
| | | this.getCompanys(); |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | } |
| | | }); |
| | | }, |
| | | fenjuChange() { |
| | | this.getCompanys(); |
| | | }, |
| | | pieChange() { |
| | | this.loading2 = true; |
| | |
| | | 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.value2 = this.options2[0] ? this.options2[0].departmentid : ""; |
| | | this.changeCompanys(); |
| | | } |
| | | }); |
| | |
| | | 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; |
| | | this.socialSecurity.paiQ = data.userpcthismouth; |
| | | this.socialSecurity.addPaiQ = |
| | | data.userpcthismouth - data.userpclastmouth; |
| | | this.socialSecurity.num = data.znum; |
| | | this.socialSecurity.addNum = data.thismouth; |
| | | this.socialSecurity.money = data.tamountnum.toFixed(0); |
| | | this.socialSecurity.addMoney = data.thisamount.toFixed(0); |
| | | this.socialSecurity.paiQ = data.userpcnum; |
| | | this.socialSecurity.addPaiQ = data.userpcthismouth; |
| | | this.socialSecurity.sheBPerson = |
| | | data.userthismouth && (data.thismouth / data.userthismouth) * 100 |
| | | ? ((data.thismouth / data.userthismouth) * 100).toFixed(2) + "%" |
| | | data.usernum && (data.znum / data.usernum) * 100 |
| | | ? ((data.znum / data.usernum) * 100).toFixed(2) + "%" |
| | | : 0; |
| | | this.socialSecurity.addSheBPerson = |
| | | data.userthismouth && |
| | | data.userlastmouth && |
| | | (data.thismouth / data.userthismouth) * 100 && |
| | | (data.lastmonth / data.userlastmouth) * 100 && |
| | | (data.thismouth / data.userthismouth) * 100 - |
| | | (data.lastmonth / data.userlastmouth) * 100 |
| | | data.thismouth && data.lastmonth && data.thismouth - data.lastmonth |
| | | ? ( |
| | | (data.thismouth / data.userthismouth) * 100 - |
| | | (data.lastmonth / data.userlastmouth) * 100 |
| | | ((data.thismouth - data.lastmonth) / data.lastmonth) * |
| | | 100 |
| | | ).toFixed(2) + "%" |
| | | : 0; |
| | | } else { |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | @media screen and (max-width: 1280px) { |
| | | .box-card { |
| | | font-size: 15px; |
| | | width: 128px; |
| | | background: #00aaf1; |
| | | height: 117px; |
| | | text-align: center; |
| | | margin-right: 28px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 36px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 31px; |
| | | } |
| | | } |
| | | .col-content { |
| | | margin-top: 39px !important; |
| | | } |
| | | } |
| | | // 适配分辨率1600*900 |
| | | @media screen and (min-width: 1281px) and (max-width: 1600px) { |
| | | .box-card { |
| | | font-size: 15px; |
| | | width: 128px; |
| | | background: #00aaf1; |
| | | height: 117px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 36px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 31px; |
| | | } |
| | | } |
| | | } |
| | | @media screen and(min-width:1601px) and (max-width: 1920px) { |
| | | .box-card { |
| | | width: 150px; |
| | | background: #00aaf1; |
| | | height: 135px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 40px; |
| | | span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 34px; |
| | | } |
| | | } |
| | | } |
| | | .page1 { |
| | | height: 100%; |
| | | width: 100%; |
| | |
| | | font-weight: 600; |
| | | } |
| | | } |
| | | .box-card { |
| | | width: 150px; |
| | | background: #00aaf1; |
| | | height: 135px; |
| | | text-align: center; |
| | | margin-right: 66px; |
| | | box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35); |
| | | line-height: 40px; |
| | | } |
| | | |
| | | .box-card span { |
| | | display: block; |
| | | width: 100%; |
| | | color: #fff; |
| | | } |
| | | .box-card span:nth-child(2) { |
| | | color: #06ffff; |
| | | font-size: 34px; |
| | | } |
| | | .rowTitle { |
| | | height: 40px; |
| | |
| | | } |
| | | .select1 { |
| | | position: absolute; |
| | | right: 302px; |
| | | right: 360px; |
| | | } |
| | | .select2 { |
| | | position: absolute; |
| | |
| | | right: 0px; |
| | | } |
| | | /deep/ .el-input__inner { |
| | | width: 120px; |
| | | width: 180px; |
| | | } |
| | | } |
| | | .col-content { |