jiashicang-front.git

			@@ -329,118 +329,118 @@
			</div>
			</div>
			<div class="shuju-scroll">
			<div class="shuju-table-line2">
			<div class="shuju-table-line2" v-for="(item,index) in TownTable" :key="index">
			<div class="biao-title">
			<h1>人数（万人）</h1>
			<h1>{{ item.name }}</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>277.8</h1>
			<h1>{{ item.total }}</h1>
			</div>
			<div class="title">
			<h1>35.5</h1>
			<h1>{{ item.office }}</h1>
			</div>
			<div class="title">
			<h1>242.3</h1>
			<h1>{{ item.enterprise }}</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2 shuju-bj-color">
			<div class="biao-title">
			<h1>在职（万人）</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>217.8</h1>
			</div>
			<div class="title">
			<h1>13.5</h1>
			</div>
			<div class="title">
			<h1>142.3</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2">
			<div class="biao-title">
			<h1>离退休（万人）</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>23.8</h1>
			</div>
			<div class="title">
			<h1>16.5</h1>
			</div>
			<div class="title">
			<h1>52.3</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2">
			<div class="biao-title">
			<h1>供养比</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>3.8</h1>
			</div>
			<div class="title">
			<h1>2.5</h1>
			</div>
			<div class="title">
			<h1>1.3</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2">
			<div class="biao-title">
			<h1>收入（亿元）</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>233.8</h1>
			</div>
			<div class="title">
			<h1>24.5</h1>
			</div>
			<div class="title">
			<h1>341.3</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2">
			<div class="biao-title">
			<h1>支出（亿元）</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>533.8</h1>
			</div>
			<div class="title">
			<h1>84.5</h1>
			</div>
			<div class="title">
			<h1>541.3</h1>
			</div>
			</div>
			</div>
			<div class="shuju-table-line2">
			<div class="biao-title">
			<h1>结余（亿元）</h1>
			</div>
			<div class="title-flex">
			<div class="title">
			<h1>33.8</h1>
			</div>
			<div class="title">
			<h1>34.5</h1>
			</div>
			<div class="title">
			<h1>341.3</h1>
			</div>
			</div>
			</div>
			<!-- <div class="shuju-table-line2 shuju-bj-color">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>在职（万人）</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>217.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>13.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>142.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="shuju-table-line2">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>离退休（万人）</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>23.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>16.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>52.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="shuju-table-line2">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>供养比</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>3.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>2.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>1.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="shuju-table-line2">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>收入（亿元）</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>233.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>24.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>341.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="shuju-table-line2">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>支出（亿元）</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>533.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>84.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>541.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- <div class="shuju-table-line2">-->
			<!-- <div class="biao-title">-->
			<!-- <h1>结余（亿元）</h1>-->
			<!-- </div>-->
			<!-- <div class="title-flex">-->
			<!-- <div class="title">-->
			<!-- <h1>33.8</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>34.5</h1>-->
			<!-- </div>-->
			<!-- <div class="title">-->
			<!-- <h1>341.3</h1>-->
			<!-- </div>-->
			<!-- </div>-->
			<!-- </div>-->
			</div>
			</div>
			<div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
			@@ -742,903 +742,970 @@
			</div>
			</template>
			<script>
			import echarts from "echarts/lib/echarts";
			import nowSize from "../../../libs/nowSize";
			import {
			getInsured,
			getInstitution,
			getIncome,
			getMigrant,
			getLoan,
			getPersonnel,
			getLabourTable,
			getLabourChart
			} from "@/api/index";
			import echarts from "echarts/lib/echarts";
			import nowSize from "../../../libs/nowSize";
			import {
			getInsured,
			getInstitution,
			getIncome,
			getMigrant,
			getLoan,
			getPersonnel,
			getLabourTable,
			getLabourChart,
			getInsuranceChart,
			getTownTable
			} from "@/api/index";

			export default {
			name: "index",
			data() {
			return {
			// 被保险人
			Insured: {},
			// 首页市直单位数据
			Institution: {},
			// 人均可支配收入
			Income: {},
			// 查询欠薪追缴
			Migrant: {},
			// 查询创业担保贷款数据接口
			Loan: {},
			// 23. 查询人才建设数据接口
			Personnel: {},
			// 24. 查询首页就业数据表格接口
			LabourTable: {},
			// 25.首页就业数据折线图
			addJob: [],
			reJob: [],
			hardJob: [],
			LabourChartYear: []
			}
			export default {
			name: "index",
			data() {
			return {
			// 被保险人
			Insured: {},
			// 首页市直单位数据
			Institution: {},
			// 人均可支配收入
			Income: {},
			// 查询欠薪追缴
			Migrant: {},
			// 查询创业担保贷款数据接口
			Loan: {},
			// 23. 查询人才建设数据接口
			Personnel: {},
			// 24. 查询首页就业数据表格接口
			LabourTable: {},
			// 25.首页就业数据折线图
			JiuYeEchart: {
			addJob: [],
			reJob: [],
			hardJob: [],
			LabourChartYear: []
			},
			// 26. 查询首页养老、工伤、失业保险折线图接口
			// 城镇职工养老
			YangLaoEchart: {
			years: [],
			shouru: [],
			zhichu: [],
			jieyu: []
			},
			// 失业保险
			ShiYeEchart: {
			years: [],
			shouru: [],
			zhichu: [],
			jieyu: []
			},
			// 工伤
			GongShangEchart: {
			years: [],
			shouru: [],
			zhichu: [],
			jieyu: []
			},
			// 27. 查询首页城镇职工养老表格数据接口
			TownTable:[]
			}
			},
			mounted() {
			this.jiuyeshujuEcharts()
			this.chengzhenZhigongYanglaoEcharts()
			this.shiyeBaoxianEcharts()
			this.gongshangBaoxianEcharts()
			this.getInsured()
			this.getInstitution()
			this.getIncome()
			this.getMigrant()
			this.getLoan()
			this.getPersonnel()
			this.getLabourTable()
			this.getLabourChart()
			this.getInsuranceChart(),
			this.getTownTable()
			},
			filters: {
			dataFilter(type) {
			switch (type) {
			case '1':
			return '城镇新增就业人数'
			break
			case '2':
			return '城镇失业人员实现再就业人数'
			break
			case '3':
			return '城镇就业困难人员实现再就业人数'
			break
			case '4':
			return '农村劳动力向非农产业转移人数'
			case '7':
			return '城镇登记失业率'
			default:
			break
			}
			}
			},
			methods: {
			/就业数据/
			jiuyeshujuEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			mounted() {
			this.jiuyeshujuEcharts()
			this.chengzhenZhigongYanglaoEcharts()
			this.shiyeBaoxianEcharts()
			this.gongshangBaoxianEcharts()
			this.getInsured()
			this.getInstitution()
			this.getIncome()
			this.getMigrant()
			this.getLoan()
			this.getPersonnel()
			this.getLabourTable()
			this.getLabourChart()
			legend: {
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '0%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			filters: {
			dataFilter(type) {
			switch (type) {
			case '1':
			return '城镇新增就业人数'
			break
			case '2':
			return '城镇失业人员实现再就业人数'
			break
			case '3':
			return '城镇就业困难人员实现再就业人数'
			break
			case '4':
			return '农村劳动力向非农产业转移人数'
			case '7':
			return '城镇登记失业率'
			default:
			break
			}
			}
			grid: {
			top: '20%',
			left: '3%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			methods: {
			/就业数据/
			jiuyeshujuEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			data: ['总数', '在职职工', '离退休'],
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '0%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '3%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: this.LabourChartYear,
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: false,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			},
			// 刻度设置
			axisTick: {
			show: false
			}
			},
			series: [{
			name: '总数',
			type: 'line',
			data: this.addJob
			},
			{
			name: '在职职工',
			type: 'line',
			data: this.reJob
			},
			{
			name: '离退休',
			type: 'line',
			data: this.hardJob
			}]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/城镇职工养老/
			chengzhenZhigongYanglaoEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			data: ['总数', '在职职工', '离退休'],
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '0%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '总数',
			type: 'line',
			data: [370, 332, 401, 534, 490, 530, 910]
			},
			{
			name: '在职职工',
			type: 'line',
			data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
			name: '离退休',
			type: 'line',
			data: [150, 132, 201, 154, 190, 330, 410]
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/失业保险/
			shiyeBaoxianEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			data: ['总数', '在职职工', '离退休'],
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(1),
			right: '0%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '总数',
			type: 'line',
			data: [370, 332, 401, 534, 490, 530, 910]
			},
			{
			name: '在职职工',
			type: 'line',
			data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
			name: '离退休',
			type: 'line',
			data: [150, 132, 201, 154, 190, 330, 410]
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/工伤保险/
			gongshangBaoxianEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			data: ['总数', '在职职工', '离退休'],
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '0%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '总数',
			type: 'line',
			data: [370, 332, 401, 534, 490, 530, 910]
			},
			{
			name: '在职职工',
			type: 'line',
			data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
			name: '离退休',
			type: 'line',
			data: [150, 132, 201, 154, 190, 330, 410]
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			// 查询首页养老保险参保人数，社保卡人数
			getInsured() {
			getInsured().then(res => {
			if (res.code === 1000) {
			this.Insured = res.obj
			} else {
			this.$message.error('获取信息失败')
			}
			})
			},
			// 查询首页市直单位数据接口
			getInstitution() {
			getInstitution().then(res => {
			if (res.code === 1000) {
			this.Institution = res.obj
			} else {
			this.$message.error('获取信息失败')
			}
			})
			},
			// 查询人均可支配收入数据接口
			getIncome() {
			getIncome().then(res => {
			if (res.code === 1000) {
			this.Income = res.obj
			}
			})
			},
			// 查询欠薪追缴数据接口
			getMigrant() {
			getMigrant().then(res => {
			if (res.code === 1000) {
			this.Migrant = res.obj
			}
			})
			},
			// 查询创业担保贷款数据接口
			getLoan() {
			getLoan().then(res => {
			if (res.code === 1000) {
			this.Loan = res.obj
			}
			})
			},
			// 23. 查询人才建设数据接口
			getPersonnel() {
			getPersonnel().then(res => {
			if (res.code === 1000) {
			this.Personnel = res.obj
			}
			})
			},
			// 24. 查询首页就业数据表格接口
			getLabourTable() {
			getLabourTable().then(res => {
			this.LabourTable = res.list
			})
			},
			// 25. 查询首页就业数据折线图接口
			getLabourChart() {
			getLabourChart().then(res => {
			console.log(res);
			if (res.code === 1000) {
			this.LabourChartYear = res.obj.years;
			this.addJob = res.obj.addJob;
			this.reJob = res.obj.hardJob;
			this.hardJob = res.obj.reJob;
			this.jiuyeshujuEcharts()
			}
			})
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: this.JiuYeEchart.LabourChartYear,
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: false,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			},
			// 刻度设置
			axisTick: {
			show: false
			}
			},
			series: [{
			name: '城镇新增就业',
			type: 'line',
			data: this.JiuYeEchart.addJob
			},
			{
			name: '失业再就业',
			type: 'line',
			data: this.JiuYeEchart.reJob
			},
			{
			name: '困难再就业',
			type: 'line',
			data: this.JiuYeEchart.hardJob
			}]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/城镇职工养老/
			chengzhenZhigongYanglaoEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '10%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: this.YangLaoEchart.years,
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '收入',
			type: 'line',
			data: this.YangLaoEchart.shouru
			},
			{
			name: '支出',
			type: 'line',
			data: this.YangLaoEchart.zhichu
			},
			{
			name: '结余',
			type: 'line',
			data: this.YangLaoEchart.jieyu
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/失业保险/
			shiyeBaoxianEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(1),
			right: '10%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: this.ShiYeEchart.years,
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '收入',
			type: 'line',
			data: this.ShiYeEchart.shouru
			},
			{
			name: '支出',
			type: 'line',
			data: this.ShiYeEchart.zhichu
			},
			{
			name: '结余',
			type: 'line',
			data: this.ShiYeEchart.jieyu
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			/工伤保险/
			gongshangBaoxianEcharts() {
			let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
			let option = {
			color: ['#FF5151', '#51FF5D', '#FFD151'],
			tooltip: {
			show: true,
			trigger: 'axis'
			},
			legend: {
			itemWidth: nowSize(24),
			itemHeight: nowSize(4),
			itemGap: nowSize(10),
			right: '10%',
			top: '0%',
			textStyle: {
			color: '#FFFFFF',
			fontSize: nowSize(18),
			}
			},
			grid: {
			top: '20%',
			left: '1%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: this.GongShangEchart.years,
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			show: true,
			textStyle: {
			color: "#fff",
			fontSize: nowSize(20)
			}
			},
			axisLine: {
			lineStyle: {
			color: "#999999",
			width: 1,
			type: "solid"
			}
			},
			splitLine: {
			show: false
			}
			},
			series: [
			{
			name: '收入',
			type: 'line',
			data: this.GongShangEchart.shouru
			},
			{
			name: '支出',
			type: 'line',
			data: this.GongShangEchart.zhichu
			},
			{
			name: '结余',
			type: 'line',
			data: this.GongShangEchart.jieyu
			}
			]
			};
			myEchart.setOption(option)
			window.addEventListener('resize', function () {
			myEchart.resize()
			})
			},
			// 查询首页养老保险参保人数，社保卡人数
			getInsured() {
			getInsured().then(res => {
			if (res.code === 1000) {
			this.Insured = res.obj
			} else {
			this.$message.error('获取信息失败')
			}
			};
			})
			},
			// 查询首页市直单位数据接口
			getInstitution() {
			getInstitution().then(res => {
			if (res.code === 1000) {
			this.Institution = res.obj
			} else {
			this.$message.error('获取信息失败')
			}
			})
			},
			// 查询人均可支配收入数据接口
			getIncome() {
			getIncome().then(res => {
			if (res.code === 1000) {
			this.Income = res.obj
			}
			})
			},
			// 查询欠薪追缴数据接口
			getMigrant() {
			getMigrant().then(res => {
			if (res.code === 1000) {
			this.Migrant = res.obj
			}
			})
			},
			// 查询创业担保贷款数据接口
			getLoan() {
			getLoan().then(res => {
			if (res.code === 1000) {
			this.Loan = res.obj
			}
			})
			},
			// 23. 查询人才建设数据接口
			getPersonnel() {
			getPersonnel().then(res => {
			if (res.code === 1000) {
			this.Personnel = res.obj
			}
			})
			},
			// 24. 查询首页就业数据表格接口
			getLabourTable() {
			getLabourTable().then(res => {
			this.LabourTable = res.list
			})
			},
			// 25. 查询首页就业数据折线图接口
			getLabourChart() {
			getLabourChart().then(res => {
			if (res.code === 1000) {
			this.JiuYeEchart.LabourChartYear = res.obj.years;
			this.JiuYeEchart.addJob = res.obj.addJob;
			this.JiuYeEchart.reJob = res.obj.hardJob;
			this.JiuYeEchart.hardJob = res.obj.reJob;
			this.jiuyeshujuEcharts()
			}
			})
			},
			// 26. 查询首页养老、工伤、失业保险折线图接口
			async getInsuranceChart() {
			// 城镇职工养老
			await getInsuranceChart({type: 1}).then(res => {
			if (res.code === 1000) {
			this.YangLaoEchart.shouru = res.obj.shouru
			this.YangLaoEchart.zhichu = res.obj.zhichu
			this.YangLaoEchart.jieyu = res.obj.jieyu
			this.YangLaoEchart.years = res.obj.years
			this.chengzhenZhigongYanglaoEcharts()
			}
			})
			// 失业保险
			await getInsuranceChart({type: 5}).then(res => {
			if (res.code === 1000) {
			this.ShiYeEchart.shouru = res.obj.shouru
			this.ShiYeEchart.zhichu = res.obj.zhichu
			this.ShiYeEchart.jieyu = res.obj.jieyu
			this.ShiYeEchart.years = res.obj.years
			this.shiyeBaoxianEcharts()
			}
			})
			// 工伤保险
			await getInsuranceChart({type: 6}).then(res => {
			if (res.code === 1000) {
			this.GongShangEchart.shouru = res.obj.shouru
			this.GongShangEchart.zhichu = res.obj.zhichu
			this.GongShangEchart.jieyu = res.obj.jieyu
			this.GongShangEchart.years = res.obj.years
			this.gongshangBaoxianEcharts()
			}
			})
			},
			// 27. 查询首页城镇职工养老表格数据接口
			getTownTable() {
			getTownTable().then(res => {
			console.log(res);
			if(res.code ===1000){
			this.TownTable = res.list
			}
			})
			}
			}
			};
			</script>
			<style lang="scss" scoped>
			@import "../../../assets/css/base";
			@import "../../../assets/css/mixin";
			@import "../../../assets/css/base";
			@import "../../../assets/css/mixin";

			.index-wrap {
			.index-wrap {
			width: 100%;
			height: 100%;
			padding: 0 0.078125rem /* 20/256 */
			;
			box-sizing: border-box;

			.index-line-box {
			width: 100%;
			height: 100%;
			padding: 0 0.078125rem /* 20/256 */
			display: flex;
			margin-top: 0.125rem /* 32/256 */
			;
			box-sizing: border-box;

			.index-line-box {
			width: 100%;
			display: flex;
			margin-top: 0.125rem /* 32/256 */
			.yanglao-block {
			width: 2.3046875rem /* 590/256 */
			;
			height: 0.8984375rem /* 230/256 */
			;
			background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 0.078125rem /* 20/256 */
			;
			position: relative;

			.yanglao-block {
			width: 2.3046875rem /* 590/256 */
			img {
			width: 0.3125rem /* 80/256 */
			;
			height: 0.8984375rem /* 230/256 */
			height: 0.3125rem /* 80/256 */
			;
			background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
			background-size: 100% 100%;
			}

			h1 {
			color: #fff;
			text-align: center;
			font-size: $fontSize-24;
			line-height: 1.3;
			}

			h2 {
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;
			text-align: center;

			.bigger {
			font-size: $fontSize-48;
			color: $color-blue;
			}
			}

			.yanglao-block-inside {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0 0.078125rem /* 20/256 */
			;
			position: relative;

			img {
			width: 0.3125rem /* 80/256 */
			;
			height: 0.3125rem /* 80/256 */
			;
			}

			h1 {
			color: #fff;
			text-align: center;
			font-size: $fontSize-24;
			line-height: 1.3;
			}

			h2 {
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;
			text-align: center;

			.bigger {
			font-size: $fontSize-48;
			color: $color-blue;
			}
			}

			.yanglao-block-inside {
			width: 100%;
			.inside-left {
			display: flex;
			flex: 1;
			justify-content: right;
			margin-left: 0.15625rem /* 40/256 */
			;
			}

			.inside-left {
			display: flex;
			flex: 1;
			justify-content: right;
			margin-left: 0.15625rem /* 40/256 */
			;
			}
			.inside-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			}

			.inside-right {
			.inside-box-block {
			display: flex;
			width: 50%;
			justify-content: center;
			align-items: center;

			.line-center {
			display: flex;
			flex-direction: column;
			flex: 1;
			}

			.inside-box-block {
			display: flex;
			width: 50%;
			justify-content: center;
			align-items: center;

			.line-center {
			display: flex;
			flex-direction: column;
			justify-content: center;

			h2 {
			line-height: 1.2;
			}

			.small {
			font-size: $fontSize-24;
			color: $color-blue;
			}
			h2 {
			line-height: 1.2;
			}
			}
			}

			.chuangye-box {
			flex-wrap: wrap;
			}

			.yanglao-block-inside2 {
			width: 100%;
			display: flex;
			margin-top: 0.0390625rem /* 10/256 */
			;

			.inside-left2 {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.danwei-box {
			display: flex;
			justify-content: center;

			.rightMargin {
			margin-right: 0.0390625rem /* 10/256 */
			;
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;
			text-align: center;

			.bigger {
			font-size: $fontSize-32;
			}
			}
			.small {
			font-size: $fontSize-24;
			color: $color-blue;
			}
			}
			}
			}

			.yanglao-block2 {
			width: 2.3046875rem /* 590/256 */
			;
			height: 0.8984375rem /* 230/256 */
			;
			background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
			background-size: 100% 100%;
			.chuangye-box {
			flex-wrap: wrap;
			}

			.yanglao-block-inside2 {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 0.078125rem /* 20/256 */
			margin-top: 0.0390625rem /* 10/256 */
			;

			.yaolao-box {
			.inside-left2 {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:first-child {
			margin-left: 0.078125rem /* 20/256 */
			;
			.danwei-box {
			display: flex;
			justify-content: center;

			.rightMargin {
			margin-right: 0.0390625rem /* 10/256 */
			;
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;
			text-align: center;

			.bigger {
			font-size: $fontSize-32;
			}
			}
			}
			}

			img {
			width: 0.3125rem /* 80/256 */
			;
			height: 0.3125rem /* 80/256 */
			;
			}

			h1 {
			color: #fff;
			text-align: center;
			font-size: $fontSize-24;
			line-height: 1.3;
			}

			h2 {
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;

			.bigger {
			font-size: $fontSize-48;
			color: $color-blue;
			}
			}
			}

			.fu-biaoti {
			position: absolute;
			left: 0.0078125rem /* 2/256 */
			;
			top: 0.1171875rem /* 30/256 */
			;
			background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
			background-size: 100% 100%;
			width: 0.125rem /* 32/256 */
			;
			height: 0.65234375rem /* 167/256 */
			;
			display: flex;
			align-items: center;
			justify-content: center;

			h1 {
			font-size: $fontSize-20;
			color: $color-dark;
			text-align: center;
			}
			}
			}

			.index-line-box2 {
			.yanglao-block2 {
			width: 2.3046875rem /* 590/256 */
			;
			height: 0.8984375rem /* 230/256 */
			;
			background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			margin-top: 0.125rem /* 32/256 */
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 0.078125rem /* 20/256 */
			;

			.shu-ju-box {
			width: 4.765625rem /* 1220/256 */
			.yaolao-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:first-child {
			margin-left: 0.078125rem /* 20/256 */
			;
			}
			}

			img {
			width: 0.3125rem /* 80/256 */
			;
			height: 1.6015625rem /* 410/256 */
			height: 0.3125rem /* 80/256 */
			;
			background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center;
			background-size: 100% 100%;
			position: relative;
			margin: 0 0.078125rem /* 20/256 */
			}

			h1 {
			color: #fff;
			text-align: center;
			font-size: $fontSize-24;
			line-height: 1.3;
			}

			h2 {
			color: #fff;
			font-size: $fontSize-20;
			line-height: 1.3;

			.bigger {
			font-size: $fontSize-48;
			color: $color-blue;
			}
			}
			}

			.fu-biaoti {
			position: absolute;
			left: 0.0078125rem /* 2/256 */
			;
			top: 0.1171875rem /* 30/256 */
			;
			background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
			background-size: 100% 100%;
			width: 0.125rem /* 32/256 */
			;
			height: 0.65234375rem /* 167/256 */
			;
			display: flex;
			align-items: center;
			justify-content: center;

			h1 {
			font-size: $fontSize-20;
			color: $color-dark;
			text-align: center;
			}
			}
			}

			.index-line-box2 {
			display: flex;
			margin-top: 0.125rem /* 32/256 */
			;

			.shu-ju-box {
			width: 4.765625rem /* 1220/256 */
			;
			height: 1.6015625rem /* 410/256 */
			;
			background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center;
			background-size: 100% 100%;
			position: relative;
			margin: 0 0.078125rem /* 20/256 */
			;
			display: flex;

			.shuju-title-box {
			position: absolute;
			left: 0.390625rem /* 100/256 */
			;
			top: 0;

			h1 {
			font-size: $fontSize-32;
			color: $color-blue;
			position: relative;

			&:after {
			content: '';
			background: url("../../../assets/images/zhuangshi.png") no-repeat center;
			background-size: 100% 100%;
			width: 0.52734375rem /* 135/256 */
			;
			height: 0.0625rem /* 16/256 */
			;
			position: absolute;
			left: 0.78125rem /* 200/256 */
			;
			top: 0.046875rem /* 12/256 */
			;
			}
			}
			}

			.shuju-main-box {
			width: 100%;
			padding: 0.234375rem /* 60/256 */
			0.1171875rem /* 30/256 */
			;
			box-sizing: border-box;
			display: flex;

			.shuju-title-box {
			position: absolute;
			left: 0.390625rem /* 100/256 */
			;
			top: 0;

			h1 {
			font-size: $fontSize-32;
			color: $color-blue;
			position: relative;

			&:after {
			content: '';
			background: url("../../../assets/images/zhuangshi.png") no-repeat center;
			background-size: 100% 100%;
			width: 0.52734375rem /* 135/256 */
			;
			height: 0.0625rem /* 16/256 */
			;
			position: absolute;
			left: 0.78125rem /* 200/256 */
			;
			top: 0.046875rem /* 12/256 */
			;
			}
			}
			}

			.shuju-main-box {
			width: 100%;
			padding: 0.234375rem /* 60/256 */
			0.1171875rem /* 30/256 */
			;
			box-sizing: border-box;
			display: flex;

			.shuju-table {
			width: 3.1328125rem /* 802/256 */
			;
			height: 1.2109375rem /* 310/256 */
			;
			}
			}

			.shuju-table {
			width: 100%;
			display: flex;
			flex-direction: column;

			.shuju-table-line {
			width: 100%;
			display: flex;

			.biao-title {
			width: 0.859375rem /* 220/256 */
			;
			}

			.title-flex {
			width: calc(100% - 0.859375rem);
			display: flex;
			}

			.title {
			flex: 1;
			display: flex;
			align-items: center;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: center;
			}
			}

			}

			.shuju-scroll {
			max-height: 1.09375rem /* 280/256 */
			;
			@include overflow-y()
			}

			.shuju-table-line2 {
			width: 100%;
			display: flex;
			padding: 0.0390625rem /* 10/256 */
			0;

			&:nth-child(odd) {
			background: rgba(81, 210, 255, 0.10);
			}

			.title {
			flex: 1;
			display: flex;
			align-items: center;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: center;
			line-height: 1.5;
			}

			.fontColor {
			color: $color-blue;
			}
			}

			.title-flex {
			width: calc(100% - 0.859375rem);
			display: flex;
			}

			.biao-title {
			width: 0.859375rem /* 220/256 */
			;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: right;
			line-height: 1.5;
			@include ellipsis()
			}

			.fontColor {
			color: $color-blue;
			}
			}
			}

			.shuju-bj-color {
			background: rgba(81, 210, 255, 0.10);
			}
			}

			.shuju-echarts {
			width: 1.3671875rem /* 350/256 */
			width: 3.1328125rem /* 802/256 */
			;
			height: 1.2109375rem /* 310/256 */
			;
			}
			}

			.shuju-table {
			width: 100%;
			display: flex;
			flex-direction: column;

			.shuju-table-line {
			width: 100%;
			display: flex;

			.biao-title {
			width: 0.859375rem /* 220/256 */
			;
			}

			.title-flex {
			width: calc(100% - 0.859375rem);
			display: flex;
			}

			.title {
			flex: 1;
			display: flex;
			align-items: center;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: center;
			}
			}

			}

			.shuju-scroll {
			max-height: 1.09375rem /* 280/256 */
			;
			@include overflow-y()
			}

			.shuju-table-line2 {
			width: 100%;
			display: flex;
			padding: 0.0390625rem /* 10/256 */
			0;

			&:nth-child(odd) {
			background: rgba(81, 210, 255, 0.10);
			}

			.title {
			flex: 1;
			display: flex;
			align-items: center;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: center;
			line-height: 1.5;
			}

			.fontColor {
			color: $color-blue;
			}
			}

			.title-flex {
			width: calc(100% - 0.859375rem);
			display: flex;
			}

			.biao-title {
			width: 0.859375rem /* 220/256 */
			;

			h1 {
			font-size: $fontSize-26;
			color: $color-white;
			text-align: right;
			line-height: 1.5;
			@include ellipsis()
			}

			.fontColor {
			color: $color-blue;
			}
			}
			}

			.shuju-bj-color {
			background: rgba(81, 210, 255, 0.10);
			}
			}

			.shuju-echarts {
			width: 1.3671875rem /* 350/256 */
			;
			height: 1.2109375rem /* 310/256 */
			;
			}
			}
			}
			}
			</style>