zhangxiaoxu123
2022-09-13 08b5ddfa9a0a2ed52bd7d7b98ca16ef4dcc610a6
页面修改
16个文件已修改
2178 ■■■■ 已修改文件
config/index.js 3 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
index.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 172 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/businessPolicy.js 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/index.js 26 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/jiuyeAndChuangye.js 16 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/laborRelations.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/otherBusiness.js 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/personnelTalents.js 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/shehuiBaozhang.js 20 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/css/main.css 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/components/showIndexTitle.vue 35 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/login.vue 10 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/show/index/index.vue 1853 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
config/index.js
@@ -3,7 +3,8 @@
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require("path");
let url = 'http://192.168.0.140:8081'
// let url = 'http://192.168.0.140:8081'
let url = 'http://39.96.92.240:9090'
module.exports = {
  dev: {
index.html
@@ -4,7 +4,7 @@
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>视频管理</title>
    <title>石家庄人社局业务运行数据分析平台</title>
    <link rel="icon" type="image/x-icon" href="./src/assets/img/logo.ico" />
</head>
package.json
@@ -1,86 +1,86 @@
{
  "name": "test",
  "version": "1.0.0",
  "description": "MyAdmin",
  "author": "谷雪健 <15511604615@163.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "echarts": "^4.7.0",
    "element-ui": "^2.15.6",
    "lib-flexible": "^0.3.2",
    "mavon-editor": "^2.8.3",
    "moment": "^2.29.2",
    "node-sass": "^4.14.1",
    "nprogress": "^0.2.0",
    "postcss-px2rem-exclude": "^0.0.6",
    "sass-loader": "^7.3.1",
    "v-fit-columns": "^0.2.0",
    "vcolorpicker": "^0.1.8",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.5.1",
    "vuex-i18n": "^1.13.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.4.3",
    "optimize-css-assets-webpack-plugin": "^3.2.1",
    "ora": "^1.2.0",
    "portfinder": "^1.0.25",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "px2rem-loader": "^0.1.9",
    "rimraf": "^2.7.1",
    "semver": "^5.7.1",
    "shelljs": "^0.8.5",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.11.5",
    "webpack-merge": "^4.2.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 256,
        "exclude": "/node_modules|element/i"
      }
    }
  }
}
{
  "name": "test",
  "version": "1.0.0",
  "description": "MyAdmin",
  "author": "谷雪健 <15511604615@163.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.26.1",
    "echarts": "^4.7.0",
    "element-ui": "^2.15.8",
    "lib-flexible": "^0.3.2",
    "mavon-editor": "^2.8.3",
    "moment": "^2.29.2",
    "node-sass": "^4.14.1",
    "nprogress": "^0.2.0",
    "postcss-px2rem-exclude": "^0.0.6",
    "sass-loader": "^7.3.1",
    "v-fit-columns": "^0.2.0",
    "vcolorpicker": "^0.1.8",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.5.1",
    "vuex-i18n": "^1.13.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.4.3",
    "optimize-css-assets-webpack-plugin": "^3.2.1",
    "ora": "^1.2.0",
    "portfinder": "^1.0.25",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "px2rem-loader": "^0.1.9",
    "rimraf": "^2.7.1",
    "semver": "^5.7.1",
    "shelljs": "^0.8.5",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.11.5",
    "webpack-merge": "^4.2.2"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 256,
        "exclude": "/node_modules|element/i"
      }
    }
  }
}
src/api/businessPolicy.js
@@ -2,15 +2,15 @@
// 37. 查询营商政策五个统计数量接口
export const getCount = params=> {
  return postRequest('/ybg/webservice/app/policy/getCount.do',params)
  return postRequest('/webservice/app/policy/getCount.do',params)
}
//38.查询营商政策和相关报道列表接口
export const getList = (params) => {
  return postRequest('/ybg/webservice/app/policy/getList.do',params)
  return postRequest('/webservice/app/policy/getList.do',params)
}
//39.查询营商政策详情接口
export const getDetail = (params) => {
  return postRequest('/ybg/webservice/app/policy/getDetail.do',params)
  return postRequest('/webservice/app/policy/getDetail.do',params)
}
src/api/index.js
@@ -2,7 +2,7 @@
// 后台用户相关
export const login = params => {
  return postRequest('/ybg/webservice/phone/login.do', params);
  return postRequest('/webservice/phone/login.do', params);
}
export const getAdminIndex = params => {
  return getRequest('/getAdminIndex', params);
@@ -12,50 +12,50 @@
// 首页接口
// 18. 查询首页养老保险参保人数,社保卡人数接口
export const getInsured = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInsured.do', params)
  return postRequest('/webservice/app/homepage/getInsured.do', params)
}
// 19. 查询首页市直单位数据接口
export const getInstitution = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInstitution.do', params)
  return postRequest('/webservice/app/homepage/getInstitution.do', params)
}
// 20. 查询人均可支配收入数据接口
export const getIncome = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getIncome.do', params)
  return postRequest('/webservice/app/homepage/getIncome.do', params)
}
// 21. 查询欠薪追缴数据接口
export const getMigrant = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getMigrant.do', params)
  return postRequest('/webservice/app/homepage/getMigrant.do', params)
}
// 22. 查询创业担保贷款数据接口
export const getLoan = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getLoan.do', params)
  return postRequest('/webservice/app/homepage/getLoan.do', params)
}
// 23. 查询人才建设数据接口
export const getPersonnel = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getPersonnel.do', params)
  return postRequest('/webservice/app/homepage/getPersonnel.do', params)
}
// 24. 查询首页就业数据表格接口
export const getLabourTable = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getLabourTable.do', params)
  return postRequest('/webservice/app/homepage/getLabourTable.do', params)
}
// 25. 查询首页就业数据折线图接口
export const getLabourChart = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getLabourChart.do', params)
  return postRequest('/webservice/app/homepage/getLabourChart.do', params)
}
// 26. 查询首页养老、工伤、失业保险折线图接口
export const getInsuranceChart = (params) =>{
  return postRequest('/ybg/webservice/app/homepage/getInsuranceChart.do',params)
  return postRequest('/webservice/app/homepage/getInsuranceChart.do',params)
}
// 27. 查询首页城镇职工养老表格数据接口
export const getTownTable = (params) =>{
  return postRequest('/ybg/webservice/app/homepage/getTownTable.do',params)
  return postRequest('/webservice/app/homepage/getTownTable.do',params)
}
//28.查询首页工伤、失业保险表格数据接口
export const getInsurTable = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInsurTable.do',params)
  return postRequest('/webservice/app/homepage/getInsurTable.do',params)
}
//40.退出登录接口
export const logout = (params) => {
  return postRequest('/ybg/webservice/phone/logout.do',params)
  return postRequest('/webservice/phone/logout.do',params)
}
src/api/jiuyeAndChuangye.js
@@ -2,40 +2,40 @@
//2.查询劳动就业表格数据接口
export const getLabourTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getLabourTable.do',params)
  return postRequest('/webservice/app/employment/getLabourTable.do',params)
}
//3.查询劳动就业折线图数据接口
export const getLabourLine = (params) => {
  return postRequest('/ybg/webservice/app/employment/getLabourLine.do',params)
  return postRequest('/webservice/app/employment/getLabourLine.do',params)
}
//4.查询创业担保贷款统计表数据接口
export const getLoanTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getLoanTable.do',params)
  return postRequest('/webservice/app/employment/getLoanTable.do',params)
}
//5.查询人力资源服务产业园统计表数据接口
export const getParkTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getParkTable.do',params)
  return postRequest('/webservice/app/employment/getParkTable.do',params)
}
//6.查询就业情况统计表数据接口
export const getEmployTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getEmployTable.do', params)
  return postRequest('/webservice/app/employment/getEmployTable.do', params)
}
//7.毕业生统计表格数据接口
export const getGraduateTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getGraduateTable.do', params)
  return postRequest('/webservice/app/employment/getGraduateTable.do', params)
}
// 8.查询职业培训统计表格数据接口
export const getTrainTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getTrainTable.do', params)
  return postRequest('/webservice/app/employment/getTrainTable.do', params)
}
//9.查询职业培训统计图表数据接口
export const getTrainChart = (params) => {
  return postRequest('/ybg/webservice/app/employment/getTrainChart.do', params)
  return postRequest('/webservice/app/employment/getTrainChart.do', params)
}
src/api/laborRelations.js
@@ -1,5 +1,5 @@
import {getRequest, postRequest} from "../libs/axios";
export const getWorkerTable = (params) => {
  return postRequest('/ybg/webservice/app/labour/getWorkerTable.do')
  return postRequest('/webservice/app/labour/getWorkerTable.do')
}
src/api/otherBusiness.js
@@ -2,13 +2,13 @@
// 31. 查询居民人均可支配收入表格数据接口
export const getIncomeTable = (params) => {
  return postRequest('/ybg/webservice/app/asset/getIncomeTable.do',params)
  return postRequest('/webservice/app/asset/getIncomeTable.do',params)
}
// 32. 查询居民可支配收入分析图数据接口
export const getIncomeLine = (params) => {
  return postRequest('/ybg/webservice/app/asset/getIncomeLine.do',params)
  return postRequest('/webservice/app/asset/getIncomeLine.do',params)
}
//33.查询居民人均可支配收入表格数据接口
export const getAchievementTable = (params) => {
  return postRequest('/ybg/webservice/app/asset/getAchievementTable.do',params)
  return postRequest('/webservice/app/asset/getAchievementTable.do',params)
}
src/api/personnelTalents.js
@@ -2,15 +2,15 @@
// 29. 查询事业单位人员情况表格数据接口
export const getPersonTable = (params) => {
  return postRequest('/ybg/webservice/app/personnel/getPersonTable.do', params)
  return postRequest('/webservice/app/personnel/getPersonTable.do', params)
}
// 查询事业年度变化情况折线图数据接口
export const getUnitLine = (params) => {
  return postRequest('/ybg/webservice/app/personnel/ getUnitLine.do', params)
  return postRequest('/webservice/app/personnel/ getUnitLine.do', params)
}
//30.查询人才绿卡购房补贴表格数据接口
export const getPersonCardTable = (params) => {
  return postRequest('/ybg/webservice/app/personnel/getPersonCardTable.do', params)
  return postRequest('/webservice/app/personnel/getPersonCardTable.do', params)
}
src/api/shehuiBaozhang.js
@@ -2,50 +2,50 @@
//10.查询历年社会保险参保人员分析图数据接口
export const getPersonChart = (params) => {
  return postRequest('/ybg/webservice/app/social/getPersonChart.do', params)
  return postRequest('/webservice/app/social/getPersonChart.do', params)
}
//11.查询社会保险参保人员统计表数据接口
export const getPersonTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getPersonTable.do', params)
  return postRequest('/webservice/app/social/getPersonTable.do', params)
}
//34.查询社会保障基金统计表数据接口
export const getStatisticsTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getStatisticsTable.do', params)
  return postRequest('/webservice/app/social/getStatisticsTable.do', params)
}
//12.查询职工养老保险参保人数数据接口
export const getSecurityTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getSecurityTable.do', params)
  return postRequest('/webservice/app/social/getSecurityTable.do', params)
}
//13.查询近一年职工养老保险参保人数折线图数据接口
export const getSecurityDetailChart = (params) => {
  return postRequest('/ybg/webservice/app/social/getSecurityDetailChart.do', params)
  return postRequest('/webservice/app/social/getSecurityDetailChart.do', params)
}
//14.查询社会保险参保人数表格数据接口
export const getInsuranceTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getInsuranceTable.do', params)
  return postRequest('/webservice/app/social/getInsuranceTable.do', params)
}
//15.查询社保征缴收入明细总览表格数据接口
export const getFundincomeTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getFundincomeTable.do', params)
  return postRequest('/webservice/app/social/getFundincomeTable.do', params)
}
//16.查询社保征缴收入和参保人数平均值表格数据接口
export const getAverageTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getAverageTable.do', params)
  return postRequest('/webservice/app/social/getAverageTable.do', params)
}
//17.查询社保卡持卡人数数据接口
export const getCardNumsTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getCardNumsTable.do',params)
  return postRequest('/webservice/app/social/getCardNumsTable.do',params)
}
// 35. 查询历年社保基金数据分析图数据接口
export const getStatisticsChart = (params) => {
  return postRequest('/ybg/webservice/app/social/getStatisticsChart.do',params)
  return postRequest('/webservice/app/social/getStatisticsChart.do',params)
}
src/assets/css/main.css
@@ -44,7 +44,7 @@
.content {
    width: auto;
    height: 100%;
    padding: 10px;
    /*padding: 10px;*/
    overflow-y: scroll;
    box-sizing: border-box;
}
src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue
@@ -11,7 +11,7 @@
          prop="area"
          label="县(市、区)"
          align="center"
          width="220">
          min-width="140">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div class="cell-content-box">{{scope.row.area}}</div>
@@ -19,7 +19,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="january"
          label="1月"
          align="center">
@@ -35,7 +34,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="february"
          label="2月"
          align="center">
@@ -51,7 +49,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="march"
          label="3月"
          align="center">
@@ -65,7 +62,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="april"
          label="4月"
          align="center">
@@ -79,7 +75,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="may"
          label="5月"
          align="center">
@@ -93,7 +88,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="june"
          label="6月"
          align="center">
@@ -107,7 +101,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="july"
          label="7月"
          align="center">
@@ -121,7 +114,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="august"
          label="8月"
          align="center">
@@ -135,7 +127,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="september"
          label="9月"
          align="center">
@@ -149,7 +140,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="october"
          label="10月"
          align="center">
@@ -163,7 +153,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="november"
          label="11月"
          align="center">
@@ -177,7 +166,6 @@
          </template>
        </el-table-column>
        <el-table-column
          width="280"
          prop="december"
          label="12月"
          align="center">
src/pages/components/showIndexTitle.vue
@@ -40,23 +40,23 @@
        </el-menu-item>
      </div>
      <div class="showIndex-right">
        <el-menu-item index="/businessPolicy">
        <!--<el-menu-item index="/businessPolicy">
          <div class="showIndex-block">
            <h1>营商政策</h1>
          </div>
        </el-menu-item>
        </el-menu-item>-->
        <el-menu-item>
          <div class="showIndex-block">
          <div class="showIndex-block" @click="gotoTXL">
            <h1>通讯录</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
        <!--<el-menu-item>
          <div class="showIndex-block" @click="gotoGZZB">
            <h1>工作周报</h1>
          </div>
        </el-menu-item>
        </el-menu-item>-->
        <el-menu-item>
          <div class="showIndex-block">
          <div class="showIndex-block" @click="gotoWDZX">
            <h1>文档中心</h1>
          </div>
        </el-menu-item>
@@ -80,8 +80,20 @@
  },
  mounted() {
      this.$route.meta.routerParent && (this.activeIndex = '/' + this.$route.meta.routerParent)
      window.passToken = this.passToken
      window.passToken2 = this.passToken2
      window.passToken3 = this.passToken3
  },
  methods: {
      passToken() {
          return this.$store.state.user.token
      },
      passToken2() {
          return this.$store.state.user.token
      },
      passToken3() {
          return this.$store.state.user.token
      },
      goOut() {
          this.$confirm('是否退出系统, 是否继续?', '提示', {
              confirmButtonText: '确定',
@@ -93,6 +105,15 @@
              })
          })
      },
      gotoTXL() {
          window.android.passToken(this.$store.state.user.token)
      },
      gotoGZZB() {  //跳转工作周报
          window.android.passToken2(this.$store.state.user.token)
      },
      gotoWDZX() {  //文档中心
          window.android.passToken3(this.$store.state.user.token)
      }
  },
};
src/pages/login.vue
@@ -145,7 +145,7 @@
.login-container {
  width: 10rem;
  height: 6.5625rem;
  background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
  background: url(../assets/images/login/loginBackground.jpg) no-repeat;
  background-size: 100%;
  position: relative;
}
@@ -153,7 +153,7 @@
.title {
  width: 13.0612rem;
  height: 0.5rem;
  background: url(../assets/images/login/top@2x.png) no-repeat;
  background: url(../assets/images/login/top.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: -1.5306rem;
@@ -170,7 +170,7 @@
  position: absolute;
  width: 0.3438rem;
  height: 0.3359rem;
  background: url(../assets/images/login/header@2x.png) no-repeat;
  background: url(../assets/images/login/header.png) no-repeat;
  background-size: 100%;
  border-right: 0.0039rem dashed #51d2ff;
}
@@ -181,14 +181,14 @@
  width: 0.3438rem;
  height: 0.3359rem;
  border-right: 0.0039rem dashed #51d2ff;
  background: url(../assets/images/login/lock@2x_1.png) no-repeat;
  background: url(../assets/images/login/lock_1.png) no-repeat;
  background-size: 100%;
}
.loginBox {
  width: 3.125rem;
  height: 3.1979rem;
  background: url(../assets/images/login/loginBorder@2x.png);
  background: url(../assets/images/login/loginBorder.png);
  background-size: 100%;
  position: relative;
  margin: 0 auto;
src/pages/show/index/index.vue
@@ -35,14 +35,14 @@
            <h1>市值事业单位</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhi }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>万人</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>县(市、区)</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xian }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>万人</h2>
            </div>
          </div>
        </div>
@@ -203,20 +203,20 @@
                    </div>
                    <template>
                      <div class="content">
                        <h1>{{ item.dataType | dataFilter }}</h1>
                        <h1 style="text-align: left">{{ item.dataType | dataFilter }}</h1>
                      </div>
                    </template>
                  </el-tooltip>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>{{ item.monthData }}</h1>
                    <h1 style="text-align: left">{{ item.monthData }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.yearData }}</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">{{ item.finishRate }}</h1>
                    <h1 class="fontColorBlue">{{ item.finishRate }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.plan }}</h1>
@@ -473,1000 +473,1019 @@
  </div>
</template>
<script>
import echarts from "echarts/lib/echarts";
import nowSize from "../../../libs/nowSize";
import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
import {
  getInsured,
  getInstitution,
  getIncome,
  getMigrant,
  getLoan,
  getPersonnel,
  getLabourTable,
  getLabourChart,
  getInsuranceChart,
  getTownTable
} from "@/api/index";
    import echarts from "echarts/lib/echarts";
    import nowSize from "../../../libs/nowSize";
    import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
    import {
        getInsured,
        getInstitution,
        getIncome,
        getMigrant,
        getLoan,
        getPersonnel,
        getLabourTable,
        getLabourChart,
        getInsuranceChart,
        getTownTable
    } from "@/api/index";
export default {
  name: "index",
  components: {
      shiyeAndgongshangBaoxian
  },
  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: [],
      // 28.失业保险
        type:'',
    }
  },
  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()
    // this.getshiyeTable()
    // this.getGongshangTable()
  },
  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'
    export default {
        name: "index",
        components: {
            shiyeAndgongshangBaoxian
        },
        legend: {
          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.JiuYeEchart.LabourChartYear,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
        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: [],
                // 28.失业保险
                type: '',
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
        },
        mounted() {
            console.log(this.$store.state.user.token, 'state=======')
            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()
            // this.getshiyeTable()
            // this.getGongshangTable()
        },
        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
                }
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
        methods: {
            /*就业数据*/
            jiuyeshujuEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
                let option = {
                    color: ['#FF5151', '#51FF5D', '#FFD151'],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        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.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. 查询首页就业数据折线图接口
            async getLabourChart() {
                await 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
                    }
                })
            }
          },
          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. 查询首页就业数据折线图接口
    async getLabourChart() {
      await 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 {
  width: 100%;
  height: 100%;
  padding: 0 0.078125rem /* 20/256 */
;
  box-sizing: border-box;
  .index-line-box {
  .index-wrap {
    width: 100%;
    display: flex;
    margin-top: 0.125rem /* 32/256 */
    height: 100%;
    padding: 0 0.078125rem /* 20/256 */
  ;
    box-sizing: border-box;
    .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%;
    .index-line-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 0.078125rem /* 20/256 */
      margin-top: 0.125rem /* 32/256 */
    ;
      position: relative;
      img {
        width: 0.3125rem /* 80/256 */
      .yanglao-block {
        width: 2.3046875rem /* 590/256 */
      ;
        height: 0.3125rem /* 80/256 */
        height: 0.8984375rem /* 230/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%;
        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;
        .inside-left {
          display: flex;
          flex: 1;
          justify-content: right;
          margin-left: 0.15625rem /* 40/256 */
        img {
          width: 0.2890625rem  /* 74/256 */
        ;
          height: 0.2890625rem  /* 74/256 */
        ;
        }
        .inside-right {
          display: flex;
          flex-direction: column;
          flex: 1;
        h1 {
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
          font-family: Source Han Sans CN, Source Han Sans CN-Light;
          font-weight: 300;
        }
        .inside-box-block {
          display: flex;
          width: 50%;
          justify-content: center;
          align-items: center;
        h2 {
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;
          text-align: center;
          .line-center {
          .bigger {
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }
        .yanglao-block-inside {
          width: 100%;
          display: flex;
          .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-box-block {
            display: flex;
            width: calc(50% - 30px);
            justify-content: left;
            align-items: center;
            &:nth-child(1){
              margin-left: 30px;
            }
            &:nth-child(3){
              margin-left: 30px;
            }
            .line-center {
              display: flex;
              flex-direction: column;
              justify-content: center;
              h2 {
                line-height: 1.2;
              }
              .small {
                font-size: $fontSize-24;
                color: $color-blue;
              }
            }
          }
        }
        .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;
            h2 {
              line-height: 1.2;
            }
            .danwei-box {
              display: flex;
              justify-content: center;
            .small {
              font-size: $fontSize-24;
              color: $color-blue;
            }
          }
        }
      }
              .rightMargin {
                margin-right: 0.0390625rem /* 10/256 */
              ;
                color: #fff;
                font-size: $fontSize-20;
                line-height: 1.3;
                text-align: center;
      .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;
                .bigger {
                  font-size: $fontSize-32;
                }
              }
            }
          }
        }
      }
    }
    .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;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: 0 0.078125rem /* 20/256 */
    ;
      .yaolao-box {
        flex: 1;
      .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;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 0.078125rem /* 20/256 */
      ;
        &:first-child {
          margin-left: 0.078125rem /* 20/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: 0.3125rem /* 80/256 */
        ;
        }
      }
      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 {
    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;
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
        }
          &: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 */
          ;
        h2 {
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;
          .bigger {
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }
      }
      .shuju-main-box {
        width: 100%;
        padding: 0.234375rem /* 60/256 */
        0.1171875rem /* 30/256 */
      .fu-biaoti {
        position: absolute;
        left: 0.0078125rem /* 2/256 */
      ;
        box-sizing: border-box;
        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;
      }
      .shuju-table {
        width: 3.1328125rem /* 802/256 */;
        height: 1.2109375rem /* 310/256 */;
        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;
            justify-content: center;
            h1 {
              font-size: $fontSize-26;
              color: $color-white;
              text-align: center;
            }
          }
        h1 {
          font-size: $fontSize-20;
          color: $color-dark;
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
        }
      }
    }
        .shuju-scroll {
          max-height: 1.09375rem /* 280/256 */
    .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 */
        ;
          @include overflow-y()
          top: 0;
          h1 {
            font-size: $fontSize-32;
            color: $color-blue;
            position: relative;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            &: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-table-line2 {
        .shuju-main-box {
          width: 100%;
          padding: 0.234375rem /* 60/256 */
          0.1171875rem /* 30/256 */
        ;
          box-sizing: border-box;
          display: flex;
          padding: 0.0390625rem /* 10/256 */
          0;
          &:nth-child(odd) {
            background: rgba(81, 210, 255, 0.10);
          }
        }
          .title {
            flex: 1;
        .shuju-table {
          width: 3.1328125rem /* 802/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
          display: flex;
          flex-direction: column;
          .shuju-table-line {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            h1 {
              font-size: $fontSize-26;
              color: $color-white;
              text-align: center;
              line-height: 1.5;
            .biao-title {
              width: 0.859375rem /* 220/256 */
            ;
            }
            .fontColorBlue {
              color: $color-blue;
            .title-flex {
              width: calc(100% - 0.859375rem);
              display: flex;
            }
            .fontColorRed {
              color: #FF3939;
            .title {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              h1 {
                font-size: $fontSize-26;
                color: $color-white;
                text-align: center;
              }
            }
          }
          .title-flex {
            width: calc(100% - 0.859375rem);
            display: flex;
          }
          .biao-title {
            width: 0.859375rem /* 220/256 */
          .shuju-scroll {
            max-height: 1.09375rem /* 280/256 */
          ;
            @include overflow-y()
          }
            h1 {
              font-size: $fontSize-26;
              color: $color-white;
              text-align: right;
              line-height: 1.5;
              @include ellipsis()
          .shuju-table-line2 {
            width: 100%;
            display: flex;
            padding: 0.0390625rem /* 10/256 */
            0;
            &:nth-child(odd) {
              background: rgba(81, 210, 255, 0.10);
            }
            .fontColor {
              color: $color-blue;
            .title {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              h1 {
                font-size: $fontSize-26;
                color: $color-white;
                text-align: center;
                line-height: 1.5;
              }
              .fontColorBlue {
                color: $color-blue;
              }
              .fontColorRed {
                color: #FF3939;
              }
            }
            .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;
                font-family: Source Han Sans CN, Source Han Sans CN-Light;
                font-weight: 300;
                @include ellipsis()
              }
              .fontColor {
                color: $color-blue;
              }
            }
          }
        }
        // 城市职工养老第2,3条数据
        .chengzhen_scroll {
          &:nth-of-type(2) {
          // 城市职工养老第2,3条数据
          .chengzhen_scroll {
            &:nth-of-type(2) {
              background: rgba(81, 210, 255, 0.10);
              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;
              }
            }
            &:nth-of-type(3) {
              background: rgba(81, 210, 255, 0.10);
              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;
              }
            }
          }
          .shuju-bj-color {
            background: rgba(81, 210, 255, 0.10);
            h1 {
              font-size: 24px;
              line-height: 1;
              color: #999999;
            }
          }
          &:nth-of-type(3) {
            background: rgba(81, 210, 255, 0.10);
            h1 {
              font-size: 24px;
              line-height: 1;
              color: #999999;
            }
          }
        }
        .shuju-bj-color {
          background: rgba(81, 210, 255, 0.10);
        .shuju-echarts {
          width: 1.3671875rem /* 350/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
        }
      }
      .shuju-echarts {
        width: 1.3671875rem /* 350/256 */
      ;
        height: 1.2109375rem /* 310/256 */
      ;
      }
    }
  }
}
</style>
src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue
@@ -16,6 +16,7 @@
            align="center"
            prop="dataType"
            label="指标名称"
            min-width="125"
            fixed="left">
          </el-table-column>
          <el-table-column
@@ -84,11 +85,13 @@
            label="12月">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="plan"
            align="center"
            label="省厅计划">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="finish"
            align="center"
            label="当前完成率">
@@ -342,6 +345,8 @@
         color: $color-white;
         text-align: center;
         line-height: 2.5;
         font-family: Source Han Sans CN, Source Han Sans CN-Regular;
         font-weight: 400;
       }
     }
    .laogongJiuyeEcharts{