Merge branch 'SCREEN'

package.json

@@ -9,19 +9,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/vue": "^5.11.3",
     "@tinymce/tinymce-vue": "^2.1.0",
     "ant-design-vue": "^1.7.6",
     "area-data": "^5.0.6",
     "axios": "^0.21.1",
+    "compression-webpack-plugin": "5.0.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.6",
     "echarts": "^5.2.1",
-    "compression-webpack-plugin": "^5.0.1",
     "enquire.js": "^2.1.6",
     "jsencrypt": "^3.2.1",
     "lodash.pick": "^4.4.0",
     "nprogress": "^0.2.0",
     "tinymce": "^5.3.2",
+    "tippy.js": "^6.3.7",
     "vue": "^2.6.11",
     "vue-area-linkage": "^5.1.0",
     "vue-ls": "^3.2.2",

public/development_address_config.js

@@ -26,4 +26,4 @@ window._CONFIG["sendCompanyName"] = "中汽标准所"
 // 票据打印--寄件人地址
 window._CONFIG["sendAddress"] = "天津市东丽区先锋东路68号"
 // 票据打印--寄件人邮编
-window._CONFIG["sendPostCode"] = "300300"
+window._CONFIG["sendPostCode"] = "300300"

public/local_production_address_config.js

@@ -24,5 +24,4 @@ window._CONFIG["sendCompanyName"] = "中汽标准所"
 // 票据打印--寄件人地址
 window._CONFIG["sendAddress"] = "天津市东丽区先锋东路68号"
 // 票据打印--寄件人邮编
-window._CONFIG["sendPostCode"] = "300300"
-
+window._CONFIG["sendPostCode"] = "300300"

src/components/jero/JYearDate.vue

@@ -12,6 +12,7 @@
     :open="opent"
     @openChange="handleChange"
     @panelChange="onPanelChange"
+    v-bind="$attrs"
   > </a-date-picker>
 
 </template>

src/config/router.config.js

@@ -64,4 +64,10 @@ export const constantRouterMap = [
     component: SignUpPage,
     hidden: true,
   },
+  {
+    path: "/screen",
+    name: 'HomePage',
+    component: () => import(/* webpackChunkName: "user" */ "@/views/screen/HomePage"),
+    hidden: true,
+  },
 ];

src/permission.js

@@ -13,7 +13,7 @@ import {notification} from 'ant-design-vue'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 // ,'/signupentrance','/signUpPage'
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration'] // no redirect whitelist, '/screen'
 
 router.beforeEach(async (to, from, next) => {
   // 会员系统的单点登录
@@ -72,8 +72,10 @@ router.beforeEach(async (to, from, next) => {
               const firstRouter = constRoutes[0].redirect
               redirect = firstRouter
             }
+          console.log('redirect--------', redirect)
+          console.log('to.path--------', to.path)
             // const redirect = decodeURIComponent(from.query.redirect || to.path)
-            if (to.path === redirect) {
+            if (to.path === redirect || to.path === '/screen') {
               // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
               next({ ...to, replace: true })
             } else {

src/screenApi/api.js

@@ -0,0 +1,100 @@
+
+import { getActionZxd, getActionWP, getActionISO } from '@/screenApi/manage'
+
+/******制修订大屏接口--------开始 **********/
+// 汽车标准项目总体情况；包括发布的国行标、在研的国行标、立项上报的国行标、外文版项目数量
+const StanderProjectGeneralSituation = (params) => getActionZxd( '/serviceInterface/getDpData1', params)
+
+// 汽车标准制修订情况（总体）--含立项上报、起草、征求意见、审查、报批、批准发布等各环节数量
+const GetPreparationRevisionSituation = (params) => getActionZxd( '/serviceInterface/getDpData2_1', params)
+// 汽车标准制修订情况（各SC）
+const GetPreparationRevisionSC = (params) => getActionZxd( '/serviceInterface/getDpData2_2', params)
+
+// 标准归口情况（各SC）- 各SC归口在研项目和标准数量
+const GetCentralizedData = (params) => getActionZxd( '/serviceInterface/getDpData3', params)
+
+/*历年计划下达情况-------开始*/
+// 历年计划下达情况--（总体）逐年下达计划数量
+const GetReleasePlanData = (params) => getActionZxd( '/serviceInterface/getDpData4_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
+const GetReleasePlanSCData = (params) => getActionZxd( '/serviceInterface/getDpData4_2_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
+const GetReleasePlanDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData4_2_2', params)
+/*历年计划下达情况-------结束*/
+
+/*历年标准发布情况-------开始*/
+const GetReleaseStandardData = (params) => getActionZxd( '/serviceInterface/getDpData5_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
+const GetReleaseStandardSCData = (params) => getActionZxd( '/serviceInterface/getDpData5_2_1', params)
+// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
+const GetReleaseStandardDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData5_2_2', params)
+/*历年标准发布情况-------结束*/
+
+// 各SC超期情况统计
+const GetOverdueData = (params) => getActionZxd( '/serviceInterface/getDpData7_ext', params)
+
+// 各SC每年计划完成率 --各年应完成项目情况
+const GetShouldBeCompletedProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_1', params)
+
+// 各SC历年应完成项目情况
+const GetCompletionProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_2', params)
+
+// 第一起草单位贡献度排名
+const GetEnterpriseContributionData = (params) => getActionZxd( '/serviceInterface/getDpData8', params)
+/******制修订大屏接口--------结束 **********/
+
+/******WP29--------结束 **********/
+// 法规数量统计
+const GetRegulationQuantityData = (params) => getActionWP('/laws/bzsLawRegulationInfo/getScreenLawsInfo', params)
+// 专家数量统计
+const GetExpertQuantityData = (params) => getActionWP('/expertinfo/bzsExpertInfo/getScreenExpertStatistics', params)
+// 会议信息日历
+const GetMeetingCalendarData = (params) => getActionWP('/meetinginfo/bzsMeetingInfo/getScreenMeetingInfoCalendar', params)
+// 会议信息统计
+const GetMeetingInformationData = (params) => getActionWP('/meetinginfo/bzsMeetingInfo/queryScreenMeetingInfo', params)
+
+/******WP29--------结束 **********/
+
+
+
+/******ISO--------结束 **********/
+// 中国牵头标准信息统计
+const GetLeadingStandardData = (params) => getActionISO('/standard/bzsProjectStandard/screenStandardstats', params)
+// 国际会议统计
+const GetISOMeetingCalendarData = (params) => getActionISO('/mainpage/bzsmainpage/getScreenMeetingInfoCalendar', params)
+// 国际专家统计
+const GetExpertChartData = (params) => getActionISO('/expertinfo/bzsExpertInfo/queryScreenExpertInfo', params)
+// 获取技术领域的下拉框数据
+const GetTechnicalFieldData = (params) => getActionISO('/expertinfo/bzsExpertInfo/getQuerySelect', params)
+
+/******ISO--------结束 **********/
+
+
+export {
+  StanderProjectGeneralSituation,
+  GetPreparationRevisionSituation,
+  GetPreparationRevisionSC,
+  GetCentralizedData,
+  GetReleasePlanData,
+  GetReleasePlanSCData,
+  GetReleasePlanDataBySC,
+  GetReleaseStandardData,
+  GetReleaseStandardSCData,
+  GetReleaseStandardDataBySC,
+  GetOverdueData,
+  GetShouldBeCompletedProjectData,
+  GetCompletionProjectData,
+  GetEnterpriseContributionData,
+
+
+  GetRegulationQuantityData,
+  GetExpertQuantityData,
+  GetMeetingCalendarData,
+  GetMeetingInformationData,
+
+  GetLeadingStandardData,
+  GetISOMeetingCalendarData,
+  GetExpertChartData,
+  GetTechnicalFieldData
+
+}

src/screenApi/manage.js

@@ -0,0 +1,28 @@
+/**
+ * 大屏部分的请求封装，需要从外部传入baseUrl
+ */
+import { axios } from '@/screenRequest/request'
+
+const baseUrl = '/zxd'
+
+export function getActionZxd(url, parameter) {
+  return axios({
+    url: baseUrl + url,
+    method: 'get',
+    params: parameter
+  })
+}
+export function getActionWP(url, parameter) {
+  return axios({
+    url: '/WPApi' + url,
+    method: 'get',
+    params: parameter
+  })
+}
+export function getActionISO(url, parameter) {
+  return axios({
+    url: '/ISO' + url,
+    method: 'get',
+    params: parameter
+  })
+}

src/screenRequest/request.js

@@ -0,0 +1,167 @@
+import Vue from 'vue'
+import axios from 'axios'
+import store from '@/store'
+import { Modal, notification } from 'ant-design-vue'
+import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
+
+/**
+ * 【指定 axios的 baseURL】
+ * 如果手工指定 baseURL: '/jero-boot'
+ * 则映射后端域名，通过 vue.config.js
+ * @type {*|string}
+ */
+// 创建 axios 实例
+const service = axios.create({})
+
+const err = (error) => {
+  if (error.response) {
+    let data = error.response.data
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    console.log('------异常响应------', token)
+    console.log('------异常响应------', error.response.status)
+    switch (error.response.status) {
+      case 403:
+        notification.error({ message: '系统提示', description: '拒绝访问', duration: 4 })
+        break
+      case 500:
+        console.log('------error.response------', error.response)
+        // update-begin- --- author:liusq ------ date:20200910 ---- for:处理Blob情况----
+        let type = error.response.request.responseType
+        if (type === 'blob') {
+          blobToJson(data)
+          break
+        }
+        // update-end- --- author:liusq ------ date:20200910 ---- for:处理Blob情况----
+        //notification.error({ message: '系统提示', description:'Token失效，请重新登录!',duration: 4})
+        if (token && data.message.includes('Token失效')) {
+          // update-begin- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式，不直接跳转----
+          Modal.error({
+            title: '登录已过期',
+            content: '很抱歉，登录已过期，请重新登录',
+            okText: '重新登录',
+            mask: false,
+            onOk: () => {
+              store.dispatch('Logout').then(() => {
+                Vue.ls.remove(ACCESS_TOKEN)
+                try {
+                  let path = window.document.location.pathname
+                  console.log('location pathname -> ' + path)
+                  if (path != '/' && path.indexOf('/user/login') == -1) {
+                    window.location.reload()
+                  }
+                } catch (e) {
+                  window.location.reload()
+                }
+              })
+            }
+          })
+          // update-end- --- author:scott ------ date:20190225 ---- for:Token失效采用弹框模式，不直接跳转----
+        }
+        break
+      case 404:
+        notification.error({ message: '系统提示', description: '很抱歉，资源未找到!', duration: 4 })
+        break
+      case 504:
+        notification.error({ message: '系统提示', description: '网络超时' })
+        break
+      case 401:
+        notification.error({ message: '系统提示', description: '未授权，请重新登录', duration: 4 })
+        if (token) {
+          store.dispatch('Logout').then(() => {
+            setTimeout(() => {
+              window.location.reload()
+            }, 1500)
+          })
+        }
+        break
+      default:
+        notification.error({
+          message: '系统提示',
+          description: data.message,
+          duration: 4
+        })
+        break
+    }
+  }
+  return Promise.reject(error)
+}
+
+// request interceptor
+service.interceptors.request.use(config => {
+  if (config.url.indexOf('/zxd') === 0) {
+    config.headers['verifyToken'] = '1SRifTFQz86Wnqz'
+  } else if(config.url.indexOf('/WPApi') === 0) {
+    config.headers['X-Access-Token'] = 'GUG2weX1Pg5lOzKxhcrQKSjqsT6YBaZV'
+  } else if(config.url.indexOf('/ISO') === 0) {
+    config.headers['X-Access-Token'] = 'GUG2weX1Pg5lOzKxhcrQKSjqsT6YBaZV'
+  } else {
+    // 来款的请求
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    if (token) {
+      config.headers['X-Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+    }
+  }
+  //update-begin-author:taoyan date:2020707 for:多租户
+  let tenantid = Vue.ls.get(TENANT_ID)
+  if (!tenantid) {
+    tenantid = 0
+  }
+  config.headers['tenant_id'] = tenantid
+  //update-end-author:taoyan date:2020707 for:多租户
+  if (config.method == 'get') {
+    if (config.url.indexOf('sys/dict/getDictItems') < 0) {
+      config.params = {
+        _t: Date.parse(new Date()) / 1000,
+        ...config.params
+      }
+    }
+  }
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  return response.data
+}, err)
+
+/**
+ * Blob解析
+ * @param data
+ */
+function blobToJson(data) {
+  let fileReader = new FileReader()
+  let token = Vue.ls.get(ACCESS_TOKEN)
+  fileReader.onload = function () {
+    try {
+      let jsonData = JSON.parse(this.result)  // 说明是普通对象数据，后台转换失败
+      console.log('jsonData', jsonData)
+      if (jsonData.status === 500) {
+        console.log('token----------》', token)
+        if (token && jsonData.message.includes('Token失效')) {
+          Modal.error({
+            title: '登录已过期',
+            content: '很抱歉，登录已过期，请重新登录',
+            okText: '重新登录',
+            mask: false,
+            onOk: () => {
+              store.dispatch('Logout').then(() => {
+                Vue.ls.remove(ACCESS_TOKEN)
+                window.location.reload()
+              })
+            }
+          })
+        }
+      }
+    } catch (err) {
+      // 解析成对象失败，说明是正常的文件流
+      console.log('blob解析fileReader返回err', err)
+    }
+  }
+  fileReader.readAsText(data)
+}
+
+export {
+  service as axios
+}

src/utils/util.js

@@ -679,4 +679,36 @@ export function processingTimestamp(value) {
   minute = minute < 10 ? ('0' + minute) : minute
   second = second < 10 ? ('0' + second) : second
   return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
-}
+}
+
+
+function isObject (obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+function isArray (arr) {
+  return Array.isArray(arr)
+}
+// 深度合并功能
+export function deepMerge (target, ...arg) {
+  return arg.reduce((acc, cur) => {
+    return Object.keys(cur).reduce((subAcc, key) => {
+      const srcVal = cur[key]
+      if (isObject(srcVal)) {
+        subAcc[key] = deepMerge(subAcc[key] ? subAcc[key] : {}, srcVal)
+      } else if (isArray(srcVal)) {
+        // series: []，下层数组直接赋值
+        subAcc[key] = srcVal.map((item, idx) => {
+          if (isObject(item)) {
+            const curAccVal = subAcc[key] ? subAcc[key] : []
+            return deepMerge(curAccVal[idx] ? curAccVal[idx] : {}, item)
+          } else {
+            return item
+          }
+        })
+      } else {
+        subAcc[key] = srcVal
+      }
+      return subAcc
+    }, acc)
+  }, target)
+}

src/views/dashboard/Analysis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="min-width: 1100px">
+  <div style="min-width: 1100px" class="analysis-container">
     <!-- 其他人展示消息-->
     <template v-if="roleCoe">
       <user-announcement-list :is-show-seach="true"></user-announcement-list>
@@ -10,6 +10,10 @@
     </template>
     <!--    所领导 部门领导展示统计图 -->
     <template v-else>
+      <div class="screen-btn" v-has="'dashboard:screen'">
+<!--         v-has="'wholePaymentsStatistics:search'"-->
+        <a-button type="primary" @click="goScreen" >大屏</a-button>
+      </div>
 
       <!-- 全所收入统计 累计-->
       <single-month-total-echarts class="single-month-total "></single-month-total-echarts>
@@ -89,6 +93,12 @@ export default {
     downloadManual() {
       window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx', '_self')
     },
+    goScreen() {
+      let routerUrl = this.$router.resolve({
+        path: '/screen',
+      })
+      window.open(routerUrl.href, '_blank')
+    }
   }
 }
 </script>
@@ -159,4 +169,13 @@ export default {
   color: #069F99;
   cursor: pointer;
 }
+
+.analysis-container{
+  position: relative;
+}
+.screen-btn{
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

src/views/screen/HomePage.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="screen-home-page">
+    <div class="location-icon">
+      <a-dropdown overlayClassName="screen-dropdown-box">
+        <img src="../../assets/screen/location_icon.png" alt="">
+        <template #overlay>
+          <a-menu>
+            <a-menu-item
+              v-for="item in menuData"
+              :key="item.value"
+            >
+              <a :href="'#' + item.href">{{ item.name }}</a>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+    </div>
+    <!-- 上面的头部-->
+    <div class="header">
+      <img class="bg-img" src="../../assets/screen/header_bg.png" alt="">
+<!--      <span class="title">中国汽车标准化研究院运营管理平台</span>-->
+      <span class="title"><img class="title" src="../../assets/screen/title_box.png" alt=""></span>
+<!--      <img class="title" src="../../assets/screen/title_box.png" alt="">-->
+<!--      <span></span>-->
+    </div>
+    <!-- 来款-->
+    <template>
+      <div class="sub-title" id="income">
+<!--        <span>汽车标准化工作平台</span>-->
+        <img src="../../assets/screen/title_income.png" alt="">
+      </div>
+      <income-payment-screen></income-payment-screen>
+    </template>
+
+    <!-- 制修订 -->
+    <template>
+      <div class="sub-title" id="preparationRevisionScreen">
+<!--        <span>汽车标准制修订管理系统 </span>-->
+        <img src="../../assets/screen/title_zxd.png" alt="">
+      </div>
+      <preparation-revision-screen></preparation-revision-screen>
+    </template>
+
+    <!-- 中国汽车国际法规工作平台-ISO-->
+    <template>
+      <div class="sub-title" id="ISO">
+<!--        <span>中国汽车国际标准工作平台-ISO</span>-->
+        <img src="../../assets/screen/title_iso.png" alt="">
+      </div>
+      <i-s-o-screen></i-s-o-screen>
+    </template>
+
+    <!-- 中国汽车国际法规工作平台-WP.29  -->
+    <template>
+      <div class="sub-title" id="WP">
+<!--        <span>中国汽车国际法规工作平台-WP.29</span>-->
+        <img src="../../assets/screen/title_wp.png" alt="">
+      </div>
+      <w-p-screen></w-p-screen>
+    </template>
+  </div>
+</template>
+
+<script>
+
+import IncomePaymentScreen from './incomePayments/index'
+import PreparationRevisionScreen from './preparationRevision/index'
+import WPScreen from './wp29/index'
+import ISOScreen from './iso/index'
+
+let bodyClass = ''
+
+export default {
+  name: 'HomePage',
+  components: {
+    IncomePaymentScreen,
+    PreparationRevisionScreen,
+    WPScreen,
+    ISOScreen
+  },
+  data() {
+    return {
+      menuData: [
+        {name: '汽车标准化工作平台', value: '1', href: 'income'},
+        {name: '汽车标准制修订管理系统', value: '2', href: 'preparationRevisionScreen'},
+        {name: '中国汽车国际标准工作平台-ISO', value: '3', href: 'ISO'},
+        {name: '中国汽车国际法规工作平台-WP.29', value: '4', href: 'WP'},
+      ]
+    }
+  },
+  created() {
+    document.title = `中国汽车标准化研究院运营管理平台`
+    let bodyDom = document.getElementsByTagName('body')[0]
+    bodyClass = bodyDom.getAttribute('class')
+    bodyDom.setAttribute('class', `${bodyClass} screen-body`)
+  },
+  beforeDestroy() {
+    document.getElementsByTagName('body')[0].setAttribute('class', bodyClass)
+  }
+}
+</script>
+
+<style scoped lang="less">
+::selection{
+  background: transparent;
+}
+.screen-home-page{
+  min-height: 100%;
+  background-image: url("../../assets/screen/screen_bg.png");
+  background-repeat-x: no-repeat;
+  background-size: 100%;
+  background-color: #293f6a;
+  padding: 0 20px 20px;
+  min-width: 1200px;
+  overflow: auto;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.header{
+  //background-image: url("../../assets/screen/header_bg.png");
+  //background-repeat: no-repeat;
+  //background-size: 100% 100%;
+  height: 162px;
+  display: flex;
+  justify-content: center;
+  img.bg-img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 162px;
+    width: 100%;
+  }
+
+  img.title{
+    display: inline-block;
+    height: 64px;
+    width: auto;
+    //margin-top: 21px;
+    //line-height: 42px;
+    position: relative;
+  }
+  span.title{
+    display: inline-block;
+    margin-top: 21px;
+    //width: 812px;
+    height: 42px;
+    font-size: 42px;
+    font-family: YouSheBiaoTiHei;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 42px;
+    text-shadow: 0px 6px 13px #071834;
+    background: linear-gradient(0deg, #2EACFF 0%, #D6F7FD 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 87px;
+      height: 67px;
+      background-image: url("../../assets/screen/header_left.png");
+      left: -137px;
+      top: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 87px;
+      height: 67px;
+      background-image: url("../../assets/screen/header_right.png");
+      right: -137px;
+      top: 0;
+    }
+  }
+
+}
+
+// 二级标题
+.sub-title{
+  width: 608px;
+  height: 60px;
+  text-align: center;
+  margin: 14px auto;
+  background-image: url("../../assets/screen/sub_title_bg.png");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  span{
+    display: inline-block;
+    height: 35px;
+    font-size: 30px;
+    font-family: YouSheBiaoTiYuan;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 35px;
+    //text-shadow: 0px 3px 0px #002553;
+
+    background: linear-gradient(0deg, #FFFFFF 0%, #5AAEFC 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+/*内部标题*/
+/deep/.box-title{
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+/* 右侧定位的按钮*/
+.location-icon{
+  position: fixed;
+  z-index: 200;
+  top: 165px;
+  right: 20px;
+  cursor: pointer;
+  img{
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    background-color: rgba(35, 48, 98, 0.9);
+    border-radius: 50%;
+  }
+}
+
+::v-deep ::-webkit-scrollbar-track{
+  background: #293f6a;
+  ////border-color: transparent;
+}
+::v-deep ::-webkit-scrollbar-thumb{
+  background: #445a9c;
+}
+::v-deep ::-webkit-scrollbar-corner {
+  background: #293f6a;
+}
+// 下拉框-清除图标的背景色
+::v-deep .ant-select-selection__clear {
+  background: #293f6a;
+  color: #fff;
+}
+
+</style>
+
+<style lang="less">
+.screen-dropdown-box ul{
+  background: #233062;
+  color: #fff;
+  box-shadow: 0 0 4px #7599E8 inset;
+  li a{
+    color: #fff;
+  }
+  .ant-dropdown-menu-item:hover{
+    background-color: #7599E8;
+  }
+}
+
+.ant-select-screen .ant-empty-description{
+  color: #fff;
+}
+
+.screen-body{
+  &::-webkit-scrollbar-track{
+    background: #293f6a;
+  }
+  &::-webkit-scrollbar-thumb{
+    background: #445a9c;
+  }
+  &::-webkit-scrollbar-corner {
+    background: #293f6a;
+  }
+}
+</style>

src/views/screen/components/Panel.vue

@@ -0,0 +1,228 @@
+<!--大屏中所有面板公共的样式-->
+<template>
+  <div class="panel-box" :style="'width:' + width + ';'+ 'height:' + height">
+    <div class="title-box">
+      <div class="title" :style="'width:' + titleWidth + 'px'">
+        <slot name="title">
+          标题
+        </slot>
+      </div>
+      <template>
+        <span class="title-split" :style="titleSplitStyle"></span>
+
+        <span class="title-split-v" :style="titleSplitVStyle"></span>
+
+        <span class="title-split-top" :style="titleSplitTopStyle"></span>
+      </template>
+      <div class="title-right">
+        <slot name="title-right">
+          标题右侧的按钮
+        </slot>
+      </div>
+    </div>
+    <span class="title-split-angle" :style="titleSplitAngleStyle"></span>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const titleH = 40, // 标题的高度
+  titleW = 20, // 标题上面的宽度
+  splitW = 4 // 分隔线的宽度
+// 标题下面倾斜的宽度
+const splitBotoomW = titleW / titleH * splitW
+// 倾斜的角度
+const angle = Math.atan(titleH / titleW) * 180 / Math.PI
+// 斜线的高度
+const H = Math.sqrt(titleH * titleH + titleW * titleW)
+// 斜线上下 多增出来的部分
+const AddH = splitW * titleW / titleH
+// 标题右侧 倾斜角度 偏移量
+const TopH = ((H + 2 * AddH) - titleH) / 2
+
+export default {
+  name: 'Panel',
+  props: {
+    // panel的宽
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    // panel的高
+    height: {
+      type: [Number, String],
+      default: '600px'
+    },
+    // 标题的宽度 必须是数字
+    titleWidth: {
+      type: Number,
+      default: 150
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    // 标题右侧隔离的dom
+    titleSplitStyle() {
+      // (typeof this.titleWidth === 'number')
+      return `left: ${this.titleWidth + ((titleW - splitW) / 2)}px; transform: rotate(${90 - angle}deg);height: ${H + AddH * 2}px;top: ${-TopH}px`
+    },
+    // 标题下侧隔离的dom
+    titleSplitVStyle() {
+      return `width: ${this.titleWidth}px`
+    },
+    // 标题下侧隔离的dom 覆盖
+    titleSplitAngleStyle() {
+      let left = Math.sqrt(AddH * AddH + splitW * splitW)
+      //中间边框的倾斜的宽度
+      return `width: ${this.titleWidth + left / 2 - splitBotoomW}px`
+
+    },
+    // 标题上面用于覆盖的样式
+    titleSplitTopStyle() {
+      if (typeof this.titleWidth === 'number') {
+        return `width: ${this.titleWidth}px;left: ${titleW * 2}px`
+      } else {
+        return `width: ${this.titleWidth}`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@title-color: #00D3FA;
+@bg-color: #101438;
+@border-radius: 10px;
+//
+@shadow-color: #4C8AAE;
+
+// 标题的高度 和js中命名的 titleH 需要同步修改
+@title-height: 40px;
+// 和js中命名的 titleW 需要同步修改
+@title-w: 20px;
+// 标题和内容之间边框的宽度 和js中命名的 splitW 需要同步修改
+@split-margin: 4px;
+// split-w = @title-w / @title-height * @split-margin
+//@split-w: 1.667px;
+@split-w: @title-w / @title-height * @split-margin;
+
+@basic-m: 15px;
+
+.panel-box {
+  min-height: 200px;
+  min-width: 400px;
+  border-radius: @border-radius;
+  box-shadow: 0 0 4px 5px @shadow-color inset;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: @basic-m 0;
+}
+
+.title-box {
+  display: flex;
+}
+
+.title {
+  border-top-left-radius: @border-radius;
+  height: @title-height;
+  line-height: @title-height;
+  background-color: @title-color;
+  margin-right: @split-margin;
+  position: relative;
+  padding: 0 10px;
+  color: white;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -@title-w;
+    border-width: @title-height @title-w;
+    border-style: solid;
+    border-color: @title-color transparent transparent transparent;
+    //border-color: red transparent transparent transparent;
+  }
+}
+
+.title-split {
+  display: inline-block;
+  width: @split-margin;
+  height: 30px;
+  background: @bg-color;
+  //transform: @rotate-angle;  // 会被行内元素 替换
+  box-shadow: 5px 2px 4px 2.5px @shadow-color;
+  position: absolute;
+  // 会被行内元素 替换
+  left: 100px;
+  z-index: 20;
+}
+
+.title-split-v {
+  position: absolute;
+  display: inline-block;
+  // 会被行内元素 替换
+  width: 100px;
+  height: @split-margin;
+  background: @bg-color;
+  top: @title-height;
+  z-index: 10;
+  box-shadow: 5px 2px 4px 2.5px @shadow-color;
+}
+
+.title-split-angle {
+  display: inline-block;
+  position: relative;
+  height: @split-margin;
+  z-index: 40;
+  background: @bg-color;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -@split-w;
+    border-width: @split-margin @split-w;
+    border-style: solid;
+    border-color: @bg-color transparent transparent transparent;
+    z-index: 50;
+    //border-color: red transparent transparent transparent;
+  }
+}
+
+.title-split-top {
+  position: absolute;
+  display: inline-block;
+  height: @basic-m;
+  z-index: 40;
+  top: -@basic-m;
+  background: @bg-color;
+}
+
+
+// 标题右侧
+.title-right {
+  flex: 1;
+  border-top-right-radius: @border-radius;
+  color: white;
+  display: inline-block;
+  padding: 5px 20px;
+  text-align: right;
+  height: @title-height;
+  line-height: @title-height;
+}
+
+.content {
+  margin: @split-margin 0 0 0 !important;
+  flex: 1;
+  width: 100%;
+  border-radius: 0 0 @border-radius @border-radius;
+  color: white;
+  padding: 15px;
+}
+
+</style>

src/views/screen/incomePayments/AllMoneyTenEcharts.vue

@@ -0,0 +1,264 @@
+<!--企业合同金额前十-->
+<template>
+  <div class="income-full-box income-full-no-table-box income-more-title-full-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_title_full_bg.png" alt="">
+    <div class="box-title">企业客户统计（年度待确收金额前二十）</div>
+    <div class="box-content">
+      <div class="echarts-box" id="allMoneyScreen"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import { BarChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import { createBarChart } from '../util/BarOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 100,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
+export default {
+  name: 'AllMoneyTenEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/index/top10Statistics',
+      },
+      columns,
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: '年度待确收金额'},
+            {indexName: '确认收入金额'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.allMoney
+            tableData[1][dataIndex] = item.confirmAmount
+          })
+          this.dataSource = tableData
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 100,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        let dataIndex = 'key' + index
+        this.columns.push({
+          slots:{title: dataIndex},
+          [dataIndex]:item.name,
+          align: 'center',
+          width: 120,
+          dataIndex: dataIndex,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    initEcharts(data) {
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+      // 处理y轴数据
+      data.map(item => {
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+      })
+
+      let option = {
+        legend: {
+          right: '2%',
+          top: '2%'
+        },
+        grid: {
+          bottom: '1%',
+          top: '14%'
+        },
+        tooltip:{
+          formatter: params => {
+            // console.log(params)
+            let percent = this.calcPercent(params[1].data,params[0].data)
+            // 获取xAxis data中的数据
+            let dataStr = ` <div style="color:#7599E8">${params[0].name}</div>`
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <div>
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+</div>
+            <div style="color:#7599E8;">${this.formatMoney(item.data)}</div>
+          </div>
+        </div>`
+            })
+            return dataStr + `  <div style="padding-left: 10px;color: #7599E8">完成百分比：${percent}</div>`
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            show: true,
+            interval:0,
+            rotate:45,
+            // 坐标轴刻度标签换行处理
+            formatter: function (params) {
+              let len = params.length
+              if(len > 4) {
+                return  params.slice(0,4) + '...'
+              }else  {
+                return  params
+              }
+            },
+          },
+          data: xData
+        },
+        series: [
+          {
+            name:'年度待确收金额',
+            data: this.echartsData.allMoney,
+            type: 'bar',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          },
+          {
+            name:'确认收入金额',
+            data: this.echartsData.confirmAmount,
+            type: 'bar',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          }
+        ]
+      }
+      createBarChart('allMoneyScreen', option)
+    },
+    /**
+     * 计算百分比
+     * @param num1 确收金额
+     * @param num2 年度待确收金额
+     * */
+    calcPercent(num1,num2){
+      let pointNo = Number(num1) / Number(num2) * 100
+      return pointNo.toFixed(2) + '%'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+/deep/ .ant-table-thead tr > th {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+  border: none;
+}
+/deep/ .ant-table-tbody tr > td {
+  color: rgba(5, 5, 37, 0.8);
+  border: none;
+  border-bottom: 1px solid rgb(245,245,246);
+}
+
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+}
+
+</style>

src/views/screen/incomePayments/DepartmentTotalEcharts.vue

@@ -0,0 +1,247 @@
+<!--科室总体统计-->
+<template>
+  <div class="income-full-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_full_bg.png" alt="">
+
+    <div class="box-title">科室总体统计</div>
+    <div class="box-content">
+      <div class="echarts-box" id="departmentTotalScreen"></div>
+
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 900}"
+          :dataSource="dataSource"
+          :pagination="false"
+          :loading="loading"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <span v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
+             <j-ellipsis :length="7" :value=" item[item.dataIndex] "></j-ellipsis>
+          </span>
+
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </div>
+      <!--   表格区域end -->
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import {BarChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import { createBarChart } from '../util/BarOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 100,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
+export default {
+  name: 'DepartmentTotalEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/index/overallDepartmentStatistics',
+      },
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      },
+      columns
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: '年度待确收金额'},
+            {indexName: '确认收入金额'},
+            {indexName: '完成比例'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.allMoney
+            tableData[1][dataIndex] = item.confirmAmount
+            tableData[2][dataIndex] = item.value + '%'
+          })
+          this.dataSource = tableData
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 120,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          // title: item.name,
+          slots:{title: 'key' + index},
+          ['key' + index]:item.name,
+          align: 'center',
+          width: 130,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    initEcharts(data) {
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+      xData = xData.filter(e => e !== '总数')
+      // 处理y轴数据
+      data.map(item => {
+        if (item.name !== '总数') {
+          this.echartsData.allMoney.push({value: item.allMoney, percent: item.value})
+          this.echartsData.confirmAmount.push({value: item.confirmAmount, percent: item.value})
+        }
+      })
+
+      let option = {
+        tooltip: {
+          formatter: params => {
+            let percent = params[0].data.percent + '%'
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <div>
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            </div>
+            <div style="color:#7599E8;">${formatMoney(item.value)}</div>
+          </div>
+        </div>`
+            })
+            return dataStr + `  <div style="padding-left: 10px;color: #7599E8">完成比例：${percent}</div>`
+          },
+        },
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name: '年度待确收金额',
+            data: this.echartsData.allMoney,
+            type: 'bar',
+            barMaxWidth: 30,
+            itemStyle: {
+              borderRadius: [4, 4, 0, 0]
+            }
+          },
+          {
+            name: '确认收入金额',
+            data: this.echartsData.confirmAmount,
+            type: 'bar',
+            barMaxWidth: 30,
+            itemStyle: {
+              borderRadius: [4, 4, 0, 0]
+            }
+          }
+        ]
+      }
+      createBarChart('departmentTotalScreen', option)
+
+    },
+    /**
+     * 计算百分比
+     * @param num1 确收金额
+     * @param num2 年度待确收金额
+     * */
+    calcPercent(num1,num2){
+      let pointNo = Number(num1) / Number(num2) * 100
+      return pointNo.toFixed(1) + '%'
+    }
+  }
+}
+</script>

src/views/screen/incomePayments/IncomeSortEcharts.vue

@@ -0,0 +1,330 @@
+<!-- 分类统计-->
+<template>
+  <div class="income-full-box income-half-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_half_bg.png" alt="">
+
+    <div class="box-title">收入分类统计</div>
+    <div class="title-right">
+      <div class="operator">
+        <a-select
+          v-model="activeIndex"
+          style="width: 100px"
+          placeholder="统计类型"
+          :bordered="false"
+          show-search
+          :show-arrow="true"
+          @change="toggleEcharts"
+          dropdown-class-name="ant-select-screen"
+        >
+          <a-select-option
+            v-for="(item) in activeIndexData"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{item.name}}
+          </a-select-option>
+        </a-select>
+      </div>
+      <a-tree-select
+        :multiple="false"
+        show-search
+        :replaceFields="{value:'orgCode'}"
+        allowClear
+        tree-default-expand-all
+        tree-node-filter-prop="title"
+        @change="changeDepart"
+        style="width:150px;"
+        dropdown-class-name="screen-department-select screen-select"
+        :dropdownStyle="{'overflow-x':'hidden',' overflo-y': 'auto' }"
+        :treeData="treeDepartData"
+        v-model="queryParam.departCode"
+        placeholder="部门选择">
+      </a-tree-select>
+
+    </div>
+    <div class="box-content">
+      <div class="echarts-box" id="incomeSortScreen"></div>
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 500}"
+          :dataSource="dataSource"
+          :pagination="false"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </div>
+      <!--   表格区域end -->
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import {PieChart} from 'echarts/charts'
+import {LabelLayout} from 'echarts/features'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout
+])
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import {queryDepartTreeList} from '@api/api'
+import { createPieChart } from '../util/PieOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 70,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
+export default {
+  name: 'IncomeSortEcharts',
+  data() {
+    return {
+      activeIndex: 'income',
+      echartsInstace: null,
+      columns,
+      url: {
+        list: '/index/incomeClassificationStatistics'
+      },
+      queryParam:{},
+      dataSource: [],
+      treeDepartData:[],// 组织机构 树数据
+      activeIndexData: [
+        {name: '收入分析', value: 'income'},
+        {name: '应收', value: 'allMoney'},
+        {name: '确收', value: 'confirmAmount'}
+      ]
+    }
+  },
+  mounted() {
+    this.loadData()
+    this.loadDepartTreeData()
+  },
+  methods: {
+    formatMoney,
+    toggleEcharts() {
+      // if (key === this.activeIndex) {
+      //   return
+      // } else {
+      //   this.activeIndex = key
+      this.loadData()
+      // this.$forceUpdate()
+      // }
+    },
+    /**
+     * 选择部门
+     * */
+    changeDepart(val){
+      console.log(val,'val')
+      this.queryParam.departCode = val
+      // 如果是标准所 不传
+      if(val === 'A05' ) this.queryParam.departCode = undefined
+      this.loadData()
+    },
+    /*
+    *  组织机构下拉数据
+    * */
+    loadDepartTreeData() {
+      const that = this
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          that.treeDepartData = []
+          let treeList = res.result
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeDepartData.push(temp)
+          }
+        }
+      })
+    },
+    loadData() {
+      if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
+        this.echartsInstace.dispose()//销毁
+      }
+      let typeEnum = {
+
+        allMoney: 1,
+        confirmAmount: 2,
+        income: 3
+      }
+      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: typeEnum[this.activeIndex] !== 2 ? '年度待确收金额' : '确收金额'},
+            {indexName: '百分比'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.money
+            // tableData[1][dataIndex] = item.value ? item.value +'%' :''
+            if(index !== 5){
+              tableData[1][dataIndex] = item.value ? item.value + '%' :''
+            }else {
+              tableData[1][dataIndex] = '100%'
+            }
+          })
+          this.dataSource = tableData
+        }
+      })
+    },
+    initEcharts(data) {
+      let echartsData = data.reduce((pre, val) => {
+        return pre.concat({value: val.value, name: val.name_dictText, money: val.money})
+      }, [])
+      // echartsData = this.initPoint(echartsData, color)
+      // let chartDom = document.getElementById('incomeSortScreen')
+      let option = {
+        series: [
+          {
+            center: ['45%', '60%'],
+            data: echartsData
+          }
+        ]
+      }
+      createPieChart('incomeSortScreen', option)
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      const newData = data.slice(0,5)
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 70,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      newData.map((item, index) => {
+        this.columns.push({
+          title: item.name_dictText,
+          align: 'center',
+          width: 80,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+      this.columns.push( {
+        title: '总数',
+        align: 'center',
+        width: 70,
+        dataIndex: 'key5',
+        scopedSlots: {customRender: 'allMoney'}
+      },)
+    },
+    // 处理圆点
+    initPoint(data, color) {
+      // 这步主要是为了让小圆点的颜色和饼状图的块对应
+      let setLabel = (data) => {
+        let opts = []
+        for (let i = 0; i < data.length; i++) {
+          let item = {}
+          item.name = data[i].name
+          item.value = data[i].value
+          item.money = data[i].money
+          item.label = {
+            normal: {
+              //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
+              show: true,
+              formatter: '{point|}{a|}{d}%',
+              rich: {
+                a: {
+                  padding: [0, 0, 0, 4]
+                },
+                point: {
+                  height: 6,
+                  width: 6,
+                  lineHeight: 6,
+                  borderRadius: 4,
+                  backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
+                },
+              }
+            },
+          }
+
+          opts.push(item)
+        }
+        return opts
+      }
+      return setLabel(data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@active-color: #3E79ED;
+.operator {
+  color: @active-color;
+  user-select: none;
+  display: flex;
+  font-size: 12px;
+}
+
+.active {
+  background: @active-color;
+  color: #fff;
+}
+
+
+.point {
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #000;
+}
+
+
+
+/*列表自适应超出隐藏*/
+.table-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/screen/incomePayments/NotReceivedEcharts.vue

@@ -0,0 +1,276 @@
+<!-- 未收账款统计-->
+<template>
+  <div class="income-full-box income-half-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_half_bg.png" alt="">
+    <div class="box-title">应收账款</div>
+    <div class="title-right">
+      <a-tree-select
+        :multiple="false"
+        show-search
+        :replaceFields="{value:'orgCode'}"
+        allowClear
+        tree-default-expand-all
+        tree-node-filter-prop="title"
+        @change="changeDepart"
+        style="width:150px"
+        dropdown-class-name="screen-department-select screen-select"
+        :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+        :treeData="treeDepartData"
+        v-model="queryParam.departCode"
+        placeholder="部门选择">
+      </a-tree-select>
+    </div>
+    <div class="box-content">
+      <div class="echarts-box" id="notReceivedScreen"></div>
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 500}"
+          :dataSource="dataSource"
+          :pagination="false"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </div>
+      <!--   表格区域end -->
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import {PieChart} from 'echarts/charts'
+import {LabelLayout} from 'echarts/features'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout
+])
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import {queryDepartTreeList} from '@api/api'
+import { createPieChart } from '../util/PieOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 70,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
+export default {
+  name: 'NotReceivedEcharts',
+  data() {
+    return {
+      activeIndex: 'income',
+      echartsInstace: null,
+      columns,
+      url: {
+        list: '/index/uncollected'
+      },
+      queryParam:{},
+      dataSource: [],
+      treeDepartData:[],// 组织机构 树数据
+    }
+  },
+  mounted() {
+    this.loadData()
+    this.loadDepartTreeData()
+  },
+  methods: {
+    formatMoney,
+    toggleEcharts(key) {
+      if (key === this.activeIndex) {
+        return
+      } else {
+        this.activeIndex = key
+        this.loadData()
+        this.$forceUpdate()
+      }
+    },
+    /**
+     * 选择部门
+     * */
+    changeDepart(val){
+      console.log(val,'val')
+      this.queryParam.departCode = val
+      // 如果是标准所 不传
+      if(val === 'A05' ) this.queryParam.departCode = undefined
+      this.loadData()
+    },
+    /*
+    *  组织机构下拉数据
+    * */
+    loadDepartTreeData() {
+      const that = this
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          that.treeDepartData = []
+          let treeList = res.result
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeDepartData.push(temp)
+          }
+        }
+      })
+    },
+    loadData() {
+      if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
+        this.echartsInstace.dispose()//销毁
+      }
+
+      getAction(this.url.list, {departCode:this.queryParam.departCode}).then(res => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: '金额'},
+            {indexName: '百分比'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.money
+            if(index !== 4){
+              tableData[1][dataIndex] = item.value ? item.value + '%' :''
+            }else {
+              tableData[1][dataIndex] = '100%'
+            }
+          })
+          this.dataSource = tableData
+        }
+      })
+    },
+    initEcharts(data) {
+      let echartsData = data.reduce((pre, val) => {
+        return pre.concat({value: val.money, name: val.name, money: val.money})
+      }, []).slice(0,4)
+      // echartsData = this.initPoint(echartsData, color)
+      // let chartDom = document.getElementById('notReceivedScreen')
+      // let myChart = echarts.init(chartDom)
+      let option = {
+        legend: {
+          left:'15%',
+          bottom: '2%',
+          right: '2%',
+          padding: [0, 50, 0, 50],
+          itemGap:50
+        },
+        series: [
+          {
+            center: ['45%', '60%'],
+            data: echartsData
+          }
+        ]
+      }
+      createPieChart('notReceivedScreen', option)
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 70,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name,
+          align: 'center',
+          width: 95,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+      // this.columns.push( {
+      //   title: '总数',
+      //   align: 'center',
+      //   width: 70,
+      //   dataIndex: 'allmoney',
+      //   scopedSlots: {customRender: 'text'}
+      // },)
+    },
+    // 处理圆点
+    initPoint(data, color) {
+      // 这步主要是为了让小圆点的颜色和饼状图的块对应
+      let setLabel = (data) => {
+        let opts = []
+        for (let i = 0; i < data.length; i++) {
+          let item = {}
+          item.name = data[i].name
+          item.value = data[i].value
+          item.money = data[i].money
+          item.label = {
+            normal: {
+              //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
+              show: true,
+              formatter: '{point|}{a|}{d}%',
+              rich: {
+                a: {
+                  padding: [0, 0, 0, 4]
+                },
+                point: {
+                  height: 6,
+                  width: 6,
+                  lineHeight: 6,
+                  borderRadius: 4,
+                  backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
+                },
+              }
+            },
+          }
+
+          opts.push(item)
+        }
+        return opts
+      }
+      return setLabel(data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.income-full-box .title-right{
+  justify-content: flex-end;
+}
+</style>

src/views/screen/incomePayments/SingleMonthEcharts.vue

@@ -0,0 +1,290 @@
+<!--大屏模块-  全所收入 单月统计echarts-->
+<template>
+  <div class="income-full-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_full_bg.png" alt="">
+
+    <div class="box-title">全所收入统计 (单月)</div>
+    <div class="box-content">
+      <div class="echarts-box" id="singleMonthEchartsScreen"></div>
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 1100}"
+          :dataSource="dataSource"
+          :pagination="false"
+          :loading="loading"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </div>
+      <!--   表格区域end -->
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  ToolboxComponent
+])
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {MonthData} from '@views/statisticalReport/statisticData'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import { createLineChart } from '../util/LineOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 110,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+MonthData.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 115,
+    dataIndex: tt.key,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+
+columns.push({
+  title: '总数',
+  align: 'center',
+  width: 100,
+  dataIndex: 'key12',
+  scopedSlots: {customRender: 'allMoney'}
+})
+
+
+export default {
+  name: 'SingleMonthEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      columns,
+      url: {
+        list: '/index/lineChartList'
+      },
+      disableMixinCreated:true,
+      echartsData:{
+        // allMoney:[],
+        confirmAmount:[],
+        billMoney:[],
+        comeAllMoney:[]
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          //  树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
+          let tableData = [
+            // {indexName: '年度待确收金额'},
+            {indexName: '确认收入金额'},
+            {indexName: '开票金额'},
+            {indexName: '到账金额'},
+          ]
+
+          dataSource.map((item, index) => {
+            let keyItem = MonthData.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              // tableData[0][key] = item.allMoney // 年度待确收金额
+              tableData[0][key] = item.confirmAmount // 确认收入金额
+              tableData[1][key] = item.billMoney // 开票金额
+              tableData[2][key] = item.comeAllMoney // 到账金额
+            }
+            // 单月总数
+            if(index === 12){
+              tableData[0].key12 = item.confirmAmount // 确认收入金额
+              tableData[1].key12 = item.billMoney // 开票金额
+              tableData[2].key12 = item.comeAllMoney // 到账金额
+            }
+          })
+
+          this.initEchartsData(res.result)
+          // 初始化 echarts
+          this.initEcharts()
+          this.dataSource = tableData
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 将后端返回的数据 处理成 echarts需要的数据 格式
+    initEchartsData(data) {
+      data.slice(0,12).map(item =>{
+        // this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+        this.echartsData.billMoney.push(item.billMoney)
+        this.echartsData.comeAllMoney.push(item.comeAllMoney)
+      })
+    },
+    initEcharts() {
+      // 处理x轴数据
+      let xData = MonthData.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+
+      let option = {
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name: '确认收入金额',
+            type: 'line',
+            showSymbol: false,
+            symbolSize: 8,
+            data: this.echartsData.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(88, 115, 234, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(88, 115, 234, 0.1)'
+                }
+              ])
+            },
+          },
+          {
+            name: '开票金额',
+            type: 'line',
+            showSymbol: false,
+            symbolSize: 8,
+            data: this.echartsData.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(0, 216, 241, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(0, 216, 241, 0)'
+                }
+              ])
+            },
+          },
+          {
+            name: '到账金额',
+            type: 'line',
+            showSymbol: false,
+            symbolSize: 8,
+            data: this.echartsData.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(108, 251, 206, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(108, 251, 206, 0)'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+
+      createLineChart('singleMonthEchartsScreen', option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+
+</style>

src/views/screen/incomePayments/SingleMonthTotalEcharts.vue

@@ -0,0 +1,285 @@
+<!--大屏模块- 全所收入 累计统计echarts-->
+<template>
+  <div class="income-full-box">
+    <img class="box-bg-img" src="../../../assets/screen/income_full_bg.png" alt="">
+
+    <div class="box-title">全所收入统计 (累计)</div>
+    <div class="box-content">
+      <!--    echarts-->
+      <div class="echarts-box" id="singleMonthTotalEchartsScreen"></div>
+
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 1100}"
+          :dataSource="dataSource"
+          :pagination="false"
+          :loading="loading"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
+        </a-table>
+      </div>
+      <!--   表格区域end -->
+    </div>
+
+    <!--    echarts-->
+
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  ToolboxComponent
+])
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {MonthDataTotal} from '@views/statisticalReport/statisticData'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import { createLineChart } from '../util/LineOptions'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 110,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+MonthDataTotal.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 125,
+    dataIndex: tt.key,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+
+
+export default {
+  name: 'SingleMonthEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      columns,
+      url: {
+        list: '/index/cumulativeGraphList'
+      },
+      disableMixinCreated:true,
+      echartsData:{
+        // allMoney:[],
+        confirmAmount:[],
+        billMoney:[],
+        comeAllMoney:[]
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          //  树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
+          let tableData = [
+            // {indexName: '年度待确收金额'},
+            {indexName: '确认收入金额'},
+            {indexName: '开票金额'},
+            {indexName: '到账金额'},
+          ]
+
+          dataSource.map((item, index) => {
+            let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              // tableData[0][key] = item.allMoney // 年度待确收金额
+              tableData[0][key] = item.confirmAmount // 确认收入金额
+              tableData[1][key] = item.billMoney // 开票金额
+              tableData[2][key] = item.comeAllMoney // 到账金额
+            }
+          })
+          this.initEchartsData(res.result)
+          // 初始化 echarts
+          this.initEcharts()
+          this.dataSource = tableData
+
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 将后端返回的数据 处理成 echarts需要的数据 格式
+    initEchartsData(data) {
+      data.map(item =>{
+        // this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+        this.echartsData.billMoney.push(item.billMoney)
+        this.echartsData.comeAllMoney.push(item.comeAllMoney)
+      })
+    },
+    initEcharts() {
+      // 处理x轴数据
+      let xData = MonthDataTotal.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+
+      // let chartDom = document.getElementById('singleMonthTotalEcharts')
+      // let myChart = echarts.init(chartDom)
+      let option = {
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name: '确认收入金额',
+            type: 'line',
+            showSymbol: false,
+            // symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(68, 113, 239, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(68, 113, 239, 0)'
+                }
+              ])
+            },
+          },
+          {
+            name: '开票金额',
+            type: 'line',
+            showSymbol: false,
+            // symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(0, 216, 241, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(0, 216, 241, 0)'
+                }
+              ])
+            },
+          },
+          {
+            name: '到账金额',
+            type: 'line',
+            showSymbol: false,
+            // symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(108, 251, 206, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(108, 251, 206, 0)'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+      createLineChart('singleMonthTotalEchartsScreen', option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/screen/incomePayments/ThreeYearEcharts.vue

@@ -0,0 +1,162 @@
+<!--应收合同额统计-->
+<template>
+  <div class="income-full-box income-full-no-table-box">
+    <img class="box-bg-img" src="../../../assets/screen/full_no_table_bg.png" alt="">
+    <div class="box-title">年度待确收金额统计</div>
+    <div class="box-content">
+      <div class="echarts-box" id="threeYearScreen"></div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import {BarChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import { createBarChart } from "../util/BarOptions";
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 100,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+export default {
+  name: 'ThreeYearEcharts',
+  mixins:[JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/index/threeYear',
+      },
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      },
+      columns
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: '应收金额'},
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.allMoney
+          })
+          this.dataSource = tableData
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 80,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name,
+          align: 'center',
+          width: 120,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    initEcharts(data) {
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+      // 处理y轴数据
+      data.map(item => {
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+      })
+
+      let option = {
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name: '应收金额',
+            data: this.echartsData.allMoney,
+            type: 'bar',
+            barMaxWidth: 60,
+            itemStyle: {
+              borderRadius: [8, 8, 0, 0]
+            }
+          }
+        ]
+      }
+
+      // option && myChart.setOption(option)
+      // window.addEventListener('resize', () => {
+      //   myChart.resize()
+      // })
+      createBarChart('threeYearScreen', option)
+    }
+  }
+}
+</script>

src/views/screen/incomePayments/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="screen-income-payment">
+    <!-- 全所收入统计 累计-->
+    <single-month-total-echarts></single-month-total-echarts>
+    <!--  全所收入统计 单月-->
+    <single-month-echarts></single-month-echarts>
+    <!-- 科室总体统计 -->
+    <department-total-echarts ></department-total-echarts>
+
+    <!-- 收入分类统计 -->
+    <income-sort-echarts></income-sort-echarts>
+    <!-- 应收账款统计 -->
+    <not-received-echarts></not-received-echarts>
+    <!--年度待确收金额统计 -->
+    <three-year-echarts ></three-year-echarts>
+
+    <!-- 企业客户统计（年度待确收金额前二十）-->
+    <all-money-ten-echarts></all-money-ten-echarts>
+
+  </div>
+</template>
+
+<script>
+import SingleMonthTotalEcharts from './SingleMonthTotalEcharts'
+import SingleMonthEcharts from './SingleMonthEcharts'
+import DepartmentTotalEcharts from './DepartmentTotalEcharts'
+import IncomeSortEcharts from './IncomeSortEcharts'
+import NotReceivedEcharts from './NotReceivedEcharts'
+import ThreeYearEcharts from './ThreeYearEcharts'
+import AllMoneyTenEcharts from './AllMoneyTenEcharts'
+
+export default {
+  name: 'index',
+  components: {
+    // 全所收入统计 累计
+    SingleMonthTotalEcharts,
+    //  全所收入统计 单月
+    SingleMonthEcharts,
+    DepartmentTotalEcharts,
+    IncomeSortEcharts,
+    NotReceivedEcharts,
+    ThreeYearEcharts,
+    AllMoneyTenEcharts
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+.screen-income-payment{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+// 全屏box-有表格 1875 * 878
+.income-full-box {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 46.8%;
+
+  /deep/ .box-bg-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+
+  /deep/ .box-title {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #DDF0FF;
+    position: absolute;
+    // 目前先全局，其他的可以自定义
+    top: 3.89%;
+    left: 13.70%;
+    transform: translate(-50%, -50%);
+  }
+
+  // 内容的部分
+  /deep/ .box-content {
+    position: absolute;
+    width: calc(100% - 100px);
+    height: calc(100% - 6% * 2);
+    top: 7%;
+    left: 50px;
+    display: flex;
+    flex-direction: column;
+    .echarts-box {
+      width: 100%;
+      flex: 1;
+    }
+  }
+
+
+}
+// 50%的box
+.income-half-box{
+  width: 50%;
+  //height: 736px;
+  height:600px;
+  padding-top: 0;
+  /deep/ .box-title {
+    // 自定义位置
+    top: 4.69%;
+    left: 27.50%;
+  }
+  /deep/ .box-bg-img {
+    height: 100%;
+  }
+}
+//全屏的box 里面没有表格 1875 * 587
+/deep/ .income-full-no-table-box{
+  padding-top: 31.31%;
+
+  .box-title {
+    // 34.5 / 高度 587
+    top: 5.88%;
+  }
+  .box-content{
+    height: calc(100% - 8% * 2);
+    top: 8%;
+  }
+}
+// 最后一个标题比较长的信息
+.income-more-title-full-box{
+  /deep/ .box-title {
+    // (139 + 327 / 2) / 1875
+    left: 16.13%;
+    top: 6.2%;
+  }
+}
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 6%;
+  padding-top: 4%;
+  position: relative;
+  z-index: 100;
+  margin-left: 50%;
+}
+
+
+// 表格样式的修改
+/deep/ .ant-table-fixed{
+  border-color: transparent!important;
+}
+/deep/ .ant-table-thead tr > th {
+  color: #FFFFFF;
+  font-weight: bold;
+  background: transparent;
+  border: none;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+/deep/ .ant-table-tbody tr > td {
+  color: #A1E1FD;
+  border: none;
+  //border-bottom: 1px solid rgb(245,245,246);
+}
+
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #FFFFFF;
+  font-weight: bold;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+/deep/ .ant-table-tbody tr:nth-of-type(2n + 1) {
+  //background: #233062;
+  background: rgba(136, 216, 251, 0.1);
+}
+
+/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  //background: #233062;
+  background: rgba(136, 216, 251, 0.2);
+}
+
+/deep/ .ant-table-content .ant-table-placeholder {
+  background: transparent;
+  border: none;
+}
+/deep/.ant-empty-description{
+  color: white;
+}
+
+@borderColor: #7599E8;
+@backgroundColor: #233062;
+
+
+//下拉框，输入框
+/deep/ .ant-select-selection {
+  border: none;
+  background: transparent !important;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+/deep/ .ant-select-selection-selected-value {
+  color: #fff;
+}
+/deep/ .ant-select-arrow {
+  color: #fff !important;
+}
+
+/deep/.ant-select-focused .ant-select-selection,
+.ant-select-selection:focus,
+.ant-select-selection:active{
+  border: none!important;
+  box-shadow: none;
+}
+
+/deep/.table-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/*表格滚动条*/
+/deep/.ant-table-body {
+  overflow-x: auto!important;
+}
+
+/* 增加媒体查询的限制*/
+@media screen and (max-width: 1400px) {
+  /deep/.income-more-title-full-box .box-title {
+    font-size: 14px;
+  }
+}
+
+</style>
+<style lang="less">
+@fontColor: #fff;
+@selectColor: #FFF500;
+@backgroundSelected: rgba(255, 255, 255, 0.10);
+@white: #fff;
+@normal-color: rgba(256, 256, 256, 0.2);
+.screen-select{
+  max-height: 200px!important;
+  max-width: 100px;
+}
+/deep/.screen-select.ant-select-tree li .ant-select-tree-node-content-wrapper {
+  color: @fontColor!important;
+}
+
+.screen-department-select{
+  &::-webkit-scrollbar-track{
+    background: #293f6a!important;
+  }
+  &::-webkit-scrollbar-thumb{
+    background: #445a9c!important;
+  }
+  &::-webkit-scrollbar-corner {
+    background: #293f6a;
+  }
+  background-color: #181F55;
+  .ant-select-dropdown-content{
+    background-color: #181F55;
+  }
+  .ant-select-tree-title, svg{
+    color: #bdbec6;
+  }
+  .ant-select-tree li .ant-select-tree-node-content-wrapper:hover{
+    background-color: #7599E8;
+    .ant-select-tree-title{
+      color: #fff;
+    }
+  }
+  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected{
+    background-color: #4364C2;
+    .ant-select-tree-title{
+      color: #fff;
+    }
+  }
+
+  .ant-select-dropdown-search{
+    background-color: #181F55;
+    input{
+      border-color: #7599E8!important;
+      background: #233062 !important;
+      color: white;
+    }
+  }
+  .ant-empty-description{
+    color: #fff;
+  }
+}
+
+</style>

src/views/screen/iso/ExpertChart.vue

@@ -0,0 +1,186 @@
+<!--国际专家统计-->
+<template>
+  <div class="iso-full-box">
+    <div class="box-title">国际专家统计</div>
+    <div class="box-content">
+      <div class="select-info-box">
+        <div class="left-select">
+<!--          <span class="label">技术领域：</span>-->
+          <a-select
+            class="right-select active"
+            style='width: 200px'
+            v-model="searchParams.field"
+            mode="multiple"
+            placeholder="技术领域"
+            :bordered="false"
+            :maxTagCount="1"
+            show-search
+            :filter-option="filterOption"
+            @change="fieldSelectChange"
+            dropdown-class-name="ant-select-screen"
+          >
+<!--  <a-icon slot="suffixIcon" type="gold" />-->
+            <a-select-option
+              v-for="(item, index) in fieldOptionData"
+              :key="index + item.orgCode"
+              :value="item.orgCode"
+            >
+              {{item.departName}}
+            </a-select-option>
+          </a-select>
+
+        </div>
+
+        <div class="title-right-sub">
+          <span>专家总数：</span>
+          <span class="num">{{totalAll}}</span>
+        </div>
+
+      </div>
+
+      <div class="echarts-box " id="isoExpertChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetExpertChartData, GetTechnicalFieldData } from '../../../screenApi/api'
+import { createLineChart } from '../util/LineOptions'
+
+export default {
+  name: 'ExpertChart',
+  data() {
+    return {
+      searchParams: {},
+      totalAll: '',
+      fieldOptionData: [], // 技术领域的下拉框数据
+    }
+  },
+  methods: {
+    getData() {
+      // 技术领域的参数值： orgCode： 后面是逗号分隔
+      let params = {}
+      if(this.searchParams.field && this.searchParams.field.length > 0) {
+        params.orgCode = this.searchParams.field.join()
+      }
+      GetExpertChartData(params).then(res => {
+        if(res.success) {
+          let data = res.result || {}
+          this.$nextTick(() => {
+            this.initChart(data)
+          })
+        }
+      })
+
+    },
+    /**
+     * count: 112
+     leftDate: ["第一季度", "第二季度", "第三季度", "第四季度"]
+     resultMapList: []
+     0: {orgName: "国际注册专家", count: ["89", "102", "108", "111"]}
+     1: {orgName: "国内支撑专家", count: ["0", "1", "1", "1"]}
+     * @param data
+     */
+    initChart(data) {
+      let xData = data.leftDate
+      let echartsData = data.resultMapList || []
+      let totalAll = echartsData.reduce((pre, val) => {
+        // 取最后一个季度的数据算出总数
+        let innerNum = val.count[val.count.length - 1]
+        return Number(pre) + Number(innerNum)
+      }, 0)
+      this.totalAll = totalAll
+      let option = {
+        xAxis: {
+          data: xData,
+        },
+        series: [
+          {
+            data: echartsData[0].count
+          },
+          {
+            data: echartsData[1].count
+          }
+        ]
+      }
+      createLineChart('isoExpertChart', option, true)
+
+    },
+    getOptionData() {
+      /*{departName: "SAG", orgCode: "A01A01"}*/
+      GetTechnicalFieldData().then(res => {
+        if(res.success) {
+          this.fieldOptionData = res.result.departList || []
+        }
+      })
+    },
+    // 下拉框发生改变
+    fieldSelectChange() {
+      this.getData()
+    },
+    // 下拉框的搜索
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+  },
+  created() {
+    this.getData()
+    this.getOptionData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@white: #fff;
+.title-right-sub {
+  text-align: right;
+  margin-top: 5px;
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+    text-shadow: 0 0 4px #6CFBCE;
+  }
+}
+
+.select-info-box{
+  width: 75%;
+  margin-left: 25%;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .left-select > span:not(.label) {
+    margin-right: 15px;
+    color: @white;
+  }
+  .label{
+    color: @white;
+  }
+
+  /deep/.ant-select{
+    text-shadow: 0 0 5px #88D8FB;
+    ul> li {
+      background: transparent;
+      border-color: transparent;
+      color: #fff;
+    }
+    svg{
+      color: #fff;
+    }
+  }
+  ::v-deep .ant-select-selection__placeholder{
+    color: #fff;
+  }
+}
+
+</style>

src/views/screen/iso/LeadingStandardChart.vue

@@ -0,0 +1,311 @@
+<!--中国牵头标准信息统计-->
+<template>
+  <div class="iso-full-box iso-full-table">
+    <div class="box-title">中国牵头标准信息统计</div>
+    <div class="box-content">
+<!--      y: 500-->
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="projectId"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1200, y: 540}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table iso-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+          <span v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
+           <j-ellipsis :length="7" :value=" item[item.dataIndex] "></j-ellipsis>
+          </span>
+          <template slot="standard-name" slot-scope="text, record">
+            <a-tooltip>
+              <template slot="title">
+                <div>{{ record.standardNameChinese }}</div>
+                <div>{{ record.standardNameEnglish }}</div>
+              </template>
+              <div class="name-div-inner">
+                <div class="">{{ record.standardNameChinese }}</div>
+                <div class="">{{ record.standardNameEnglish }}</div>
+              </div>
+            </a-tooltip>
+
+          </template>
+        </a-table>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetLeadingStandardData } from '../../../screenApi/api'
+
+const defaultSorter = {
+  column: 'createTime',
+  order: 'desc'
+}
+
+export default {
+  name: 'LeadingStandardChart',
+  data() {
+    return {
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'rowIndex',
+          width: 70,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '标准号',
+          align: 'center',
+          dataIndex: 'standardNumber',
+          width: '200px',
+          scopedSlots: {customRender: 'text'},
+        },
+        {
+          title: '标准名称',
+          align: 'center',
+          width: '500px',
+          dataIndex: 'standardName',
+          scopedSlots: { customRender: 'standard-name' }
+        },
+        {
+          title: '技术领域',
+          align: 'center',
+          dataIndex: 'technosphere',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '牵头单位',
+          align: 'center',
+          dataIndex: 'unit',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '目前状态',
+          align: 'center',
+          dataIndex: 'stageDescribe',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [],
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: false,
+        total: 0
+      },
+      /* 排序参数 */
+      isorter: {
+        column: 'createTime',
+        order: 'desc'
+      },
+      /* table加载状态 */
+      loading: false
+    }
+  },
+  methods: {
+    getData(arg) {
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let param = Object.assign({}, this.isorter)
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      this.loading = true
+      GetLeadingStandardData(param).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+          this.operateData(this.dataSource)
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 操作表格中的数据
+    operateData(data) {
+      data.map(tt => {
+        tt.technosphere = `${tt.technosphereSc_dictText || ''}  ${tt.technosphereWg_dictText || ''}`
+        tt.standardNumber = `ISO ${tt.standardNumber}`
+        if(tt.standardYear) {
+          tt.standardNumber = `${tt.standardNumber}：${tt.standardYear}`
+        }
+        if(tt.supplement) {
+          tt.standardNumber = `${tt.standardNumber} / ${tt.supplement}`
+        }
+        // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个'
+        // tt.standardNameEnglish = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
+        // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
+      })
+    },
+    handleTableChange(pagination, filters, sorter) {
+      //分页、排序、筛选变化时触发
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field
+        if (sorter.order) {
+          //   如果当前有列选中筛选条件
+          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
+        } else {
+          //   没有筛选值则 isorter 重置为初始值
+          this.isorter.column = defaultSorter.column
+          this.isorter.order = defaultSorter.order
+        }
+
+      } else {
+        this.isorter.column = defaultSorter.column
+        this.isorter.order = defaultSorter.order
+      }
+      this.ipagination = pagination
+      this.getData()
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+/deep/ .ant-table-body > table{
+  border-color: transparent;
+}
+// 表格样式的修改
+/deep/ .ant-table-thead tr > th {
+  color: #FFFFFF;
+  font-weight: bold;
+  background: transparent;
+  border: none;
+  text-shadow: 0 0 5px #88D8FB;
+  padding-bottom: 20px;
+}
+
+/deep/ .ant-table-tbody tr > td {
+  color: #A1E1FD;
+  border: none;
+  //border-bottom: 1px solid rgb(245,245,246);
+  .name-div-inner{
+    min-height: 84px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+/*
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #FFFFFF;
+  font-weight: bold;
+}
+*/
+
+/deep/ .ant-table-tbody tr:nth-of-type(2n + 1) {
+  //background: #233062;
+  background: rgba(136, 216, 251, 0.1);
+}
+/deep/ .ant-table-tbody tr:nth-of-type(2n){
+  background: transparent;
+}
+
+/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  //background: #233062;
+  background: rgba(136, 216, 251, 0.2);
+}
+
+/deep/ .ant-table-content .ant-table-placeholder {
+  background: transparent;
+  border: none;
+}
+/deep/.ant-empty-description{
+  color: white;
+}
+
+/deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body{
+  background-color: transparent;
+}
+/deep/.ant-table-fixed{
+  border-color: transparent!important;
+}
+
+// 高度必须固定否则没有办法出滚动条
+.iso-full-table.iso-full-box{
+  //height: 600px;
+  height: 810px;
+  padding-top: 0;
+  //background: transparent;
+  /deep/* {
+    background: transparent;
+  }
+
+}
+.iso-table{
+  margin-top: 80px;
+  width: 100%;
+  height: 100%;
+  //overflow: auto;
+}
+
+// 分页器样式
+::v-deep .ant-pagination,
+::v-deep .ant-table-pagination li,
+::v-deep .ant-table-pagination li a,
+::v-deep .ant-table-pagination li input
+{
+  color: #fff;
+}
+::v-deep .ant-pagination .ant-pagination-item-active{
+  border-color: rgba(86, 113, 231, 0.3);
+}
+
+::v-deep .ant-table-pagination li input{
+  border-color: rgba(86, 113, 231, 0.3);
+  box-shadow: 0 0 0 2px rgba(86, 113, 231, 0.1);
+}
+
+
+.table-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/*表格滚动条*/
+/deep/.ant-table-body {
+  overflow-x: auto!important;
+  overflow-y: auto!important;
+}
+/deep/ .ant-table-header{
+  overflow: hidden!important;
+  padding-bottom: 12px!important;
+  padding-top: 5px!important;
+}
+
+</style>

src/views/screen/iso/MeetingCalendar.vue

@@ -0,0 +1,370 @@
+<!--iso-国际会议统计-->
+<template>
+  <div class="iso-full-box calendar-box">
+    <div class="box-title">国际会议统计</div>
+    <div class="box-content">
+      <div class="content-header">
+        <img class="header-img" @click="prev" src="../../../assets/screen/calendar_left_icon.png" alt="">
+        <span class="header-text">{{ time }}主要会议安排</span>
+        <img class="header-img" @click="next" src="../../../assets/screen/calendar_right_icon.png" alt="">
+      </div>
+
+      <div class="header-right">
+        <div class='header-num'>
+          <span>会议总数：</span>
+          <span class='num'>{{this.scheduleList.length}}</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#5671E7"></span>
+          <span class="text">TC 22</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#6CFBCE"></span>
+          <span class="text">SC</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#69C4F3"></span>
+          <span class="text">WG</span>
+        </div>
+      </div>
+      <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetISOMeetingCalendarData } from '../../../screenApi/api'
+// 引入日历组件
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import tippy from 'tippy.js'
+
+export default {
+  name: 'MeetingCalendar',
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      calendarOptions: {
+        //   timeGridPlugin  可显示每日时间段
+        height: 700,
+        // contentHeight: 'auto',
+        plugins: [dayGridPlugin, interactionPlugin],
+        headerToolbar: null,
+        firstDay: 0,
+        editable: false,
+        selectable: false,
+        navLinks: false,
+        // displayEventEnd: true,//所有视图显示结束时间
+        initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
+        // dateClick: this.handleDateClick,
+        // eventClick: this.handleEventClick,
+        eventMouseEnter: this.eventMouseoverOne,
+        eventMouseLeave: this.eventMouseoutOne,
+        // timezone
+        // 设置日程
+        events: [],
+        eventColor: '#f08f00', // 修改日程背景色
+        weekNumberCalculation: 'ISO', // 周数
+        fixedWeekCount: false, //月份 固定周数
+        customButtons: {}
+      },
+      scheduleList: [],
+      time: '',
+      calendarApi: {}
+    }
+  },
+  methods: {
+    getData() {
+      let query = {
+        // orgCode: this.orgCode,
+        // cutTime: ''
+      }
+      GetISOMeetingCalendarData(query).then((res) => {
+        if (res.success) {
+          this.scheduleList = res.result || []
+          this.getReservationList(res.result)
+        } else {
+          this.scheduleList = []
+        }
+      })
+    },
+    prev() {
+      this.calendarApi.prev()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    },
+    // 切换下一个按钮事件
+    next() {
+      this.calendarApi.next()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    },
+    // 点击今天按钮
+    today() {
+      this.calendarApi.today()
+    },
+    handleDateClick: function(arg) {
+      this.$forceUpdate()
+      console.log(arg, '事件1')
+    },
+    getReservationList(arrayData) {
+      let newArr = []
+      arrayData.forEach((item) => {
+        if (item.orgType === 'TC22') {
+          item.status = '#5671E7'
+          item.textColor = '#091C7C'
+        } else if (item.orgType === 'SC') {
+          item.status = '#6CFBCE'
+          item.textColor = '#115379'
+        } else {
+          item.status = '#69C4F3'
+          item.textColor = '#115379'
+        }
+        newArr.push({
+          start: this.dealWithTime(item.time),
+          end: this.addDate(this.dealWithTime(item.endTime), 1),
+          color: item.status,
+          textColor: item.textColor,
+          id: item.meetingId,
+          title: `${item.name}`
+        })
+      })
+      this.calendarOptions.events = newArr
+    },
+    getShowTime(beginDate, endDate) {
+      this.form.startDate = this.dealWithTime(beginDate)
+      this.form.startTime = this.getHoursMin(beginDate)
+      this.form.endDate = this.dealWithTime(endDate)
+      this.form.endTime = this.getHoursMin(endDate)
+    },
+    // 获取时分时间
+    getHoursMin(value) {
+      return value.substring(11, 16)
+    },
+    // 处理会议时间格式
+    dealWithTime(date) {
+      let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0]
+      return newDate
+    },
+
+    // 日期加1天
+    addDate(date, days) {
+      var d = new Date(date)
+      d.setDate(d.getDate() + days)
+      var mon = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
+      let endD = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
+      return `${d.getFullYear()}-${mon}-${endD}`
+    },
+    eventMouseoverOne(data) {
+      let content = this.scheduleList.filter(res => {
+        return res.meetingId == data.event.id
+      })
+      //todo 缺一个type的字段
+      tippy(data.el, {
+        content:
+          '<div class="tippy-content-box" style="">' +
+          '<span style="margin-right: 10px;" class="text-index">' + content[0].orgType + '</span>' + '<span class="text-index">' + content[0].name + '</span>' +
+          '<div class="tippy-content">技术领域: ' + content[0].type + '</div>' + '' +
+          '<div class="tippy-content">时间: ' + content[0].timeAll + '</div>' + '' +
+          '<div class="tippy-content">地点: ' + content[0].place + '</div>' +
+          '<div class="tippy-content">参会人: ' + content[0].meetingPersons + '</div>' + '</div>',
+        interactive: false,
+        // placement: 'top',
+        allowHTML: true
+      })
+    },
+    eventMouseoutOne() {
+
+    },
+    // 获取会议事件title
+    getTitle(date1, date2) {
+      let start = date1.substring(11, 16)
+      let end = date2.substring(11, 16)
+      return `${start}~${end}`
+    }
+  },
+  created() {
+    // 获取用户信息
+    this.$nextTick(() => {
+      this.calendarApi = this.$refs.fullCalendar.getApi()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    })
+    // this.getReservationList(this.scheduleList)
+    this.getData()
+  },
+}
+</script>
+
+<style scoped lang="less">
+@white: #fff;
+@normal-color: rgba(256, 256, 256, 0.3);
+div.calendar-box{
+  background-image: url("../../../assets/screen/calendar_bg.png");
+  padding-top: 43.4%;
+  .box-title{
+    //34.5 / 高度 814
+    top: 4.24%;
+  }
+}
+.content-header {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.header-img {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+
+.header-text {
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: @white;
+  margin-left: 26px;
+  margin-right: 26px;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+.header-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  transform: translateY(-35px);
+  height: 0;
+}
+
+.header-right-text {
+  display: flex;
+  align-items: center;
+  margin-left: 28px;
+}
+
+.radius {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.text {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: @white;
+  margin-left: 8px;
+}
+
+.header-num{
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+    text-shadow: 0 0 4px #6CFBCE;
+  }
+}
+/*日历组件的修改  */
+::v-deep .fc-theme-standard td,
+::v-deep.fc-theme-standard .fc-scrollgrid{
+  border-color: rgba(86, 113, 231, 0.3);
+}
+// 头部没有边框
+::v-deep .fc-theme-standard th{
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: rgba(86, 113, 231, 0.3);
+}
+
+::v-deep .fc-theme-standard .fc-scrollgrid {
+  border-top-color: transparent;
+  border-left: none;
+}
+::v-deep .fc .fc-scrollgrid table.fc-scrollgrid-sync-table {
+  border-left: 1px solid rgba(86, 113, 231, 0.3);
+}
+
+::v-deep .fc-daygrid-day .fc-daygrid-day-number {
+  font-weight: bold;
+  color: @white;
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+
+::v-deep .fc-day-other .fc-daygrid-day-number {
+  color: @normal-color;
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+::v-deep .fc-col-header-cell-cushion {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: @white;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+::v-deep .fc-col-header-cell {
+  height: 38px;
+  line-height: 38px;
+}
+
+
+::v-deep .fc-event-main {
+  padding: 2px 10px;
+}
+
+::v-deep .fc-toolbar-chunk .fc-button-primary {
+  display: none;
+}
+
+::v-deep .fc .fc-daygrid-day.fc-day-today{
+  background-color: #7599E8;
+}
+
+::v-deep .fc-event-title{
+  font-weight: 800!important;
+}
+
+</style>
+<style lang="less">
+.tippy-content-box {
+  background: #233062;
+  color: #fff;
+  border-radius: 6px;
+  padding: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 0 4px #7599E8 inset;
+  .text-index {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #fff;
+  }
+
+  .tippy-content {
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #fff;
+    margin-top: 8px;
+  }
+}
+
+</style>

src/views/screen/iso/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="screen-iso">
+    <!-- 中国牵头标准信息统计 -->
+    <leading-standard-chart></leading-standard-chart>
+    <!-- 国际会议统计-->
+    <meeting-calendar></meeting-calendar>
+    <!-- 国际专家统计-->
+    <expert-chart></expert-chart>
+  </div>
+</template>
+
+<script>
+//中国牵头标准信息统计
+import LeadingStandardChart from './LeadingStandardChart'
+
+// //国际会议统计
+import MeetingCalendar from './MeetingCalendar'
+// //国际专家统计
+import ExpertChart from './ExpertChart'
+
+
+export default {
+  name: 'index',
+  components: {
+    // 中国牵头标准信息统计
+    LeadingStandardChart,
+    // 国际会议统计
+    MeetingCalendar,
+    // 国际专家统计
+    ExpertChart
+  }
+}
+</script>
+
+<style scoped lang="less">
+.screen-iso{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+// 全屏box-有表格 1875 * 587
+.iso-full-box {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 31.31%;
+  background-image: url("../../../assets/screen/full_no_table_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  /deep/ .box-title {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #DDF0FF;
+    position: absolute;
+    // 34.5 / 高度 587
+    top: 5.88%;
+    left: 13.70%;
+    transform: translate(-50%, -50%);
+  }
+
+  /deep/ .box-content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 2.3% 4%;
+    //padding: 4.61% 4%;
+    .echarts-box {
+      width: 100%;
+      flex: 1;
+    }
+  }
+}
+// 50%的box 536 * 931
+/deep/.iso-half-box{
+  width: 50%;
+  height: 0;
+  padding-top: 28.79%;
+  background-image: url("../../../assets/screen/half_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .box-title {
+    // (25 + 18 / 2) / 635
+    top: 6.34%;
+    // (171 + 149 / 2) / 931
+    left: 26.37%;
+  }
+  .box-content {
+    padding: 4.61% 6%;
+  }
+}
+
+@normal-color: rgba(256, 256, 256, 0.5);
+@white: #fff;
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  width: 50%;
+  margin-left: 50%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+  }
+}
+
+
+//下拉框样式的修改
+/deep/.ant-select-selection{
+  border: none!important;
+  background: transparent;
+  color: @normal-color;
+}
+/deep/.ant-select.active  .ant-select-selection{
+  color: @white!important;
+}
+
+/deep/.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
+  border: none!important;
+  box-shadow: none;
+}
+/deep/.ant-select-arrow{
+  color: @white;
+}
+
+// 时间选择器的样式
+/deep/.ant-calendar-picker,
+/deep/.ant-calendar-picker-input.ant-input,
+/deep/ .ant-calendar-picker-icon{
+  border: none!important;
+  background: transparent;
+  color: @white;
+}
+
+</style>
+<style lang="less">
+@normal-color: rgba(256, 256, 256, 0.2);
+.ant-calendar-dropdown-screen{
+  .ant-calendar{
+    border: none;
+    box-shadow: 0 0 4px #7599E8 inset;
+  }
+  .ant-calendar-month-panel-body,
+  .ant-calendar-month-panel-header,
+  .ant-calendar-year-panel-body,
+  .ant-calendar-year-panel-header
+  {
+    background-color: #181F55;
+    border: none!important;
+    color: #fff;
+  }
+  td a,
+  .ant-calendar-month-panel-year-select-content,
+  .ant-calendar-year-panel-decade-select
+  {
+    color: #fff;
+  }
+  .ant-calendar-month-panel-prev-year-btn::after,
+  .ant-calendar-month-panel-prev-year-btn::before,
+  .ant-calendar-month-panel-next-year-btn::before,
+  .ant-calendar-month-panel-next-year-btn::after
+  {
+    border-color: #fff;
+  }
+  // 选中的效果
+  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
+  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year{
+    background-color: #4364C2;
+  }
+
+  .ant-calendar-header a:hover{
+    color: #fff;
+    background-color: #7599E8;
+    //&::after,
+    //&::before{
+    //  color: #fff;
+    //}
+  }
+
+  .ant-calendar-year-panel-last-decade-cell a,
+  .ant-calendar-year-panel-next-decade-cell a
+  {
+    color: @normal-color;
+  }
+  //   年份选择器上面的输入框
+  .ant-calendar-input-wrap{
+    background-color: #181F55;
+    border-color: @normal-color;
+    input{
+      background-color: #181F55;
+      border: none!important;
+      color: #fff;
+    }
+  }
+}
+
+</style>

src/views/screen/preparationRevision/CentralizedChart.vue

@@ -0,0 +1,112 @@
+<!--标准归口情况-->
+<template>
+  <div class="preparation-full-box">
+    <div class="box-title">标准归口情况</div>
+    <div class="box-content">
+      <div class="echarts-box" id="centralizedChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetCentralizedData } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+
+export default {
+  name: 'CentralizedChart',
+  data() {
+    return {
+      xData: [],
+      yData: [[], []], // [在研数量[], 标准数量[]]
+    }
+  },
+  methods: {
+    getData() {
+      GetCentralizedData().then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+    *    arr--对象数组，每个对象的key值如下
+    *   "标准": 121,
+    *   "在研": 9,
+    *   "tm_code": "SC1"
+    *
+    * */
+    initData(arr) {
+      this.xData = []
+      this.yData = [[], []]
+      arr.map(item => {
+        this.xData.push(item.tm_code)
+        this.yData[0].push(item['在研'])
+        this.yData[1].push(item['标准'])
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        xAxis: {
+          data: this.xData
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+            })
+            // return dataStr + `  <div style="padding-left: 10px;color: #7599E8">完成比例：${percent}</div>`
+            return dataStr
+          },
+        },
+        series: [
+          {
+            name:'在研数量',
+            data: this.yData[0],
+            type: 'bar',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          },
+          {
+            name:'标准数量',
+            data: this.yData[1],
+            type: 'bar',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          },
+        ]
+      }
+      createBarChart('centralizedChart', option)
+    },
+  },
+  created() {
+    this.getData()
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/preparationRevision/CompletionProjectChart.vue

@@ -0,0 +1,134 @@
+<!--各SC历年应完成项目情况-->
+<template>
+  <div class="preparation-full-box preparation-half-box preparation-half-box-completion">
+    <div class="box-title">各SC历年应完成项目情况</div>
+    <ul class="title-right title-right-completion">
+      <a-select
+        class="active"
+        v-model="selectValue"
+        style="width: 90px"
+        placeholder="各SC"
+        :bordered="false"
+        show-search
+        :show-arrow="true"
+        allow-clear
+        @change="selectChange"
+        dropdown-class-name="ant-select-screen"
+      >
+        <a-select-option
+          v-for="(item, index) in SCOptionData"
+          :key="index"
+          :value="item"
+        >
+          {{item}}
+        </a-select-option>
+      </a-select>
+    </ul>
+    <div class="box-content">
+      <div class="echarts-box" id="completionProjectChart"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { GetCompletionProjectData, GetShouldBeCompletedProjectData } from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+
+export default {
+  name: 'CompletionProjectChart',
+  data() {
+    return {
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+    }
+  },
+  methods: {
+    selectChange() {
+      this.getData()
+    },
+    // 初始化下拉框的数据
+    async getOptionData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.unshift({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+      // 默认选中当前年
+      // this.selectValue = year
+      // 先通过接口获取所有的SC数据
+      let {result, success} = await GetShouldBeCompletedProjectData({year})
+      if(success) {
+        this.initSCData(result || [])
+        this.selectValue = undefined
+      }
+    },
+    getData() {
+      GetCompletionProjectData({scCode: this.selectValue}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+    * {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
+    * */
+    initSCData(arr) {
+      this.SCOptionData = []
+      arr.map(item => {
+        this.SCOptionData.push(item.tm_code)
+      })
+    },
+    /*
+ * {"应报批总数2":186,"完成率字符串":"54.47%","应报批总数":123,"完成率数值2":40.32,"year":2022,"完成率数值":54.47,"完成数":67,"完成率字符串2":"40.32%","完成数2":75}
+ * */
+    initData(arr) {
+      this.yData = [[], [], []]
+      this.yearData.map(year => {
+        let item = arr.find(a => (a.year + '') === (year.value + ''))
+        if(item) {
+          this.yData[0].push(item['应报批总数'])
+          this.yData[1].push(item['完成数'])
+          this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
+        }
+      })
+      // arr.map(item => {
+      //   this.yData[0].push(item['应报批总数'])
+      //   this.yData[1].push(item['完成数'])
+      //   this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
+      // })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        xAxis: { data: this.yearData },
+        series: [
+          { data: this.yData[0] },
+          { data: this.yData[1] },
+          { data: this.yData[2] },
+        ]
+      }
+      createBarAndLineChart('completionProjectChart', option)
+    },
+  },
+  created() {
+    // 获取下拉框数据
+    this.getOptionData()
+    // 获取图表数据
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+/* 增加媒体查询的限制*/
+@media screen and (max-width: 1400px) {
+  .preparation-half-box .box-title {
+    font-size: 14px;
+  }
+}
+</style>

src/views/screen/preparationRevision/EnterpriseContributionChart.vue

@@ -0,0 +1,94 @@
+<!--第一起草单位贡献度排名-->
+<template>
+  <div class="preparation-full-box preparation-half-box">
+    <div class="box-title">第一起草单位贡献度排名</div>
+    <div class="box-content">
+      <div class="echarts-box" id="enterpriseContributionChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetEnterpriseContributionData } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+
+export default {
+  name: 'EnterpriseContributionChart',
+  data() {
+    return {
+      // 纵坐标分类的数据
+      categoryData: [],
+      barData: [[], []]
+    }
+  },
+  methods: {
+    getData() {
+      GetEnterpriseContributionData().then(res => {
+        if(res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据  计划数量、标准数量
+    * {"unit":"中国汽车技术研究中心","planNum":4,"total":232,"stdNum":228}
+    * */
+    initData(arr) {
+      let barData = [[], []]
+      let categoryData = []
+      arr.map(item => {
+        categoryData.unshift(item.unit)
+        barData[0].unshift(item.planNum) // 计划数量
+        barData[1].unshift(item.stdNum) // 标准数量
+      })
+      this.barData = barData
+      this.categoryData = categoryData
+    },
+    initChart() {
+      let option = {
+        yAxis: {
+          data: this.categoryData
+        },
+        series: [
+          {
+            name:'计划数量',
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            },
+            data: this.barData[0]
+          },
+          {
+            name:'标准数量',
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,4,4,0]
+            },
+            data: this.barData[1]
+          }
+        ]
+      }
+      createBarChart('enterpriseContributionChart', option, true)
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+/* 增加媒体查询的限制*/
+@media screen and (max-width: 1400px) {
+  .preparation-half-box .box-title {
+    font-size: 14px;
+  }
+}
+</style>

src/views/screen/preparationRevision/GeneralSituationChart.vue

@@ -0,0 +1,212 @@
+<!--汽车标准项目总体情况-->
+<template>
+  <div class="preparation-full-box">
+    <div class="box-title">汽车标准项目总体情况</div>
+    <div class="box-content">
+      <!--      发布国行标数量-->
+      <div class="general-situation-chart" id="releaseChart"></div>
+      <!--      在研国行标数量-->
+      <div class="general-situation-chart" id="researchChart"></div>
+      <!--      立项上报国行标数量-->
+      <div class="general-situation-chart" id="publicChart"></div>
+      <!--      外文版项目数量-->
+      <div class="general-situation-chart" id="foreignChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { StanderProjectGeneralSituation } from '../../../screenApi/api'
+import { createPieChart } from '../util/PieOptions'
+import { deepMerge } from '../../../utils/util'
+
+let commonOption = {
+  color: ['#5671E7', '#73BBF4'],
+  title: {
+    show: true,
+    top: '20%',
+    textStyle:{
+      color: '#FEFEFE',
+      fontSize: 16,
+      fontFamily: 'PingFang SC',
+      textShadowColor: '#88D8FB',
+      textShadowBlur: 5,
+      textShadowOffsetX: 0,
+      textShadowOffsetY: 0
+    }
+  },
+  tooltip: {
+    formatter: (param) => {
+      return `<div>
+<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
+<span style="color: #7599E8">${param.name}</span>
+<span style="color: #7599E8">${param.data.value}</span>
+</div>`
+    },
+  },
+  series: [
+    {
+      itemStyle: {
+        borderColor: '#162057',
+        borderWidth: 2
+      },
+      radius: ['25%', '40%'],
+      center: ['50%', '55%'],
+      roseType: false,
+      label: {
+        show: true,
+        color: '#7599E8',
+        formatter: '{b}: {c}',
+        fontsize: 14
+      }
+    },
+    {
+      type: 'pie',
+      itemStyle: {
+        borderColor: '#162057',
+        borderWidth: 2
+      },
+      radius: ['15%', '22%'],
+      center: ['50%', '55%'],
+      label: {
+        position: 'center',
+        fontSize: 25,
+        color: '#fff',
+        fontWeight: 800
+      },
+    }
+  ]
+}
+
+export default {
+  name: 'GeneralSituationChart',
+  data() {
+    return {
+      //   发布国行标数量
+      releaseData : [
+        {value: '', name: '国家标准'},
+        {value: '', name: '行业标准'},
+      ],
+      releaseAll: '',
+      //   在研国行标数量
+      researchData : [
+        {value: '', name: '国家标准'},
+        {value: '', name: '行业标准'},
+      ],
+      researchAll: '',
+      //   立项上报国行标数量
+      publicData : [
+        {value: '', name: '国家标准'},
+        {value: '', name: '行业标准'},
+      ],
+      publicAll: '',
+      //   外文版项目数量
+      foreign: [
+        {value: '', name: '在研'},
+        {value: '', name: '发布'},
+      ],
+      foreignAll: ''
+    }
+  },
+  methods: {
+  //   获取数据
+    getData() {
+      StanderProjectGeneralSituation().then(res => {
+        if(res.success) {
+          let result = res.result || {}
+          this.releaseData[0].value = result.stdGb
+          this.releaseData[1].value = result.stdHb
+          this.releaseAll = result.stdAll
+
+          this.researchData[0].value = result.planGb
+          this.researchData[1].value = result.planHb
+          this.researchAll = result.planAll
+          this.publicData[0].value = result.projectGb
+          this.publicData[1].value = result.projectHb
+          this.publicAll = result.projectAll
+          this.foreign[0].value = result.wwzy
+          this.foreign[1].value = result.wwfb
+          this.foreignAll = result.wwzy + result.wwfb
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let releaseChart0ption = {
+        title: { text: '发布国行标数量' },
+        series: [
+          { data: [...this.releaseData] },
+          {
+            data: [...this.releaseData], label: {
+              formatter: () => {
+                return this.releaseAll
+              }
+            }
+          }
+        ]
+      }
+      createPieChart('releaseChart', deepMerge(commonOption, releaseChart0ption))
+
+      let researchChart0ption = {
+        title: { text: '在研国行标数量' },
+        series: [
+          { data: [...this.researchData] },
+          {
+            data: [...this.researchData], label: {
+              formatter: () => {
+                return this.researchAll
+              }
+            }
+          }
+        ]
+      }
+      createPieChart('researchChart', deepMerge(commonOption, researchChart0ption))
+
+      let publicChart0ption = {
+        title: { text: '立项上报国行标数量' },
+        series: [
+          { data: [...this.publicData] },
+          {
+            data: [...this.publicData], label: {
+              formatter: () => {
+                return this.publicAll
+              }
+            }
+          }
+        ]
+      }
+      createPieChart('publicChart', deepMerge(commonOption, publicChart0ption))
+
+      let foreignChart0ption = {
+        title: { text: '外文版项目数量' },
+        series: [
+          { data: [...this.foreign] },
+          {
+            data: [...this.foreign], label: {
+              formatter: () => {
+                return this.foreignAll
+              }
+            }
+          }
+        ]
+      }
+      createPieChart('foreignChart', deepMerge(commonOption, foreignChart0ption))
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.general-situation-chart{
+  width: 25%;
+  height: 100%;
+}
+
+</style>

src/views/screen/preparationRevision/OverdueChart.vue

@@ -0,0 +1,144 @@
+<!--各SC超期情况统计-->
+<template>
+  <div class="preparation-full-box">
+    <div class="box-title">各SC超期情况统计</div>
+    <div class="box-content">
+      <div class="echarts-box" id="overdueChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {  GetOverdueData } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+
+export default {
+  name: 'OverdueChart',
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    getData() {
+      GetOverdueData().then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+    * {"延期后超期数":"0","项目总数":9,"延期后正常数":"0","完全超期数":"3","正常超期数":"3","没有延期完全正常数":"6","tm_code":"SC1"
+    * */
+    initData(arr) {
+      this.xData = []
+      this.yData = [[], [], []]
+      arr.map(item => {
+        this.xData.push(item.tm_code)
+        this.yData[0].push(item['没有延期完全正常数'])
+        this.yData[1].push(item['延期后正常数'])
+        this.yData[2].push(item['完全超期数'])
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: 'rgba(88, 115, 234, 1)'
+              },
+              {
+                offset: 0.8, color: 'rgba(88, 115, 234, 0.6)'
+              },
+              {
+                offset: 1, color: 'rgba(88, 115, 234, 0)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#69C4F3',
+          // '#6CFBCE'
+          'rgba(108, 251, 206, 0.9)'
+        ],
+        //
+        xAxis: {
+          data: this.xData
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          },
+        },
+        series: [
+          {
+            name:'正常完成',
+            data: this.yData[0],
+            type: 'bar',
+            barMaxWidth:20,
+            stack: 'total',
+            colorBy: 'series',
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            }
+          },
+          {
+            name:'延期完成',
+            data: this.yData[1],
+            type: 'bar',
+            barMaxWidth:20,
+            stack: 'total',
+            itemStyle:{
+              borderRadius:[0,0,0,0]
+            }
+          },
+          {
+            name:'完全超期',
+            data: this.yData[2],
+            type: 'bar',
+            barMaxWidth:20,
+            stack: 'total',
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          },
+        ]
+      }
+      createBarChart('overdueChart', option)
+    },
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/preparationRevision/PreparationRevisionChart.vue

@@ -0,0 +1,170 @@
+<!--汽车标准制修订情况 -->
+<template>
+  <div class="preparation-full-box">
+    <div class="box-title">汽车标准制修订情况</div>
+    <ul class="title-right">
+      <li :class="{'active': selectType === 1}" @click="selectTypeChange(1)">总体</li>
+      <img class="splice-icon" @click="changeType" src="../../../assets/screen/split_icon.png" alt="">
+      <a-select
+        :class="{'active': selectType === 2}"
+        v-model="selectValue"
+        style="width: 70px"
+        placeholder="各SC"
+        :bordered="false"
+        show-search
+        :show-arrow="false"
+        @change="selectChange"
+        dropdown-class-name="ant-select-screen"
+      >
+        <a-select-option
+          v-for="(item, index) in SCOptionData"
+          :key="index"
+          :value="item"
+        >
+          {{item}}
+        </a-select-option>
+      </a-select>
+    </ul>
+    <div class="box-content">
+      <div class="echarts-box" id="preparationRevisionChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetPreparationRevisionSC, GetPreparationRevisionSituation } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+
+export default {
+  name: 'PreparationRevisionChart',
+  data() {
+    return {
+      selectType: 1, // 统计的维度 1-总体  2-SC下拉框
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+      // SC所有请求的数据 key
+      SCData: {},
+      allData: { }, // 请求总体的数据
+      barData: [],
+      xData: ['预研', '待下达', '起草', '征求意见', '审查', '报批', '批准发布', '已发布']
+    }
+  },
+  methods: {
+    getData() {
+      GetPreparationRevisionSituation().then((res) => {
+        if (res.success) {
+          this.allData = res.result || {}
+          // 默认显示全部
+          this.initData(this.allData)
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+      GetPreparationRevisionSC().then((res) => {
+        if (res.success) {
+          try{
+            let result = res.result || []
+            let SCData = []
+            this.SCData = {}
+            result.map(item =>{
+              this.SCData[item.tm_code] = item
+              // let obj = {label: item.tm_code, value: item.tm_code}
+              SCData.push(item.tm_code)
+            })
+            this.SCOptionData = SCData
+          } catch (e) {
+            console.log('----e--------', e)
+          }
+        }
+      })
+    },
+    initData(obj) {
+      this.barData = []
+      this.xData.map(x => {
+        this.barData.push(obj[x])
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        tooltip:{
+          formatter: params => {
+
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              // console.log('------item--------', item)
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.axisValue}</span>
+            <span style="color:#7599E8;">${item.data}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          data: this.xData
+        },
+        series: [
+          {
+            // name:'年度待确收金额',
+            data: this.barData,
+            type: 'bar',
+            barMaxWidth:40,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            }
+          },
+        ]
+      }
+      createBarChart('preparationRevisionChart', option)
+    },
+    selectTypeChange(val) {
+      this.selectType = val
+      this.selectValue = undefined
+      //  操作数据
+      this.initData(this.allData)
+      this.initChart()
+    },
+    selectChange(val) {
+      if(val) {
+        this.selectType = 2
+        //  操作数据
+        this.initData(this.SCData[val])
+        this.initChart()
+      } else {
+        this.selectType = 1
+      }
+    },
+    // 点击中间的图片 做维度的转换
+    changeType() {
+      if(this.selectType === 1) {
+        this.selectValue = this.SCOptionData[0]
+        this.selectChange(this.SCOptionData[0])
+      } else {
+        this.selectTypeChange(1)
+      }
+    }
+  },
+  created() {
+    this.selectType = 1
+    this.getData()
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/preparationRevision/ReleasePlanChart.vue

@@ -0,0 +1,217 @@
+<!--历年计划下达情况-->
+<template>
+  <div class="preparation-full-box preparation-half-box">
+    <div class="box-title">历年计划下达情况</div>
+    <ul class="title-right">
+      <li :class="{'active': selectType === 1}" @click="selectTypeChange(1)">总体</li>
+      <img class="splice-icon" @click="changeType" src="../../../assets/screen/split_icon.png" alt="">
+      <a-select
+        :class="{'active': selectType === 2}"
+        v-model="selectValue"
+        style="width: 70px"
+        placeholder="各SC"
+        :bordered="false"
+        show-search
+        :show-arrow="false"
+        @change="selectChange"
+        dropdown-class-name="ant-select-screen"
+      >
+        <a-select-option
+          v-for="(item, index) in SCOptionData"
+          :key="index"
+          :value="item"
+        >
+          {{item}}
+        </a-select-option>
+      </a-select>
+    </ul>
+    <div class="box-content">
+      <div class="echarts-box" id="releasePlanChart"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  GetReleasePlanData,
+  GetReleasePlanDataBySC,
+  GetReleasePlanSCData
+} from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'ReleasePlanChart',
+  data() {
+    return {
+      selectType: 1, // 统计的维度 1-总体  2-SC下拉框
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+      yearData: [],
+      allData: [], // 总体请求的数据
+    }
+  },
+  methods: {
+    selectTypeChange(val) {
+      this.selectType = val
+      this.selectValue = undefined
+      //  操作数据
+      this.initData(this.allData)
+      this.initChart()
+    },
+    selectChange(val) {
+      if(val) {
+        this.selectType = 2
+        // 获取数据
+        this.getDataBySC(val)
+      } else {
+        this.selectType = 1
+      }
+    },
+    // 点击中间的图片 做维度的转换
+    changeType() {
+      if(this.selectType === 1) {
+        this.selectValue = this.SCOptionData[0]
+        this.selectChange(this.SCOptionData[0])
+      } else {
+        this.selectTypeChange(1)
+      }
+    },
+    getYearData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.unshift({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+    },
+    /*
+    * 初始化SC下拉框的数据
+    * {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
+    * */
+    initSCData(arr) {
+      this.SCOptionData = []
+      arr.map(item => {
+        this.SCOptionData.push(item.tm_code)
+      })
+    },
+    // 获取SC下拉框的数据
+    getOptionData() {
+      // 先通过接口获取所有的SC数据
+      GetReleasePlanSCData().then((res) => {
+        if (res.success) {
+          this.initSCData(res.result || [])
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据--取5年的数据做展示
+    * {"gbNum":51,"year":2012,"num":110,"hbNum":59}
+    * */
+    initData(arr) {
+      this.yData = [[], []]
+      this.yearData.map(year => {
+        let item = arr.find(a => (a.year + '') === (year.value + ''))
+        // console.log(item, '11111111111')
+        if(item) {
+          this.yData[0].push(item.gbNum) // 国家标准
+          this.yData[1].push(item.hbNum) // 行业标准
+        }
+      })
+    },
+    // 获取图表的数据-总体
+    getAllData() {
+      // 总体
+      GetReleasePlanData().then((res) => {
+        if (res.success) {
+          this.allData = res.result || []
+          // 默认显示全部
+          this.initData(this.allData)
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+
+    },
+    // 获取图表的数据- SC
+    getDataBySC(scCode) {
+      GetReleasePlanDataBySC({scCode}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    initChart() {
+      let option = {
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: 'rgba(88, 115, 234, 1)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8, color: 'rgba(88, 115, 234, 0.6)' // 100% 处的颜色
+              },
+              {
+                offset: 1, color: 'rgba(88, 115, 234, 0)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#6CFBCE'],
+        xAxis: { data: this.yearData },
+        series: [
+          {
+            name:'国家标准',
+            data: this.yData[0]
+          },
+          {
+            name:'行业标准',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#1B2451'
+                }
+              ])
+            },
+            data: this.yData[1],
+          }
+        ]
+      }
+      createBarAndLineChart('releasePlanChart', option)
+    }
+  },
+  created() {
+    this.selectType = 1
+    // 操作进5年的年份值
+    this.getYearData()
+    // 获取SC下拉框数据
+    this.getOptionData()
+    // 获取总体图表数据
+    this.getAllData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/preparationRevision/ReleaseStandardChart.vue

@@ -0,0 +1,214 @@
+<!--历年标准发布情况-->
+<template>
+  <div class="preparation-full-box preparation-half-box">
+    <div class="box-title">历年标准发布情况</div>
+    <ul class="title-right">
+      <li :class="{'active': selectType === 1}" @click="selectTypeChange(1)">总体</li>
+      <img class="splice-icon" @click="changeType" src="../../../assets/screen/split_icon.png" alt="">
+      <a-select
+        :class="{'active': selectType === 2}"
+        v-model="selectValue"
+        style="width: 70px"
+        placeholder="各SC"
+        :bordered="false"
+        show-search
+        :show-arrow="false"
+        @change="selectChange"
+        dropdown-class-name="ant-select-screen"
+      >
+        <a-select-option
+          v-for="(item, index) in SCOptionData"
+          :key="index"
+          :value="item"
+        >
+          {{item}}
+        </a-select-option>
+      </a-select>
+    </ul>
+    <div class="box-content">
+      <div class="echarts-box" id="releaseStandardChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  GetReleaseStandardData,
+  GetReleaseStandardSCData,
+  GetReleaseStandardDataBySC
+} from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'ReleaseStandardChart',
+  data() {
+    return {
+      selectType: 1, // 统计的维度 1-总体  2-SC下拉框
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+      allData: [], // 总体请求的数据
+    }
+  },
+  methods: {
+    selectTypeChange(val) {
+      this.selectType = val
+      this.selectValue = undefined
+      //  操作数据
+      this.initData(this.allData)
+      this.initChart()
+    },
+    selectChange(val) {
+      if(val) {
+        this.selectType = 2
+        // 获取数据
+        this.getDataBySC(val)
+      } else {
+        this.selectType = 1
+      }
+    },
+    // 点击中间的图片 做维度的转换
+    changeType() {
+      if(this.selectType === 1) {
+        this.selectValue = this.SCOptionData[0]
+        this.selectChange(this.SCOptionData[0])
+      } else {
+        this.selectTypeChange(1)
+      }
+    },
+    getYearData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.unshift({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+    },
+    /*
+    * 初始化SC下拉框的数据
+    * {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
+    * */
+    initSCData(arr) {
+      this.SCOptionData = []
+      arr.map(item => {
+        this.SCOptionData.push(item.tm_code)
+      })
+    },
+    // 获取SC下拉框的数据
+    getOptionData() {
+      // 先通过接口获取所有的SC数据
+      GetReleaseStandardSCData().then((res) => {
+        if (res.success) {
+          this.initSCData(res.result || [])
+        }
+      })
+    },
+    /*
+    * 初始化图表显示的数据--取5年的数据做展示
+    * {"gbNum":51,"year":2012,"num":110,"hbNum":59}
+    * */
+    initData(arr) {
+      this.yData = [[], []]
+      this.yearData.map(year => {
+        let item = arr.find(a => (a.year + '') === (year.value + ''))
+        if(item) {
+          this.yData[0].push(item.gbNum) // 国家标准
+          this.yData[1].push(item.hbNum) // 行业标准
+        }
+      })
+    },
+    // 获取图表的数据-总体
+    getAllData() {
+      // 总体
+      GetReleaseStandardData().then((res) => {
+        if (res.success) {
+          this.allData = res.result || []
+          // 默认显示全部
+          this.initData(this.allData)
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+
+    },
+    // 获取图表的数据- SC
+    getDataBySC(scCode) {
+      GetReleaseStandardDataBySC({scCode}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    initChart() {
+      let option = {
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0, color: 'rgba(88, 115, 234, 1)' // 0% 处的颜色
+              },
+              {
+                offset: 0.8, color: 'rgba(88, 115, 234, 0.6)' // 100% 处的颜色
+              },
+              {
+                offset: 1, color: 'rgba(88, 115, 234, 0)' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#6CFBCE'],
+        xAxis: { data: this.yearData },
+        series: [
+          {
+            name:'国家标准',
+            data: this.yData[0]
+          },
+          {
+            name:'行业标准',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#1B2451'
+                }
+              ])
+            },
+            data: this.yData[1],
+          }
+        ]
+      }
+      createBarAndLineChart('releaseStandardChart', option)
+    }
+  },
+  created() {
+    this.selectType = 1
+    // 操作进5年的年份值
+    this.getYearData()
+    // 获取SC下拉框数据
+    this.getOptionData()
+    // 获取总体图表数据
+    this.getAllData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/preparationRevision/ShouldBeCompletedProjectChart.vue

@@ -0,0 +1,108 @@
+<!--各年应完成项目情况-->
+<template>
+  <div class="preparation-full-box">
+    <div class="box-title">各年应完成项目情况</div>
+    <ul class="title-right">
+      <a-select
+        class="active"
+        v-model="selectValue"
+        style="width: 90px"
+        placeholder="年份"
+        :bordered="false"
+        show-search
+        :show-arrow="true"
+        @change="selectChange"
+        dropdown-class-name="ant-select-screen"
+      >
+        <a-select-option
+          v-for="(item, index) in yearData"
+          :key="index"
+          :value="item.value"
+        >
+          {{item.label}}
+        </a-select-option>
+      </a-select>
+    </ul>
+    <div class="box-content">
+      <div class="echarts-box" id="shouldBeCompletedProjectChart"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { GetShouldBeCompletedProjectData } from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+
+export default {
+  name: 'ShouldBeCompletedProjectChart',
+  data() {
+    return {
+      selectValue: undefined, // 选中的SC
+      yearData: [],
+    }
+  },
+  methods: {
+    selectChange() {
+      this.getData()
+    },
+    // 初始化下拉框的数据
+    getOptionData() {
+      let year = new Date().getFullYear()
+      let yearData = []
+      for(let i = year; i > year - 5; i--) {
+        yearData.push({value: i, label: i + '年'})
+      }
+      this.yearData = yearData
+      // 默认选中当前年
+      this.selectValue = year
+    },
+    getData() {
+      GetShouldBeCompletedProjectData({year: this.selectValue}).then((res) => {
+        if (res.success) {
+          this.initData(res.result || [])
+          this.$nextTick(() =>{
+            this.initChart()
+          })
+        }
+      })
+    },
+    /*
+ * {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
+ * */
+    initData(arr) {
+      this.xData = []
+      this.yData = [[], [], []]
+      arr.map(item => {
+        this.xData.push(item.tm_code)
+        this.yData[0].push(item['应报批总数'])
+        this.yData[1].push(item['完成数'])
+        this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        xAxis: { data: this.xData },
+        series: [
+          { data: this.yData[0] },
+          { data: this.yData[1] },
+          { data: this.yData[2] },
+        ]
+      }
+      createBarAndLineChart('shouldBeCompletedProjectChart', option)
+    },
+  },
+  created() {
+    this.getOptionData()
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.title-right {
+  right: 1%;
+}
+
+</style>

src/views/screen/preparationRevision/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="screen-preparation-revision">
+    <!-- 汽车标准项目-总体情况-->
+    <general-situation-chart></general-situation-chart>
+    <!-- 汽车标准制修订情况-->
+    <preparation-revision-chart></preparation-revision-chart>
+    <!-- 标准归口情况-->
+    <centralized-chart></centralized-chart>
+    <!--    历年计划下达情况-->
+    <release-plan-chart></release-plan-chart>
+    <!--    历年标准发布情况-->
+    <release-standard-chart></release-standard-chart>
+    <!--    各SC历年应完成项目情况-->
+    <completion-project-chart></completion-project-chart>
+    <!--    第一起草单位贡献度排名-->
+    <enterprise-contribution-chart></enterprise-contribution-chart>
+    <!--    各年应完成项目情况-->
+    <should-be-completed-project-chart></should-be-completed-project-chart>
+    <!--    各SC超期情况统计-->
+    <overdue-chart></overdue-chart>
+  </div>
+</template>
+
+<script>
+//汽车标准项目总体情况 GeneralSituationChart
+import GeneralSituationChart from './GeneralSituationChart'
+//汽车标准制修订情况 PreparationRevisionChart
+import PreparationRevisionChart from './PreparationRevisionChart'
+//标准归口情况 CentralizedChart
+import CentralizedChart from './CentralizedChart'
+//历年计划下达情况 ReleasePlanChart
+import ReleasePlanChart from './ReleasePlanChart'
+//历年标准发布情况 ReleaseStandardChart
+import ReleaseStandardChart from './ReleaseStandardChart'
+//各SC历年应完成项目情况 CompletionProjectChart
+import CompletionProjectChart from './CompletionProjectChart'
+//第一起草单位贡献度排名  EnterpriseContributionChart
+import EnterpriseContributionChart from './EnterpriseContributionChart'
+//各年应完成项目情况 ShouldBeCompletedProjectChart
+import ShouldBeCompletedProjectChart from './ShouldBeCompletedProjectChart'
+//各SC超期情况统计 OverdueChart
+import OverdueChart from './OverdueChart'
+
+export default {
+  name: 'index',
+  components: {
+    // 汽车标准项目总体情况
+    GeneralSituationChart,
+    // 汽车标准制修订情况
+    PreparationRevisionChart,
+    // 标准归口情况
+    CentralizedChart,
+    // 历年计划下达情况
+    ReleasePlanChart,
+    // 历年标准发布情况
+    ReleaseStandardChart,
+    // 各SC历年应完成项目情况
+    CompletionProjectChart,
+    // 第一起草单位贡献度排名
+    EnterpriseContributionChart,
+    // 各年应完成项目情况
+    ShouldBeCompletedProjectChart,
+    // 各SC超期情况统计
+    OverdueChart
+  }
+}
+</script>
+
+<style scoped lang="less">
+.screen-preparation-revision{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+// 全屏box-有表格 1875 * 587
+.preparation-full-box {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 31.31%;
+  background-image: url("../../../assets/screen/full_no_table_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  /deep/ .box-title {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #DDF0FF;
+    position: absolute;
+    // 34.5 / 高度 587
+    top: 5.88%;
+    left: 13.70%;
+    transform: translate(-50%, -50%);
+  }
+
+  // 内容的部分
+  /deep/ .box-content {
+    position: absolute;
+    width: calc(100% - 40px);
+    // 587 - 69px - 30px
+    height: 83.13%;
+    top: 11.75%;
+    left: 20px;
+    display: flex;
+    flex-direction: row;
+    .echarts-box {
+      width: 100%;
+      flex: 1;
+    }
+  }
+
+}
+// 50%的box 536 * 931
+/deep/ .preparation-half-box{
+  width: 50%;
+  height: 0;
+  padding-top: 28.79%;
+  background-image: url("../../../assets/screen/half_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .box-title {
+    // (25 + 18 / 2) / 635
+    top: 6.34%;
+    // (171 + 149 / 2) / 931
+    left: 26.37%;
+  }
+  .box-bg-img {
+    height: 100%;
+  }
+  .box-content{
+    width: calc(100% - 4% * 2);
+    left: 4%;
+  }
+  .title-right{
+    margin-right: 4.5%;
+  }
+  .title-right-completion{
+    margin-right: 6.5%;
+  }
+}
+
+@normal-color: rgba(256, 256, 256, 0.5);
+@white: #fff;
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  width: 50%;
+  position: absolute;
+  // 和标题的位置相似
+  top: 5.88%;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 100;
+  // 右边框相同
+  margin-right: 50px;
+  li{
+    list-style: none;
+    color: @normal-color;
+    cursor: pointer;
+    padding: 0 10px;
+  }
+  li.active{
+    color: @white;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  .splice-icon{
+    width: 20px;
+    height: 19px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+  .ant-select.active {
+    text-shadow: 0 0 5px #88D8FB;
+  }
+}
+
+
+//下拉框样式的修改
+/deep/.ant-select-selection{
+  border: none!important;
+  background: transparent;
+  color: @normal-color;
+}
+/deep/.ant-select.active  .ant-select-selection{
+  color: @white!important;
+}
+/deep/.ant-select-arrow{
+  color: @white!important;
+}
+
+/deep/.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
+  border: none!important;
+  box-shadow: none;
+}
+
+@borderColor: #7599E8;
+@backgroundColor: #233062;
+
+
+</style>
+<style lang="less">
+.ant-select-screen {
+  .ant-select-dropdown-content > ul::-webkit-scrollbar-track{
+    background: #293f6a;
+    ////border-color: transparent;
+  }
+  .ant-select-dropdown-content > ul::-webkit-scrollbar-thumb{
+    background: #445a9c;
+  }
+  .ant-select-dropdown-content > ul::-webkit-scrollbar-corner {
+    background: #293f6a;
+  }
+  background-color: #181F55;
+
+  .ant-select-dropdown-menu-item {
+    color: #bdbec6;
+
+    &:hover {
+      color: #fff;
+      background-color: #7599E8;
+    }
+  }
+  // 选中的效果
+  .ant-select-dropdown-menu-item-selected {
+    color: #fff;
+    background-color: #4364C2;
+  }
+  .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+    color: #fff;
+    background-color: #7599E8;
+  }
+}
+
+
+</style>

src/views/screen/util/BarAndLineOptions.js

@@ -0,0 +1,253 @@
+import * as echarts from 'echarts'
+
+import { deepMerge } from '../../../utils/util'
+
+
+export const BarAndLineOptions = {
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0, color: 'rgba(66, 96, 231, 1)' // 0% 处的颜色
+        },
+        {
+          offset: 0.8, color: 'rgba(66, 96, 231, 0.5)' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'rgba(66, 96, 231, 0)' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0, color: 'rgba(106, 197, 244, 1)' // 0% 处的颜色
+        },
+        {
+          offset: 0.8, color: 'rgba(106, 197, 244, 0.5)' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'rgba(106, 197, 244, 0)' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    '#6CFBCE'],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ''
+      params.forEach(item => {
+        let color = ''
+        if(typeof item.color === 'string') {
+          color = item.color
+        } else {
+          color = item.color.colorStops[0].color
+        }
+        if(item.seriesType === 'bar') {
+          dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+        } else {
+          let valueText = item.value
+          // 求比例的时候特殊处理
+          if(item.seriesName.indexOf('比例') > -1) {
+            valueText = item.value === undefined ? '-' : `${item.value}%`
+          }
+          dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:2px;background-color:${color};vertical-align: middle"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${valueText}</span>
+          </div>
+        </div>`
+        }
+      })
+      return dataStr
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    lineStyle: {
+      opacity: 0
+    },
+    itemWidth: 14,
+    // itemHeight: 14,
+    right: '3%',
+    top: '1%'
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {},
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB',
+      interval: 0,
+      formatter: function(params) {
+        let newParamsName = '' // 最终拼接成的字符串
+        let paramsNameNumber = params.length // 实际标签的个数
+        let provideNumber = 8 // 每行能显示的字的个数
+        let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+        /**
+         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+         */
+        // 条件等同于rowNumber>1
+        if (paramsNameNumber > provideNumber) {
+          /** 循环每一行,p表示行 */
+          for (let p = 0; p < rowNumber; p++) {
+            let tempStr = ''// 表示每一次截取的字符串
+            let start = p * provideNumber // 开始截取的位置
+            let end = start + provideNumber // 结束截取的位置
+            // 此处特殊处理最后一行的索引值
+            if (p === rowNumber - 1) {
+              // 最后一次不换行
+              tempStr = params.substring(start, paramsNameNumber)
+            } else {
+              // 每一次拼接字符串并换行
+              tempStr = params.substring(start, end) + '\n'
+            }
+            newParamsName += tempStr // 最终拼成的字符串
+          }
+        } else {
+          // 将旧标签的值赋给新标签
+          newParamsName = params
+        }
+        return newParamsName
+      }
+    },
+    type: 'category',
+    boundaryGap: ['30%', '20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  yAxis: [
+    {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#7599E8'
+        }
+      },
+      axisLabel: {
+        show: true,
+        color: '#7FA6FB'
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(117, 153, 232, 0.5)',
+          type: 'solid'
+        }
+      },
+      type: 'value',
+      nameTextStyle: {
+        color: '#7FA6FB'
+      }
+    },
+    {
+      type: 'value',
+      // min: 0,
+      // max: 100,
+      axisLabel: {
+        show: false,
+        formatter: '{value} %',
+      },
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  series: [
+    {
+      name:'应完成项目数',
+      // data: this.yData[0],
+      type: 'bar',
+      barMaxWidth:20,
+      itemStyle:{
+        borderRadius:[4,4,0,0]
+      }
+    },
+    {
+      name:'实际完成项目数',
+      // data: this.yData[1],
+      type: 'bar',
+      barMaxWidth:20,
+      itemStyle:{
+        borderRadius:[4,4,0,0]
+      }
+    },
+    {
+      name:'实际完成比例',
+      // data: this.yData[2],
+      type: 'line',
+      yAxisIndex: 1,
+      showSymbol: false,
+      symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#6CFBCE'
+          },
+          {
+            offset: 1,
+            color: '#1B2451'
+          }
+        ])
+      },
+    },
+  ]
+}
+
+// 生成柱折状图---制修订、各项目完成情况专用
+export function createBarAndLineChart(idName, option) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge({}, BarAndLineOptions, option)
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}

src/views/screen/util/BarOptions.js

@@ -0,0 +1,338 @@
+import * as echarts from 'echarts'
+import { formatMoney } from '../../../utils/formatMoney'
+import { deepMerge } from '../../../utils/util'
+
+// 正常的柱状图配置
+export const BarOptions = {
+  // color: ['#4471EF', '#00D8F1', '#6CFBCE'],
+  color: [
+    {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0, color: 'rgba(88, 115, 234, 1)'
+        },
+        {
+          offset: 0.8, color: 'rgba(88, 115, 234, 0.6)'
+        },
+        {
+          offset: 1, color: 'rgba(88, 115, 234, 0)' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0, color: 'rgba(106, 197, 244, 1)' // 0% 处的颜色
+        },
+        {
+          offset: 0.8, color: 'rgba(106, 197, 244, 0.5)' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'rgba(106, 197, 244, 0)' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    '#6CFBCE'],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ''
+      params.forEach(item => {
+        let color = ''
+        if(typeof item.color === 'string') {
+          color = item.color
+        } else {
+          color = item.color.colorStops[0].color
+        }
+        dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <div>
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            </div>
+            <div style="color:#7599E8;">${formatMoney(item.value)}</div>
+          </div>
+        </div>`
+      })
+      // return dataStr + `  <div style="padding-left: 10px;color: #7599E8">完成比例：${percent}</div>`
+      return dataStr
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    itemWidth: 14,
+    // itemHeight: 14,
+    right: '3%'
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {},
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB',
+      interval: 0,
+      formatter: function(params) {
+        let newParamsName = '' // 最终拼接成的字符串
+        let paramsNameNumber = params.length // 实际标签的个数
+        let provideNumber = 8 // 每行能显示的字的个数
+        let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+        /**
+         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+         */
+        // 条件等同于rowNumber>1
+        if (paramsNameNumber > provideNumber) {
+          /** 循环每一行,p表示行 */
+          for (let p = 0; p < rowNumber; p++) {
+            let tempStr = ''// 表示每一次截取的字符串
+            let start = p * provideNumber // 开始截取的位置
+            let end = start + provideNumber // 结束截取的位置
+            // 此处特殊处理最后一行的索引值
+            if (p === rowNumber - 1) {
+              // 最后一次不换行
+              tempStr = params.substring(start, paramsNameNumber)
+            } else {
+              // 每一次拼接字符串并换行
+              tempStr = params.substring(start, end) + '\n'
+            }
+            newParamsName += tempStr // 最终拼成的字符串
+          }
+        } else {
+          // 将旧标签的值赋给新标签
+          newParamsName = params
+        }
+        return newParamsName
+      }
+    },
+    type: 'category',
+    boundaryGap: ['30%', '20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(117, 153, 232, 0.5)',
+        type: 'solid'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    }
+  }
+}
+
+// X轴是value的配置
+export const BarAxisTransformOptions = {
+  color: [
+    {
+      type: 'linear',
+      x: 1,
+      y: 0,
+      x2: 0,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0, color: 'rgba(88, 115, 234, 1)' // 0% 处的颜色
+        },
+        {
+          offset: 0.9, color: 'rgba(88, 115, 234, 0.6)' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'rgba(88, 115, 234, 0)' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    'rgba(105, 196, 243, 0.9)'
+    // '#69C4F3'
+  ],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ` <div style="color:#7599E8">${params[0].name}</div>`
+      params.forEach(item => {
+        let color = ''
+        if(typeof item.color === 'string') {
+          color = item.color
+        } else {
+          color = item.color.colorStops[0].color
+        }
+        dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+      })
+      return dataStr
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    itemWidth: 14,
+    right: '6%'
+  },
+  grid: {
+    left: '3%',
+    right: '6%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {},
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB',
+      interval: 0,
+      formatter: function(params) {
+        let newParamsName = '' // 最终拼接成的字符串
+        let paramsNameNumber = params.length // 实际标签的个数
+        let provideNumber = 10 // 每行能显示的字的个数
+        // let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+        /**
+         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+         */
+        // 条件等同于rowNumber>1
+        if (paramsNameNumber > provideNumber) {
+          /** 循环每一行,p表示行 */
+          // for (let p = 0; p < rowNumber; p++) {
+          //   let tempStr = ''// 表示每一次截取的字符串
+          //   let start = p * provideNumber // 开始截取的位置
+          //   let end = start + provideNumber // 结束截取的位置
+          //   // 此处特殊处理最后一行的索引值
+          //   if (p === rowNumber - 1) {
+          //     // 最后一次不换行
+          //     tempStr = params.substring(start, paramsNameNumber)
+          //   } else {
+          //     // 每一次拼接字符串并换行
+          //     tempStr = params.substring(start, end) + '\n'
+          //   }
+          //   newParamsName += tempStr // 最终拼成的字符串
+          // }
+          let tempStr = params.substring(0, provideNumber) + '...'
+          newParamsName += tempStr
+        } else {
+          // 将旧标签的值赋给新标签
+          newParamsName = params
+        }
+        return newParamsName
+      }
+    },
+    type: 'category',
+    boundaryGap: ['30%', '20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(117, 153, 232, 0.5)',
+        type: 'solid'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    }
+  }
+}
+
+/**
+ * 生成柱状图
+ * @param idName --- 当前dom的id
+ * @param option --- 配置项
+ * @param xValue --- 横坐标是否是value，默认不传
+ */
+export function createBarChart(idName, option, xValue) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge({}, BarOptions, option)
+  if(xValue) {
+    chartOption = deepMerge({},BarAxisTransformOptions, option)
+  }
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}

src/views/screen/util/LineOptions.js

@@ -0,0 +1,236 @@
+import * as echarts from 'echarts'
+import { formatMoney } from '../../../utils/formatMoney'
+import { deepMerge } from '../../../utils/util'
+
+
+export const LineOptions = {
+  color: ['#4471EF', '#00D8F1', '#6CFBCE', '#88C87E'],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ''
+      params.forEach(item => {
+        dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:transparent;border: 2px solid ${item.color};border-radius: 50%"></span>
+            <span style="color: #7599E8">${item.seriesName}</span>
+            <span style="float:right;color:#7599E8;margin-left:20px;">${formatMoney(item.data)}</span>
+          </div>
+        </div>`
+      })
+      return dataStr
+    },
+    // alwaysShowContent: true,
+    // borderColor: 'rgba(255,255,50,1)',
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    data: [ '确认收入金额', '开票金额', '到账金额'],
+    icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    // itemWidth: 14,
+    // itemHeight: 14,
+    right: '2%',
+  },
+  grid: {
+    left: '2.4%',
+    right: '3%',
+    bottom: '0',
+    containLabel: true
+  },
+  toolbox: {},
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    type: 'category',
+    boundaryGap: ['30%','20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(117, 153, 232, 0.5)',
+        type: 'solid'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    },
+  },
+}
+
+
+export const ISOLineOptions = {
+  color: ['#4471EF', '#00D8F1', '#6CFBCE'],
+  tooltip: {
+    trigger: 'axis',
+    formatter: params => {
+      // 获取xAxis data中的数据
+      let dataStr = ''
+      params.forEach(item => {
+        dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:transparent;border: 2px solid ${item.color};border-radius: 50%"></span>
+            <span style="color: #7599E8">${item.seriesName}</span>
+            <span style="float:right;color:#7599E8;margin-left:20px;">${item.data}</span>
+          </div>
+        </div>`
+      })
+      return dataStr
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    data: [ '国际注册专家', '国内支撑专家'],
+    icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    right: '0',
+  },
+  grid: {
+    left: '0',
+    right: '0',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {},
+  xAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    type: 'category',
+    boundaryGap: ['30%','20%'],
+    // 刻度线设置
+    axisTick: {
+      show: false
+    },
+    data: []
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(117, 153, 232, 0.5)',
+        type: 'solid'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    }
+  },
+  series: [
+    {
+      name: '国际注册专家',
+      type: 'line',
+      showSymbol: false,
+      symbolSize: 8,
+      data: [],
+      areaStyle: {
+        opacity: 0.2,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#4471EF'
+          },
+          {
+            offset: 1,
+            color: '#ffffff'
+          }
+        ])
+      },
+    },
+    {
+      name: '国内支撑专家',
+      type: 'line',
+      showSymbol: false,
+      symbolSize: 8,
+      data: [],
+      areaStyle: {
+        opacity: 0.2,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: '#00D8F1'
+          },
+          {
+            offset: 1,
+            color: '#ffffff'
+          }
+        ])
+      },
+    }
+  ]
+}
+
+// 生成折线图
+export function createLineChart(idName, option, isISO) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge({}, LineOptions, option)
+  if(isISO) {
+    chartOption = deepMerge({}, ISOLineOptions, option)
+  }
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}

src/views/screen/util/PieOptions.js

@@ -0,0 +1,141 @@
+import * as echarts from 'echarts'
+import { formatMoney } from '../../../utils/formatMoney'
+import { deepMerge } from '../../../utils/util'
+export const PieOptions = {
+  title: {
+    show: false,
+    text: '',
+    textStyle: {
+      color: '#fff',
+      fontWeight: 500,
+      fontSize: 16
+    },
+    left: 'center',
+    top: '10%'
+  },
+  color: [
+    //径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
+    {
+      type: 'radial',
+      x: 0.5,
+      y: 0.5,
+      r: 2,
+      colorStops: [{
+        offset: 0, color: 'rgba(62, 121, 237, 1)' // 0% 处的颜色
+      }, {
+        offset: 1, color: 'rgba(52, 121, 234, 1)' // 100% 处的颜色
+      }],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'radial',
+      x: 0.5,
+      y: 0.5,
+      r: 2,
+      colorStops: [{
+        offset: 0, color: 'rgba(58, 158, 242, 1)' // 0% 处的颜色
+      }, {
+        offset: 1, color: 'rgba(108, 210, 254, 1)' // 100% 处的颜色
+      }],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'radial',
+      x: 0.5,
+      y: 0.5,
+      r: 1,
+      colorStops: [{
+        offset: 0, color: 'rgba(33, 98, 197, 1)' // 0% 处的颜色
+      }, {
+        offset: 1, color: 'rgba(51, 168, 247, 1)' // 100% 处的颜色
+      }],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'radial',
+      x: 0.5,
+      y: 0.5,
+      r: 1,
+      colorStops: [{
+        offset: 0, color: 'rgba(25, 108, 235, 1)' // 0% 处的颜色
+      }, {
+        offset: 1, color: 'rgba(6, 131, 247, 1)' // 100% 处的颜色
+      }],
+      global: false // 缺省为 false
+    },
+    'rgba(35, 76, 159, 1)',
+   ],
+  // let color = ['#3479EA', '#6CD2FE ', '#33A8F7', '#0683F7', '#234C9F']
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    formatter: (param) => {
+      let color = ''
+      if(typeof param.color === 'string') {
+        color = param.color
+      } else {
+        color = param.color.colorStops[0].color
+      }
+      return `<div>
+<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
+<span style="color: #7599E8">${param.name}</span>
+<span style="color: #7599E8">${formatMoney(param.data.money)}</span>
+</div>`
+    },
+    borderWidth: 0,
+    //提示框浮层的背景颜色
+    backgroundColor: '#233062',
+    //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
+    extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
+  },
+
+  legend: {
+    show: false,
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    // itemWidth: 14,
+    bottom: '2%',
+    right: '2%',
+    padding: [0,70, 0, 70],
+    itemGap: 40 // 图例之间的间距
+  },
+
+  toolbox: {},
+  labelLine: {
+    lineStyle: {
+      color: '#5872E9'
+    }
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['20%', '60%'],
+      center: ['50%', '50%'],
+      // roseType: 'area', // 南丁格尔图，所有扇区圆心角相同，仅通过半径展现数据大小。
+      roseType: 'radius', // 南丁格尔图，扇区圆心角展现数据的百分比，半径展现数据的大小。
+      itemStyle: {
+        borderRadius: [0, 0, 5, 5]
+      },
+      label: {
+        show: true,
+        color: '#7599E8',
+        formatter: '{b}: {d}%'
+      }
+    }
+  ]
+}
+
+// 生成柱状图
+export function createPieChart(idName, option) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge({}, PieOptions, option)
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}

src/views/screen/wp29/ExpertQuantityChart.vue

@@ -0,0 +1,110 @@
+<!--专家数量统计-->
+<template>
+  <div class="wp-full-box wp-half-box">
+    <div class="box-title">专家数量统计</div>
+    <div class="box-content">
+      <div class="title-right">
+        <span>专家总数：</span>
+        <span class="num">{{totalAll}}</span>
+      </div>
+      <div class="echarts-box" id="expertQuantityChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createPieChart } from '../util/PieOptions'
+import { GetExpertQuantityData } from '../../../screenApi/api'
+
+export default {
+  name: 'ExpertQuantityChart',
+  data() {
+    return {
+      totalAll: '' // 法规总数
+    }
+  },
+  methods: {
+    getData() {
+      GetExpertQuantityData().then(res => {
+        if(res.success) {
+          let data = res.result || []
+          if(data.length > 0) {
+            this.totalAll = data[0].total
+          }
+          this.$nextTick(() => {
+            this.initChart(data)
+          })
+        }
+      })
+    },
+    /**
+     * 初始化图表
+     * @param data --{"technicalField":"GRSP","count":"23","total":"52"}
+     */
+    initChart(data) {
+      let echartsData = data.reduce((pre, val) => {
+        return pre.concat({value: val.count, name: val.technicalField, total: val.total})
+      }, [])
+      let option = {
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'vertical',
+          right: 0,
+          top: 'center',
+          itemGap: 10 // 图例之间的间距
+        },
+        grid: {
+          left: '0',
+          right: '0',
+        },
+        tooltip: {
+          formatter: (param) => {
+            let color = ''
+            if(typeof param.color === 'string') {
+              color = param.color
+            } else {
+              color = param.color.colorStops[0].color
+            }
+            return `<div>
+<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
+<span style="color: #7599E8">${param.name}</span>
+<span style="color: #7599E8">${param.value}</span>
+</div>`
+          },
+
+        },
+        series: [
+          {
+            center: ['42%', '50%'],
+            label: {
+              formatter: '{a|{c}}{hr|}',
+              rich: {
+                hr: {
+                  backgroundColor: 't',
+                  borderRadius: 50,
+                  width: 7,
+                  height: 7,
+                  marginRight: 14
+                },
+                a: {
+                  padding: [10, 5, 10, 10]
+                }
+              }
+            },
+            data: echartsData
+          }
+        ]
+      }
+      createPieChart('expertQuantityChart', option)
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/wp29/MeetingCalendar.vue

@@ -0,0 +1,379 @@
+<!--会议信息日历-->
+<template>
+  <div class="wp-full-box calendar-box">
+    <div class="box-title">会议信息日历</div>
+    <div class="box-content">
+      <div class="content-header">
+        <img class="header-img" @click="prev" src="../../../assets/screen/calendar_left_icon.png" alt="">
+        <span class="header-text">{{ time }}主要会议安排</span>
+        <img class="header-img" @click="next" src="../../../assets/screen/calendar_right_icon.png" alt="">
+      </div>
+
+      <div class="header-right">
+        <div class='header-num'>
+          <span>会议总数：</span>
+          <span class='num'>{{this.scheduleList.length}}</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#5671E7"></span>
+          <span class="text">WP.29</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#6CFBCE"></span>
+          <span class="text">GR</span>
+        </div>
+        <div class="header-right-text">
+          <span class="radius" style="background:#69C4F3"></span>
+          <span class="text">IWG</span>
+        </div>
+      </div>
+      <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetMeetingCalendarData } from '../../../screenApi/api'
+// 引入日历组件
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import tippy from 'tippy.js'
+
+export default {
+  name: 'MeetingCalendar',
+  components: {
+    FullCalendar
+  },
+  data() {
+    return {
+      calendarOptions: {
+        //   timeGridPlugin  可显示每日时间段
+        height: 700,
+        plugins: [dayGridPlugin, interactionPlugin],
+        headerToolbar: null,
+        firstDay: 0,
+        editable: false,
+        selectable: false,
+        navLinks: false,
+        // displayEventEnd: true,//所有视图显示结束时间
+        initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
+        // dateClick: this.handleDateClick,
+        // eventClick: this.handleEventClick,
+        eventMouseEnter: this.eventMouseoverOne,
+        eventMouseLeave: this.eventMouseoutOne,
+        // timezone
+        // 设置日程
+        events: [],
+        eventColor: '#f08f00', // 修改日程背景色
+        weekNumberCalculation: 'ISO', // 周数
+        fixedWeekCount: false, //月份 固定周数
+        customButtons: {}
+      },
+      scheduleList: [],
+      time: '',
+      calendarApi: {}
+    }
+  },
+  created() {
+    // 获取用户信息
+    this.$nextTick(() => {
+      this.calendarApi = this.$refs.fullCalendar.getApi()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    })
+    // this.getReservationList(this.scheduleList)
+    this.getData()
+  },
+  methods: {
+    getData() {
+      let query = {
+        // orgCode: this.orgCode,
+        // cutTime: ''
+      }
+      GetMeetingCalendarData(query).then((res) => {
+        if (res.success) {
+          this.scheduleList = res.result || []
+          this.getReservationList(res.result)
+        } else {
+          this.scheduleList = []
+        }
+      })
+    },
+    prev() {
+      this.calendarApi.prev()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    },
+    // 切换下一个按钮事件
+    next() {
+      this.calendarApi.next()
+      let currentDate = new Date(this.calendarApi.currentData.currentDate)
+      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+    },
+    // 点击今天按钮
+    today() {
+      this.calendarApi.today()
+    },
+    handleDateClick: function(arg) {
+      this.$forceUpdate()
+      console.log(arg, '事件1')
+    },
+    handleEventClick(calEvent) {
+      let params = { orgCode: calEvent.event.id, thisType: 2, type: 2 }
+      this.$router.push({
+        path: '/meetinginfo',
+        query: params
+      })
+    },
+    getReservationList(arrayData) {
+      let newArr = []
+      arrayData.forEach((item) => {
+        if (item.orgType == 'GR') {
+          item.status = '#5671E7'
+          item.textColor = '#93D1F5'
+        } else if (item.orgType == 'IWG') {
+          item.status = '#6CFBCE'
+          item.textColor = '#115379'
+        } else {
+          item.status = '#69C4F3'
+          item.textColor = '#115379'
+        }
+        newArr.push({
+          start: this.dealWithTime(item.time),
+          end: this.addDate(this.dealWithTime(item.endTime), 1),
+          color: item.status,
+          textColor: item.textColor,
+          id: item.meetingId,
+          title: `${item.name}`
+        })
+      })
+      this.calendarOptions.events = newArr
+    },
+    getShowTime(beginDate, endDate) {
+      this.form.startDate = this.dealWithTime(beginDate)
+      this.form.startTime = this.getHoursMin(beginDate)
+      this.form.endDate = this.dealWithTime(endDate)
+      this.form.endTime = this.getHoursMin(endDate)
+    },
+    // 获取时分时间
+    getHoursMin(value) {
+      return value.substring(11, 16)
+    },
+    // 处理会议时间格式
+    dealWithTime(date) {
+      let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0]
+      return newDate
+    },
+
+    // 日期加1天
+    addDate(date, days) {
+      var d = new Date(date)
+      d.setDate(d.getDate() + days)
+      var mon = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
+      let endD = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
+      return `${d.getFullYear()}-${mon}-${endD}`
+    },
+    eventMouseoverOne(data) {
+      let content = this.scheduleList.filter(res => {
+        return res.meetingId == data.event.id
+      })
+      //todo 缺一个type的字段
+      tippy(data.el, {
+        content:
+          '<div class="tippy-content-box" style="">' +
+          '<span style="margin-right: 10px;" class="text-index">' + content[0].orgType + '</span>' + '<span class="text-index">' + content[0].name + '</span>' +
+          '<div class="tippy-content">技术领域: ' + content[0].type + '</div>' + '' +
+          '<div class="tippy-content">时间: ' + content[0].timeAll + '</div>' + '' +
+          '<div class="tippy-content">地点: ' + content[0].place + '</div>' +
+          '<div class="tippy-content">参会人: ' + content[0].meetingPersons + '</div>' + '</div>',
+        interactive: false,
+        // placement: 'top',
+        allowHTML: true
+      })
+    },
+    eventMouseoutOne(data) {
+
+    },
+    // 获取会议事件title
+    getTitle(date1, date2) {
+      let start = date1.substring(11, 16)
+      let end = date2.substring(11, 16)
+      return `${start}~${end}`
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@white: #fff;
+@normal-color: rgba(256, 256, 256, 0.3);
+div.calendar-box{
+  background-image: url("../../../assets/screen/calendar_bg.png");
+  padding-top: 43.4%;
+  .box-title{
+      //34.5 / 高度 814
+    top: 4.24%;
+  }
+}
+.content-header {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.header-img {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+
+.header-text {
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: @white;
+  margin-left: 26px;
+  margin-right: 26px;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+.header-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  transform: translateY(-35px);
+  height: 0;
+}
+
+.header-right-text {
+  display: flex;
+  align-items: center;
+  margin-left: 28px;
+}
+
+.radius {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.text {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: @white;
+  margin-left: 8px;
+}
+
+.header-num{
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+    text-shadow: 0 0 4px #6CFBCE;
+  }
+}
+/*日历组件的修改  */
+::v-deep .fc-theme-standard td,
+::v-deep.fc-theme-standard .fc-scrollgrid{
+  border-color: rgba(86, 113, 231, 0.3);
+}
+// 头部没有边框
+::v-deep .fc-theme-standard th{
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: rgba(86, 113, 231, 0.3);
+}
+
+::v-deep .fc-theme-standard .fc-scrollgrid {
+  border-top-color: transparent;
+  border-left: none;
+}
+::v-deep .fc .fc-scrollgrid table.fc-scrollgrid-sync-table {
+  border-left: 1px solid rgba(86, 113, 231, 0.3);
+}
+
+::v-deep .fc-daygrid-day .fc-daygrid-day-number {
+  font-weight: bold;
+  color: @white;
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+
+::v-deep .fc-day-other .fc-daygrid-day-number {
+  color: @normal-color;
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+::v-deep .fc-col-header-cell-cushion {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: @white;
+  text-shadow: 0 0 5px #88D8FB;
+}
+
+::v-deep .fc-col-header-cell {
+  height: 38px;
+  line-height: 38px;
+}
+
+
+::v-deep .fc-event-main {
+  padding: 2px 10px;
+}
+
+::v-deep .fc-toolbar-chunk .fc-button-primary {
+  display: none;
+}
+
+::v-deep .fc .fc-daygrid-day.fc-day-today{
+  background-color: #7599E8;
+}
+
+::v-deep .fc-event-title{
+  font-weight: 800!important;
+}
+::v-deep .fc-scrollgrid-section-header .fc-scroller {
+  overflow: hidden!important;
+}
+
+</style>
+<style lang="less">
+.tippy-content-box {
+  background: #233062;
+  color: #fff;
+  border-radius: 6px;
+  padding: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 0 4px #7599E8 inset;
+  .text-index {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #fff;
+  }
+
+  .tippy-content {
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #fff;
+    margin-top: 8px;
+  }
+}
+
+</style>

src/views/screen/wp29/MeetingInformationChart.vue

@@ -0,0 +1,306 @@
+<!--会议信息统计-->
+<template>
+  <div class="wp-full-box">
+    <div class="box-title">会议信息统计</div>
+    <div class="box-content">
+      <div class="search-box">
+        <div class="select-info-box">
+          <div class="left-select">
+            <span class="label">选择时间：</span>
+            <j-year-date
+              v-if="dimensionValue !== 'month'"
+              format="YYYY"
+              :allowClear="false"
+              style="width:80px"
+              placeholder="请选择年份"
+              v-model="searchParams.year"
+              @change="onYearChange"
+              dropdown-class-name="ant-calendar-dropdown-screen"
+            ></j-year-date>
+
+
+            <a-month-picker
+              v-if="dimensionValue === 'month'"
+              placeholder="请选择月份"
+              format="YYYY-MM"
+              value-format="YYYY-MM"
+              style='width: 100px'
+              :allowClear="false"
+              dropdown-class-name="ant-calendar-dropdown-screen"
+              v-model='searchParams.month'
+              @change="onMonthChange" >
+            </a-month-picker>
+            <a-select
+              v-if="dimensionValue === 'quarter'"
+              class="right-select active"
+              style='width: 120px'
+              v-model="searchParams.quarter"
+              placeholder="季度"
+              :bordered="false"
+              show-search
+              @change="quarterSelectChange"
+              dropdown-class-name="ant-select-screen"
+            >
+              <a-select-option
+                v-for="(item, index) in quarterOptionData"
+                :key="index"
+                :value="item.text"
+              >
+                {{item.text}}
+              </a-select-option>
+            </a-select>
+          </div>
+          <!--        :bordered="false"-->
+          <a-select
+            class="right-select active"
+            style='width: 80px'
+            v-model="dimensionValue"
+            placeholder="维度"
+
+            show-search
+            @change="dimensionSelectChange"
+            dropdown-class-name="ant-select-screen"
+          >
+            <a-select-option
+              v-for="(item, index) in dimensionOptionData"
+              :key="index"
+              :value="item.value"
+            >
+              {{item.text}}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="title-right-sub">
+          <span>会议总数：</span>
+          <span class="num">{{totalAll}}</span>
+        </div>
+      </div>
+      <div class="echarts-box " id="meetingInformationChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetMeetingInformationData } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'MeetingInformationChart',
+  components: {
+    JYearDate
+  },
+  data() {
+    return {
+      totalAll: '', // 会议总数
+      dimensionValue: 'year', // 查询维度  默认是’year‘
+      // 维度查询的下拉框数据
+      dimensionOptionData: [
+        {text: '年份', value: 'year'},
+        {text: '季度', value: 'quarter'},
+        {text: '月份', value: 'month'},
+      ],
+      quarterOptionData: [
+        {text: '第一季度', value: '1'},
+        {text: '第二季度', value: '2'},
+        {text: '第三季度', value: '3'},
+        {text: '第四季度', value: '4'},
+      ],
+      // 查询条件
+      searchParams:{},
+      currentDateObj: {
+        year: '',
+        month: '',
+        quarter: ''
+      }
+    }
+  },
+  methods: {
+    getCurrentData() {
+    //  获取当前年份、月份和季度
+      let data = new Date()
+      let year = data.getFullYear()
+      let month = data.getMonth() + 1
+      this.currentDateObj.year = year
+      this.currentDateObj.month = month
+      switch (true) {
+        case (month < 4) :
+          this.currentDateObj.quarter = '第一季度'
+          break
+        case (month < 7) :
+          this.currentDateObj.quarter = '第二季度'
+          break
+        case (month < 10) :
+          this.currentDateObj.quarter = '第三季度'
+          break
+        case (month <= 12) :
+          this.currentDateObj.quarter = '第四季度'
+          break
+        default:
+          break
+      }
+    },
+    dimensionSelectChange() {
+      if(this.dimensionValue === 'year') {
+        this.searchParams.year = this.currentDateObj.year + ''
+      } else if(this.dimensionValue === 'month') {
+        this.searchParams.month = `${this.currentDateObj.year}-${this.currentDateObj.month}`
+      } else if(this.dimensionValue === 'quarter') {
+        this.searchParams.year = this.currentDateObj.year + ''
+        this.searchParams.quarter = this.currentDateObj.quarter
+      }
+      this.getData()
+    },
+    onYearChange() {
+      this.getData()
+    },
+    onMonthChange() {
+      this.getData()
+    },
+    quarterSelectChange() {
+      this.getData()
+    },
+    // 获取查询参数
+    getQueryParams() {
+      let params = {
+        flag: this.dimensionValue,
+      }
+      if(this.dimensionValue === 'year') {
+        params.createTime = this.searchParams.year
+      } else if(this.dimensionValue === 'month') {
+        params.createTime = this.searchParams.month
+      } else if(this.dimensionValue === 'quarter') {
+        params.createTime = this.searchParams.quarter
+        params.year = this.searchParams.year
+      }
+      return params
+    },
+    getData() {
+      let params = this.getQueryParams()
+      GetMeetingInformationData(params).then(res => {
+        if(res.success) {
+          let data = res.result || {}
+          this.totalAll = data.total
+          this.$nextTick(() => {
+            this.initChart(data)
+          })
+        }
+      })
+    },
+    /**
+     * 初始化图表
+     * @param data = {leftData: X轴数据 resultMapList：[] 柱状图数据}
+     */
+    initChart(data) {
+      let xData = data.leftData
+      let echartsData = data.resultMapList[0].count
+      let tooltipTitle = data.resultMapList[0].cogName
+      let option = {
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '0',
+          right: '0',
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = `<div style="color:#7599E8;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.name}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barMaxWidth:30,
+            itemStyle:{
+              borderRadius:[4,4,0,0],
+            },
+            data: echartsData
+          }
+        ]
+      }
+      createBarChart('meetingInformationChart', option)
+
+    },
+    // 初始化查询条件的数据
+    initData() {
+      this.dimensionValue = 'year'
+      this.searchParams = {
+        year: this.currentDateObj.year + ''
+      }
+    }
+  },
+  created() {
+    this.getCurrentData()
+    //初始化数据
+    this.initData()
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@white: #fff;
+
+.search-box{
+  width: 76%;
+  margin-left: 24%;
+}
+.select-info-box{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  //text-shadow: 0 0 5px #88D8FB;
+  .left-select > span:not(.label) {
+    margin-right: 15px;
+    color: @white;
+  }
+  .label{
+    color: @white;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  .ant-select,
+  /deep/.ant-calendar-picker input{
+    text-shadow: 0 0 5px #88D8FB;
+  }
+}
+.title-right-sub {
+  text-align: right;
+  margin-top: 5px;
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+    text-shadow: 0 0 4px #6CFBCE;
+  }
+}
+
+
+</style>

src/views/screen/wp29/RegulationQuantityChart.vue

@@ -0,0 +1,137 @@
+<!--法规数量统计-->
+<template>
+  <div class="wp-full-box wp-half-box">
+    <div class="box-title">法规数量统计</div>
+    <div class="box-content">
+      <div class="title-right">
+        <span>法规总数：</span>
+        <span class="num">{{totalAll}}</span>
+      </div>
+      <div class="echarts-box" id="regulationQuantityChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetRegulationQuantityData } from '../../../screenApi/api'
+import { createBarChart } from '../util/BarOptions'
+
+export default {
+  name: 'RegulationQuantityChart',
+  data() {
+    return {
+      totalAll: '' // 法规总数
+    }
+  },
+  methods: {
+    getData() {
+      GetRegulationQuantityData().then(res => {
+        if(res.success) {
+          let data = res.result.data || []
+          this.initData(data)
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      })
+    },
+    /**
+     *
+     * @param arr --data（数据）, name（类名）, totalAll(数据和), xaxis（x轴字段）
+     */
+    initData(arr) {
+      this.totalAll = arr[0].totalAll
+      this.xAxisData = arr[0].xaxis
+      this.yData = []
+      this.legendData = []
+      arr.map(tt => {
+        this.yData.push(tt.data || [])
+        this.legendData.push(tt.name)
+      })
+    },
+    // 初始化图表
+    initChart() {
+      let option = {
+        grid: {
+          left: '0',
+          right: '0',
+        },
+        legend: {
+          right: 0
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            let total = 0
+            for (let i = 0; i < params.length; i++) {
+              total += parseInt(params[i].data)
+            }
+            dataStr += ` <div style="color:#7599E8;margin-left: 8px;font-size: 14px">总数: ${total}</div>`
+
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#7599E8">${item.seriesName}</span>
+            <span style="color:#7599E8;">${item.value}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          data: this.xAxisData
+        },
+        series: [
+          {
+            name: this.legendData[0],
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            },
+            data: this.yData[0]
+          },
+          {
+            name: this.legendData[1],
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            },
+            data: this.yData[1]
+          },
+          {
+            name: this.legendData[2],
+            type: 'bar',
+            stack: 'total',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0],
+            },
+            data: this.yData[2]
+          },
+        ]
+      }
+      createBarChart('regulationQuantityChart', option)
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/screen/wp29/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="screen-wp">
+    <!-- 法规数量统计-->
+    <regulation-quantity-chart></regulation-quantity-chart>
+    <!--  专家数量统计-->
+    <expert-quantity-chart></expert-quantity-chart>
+    <!-- 会议信息日历-->
+    <meeting-calendar></meeting-calendar>
+    <!-- 会议信息统计-->
+    <meeting-information-chart></meeting-information-chart>
+  </div>
+</template>
+
+<script>
+//法规数量统计 RegulationQuantityChart
+import RegulationQuantityChart from './RegulationQuantityChart'
+//专家数量统计 ExpertQuantityChart
+import ExpertQuantityChart from './ExpertQuantityChart'
+//会议信息日历 MeetingCalendar
+import MeetingCalendar from './MeetingCalendar'
+//会议信息统计 MeetingInformationChart
+import MeetingInformationChart from './MeetingInformationChart'
+
+
+export default {
+  name: 'index',
+  components: {
+    // 法规数量统计
+    RegulationQuantityChart,
+    // 专家数量统计
+    ExpertQuantityChart,
+    // // 会议信息日历
+    MeetingCalendar,
+    // 会议信息统计
+    MeetingInformationChart
+  }
+}
+</script>
+
+<style scoped lang="less">
+.screen-wp{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+// 全屏box-有表格 1875 * 587
+.wp-full-box {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-top: 31.31%;
+  background-image: url("../../../assets/screen/full_no_table_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  /deep/ .box-title {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #DDF0FF;
+    position: absolute;
+    // 34.5 / 高度 587
+    top: 5.88%;
+    left: 13.70%;
+    transform: translate(-50%, -50%);
+  }
+
+  /deep/ .box-content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 2.3% 4%;
+    //padding: 4.61% 4%;
+    .echarts-box {
+      width: 100%;
+      flex: 1;
+    }
+  }
+}
+// 50%的box 536 * 931
+/deep/.wp-half-box{
+  width: 50%;
+  height: 0;
+  padding-top: 28.79%;
+  background-image: url("../../../assets/screen/half_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .box-title {
+    // (25 + 18 / 2) / 635
+    top: 6.34%;
+    // (171 + 149 / 2) / 931
+    left: 26.37%;
+  }
+  .box-content {
+    padding: 4.61% 6%;
+  }
+}
+
+@normal-color: rgba(256, 256, 256, 0.5);
+@white: #fff;
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  width: 50%;
+  margin-left: 50%;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  span {
+    font-size: 16px;
+    color: @white;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: 0 0 5px #88D8FB;
+  }
+  span.num {
+    font-size: 20px;
+    color: #6CFBCE;
+    text-shadow: 0 0 4px #6CFBCE;
+  }
+}
+
+
+//下拉框样式的修改
+/deep/.ant-select-selection{
+  border: none!important;
+  background: transparent;
+  color: @normal-color;
+}
+/deep/.ant-select.active  .ant-select-selection{
+  color: @white!important;
+}
+
+/deep/.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
+  border: none!important;
+  box-shadow: none;
+}
+/deep/.ant-select-arrow{
+  color: @white;
+}
+
+// 时间选择器的样式
+/deep/.ant-calendar-picker,
+/deep/.ant-calendar-picker-input.ant-input,
+/deep/ .ant-calendar-picker-icon{
+  border: none!important;
+  background: transparent;
+  color: @white;
+}
+
+
+</style>
+<style lang="less">
+@normal-color: rgba(256, 256, 256, 0.2);
+.ant-calendar-dropdown-screen{
+  .ant-calendar{
+    border: none;
+    box-shadow: 0 0 4px #7599E8 inset;
+  }
+  .ant-calendar-month-panel-body,
+  .ant-calendar-month-panel-header,
+  .ant-calendar-year-panel-body,
+  .ant-calendar-year-panel-header
+  {
+    background-color: #181F55;
+    border: none!important;
+    color: #fff;
+  }
+  td a,
+  .ant-calendar-month-panel-year-select-content,
+  .ant-calendar-year-panel-decade-select
+  {
+    color: #fff;
+  }
+  .ant-calendar-month-panel-prev-year-btn::after,
+  .ant-calendar-month-panel-prev-year-btn::before,
+  .ant-calendar-month-panel-next-year-btn::before,
+  .ant-calendar-month-panel-next-year-btn::after
+  {
+    border-color: #fff;
+  }
+  // 选中的效果
+  .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
+  .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year{
+    background-color: #4364C2;
+  }
+
+  .ant-calendar-header a:hover{
+    color: #fff;
+    background-color: #7599E8;
+    //&::after,
+    //&::before{
+    //  color: #fff;
+    //}
+  }
+
+  .ant-calendar-year-panel-last-decade-cell a,
+  .ant-calendar-year-panel-next-decade-cell a
+  {
+    color: @normal-color;
+  }
+//   年份选择器上面的输入框
+  .ant-calendar-input-wrap{
+    background-color: #181F55;
+    border-color: @normal-color;
+    input{
+      background-color: #181F55;
+      border: none!important;
+      color: #fff;
+    }
+  }
+}
+
+</style>

vue.config.js

@@ -88,12 +88,36 @@ module.exports = {
       },*/
       '/jero-boot': {
         // ''
-        target: 'http://10.0.10.160:8080', //请求本地 jero-boot后台项目
+        target: 'http://localhost:8080', //请求本地 jero-boot后台项目
+        ws: false,
+        changeOrigin: true
+      },
+      // 请求大屏客户环境
+      "/zxd": {
+        target: "http://www.catarc.org.cn:8088",
+        ws: false,
+        changeOrigin: true
+      },
+      // 请求WP29客户环境
+      "/WPApi": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        ws: false,
+        pathRewrite: {
+          "^/WPApi": "/jeecg-boot"  // 请求WP29项目的后端并重写前缀
+        }
+      },
+      "/ISO": {
+        target: "http://localhost:8081",
         ws: false,
         changeOrigin: true,
-      },
-    },
+        pathRewrite: {
+          "^/ISO": "/jeecg-boot"  // 请求WP29项目的后端并重写前缀
+        }
+      }
+
+    }
   },
 
-  lintOnSave: true,
+  lintOnSave: true
 }