【update大屏】-制修订、WP29大屏相关变更的开发

src/screenApi/api.js

@@ -2,6 +2,9 @@
 import { getActionZxd, getActionWP, getActionISO } from '@/screenApi/manage'
 
 /******制修订大屏接口--------开始 **********/
+// 获取所有sc信息
+const GetSCData = (params) => getActionZxd( '/serviceInterface/getDpData_scInfoList', params)
+
 // 汽车标准项目总体情况；包括发布的国行标、在研的国行标、立项上报的国行标、外文版项目数量
 const StanderProjectGeneralSituation = (params) => getActionZxd( '/serviceInterface/getDpData1', params)
 
@@ -50,9 +53,11 @@ const GetRegulationQuantityData = (params) => getActionWP('/laws/bzsLawRegulatio
 const GetExpertQuantityData = (params) => getActionWP('/expertinfo/bzsExpertInfo/getScreenExpertStatistics', params)
 // 会议信息日历
 const GetMeetingCalendarData = (params) => getActionWP('/meetinginfo/bzsMeetingInfo/getScreenMeetingInfoCalendar', params)
-// 会议信息统计
+// 会议信息统计-技术领域
 const GetMeetingInformationData = (params) => getActionWP('/meetinginfo/bzsMeetingInfo/queryScreenMeetingInfo', params)
 
+// 会议信息统计-部门
+const GetMeetingInformationDataByDepart = (params) => getActionWP('/meetinginfo/bzsMeetingInfo/queryScreenMeetingInfoDepart', params)
 /******WP29--------结束 **********/
 
 
@@ -71,6 +76,7 @@ const GetTechnicalFieldData = (params) => getActionISO('/expertinfo/bzsExpertInf
 
 
 export {
+  GetSCData,
   StanderProjectGeneralSituation,
   GetPreparationRevisionSituation,
   GetPreparationRevisionSC,
@@ -91,6 +97,7 @@ export {
   GetExpertQuantityData,
   GetMeetingCalendarData,
   GetMeetingInformationData,
+  GetMeetingInformationDataByDepart,
 
   GetLeadingStandardData,
   GetISOMeetingCalendarData,

src/views/dashboard/screen/preparationRevision/CentralizedChart.vue

@@ -14,6 +14,23 @@ import { createBarChart } from '../util/BarOptions'
 
 export default {
   name: 'CentralizedChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       xData: [],
@@ -49,6 +66,7 @@ export default {
     },
     // 初始化图表
     initChart() {
+      const _this = this
       let option = {
         xAxis: {
           data: this.xData
@@ -57,6 +75,25 @@ export default {
           formatter: params => {
             // 获取xAxis data中的数据
             let dataStr = ''
+            let curCode = params[0].name
+            let scItem = _this.scDataInfoArr.find(t => t.code === curCode)
+            if (scItem) {
+              dataStr += `<div style="margin: 0 0 5px 0;">
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">委员会简称：</span>
+                  <span style="color:#333;">${scItem.committeeSimpleName}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">秘书处所在单位：</span>
+                  <span style="color:#333;">${scItem.secretariatUnit}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">现任秘书长：</span>
+                  <span style="color:#333;">${scItem.currentSecretaryGeneral}</span>
+                </div>
+              </div>`
+            }
+
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {

src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue

@@ -19,9 +19,10 @@
           <a-select-option
             v-for="(item, index) in SCOptionData"
             :key="index"
-            :value="item"
+            :value="item.code"
+            :title="item.committeeSimpleName"
           >
-            {{item}}
+            {{item.code}}
           </a-select-option>
         </a-select>
       </ul>
@@ -40,6 +41,23 @@ import { createBarAndLineChart } from '../util/BarAndLineOptions'
 
 export default {
   name: 'CompletionProjectChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       selectValue: undefined, // 选中的SC
@@ -83,7 +101,10 @@ export default {
     initSCData(arr) {
       this.SCOptionData = []
       arr.map(item => {
-        this.SCOptionData.push(item.tm_code)
+        let scItem = this.scDataInfoArr.find(t => t.code === item.tm_code)
+        if (scItem) {
+          this.SCOptionData.push(scItem)
+        }
       })
     },
     /*

src/views/dashboard/screen/preparationRevision/OverdueChart.vue

@@ -14,6 +14,23 @@ import { createBarChart } from '../util/BarOptions'
 
 export default {
   name: 'OverdueChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
 
@@ -45,6 +62,7 @@ export default {
     },
     // 初始化图表
     initChart() {
+      const _this = this
       let option = {
         color: ['#069F99', '#3CC3BE', '#97E3E0'],
         //
@@ -55,6 +73,24 @@ export default {
           formatter: params => {
             // 获取xAxis data中的数据
             let dataStr = ''
+            let curCode = params[0].name
+            let scItem = _this.scDataInfoArr.find(t => t.code === curCode)
+            if (scItem) {
+              dataStr += `<div style="margin: 0 0 5px 0;">
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">委员会简称：</span>
+                  <span style="color:#333;">${scItem.committeeSimpleName}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">秘书处所在单位：</span>
+                  <span style="color:#333;">${scItem.secretariatUnit}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">现任秘书长：</span>
+                  <span style="color:#333;">${scItem.currentSecretaryGeneral}</span>
+                </div>
+              </div>`
+            }
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {

src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue

@@ -21,9 +21,10 @@
           <a-select-option
             v-for="(item, index) in SCOptionData"
             :key="index"
-            :value="item"
+            :value="item.code"
+            :title="item.committeeSimpleName"
           >
-            {{item}}
+            {{item.code}}
           </a-select-option>
         </a-select>
       </ul>
@@ -41,6 +42,23 @@ import { createBarChart } from '../util/BarOptions'
 
 export default {
   name: 'PreparationRevisionChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       selectType: 1, // 统计的维度 1-总体  2-SC下拉框
@@ -74,7 +92,10 @@ export default {
             result.map(item =>{
               this.SCData[item.tm_code] = item
               // let obj = {label: item.tm_code, value: item.tm_code}
-              SCData.push(item.tm_code)
+              let scItem = this.scDataInfoArr.find(t => t.code === item.tm_code)
+              if (scItem) {
+                SCData.push(scItem)
+              }
             })
             this.SCOptionData = SCData
           } catch (e) {

src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue

@@ -22,9 +22,10 @@
           <a-select-option
             v-for="(item, index) in SCOptionData"
             :key="index"
-            :value="item"
+            :value="item.code"
+            :title="item.committeeSimpleName"
           >
-            {{item}}
+            {{item.code}}
           </a-select-option>
         </a-select>
       </ul>
@@ -47,6 +48,23 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'ReleasePlanChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       selectType: 1, // 统计的维度 1-总体  2-SC下拉框
@@ -76,8 +94,8 @@ export default {
     // 点击中间的图片 做维度的转换
     changeType() {
       if(this.selectType === 1) {
-        this.selectValue = this.SCOptionData[0]
+        this.selectValue = this.SCOptionData[0].code
-        this.selectChange(this.SCOptionData[0])
+        this.selectChange(this.SCOptionData[0].code)
       } else {
         this.selectTypeChange(1)
       }
@@ -97,7 +115,10 @@ export default {
     initSCData(arr) {
       this.SCOptionData = []
       arr.map(item => {
-        this.SCOptionData.push(item.tm_code)
+        let scItem = this.scDataInfoArr.find(t => t.code === item.tm_code)
+        if (scItem) {
+          this.SCOptionData.push(scItem)
+        }
       })
     },
     // 获取SC下拉框的数据

src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue

@@ -22,9 +22,10 @@
           <a-select-option
             v-for="(item, index) in SCOptionData"
             :key="index"
-            :value="item"
+            :value="item.code"
+            :title="item.committeeSimpleName"
           >
-            {{item}}
+            {{item.code}}
           </a-select-option>
         </a-select>
       </ul>
@@ -46,6 +47,23 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'ReleaseStandardChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       selectType: 1, // 统计的维度 1-总体  2-SC下拉框
@@ -74,8 +92,8 @@ export default {
     // 点击中间的图片 做维度的转换
     changeType() {
       if(this.selectType === 1) {
-        this.selectValue = this.SCOptionData[0]
+        this.selectValue = this.SCOptionData[0].code
-        this.selectChange(this.SCOptionData[0])
+        this.selectChange(this.SCOptionData[0].code)
       } else {
         this.selectTypeChange(1)
       }
@@ -95,7 +113,10 @@ export default {
     initSCData(arr) {
       this.SCOptionData = []
       arr.map(item => {
-        this.SCOptionData.push(item.tm_code)
+        let scItem = this.scDataInfoArr.find(t => t.code === item.tm_code)
+        if (scItem) {
+          this.SCOptionData.push(scItem)
+        }
       })
     },
     // 获取SC下拉框的数据

src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue

@@ -39,6 +39,23 @@ import { createBarAndLineChart } from '../util/BarAndLineOptions'
 
 export default {
   name: 'ShouldBeCompletedProjectChart',
+  props: {
+    /*   scDataInfoArr 内部对象数据的组成形式 {
+       "code": "SC1",
+       "committeeFullName": "全国汽车标准化技术委员会摩托车分会",
+       "committeeSimpleName": "摩托车",
+       "contacts": "陆瑾",
+       "currentSecretaryGeneral": "胡文浩",
+       "scCode": "TC114/SC1",
+       "secretariatUnit": "上海机动车检测认证技术研究中心有限公司"
+     }*/
+    scDataInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       selectValue: undefined, // 选中的SC
@@ -85,8 +102,64 @@ export default {
     },
     // 初始化图表
     initChart() {
+      const _this = this
       let option = {
         xAxis: { data: this.xData },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            let curCode = params[0].name
+            let scItem = _this.scDataInfoArr.find(t => t.code === curCode)
+            if (scItem) {
+              dataStr += `<div style="margin: 0 0 5px 0;">
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">委员会简称：</span>
+                  <span style="color:#333;">${scItem.committeeSimpleName}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">秘书处所在单位：</span>
+                  <span style="color:#333;">${scItem.secretariatUnit}</span>
+                </div>
+                <div style="margin: 0 8px;">
+                  <span style="color:#666">现任秘书长：</span>
+                  <span style="color:#333;">${scItem.currentSecretaryGeneral}</span>
+                </div>
+              </div>`
+            }
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              if(item.seriesType === 'bar') {
+                dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
+            <span style="color:#666">${item.seriesName}</span>
+            <span style="color:#333;">${item.value}</span>
+          </div>
+        </div>`
+              } else {
+                let valueText = item.value
+                // 求比例的时候特殊处理
+                if(item.seriesName.indexOf('比例') > -1) {
+                  valueText = item.value === undefined ? '-' : `${item.value}%`
+                }
+                dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:15px;height:2px;background-color:${color};vertical-align: middle"></span>
+            <span style="color:#666">${item.seriesName}</span>
+            <span style="color:#333;">${valueText}</span>
+          </div>
+        </div>`
+              }
+            })
+            return dataStr
+          },
+        },
         series: [
           { data: this.yData[0] },
           { data: this.yData[1] },

src/views/dashboard/screen/preparationRevision/index.vue

@@ -3,21 +3,21 @@
     <!-- 汽车标准项目-总体情况-->
     <general-situation-chart></general-situation-chart>
     <!-- 汽车标准制修订情况-->
-    <preparation-revision-chart></preparation-revision-chart>
+    <preparation-revision-chart :sc-data-info-arr="ScData"></preparation-revision-chart>
     <!-- 标准归口情况-->
-    <centralized-chart></centralized-chart>
+    <centralized-chart :sc-data-info-arr="ScData"></centralized-chart>
     <!--    历年计划下达情况-->
-    <release-plan-chart></release-plan-chart>
+    <release-plan-chart :sc-data-info-arr="ScData"></release-plan-chart>
     <!--    历年标准发布情况-->
-    <release-standard-chart></release-standard-chart>
+    <release-standard-chart :sc-data-info-arr="ScData"></release-standard-chart>
     <!--    各SC历年应完成项目情况-->
-    <completion-project-chart></completion-project-chart>
+    <completion-project-chart :sc-data-info-arr="ScData"></completion-project-chart>
     <!--    第一起草单位贡献度排名-->
     <enterprise-contribution-chart></enterprise-contribution-chart>
     <!--    各年应完成项目情况-->
-    <should-be-completed-project-chart></should-be-completed-project-chart>
+    <should-be-completed-project-chart :sc-data-info-arr="ScData"></should-be-completed-project-chart>
     <!--    各SC超期情况统计-->
-    <overdue-chart></overdue-chart>
+    <overdue-chart :sc-data-info-arr="ScData"></overdue-chart>
   </div>
 </template>
 
@@ -40,6 +40,7 @@ import EnterpriseContributionChart from './EnterpriseContributionChart'
 import ShouldBeCompletedProjectChart from './ShouldBeCompletedProjectChart'
 //各SC超期情况统计 OverdueChart
 import OverdueChart from './OverdueChart'
+import { GetSCData } from '../../../../screenApi/api'
 
 export default {
   name: 'index',
@@ -62,6 +63,18 @@ export default {
     ShouldBeCompletedProjectChart,
     // 各SC超期情况统计
     OverdueChart
+  },
+  data() {
+    return {
+      ScData: [] // 存储所有的SC数据
+    }
+  },
+  created() {
+    GetSCData().then(res =>{
+      if(res.success) {
+        this.ScData = res.result || []
+      }
+    })
   }
 }
 </script>

src/views/dashboard/screen/wp29/ExpertQuantityChart.vue

@@ -1,6 +1,6 @@
 <!--专家数量统计-->
 <template>
-  <div class="panel-box expert-quantity-box">
+  <div class="panel-box full-box">
     <div class="panel-title">
       <img src="../../.././../assets/screenNew/icon_expert.png" alt="">
       <span>专家数量统计</span>
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { createPieChart } from '../util/PieOptions'
 import { GetExpertQuantityData } from '@/screenApi/api'
+import { createBarChart } from "../util/BarOptions";
 
 export default {
   name: 'ExpertQuantityChart',
@@ -30,74 +30,67 @@ export default {
     getData() {
       GetExpertQuantityData().then(res => {
         if(res.success) {
-          let data = res.result || []
+          let result = res.result || { }
-          if(data.length > 0) {
+          this.totalAll = result.total
-            this.totalAll = data[0].total
-          }
           this.$nextTick(() => {
-            this.initChart(data)
+            this.initChart(result)
           })
         }
       })
     },
     /**
      * 初始化图表
-     * @param data --{"technicalField":"GRSP","count":"23","total":"52"}
+     * @param data --{"departNameCn":["GRSP"],"count":["23"],"total":"52"}
      */
     initChart(data) {
-      let echartsData = data.reduce((pre, val) => {
+      const yData = data.count
-        return pre.concat({value: val.count, name: val.technicalField, total: val.total})
+      const xAxisData = data.departNameCn
-      }, [])
-
       let option = {
         legend: {
-          show: true,
+          show: false
-          type: 'scroll',
-          orient: 'vertical',
-          right: '-20px',
-          top: 'center',
-          itemGap: 10 // 图例之间的间距
         },
         grid: {
           left: '0',
-          right: '0',
+          top : '20'
         },
         tooltip: {
-          formatter: (param) => {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
               let color = ''
-            if(typeof param.color === 'string') {
+              if(typeof item.color === 'string') {
-              color = param.color
+                color = item.color
               } else {
-              color = param.color.colorStops[0].color
+                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:#666">${item.name}</span>
+                  <span style="color:#333;">${item.value}</span>
+                </div>
+              </div>`
+            })
+            return dataStr
           }
-            return `<div>
-<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
-<span style="color: #666">${param.name}</span>
-<span style="color: #333">${param.value}</span>
-</div>`
         },
-
+        xAxis: {
+          data: xAxisData
         },
         series: [
           {
-            center: ['42%', '50%'],
+            name: '',
-            // label: {
+            type: 'bar',
-            //   formatter: '{hr|} {c}',
+            barMaxWidth:20,
-            //   rich: {
+            itemStyle:{
-            //     hr: {
+              borderRadius:[4,4,0,0],
-            //       backgroundColor: 'red',
+            },
-            //       borderRadius: 50,
+            data: yData
-            //       width: 7,
-            //       height: 7,
-            //     }
-            //
-            //   }
-            // },
-            data: echartsData
           }
         ]
       }
-      createPieChart('expertQuantityChart', option)
+      createBarChart('expertQuantityChart', option)
     }
 
   },
@@ -108,8 +101,5 @@ export default {
 </script>
 
 <style scoped lang="less">
-.expert-quantity-box{
-  width: 40%;
-}
 
 </style>

src/views/dashboard/screen/wp29/MeetingCalendar.vue

@@ -5,8 +5,8 @@
       <img src="../../.././../assets/screenNew/icon_meeting.png" alt="">
       <span>会议信息日历</span>
       <div class='header-num'>
-        <span>会议总数：</span>
+        <span>当月会议总数：</span>
-        <span class='num'>{{this.scheduleList.length}}</span>
+        <span class='num'>{{this.scheduleList.length > 0 ? this.scheduleList[0].total : 0}}</span>
       </div>
     </div>
     <div class="panel-content">
@@ -86,13 +86,17 @@ export default {
       this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
     })
     // this.getReservationList(this.scheduleList)
-    this.getData()
+    const year = new Date().getFullYear()
+    const month = new Date().getMonth() + 1
+    let m = month < 10 ? ('0' + month) : month
+    const cutTime = year + '-' + m
+    this.getData(cutTime)
   },
   methods: {
-    getData() {
+    getData(cutTime) {
       let query = {
         // orgCode: this.orgCode,
-        // cutTime: ''
+        cutTime: cutTime
       }
       GetMeetingCalendarData(query).then((res) => {
         if (res.success) {
@@ -106,13 +110,23 @@ export default {
     prev() {
       this.calendarApi.prev()
       let currentDate = new Date(this.calendarApi.currentData.currentDate)
-      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+      const year = currentDate.getFullYear()
+      const month = currentDate.getMonth() + 1
+      let m = month < 10 ? ('0' + month) : month
+      this.time = year + '年' + month + '月'
+      const cutTime = year + '-' + m
+      this.getData(cutTime)
     },
     // 切换下一个按钮事件
     next() {
       this.calendarApi.next()
       let currentDate = new Date(this.calendarApi.currentData.currentDate)
-      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+      const year = currentDate.getFullYear()
+      const month = currentDate.getMonth() + 1
+      let m = month < 10 ? ('0' + month) : month
+      this.time = year + '年' + month + '月'
+      const cutTime = year + '-' + m
+      this.getData(cutTime)
     },
     // 点击今天按钮
     today() {

src/views/dashboard/screen/wp29/MeetingInformationChart.vue

@@ -5,42 +5,41 @@
       <img src="../../.././../assets/screenNew/icon_meetingWp.png" alt="">
       <span>会议信息统计</span>
       <ul class="panel-title-right">
+        <!--<li-->
+        <!--  v-for="item in dimensionOptionData"-->
+        <!--  :key="item.value"-->
+        <!--  :class="{'active': dimensionValue === item.value}"-->
+        <!--  @click="dimensionSelectChange(item)"-->
+        <!--&gt;{{ item.text }}</li>-->
         <li
-          v-for="item in dimensionOptionData"
+          v-for="item in statisticTypeOptionData"
           :key="item.value"
-          :class="{'active': dimensionValue === item.value}"
+          :class="{'active': statisticType === item.value}"
-          @click="dimensionSelectChange(item)"
+          @click="statisticTypeSelectChange(item)"
         >{{ item.text }}</li>
       </ul>
     </div>
     <div class="panel-content">
       <div class="select-info-box">
-        <div class="left-select">
+        <div class="search-item">
-          <span class="label">选择时间：</span>
+          <span class="label">年份：</span>
           <j-year-date
-            v-if="dimensionValue !== 'month'"
             format="YYYY"
             :allowClear="false"
             placeholder="请选择年份"
             v-model="searchParams.year"
             @change="onYearChange"
           ></j-year-date>
-          <a-month-picker
+        </div>
-            v-if="dimensionValue === 'month'"
+        <div class="search-item">
-            placeholder="请选择月份"
+          <span class="label">季度：</span>
-            format="YYYY-MM"
-            value-format="YYYY-MM"
-            :allowClear="false"
-            v-model='searchParams.month'
-            @change="onMonthChange" >
-          </a-month-picker>
           <a-select
-            v-if="dimensionValue === 'quarter'"
             class="right-select active"
             v-model="searchParams.quarter"
             placeholder="季度"
             style="width: 180px"
             show-search
+            allow-clear
             @change="quarterSelectChange"
           >
             <a-select-option
@@ -52,10 +51,20 @@
             </a-select-option>
           </a-select>
         </div>
-        <div class="title-right-sub">
+        <div class="search-item">
-          <span>会议总数：</span>
+          <span class="label">月份：</span>
-          <span class="num">{{totalAll}}</span>
+          <a-month-picker
+            placeholder="请选择月份"
+            format="MM"
+            value-format="YYYY-MM"
+            :allow-clear="true"
+            v-model='searchParams.month'
+            :disabledDate="disabledMonthDate"
+            @change="onMonthChange" >
+          </a-month-picker>
         </div>
+        <!--<a-button type="primary" icon="search" @click="searchFunc">查询</a-button>-->
+        <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
       </div>
       <div class="echarts-box " id="meetingInformationChart"></div>
     </div>
@@ -63,9 +72,11 @@
 </template>
 
 <script>
-import { GetMeetingInformationData } from '@/screenApi/api'
+import { GetMeetingInformationData, GetMeetingInformationDataByDepart } from '@/screenApi/api'
-import { createBarChart } from '../util/BarOptions'
 import JYearDate from '@/components/jero/JYearDate'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'
+import * as echarts from 'echarts'
+import moment from 'moment'
 
 export default {
   name: 'MeetingInformationChart',
@@ -82,6 +93,12 @@ export default {
         {text: '季度', value: 'quarter'},
         {text: '月份', value: 'month'},
       ],
+      // 右上角统计类型的数据
+      statisticTypeOptionData: [
+        {text: '部门', value: '1'},
+        {text: '技术领域', value: '2'}
+      ],
+      statisticType: '1', // 统计维度
       quarterOptionData: [
         {text: '第一季度', value: '1'},
         {text: '第二季度', value: '2'},
@@ -98,6 +115,10 @@ export default {
     }
   },
   methods: {
+    disabledMonthDate(current) {
+      let currentYear = moment(this.searchParams.year).format('YYYY')
+      return current && current.format('YYYY') !== currentYear
+    },
     getCurrentData() {
     //  获取当前年份、月份和季度
       let data = new Date()
@@ -132,17 +153,66 @@ export default {
         this.searchParams.year = this.currentDateObj.year + ''
         this.searchParams.quarter = this.currentDateObj.quarter
       }
+      // this.getData()
+    },
+    // 右上角 部门和技术领域统计维度切换的方法
+    statisticTypeSelectChange(item) {
+      if (this.statisticType === item.value) return
+      this.statisticType = item.value
+      // 初始化统计维度的相关数据
+      this.initData()
       this.getData()
     },
     onYearChange() {
+      // 当前的统计维度是年份
+      this.dimensionValue = 'year'
+      this.searchParams.quarter = undefined
+      this.searchParams.month = undefined
       this.getData()
     },
-    onMonthChange() {
+    quarterSelectChange(val) {
+      this.searchParams.month = undefined
+      if(!val) {
+        this.dimensionValue = 'year'
+      } else {
+        this.dimensionValue = 'quarter'
+      }
+      this.$forceUpdate()
       this.getData()
     },
-    quarterSelectChange() {
+    onMonthChange(val) {
+      if(!val) {
+        this.dimensionValue = 'quarter'
+      } else {
+        this.dimensionValue = 'month'
+        // 判断所属的季度
+        let month = val.split('-')[1]
+        this.searchParams.quarter = this.judgeQuarter(month)
+      }
+      this.$forceUpdate()
       this.getData()
     },
+    judgeQuarter(month) {
+      let result = undefined
+      month = Number(month)
+      switch (true) {
+        case (month < 4) :
+          result = '第一季度'
+          break
+        case (month < 7) :
+          result = '第二季度'
+          break
+        case (month < 10) :
+          result = '第三季度'
+          break
+        case (month <= 12) :
+          result = '第四季度'
+          break
+        default:
+          break
+      }
+      return result
+    },
     // 获取查询参数
     getQueryParams() {
       let params = {
@@ -160,10 +230,11 @@ export default {
     },
     getData() {
       let params = this.getQueryParams()
-      GetMeetingInformationData(params).then(res => {
+      let func = this.statisticType === '1' ? GetMeetingInformationDataByDepart : GetMeetingInformationData
+      func(params).then(res => {
         if(res.success) {
-          let data = res.result || {}
+          let data = (res.result || {}).data || []
-          this.totalAll = data.total
+          // this.totalAll = data.total
           this.$nextTick(() => {
             this.initChart(data)
           })
@@ -172,13 +243,17 @@ export default {
     },
     /**
      * 初始化图表
-     * @param data = {leftData: X轴数据 resultMapList：[] 柱状图数据}
+     * @param data = [{data: [数组数据]， name: '实际数量', stack: 'stack', type: 'bar', xAxis : []},{}, {}]
      */
     initChart(data) {
-      let xData = data.leftData
+      let xData = data[0]? data[0].xAxis : []
-      let echartsData = data.resultMapList[0].count
+      let yData = []
-      let tooltipTitle = data.resultMapList[0].cogName
+      data.map(tt => {
+        yData.push(tt.data || [])
+      })
+      let tooltipTitle = this.getTooltipTitle()
       let option = {
+        color: ['#069F99', '#97E3E0', '#18E0AB'],
         legend: {
           show: false
         },
@@ -196,13 +271,28 @@ export default {
               } 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:#666">${item.name}</span>
+                    <span style="color:#666">${item.seriesName}</span>
                     <span style="color:#333;">${item.value}</span>
                   </div>
                 </div>`
+              } else {
+                let valueText = item.value
+                // 求完成率的时候特殊处理
+                if(item.seriesName.indexOf('完成率') > -1) {
+                  valueText = item.value === undefined ? '-' : `${item.value}%`
+                }
+                dataStr += `<div>
+                  <div style="margin: 0 8px;">
+                    <span style="display:inline-block;margin-right:5px;width:15px;height:2px;background-color:${color};vertical-align: middle"></span>
+                    <span style="color:#666">${item.seriesName}</span>
+                    <span style="color:#333;">${valueText}</span>
+                  </div>
+                </div>`
+              }
             })
             return dataStr
           }
@@ -212,18 +302,60 @@ export default {
         },
         series: [
           {
-            name: '数量',
+            name:'计划数量',
-            type: 'bar',
+            stack: 'total',
-            barMaxWidth:30,
             itemStyle:{
-              borderRadius:[4,4,0,0],
+              borderRadius:[0,0,0,0],
             },
-            data: echartsData
+            data: yData[0]
+          },
+          {
+            name:'实际数量',
+            stack: 'total',
+            data: yData[1]
+          },
+          {
+            name:'完成率',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 224, 171, 1)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(24, 224, 171, 0.1)'
+                }
+              ])
+            },
+            data: yData[2],
           }
         ]
       }
-      createBarChart('meetingInformationChart', option)
+      createBarAndLineChart('meetingInformationChart', option)
-
+    },
+    // 通过统计维度判断显示的标题
+    getTooltipTitle() {
+      let result = ''
+      if(this.dimensionValue === 'year') {
+         result = this.searchParams.year + '年'
+      } else if(this.dimensionValue === 'month') {
+        let month = this.searchParams.month.split('-')[1]
+        result = this.searchParams.year + '年' + Number(month) + '月'
+      } else if(this.dimensionValue === 'quarter') {
+        result = this.searchParams.year + '年' + this.searchParams.quarter
+      }
+      return result
+    },
+    // 重置
+    searchReset() {
+      // 初始化统计维度的相关数据
+      this.initData()
+      this.getData()
     },
     // 初始化查询条件的数据
     initData() {
@@ -250,14 +382,17 @@ export default {
 .select-info-box{
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  .left-select > span:not(.label) {
-    margin-right: 15px;
   color: @normal-color;
+  .search-item{
+    margin-right: 20px;
   }
+
   .label{
     color: @normal-color;
   }
+  button {
+    margin-left: 15px;
+  }
 }
 // 会议总数的样式
 .title-right-sub {

src/views/dashboard/screen/wp29/RegulationQuantityChart.vue

@@ -1,6 +1,6 @@
 <!--法规数量统计-->
 <template>
-  <div class="panel-box regulation-box">
+  <div class="panel-box full-box">
     <div class="panel-title">
       <img src="../../.././../assets/screenNew/icon_regulation.png" alt="">
       <span>法规数量统计</span>
@@ -58,10 +58,11 @@ export default {
         color: ['#069F99', '#3CC3BE','#97E3E0'],
         grid: {
           left: '0',
-          right: '0',
+          top : '20'
         },
         legend: {
-          right: 0
+          right: 0,
+          show: false
         },
         tooltip: {
           formatter: params => {
@@ -71,23 +72,23 @@ export default {
             for (let i = 0; i < params.length; i++) {
               total += parseInt(params[i].data)
             }
-            dataStr += ` <div style="color:#333;margin-left: 8px;font-size: 14px">总数: ${total}</div>`
+            dataStr += ` <div style="color:#333;margin-left: 8px;font-size: 14px">${params[0].name} 总数: ${total}</div>`
 
-            params.forEach(item => {
+            //     params.forEach(item => {
-              let color = ''
+            //       let color = ''
-              if(typeof item.color === 'string') {
+            //       if(typeof item.color === 'string') {
-                color = item.color
+            //         color = item.color
-              } else {
+            //       } else {
-                color = item.color.colorStops[0].color
+            //         color = item.color.colorStops[0].color
-              }
+            //       }
-              dataStr += `<div>
+            //       dataStr += `<div>
-          <div style="margin: 0 8px;">
+            //   <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="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
-            <span style="color:#666">${item.seriesName}</span>
+            //     <span style="color:#666">${item.seriesName}</span>
-            <span style="color:#333;">${item.value}</span>
+            //     <span style="color:#333;">${item.value}</span>
-          </div>
+            //   </div>
-        </div>`
+            // </div>`
-            })
+            //     })
             return dataStr
           }
         },
@@ -138,8 +139,8 @@ export default {
 
 <style scoped lang="less">
 .regulation-box{
-  width: calc(60% - 10px);
+  //width: calc(60% - 10px);
-  margin-right: 10px;
+  //margin-right: 10px;
 }
 
 </style>