【update】-ISO大屏功能的开发

2023-05-24 10:19:22 +08:00
parent 49d468a32d
commit 2e505d1e8c
8 changed files with 696 additions and 241 deletions
@@ -55,7 +55,6 @@ const GetExpertQuantityData = (params) => getActionWP('/expertinfo/bzsExpertInfo
 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--------结束 **********/
@@ -67,10 +66,17 @@ const GetMeetingInformationDataByDepart = (params) => getActionWP('/meetinginfo/
 const GetLeadingStandardData = (params) => getActionISO('/standard/bzsProjectStandard/screenStandardstats', params)
 // 国际会议统计
 const GetISOMeetingCalendarData = (params) => getActionISO('/mainpage/bzsmainpage/getScreenMeetingInfoCalendar', params)
-// 国际专家统计
-const GetExpertChartData = (params) => getActionISO('/expertinfo/bzsExpertInfo/queryScreenExpertInfo', params)
 // 获取技术领域的下拉框数据
 const GetTechnicalFieldData = (params) => getActionISO('/expertinfo/bzsExpertInfo/getQuerySelect', params)
+// ISO-会议信息统计-技术领域
+const GetISOMeetingInformationData = (params) => getActionISO('/mainpage/bzsmainpage/queryMeetingInfoFieldScreen', params)
+// ISO-会议信息统计-部门
+const GetISOMeetingInformationDataByDepart = (params) => getActionISO('/mainpage/bzsmainpage/queryMeetingInfoDepartScreen', params)
+
+// 国际专家统计
+const GetExpertChartData = (params) => getActionISO('/expertinfo/bzsExpertInfo/queryScreenExpertInfo', params)
+// 国际专家统计-右上角的数据
+const GetExpertStatisticData = (params) => getActionISO('/expertinfo/bzsExpertInfo/getRightInfo', params)

 /******ISO--------结束 **********/

@@ -101,7 +107,10 @@ export {

  GetLeadingStandardData,
  GetISOMeetingCalendarData,
+  GetTechnicalFieldData,
+  GetISOMeetingInformationData,
+  GetISOMeetingInformationDataByDepart,
  GetExpertChartData,
-  GetTechnicalFieldData
+  GetExpertStatisticData

 }
@@ -6,48 +6,22 @@
      <span>国际专家统计</span>

      <div class="title-right-sub">
-        <span>专家总数：</span>
-        <span class="num">{{totalAll}}</span>
+        <span>TC22覆盖率：</span>
+        <span class="num">{{expertStatisticInfo.rate}}</span>
+        <span class="split-span">专家新增总数：</span>
+        <span class="num">{{expertStatisticInfo.number}}</span>
      </div>
-    </div>
-    <div class="select-info-box">
-
    </div>
    <div class="panel-content">
-      <div class="search-select-box">
-        <!--@change="fieldSelectChange"-->
-        <span>技术领域：</span>
-        <a-select
-          class="right-select active"
-          style='width: 300px'
-          v-model="searchParams.field"
-          mode="multiple"
-          placeholder="请选择技术领域"
-          :bordered="false"
-          :maxTagCount="1"
-          show-search
-          :filter-option="filterOption"
-          dropdown-class-name="ant-select-screen-new"
-        >
-          <a-select-option
-            v-for="(item, index) in fieldOptionData"
-            :key="index + item.orgCode"
-            :value="item.orgCode"
-          >
-            {{item.departName}}
-          </a-select-option>
-        </a-select>
-        <a-button type="primary" icon="search" @click="fieldSelectChange">查询</a-button>
-        <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
-      </div>
      <div class="echarts-box " id="isoExpertChart"></div>
    </div>
  </div>
 </template>

 <script>
-import { GetExpertChartData, GetTechnicalFieldData } from '@/screenApi/api'
-import { createLineChart } from '../util/LineOptions'
+import { GetExpertChartData, GetExpertStatisticData } from '@/screenApi/api'
+import * as echarts from 'echarts'
+import { createBarAndLineChart } from '../util/BarAndLineOptions'

 export default {
  name: 'ExpertChart',
@@ -55,6 +29,10 @@ export default {
    return {
      searchParams: {},
      totalAll: '',
+      expertStatisticInfo: {
+        rate: '', // 覆盖率
+        number: '' // 总数
+      },
      fieldOptionData: [], // 技术领域的下拉框数据
    }
  },
@@ -76,43 +54,128 @@ export default {

    },
    /**
-     * count: 112
-     leftDate: ["第一季度", "第二季度", "第三季度", "第四季度"]
-     resultMapList: []
-     0: {orgName: "国际注册专家", count: ["89", "102", "108", "111"]}
-     1: {orgName: "国内支撑专家", count: ["0", "1", "1", "1"]}
+     0: {xAxis: ['请补充技术领域TC22的中文名称'], data: ["0"],  "name": "专家数量", "type": "bar"}
+     1: {xAxis: ['请补充技术领域TC22的中文名称'], data: ["0"],  "name": "覆盖率", "type": "line"}
     * @param data
     */
    initChart(data) {
-      let xData = data.leftDate
-      let echartsData = data.resultMapList || []
-      let totalAll = echartsData.reduce((pre, val) => {
-        // 取最后一个季度的数据算出总数
-        let innerNum = val.count[val.count.length - 1]
-        return Number(pre) + Number(innerNum)
-      }, 0)
-      this.totalAll = totalAll
+      let xData = data[0].xAxis
+      let tooltipTitle = new Date().getFullYear() + '年'
      let option = {
+        color: ['#069F99', '#18E0AB'],
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              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
+          }
+        },
        xAxis: {
+          axisLabel: {
+            formatter: function(params) {
+              let newParamsName = '' // 最终拼接成的字符串
+              let paramsNameNumber = params.length // 实际标签的个数
+              let provideNumber = 6 // 每行能显示的字的个数
+              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
+            }
+          },
          data: xData,
        },
        series: [
          {
-            data: echartsData[0].count
+            name:'数量',
+            data: data[0].data
          },
          {
-            data: echartsData[1].count
+            name:'覆盖率',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'emptyCircle',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 224, 171, 0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(24, 224, 171, 0.1)'
+                }
+              ])
+            },
+            data: data[1].data
          }
        ]
      }
-      createLineChart('isoExpertChart', option, true)
+      createBarAndLineChart('isoExpertChart', option)

    },
-    getOptionData() {
-      /*{departName: "SAG", orgCode: "A01A01"}*/
-      GetTechnicalFieldData().then(res => {
+    getStatisticData() {
+      /*TC22的覆盖率为76.47%/2023年新增专家总数：11*/
+      GetExpertStatisticData().then(res => {
        if(res.success) {
-          this.fieldOptionData = res.result.departList || []
+          let str = res.result || ''
+          let arr = str.split('/')
+          let rateArr = arr[0].split('TC22的覆盖率为')
+          let numArr = arr[1].split('新增专家总数：')
+          this.expertStatisticInfo.rate = rateArr[1]
+          this.expertStatisticInfo.number = numArr[1]
        }
      })
    },
@@ -134,7 +197,7 @@ export default {
  },
  created() {
    this.getData()
-    this.getOptionData()
+    this.getStatisticData()
  }
 }
 </script>
@@ -156,6 +219,9 @@ export default {
    font-size: 20px;
    color: #FA9D81;
  }
+  span.split-span {
+    margin-left: 30px;
+  }
 }

 .panel-content{
@@ -1,193 +1,92 @@
 <!--中国牵头标准信息统计-->
 <template>
-  <div class="panel-box full-box iso-full-table">
+  <div class="panel-box full-box">
    <div class="panel-title">
      <img src="../../.././../assets/screenNew/icon_title.png" alt="">
      <span>中国牵头标准信息统计</span>
    </div>
    <div class="panel-content">
-        <a-table
-          ref="table"
-          size="middle"
-          bordered
-          rowKey="projectId"
-          :columns="columns"
-          :dataSource="dataSource"
-          :pagination="ipagination"
-          :loading="loading"
-          :scroll="{x: 1200, y: 540}"
-          @change="handleTableChange"
-          class="j-table-force-nowrap main-table iso-table">
-
-          <template slot="text" slot-scope="text">
-            <a-tooltip>
-              <template slot="title">{{ text }}</template>
-              <div class="table-text">{{ text }}</div>
-            </a-tooltip>
-          </template>
-
-          <span v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
-           <j-ellipsis :length="7" :value=" item[item.dataIndex] "></j-ellipsis>
-          </span>
-          <template slot="standard-name" slot-scope="text, record">
-            <a-tooltip>
-              <template slot="title">
-                <div>{{ record.standardNameChinese }}</div>
-                <div>{{ record.standardNameEnglish }}</div>
-              </template>
-              <div class="name-div-inner">
-                <div class="">{{ record.standardNameChinese }}</div>
-                <div class="">{{ record.standardNameEnglish }}</div>
-              </div>
-            </a-tooltip>
-
-          </template>
-        </a-table>
-
+      <div class="echarts-box " id="LeadingStandardChart"></div>
    </div>
  </div>
 </template>

 <script>
 import { GetLeadingStandardData } from '@/screenApi/api'
+import { createBarChart } from '../util/BarOptions'

-const defaultSorter = {
-  column: 'createTime',
-  order: 'desc'
-}

 export default {
  name: 'LeadingStandardChart',
  data() {
    return {
-      columns: [
-        {
-          title: '序号',
-          dataIndex: 'rowIndex',
-          width: 70,
-          align: 'center',
-          customRender: function(t, r, index) {
-            return parseInt(index) + 1
-          }
-        },
-        {
-          title: '标准号',
-          align: 'center',
-          dataIndex: 'standardNumber',
-          width: '200px',
-          scopedSlots: {customRender: 'text'},
-        },
-        {
-          title: '标准名称',
-          align: 'center',
-          width: '500px',
-          dataIndex: 'standardName',
-          scopedSlots: { customRender: 'standard-name' }
-        },
-        {
-          title: '技术领域',
-          align: 'center',
-          dataIndex: 'technosphere',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          title: '牵头单位',
-          align: 'center',
-          dataIndex: 'unit',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          title: '目前状态',
-          align: 'center',
-          dataIndex: 'stageDescribe',
-          scopedSlots: { customRender: 'text' }
-        }
-      ],
-      dataSource: [],
-      /* 分页参数 */
-      ipagination: {
-        current: 1,
-        pageSize: 5,
-        pageSizeOptions: ['5', '10'],
-        showTotal: (total, range) => {
-          return range[0] + '-' + range[1] + ' 共' + total + '条'
-        },
-        showQuickJumper: true,
-        showSizeChanger: false,
-        total: 0
-      },
-      /* 排序参数 */
-      isorter: {
-        column: 'createTime',
-        order: 'desc'
-      },
-      /* table加载状态 */
-      loading: false
+
    }
  },
  methods: {
-    getData(arg) {
-      if (arg === 1) {
-        this.ipagination.current = 1
-      }
-      let param = Object.assign({}, this.isorter)
-      param.pageNo = this.ipagination.current
-      param.pageSize = this.ipagination.pageSize
-      this.loading = true
-      GetLeadingStandardData(param).then((res) => {
+    getData() {
+      GetLeadingStandardData().then((res) => {
        if (res.success) {
-          this.dataSource = res.result.records || res.result
-          if (res.result.total) {
-            this.ipagination.total = res.result.total
-          } else {
-            this.ipagination.total = 0
-          }
-          this.operateData(this.dataSource)
-        }
-        if (res.code === 510) {
+          let result = res.result || {}
+          // this.dataSource = res.result.records || res.result
+          // this.operateData(this.dataSource)
+          this.$nextTick(() => {
+            this.initChart(result)
+          })
+        } else if (res.code === 510) {
          this.$message.warning(res.message)
        }
-        this.loading = false
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    // 操作表格中的数据
-    operateData(data) {
-      data.map(tt => {
-        tt.technosphere = `${tt.technosphereSc_dictText || ''}  ${tt.technosphereWg_dictText || ''}`
-        tt.standardNumber = `ISO ${tt.standardNumber}`
-        if(tt.standardYear) {
-          tt.standardNumber = `${tt.standardNumber}：${tt.standardYear}`
-        }
-        if(tt.supplement) {
-          tt.standardNumber = `${tt.standardNumber} / ${tt.supplement}`
-        }
-        // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标评价标准评价标准十个'
-        // tt.standardNameEnglish = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
-        // tt.standardNameChinese = '评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个评价标准评价标准十个'
-      })
-    },
-    handleTableChange(pagination, filters, sorter) {
-      //分页、排序、筛选变化时触发
-      if (Object.keys(sorter).length > 0) {
-        this.isorter.column = sorter.field
-        if (sorter.order) {
-          //   如果当前有列选中筛选条件
-          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
-        } else {
-          //   没有筛选值则 isorter 重置为初始值
-          this.isorter.column = defaultSorter.column
-          this.isorter.order = defaultSorter.order
-        }

-      } else {
-        this.isorter.column = defaultSorter.column
-        this.isorter.order = defaultSorter.order
+      })
+    },
+    /**
+     * 初始化图表
+     * @param result = {data: [数组数据]， xAxis : [], projectName: [所有的项目信息] }
+     */
+    initChart(result) {
+      let xData = result.xAxis
+      let yData = result.data
+      let projectName = result.projectName || []
+      let option = {
+        legend: {
+          show: false
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach((seriesItem) => {
+              let toolIndex = seriesItem.dataIndex
+              let mapData = projectName[toolIndex]
+              dataStr += `   <div style="margin: 0 8px;"><span style="color:#333">${seriesItem.name}</span></div>`
+              mapData.forEach(item => {
+                dataStr += `<div style="margin: 0 8px;"><span style="color:#666">${item}</span></div>`
+              })
+            })
+            return dataStr
+          },
+        },
+        grid: {
+          left: '0',
+          top : '20'
+        },
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name:'项目详情',
+            type: 'bar',
+            barMaxWidth:20,
+            itemStyle:{
+              borderRadius:[4,4,0,0]
+            },
+            data: yData
+          }
+        ]
      }
-      this.ipagination = pagination
-      this.getData()
-    }
+      createBarChart('LeadingStandardChart', option)
+    },
  },
  created() {
    this.getData()
@@ -1,12 +1,12 @@
 <!--iso-国际会议统计-->
 <template>
-  <div class="panel-box full-box">
+  <div class="panel-box full-box calendar-panel-box">
    <div class="panel-title">
      <img src="../../.././../assets/screenNew/icon_meeting.png" alt="">
      <span>国际会议统计</span>
      <div class='header-num'>
-        <span>会议总数：</span>
-        <span class='num'>{{this.scheduleList.length}}</span>
+        <span>当月会议总数：</span>
+        <span class='num'>{{this.scheduleList.length > 0 ? this.scheduleList[0].total : 0}}</span>
      </div>

    </div>
@@ -81,10 +81,10 @@ export default {
    }
  },
  methods: {
-    getData() {
+    getData(cutTime) {
      let query = {
        // orgCode: this.orgCode,
-        // cutTime: ''
+        cutTime: cutTime
      }
      GetISOMeetingCalendarData(query).then((res) => {
        if (res.success) {
@@ -97,14 +97,22 @@ export default {
    },
    prev() {
      this.calendarApi.prev()
-      let currentDate = new Date(this.calendarApi.currentData.currentDate)
-      this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
+      this.opeTimeToGetData()
    },
    // 切换下一个按钮事件
    next() {
      this.calendarApi.next()
+      this.opeTimeToGetData()
+    },
+    // 通过日历显示的时间操作time 数据，获取当月会议数量
+    opeTimeToGetData() {
      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() {
@@ -198,7 +206,11 @@ 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)
  },
 }
 </script>
@@ -0,0 +1,448 @@
+<!--会议信息统计-->
+<template>
+  <div class="panel-box meeting-wp-panel-box full-box">
+    <div class="panel-title">
+      <img src="../../.././../assets/screenNew/icon_meetingWp.png" alt="">
+      <span>会议信息统计</span>
+      <ul class="panel-title-right">
+        <li
+          v-for="item in statisticTypeOptionData"
+          :key="item.value"
+          :class="{'active': statisticType === item.value}"
+          @click="statisticTypeSelectChange(item)"
+        >{{ item.text }}</li>
+      </ul>
+    </div>
+    <div class="panel-content">
+      <div class="select-info-box">
+        <div class="search-item">
+          <span class="label">年份：</span>
+          <j-year-date
+            format="YYYY"
+            :allowClear="false"
+            placeholder="请选择年份"
+            v-model="searchParams.year"
+            @change="onYearChange"
+          ></j-year-date>
+        </div>
+        <div class="search-item">
+          <span class="label">季度：</span>
+          <a-select
+            class="right-select active"
+            v-model="searchParams.quarter"
+            placeholder="季度"
+            style="width: 180px"
+            show-search
+            allow-clear
+            @change="quarterSelectChange"
+          >
+            <a-select-option
+              v-for="(item, index) in quarterOptionData"
+              :key="index"
+              :value="item.text"
+            >
+              {{item.text}}
+            </a-select-option>
+          </a-select>
+        </div>
+        <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 @click="searchReset" class="reset-button">重置</a-button>
+      </div>
+      <div class="echarts-box " id="meetingInformationISOChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetISOMeetingInformationData, GetISOMeetingInformationDataByDepart } 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: 'MeetingInformationISOChart',
+  components: {
+    JYearDate
+  },
+  data() {
+    return {
+      totalAll: '', // 会议总数
+      dimensionValue: 'year', // 查询维度  默认是’year‘
+      // 右上角统计类型的数据
+      statisticTypeOptionData: [
+        {text: '部门', value: '1'},
+        {text: '技术领域', value: '2'}
+      ],
+      statisticType: '1', // 统计维度
+      quarterOptionData: [
+        {text: '第一季度', value: '1'},
+        {text: '第二季度', value: '2'},
+        {text: '第三季度', value: '3'},
+        {text: '第四季度', value: '4'},
+      ],
+      // 查询条件
+      searchParams:{},
+      currentDateObj: {
+        year: '',
+        month: '',
+        quarter: ''
+      }
+    }
+  },
+  methods: {
+    disabledMonthDate(current) {
+      let currentYear = moment(this.searchParams.year).format('YYYY')
+      return current && current.format('YYYY') !== currentYear
+    },
+    getCurrentData() {
+    //  获取当前年份、月份和季度
+      let data = new Date()
+      let year = data.getFullYear()
+      let month = data.getMonth() + 1
+      this.currentDateObj.year = year
+      this.currentDateObj.month = month
+      switch (true) {
+        case (month < 4) :
+          this.currentDateObj.quarter = '第一季度'
+          break
+        case (month < 7) :
+          this.currentDateObj.quarter = '第二季度'
+          break
+        case (month < 10) :
+          this.currentDateObj.quarter = '第三季度'
+          break
+        case (month <= 12) :
+          this.currentDateObj.quarter = '第四季度'
+          break
+        default:
+          break
+      }
+    },
+    // 右上角 部门和技术领域统计维度切换的方法
+    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()
+    },
+    quarterSelectChange(val) {
+      this.searchParams.month = undefined
+      if(!val) {
+        this.dimensionValue = 'year'
+      } else {
+        this.dimensionValue = 'quarter'
+      }
+      this.$forceUpdate()
+      this.getData()
+    },
+    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 = {
+        flag: this.dimensionValue,
+      }
+      if(this.dimensionValue === 'year') {
+        params.createTime = this.searchParams.year
+      } else if(this.dimensionValue === 'month') {
+        params.createTime = this.searchParams.month
+      } else if(this.dimensionValue === 'quarter') {
+        params.createTime = this.searchParams.quarter
+        params.year = this.searchParams.year
+      }
+      return params
+    },
+    getData() {
+      let params = this.getQueryParams()
+      let func = this.statisticType === '1' ? GetISOMeetingInformationDataByDepart : GetISOMeetingInformationData
+      func(params).then(res => {
+        if(res.success) {
+          let data = (res.result || {}).data || []
+          // this.totalAll = data.total
+          this.$nextTick(() => {
+            this.initChart(data)
+          })
+        }
+      })
+    },
+    /**
+     * 初始化图表
+     * @param data = [{data: [数组数据]， name: '实际数量', stack: 'stack', type: 'bar', xAxis : []},{}, {}]
+     */
+    initChart(data) {
+      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
+        },
+        grid: {
+          top: '40px'
+        },
+        tooltip: {
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            params.forEach(item => {
+              let color = ''
+              if(typeof item.color === 'string') {
+                color = item.color
+              } else {
+                color = item.color.colorStops[0].color
+              }
+              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
+          }
+        },
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            name:'计划数量',
+            stack: 'total',
+            itemStyle:{
+              borderRadius:[0,0,0,0],
+            },
+            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, 0.5)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(24, 224, 171, 0.1)'
+                }
+              ])
+            },
+            data: yData[2],
+          }
+        ]
+      }
+      createBarAndLineChart('meetingInformationISOChart', 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() {
+      this.dimensionValue = 'year'
+      this.searchParams = {
+        year: this.currentDateObj.year + ''
+      }
+    }
+  },
+  created() {
+    this.getCurrentData()
+    //初始化数据
+    this.initData()
+    this.getData()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@white: #fff;
+@normal-color: #5C5C5A;
+@primary: #069F99;
+
+.select-info-box{
+  display: flex;
+  align-items: center;
+  color: @normal-color;
+  .search-item{
+    margin-right: 35px;
+  }
+
+  .label{
+    color: @normal-color;
+  }
+  button {
+    border: 1px solid @primary;
+    color: @primary;
+  }
+}
+// 会议总数的样式
+.title-right-sub {
+  text-align: right;
+  margin-top: 5px;
+  span {
+    font-size: 16px;
+    color: #050525;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  span.num {
+    font-size: 20px;
+    color: #FA9D81;
+  }
+}
+
+
+// 标题右侧的样式
+.panel-title-right {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  right: 32px;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 100;
+  font-size: 0;
+
+  li {
+    font-size: 16px;
+    list-style: none;
+    color: @normal-color;
+    cursor: pointer;
+    padding: 0 10px;
+    margin-left: 20px;
+  }
+
+  li.active {
+    color: @primary-color;
+    position: relative;
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 100%;
+      height: 2px;
+      background-color: @primary-color;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+
+.panel-box{
+  height: auto;
+}
+.meeting-wp-panel-box{
+  margin-bottom: 10px;
+  height: 530px!important;
+  .panel-content{
+    display: flex;
+    flex-direction: column;
+    .echarts-box{
+      flex: 1;
+      width: 100%;
+    }
+  }
+}
+
+
+</style>
@@ -4,6 +4,8 @@
    <leading-standard-chart></leading-standard-chart>
    <!-- 国际会议统计-->
    <meeting-calendar></meeting-calendar>
+    <!-- 会议信息统计-->
+    <meeting-information-chart></meeting-information-chart>
    <!-- 国际专家统计-->
    <expert-chart></expert-chart>
  </div>
@@ -15,6 +17,9 @@ import LeadingStandardChart from './LeadingStandardChart'

 // //国际会议统计
 import MeetingCalendar from './MeetingCalendar'
+//会议信息统计 MeetingInformationChart
+import MeetingInformationChart from './MeetingInformationChart'
+
 // //国际专家统计
 import ExpertChart from './ExpertChart'

@@ -26,6 +31,8 @@ export default {
    LeadingStandardChart,
    // 国际会议统计
    MeetingCalendar,
+    // 会议信息统计
+    MeetingInformationChart,
    // 国际专家统计
    ExpertChart
  }
@@ -38,4 +45,19 @@ export default {
  flex-direction: row;
  flex-wrap: wrap;
 }
+
+@general-height: 480px;
+.panel-box:not(.calendar-panel-box){
+  height: @general-height;
+  display: flex;
+  flex-direction: column;
+  // 内容的部分
+  /deep/ .panel-content {
+    flex: 1;
+    .echarts-box {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>
@@ -109,17 +109,15 @@ export default {
    },
    prev() {
      this.calendarApi.prev()
-      let currentDate = new Date(this.calendarApi.currentData.currentDate)
-      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)
+      this.opeTimeToGetData()
    },
    // 切换下一个按钮事件
    next() {
      this.calendarApi.next()
+      this.opeTimeToGetData()
+    },
+    // 通过日历显示的时间操作time 数据，获取当月会议数量
+    opeTimeToGetData() {
      let currentDate = new Date(this.calendarApi.currentData.currentDate)
      const year = currentDate.getFullYear()
      const month = currentDate.getMonth() + 1
@@ -64,7 +64,7 @@
          </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>
+        <a-button @click="searchReset" class="reset-button">重置</a-button>
      </div>
      <div class="echarts-box " id="meetingInformationChart"></div>
    </div>
@@ -324,7 +324,7 @@ export default {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
-                  color: 'rgba(24, 224, 171, 1)'
+                  color: 'rgba(24, 224, 171, 0.5)'
                },
                {
                  offset: 1,
@@ -384,14 +384,15 @@ export default {
  align-items: center;
  color: @normal-color;
  .search-item{
-    margin-right: 20px;
+    margin-right: 35px;
  }

  .label{
    color: @normal-color;
  }
  button {
-    margin-left: 15px;
+    border: 1px solid @primary;
+    color: @primary;
  }
 }
 // 会议总数的样式