Skip to content

jml0128 / xrk-bi

Go to a project
Commit 24b7d192 by jml0128
Options

fix

1 parent 8ed0ffea
Inline Side-by-side
Showing with 288 additions and 64 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-07-01 13:28:14
* @LastEditTime: 2021-07-03 15:44:17
-->
<template>
<div style="position:relative;" class="bi-chart-block">
......@@ -21,6 +21,7 @@
@change-colors="changeChartColors"
@change-chartkey="changeChartType"
@change-delete="deleteChart"
@change-title="changeTitle"
:showGuide="showGuide"
></BiChartTitle>
<BiChartChoiceMinxinToggleAxis
......@@ -114,6 +115,11 @@ export default {
}
},
methods: {
changeTitle(title) {
console.log(title);
this.chartConfig.title['name'] = title;
console.log(`${this.title.name}-图表-标题`, title);
},
changeChartColors(colors) {
this.chartConfig.chart['colors'] = colors;
console.log(`${this.title.name}-图表-颜色`, colors);
......
src/packages/bi/src/commonComponents/chart-choice-mixin-toggle-axis.vue
......@@ -9,10 +9,14 @@
{{ dealAxis.join('与') }}
</div>
<div class="bi-chart-choice-mixin-toggle-axis_text">
<span>X轴：</span>
<span>{{ dealAxis[0] }}</span>
<span style="margin-left:38px;">Y轴：</span>
<span>{{ dealAxis[1] }}</span>
<div>
<span>X轴：</span>
<span>{{ dealAxis[0] }}</span>
</div>
<div style="margin-top:10px;">
<span>Y轴：</span>
<span>{{ dealAxis[1] }}</span>
</div>
</div>
<el-button icon="el-icon-sort" v-if="!isPrint" @click="toggle">
切换
......@@ -63,13 +67,14 @@ export default {
margin-bottom: 25px;
}
&_text {
height: 40px;
line-height: 40px;
max-width: 1026px;
min-height: 40px;
line-height: 1.3;
border: 1px solid #efefef;
border-radius: 4px;
display: inline-block;
vertical-align: top;
padding: 0 25px;
padding: 10px 25px;
margin-right: 16px;
span {
font-size: 14px;
......
src/packages/bi/src/commonComponents/chart-title.vue
......@@ -5,7 +5,16 @@
<template>
<div class="bi-chart-title">
<div class="bi-chart-title_hr" v-if="!hideHr"></div>
<div class="bi-chart-title_name">
<div
class="bi-chart-title_name"
contenteditable
@input="
event => {
$emit('change-title', event.target.innerText);
}
"
>
<!-- {{ `${name}`.slice(0, 36) }}{{ `${name}`.length > 36 ? '...' : '' }} -->
{{ name }}
</div>
<div class="bi-chart-title_btn_group" v-if="!isPrint">
......@@ -171,24 +180,28 @@ export default {
<style lang="scss" scoped>
.bi-chart-title {
height: 82px;
// min-height: 82px;
background: #f9fafc;
border-radius: 4px;
position: relative;
padding-left: 16px;
font-size: 0;
padding-top: 20px;
padding-bottom: 20px;
&_hr {
width: 5px;
height: 26px;
background: #1989fa;
position: absolute;
left: 0;
top: 28px;
top: 50%;
margin-top: -13px;
}
&_name {
font-size: 22px;
color: #2a3558;
line-height: 82px;
line-height: 1.3;
max-width: 72%;
&.mobile {
font-size: 0.26rem;
}
......@@ -211,7 +224,8 @@ export default {
&_group {
position: absolute;
right: 16px;
top: 20px;
top: 50%;
margin-top: -21px;
&_item {
& + .bi-chart-title_btn_group_item {
margin-left: 8px;
......
src/packages/bi/src/commonComponents/peopleSvg/boy.vue 0 → 100644
<!--
* @Description:
* @Date: 2021-07-03 16:08:38
-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="126.833"
height="129.325"
viewBox="0 0 126.833 129.325"
>
<g id="组_20" data-name="组 20" transform="translate(1.504)">
<path
id="路径_13"
data-name="路径 13"
d="M2204.131,719.812s5.411-3.772,8.035,1.476-4.592,14.1-10.167,10.495C2202,731.783,2203.476,723.42,2204.131,719.812Z"
transform="translate(-2120.41 -678.665)"
fill="#fff"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_14"
data-name="路径 14"
d="M2054.59,719.812s-5.411-3.772-8.035,1.476,4.592,14.1,10.167,10.495C2056.722,731.783,2055.246,723.42,2054.59,719.812Z"
transform="translate(-2015.572 -678.665)"
fill="#fff"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_15"
data-name="路径 15"
d="M2074.758,606.208s6.887-15.087,22.63-6.559c0,0,16.726,5.247,15.087,22.3l-2.933,14.957q-.347,1.769-.565,3.559l-.8,6.57a38.315,38.315,0,0,1-3.8,12.7,18.589,18.589,0,0,1-1.737,2.885s-3.608,15.742-18.366,14.1c0,0-8.527-1.312-12.791-13.447a33.681,33.681,0,0,1-5.575-12.135l-2.624-14.1-3.28-19.35S2061.312,602.6,2074.758,606.208Z"
transform="translate(-2024.981 -597.038)"
:fill="color"
/>
<path
id="路径_17"
data-name="路径 17"
d="M2000.215,798.006V819.98l-27.221,13.775s-21.318,6.887-19.678,27.549"
transform="translate(-1953.225 -732.097)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_18"
data-name="路径 18"
d="M2188.249,790.2l-.749,29.789,27.221,13.775s21.318,6.887,19.678,27.549"
transform="translate(-2110.665 -732.108)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_19"
data-name="路径 19"
d="M2122.888,870.5s-17.054,24.27-37.388,0"
transform="translate(-2042.118 -780.813)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_20"
data-name="路径 20"
d="M2115.875,879s-19.842,32.633-48.375.164"
transform="translate(-2030.022 -786.525)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_16"
data-name="路径 16"
d="M2081.782,650s7.161,8.406,18.679,7.783,15.255,6.226,15.255,6.226l-.51,7.65c-.06.9-.1,1.794-.127,2.692-.135,4.513-1.456,22.888-13.995,26.7-14.321,4.359-19.006-4.565-21.481-7.783-1.682-2.186-3-6.733-3.955-11.385A82.368,82.368,0,0,1,2074,665.33v-2.565S2082.405,653.736,2081.782,650Z"
transform="translate(-2033.274 -631.233)"
fill="#fff"
/>
</g>
</svg>
</template>
<script>
export default {
name: 'boy-svg',
props: {
color: {
default: '#1989fa',
type: String
}
}
};
</script>
<style></style>
src/packages/bi/src/commonComponents/peopleSvg/girl.vue 0 → 100644
<!--
* @Description:
* @Date: 2021-07-03 16:08:38
-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="110.172"
height="129.151"
viewBox="0 0 110.172 129.151"
>
<g id="组_19" data-name="组 19" transform="translate(1.182)">
<path
id="路径_7"
data-name="路径 7"
d="M-495.453,769.709s2.544-3.18,2.862-5.406c0,0-7.314,8.9-13.993,8.586,0,0-28.622,7-39.116-8.586a11.4,11.4,0,0,0,2.544,5.088s-13.039.318-18.127-15.9c0,0-2.544-6.042,2.862-19.4,0,0,7.315-11.767,9.223-18.445,0,0,11.449-31.8,46.113-16.537,0,0,7,3.5,11.449,13.039,0,0,4.77,9.54,8.268,16.855C-483.368,729-462.061,760.169-495.453,769.709Z"
transform="translate(575.116 -694.964)"
:fill="color"
/>
<path
id="路径_8"
data-name="路径 8"
d="M-501.41,791h40.07s.318,9.859,2.544,11.767c0,0-.954,29.258-21.307,29.258S-503,810.081-503,803.085C-503,803.085-500.774,794.5-501.41,791Z"
transform="translate(534.961 -760.459)"
fill="#fff"
/>
<path
id="路径_9"
data-name="路径 9"
d="M-603.5,977.743c.318-19.4,19.4-27.668,19.4-27.668l21.943-12.4V920.5c13.357,10.972,24.805,0,24.805,0v17.173l21.943,12.4s19.081,8.268,19.4,27.668Z"
transform="translate(603.5 -848.775)"
fill="#fff"
/>
<path
id="路径_10"
data-name="路径 10"
d="M-561.158,921v17.173l-21.943,12.4s-19.081,8.268-19.4,27.667"
transform="translate(602.818 -849.116)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_11"
data-name="路径 11"
d="M-354.158,977.243c-.318-19.4-19.4-27.667-19.4-27.667l-21.943-12.4V920"
transform="translate(461.648 -848.434)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
<path
id="路径_12"
data-name="路径 12"
d="M-465.313,1002.74s-27.032,22.655-56.265,0"
transform="translate(547.631 -904.862)"
fill="none"
:stroke="color"
stroke-miterlimit="10"
stroke-width="3"
/>
</g>
</svg>
</template>
<script>
export default {
name: 'boy-svg',
props: {
color: {
default: '#ff846e',
type: String
}
}
};
</script>
<style></style>
src/packages/bi/src/commonComponents/sex-icon.vue
......@@ -3,22 +3,24 @@
* @Author: jml
* @Date: 2021-03-24 10:22:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-30 19:34:58
* @LastEditTime: 2021-07-03 16:20:52
-->
<template>
<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>
<!-- <img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/boy.svg" alt="" /> -->
<boy-svg :color="colors[0]" />
<p>{{ axis[0].names[0] }}性{{ data[0][0] }}人</p>
</div>
<div class="bi-sex-icon_item">
<img
<!-- <img
src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/girl.svg"
alt=""
/>
<p>{{ axis[1].name }} {{ data[0][1] }}人</p>
/> -->
<girl-svg :color="colors[1]" />
<p>{{ axis[0].names[1] }}性{{ data[0][1] }}人</p>
</div>
</div>
<BiBlank height="40" :usePrint="true"></BiBlank>
......@@ -27,9 +29,11 @@
<script>
import BiBlank from './blank.vue';
import boySvg from './peopleSvg/boy.vue';
import girlSvg from './peopleSvg/girl.vue';
export default {
name: 'bi-sex-icon',
components: { BiBlank },
components: { BiBlank, girlSvg, boySvg },
props: {
data: {
type: Array,
......@@ -37,6 +41,14 @@ export default {
},
axis: {
type: Array,
default: () => [
{
names: []
}
]
},
colors: {
type: Array,
default: () => []
}
},
......
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-07-02 11:49:58
* @LastEditTime: 2021-07-03 16:44:26
-->
<template>
<div class="bi-table">
......@@ -86,9 +86,9 @@ export default {
dealData() {
const { data, isSingle, title, axis } = this;
return [
[isSingle ? '题干' : [axis[0].name, axis[1].name], ...axis[0].names],
[isSingle ? title : [axis[0].name, axis[1].name], ...axis[0].names],
...data.map((item, index) => {
return [isSingle ? title : axis[1].names[index], ...item];
return [isSingle ? '数量' : axis[1].names[index], ...item];
})
];
}
......
src/packages/bi/src/components/catalogue.vue
......@@ -29,14 +29,8 @@
:key="cIndex"
>
<div>
<p
class="bi-catalogue_list_item_child_item_name"
style="float:left;"
>
<span style="margin-right:5px;">
{{ `${index + 1}.${cIndex + 1}` }}
</span>
{{ name }}
<p class="bi-catalogue_list_item_child_item_name">
<span>{{ `${index + 1}.${cIndex + 1}` }}{{ name }}</span>
</p>
<div class="bi-catalogue_list_item_child_item_hr"></div>
<span class="bi-catalogue_list_item_child_item_page">
......@@ -142,17 +136,18 @@ export default {
&_item {
padding: 30px 0;
font-size: 21px;
position: relative;
page-break-inside: avoid;
& > div {
position: relative;
}
&_hr {
width: 1096px;
height: 30px;
position: relative;
position: absolute;
top: 50%;
z-index: 1;
&::after {
content: '';
position: absolute;
left: 0;
top: 15px;
display: block;
width: 1096px;
height: 0;
border-top: 1px dashed #707070;
......@@ -160,24 +155,27 @@ export default {
}
&_name {
height: 30px;
line-height: 30px;
background: #fff;
position: absolute;
left: 0;
top: 30px;
z-index: 1;
padding-right: 20px;
max-width: 950px;
position: relative;
z-index: 2;
span {
background: #fff;
padding-right: 20px;
position: relative;
z-index: 2;
display: inline-block;
}
}
&_page {
height: 30px;
line-height: 30px;
padding-left: 10px;
background: #fff;
position: absolute;
right: 0;
top: 30px;
top: 50%;
z-index: 2;
margin-top: -15px;
}
}
}
......
src/packages/bi/src/components/cover.vue
......@@ -304,6 +304,11 @@ export default {
}
},
immediate: true
},
coverId: {
handler(newV) {
this.localIndex = this.coverList.findIndex(item => item.id == newV);
}
}
}
};
......
src/packages/bi/src/main.vue
......@@ -3,11 +3,11 @@
* @Author: jml
* @Date: 2021-02-26 15:38:10
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-02 14:42:12
* @LastEditTime: 2021-07-03 16:03:42
-->
<template>
<div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
<template v-if="projectType == 20">
<template v-if="[5, 7, 20].includes(+projectType)">
<BiConfigurableMobile v-if="mobile"></BiConfigurableMobile>
<BiConfigurable v-else></BiConfigurable>
</template>
......
src/packages/bi/src/mock/index.js
......@@ -32,7 +32,6 @@ export const chartConfig = () => {
const dealAxis = (arr, isGroup) => {
if (isGroup) {
console.log(JSON.stringify(arr));
const info = {
x: [],
y: [],
......@@ -98,7 +97,7 @@ export const chartConfig = () => {
znResultSystem,
znResultUser,
znResultIsShow,
summary,
resultX2,
resultP
} = options;
......@@ -192,7 +191,7 @@ export const chartConfig = () => {
title: '智能分析',
text: znResultSystem,
customText: znResultUser,
resText: '总结可知：不同年龄患者的发病状态无显著性差异。'
resText: `总结可知：${summary}`
},
baseInfo: { ...options }
};
......
src/packages/bi/src/project/20-configurable.vue
......@@ -129,10 +129,10 @@ export default {
{
name: '项目执行任务模块',
child: [
{
name: '任务量分析',
page: page1 + 1
},
// {
// name: '任务量分析',
// page: page1 + 1
// },
{
name: '执行任务人员画像',
page: page1 + 1
......@@ -310,7 +310,7 @@ export default {
ChartConfigFn.createConfig(dealAxis(group1.fixedCountInfos), {
...group1,
chartType: group1.chartType || 12,
legends: dealLegends(group1.fixedCountInfos),
legends: dealLegends(group1.fixedCountInfos, '性'),
blockTitle: '参与任务执行的性别分布',
legendName: '总参与项目执行人数${num}人',
hideDesc: true,
......@@ -333,15 +333,16 @@ export default {
disableTypes: [3, 4]
}),
ChartConfigFn.createConfig([], {
...group3,
...group4,
resultSystem: `${group1.resultSystem}，${group2.resultSystem}`,
hideLegend: true,
hideChart: true,
hideTitle: true
}),
ChartConfigFn.createConfig(dealAxis(group4.fixedCountInfos), {
...group4,
chartType: group4.chartType || 2,
legends: dealLegends(group4.fixedCountInfos),
ChartConfigFn.createConfig(dealAxis(group3.fixedCountInfos), {
...group3,
chartType: group3.chartType || 2,
legends: dealLegends(group3.fixedCountInfos),
blockTitle: '项目参与人完成任务区间分布',
legendName: '总参与项目执行人数${num}人',
hideDelete: true,
......@@ -374,7 +375,7 @@ export default {
xAxisName: item.title,
yAxisName: item.secondTitle,
isGroup: true,
blockTitle: `${item.title}与${item.secondTitle}`,
blockTitle: `${item.xFactor}因素与${item.yFactor}因素相关性分析`,
chartType:
item.chartType || randomType([1, 2, 3, 4, 5, 6, 9, 10, 11])
});
......
src/packages/bi/src/project/tools.js
......@@ -11,13 +11,13 @@ export const dealAxis = (arr = []) => {
value: item.num || item.countNum || 0
}));
};
export const dealLegends = (arr = []) => {
export const dealLegends = (arr = [], unit = '') => {
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.genderType || cur.xTopicName}${unit}${cur.num ||
cur.countNum ||
0}人，占比${base.numberFormat(
total ? (cur.num || cur.countNum || 0) / total : 0,
......@@ -44,6 +44,7 @@ export const chartConfigToSetInfo = (chartConfigs, biInfoId) => {
fixedId: id,
type: type,
chartType: +chart.type,
customTitle: item.title.name,
colourGroup: Array.isArray(chart.colors)
? chart.colors.join(',')
: chart.colors,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!