diff --git a/src/views/pages/report/statement/statement-data-edit.vue b/src/views/pages/report/statement/statement-data-edit.vue index 7968af94f9bbc0dbb4ca37d903e75535e5f5fab8..515bc5be3caf062bb03fac6bff9900bd05bdbbf7 100644 --- a/src/views/pages/report/statement/statement-data-edit.vue +++ b/src/views/pages/report/statement/statement-data-edit.vue @@ -102,9 +102,13 @@ {{ $t('term.report.datatype.binddynamicdata') }} -
- -
+
+ -
+
{{ $t('page.filtercondition') }} @@ -149,6 +153,7 @@ export default { name: '', components: { TsForm: () => import('@/resources/plugins/TsForm/TsForm'), + TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'), TsFormRadio: () => import('@/resources/plugins/TsForm/TsFormRadio'), TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput'), TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect'), diff --git a/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue index 8b07cf8fa4fac401e1d6ee84b3fe66d1f576bcd3..929abe9d728314505cd3055fe84098c3ed15e0f8 100644 --- a/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue +++ b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue @@ -15,19 +15,104 @@ >
- -
- + +
+ + + {{ item.progressName }} + + + + + +
+ + + + + +
+ + 状态 + 字体颜色 + 背景颜色 + + + + + + + + + + + + + + + +
@@ -36,19 +121,112 @@ export default { name: '', components: { - TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem') + TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'), + TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput') }, props: { config: { type: Object } }, data() { return { + progressStatusList: [{ + progressName: '未开始', + progressValue: 'pending', + progressColor: '#fff' + }, { + progressName: '进行中', + progressValue: 'running', + progressColor: '#2d8cf0' + }, + { + progressName: '已完成', + progressValue: 'completed', + progressColor: '#19be6b' + }], + statusColorList: [ + // { + // name: 'saved', + // label: '待提交', + // color: '#f2f4f5' + // }, + // { + // name: 'pending', + // label: '待处理', + // color: '#8c8c8c' + // }, + // { + // name: 'waiting', + // label: '排队中', + // color: '#ffba5a' + // }, + // { + // name: 'running', + // label: '运行中', + // color: '#1690ff' + // }, + // { + // name: 'pausing', + // label: '暂停中', + // color: '#ffba5a' + // }, + // { + // name: 'paused', + // label: '已暂停', + // color: '#ffba5a' + // }, + // { + // name: 'aborting', + // label: '中止中', + // color: '#ffba5a' + // }, + // { + // name: 'aborted', + // label: '已中止', + // color: '#ffba5a' + // }, + // { + // name: 'completed', + // label: '已完成', + // color: '#25b864' + // }, + // { + // name: 'failed', + // label: '已失败', + // color: '#f33b3b' + // }, + // { + // name: 'ready', + // label: '已就绪', + // color: '#8c8c8c' + // }, + // { + // name: 'waitting', + // label: '待输入', + // color: '#8c8c8c' + // }, + // { + // name: 'checked', + // label: '已验证', + // color: '#25b864' + // }, + // { + // name: 'revoked', + // label: '已撤销', + // color: '#ffba5a' + // } + + ] }; }, beforeCreate() {}, created() {}, beforeMount() {}, - mounted() {}, + mounted() { + if (this.config.statusColorList && this.config.statusColorList.length) { + this.statusColorList = this.config.statusColorList; + } + this.handleProgressStatusList(); + }, beforeUpdate() {}, updated() {}, activated() {}, @@ -56,10 +234,29 @@ export default { beforeDestroy() {}, destroyed() {}, methods: { + handleProgressStatusList() { + const { progressStatusList = [] } = this.config || {}; + if (this.$utils.isEmpty(progressStatusList)) { + this.setConfigValue('progressStatusList', this.progressList); + } else { + this.progressStatusList = progressStatusList; + } + }, setConfigValue(attrName, attrValue) { if (attrName) { this.$emit('setConfig', attrName, attrValue); } + }, + addStatusColor() { + this.statusColorList.push({ + name: '', + color: null, + bgColor: null + }); + }, + removeStatusColor(index) { + this.statusColorList.splice(index, 1); + this.setConfigValue('statusColorList', this.statusColorList); } }, filter: {}, diff --git a/src/views/pages/report/statement/widgets/define/autoexec.js b/src/views/pages/report/statement/widgets/define/autoexec.js index 39d2594d0344971b9cf23699f11756982cab58ce..a94997d29fc22acf9c22b033cc6c71b1e7633ff2 100644 --- a/src/views/pages/report/statement/widgets/define/autoexec.js +++ b/src/views/pages/report/statement/widgets/define/autoexec.js @@ -11,6 +11,18 @@ export default { height: 300, padding: 5, needData: true, - dataTypes: [{ value: 'dynamic', text: $t('term.report.datatype.dynamicdata') }], - config: { backgroundColor: '', backgroundImage: '', fontsize: 13, color: '' } + dataTypes: [{ value: 'dynamic', text: $t('term.report.datatype.dynamicdata') }], + fields: [ + { name: 'jobPhaseName', label: '阶段名称', type: 'text', isRequired: true }, + { name: 'jobPhaseStatus', label: '阶段状态', type: 'text', isRequired: true }, + { name: 'progress', label: '阶段进度', type: ['text', 'number'], isRequired: true, description: '进度说明：1代表已完成，0代表未完成' }, + { name: 'jobGroupSort', label: '阶段组', type: ['text', 'number'], isRequired: true } + ], + config: { + backgroundColor: '', + backgroundImage: '', + fontsize: 13, + color: '', + arrowcolor: '' + } }; diff --git a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue index da85b3332e33c961e97573aa3ac7c02e869d802c..3ef4d1c6cb0a7fd9d0e757ed05f4ad2eef18f55e 100644 --- a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue +++ b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue @@ -7,6 +7,7 @@ v-if="isReady" :percent="percentData" :stroke-width="strokeWidth" + :stroke-color="getStrokeColor(percentData)" status="active" text-inside />
@@ -18,7 +19,7 @@ 开始 - +
-
+
{{ litem.jobPhaseName }}
- +
-
+
结束
-
- - - 未开始 - - - - 进行中 - - - - 已终止 - - - - 失败 - - - - 成功 +
+ + + {{ item.name }}
@@ -83,31 +68,27 @@ export default { return { isFirst: true, isReady: true, - statusMapClass: { - pending: 'pending', - completed: 'success border-color-success text-success', //成功 - running: 'running border-color-info text-info', //运行中 - failed: 'failed border-color-error text-error', //失败 - aborted: 'aborted border-color-warning text-warning' //中止 - }, dataList: [], stepList: [ - {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'completed'}, - {jobPhaseName: '步骤二', jobGroupSort: 0, jobPhaseStatus: 'completed'}, - {jobPhaseName: '步骤三', jobGroupSort: 0, jobPhaseStatus: 'completed'}, - {jobPhaseName: '步骤四', jobGroupSort: 0, jobPhaseStatus: 'completed'}, - {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'completed'}, - {jobPhaseName: '步骤二', jobGroupSort: 1, jobPhaseStatus: 'failed'}, - {jobPhaseName: '步骤三', jobGroupSort: 1, jobPhaseStatus: 'running'} + {jobPhaseName: '阶段1', jobGroupSort: '11111', jobPhaseStatus: 'completed', progress: 1}, + {jobPhaseName: '阶段2', jobGroupSort: '11111', jobPhaseStatus: 'completed', progress: 1}, + {jobPhaseName: '阶段3', jobGroupSort: '22222', jobPhaseStatus: 'completed', progress: 1}, + {jobPhaseName: '阶段4', jobGroupSort: '22222', jobPhaseStatus: 'completed', progress: 1}, + {jobPhaseName: '阶段5', jobGroupSort: '22222', jobPhaseStatus: 'running', progress: 0}, + {jobPhaseName: '阶段6', jobGroupSort: '33333', jobPhaseStatus: 'failed', progress: 0}, + {jobPhaseName: '阶段7', jobGroupSort: '44444', jobPhaseStatus: 'running', progress: 0} ], - percentData: 0 + percentData: 0, + statusColorList: [] }; }, beforeCreate() {}, created() {}, beforeMount() {}, mounted() { - + if (this.widget?.config.statusColorList && this.widget?.config.statusColorList.length) { + this.statusColorList = this.widget?.config.statusColorList; + } }, beforeUpdate() {}, updated() {}, @@ -141,22 +122,17 @@ export default { }, getStepList(stepList) { let list = []; + let listMap = {}; if (stepList.length) { - let groupSortList = stepList.filter(l => !this.$utils.isEmpty(l.jobGroupSort)); - if (groupSortList && groupSortList.length) { - for (let sort = 0, index = 0; index < groupSortList.length;) { - let arr = []; - groupSortList.filter(l => { - if (l.jobGroupSort == sort) { - arr.push(l); - index++; - return true; - } - }); - sort++; - arr.length && list.push(arr); + stepList.forEach(item => { + if (!listMap[item.jobGroupSort]) { + listMap[item.jobGroupSort] = []; } - } + listMap[item.jobGroupSort].push(item); + }); + Object.keys(listMap).forEach(key => { + list.push(listMap[key]); + }); } return list; }, @@ -177,7 +153,7 @@ export default { if (list && list.length) { let i = 0; list.forEach(item => { - if (['checked', 'success', 'completed'].includes(item.jobPhaseStatus)) { + if (item.progress == 1) { i += 1; } }); @@ -185,7 +161,7 @@ export default { this.percentData = 100; } else { let num = i / list.length; - this.percentData = num.toFixed(2) * 100; + this.percentData = Number((num.toFixed(2) * 100).toFixed(2)); } } } @@ -199,19 +175,39 @@ export default { }; }, strokeWidth() { - return this.widget && this.widget.config && this.widget.config.fontsize ? this.widget.config.fontsize - 3 : 10; + const { fontsize } = this?.widget?.config || {}; + return fontsize < 18 ? 18 : fontsize; }, - getStatusClassName() { + getStatusStyle() { return (jobPhaseStatus) => { - let className = this.statusMapClass[jobPhaseStatus] || ''; - if (jobPhaseStatus && !className) { - if (['pausing', 'paused', 'aborting', 'waitInput'].includes(jobPhaseStatus)) { - className = this.statusMapClass['aborted']; - } else if (['checked', 'success'].includes(jobPhaseStatus)) { - className = this.statusMapClass['completed']; + let status = this.statusColorList.find(l => l.name === jobPhaseStatus); + let style = {}; + if (status) { + style['color'] = status.color || ''; + if (status.color) { + style['color'] = status.color || ''; + style['border-color'] = status.borderColor || ''; + } + if (status.bgColor) { + style['background-color'] = status.bgColor || ''; } } - return className; + return style; + }; + }, + getStrokeColor() { + return (percentData) => { + const { progressStatusList = [] } = this?.widget?.config || {}; + let status = ''; + if (percentData === 100) { + status = 'completed'; + } else if (percentData > 0) { + status = 'running'; + } else { + status = 'pending'; + } + const findProgressItem = progressStatusList.find(v => v.progressValue === status); + return findProgressItem && findProgressItem.progressColor; }; } }, @@ -228,6 +224,9 @@ export default { };