renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
1.修改大屏问题及添加新需求
This commit is contained in:
weixin
2025-09-26 18:57:17 +08:00
parent f024615260
commit 7154314e93
21 changed files with 766 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun/centerMap.vue
+157 -43
View File
@@ -23,7 +23,8 @@
<div class="reset-map" :class="[themeType]" @click="resetMap">
<RedoOutlined title="重置地图" />
</div>
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
<!-- <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container" :class="['no-top']">-->
<div v-show="showRoutePanel" class="line-container" :class="[currentIndex !== list.length - 1 ? 'no-top' : '']">
<div v-show="routeList.length > 0" class="has-data">
<div class="line-title"> {{ panelTitle }}</div>
<div class="line-content">
@@ -68,7 +69,7 @@
<div>
<img :src="noLocationPng" alt="" />
</div>
<div> 未获取到当前救助人员的位置信息 </div>
<div> 未获取到当前求助信息的位置信息 </div>
</div>
</div>
</div>
@@ -97,6 +98,8 @@
const formState = ref({
start: '',
end: '',
startPosition: [],
endPosition: [],
});
// 1 aed 2 健康小屋 3 油田医院 4 救护车
const numList = reactive([useStore.getTypeThree, useStore.getTypeOne, useStore.getTypeFive, useStore.getTypeFour]);
@@ -127,14 +130,17 @@
type: Boolean,
default: () => false,
},
userData: {
type: Object,
default: () => {},
},
});
const showRoutePanel = ref(false);
const panelTitle = ref();
const level = ref(0);
const routeList = ref([]);
const routeList = ref<any[]>([]);
const emits = defineEmits(['clearHospitalList', 'showRestB', 'handleDetail']);
let placeSearch = null;
let driving = null;
let placeSearch: any = null;
watch(
() => props.showHospitalList,
(v) => {
@@ -169,11 +175,11 @@
$bus.on(earlyWarning, (params) => {
drawMarker(params);
});
document.addEventListener('click', (e) => {
document.addEventListener('click', (e: any) => {
let t = e.target.closest('.viewBtn');
if (t) {
if (t.id) {
handleClcikDetail(JSON.parse(t.id));
handleClickDetail(JSON.parse(t.id));
}
}
});
@@ -185,17 +191,20 @@
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
formState.value.start = poi.name;
formState.value.startPosition = [lng, lat];
Map.createSMarker([lng, lat]);
Map.map.setZoom(15);
}
});
}
function endSelect(e: any) {
placeSearch.search(e.poi.name, function (status, result) {
if (status === 'complete' && result.poiList.pois.length > 0) {
const poi = result.poiList.pois[0]; // 取第一个结果
const { lat, lng } = poi.location;
formState.value.end = poi.name;
formState.value.endPosition = [lng, lat];
Map.createEMarker([lng, lat]);
Map.map.setZoom(15);
}
@@ -205,7 +214,7 @@
function showDrivingLine(item) {
nextTick(() => {
panelTitle.value = '全程' + item.driveTime + item.distance;
routeList.value = item.routeList?.map((item) => item?.instruction);
routeList.value = item.routeList?.map((item: any) => item?.instruction);
if (item.lon) {
Map.clearNaviLine();
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
@@ -221,14 +230,46 @@
function removeInput() {
formState.value.start = '';
formState.value.startPosition = [];
formState.value.end = '';
formState.value.endPosition = [];
searchFlag.value = false;
Map.startMarker && Map.startMarker?.setMap(null);
Map.endMarker && Map.endMarker?.setMap(null);
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
}
function changeTab(item: any, i: number) {
closeDrivingElement();
currentIndex.value = i;
closeDrivingElement();
tab(item);
if (item.hasOwnProperty('type')) {
formState.value.startPosition = [];
formState.value.endPosition = [];
emits('showRestB');
} else {
setInfoByUserData(props.userData);
}
}
function setInfoByUserData(data: any) {
if (data?.address) {
formState.value.start = data.address;
formState.value.startPosition = [data?.lon, data?.lat];
} else {
if (data?.lon && data?.lat) {
formState.value.startPosition = [data?.lon, data?.lat];
Map.getAddressByPoint([data?.lon, data?.lat])
.then((res: any) => {
formState.value.start = res;
})
.catch((err) => {
console.log(err);
formState.value.start = '';
});
}
}
}
function tab(item: any) {
@@ -242,7 +283,7 @@
tab(item);
}
function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
async function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
showRoutePanel.value = false;
panelTitle.value = '';
if (!formState.value.start) {
@@ -251,44 +292,83 @@
if (!formState.value.end) {
return message.warn('请输入终点');
}
getSearch(formState.value);
}
function getSearch({ startPosition, endPosition, start, end }) {
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
const distance = Map.getDistance(startPosition, endPosition);
searchFlag.value = true;
// let map = new Map.aMap.Map('container', {
// resizeEnable: true,
// center: [116.397428, 39.90923], //地图中心点
// zoom: 13, //地图显示的缩放级别
// });
driving = new Map.aMap.Driving({
map: Map.map,
panel: 'panel',
});
driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制驾车路线完成');
if (distance > 2000) {
Map.driving = new Map.aMap.Driving({
map: Map.map,
panel: 'panel',
});
Map.driving.search([{ keyword: start }, { keyword: end }], function (status: any) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制驾车路线完成');
searchFlag.value = false;
} else {
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(Map.driving, 'complete', (res: any) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
} else {
if (data.info == 'OK') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
} else {
Map.walking = new Map.aMap.Walking({
map: Map.map,
panel: 'panel',
});
Map.walking.search([{ keyword: start }, { keyword: end }], function (status: any) {
// result 即是对应的步行导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
// console.log('绘制步行路线完成');
searchFlag.value = false;
} else {
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(Map.walking, 'complete', (res: any) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
}
});
Map.aMap.Event.addListener(driving, 'complete', (res) => {
const data = JSON.parse(JSON.stringify(res));
searchFlag.value = false;
if (data.info == 'OK') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
if (data.info == 'ok') {
const { routes } = data;
setTitle(routes[0]);
let arr = [];
arr.push(data.originName);
routes[0].steps.map((item: any) => {
arr.push(item.instruction);
});
arr.push(data.destinationName);
showRoutePanel.value = true;
routeList.value = arr;
}
});
}
}
async function getMapData(type, params = { type: '' }) {
async function getMapData(type: any, params = { type: '' }) {
try {
const { code, result } = await mapApiSwitch(type, params);
if (!params.type) {
@@ -327,7 +407,7 @@
// const viewBtn = document.getElementById(val.id);
// viewBtn.onclick = () => {
// handleClcikDetail(val);
// handleClickDetail(val);
// };
},
true
@@ -342,15 +422,20 @@
}
function closeDrivingElement() {
if (driving) driving.clear();
Map.clearNavigationElements();
Map.driving && Map.driving.clear();
Map.walking && Map.walking.clear();
if (currentIndex.value !== list.value.length - 1) {
Map.clearNavigationElements();
} else {
Map.clearNaviLine();
}
formState.value.start = '';
formState.value.end = '';
showRoutePanel.value = false;
emits('clearHospitalList');
}
function handleClcikDetail(res) {
function handleClickDetail(res: any) {
emits('handleDetail', res);
}
@@ -389,12 +474,27 @@
function resetMap() {
Map.clearSOrE();
closeDrivingElement();
removeInput();
changeTab(list.value[currentIndex.value === 4 ? 0 : currentIndex.value], currentIndex.value);
emits('showRestB');
}
function newResetMap() {
Map.clearSOrE();
closeDrivingElement();
removeInput();
tab(currentIndex.value);
}
function setStartPosition(data: any) {
setInfoByUserData(data);
}
defineExpose({
resetMap,
newResetMap,
setStartPosition,
getSearch,
});
</script>
@@ -668,11 +768,19 @@
padding: 9px 18px;
min-height: 200px;
max-height: 473px;
overflow: auto;
overflow: hidden;
background: #0a1d36;
border-radius: 2px;
display: flex;
flex-direction: column;
//border: 1px solid #1b7ef2;
.has-data {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
}
.line-title {
margin-bottom: 9px;
font-size: 14px;
@@ -682,6 +790,8 @@
}
.line-content {
flex: 1;
overflow: auto;
font-size: 12px;
color: var(--cardFontColor);
@@ -785,4 +895,8 @@
}
}
}
.no-top {
top: 50px !important;
}
</style>
src/views/indexSun/indexSun.api.ts
+4
View File
@@ -21,6 +21,8 @@ enum Api {
nearResources = '/health-emergency/emergency/LargeScreenNew/nearResources',
todayEmergencyList = '/health-emergency/emergency/LargeScreenNew/todayEmergencyList',
healthArchives = '/health-emergency/emergency/LargeScreenNew/healthArchives',
contactList = '/health-system/sys/api/emergencyContact/contactList',
careUser = '/health-emergency/emergency/LargeScreenNew/careUser',
}
export const statisticsNewApi = (params: any) => post(Api.statisticsNew, params);
@@ -35,6 +37,8 @@ export const twoRNApi = (params: any) => get(Api.twoRN, params);
export const nearResourcesApi = (params: any) => get(Api.nearResources, params);
export const todayEmergencyListApi = (params: any) => post(Api.todayEmergencyList, params);
export const healthArchivesApi = (params: any) => get(Api.healthArchives, params);
export const contactListApi = (params: any) => get(Api.contactList, params);
export const careUserApi = (params: any) => get(Api.careUser, params);
export const threeRModalApi = (params: any) => post(Api.threeRModal, params);
export const twoRModal1Api = (params: any) => post(Api.twoRModal1, params);
src/views/indexSun/indexSun.ts
+92 -2
View File
@@ -2,6 +2,7 @@ import * as echarts from 'echarts';
import { initatorTypee, isTrueOfFalse, SexType, sexTypeList, sexTypeListNew } from '/@/utils/settings.ts';
import { getDictByCode2 } from '/@/views/index.api.ts';
import dayjs from 'dayjs';
import { h } from 'vue';
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
export const legend2 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
@@ -44,7 +45,7 @@ export function getClassCharts(dx: any, dy: any, m: any) {
// nameGap: 10,
// nameRotate: 0, // 设置旋转角度，0 表示水平
nameTextStyle: {
fontSize: 12,
fontSize: 10,
color: '#65C6E7',
left: 100,
},
@@ -56,7 +57,7 @@ export function getClassCharts(dx: any, dy: any, m: any) {
type: 'solid',
},
},
interval: 25, // 步长
// interval: 25, // 步长
max: m,
min: 0, // 起始 - 设置y轴刻度的最小值
axisLabel: {
@@ -869,9 +870,98 @@ export const oneRNewColumns = [
}
},
},
{
title: '应急时间',
dataIndex: 'time',
key: 'time',
},
{
title: '详细地址',
dataIndex: 'd',
key: 'd',
ellipsis: true,
},
{
title: '操作',
dataIndex: 'cz',
key: 'cz',
},
];
export const monitorColumns = [
{
title: '姓名',
dataIndex: 'realName',
key: 'realName',
},
{
title: '单位名称',
dataIndex: 'orgName1',
key: 'orgName1',
},
{
title: '部门名称',
dataIndex: 'orgName2',
key: 'orgName2',
},
{
title: '手机号码',
dataIndex: 'phone',
key: 'phone',
width: 100,
},
{
title: '事件类型',
dataIndex: 'eventType_dictText',
key: 'eventType_dictText',
width: 100,
},
{
title: '异常值',
dataIndex: 'dataValue',
key: 'dataValue',
width: 80,
},
{
title: '详细地址',
dataIndex: 'address',
key: 'address',
customRender: ({ record }) => {
return !record?.address ? h('div', { style: { color: 'red' } }, record?.gpsErrorMsg) : record?.address;
},
ellipsis: true,
},
{
title: '预警时间',
dataIndex: 'warnTime',
key: 'warnTime',
},
];
export const contactListColumns = [
{
title: '联系人姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '关系',
dataIndex: 'familyRelation_dictText',
key: 'familyRelation_dictText',
},
{
title: '联系人电话',
dataIndex: 'phone',
key: 'phone',
},
{
title: '身份证号',
dataIndex: 'idCard',
key: 'idCard',
customRender: ({ text }) => {
if (text) {
return text.substring(0, 6) + '********' + text.substring(14);
}
return '-';
},
},
];
src/views/indexSun/oneRightNew.vue
+141 -29
View File
@@ -1,7 +1,7 @@
<template>
<div class="one-r-box">
<div class="title">
<div>救助信息</div>
<div>求助信息</div>
<!-- <div class="top-button-d">-->
<a-button size="small" class="title-button title-button-one" @click="handleView">今日应急</a-button>
@@ -10,9 +10,9 @@
<template v-if="props.userData && Object.keys(props.userData).length > 0">
<div class="basic-info">
<span>{{ userData.realName }}</span>
<a-button v-if="props.userData && Object.keys(props.userData).length > 0" size="small" class="title-button" @click="handleArchives"
>健康档案</a-button
>
<a-button v-if="props.userData && Object.keys(props.userData).length > 0" size="small" class="title-button" @click="handleArchives">
健康档案
</a-button>
</div>
<div class="emer-top-d-outer">
<div class="emer-top-d">
@@ -39,14 +39,14 @@
<div class="emer-item-d">
<div>当前位置：</div>
<div class="emer-item-d-t" :style="{ color: !userData?.lon || !userData?.lat ? '#F24439' : '' }">
{{ !userData?.lon || !userData?.lat ? '未获取到位置信息' : locationInfo }}
{{ !userData?.address ? (!userData?.lon || !userData?.lat ? '未获取到位置信息' : locationInfo) : userData?.address }}
</div>
</div>
</div>
</div>
<div class="title title-two">
<span>联系人</span>
<a-button size="small" class="title-button">紧急联系人</a-button>
<a-button size="small" class="title-button" @click="handleEmer">紧急联系人</a-button>
</div>
<div class="emer-info-outer">
<div class="emer-info">
@@ -77,26 +77,62 @@
<Empty class="empty-d" :description="'暂无救助人员'" />
</template>
<Dialog :openVis="openInfo" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
<Dialog :openVis="openInfo" width="30%" title="健康档案" @close="handlePoliceClose">
<template #container>
<div class="police-con" :class="[themeType]">
<Row style="font-size: 14px; font-weight: bold"> 个人信息 </Row>
<Row>
<Col :span="8">姓名：{{ archives?.realName || '--' }}</Col>
<Col :span="8">性别：{{ archives?.sex_dictText || '--' }}</Col>
<Col :span="8">年龄：{{ archives?.age || '--' }}</Col>
</Row>
<Row>
<Col :span="8">二级单位：{{ archives?.orgName2 || '--' }}</Col>
<Col :span="8">部门：{{ archives?.orgName || '--' }}</Col>
<Col :span="8">手机号码：{{ archives?.phone || '--' }}</Col>
</Row>
<Row style="font-size: 14px; font-weight: bold"> 健康信息 </Row>
<Row> 异常事件：{{ archives?.eventType_dictText || '--' }} </Row>
<Row>
<Col :span="8">异常值：{{ archives?.dataValue || '--' }}</Col>
<Col :span="16">发生时间：{{ archives?.warnTime || '--' }}</Col>
<Row class="open-info-top-title">
<div class="title-left"></div>
六大健康指标
<div class="title-right"></div>
</Row>
<div class="open-info-body">
<div>
<div class="item-d">
<div class="item-label">BMI：</div><div class="item-value">{{ archives?.bmi || '-' }}</div>
</div>
<div class="item-d">
<div class="item-label">尿酸：</div><div class="item-value">{{ archives?.ua || '-' }}</div>
</div>
<div class="item-d">
<div class="item-label">血同型半胱氨酸：</div><div class="item-value">{{ archives?.hcy || '-' }}</div>
</div>
<div class="item-d">
<div class="item-label">空腹葡萄糖：</div><div class="item-value">{{ archives?.glu || '-' }}</div>
</div>
<div>
<div style="color: #ffffff"> 血压：</div>
<div class="son-item item-d">
<div class="item-label">目前收缩压监测值：</div><div class="item-value">{{ archives?.sbp || '-' }}</div>
</div>
<div class="son-item item-d">
<div class="item-label">目前舒张压监测值：</div><div class="item-value">{{ archives?.dbp || '-' }}</div>
</div>
</div>
<div>
<div style="color: #ffffff"> 血脂：</div>
<div class="son-item item-d">
<div class="item-label">总胆固醇：</div><div class="item-value">{{ archives?.tc || '-' }}</div>
</div>
<div class="son-item item-d">
<div class="item-label">甘油三酯：</div><div class="item-value">{{ archives?.tg || '-' }}</div>
</div>
<div class="son-item item-d">
<div class="item-label">低密度脂蛋白：</div><div class="item-value">{{ archives?.ldl || '-' }}</div>
</div>
</div>
</div>
<div>
<div class="item-d">
<div class="item-label">既往史：</div><div class="item-value">{{ archives?.pastHistory || '-' }}</div>
</div>
<div class="item-d">
<div class="item-label">手术史：</div><div class="item-value">{{ archives?.surgicalHistory || '-' }}</div>
</div>
<div class="item-d">
<div class="item-label">用药史：</div><div class="item-value">{{ archives?.medicationHistory || '-' }}</div>
</div>
</div>
</div>
</div>
</template>
</Dialog>
@@ -104,7 +140,7 @@
</template>
<script setup lang="ts">
import pointPng from '/@/assets/indexSun/point.png';
import { Col, Empty, Row } from 'ant-design-vue';
import { Empty, Row } from 'ant-design-vue';
import { Map } from '/@/assets/mapUtils/map.ts';
import { ref, watch } from 'vue';
import Dialog from '/@/components/dialog/Dialog.vue';
@@ -117,7 +153,7 @@
const { themeType } = useTheme();
const locationInfo = ref<string>('');
const emit = defineEmits(['handleView']);
const emit = defineEmits(['handleView', 'handleEmer']);
const openInfo = ref<boolean>(false);
const archives = ref<object>({});
@@ -134,14 +170,29 @@
function handleView() {
emit('handleView');
}
function handleEmer() {
emit('handleEmer', props.userData?.userId);
}
function handleArchives() {
archives.value = {};
openInfo.value = true;
healthArchivesApi({ userId: props.userData?.userId })
.then((res) => {})
.catch((err) => {});
.then((res: any) => {
console.log(res);
if (res?.code === 200) {
archives.value = res?.result || {};
}
})
.catch((err) => {
console.log(err);
});
}
function handlePoliceClose() {
archives.value = {};
openInfo.value = false;
}
function getTypeName(type: string) {
@@ -159,6 +210,7 @@
}
}
function getSex(type: string) {
type = type + '';
switch (type) {
case '1':
return '女';
@@ -171,7 +223,7 @@
function getAddress() {
Map.getAddressByPoint([props.userData?.lon, props.userData?.lat])
.then((res: string) => {
.then((res: any) => {
locationInfo.value = res;
})
.catch((err) => {
@@ -209,7 +261,7 @@
.title-button {
color: #ffffff;
font-weight: bold;
font-size: 10px !important;
font-size: 13px !important;
padding: 2px 10px;
background: radial-gradient(ellipse at center, #082147 0%, #08254c 55%, #085faa 100%);
border-radius: 8px;
@@ -320,4 +372,64 @@
margin-bottom: 5px;
}
}
.title-left,
.title-right {
width: 48px;
height: 2px;
background: linear-gradient(90deg, #02fafc 0%, rgba(2, 250, 252, 0) 100%);
border-radius: 1px;
margin: 0 10px;
}
.title-left {
transform: rotate(180deg);
}
.open-info-top-title {
font-size: 18px;
font-weight: bold;
align-items: center;
justify-content: center;
color: #5cfbff;
margin: 10px 0;
}
.open-info-body {
padding: 0 20px;
font-size: 16px;
> div {
&:nth-child(1) {
padding: 0 10px 10px;
border-bottom: 1px solid #5cfbff;
}
&:nth-child(2) {
padding: 0 10px 10px;
margin-top: 20px;
}
> div {
margin: 10px 0;
}
}
.item-d {
display: flex;
}
.item-label {
color: #ffffff;
}
.item-value {
color: #5cfbff;
flex: 1;
white-space: wrap;
word-break: break-all;
}
.son-item {
font-size: 14px;
}
}
</style>
src/views/indexSun/threeLeftNew.vue
+22 -7
View File
@@ -31,10 +31,10 @@
<div> <img :src="imgList[chooseType]" alt="" />{{ tabList[chooseType].label }}</div>
<div v-if="[0, 1].includes(chooseType)"> 参考范围: {{ tabList[chooseType].tips }} </div>
</div>
<div style="height: 210px">
<div style="height: 210px; display: flex; align-items: center; justify-content: center; width: 100%">
<div style="height: 100%" class="content-chart">
<template v-if="[0, 1, 2, 3].includes(chooseType)">
<three-left-new-item :choose-type="chooseType" />
<three-left-new-item :org-code="selectValue" :type="selectValue1" :choose-type="chooseType" />
</template>
<template v-if="[4].includes(chooseType)">
<sleep-item :orgCode="selectValue" :type="selectValue1" style="height: 100%" />
@@ -79,12 +79,12 @@
{
label: '心率',
value: 0,
tips: '正常范围60~100次/分',
tips: '正常60~100次/分',
},
{
label: '血氧',
value: 1,
tips: '血氧饱和度范围95%~100%',
tips: '血氧饱和度95%~100%',
},
{
label: '血压',
@@ -115,9 +115,23 @@
]);
const newChart = ref<HTMLElement>();
function clickChooseType(type: any) {
if (timer.value) {
clearInterval(timer.value);
timer.value = setInterval(() => {
if (chooseType.value !== 5) {
chooseType.value += 1;
} else {
chooseType.value = 0;
}
getData();
}, 10000);
}
if (chooseType.value === type) return;
chooseType.value = type;
getData();
nextTick(() => {
getData();
});
}
onMounted(() => {
@@ -144,7 +158,7 @@
chooseType.value = 0;
}
getData();
}, 5000);
}, 10000);
}
onBeforeUnmount(() => {
@@ -447,7 +461,8 @@
justify-content: space-between;
}
.content-chart {
width: 100%;
position: relative;
width: 90%;
margin: 0 auto;
flex: 1;
.charts {
src/views/indexSun/threeLeftNewItem/item-d.vue
+5 -1
View File
@@ -32,6 +32,10 @@
userCount: {
type: Number,
},
chooseIndex: {
type: Number,
default: () => 0,
},
themeType: {
type: String,
default: () => '',
@@ -59,7 +63,7 @@
function initChart(chartData, total, color) {
nextTick(() => {
let myChart = echarts.init(healthChart.value);
let options = circleRing(chartData, total, color);
let options = circleRing(chartData, total, color, props.chooseIndex);
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
src/views/indexSun/threeLeftNewItem/pieCharts.ts
+38 -6
View File
@@ -27,10 +27,24 @@ export function screenPie(chartData) {
show: true,
position: 'outside',
formatter: function (params: any) {
return `${params.name}\n占比:${params.percent}%\n人次:${params.value}次`;
return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
},
rich: {
name: {
fontSize: 10,
lineHeight: 15,
},
percent: {
fontSize: 10,
lineHeight: 15,
},
value: {
fontSize: 10,
lineHeight: 15,
},
},
color: '#ffffff',
fontSize: 14,
fontSize: 10,
},
labelLine: {
show: true,
@@ -45,7 +59,7 @@ export function screenPie(chartData) {
}
//左侧圆
export function circleRing(chartData, total, color) {
export function circleRing(chartData, total, color, index = 0) {
const data = visibleChartLabel(chartData);
return {
color: color,
@@ -79,15 +93,33 @@ export function circleRing(chartData, total, color) {
position: 'outside',
// formatter: '{a}{d}%\n{c}人次',
formatter: function (params: any) {
return `${params.name}:${params.percent}%\n${params.value}次`;
if (index === 3) {
return `{name|${params.name}}\n{percent|占比:${params.percent}%}\n{value|${params.value}次}`;
} else {
return `{name|${params.name}:${params.percent}%}\n{value|${params.value}次}`;
}
},
rich: {
name: {
fontSize: 10,
lineHeight: 15,
},
percent: {
fontSize: 10,
lineHeight: 15,
},
value: {
fontSize: 10,
lineHeight: 15,
},
},
color: '#ffffff',
fontSize: 14,
fontSize: 10,
},
labelLine: {
show: true,
length: 2,
length2: 30,
length2: 25,
minTurnAngle: 120,
},
data: data,
src/views/indexSun/threeLeftNewItem/stepItem.vue
+1
View File
@@ -72,6 +72,7 @@
}
.pie-container.self {
width: 100%;
position: relative;
padding-bottom: 0 !important;
}
src/views/indexSun/threeLeftNewItem/threeLeftNewItem.vue
+1
View File
@@ -7,6 +7,7 @@
:tips="dataList[props.chooseType].tips"
:color="dataList[props.chooseType].color"
:user-count="dataList[props.chooseType].userCount"
:chooseIndex="props.chooseType"
/>
</template>
r