Skip to content

jml0128 / xrk-bi

Go to a project
Commit dd64d1cd by jml0128
Options

feat:联调数字专区接口

1 parent 10467415
Inline Side-by-side
Showing with 280 additions and 272 deletions
src/packages/bi/src/chart-type/map/createMap.js
......@@ -2,7 +2,7 @@
* @Description:
* @Date: 2021-06-20 01:16:17
*/
export const createMap = () => {
export const createMap = (Vue, chartData) => {
return {
visualMap: {
borderColor: '#fff',
......@@ -54,84 +54,7 @@ export const createMap = () => {
},
top: 36,
left: 0,
data: [
{
name: '北京',
value: 54
},
{
name: '天津',
value: 13
},
{
name: '上海',
value: 40
},
{
name: '重庆',
value: 75
},
{
name: '河北',
value: 13
},
{
name: '河南',
value: 83
},
{
name: '云南',
value: 11
},
{
name: '辽宁',
value: 19
},
{
name: '黑龙江',
value: 15
},
{
name: '湖南',
value: 69
},
{
name: '安徽',
value: 60
},
{
name: '山东',
value: 39
},
{
name: '新疆',
value: 4
},
{
name: '江苏',
value: 31
},
{
name: '浙江',
value: 104
},
{
name: '江西',
value: 36
},
{
name: '湖北',
value: 1052
},
{
name: '广西',
value: 33
},
{
name: '甘肃',
value: 7
}
]
data: chartData
}
]
};
......
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-06-20 11:13:55
* @LastEditTime: 2021-07-02 11:44:28
-->
<template>
<div>
......@@ -17,7 +17,7 @@
:key="`${type}-${JSON.stringify(data)}`"
:type="type"
>
<template v-if="type == 13" #map>
<template v-if="isMap" #map>
<div class="ui-table-head">
<table class="ui-table" style="border-bottom:none;">
<colgroup>
......@@ -38,7 +38,7 @@
<col style="width:10%" />
</colgroup>
<tbody>
<tr v-for="(item, index) in table" :key="index">
<tr v-for="(item, index) in mapData" :key="index">
<td>
{{ item.name }}
</td>
......@@ -104,16 +104,6 @@ export default {
},
data() {
return {
table: [
{
name: '河北',
value: '1000'
},
{
name: '重庆',
value: '876'
}
],
option: {}
};
},
......@@ -160,13 +150,24 @@ export default {
height: isNumber(cHeight) ? `${cHeight}px` : cHeight
};
return customStyle;
},
isMap() {
return this.type == 13;
},
mapData() {
return this.data[0].map((item, index) => {
return {
value: item,
name: this.axis[0].names[index]
};
});
}
},
methods: {
createChart() {
this.option = this.chartsConfig.create(
this,
this.data,
this.isMap ? this.mapData : this.data,
this.axis[0].names,
this.yAxisUnit,
this.colors,
......
src/packages/bi/src/commonComponents/table.vue
......@@ -3,7 +3,7 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-19 22:39:37
* @LastEditTime: 2021-07-02 11:49:58
-->
<template>
<div class="bi-table">
......@@ -33,7 +33,8 @@
:style="{
backgroundColor:
cIndex == 0 ? colors[isSingle && index === 0 ? 0 : 1] : '',
color: cIndex == 0 && colors.length > 1 ? '#fff' : ''
color:
(cIndex == 0 || index == 0) && colors.length > 1 ? '#fff' : ''
}"
>
{{ cItem }}
......
src/packages/bi/src/components/mission.vue
......@@ -14,11 +14,12 @@
</div>
<BiChartBlock
v-if="data[2]"
style="margin-top:30px;"
:chartConfig="data[2]"
></BiChartBlock>
<template name="项目参与人完成任务区间分布">
<template name="项目参与人完成任务区间分布" v-if="data[3]">
<BiChartBlock
style="margin-top:44px;"
:chartConfig="data[3]"
......
src/packages/bi/src/components/operate.vue
......@@ -102,13 +102,18 @@ export default {
message: '保存中...请稍等',
duration: 0
});
this.saveInfo().then(() => {
loading.close();
Message({
message: '保存成功',
type: 'success'
this.saveInfo()
.then(() => {
loading.close();
Message({
message: '保存成功',
type: 'success'
});
})
.catch(() => {
loading.close();
Message.error('保存失败');
});
});
}
},
exportFn() {
......
src/packages/bi/src/mock/index.js
......@@ -71,6 +71,8 @@ export const chartConfig = () => {
const {
blockTitle,
hideTitle,
hideColor,
hideTypes,
hideChart,
hideDesc,
hideLegend,
......@@ -131,9 +133,9 @@ export const chartConfig = () => {
title: {
show: !hideTitle,
name: title,
hideColor: false,
hideColor: hideColor,
hideDelete: hideDelete,
hideTypes: false
hideChangeChart: hideTypes
},
legend: {
show: !hideLegend,
......
src/packages/bi/src/project/20-configurable.vue
......@@ -71,60 +71,15 @@ import mixin, { printWidth } from '../mixin/index';
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
import { date, base } from 'xrk-tools';
import { date } from 'xrk-tools';
const ChartConfigFn = chartConfig();
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 total = arr.reduce((pre, cur) => {
return pre + (cur.num || cur.countNum || 0);
}, 0);
return arr.reduce((pre, cur) => {
pre.push(
`${cur.genderType || cur.xTopicName}${cur.num ||
cur.countNum ||
0}人，占比${base.numberFormat(
(cur.num || cur.countNum || 0) / total,
0.01
)}%`
);
return pre;
}, []);
};
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
};
});
};
import {
dealAxis,
dealLegends,
randomType,
chartConfigToSetInfo
} from './tools';
export default {
name: 'bi-configurable',
......@@ -345,7 +300,7 @@ export default {
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}, group3 = {}] = infoArr;
const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = infoArr;
this.missionData = [
ChartConfigFn.createConfig(dealAxis(group1.fixedCountInfos), {
...group1,
......@@ -378,10 +333,10 @@ export default {
hideChart: true,
hideTitle: true
}),
ChartConfigFn.createConfig(dealAxis(group3.fixedCountInfos), {
...group3,
chartType: group3.chartType || 2,
legends: dealLegends(group3.fixedCountInfos),
ChartConfigFn.createConfig(dealAxis(group4.fixedCountInfos), {
...group4,
chartType: group4.chartType || 2,
legends: dealLegends(group4.fixedCountInfos),
blockTitle: '项目参与人完成任务区间分布',
legendName: '总参与项目执行人数${num}人',
hideDelete: true,
......
src/packages/bi/src/project/6-zone.vue
......@@ -27,7 +27,7 @@
<BiSingleChoice
class="bi-block no-border"
:textData="textData"
:singleChoice="singleChoice"
:singleChoice="showSingleChoice"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
@page="setPage(arguments, 'page2', 'page2Info')"
......@@ -42,7 +42,7 @@
style="margin-top:25px;"
class="bi-block no-border"
name="单篇内容有效点击量分析图"
:singleChoice="singleChoiceMixin"
:singleChoice="showSingleChoiceMixin"
:pageWrap="true"
@sort="sort(arguments, 'singleChoiceMixin', hideSingleChoiceMixin)"
@page="setPage(arguments, 'page3', 'page3Info')"
......@@ -80,7 +80,13 @@ import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date, base } from 'xrk-tools';
import { date, check } from 'xrk-tools';
import {
dealAxis,
dealLegends,
randomType,
chartConfigToSetInfo
} from './tools';
export default {
name: 'bi-zone',
......@@ -109,7 +115,8 @@ export default {
missionData: [],
projectName: '',
baseInfo: [],
textData: []
textData: [],
biInfo: {}
};
},
computed: {
......@@ -170,91 +177,20 @@ export default {
}
];
},
showSingleChoice() {
return this.dealSingleChoice(this.singleChoice);
},
hideSingleChoice() {
return this.singleChoice.filter(item => item.isDelete == 1);
return this.dealSingleChoice(this.singleChoice, true);
},
showSingleChoiceMixin() {
return this.dealSingleChoice(this.singleChoiceMixin);
},
hideSingleChoiceMixin() {
return this.singleChoiceMixin.filter(item => item.isDelete == 1);
}
},
methods: {
setData() {
this.singleChoice = [
ChartConfigFn.create(30, 0, 2, {
blockTitle: '数字专区各篇内容有效点击量排名',
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(30, 0, 13, {
blockTitle: '数字专区有效点击量分布区域热力图',
width: 875,
height: 700,
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(30, 0, 5, {
blockTitle: '数字专区单日有效点击量走势图',
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(5, 0, 1, {
blockTitle: '数字专区单日点击量Top5日期分布图',
hideLegend: true
}),
ChartConfigFn.create(5, 0, 9, {
blockTitle: '数字专区单日点击量Top5占周期总有效点击量占比分析图',
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(30, 0, 5, {
blockTitle: '数字专区单日最大点击量各篇内容点击量排名',
hideLegend: true,
hideDesc: true
})
];
this.singleChoiceMixin = [
ChartConfigFn.create(60, 0, 5, {
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(60, 0, 5, {
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(60, 0, 5, {
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(60, 0, 5, {
hideLegend: true,
hideDesc: true
}),
ChartConfigFn.create(60, 0, 5, {
hideLegend: true,
hideDesc: true
})
];
this.missionData = [
ChartConfigFn.create(4, 0, 12, {
hideDesc: true,
hideDelete: true,
width: 520,
height: 350
}),
ChartConfigFn.create(4, 0, 1, {
hideDesc: true,
hideDelete: true,
width: 520,
height: 350
}),
ChartConfigFn.create(4, 0, 1, {
hideLegend: true,
hideChart: true,
hideTitle: true
}),
ChartConfigFn.create(4, 0, 1, { hideDelete: true, height: 400 })
];
},
dealBaseInfo(info) {
const {
id,
......@@ -267,21 +203,17 @@ export default {
aspNamePosition,
styleConfigureSettlementTime,
styleConfigureSettlementTimePosition,
dataCollectNumber,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
settlementTime,
taskSum,
executePeopleNumber,
dataCollectNumber,
examinePeopleNumber,
createDt,
totalTopicNum,
chooseTopicNum,
isContrainGroupAnalyse,
isContrainSingleAnalyse
createDt
} = info;
this.biInfo = {
biInfoId: id,
......@@ -308,39 +240,39 @@ export default {
[
{
name: '发起方',
value: '在山西地区的零售药店巡店项目'
value: sendEnterpriseName
},
{
name: '服务商',
value: '北京医洋科技有限公司'
value: aspEnterpriseName
},
{
name: '任务时间',
value: '24天'
value: `${taskTime}天`
}
],
[
{
name: '任务开始时间',
value: '2021-04-02'
value: taskStartTime
},
{
name: '任务结算时间',
value: '2021-04-02'
value: settlementTime
},
{
name: '报表生成时间',
value: '2020-10-2'
value: biCreateDt
}
],
[
{
name: '本期个人数据数',
value: '213123'
value: executePeopleNumber
},
{
name: '累计个人数据总数',
value: '2020-10-2'
value: taskSum
}
]
];
......@@ -348,19 +280,146 @@ export default {
[
{
name: '专区内容：',
value: '20题'
value: `${dataCollectNumber}篇`
},
{
name: '总执行数(人或者机构)：',
value: '11111'
value: executePeopleNumber
},
{
name: '本期有效点击量：',
value: '20000人次'
value: `${taskSum}人次`
}
]
];
},
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,
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,
width: 520,
height: 350,
disableTypes: [3, 4]
})
// ChartConfigFn.createConfig([], {
// ...infoArr[1],
// 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(arr) {
const config = [
{
chartType: 2,
blockTitle: '数字专区各篇内容有效点击量排名',
hideTypes: true,
hideLegend: true,
hideDesc: true
},
{
chartType: 13,
blockTitle: '数字专区有效点击量分布区域热力图',
hideTypes: true,
hideColor: true,
hideLegend: true,
hideDesc: true
},
item => ({
chartType: item.chartType || randomType([1, 2, 5, 6]),
blockTitle: '数字专区单日有效点击量走势图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
}),
item => ({
chartType: item.chartType || randomType([1, 2, 5, 6]),
blockTitle: '数字专区单日点击量Top5日期分布图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
}),
item => ({
chartType: item.chartType || 9,
blockTitle: '数字专区单日点击量Top5占周期总有效点击量占比分析图',
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4]
}),
{
chartType: 2,
blockTitle: '数字专区单日最大点击量各篇内容点击量排名',
hideTypes: true,
hideLegend: true,
hideDesc: true
}
];
this.singleChoice = arr
.map((item, index) => {
let customConfig = config[index] || {};
if (check.isFunction(customConfig)) {
customConfig = customConfig(item);
}
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
...customConfig
});
})
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
},
dealChoiceMixin(arr) {
this.singleChoiceMixin = arr
.map(item => {
return ChartConfigFn.createConfig(dealAxis(item.topicCountInfos), {
...item,
blockTitle: item.informationTitle,
chartType: item.chartType || randomType([1, 2, 5, 6]),
hideLegend: true,
hideDesc: true,
disableTypes: [3, 4, 9, 10, 11]
});
})
.sort((a, b) => {
if (a.sort < b.sort) {
return -1;
}
});
},
saveInfo() {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
......@@ -377,11 +436,11 @@ export default {
title: content[0].name || '', //封面标题
titlePosition: JSON.stringify(content[0].pos) //标题位置
},
makeSceneFixedDetailInfos: chartConfigToSetInfo(this.missionData),
makeSceneStyleConfigureTopicDetailInfos: chartConfigToSetInfo(
this.singleChoice
),
makeSceneGroupDetails: chartConfigToSetInfo(this.singleChoiceMixin)
styleConfigureFixedDetailList: chartConfigToSetInfo(this.missionData),
hgtgDetailList: chartConfigToSetInfo([
...this.singleChoice,
...this.singleChoiceMixin
])
});
},
exportBi() {
......@@ -392,17 +451,21 @@ export default {
}
},
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 || [];
});
]).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/tools.js 0 → 100644
/*
* @Description:
* @Date: 2021-07-02 10:57:34
*/
import { base } from 'xrk-tools';
export const dealAxis = (arr = []) => {
return arr.map(item => ({
x: item.genderType || item.xTopicName || '-',
y: item.yTopicName,
value: item.num || item.countNum || 0
}));
};
export const dealLegends = (arr = []) => {
const total = arr.reduce((pre, cur) => {
return pre + (cur.num || cur.countNum || 0);
}, 0);
return arr.reduce((pre, cur) => {
pre.push(
`${cur.genderType || cur.xTopicName}${cur.num ||
cur.countNum ||
0}人，占比${base.numberFormat(
(cur.num || cur.countNum || 0) / total,
0.01
)}%`
);
return pre;
}, []);
};
export const randomType = (arr = []) => {
return arr[Math.ceil(Math.random() * arr.length)] || arr[0];
};
export 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
};
});
};
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!