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

【add】- 完善制修订大屏

Browse Source
This commit is contained in:
fengchenchen
2022-12-02 15:53:47 +08:00
parent 6663208074
commit 56c3fd728e
13 changed files with 603 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screenApi/api.js
+34 -2
View File
@@ -12,16 +12,37 @@ const GetPreparationRevisionSC = (params) => getActionZxd( '/serviceInterface/ge
// 标准归口情况（各SC）- 各SC归口在研项目和标准数量
const GetCentralizedData = (params) => getActionZxd( '/serviceInterface/getDpData3', params)
/*历年计划下达情况-------开始*/
// 历年计划下达情况--（总体）逐年下达计划数量
const GetReleasePlanData = (params) => getActionZxd( '/serviceInterface/getDpData4_1', params)
// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
const GetReleasePlanSCData = (params) => getActionZxd( '/serviceInterface/getDpData4_2_1', params)
// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
const GetReleasePlanDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData4_2_2', params)
/*历年计划下达情况-------结束*/
/*历年标准发布情况-------开始*/
const GetReleaseStandardData = (params) => getActionZxd( '/serviceInterface/getDpData5_1', params)
// 历年计划下达情况--（各SC）逐年下达计划数量 --获取所有的SC值
const GetReleaseStandardSCData = (params) => getActionZxd( '/serviceInterface/getDpData5_2_1', params)
// 历年计划下达情况--（各SC）逐年下达计划数量 -- 通过SC查询
const GetReleaseStandardDataBySC = (params) => getActionZxd( '/serviceInterface/getDpData5_2_2', params)
/*历年标准发布情况-------结束*/
// 各SC超期情况统计
const GetOverdueData = (params) => getActionZxd( '/serviceInterface/getDpData7_ext', params)
// 各SC每年计划完成率 --各年应完成项目情况
const GetShouldBeCompletedProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_1', params)
// 各SC历年应完成项目情况
const GetCompletionProjectData = (params) => getActionZxd( '/serviceInterface/getDpData6_1_2', params)
// 第一起草单位贡献度排名
const GetEnterpriseContributionData = (params) => getActionZxd( '/serviceInterface/getDpData8', params)
export {
@@ -29,7 +50,18 @@ export {
GetPreparationRevisionSituation,
GetPreparationRevisionSC,
GetCentralizedData,
GetReleasePlanData,
GetReleasePlanSCData,
GetReleasePlanDataBySC,
GetReleaseStandardData,
GetReleaseStandardSCData,
GetReleaseStandardDataBySC,
GetOverdueData,
GetShouldBeCompletedProjectData,
GetCompletionProjectData
GetCompletionProjectData,
GetEnterpriseContributionData
}
src/screenApi/manage.js
+14
View File
@@ -11,4 +11,18 @@ export function getActionZxd(url, parameter) {
method: 'get',
params: parameter
})
}
export function getActionWP(url, parameter) {
return axios({
url: '/WPApi' + url,
method: 'get',
params: parameter
})
}
export function getActionISO(url, parameter) {
return axios({
url: '/ISOApi' + url,
method: 'get',
params: parameter
})
}
src/views/screen/HomePage.vue
+14 -1
View File
@@ -8,7 +8,7 @@
<!-- 来款-->
<template>
<div class="sub-title"><span>汽车标准化工作平台</span></div>
<!-- <income-payment-screen></income-payment-screen>-->
<income-payment-screen></income-payment-screen>
</template>
<!-- 制修订 -->
@@ -16,6 +16,18 @@
<div class="sub-title"><span>汽车标准制修订管理系统 </span></div>
<preparation-revision-screen></preparation-revision-screen>
</template>
<!-- 中国汽车国际法规工作平台-ISO-->
<template>
<div class="sub-title"><span>中国汽车国际标准工作平台-ISO</span></div>
<!-- <preparation-revision-screen></preparation-revision-screen>-->
</template>
<!-- 中国汽车国际法规工作平台-WP.29 -->
<template>
<div class="sub-title"><span>中国汽车国际法规工作平台-WP.29</span></div>
<!-- <w-p-screen></w-p-screen>-->
</template>
</div>
</template>
@@ -23,6 +35,7 @@
import IncomePaymentScreen from './incomePayments/index'
import PreparationRevisionScreen from './preparationRevision/index'
import WPScreen from './wp29/index'
export default {
name: 'HomePage',
src/views/screen/incomePayments/DepartmentTotalEcharts.vue
+14 -8
View File
@@ -29,6 +29,10 @@
</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="allMoney" slot-scope="text">
<a-tooltip>
<template slot="title">{{ formatMoney(text) }}</template>
@@ -145,16 +149,18 @@ export default {
{
title: '',
align: 'center',
width: 140,
width: 120,
dataIndex: 'indexName',
scopedSlots: {customRender: 'text'}
},
]
data.map((item, index) => {
this.columns.push({
title: item.name,
// title: item.name,
slots:{title: 'key' + index},
['key' + index]:item.name,
align: 'center',
width: index < 7 ? 190 : 120,
width: 130,
dataIndex: 'key' + index,
scopedSlots: {customRender: 'allMoney'}
},)
@@ -165,12 +171,12 @@ export default {
let xData = data.reduce((pre, val) => {
return pre.concat(val.name)
}, [])
xData = xData.slice(0,7)
xData = xData.filter(e => e !== '总数')
// 处理y轴数据
data.map((item,index) => {
if(index < 7){
this.echartsData.allMoney.push({value:item.allMoney,percent:item.value})
this.echartsData.confirmAmount.push({value:item.confirmAmount,percent:item.value})
data.map(item => {
if (item.name !== '总数') {
this.echartsData.allMoney.push({value: item.allMoney, percent: item.value})
this.echartsData.confirmAmount.push({value: item.confirmAmount, percent: item.value})
}
})
src/views/screen/preparationRevision/CompletionProjectChart.vue
+2 -2
View File
@@ -74,8 +74,8 @@ export default {
})
},
/*
* {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
* */
* {"应报批总数2":2,"完成率字符串":"0.00%","应报批总数":2,"完成率数值2":0.00,"完成率数值":0.00,"tm_code":"SC1","完成数":0,"完成率字符串2":"0.00%","完成数2":0}
* */
initSCData(arr) {
this.SCOptionData = []
arr.map(item => {
src/views/screen/preparationRevision/EnterpriseContributionChart.vue
+72 -1
View File
@@ -9,8 +9,79 @@
</template>
<script>
import { GetEnterpriseContributionData } from "../../../screenApi/api";
import { createBarChart } from "../util/BarOptions";
import * as echarts from "echarts";
export default {
name: 'EnterpriseContributionChart'
name: 'EnterpriseContributionChart',
data() {
return {
// 纵坐标分类的数据
categoryData: [],
barData: [[], []]
}
},
methods: {
getData() {
GetEnterpriseContributionData().then(res => {
if(res.success) {
this.initData(res.result || [])
this.$nextTick(() => {
this.initChart()
})
}
})
},
/*
* 初始化图表显示的数据 计划数量、标准数量
* {"unit":"中国汽车技术研究中心","planNum":4,"total":232,"stdNum":228}
* */
initData(arr) {
let barData = [[], []]
let categoryData = []
arr.map(item => {
categoryData.unshift(item.unit)
barData[0].unshift(item.planNum) // 计划数量
barData[1].unshift(item.stdNum) // 标准数量
})
this.barData = barData
this.categoryData = categoryData
},
initChart() {
let option = {
yAxis: {
data: this.categoryData
},
series: [
{
name:'计划数量',
type: 'bar',
stack: 'total',
barMaxWidth:20,
itemStyle:{
borderRadius:[0,0,0,0],
},
data: this.barData[0]
},
{
name:'标准数量',
type: 'bar',
stack: 'total',
barMaxWidth:20,
itemStyle:{
borderRadius:[0,4,4,0]
},
data: this.barData[1]
}
]
}
createBarChart('enterpriseContributionChart', option, true)
}
},
created() {
this.getData()
}
}
</script>
src/views/screen/preparationRevision/OverdueChart.vue
+2 -4
View File
@@ -9,9 +9,8 @@
</template>
<script>
import { GetOverdueData } from "../../../screenApi/api";
import { createBarChart } from "../util/BarOptions";
import * as echarts from 'echarts'
import { GetOverdueData } from '../../../screenApi/api'
import { createBarChart } from '../util/BarOptions'
export default {
name: 'OverdueChart',
@@ -79,7 +78,6 @@ export default {
// 获取xAxis data中的数据
let dataStr = ''
params.forEach(item => {
// console.log('--item--------', item)
let color = ''
if(typeof item.color === 'string') {
color = item.color
src/views/screen/preparationRevision/PreparationRevisionChart.vue
+1 -1
View File
@@ -9,7 +9,7 @@
:class="{'active': selectType === 2}"
v-model="selectValue"
style="width: 70px"
placeholder="SC"
placeholder="各SC"
:bordered="false"
show-search
:show-arrow="false"
src/views/screen/preparationRevision/ReleasePlanChart.vue
+146 -6
View File
@@ -9,7 +9,7 @@
:class="{'active': selectType === 2}"
v-model="selectValue"
style="width: 70px"
placeholder="SC"
placeholder="各SC"
:bordered="false"
show-search
:show-arrow="false"
@@ -33,6 +33,14 @@
</template>
<script>
import {
GetReleasePlanData,
GetReleasePlanDataBySC,
GetReleasePlanSCData
} from '../../../screenApi/api'
import { createBarAndLineChart } from '../util/BarAndLineOptions'
import * as echarts from 'echarts'
export default {
name: 'ReleasePlanChart',
data() {
@@ -40,6 +48,8 @@ export default {
selectType: 1, // 统计的维度 1-总体 2-SC下拉框
selectValue: undefined, // 选中的SC
SCOptionData: [],
yearData: [],
allData: [], // 总体请求的数据
}
},
methods: {
@@ -47,19 +57,149 @@ export default {
this.selectType = val
this.selectValue = undefined
// 操作数据
// this.initData(this.allData)
// this.initChart()
this.initData(this.allData)
this.initChart()
},
selectChange(val) {
if(val) {
this.selectType = 2
// 操作数据
// this.initData(this.SCData[val])
// this.initChart()
// 获取数据
this.getDataBySC(val)
} else {
this.selectType = 1
}
},
getYearData() {
let year = new Date().getFullYear()
let yearData = []
for(let i = year; i > year - 5; i--) {
yearData.unshift({value: i, label: i + '年'})
}
this.yearData = yearData
},
/*
* 初始化SC下拉框的数据
* {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
* */
initSCData(arr) {
this.SCOptionData = []
arr.map(item => {
this.SCOptionData.push(item.tm_code)
})
},
// 获取SC下拉框的数据
getOptionData() {
// 先通过接口获取所有的SC数据
GetReleasePlanSCData().then((res) => {
if (res.success) {
this.initSCData(res.result || [])
}
})
},
/*
* 初始化图表显示的数据--取5年的数据做展示
* {"gbNum":51,"year":2012,"num":110,"hbNum":59}
* */
initData(arr) {
this.yData = [[], []]
this.yearData.map(year => {
let item = arr.find(a => (a.year + '') === (year.value + ''))
console.log(item, '11111111111')
if(item) {
this.yData[0].push(item.gbNum) // 国家标准
this.yData[1].push(item.hbNum) // 行业标准
}
})
},
// 获取图表的数据-总体
getAllData() {
// 总体
GetReleasePlanData().then((res) => {
if (res.success) {
this.allData = res.result || []
// 默认显示全部
this.initData(this.allData)
this.$nextTick(() =>{
this.initChart()
})
}
})
},
// 获取图表的数据- SC
getDataBySC(scCode) {
GetReleasePlanDataBySC({scCode}).then((res) => {
if (res.success) {
this.initData(res.result || [])
this.$nextTick(() =>{
this.initChart()
})
}
})
},
initChart() {
let option = {
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#4471EF' // 0% 处的颜色
},
{
offset: 0.8, color: '#2D419A' // 100% 处的颜色
},
{
offset: 1, color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
'#6CFBCE'],
xAxis: { data: this.yearData },
series: [
{
name:'国家标准',
data: this.yData[0]
},
{
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: '#6CFBCE'
},
{
offset: 1,
color: '#1B2451'
}
])
},
data: this.yData[1],
}
]
}
console.log('------option------', option)
createBarAndLineChart('releasePlanChart', option)
}
},
created() {
this.selectType = 1
// 操作进5年的年份值
this.getYearData()
// 获取SC下拉框数据
this.getOptionData()
// 获取总体图表数据
this.getAllData()
}
}
</script>
src/views/screen/preparationRevision/ReleaseStandardChart.vue
+143 -6
View File
@@ -9,7 +9,7 @@
:class="{'active': selectType === 2}"
v-model="selectValue"
style="width: 70px"
placeholder="SC"
placeholder="各SC"
:bordered="false"
show-search
:show-arrow="false"
@@ -32,6 +32,14 @@
</template>
<script>
import {
GetReleaseStandardData,
GetReleaseStandardSCData,
GetReleaseStandardDataBySC
} from '../../../screenApi/api'
import { createBarAndLineChart } from '../util/BarAndLineOptions'
import * as echarts from 'echarts'
export default {
name: 'ReleaseStandardChart',
data() {
@@ -39,6 +47,7 @@ export default {
selectType: 1, // 统计的维度 1-总体 2-SC下拉框
selectValue: undefined, // 选中的SC
SCOptionData: [],
allData: [], // 总体请求的数据
}
},
methods: {
@@ -46,19 +55,147 @@ export default {
this.selectType = val
this.selectValue = undefined
// 操作数据
// this.initData(this.allData)
// this.initChart()
this.initData(this.allData)
this.initChart()
},
selectChange(val) {
if(val) {
this.selectType = 2
// 操作数据
// this.initData(this.SCData[val])
// this.initChart()
// 获取数据
this.getDataBySC(val)
} else {
this.selectType = 1
}
},
getYearData() {
let year = new Date().getFullYear()
let yearData = []
for(let i = year; i > year - 5; i--) {
yearData.unshift({value: i, label: i + '年'})
}
this.yearData = yearData
},
/*
* 初始化SC下拉框的数据
* {"gbNum":23,"num":82,"hbNum":59,"tm_code":"SC1"}
* */
initSCData(arr) {
this.SCOptionData = []
arr.map(item => {
this.SCOptionData.push(item.tm_code)
})
},
// 获取SC下拉框的数据
getOptionData() {
// 先通过接口获取所有的SC数据
GetReleaseStandardSCData().then((res) => {
if (res.success) {
this.initSCData(res.result || [])
}
})
},
/*
* 初始化图表显示的数据--取5年的数据做展示
* {"gbNum":51,"year":2012,"num":110,"hbNum":59}
* */
initData(arr) {
this.yData = [[], []]
this.yearData.map(year => {
let item = arr.find(a => (a.year + '') === (year.value + ''))
if(item) {
this.yData[0].push(item.gbNum) // 国家标准
this.yData[1].push(item.hbNum) // 行业标准
}
})
},
// 获取图表的数据-总体
getAllData() {
// 总体
GetReleaseStandardData().then((res) => {
if (res.success) {
this.allData = res.result || []
// 默认显示全部
this.initData(this.allData)
this.$nextTick(() =>{
this.initChart()
})
}
})
},
// 获取图表的数据- SC
getDataBySC(scCode) {
GetReleaseStandardDataBySC({scCode}).then((res) => {
if (res.success) {
this.initData(res.result || [])
this.$nextTick(() =>{
this.initChart()
})
}
})
},
initChart() {
let option = {
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#4471EF' // 0% 处的颜色
},
{
offset: 0.8, color: '#2D419A' // 100% 处的颜色
},
{
offset: 1, color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
'#6CFBCE'],
xAxis: { data: this.yearData },
series: [
{
name:'国家标准',
data: this.yData[0]
},
{
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: '#6CFBCE'
},
{
offset: 1,
color: '#1B2451'
}
])
},
data: this.yData[1],
}
]
}
createBarAndLineChart('releaseStandardChart', option)
}
},
created() {
this.selectType = 1
// 操作进5年的年份值
this.getYearData()
// 获取SC下拉框数据
this.getOptionData()
// 获取总体图表数据
this.getAllData()
}
}
</script>
src/views/screen/preparationRevision/ShouldBeCompletedProjectChart.vue
+1 -1
View File
@@ -7,7 +7,7 @@
class="active"
v-model="selectValue"
style="width: 70px"
placeholder="SC"
placeholder="各SC"
:bordered="false"
show-search
:show-arrow="false"
src/views/screen/util/BarAndLineOptions.js
+5 -2
View File
@@ -50,7 +50,6 @@ export const BarAndLineOptions = {
// 获取xAxis data中的数据
let dataStr = ''
params.forEach(item => {
console.log('--item--------', item)
let color = ''
if(typeof item.color === 'string') {
color = item.color
@@ -66,7 +65,11 @@ export const BarAndLineOptions = {
</div>
</div>`
} else {
let valueText = item.value === undefined ? '-' : `${item.value}%`
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>
src/views/screen/util/BarOptions.js
+155 -4
View File
@@ -2,7 +2,7 @@ import * as echarts from 'echarts'
import { formatMoney } from '../../../utils/formatMoney'
import { deepMerge } from '../../../utils/util'
// 正常的柱状图配置
export const BarOptions = {
// color: ['#4471EF', '#00D8F1', '#6CFBCE'],
color: [
@@ -135,7 +135,6 @@ export const BarOptions = {
}
return newParamsName
}
},
type: 'category',
boundaryGap: ['30%', '20%'],
@@ -170,12 +169,164 @@ export const BarOptions = {
}
}
// 生成柱状图
export function createBarChart(idName, option) {
// X轴是value的配置
export const BarAxisTransformOptions = {
color: [
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0, color: '#4471EF' // 0% 处的颜色
},
{
offset: 0.9, color: '#2D419A' // 100% 处的颜色
},
{
offset: 1, color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
'#69C4F3'
],
tooltip: {
trigger: 'axis',
formatter: params => {
// 获取xAxis data中的数据
let dataStr = ` <div style="color:#7599E8">${params[0].name}</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:#7599E8">${item.seriesName}</span>
<span style="color:#7599E8;">${item.value}</span>
</div>
</div>`
})
return dataStr
},
borderWidth: 0,
//提示框浮层的背景颜色
backgroundColor: '#233062',
//额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;'
},
legend: {
//图例的公用文本样式。
textStyle: {
color: '#7599E8'
},
itemWidth: 14,
right: '3%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#7599E8'
}
},
axisLabel: {
show: true,
color: '#7FA6FB',
interval: 0,
formatter: function(params) {
let newParamsName = '' // 最终拼接成的字符串
let paramsNameNumber = params.length // 实际标签的个数
let provideNumber = 10 // 每行能显示的字的个数
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
}
},
type: 'category',
boundaryGap: ['30%', '20%'],
// 刻度线设置
axisTick: {
show: false
},
// TODO 需要自己扩展的
data: []
},
xAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#7599E8'
}
},
axisLabel: {
show: true,
color: '#7FA6FB'
},
splitLine: {
lineStyle: {
color: '#7599E8',
type: 'dashed'
}
},
type: 'value',
nameTextStyle: {
color: '#7FA6FB'
}
}
}
/**
* 生成柱状图
* @param idName --- 当前dom的id
* @param option --- 配置项
* @param xValue --- 横坐标是否是value，默认不传
*/
export function createBarChart(idName, option, xValue) {
const chartDom = document.getElementById(idName)
echarts.dispose(chartDom)
// debugger
let chartOption = deepMerge({}, BarOptions, option)
if(xValue) {
chartOption = deepMerge({},BarAxisTransformOptions, option)
}
let myChart = echarts.init(chartDom)
chartOption && myChart.setOption(chartOption)
window.addEventListener('resize', () => {