update
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" :userCount="item.userCount" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
@@ -13,43 +14,51 @@
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
{ name: '正常', value: 0, key: 'normalCount' },
|
||||
{ name: '警戒', value: 0, key: 'warnCount' },
|
||||
{ name: '危险', value: 0, key: 'riskCount' },
|
||||
],
|
||||
type: '1',
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
userCount: '',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
{ name: '正常', value: 0, key: 'normalCount' },
|
||||
{ name: '警戒', value: 0, key: 'warnCount' },
|
||||
{ name: '危险', value: 0, key: 'riskCount' },
|
||||
],
|
||||
type: '2',
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
userCount: '',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '放松', value: 204 },
|
||||
{ name: '中等', value: 34 },
|
||||
{ name: '偏高', value: 78 },
|
||||
{ name: '正常', value: 0, key: 'normalCount' },
|
||||
{ name: '放松', value: 0, key: 'unwindCount' },
|
||||
{ name: '中等', value: 0, key: 'warnCount' },
|
||||
{ name: '偏高', value: 0, key: 'riskCount' },
|
||||
],
|
||||
type: '3',
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
userCount: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{ name: '37.2', value: 234 },
|
||||
{ name: '37.2-38', value: 204 },
|
||||
{ name: '>38', value: 34 },
|
||||
{ name: '37.2', value: 0, key: 'normalCountCount' },
|
||||
{ name: '37.2-38', value: 0, key: 'warnCount' },
|
||||
{ name: '>38', value: 0, key: 'riskCount' },
|
||||
],
|
||||
type: '5',
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
userCount: '',
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -63,8 +72,18 @@
|
||||
});
|
||||
|
||||
async function init() {
|
||||
const data = await getWatchDataByOrgCode(props);
|
||||
console.log('data', data);
|
||||
const { code, result } = await getWatchDataByOrgCode(props);
|
||||
if (code == 200) {
|
||||
let data = cloneDeep(dataList.value);
|
||||
data.forEach((item) => {
|
||||
let resData = result.find((v) => v.type == item.type);
|
||||
item.userCount = resData.userCount;
|
||||
item.data.forEach((val) => {
|
||||
val.value = resData[val.key];
|
||||
});
|
||||
});
|
||||
dataList.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<div class="terminal-container self">
|
||||
<public-title title="睡眠" />
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
@@ -21,12 +21,16 @@
|
||||
type: String,
|
||||
});
|
||||
const sleepChart = ref<HTMLElement>();
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
watch(props, () => {
|
||||
init();
|
||||
});
|
||||
// onMounted(() => {
|
||||
// init();
|
||||
// });
|
||||
watch(
|
||||
props,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const nums = ref({
|
||||
avgShort: '',
|
||||
avgLong: '',
|
||||
@@ -68,13 +72,19 @@
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.terminal-container.self {
|
||||
position: relative;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.title {
|
||||
color: #cfcfcf;
|
||||
text-align: left;
|
||||
padding: 1% 6%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
.count {
|
||||
font-size: 28px;
|
||||
@@ -82,7 +92,7 @@
|
||||
}
|
||||
|
||||
.lightSleep {
|
||||
padding-left: 2%;
|
||||
padding: 3px 0 3px 2%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { minuteToStr } from '/@/utils/utils.ts';
|
||||
|
||||
@@ -6,7 +6,7 @@ function timeFormat(type, list) {
|
||||
const o = {
|
||||
week: 'MM-DD',
|
||||
month: 'MM-DD',
|
||||
year: 'MM',
|
||||
year: 'YYYY-MM',
|
||||
};
|
||||
if (list) {
|
||||
return list.map((item) => dayjs(item).format(o[type]));
|
||||
@@ -24,28 +24,51 @@ export function formatStr({ list, len }) {
|
||||
return minuteToStr(sum);
|
||||
}
|
||||
|
||||
function createWeek() {
|
||||
let arr = [];
|
||||
for (let i = 0; i < 7; i++) {}
|
||||
}
|
||||
|
||||
const defaultVal = (type) => {
|
||||
if (type == 'week') {
|
||||
return {
|
||||
defaultTime: [],
|
||||
};
|
||||
}
|
||||
if (type == 'month') {
|
||||
}
|
||||
if (type == 'year') {
|
||||
}
|
||||
};
|
||||
|
||||
export function sleepCharts({ time, short, long, awake, type }) {
|
||||
let middleIndex = Math.floor(time.length / 2);
|
||||
return {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: 30,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left', // 使用左对齐样式显示tooltip文本
|
||||
color: '#fff',
|
||||
},
|
||||
backgroundColor: 'rgba(50,50,50,0.7)',
|
||||
borderColor: '#1b7ef2',
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
top: 0,
|
||||
icon: 'roundRect',
|
||||
height: 40,
|
||||
itemHeight: 14,
|
||||
top: -5,
|
||||
left: '55%',
|
||||
},
|
||||
color: ['#14B3F8', '#6D7BEB', '#5451DC'],
|
||||
@@ -57,8 +80,13 @@ export function sleepCharts({ time, short, long, awake, type }) {
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
formatter: (item, i) => {
|
||||
if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
|
||||
let mid = time.length == 30 ? 16 : middleIndex;
|
||||
if (i == 0 || i == mid || i == time.length - 1) {
|
||||
return item;
|
||||
}
|
||||
},
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
},
|
||||
data: timeFormat(type, time),
|
||||
},
|
||||
@@ -99,34 +127,35 @@ export function sleepCharts({ time, short, long, awake, type }) {
|
||||
|
||||
//步数
|
||||
export function useStep() {
|
||||
const total = ref();
|
||||
const stepData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '23',
|
||||
value: '0',
|
||||
type: 'lessThanFiveThousand',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
{
|
||||
name: '5000~1w',
|
||||
value: '2',
|
||||
value: '0',
|
||||
type: 'fiveThousandToTenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1~1.5w',
|
||||
value: '34',
|
||||
value: '0',
|
||||
type: 'TenThousandToFifteenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1.5w~2w',
|
||||
value: '43',
|
||||
value: '0',
|
||||
type: 'FifteenToTwentyThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '2以上',
|
||||
value: '43',
|
||||
value: '0',
|
||||
type: 'TwentyThousandOrMore',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
@@ -136,9 +165,11 @@ export function useStep() {
|
||||
stepData.value.map((item) => {
|
||||
item.value = data[item.type] || 0;
|
||||
});
|
||||
total.value = data?.userCount;
|
||||
}
|
||||
|
||||
return {
|
||||
total,
|
||||
stepData,
|
||||
setStep,
|
||||
};
|
||||
|
||||
@@ -38,15 +38,18 @@
|
||||
total: 0,
|
||||
onChange: pageChange,
|
||||
});
|
||||
const timer = ref(null);
|
||||
const pages = ref(0); //总页数
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
$bus.emit(earlyWarning, record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
init(1);
|
||||
setHeight();
|
||||
window.addEventListener('resize', setHeight);
|
||||
interval();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setHeight);
|
||||
@@ -56,20 +59,33 @@
|
||||
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
async function init(page) {
|
||||
const { pageSize, current } = pagination.value;
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: page });
|
||||
if (code == 200) {
|
||||
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
|
||||
pagination.value.total = result.total * 2;
|
||||
dataSource.value = result.records;
|
||||
pagination.value.total = result.total;
|
||||
pages.value = result.pages;
|
||||
pagination.value.current = page;
|
||||
}
|
||||
}
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
pagination.value.current = page;
|
||||
pagination.value.pageSize = pageS;
|
||||
init();
|
||||
init(page);
|
||||
}
|
||||
|
||||
function interval() {
|
||||
timer.value = setInterval(() => {
|
||||
let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
|
||||
init(page);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.inner-screen {
|
||||
@@ -100,7 +116,6 @@
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
//pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="pie-container self">
|
||||
<public-title title="步数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
<div class="count">
|
||||
<div class="t">总人数</div>
|
||||
<div class="v">{{ total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -24,7 +28,7 @@
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { stepData, getValue, setStep } = useStep();
|
||||
const { stepData, total, setStep } = useStep();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
@@ -59,4 +63,34 @@
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.pie-container.self {
|
||||
position: relative;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
top: 51%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
> div {
|
||||
width: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,29 +2,39 @@
|
||||
<div class="modal-content">
|
||||
<div class="empty-png"></div>
|
||||
<div class="modal-header">
|
||||
<button type="button" aria-label="Close" class="modal-close">X</button>
|
||||
<button type="button" aria-label="Close" class="modal-close" @click="closeDialog">X</button>
|
||||
<div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="info-left">
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div v-for="item in detailLeft" :key="item.key"
|
||||
><span class="info-label">{{ item.name }}:</span><span class="info-value">{{ item.value }}</span></div
|
||||
>
|
||||
</div>
|
||||
<div class="info-right">
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名:</span><span class="info-value">213</span></div>
|
||||
<div v-for="item in detailRight" :key="item.key"
|
||||
><span class="info-label">{{ item.name }}:</span><span class="info-value">{{ item.value }}</span></div
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const emits = defineEmits(['closeDialog']);
|
||||
|
||||
const props = defineProps({
|
||||
detailRight: Array,
|
||||
detailLeft: Array,
|
||||
});
|
||||
|
||||
function closeDialog() {
|
||||
emits('closeDialog');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-content {
|
||||
position: relative;
|
||||
//background-clip: padding-box;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
|
||||
@@ -36,9 +46,10 @@
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 6px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
color: #999999;
|
||||
@@ -58,7 +69,6 @@
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
@@ -83,6 +93,7 @@
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
border-top: none;
|
||||
padding: 2% 0 2% 5%;
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -18,10 +18,13 @@
|
||||
<script setup lang="ts">
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { ref } from 'vue';
|
||||
import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
|
||||
//分页相关
|
||||
const current = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const deptId = ref();
|
||||
const paginationProp = ref({
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '30', '50'],
|
||||
@@ -35,150 +38,32 @@
|
||||
function pageChange(page, pageS) {
|
||||
current.value = page;
|
||||
pageSize.value = pageS;
|
||||
getRecords(deptId.value);
|
||||
}
|
||||
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌1',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖2',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦祖3',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '胡彦祖4',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '胡彦祖5',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '胡彦祖6',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
name: '胡彦祖7',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
name: '胡彦祖8',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
name: '胡彦祖9',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
name: '胡彦祖10',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '员工名称',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '单位名称',
|
||||
dataIndex: 'age',
|
||||
align: 'center',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'address',
|
||||
align: 'center',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '工具编码',
|
||||
dataIndex: 'address1',
|
||||
align: 'center',
|
||||
key: 'address1',
|
||||
},
|
||||
{
|
||||
title: '心率(次/分)',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '血氧(%)',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '睡眠',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '体温(℃)',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '锻炼(千卡)',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '步数(米)',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
]);
|
||||
const dataSource = ref([]);
|
||||
const visible = ref(false);
|
||||
|
||||
function openModal() {
|
||||
console.log('1');
|
||||
function openModal(id: string) {
|
||||
visible.value = true;
|
||||
deptId.value = id;
|
||||
getRecords(id);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function getRecords(id: string) {
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const { code, result } = await getUserListByDeptId({ orgId: id, pageSize: pageSize.value, pageNo: current.value });
|
||||
if (code == 200) {
|
||||
dataSource.value = result?.records;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
closeModal,
|
||||
@@ -211,7 +96,7 @@
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
padding: 0px 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<div class="center-map">
|
||||
<div class="china-map-box">
|
||||
<div class="form-container">
|
||||
<button @click="test">点击</button>
|
||||
<slot name="rightForm"></slot>
|
||||
</div>
|
||||
<div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
|
||||
@@ -24,62 +23,32 @@
|
||||
</div>
|
||||
<div
|
||||
class="footer-dialog-con"
|
||||
style="--moveUp: 110px; --moveDown: -50px"
|
||||
:class="show ? 'slide-top' : 'slide-bottom'"
|
||||
style="--moveUp: 120px; --moveDown: -120px"
|
||||
:class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
|
||||
v-show="isShowAlarm"
|
||||
>
|
||||
<FooterDialog></FooterDialog>
|
||||
<FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
|
||||
</div>
|
||||
</div>
|
||||
<WatchListDialog ref="watchDialogRef"></WatchListDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Map } from '/@/assets/mapUtils/map';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
|
||||
import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
|
||||
import { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
import { getToday } from '/@/utils/utils.ts';
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
function test() {
|
||||
show.value = !show.value;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
const markerList = [
|
||||
{
|
||||
lon: 109.42,
|
||||
lat: 33.9,
|
||||
type: '6',
|
||||
name: '第一采油厂',
|
||||
count: 20,
|
||||
},
|
||||
{
|
||||
lon: 106.59,
|
||||
lat: 34.93,
|
||||
type: '6',
|
||||
name: '第二采油厂',
|
||||
count: 40,
|
||||
},
|
||||
{
|
||||
lon: 109.42,
|
||||
lat: 31.9,
|
||||
type: '6',
|
||||
name: '第三采油厂',
|
||||
count: 60,
|
||||
},
|
||||
];
|
||||
|
||||
const mapList = ref([]); //地图数据
|
||||
// 底部表格
|
||||
const { isShow, className, setIsShow } = useMoveClass();
|
||||
|
||||
@@ -91,18 +60,13 @@
|
||||
const watchDialogRef = ref();
|
||||
|
||||
function openWatchList(item) {
|
||||
console.log('item', item);
|
||||
if (item.key == 'allotDeviceNum') {
|
||||
watchDialogRef.value.openModal();
|
||||
watchDialogRef.value.openModal(item.extData?.deptId);
|
||||
}
|
||||
}
|
||||
|
||||
const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
|
||||
watch(
|
||||
() => props.orgCode,
|
||||
() => {
|
||||
setIsShow(false);
|
||||
}
|
||||
);
|
||||
|
||||
async function getFooterTable(orgCode) {
|
||||
const params = {
|
||||
@@ -111,51 +75,57 @@
|
||||
};
|
||||
const { code, result } = await footerApi(params);
|
||||
if (code == 200) {
|
||||
setFooterList(result.records[0]);
|
||||
setFooterList(result);
|
||||
}
|
||||
}
|
||||
|
||||
const mapList = ref([]);
|
||||
|
||||
async function getMapList() {
|
||||
const { code, result } = await mapListApi();
|
||||
if (code == 200 && result.length > 0) {
|
||||
const newArr = result.map((item) => ({ ...item, type: '6' }));
|
||||
mapList.value = newArr;
|
||||
Map.createOverlay(
|
||||
newArr,
|
||||
{
|
||||
content: function (val) {
|
||||
return `<div style="color: red;
|
||||
try {
|
||||
const { code, result } = await mapListApi({});
|
||||
if (code == 200 && result.length > 0) {
|
||||
const newArr = result.map((item) => ({ ...item, type: '6' }));
|
||||
mapList.value = newArr;
|
||||
Map.createOverlay(
|
||||
newArr,
|
||||
{
|
||||
content: (val) => {
|
||||
return `<div style="
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val.departName}">
|
||||
top: -20px;" title="${val?.departName}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
},
|
||||
(val) => {
|
||||
console.log('val', val);
|
||||
getFooterTable(val.orgCode);
|
||||
setIsShow(true);
|
||||
}
|
||||
);
|
||||
}
|
||||
(val) => {
|
||||
getFooterTable(val.orgCode);
|
||||
setIsShow(true);
|
||||
}
|
||||
);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const { detailLeft, detailRight, setDetail } = useAlarmDetail();
|
||||
onMounted(() => {
|
||||
init();
|
||||
|
||||
//点击预警定位
|
||||
$bus.on(earlyWarning, (params) => {
|
||||
console.log('params', params);
|
||||
setDetail(params);
|
||||
drawMarker(params);
|
||||
isShow.value ? setIsShow(true) : setIsShow(false);
|
||||
isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
|
||||
setIsShowAlarm(true);
|
||||
});
|
||||
});
|
||||
|
||||
function drawMarker(data) {
|
||||
/**
|
||||
*@desc 预警弹窗关闭
|
||||
*/
|
||||
function closeDialog() {
|
||||
setIsShowAlarm(!isShowAlarm.value);
|
||||
}
|
||||
|
||||
function drawMarker(data: any) {
|
||||
const { lon, lat } = data;
|
||||
if (!lon || !lat) return;
|
||||
Map.createMarker(data);
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
import { get } from '/@/api/request.ts';
|
||||
|
||||
export enum Api {
|
||||
footerStatistic = '/health-watch/watch/deptStatisticData/list',
|
||||
footerStatistic = '/health-watch/watch/deptStatisticData/listByorgCode',
|
||||
mapListApi = '/health-watch/watch/watchDevice/getMapList',
|
||||
getUserListByDeptId = '/health-watch/watch/watchDevice/getUserListByDeptId',
|
||||
}
|
||||
|
||||
/**
|
||||
* 底部单行表格
|
||||
* @param params
|
||||
*/
|
||||
export const footerApi = (params) => get(Api.footerStatistic, params);
|
||||
export const mapListApi = (params) => get(Api.mapListApi, params);
|
||||
export const getUserListByDeptId = (params) => get(Api.getUserListByDeptId, params);
|
||||
@@ -1,40 +1,26 @@
|
||||
// export const tabList = [
|
||||
// {
|
||||
// name: '所有资源',
|
||||
// type: TabType.all,
|
||||
// },
|
||||
// {
|
||||
// name: '油田医院',
|
||||
// type: TabType.youTianYiYuan,
|
||||
// },
|
||||
// {
|
||||
// name: '医疗点',
|
||||
// type: TabType.yiLiaoDian,
|
||||
// },
|
||||
// ];
|
||||
import {cloneDeep} from 'lodash-es';
|
||||
import {nextTick, onMounted, ref} from "vue";
|
||||
import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { allSecondaryDeparts } from '/@/components/secondaryScreen/commonApi';
|
||||
|
||||
export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;
|
||||
|
||||
export function useDepart() {
|
||||
const orgCode = ref();
|
||||
const option = ref([]);
|
||||
const fieldNames = {label: 'departName', value: 'orgCode',}
|
||||
const fieldNames = { label: 'departName', value: 'orgCode' };
|
||||
onMounted(() => {
|
||||
getOptionData();
|
||||
});
|
||||
|
||||
function setOption(data) {
|
||||
option.value = data;
|
||||
orgCode.value = data[0]?.orgCode
|
||||
orgCode.value = data[0]?.orgCode;
|
||||
}
|
||||
|
||||
async function getOptionData() {
|
||||
const {result, code} = await allSecondaryDeparts();
|
||||
const { result, code } = await allSecondaryDeparts();
|
||||
if (code == 200) {
|
||||
setOption(result)
|
||||
setOption(result);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,112 +28,177 @@ export function useDepart() {
|
||||
orgCode,
|
||||
option,
|
||||
setOption,
|
||||
fieldNames
|
||||
fieldNames,
|
||||
};
|
||||
}
|
||||
|
||||
export function useTimeType(t) {
|
||||
const type = ref(t || '')
|
||||
const type = ref(t || '');
|
||||
const timeRangeOption = [
|
||||
{
|
||||
label: '近一周',
|
||||
value: 'week'
|
||||
value: 'week',
|
||||
},
|
||||
{
|
||||
label: '近一月',
|
||||
value: 'month'
|
||||
value: 'month',
|
||||
},
|
||||
{
|
||||
label: '近一年',
|
||||
value: 'year'
|
||||
}
|
||||
]
|
||||
value: 'year',
|
||||
},
|
||||
];
|
||||
return {
|
||||
type,
|
||||
timeRangeOption
|
||||
}
|
||||
timeRangeOption,
|
||||
};
|
||||
}
|
||||
|
||||
export function useFooterTable() {
|
||||
const isShowAlarm = ref(false)
|
||||
const isShowAlarm = ref(false);
|
||||
|
||||
function setIsShowAlarm(type: boolean) {
|
||||
isShowAlarm.value = type
|
||||
isShowAlarm.value = type;
|
||||
}
|
||||
|
||||
const footerList = ref([
|
||||
{
|
||||
name: '单位名称',
|
||||
value: '',
|
||||
key: 'orgName'
|
||||
key: 'orgName',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '单位人数',
|
||||
value: '',
|
||||
key: 'userCount'
|
||||
key: 'userCount',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '入库设备数量',
|
||||
value: '',
|
||||
key: 'deviceNum'
|
||||
key: 'deviceNum',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '佩戴手表人数',
|
||||
value: '',
|
||||
key: 'allotDeviceNum',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '近一周活跃人数',
|
||||
value: '',
|
||||
key: 'sevenDayNum'
|
||||
key: 'sevenDayNum',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '近一月活跃人数',
|
||||
value: '',
|
||||
key: 'a'
|
||||
key: 'thirtyDayNum',
|
||||
extData: {},
|
||||
},
|
||||
{
|
||||
name: '近一年活跃人数',
|
||||
value: '',
|
||||
key: 'b'
|
||||
}
|
||||
])
|
||||
key: 'yearDayNum',
|
||||
extData: {},
|
||||
},
|
||||
]);
|
||||
|
||||
function setFooterList(res: any) {
|
||||
|
||||
const arrList = cloneDeep(footerList.value)
|
||||
const arrList = cloneDeep(footerList.value);
|
||||
if (res) {
|
||||
arrList.forEach(item => {
|
||||
item.value = res[item.key] || ''
|
||||
})
|
||||
console.log('resssss', res);
|
||||
arrList.forEach((item) => {
|
||||
item.value = res[item.key];
|
||||
item.extData = res;
|
||||
});
|
||||
}
|
||||
footerList.value = arrList
|
||||
|
||||
footerList.value = arrList;
|
||||
}
|
||||
|
||||
return {
|
||||
footerList,
|
||||
setFooterList,
|
||||
setIsShowAlarm,
|
||||
isShowAlarm
|
||||
isShowAlarm,
|
||||
};
|
||||
}
|
||||
|
||||
export function useAlarmDetail() {
|
||||
const detailLeft = ref([
|
||||
{
|
||||
name: '员工姓名',
|
||||
value: '',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
name: '工具编码',
|
||||
value: '',
|
||||
key: 'watchNo',
|
||||
},
|
||||
{
|
||||
name: '单位名称',
|
||||
value: '',
|
||||
key: 'orgName2',
|
||||
},
|
||||
]);
|
||||
const detailRight = ref([
|
||||
{
|
||||
name: '部门名称',
|
||||
value: '',
|
||||
key: 'orgName',
|
||||
},
|
||||
{
|
||||
name: '事件类型',
|
||||
value: '',
|
||||
key: 'eventType_dictText',
|
||||
},
|
||||
{
|
||||
name: '异常数据',
|
||||
value: '',
|
||||
key: 'dataValue',
|
||||
},
|
||||
{
|
||||
name: '报警时间',
|
||||
value: '',
|
||||
key: 'warnTime',
|
||||
},
|
||||
]);
|
||||
|
||||
function setDetail(res) {
|
||||
if (res) {
|
||||
detailLeft.value.forEach((item) => {
|
||||
item.value = res[item.key];
|
||||
});
|
||||
detailRight.value.forEach((item) => {
|
||||
item.value = res[item.key];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
detailLeft,
|
||||
detailRight,
|
||||
setDetail,
|
||||
};
|
||||
}
|
||||
|
||||
export function useMoveClass() {
|
||||
const isShow = ref(false)
|
||||
const className = ref('slide-bottom')
|
||||
const isShow = ref(false);
|
||||
const className = ref('slide-bottom');
|
||||
|
||||
function setIsShow(type: boolean) {
|
||||
isShow.value = type
|
||||
className.value = type ? 'slide-top' : 'slide-bottom'
|
||||
isShow.value = type;
|
||||
className.value = type ? 'slide-top' : 'slide-bottom';
|
||||
}
|
||||
|
||||
return {
|
||||
isShow,
|
||||
className,
|
||||
setIsShow
|
||||
}
|
||||
|
||||
setIsShow,
|
||||
};
|
||||
}
|
||||
|
||||
export function useTree() {
|
||||
@@ -172,10 +223,79 @@ export function useTree() {
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const orgCode = ref([])
|
||||
];
|
||||
const orgCode = ref([]);
|
||||
return {
|
||||
orgCode,
|
||||
treeOption
|
||||
}
|
||||
}
|
||||
treeOption,
|
||||
};
|
||||
}
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: '员工名称',
|
||||
dataIndex: 'realName',
|
||||
align: 'center',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '单位名称',
|
||||
dataIndex: 'orgName',
|
||||
align: 'center',
|
||||
key: 'orgName',
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'orgName1',
|
||||
align: 'center',
|
||||
key: 'orgName1',
|
||||
},
|
||||
{
|
||||
title: '工具编码',
|
||||
dataIndex: 'watchNo',
|
||||
align: 'center',
|
||||
key: 'watchNo',
|
||||
},
|
||||
{
|
||||
title: '心率(次/分)',
|
||||
dataIndex: 'heartRate',
|
||||
align: 'center',
|
||||
key: 'heartRate',
|
||||
},
|
||||
{
|
||||
title: '血氧(%)',
|
||||
dataIndex: 'spo2',
|
||||
align: 'center',
|
||||
key: 'spo2',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
dataIndex: 'stress',
|
||||
align: 'center',
|
||||
key: 'stress',
|
||||
},
|
||||
{
|
||||
title: '睡眠',
|
||||
dataIndex: 'sleep',
|
||||
align: 'center',
|
||||
key: 'sleep',
|
||||
},
|
||||
{
|
||||
title: '体温(℃)',
|
||||
dataIndex: 'temp',
|
||||
align: 'center',
|
||||
key: 'temp',
|
||||
},
|
||||
{
|
||||
title: '锻炼(千卡)',
|
||||
dataIndex: 'exercise',
|
||||
align: 'center',
|
||||
key: 'exercise',
|
||||
},
|
||||
{
|
||||
title: '步数(米)',
|
||||
dataIndex: 'workout',
|
||||
align: 'center',
|
||||
key: 'workout',
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user