update:大屏调整

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
+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)
}
+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 {
+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 {
+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();
});