You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
4.0 KiB
153 lines
4.0 KiB
<template>
|
|
<div class="left-box">
|
|
<liftInfo
|
|
v-for="(item, index) in liftBox"
|
|
:key="index"
|
|
:liftInfo="item"
|
|
@click="clickLift(item)" />
|
|
<a-drawer
|
|
v-model:visible="visible"
|
|
class="left-item"
|
|
:width="600"
|
|
:forceRender="preload"
|
|
placement="right"
|
|
:body-style="{
|
|
backgroundColor: 'rgba(0, 0, 0, 1)',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
}"
|
|
:closable="false"
|
|
id="drawer"
|
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0,0.5)' }">
|
|
<a-tabs :activeKey="'1'">
|
|
<a-tab-pane key="1" tab="日志">
|
|
<liftPage ref="leftPage" @clickDrawer="clickDrawer" />
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
import liftInfo from './liftInfo.vue';
|
|
import liftPage from './liftPage.vue';
|
|
import { liftSystemApi } from '/@/api/liftSystem';
|
|
import { http } from '/nerv-lib/util';
|
|
// 全局变量
|
|
import { items } from '/@/store/item';
|
|
// 全局变量
|
|
const state = items();
|
|
//位置文件
|
|
import { liftPosition, longPosition } from './liftPosition';
|
|
// 请求
|
|
|
|
//弹窗
|
|
const visible = ref(false);
|
|
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
|
const preload = ref(false);
|
|
//选择的电梯
|
|
const selctLeft = ref({});
|
|
// table页面 ref
|
|
const leftPage = ref(null);
|
|
const liftBox = ref([]);
|
|
// tab页部分 ========================================================
|
|
//获取电梯数据
|
|
const getList = () => {
|
|
let leftIndex = 0;
|
|
let longIndex = 0;
|
|
http
|
|
.get(liftSystemApi.getDeviceState, {
|
|
projectId: state.projectId,
|
|
siteId: state.siteId,
|
|
floor: 1,
|
|
})
|
|
.then((res) => {
|
|
let data = [];
|
|
res.data.forEach((item: any) => {
|
|
//用来区分直梯 还是 扶梯
|
|
if (item.record.deviceId.includes('0301')) {
|
|
data.push({
|
|
...item,
|
|
type: 2, //扶梯
|
|
isLeft: true, // 扶梯
|
|
styleText: liftPosition()[leftIndex++],
|
|
});
|
|
} else {
|
|
data.push({
|
|
...item,
|
|
type: 1,
|
|
isLeft: false,
|
|
styleText: longPosition()[longIndex++],
|
|
});
|
|
}
|
|
});
|
|
console.log(data);
|
|
liftBox.value = data;
|
|
});
|
|
};
|
|
//定时
|
|
const intervalId = setInterval(getList, 60000);
|
|
// 初始化 ===========================================================
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
// 页面销毁
|
|
onUnmounted(() => {
|
|
// 这里写销毁时需要执行的逻辑
|
|
clearInterval(intervalId);
|
|
});
|
|
//点击获取详情
|
|
const clickLift = (item: any) => {
|
|
visible.value = true;
|
|
selctLeft.value = item;
|
|
setTimeout(() => {
|
|
leftPage.value.toggle(selctLeft.value);
|
|
}, 100);
|
|
// 开始预加载
|
|
preload.value = true;
|
|
};
|
|
const clickDrawer = () => {
|
|
visible.value = false;
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.left-box {
|
|
// 颜色变量，用于区别颜色
|
|
// 正常 - 开启 - 上行 -下行
|
|
--on: #0dffa4;
|
|
// 关闭
|
|
--off: #bfcde2;
|
|
// 暂停 - 维修
|
|
--pause: #ffbc46;
|
|
// 告警 - 急停
|
|
--stop: #f36163;
|
|
// 故障
|
|
--fault: #ff7636;
|
|
// 未知
|
|
--unknown: #a742ff;
|
|
// 触发图标大小
|
|
--size: 36px;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
background-image: url(../image/bg.jpg);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
color: white !important;
|
|
}
|
|
:deep(.ant-tabs-ink-bar) {
|
|
background: linear-gradient(180deg, rgba(86, 221, 253, 1) 0%, rgba(25, 176, 255, 1) 100%);
|
|
}
|
|
:deep(.ant-tabs-tabpane) {
|
|
color: white;
|
|
padding: 20px 20px 0px 20px;
|
|
width: 100%;
|
|
height: 950px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|