142 lines
4.2 KiB
Vue
142 lines
4.2 KiB
Vue
<template>
|
|
<div class="common-card" :class="[themeType]">
|
|
<public-title title="服务详情数据" :themeType="themeType" />
|
|
<div class="inner">
|
|
<div class="type-time">
|
|
<span
|
|
v-for="(item, index) in typeTime"
|
|
:key="index"
|
|
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
|
|
@click="handleSelect(index, item.value)"
|
|
>{{ item.name }}</span
|
|
>
|
|
</div>
|
|
<div class="server-container">
|
|
<div
|
|
v-for="(item, index) in statistics"
|
|
:key="index"
|
|
class="server-item"
|
|
:class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '', themeType]"
|
|
@click="handleClick(item)"
|
|
>
|
|
<span>{{ item?.name }}</span>
|
|
<span>{{ item?.value }}</span>
|
|
</div>
|
|
<a-spin :spinning="spinning" class="spin"></a-spin>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import PublicTitle from '/@/components/publicTitle.vue';
|
|
import { 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';
|
|
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
|
import { serverApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
|
|
|
const { themeType } = useTheme();
|
|
const { SERVER_DETAIL } = caching;
|
|
const props = defineProps({
|
|
refreshState: {
|
|
type: Boolean,
|
|
},
|
|
setting: {
|
|
type: Object,
|
|
},
|
|
theme: {
|
|
type: String,
|
|
},
|
|
});
|
|
const emit = defineEmits(['handleClick']);
|
|
const typeTime = ref(timeTab);
|
|
const { statistics, setStatistics } = useStatistics();
|
|
const selectIndex = ref(0);
|
|
const selectVal = ref('2'); //本年
|
|
const { setSpin, spinning } = useSpin();
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
const useDetail = useDetailStore();
|
|
const { setSession, getSession } = useSession();
|
|
|
|
async function getList() {
|
|
setSpin(true);
|
|
try {
|
|
const { code, result } = (await serverApi({ condition: selectVal.value, dataType: props.setting.dataType })) || {};
|
|
setSpin(false);
|
|
if (code != 200 || !result) {
|
|
return;
|
|
}
|
|
setSession(SERVER_DETAIL, JSON.stringify(result));
|
|
setValue(result);
|
|
} catch {
|
|
setSpin(false);
|
|
const result = JSON.parse(getSession(SERVER_DETAIL));
|
|
setValue(result);
|
|
}
|
|
}
|
|
|
|
function setValue(result = {}) {
|
|
let { alerdyreceive = '', totalacceptance = '' } = result;
|
|
setStatistics(result);
|
|
if (alerdyreceive || totalacceptance) {
|
|
useDetail.setAlerdyreceive(alerdyreceive);
|
|
useDetail.setTotalacceptance(totalacceptance);
|
|
}
|
|
}
|
|
|
|
function handleSelect(index: number, value: string) {
|
|
selectIndex.value = index;
|
|
selectVal.value = value;
|
|
getList();
|
|
}
|
|
|
|
function handleClick(item) {
|
|
emit('handleClick', item);
|
|
}
|
|
|
|
watch(
|
|
() => props.refreshState,
|
|
() => {
|
|
getList();
|
|
}
|
|
);
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
height: calc(100% - 40px);
|
|
|
|
.server-container {
|
|
color: #fff;
|
|
padding-top: 10px;
|
|
height: 88%;
|
|
display: grid;
|
|
align-items: start;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
|
|
.spin {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
.server-item {
|
|
font-size: 16px;
|
|
padding: 6px 6% 6px 5%;
|
|
|
|
&.hasCursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
</style>
|