Skip to content

jml0128 / xrk-bi

Go to a project
Commit 1df2d0f2 by jml0128
Options

feat

1 parent 0d805885
Inline Side-by-side
Showing with 416 additions and 189 deletions
src/packages/bi/src/commonComponents/chart-block.vue
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-30 22:36:55
* @LastEditTime: 2021-07-01 13:28:14
-->
<template>
<div style="position:relative;" class="bi-chart-block">
......@@ -135,6 +135,7 @@ export default {
},
changeText(text) {
// 修改附加文字的内容
this.chartConfig['desc']['customText'] = text;
console.log(`${this.title.name}-用户自定义描述`, text);
},
toggleAxis() {
......
src/packages/bi/src/components/cover.vue
......@@ -6,14 +6,17 @@
<div class="bi-cover">
<div
class="bi-cover_bg"
:style="{ backgroundColor: coverList[coverIndex].background }"
:style="{
backgroundImage: `url(${chooseBackground.templatePicUrl})`,
backgroundSize: '100% 100%'
}"
>
<el-popover
:popper-class="isMobile ? 'mobile-popover' : ''"
placement="bottom"
trigger="click"
v-model="visibleCoverList"
v-if="!isPrint"
v-if="coverList.length > 0 && !isPrint"
>
<div class="bi-cover_popover">请选择封面</div>
<swiper class="bi-cover_swiper" :options="swiperOptions">
......@@ -28,9 +31,12 @@
<div
@click="localIndex = index"
class="bi-cover_item_img"
:style="{ background: item.background }"
:style="{
backgroundImage: `url(${item.templatePicUrl})`,
backgroundSize: '100% 100%'
}"
></div>
<div class="bi-cover_name">{{ item.name }}</div>
<div class="bi-cover_name">{{ item.templateName }}</div>
</swiper-slide>
</swiper>
<el-button
......@@ -101,6 +107,14 @@ export default {
coverContent: {
default: () => [],
type: Array
},
coverList: {
default: () => [],
type: Array
},
coverId: {
default: 0,
type: [Number, String]
}
},
data() {
......@@ -112,33 +126,24 @@ export default {
content: [],
coverIndex: 0,
localIndex: 0,
coverList: [
{
background: '#6C71FF',
name: '模板一'
},
{
background: '#1989FA',
name: '模板二'
},
{
background: '#3BCF9F',
name: '模板三'
},
{
background: '#FF846E',
name: '模板四'
}
],
drag: false
};
},
computed: {
chooseBackground() {
const a =
this.coverList.find(item => item.id == this.coverId) ||
this.coverList[0] ||
{};
return a;
}
},
methods: {
dealPos(dis) {
return dis * (this.isPrint ? printWidth : this.baseFontSize);
},
changeCover() {
this.coverIndex = this.localIndex;
this.$emit('change', this.coverList[this.localIndex].id);
this.visibleCoverList = false;
},
handleMouseDown(e, pos) {
......@@ -257,7 +262,11 @@ export default {
this.content = baseContent.map((item, index) => {
const { name, pos } = arr[index];
name && (item.name = name);
pos && (item.pos = pos);
try {
pos && (item.pos = JSON.parse(pos));
} catch (error) {
console.warn(error);
}
return item;
});
}
......@@ -268,27 +277,28 @@ export default {
if (Array.isArray(newV) && newV.length > 0) {
this.dealCoverContent(newV);
this.$nextTick(() => {
this.$refs['input'].forEach(item => {
item.addEventListener('paste', function(e) {
e.stopPropagation();
e.preventDefault();
var text = '',
event = e.originalEvent || e;
if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain');
} else if (
window.clipboardData &&
window.clipboardData.getData
) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
Array.isArray(this.$refs['input']) &&
this.$refs['input'].forEach(item => {
item.addEventListener('paste', function(e) {
e.stopPropagation();
e.preventDefault();
var text = '',
event = e.originalEvent || e;
if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain');
} else if (
window.clipboardData &&
window.clipboardData.getData
) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});
});
});
});
}
},
......
src/packages/bi/src/components/operate.vue
......@@ -13,11 +13,11 @@
<img src="../lib/svg/chexiao.svg" />
撤销删除
</div>
<div class="">
<div class="" @click="save">
<img src="../lib/svg/baocun.svg" />
保存
</div>
<div class="">
<div class="" @click="exportFn">
<img src="../lib/svg/daochu-tianchong.svg" />
导出
</div>
......@@ -56,8 +56,9 @@
</template>
<script>
import { check } from 'xrk-tools';
import mixin from '../mixin/index';
import { Dialog, Button, Checkbox, CheckboxGroup } from 'element-ui';
import { Dialog, Button, Checkbox, CheckboxGroup, Message } from 'element-ui';
export default {
name: 'bi-operate',
mixins: [mixin],
......@@ -71,6 +72,14 @@ export default {
questionData: {
type: Array,
default: () => []
},
saveInfo: {
type: Function,
default: () => {}
},
exportBi: {
type: Function,
default: () => {}
}
},
data() {
......@@ -86,6 +95,26 @@ export default {
item.isDelete = 0;
});
this.resetDeleteArr = [];
},
save() {
if (check.isFunction(this.saveInfo)) {
const loading = Message({
message: '保存中...请稍等',
duration: 0
});
this.saveInfo().then(() => {
loading.close();
Message({
message: '保存成功',
type: 'success'
});
});
}
},
exportFn() {
if (check.isFunction(this.exportBi)) {
this.exportBi();
}
}
}
};
......
src/packages/bi/src/main.vue
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-02-26 15:38:10
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-30 16:53:40
* @LastEditTime: 2021-07-01 14:30:15
-->
<template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
......@@ -52,6 +52,18 @@ export default {
getGroupInfo: {
type: Function,
default: () => {}
},
saveInfo: {
type: Function,
default: () => {}
},
exportBi: {
type: Function,
default: () => {}
},
getTemplateList: {
type: Function,
default: () => {}
}
},
components: {
......
src/packages/bi/src/mock/index.js
......@@ -191,7 +191,8 @@ export const chartConfig = () => {
text: znResultSystem,
customText: znResultUser,
resText: '总结可知：不同年龄患者的发病状态无显著性差异。'
}
},
baseInfo: { ...options }
};
},
create: (xLength, yLength, type = 1, options = {}) => {
......
src/packages/bi/src/project/20-configurable.vue
......@@ -4,7 +4,13 @@
-->
<template>
<div class="bi-configurable">
<BiCover :coverContent="coverContent"></BiCover>
<BiCover
:coverContent="coverContent"
ref="cover"
:coverList="coverList"
:coverId="coverId"
@change="id => (coverId = id)"
></BiCover>
<BiCatalogue class="bi-block" :catalogueArr="catalogueArr"></BiCatalogue>
<BiOverview
class="bi-block"
......@@ -42,6 +48,8 @@
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
<BiOperate
:questionData="[...singleChoice, ...singleChoiceMixin]"
:saveInfo="saveInfo"
:exportBi="exportBi"
></BiOperate>
</div>
</template>
......@@ -66,14 +74,14 @@ import { chartConfig } from '../mock/index';
import { date, base } from 'xrk-tools';
const ChartConfigFn = chartConfig();
const dealAxis = arr => {
const dealAxis = (arr = []) => {
return arr.map(item => ({
x: item.genderType || item.xTopicName || '-',
y: item.yTopicName,
value: item.num || item.countNum || 0
}));
};
const dealLegends = arr => {
const dealLegends = (arr = []) => {
const total = arr.reduce((pre, cur) => {
return pre + (cur.num || cur.countNum || 0);
}, 0);
......@@ -89,10 +97,35 @@ const dealLegends = arr => {
return pre;
}, []);
};
const randomType = arr => {
const randomType = (arr = []) => {
return arr[Math.ceil(Math.random() * arr.length)] || arr[0];
};
const chartConfigToSetInfo = chartConfigs => {
return chartConfigs.map((item, index) => {
const { baseInfo, desc, analysisDesc, analysis, isDelete, chart } = item;
const { id, type } = baseInfo;
const { customText = '', setShow } = desc;
return {
groupDetailId: id,
topicDetailId: id,
fixedId: id,
type: type,
chartType: +chart.type,
colourGroup: Array.isArray(chart.colors)
? chart.colors.join(',')
: chart.colors,
showSort: +index + 1,
isDelete: isDelete,
resultUser: customText,
znResultUser: analysisDesc.customText,
resultIsShow: setShow ? 1 : 0,
znResultIsShow: analysisDesc.setShow ? 1 : 0,
znTableIsShow: analysis.setShow ? 1 : 0
};
});
};
export default {
name: 'bi-configurable',
mixins: [mixin, project],
......@@ -114,23 +147,13 @@ export default {
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
coverId: 0,
coverContent: [],
questionInfo: [
{
name: '总参与题目',
value: '20',
unit: '条'
},
{
name: '总参与数',
desc: '(人或者机构)',
value: '2000',
unit: '人'
}
],
coverList: [],
projectName: '',
baseInfo: [],
textData: []
textData: [],
biInfo: {}
};
},
computed: {
......@@ -199,9 +222,12 @@ export default {
dealPos(dis) {
return dis * (this.isPrint ? printWidth : this.baseFontSize);
},
setData() {},
dealBaseInfo(info) {
const {
id,
coverTemplateId, // 模板ID
styleConfigureId, // 配置ID
title,
titlePosition,
aspEnterpriseNameWrite,
......@@ -210,7 +236,8 @@ export default {
styleConfigureSettlementTimePosition,
projectName = '-',
aspEnterpriseName,
sendEnterpriseName = '-',
aspEnterpriseName = '-',
settlementTime,
taskSum,
executePeopleNumber,
......@@ -223,7 +250,13 @@ export default {
isContrainGroupAnalyse,
isContrainSingleAnalyse
} = info;
this.projectName = `${projectName}统计报表`;
this.biInfo = {
biInfoId: id,
styleConfigureId
};
this.coverId = coverTemplateId;
const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
this.projectName = `${projectName}${biCreateDt}服务报告`;
this.coverContent = [
{
name: title,
......@@ -245,36 +278,40 @@ export default {
value: projectName
},
{
name: '服务商',
value: aspEnterpriseName
name: '发起方',
value: sendEnterpriseName
},
{
name: '提交时间',
value: settlementTime
name: '服务商',
value: aspEnterpriseName
}
],
[
{
name: '任务量',
name: '提交时间',
value: settlementTime
},
{
name: '任务数量',
value: taskSum
},
{
name: '项目执行人数',
value: `${executePeopleNumber}人`
},
{
name: '数据收集',
value: `${dataCollectNumber}条`
}
],
[
{
name: '参与调研人数',
name: '数据收集数',
value: `${dataCollectNumber}条`
},
{
name: '参与调研样本',
value: `${examinePeopleNumber}人`
},
{
name: '报表生成时间',
value: date.dateFormat(createDt, 'Y-M-D')
value: biCreateDt
}
]
];
......@@ -308,11 +345,12 @@ export default {
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}, group3 = {}] = infoArr;
this.missionData = [
ChartConfigFn.createConfig(dealAxis(infoArr[0].fixedCountInfos), {
...infoArr[0],
chartType: infoArr[0].chartType || 12,
legends: dealLegends(infoArr[0].fixedCountInfos),
ChartConfigFn.createConfig(dealAxis(group1.fixedCountInfos), {
...group1,
chartType: group1.chartType || 12,
legends: dealLegends(group1.fixedCountInfos),
blockTitle: '参与任务执行的性别分布',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
......@@ -322,10 +360,10 @@ export default {
disableTypes: [3, 4],
extendTypes: [12]
}),
ChartConfigFn.createConfig(dealAxis(infoArr[1].fixedCountInfos), {
...infoArr[1],
chartType: infoArr[1].chartType || 1,
legends: dealLegends(infoArr[1].fixedCountInfos),
ChartConfigFn.createConfig(dealAxis(group2.fixedCountInfos), {
...group2,
chartType: group2.chartType || 1,
legends: dealLegends(group2.fixedCountInfos),
blockTitle: '执行任务的年龄段',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
......@@ -340,10 +378,10 @@ export default {
hideChart: true,
hideTitle: true
}),
ChartConfigFn.createConfig(dealAxis(infoArr[2].fixedCountInfos), {
...infoArr[2],
chartType: infoArr[1].chartType || 2,
legends: dealLegends(infoArr[2].fixedCountInfos),
ChartConfigFn.createConfig(dealAxis(group3.fixedCountInfos), {
...group3,
chartType: group3.chartType || 2,
legends: dealLegends(group3.fixedCountInfos),
blockTitle: '项目参与人完成任务区间分布',
legendName: '总参与项目执行人数${num}人',
hideDelete: true,
......@@ -353,41 +391,86 @@ export default {
];
},
dealChoice(arr) {
this.singleChoice = arr.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
blockTitle: item.topicTitle,
chartType: item.chartType || randomType([1, 2, 5, 6, 9, 10, 11]),
disableTypes: [3, 4]
this.singleChoice = arr
.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
blockTitle: item.topicTitle,
chartType: item.chartType || randomType([1, 2, 5, 6, 9, 10, 11]),
disableTypes: [3, 4]
});
})
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
});
},
dealChoiceMixin(arr) {
this.singleChoiceMixin = arr.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
xAxisName: item.title,
yAxisName: item.secondTitle,
isGroup: true,
blockTitle: `${item.title}与${item.secondTitle}`,
chartType: item.chartType || randomType([1, 2, 3, 4, 5, 6, 9, 10, 11])
this.singleChoiceMixin = arr
.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
xAxisName: item.title,
yAxisName: item.secondTitle,
isGroup: true,
blockTitle: `${item.title}与${item.secondTitle}`,
chartType:
item.chartType || randomType([1, 2, 3, 4, 5, 6, 9, 10, 11])
});
})
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
},
saveInfo() {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
return this.Bi.saveInfo({
biInfoId: biInfoId,
commandType: 2,
biStyleConfigureInfo: {
aspEnterpriseNameWrite: content[2].name || '', //乙方封面名称
aspNamePosition: JSON.stringify(content[2].pos), //乙方封面名称位置
styleConfigId: styleConfigureId, //封面配置ID
coverTemplateId: this.coverId, //封面ID
settlementTime: content[1].name || '', //封面时间
settlementTimePosition: JSON.stringify(content[1].pos), //封面时间位置
title: content[0].name || '', //封面标题
titlePosition: JSON.stringify(content[0].pos) //标题位置
},
makeSceneFixedDetailInfos: chartConfigToSetInfo(this.missionData),
makeSceneStyleConfigureTopicDetailInfos: chartConfigToSetInfo(
this.singleChoice
),
makeSceneGroupDetails: chartConfigToSetInfo(this.singleChoiceMixin)
});
},
exportBi() {
this.Bi.exportBi({
commandType: 1,
type: 1
});
}
},
created() {
this.setData();
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo(),
this.Bi.getGroupInfo()
]).then(([baseInfo, fixedInfo, topicInfo, topicMixinInfo]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.data.data || []);
this.dealChoiceMixin(topicMixinInfo.data.data || []);
});
this.Bi.getGroupInfo(),
this.Bi.getTemplateList()
]).then(
([baseInfo, fixedInfo, topicInfo, topicMixinInfo, tempaletList]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.data.data || []);
this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || [];
}
);
window.status = 'completed';
}
......
src/packages/bi/src/project/6-zone.vue
......@@ -4,12 +4,18 @@
-->
<template>
<div class="bi-zone">
<BiCover></BiCover>
<BiCover
:coverContent="coverContent"
ref="cover"
:coverList="coverList"
:coverId="coverId"
@change="id => (coverId = id)"
></BiCover>
<BiCatalogue class="bi-block" :catalogueArr="catalogueArr"></BiCatalogue>
<BiOverview
class="bi-block"
name="数据报告信息"
title="奇正藏药医学沙龙推广项目数据报告2021-04-28期"
:title="projectName"
:data="baseInfo"
></BiOverview>
<BiMission
......@@ -49,6 +55,8 @@
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
<BiOperate
:questionData="[...singleChoice, ...singleChoiceMixin]"
:saveInfo="saveInfo"
:exportBi="exportBi"
></BiOperate>
</div>
</template>
......@@ -72,6 +80,8 @@ import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date, base } from 'xrk-tools';
export default {
name: 'bi-zone',
mixins: [mixin, project],
......@@ -91,79 +101,15 @@ export default {
page2: 0,
page2Info: [],
page3Info: [],
coverId: 0,
coverContent: [],
coverList: [],
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
questionInfo: [
{
name: '专区内容：',
value: '20'
},
{
name: '本期有效点击量：',
value: '2000'
},
{
name: '总执行数(人或者机构)：',
value: '2000'
}
],
baseInfo: [
[
{
name: '发起方',
value: '在山西地区的零售药店巡店项目'
},
{
name: '服务商',
value: '北京医洋科技有限公司'
},
{
name: '任务时间',
value: '24天'
}
],
[
{
name: '任务开始时间',
value: '2021-04-02'
},
{
name: '任务结算时间',
value: '2021-04-02'
},
{
name: '报表生成时间',
value: '2020-10-2'
}
],
[
{
name: '本期个人数据数',
value: '213123'
},
{
name: '累计个人数据总数',
value: '2020-10-2'
}
]
],
textData: [
[
{
name: '专区内容：',
value: '20题'
},
{
name: '总执行数(人或者机构)：',
value: '11111'
},
{
name: '本期有效点击量：',
value: '20000人次'
}
]
]
projectName: '',
baseInfo: [],
textData: []
};
},
computed: {
......@@ -308,10 +254,155 @@ export default {
}),
ChartConfigFn.create(4, 0, 1, { hideDelete: true, height: 400 })
];
},
dealBaseInfo(info) {
const {
id,
coverTemplateId, // 模板ID
styleConfigureId, // 配置ID
title,
titlePosition,
aspEnterpriseNameWrite,
aspNamePosition,
styleConfigureSettlementTime,
styleConfigureSettlementTimePosition,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
settlementTime,
taskSum,
executePeopleNumber,
dataCollectNumber,
examinePeopleNumber,
createDt,
totalTopicNum,
chooseTopicNum,
isContrainGroupAnalyse,
isContrainSingleAnalyse
} = info;
this.biInfo = {
biInfoId: id,
styleConfigureId
};
this.coverId = coverTemplateId;
const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
this.projectName = `${projectName}${biCreateDt}服务报告`;
this.coverContent = [
{
name: title,
pos: titlePosition
},
{
name: styleConfigureSettlementTime,
pos: styleConfigureSettlementTimePosition
},
{
name: aspEnterpriseNameWrite,
pos: aspNamePosition
}
];
this.baseInfo = [
[
{
name: '发起方',
value: '在山西地区的零售药店巡店项目'
},
{
name: '服务商',
value: '北京医洋科技有限公司'
},
{
name: '任务时间',
value: '24天'
}
],
[
{
name: '任务开始时间',
value: '2021-04-02'
},
{
name: '任务结算时间',
value: '2021-04-02'
},
{
name: '报表生成时间',
value: '2020-10-2'
}
],
[
{
name: '本期个人数据数',
value: '213123'
},
{
name: '累计个人数据总数',
value: '2020-10-2'
}
]
];
this.textData = [
[
{
name: '专区内容：',
value: '20题'
},
{
name: '总执行数(人或者机构)：',
value: '11111'
},
{
name: '本期有效点击量：',
value: '20000人次'
}
]
];
},
saveInfo() {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
return this.Bi.saveInfo({
biInfoId: biInfoId,
commandType: 2,
biStyleConfigureInfo: {
aspEnterpriseNameWrite: content[2].name || '', //乙方封面名称
aspNamePosition: JSON.stringify(content[2].pos), //乙方封面名称位置
styleConfigId: styleConfigureId, //封面配置ID
coverTemplateId: this.coverId, //封面ID
settlementTime: content[1].name || '', //封面时间
settlementTimePosition: JSON.stringify(content[1].pos), //封面时间位置
title: content[0].name || '', //封面标题
titlePosition: JSON.stringify(content[0].pos) //标题位置
},
makeSceneFixedDetailInfos: chartConfigToSetInfo(this.missionData),
makeSceneStyleConfigureTopicDetailInfos: chartConfigToSetInfo(
this.singleChoice
),
makeSceneGroupDetails: chartConfigToSetInfo(this.singleChoiceMixin)
});
},
exportBi() {
this.Bi.exportBi({
commandType: 1,
type: 1
});
}
},
created() {
this.setData();
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo(),
this.Bi.getGroupInfo(),
this.Bi.getTemplateList()
]).then(([baseInfo, tempaletList]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.coverList = tempaletList.data.data || [];
});
window.status = 'completed';
}
};
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!