update: 几个弹窗
This commit is contained in:
项富
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="terminal-container common-card" :class="[themeType]">
|
||||
<public-title title="健康终端报警" :themeType="themeType">
|
||||
<template #right>
|
||||
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<div class="item right-top-item" :class="themeType" v-for="(item, i) in scrollList" :key="i">
|
||||
<span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
|
||||
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item?.warnTime }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
|
||||
<span class="position" @click="sendPosition(item)" title="员工定位"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||||
<template #container>
|
||||
<div class="police-con" :class="[themeType]">
|
||||
<div class="con-item">
|
||||
<div>姓名：</div>
|
||||
<div>{{ userInfo?.realName }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>二级单位：</div>
|
||||
<div>{{ userInfo?.orgName1 }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>手机号码：</div>
|
||||
<div>{{ userInfo?.phone }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>异常事件：</div>
|
||||
<div>{{ userInfo?.eventType_dictText }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>异常值：</div>
|
||||
<div>{{ userInfo?.dataValue }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>发生时间：</div>
|
||||
<div>{{ userInfo?.warnTime }}</div>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<div>发生地点：</div>
|
||||
<div v-if="userInfo?.address">{{ userInfo?.address }} </div>
|
||||
<div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { DataType } from '/@/utils/settings.ts';
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
});
|
||||
const { themeType } = useTheme();
|
||||
const emit = defineEmits(['emit-view-detail']);
|
||||
const router = useRouter();
|
||||
const { setSession, getSession } = useSession();
|
||||
const { RIGHT_KEY1_NEW } = caching;
|
||||
|
||||
const classOption = ref({
|
||||
step: 0.3, // 速度
|
||||
});
|
||||
const openInfor = ref<boolean>(false); //弹窗显示
|
||||
const userInfo = ref({
|
||||
realName: '',
|
||||
orgName1: '',
|
||||
phone: '',
|
||||
eventType_dictText: '',
|
||||
warnTime: '',
|
||||
address: '',
|
||||
dataValue: '',
|
||||
});
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc open员工信息
|
||||
*/
|
||||
function handlePolice(item) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
classOption.value.step = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc close员工信息
|
||||
*/
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
classOption.value.step = 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
try {
|
||||
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1, orgCode: props.setting?.orgCode });
|
||||
if (code == 200) {
|
||||
setSession(RIGHT_KEY1_NEW, JSON.stringify(result.records));
|
||||
scrollList.value = result.records;
|
||||
}
|
||||
} catch {
|
||||
scrollList.value = JSON.parse(getSession(RIGHT_KEY1_NEW));
|
||||
}
|
||||
}
|
||||
|
||||
function sendPosition(item) {
|
||||
let { lon, lat } = item;
|
||||
if (lon && lat) {
|
||||
Map.createMarker(item, () => {
|
||||
handlePolice(item);
|
||||
});
|
||||
} else {
|
||||
message.warn('暂无经纬度信息！');
|
||||
}
|
||||
}
|
||||
|
||||
function viewDetail() {
|
||||
emit('emit-view-detail');
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.right-text {
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.right-text.light {
|
||||
color: #667ecc;
|
||||
}
|
||||
|
||||
.right-text:hover {
|
||||
color: #129bff;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.position {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
display: flex;
|
||||
|
||||
div:nth-child(1) {
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--<style lang="less">-->
|
||||
<!-- .dialog-con {-->
|
||||
<!-- background-color: #00152b;-->
|
||||
<!-- // antd表格样式-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-body {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-modal-header {-->
|
||||
<!-- border-bottom: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr > td {-->
|
||||
<!-- border-bottom: 1px solid #1e73c2 !important;-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
|
||||
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
|
||||
<!-- .ant-table-thead > tr > th {-->
|
||||
<!-- background-color: #00152b !important;-->
|
||||
<!-- color: #ffffff !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- .ant-table-cell-scrollbar {-->
|
||||
<!-- box-shadow: none !important;-->
|
||||
<!-- }-->
|
||||
|
||||
<!-- /*-->
|
||||
<!--表格滚动条-->
|
||||
<!--*/-->
|
||||
|
||||
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
|
||||
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
|
||||
<!-- height: 6px;-->
|
||||
<!-- border-radius: 25px;-->
|
||||
<!-- background-clip: padding-box;-->
|
||||
<!-- background-color: rgba(30, 115, 194, 0.3);-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
Reference in New Issue
Block a user