236 lines
8.8 KiB
Vue
236 lines
8.8 KiB
Vue
<template>
|
||
<BasicTables @register="registerTable" page-title="长庆油田专家医院" @handle-ok="handleModal" :show-table="radioValue === '0'">
|
||
<template #rightCol>
|
||
<a-radio-group v-model:value="radioValue" button-style="solid" @change="changeRadioValue">
|
||
<a-radio-button value="0">表格</a-radio-button>
|
||
<a-radio-button value="1">地图</a-radio-button>
|
||
</a-radio-group>
|
||
</template>
|
||
<template #form-resourceName="{ model, filed }">
|
||
<a-select
|
||
v-model:value="model[filed]"
|
||
:showSearch="true"
|
||
label-in-value
|
||
:filter-option="(input: string, option: any): boolean => {
|
||
const str: string = input.toLowerCase();
|
||
return option.label.toLowerCase().indexOf(str) >= 0;
|
||
}"
|
||
placeholder="请选择单位"
|
||
@select="selectInfoValue"
|
||
>
|
||
<a-select-option
|
||
v-for="(item, index) in mapList"
|
||
:label="item.resourceName"
|
||
:value="JSON.stringify(item)"
|
||
:key="item.resourceName + '-lo-' + index"
|
||
>
|
||
{{ item.resourceName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template #tableInnerSlot>
|
||
<list-map ref="listMap" :map-list="mapList" :drawer-width="500" filed="resourceName">
|
||
<template #mapDrawer="{ data }">
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">医疗点名称：</div>
|
||
<div class="drawer-value">{{ data?.name }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">所属单位：</div>
|
||
<div class="drawer-value">{{ data?.departName }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label" style="width: 85px">详细地址：</div>
|
||
<div class="drawer-value" style="width: calc(100% - 85px)">{{ data?.address }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">医护人数：</div>
|
||
<div class="drawer-value">{{ data?.medicalStaffNum }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">救护车数量：</div>
|
||
<div class="drawer-value">{{ data?.ambulanceNum }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">{{ `今年诊疗人次(${data?.year})：` }}</div>
|
||
<div class="drawer-value">{{ data?.thisYearDiagnosisSum }}</div>
|
||
</div>
|
||
<div class="drawer-d">
|
||
<div class="drawer-label">累计诊疗人次：</div>
|
||
<div class="drawer-value">{{ data?.allDiagnosisSum }}</div>
|
||
</div>
|
||
|
||
<div class="bottom-button">
|
||
<a-button type="primary" @click="handleYear(data)">历年诊疗人数变化</a-button>
|
||
</div>
|
||
</template>
|
||
</list-map>
|
||
</template>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'specialistSum'">
|
||
<a-button type="link" @click="handleSpecial(record)">{{ record.specialistSum }}</a-button>
|
||
</template>
|
||
<template v-if="column.dataIndex === 'notThisYear'">
|
||
<a-button type="link" @click="handleYear(record)">历年变化</a-button>
|
||
</template>
|
||
</template>
|
||
</BasicTables>
|
||
<LineTableModal @register="registerModal"></LineTableModal>
|
||
<SpecialModal @register="registerSpecial"></SpecialModal>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import BasicTables from '/@/components/Table/src/BasicTables.vue';
|
||
import { useListPage } from '/@/hooks/system/useListPages';
|
||
import { getColumns, searchFormSchema } from '/@/views/archivesManage/institution/institutionInfomation/expertHospital/expertHospital.data';
|
||
import { nextTick, ref } from 'vue';
|
||
import dayjs from 'dayjs';
|
||
import {
|
||
geoApi,
|
||
hospitalListApi,
|
||
archivesYearStatApi,
|
||
} from '/@/views/archivesManage/institution/institutionInfomation/expertHospital/expertHospital.api';
|
||
import ListMap from '/@/views/archivesManage/components/listMap.vue';
|
||
import { useModal } from '/@/components/Modal';
|
||
import LineTableModal from '/@/views/archivesManage/components/lineTableModal.vue';
|
||
import SpecialModal from '/@/views/archivesManage/institution/institutionInfomation/expertHospital/component/specialModal.vue';
|
||
const yearData = ref(dayjs(new Date()));
|
||
const radioValue = ref('0');
|
||
const mapList = ref<any[]>([]);
|
||
const { tableContext } = useListPage({
|
||
tableProps: {
|
||
pageTitle: '长庆油田专家医院',
|
||
api: hospitalListApi,
|
||
btnArr: ['add', 'edit', 'delete', 'export', 'total', 'print'],
|
||
canResize: false,
|
||
|
||
showIndexColumn: true,
|
||
columns: getColumns(yearData.value),
|
||
formConfig: {
|
||
schemas: searchFormSchema,
|
||
autoSubmitOnEnter: true,
|
||
showAdvancedButton: false,
|
||
fieldMapToNumber: [],
|
||
fieldMapToTime: [],
|
||
},
|
||
},
|
||
});
|
||
const [registerTable, { reload, getForm, setProps }, {}] = tableContext;
|
||
const [registerModal, { openModal }] = useModal();
|
||
const [registerSpecial, { openModal: openSpecialModal }] = useModal();
|
||
function handleModal(value) {
|
||
if (value.year) {
|
||
yearData.value = value.year;
|
||
setProps({ columns: getColumns(yearData.value) });
|
||
}
|
||
}
|
||
async function handleYear(record) {
|
||
console.log(record);
|
||
const ddd = await archivesYearStatApi({ hospitalId: record.id });
|
||
const chartsName = ddd.map((item) => {
|
||
return item.years;
|
||
});
|
||
const chartsValue = ddd.map((item) => {
|
||
return item.sums;
|
||
});
|
||
ddd.forEach((item) => {
|
||
item.year = item.years;
|
||
});
|
||
openModal(true, {
|
||
title: '历年服务人次变化',
|
||
record,
|
||
chartsName,
|
||
chartsValue,
|
||
dataSource: ddd,
|
||
titleInfo: [
|
||
{
|
||
name: '医院名称',
|
||
value: record.resourceName,
|
||
},
|
||
{
|
||
name: '医院等级',
|
||
value: record.level_dictText,
|
||
},
|
||
{
|
||
name: '专家人数',
|
||
value: record.specialistSum,
|
||
},
|
||
{
|
||
name: '今年服务人次',
|
||
year: record.years,
|
||
value: record.thisYearSessionSum,
|
||
},
|
||
{
|
||
name: '累计服务人次',
|
||
value: record.allSessionSum,
|
||
},
|
||
],
|
||
});
|
||
}
|
||
function handleSpecial(record) {
|
||
openSpecialModal(true, {
|
||
record,
|
||
});
|
||
}
|
||
const selectValue = ref('');
|
||
const listMap = ref('');
|
||
|
||
async function changeRadioValue(v) {
|
||
if (v.target.value === '1') {
|
||
if (mapList.value.length === 0) {
|
||
mapList.value = await geoApi({});
|
||
}
|
||
|
||
await nextTick(() => {
|
||
listMap.value.initMap(mapList.value);
|
||
});
|
||
setProps({
|
||
isNeedSearch: false,
|
||
});
|
||
await getForm().updateSchema({
|
||
field: 'showType',
|
||
defaultValue: '1',
|
||
});
|
||
} else {
|
||
setProps({
|
||
isNeedSearch: true,
|
||
});
|
||
await getForm().updateSchema({
|
||
field: 'showType',
|
||
defaultValue: '0',
|
||
});
|
||
}
|
||
}
|
||
|
||
function selectInfoValue(v) {
|
||
selectValue.value = v.value;
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.drawer-d {
|
||
font-weight: bold;
|
||
padding: 0 0 10px 6px;
|
||
font-size: 16px;
|
||
display: flex;
|
||
.drawer-label {
|
||
//width: 180px;
|
||
text-align: right;
|
||
padding-right: 5px;
|
||
}
|
||
.drawer-value {
|
||
//width: calc(100% - 140px);
|
||
}
|
||
}
|
||
|
||
.bottom-button {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 30px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
button {
|
||
font-weight: bold !important;
|
||
}
|
||
}
|
||
</style>
|