【ADD】-制修订-各年应完成项目情况\各SC历年应完成项目情况 两个柱、折线图的开发;

src/screenApi/api.js

@@ -4,6 +4,32 @@ import { getActionZxd } 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)
+
+// 各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)
+
+
+
 export {
-  StanderProjectGeneralSituation
+  StanderProjectGeneralSituation,
+  GetPreparationRevisionSituation,
+  GetPreparationRevisionSC,
+  GetCentralizedData,
+  GetOverdueData,
+  GetShouldBeCompletedProjectData,
+  GetCompletionProjectData
 }

src/views/screen/HomePage.vue

@@ -2,6 +2,7 @@
   <div class="screen-home-page">
     <!-- 上面的头部-->
     <div class="header">
+      <img src="../../assets/screen/header_bg.png" alt="">
       <span class="title">中国汽车标准化研究院运营管理</span>
     </div>
     <!-- 来款-->
@@ -47,18 +48,26 @@ export default {
   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: 238px;
+  //background-image: url("../../assets/screen/header_bg.png");
+  //background-repeat: no-repeat;
+  //background-size: 100% 100%;
+  height: 162px;
   display: flex;
   justify-content: center;
+  img{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 162px;
+    width: 100%;
+  }
   span.title{
     display: inline-block;
-    margin-top: 30px;
+    margin-top: 21px;
     //width: 812px;
     height: 42px;
     font-size: 42px;
@@ -79,7 +88,7 @@ export default {
       height: 67px;
       background-image: url("../../assets/screen/header_left.png");
       left: -137px;
-      top: -30px;
+      top: 0;
     }
     &::after {
       content: '';
@@ -89,7 +98,7 @@ export default {
       height: 67px;
       background-image: url("../../assets/screen/header_right.png");
       right: -137px;
-      top: -30px;
+      top: 0;
     }
   }
 

src/views/screen/incomePayments/AllMoneyTenEcharts.vue

@@ -1,7 +1,7 @@
 <!--企业合同金额前十-->
 <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="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>

src/views/screen/incomePayments/index.vue

@@ -62,7 +62,7 @@ export default {
   /deep/ .box-bg-img {
     position: absolute;
     width: 100%;
-    height: auto;
+    height: 100%;
     top: 0;
   }
 
@@ -118,6 +118,13 @@ export default {
     top: 5.88%;
   }
 }
+// 最后一个标题比较长的信息
+.income-more-title-full-box{
+  /deep/ .box-title {
+    // (139 + 327 / 2) / 1875
+    left: 16.13%;
+  }
+}
 // 半屏 标题右侧的样式
 /deep/.title-right{
   display: flex;

src/views/screen/preparationRevision/CentralizedChart.vue

@@ -1,13 +1,109 @@
 <!--标准归口情况-->
 <template>
-  <div>
-    标准归口情况
+  <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'
+  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>
 

src/views/screen/preparationRevision/CompletionProjectChart.vue

@@ -1,13 +1,117 @@
 <!--各SC历年应完成项目情况-->
 <template>
-  <div>
-    各SC历年应完成项目情况
+  <div class="preparation-full-box preparation-half-box">
+    <div class="box-title">各SC历年应完成项目情况</div>
+    <ul class="title-right">
+      <a-select
+        class="active"
+        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="completionProjectChart"></div>
+    </div>
+
   </div>
 </template>
 
 <script>
+import { GetCompletionProjectData, GetShouldBeCompletedProjectData } from '../../../screenApi/api'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+
 export default {
-  name: 'CompletionProjectChart'
+  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 = this.SCOptionData[0]
+      }
+    },
+    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 = [[], [], []]
+      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>
 

src/views/screen/preparationRevision/EnterpriseContributionChart.vue

@@ -1,7 +1,10 @@
 <!--第一起草单位贡献度排名-->
 <template>
-  <div>
-    第一起草单位贡献度排名
+  <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>
 

src/views/screen/preparationRevision/GeneralSituationChart.vue

@@ -19,7 +19,6 @@
 
 import { StanderProjectGeneralSituation } from '../../../screenApi/api'
 import { createPieChart } from '../util/PieOptions'
-import { formatMoney } from '../../../utils/formatMoney'
 import { deepMerge } from '../../../utils/util'
 
 let commonOption = {

src/views/screen/preparationRevision/OverdueChart.vue

@@ -1,13 +1,142 @@
 <!--各SC超期情况统计-->
 <template>
-  <div>
-    各SC超期情况统计
+  <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";
+import * as echarts from 'echarts'
+
 export default {
-  name: 'OverdueChart'
+  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: '#4471EF' // 0% 处的颜色
+              },
+              {
+                offset: 0.9, color: '#2D419A' // 100% 处的颜色
+              },
+              {
+                offset: 1, color: 'transparent' // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          },
+          '#69C4F3',
+          '#6CFBCE'
+        ],
+        //
+        xAxis: {
+          data: this.xData
+        },
+        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.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>
 

src/views/screen/preparationRevision/PreparationRevisionChart.vue

@@ -1,14 +1,159 @@
 <!--汽车标准制修订情况 -->
 <template>
-  <div>
-
+  <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" 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"
-};
+  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:20,
+            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
+      }
+    }
+  },
+  created() {
+    this.selectType = 1
+    this.getData()
+  }
+
+}
 </script>
 
 <style scoped>

src/views/screen/preparationRevision/ReleasePlanChart.vue

@@ -1,13 +1,66 @@
 <!--历年计划下达情况-->
 <template>
-  <div>
-    历年计划下达情况
+  <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" 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>
 export default {
-  name: 'ReleasePlanChart'
+  name: 'ReleasePlanChart',
+  data() {
+    return {
+      selectType: 1, // 统计的维度 1-总体  2-SC下拉框
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+    }
+  },
+  methods: {
+    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
+      }
+    }
+  }
 }
 </script>
 

src/views/screen/preparationRevision/ReleaseStandardChart.vue

@@ -1,13 +1,65 @@
 <!--历年标准发布情况-->
 <template>
-  <div>
-    历年标准发布情况
+  <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" 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>
 export default {
-  name: 'ReleaseStandardChart'
+  name: 'ReleaseStandardChart',
+  data() {
+    return {
+      selectType: 1, // 统计的维度 1-总体  2-SC下拉框
+      selectValue: undefined, // 选中的SC
+      SCOptionData: [],
+    }
+  },
+  methods: {
+    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
+      }
+    }
+  }
 }
 </script>
 

src/views/screen/preparationRevision/ShouldBeCompletedProjectChart.vue

@@ -1,13 +1,102 @@
 <!--各年应完成项目情况-->
 <template>
-  <div>
-    各年应完成项目情况
+  <div class="preparation-full-box">
+    <div class="box-title">各年应完成项目情况</div>
+    <ul class="title-right">
+      <a-select
+        class="active"
+        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 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'
+  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>
 

src/views/screen/preparationRevision/index.vue

@@ -2,12 +2,27 @@
   <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
+//汽车标准项目总体情况 GeneralSituationChart
 import GeneralSituationChart from './GeneralSituationChart'
 //汽车标准制修订情况 PreparationRevisionChart
 import PreparationRevisionChart from './PreparationRevisionChart'
@@ -29,25 +44,24 @@ 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
+    // 各SC历年应完成项目情况
     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
+    // 各SC超期情况统计
     OverdueChart
-
   }
 }
 </script>
@@ -83,11 +97,11 @@ export default {
   // 内容的部分
   /deep/ .box-content {
     position: absolute;
-    width: calc(100% - 100px);
+    width: calc(100% - 40px);
     // 587 - 69px - 30px
     height: 83.13%;
     top: 11.75%;
-    left: 50px;
+    left: 20px;
     display: flex;
     flex-direction: row;
     .echarts-box {
@@ -97,38 +111,95 @@ export default {
   }
 
 }
-// 50%的box
+// 50%的box 536 * 931
 .preparation-half-box{
   width: 50%;
-  //height: 736px;
-  height:600px;
-  padding-top: 0;
+  height: 0;
+  padding-top: 28.79%;
+  background-image: url("../../../assets/screen/half_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   /deep/ .box-title {
-    // 自定义位置
-    top: 4.69%;
-    left: 27.50%;
+    // (25 + 18 / 2) / 635
+    top: 6.34%;
+    // (171 + 149 / 2) / 931
+    left: 26.37%;
   }
   /deep/ .box-bg-img {
     height: 100%;
   }
 }
 
+@normal-color: rgba(256, 256, 256, 0.5);
+@white: #fff;
 // 半屏 标题右侧的样式
 /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;
+  position: absolute;
+  // 和标题的位置相似
+  top: 5.88%;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: end;
+  z-index: 100;
+  // 右边框相同
+  margin-right: 50px;
+  li{
+    list-style: none;
+    color: @normal-color;
+    cursor: pointer;
+    padding: 0 10px;
+  }
+  li.active{
+    color: @white;
+  }
+  .splice-icon{
+    width: 20px;
+    height: 19px;
+    margin: 0 10px;
+  }
 }
 
 
+//下拉框样式的修改
+/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;
+}
+
 @borderColor: #7599E8;
 @backgroundColor: #233062;
 
 
+</style>
+<style lang="less">
+.ant-select-screen {
+  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;
+  }
+}
+
 </style>

src/views/screen/util/BarAndLineOptions.js

@@ -0,0 +1,250 @@
+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: '#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 => {
+        console.log('--item--------', 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 === 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: '#7599E8',
+          type: 'dashed'
+        }
+      },
+      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

@@ -84,11 +84,11 @@ export const BarOptions = {
     },
     itemWidth: 14,
     // itemHeight: 14,
-    right: '2%'
+    right: '3%'
   },
   grid: {
     left: '3%',
-    right: '7%',
+    right: '4%',
     bottom: '3%',
     containLabel: true
   },
@@ -175,7 +175,7 @@ export function createBarChart(idName, option) {
   const chartDom = document.getElementById(idName)
   echarts.dispose(chartDom)
   // debugger
-  let chartOption = deepMerge(BarOptions, option)
+  let chartOption = deepMerge({}, BarOptions, option)
   let myChart = echarts.init(chartDom)
   chartOption && myChart.setOption(chartOption)
   window.addEventListener('resize', () => {

src/views/screen/util/LineOptions.js

@@ -110,7 +110,7 @@ export function createLineChart(idName, option) {
   const chartDom = document.getElementById(idName)
   echarts.dispose(chartDom)
   // debugger
-  let chartOption = deepMerge(LineOptions, option)
+  let chartOption = deepMerge({}, LineOptions, option)
   let myChart = echarts.init(chartDom)
   chartOption && myChart.setOption(chartOption)
   window.addEventListener('resize', () => {

src/views/screen/util/PieOptions.js

@@ -74,7 +74,7 @@ export function createPieChart(idName, option) {
   const chartDom = document.getElementById(idName)
   echarts.dispose(chartDom)
   // debugger
-  let chartOption = deepMerge(PieOptions, option)
+  let chartOption = deepMerge({}, PieOptions, option)
   console.log('-----chartOption-------', chartOption)
   let myChart = echarts.init(chartDom)
   chartOption && myChart.setOption(chartOption)