Skip to content

jml0128 / xrk-bi

Go to a project
Commit 0d805885 by jml0128
Options

联调可配置场景接口

1 parent e02d81d6
Expand all
Inline Side-by-side
Showing with 502 additions and 180 deletions
package.json
......@@ -27,7 +27,8 @@
"vue-awesome-swiper": "^4.1.1",
"vue-echarts": "^6.0.0-rc.5",
"vue-photo-preview": "^1.1.3",
"vuedraggable": "^2.24.3"
"vuedraggable": "^2.24.3",
"xrk-tools": "^1.0.11"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "~4.5.0",
......
src/packages/bi/src/chart-type/bar/createBar.js
......@@ -6,9 +6,9 @@ import { dealString, dealFormatter, getInterval } from '../common';
const grid = {
containLabel: true,
left: 10,
right: 10,
right: 15,
bottom: 10,
top: 10
top: 15
};
export const createBar = (Vue, chartData, axisData, yAxisUnit, colors = []) => {
const _axisData = dealString(axisData);
......
src/packages/bi/src/commonComponents/chart-base.vue
......@@ -77,7 +77,6 @@ export default {
init() {
if (!this.myChart) {
if (this.type === 13) {
console.log(china);
registerMap('china', china);
// registerMap('chinaMapOutline', chinaMapOutline);
}
......
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-20 00:46:51
* @LastEditTime: 2021-06-30 22:36:55
-->
<template>
<div style="position:relative;" class="bi-chart-block">
......@@ -15,6 +15,7 @@
...title,
colors: chart.colors,
chartType: chart.type,
extendTypes: chart.extendTypes,
disableTypes: chart.disableTypes
}"
@change-colors="changeChartColors"
......@@ -139,7 +140,9 @@ export default {
toggleAxis() {
// 交换X轴与Y轴
const { data, axis } = this.chart;
console.log(axis);
this.chartConfig.chart['axis'] = axis.reverse();
this.chartConfig.legend['data'] = axis[1].names;
this.chartConfig.chart['data'] = data[0].reduce((pre, cur, index) => {
pre.push(
data.reduce((cPre, cCur) => {
......
src/packages/bi/src/commonComponents/chart-choice-mixin-analysis.vue
......@@ -50,47 +50,27 @@ export default {
BiBlank
},
data() {
return {
test: {
title: [
{
name: '患者年龄',
axis: ['小于18岁', '18-40岁', '18-40岁']
},
{
name: '患者发病状态',
axis: ['新发疾病', '旧病复发', '旧病复发2', '旧病复发3']
}
],
arr: [
['50%', '100%', '100%', '60%'],
['50%', '0%', '100%', '20%'],
['50%', '10%', '100%', '10%'],
['50%', '20%', '100%', '10%'],
[4, 1, 2, 5]
],
res: {
x: '0.923',
p: '0.342'
}
}
};
return {};
},
props: {
hideBtn: Boolean,
setShow: Boolean,
title: String
title: String,
data: {
type: Object,
default: () => ({})
}
},
computed: {
xLength() {
return this.test.title[0].axis.length;
return this.data.title[0].axis.length;
},
tableConfig() {
const {
title,
arr,
res: { x, p }
} = this.test;
} = this.data;
const _arr = arr.slice(0, -1);
const c = [
['', '', title[0].name, '', '', '', ''],
......
src/packages/bi/src/commonComponents/sex-icon.vue
......@@ -3,24 +3,33 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-19 23:56:39
* @LastEditTime: 2021-06-30 19:34:58
-->
<template>
<div class="bi-sex-icon">
<div class="bi-sex-icon_item">
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/boy.svg" alt="" />
<p>{{ axis[0].name }} {{ data[0][0] }}人</p>
</div>
<div class="bi-sex-icon_item">
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/girl.svg" alt="" />
<p>{{ axis[1].name }} {{ data[0][1] }}人</p>
<div>
<BiBlank height="40" :usePrint="true"></BiBlank>
<div class="bi-sex-icon">
<div class="bi-sex-icon_item">
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/boy.svg" alt="" />
<p>{{ axis[0].name }} {{ data[0][0] }}人</p>
</div>
<div class="bi-sex-icon_item">
<img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/girl.svg"
alt=""
/>
<p>{{ axis[1].name }} {{ data[0][1] }}人</p>
</div>
</div>
<BiBlank height="40" :usePrint="true"></BiBlank>
</div>
</template>
<script>
import BiBlank from './blank.vue';
export default {
name: 'bi-sex-icon',
components: { BiBlank },
props: {
data: {
type: Array,
......
src/packages/bi/src/components/cover.vue
......@@ -97,6 +97,12 @@ export default {
Swiper,
SwiperSlide
},
props: {
coverContent: {
default: () => [],
type: Array
}
},
data() {
return {
swiperOptions: {
......@@ -220,58 +226,74 @@ export default {
} catch (error) {
console.log(error);
}
}
},
mounted() {
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);
},
dealCoverContent(arr) {
const baseContent = [
{
className: 'bi-cover_title',
pos: {
top: this.isMobile ? this.dealPos(3.67) : 550,
left: this.isMobile ? this.dealPos(1.93) : 237
},
maxLength: 20
},
{
className: 'bi-cover_date',
pos: {
top: this.isMobile ? this.dealPos(7.15) : 820,
left: this.isMobile ? this.dealPos(1.92) : 237
},
maxLength: 16
},
{
className: 'bi-cover_company',
pos: {
top: this.isMobile ? this.dealPos(10.79) : 1540,
left: this.isMobile ? this.dealPos(1.92) : 237
},
maxLength: 26
}
];
this.content = baseContent.map((item, index) => {
const { name, pos } = arr[index];
name && (item.name = name);
pos && (item.pos = pos);
return item;
});
});
}
},
created() {
this.content = [
{
name: '奇正藏药医学沙龙推广项目数据报告',
className: 'bi-cover_title',
pos: {
top: this.isMobile ? this.dealPos(3.67) : 550,
left: this.isMobile ? this.dealPos(1.93) : 237
},
maxLength: 20
},
{
name: '2021/04/28期',
className: 'bi-cover_date',
pos: {
top: this.isMobile ? this.dealPos(7.15) : 820,
left: this.isMobile ? this.dealPos(1.92) : 237
},
maxLength: 16
watch: {
coverContent: {
handler(newV) {
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);
}
});
});
});
}
},
{
name: '西藏奇正藏药营销有限公司',
className: 'bi-cover_company',
pos: {
top: this.isMobile ? this.dealPos(10.79) : 1540,
left: this.isMobile ? this.dealPos(1.92) : 237
},
maxLength: 26
}
];
immediate: true
}
}
};
</script>
......
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-23 14:06:00
* @LastEditTime: 2021-06-30 16:53:40
-->
<template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
......@@ -36,7 +36,23 @@ export default {
props: {
mobile: [Number, String, Boolean],
print: [Number, String, Boolean],
projectType: [Number, String]
projectType: [Number, String],
getBaseInfo: {
type: Function,
default: () => {}
},
getFixedInfo: {
type: Function,
default: () => {}
},
getTopicInfo: {
type: Function,
default: () => {}
},
getGroupInfo: {
type: Function,
default: () => {}
}
},
components: {
BiConfigurable,
......
src/packages/bi/src/mixin/project.js
......@@ -29,7 +29,7 @@ export default {
const pageInfo = args[0];
if (typeof pageInfo === 'object') {
const { pageSize, info } = pageInfo;
console.log(pageSize, info);
// console.log(pageSize, info);
pageKey && (this[pageKey] = pageSize);
pageInfoKey && (this[pageInfoKey] = info);
} else {
......
src/packages/bi/src/mock/index.js
......@@ -29,7 +29,171 @@ export const chartConfig = () => {
}
return info;
};
const dealAxis = (arr, isGroup) => {
if (isGroup) {
console.log(JSON.stringify(arr));
const info = {
x: [],
y: [],
data: []
};
const a = arr.reduce((pre, cur) => {
if (cur.y) {
if (!pre[cur.y]) {
pre[cur.y] = [cur];
} else {
pre[cur.y].push(cur);
}
}
return pre;
}, {});
for (let y in a) {
const s = a[y].sort((itema, itemb) => {
if (itema.x < itemb.x) {
return -1;
}
});
info.y.push(y);
info.data.push(s.map(item => item.value));
info.x = s.map(item => item.x);
}
return info;
}
return {
x: arr.map(item => item.x),
y: [],
data: [arr.map(item => item.value)]
};
};
return {
createConfig: (arr, options = {}) => {
const {
blockTitle,
hideTitle,
hideChart,
hideDesc,
hideLegend,
hideDelete,
width = 1140,
height = 450,
colourGroup,
extendTypes = [],
disableTypes = [],
isDelete,
showSort,
xAxisName,
yAxisName,
legendName = '',
legends,
chartType,
isGroup,
resultIsShow,
resultSystem,
resultUser,
znResultSystem,
znResultUser,
znResultIsShow,
resultX2,
resultP
} = options;
const title = blockTitle;
const { x, y, data } = dealAxis(arr, isGroup);
const analysisData = data.map(item => {
return item.concat(
item.reduce((pre, cur) => {
return pre + cur;
}, 0)
);
});
return {
isDelete: isDelete || 0,
sort: showSort || 0,
chart: {
show: !hideChart,
type: chartType,
colors:
(typeof colourGroup === 'string' && colourGroup.split(',')) ||
colors[0],
data: data,
axis: [
{ name: xAxisName, names: x },
{ name: yAxisName, names: y }
],
width: width,
height: height,
extendTypes,
disableTypes
},
title: {
show: !hideTitle,
name: title,
hideColor: false,
hideDelete: hideDelete,
hideTypes: false
},
legend: {
show: !hideLegend,
title:
legendName &&
legendName.replace(
'${num}',
data[0].reduce((pre, cur) => {
pre += cur;
return pre;
}, 0)
),
data: legends || (isGroup ? y : x)
},
desc: {
show: !hideDesc,
setShow: !!resultIsShow,
text: resultSystem,
customText: resultUser || ''
},
analysis: {
show: isGroup,
setShow: true,
data: {
title: [
{
name: xAxisName,
axis: x
},
{
name: yAxisName,
axis: y
}
],
arr: [
...analysisData,
analysisData.reduce((pre, cur) => {
cur.forEach((item, index) => {
pre[index] = (pre[index] || 0) + item;
});
return pre;
}, [])
],
res: {
x: resultX2,
p: resultP
}
},
title: '卡方分析结果'
},
analysisDesc: {
show: isGroup,
setShow: !!znResultIsShow,
title: '智能分析',
text: znResultSystem,
customText: znResultUser,
resText: '总结可知：不同年龄患者的发病状态无显著性差异。'
}
};
},
create: (xLength, yLength, type = 1, options = {}) => {
index += 1;
const {
......@@ -40,7 +204,9 @@ export const chartConfig = () => {
hideLegend,
hideDelete,
width = 1140,
height = 450
height = 450,
extendTypes = [],
disableTypes = []
} = options;
const title = blockTitle || `${index}题目题目`;
const { x, y, data } = createData(xLength, yLength);
......@@ -57,8 +223,9 @@ export const chartConfig = () => {
{ name: `原始y轴-${index}`, names: y }
],
width: width,
height: height
// disableTypes: [3, 4]
height: height,
extendTypes,
disableTypes
},
title: {
show: !hideTitle,
......
src/packages/bi/src/project/20-configurable.vue
......@@ -4,12 +4,12 @@
-->
<template>
<div class="bi-configurable">
<BiCover></BiCover>
<BiCover :coverContent="coverContent"></BiCover>
<BiCatalogue class="bi-block" :catalogueArr="catalogueArr"></BiCatalogue>
<BiOverview
class="bi-block"
name="项目总览"
title="关于双醋瑞因胶囊产品在云南省的零售药店巡店项目2020-03月度统计报表"
:title="projectName"
:data="baseInfo"
:textWrap="true"
></BiOverview>
......@@ -56,15 +56,43 @@ import BiSingleChoice from '../components/singleChoice.vue';
import BiCoverEnd from '../components/cover-end.vue';
import BiOperate from '../components/operate.vue';
import mixin from '../mixin/index';
import mixin, { printWidth } from '../mixin/index';
/**
* dealSingleChoice、sort、setPage
*/
import project from '../mixin/project';
import { chartConfig } from '../mock/index';
import { date, base } 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];
};
export default {
name: 'bi-configurable',
mixins: [mixin, project],
......@@ -86,6 +114,7 @@ export default {
singleChoice: [],
singleChoiceMixin: [],
missionData: [],
coverContent: [],
questionInfo: [
{
name: '总参与题目',
......@@ -99,68 +128,9 @@ export default {
unit: '人'
}
],
baseInfo: [
[
{
name: '项目名称',
value: '在山西地区的零售药店巡店项目'
},
{
name: '服务商',
value: '北京医洋科技有限公司'
},
{
name: '任务月度',
value: '2020-03'
}
],
[
{
name: '任务量',
value: '222'
},
{
name: '项目执行人数',
value: '2131人'
},
{
name: '数据收集',
value: '415条'
}
],
[
{
name: '参与调研人数',
value: '213123'
},
{
name: '报表生成时间',
value: '2020-10-2'
}
]
],
textData: [
[
{
name: '总参与题目：',
value: '20题'
},
{
name: '当前选取报告输出题目：',
value: '20题'
}
],
[
{
name: '总参与数(人或者机构):',
value: '1000'
},
{
name: '分析维度：',
value: '主体分析+交叉分析'
}
]
]
projectName: '',
baseInfo: [],
textData: []
};
},
computed: {
......@@ -226,44 +196,199 @@ export default {
}
},
methods: {
setData() {
this.singleChoice = [
ChartConfigFn.create(60, 0, 1),
ChartConfigFn.create(60, 0, 2),
ChartConfigFn.create(20, 0, 5),
ChartConfigFn.create(25, 0, 6),
ChartConfigFn.create(15, 0, 11)
dealPos(dis) {
return dis * (this.isPrint ? printWidth : this.baseFontSize);
},
setData() {},
dealBaseInfo(info) {
const {
title,
titlePosition,
aspEnterpriseNameWrite,
aspNamePosition,
styleConfigureSettlementTime,
styleConfigureSettlementTimePosition,
projectName = '-',
aspEnterpriseName,
settlementTime,
taskSum,
executePeopleNumber,
dataCollectNumber,
examinePeopleNumber,
createDt,
totalTopicNum,
chooseTopicNum,
isContrainGroupAnalyse,
isContrainSingleAnalyse
} = info;
this.projectName = `${projectName}统计报表`;
this.coverContent = [
{
name: title,
pos: titlePosition
},
{
name: styleConfigureSettlementTime,
pos: styleConfigureSettlementTimePosition
},
{
name: aspEnterpriseNameWrite,
pos: aspNamePosition
}
];
this.singleChoiceMixin = [
ChartConfigFn.create(4, 4, 1),
ChartConfigFn.create(6, 6, 2),
ChartConfigFn.create(8, 8, 3),
ChartConfigFn.create(10, 10, 4)
this.baseInfo = [
[
{
name: '项目名称',
value: projectName
},
{
name: '服务商',
value: aspEnterpriseName
},
{
name: '提交时间',
value: settlementTime
}
],
[
{
name: '任务量',
value: taskSum
},
{
name: '项目执行人数',
value: `${executePeopleNumber}人`
},
{
name: '数据收集',
value: `${dataCollectNumber}条`
}
],
[
{
name: '参与调研人数',
value: `${examinePeopleNumber}人`
},
{
name: '报表生成时间',
value: date.dateFormat(createDt, 'Y-M-D')
}
]
];
this.textData = [
[
{
name: '总参与题目：',
value: `${totalTopicNum}题`
},
{
name: '当前选取报告输出题目：',
value: `${chooseTopicNum}题`
}
],
[
{
name: '总参与数(人或者机构):',
value: executePeopleNumber
},
{
name: '分析维度：',
value: [
{ show: isContrainSingleAnalyse, name: '主体分析' },
{ show: isContrainGroupAnalyse, name: '交叉分析' }
]
.filter(item => item.show == 1)
.map(item => item.name)
.join('+')
}
]
];
},
dealFixedInfo(infoArr) {
this.missionData = [
ChartConfigFn.create(4, 0, 12, {
ChartConfigFn.createConfig(dealAxis(infoArr[0].fixedCountInfos), {
...infoArr[0],
chartType: infoArr[0].chartType || 12,
legends: dealLegends(infoArr[0].fixedCountInfos),
blockTitle: '参与任务执行的性别分布',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
hideDelete: true,
width: 520,
height: 350
height: 350,
disableTypes: [3, 4],
extendTypes: [12]
}),
ChartConfigFn.create(4, 0, 1, {
ChartConfigFn.createConfig(dealAxis(infoArr[1].fixedCountInfos), {
...infoArr[1],
chartType: infoArr[1].chartType || 1,
legends: dealLegends(infoArr[1].fixedCountInfos),
blockTitle: '执行任务的年龄段',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
hideDelete: true,
width: 520,
height: 350
height: 350,
disableTypes: [3, 4]
}),
ChartConfigFn.create(4, 0, 1, {
ChartConfigFn.createConfig([], {
...infoArr[1],
hideLegend: true,
hideChart: true,
hideTitle: true
}),
ChartConfigFn.create(4, 0, 1, { hideDelete: true, height: 400 })
ChartConfigFn.createConfig(dealAxis(infoArr[2].fixedCountInfos), {
...infoArr[2],
chartType: infoArr[1].chartType || 2,
legends: dealLegends(infoArr[2].fixedCountInfos),
blockTitle: '项目参与人完成任务区间分布',
legendName: '总参与项目执行人数${num}人',
hideDelete: true,
height: 400,
disableTypes: [3, 4]
})
];
},
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]
});
});
},
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])
});
});
}
},
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 || []);
});
window.status = 'completed';
}
};
......
webpack.config.js
......@@ -6,7 +6,7 @@
var path = require('path');
var webpack = require('webpack');
var entry =
process.env.NODE_ENV === 'development'
process.env.NODE_ENV !== 'development'
? './src/main.js'
: './src/lib/index.js';
module.exports = {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!