weixin
c7abcf1f67
1.新需求2025.9.19新需求： 去掉"健康监测"副屏, 修改后健康终端报警点击查看详情弹出告警记录分页列表; 去掉【体检人数统计】【体检数据】【健康打卡数据】，增加【心血管监测】模块功能，【心血管监测】功能将原心血管监测大屏上的内容整理并移动到急救服务平台大屏中; 员工求助时，地图中推荐两个医院、两个健康小屋、两个AED坐标信息，并按距离排序，体现距离远近顺序; 地图中油田医院、健康小屋等各个图例，显示总数信息; 救护车坐标信息维护，并在大屏上标记; 右上角"增加【救助信息】板块, 当出现应急弹窗后或从今日应急选中应急事件 , 该板块需展示应急事件的相关信息(开发中);
403 lines
14 KiB
Vue
403 lines
14 KiB
Vue
<template>
|
||
<Dialog class="index-modal" :openVis="visible" width="60%" :title="dialogTitle" @close="handleClose" :maskClosable="false">
|
||
<template #container>
|
||
<div v-if="useForm && firstForm.length > 0" class="form-container">
|
||
<Form :model="formRecord" v-bind="formItemLayout">
|
||
<slot name="searchFirst"></slot>
|
||
<a-form-item v-for="(item, index) in firstForm" :label="item?.label" :key="index">
|
||
<a-input :placeholder="item?.placeholder" v-if="item?.type == 'input'" v-model:value="formRecord[item?.field]" />
|
||
<a-select
|
||
v-if="item?.type == 'select'"
|
||
:placeholder="item?.placeholder"
|
||
v-model:value="formRecord[item?.field]"
|
||
:options="item?.options"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="单位" v-if="needDept">
|
||
<a-select placeholder="选择单位" @change="changeSecond" v-model:value="orgCode1" :options="option1" />
|
||
</a-form-item>
|
||
<a-form-item label="部门" v-if="needDept">
|
||
<a-select placeholder="选择部门" v-model:value="orgCode2" :options="option2" />
|
||
</a-form-item>
|
||
<slot name="searchSecond"></slot>
|
||
<div class="form-btn">
|
||
<a-button @click="handleClickReset" style="border-color: #00ccff">重置</a-button>
|
||
<a-button
|
||
@click="handleClicksearch"
|
||
:loading="loading"
|
||
style="margin-left: 10px; background: #00ccff; border-color: #00ccff; color: #ffffff"
|
||
>
|
||
搜索
|
||
</a-button>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
<div class="top-bottom-center" v-if="twoROnly">
|
||
<div class="date-change">
|
||
<span :class="dataActity == 1 ? 'date-item' : ''" @click="handleDataChange(1)">今日</span>
|
||
<span :class="dataActity == 2 ? 'date-item' : ''" @click="handleDataChange(2)">本月</span>
|
||
</div>
|
||
<div style="margin: 0 20px"> {{ dataActity == 1 ? '今日' : '本月' }}打卡总人数：{{ normalNum ? normalNum : '--' }}人 </div>
|
||
<div> 异常人数：{{ abnormalNum ? abnormalNum : '--' }}人 </div>
|
||
</div>
|
||
<BasicTable
|
||
@table-load="tableLoad"
|
||
ref="registerTable"
|
||
class="table-container"
|
||
:api="api"
|
||
:key="visible"
|
||
:columns="props.column"
|
||
:apiParams="formState"
|
||
>
|
||
<template #bodyCell="{ column, record, index, text }">
|
||
<slot name="bodyCell" v-bind="{ column, record, index, text } || {}"></slot>
|
||
</template>
|
||
</BasicTable>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||
import { onMounted, ref, watch } from 'vue';
|
||
import { Form } from 'ant-design-vue';
|
||
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
||
import { allSecondaryDepartsApi, getThreeDepartByOrgCodeApi } from '/@/views/indexSun/indexSun.api.ts';
|
||
import dayjs from 'dayjs';
|
||
import { isFunction } from '/@/utils/is.ts';
|
||
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: () => '',
|
||
},
|
||
useForm: {
|
||
type: Boolean,
|
||
default: () => false,
|
||
},
|
||
column: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
firstForm: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
api: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
twoROnly: {
|
||
type: Object,
|
||
},
|
||
apiParams: {
|
||
type: Object,
|
||
},
|
||
needDept: {
|
||
type: Boolean,
|
||
},
|
||
});
|
||
const loading = ref<boolean>(false);
|
||
const formState = ref();
|
||
const registerTable = ref();
|
||
const dialogTitle = ref('');
|
||
const option1 = ref([{ label: '全部', value: '' }]);
|
||
const option2 = ref([{ label: '全部', value: '' }]);
|
||
const orgCode1 = ref('');
|
||
const orgCode2 = ref('');
|
||
const formRecord = ref({});
|
||
const dataActity = ref(1);
|
||
onMounted(() => {
|
||
getSecondDepart();
|
||
});
|
||
|
||
function getSecondDepart() {
|
||
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,
|
||
};
|
||
})
|
||
: [];
|
||
option1.value = option1.value.concat(op);
|
||
} else {
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
|
||
function handleDataChange(type) {
|
||
if (type == dataActity.value) return;
|
||
dataActity.value = type;
|
||
getField();
|
||
if (props.twoROnly) {
|
||
const twoRData = localStorage.getItem('twoRList');
|
||
const newData = JSON.parse(twoRData);
|
||
if (props.twoROnly.type == 1) {
|
||
if (type == 1) {
|
||
normalNum.value = newData.weightLossCountDay;
|
||
abnormalNum.value = newData.weightLossAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.weightLossCountMonth;
|
||
abnormalNum.value = newData.weightLossAbnormalCountMonth;
|
||
}
|
||
} else if (props.twoROnly.type == 2) {
|
||
if (type == 1) {
|
||
normalNum.value = newData.bloodSugarCountDay;
|
||
abnormalNum.value = newData.bloodSugarAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.bloodSugarCountMonth;
|
||
abnormalNum.value = newData.bloodSugarAbnormalCountMonth;
|
||
}
|
||
} else {
|
||
if (type == 1) {
|
||
normalNum.value = newData.bloodPressureCountDay;
|
||
abnormalNum.value = newData.bloodPressureAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.bloodPressureCountMonth;
|
||
abnormalNum.value = newData.bloodPressureAbnormalCountMonth;
|
||
}
|
||
}
|
||
}
|
||
if (type == 1) {
|
||
formState.value.inputDateBegin = dayjs().format('YYYY-MM-DD');
|
||
formState.value.inputDateEnd = dayjs().format('YYYY-MM-DD');
|
||
} else {
|
||
formState.value.inputDateBegin = dayjs().startOf('month').format('YYYY-MM-DD');
|
||
formState.value.inputDateEnd = dayjs().format('YYYY-MM-DD');
|
||
}
|
||
formState.value = {
|
||
...formState.value,
|
||
...formRecord.value,
|
||
};
|
||
}
|
||
|
||
function changeSecond() {
|
||
orgCode2.value = '';
|
||
option2.value = [{ label: '全部', value: '' }];
|
||
if (orgCode1.value) {
|
||
getThirdD();
|
||
}
|
||
}
|
||
|
||
function getThirdD() {
|
||
getThreeDepartByOrgCodeApi({ orgCode: orgCode1.value })
|
||
.then((res: any) => {
|
||
if (res.code === 200) {
|
||
const op: any[] = res?.result
|
||
? res.result.map((it: any) => {
|
||
return {
|
||
label: it.departName,
|
||
value: it.orgCode,
|
||
};
|
||
})
|
||
: [];
|
||
option2.value = option2.value.concat(op);
|
||
} else {
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
|
||
const formItemLayout = {
|
||
labelCol: {
|
||
style: { width: '80px' },
|
||
...props.labelCol,
|
||
},
|
||
wrapperCol: {
|
||
span: 24,
|
||
...props.wrapperCol,
|
||
},
|
||
};
|
||
watch(props, () => {
|
||
dialogTitle.value = props.title;
|
||
formState.value = {
|
||
...formState.value,
|
||
...props.apiParams,
|
||
};
|
||
if (props.twoROnly) {
|
||
twoROnlyFun();
|
||
}
|
||
getField();
|
||
});
|
||
const normalNum = ref();
|
||
const abnormalNum = ref();
|
||
function twoROnlyFun() {
|
||
normalNum.value = '';
|
||
abnormalNum.value = '';
|
||
dataActity.value = props.twoROnly.date;
|
||
const twoRData = localStorage.getItem('twoRList');
|
||
const newData = JSON.parse(twoRData);
|
||
if (newData) {
|
||
if (props.twoROnly.type == 1) {
|
||
if (props.twoROnly.date == 1) {
|
||
normalNum.value = newData.weightLossCountDay;
|
||
abnormalNum.value = newData.weightLossAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.weightLossCountMonth;
|
||
abnormalNum.value = newData.weightLossAbnormalCountMonth;
|
||
}
|
||
} else if (props.twoROnly.type == 2) {
|
||
if (props.twoROnly.date == 1) {
|
||
normalNum.value = newData.bloodSugarCountDay;
|
||
abnormalNum.value = newData.bloodSugarAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.bloodSugarCountMonth;
|
||
abnormalNum.value = newData.bloodSugarAbnormalCountMonth;
|
||
}
|
||
} else {
|
||
if (props.twoROnly.date == 1) {
|
||
normalNum.value = newData.bloodPressureCountDay;
|
||
abnormalNum.value = newData.bloodPressureAbnormalCountDay;
|
||
} else {
|
||
normalNum.value = newData.bloodPressureCountMonth;
|
||
abnormalNum.value = newData.bloodPressureAbnormalCountMonth;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function tableLoad(b: boolean) {
|
||
loading.value = b;
|
||
}
|
||
|
||
function getField() {
|
||
let result = {};
|
||
props.firstForm.map((item) => {
|
||
result[item.field] = item.defaultValue || '';
|
||
});
|
||
formRecord.value = {
|
||
...formRecord.value,
|
||
...result,
|
||
};
|
||
}
|
||
function handleClicksearch() {
|
||
formState.value = {
|
||
...formState.value,
|
||
...formRecord.value,
|
||
salvageUserDepart: orgCode2.value ? orgCode2.value : orgCode1.value ? orgCode1.value : '',
|
||
};
|
||
// registerTable.value.getRecords();
|
||
}
|
||
|
||
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
||
|
||
function handleClose() {
|
||
orgCode2.value = '';
|
||
orgCode1.value = '';
|
||
formState.value = {};
|
||
formRecord.value = {};
|
||
closeDialog();
|
||
}
|
||
function handleClickReset() {
|
||
orgCode2.value = '';
|
||
orgCode1.value = '';
|
||
getField();
|
||
formRecord.value = {};
|
||
formState.value = {};
|
||
formState.value = {
|
||
...formState.value,
|
||
...formRecord.value,
|
||
salvageUserDepart: '',
|
||
...props.apiParams,
|
||
};
|
||
}
|
||
defineExpose({
|
||
openDialog,
|
||
closeDialog,
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
:deep(.dialog) {
|
||
border: 1px solid #00ccff !important;
|
||
}
|
||
.index-modal {
|
||
border: 1px solid #00ccff !important;
|
||
:deep(.dialog .ant-modal-title) {
|
||
background: red !important;
|
||
}
|
||
.form-container {
|
||
margin: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
:deep(.ant-form-item-label > label) {
|
||
color: var(--formLabel);
|
||
}
|
||
:deep(.ant-input) {
|
||
color: #fff !important;
|
||
background-color: #082147 !important;
|
||
border: 1px solid transparent !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
:deep(.ant-form) {
|
||
width: 100%;
|
||
display: flex;
|
||
.ant-form-item {
|
||
flex: 1;
|
||
max-width: 280px;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
.form-btn {
|
||
flex: 1;
|
||
padding-left: 20px;
|
||
:deep(.ant-btn) {
|
||
background: #082147;
|
||
border: 1px solid #00ccff;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.table-container {
|
||
margin: 10px 10px 0;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-form-item-label) {
|
||
width: auto !important;
|
||
}
|
||
|
||
:deep(.ant-form-item-control) {
|
||
margin-right: 20px !important;
|
||
}
|
||
.top-bottom-center {
|
||
margin-top: 10px;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
color: #fff;
|
||
align-items: center;
|
||
.date-change {
|
||
> span {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
width: 80px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
background: #072246;
|
||
border: 1px solid #1684fc;
|
||
&:nth-child(1) {
|
||
border-top-left-radius: 4px;
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
&:nth-child(2) {
|
||
border-left: none;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
}
|
||
.date-item {
|
||
background: #02ccfc;
|
||
}
|
||
}
|
||
}
|
||
</style>
|