chenpingsen
3 months ago
22 changed files with 819 additions and 719 deletions
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
@ -1,161 +0,0 @@ |
|||||
.out-dialog { |
|
||||
position: fixed; |
|
||||
right: 496px; |
|
||||
width: 500px; |
|
||||
height: 100%; |
|
||||
z-index: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
box-sizing: border-box; |
|
||||
color: rgb(255, 83, 0); |
|
||||
background: black; |
|
||||
display: flex; |
|
||||
padding: 25px; |
|
||||
flex-direction: column; |
|
||||
transition: all ease 0.5s; |
|
||||
.content { |
|
||||
overflow-y: scroll; |
|
||||
.div-operation { |
|
||||
display: inline-block; |
|
||||
width: 3px; |
|
||||
height: 13px; |
|
||||
opacity: 1; |
|
||||
border-radius: 1px; |
|
||||
background: rgba(67, 136, 251, 1); |
|
||||
} |
|
||||
.text-operation { |
|
||||
display: inline-block; |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
font-size: 16px; |
|
||||
font-weight: 700; |
|
||||
margin-left: 5px; |
|
||||
} |
|
||||
.j-box { |
|
||||
background-color: #000; |
|
||||
opacity: 1; |
|
||||
z-index: 99999; |
|
||||
overflow-y: scroll; |
|
||||
.journal { |
|
||||
padding: 1% 3%; |
|
||||
width: 100%; |
|
||||
background-color: rgba(0, 0, 0); |
|
||||
border-radius: 12px; |
|
||||
border: 2px solid transparent; |
|
||||
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; |
|
||||
.title-img { |
|
||||
margin-top: 6px; |
|
||||
} |
|
||||
.title-text { |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
} |
|
||||
.imgText { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.ztzm { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.cxbtn { |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
border: none; |
|
||||
border-radius: 6px; |
|
||||
width: 59.79px; |
|
||||
height: 32px; |
|
||||
opacity: 1; |
|
||||
background: linear-gradient( |
|
||||
180deg, |
|
||||
rgba(255, 187, 0, 1) 0%, |
|
||||
rgba(255, 112, 3, 1) 91.21%, |
|
||||
rgba(255, 129, 3, 1) 100% |
|
||||
); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
.btn-box { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr; |
|
||||
grid-template-rows: 1fr 1fr; |
|
||||
grid-row-gap: 15px; |
|
||||
.btn-item { |
|
||||
text-align: center; |
|
||||
display: flex; |
|
||||
align-content: space-between; |
|
||||
.left { |
|
||||
width: 70px; |
|
||||
height: 35px; |
|
||||
line-height: 35px; |
|
||||
border-radius: 4px; |
|
||||
background: linear-gradient( |
|
||||
180deg, |
|
||||
rgba(1, 206, 255, 1) 0%, |
|
||||
rgba(0, 150, 229, 1) 100% |
|
||||
); |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
.right { |
|
||||
width: 140px; |
|
||||
height: 35px; |
|
||||
line-height: 35px; |
|
||||
:first-child { |
|
||||
color: white; |
|
||||
} |
|
||||
span { |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
img { |
|
||||
padding: 0 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.button-box { |
|
||||
width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
padding: 10px; |
|
||||
height: 60px; |
|
||||
position: absolute; |
|
||||
background-color: transparent; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
.execute, .cancel { |
|
||||
margin-right: 10px; |
|
||||
width: 74px; |
|
||||
height: 40px; |
|
||||
opacity: 1; |
|
||||
cursor: pointer; |
|
||||
border-radius: 4px; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
border: 0; |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
.execute { |
|
||||
background: rgb(67, 136, 251); |
|
||||
color: white; |
|
||||
} |
|
||||
.cancel { |
|
||||
background: white; |
|
||||
color: black; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fade-enter-active, .fade-leave-active { |
|
||||
transform: translateX(0px); |
|
||||
} |
|
||||
.fade-enter-from, .fade-leave-to { |
|
||||
transform: translateX(496px); |
|
||||
} |
|
||||
@ -1,161 +0,0 @@ |
|||||
.out-dialog { |
|
||||
position: fixed; |
|
||||
right: 496px; |
|
||||
width: 500px; |
|
||||
height: 100%; |
|
||||
z-index: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
box-sizing: border-box; |
|
||||
color: rgb(255, 83, 0); |
|
||||
background: black; |
|
||||
display: flex; |
|
||||
padding: 25px; |
|
||||
flex-direction: column; |
|
||||
transition: all ease 0.5s; |
|
||||
.content { |
|
||||
overflow-y: scroll; |
|
||||
.div-operation { |
|
||||
display: inline-block; |
|
||||
width: 3px; |
|
||||
height: 13px; |
|
||||
opacity: 1; |
|
||||
border-radius: 1px; |
|
||||
background: rgba(67, 136, 251, 1); |
|
||||
} |
|
||||
.text-operation { |
|
||||
display: inline-block; |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
font-size: 16px; |
|
||||
font-weight: 700; |
|
||||
margin-left: 5px; |
|
||||
} |
|
||||
.j-box { |
|
||||
background-color: #000; |
|
||||
opacity: 1; |
|
||||
z-index: 99999; |
|
||||
overflow-y: scroll; |
|
||||
.journal { |
|
||||
padding: 1% 3%; |
|
||||
width: 100%; |
|
||||
background-color: rgba(0, 0, 0); |
|
||||
border-radius: 12px; |
|
||||
border: 2px solid transparent; |
|
||||
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; |
|
||||
.title-img { |
|
||||
margin-top: 6px; |
|
||||
} |
|
||||
.title-text { |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
} |
|
||||
.imgText { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.ztzm { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.cxbtn { |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
border: none; |
|
||||
border-radius: 6px; |
|
||||
width: 59.79px; |
|
||||
height: 32px; |
|
||||
opacity: 1; |
|
||||
background: linear-gradient( |
|
||||
180deg, |
|
||||
rgba(255, 187, 0, 1) 0%, |
|
||||
rgba(255, 112, 3, 1) 91.21%, |
|
||||
rgba(255, 129, 3, 1) 100% |
|
||||
); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
.btn-box { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr; |
|
||||
grid-template-rows: 1fr 1fr; |
|
||||
grid-row-gap: 15px; |
|
||||
.btn-item { |
|
||||
text-align: center; |
|
||||
display: flex; |
|
||||
align-content: space-between; |
|
||||
.left { |
|
||||
width: 70px; |
|
||||
height: 35px; |
|
||||
line-height: 35px; |
|
||||
border-radius: 4px; |
|
||||
background: linear-gradient( |
|
||||
180deg, |
|
||||
rgba(1, 206, 255, 1) 0%, |
|
||||
rgba(0, 150, 229, 1) 100% |
|
||||
); |
|
||||
color: rgba(255, 255, 255, 1); |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
.right { |
|
||||
width: 140px; |
|
||||
height: 35px; |
|
||||
line-height: 35px; |
|
||||
:first-child { |
|
||||
color: white; |
|
||||
} |
|
||||
span { |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
img { |
|
||||
padding: 0 5px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.button-box { |
|
||||
width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
padding: 10px; |
|
||||
height: 60px; |
|
||||
position: absolute; |
|
||||
background-color: transparent; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
.execute, .cancel { |
|
||||
margin-right: 10px; |
|
||||
width: 74px; |
|
||||
height: 40px; |
|
||||
opacity: 1; |
|
||||
cursor: pointer; |
|
||||
border-radius: 4px; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
border: 0; |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
.execute { |
|
||||
background: rgb(67, 136, 251); |
|
||||
color: white; |
|
||||
} |
|
||||
.cancel { |
|
||||
background: white; |
|
||||
color: black; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fade-enter-active, .fade-leave-active { |
|
||||
transform: translateX(0px); |
|
||||
} |
|
||||
.fade-enter-from, .fade-leave-to { |
|
||||
transform: translateX(496px); |
|
||||
} |
|
||||
@ -0,0 +1,312 @@ |
|||||
|
<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 == 0 ? '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" |
||||
|
@change="getTable(true)" /> |
||||
|
|
||||
|
<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>手动</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>自动</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: 80px"></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 { ventilating } from '/@/api/ventilatingSystem'; |
||||
|
|
||||
|
// 全局变量 |
||||
|
import { items } from '/@/store/item'; |
||||
|
|
||||
|
// 初始化 ======================================================= |
||||
|
|
||||
|
// 全局变量 |
||||
|
const state = items(); |
||||
|
const props = defineProps({ |
||||
|
// 设备类型 |
||||
|
type: { |
||||
|
type: Number, |
||||
|
}, |
||||
|
}); |
||||
|
// 组件 |
||||
|
defineOptions({ |
||||
|
components: { |
||||
|
'a-pagination': Pagination, |
||||
|
}, |
||||
|
}); |
||||
|
// 请求日志URL |
||||
|
let log = ''; |
||||
|
// 日志详情URL |
||||
|
let logDetail = ''; |
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
// 获得 |
||||
|
let type = props.type; |
||||
|
// 排风扇 |
||||
|
if (type == 3) { |
||||
|
log = ventilating.getLog1; |
||||
|
logDetail = ventilating.getLogDetail1; |
||||
|
// 风幕机 |
||||
|
} else if (type == 4) { |
||||
|
log = ventilating.getLog2; |
||||
|
logDetail = ventilating.getLogDetail2; |
||||
|
// 电动窗 |
||||
|
} else if (type == 5) { |
||||
|
log = ventilating.getLog3; |
||||
|
logDetail = ventilating.getLogDetail3; |
||||
|
} |
||||
|
getTable(); |
||||
|
}); |
||||
|
|
||||
|
// 日志业务 ====================================================== |
||||
|
|
||||
|
// 分页设置 |
||||
|
const pagination = ref({ |
||||
|
pageSize: 10, |
||||
|
pageNum: 1, |
||||
|
total: 0, |
||||
|
}); |
||||
|
// 表格数据 |
||||
|
const dataSource = ref([]); |
||||
|
// 当前选中表格行 |
||||
|
let trIndex = ref(-1); |
||||
|
// 获得表格数据 |
||||
|
const getTable = (changePage = false) => { |
||||
|
// 如果是切换页面，则清除当前序列、关闭弹窗 |
||||
|
if (changePage) { |
||||
|
trIndex.value = -1; |
||||
|
logModalVisible.value = false; |
||||
|
cxList.value = []; |
||||
|
} |
||||
|
http |
||||
|
.get(log, { |
||||
|
pageSize: pagination.value.pageSize, |
||||
|
pageNum: pagination.value.pageNum, |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
let data = res.data; |
||||
|
dataSource.value = data.records; |
||||
|
pagination.value.total = data.total; |
||||
|
}); |
||||
|
}; |
||||
|
// 刷新功能（右下角） |
||||
|
const reset = () => { |
||||
|
// state.setLoading(true); |
||||
|
pagination.value = { |
||||
|
pageSize: 10, |
||||
|
pageNum: 1, |
||||
|
total: 0, |
||||
|
}; |
||||
|
getTable(); |
||||
|
}; |
||||
|
// 点击日志行事件 |
||||
|
const handleRowClick = (id: any, index: any) => { |
||||
|
// 忽略无效点击 |
||||
|
if (index === trIndex.value) { |
||||
|
return; |
||||
|
} else { |
||||
|
trIndex.value = index; |
||||
|
getLogDetail(id); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 日志详情业务 ================================================== |
||||
|
|
||||
|
// 日志详情显隐 |
||||
|
const logModalVisible = ref(false); |
||||
|
const getLogDetail = (id: any) => { |
||||
|
http.get(logDetail, { logId: id }).then((res) => { |
||||
|
const data = res.data; |
||||
|
if (data && data.length) { |
||||
|
// 显示模态框 |
||||
|
logModalVisible.value = true; |
||||
|
cxList.value = res.data; |
||||
|
} else { |
||||
|
return message.info('返回值无效'); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
const cxList = ref([]); |
||||
|
</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> |
||||
Loading…
Reference in new issue