Skip to content

jml0128 / xrk-bi

Go to a project
Commit ffeada69 by jml0128
Options

feat:增加数字问卷bi

1 parent e7e4d9f8
Inline Side-by-side
Showing with 726 additions and 11 deletions
package.json
{
"name": "xrk-bi",
"version": "0.2.0",
"version": "0.2.1",
"description": "xrk-bi",
"author": "xrk",
"main": "dist/bundler.js",
......@@ -32,7 +32,6 @@
},
"devDependencies": {
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/composition-api": "^1.0.0-rc.11",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-core": "^6.26.0",
......
src/packages/bi/src/chart-type/types.js
......@@ -119,5 +119,12 @@ export default {
sort: 1,
icon: '',
create: createMapScatter
},
// 表格
15: {
name: 'article',
cnName: '图文',
sort: 1,
icon: 'http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/biaoge.svg'
}
};
src/packages/bi/src/commonComponents/article.vue 0 → 100644
<!--
* @Description:
* @Date: 2022-04-20 15:31:47
-->
<!--
* @Description: file content
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-04-20 15:50:05
-->
<template>
<div>
<BiBlank height="40" :usePrint="true"></BiBlank>
<div v-html="content"></div>
<BiBlank height="40" :usePrint="true"></BiBlank>
</div>
</template>
<script>
import BiBlank from './blank.vue';
export default {
name: 'bi-sex-icon',
components: { BiBlank },
props: {
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
}
},
data() {
return {
option: {}
};
},
created() {}
};
</script>
<style lang="scss" scoped>
.bi-sex-icon {
text-align: center;
padding-top: 110px;
height: 350px;
&_item {
display: inline-block;
margin: 0 45px;
p {
margin-top: 15px;
}
}
}
</style>
src/packages/bi/src/commonComponents/chart-base.vue
......@@ -93,13 +93,14 @@ export default {
this.myChart = init(document.getElementById(this.uuid));
}
const { option, myChart } = this;
const maxLength = option.series[0].data.length;
const cloneArr = [...option.series[0].data];
const f = (option.series || [])[0] || { data: [] };
const maxLength = f.data.length;
const cloneArr = [...f.data];
if (maxLength > 200) {
const setData = (_myChart, startIndex) => {
const endIndex = startIndex + 200;
if (startIndex == 0) {
option.series[0].data = cloneArr.slice(startIndex, endIndex);
f.data = cloneArr.slice(startIndex, endIndex);
_myChart.setOption(option);
} else {
_myChart.appendData({
......
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-07-28 21:17:43
* @LastEditTime: 2022-04-20 15:36:43
-->
<template>
<div style="position:relative;" class="bi-chart-block">
......@@ -44,6 +44,7 @@
}"
></BiTable>
<BiSexIcon v-else-if="chart.type == 12" v-bind="chart"></BiSexIcon>
<BiArticle v-else-if="chart.type == 15" v-bind="baseInfo"></BiArticle>
<BiChart :showGuide="showGuide" v-else v-bind="chart"></BiChart>
</template>
<BiChartLegend
......@@ -78,6 +79,7 @@ import BiTable from './table.vue';
import BiSexIcon from './sex-icon.vue';
import BiChartLegend from './chart-legend.vue';
import BiChartDesc from './chart-desc.vue';
import BiArticle from './article.vue';
import BiChartChoiceMinxinToggleAxis from './chart-choice-mixin-toggle-axis.vue';
import BiChartChoiceMinxinAnalysis from './chart-choice-mixin-analysis.vue';
......@@ -89,6 +91,7 @@ export default {
BiChart,
BiTable,
BiSexIcon,
BiArticle,
BiChartDesc,
BiChartLegend,
BiChartChoiceMinxinToggleAxis,
......@@ -108,6 +111,9 @@ export default {
analysisDesc() {
return this.chartConfig.analysisDesc || {};
},
baseInfo() {
return this.chartConfig.baseInfo || {};
},
chart() {
return this.chartConfig.chart || {};
},
......
src/packages/bi/src/commonComponents/chart.vue
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-28 21:34:18
* @LastEditTime: 2022-04-20 13:35:29
-->
<template>
<div :style="{ height: `${(cHeight + 80) * zoom}px`, zoom: 1 / zoom }">
......
src/packages/bi/src/components/singleChoice.vue
......@@ -15,6 +15,7 @@
<div ref="print-area">
<div
class="print-item"
:class="item.className"
v-for="(item, index) in scaleDomsInfo.items"
:key="index"
:style="{
......@@ -133,6 +134,7 @@ export default {
type: Array,
default: () => []
},
printInfo: Boolean,
pageWrap: Boolean,
disabled: Boolean
},
......@@ -247,10 +249,17 @@ export default {
return Math.min(baseHeight / height, 1);
};
const newDom = (this.$refs['bi-single-choice_item'] || []).reduce(
(pre, cur) => {
(pre, cur, index) => {
const { $el } = cur;
const { offsetHeight } = $el;
const domUsePage = parseInt(offsetHeight / (baseHeight * baseScale));
if (this.printInfo) {
console.log(topDom, cur);
}
let className = 'print-item';
if (index == 0 && cur.chart.type == 15) {
className = 'print-item nowarp';
}
if (pre.height + offsetHeight < baseHeight * baseScale) {
// 当前dom高度加上历史高度 小于 A4纸高度的1.15倍
if (pre.height === 0) {
......@@ -271,6 +280,7 @@ export default {
pre.totalPage += Math.max(domUsePage, 1);
pre.height = offsetHeight;
pre.items.push({
className,
allHeight: offsetHeight,
scale: domUsePage === 0 ? cScale(offsetHeight) : 1,
chartConfigs: [cur.chartConfig]
......@@ -299,6 +309,9 @@ export default {
catalogueInfoArr: []
}
);
if (this.printInfo) {
console.log(newDom);
}
this.scaleDomsInfo = newDom;
this.$emit('page', {
pageSize: newDom.totalPage,
......@@ -329,6 +342,18 @@ export default {
}
};
</script>
<style lang="scss">
.print-item {
&.nowarp {
.bi-chart-block {
background: #fff;
& > div {
page-break-inside: inherit;
}
}
}
}
</style>
<style lang="scss" scoped>
.print-item {
......@@ -339,6 +364,9 @@ export default {
// page-break-before: auto;
// page-break-inside: avoid;
// }
&.nowarp {
page-break-before: inherit;
}
}
.bi-single-choice {
// page-break-before: always;
......
src/packages/bi/src/components/singleChoiceInfo.vue
......@@ -73,6 +73,8 @@ export default {
&.one {
padding-left: 60px;
padding-top: 23px;
text-align: center;
padding-left: 130px;
& > div {
width: inherit;
& + div {
......
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-09-08 15:00:42
* @LastEditTime: 2022-04-20 13:26:04
-->
<template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
......@@ -18,6 +18,9 @@
<BiZoneMobile v-if="mobile"></BiZoneMobile>
<BiZone v-else></BiZone>
</template>
<template v-if="projectType == 21">
<BiDigitalQuestionnaire></BiDigitalQuestionnaire>
</template>
<template v-if="projectType == 2" name="otc拜访">
<BiOtc></BiOtc>
</template>
......@@ -39,6 +42,7 @@ import BiZoneMobile from './project/6-zone-mobile.vue';
import BiOtc from './project/2-otc.vue';
import BiJcyl from './project/10-jcyl.vue';
import BiGradeHospital from './project/9-gradeHospital.vue';
import BiDigitalQuestionnaire from './project/21-digitalQuestionnaire.vue';
export default {
name: 'XrkBi',
......@@ -91,7 +95,8 @@ export default {
BiZoneMobile,
BiOtc,
BiJcyl,
BiGradeHospital
BiGradeHospital,
BiDigitalQuestionnaire
},
methods: {
setFontSize() {
......
src/packages/bi/src/project/21-digitalQuestionnaire.vue 0 → 100644
<!--
* @Description:
* @Date: 2022-04-20 13:24:40
-->
<!--
* @Description:
* @Date: 2021-06-17 20:27:04
-->
<template>
<div class="bi-zone">
<BiCover
:coverContent="coverContent"
ref="cover"
:coverList="coverList"
:coverId="coverId"
:coverUrl="coverUrl"
@change="
({ id, templatePicUrl }) => {
coverId = id;
coverUrl = templatePicUrl;
}
"
></BiCover>
<BiCatalogue class="bi-block" :catalogueArr="catalogueArr"></BiCatalogue>
<BiOverview
class="bi-block"
name="数据报告信息"
:title="projectName"
:data="baseInfo"
></BiOverview>
<BiMission
class="bi-block"
name="项目执行人数据统计"
:data="missionData"
@page="setPage(arguments, 'page1')"
></BiMission>
<BiSingleChoice
v-if="showSingleChoiceHistory.length > 0"
class="bi-block no-border"
:textData="textDataHistory"
:singleChoice="showSingleChoiceHistory"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoiceHistory)"
@page="setPage(arguments, 'page2', 'page2Info')"
>
<BiSingleChoiceInfo
index="3"
name="专区浏览效果评价 - 历史数据分析"
:info="textDataHistory"
></BiSingleChoiceInfo>
</BiSingleChoice>
<BiSingleChoice
v-if="showSingleChoice.length > 0"
class="bi-block no-border"
:textData="textData"
:singleChoice="showSingleChoice"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
@page="setPage(arguments, 'page4', 'page4Info')"
>
<BiSingleChoiceInfo
index="4"
name="本次专区反馈效果评价"
:info="textData"
></BiSingleChoiceInfo>
</BiSingleChoice>
<BiSingleChoice
v-if="showSingleChoiceMixin.length > 0"
style="margin-top:25px;"
class="bi-block no-border"
name="专区内容效果评价"
:singleChoice="showSingleChoiceMixin"
:pageWrap="true"
@sort="sort(arguments, 'singleChoiceMixin', hideSingleChoiceMixin)"
@page="setPage(arguments, 'page3', 'page3Info')"
>
<BiSingleChoiceInfo
index="5"
name="专区内容效果评价"
></BiSingleChoiceInfo>
</BiSingleChoice>
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
<BiOperate
:questionData="[...singleChoice, ...singleChoiceMixin]"
:saveInfo="saveInfo"
:exportBi="exportBi"
></BiOperate>
</div>
</template>
<script>
import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
import BiCover from '../components/cover.vue';
import BiCatalogue from '../components/catalogue.vue';
import BiOverview from '../components/overview.vue';
import BiMission from '../components/mission.vue';
import BiSingleChoice from '../components/singleChoice.vue';
import BiCoverEnd from '../components/cover-end.vue';
import BiOperate from '../components/operate.vue';
import mixin from '../mixin/index';
/**
* dealSingleChoice、sort、setPage
*/
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date, check } from '../chart-type/common';
import {
dealAxis,
dealLegends,
randomType,
chartConfigToSetInfo
} from './tools';
export default {
name: 'bi-zone',
mixins: [mixin, project],
components: {
BiSingleChoiceInfo,
BiCover,
BiCatalogue,
BiOverview,
BiMission,
BiSingleChoice,
BiCoverEnd,
BiOperate
},
data() {
return {
page1: 0,
page2: 0,
page2Info: [],
page3Info: [],
coverId: 0,
coverUrl: '',
coverContent: [],
coverList: [],
singleChoice: [],
singleChoiceHistory: [],
singleChoiceMixin: [],
missionData: [],
projectName: '',
baseInfo: [],
textData: [],
textDataHistory: [],
biInfo: {}
};
},
computed: {
catalogueArr() {
const {
page1 = 0,
page2 = 0,
page4 = 0,
page2Info = [],
page3Info = [],
page4Info = []
} = this;
return [
{
name: '项目总览',
child: [
{
name: '项目总览',
page: 1
}
]
},
{
name: '项目执行任务模块',
child: [
// {
// name: '任务量分析',
// page: 2
// },
{
name: '执行任务人员画像',
page: 1
},
{
name: '项目参与人完成任务区间分布',
page: 1
}
]
},
{
name: '专区浏览效果评价 - 历史数据分析',
child: [
...page2Info
.filter(item => item.name)
.map(item => {
return {
...item,
page: item.page + page1
};
})
]
},
{
name: '本次专区反馈效果评价',
child: [
...page4Info
.filter(item => item.name)
.map(item => {
return {
...item,
page: item.page + page1 + page2
};
})
]
},
{
name: '专区内容效果评价',
child: [
...page3Info
.filter(item => item.name)
.map(item => {
return {
...item,
page: item.page + page1 + page2 + page4
};
})
]
}
];
},
showSingleChoiceHistory() {
return this.dealSingleChoice(this.singleChoiceHistory);
},
hideSingleChoiceHistory() {
return this.dealSingleChoice(this.singleChoiceHistory, true);
},
showSingleChoice() {
return this.dealSingleChoice(this.singleChoice);
},
hideSingleChoice() {
return this.dealSingleChoice(this.singleChoice, true);
},
showSingleChoiceMixin() {
return this.dealSingleChoice(this.singleChoiceMixin);
},
hideSingleChoiceMixin() {
return this.singleChoiceMixin.filter(item => item.isDelete == 1);
}
},
methods: {
dealBaseInfo(info) {
const {
biInfoId,
coverTemplateId, // 模板ID
coverTemplateUrl = '',
styleConfigureId, // 配置ID
title,
titlePosition,
aspEnterpriseNameWrite,
aspNamePosition,
settlementTime,
settlementTimePosition,
dataCollectNumber,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
taskEndTime,
taskSum,
executePeopleNumber,
createDt,
nameShowType //1：正常显示甲乙方 2：隐藏发起方，原"服务商"改为"项目方" 3：隐藏发起方
} = info;
this.biInfo = {
biInfoId: biInfoId,
styleConfigureId
};
this.coverId = coverTemplateId;
this.coverUrl = coverTemplateUrl;
const biCreateDt = date.dateFormat(createDt, 'Y-M-D');
this.projectName = `${projectName}${biCreateDt}服务报告`;
this.coverContent = [
{
name: title,
pos: titlePosition
},
{
name: settlementTime,
pos: settlementTimePosition
},
{
name: aspEnterpriseNameWrite,
pos: aspNamePosition
}
];
this.baseInfo = [
{
hide: nameShowType == 2 || nameShowType == 3,
name: '项目方',
value: sendEnterpriseName
},
{
name: nameShowType == 2 ? '项目方' : '服务商',
value: aspEnterpriseName
},
{
name: '任务时间',
value: `${taskTime}天`
},
{
name: '任务开始时间',
value: taskStartTime
},
{
name: '任务结算时间',
value: taskEndTime
},
{
name: '报表生成时间',
value: biCreateDt
},
{
name: '本期个人数据数',
value: executePeopleNumber
},
{
name: '累计个人数据总数',
value: taskSum
}
].reduce((pre, cur) => {
if (!cur.hide) {
const lastArr = pre[pre.length - 1];
if (Array.isArray(lastArr) && lastArr.length < 3) {
lastArr.push(cur);
} else {
pre.push([cur]);
}
}
return pre;
}, []);
this.textData = [
[
{
name: '专区文章：',
value: `${dataCollectNumber}篇`
},
{
name: '总执行数(人或者机构)：',
value: executePeopleNumber
},
{
name: '本次提交量：',
value: `${taskSum}条`
}
]
];
this.textDataHistory = [
[
{
name: '专区文章：',
value: `${dataCollectNumber}篇`
}
]
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}] = infoArr;
this.missionData = [
ChartConfigFn.createConfig(dealAxis(group1.topicCountInfos), {
...group1,
chartType: group1.chartType || 12,
legends: dealLegends(group1.topicCountInfos, '性', '性'),
blockTitle: '参与任务执行的性别分布',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
hideDelete: true,
dontContenteditable: true,
width: 520,
height: 350,
disableTypes: [3, 4],
extendTypes: [12]
}),
ChartConfigFn.createConfig(
dealAxis(group2.topicCountInfos, '', '以上'),
{
...group2,
chartType: group2.chartType || 1,
legends: dealLegends(group2.topicCountInfos, '岁', '岁以上'),
blockTitle: '执行任务的年龄段',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
hideDelete: true,
dontContenteditable: true,
width: 520,
height: 350,
disableTypes: [3, 4]
}
),
ChartConfigFn.createConfig([], {
...group1,
resultIsShow: 1,
hideBtn: true,
hideLegend: true,
hideChart: true,
hideTitle: true
})
// ChartConfigFn.createConfig(dealAxis(group3.fixedCountInfos), {
// ...group3,
// chartType: group3.chartType || 2,
// legends: dealLegends(group3.fixedCountInfos),
// blockTitle: '项目参与人完成任务区间分布',
// legendName: '总参与项目执行人数${num}人',
// hideDelete: true,
// height: 400,
// disableTypes: [3, 4]
// })
];
},
dealChoice(obj, singleChoiceName) {
const config = {
1: {
chartType: 2,
blockTitle: '数字专区各篇内容有效点击量排名',
hideTypes: true,
hideLegend: true,
hideDesc: true
},
2: {
chartType: 13,
blockTitle: '数字专区有效点击量分布区域热力图',
hideTypes: true,
hideColor: true,
hideLegend: true,
hideDesc: true
},
3: item => ({
chartType: item.chartType || randomType([1, 2, 5, 6]),
blockTitle: '数字专区单日有效点击量走势图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
}),
6: {
chartType: 2,
blockTitle: '数字专区单日最大点击量各篇内容点击量排名',
hideTypes: true,
hideLegend: true,
hideDesc: true
},
7: () => ({
chartType: 2,
blockTitle: '单篇每日点击',
hideTypes: true,
hideLegend: true,
hideDesc: true
}),
23: item => ({
chartType: item.chartType || randomType([1, 2, 9]),
blockTitle: '专区推广文章浏览量与有效反馈数量对比图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 5, 6, 10, 11]
})
};
this[singleChoiceName] = Object.entries(obj)
.filter(item => item[1])
.map(([index, item]) => {
let customConfig = config[index] || {};
if (check.isFunction(customConfig)) {
customConfig = customConfig(item);
}
return {
...ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
...customConfig
}),
hideThisChart: customConfig.hideThisChart
};
})
.filter(item => !item.hideThisChart)
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
},
dealChoiceMixin(arr) {
this.singleChoiceMixin = (Array.isArray(arr) ? arr : [])
.filter(item => item)
.reduce((pre, item) => {
pre.push(
ChartConfigFn.createConfig(dealAxis([]), {
...item,
content: `<div>
1233
<div style="width:1px;height:10000px;"></div>
244214214
</div>`,
blockTitle: item.title,
chartType: 15,
hideTypes: true,
hideColor: true,
hideLegend: true,
hideDesc: true
}),
...(Array.isArray(item.topic) ? item.topic : []).map(cItem => {
return ChartConfigFn.createConfig(
dealAxis(cItem.topicAnswerList),
{
...cItem,
blockTitle: cItem.topicTitle,
chartType: cItem.chartType || randomType([1, 2, 5, 6]),
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
}
);
})
);
return pre;
}, [])
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
},
saveInfo() {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
let _missionData = chartConfigToSetInfo(this.missionData, biInfoId);
_missionData[0] = Object.assign({}, _missionData[0], {
resultUser: (_missionData[2] || {}).resultUser || ''
});
_missionData = _missionData.slice(0, 2);
return this.Bi.saveInfo({
biInfoId: biInfoId,
commandType: 2,
biStyleConfigureInfo: {
biInfoId: biInfoId,
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) //标题位置
},
styleConfigureFixedDetailList: _missionData,
hgtgDetailList: chartConfigToSetInfo(
[...this.singleChoice, ...this.singleChoiceMixin],
biInfoId
)
});
},
exportBi() {
window.open(this.Bi.exportBi(), '_blank');
}
},
created() {
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo({ useType: 2 }),
this.Bi.getTopicInfo({ useType: 1 }),
this.Bi.getGroupInfo(),
this.Bi.getTemplateList()
])
.then(
([
baseInfo,
fixedInfo,
topicInfoHistory,
topicInfo,
topicMixinInfo,
tempaletList = { data: { data: [] } }
]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(
topicInfoHistory.data.data || {},
'singleChoiceHistory'
);
this.dealChoice(topicInfo.data.data || {}, 'singleChoice');
this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || [];
this.$nextTick(async () => {
await this.preloadImg(this.coverUrl);
window.status = '1';
});
}
)
.catch(() => {
this.$nextTick(() => {
window.status = '1';
});
});
}
};
</script>
<style lang="scss" scoped>
.bi-block {
// margin-top: 8px;
}
</style>
src/packages/bi/src/project/tools.js
......@@ -16,7 +16,7 @@ const dealStr = (str, unit = '') => {
export const dealAxis = (arr = [], unit = '', lastUnit = '') => {
return arr.map((item, index) => {
const isLast = index === arr.length - 1;
const xName = item.genderType || item.xTopicName;
const xName = item.genderType || item.xTopicName || item.optionName;
return {
x: xName ? dealStr(xName, isLast ? lastUnit : unit) : '-',
y: item.yTopicName,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!