xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:修改网关告警页面展示 添加电动门 修改页面问题

Browse Source
This commit is contained in:
zhaohy
2024-07-29 15:01:20 +08:00
parent 06ee0ec6a4
commit 7c1f120182
9 changed files with 518 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue Normal file
View File

@@ -0,0 +1,347 @@
<template>
<div class="map-box">
<!-- 开关按钮 -->
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
<DoubleLeftOutlined class="drawer-icon" style="color: white" />
</div>
<!-- 门位置 -->
<div
style="
width: 708px;
height: 42px;
background-color: rgba(245, 154, 35, 0.5);
position: absolute;
top: 49%;
left: 23%;
padding: 6px 6px;
display: flex;
gap: 10px;
cursor: pointer;
"
@click="
() => {
visible = !visible;
}
">
<template v-for="index in 4">
<div
style="
flex: 1;
height: 100%;
text-align: center;
line-height: 30px;
border: 1px solid #ab8757;
font-weight: 500;
"
:style="{ 'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index - 1] }">
{{ ['A号门', 'B号门', 'C号门', 'D号门'][index - 1] }}
</div>
</template>
</div>
<!-- 日志弹窗 -->
<transition name="zep">
<div v-show="visible" class="table">
<a-tabs activeKey="1">
<a-tab-pane key="1" tab="电动门日志">
<!-- 左侧抽屉的关闭按钮 -->
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
<DoubleRightOutlined class="drawer-icon" style="color: white" />
</div>
<div style="padding: 8px">
<a-table
:columns="columns"
:data-source="dataSource"
:pagination="false"
:customRow="customRow">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'state'">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
:style="{
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
color: ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
}"
>{{ record.state }}</a-tag
>
</template>
</template>
</a-table>
</div>
</a-tab-pane>
</a-tabs>
</div>
</transition>
<!--详细日志 -->
<div v-show="detailed" class="table-detail">
<div
class="close-icon"
@click="
() => {
detailed = !detailed;
}
">
x
</div>
<div style="color: rgb(53, 205, 0); font-size: 20px; font-weight: 700">
{{ infoObject.name }}
</div>
<img
style="width: 100%; margin-top: -10px"
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
<div class="table-detail-box">
<electricDoorTables ref="tables" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import electricDoorTables from './tables.vue';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
const getDoorList = () => {
console.log('数据');
};
const intervalId = setInterval(getDoorList, 3000);
//页面 创建
onMounted(() => {
//调用电梯接口 定时获取电梯接口 获取当前门状态
getDoorList();
});
// 页面销毁
onUnmounted(() => {
console.log('组件已卸载');
// 这里写销毁时需要执行的逻辑
clearInterval(intervalId);
});
const tables = ref(null);
const customRow = (record) => {
return {
//点击 行 进行查看详情
onClick: (event) => {
detailed.value = !detailed.value;
infoObject.value = record;
tables.value.toggle(record);
// 处理点击事件
},
};
};
//当前点击的电动门对象
const infoObject = ref({});
const columns = [
{
title: '序号',
dataIndex: 'name',
key: 'name',
width: 100,
},
{
title: '执行时间',
dataIndex: 'age',
key: 'age',
width: 100,
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
width: 160,
},
];
const dataSource = [
{
key: '1',
name: 'A号门',
age: '23:50:20',
state: '开启',
status: 1,
},
{
key: '2',
name: 'B号门',
age: '23:50:20',
state: '关闭',
status: 2,
},
{
key: '3',
name: 'C号门',
age: '23:50:20',
state: '维护中',
status: 3,
},
{
key: '4',
name: 'D号门',
age: '23:50:20',
state: '维护中',
status: 3,
},
];
const visible = ref(false);
//详情属性
const detailed = ref(false);
// 抽屉 - 开关事件
const toggleDrawer = () => {
visible.value = !visible.value;
};
</script>
<style lang="less" scoped>
.map-box {
width: 100%;
height: 100%;
position: relative;
border-radius: 4px;
background-image: url(../image/electricDoor.png);
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
.table {
width: 380px;
height: 632px;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
padding: 32px 24px;
display: flex;
position: absolute;
// 抽屉关闭按钮
.drawer-box-out {
width: 24px;
height: 24px;
border-radius: 2px;
position: absolute;
right: 356px;
z-index: 2;
top: 50%;
margin: auto;
background: #268aff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 0 8px 8px 0;
}
}
.table-detail {
width: 380px;
height: 632px;
position: absolute;
right: 0;
bottom: 0;
background-image: url(../image/door-detail.svg);
background-size: 100%;
z-index: 3;
padding: 32px 32px;
.close-icon {
position: absolute;
right: 2px;
top: 2px;
font-size: 28px;
background-color: rgba(4, 4, 4, 0.9);
color: rgb(25, 176, 255);
width: 36px;
height: 36px;
text-align: center;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
line-height: 22px;
border: 2px solid #4d4040;
}
.table-detail-box {
width: 100%;
height: 500px;
overflow-y: auto;
margin-top: 4px;
padding: 0px 4px;
}
}
// 总容器与抽屉按钮
// 抽屉打开按钮
.drawer-box-in {
width: 24px;
height: 24px;
border-radius: 2px;
position: fixed;
right: 20px;
top: 67%;
margin: auto;
background: #268aff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 8px 0 0 8px;
}
}
:deep(.anticon) {
color: #fff !important;
}
:deep(.ant-table-thead > tr) {
height: 30px !important;
}
:deep(.ant-table-tbody > tr) {
height: 30px !important;
}
:deep(.ant-table-thead > tr > th) {
background-color: #1a2230;
border: 1px solid rgba(163, 192, 243, 1);
color: white;
text-align: center;
font-weight: normal !important;
padding: 12px !important;
}
:deep(.ant-table-tbody > tr > td) {
background-color: rgba(0, 0, 0, 0.9) !important;
color: white;
border: 1px solid rgba(163, 192, 243, 1);
text-align: center;
padding: 12px !important;
}
:deep(.ant-table-row:hover td) {
background: #1767f2 !important;
cursor: pointer;
}
:deep(.ant-tabs-tab-btn) {
font-size: 20px;
font-weight: bold;
color: #fff !important;
}
.zep-enter-active,
.zep-leave-active {
animation-duration: 0.6s; /* 增加动画持续时间 */
animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
}
.zep-enter-active {
animation-name: bounce-enter;
}
.zep-leave-active {
animation-name: bounce-leave;
}
/* 进入动画 */
@keyframes bounce-enter {
0% {
transform: translateX(400px); /* 初始位置 */
}
100% {
transform: translateX(0); /* 恢复到初始位置 */
}
}
/* 离开动画 */
@keyframes bounce-leave {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(400px); /* 移动到离开位置 */
}
}
</style>

132
hx-ai-intelligent/src/view/equipmentControl/electricDoor/tables.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<a-table :columns="columnLog" :data-source="dataSourceLog" :pagination="pagination">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'state'">
<span
:style="{ color: record.state === '开启' ? 'rgb(149, 242, 4)' : 'rgb(245, 154, 35)' }"
>{{ record.state }}</span
>
</template>
</template>
</a-table>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
// 改变页码
const handleChangePage = (current: number, pageSize: number) => {
pagination.value.current = current;
pagination.value.pageSize = pageSize;
console.log(current, pageSize);
};
const pagination = ref({
total: 0,
size: 'small',
current: 1,
pageSize: 10,
// showQuickJumper: true,
// showLessItems: true,
showSizeChanger: false,
showTotal: (total: number, range: any) =>
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
onChange: handleChangePage,
});
const columnLog = [
{
title: '执行时间',
dataIndex: 'age',
key: 'age',
width: 140,
},
{
title: '操作日志',
dataIndex: 'state',
key: 'state',
width: 80,
},
];
const dataSourceLog = [
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
{ age: '2024-07-26 23:50:20', state: '关闭' },
{ age: '2024-07-26 23:50:20', state: '开启' },
];
const toggle = (data: any) => {
console.log(data, '数据');
};
return { columnLog, dataSourceLog, toggle, pagination, handleChangePage };
},
};
</script>
<style lang="less" scoped>
:deep(.ant-table-thead > tr > th) {
background-color: rgba(0, 0, 0, 1) !important;
border: 1px solid #6d6d6d !important;
color: white;
text-align: center;
font-weight: normal !important;
padding: 4px !important;
}
:deep(.ant-table-tbody > tr > td) {
background-color: rgba(0, 0, 0, 1) !important;
color: white;
border: 1px solid #6d6d6d !important;
text-align: center;
padding: 4px !important;
}
:deep(.ant-table-row:hover td) {
background-color: rgba(0, 0, 0, 1) !important;
cursor: default !important;
}
//分页样式
:deep(.ant-pagination-item) {
background-color: rgba(0, 0, 0, 1) !important;
border: none !important;
}
:deep(.ant-pagination-item a) {
color: #fff !important;
}
:deep(.ant-pagination-item-active) {
background-color: rgba(0, 0, 0, 1) !important;
border: none !important;
}
:deep(.ant-pagination-item-active a) {
color: #1767f2 !important;
}
:deep(.ant-pagination-item-link) {
background-color: rgba(0, 0, 0, 1) !important;
border: none !important;
}
:deep(.ant-pagination-total-text) {
color: #fff !important;
}
//分页 在右边 取消
:deep(.ant-table-pagination-right) {
justify-content: normal !important;
}
</style>

13
hx-ai-intelligent/src/view/equipmentControl/image/door-detail.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="369px" height="632px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="184.5" y1="0" x2="184.5" y2="632" id="LinearGradient12">
<stop id="Stop13" stop-color="#56ddfd" offset="0" />
<stop id="Stop14" stop-color="#000000" offset="1" />
</linearGradient>
</defs>
<g>
<path d="M 0.5 0.5 L 368.5 0.5 L 368.5 631.5 L 0.5 631.5 L 0.5 0.5 Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.8" />
<path d="M 0.5 0.5 L 368.5 0.5 L 368.5 631.5 L 0.5 631.5 L 0.5 0.5 Z " stroke-width="1" stroke="url(#LinearGradient12)" fill="none" />
</g>
</svg>

BIN
hx-ai-intelligent/src/view/equipmentControl/image/electricDoor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB