332 lines
9.1 KiB
Vue
332 lines
9.1 KiB
Vue
<template>
|
||
<div class="div-add">
|
||
<button class="add" @click="addModal">添加</button>
|
||
<a-popconfirm title="是否提交以上修改？" ok-text="确定" cancel-text="取消" @confirm="sendTable">
|
||
<button class="add" style="margin-left: 20px">执行</button>
|
||
</a-popconfirm>
|
||
</div>
|
||
<div class="buttons">
|
||
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
|
||
<div class="plans">
|
||
<button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)">
|
||
计划启用
|
||
</button>
|
||
<button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button>
|
||
</div>
|
||
</div>
|
||
<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 v-for="(row, index) in dataSource" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ row.startTime }}</td>
|
||
<td>{{ row.planName }}</td>
|
||
<td>
|
||
<button
|
||
:style="{
|
||
'font-size': '12px',
|
||
width: '5em',
|
||
background: 'rgb(47, 47, 47)',
|
||
color: setStateColor(row.executeStatus.value),
|
||
border: '1px solid',
|
||
}">
|
||
{{ setStateText(row.executeStatus.value) }}
|
||
</button>
|
||
</td>
|
||
<td>
|
||
<div class="tabReboot" @click="startPlan(row)">启用</div>
|
||
<a-popconfirm
|
||
title="此操作将移除该数据"
|
||
ok-text="确定"
|
||
cancel-text="取消"
|
||
@confirm="deletePlan(row)">
|
||
<div class="tabDelete">删除</div>
|
||
</a-popconfirm>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="out-dialog" v-if="addVisible">
|
||
<div class="content" v-if="addVisible">
|
||
<div class="div-operation"></div>
|
||
<span class="text-operation">计划库</span>
|
||
</div>
|
||
<div style="margin-top: 20px">
|
||
<a-transfer
|
||
v-model:target-keys="targetKeys"
|
||
:data-source="transferData"
|
||
show-search
|
||
:filter-option="filterOption"
|
||
:render="(item: any) => item.title"
|
||
@change="handleChange"
|
||
:style="{ color: 'rgba(255,255,255,1)' }"
|
||
@search="handleSearch"
|
||
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
|
||
</div>
|
||
<div style="width: 100%; height: 60px"></div>
|
||
<div class="button-box">
|
||
<button class="cancel" @click="addVisible = false">取消</button>
|
||
<button class="execute" @click="sendPlan">确定</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
// 请求
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||
import { planManage } from '/@/api/planManage';
|
||
import { message } from 'ant-design-vue';
|
||
import { getEnum } from '/@/api';
|
||
// 全局变量
|
||
import { items } from '/@/store/item';
|
||
|
||
// 初始化 ===========================================================
|
||
|
||
onMounted(() => {
|
||
getStateEnum();
|
||
// 计划表格
|
||
getTable();
|
||
// 穿梭框原始数据
|
||
getLeftPlan();
|
||
});
|
||
// 全局变量
|
||
const state = items();
|
||
const getStateEnum = async () => {
|
||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
|
||
stateList.value = enumData.data;
|
||
};
|
||
|
||
// tab页部分 ========================================================
|
||
|
||
// 状态枚举
|
||
const stateList = ref([]);
|
||
// 设置枚举的颜色 与 文本
|
||
const setStateColor = (state: number) => {
|
||
if (state == 0) {
|
||
return '#ccc';
|
||
} else if (state == 1) {
|
||
return 'orange';
|
||
} else if (state == 2) {
|
||
return 'rgb(57, 215, 187)';
|
||
} else if (state == 3) {
|
||
return 'rgb(255, 0, 0)';
|
||
}
|
||
};
|
||
// 设置枚举的文本
|
||
const setStateText = (state: number) => {
|
||
const res = stateList.value.find((item) => {
|
||
return item.value == state;
|
||
});
|
||
return res.label;
|
||
};
|
||
// 计划启用/禁用事件
|
||
const togglePlan = (state: number) => {
|
||
dataSource.value.forEach((item: any) => {
|
||
item.executeStatus.value = state;
|
||
});
|
||
};
|
||
|
||
// 表格数据
|
||
const dataSource = ref([]);
|
||
// 获得表格数据
|
||
const getTable = () => {
|
||
http
|
||
.get(planManage.getTableData, {
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
|
||
deviceType: 1,
|
||
})
|
||
.then((res) => {
|
||
dataSource.value = res.data;
|
||
});
|
||
};
|
||
// 删除表格中的计划（将当前任意状态，修改为未启用 =0）
|
||
const deletePlan = (row: any) => {
|
||
row.executeStatus.value = 0;
|
||
};
|
||
// 重启表格中的计划（将当前任意状态，修改为待执行 = 1）
|
||
const startPlan = (row: any) => {
|
||
if (row.executeStatus.value == 1) {
|
||
return message.info('该数据已是待执行状态，无需再次修改');
|
||
}
|
||
row.executeStatus.value = 1;
|
||
};
|
||
// 将对表格的修改统一发送
|
||
const sendTable = () => {
|
||
http.post(lightingManage.submitTableData, dataSource.value).then((res) => {
|
||
message.success('操作成功');
|
||
getTable();
|
||
getLeftPlan();
|
||
});
|
||
};
|
||
|
||
// tab页弹窗部分 ====================================================
|
||
|
||
// 添加弹窗控制变量
|
||
const addVisible = ref(false);
|
||
// 打开弹窗
|
||
const addModal = () => {
|
||
addVisible.value = true;
|
||
};
|
||
|
||
// 穿梭框部分 =======================================================
|
||
|
||
// 穿梭框数据
|
||
const transferData = ref([]) as any;
|
||
// 获得穿梭框原始数据
|
||
const getLeftPlan = () => {
|
||
http
|
||
.get(planManage.getTransData, {
|
||
projectId: state.projectId,
|
||
siteId: state.siteId,
|
||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
|
||
deviceType: 1,
|
||
})
|
||
.then((res) => {
|
||
let arr = [];
|
||
res.data.forEach((item: any) => {
|
||
arr.push({
|
||
key: item.id,
|
||
title: item.planName,
|
||
});
|
||
});
|
||
transferData.value = arr;
|
||
});
|
||
};
|
||
|
||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||
console.log(keys, direction, moveKeys);
|
||
};
|
||
const handleSearch = (dir: string, value: string) => {
|
||
console.log('search:', dir, value);
|
||
};
|
||
// 穿梭框选中数据
|
||
const targetKeys = ref<string[]>([]);
|
||
// 将穿梭框选中的计划提交
|
||
const sendPlan = () => {
|
||
if (targetKeys.value.length < 1) {
|
||
return message.info('没有选择任何计划');
|
||
}
|
||
http.post(planManage.submitTransData, targetKeys.value).then(() => {
|
||
message.success('添加成功');
|
||
// 如果发送成功，则刷新表格
|
||
getTable();
|
||
getLeftPlan();
|
||
});
|
||
};
|
||
|
||
const filterOption = (inputValue: string, option: any) => {
|
||
return option.description.indexOf(inputValue) > -1;
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import './dialogStyle.less';
|
||
.buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.plan {
|
||
border: none;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
border-radius: 5px;
|
||
width: 88px;
|
||
height: 32px;
|
||
color: white;
|
||
cursor: pointer;
|
||
margin: 15px 0;
|
||
vertical-align: middle;
|
||
}
|
||
.plan.enabled {
|
||
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||
}
|
||
.plan.disabled {
|
||
background-color: red;
|
||
}
|
||
.plan:disabled {
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
// 右下角添加按钮
|
||
.div-add {
|
||
height: 64px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin-right: 10px;
|
||
.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;
|
||
height: 40px;
|
||
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 {
|
||
width: 100%;
|
||
border: 1px solid rgba(255, 255, 255);
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
// 表格中的操作按钮
|
||
.tabReboot,
|
||
.tabDelete {
|
||
border: none;
|
||
display: inline-block;
|
||
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);
|
||
cursor: pointer;
|
||
}
|
||
.tabReboot {
|
||
margin-right: 8px;
|
||
}
|
||
.tabReboot::active {
|
||
color: white !important;
|
||
}
|
||
.tabDelete::active {
|
||
color: white;
|
||
}
|
||
}
|
||
::v-deep(.ant-transfer) {
|
||
// 屏蔽自带的hover效果
|
||
.ant-transfer-list-content-item:hover {
|
||
background: black;
|
||
}
|
||
}
|
||
</style>
|