Skip to content

jml0128 / xrk-bi

Go to a project
Commit 0a042789 by jml0128
Options

feat:新增历史拜访场景BI

1 parent 1fe18123
Inline Side-by-side
Showing with 1152 additions and 16 deletions
package.json
{ {
"name": "xrk-bi", "name": "xrk-bi",
"version": "0.1.16", "version": "0.1.17",
"description": "xrk-bi", "description": "xrk-bi",
"author": "xrk", "author": "xrk",
"main": "dist/bundler.js", "main": "dist/bundler.js",
......
src/packages/bi/src/chart-type/map/createMap.js
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2021-06-20 01:16:17 * @Date: 2021-06-20 01:16:17
*/ */
export const createMap = (Vue, chartData) => { export const createMap = (Vue, chartData) => {
console.log('map', chartData); console.log(chartData);
return { return {
visualMap: { visualMap: {
borderColor: '#fff', borderColor: '#fff',
...@@ -55,7 +55,65 @@ export const createMap = (Vue, chartData) => { ...@@ -55,7 +55,65 @@ export const createMap = (Vue, chartData) => {
}, },
top: 36, top: 36,
left: 0, left: 0,
data: chartData data: chartData.map(item => ({
value: item.value,
name: item.name.replace(/省|市/g, '')
}))
}
]
};
};
export const createMapScatter = (Vue, chartData) => {
console.log(chartData);
return {
geo: [
{
type: 'map',
map: 'china',
itemStyle: {
areaColor: 'rgba(0,0,0,0)',
borderColor: '#4C6286',
borderWidth: 1
},
emphasis: {
label: {
show: false
},
itemStyle: {
areaColor: 'rgba(0,0,0,0)'
}
},
top: 36
}
],
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: chartData.reduce((pre, cur) => {
const { visitLongitude, visitLatitude, latitude, longitude } = cur;
pre.push({
value: [visitLongitude || longitude, visitLatitude || latitude]
});
return pre;
}, []),
symbol: 'circle',
rippleEffect: {
period: 8,
brushType: 'fill',
scale: 3.5
},
animation: false,
symbolSize: function() {
return 6;
},
label: {
show: false
},
itemStyle: {
color: '#FF2828'
}
} }
] ]
}; };
......
src/packages/bi/src/chart-type/types.js
...@@ -10,7 +10,7 @@ import { ...@@ -10,7 +10,7 @@ import {
} from './bar/createBar'; } from './bar/createBar';
import { createLine, createLineSmooth } from './line/createLine'; import { createLine, createLineSmooth } from './line/createLine';
import { createPie, createRing } from './pie/createPie'; import { createPie, createRing } from './pie/createPie';
import { createMap } from './map/createMap'; import { createMap, createMapScatter } from './map/createMap';
export default { export default {
// 柱状 // 柱状
1: { 1: {
...@@ -111,5 +111,13 @@ export default { ...@@ -111,5 +111,13 @@ export default {
sort: 1, sort: 1,
icon: '', icon: '',
create: createMap create: createMap
},
// 地图
14: {
name: 'map',
cnName: '地图-散点',
sort: 1,
icon: '',
create: createMapScatter
} }
}; };
src/packages/bi/src/commonComponents/chart-base.vue
...@@ -19,7 +19,13 @@ ...@@ -19,7 +19,13 @@
*/ */
import { use, init, registerMap } from 'echarts/core'; import { use, init, registerMap } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'; import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart, LineChart, MapChart } from 'echarts/charts'; import {
PieChart,
BarChart,
LineChart,
MapChart,
ScatterChart
} from 'echarts/charts';
import china from '../chart-type/json/china.json'; import china from '../chart-type/json/china.json';
// import chinaMapOutline from '../chart-type/json/chinaMapOutline.json'; // import chinaMapOutline from '../chart-type/json/chinaMapOutline.json';
...@@ -38,6 +44,7 @@ use([ ...@@ -38,6 +44,7 @@ use([
PieChart, PieChart,
LineChart, LineChart,
MapChart, MapChart,
ScatterChart,
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
LegendComponent, LegendComponent,
...@@ -79,13 +86,40 @@ export default { ...@@ -79,13 +86,40 @@ export default {
methods: { methods: {
init() { init() {
if (!this.myChart) { if (!this.myChart) {
if (this.type === 13) { if ([13, 14].includes(+this.type)) {
registerMap('china', china); registerMap('china', china);
// registerMap('chinaMapOutline', chinaMapOutline); // registerMap('chinaMapOutline', chinaMapOutline);
} }
this.myChart = init(document.getElementById(this.uuid)); this.myChart = init(document.getElementById(this.uuid));
} }
this.myChart.setOption(this.option); const { option, myChart } = this;
const maxLength = option.series[0].data.length;
const cloneArr = [...option.series[0].data];
if (maxLength > 200) {
const setData = (_myChart, startIndex) => {
const endIndex = startIndex + 200;
if (startIndex == 0) {
option.series[0].data = cloneArr.slice(startIndex, endIndex);
_myChart.setOption(option);
} else {
_myChart.appendData({
seriesIndex: '0',
data: cloneArr.slice(startIndex, endIndex)
});
}
if (maxLength > endIndex) {
setTimeout(
() => {
setData(_myChart, endIndex);
},
startIndex == 0 ? 0 : 100
);
}
};
setData(myChart, 0);
} else {
myChart.setOption(option);
}
// this.imgUrl = this.myChart.getDataURL({ // this.imgUrl = this.myChart.getDataURL({
// type: 'png', // type: 'png',
// pixelRatio: 1, //放大2倍 // pixelRatio: 1, //放大2倍
......
src/packages/bi/src/commonComponents/chart-block.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: jml * @Author: jml
* @Date: 2021-03-24 10:22:27 * @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 17:09:54 * @LastEditTime: 2021-07-28 21:17:43
--> -->
<template> <template>
<div style="position:relative;" class="bi-chart-block"> <div style="position:relative;" class="bi-chart-block">
...@@ -25,7 +25,10 @@ ...@@ -25,7 +25,10 @@
:showGuide="showGuide" :showGuide="showGuide"
></BiChartTitle> ></BiChartTitle>
<BiChartChoiceMinxinToggleAxis <BiChartChoiceMinxinToggleAxis
v-if="(chart.axis || []).every(item => item.names.length > 0)" v-if="
(chart.axis || []).every(item => item.names.length > 0) &&
!title.hideToggleAxis
"
:axis="chart.axis" :axis="chart.axis"
:customGroupTitle="title.customGroupTitle" :customGroupTitle="title.customGroupTitle"
:contenteditable="title.toggleAxisContenteditable" :contenteditable="title.toggleAxisContenteditable"
......
src/packages/bi/src/commonComponents/chart.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Author: jml * @Author: jml
* @Date: 2021-03-24 10:22:27 * @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-23 14:44:27 * @LastEditTime: 2021-07-28 21:34:18
--> -->
<template> <template>
<div :style="{ height: `${(cHeight + 80) * zoom}px`, zoom: 1 / zoom }"> <div :style="{ height: `${(cHeight + 80) * zoom}px`, zoom: 1 / zoom }">
...@@ -96,6 +96,10 @@ export default { ...@@ -96,6 +96,10 @@ export default {
type: Array, type: Array,
default: () => [] default: () => []
}, },
mapScatterData: {
type: Array,
default: () => []
},
colors: { colors: {
type: Array, type: Array,
default: () => [] default: () => []
...@@ -157,6 +161,9 @@ export default { ...@@ -157,6 +161,9 @@ export default {
isMap() { isMap() {
return this.type == 13; return this.type == 13;
}, },
isScatterMap() {
return this.type == 14;
},
mapData() { mapData() {
return this.data[0].map((item, index) => { return this.data[0].map((item, index) => {
return { return {
...@@ -170,7 +177,11 @@ export default { ...@@ -170,7 +177,11 @@ export default {
createChart() { createChart() {
this.option = this.chartsConfig.create( this.option = this.chartsConfig.create(
this, this,
this.isMap ? this.mapData : this.data, this.isMap
? this.mapData
: this.isScatterMap
? this.mapScatterData
: this.data,
this.axis[0].names, this.axis[0].names,
this.yAxisUnit, this.yAxisUnit,
this.colors, this.colors,
......
src/packages/bi/src/components/operate.vue
...@@ -86,6 +86,7 @@ export default { ...@@ -86,6 +86,7 @@ export default {
}, },
data() { data() {
return { return {
saving: false,
dialogVisible: false, dialogVisible: false,
resetDeleteArr: [] resetDeleteArr: []
}; };
...@@ -100,10 +101,14 @@ export default { ...@@ -100,10 +101,14 @@ export default {
}, },
save() { save() {
if (check.isFunction(this.saveInfo)) { if (check.isFunction(this.saveInfo)) {
if (this.saving) {
return;
}
const loading = Message({ const loading = Message({
message: '保存中...请稍等', message: '保存中...请稍等',
duration: 0 duration: 0
}); });
this.saving = true;
this.saveInfo() this.saveInfo()
.then(() => { .then(() => {
loading.close(); loading.close();
...@@ -111,8 +116,10 @@ export default { ...@@ -111,8 +116,10 @@ export default {
message: '保存成功', message: '保存成功',
type: 'success' type: 'success'
}); });
this.saving = false;
}) })
.catch(() => { .catch(() => {
this.saving = false;
loading.close(); loading.close();
Message.error('保存失败'); Message.error('保存失败');
}); });
......
src/packages/bi/src/main.vue
...@@ -3,11 +3,14 @@ ...@@ -3,11 +3,14 @@
* @Author: jml * @Author: jml
* @Date: 2021-02-26 15:38:10 * @Date: 2021-02-26 15:38:10
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-23 13:19:49 * @LastEditTime: 2021-07-28 21:56:47
--> -->
<template> <template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }"> <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
<template v-if="[5, 7, 20].includes(+projectType)"> <template
v-if="[5, 7, 20].includes(+projectType)"
name="医学助手项目调研-医生调查问卷-可配置场景"
>
<BiConfigurableMobile v-if="mobile"></BiConfigurableMobile> <BiConfigurableMobile v-if="mobile"></BiConfigurableMobile>
<BiConfigurable v-else></BiConfigurable> <BiConfigurable v-else></BiConfigurable>
</template> </template>
...@@ -15,6 +18,15 @@ ...@@ -15,6 +18,15 @@
<BiZoneMobile v-if="mobile"></BiZoneMobile> <BiZoneMobile v-if="mobile"></BiZoneMobile>
<BiZone v-else></BiZone> <BiZone v-else></BiZone>
</template> </template>
<template v-if="projectType == 2" name="otc拜访">
<BiOtc></BiOtc>
</template>
<template v-if="projectType == 9" name="等级医院拜访">
<BiGradeHospital></BiGradeHospital>
</template>
<template v-if="projectType == 10" name="基层医疗机构拜访">
<BiJcyl></BiJcyl>
</template>
</div> </div>
</template> </template>
...@@ -24,6 +36,9 @@ import BiConfigurable from './project/20-configurable.vue'; ...@@ -24,6 +36,9 @@ import BiConfigurable from './project/20-configurable.vue';
import BiConfigurableMobile from './project/20-configurable-mobile.vue'; import BiConfigurableMobile from './project/20-configurable-mobile.vue';
import BiZone from './project/6-zone.vue'; import BiZone from './project/6-zone.vue';
import BiZoneMobile from './project/6-zone-mobile.vue'; 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';
export default { export default {
name: 'XrkBi', name: 'XrkBi',
...@@ -72,7 +87,10 @@ export default { ...@@ -72,7 +87,10 @@ export default {
BiConfigurable, BiConfigurable,
BiConfigurableMobile, BiConfigurableMobile,
BiZone, BiZone,
BiZoneMobile BiZoneMobile,
BiOtc,
BiJcyl,
BiGradeHospital
}, },
methods: { methods: {
setFontSize() { setFontSize() {
......
src/packages/bi/src/mock/index.js
...@@ -108,7 +108,9 @@ export const chartConfig = () => { ...@@ -108,7 +108,9 @@ export const chartConfig = () => {
toggleAxisContenteditable, toggleAxisContenteditable,
xFactor, xFactor,
yFactor yFactor,
hideToggleAxis
} = options; } = options;
const title = blockTitle; const title = blockTitle;
const { x, y, data } = dealAxis(arr, isGroup); const { x, y, data } = dealAxis(arr, isGroup);
...@@ -129,6 +131,7 @@ export const chartConfig = () => { ...@@ -129,6 +131,7 @@ export const chartConfig = () => {
(typeof colourGroup === 'string' && colourGroup.split(',')) || (typeof colourGroup === 'string' && colourGroup.split(',')) ||
colors[0], colors[0],
data: data, data: data,
mapScatterData: arr,
axis: [ axis: [
{ factorName: xFactor, name: xAxisName, names: x }, { factorName: xFactor, name: xAxisName, names: x },
{ {
...@@ -150,7 +153,8 @@ export const chartConfig = () => { ...@@ -150,7 +153,8 @@ export const chartConfig = () => {
hideChangeChart: hideTypes, hideChangeChart: hideTypes,
contenteditable: !dontContenteditable, contenteditable: !dontContenteditable,
toggleAxisContenteditable: toggleAxisContenteditable, toggleAxisContenteditable: toggleAxisContenteditable,
customGroupTitle: customGroupTitle customGroupTitle: customGroupTitle,
hideToggleAxis: hideToggleAxis
}, },
legend: { legend: {
show: !hideLegend, show: !hideLegend,
......
src/packages/bi/src/project/10-jcyl.vue 0 → 100644
<!--
* @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>
<BiOverview
class="bi-block"
name="数据报告信息"
:title="projectName"
:data="baseInfo"
></BiOverview>
<BiMission
class="bi-block"
name="项目执行人数据统计"
:data="missionData"
></BiMission>
<BiSingleChoice
v-if="showSingleChoice.length > 0"
class="bi-block no-border"
:singleChoice="showSingleChoice"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
>
<BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
</BiSingleChoice>
<BiCoverEnd></BiCoverEnd>
</div>
</template>
<script>
import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
import BiCover from '../components/cover.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 mixin from '../mixin/index';
/**
* dealSingleChoice、sort、setPage
*/
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date } from '../chart-type/common';
import { dealAxis, dealLegends } from './tools';
export default {
name: 'bi-zone',
mixins: [mixin, project],
components: {
BiSingleChoiceInfo,
BiCover,
BiOverview,
BiMission,
BiSingleChoice,
BiCoverEnd
},
data() {
return {
coverId: 0,
coverUrl: '',
coverContent: [],
coverList: [],
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
projectName: '',
baseInfo: [],
biInfo: {}
};
},
computed: {
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,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
taskEndTime,
taskSum,
executePeopleNumber,
createDt
} = 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 = [
[
{
name: '发起方',
value: sendEnterpriseName
},
{
name: '服务商',
value: aspEnterpriseName
},
{
name: '任务时间',
value: `${taskTime}天`
}
],
[
{
name: '任务开始时间',
value: taskStartTime
},
{
name: '任务结算时间',
value: taskEndTime
},
{
name: '报表生成时间',
value: biCreateDt
}
],
[
{
name: '本期个人数据数',
value: executePeopleNumber
},
{
name: '累计个人数据总数',
value: taskSum
}
]
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = 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(dealAxis(group3.topicCountInfos), {
...group3,
resultIsShow: 1,
chartType: group3.chartType || 2,
legends: dealLegends(group3.topicCountInfos),
blockTitle: '任务审核状态',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
}),
ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
...group4,
resultIsShow: 1,
chartType: group4.chartType || 5,
legends: dealLegends(group4.topicCountInfos),
blockTitle: '项目参与人执行任务表',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
})
];
},
dealChoice(arr) {
const [visitHospital, visitTime, visitTimeCount, feedBack] = arr;
this.singleChoice = [
ChartConfigFn.createConfig(dealAxis(visitHospital.topicCountInfos), {
...visitHospital,
chartType: 13,
hideLegend: true,
blockTitle: '拜访医院分布'
}),
ChartConfigFn.createConfig(dealAxis(visitTime.topicCountInfos), {
...visitTime,
chartType: 5,
blockTitle: '拜访时间'
}),
ChartConfigFn.createConfig(dealAxis(visitTimeCount.topicCountInfos), {
...visitTimeCount,
chartType: 1,
blockTitle: '拜访时长'
}),
ChartConfigFn.createConfig(dealAxis(feedBack.topicCountInfos), {
...feedBack,
chartType: 10,
blockTitle: '客户反馈'
})
];
},
exportBi() {
window.open(this.Bi.exportBi(), '_blank');
}
},
created() {
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo()
])
.then(([baseInfo, fixedInfo, topicInfo]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.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/2-otc.vue 0 → 100644
<!--
* @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>
<BiOverview
class="bi-block"
name="数据报告信息"
:title="projectName"
:data="baseInfo"
></BiOverview>
<BiMission
class="bi-block"
name="项目执行人数据统计"
:data="missionData"
></BiMission>
<BiSingleChoice
v-if="showSingleChoice.length > 0"
class="bi-block no-border"
:singleChoice="showSingleChoice"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
>
<BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
</BiSingleChoice>
<BiCoverEnd></BiCoverEnd>
</div>
</template>
<script>
import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
import BiCover from '../components/cover.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 mixin from '../mixin/index';
/**
* dealSingleChoice、sort、setPage
*/
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date } from '../chart-type/common';
import { dealAxis, dealLegends } from './tools';
export default {
name: 'bi-zone',
mixins: [mixin, project],
components: {
BiSingleChoiceInfo,
BiCover,
BiOverview,
BiMission,
BiSingleChoice,
BiCoverEnd
},
data() {
return {
coverId: 0,
coverUrl: '',
coverContent: [],
coverList: [],
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
projectName: '',
baseInfo: [],
biInfo: {}
};
},
computed: {
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,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
taskEndTime,
taskSum,
executePeopleNumber,
createDt
} = 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 = [
[
{
name: '发起方',
value: sendEnterpriseName
},
{
name: '服务商',
value: aspEnterpriseName
},
{
name: '任务时间',
value: `${taskTime}天`
}
],
[
{
name: '任务开始时间',
value: taskStartTime
},
{
name: '任务结算时间',
value: taskEndTime
},
{
name: '报表生成时间',
value: biCreateDt
}
],
[
{
name: '本期个人数据数',
value: executePeopleNumber
},
{
name: '累计个人数据总数',
value: taskSum
}
]
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = 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(dealAxis(group3.topicCountInfos), {
...group3,
resultIsShow: 1,
chartType: group3.chartType || 2,
legends: dealLegends(group3.topicCountInfos),
blockTitle: '任务审核状态',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
}),
ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
...group4,
resultIsShow: 1,
chartType: group4.chartType || 5,
legends: dealLegends(group4.topicCountInfos),
blockTitle: '项目参与人执行任务表',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
})
];
},
dealChoice(arr) {
const [
xundian,
dayTime,
productPrice,
display,
kucun,
pop,
maidian,
location
] = arr;
this.singleChoice = [
ChartConfigFn.createConfig(
dealAxis(
Object.entries(xundian.visitTime[0]).reduce((pre, cur) => {
const [name, arr = []] = cur;
pre = pre.concat(
arr.map(item => ({
...item,
yTopicName: name
}))
);
return pre;
}, [])
),
{
...xundian,
isGroup: true,
hideToggleAxis: true,
chartType: 5,
blockTitle: '巡店时间'
}
),
ChartConfigFn.createConfig(dealAxis(dayTime.topicCountInfos), {
...dayTime,
chartType: 1,
blockTitle: '每日时间分布'
}),
ChartConfigFn.createConfig(dealAxis(productPrice.topicCountInfos), {
...productPrice,
chartType: 5,
blockTitle: '产品售价（元）'
}),
ChartConfigFn.createConfig(dealAxis(display.topicCountInfos), {
...display,
chartType: 6,
blockTitle: '陈列状态'
}),
ChartConfigFn.createConfig(dealAxis(kucun.topicCountInfos), {
...kucun,
chartType: 5,
blockTitle: '库存'
}),
ChartConfigFn.createConfig(dealAxis(pop.topicCountInfos), {
...pop,
chartType: 9,
blockTitle: '是否有产品POP'
}),
ChartConfigFn.createConfig(dealAxis(maidian.topicCountInfos), {
...maidian,
chartType: 1,
blockTitle: '店员是否知道卖点'
}),
ChartConfigFn.createConfig(location.latAndLon, {
...location,
hideLegend: true,
chartType: 14,
blockTitle: '药店定位'
})
];
},
exportBi() {
window.open(this.Bi.exportBi(), '_blank');
}
},
created() {
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo()
])
.then(([baseInfo, fixedInfo, topicInfo]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.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/9-gradeHospital.vue 0 → 100644
<!--
* @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>
<BiOverview
class="bi-block"
name="数据报告信息"
:title="projectName"
:data="baseInfo"
></BiOverview>
<BiMission
class="bi-block"
name="项目执行人数据统计"
:data="missionData"
></BiMission>
<BiSingleChoice
v-if="showSingleChoice.length > 0"
class="bi-block no-border"
:singleChoice="showSingleChoice"
:pageWrap="true"
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
>
<BiSingleChoiceInfo index="3" name="报告内容"></BiSingleChoiceInfo>
</BiSingleChoice>
<BiCoverEnd></BiCoverEnd>
</div>
</template>
<script>
import BiSingleChoiceInfo from '../components/singleChoiceInfo.vue';
import BiCover from '../components/cover.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 mixin from '../mixin/index';
/**
* dealSingleChoice、sort、setPage
*/
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
const ChartConfigFn = chartConfig();
import { date } from '../chart-type/common';
import { dealAxis, dealLegends } from './tools';
export default {
name: 'bi-zone',
mixins: [mixin, project],
components: {
BiSingleChoiceInfo,
BiCover,
BiOverview,
BiMission,
BiSingleChoice,
BiCoverEnd
},
data() {
return {
coverId: 0,
coverUrl: '',
coverContent: [],
coverList: [],
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
projectName: '',
baseInfo: [],
biInfo: {}
};
},
computed: {
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,
projectName = '-',
sendEnterpriseName = '-',
aspEnterpriseName = '-',
taskTime = 0,
taskStartTime,
taskEndTime,
taskSum,
executePeopleNumber,
createDt
} = 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 = [
[
{
name: '发起方',
value: sendEnterpriseName
},
{
name: '服务商',
value: aspEnterpriseName
},
{
name: '任务时间',
value: `${taskTime}天`
}
],
[
{
name: '任务开始时间',
value: taskStartTime
},
{
name: '任务结算时间',
value: taskEndTime
},
{
name: '报表生成时间',
value: biCreateDt
}
],
[
{
name: '本期个人数据数',
value: executePeopleNumber
},
{
name: '累计个人数据总数',
value: taskSum
}
]
];
},
dealFixedInfo(infoArr) {
const [group1 = {}, group2 = {}, group3 = {}, group4 = {}] = 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(dealAxis(group3.topicCountInfos), {
...group3,
resultIsShow: 1,
chartType: group3.chartType || 2,
legends: dealLegends(group3.topicCountInfos),
blockTitle: '任务审核状态',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
}),
ChartConfigFn.createConfig(dealAxis(group4.topicCountInfos), {
...group4,
resultIsShow: 1,
chartType: group4.chartType || 5,
legends: dealLegends(group4.topicCountInfos),
blockTitle: '项目参与人执行任务表',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
})
];
},
dealChoice(arr) {
const [
visitHospital,
hospitalGrade,
keshi,
hospitalName,
xundian,
dayTime,
visitTimeCount
] = arr;
this.singleChoice = [
ChartConfigFn.createConfig(dealAxis(visitHospital.topicCountInfos), {
...visitHospital,
chartType: 13,
hideLegend: true,
blockTitle: '拜访医院分布'
}),
ChartConfigFn.createConfig(dealAxis(hospitalGrade.topicCountInfos), {
...hospitalGrade,
chartType: 5,
blockTitle: '医院等级分布'
}),
ChartConfigFn.createConfig(dealAxis(keshi.topicCountInfos), {
...keshi,
chartType: 2,
blockTitle: '科室分布'
}),
ChartConfigFn.createConfig(dealAxis(hospitalName.topicCountInfos), {
...hospitalName,
chartType: 1,
blockTitle: '医院职称'
}),
ChartConfigFn.createConfig(
dealAxis(
Object.entries(xundian.visitTime[0]).reduce((pre, cur) => {
const [name, arr = []] = cur;
pre = pre.concat(
arr.map(item => ({
...item,
yTopicName: name
}))
);
return pre;
}, [])
),
{
...xundian,
isGroup: true,
hideToggleAxis: true,
chartType: 5,
blockTitle: '拜访时间'
}
),
ChartConfigFn.createConfig(dealAxis(dayTime.topicCountInfos), {
...dayTime,
chartType: 1,
blockTitle: '每日时间分布'
}),
ChartConfigFn.createConfig(dealAxis(visitTimeCount.topicCountInfos), {
...visitTimeCount,
chartType: 6,
blockTitle: '拜访时长'
})
];
},
exportBi() {
window.open(this.Bi.exportBi(), '_blank');
}
},
created() {
Promise.all([
this.Bi.getBaseInfo(),
this.Bi.getFixedInfo(),
this.Bi.getTopicInfo()
])
.then(([baseInfo, fixedInfo, topicInfo]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.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>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!