duyufeng
4 months ago
93 changed files with 4707 additions and 2875 deletions
@ -1,31 +1,24 @@ |
|||||
|
const prefix = '/carbon-smart'; |
||||
// 照明系统及相关接口
|
// 照明系统及相关接口
|
||||
export enum lightingManage { |
export enum lightingManage { |
||||
// 主页 ========================================================
|
// 主页 ========================================================
|
||||
|
|
||||
// 获得分区与线路
|
// 获得分区与线路
|
||||
getTree = '/carbon-smart/api/illuminationCtrl/getCtrlPanelTree', |
getTree = prefix + '/illuminationCtrl/getCtrlPanelTree', |
||||
// 修改线路的可用/禁用状态
|
// 修改线路的可用/禁用状态
|
||||
setDisable = '/carbon-smart/api/illuminationCtrl/changePanelStatus', |
setDisable = '/carbon-smart/api/illuminationCtrl/changePanelStatus', |
||||
// 获得设备 - 小灯泡
|
// 获得设备 - 小灯泡
|
||||
getBulbs = '/carbon-smart/api/illuminationCtrl/getLightState', |
getBulbs = prefix + '/illuminationCtrl/getDeviceState', |
||||
|
|
||||
// 控制面板tab页 ================================================
|
// 主页 > 抽屉 > 控制面板 =======================================
|
||||
|
|
||||
// 获取当前修改的内容对比数据
|
// 获取当前修改的内容对比数据
|
||||
getChangeList = '/carbon-smart/api/illuminationCtrl/getLightSceneChangeInfo', |
getChangeList = prefix + '/illuminationCtrl/getSceneChangeInfo', |
||||
// 提交当前修改
|
// 提交当前修改
|
||||
submitChangeList = '/carbon-smart/api/illuminationCtrl/changeLightScene', |
submitChangeList = prefix + '/illuminationCtrl/changeToSceneMode', |
||||
|
|
||||
// 计划列表tab页 ================================================
|
// 主页 > 抽屉 > 计划列表 =======================================
|
||||
|
|
||||
// 获得计划列表tab页的表格数据
|
// 右侧表格修改数据提交
|
||||
getPlanTable = '/carbon-smart/api/illuminationInfo/selectPanelPlan', |
submitTableData = prefix + '/illuminationCtrl/refreshPlanStatus', |
||||
// 获得计划列表tab页的穿梭框左侧数据
|
|
||||
getLeftPlan = '/carbon-smart/api/illuminationInfo/getPlan', |
|
||||
// 提交穿梭框被选择的数据
|
|
||||
submitLeftPlan = '/carbon-smart/api/illuminationInfo/joinPlan', |
|
||||
// 删除表格中的计划
|
|
||||
deletePlan = '/carbon-smart/api/illuminationInfo/deletePlan', |
|
||||
// 重启表格计划
|
|
||||
restartPlan = '/carbon-smart/api/illuminationInfo/enable', |
|
||||
} |
} |
||||
|
|||||
@ -0,0 +1,8 @@ |
|||||
|
export enum alarmOverviewApi { |
||||
|
getAlarmEquipment = '/carbon-smart/api/AlarmOverview/alarmEquipment', //设备告警 数量
|
||||
|
getAlarmEnergyConsumption = '/carbon-smart/api/AlarmOverview/alarmEnergyConsumption', //能碳告警 数量
|
||||
|
getAlarmGateway = '/carbon-smart/api/AlarmOverview/alarmGateway', //网关告警 数量
|
||||
|
getPriority = '/carbon-smart/api/AlarmOverview/priority', //优先级 数量
|
||||
|
getProcessProgress = '/carbon-smart/api/AlarmOverview/processProgress', //进度 数量
|
||||
|
getAlarmTrend = '/carbon-smart/api/AlarmOverview/alarmTrend', //30天告警 数量
|
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
const prefix = '/carbon-smart'; |
||||
|
// 照明系统及相关接口
|
||||
|
export enum planManage { |
||||
|
/** |
||||
|
* @param deviceType 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵) |
||||
|
*/ |
||||
|
// 获得未激活的计划
|
||||
|
getTransData = prefix + '/deviceCtrlPlan/getDeActivatedPlanList', |
||||
|
// 获得激活的计划
|
||||
|
getTableData = prefix + '/deviceCtrlPlan/getActivatedPlanList', |
||||
|
// 提交计划状态修改
|
||||
|
submitTransData = prefix + '/deviceCtrlPlan/activePlanByIdList', |
||||
|
} |
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 268 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 265 B |
|
Before Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
@ -0,0 +1,279 @@ |
|||||
|
<template> |
||||
|
<div style="width: 100%; height: 100%; overflow: hidden"> |
||||
|
<div style="width: 100%; height: 50px; display: flex"> |
||||
|
<img |
||||
|
v-if="selctLeft.type == 1" |
||||
|
style="width: 42px; height: 42px; margin-left: -6px" |
||||
|
src="../image/liftState/straightLadder.png" |
||||
|
alt="" /> |
||||
|
<img |
||||
|
v-else-if="selctLeft.type == 2" |
||||
|
style="width: 42px; height: 42px; margin-left: -6px" |
||||
|
src="../image/liftState/escalator.png" |
||||
|
alt="" /> |
||||
|
<div style="margin-left: 6px; font-size: 20px; line-height: 28px"> |
||||
|
{{ selctLeft.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 左侧抽屉的关闭按钮 --> |
||||
|
<div class="drawer-box-out" @click="clickDrawer()"> |
||||
|
<DoubleRightOutlined class="drawer-icon" style="color: white" /> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: calc(100% - 50px); display: flex; position: relative"> |
||||
|
<a-table |
||||
|
style="width: 100%" |
||||
|
:columns="column" |
||||
|
:data-source="dataSource" |
||||
|
:pagination="pagination"> |
||||
|
<template #bodyCell="{ record, column }"> |
||||
|
<template v-if="column.dataIndex === 'switch'"> |
||||
|
<a-tag |
||||
|
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
||||
|
:style="{ |
||||
|
border: { |
||||
|
'0': '1px solid rgba(0, 255, 210, 1)', //2 |
||||
|
'1': '1px solid rgba(191, 205, 226, 1)', //关闭 |
||||
|
}[record.switch], |
||||
|
color: { |
||||
|
'0': 'rgba(0, 255, 210, 1)', //正常 |
||||
|
'1': 'rgba(191, 205, 226, 1)', //关闭 |
||||
|
}[record.switch], |
||||
|
}" |
||||
|
>{{ { '0': '开启', '1': '关闭' }[record.switch] }}</a-tag |
||||
|
> |
||||
|
</template> |
||||
|
<template v-if="column.dataIndex === 'state'"> |
||||
|
<a-tag |
||||
|
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
||||
|
:style="{ |
||||
|
border: { |
||||
|
'0': '1px solid rgba(0, 255, 210, 1)', //正常 |
||||
|
'1': '1px solid rgba(255, 188, 70, 1)', //维修 |
||||
|
'2': '1px solid rgba(255, 118, 54, 1)', //故障 |
||||
|
'3': '1px solid rgba(243, 97, 99, 1)', //告警 |
||||
|
}[record.state], |
||||
|
color: { |
||||
|
'0': 'rgba(0, 255, 210, 1)', //正常 |
||||
|
'1': 'rgba(255, 188, 70, 1)', //维修 |
||||
|
'2': 'rgba(255, 118, 54, 1)', //故障 |
||||
|
'3': 'rgba(243, 97, 99, 1)', //告警 |
||||
|
}[record.state], |
||||
|
}" |
||||
|
>{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[record.state] }}</a-tag |
||||
|
> |
||||
|
</template> |
||||
|
<template v-if="column.dataIndex === 'lift'"> |
||||
|
<a-tag |
||||
|
style="background-color: rgba(0, 0, 0, 0.5); width: 50px" |
||||
|
:style="{ |
||||
|
border: { |
||||
|
'0': '1px solid rgba(0, 255, 210, 1)', //上行 |
||||
|
'1': '1px solid rgba(0, 255, 210, 1)', //下行 |
||||
|
'2': '1px solid rgba(255, 188, 70, 1)', //暂停 |
||||
|
'3': '1px solid rgba(243, 97, 99, 1)', //急停 |
||||
|
'4': '1px solid rgba(167, 66, 255, 1)', //未知 |
||||
|
}[record.lift], |
||||
|
color: { |
||||
|
'0': 'rgba(0, 255, 210, 1)', //上行 |
||||
|
'1': 'rgba(0, 255, 210, 1)', //下行 |
||||
|
'2': 'rgba(255, 188, 70, 1)', //暂停 |
||||
|
'3': 'rgba(243, 97, 99, 1)', //急停 |
||||
|
'4': 'rgba(167, 66, 255, 1)', //未知 |
||||
|
}[record.lift], |
||||
|
}" |
||||
|
>{{ |
||||
|
{ |
||||
|
'0': '上行', //上行 |
||||
|
'1': '下行', //下行 |
||||
|
'2': '暂停', //暂停 |
||||
|
'3': '急停', //急停 |
||||
|
'4': '未知', //未知 |
||||
|
}[record.lift] |
||||
|
}}</a-tag |
||||
|
> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { DoubleRightOutlined } from '@ant-design/icons-vue'; |
||||
|
|
||||
|
import { ref } from 'vue'; |
||||
|
const emit = defineEmits(['clickDrawer']); |
||||
|
|
||||
|
const selctLeft = ref({}); |
||||
|
// 改变页码 |
||||
|
const handleChangePage = (current: number, pageSize: number) => { |
||||
|
pagination.value.current = current; |
||||
|
pagination.value.pageSize = pageSize; |
||||
|
}; |
||||
|
|
||||
|
const dataSource = ref([ |
||||
|
{ time: '2022-03-01 10:00:00', state: '0', switch: '0', lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 0 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 0 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 }, |
||||
|
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 }, |
||||
|
]); |
||||
|
const pagination = ref({ |
||||
|
total: dataSource.value.length, |
||||
|
size: 'small', |
||||
|
current: 1, |
||||
|
pageSize: 10, |
||||
|
showQuickJumper: false, |
||||
|
showLessItems: false, |
||||
|
showSizeChanger: false, |
||||
|
responsive: true, |
||||
|
showTotal: (total: number, range: any) => (total && range ? `` : ''), //显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录 |
||||
|
onChange: handleChangePage, |
||||
|
}); |
||||
|
const column = [ |
||||
|
{ |
||||
|
title: '执行时间', |
||||
|
dataIndex: 'time', |
||||
|
key: 'time', |
||||
|
width: 140, |
||||
|
}, |
||||
|
{ |
||||
|
title: '开关', |
||||
|
dataIndex: 'switch', |
||||
|
key: 'switch', |
||||
|
width: 80, |
||||
|
}, |
||||
|
{ |
||||
|
title: '状态', |
||||
|
dataIndex: 'state', |
||||
|
key: 'state', |
||||
|
width: 80, |
||||
|
}, |
||||
|
{ |
||||
|
title: '模式', |
||||
|
dataIndex: 'lift', |
||||
|
key: 'lift', |
||||
|
width: 80, |
||||
|
}, |
||||
|
]; |
||||
|
const toggle = (data: any) => { |
||||
|
pagination.value.current = 1; |
||||
|
selctLeft.value = data; |
||||
|
}; |
||||
|
const clickDrawer = () => { |
||||
|
emit('clickDrawer'); |
||||
|
}; |
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
:deep(.ant-table-thead > tr) { |
||||
|
height: 30px !important; |
||||
|
} |
||||
|
:deep(.ant-table-tbody > tr) { |
||||
|
height: 30px !important; |
||||
|
} |
||||
|
:deep(.ant-table-thead > tr > th) { |
||||
|
background-color: #1a2230; |
||||
|
border: 1px solid rgba(163, 192, 243, 0.8); |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
font-weight: normal !important; |
||||
|
padding: 12px !important; |
||||
|
} |
||||
|
:deep(.ant-table-tbody > tr > td) { |
||||
|
background-color: rgba(0, 0, 0, 0.9) !important; |
||||
|
color: white; |
||||
|
border: 1px solid rgba(163, 192, 243, 0.8); |
||||
|
text-align: center; |
||||
|
padding: 12px !important; |
||||
|
} |
||||
|
:deep(.ant-table-row:hover td) { |
||||
|
background: rgba(0, 0, 0, 0.9) !important; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
:deep(.ant-tabs-tab-btn) { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
//分页 |
||||
|
:deep(.ant-pagination-item) { |
||||
|
background-color: rgba(0, 0, 0, 1) !important; |
||||
|
border: 1px solid rgba(147, 200, 243, 1) !important; |
||||
|
border-radius: 2px !important; |
||||
|
margin: 0 8px !important; |
||||
|
} |
||||
|
:deep(.ant-pagination-item a) { |
||||
|
color: rgba(12, 140, 246, 1) !important; |
||||
|
} |
||||
|
:deep(.ant-pagination-item-active) { |
||||
|
border-radius: 2px !important; |
||||
|
background: rgba(12, 140, 246, 1) !important; |
||||
|
} |
||||
|
:deep(.ant-pagination-item-active a) { |
||||
|
color: white !important; |
||||
|
} |
||||
|
:deep(.ant-pagination-prev) { |
||||
|
background-color: rgba(0, 0, 0, 1) !important; |
||||
|
border: 1px solid rgba(147, 200, 243, 1) !important; |
||||
|
} |
||||
|
:deep(.ant-pagination-next) { |
||||
|
background-color: rgba(0, 0, 0, 1) !important; |
||||
|
border: 1px solid rgba(147, 200, 243, 1) !important; |
||||
|
} |
||||
|
:deep(.anticon) { |
||||
|
color: rgba(12, 140, 246, 1) !important; |
||||
|
} |
||||
|
:deep(.ant-table-pagination) { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
:deep(.ant-spin-container) { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
:deep(.ant-spin-nested-loading) { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
//分页 在右边 取消 |
||||
|
// :deep(.ant-table-pagination-right) { |
||||
|
// justify-content: normal !important; |
||||
|
// } |
||||
|
// 抽屉关闭按钮 |
||||
|
.drawer-box-out { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
border-radius: 2px; |
||||
|
position: absolute; |
||||
|
right: 576px; |
||||
|
z-index: 2; |
||||
|
top: 50%; |
||||
|
margin: auto; |
||||
|
background: #268aff; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
border-radius: 0 8px 8px 0; |
||||
|
color: white; |
||||
|
} |
||||
|
:deep(.anticon) { |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,131 @@ |
|||||
|
<template> |
||||
|
<div class="box-model"> |
||||
|
<div class="box-model-title title"> |
||||
|
{{ dataSource.title }} |
||||
|
</div> |
||||
|
<div class="box-model-bottom"> |
||||
|
<div class="box-model-item"> |
||||
|
<div style="width: 100%; height: 50%"> |
||||
|
<img width="40" src="../../image/ventilationSystem/state-success.png" /> |
||||
|
</div> |
||||
|
<!--正常 故障 维修 告警 --> |
||||
|
<span |
||||
|
:style="{ |
||||
|
color: { |
||||
|
'1': '#0dffff', |
||||
|
'2': 'rgba(255, 118, 54, 1)', |
||||
|
'3': 'rgba(255, 188, 70, 1)', |
||||
|
'4': 'rgba(243, 97, 99, 1)', |
||||
|
}[1], |
||||
|
}"> |
||||
|
正常 |
||||
|
</span> |
||||
|
</div> |
||||
|
<div v-if="dataSource.type === 'fan'" class="box-model-item"> |
||||
|
<div style="width: 100%; height: 50%"> |
||||
|
<img width="40" src="../../image/ventilationSystem/highSpeed.png" /> |
||||
|
</div> |
||||
|
<!-- 低速 中速 高速 关闭 --> |
||||
|
<span |
||||
|
:style="{ |
||||
|
color: [ |
||||
|
'rgba(85, 209, 255, 1)', |
||||
|
'rgba(0, 144, 255, 1)', |
||||
|
'rgba(87, 87, 255, 1)', |
||||
|
'rgba(191, 205, 226, 1)', |
||||
|
][2], |
||||
|
fontSize: '12px', |
||||
|
}"> |
||||
|
高速启动</span |
||||
|
> |
||||
|
</div> |
||||
|
<div v-if="dataSource.type !== 'fan'" class="box-model-item"> |
||||
|
<div style="width: 100%; height: 50%"> |
||||
|
<img width="40" src="../../image/ventilationSystem/state-open.png" /> |
||||
|
</div> |
||||
|
<!-- 开启 关闭 --> |
||||
|
<span |
||||
|
:style="{ |
||||
|
color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0], |
||||
|
fontSize: '12px', |
||||
|
}"> |
||||
|
开启</span |
||||
|
> |
||||
|
</div> |
||||
|
<div v-if="dataSource.type === 'airCurtain'" class="box-model-item"> |
||||
|
<div style="width: 100%; height: 50%"> |
||||
|
<img width="40" src="../../image/ventilationSystem/hotAir.png" /> |
||||
|
</div> |
||||
|
<!-- 冷风 热风 --> |
||||
|
<span |
||||
|
:style="{ |
||||
|
color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1], |
||||
|
fontSize: '12px', |
||||
|
}"> |
||||
|
热风 |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
const props = defineProps({ |
||||
|
dataSource: { |
||||
|
type: Object, |
||||
|
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性 |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.box-model { |
||||
|
min-width: 162px; |
||||
|
height: 110px; |
||||
|
background: inherit; |
||||
|
background-color: rgba(2, 29, 71, 0.9); |
||||
|
box-sizing: border-box; |
||||
|
border-width: 1px; |
||||
|
border-style: solid; |
||||
|
border-color: rgba(13, 255, 255, 1); |
||||
|
border-radius: 8px; |
||||
|
.title { |
||||
|
position: relative; |
||||
|
padding-left: 9px; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 10px; |
||||
|
top: 90%; |
||||
|
transform: translateY(-50%); |
||||
|
height: 10px; |
||||
|
width: 2.5px; |
||||
|
border-radius: 1px; |
||||
|
background-color: #0dffff; |
||||
|
} |
||||
|
} |
||||
|
.box-model-title { |
||||
|
width: 100%; |
||||
|
height: 20px; |
||||
|
font-size: 12px; |
||||
|
color: #0dffff; |
||||
|
padding: 12px 20px; |
||||
|
} |
||||
|
.box-model-bottom { |
||||
|
width: auto; |
||||
|
height: 70px; |
||||
|
margin-top: 12px; |
||||
|
display: flex; |
||||
|
color: white; |
||||
|
font-size: 12px; |
||||
|
display: flex; |
||||
|
} |
||||
|
.box-model-item { |
||||
|
width: 80px; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; /* 垂直居中 */ |
||||
|
justify-content: center; /* 水平居中 */ |
||||
|
text-align: center; /* 文字水平居中 */ |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,168 @@ |
|||||
|
.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%; |
||||
|
height: 150px; |
||||
|
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 { |
||||
|
padding-top: 6px; |
||||
|
} |
||||
|
} |
||||
|
.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 { |
||||
|
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; |
||||
|
}.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,201 @@ |
|||||
|
<template> |
||||
|
<a-spin :spinning="isLoading"> |
||||
|
<!-- 排风扇 --> |
||||
|
<div> |
||||
|
<div class="circuit-area"> |
||||
|
<div class="circuit-tab"></div> |
||||
|
<span class="circuit-text">排风扇</span> |
||||
|
<div class="btn2"> |
||||
|
<button |
||||
|
class="openPlan" |
||||
|
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" |
||||
|
@click="togglePlan2"> |
||||
|
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }} |
||||
|
</button> |
||||
|
<a-switch |
||||
|
v-model:checked="selectAllCheckbox" |
||||
|
:disabled="singleSelection" |
||||
|
:class="{ |
||||
|
'blue-background': selectAllCheckbox, |
||||
|
'grey-background': !selectAllCheckbox, |
||||
|
}" |
||||
|
@change="toggleAllSelection" /> |
||||
|
<button class="allBtn">全选</button> |
||||
|
<button class="both" @click="selectAll"> |
||||
|
{{ singleSelection ? '多选' : '单选' }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btnArea"> |
||||
|
<template v-if="!showAllButtons"> |
||||
|
<button |
||||
|
v-for="(button, index) in limitedButtons2" |
||||
|
:key="index" |
||||
|
:class="{ btn: true, selected: button.selected }" |
||||
|
class="zmhlbtn" |
||||
|
@click="changeLine(button)"> |
||||
|
<stop-outlined v-if="button.ctrlStatus" /> |
||||
|
{{ button.name }} |
||||
|
</button> |
||||
|
<div style="margin-top: 10px" v-if="limitedButtons2.length > 0"> |
||||
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<button |
||||
|
v-for="(button, index) in buttons2" |
||||
|
:key="index" |
||||
|
:class="{ btn: true, selected: button.selected }" |
||||
|
class="zmhlbtn" |
||||
|
@click="changeLine(button)"> |
||||
|
<stop-outlined v-if="button.ctrlStatus" /> |
||||
|
{{ button.name }} |
||||
|
</button> |
||||
|
<div style="margin-top: 10px" v-if="buttons2.length > 0"> |
||||
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 控制模式部分 --> |
||||
|
<div> |
||||
|
<div class="control-area"> |
||||
|
<div class="control-tab"></div> |
||||
|
<span class="control-text"> 控制模式 </span> |
||||
|
</div> |
||||
|
<!-- 控制模式按钮部分 --> |
||||
|
<div class="control-mode-btn-area" v-show="thisButton2.code"> |
||||
|
<button |
||||
|
v-for="(button3, index) in controlMode" |
||||
|
:key="index" |
||||
|
class="btn" |
||||
|
:disabled="button3.value != 3" |
||||
|
:class="{ selected: thisButton2.mode.value == button3.value }" |
||||
|
@click="selectButton3(button3)"> |
||||
|
{{ button3.label }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 控制场景 --> |
||||
|
<div> |
||||
|
<div class="control-area"> |
||||
|
<div class="control-tab"></div> |
||||
|
<span class="control-text"> 控制场景 </span> |
||||
|
</div> |
||||
|
<!-- 控制模式按钮部分 --> |
||||
|
<div class="control-mode-btn-area" v-show="thisButton2.code"> |
||||
|
<button |
||||
|
v-for="(button3, index) in controlMode" |
||||
|
:key="index" |
||||
|
class="btn" |
||||
|
:disabled="button3.value != 3" |
||||
|
:class="{ selected: thisButton2.mode.value == button3.value }" |
||||
|
@click="selectButton3(button3)"> |
||||
|
{{ button3.label }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="div-add"> |
||||
|
<button class="cancel" @click="addModal">刷新</button> |
||||
|
<button class="add" @click="addModal">执行</button> |
||||
|
</div> |
||||
|
</a-spin> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue'; |
||||
|
import { ref, computed, onMounted } from 'vue'; |
||||
|
|
||||
|
const isLoading = ref(false); |
||||
|
// 开关启用/禁用状态 |
||||
|
const isPlanEnabled2 = ref(true); |
||||
|
// 按钮区展开与收起状态 |
||||
|
const showAllButtons = ref(false); |
||||
|
// 全选状态 |
||||
|
const selectAllCheckbox = ref(false); |
||||
|
// 控制模式枚举 |
||||
|
const controlMode = ref([]); |
||||
|
// 是否单选，状态 |
||||
|
let singleSelection = ref(true); |
||||
|
// 照明回路所有按钮 |
||||
|
const buttons2 = ref([]); |
||||
|
// 默认最多展示8个按钮 |
||||
|
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); |
||||
|
// 开关启用/禁用切换事件 |
||||
|
const togglePlan2 = () => {}; |
||||
|
// 内侧弹窗显隐 |
||||
|
const executeVisible = ref<boolean>(false); |
||||
|
|
||||
|
const submitChangeList = () => {}; |
||||
|
// 多选与单选切换事件 |
||||
|
const selectAll = () => { |
||||
|
selectAllCheckbox.value = false; |
||||
|
singleSelection.value = !singleSelection.value; |
||||
|
}; |
||||
|
// 储存当前选中的回路 |
||||
|
const thisButton2 = ref({ |
||||
|
code: '', |
||||
|
name: '', |
||||
|
pcode: '', |
||||
|
mode: { |
||||
|
value: -1, |
||||
|
}, |
||||
|
scene: { |
||||
|
value: -1, |
||||
|
}, |
||||
|
}); |
||||
|
// 控制模式 - 按钮切换 |
||||
|
const selectButton3 = (button3: any) => { |
||||
|
let checked = thisButton2.value.mode; |
||||
|
console.log(button3.value, '---', checked.value); |
||||
|
// 如果点击了相同的按钮，则未作出修改 |
||||
|
if (checked.value === button3.value) { |
||||
|
return; |
||||
|
} |
||||
|
checked.value = button3.value; |
||||
|
}; |
||||
|
|
||||
|
// 全选切换事件（switch） |
||||
|
const toggleAllSelection = () => {}; |
||||
|
onMounted(() => {}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import './dialogStyle.less'; |
||||
|
@import './tabs1.less'; |
||||
|
.div-add { |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
border-top: 1px solid #606879; |
||||
|
width: 496px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: #2778ff; |
||||
|
border: #2778ff; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
cursor: pointer; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.cancel { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: #ffffff; |
||||
|
border: #ffffff; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
cursor: pointer; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,248 @@ |
|||||
|
<template> |
||||
|
<div class="div-add"> |
||||
|
<button class="add" @click="addModal">添加</button> |
||||
|
</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 v-if="row.planStatus == '2'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(57, 215, 187, 0.1); |
||||
|
color: rgb(57, 215, 187); |
||||
|
border: 1px solid rgb(57, 215, 187); |
||||
|
"> |
||||
|
已执行 |
||||
|
</button> |
||||
|
</td> |
||||
|
<td v-if="row.planStatus == '1'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(243, 97, 99, 0.1); |
||||
|
border: 1px solid rgba(243, 97, 99); |
||||
|
color: rgba(243, 97, 99); |
||||
|
"> |
||||
|
待执行 |
||||
|
</button> |
||||
|
</td> |
||||
|
<td> |
||||
|
<div class="tabReboot" @click="restartPlan(row.id)">重启</div> |
||||
|
<a-popconfirm |
||||
|
title="此操作将永久删除该条数据" |
||||
|
ok-text="确定" |
||||
|
cancel-text="取消" |
||||
|
@confirm="deletePlan(row.id)"> |
||||
|
<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 { message } from 'ant-design-vue'; |
||||
|
|
||||
|
// 初始化 =========================================================== |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 计划表格 |
||||
|
getTable(); |
||||
|
// 穿梭框原始数据 |
||||
|
getLeftPlan(); |
||||
|
}); |
||||
|
|
||||
|
// tab页部分 ======================================================== |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource = ref([]); |
||||
|
// 获得表格数据 |
||||
|
const getTable = () => { |
||||
|
http.get(lightingManage.getPlanTable, {}).then((res) => { |
||||
|
dataSource.value = res.data; |
||||
|
}); |
||||
|
}; |
||||
|
// 删除表格中的计划 |
||||
|
const deletePlan = (id: String) => { |
||||
|
http.delete(lightingManage.deletePlan, [id]).then(() => { |
||||
|
message.success('操作成功'); |
||||
|
getTable(); |
||||
|
}); |
||||
|
}; |
||||
|
// 重启表格中的计划 |
||||
|
const restartPlan = (id: String) => { |
||||
|
http.post(lightingManage.restartPlan, { planId: id }).then(() => { |
||||
|
message.success('操作成功'); |
||||
|
getTable(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// tab页弹窗部分 ==================================================== |
||||
|
|
||||
|
// 添加弹窗控制变量 |
||||
|
const addVisible = ref(false); |
||||
|
// 打开弹窗 |
||||
|
const addModal = () => { |
||||
|
addVisible.value = true; |
||||
|
}; |
||||
|
|
||||
|
// 穿梭框部分 ======================================================= |
||||
|
|
||||
|
// 穿梭框数据 |
||||
|
const transferData = ref([]) as any; |
||||
|
// 获得穿梭框原始数据 |
||||
|
const getLeftPlan = () => { |
||||
|
http.get(lightingManage.getLeftPlan, {}).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(lightingManage.submitLeftPlan, 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'; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.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; |
||||
|
height: 60px; |
||||
|
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; |
||||
|
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> |
||||
@ -0,0 +1,423 @@ |
|||||
|
// 抽屉 |
||||
|
.drawer-fan { |
||||
|
.light-area, |
||||
|
.circuit-area, |
||||
|
.control-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.light-area-tab, |
||||
|
.circuit-tab, |
||||
|
.control-tab, |
||||
|
.control-scene-tab, |
||||
|
.light-parameters-tab { |
||||
|
width: 5px; |
||||
|
height: 23px; |
||||
|
opacity: 1; |
||||
|
background: rgba(26, 174, 251, 1); |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.light-area-text, |
||||
|
.circuit-text, |
||||
|
.control-text, |
||||
|
.control-scene-text, |
||||
|
.light-parameters-text { |
||||
|
font-size: 14px; |
||||
|
color: white; |
||||
|
padding-left: 5px; |
||||
|
line-height: 23px; |
||||
|
width: 110px; |
||||
|
height: 23px; |
||||
|
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%); |
||||
|
user-select: none; |
||||
|
} |
||||
|
|
||||
|
.light-area-tab, |
||||
|
.light-area-text { |
||||
|
display: inline-block; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.plan { |
||||
|
border: none; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border-radius: 5px; |
||||
|
vertical-align: top; |
||||
|
margin-left: 235px; |
||||
|
width: 88px; |
||||
|
height: 32px; |
||||
|
color: white; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.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; |
||||
|
} |
||||
|
.openPlan { |
||||
|
cursor: pointer; |
||||
|
border: none; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border-radius: 5px; |
||||
|
color: white; |
||||
|
vertical-align: top; |
||||
|
width: 88px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
.openPlan.enabled2 { |
||||
|
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%); |
||||
|
} |
||||
|
|
||||
|
.openPlan.disabled2 { |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
.openPlan:disabled { |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.btn2 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: 80px; |
||||
|
} |
||||
|
|
||||
|
.openzm { |
||||
|
cursor: pointer; |
||||
|
color: rgba(34, 183, 255, 1); |
||||
|
margin-left: 20px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.custom-checkbox { |
||||
|
width: 13px; |
||||
|
height: 13px; |
||||
|
} |
||||
|
|
||||
|
.both { |
||||
|
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%); |
||||
|
margin-left: 8px; |
||||
|
font-size: 12px; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.btn2 { |
||||
|
button { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.allBtn { |
||||
|
border: 0; |
||||
|
width: 40px; |
||||
|
color: white; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.blue-background.ant-switch-checked { |
||||
|
background-color: linear-gradient(180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100%) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
|
||||
|
.blue-background.ant-switch-checked .ant-switch-handle { |
||||
|
background-color: linear-gradient(180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100%) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch .ant-switch-handle { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.area, |
||||
|
.btnArea, |
||||
|
.control-mode-btn-area, |
||||
|
.control-scene-btn-area { |
||||
|
margin-left: -17px; |
||||
|
|
||||
|
button { |
||||
|
width: 21%; |
||||
|
padding: 0 2%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 92px; |
||||
|
height: 40px; |
||||
|
border-radius: 4px; |
||||
|
opacity: 1; |
||||
|
margin-top: 10px; |
||||
|
margin-left: 17px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(207, 212, 219, 1); |
||||
|
line-height: 20.27px; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
vertical-align: top; |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.selected { |
||||
|
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%); |
||||
|
color: rgba(0, 61, 90, 1); |
||||
|
border: 1px solid white; |
||||
|
} |
||||
|
|
||||
|
.btn:hover { |
||||
|
background-color: rgba(207, 212, 219, 1); |
||||
|
} |
||||
|
|
||||
|
.btn:active { |
||||
|
background-color: rgba(102, 102, 102, 1); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.circuit-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
left: 51px; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.circuit-tab, |
||||
|
.circuit-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.batch { |
||||
|
width: 60px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(67, 136, 251, 1); |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
border-radius: 5px; |
||||
|
background-color: white; |
||||
|
margin-left: 11px; |
||||
|
} |
||||
|
|
||||
|
.control-area { |
||||
|
left: 51px; |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.control-tab, |
||||
|
.control-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
:deep(.cell) { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
:deep(#pane-first) { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.control-scene-tab, |
||||
|
.control-scene-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.light-parameters-tab, |
||||
|
.light-parameters-text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.light-parameters-textarea>p { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
border: 1px solid rgba(236, 239, 245, 1); |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
width: 100%; |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.execute { |
||||
|
margin-right: 20px; |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: white; |
||||
|
border: 0; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.flushed { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
cursor: pointer; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(102, 102, 102, 1); |
||||
|
background: white; |
||||
|
border: 1px solid rgba(193, 197, 204, 1); |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-pagination) { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.drawer-content { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.arrow-indicator { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 0; |
||||
|
transform: translateY(-50%); |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.drawer-title1 { |
||||
|
position: fixed; |
||||
|
width: 33px; |
||||
|
height: 33px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 20px; |
||||
|
margin: auto; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.drawer-title2 { |
||||
|
position: fixed; |
||||
|
width: 33px; |
||||
|
height: 33px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 495px; |
||||
|
margin: auto; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.arrowbtn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 28px; |
||||
|
height: 28px; |
||||
|
background: rgba(0, 0, 0, 1); |
||||
|
opacity: 0.5; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-tabs-tab-btn) { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-bordered) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-thead) { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-table-cell) { |
||||
|
background-color: transparent; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
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%; |
||||
|
cellspacing: 0; |
||||
|
cellpadding: 0; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.light-area, |
||||
|
.circuit-area, |
||||
|
.control-area, |
||||
|
.control-scene-area, |
||||
|
.light-parameters-area { |
||||
|
width: 100%; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.zmhlbtn { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
// 禁用图标 |
||||
|
.anticon-stop { |
||||
|
position: absolute; |
||||
|
right: 3px; |
||||
|
bottom: 3px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<a-modal |
||||
|
v-model:visible="visible" |
||||
|
width="60%" |
||||
|
class="custom-class" |
||||
|
title="添加设备" |
||||
|
destroyOnClose |
||||
|
@ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<template #header> |
||||
|
<div class="custom-header"> |
||||
|
<!-- 这里可以放置任何你想要的内容或组件 --> |
||||
|
<h2>自定义标题</h2> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- <template #header> |
||||
|
<div class="modal-header"> |
||||
|
<span>Modal Title</span> |
||||
|
<a-select placeholder="Select an option" style="width: 150px"> |
||||
|
<a-select-option value="option1">Option 1</a-select-option> |
||||
|
<a-select-option value="option2">Option 2</a-select-option> |
||||
|
<a-select-option value="option3">Option 3</a-select-option> |
||||
|
</a-select> |
||||
|
</div> |
||||
|
</template> --> |
||||
|
<div class="custom-select-wrapper"> |
||||
|
<a-select |
||||
|
placeholder="请选择" |
||||
|
style="width: 200px" |
||||
|
:options="linkList" |
||||
|
:field-names="{ label: 'orgName', value: 'orgId' }" |
||||
|
@change="handleChange" /> |
||||
|
</div> |
||||
|
<div class="drawerContainer"> |
||||
|
<ns-view-list-table v-bind="config" ref="carbonEquipment" style="height: 500px" :key="key" /> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { editCarbonEquipmentConfig } from './config'; |
||||
|
import { computed, nextTick, ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/saas'; |
||||
|
import { http } from '/nerv-lib/util'; |
||||
|
import { group, device } from '/@/api/deviceManage'; |
||||
|
const orgId = ref(''); |
||||
|
const key = ref(Date.now()); |
||||
|
|
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
orgId.value = result; |
||||
|
|
||||
|
// const selectOrgId = ref(orgId.value); |
||||
|
|
||||
|
const linkList = JSON.parse(sessionStorage.getItem('LINKLIST')!); |
||||
|
let config = editCarbonEquipmentConfig(orgId.value); |
||||
|
const visible = ref(false); |
||||
|
const carbonEquipment = ref(); |
||||
|
// defineOptions({ |
||||
|
// name: 'LedgerIndex', // 与页面路由name一致缓存才可生效 |
||||
|
// }); |
||||
|
|
||||
|
const handleChange = (value: string) => { |
||||
|
// selectOrgId.value = value; |
||||
|
config = editCarbonEquipmentConfig(value); |
||||
|
debugger; |
||||
|
key.value = Date.now(); |
||||
|
// carbonEquipment.value?.nsTableRef.reload(); |
||||
|
// carbonEquipment.value?.nsTableRef.treeReload(); |
||||
|
}; |
||||
|
|
||||
|
const props = defineProps({ params: Object }); |
||||
|
const emit = defineEmits(['sure']); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
// clearData(); |
||||
|
// visible.value && getData(currentId.value); |
||||
|
}; |
||||
|
const btnClick = () => { |
||||
|
let selectedRowKeys = carbonEquipment.value?.nsTableRef.tableState.selectedRowKeys; |
||||
|
if (!selectedRowKeys || selectedRowKeys.lenght == 0) { |
||||
|
NsMessage.warn('请选择设备'); |
||||
|
return; |
||||
|
} |
||||
|
if (!props.params?.hxDeviceGroupId) { |
||||
|
NsMessage.warn('请选择分组'); |
||||
|
return; |
||||
|
} |
||||
|
let params = []; |
||||
|
for (let i = 0; i < selectedRowKeys.length; i++) { |
||||
|
params.push({ |
||||
|
orgId: props.params?.orgId, |
||||
|
groupId: props.params?.hxDeviceGroupId, |
||||
|
deviceInfoCode: selectedRowKeys[i], |
||||
|
}); |
||||
|
} |
||||
|
http.post(group.addCarbonDevice, params).then(() => { |
||||
|
emit('sure'); |
||||
|
NsMessage.success('操作成功'); |
||||
|
toggle(); |
||||
|
}); |
||||
|
}; |
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
:deep(.ns-table-search), |
||||
|
:deep(.ns-part-tree), |
||||
|
:deep(.ns-table-main) { |
||||
|
box-shadow: @ns-content-box-shadow; |
||||
|
} |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.custom-select-wrapper { |
||||
|
position: absolute; |
||||
|
top: 10px; /* Adjust based on your modal's positioning */ |
||||
|
right: 50px; /* Adjust based on your modal's positioning */ |
||||
|
// z-index: 1050; /* Ensure it's above the modal's backdrop */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<a-modal |
||||
|
v-model:visible="visible" |
||||
|
width="60%" |
||||
|
class="custom-class" |
||||
|
title="关联因子值" |
||||
|
destroyOnClose |
||||
|
@ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<div class="drawerContainer"> |
||||
|
<ns-view-list-table v-bind="config" ref="setFactorRef" style="height: 500px" /> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { setFactorConfig } from './config'; |
||||
|
import { computed, nextTick, ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/saas'; |
||||
|
import { http } from '/nerv-lib/util'; |
||||
|
import { group, device } from '/@/api/deviceManage'; |
||||
|
const orgId = ref(''); |
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
orgId.value = result; |
||||
|
const config = setFactorConfig(orgId.value); |
||||
|
const visible = ref(false); |
||||
|
const setFactorRef = ref(); |
||||
|
const ids = ref(); |
||||
|
// defineOptions({ |
||||
|
// name: 'LedgerIndex', // 与页面路由name一致缓存才可生效 |
||||
|
// }); |
||||
|
|
||||
|
const props = defineProps({ params: Object }); |
||||
|
const emit = defineEmits(['sure']); |
||||
|
const toggle = (idlist) => { |
||||
|
ids.value = idlist; |
||||
|
visible.value = !visible.value; |
||||
|
// clearData(); |
||||
|
// visible.value && getData(currentId.value); |
||||
|
}; |
||||
|
const btnClick = () => { |
||||
|
let selectedRowKeys = setFactorRef.value?.nsTableRef.tableState.selectedRowKeys; |
||||
|
if (!selectedRowKeys) { |
||||
|
NsMessage.warn('请选择因子'); |
||||
|
return; |
||||
|
} |
||||
|
if (!ids.value) { |
||||
|
NsMessage.warn('请选择分组'); |
||||
|
return; |
||||
|
} |
||||
|
http |
||||
|
.post(group.updateCarbonFactor, { |
||||
|
deviceInfoCodeList: ids.value, |
||||
|
factorId: selectedRowKeys[0], |
||||
|
}) |
||||
|
.then(() => { |
||||
|
emit('sure'); |
||||
|
NsMessage.success('操作成功'); |
||||
|
toggle([]); |
||||
|
}); |
||||
|
}; |
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
:deep(.ns-table-search), |
||||
|
:deep(.ns-part-tree), |
||||
|
:deep(.ns-table-main) { |
||||
|
box-shadow: @ns-content-box-shadow; |
||||
|
} |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue