302 lines
10 KiB
Vue
302 lines
10 KiB
Vue
<template>
|
|
<div class="one-l-box">
|
|
<div class="title"> 服务详情数据</div>
|
|
<div class="content">
|
|
<div class="type-time">
|
|
<div @click="clickChooseType('4')" :class="[chooseType === '4' ? 'selected' : 'no-selected']">
|
|
本周
|
|
<div>
|
|
<div v-if="chooseType === '4'" class="triangle"></div>
|
|
</div>
|
|
</div>
|
|
<div @click="clickChooseType('3')" :class="[chooseType === '3' ? 'selected' : 'no-selected']">
|
|
本月
|
|
<div>
|
|
<div v-if="chooseType === '3'" class="triangle"></div>
|
|
</div>
|
|
</div>
|
|
<div @click="clickChooseType('2')" :class="[chooseType === '2' ? 'selected' : 'no-selected']">
|
|
本年
|
|
<div>
|
|
<div v-if="chooseType === '2'" class="triangle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="server-container">
|
|
<div
|
|
v-for="(item, index) in statistics"
|
|
:class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '']"
|
|
class="server-item"
|
|
:key="index"
|
|
@click="handleClick(item)"
|
|
>
|
|
<span>{{ item?.name }}</span>
|
|
<span :style="{ color: index > 1 ? '' : '#22e8ff' }">{{ item?.value || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>6+
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
|
import { statisticsNewApi } from '/@/views/indexSun/indexSun.api.ts';
|
|
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
|
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
|
|
|
const { LEFT_KEY1 } = caching;
|
|
const props = defineProps({
|
|
centerId: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
});
|
|
|
|
const useDetail = useDetailStore();
|
|
const emit = defineEmits(['handleClick']);
|
|
const chooseType = ref('4');
|
|
const { statistics, setStatistics, getStatistics } = useStatistics();
|
|
const { setSession, getSession } = useSession();
|
|
|
|
watch(props, () => {
|
|
getOneLeftInfo();
|
|
});
|
|
watch(
|
|
() => chooseType.value,
|
|
() => {
|
|
getOneLeftInfo();
|
|
}
|
|
);
|
|
|
|
async function getOneLeftInfo() {
|
|
const params = {
|
|
condition: chooseType.value,
|
|
centerId: props.centerId,
|
|
};
|
|
statisticsNewApi(params).then((res) => {
|
|
console.log(res);
|
|
if (res.code != 200 || !res.result) {
|
|
return;
|
|
}
|
|
setSession(LEFT_KEY1, JSON.stringify(res.result));
|
|
setValue(res.result);
|
|
});
|
|
}
|
|
|
|
function setValue(result) {
|
|
let { alerdyreceive = '', totalacceptance = '' } = result;
|
|
setStatistics(result);
|
|
if (alerdyreceive || totalacceptance) {
|
|
useDetail.setAlerdyreceive(alerdyreceive);
|
|
useDetail.setTotalacceptance(totalacceptance);
|
|
}
|
|
}
|
|
|
|
function clickChooseType(index) {
|
|
if (chooseType.value === index) return;
|
|
chooseType.value = index;
|
|
}
|
|
|
|
function handleClick(item) {
|
|
emit('handleClick', item);
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.one-l-box {
|
|
background: rgba(8, 75, 100, 0.2);
|
|
|
|
.title {
|
|
height: 40px;
|
|
border-radius: 14px 14px 0 0;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
letter-spacing: 2px;
|
|
color: #ffffff;
|
|
line-height: 40px;
|
|
padding: 0 20px;
|
|
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
|
|
.content {
|
|
height: calc(100% - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.type-time {
|
|
padding-top: 10px;
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
|
|
> div {
|
|
cursor: pointer;
|
|
padding: 3px 15px;
|
|
margin: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.selected {
|
|
color: #00ccff;
|
|
background: rgba(0, 204, 255, 0.2);
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-top: 3px solid #00ccff; /* 顶部线条 */
|
|
border-left: 3px solid #00ccff; /* 左侧线条 */
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-bottom: 3px solid #00ccff; /* 顶部线条 */
|
|
border-right: 3px solid #00ccff; /* 左侧线条 */
|
|
}
|
|
|
|
> div {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-top: 3px solid #00ccff; /* 顶部线条 */
|
|
border-right: 3px solid #00ccff; /* 左侧线条 */
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-bottom: 3px solid #00ccff; /* 顶部线条 */
|
|
border-left: 3px solid #00ccff; /* 左侧线条 */
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-selected {
|
|
color: #b6b6b6;
|
|
background: rgba(26, 69, 126, 0.2);
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-top: 3px solid #1a457e; /* 顶部线条 */
|
|
border-left: 3px solid #1a457e; /* 左侧线条 */
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-bottom: 3px solid #1a457e; /* 顶部线条 */
|
|
border-right: 3px solid #1a457e; /* 左侧线条 */
|
|
}
|
|
|
|
> div {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-top: 3px solid #1a457e; /* 顶部线条 */
|
|
border-right: 3px solid #1a457e; /* 左侧线条 */
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 8px; /* 线条宽度 */
|
|
height: 8px; /* 线条高度 */
|
|
border-bottom: 3px solid #1a457e; /* 顶部线条 */
|
|
border-left: 3px solid #1a457e; /* 左侧线条 */
|
|
}
|
|
}
|
|
}
|
|
|
|
.triangle {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 5px solid transparent; /* 左边透明 */
|
|
border-right: 5px solid transparent; /* 右边透明 */
|
|
border-bottom: 6px solid #00ccff; /* 底部为黑色，形成三角形 */
|
|
}
|
|
}
|
|
|
|
.server-container {
|
|
color: #fff;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
margin-top: 10px;
|
|
padding-bottom: 10px;
|
|
|
|
.spin {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
.server-item {
|
|
// font-size: 16px;
|
|
padding: 3px 3% 3px 5%;
|
|
|
|
&.hasCursor {
|
|
cursor: pointer;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
</style>
|