add:样式修改/素材修改/交互逻辑修改/增加日志功能
This commit is contained in:
chenpingsen
@@ -817,6 +817,6 @@
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../style/dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
</style>
|
||||
|
||||
@@ -231,7 +231,7 @@
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../style/dialogStyle.less';
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -6,37 +6,47 @@
|
||||
<th>执行时间</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, index) in dataSource1"
|
||||
:style="{ color: row.ctrlResult == 0 ? 'red' : 'white' }"
|
||||
v-for="(row, index) in dataSource"
|
||||
:key="index"
|
||||
@click="handleRowClick(row.key)"
|
||||
:class="row.key === trIndex ? 'isTrIndex' : ''">
|
||||
<td>{{ row.key }}</td>
|
||||
<td>{{ row.data }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td>{{ row.status }}</td>
|
||||
@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" v-if="logModalVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">操作日志 </span>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in cxList" :key="item.id">
|
||||
<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: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.name }}</span
|
||||
style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,131 +56,148 @@
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
<span>自动</span></div
|
||||
>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{ item.brightnessBefore != null ? item.brightnessBefore : '--' }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>30lux</span>
|
||||
<span>{{ item.brightnessAfter != null ? item.brightnessAfter : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<span>{{ item.sceneBefore.label }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
<span>{{ item.sceneAfter.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<span>{{ item.colorBefore != null ? item.colorBefore : '--' }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>3800k</span>
|
||||
<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="height: 60px"></div>
|
||||
<div style="width: 100%; height: 80px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="logModalVisible = false">取消</button>
|
||||
<button class="cancel" @click="logModalVisible = false">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-add">
|
||||
<button class="add">刷新</button>
|
||||
<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 { airConditionControl } from '/@/api/airConditionControlSystem';
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {});
|
||||
// 初始化 =======================================================
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
// 组件
|
||||
defineOptions({
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getTable();
|
||||
});
|
||||
|
||||
// 日志业务 ======================================================
|
||||
|
||||
// 分页设置
|
||||
const pagination = ref({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
});
|
||||
// 表格数据
|
||||
const dataSource1 = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '计划再开',
|
||||
status: '张三111',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '检修模式',
|
||||
status: '李四12',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '设备变更',
|
||||
status: '王五33',
|
||||
},
|
||||
]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
let trIndex = ref('-1');
|
||||
const logModalVisible = ref(false);
|
||||
const handleRowClick = (index: any) => {
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
const dataSource = ref([]);
|
||||
// 当前选中表格行
|
||||
let trIndex = ref(-1);
|
||||
// 获得表格数据
|
||||
const getTable = (changePage = false) => {
|
||||
// 如果是切换页面，则清除当前序列、关闭弹窗
|
||||
if (changePage) {
|
||||
trIndex.value = -1;
|
||||
logModalVisible.value = false;
|
||||
cxList.value = [];
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
http
|
||||
.get(airConditionControl.getLog, {
|
||||
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 = () => {
|
||||
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(airConditionControl.getLogDetail, { 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 './dialogStyle.less';
|
||||
@@ -203,7 +230,10 @@
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -7,17 +7,13 @@
|
||||
<img src="/asset/image//bulbLogo/21962.png" alt="" />
|
||||
<span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span></div
|
||||
>
|
||||
<button class="right-button">{{ blub.scene.label }}</button>
|
||||
<button class="right-button">{{ record.runStatus.label }}</button>
|
||||
</div>
|
||||
<div class="light-tag-box">
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
<span class="title">控制模式</span>
|
||||
<span class="result">{{
|
||||
blub.mode.label.indexOf('模式') != -1
|
||||
? blub.mode.label.replace('模式', '')
|
||||
: blub.mode.label
|
||||
}}</span>
|
||||
<span class="result">{{ record.autoStatus.label }}</span>
|
||||
</div>
|
||||
<div class="tag-box-item">
|
||||
<img src="/asset/image//bulbLogo/22496.png" alt="" />
|
||||
@@ -38,31 +34,43 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="icon-box" :style="props.blub.styleText">
|
||||
<!-- 正常=0 -->
|
||||
<img
|
||||
v-if="blub.mode.value == 1"
|
||||
v-if="record.runStatus.value == 0"
|
||||
class="icon-item"
|
||||
src="/asset/image/bulbLogo/22394.png"
|
||||
src="/asset/image/bulbLogo/on.png"
|
||||
alt="" />
|
||||
<!-- 故障=1 -->
|
||||
<img
|
||||
v-if="blub.mode.value == 2"
|
||||
v-if="record.runStatus.value == 1"
|
||||
class="icon-item"
|
||||
src="/asset/image/bulbLogo/22396.png"
|
||||
src="/asset/image/bulbLogo/off.png"
|
||||
alt="" />
|
||||
<!-- 维修=2 -->
|
||||
<img
|
||||
v-if="blub.mode.value == 3"
|
||||
v-if="record.runStatus.value == 2"
|
||||
class="icon-item"
|
||||
src="/asset/image/bulbLogo/22400.png"
|
||||
src="/asset/image/bulbLogo/repair.png"
|
||||
alt="" />
|
||||
<!-- 警告=3 -->
|
||||
<img
|
||||
v-if="record.runStatus.value == 3"
|
||||
class="icon-item"
|
||||
src="/asset/image/bulbLogo/alarm.png"
|
||||
alt="" />
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
const props = defineProps({
|
||||
blub: Object,
|
||||
});
|
||||
const blub = props.blub;
|
||||
const record = props.blub.record;
|
||||
// 设备对象
|
||||
const blub = computed(() => props.blub);
|
||||
// 设备信息
|
||||
const record = computed(() => props.blub.record);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.icon-box {
|
||||
@@ -102,7 +110,7 @@
|
||||
}
|
||||
|
||||
.right-button {
|
||||
width: 50px;
|
||||
width: 5em;
|
||||
height: 26px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
border: 1px solid rgba(57, 215, 187, 1);
|
||||
|
||||
@@ -181,9 +181,9 @@
|
||||
<div class="btn-item">
|
||||
<div class="left">控制模式</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<span>{{ item.stateBefore.autoStatus.label.replace('模式', '') }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span></div
|
||||
<span>{{ item.stateAfter.autoStatus.label.replace('模式', '') }}</span></div
|
||||
>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
@@ -834,6 +834,6 @@
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../style/dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
</style>
|
||||
|
||||
@@ -164,11 +164,21 @@
|
||||
};
|
||||
// 将对表格的修改统一发送
|
||||
const sendTable = () => {
|
||||
http.post(lightingManage.submitTableData, dataSource.value).then((res) => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
http
|
||||
.post(
|
||||
lightingManage.submitTableData +
|
||||
`?projectId=${state.projectId}${state.siteId ? `&siteId=${state.siteId}` : ''}`,
|
||||
dataSource.value,
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.retcode == 0) {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
} else {
|
||||
message.info(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// tab页弹窗部分 ====================================================
|
||||
@@ -231,7 +241,7 @@
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../style/dialogStyle.less';
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -6,37 +6,47 @@
|
||||
<th>执行时间</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, index) in dataSource1"
|
||||
:style="{ color: row.ctrlResult == 0 ? 'red' : 'white' }"
|
||||
v-for="(row, index) in dataSource"
|
||||
:key="index"
|
||||
@click="handleRowClick(row.key)"
|
||||
:class="row.key === trIndex ? 'isTrIndex' : ''">
|
||||
<td>{{ row.key }}</td>
|
||||
<td>{{ row.data }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td>{{ row.status }}</td>
|
||||
@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" v-if="logModalVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">操作日志 </span>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in cxList" :key="item.id">
|
||||
<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: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.name }}</span
|
||||
style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,134 +56,151 @@
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
</div>
|
||||
<span>自动</span></div
|
||||
>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<span>100lux</span>
|
||||
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{ item.brightnessBefore != null ? item.brightnessBefore : '--' }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>30lux</span>
|
||||
<span>{{ item.brightnessAfter != null ? item.brightnessAfter : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<span>{{ item.sceneBefore.label }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span>
|
||||
<span>{{ item.sceneAfter.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>4000k</span>
|
||||
<span>{{ item.colorBefore != null ? item.colorBefore : '--' }}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>3800k</span>
|
||||
<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="height: 60px"></div>
|
||||
<div style="width: 100%; height: 80px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="logModalVisible = false">取消</button>
|
||||
<button class="cancel" @click="logModalVisible = false">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-add">
|
||||
<button class="add">刷新</button>
|
||||
<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';
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {});
|
||||
// 初始化 =======================================================
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
// 组件
|
||||
defineOptions({
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changeArea']);
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getTable();
|
||||
});
|
||||
|
||||
// 日志业务 ======================================================
|
||||
|
||||
// 分页设置
|
||||
const pagination = ref({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
});
|
||||
// 表格数据
|
||||
const dataSource1 = ref([
|
||||
{
|
||||
key: '1',
|
||||
data: '2024-05-01',
|
||||
planName: '计划再开',
|
||||
status: '张三111',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
data: '2024-05-01',
|
||||
planName: '检修模式',
|
||||
status: '李四12',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
data: '2024-05-01',
|
||||
planName: '设备变更',
|
||||
status: '王五33',
|
||||
},
|
||||
]);
|
||||
const cxList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '站厅照明 1区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '站厅照明 2区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '站厅照明 3区',
|
||||
manual: '手动',
|
||||
automatic: '自动',
|
||||
brightness: '100lux',
|
||||
brightness2: '30lux',
|
||||
manual2: '手动',
|
||||
automatic2: '自动',
|
||||
brightness3: '4000k',
|
||||
brightness4: '3800k',
|
||||
},
|
||||
]);
|
||||
let trIndex = ref('-1');
|
||||
const logModalVisible = ref(false);
|
||||
const handleRowClick = (index: any) => {
|
||||
trIndex.value = index;
|
||||
if (index === trIndex.value) {
|
||||
console.log('tri');
|
||||
const dataSource = ref([]);
|
||||
// 当前选中表格行
|
||||
let trIndex = ref(-1);
|
||||
// 获得表格数据
|
||||
const getTable = (changePage = false) => {
|
||||
// 如果是切换页面，则清除当前序列、关闭弹窗
|
||||
if (changePage) {
|
||||
trIndex.value = -1;
|
||||
logModalVisible.value = false;
|
||||
cxList.value = [];
|
||||
}
|
||||
// 显示模态框
|
||||
logModalVisible.value = true;
|
||||
http
|
||||
.get(lightingManage.getLog, {
|
||||
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 = () => {
|
||||
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(lightingManage.getLogDetail, { 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 './dialogStyle.less';
|
||||
@import '../style/dialogStyle.less';
|
||||
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
@@ -203,7 +230,10 @@
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
color: rgb(255, 83, 0);
|
||||
background: black;
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
transition: all ease 0.5s;
|
||||
.content {
|
||||
@@ -105,6 +105,9 @@
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
:first-child {
|
||||
color: white;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -762,6 +762,6 @@
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../../style/dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
@@ -108,7 +108,9 @@
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
let url = '';
|
||||
// 全局变量
|
||||
const state = items();
|
||||
onMounted(() => {
|
||||
// 计划表格
|
||||
getTable();
|
||||
@@ -123,9 +125,6 @@
|
||||
url = ventilating.submitTableData3;
|
||||
}
|
||||
});
|
||||
// 全局变量
|
||||
const state = items();
|
||||
let url = '';
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
@@ -183,11 +182,16 @@
|
||||
};
|
||||
// 将对表格的修改统一发送
|
||||
const sendTable = () => {
|
||||
http.post(url, dataSource.value).then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
http
|
||||
.post(
|
||||
url + `?projectId=${state.projectId}${state.siteId ? `&siteId=${state.siteId}` : ''}`,
|
||||
dataSource.value,
|
||||
)
|
||||
.then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
};
|
||||
|
||||
// tab页弹窗部分 ====================================================
|
||||
@@ -250,7 +254,7 @@
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import '../../style/dialogStyle.less';
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -142,7 +142,9 @@
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="3" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<fanLog :type="3" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
<!-- 风幕机 -->
|
||||
@@ -197,7 +199,9 @@
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="4" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<fanLog :type="4" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
<transition name="zep">
|
||||
@@ -251,7 +255,9 @@
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="5" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志">
|
||||
<fanLog :type="5" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
</div>
|
||||
@@ -269,12 +275,12 @@
|
||||
import selectImg from '../image/airConditioningSystem/selectImg.png';
|
||||
import sunRed from '../image/airConditioningSystem/sunRed.png';
|
||||
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
|
||||
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
|
||||
|
||||
import boxModel from './components/boxModel.vue';
|
||||
import singleModel from '../components/singleModel.vue';
|
||||
import fanControl from './components/fanControl.vue';
|
||||
import fanPlant from './components/fanPlant.vue';
|
||||
import fanLog from './components/fanLog.vue';
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
|
||||
Reference in New Issue
Block a user