343 lines
12 KiB
Vue
343 lines
12 KiB
Vue
<template>
|
|
<div class="two-l-box">
|
|
<div class="title">
|
|
<span>主诉分类</span>
|
|
<span class="look-view" @click="handleView">查看详情</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-search">
|
|
<div>
|
|
<a-select v-model:value="selectValue" class="type-select" :options="selectOptions" @change="getData">
|
|
<a-select-option value="全部数据">全部数据</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<div class="type-time">
|
|
<div @click="clickChooseType('0')" :class="[chooseType === '0' ? 'selected' : 'no-selected']">
|
|
全部
|
|
<div>
|
|
<div v-if="chooseType === '0'" class="triangle"></div>
|
|
</div>
|
|
</div>
|
|
<div @click="clickChooseType('1')" :class="[chooseType === '1' ? 'selected' : 'no-selected']">
|
|
男
|
|
<div>
|
|
<div v-if="chooseType === '1'" 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>
|
|
<div class="content-chart">
|
|
<div class="charts" ref="newChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import { getClassCharts } from '/@/views/indexSun/indexSun.ts';
|
|
import { allSecondaryDepartsApi, twoLApi } from '/@/views/indexSun/indexSun.api.ts';
|
|
import { useUserStore } from '/@/store/modules/user.ts';
|
|
|
|
const { getCenterInfo } = useUserStore();
|
|
const props = defineProps({
|
|
bKey: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
});
|
|
const chooseType = ref('0');
|
|
const selectValue = ref('');
|
|
const selectOptions = ref([{ label: '全部数据', value: '' }]);
|
|
const newChart = ref<HTMLElement>();
|
|
function clickChooseType(type) {
|
|
if (chooseType.value === type) return;
|
|
chooseType.value = type;
|
|
getData();
|
|
}
|
|
onMounted(() => {
|
|
getData();
|
|
if (selectOptions.value.length === 1) {
|
|
getAllDepart();
|
|
}
|
|
});
|
|
watch(props, () => {
|
|
selectValue.value = '';
|
|
getData();
|
|
});
|
|
|
|
function getAllDepart() {
|
|
allSecondaryDepartsApi({})
|
|
.then((res: any) => {
|
|
if (res.code === 200) {
|
|
const op: any[] = res?.result
|
|
? res.result.map((it: any) => {
|
|
return {
|
|
label: it.departName,
|
|
value: it.orgCode,
|
|
};
|
|
})
|
|
: [];
|
|
selectOptions.value = selectOptions.value.concat(op);
|
|
} else {
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
function getData() {
|
|
twoLApi({
|
|
sex: chooseType.value,
|
|
depart: selectValue.value,
|
|
centerId: getCenterInfo?.id,
|
|
})
|
|
.then((res: any) => {
|
|
if (res.code == 200) {
|
|
initChart(res.result);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
function initChart(value: any) {
|
|
let myChart = echarts.init(newChart.value);
|
|
const dx =
|
|
value.map((item: any) => {
|
|
return item.name;
|
|
}) || [];
|
|
const dy =
|
|
value.map((item: any) => {
|
|
return item.count;
|
|
}) || [];
|
|
|
|
const max: any =
|
|
value.sort((a: any, b: any) => b.count - a.count).length > 0 ? value.sort((a: any, b: any) => b.count - a.count)[0].count : [];
|
|
const m = max % 25 === 0 ? max : (parseInt(max / 25) + 1) * 25;
|
|
let option = getClassCharts(dx, dy, m);
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', () => {
|
|
myChart && myChart.resize();
|
|
});
|
|
}
|
|
const emit = defineEmits(['handleView']);
|
|
function handleView() {
|
|
emit('handleView');
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.two-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;
|
|
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 {
|
|
height: calc(100% - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.content-search {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 5px 10px;
|
|
.type-select {
|
|
width: 200px;
|
|
}
|
|
}
|
|
.type-time {
|
|
font-size: 14px;
|
|
> div {
|
|
cursor: pointer;
|
|
padding: 3px 15px;
|
|
margin: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
//width: 60px;
|
|
}
|
|
.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: 5px 3% 5px 5%;
|
|
&.hasCursor {
|
|
cursor: pointer;
|
|
}
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content-chart {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
flex: 1;
|
|
.charts {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|