| | |
| | | <div class="shehuiBaoxian-wrap"> |
| | | <div class="shehuiBaoxian-table"> |
| | | <h1>社会保险参保人员统计表</h1> |
| | | <div class="danwei-box">单位:人</div> |
| | | <div class="danwei-box">单位:万人</div> |
| | | <el-table |
| | | max-height="640" |
| | | :data="tableData" |
| | |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | align="center" |
| | | prop="date" |
| | | prop="dataName" |
| | | label="指标名称" |
| | | fixed="left" |
| | | width="220"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | prop="yearFinish" |
| | | align="center" |
| | | label="去年完成" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="january" |
| | | align="center" |
| | | label="1月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="february" |
| | | align="center" |
| | | label="2月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="march" |
| | | align="center" |
| | | label="3月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="april" |
| | | align="center" |
| | | label="4月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="may" |
| | | align="center" |
| | | label="5月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="june" |
| | | align="center" |
| | | label="6月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="july" |
| | | align="center" |
| | | label="7月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="august" |
| | | align="center" |
| | | label="8月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="september" |
| | | align="center" |
| | | label="9月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="october" |
| | | align="center" |
| | | label="10月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="november" |
| | | align="center" |
| | | label="11月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="december" |
| | | align="center" |
| | | label="12月"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | align="center" |
| | | label="省厅计划"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | align="center" |
| | | label="当前完成率" |
| | | width="160"> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getPersonChart, getPersonTable} from '@/api/shehuiBaozhang' |
| | | import nowSize from "../../../../libs/nowSize"; |
| | | export default { |
| | | name: "shehuiBaoxian", |
| | | data() { |
| | | return { |
| | | tableData: [{ |
| | | date: '城镇新增就业人数', |
| | | name: '122', |
| | | address: '32111' |
| | | }, { |
| | | date: '城镇失业人员实现再就业人数', |
| | | name: '233', |
| | | address: '34222' |
| | | }, { |
| | | date: '农村劳动力向非农产业转移人数', |
| | | name: '23222', |
| | | address: '3112222' |
| | | }, { |
| | | date: '其中:劳务输出', |
| | | name: '34221', |
| | | address: '122222' |
| | | }, { |
| | | date: '开展补贴性职业技能培训人数', |
| | | name: '2333', |
| | | address: '1232233' |
| | | }, { |
| | | date: '城镇登记失业率', |
| | | name: '222', |
| | | address: '2222' |
| | | }] |
| | | tableData: [], |
| | | yearsData: [], //x轴数据 |
| | | zhigongData: [], //城镇职工养老保险参保人数 |
| | | juminData: [], //城乡居民养老保险参保人数 |
| | | gongshangData: [], //工伤保险参保人数 |
| | | shiyeData: [], //失业保险参保人数 |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.shehuiBaoxianEcharts() |
| | | this.getPersonTable() |
| | | this.getPersonChart() |
| | | }, |
| | | methods: { |
| | | getPersonTable(){ |
| | | getPersonTable().then(res => { |
| | | if(res.code == 1000) { |
| | | this.tableData = res.list |
| | | } |
| | | }) |
| | | }, |
| | | getPersonChart() { |
| | | getPersonChart().then(res => { |
| | | if(res.code == 1000) { |
| | | this.yearsData = res.obj.years |
| | | this.zhigongData = res.obj.zhigong |
| | | this.juminData = res.obj.jumin |
| | | this.shiyeData = res.obj.shiye |
| | | this.shehuiBaoxianEcharts() |
| | | } |
| | | }) |
| | | }, |
| | | handleheader(data) { |
| | | return { |
| | | lineHeight: '0', |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], |
| | | data: this.yearsData, |
| | | axisLabel: { |
| | | show: true, |
| | | textStyle: { |
| | | color: "#fff", |
| | | fontSize:nowSize(24) |
| | | fontSize:nowSize(24), |
| | | lineHeight: nowSize(56), |
| | | } |
| | | }, |
| | | axisLine: { |
| | |
| | | { |
| | | name: '城乡居民养老保险参保人数', |
| | | type: 'line', |
| | | data: [370, 332, 401, 534, 490, 530, 910] |
| | | data: this.juminData |
| | | }, |
| | | { |
| | | name: '城镇职工养老保险参保人数', |
| | | type: 'line', |
| | | data: [220, 182, 191, 234, 290, 330, 310] |
| | | data: this.zhigongData |
| | | }, |
| | | { |
| | | name: '工伤保险参保人数', |
| | | type: 'line', |
| | | data: [150, 132, 201, 154, 190, 330, 410] |
| | | data: this.gongshangData |
| | | }, |
| | | { |
| | | name: '失业保险参保人数', |
| | | type: 'line', |
| | | data: [250, 135, 261, 154, 170, 310, 460] |
| | | data: this.shiyeData |
| | | } |
| | | ] |
| | | }; |