123 lines
4.3 KiB
Vue
123 lines
4.3 KiB
Vue
<template>
|
|
<div class="three-r-box">
|
|
<div class="title">
|
|
<span>体检数据</span>
|
|
<!-- <span class="look-view">查看详情</span>-->
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-item">
|
|
<template v-if="scrollList">
|
|
<!-- <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="4" v-bind="{ step: 0.2 }">-->
|
|
<div class="item-d">
|
|
<div>体检总人数</div>
|
|
<div style="font-weight: bold">{{ scrollList.totalCount ? scrollList.totalCount : '--' }}人</div>
|
|
</div>
|
|
<div class="item-d">
|
|
<div>心血管异常人数</div>
|
|
<div style="font-weight: bold; cursor: pointer; color: #22e8ff" @click="handleClickNum(1)"
|
|
>{{ scrollList.cardiovaAbCount ? scrollList.cardiovaAbCount : '--' }}人</div
|
|
>
|
|
</div>
|
|
<div class="item-d">
|
|
<div>脑血管异常人数</div>
|
|
<div style="font-weight: bold; cursor: pointer; color: #22e8ff" @click="handleClickNum(2)"
|
|
>{{ scrollList.cerebrovAbCount ? scrollList.cerebrovAbCount : '--' }}人</div
|
|
>
|
|
</div>
|
|
<div class="item-d">
|
|
<div>冠状CT异常人数</div>
|
|
<div style="font-weight: bold; cursor: pointer; color: #22e8ff" @click="handleClickNum(3)"
|
|
>{{ scrollList.cctaAbCount ? scrollList.cctaAbCount : '--' }}人</div
|
|
>
|
|
</div>
|
|
<!-- </vue3-seamless-scroll>-->
|
|
</template>
|
|
<template v-else>
|
|
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
|
<Empty :description="'暂无数据'" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Empty } from 'ant-design-vue';
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import { threeRApi } from '/@/views/indexSun/indexSun.api.ts';
|
|
const scrollList = ref();
|
|
const emit = defineEmits(['handleClick']);
|
|
|
|
const props = defineProps({
|
|
bKey: {
|
|
type: Number,
|
|
default: () => 0,
|
|
},
|
|
});
|
|
|
|
watch(props, () => {
|
|
getList();
|
|
});
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
function getList() {
|
|
threeRApi({})
|
|
.then((res: any) => {
|
|
if (res.code == 200) {
|
|
scrollList.value = res.result[0];
|
|
}
|
|
})
|
|
.catch((err: any) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
function handleClickNum(type: any) {
|
|
emit('handleClick', type);
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.three-r-box {
|
|
background: rgba(8, 75, 100, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.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;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
|
.look-view {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.content {
|
|
padding: 10px 20px;
|
|
height: calc(100% - 40px);
|
|
.content-item {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.item-d {
|
|
//background: pink;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|