156 lines
4.0 KiB
Vue
156 lines
4.0 KiB
Vue
<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;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
: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>
|