update:大屏调整
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { ref } from 'vue';
|
import { ref, unref } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export function useStatistics() {
|
export function useStatistics() {
|
||||||
@@ -25,6 +25,10 @@ export function useStatistics() {
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
function getStatistics() {
|
||||||
|
return unref(statistics);
|
||||||
|
}
|
||||||
|
|
||||||
function setStatistics(data = {}) {
|
function setStatistics(data = {}) {
|
||||||
statistics.value.forEach((item) => {
|
statistics.value.forEach((item) => {
|
||||||
const { key } = item;
|
const { key } = item;
|
||||||
@@ -34,6 +38,7 @@ export function useStatistics() {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
statistics,
|
statistics,
|
||||||
|
getStatistics,
|
||||||
setStatistics,
|
setStatistics,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -84,47 +89,52 @@ export const hospitalList = [
|
|||||||
{
|
{
|
||||||
name: '泾河医院',
|
name: '泾河医院',
|
||||||
key: 'zhigong',
|
key: 'zhigong',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '兴隆医院',
|
name: '兴隆医院',
|
||||||
key: 'tangdu',
|
key: 'tangdu',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '宁夏宝石花医院',
|
name: '宁夏宝石花医院',
|
||||||
key: 'yangehu',
|
key: 'yangehu',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '延安市人民医院',
|
name: '延安市人民医院',
|
||||||
key: 'yananshi',
|
key: 'yananshi',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '西京医院',
|
name: '西京医院',
|
||||||
key: 'xijing',
|
key: 'xijing',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '庆阳医院',
|
name: '庆阳医院',
|
||||||
key: 'changan',
|
key: 'changan',
|
||||||
value: '',
|
value: 0,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function useHospitalList() {
|
export function useHospitalList() {
|
||||||
const radarList = ref(hospitalList);
|
const radarList = ref(hospitalList);
|
||||||
|
|
||||||
function setRadarList(res) {
|
function getRadarList() {
|
||||||
|
return unref(radarList);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setRadarList(res = {}) {
|
||||||
radarList.value.forEach((item) => {
|
radarList.value.forEach((item) => {
|
||||||
const { key } = item;
|
const { key } = item;
|
||||||
item.value = res[key];
|
item.value = res[key] || 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
radarList,
|
radarList,
|
||||||
|
getRadarList,
|
||||||
setRadarList,
|
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)
|
||||||
}
|
}
|
||||||
@@ -22,14 +22,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref, watch } from 'vue';
|
||||||
import PublicTitle from '../publicTitle.vue';
|
import PublicTitle from '../publicTitle.vue';
|
||||||
import { list } from './left.api';
|
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 { 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 typeTime = ref(timeTab);
|
||||||
const { statistics, setStatistics } = useStatistics();
|
const { statistics, setStatistics, getStatistics } = useStatistics();
|
||||||
const selectIndex = ref(0);
|
const selectIndex = ref(0);
|
||||||
const selectVal = ref('1');
|
const selectVal = ref('1');
|
||||||
const { setSpin, spinning } = useSpin();
|
const { setSpin, spinning } = useSpin();
|
||||||
@@ -39,6 +46,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
const useDetail = useDetailStore();
|
const useDetail = useDetailStore();
|
||||||
|
const { setSession, getSession } = useSession();
|
||||||
|
|
||||||
async function getList() {
|
async function getList() {
|
||||||
setSpin(true);
|
setSpin(true);
|
||||||
@@ -48,12 +56,21 @@
|
|||||||
if (code != 200 || !Array.isArray(result)) {
|
if (code != 200 || !Array.isArray(result)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setStatistics(result[0]);
|
setSession(LEFT_KEY1, JSON.stringify(result[0]));
|
||||||
let { alerdyreceive = '', totalacceptance = '' } = 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.setAlerdyreceive(alerdyreceive);
|
||||||
useDetail.setTotalacceptance(totalacceptance);
|
useDetail.setTotalacceptance(totalacceptance);
|
||||||
} catch {
|
|
||||||
setSpin(!spinning.value);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,6 +79,13 @@
|
|||||||
selectVal.value = value;
|
selectVal.value = value;
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.refreshState,
|
||||||
|
() => {
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.inner {
|
.inner {
|
||||||
|
|||||||
@@ -14,23 +14,25 @@
|
|||||||
<div class="physical-container">
|
<div class="physical-container">
|
||||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||||
<div class="RadarCharts"></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref, watch } from 'vue';
|
||||||
import PublicTitle from '../publicTitle.vue';
|
import PublicTitle from '../publicTitle.vue';
|
||||||
import { getDetail } from '/@/components/body-d-left/left.api';
|
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';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
refreshState: {
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { setSession, getSession } = useSession();
|
||||||
|
const { LEFT_KEY3 } = caching;
|
||||||
const { setSpin, spinning } = useSpin();
|
const { setSpin, spinning } = useSpin();
|
||||||
const selectIndex = ref(0);
|
const selectIndex = ref(0);
|
||||||
|
|
||||||
@@ -46,23 +48,31 @@
|
|||||||
getList();
|
getList();
|
||||||
});
|
});
|
||||||
|
|
||||||
const { radarList, setRadarList } = useHospitalList();
|
const { radarList, setRadarList, getRadarList } = useHospitalList();
|
||||||
|
|
||||||
async function getList() {
|
async function getList() {
|
||||||
setSpin(true);
|
setSpin(true);
|
||||||
try {
|
try {
|
||||||
const { code, result } = (await getDetail({})) || {};
|
const { code, result } = (await getDetail({})) || {};
|
||||||
setSpin(!spinning.value);
|
setSpin(!spinning.value);
|
||||||
if (code != 200) {
|
if (code != 200 || !Array.isArray(result)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setRadarList(result[0]);
|
setSession(LEFT_KEY3, JSON.stringify(result[0]));
|
||||||
initChart();
|
setValue(result[0]);
|
||||||
} catch {
|
} catch {
|
||||||
|
const result = JSON.parse(getSession(LEFT_KEY3));
|
||||||
|
setValue(result);
|
||||||
setSpin(!spinning.value);
|
setSpin(!spinning.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setValue(result) {
|
||||||
|
setRadarList(result);
|
||||||
|
const everyEmpty = allValueEmpty('value', getRadarList());
|
||||||
|
everyEmpty && initChart();
|
||||||
|
}
|
||||||
|
|
||||||
function initChart() {
|
function initChart() {
|
||||||
const myChart = echarts.init(document.querySelector('.RadarCharts'));
|
const myChart = echarts.init(document.querySelector('.RadarCharts'));
|
||||||
let countList = radarList.value.map((item) => item.value);
|
let countList = radarList.value.map((item) => item.value);
|
||||||
@@ -74,6 +84,13 @@
|
|||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.refreshState,
|
||||||
|
() => {
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.inner {
|
.inner {
|
||||||
|
|||||||
@@ -29,7 +29,15 @@
|
|||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
|
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
|
||||||
import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.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 { setSpin, spinning } = useSpin();
|
||||||
|
|
||||||
const sexIndex = ref(0);
|
const sexIndex = ref(0);
|
||||||
@@ -71,19 +79,22 @@
|
|||||||
if (code != 200) {
|
if (code != 200) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (Array.isArray(result) && result.length == 0) {
|
if (Array.isArray(result) && result.length > 0) {
|
||||||
return EmptyChart();
|
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 {
|
} catch {
|
||||||
setSpin(false);
|
setSpin(false);
|
||||||
EmptyChart();
|
const { xData, yData } = JSON.parse(getSession(LEFT_KEY2));
|
||||||
|
initChart(xData, yData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch([selectValue, sexIndex], () => {
|
watch([selectValue, sexIndex, () => props.refreshState], () => {
|
||||||
getList();
|
getList();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -18,13 +18,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</vue3-seamless-scroll>
|
</vue3-seamless-scroll>
|
||||||
</div>
|
</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">
|
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||||
<template #container>
|
<template #container>
|
||||||
<div class="police-con">
|
<div class="police-con">
|
||||||
@@ -60,19 +53,20 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
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 PublicTitle from '/@/components/publicTitle.vue';
|
||||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||||
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||||
|
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const { setSession, getSession } = useSession();
|
||||||
|
const { RIGHT_KEY1 } = caching;
|
||||||
|
|
||||||
const classOption = ref({
|
const classOption = ref({
|
||||||
step: 0.3, // 速度
|
step: 0.3, // 速度
|
||||||
});
|
});
|
||||||
const open = ref<boolean>(false);
|
|
||||||
const openInfor = ref<boolean>(false);
|
const openInfor = ref<boolean>(false);
|
||||||
const userInfo = ref({
|
const userInfo = ref({
|
||||||
realName: '',
|
realName: '',
|
||||||
@@ -83,15 +77,6 @@
|
|||||||
address: '',
|
address: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const dataSource = ref([
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
name: '胡彦斌',
|
|
||||||
age: 32,
|
|
||||||
address: '西湖区湖底公园1号',
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @desc open员工信息
|
* @desc open员工信息
|
||||||
*/
|
*/
|
||||||
@@ -119,9 +104,14 @@
|
|||||||
const scrollList = ref([]);
|
const scrollList = ref([]);
|
||||||
|
|
||||||
async function getScrollList() {
|
async function getScrollList() {
|
||||||
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
|
try {
|
||||||
if (code == 200) {
|
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
|
||||||
scrollList.value = result.records;
|
if (code == 200) {
|
||||||
|
setSession(RIGHT_KEY1, JSON.stringify(result.records));
|
||||||
|
scrollList.value = result.records;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
scrollList.value = JSON.parse(getSession(RIGHT_KEY1));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,10 @@
|
|||||||
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
||||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||||
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.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 { setSpin, spinning } = useSpin();
|
||||||
const healthChart = ref<HTMLElement>();
|
const healthChart = ref<HTMLElement>();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@@ -26,15 +29,21 @@
|
|||||||
if (code != 200) {
|
if (code != 200) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setHealth(result);
|
setSession(RIGHT_KEY2, JSON.stringify(result));
|
||||||
const yData = unref(getValue);
|
setValue(result);
|
||||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
|
||||||
initChart(unref(healthData), total);
|
|
||||||
} catch {
|
} 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) {
|
function initChart(chartData, total) {
|
||||||
let myChart = echarts.init(healthChart.value);
|
let myChart = echarts.init(healthChart.value);
|
||||||
let options = ringOption(chartData, total);
|
let options = ringOption(chartData, total);
|
||||||
|
|||||||
@@ -68,12 +68,6 @@
|
|||||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||||
|
|
||||||
const useDetail = useDetailStore();
|
const useDetail = useDetailStore();
|
||||||
|
|
||||||
function test() {
|
|
||||||
Map.clearActiveHospital();
|
|
||||||
console.log('清空了');
|
|
||||||
}
|
|
||||||
|
|
||||||
const formState = ref({
|
const formState = ref({
|
||||||
start: '',
|
start: '',
|
||||||
end: '',
|
end: '',
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
// 步数
|
// 步数
|
||||||
import {visibleChartLabel} from "/@/utils/utils.ts";
|
import {visibleChartLabel} from "/@/utils/utils.ts";
|
||||||
|
|
||||||
export function screenPie(chartData, total, color) {
|
export function screenPie(chartData) {
|
||||||
const data = visibleChartLabel(chartData)
|
const data = visibleChartLabel(chartData)
|
||||||
return {
|
return {
|
||||||
color: color,
|
color: ['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@@ -10,7 +10,10 @@
|
|||||||
import ItemD from '/@/components/item-d/item-d.vue';
|
import ItemD from '/@/components/item-d/item-d.vue';
|
||||||
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
|
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
|
||||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.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 { spinning, setSpin } = useSpin();
|
||||||
const dataList = ref([
|
const dataList = ref([
|
||||||
{
|
{
|
||||||
@@ -74,23 +77,32 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
const { code, result } = await getWatchDataByOrgCode(props);
|
setSpin(true);
|
||||||
// debugger;
|
try {
|
||||||
if (code == 200) {
|
const { code, result } = await getWatchDataByOrgCode(props);
|
||||||
let data = cloneDeep(dataList.value);
|
if (code == 200) {
|
||||||
data.forEach((item) => {
|
setValue(result);
|
||||||
let resData = result.find((v) => v.type == item.type);
|
setSession(PAGE2_LEFT, JSON.stringify(result));
|
||||||
item.userCount = resData.userCount;
|
}
|
||||||
item.data.forEach((val) => {
|
} catch {
|
||||||
val.value = resData[val.key];
|
const result = JSON.parse(getSession(PAGE2_LEFT));
|
||||||
});
|
setValue(result);
|
||||||
});
|
|
||||||
|
|
||||||
dataList.value = data;
|
|
||||||
setSpin(!spinning.value);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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({
|
defineExpose({
|
||||||
init,
|
init,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,10 +12,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import PublicTitle from '/@/components/publicTitle.vue';
|
import PublicTitle from '/@/components/publicTitle.vue';
|
||||||
import * as echarts from 'echarts';
|
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 { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
||||||
import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
|
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({
|
const props = defineProps({
|
||||||
orgCode: String,
|
orgCode: String,
|
||||||
type: String,
|
type: String,
|
||||||
@@ -26,7 +29,7 @@
|
|||||||
() => {
|
() => {
|
||||||
init();
|
init();
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true, deep: true }
|
||||||
);
|
);
|
||||||
const nums = ref({
|
const nums = ref({
|
||||||
avgShort: '',
|
avgShort: '',
|
||||||
@@ -35,30 +38,40 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
const params = {
|
try {
|
||||||
orgCode: props.orgCode,
|
const params = {
|
||||||
type: props.type,
|
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 }), //平均
|
|
||||||
};
|
};
|
||||||
|
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 }) {
|
function initChart({ time, short, long, awake, type }) {
|
||||||
let myChart = echarts.init(sleepChart.value);
|
let myChart = echarts.init(sleepChart.value);
|
||||||
let options = sleepCharts({ time, short, long, awake, type });
|
let options = sleepCharts({ time, short, long, awake, type });
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { ref } from 'vue';
|
import { ref, unref } from 'vue';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { minuteToStr } from '/@/utils/utils.ts';
|
import { minuteToStr } from '/@/utils/utils.ts';
|
||||||
|
|
||||||
@@ -170,10 +170,20 @@ export function useStep() {
|
|||||||
total.value = data?.userCount;
|
total.value = data?.userCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getStepData() {
|
||||||
|
return unref(stepData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTotal() {
|
||||||
|
return unref(total);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
total,
|
total,
|
||||||
stepData,
|
stepData,
|
||||||
setStep,
|
setStep,
|
||||||
|
getStepData,
|
||||||
|
getTotal,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -31,11 +31,15 @@
|
|||||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||||
import { useRefresh } from '/@/hooks/autoRefresh';
|
import { useRefresh } from '/@/hooks/autoRefresh';
|
||||||
import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
|
||||||
|
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
orgCode: String,
|
orgCode: String,
|
||||||
type: String,
|
type: String,
|
||||||
});
|
});
|
||||||
|
const { setSession, getSession } = useSession();
|
||||||
|
const { PAGE2_RIGHT3 } = caching;
|
||||||
|
|
||||||
const tableHeight = ref(0);
|
const tableHeight = ref(0);
|
||||||
const dataSource = ref([]);
|
const dataSource = ref([]);
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
@@ -60,7 +64,7 @@
|
|||||||
window.addEventListener('resize', setHeight);
|
window.addEventListener('resize', setHeight);
|
||||||
timer.value && clearInterval(timer.value);
|
timer.value && clearInterval(timer.value);
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true, deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -74,16 +78,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function init(page) {
|
async function init(page) {
|
||||||
const { pageSize } = pagination.value;
|
try {
|
||||||
const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
|
const { pageSize } = pagination.value;
|
||||||
if (code == 200) {
|
const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
|
||||||
dataSource.value = result.records;
|
if (code == 200) {
|
||||||
pagination.value.total = result.total;
|
setSession(PAGE2_RIGHT3, JSON.stringify({ page, result }));
|
||||||
pages.value = result.pages;
|
setValue(result, page);
|
||||||
pagination.value.current = 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) {
|
function pageChange(page, pageS) {
|
||||||
pagination.value.current = page;
|
pagination.value.current = page;
|
||||||
pagination.value.pageSize = pageS;
|
pagination.value.pageSize = pageS;
|
||||||
|
|||||||
@@ -9,29 +9,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, unref, onMounted, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import PublicTitle from '/@/components/publicTitle.vue';
|
import PublicTitle from '/@/components/publicTitle.vue';
|
||||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||||
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||||
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
|
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
|
||||||
|
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
orgCode: String,
|
orgCode: String,
|
||||||
type: String,
|
type: String,
|
||||||
});
|
});
|
||||||
|
const { setSession, getSession } = useSession();
|
||||||
|
const { PAGE2_RIGHT2 } = caching;
|
||||||
watch(
|
watch(
|
||||||
props,
|
props,
|
||||||
() => {
|
() => {
|
||||||
init();
|
init();
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true, deep: true }
|
||||||
);
|
);
|
||||||
const { setSpin, spinning } = useSpin();
|
|
||||||
const healthChart = ref<HTMLElement>();
|
const healthChart = ref<HTMLElement>();
|
||||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
const { total, setStep, getStepData } = useStep();
|
||||||
const { stepData, total, setStep } = useStep();
|
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
@@ -40,21 +41,25 @@
|
|||||||
type: props.type,
|
type: props.type,
|
||||||
};
|
};
|
||||||
const { code, result } = await getStep(params);
|
const { code, result } = await getStep(params);
|
||||||
setSpin(true);
|
if (code == 200) {
|
||||||
if (code != 200) {
|
setValue(result);
|
||||||
return initChart(unref(stepData), 0);
|
setSession(PAGE2_RIGHT2, JSON.stringify(result));
|
||||||
}
|
}
|
||||||
setStep(result);
|
|
||||||
|
|
||||||
initChart(unref(stepData), '15000');
|
|
||||||
} catch {
|
} 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 myChart = echarts.init(healthChart.value);
|
||||||
let options = screenPie(chartData, total, color.value, '{c}');
|
let options = screenPie(chartData);
|
||||||
myChart.setOption(options);
|
myChart.setOption(options);
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
|
|||||||
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
+5
-5
@@ -9,16 +9,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="body-d">
|
<div class="body-d">
|
||||||
<div class="body-d-left">
|
<div class="body-d-left">
|
||||||
<one-l :key="refreshState" />
|
<one-l :refreshState="refreshState" />
|
||||||
<two-l :key="refreshState" />
|
<two-l :refreshState="refreshState" />
|
||||||
<three-l :key="refreshState" />
|
<three-l :refreshState="refreshState" />
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-middle">
|
<div class="body-d-middle">
|
||||||
<china-map />
|
<china-map />
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-right">
|
<div class="body-d-right">
|
||||||
<one-r :key="refreshState" />
|
<one-r :refreshState="refreshState" />
|
||||||
<two-r :key="refreshState" />
|
<two-r :refreshState="refreshState" />
|
||||||
<three-r :key="refreshState" />
|
<three-r :key="refreshState" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="body-d">
|
<div class="body-d">
|
||||||
<div class="body-d-left">
|
<div class="body-d-left">
|
||||||
<screen-left :orgCode="orgCode" :type="type" />
|
<screen-left :orgCode="orgCode" :type="type" :refreshState="refreshState" />
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-middle">
|
<div class="body-d-middle">
|
||||||
<SecondMap :orgCode="orgCode" :type="type">
|
<SecondMap :orgCode="orgCode" :type="type">
|
||||||
@@ -31,9 +31,9 @@
|
|||||||
</SecondMap>
|
</SecondMap>
|
||||||
</div>
|
</div>
|
||||||
<div class="body-d-right">
|
<div class="body-d-right">
|
||||||
<one-r :orgCode="orgCode" :type="type" :key="refreshState" />
|
<one-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
|
||||||
<two-r :orgCode="orgCode" :type="type" :key="refreshState" />
|
<two-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
|
||||||
<three-r :orgCode="orgCode" :type="type" />
|
<three-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-d"></div>
|
<div class="bottom-d"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user