【update】-ISO大屏功能的开发
This commit is contained in:
fengchenchen
@@ -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>
|
||||
Reference in New Issue
Block a user