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

2023-05-23 15:41:22 +08:00
parent dbe4d00990
commit 49d468a32d
13 changed files with 541 additions and 151 deletions
@@ -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}"
-          @click="dimensionSelectChange(item)"
+          :class="{'active': statisticType === item.value}"
+          @click="statisticTypeSelectChange(item)"
        >{{ item.text }}</li>
      </ul>
    </div>
    <div class="panel-content">
      <div class="select-info-box">
-        <div class="left-select">
-          <span class="label">选择时间：</span>
+        <div class="search-item">
+          <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
-            v-if="dimensionValue === 'month'"
-            placeholder="请选择月份"
-            format="YYYY-MM"
-            value-format="YYYY-MM"
-            :allowClear="false"
-            v-model='searchParams.month'
-            @change="onMonthChange" >
-          </a-month-picker>
+        </div>
+        <div class="search-item">
+          <span class="label">季度：</span>
          <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">
-          <span>会议总数：</span>
-          <span class="num">{{totalAll}}</span>
+        <div class="search-item">
+          <span class="label">月份：</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 { createBarChart } from '../util/BarOptions'
+import { GetMeetingInformationData, GetMeetingInformationDataByDepart } from '@/screenApi/api'
 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 || {}
-          this.totalAll = data.total
+          let data = (res.result || {}).data || []
+          // 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 echartsData = data.resultMapList[0].count
-      let tooltipTitle = data.resultMapList[0].cogName
+      let xData = data[0]? data[0].xAxis : []
+      let yData = []
+      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
              }
-              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>`
+              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
          }
@@ -212,18 +302,60 @@ export default {
        },
        series: [
          {
-            name: '数量',
-            type: 'bar',
-            barMaxWidth:30,
+            name:'计划数量',
+            stack: 'total',
            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;
+  color: @normal-color;
+  .search-item{
+    margin-right: 20px;
  }
+
  .label{
    color: @normal-color;
  }
+  button {
+    margin-left: 15px;
+  }
 }
 // 会议总数的样式
 .title-right-sub {