update 更换背景图 看板接口对接
This commit is contained in:
@@ -2,13 +2,13 @@
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.abnormal }}</span>
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<div class="item" v-for="item in scrollList" :key="item.id">
|
||||
<span>{{ item?.realName }}</span>
|
||||
<span>{{ item?.eventType_dictText }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item.time }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
<span>{{ item?.warnTime }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice(item)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
@@ -53,42 +53,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
]);
|
||||
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||
|
||||
const classOption = {
|
||||
step: 0.3, // 速度
|
||||
};
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
@@ -107,160 +81,41 @@
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
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',
|
||||
},
|
||||
]);
|
||||
function handleDialog() {
|
||||
open.value = true;
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function handlePolice() {
|
||||
openInfor.value = true;
|
||||
}
|
||||
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
const { code, result } = await getMonitorList({});
|
||||
if (code == 200) {
|
||||
scrollList.value = result;
|
||||
}
|
||||
|
||||
console.log('dd', result);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
@@ -268,23 +123,28 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
@@ -297,26 +157,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
}
|
||||
|
||||
.police-con {
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
|
||||
span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user