update
init
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" destroyOnClose @register="registerModal" title="监测数据" width="80%">
|
||||
<div style="display: flex; flex-wrap: wrap">
|
||||
<div style="width: 100%; padding: 0 20px 20px">
|
||||
<div class="top-info">
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 员工姓名：{{ infoData.bindRealName || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 员工编号：{{ infoData.workNo || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 工具编码：{{ infoData.watchNo || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 性别：{{ getName(infoData.sex, Dict.getDict('sex2')) || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 年龄：{{ infoData.age || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 单位：{{ infoData.userTwoOrgName || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 部门：{{ infoData.userThreeOrgName || '-' }} </div>
|
||||
<div style="margin-bottom: 10px; font-weight: bold"> 绑定日期：{{ infoData.bindDate }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="0" tab="总览" />
|
||||
<a-tab-pane key="1" tab="心率" />
|
||||
<a-tab-pane key="2" tab="血氧" />
|
||||
<a-tab-pane key="3" tab="压力" />
|
||||
<a-tab-pane key="4" tab="睡眠" />
|
||||
<a-tab-pane key="5" tab="体温" />
|
||||
<a-tab-pane key="6" tab="锻炼" />
|
||||
<a-tab-pane key="7" tab="步数" />
|
||||
</a-tabs>
|
||||
<div style="height: 60vh; overflow: auto">
|
||||
<all-look
|
||||
@change-params-date="changeParamsDate"
|
||||
v-if="activeKey === '0'"
|
||||
:info-data="info"
|
||||
:userId="infoData.bindUserId"
|
||||
class="tabs-d"
|
||||
/>
|
||||
<heart-rate v-if="activeKey === '1'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<blood-oxygen v-if="activeKey === '2'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<pressure v-if="activeKey === '3'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<sleep v-if="activeKey === '4'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<temperature v-if="activeKey === '5'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<motion v-if="activeKey === '6'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
<step-number v-if="activeKey === '7'" :userId="infoData.bindUserId" class="tabs-d" :keyType="activeKey" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useModalInner } from '/@/components/Modal';
|
||||
import BasicModal from '/@/components/Modal/src/BasicModal.vue';
|
||||
import { ref } from 'vue';
|
||||
import AllLook from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/allLook.vue';
|
||||
import HeartRate from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/heartRate.vue';
|
||||
import BloodOxygen from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/bloodOxygen.vue';
|
||||
import Pressure from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/pressure.vue';
|
||||
import Sleep from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/sleep.vue';
|
||||
import Temperature from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/temperature.vue';
|
||||
import Motion from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/motion.vue';
|
||||
import StepNumber from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/stepNumber.vue';
|
||||
import { bindInfoByUserApi, queryAllStatisticsApi } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
|
||||
import { getName } from '/@/views/interveneNew/compoents/utils';
|
||||
import { Dict } from '/@/utils/cache/dict';
|
||||
|
||||
const activeKey = ref('0');
|
||||
const infoData = ref({});
|
||||
const paramsDate = ref('0');
|
||||
const info = ref({});
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
infoData.value = {};
|
||||
activeKey.value = '0';
|
||||
paramsDate.value = '0';
|
||||
info.value = {};
|
||||
setModalProps({ footer: false });
|
||||
let result: any;
|
||||
try {
|
||||
result = await bindInfoByUserApi({ userId: data.record.bindUserId });
|
||||
} catch {}
|
||||
infoData.value = { ...data.record, ...{ bindDate: result ? result?.bindDate : '' } };
|
||||
await getInfo();
|
||||
});
|
||||
|
||||
async function changeParamsDate(v) {
|
||||
paramsDate.value = v;
|
||||
await getInfo();
|
||||
}
|
||||
|
||||
async function getInfo() {
|
||||
await queryAllStatisticsApi({ type: paramsDate.value, userId: infoData.value.bindUserId }).then((res) => {
|
||||
info.value = res;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
justify-content: center;
|
||||
}
|
||||
:deep(.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-tabs-tab + .ant-tabs-tab) {
|
||||
margin-left: calc(100% / 14);
|
||||
}
|
||||
:deep(.ant-tabs-nav-list) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabs-d {
|
||||
padding: 20px;
|
||||
}
|
||||
.top-info {
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px dashed #cecece;
|
||||
display: flex;
|
||||
> div {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" title="服务数据" width="80%">
|
||||
<div class="top-d-outer">
|
||||
<div class="top-d">
|
||||
<div>所属单位：{{ wearInfo?.departName || '-' }}</div>
|
||||
<div>设备数量：{{ wearInfo?.total }}</div>
|
||||
<div>配发人数：{{ wearInfo?.distribution }}</div>
|
||||
<div>设备正常运行数量：{{ wearInfo?.normal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BasicTable @register="registerTable" table-type="1">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'dataInfo'">
|
||||
<a-button v-if="record?.bindUserId" type="link" @click="lookDataInfo(record)">监测数据</a-button>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
<user-info-modal @register="registerModal1" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import BasicModal from '/@/components/Modal/src/BasicModal.vue';
|
||||
import { useModal, useModalInner } from '/@/components/Modal';
|
||||
import { ref } from 'vue';
|
||||
import BasicTable from '/@/components/Table/src/BasicTable.vue';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { deviceListApi } from '/@/views/archivesManage/institution/timeService/wear/wear.api';
|
||||
import { columns } from '/@/views/archivesManage/institution/timeService/wear/wear.data';
|
||||
import UserInfoModal from '/@/views/archivesManage/institution/timeService/wear/components/userInfoModal.vue';
|
||||
|
||||
const wearInfo = ref({});
|
||||
const [registerModal1, { openModal }] = useModal();
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
setModalProps({ showCancelBtn: false, showOkBtn: false });
|
||||
wearInfo.value = data.record;
|
||||
setProps({ searchInfo: { deptId: data?.record?.deptId } });
|
||||
await reload({ page: 1 });
|
||||
});
|
||||
const { tableContext } = useListPage({
|
||||
tableProps: {
|
||||
api: deviceListApi,
|
||||
columns,
|
||||
canResize: false,
|
||||
orderFlag: false,
|
||||
immediate: false,
|
||||
showIndexColumn: true,
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
showActionColumn: false,
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, setProps }] = tableContext;
|
||||
|
||||
function lookDataInfo(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.top-d-outer {
|
||||
padding: 10px;
|
||||
.top-d {
|
||||
border-bottom: 1px dashed #cecece;
|
||||
display: flex;
|
||||
padding: 0 0 10px;
|
||||
> div {
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
list = '/health-watch/archives/watch/device/page',
|
||||
deviceList = '/health-watch/watch/watchDevice/list',
|
||||
}
|
||||
|
||||
export const listApi = (params: any) => defHttp.get({ url: Api.list, params }, { isTransformResponse: false });
|
||||
export const deviceListApi = (params: any) => defHttp.get({ url: Api.deviceList, params });
|
||||
@@ -0,0 +1,68 @@
|
||||
import { BasicColumn } from '/@/components/Table';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '工具编码',
|
||||
dataIndex: 'watchNo',
|
||||
},
|
||||
{
|
||||
title: '归属单位',
|
||||
dataIndex: 'departmentName',
|
||||
},
|
||||
{
|
||||
title: '入库日期',
|
||||
dataIndex: 'createDate',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '绑定状态',
|
||||
dataIndex: 'watchStatus',
|
||||
customRender: ({ text }) => {
|
||||
switch (text) {
|
||||
case '0':
|
||||
return '未绑定';
|
||||
case '1':
|
||||
return '已绑定';
|
||||
default:
|
||||
return;
|
||||
}
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '绑定员工',
|
||||
dataIndex: 'bindRealName',
|
||||
customRender: ({ text }) => {
|
||||
return text || '-';
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '员工编号',
|
||||
dataIndex: 'workNo',
|
||||
customRender: ({ text }) => {
|
||||
return text || '-';
|
||||
},
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '员工所属部门',
|
||||
dataIndex: 'userThreeOrgName',
|
||||
customRender: ({ text }) => {
|
||||
return text || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '绑定日期',
|
||||
dataIndex: 'bindDate',
|
||||
customRender: ({ text }) => {
|
||||
return text || '-';
|
||||
},
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '监测数据',
|
||||
dataIndex: 'dataInfo',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="outer-d">
|
||||
<div class="top-title"> 长庆油田穿戴设备 </div>
|
||||
<div class="map-d">
|
||||
<template v-if="!loading">
|
||||
<service-map
|
||||
ref="serviceMap"
|
||||
:map-list="mapList"
|
||||
@get-marker-info="getMarkerInfo"
|
||||
:label-content="labelContent"
|
||||
:marker-content="markerContent"
|
||||
@get-detail="getDetail"
|
||||
field="departName"
|
||||
id="departCode"
|
||||
/>
|
||||
<div class="search-d">
|
||||
所属单位
|
||||
<ApiSelect
|
||||
:value="orgCode"
|
||||
:api="allSecondaryDepartsNew"
|
||||
@change="
|
||||
(v) => {
|
||||
orgCode = v;
|
||||
}
|
||||
"
|
||||
resultField="result"
|
||||
labelField="departName"
|
||||
valueField="orgCode"
|
||||
:after-fetch="
|
||||
(data) => {
|
||||
data.unshift({
|
||||
orgCode: '1',
|
||||
departName: '全部单位',
|
||||
});
|
||||
return data;
|
||||
}
|
||||
"
|
||||
:allowClear="true"
|
||||
:show-default-value="false"
|
||||
:immediate="true"
|
||||
:showSearch="true"
|
||||
:filterOption="
|
||||
(input: string, option: any): boolean => {
|
||||
const str: string = input.toLowerCase();
|
||||
return option.label.toLowerCase().indexOf(str) >= 0;
|
||||
}"
|
||||
style="width: 260px"
|
||||
/>
|
||||
<a-button type="primary" @click="searchB">查询</a-button>
|
||||
<a-button style="background-color: #a4adb3; color: #ffffff" @click="resetB">重置</a-button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-d">
|
||||
<div
|
||||
class="bottom-d-item"
|
||||
v-for="(item, index) in wearInfo"
|
||||
:key="`bottom-d-item-${index}`"
|
||||
:style="{ margin: index === 1 ? '0 25px 0 50px' : index === 2 ? '0 50px 0 25px' : 0 }"
|
||||
>
|
||||
<div>{{ item.value }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<wear-modal @register="registerModal" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import ServiceMap from '/@/views/archivesManage/institution/timeService/components/serviceMap.vue';
|
||||
import { nextTick, onMounted, ref, onBeforeUnmount } from 'vue';
|
||||
import { allSecondaryDepartsNew } from '/@/utils/orgSearchInfo';
|
||||
import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
||||
import { listApi } from '/@/views/archivesManage/institution/timeService/wear/wear.api';
|
||||
import WearModal from '/@/views/archivesManage/institution/timeService/wear/components/wearModal.vue';
|
||||
import watch from '/@/assets/images/watch.png';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
const loading = ref(true);
|
||||
const serviceMap = ref();
|
||||
const mapList = ref();
|
||||
const orgCode = ref('1');
|
||||
const wearInfo = ref<any[]>([]);
|
||||
const markerContent = ref(`<div style="white-space: nowrap;display: flex;background-color: #58a55c;padding: 5px 10px;border-radius: 10px;
|
||||
align-items: center;">
|
||||
<img src="${watch}" alt="" style="width: 20px;height: 20px; margin-right: 5px"/>
|
||||
<span style="color: #ffffff">^&</span>
|
||||
</div>`);
|
||||
const labelContent = ref('');
|
||||
|
||||
onMounted(async () => {
|
||||
await initList();
|
||||
loading.value = false;
|
||||
await nextTick(() => {
|
||||
serviceMap.value.initMap(mapList.value);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
serviceMap.value.destroyMap();
|
||||
});
|
||||
|
||||
async function initList() {
|
||||
try {
|
||||
const { code, result, total, distribution, wear, normal } = await listApi({ orgCode: orgCode.value === '1' ? '' : orgCode.value });
|
||||
if (code === 200) {
|
||||
mapList.value = result;
|
||||
wearInfo.value = [
|
||||
{ value: total, name: '穿戴设备总数' },
|
||||
{ value: distribution, name: '穿戴设备配发人数' },
|
||||
{ value: wear, name: '佩带人数' },
|
||||
{ value: normal, name: '运行正常设备数' },
|
||||
];
|
||||
}
|
||||
} catch (e) {
|
||||
mapList.value = [];
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
function getMarkerInfo(e) {
|
||||
labelContent.value = `
|
||||
<div style="padding: 10px;background-color: #ffffff;border-radius: 10px">
|
||||
<div style="padding-top: 8px;font-weight: bold;font-size: 14px">所属单位：${e.departName || '-'} </div>
|
||||
<div style="padding-top: 8px;font-weight: bold;font-size: 14px">设备数量：${e.total} </div>
|
||||
<div style="padding-top: 8px;font-weight: bold;font-size: 14px">配发人数：${e.distribution} </div>
|
||||
<div style="padding-top: 8px;font-weight: bold;font-size: 14px">佩戴人数：${e.wear} </div>
|
||||
<div style="padding-top: 8px;font-weight: bold;font-size: 14px">设备运行正常数量：${e.normal} </div>
|
||||
<div style="padding-top: 8px;text-align: center;color: #5087ec" onclick="getDetail()">查看设备数据></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
serviceMap.value.setLabel(labelContent.value);
|
||||
}
|
||||
async function searchB() {
|
||||
await initList();
|
||||
}
|
||||
async function resetB() {
|
||||
orgCode.value = '1';
|
||||
await searchB();
|
||||
}
|
||||
|
||||
function getDetail(e) {
|
||||
openModal(true, {
|
||||
record: e,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.outer-d {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.search-d {
|
||||
box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35);
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 99;
|
||||
> :nth-child(n + 1) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bottom-d {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.bottom-d-item {
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.35);
|
||||
background-color: #ffffff;
|
||||
font-weight: bold;
|
||||
padding: 0 50px;
|
||||
> div {
|
||||
text-align: center;
|
||||
&:nth-child(1) {
|
||||
font-size: 18px;
|
||||
padding: 10px 0 5px 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding: 5px 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-d {
|
||||
position: absolute;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 70px);
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user