443 lines
12 KiB
Vue
443 lines
12 KiB
Vue
<!--会议信息统计-->
|
||
<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 xDataName = data[0]? data[0].departNameCn : []
|
||
let yData = []
|
||
data.map(tt => {
|
||
yData.push(tt.data || [])
|
||
})
|
||
let tooltipTitle = this.getTooltipTitle()
|
||
let option = {
|
||
color: ['#97E3E0', '#069F99', '#18E0AB'],
|
||
tooltip: {
|
||
formatter: params => {
|
||
let index = params[0].dataIndex
|
||
const showLabelName = xDataName[index]
|
||
// 获取xAxis data中的数据
|
||
let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;">${tooltipTitle}</div>
|
||
<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${showLabelName}</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:'计划数量',
|
||
data: yData[0]
|
||
},
|
||
{
|
||
name:'实际数量',
|
||
barGap: '-100%',
|
||
data: yData[1]
|
||
},
|
||
{
|
||
name:'完成率',
|
||
type: 'line',
|
||
showSymbol: false,
|
||
symbol: 'emptyCircle',
|
||
// 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> |