【add】-大屏：来款部分 + 制修订第一个模块

2022-12-01 10:38:00 +08:00
parent 820d06fd28
commit c5b7cff177
38 changed files with 3330 additions and 13 deletions
@@ -64,4 +64,10 @@ export const constantRouterMap = [
    component: SignUpPage,
    hidden: true,
  },
+  {
+    path: "/screen",
+    name: 'HomePage',
+    component: () => import(/* webpackChunkName: "user" */ "@/views/screen/HomePage"),
+    hidden: true,
+  },
 ];
@@ -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', '/screen'] // no redirect whitelist

 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 {
@@ -1,7 +1,8 @@
-import { getAction } from '@/screenApi/manage'
+
+import { getActionZxd } from '@/screenApi/manage'

 // 汽车标准项目总体情况；包括发布的国行标、在研的国行标、立项上报的国行标、外文版项目数量
-const StanderProjectGeneralSituation = (params) => getAction( '/serviceInterface/getDpData1', params)
+const StanderProjectGeneralSituation = (params) => getActionZxd( '/serviceInterface/getDpData1', params)

 export {
  StanderProjectGeneralSituation
@@ -5,7 +5,7 @@ import { axios } from '@/screenRequest/request'

 const baseUrl = '/zxd'

-export function getAction(url, parameter) {
+export function getActionZxd(url, parameter) {
  return axios({
    url: baseUrl + url,
    method: 'get',
@@ -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)
+}
@@ -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,7 @@
    </template>
    <!--    所领导 部门领导展示统计图 -->
    <template v-else>
+      <div class="screen-btn" @click="goScreen">大屏</div>

      <!-- 全所收入统计 累计-->
      <single-month-total-echarts class="single-month-total "></single-month-total-echarts>
@@ -89,6 +90,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 +166,14 @@ export default {
  color: #069F99;
  cursor: pointer;
 }
+
+.analysis-container{
+  position: relative;
+}
+.screen-btn{
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: pointer;
+}
 </style>
@@ -1,19 +1,124 @@
 <template>
-  <div></div>
+  <div class="screen-home-page">
+    <!-- 上面的头部-->
+    <div class="header">
+      <span class="title">中国汽车标准化研究院运营管理</span>
+    </div>
+    <!-- 来款-->
+    <template>
+      <div class="sub-title"><span>汽车标准化工作平台</span></div>
+<!--      <income-payment-screen></income-payment-screen>-->
+    </template>
+
+    <!-- 制修订 -->
+    <template>
+      <div class="sub-title"><span>汽车标准制修订管理系统 </span></div>
+      <preparation-revision-screen></preparation-revision-screen>
+    </template>
+  </div>
 </template>

 <script>
-import { StanderProjectGeneralSituation } from '@/screenApi/api'
+
+import IncomePaymentScreen from './incomePayments/index'
+import PreparationRevisionScreen from './preparationRevision/index'
+
 export default {
  name: 'HomePage',
+  components: {
+    IncomePaymentScreen,
+    PreparationRevisionScreen
+  },
  created() {
-    StanderProjectGeneralSituation().then(res => {
-      console.log(res)
-    })
+    // StanderProjectGeneralSituation().then(res => {
+    //   console.log(res)
+    // })
  },
 }
 </script>

-<style scoped>
+<style scoped lang="less">
+.screen-home-page{
+  min-height: 100%;
+  background: url("../../assets/screen/screen_bg.png");
+  background-repeat-x: no-repeat;
+  background-size: 100%;
+  padding: 0 20px 20px;
+  min-width: 1200px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.header{
+  background-image: url("../../assets/screen/header_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 238px;
+  display: flex;
+  justify-content: center;
+  span.title{
+    display: inline-block;
+    margin-top: 30px;
+    //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: -30px;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 87px;
+      height: 67px;
+      background-image: url("../../assets/screen/header_right.png");
+      right: -137px;
+      top: -30px;
+    }
+  }
+
+}
+
+// 二级标题
+.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;
+  }
+}

 </style>
@@ -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>
@@ -0,0 +1,260 @@
+<!--企业合同金额前十-->
+<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="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%'
+        },
+        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>
@@ -0,0 +1,241 @@
+<!--科室总体统计-->
+<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>
+
+          <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: 140,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name,
+          align: 'center',
+          width: index < 7 ? 190 : 120,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    initEcharts(data) {
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+      xData = xData.slice(0,7)
+      // 处理y轴数据
+      data.map((item,index) => {
+        if(index < 7){
+          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>
@@ -0,0 +1,337 @@
+<!-- 分类统计-->
+<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">
+      <span @click="toggleEcharts('income')" class="operator-left"
+            :class="{'active':activeIndex === 'income'}">收入分析</span>
+        <span @click="toggleEcharts('allMoney')" class="operator-left"
+              :class="{'active':activeIndex === 'allMoney'}">应收</span>
+        <span @click="toggleEcharts('confirmAmount')" class="operator-right"
+              :class="{'active':activeIndex === 'confirmAmount'}">确收</span>
+      </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:50%"
+        dropdownClassName="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:[],// 组织机构 树数据
+    }
+  },
+  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()//销毁
+      }
+      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;
+  //position: absolute;
+  user-select: none;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-around;
+  align-items: center;
+  //right: 20px;
+  //top: 20px;
+  width: 180px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid @active-color;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 10px;
+
+  &-left {
+    width: 33.3%;
+    text-align: center;
+    border-right: 1px solid @active-color;
+  }
+
+  &-right {
+    width: 33.3%;
+    text-align: center;
+  }
+}
+
+.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>
@@ -0,0 +1,270 @@
+<!-- 未收账款统计-->
+<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:50%"
+        :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)
+      console.log('-------echartsData--------', echartsData)
+      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>
@@ -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: '#4471EF'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            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: '#00D8F1'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            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: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+
+      createLineChart('singleMonthEchartsScreen', option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+
+</style>
@@ -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">
+      <!--    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
+
+      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: '#4471EF'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            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: '#00D8F1'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            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: '#6CFBCE'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+      createLineChart('singleMonthTotalEchartsScreen', option)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>
@@ -0,0 +1,163 @@
+<!--应收合同额统计-->
+<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>
@@ -0,0 +1,222 @@
+<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: auto;
+    top: 0;
+  }
+
+  /deep/ .box-title {
+    font-size: 18px;
+    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% - 60px);
+    top: 30px;
+    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
+.income-full-no-table-box{
+  padding-top: 31.31%;
+  /deep/ .box-title {
+    // 34.5 / 高度 587
+    top: 5.88%;
+  }
+}
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  margin-right: 30px;
+  padding-top: 6%;
+  position: relative;
+  z-index: 100;
+  width: 50%;
+  float: right;
+}
+
+
+// 表格样式的修改
+/deep/ .ant-table-thead tr > th {
+  color: #FFFFFF;
+  font-weight: bold;
+  background: transparent;
+  border: none;
+}
+
+/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;
+}
+
+/deep/ .ant-table-tbody tr:nth-of-type(2n + 1) {
+  background: #233062;
+}
+
+/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  background: #233062;
+}
+
+/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-color: @borderColor;
+  background: @backgroundColor !important;
+}
+
+/deep/ .ant-select-selection-selected-value {
+  color: #fff;
+}
+/deep/ .ant-select-arrow {
+  color: #fff !important;
+}
+
+
+
+
+
+///deep/::-webkit-scrollbar{
+//  background-color: red;
+//}
+//::-webkit-scrollbar-thumb{
+//  background-color: red;
+//}
+//::-webkit-scrollbar-track{
+//  background-color: red;
+//}
+
+
+</style>
+<style lang="less">
+@fontColor: #fff;
+@selectColor: #FFF500;
+@backgroundSelected: rgba(255, 255, 255, 0.10);
+.screen-select{
+  max-height: 200px!important;
+  max-width: 100px;
+  //&.ant-select-tree-dropdown {
+  //  background-color: #303c62;
+  //  color: @fontColor;
+  //}
+  ///deep/li .ant-select-tree-node-content-wrapper {
+  //  color: @fontColor;
+  //}
+}
+/deep/.screen-select.ant-select-tree li .ant-select-tree-node-content-wrapper {
+  color: @fontColor!important;
+}
+
+</style>
@@ -0,0 +1,16 @@
+<!--标准归口情况-->
+<template>
+  <div>
+    标准归口情况
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CentralizedChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--各SC历年应完成项目情况-->
+<template>
+  <div>
+    各SC历年应完成项目情况
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CompletionProjectChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--第一起草单位贡献度排名-->
+<template>
+  <div>
+    第一起草单位贡献度排名
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EnterpriseContributionChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,204 @@
+<!--汽车标准项目总体情况-->
+<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 { formatMoney } from '../../../utils/formatMoney'
+import { deepMerge } from '../../../utils/util'
+
+let commonOption = {
+  color: ['#5671E7', '#73BBF4'],
+  title: {
+    show: true
+  },
+  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: ['35%', '60%'],
+      center: ['50%', '55%'],
+      roseType: false,
+      label: {
+        show: true,
+        color: '#7599E8',
+        formatter: '{b}: {c}',
+        fontsize: 14
+      }
+    },
+    {
+      type: 'pie',
+      itemStyle: {
+        borderColor: '#162057',
+        borderWidth: 2
+      },
+      radius: ['25%', '34%'],
+      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 => {
+        console.log(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>
@@ -0,0 +1,16 @@
+<!--各SC超期情况统计-->
+<template>
+  <div>
+    各SC超期情况统计
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OverdueChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--汽车标准制修订情况 -->
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PreparationRevisionChart"
+};
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--历年计划下达情况-->
+<template>
+  <div>
+    历年计划下达情况
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReleasePlanChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--历年标准发布情况-->
+<template>
+  <div>
+    历年标准发布情况
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ReleaseStandardChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,16 @@
+<!--各年应完成项目情况-->
+<template>
+  <div>
+    各年应完成项目情况
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ShouldBeCompletedProjectChart'
+}
+</script>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,134 @@
+<template>
+  <div class="screen-preparation-revision">
+    <!-- 汽车标准项目-总体情况-->
+    <general-situation-chart></general-situation-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: {
+    // eslint-disable-next-line vue/no-unused-components
+    GeneralSituationChart,
+    // eslint-disable-next-line vue/no-unused-components
+    PreparationRevisionChart,
+    // eslint-disable-next-line vue/no-unused-components
+    CentralizedChart,
+    // eslint-disable-next-line vue/no-unused-components
+    ReleasePlanChart,
+    // eslint-disable-next-line vue/no-unused-components
+    ReleaseStandardChart,
+    // eslint-disable-next-line vue/no-unused-components
+    CompletionProjectChart,
+    // eslint-disable-next-line vue/no-unused-components
+    EnterpriseContributionChart,
+    // eslint-disable-next-line vue/no-unused-components
+    ShouldBeCompletedProjectChart,
+    // eslint-disable-next-line vue/no-unused-components
+    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: 18px;
+    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% - 100px);
+    // 587 - 69px - 30px
+    height: 83.13%;
+    top: 11.75%;
+    left: 50px;
+    display: flex;
+    flex-direction: row;
+    .echarts-box {
+      width: 100%;
+      flex: 1;
+    }
+  }
+
+}
+// 50%的box
+.preparation-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%;
+  }
+}
+
+// 半屏 标题右侧的样式
+/deep/.title-right{
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  margin-right: 30px;
+  padding-top: 6%;
+  position: relative;
+  z-index: 100;
+  width: 50%;
+  float: right;
+}
+
+
+@borderColor: #7599E8;
+@backgroundColor: #233062;
+
+
+</style>
@@ -0,0 +1,184 @@
+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: '#4471EF' // 0% 处的颜色
+        },
+        {
+          offset: 0.8, color: '#2D419A' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'transparent' // 100% 处的颜色
+        }
+      ],
+      global: false // 缺省为 false
+    },
+    {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0, color: '#00D8F1' // 0% 处的颜色
+        },
+        {
+          offset: 0.9, color: '#4679B1' // 100% 处的颜色
+        },
+        {
+          offset: 1, color: 'transparent' // 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: '2%'
+  },
+  grid: {
+    left: '3%',
+    right: '7%',
+    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: '#7599E8',
+        type: 'dashed'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    }
+  }
+}
+
+// 生成柱状图
+export function createBarChart(idName, option) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge(BarOptions, option)
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
@@ -0,0 +1,119 @@
+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 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
+    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',
+    // 去除图例中的线
+    // lineStyle: {
+    //   // opacity: 0
+    //   join: 'miter',
+    //   color: '#ff0'
+    // },
+    // itemStyle: {
+    //   color: '#f0f',
+    //   borderJoin: 'round',
+    //   opacity: 0.5
+    // },
+    //图例的公用文本样式。
+    textStyle: {
+      color: '#7599E8'
+    },
+    // itemWidth: 14,
+    // itemHeight: 14,
+    right: '2%',
+
+  },
+  grid: {
+    left: '2.4%',
+    right: '3%',
+    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
+    },
+    // TODO 需要自己扩展的
+    data: []
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#7599E8'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#7FA6FB'
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#7599E8',
+        type: 'dashed'
+      }
+    },
+    type: 'value',
+    nameTextStyle: {
+      color: '#7FA6FB'
+    },
+  },
+}
+
+// 生成折线图
+export function createLineChart(idName, option) {
+  const chartDom = document.getElementById(idName)
+  echarts.dispose(chartDom)
+  // debugger
+  let chartOption = deepMerge(LineOptions, option)
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
@@ -0,0 +1,84 @@
+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: ['#3E79ED', '#3A9EF2 ', '#2162C5', '#196CEB', '#234C9F'],
+  // let color = ['#3479EA', '#6CD2FE ', '#33A8F7', '#0683F7', '#234C9F']
+  tooltip: {
+    show: true,
+    trigger: 'item',
+    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">${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',
+      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)
+  console.log('-----chartOption-------', chartOption)
+  let myChart = echarts.init(chartDom)
+  chartOption && myChart.setOption(chartOption)
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}