306 lines
8.5 KiB
Vue
306 lines
8.5 KiB
Vue
<template>
|
||
<table class="custom-table table1">
|
||
<thead>
|
||
<tr :style="{ background: 'rgba(35,45,69)' }">
|
||
<th>序号</th>
|
||
<th>执行时间</th>
|
||
<th>操作内容</th>
|
||
<th>操作人</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr
|
||
:style="{ color: row.ctrlResult == 1 ? 'red' : 'white' }"
|
||
v-for="(row, index) in dataSource"
|
||
:key="index"
|
||
@click="handleRowClick(row.id, index)"
|
||
:class="index === trIndex ? 'isTrIndex' : ''">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ row.startTime }}</td>
|
||
<td>{{ row.operationContent }}</td>
|
||
<td>{{ row.createUser }}</td>
|
||
<td>{{ row.ctrlResult ? '失败' : '成功' }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<a-pagination
|
||
style="margin-top: 10px; text-align: right"
|
||
v-model:current="pagination.pageNum"
|
||
v-model:pageSize="pagination.pageSize"
|
||
show-size-changer
|
||
:total="pagination.total"
|
||
show-less-items
|
||
@change="getTable(true)" />
|
||
<div style="width: 100%; height: 40px"></div>
|
||
|
||
<div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
|
||
<div class="content">
|
||
<div>
|
||
<div class="div-operation"></div>
|
||
<span class="text-operation">变更内容 </span>
|
||
</div>
|
||
<div class="j-box" v-for="(item, index) in cxList" :key="index">
|
||
<div class="journal" style="margin-top: 20px">
|
||
<div class="imgText">
|
||
<div class="zjzm">
|
||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||
<span
|
||
class="title-text"
|
||
style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="btn-box">
|
||
<div class="btn-item">
|
||
<div class="left">控制模式</div>
|
||
<div class="right">
|
||
<span>{{ item.autoStatusBefore.label ? item.autoStatusBefore.label : '--' }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>{{
|
||
item.autoStatusAfter.label ? item.autoStatusAfter.label : '--'
|
||
}}</span></div
|
||
>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 亮度 </div>
|
||
<div class="right">
|
||
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
|
||
<span>{{ item.brightnessBefore != null ? item.brightnessBefore : '--' }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>{{ item.brightnessAfter != null ? item.brightnessAfter : '--' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 控制场景 </div>
|
||
<div class="right">
|
||
<span>{{ item.sceneBefore.label }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>{{ item.sceneAfter.label }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 色温 </div>
|
||
<div class="right">
|
||
<span>{{ item.colorBefore != null ? item.colorBefore : '--' }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>
|
||
{{ item.colorAfter != null ? item.colorAfter : '--' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="btn-item">
|
||
<div class="left"> 启用状态 </div>
|
||
<div class="right">
|
||
<span>{{ item.lockStatusAfter ? '启用' : '禁用' }}</span>
|
||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||
<span>
|
||
{{ item.lockStatusBefore ? '启用' : '禁用' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; height: 160px"></div>
|
||
<div class="button-box">
|
||
<button class="cancel" @click="logModalVisible = false">关闭</button>
|
||
</div>
|
||
</div>
|
||
<div class="div-add">
|
||
<button class="add" @click="reset">刷新</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { Pagination } from 'ant-design-vue';
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||
// 全局变量
|
||
import { items } from '/@/store/item';
|
||
|
||
// 初始化 =======================================================
|
||
|
||
// 组件
|
||
defineOptions({
|
||
components: {
|
||
'a-pagination': Pagination,
|
||
},
|
||
});
|
||
// 初始化
|
||
onMounted(() => {
|
||
getTable();
|
||
});
|
||
|
||
// 全局变量
|
||
const state = items();
|
||
|
||
// 日志业务 ======================================================
|
||
|
||
// 分页设置
|
||
const pagination = ref({
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
total: 0,
|
||
});
|
||
// 表格数据
|
||
const dataSource = ref([]);
|
||
// 当前选中表格行
|
||
let trIndex = ref(-1);
|
||
// 获得表格数据
|
||
const getTable = (changePage = false) => {
|
||
state.setLoading(true);
|
||
// 如果是切换页面，则清除当前序列、关闭弹窗
|
||
if (changePage) {
|
||
trIndex.value = -1;
|
||
logModalVisible.value = false;
|
||
cxList.value = [];
|
||
}
|
||
http
|
||
.get(lightingManage.getLog, {
|
||
pageSize: pagination.value.pageSize,
|
||
pageNum: pagination.value.pageNum,
|
||
})
|
||
.then((res) => {
|
||
state.setLoading(false);
|
||
let data = res.data;
|
||
dataSource.value = data.records;
|
||
pagination.value.total = data.total;
|
||
})
|
||
.catch(() => {
|
||
state.setLoading(false);
|
||
});
|
||
};
|
||
// 刷新功能（右下角）
|
||
const reset = () => {
|
||
trIndex.value = -1;
|
||
logModalVisible.value = false;
|
||
pagination.value = {
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
total: 0,
|
||
};
|
||
getTable();
|
||
};
|
||
// 点击日志行事件
|
||
const handleRowClick = (id: any, index: any) => {
|
||
trIndex.value = index;
|
||
getLogDetail(id);
|
||
};
|
||
|
||
// 日志详情业务 ==================================================
|
||
|
||
// 日志详情显隐
|
||
const logModalVisible = ref(false);
|
||
const getLogDetail = (id: any) => {
|
||
state.setLoading(true);
|
||
http
|
||
.get(lightingManage.getLogDetail, { logId: id })
|
||
.then((res) => {
|
||
state.setLoading(false);
|
||
const data = res.data;
|
||
if (data && data.length) {
|
||
// 显示模态框
|
||
logModalVisible.value = true;
|
||
cxList.value = res.data;
|
||
} else {
|
||
return message.info('返回值无效');
|
||
}
|
||
})
|
||
.catch(() => {
|
||
state.setLoading(false);
|
||
});
|
||
};
|
||
// 日志详情
|
||
const cxList = ref([]);
|
||
|
||
// 向外暴露方法
|
||
defineExpose({
|
||
reset,
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import '../style/dialogStyle.less';
|
||
|
||
// 右下角添加按钮
|
||
.div-add {
|
||
height: 64px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin-right: 20px;
|
||
.add {
|
||
width: 74px;
|
||
height: 40px;
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: rgba(67, 136, 251, 1);
|
||
border: rgba(67, 136, 251, 1);
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
// 表格
|
||
.custom-table {
|
||
border-collapse: collapse;
|
||
width: 416px;
|
||
min-height: 60px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.custom-table th,
|
||
.custom-table td {
|
||
border: 1px solid rgba(163, 192, 243, 1);
|
||
text-align: left;
|
||
padding: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.table1 {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
border: 1px solid rgba(255, 255, 255);
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
|
||
.tabReboot,
|
||
.tabDelete {
|
||
border: none;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
line-height: 20px;
|
||
color: rgba(67, 136, 251, 1);
|
||
}
|
||
|
||
.tabReboot {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.isTrIndex {
|
||
background: rgba(67, 136, 251, 1);
|
||
}
|
||
}
|
||
|
||
::v-deep(.ant-transfer) {
|
||
// 屏蔽自带的hover效果
|
||
.ant-transfer-list-content-item:hover {
|
||
background: black;
|
||
}
|
||
}
|
||
</style>
|