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

update：大屏调整

Browse Source
This commit is contained in:
zk
2024-01-22 15:49:00 +08:00
parent 84dfa935ea
commit 5cf32ce40e
16 changed files with 298 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/bodyLeftHooks.ts
+31 -9
View File
@@ -1,4 +1,4 @@
import { ref } from 'vue';
import { ref, unref } from 'vue';
import * as echarts from 'echarts';
export function useStatistics() {
@@ -25,6 +25,10 @@ export function useStatistics() {
},
]);
function getStatistics() {
return unref(statistics);
}
function setStatistics(data = {}) {
statistics.value.forEach((item) => {
const { key } = item;
@@ -34,6 +38,7 @@ export function useStatistics() {
return {
statistics,
getStatistics,
setStatistics,
};
}
@@ -84,47 +89,52 @@ export const hospitalList = [
{
name: '泾河医院',
key: 'zhigong',
value: '',
value: 0,
},
{
name: '兴隆医院',
key: 'tangdu',
value: '',
value: 0,
},
{
name: '宁夏宝石花医院',
key: 'yangehu',
value: '',
value: 0,
},
{
name: '延安市人民医院',
key: 'yananshi',
value: '',
value: 0,
},
{
name: '西京医院',
key: 'xijing',
value: '',
value: 0,
},
{
name: '庆阳医院',
key: 'changan',
value: '',
value: 0,
},
];
export function useHospitalList() {
const radarList = ref(hospitalList);
function setRadarList(res) {
function getRadarList() {
return unref(radarList);
}
function setRadarList(res = {}) {
radarList.value.forEach((item) => {
const { key } = item;
item.value = res[key];
item.value = res[key] || 0;
});
}
return {
radarList,
getRadarList,
setRadarList,
};
}
@@ -333,4 +343,16 @@ export function barOption(xData, ydata) {
},
],
};
}
/**
* @desc 值是否不为零
* @param list 数组
* @param key 元素属性
*/
export function allValueEmpty(key: string, list: any[]) {
if (!Array.isArray(list)) {
return false
}
return list.every((item: any) => item?.[key] != 0)
}
src/components/body-d-left/oneL.vue
+31 -7
View File
@@ -22,14 +22,21 @@
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import PublicTitle from '../publicTitle.vue';
import { list } from './left.api';
import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { allValueEmpty, timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useDetailStore } from '/@/store/modules/detailData.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const { LEFT_KEY1 } = caching;
const props = defineProps({
refreshState: {
type: Boolean,
},
});
const typeTime = ref(timeTab);
const { statistics, setStatistics } = useStatistics();
const { statistics, setStatistics, getStatistics } = useStatistics();
const selectIndex = ref(0);
const selectVal = ref('1');
const { setSpin, spinning } = useSpin();
@@ -39,6 +46,7 @@
});
const useDetail = useDetailStore();
const { setSession, getSession } = useSession();
async function getList() {
setSpin(true);
@@ -48,12 +56,21 @@
if (code != 200 || !Array.isArray(result)) {
return;
}
setStatistics(result[0]);
let { alerdyreceive = '', totalacceptance = '' } = result[0];
setSession(LEFT_KEY1, JSON.stringify(result[0]));
setValue(result[0]);
} catch {
const result = JSON.parse(getSession(LEFT_KEY1));
setValue(result);
setSpin(false);
}
}
function setValue(result) {
let { alerdyreceive = '', totalacceptance = '' } = result;
setStatistics(result);
if (alerdyreceive || totalacceptance) {
useDetail.setAlerdyreceive(alerdyreceive);
useDetail.setTotalacceptance(totalacceptance);
} catch {
setSpin(!spinning.value);
}
}
@@ -62,6 +79,13 @@
selectVal.value = value;
getList();
}
watch(
() => props.refreshState,
() => {
getList();
}
);
</script>
<style scoped lang="less">
.inner {
src/components/body-d-left/threeL.vue
+29 -12
View File
@@ -14,23 +14,25 @@
<div class="physical-container">
<a-spin :spinning="spinning" class="spin"></a-spin>
<div class="RadarCharts"></div>
<!-- <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">-->
<!-- <div class="ct">-->
<!-- <div class="value">{{ countData[item.key] || '/' }}</div>-->
<!-- <div class="label">{{ item.title }}</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import PublicTitle from '../publicTitle.vue';
import { getDetail } from '/@/components/body-d-left/left.api';
import { hospitalList, useSpin, timeTab, useHospitalList, radarCharts } from '/@/components/body-d-left/bodyLeftHooks';
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import * as echarts from 'echarts';
const props = defineProps({
refreshState: {
type: Boolean,
},
});
const { setSession, getSession } = useSession();
const { LEFT_KEY3 } = caching;
const { setSpin, spinning } = useSpin();
const selectIndex = ref(0);
@@ -46,23 +48,31 @@
getList();
});
const { radarList, setRadarList } = useHospitalList();
const { radarList, setRadarList, getRadarList } = useHospitalList();
async function getList() {
setSpin(true);
try {
const { code, result } = (await getDetail({})) || {};
setSpin(!spinning.value);
if (code != 200) {
if (code != 200 || !Array.isArray(result)) {
return;
}
setRadarList(result[0]);
initChart();
setSession(LEFT_KEY3, JSON.stringify(result[0]));
setValue(result[0]);
} catch {
const result = JSON.parse(getSession(LEFT_KEY3));
setValue(result);
setSpin(!spinning.value);
}
}
function setValue(result) {
setRadarList(result);
const everyEmpty = allValueEmpty('value', getRadarList());
everyEmpty && initChart();
}
function initChart() {
const myChart = echarts.init(document.querySelector('.RadarCharts'));
let countList = radarList.value.map((item) => item.value);
@@ -74,6 +84,13 @@
myChart.resize();
});
}
watch(
() => props.refreshState,
() => {
getList();
}
);
</script>
<style lang="less" scoped>
.inner {
src/components/body-d-left/twoL.vue
+18 -7
View File
@@ -29,7 +29,15 @@
import * as echarts from 'echarts';
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const props = defineProps({
refreshState: {
type: Boolean,
},
});
const { setSession, getSession } = useSession();
const { LEFT_KEY2 } = caching;
const { setSpin, spinning } = useSpin();
const sexIndex = ref(0);
@@ -71,19 +79,22 @@
if (code != 200) {
return;
}
if (Array.isArray(result) && result.length == 0) {
return EmptyChart();
if (Array.isArray(result) && result.length > 0) {
const xData = result.map((item) => item.name);
const yData = result.map((item) => item.count);
setSession(LEFT_KEY2, JSON.stringify({ xData, yData }));
initChart(xData, yData);
} else {
EmptyChart();
}
const xData = result.map((item) => item.name);
const yData = result.map((item) => item.count);
initChart(xData, yData);
} catch {
setSpin(false);
EmptyChart();
const { xData, yData } = JSON.parse(getSession(LEFT_KEY2));
initChart(xData, yData);
}
}
watch([selectValue, sexIndex], () => {
watch([selectValue, sexIndex, () => props.refreshState], () => {
getList();
});
src/components/body-d-right/oneR.vue
+12 -22
View File
@@ -18,13 +18,6 @@
</div>
</vue3-seamless-scroll>
</div>
<!-- <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">-->
<!-- <template #container>-->
<!-- <div class="dialog-con">-->
<!-- <a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />-->
<!-- </div>-->
<!-- </template>-->
<!-- </Dialog>-->
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
<template #container>
<div class="police-con">
@@ -60,19 +53,20 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import $bus from '/@/utils/bus.ts';
import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
import PublicTitle from '/@/components/publicTitle.vue';
import Dialog from '/@/components/dialog/Dialog.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
import { Map } from '/@/assets/mapUtils/map.ts';
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
const router = useRouter();
const { setSession, getSession } = useSession();
const { RIGHT_KEY1 } = caching;
const classOption = ref({
step: 0.3, // 速度
});
const open = ref<boolean>(false);
const openInfor = ref<boolean>(false);
const userInfo = ref({
realName: '',
@@ -83,15 +77,6 @@
address: '',
});
const dataSource = ref([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
]);
/**
* @desc open员工信息
*/
@@ -119,9 +104,14 @@
const scrollList = ref([]);
async function getScrollList() {
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
if (code == 200) {
scrollList.value = result.records;
try {
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
if (code == 200) {
setSession(RIGHT_KEY1, JSON.stringify(result.records));
scrollList.value = result.records;
}
} catch {
scrollList.value = JSON.parse(getSession(RIGHT_KEY1));
}
}
src/components/body-d-right/twoR.vue
+14 -5
View File
@@ -11,7 +11,10 @@
import { getHealthDataList } from '/@/components/body-d-right/right.api';
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const { setSession, getSession } = useSession();
const { RIGHT_KEY2 } = caching;
const { setSpin, spinning } = useSpin();
const healthChart = ref<HTMLElement>();
onMounted(() => {
@@ -26,15 +29,21 @@
if (code != 200) {
return;
}
setHealth(result);
const yData = unref(getValue);
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
initChart(unref(healthData), total);
setSession(RIGHT_KEY2, JSON.stringify(result));
setValue(result);
} catch {
initChart(unref(healthData), 0);
const result = JSON.parse(getSession(RIGHT_KEY2));
setValue(result);
}
}
function setValue(result) {
setHealth(result);
const yData = unref(getValue);
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
initChart(unref(healthData), total);
}
function initChart(chartData, total) {
let myChart = echarts.init(healthChart.value);
let options = ringOption(chartData, total);
src/components/chinaMap/chinaMap.vue
-6
View File
@@ -68,12 +68,6 @@
import { useDetailStore } from '/@/store/modules/detailData.ts';
const useDetail = useDetailStore();
function test() {
Map.clearActiveHospital();
console.log('清空了');
}
const formState = ref({
start: '',
end: '',
src/components/item-d/pieCharts.ts
+2 -2
View File
@@ -1,10 +1,10 @@
// 步数
import {visibleChartLabel} from "/@/utils/utils.ts";
export function screenPie(chartData, total, color) {
export function screenPie(chartData) {
const data = visibleChartLabel(chartData)
return {
color: color,
color: ['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C'],
tooltip: {
trigger: 'item',
show: true,
src/components/secondaryScreen/screen-left/screenLeft.vue
+26 -14
View File
@@ -10,7 +10,10 @@
import ItemD from '/@/components/item-d/item-d.vue';
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const { setSession, getSession } = useSession();
const { PAGE2_LEFT } = caching;
const { spinning, setSpin } = useSpin();
const dataList = ref([
{
@@ -74,23 +77,32 @@
});
async function init() {
const { code, result } = await getWatchDataByOrgCode(props);
// debugger;
if (code == 200) {
let data = cloneDeep(dataList.value);
data.forEach((item) => {
let resData = result.find((v) => v.type == item.type);
item.userCount = resData.userCount;
item.data.forEach((val) => {
val.value = resData[val.key];
});
});
dataList.value = data;
setSpin(!spinning.value);
setSpin(true);
try {
const { code, result } = await getWatchDataByOrgCode(props);
if (code == 200) {
setValue(result);
setSession(PAGE2_LEFT, JSON.stringify(result));
}
} catch {
const result = JSON.parse(getSession(PAGE2_LEFT));
setValue(result);
}
}
function setValue(result) {
setSpin(false);
let data = cloneDeep(dataList.value);
data.forEach((item) => {
let resData = result.find((v) => v.type == item.type);
item.userCount = resData.userCount;
item.data.forEach((val) => {
val.value = resData[val.key];
});
});
dataList.value = data;
}
defineExpose({
init,
});
src/components/secondaryScreen/screen-right/oneR.vue
+35 -22
View File
@@ -12,10 +12,13 @@
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
import { ref, watch } from 'vue';
import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const { setSession, getSession } = useSession();
const { PAGE2_RIGHT1 } = caching;
const props = defineProps({
orgCode: String,
type: String,
@@ -26,7 +29,7 @@
() => {
init();
},
{ immediate: true }
{ immediate: true, deep: true }
);
const nums = ref({
avgShort: '',
@@ -35,30 +38,40 @@
});
async function init() {
const params = {
orgCode: props.orgCode,
type: props.type,
};
const { code, result } = await getSleep(params);
if (code == 200 && result.length > 0) {
let time = result?.map((item) => item.dataDate);
let short = result?.map((item) => item.avgShortDuration);
let long = result?.map((item) => item.avgLongDuration);
let awake = result?.map((item) => item.awakeDuration);
let avg = result?.map((item) => item.averageDuration);
initChart({ time, short, long, awake, type: props.type });
const len = time.length;
if (!len > 0) {
return;
}
nums.value = {
avgShort: formatStr({ list: short, len }),
avgLong: formatStr({ list: long, len }),
avg: formatStr({ list: avg, len }), //平均
try {
const params = {
orgCode: props.orgCode,
type: props.type,
};
const { code, result } = await getSleep(params);
if (code == 200 && result.length > 0) {
setSession(PAGE2_RIGHT1, JSON.stringify(result));
setValue(result);
}
} catch {
const result = JSON.parse(getSession(PAGE2_RIGHT1));
setValue(result);
}
}
function setValue(result) {
let time = result?.map((item) => item.dataDate);
let short = result?.map((item) => item.avgShortDuration);
let long = result?.map((item) => item.avgLongDuration);
let awake = result?.map((item) => item.awakeDuration);
let avg = result?.map((item) => item.averageDuration);
initChart({ time, short, long, awake, type: props.type });
const len = time.length;
if (!len > 0) {
return;
}
nums.value = {
avgShort: formatStr({ list: short, len }),
avgLong: formatStr({ list: long, len }),
avg: formatStr({ list: avg, len }), //平均
};
}
function initChart({ time, short, long, awake, type }) {
let myChart = echarts.init(sleepChart.value);
let options = sleepCharts({ time, short, long, awake, type });
src/components/secondaryScreen/screen-right/screenRightHooks.ts
+11 -1
View File
@@ -1,4 +1,4 @@
import { ref } from 'vue';
import { ref, unref } from 'vue';
import dayjs from 'dayjs';
import { minuteToStr } from '/@/utils/utils.ts';
@@ -170,10 +170,20 @@ export function useStep() {
total.value = data?.userCount;
}
function getStepData() {
return unref(stepData);
}
function getTotal() {
return unref(total);
}
return {
total,
stepData,
setStep,
getStepData,
getTotal,
};
}
src/components/secondaryScreen/screen-right/threeR.vue
+22 -8
View File
@@ -31,11 +31,15 @@
import { earlyWarning } from '/@/utils/busConstant.ts';
import { useRefresh } from '/@/hooks/autoRefresh';
import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
const props = defineProps({
orgCode: String,
type: String,
});
const { setSession, getSession } = useSession();
const { PAGE2_RIGHT3 } = caching;
const tableHeight = ref(0);
const dataSource = ref([]);
const pagination = ref({
@@ -60,7 +64,7 @@
window.addEventListener('resize', setHeight);
timer.value && clearInterval(timer.value);
},
{ immediate: true }
{ immediate: true, deep: true }
);
onUnmounted(() => {
@@ -74,16 +78,26 @@
}
async function init(page) {
const { pageSize } = pagination.value;
const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
if (code == 200) {
dataSource.value = result.records;
pagination.value.total = result.total;
pages.value = result.pages;
pagination.value.current = page;
try {
const { pageSize } = pagination.value;
const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
if (code == 200) {
setSession(PAGE2_RIGHT3, JSON.stringify({ page, result }));
setValue(result, page);
}
} catch {
const { result, page } = JSON.parse(getSession(PAGE2_RIGHT3));
setValue(result, page);
}
}
function setValue(result, page) {
dataSource.value = result.records;
pagination.value.total = result.total;
pages.value = result.pages;
pagination.value.current = page;
}
function pageChange(page, pageS) {
pagination.value.current = page;
pagination.value.pageSize = pageS;
src/components/secondaryScreen/screen-right/twoR.vue
+19 -14
View File
@@ -9,29 +9,30 @@
</div>
</template>
<script setup lang="ts">
import { ref, unref, onMounted, watch } from 'vue';
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import PublicTitle from '/@/components/publicTitle.vue';
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
import { screenPie } from '/@/components/item-d/pieCharts.ts';
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
const props = defineProps({
orgCode: String,
type: String,
});
const { setSession, getSession } = useSession();
const { PAGE2_RIGHT2 } = caching;
watch(
props,
() => {
init();
},
{ immediate: true }
{ immediate: true, deep: true }
);
const { setSpin, spinning } = useSpin();
const healthChart = ref<HTMLElement>();
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
const { stepData, total, setStep } = useStep();
const { total, setStep, getStepData } = useStep();
async function init() {
try {
@@ -40,21 +41,25 @@
type: props.type,
};
const { code, result } = await getStep(params);
setSpin(true);
if (code != 200) {
return initChart(unref(stepData), 0);
if (code == 200) {
setValue(result);
setSession(PAGE2_RIGHT2, JSON.stringify(result));
}
setStep(result);
initChart(unref(stepData), '15000');
} catch {
initChart(unref(stepData), 0);
const result = JSON.parse(getSession(PAGE2_RIGHT2));
setValue(result);
}
}
function initChart(chartData, total) {
function setValue(result) {
setStep(result);
initChart(getStepData());
}
function initChart(chartData) {
// debugger;
let myChart = echarts.init(healthChart.value);
let options = screenPie(chartData, total, color.value, '{c}');
let options = screenPie(chartData);
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
src/hooks/autoRefresh/caching.ts
+39
View File
@@ -0,0 +1,39 @@
// 缓存key
export const caching = {
MOUNTED_COUNT: 'MOUNTED_COUNT',
//服务详情数据
LEFT_KEY1: 'LEFT_KEY1',
//主诉分类
LEFT_KEY2: 'LEFT_KEY2',
//体检数据
LEFT_KEY3: 'LEFT_KEY3',
//健康终端报警
RIGHT_KEY1: 'RIGHT_KEY1',
//长庆油田大病人数
RIGHT_KEY2: 'RIGHT_KEY2',
//心血管监测-心率-压力-血氧-体温
PAGE2_LEFT: 'PAGE2_LEFT',
//心血管监测-睡眠
PAGE2_RIGHT1: 'PAGE2_RIGHT1',
//心血管监测-步数
PAGE2_RIGHT2: 'PAGE2_RIGHT2',
//心血管监测-预警
PAGE2_RIGHT3: 'PAGE2_RIGHT3',
};
export function useSession() {
function getSession(key: string) {
return localStorage.getItem(key)
}
function setSession(key: string, value: any) {
localStorage.setItem(key, value)
}
return {
getSession,
setSession
}
}
src/views/index.vue
+5 -5
View File
@@ -9,16 +9,16 @@
</div>
<div class="body-d">
<div class="body-d-left">
<one-l :key="refreshState" />
<two-l :key="refreshState" />
<three-l :key="refreshState" />
<one-l :refreshState="refreshState" />
<two-l :refreshState="refreshState" />
<three-l :refreshState="refreshState" />
</div>
<div class="body-d-middle">
<china-map />
</div>
<div class="body-d-right">
<one-r :key="refreshState" />
<two-r :key="refreshState" />
<one-r :refreshState="refreshState" />
<two-r :refreshState="refreshState" />
<three-r :key="refreshState" />
</div>
</div>
src/views/indexSon.vue
+4 -4
View File
@@ -14,7 +14,7 @@
</div>
<div class="body-d">
<div class="body-d-left">
<screen-left :orgCode="orgCode" :type="type" />
<screen-left :orgCode="orgCode" :type="type" :refreshState="refreshState" />
</div>
<div class="body-d-middle">
<SecondMap :orgCode="orgCode" :type="type">
@@ -31,9 +31,9 @@
</SecondMap>
</div>
<div class="body-d-right">
<one-r :orgCode="orgCode" :type="type" :key="refreshState" />
<two-r :orgCode="orgCode" :type="type" :key="refreshState" />
<three-r :orgCode="orgCode" :type="type" />
<one-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
<two-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
<three-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
</div>
</div>
<div class="bottom-d"></div>