LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fengchenchen
2023-05-23 15:41:22 +08:00
parent dbe4d00990
commit 49d468a32d
13 changed files with 541 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screenApi/api.js
+8 -1
View File
@@ -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
+37
View File
@@ -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
+24 -3
View File
@@ -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
+36
View File
@@ -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
+24 -3
View File
@@ -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
+26 -5
View File
@@ -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.selectChange(this.SCOptionData[0])
this.selectValue = this.SCOptionData[0].code
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
+26 -5
View File
@@ -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.selectChange(this.SCOptionData[0])
this.selectValue = this.SCOptionData[0].code
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
+73
View File
@@ -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
+20 -7
View File
@@ -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
+41 -51
View File
@@ -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 || []
if(data.length > 0) {
this.totalAll = data[0].total
}
let result = res.result || { }
this.totalAll = result.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) => {
return pre.concat({value: val.count, name: val.technicalField, total: val.total})
}, [])
const yData = data.count
const xAxisData = data.departNameCn
let option = {
legend: {
show: true,
type: 'scroll',
orient: 'vertical',
right: '-20px',
top: 'center',
itemGap: 10 // 图例之间的间距
show: false
},
grid: {
left: '0',
right: '0',
top : '20'
},
tooltip: {
formatter: (param) => {
let color = ''
if(typeof param.color === 'string') {
color = param.color
} else {
color = param.color.colorStops[0].color
}
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>`
},
formatter: params => {
// 获取xAxis data中的数据
let dataStr = ''
params.forEach(item => {
let color = ''
if(typeof item.color === 'string') {
color = item.color
} 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>`
})
return dataStr
}
},
xAxis: {
data: xAxisData
},
series: [
{
center: ['42%', '50%'],
// label: {
// formatter: '{hr|} {c}',
// rich: {
// hr: {
// backgroundColor: 'red',
// borderRadius: 50,
// width: 7,
// height: 7,
// }
//
// }
// },
data: echartsData
name: '',
type: 'bar',
barMaxWidth:20,
itemStyle:{
borderRadius:[4,4,0,0],
},
data: yData
}
]
}
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
+21 -7
View File
@@ -5,8 +5,8 @@
<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>
<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
+183 -48
View File
@@ -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 {
src/views/dashboard/screen/wp29/RegulationQuantityChart.vue
+22 -21
View File
@@ -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 => {
let color = ''
if(typeof item.color === 'string') {
color = item.color
} 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.seriesName}</span>
<span style="color:#333;">${item.value}</span>
</div>
</div>`
})
// params.forEach(item => {
// let color = ''
// if(typeof item.color === 'string') {
// color = item.color
// } 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.seriesName}</span>
// <span style="color:#333;">${item.value}</span>
// </div>
// </div>`
// })
return dataStr
}
},
@@ -138,8 +139,8 @@ export default {
<style scoped lang="less">
.regulation-box{
width: calc(60% - 10px);
margin-right: 10px;
//width: calc(60% - 10px);
//margin-right: 10px;
}
</style>