xuziqiang
/
SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add:照明系统 抽屉功能tab2分页功能完善

temp
chenpingsen 4 months ago
parent
2bc56cc1d4
commit
2d1d3a41a8
6 changed files with 159 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      hx-ai-intelligent/src/api/IlluminationInfo.ts
  2. 10
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  3. 67
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  4. 35
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
  5. 86
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
  6. 87
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

4
hx-ai-intelligent/src/api/IlluminationInfo.ts
View File

@ -17,4 +17,8 @@ export enum lightingManage {
getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan', getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
// 提交穿梭框被选择的数据 // 提交穿梭框被选择的数据
submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan', submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
// 删除表格中的计划
deletePlan = '/carbon-smart/IlluminationPlan/deletePlan',
// 重启表格计划
restartPlan = '/carbon-smart/IlluminationPlan/enable',
} }

10
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
View File

@ -1,6 +1,8 @@
// 页面容器 // 页面容器
.lighting-box { .lighting-box {
position: relative; position: relative;
width: 100%;
height: 100%;
// background: linear-gradient(#badaff, #8cabeb, #7095de); // background: linear-gradient(#badaff, #8cabeb, #7095de);
// 照明设备功能总容器 // 照明设备功能总容器
.lighting-img-box { .lighting-img-box {
@ -47,19 +49,19 @@
display: flex; display: flex;
gap: 5px; gap: 5px;
.area1 { .area1 {
width: 70px; width: 65px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;
} }
.area2 { .area2 {
width: 200px; width: 100px;
background: rgba(255, 165, 0, 0.3); background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0); border: 2px solid rgb(255, 165, 0);
display: flex; display: flex;
} }
.area3 { .area3 {
width: 120px; width: 220px;
background: rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0); border: 2px solid rgb(255, 0, 0);
display: flex; display: flex;
@ -71,7 +73,7 @@
display: flex; display: flex;
} }
.area5 { .area5 {
flex: 1; flex: 210px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;

67
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
View File

@ -3,8 +3,7 @@
<div class="lighting-img-box"> <div class="lighting-img-box">
<!-- 左上角，区域切换 --> <!-- 左上角，区域切换 -->
<div class="btn-box"> <div class="btn-box">
<button class="btn-item" @click=changeFloor(1)>1F</button> <button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
<button class="btn-item" @click=changeFloor(2)>2F</button>
</div> </div>
<!-- 楼层区域 --> <!-- 楼层区域 -->
<div class="area"> <div class="area">
@ -13,7 +12,7 @@
:class="computedClass(item.id)" :class="computedClass(item.id)"
@click="changeThisArea([item])" @click="changeThisArea([item])"
:key="index"> :key="index">
<div v-for="(v, i) in item.children" :key="i" class="light-group"> <div v-for="(v, i) in item.childList" :key="i" class="light-group">
<div class="group-shadow" @click.stop="changeThisArea([item, v])"> <div class="group-shadow" @click.stop="changeThisArea([item, v])">
<div :class="computedClass(v.id)" class="shadow-box"></div> <div :class="computedClass(v.id)" class="shadow-box"></div>
</div> </div>
@ -50,7 +49,7 @@
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板"> <a-tab-pane key="1" tab="控制面板">
<tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1> <tabs1 @changeArea="changeArea" @reset="reset" :treeData="treeData" :nowArea="nowArea"></tabs1>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render> <a-tab-pane key="2" tab="计划列表" force-render>
<tabs2></tabs2> <tabs2></tabs2>
@ -80,55 +79,53 @@ import {
DoubleRightOutlined DoubleRightOutlined
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
// 类声明 =======================================================
interface items {
id: string,
}
// 初始化 ======================================================= // 初始化 =======================================================
onMounted(() => { onMounted(() => {
http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => { http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
const data = res.data const data = res.data
/** 由前端创建的，只在前端使用的变量 floorData.value = data
/** 只在前端使用的变量
* @param id 用于判断样式和层级的前端属性 * @param id 用于判断样式和层级的前端属性
* @param selected 用于表示是否选中的前端属性 * @param selected 用于表示是否选中的前端属性
*/ */
data.forEach((item, index) => { data.forEach(floor => {
if (index == 0) { floor.childList.forEach((item, index) => {
item.selected = true if (index == 0) {
} else { item.selected = true
item.selected = false } else {
} item.selected = false
item.id = String(index + 1) }
item.children = [] item.id = String(index + 1)
// deviceGroup后端返回了对象，此处转化为数组 item.childList.forEach((v, i) => {
let i = 1; v.selected = false
for (let obj in item.deviceGroup) { v.id = (index + 1) + '-' + (i + 1)
item.deviceGroup[obj].selected = false })
item.deviceGroup[obj].id = String((index + 1) + '-' + i++) })
item.children.push(item.deviceGroup[obj])
}
}) })
treeData.value = data treeData.value = data[0].childList
}) })
}) })
// 分层业务 ===================================================== // 分层业务 =====================================================
// 左上角分层切换 // 左上角分层切换
const changeFloor = (area: number) => { const changeFloor = (area: any) => {
if (area == 1) { // 重置数据
console.log('1F') reset()
} else if (area == 2) { // 重置视图
console.log('2F') changeArea(['1'])
} // 切换楼层数据
treeData.value = area
// 默认选择第一项
treeData.value[0].selected = true
} }
// 分区业务 ===================================================== // 分区业务 =====================================================
// 所有楼层的数据
const floorData = ref([])
// 分区结构树 // 分区结构树
const treeData = ref([]) const treeData = ref([])
// 当前选中的分区id // 当前选中的分区id
@ -223,7 +220,7 @@ const changeThisArea = (result: any) => {
const reset = () => { const reset = () => {
treeData.value.forEach(item => { treeData.value.forEach(item => {
item.selected = false item.selected = false
item.children.forEach(i => { item.childList.forEach(i => {
i.selected = false i.selected = false
}) })
}) })

35
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
View File

@ -44,8 +44,7 @@
display: inline-block; display: inline-block;
justify-content: center; justify-content: center;
} }
.plan {
.plan.enabled {
border: none; border: none;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -54,28 +53,20 @@
margin-left: 235px; margin-left: 235px;
width: 88px; width: 88px;
height: 32px; height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white; color: white;
cursor: pointer;
}
.plan.enabled {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
} }
.plan.disabled { .plan.disabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background-color: red; background-color: red;
} }
.plan:disabled { .plan:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
.openPlan {
.openPlan.enabled2 { cursor: pointer;
border: none; border: none;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -84,19 +75,12 @@
vertical-align: top; vertical-align: top;
width: 88px; width: 88px;
height: 32px; height: 32px;
}
.openPlan.enabled2 {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%); background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
} }
.openPlan.disabled2 { .openPlan.disabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background-color: red; background-color: red;
} }
@ -135,6 +119,7 @@
color: white; color: white;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
} }
.btn2 { .btn2 {

86
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
View File

@ -14,7 +14,7 @@
<template v-if="!showAllButtonsArea"> <template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index" <button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)"> :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
{{ button.regionName }} {{ button.name }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
@ -23,7 +23,7 @@
<template v-else> <template v-else>
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }" <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
@click="selectButton(button)"> @click="selectButton(button)">
{{ button.regionName }} {{ button.name }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
@ -33,7 +33,7 @@
</div> </div>
<!-- 照明回路部分 --> <!-- 照明回路部分 -->
<div> <div>
<div class="circuit-area" v-if="selectedButton"> <div class="circuit-area">
<div class="circuit-tab"></div> <div class="circuit-tab"></div>
<span class="circuit-text">照明回路</span> <span class="circuit-text">照明回路</span>
<div class="btn2"> <div class="btn2">
@ -50,12 +50,12 @@
</button> </button>
</div> </div>
</div> </div>
<div class="btnArea" v-if="selectedButton"> <div class="btnArea">
<template v-if="!showAllButtons"> <template v-if="!showAllButtons">
<button v-for="(button, index) in limitedButtons2" :key="index" <button v-for="(button, index) in limitedButtons2" :key="index"
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
<stop-outlined v-if="button.panel" /> <stop-outlined v-if="button.ctrlStatus" />
{{ button.deviceName }} {{ button.name }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
@ -64,8 +64,8 @@
<template v-else> <template v-else>
<button v-for="(button, index) in buttons2" :key="index" <button v-for="(button, index) in buttons2" :key="index"
:class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)"> :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
<stop-outlined v-if="button.panel" /> <stop-outlined v-if="button.ctrlStatus" />
{{ button.deviceName }} {{ button.name }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
@ -218,6 +218,7 @@ import {
UpOutlined, UpOutlined,
StopOutlined, StopOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
// 请求 // 请求
import { http } from '/nerv-lib/util/http'; import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo'; import { lightingManage } from '/@/api/IlluminationInfo';
@ -237,7 +238,7 @@ const setArea = () => {
// 修改当前选中的分区 // 修改当前选中的分区
selectedButton.value = props.nowArea selectedButton.value = props.nowArea
// 设置当前显示的回路 // 设置当前显示的回路
buttons2.value = data.children buttons2.value = data.childList
} }
// 与父组件的交互 =================================================================== // 与父组件的交互 ===================================================================
@ -254,13 +255,19 @@ const props = defineProps({
} }
}); });
// 向上传递修改选择样式 // 向上传递修改选择样式
const emit = defineEmits(['changeArea']); /**
* @method changeArea 用于控制俯视图的选中状态
* @method reset 用于重置按钮区
*/
const emit = defineEmits(['changeArea','reset']);
// 监听父组件选中的分区，并实时修改分区 // 监听父组件选中的分区，并实时修改分区
watch(() => props.nowArea, () => { watch(() => props.nowArea, () => {
setArea() setArea()
// 分区产生了切换， 线路的选中状态置空
handleButton.value = ''
}) })
// 照明区域 ========================================================================== // 照明区域业务 =======================================================================
// 计划启用状态 // 计划启用状态
const isPlanEnabled = ref(false); const isPlanEnabled = ref(false);
@ -278,33 +285,36 @@ const selectButton = (button: any) => {
console.log(button,'button') console.log(button,'button')
// 当前选中按钮 // 当前选中按钮
selectedButton.value = button.id; selectedButton.value = button.id;
// 重置
initMenu(1) initMenu(1)
button.selected = true button.selected = true
buttons2.value = button.children buttons2.value = button.childList
// 反选area
emit('changeArea', button.id); emit('changeArea', button.id);
handleButton.value = ''
}; };
// 默认最多展示8个按钮 // 默认最多展示8个按钮
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
// 照明回路 ========================================================================== // 照明回路业务 ======================================================================
// 最近交互过的按钮，用于禁用和启用 // 最近交互过的按钮id，用于禁用和启用
const handleButton = ref(''); const handleButton = ref('');
// 面板启用/禁用状态 // 面板启用/禁用状态
const isPlanEnabled2 = ref(true); const isPlanEnabled2 = ref(true);
// 面板启用/禁用切换事件 // 面板启用/禁用切换事件
const togglePlan2 = () => { const togglePlan2 = () => {
// 获取最近交互的按钮 // 如果未交互任何按钮
if (handleButton.value == '') {
return message.info('请选择照明回路');
}
// 获取最近交互过的按钮
const btn = buttons2.value.find((button) => button.id === handleButton.value) const btn = buttons2.value.find((button) => button.id === handleButton.value)
let panel = +(!btn.panel) let panel = +(!btn.ctrlStatus)
isLoading.value = true isLoading.value = true
http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => { http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
if (res.msg === 'success') { if (res.msg === 'success') {
isPlanEnabled2.value = !isPlanEnabled2.value; isPlanEnabled2.value = !isPlanEnabled2.value;
btn.panel = panel btn.ctrlStatus = panel
isLoading.value = false isLoading.value = false
} else { } else {
isLoading.value = false isLoading.value = false
@ -316,13 +326,14 @@ const togglePlan2 = () => {
let singleSelection = ref(true); let singleSelection = ref(true);
// 多选与单选切换事件 // 多选与单选切换事件
const selectAll = () => { const selectAll = () => {
emit('changeArea', [selectedButton.value])
selectAllCheckbox.value = false selectAllCheckbox.value = false
buttons2.value.forEach((button) => { buttons2.value.forEach((button) => {
button.selected = false; button.selected = false;
}); });
singleSelection.value = !singleSelection.value; singleSelection.value = !singleSelection.value;
// 线路按钮被重置，
showControlMode.value = false showControlMode.value = false
emit('changeArea', [selectedButton.value])
}; };
// 全选状态 // 全选状态
@ -351,11 +362,12 @@ const toggleSelection = (button: any) => {
// 存储一次按钮ID，用于禁用/启用交互 // 存储一次按钮ID，用于禁用/启用交互
handleButton.value = button.id handleButton.value = button.id
// 根据按钮状态，展示禁用/启用按钮文本 // 根据按钮状态，展示禁用/启用按钮文本
if (button.panel) { if (button.ctrlStatus) {
isPlanEnabled2.value = true isPlanEnabled2.value = true
} else { } else {
isPlanEnabled2.value = false isPlanEnabled2.value = false
} }
// 选择时反控俯视图 // 选择时反控俯视图
let level1 = selectedButton.value let level1 = selectedButton.value
let level2 = button.id let level2 = button.id
@ -401,7 +413,7 @@ const showAllButtons = ref(false);
// 默认最多展示8个按钮 // 默认最多展示8个按钮
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 控制模式 ======================================================================= // 控制模式业务 ====================================================================
// 决定该区域是否显示 // 决定该区域是否显示
const showControlMode = ref(false); const showControlMode = ref(false);
@ -413,7 +425,7 @@ const selectButton3 = (button3) => {
selectedButton4.value = null; // 清空选中的控制场景按钮 selectedButton4.value = null; // 清空选中的控制场景按钮
}; };
// 控制场景 ======================================================================= // 控制场景业务 =====================================================================
// 决定该区域是否显示 // 决定该区域是否显示
const showControlScene = ref(false); const showControlScene = ref(false);
@ -431,7 +443,7 @@ const selectButton4 = (button4) => {
selectedButton4.value = button4.label; selectedButton4.value = button4.label;
}; };
// 灯具参数 ======================================================================== // 灯具参数表格 =====================================================================
// 灯具参数 - 表格数据 // 灯具参数 - 表格数据
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]); const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
@ -493,6 +505,7 @@ const delBtn = (id: any) => {
executeVisible.value = false; executeVisible.value = false;
} }
}; };
// 其他业务 ======================================================================== // 其他业务 ========================================================================
const isLoading = ref(false) const isLoading = ref(false)
@ -502,13 +515,14 @@ const initMenu = (tier: number) => {
// 1 = 照明区域 - 切换时，重置以下所有菜单 // 1 = 照明区域 - 切换时，重置以下所有菜单
if (tier == 1) { if (tier == 1) {
// 切换前，清除照明回路的选中状态 // 切换前，清除照明回路的选中状态
buttons2.value.forEach(item => { // buttons2.value.forEach(item => {
item.selected = false // item.selected = false
}) // })
// 切换后，清空所有选中状态 // // 切换后，清空所有选中状态
props.treeData.forEach(item => { // props.treeData.forEach(item => {
item.selected = false // item.selected = false
}) // })
emit('reset')
// 控制模式 隐藏 // 控制模式 隐藏
showControlMode.value = false; showControlMode.value = false;
// 控制场景 隐藏 // 控制场景 隐藏
@ -524,9 +538,17 @@ const initMenu = (tier: number) => {
} }
// 刷新 // 刷新
const refresh = () => { const refresh = () => {
// 关闭执行弹窗
executeVisible.value = false executeVisible.value = false
// 设置当前选中的序列
selectedButton.value = '1'; selectedButton.value = '1';
emit('changeArea', ['1']); emit('changeArea', ['1']);
emit('reset')
let data = props.treeData[0]
// 默认选中
data.selected = true
buttons2.value = data.childList
showControlMode.value = false; showControlMode.value = false;
showControlScene.value = false; showControlScene.value = false;
selectedButton4.value = null; selectedButton4.value = null;

87
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
View File

@ -40,8 +40,8 @@
</button> </button>
</td> </td>
<td> <td>
<button class="tabReboot" @click="handleRefClick1">重启</button> <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
<button class="tabDelete">删除</button> <div class="tabDelete" @click="deletePlan(row.id)">删除</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -54,7 +54,7 @@
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<a-transfer <a-transfer
v-model:target-keys="targetKeys" v-model:target-keys="targetKeys"
:data-source="mockData" :data-source="transferData"
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
:render="(item) => item.title" :render="(item) => item.title"
@ -66,7 +66,7 @@
<div style="width: 100%; height: 60px;"></div> <div style="width: 100%; height: 60px;"></div>
<div class="button-box"> <div class="button-box">
<button class="cancel" @click="addVisible = false">取消</button> <button class="cancel" @click="addVisible = false">取消</button>
<button class="execute">确定</button> <button class="execute" @click="sendPlan">确定</button>
</div> </div>
</div> </div>
</template> </template>
@ -76,11 +76,14 @@ import { ref, onMounted } from 'vue';
// 请求 // 请求
import { http } from '/nerv-lib/util/http'; import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo'; import { lightingManage } from '/@/api/IlluminationInfo';
import { message } from 'ant-design-vue';
// 初始化 =========================================================== // 初始化 ===========================================================
onMounted(() => { onMounted(() => {
// 计划表格
getTable() getTable()
// 穿梭框原始数据
getLeftPlan() getLeftPlan()
}) })
@ -94,6 +97,20 @@ const getTable = () => {
dataSource.value = res.data dataSource.value = res.data
}) })
} }
// 删除表格中的计划
const deletePlan = (id: String) => {
http.delete(lightingManage.deletePlan, [id]).then(res => {
message.success('操作成功')
getTable()
})
}
// 重启表格中的计划
const restartPlan = (id: String) => {
http.post(lightingManage.restartPlan, { planId: id }).then(res => {
message.success('操作成功')
getTable()
})
}
// tab页弹窗部分 ==================================================== // tab页弹窗部分 ====================================================
@ -107,49 +124,43 @@ const addModal = () => {
// 穿梭框部分 ======================================================= // 穿梭框部分 =======================================================
// 穿梭框数据 // 穿梭框数据
const transferData = ref([]) const transferData = ref([]) as any;
// 获得穿梭框原始数据 // 获得穿梭框原始数据
const getLeftPlan = () => { const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then(res => { http.get(lightingManage.getLeftPlan, {}).then(res => {
console.log(res) let arr = []
res.data.forEach(item => {
arr.push({
key: item.id,
title: item.planName
})
})
transferData.value = arr
}) })
} }
// 操作日志
const handleRefClick1 = () => {
alert(111)
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys); console.log(keys, direction, moveKeys);
}; };
const handleSearch = (dir: string, value: string) => { const handleSearch = (dir: string, value: string) => {
console.log('search:', dir, value); console.log('search:', dir, value);
}; };
// 穿梭框选中数据
// 穿梭框 相关业务
interface MockData {
key: string;
title: string;
description: string;
chosen: boolean;
}
const mockData = ref([
{
key: '1',
title: '计划再开',
},
{
key: '2',
title: '检修模式',
},
{
key: '3',
title: '设备变更',
},
]);
const targetKeys = ref<string[]>([]); const targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => { // 将穿梭框选中的计划提交
const sendPlan = () => {
if (targetKeys.value.length < 1) {
return message.info('没有选择任何计划');
}
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
message.success('添加成功')
// 如果发送成功，则刷新表格
getTable()
getLeftPlan()
})
}
const filterOption = (inputValue: string, option: any) => {
return option.description.indexOf(inputValue) > -1; return option.description.indexOf(inputValue) > -1;
}; };
@ -178,6 +189,7 @@ const filterOption = (inputValue: string, option: MockData) => {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
cursor: pointer;
} }
} }
// 表格 // 表格
@ -204,6 +216,7 @@ const filterOption = (inputValue: string, option: MockData) => {
.tabReboot, .tabReboot,
.tabDelete { .tabDelete {
border: none; border: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -215,6 +228,12 @@ const filterOption = (inputValue: string, option: MockData) => {
.tabReboot { .tabReboot {
margin-right: 8px; margin-right: 8px;
} }
.tabReboot::active {
color: white !important;
}
.tabDelete::active {
color: white;
}
} }
::v-deep(.ant-transfer) { ::v-deep(.ant-transfer) {
// 屏蔽自带的hover效果 // 屏蔽自带的hover效果

Write Preview
Loading…
Cancel
Save