update 更换背景图 看板接口对接

This commit is contained in:
zk
2023-12-05 18:33:24 +08:00
parent df5d0ec8e4
commit 458009709e
11 changed files with 482 additions and 333 deletions
+47 -182
View File
@@ -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>