|
|
<template>
|
|
|
<div class="control-view">
|
|
|
<!-- 主要内容 -->
|
|
|
<div class="main-content">
|
|
|
<!-- 顶部状态栏 -->
|
|
|
<div class="header-status">
|
|
|
<div class="time-info">
|
|
|
<span>{{ currentTime }} {{ week }}</span>
|
|
|
</div>
|
|
|
<div class="page-title">
|
|
|
<h1>自动模式设置</h1>
|
|
|
</div>
|
|
|
<div class="system-status">
|
|
|
<!-- <span>系统已运行：{{ systemRuntime }}</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体区域 -->
|
|
|
<div class="control-content" element-loading-text="加载中..." v-loading="startTaskLoading || stopTaskLoading || middleTaskLoading" element-loading-background="rgba(122, 122, 122, 0.8)">
|
|
|
<div class="power-section">
|
|
|
<div class="tabBox">
|
|
|
<div class="tabItem" :class="{ selected: item === deviceMode }" v-for="item in [0, 1, 2]" @click="changeViewMode(item)">
|
|
|
模式{{ item + 1 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="power-params">
|
|
|
<div class="energy-card" v-for="(item, index) in ['开始任务', '结束任务']">
|
|
|
<div class="energy-name"><span>{{ item.substring(0, 1) }}</span><span>{{ item.substring(1, 2) }}</span><span>{{ item.substring(2, 3) }}</span><span>{{ item.substring(3) }}</span></div>
|
|
|
<div class="param-list">
|
|
|
<div class="item">
|
|
|
<div>通道</div>
|
|
|
<div>回路</div>
|
|
|
<div>亮度</div>
|
|
|
</div>
|
|
|
<div class="item" v-for="(ele, idx) in tasks[index].loops">
|
|
|
<div>{{ idx + 1 }}</div>
|
|
|
<div :class="{ red: !ele.turnOn, green: ele.turnOn }">{{ ele.turnOn ? '通' : '断' }}</div>
|
|
|
<div>{{ ele.pwm }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
<div>{{ tasks[index].timeType === 0 ? '定时时间' : '经纬度时间' }}</div>
|
|
|
<div>{{ tasks[index].execTime ? dayjs(tasks[index].execTime).format('HH:mm:ss') : '' }}</div>
|
|
|
</div>
|
|
|
<div class="iconBox">
|
|
|
<el-icon @click="openSettingDialog(item, index)">
|
|
|
<Setting />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="energy-card" v-for="(item, index) in tasks[2]">
|
|
|
<div class="energy-name"><span>中</span><span>间</span><span>任</span><span>务</span></div>
|
|
|
<div class="param-list">
|
|
|
<div class="item">
|
|
|
<div>通道</div>
|
|
|
<div>回路</div>
|
|
|
<div>亮度</div>
|
|
|
</div>
|
|
|
<div class="item" v-for="(ele, idx) in item.loops">
|
|
|
<div>{{ idx + 1 }}</div>
|
|
|
<div :class="{ red: !ele.turnOn }">{{ ele.turnOn ? '通' : '断' }}</div>
|
|
|
<div>{{ ele.pwm }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
<div>{{ item.timeType === 0 ? '定时时间' : '经纬度时间' }}</div>
|
|
|
<div>{{ item.execTime ? dayjs(item.execTime).format('HH:mm:ss') : '' }}</div>
|
|
|
</div>
|
|
|
<div class="iconBox">
|
|
|
<el-icon @click="openSettingDialog('中间任务', index)">
|
|
|
<Setting />
|
|
|
</el-icon>
|
|
|
<el-icon color="#f12323" @click="delTask(index)" style="margin-left: 10px;">
|
|
|
<Delete />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧控制面板 -->
|
|
|
<div class="control-panel">
|
|
|
<!-- 切换模式 -->
|
|
|
<div class="control-group">
|
|
|
<div class="control-title">
|
|
|
|
|
|
<el-icon>
|
|
|
<Setting />
|
|
|
</el-icon>
|
|
|
控制模式
|
|
|
</div>
|
|
|
<el-button class="mode-button active" @click="changeMode">自动模式{{ currentMode + 1 }}</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="buttonBox">
|
|
|
<el-button icon="RefreshRight" style="margin-left: 0;" class="mode-button" @click="restartSystem">远程重启</el-button>
|
|
|
<el-button icon="Refresh" style="margin-left: 0;" class="brightness-button" @click="getTask">刷新</el-button>
|
|
|
<el-button icon="Plus" style="margin-left: 0;" class="brightness-button add" @click="addTask">新增</el-button>
|
|
|
<!-- <el-button icon="Delete" style="margin-left: 0;" class="brightness-button del" @click="delMode">删除</el-button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部信息 -->
|
|
|
<div class="bottom-info">
|
|
|
<div class="bottom_item">
|
|
|
<div class="time-item">
|
|
|
<span>日出时间：{{ sunriseTime }}</span>
|
|
|
</div>
|
|
|
<div class="time-item">
|
|
|
<span>日落时间：{{ sunsetTime }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="color:#fff">
|
|
|
设备号：{{ commit_uid }}
|
|
|
</div>
|
|
|
<div class="bottom_item">
|
|
|
<!-- <el-button class="restart-button" @click="restartSystem">
|
|
|
<el-icon>
|
|
|
<RefreshRight />
|
|
|
</el-icon>
|
|
|
远程重启
|
|
|
</el-button> -->
|
|
|
<el-button class="back-button" @click="goBack">
|
|
|
<el-icon>
|
|
|
<HomeFilled />
|
|
|
</el-icon>
|
|
|
返回主界面
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 亮度调节弹窗 -->
|
|
|
<!-- <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
|
|
|
<div class="brightness-content">
|
|
|
<div class="brightness-label">亮度值：{{ currentBrightness }}%</div>
|
|
|
<div class="brightness-slider-container">
|
|
|
<el-slider v-model="currentBrightness" :min="0" :max="100" :show-stops="true" class="brightness-slider" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="brightnessDialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="confirmBrightness">确认</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog> -->
|
|
|
<el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
|
|
|
<div class="setting-content">
|
|
|
<div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
|
|
|
<span style="margin-right: 20px;">亮度调节</span> <el-input-number style="width: 200px" v-model="lightFrom.a" :min="0" :max="100">
|
|
|
<template #suffix>
|
|
|
<span>%</span>
|
|
|
</template>
|
|
|
</el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="brightnessDialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="brightnessDialogVisible = false">确认</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog v-model="modeDialogVisible" title="选择模式" width="600px" :modal="true" class="brightness-dialog">
|
|
|
<div class="setting-content">
|
|
|
<div class="modeBox">
|
|
|
<el-button v-for="(item, index) in 3" :class="index === modeActive ? 'mode-button active' : 'brightness-button'" @click="modeActive = index">模式{{ item }}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="modeDialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="confirmMode">确认</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
<el-dialog v-model="addDialogVisible" title="新增模式" width="600px" :modal="true" class="brightness-dialog">
|
|
|
<div class="setting-content">
|
|
|
<div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
|
|
|
<span style="margin-right: 20px;">模式名称</span> <el-input style="width: 200px" v-model="modeName">
|
|
|
|
|
|
</el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="addDialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="addDialogVisible = false">确认</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog v-model="settingDialogVisible" title="设置" width="800px" :modal="true" class="brightness-dialog">
|
|
|
<div class="setting-content">
|
|
|
<div class="loopBox">
|
|
|
<div class="title">
|
|
|
<div class="left">通道回路
|
|
|
<!-- <span class="selectAll" @click="selectAll">全选</span> -->
|
|
|
</div>
|
|
|
<!-- <div class="right">通道回路 <el-switch v-model="switchValue" inline-prompt active-text="通" inactive-text="断" /></div> -->
|
|
|
</div>
|
|
|
<div class="selectBox">
|
|
|
<el-checkbox-group v-model="selectBoxValue">
|
|
|
<el-checkbox v-for="item in 10" :label="'通道回路' + item" :value="item" border />
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div style="margin:10px 0 "><el-button type="primary" @click="brightnessDialogVisible = true">一键调光</el-button></div> -->
|
|
|
<div style="margin-bottom: 10px;">调光通道</div>
|
|
|
<div class="lightBox">
|
|
|
<div class="item" v-for="(item, index) in currentTask.loops">
|
|
|
<div class="title">调光通道{{ index + 1 }}</div>
|
|
|
<el-input-number style="width: 95%;" v-model="item.pwm" :min="0" :max="100">
|
|
|
<template #suffix>
|
|
|
<span>%</span>
|
|
|
</template>
|
|
|
</el-input-number>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="timeBox">
|
|
|
<span>时间</span>
|
|
|
<el-time-picker v-model="currentTask.execTime" placeholder="请选择" />
|
|
|
<el-radio-group style="margin-left: 20px;" v-model="currentTask.timeType">
|
|
|
<el-radio :value="0">定时时间</el-radio>
|
|
|
<el-radio :value="1">经纬度时间</el-radio>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="settingDialogVisible = false">取消</el-button>
|
|
|
<el-button type="primary" @click="confirmSetting">确认</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import RPC from '@/utils/rpc'
|
|
|
import dayjs from 'dayjs'
|
|
|
const commit_uid = localStorage.getItem('central_control_comm_uid')
|
|
|
|
|
|
const switchValue = ref(true)
|
|
|
const selectBoxValue = ref([])
|
|
|
const lightFrom = ref({})
|
|
|
const timeValue = ref('')
|
|
|
const modeName = ref('')
|
|
|
|
|
|
const currentTaskName = ref('开始任务')
|
|
|
const currentTask = ref({})
|
|
|
const currentMiddleIndex = ref(null)
|
|
|
|
|
|
const openSettingDialog = (item, index) => {
|
|
|
currentTaskName.value = item
|
|
|
if (item === '中间任务') {
|
|
|
currentTask.value = middleTask.value[index]
|
|
|
currentMiddleIndex.value = index
|
|
|
} else {
|
|
|
currentTask.value = tasks.value[index]
|
|
|
}
|
|
|
// console.log(' currentTask.value', JSON.stringify(currentTask.value))
|
|
|
// if (currentTask.value.turnOn) {
|
|
|
// selectBoxValue.value = ['通道回路']
|
|
|
// } else {
|
|
|
// selectBoxValue.value = []
|
|
|
// }
|
|
|
selectBoxValue.value = []
|
|
|
currentTask.value.loops.forEach((item, index) => {
|
|
|
if (item.turnOn) selectBoxValue.value.push(index + 1)
|
|
|
})
|
|
|
settingDialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
const confirmSetting = () => {
|
|
|
// console.log(selectBoxValue.value)
|
|
|
currentTask.value.loops.forEach(item => {
|
|
|
item.turnOn = false
|
|
|
})
|
|
|
selectBoxValue.value?.forEach(item => {
|
|
|
currentTask.value.loops[item - 1].turnOn = true
|
|
|
})
|
|
|
const params = {
|
|
|
"comm_uid": commit_uid,
|
|
|
"mode": deviceMode.value,
|
|
|
"execTime": dayjs(currentTask.value.execTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
// "turnOn": selectBoxValue.value.length > 0,
|
|
|
// "pwm": currentTask.value.pwm,
|
|
|
timeType: currentTask.value.timeType,
|
|
|
loops: currentTask.value.loops
|
|
|
}
|
|
|
// if (1 == 1) {
|
|
|
// console.log(params)
|
|
|
// return
|
|
|
// }
|
|
|
if (currentTaskName.value === '开始任务') {
|
|
|
RPC.post('/m9z/setStartTask2', params).then(res => {
|
|
|
settingDialogVisible.value = false
|
|
|
ElMessage.success('修改成功')
|
|
|
getTask()
|
|
|
})
|
|
|
}
|
|
|
if (currentTaskName.value === '结束任务') {
|
|
|
RPC.post('/m9z/setStopTask2', params).then(res => {
|
|
|
settingDialogVisible.value = false
|
|
|
ElMessage.success('修改成功')
|
|
|
getTask()
|
|
|
})
|
|
|
}
|
|
|
if (currentTaskName.value === '中间任务') {
|
|
|
middleTask.value[currentMiddleIndex.value].execTime = dayjs(currentTask.value.execTime).format('YYYY-MM-DD HH:mm:ss')
|
|
|
middleTask.value[currentMiddleIndex.value].timeType = currentTask.value.timeType
|
|
|
middleTask.value[currentMiddleIndex.value].loops = currentTask.value.loops
|
|
|
const middleParams = {
|
|
|
"comm_uid": commit_uid,
|
|
|
"mode": deviceMode.value,
|
|
|
"controlTaskList": middleTask.value
|
|
|
}
|
|
|
RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
|
|
|
settingDialogVisible.value = false
|
|
|
ElMessage.success('修改成功')
|
|
|
getTask()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
const startTask = ref({})
|
|
|
const stopTask = ref({})
|
|
|
const middleTask = ref([])
|
|
|
const startTaskLoading = ref(false)
|
|
|
const stopTaskLoading = ref(false)
|
|
|
const middleTaskLoading = ref(false)
|
|
|
|
|
|
const tasks = computed(() => [startTask.value, stopTask.value, middleTask.value])
|
|
|
|
|
|
const deviceMode = ref(0)
|
|
|
const currentMode = ref(0)
|
|
|
RPC.post('/m9z/getDeviceMode', { comm_uid: commit_uid }).then(res => {
|
|
|
currentMode.value = res
|
|
|
})
|
|
|
|
|
|
const changeMode = () => {
|
|
|
modeActive.value = currentMode.value
|
|
|
modeDialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
const confirmMode = () => {
|
|
|
RPC.post('/m9z/setDeviceMode', { comm_uid: commit_uid, mode: modeActive.value }).then(res => {
|
|
|
currentMode.value = modeActive.value
|
|
|
ElMessage.success('操作成功')
|
|
|
modeDialogVisible.value = false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const changeViewMode = index => {
|
|
|
deviceMode.value = index
|
|
|
getTask()
|
|
|
}
|
|
|
|
|
|
const getTask = () => {
|
|
|
startTaskLoading.value = true
|
|
|
stopTaskLoading.value = true
|
|
|
middleTaskLoading.value = true
|
|
|
RPC.post('/m9z/getStartTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
|
|
|
startTask.value = res
|
|
|
}).finally(() => {
|
|
|
startTaskLoading.value = false
|
|
|
})
|
|
|
RPC.post('/m9z/getStopTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
|
|
|
stopTask.value = res
|
|
|
}).finally(() => {
|
|
|
stopTaskLoading.value = false
|
|
|
})
|
|
|
RPC.post('/m9z/getMiddleTask2', { comm_uid: commit_uid, mode: deviceMode.value }).then(res => {
|
|
|
middleTask.value = res.controlTaskList || []
|
|
|
}).finally(() => {
|
|
|
middleTaskLoading.value = false
|
|
|
})
|
|
|
}
|
|
|
getTask()
|
|
|
|
|
|
const addTask = () => {
|
|
|
middleTask.value.push({
|
|
|
"execTime": '2025-06-07 19:00:00',
|
|
|
"turnOn": true,
|
|
|
"pwm": 50
|
|
|
})
|
|
|
const middleParams = {
|
|
|
"comm_uid": commit_uid,
|
|
|
"mode": deviceMode.value,
|
|
|
"controlTaskList": middleTask.value
|
|
|
}
|
|
|
console.log(middleParams)
|
|
|
middleTaskLoading.value = true
|
|
|
RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
|
|
|
settingDialogVisible.value = false
|
|
|
ElMessage.success('添加成功')
|
|
|
middleTaskLoading.value = false
|
|
|
getTask()
|
|
|
}).catch(() => {
|
|
|
middleTaskLoading.value = false
|
|
|
})
|
|
|
}
|
|
|
const delTask = (index) => {
|
|
|
ElMessageBox.confirm(
|
|
|
'确认删除?',
|
|
|
'',
|
|
|
{
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
customClass: 'del_Message_box'
|
|
|
}
|
|
|
)
|
|
|
.then(() => {
|
|
|
middleTask.value.splice(index, 1)
|
|
|
const middleParams = {
|
|
|
"comm_uid": commit_uid,
|
|
|
"mode": deviceMode.value,
|
|
|
"controlTaskList": middleTask.value
|
|
|
}
|
|
|
console.log(middleParams)
|
|
|
middleTaskLoading.value = true
|
|
|
RPC.post('/m9z/setMiddleTask2', middleParams).then(res => {
|
|
|
settingDialogVisible.value = false
|
|
|
ElMessage.success('删除成功')
|
|
|
middleTaskLoading.value = false
|
|
|
getTask()
|
|
|
}).catch(() => {
|
|
|
middleTaskLoading.value = false
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const selectAll = () => {
|
|
|
if (selectBoxValue.value.length !== 10) {
|
|
|
selectBoxValue.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => '通道回路' + item)
|
|
|
} else {
|
|
|
selectBoxValue.value = []
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const router = useRouter()
|
|
|
const currentTime = ref('')
|
|
|
const systemRuntime = ref('38分钟')
|
|
|
const brightnessDialogVisible = ref(false)
|
|
|
const currentBrightness = ref(50)
|
|
|
const selectedChannelName = ref(null)
|
|
|
|
|
|
const settingDialogVisible = ref(false)
|
|
|
const modeDialogVisible = ref(false)
|
|
|
const addDialogVisible = ref(false)
|
|
|
const modeActive = ref(1)
|
|
|
|
|
|
const week = ref('')
|
|
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
|
|
|
|
|
|
const sunriseTime = ref('')
|
|
|
const sunsetTime = ref('')
|
|
|
|
|
|
RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
|
|
|
sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
|
|
|
sunsetTime.value = res.Sunset ? dayjs(res.Sunset).format('HH:mm:ss') : ''
|
|
|
})
|
|
|
|
|
|
// 更新时间
|
|
|
const updateTime = () => {
|
|
|
const now = new Date()
|
|
|
const year = now.getFullYear()
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
|
const hours = String(now.getHours()).padStart(2, '0')
|
|
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
|
|
|
|
week.value = weekDays[now.getDay()]
|
|
|
|
|
|
currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
}
|
|
|
|
|
|
// 切换回路状态
|
|
|
const toggleCircuit = (circuitName) => {
|
|
|
if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
|
|
|
const circuit = info.value.loops.find(c => c.name === circuitName)
|
|
|
if (circuit) {
|
|
|
circuit.is_open = !circuit.is_open
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 打开亮度调节弹窗
|
|
|
const openBrightnessDialog = (channelName) => {
|
|
|
if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
|
|
|
selectedChannelName.value = channelName
|
|
|
const channel = info.value.loops.find(c => c.name === channelName)
|
|
|
if (channel) {
|
|
|
currentBrightness.value = channel.pwm
|
|
|
brightnessDialogVisible.value = true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 确认亮度设置
|
|
|
const confirmBrightness = () => {
|
|
|
const channel = info.value.loops.find(c => c.name === selectedChannelName.value)
|
|
|
if (channel) {
|
|
|
channel.pwm = currentBrightness.value
|
|
|
// ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
|
|
|
} else {
|
|
|
info.value.loops.forEach(channel => {
|
|
|
channel.pwm = currentBrightness.value
|
|
|
})
|
|
|
}
|
|
|
brightnessDialogVisible.value = false
|
|
|
}
|
|
|
|
|
|
// 打开全局亮度调节
|
|
|
const openGlobalBrightnessDialog = () => {
|
|
|
if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
|
|
|
selectedChannelName.value = null
|
|
|
currentBrightness.value = 50
|
|
|
brightnessDialogVisible.value = true
|
|
|
}
|
|
|
|
|
|
|
|
|
// 返回主界面
|
|
|
const goBack = () => {
|
|
|
router.push('/')
|
|
|
}
|
|
|
|
|
|
// 重启系统
|
|
|
const restartSystem = () => {
|
|
|
RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
|
|
|
ElMessage.success('远程重启成功')
|
|
|
})
|
|
|
}
|
|
|
|
|
|
let timeInterval = null
|
|
|
|
|
|
onMounted(() => {
|
|
|
updateTime()
|
|
|
timeInterval = setInterval(updateTime, 1000)
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (timeInterval) {
|
|
|
clearInterval(timeInterval)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const delMode = () => {
|
|
|
ElMessageBox.confirm(
|
|
|
'确认删除?',
|
|
|
'',
|
|
|
{
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
customClass: 'del_Message_box'
|
|
|
}
|
|
|
)
|
|
|
.then(() => {
|
|
|
ElMessage({
|
|
|
type: 'success',
|
|
|
message: '删除成功',
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.control-view {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
overflow: auto;
|
|
|
background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
|
|
|
background-color: #0A3933;
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 10px 20px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.header-status {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
|
|
|
.time-info {
|
|
|
font-size: 18px;
|
|
|
font-weight: 300;
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.page-title h1 {
|
|
|
font-size: 30px;
|
|
|
font-weight: bold;
|
|
|
margin: 0;
|
|
|
color: #ffffff;
|
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.system-status {
|
|
|
min-width: 200px;
|
|
|
font-size: 18px;
|
|
|
font-weight: 300;
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.control-content {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
gap: 30px;
|
|
|
box-sizing: border-box;
|
|
|
height: calc(100% - 120px);
|
|
|
}
|
|
|
|
|
|
.power-section {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
/* width: 500px; */
|
|
|
gap: 20px;
|
|
|
font-size: 14px;
|
|
|
|
|
|
.tabBox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.tabItem {
|
|
|
width: 100px;
|
|
|
height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: #373C47;
|
|
|
color: #fff;
|
|
|
|
|
|
&:first-child {
|
|
|
border-radius: 8px 0 0 8px;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
}
|
|
|
|
|
|
&.selected {
|
|
|
background-color: #FFAF11;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.power-params {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
// justify-content: space-between;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
gap: 10px;
|
|
|
height: 100%;
|
|
|
|
|
|
.time {
|
|
|
width: 100px;
|
|
|
border-left: 1px solid #ccc;
|
|
|
|
|
|
div {
|
|
|
margin: 10px 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.iconBox {
|
|
|
height: 100%;
|
|
|
width: 100px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: rgba($color: #188549, $alpha: .3);
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 30px;
|
|
|
background-color: #fff;
|
|
|
background: linear-gradient(180deg, rgba(244, 248, 247, 1) 0%, rgba(142, 198, 185, 1) 96%);
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.31);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.phase-card,
|
|
|
.energy-card {
|
|
|
display: flex;
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 12px;
|
|
|
align-items: center;
|
|
|
width: 99%;
|
|
|
height: 30%;
|
|
|
flex-shrink: 0;
|
|
|
overflow: hidden;
|
|
|
/* padding: 15px; */
|
|
|
backdrop-filter: blur(10px);
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
|
|
|
.phase-name,
|
|
|
.energy-name {
|
|
|
font-size: 14px;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: rgba($color: #188549, $alpha: .3);
|
|
|
width: 30px;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.param-list {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
|
|
|
.red {
|
|
|
color: #f12323;
|
|
|
}
|
|
|
|
|
|
.green {
|
|
|
color: rgb(39, 167, 39);
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
flex: 1;
|
|
|
|
|
|
div {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.param-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.param-label {
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
|
|
|
|
.param-value {
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.circuit-section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.circuit-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.circuit-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
width: 18%;
|
|
|
}
|
|
|
|
|
|
.circuit-status {
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 8px;
|
|
|
padding: 8px 12px;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.circuit-status.active {
|
|
|
background: rgba(33, 150, 243, 0.2);
|
|
|
border-color: rgba(33, 150, 243, 0.5);
|
|
|
color: #64b5f6;
|
|
|
}
|
|
|
|
|
|
.circuit-icon {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
border-radius: 50%;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
|
|
|
.circuit-icon.active {
|
|
|
background: rgba(255, 193, 7, 0.2);
|
|
|
border-color: rgba(255, 193, 7, 0.6);
|
|
|
color: #ffc107;
|
|
|
box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
|
|
|
}
|
|
|
|
|
|
.circuit-icon:hover {
|
|
|
transform: scale(1.05);
|
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
.dimming-section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.dimming-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.dimming-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
width: 18%;
|
|
|
}
|
|
|
|
|
|
.channel-label {
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.brightness-display {
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 8px;
|
|
|
padding: 6px;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.brightness-display.active {
|
|
|
background: rgba(33, 150, 243, 0.3);
|
|
|
border-color: rgba(33, 150, 243, 0.6);
|
|
|
color: #64b5f6;
|
|
|
box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
|
|
|
}
|
|
|
|
|
|
.brightness-display:hover {
|
|
|
background: rgba(255, 255, 255, 0.12);
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.bottom-info {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
border-top: 1px solid #eee;
|
|
|
width: 100vw;
|
|
|
padding: 0 30px;
|
|
|
height: 50px;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 999;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.bottom_item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.time-item {
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
margin: 0 20px;
|
|
|
}
|
|
|
|
|
|
.back-button,
|
|
|
.restart-button {
|
|
|
width: 100%;
|
|
|
height: 38px;
|
|
|
border-radius: 19px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.back-button {
|
|
|
// background-color: #000;
|
|
|
// color: #fff;
|
|
|
border: #000;
|
|
|
background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.control-panel {
|
|
|
width: 150px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
gap: 20px;
|
|
|
|
|
|
.buttonBox {
|
|
|
.el-button {
|
|
|
margin: 15px 0;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.control-group {
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
border-radius: 12px;
|
|
|
padding: 20px 10px;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.control-title {
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
margin-bottom: 15px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.el-icon {
|
|
|
font-size: 20px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mode-button,
|
|
|
.setting-button,
|
|
|
.brightness-button {
|
|
|
width: 100%;
|
|
|
height: 45px;
|
|
|
border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s ease;
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
&.add {
|
|
|
background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
|
|
|
}
|
|
|
|
|
|
&.del {
|
|
|
background-color: #d42d1f;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mode-button {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border: none;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.mode-button.active {
|
|
|
background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.setting-button {
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
|
|
|
.setting-button.active {
|
|
|
background: #1976d2;
|
|
|
border-color: #1976d2;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.brightness-button {
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
|
|
|
|
|
|
// .setting-button:hover,
|
|
|
// .brightness-button:hover {
|
|
|
// background: rgba(255, 255, 255, 0.15);
|
|
|
// transform: translateY(-2px);
|
|
|
// }
|
|
|
|
|
|
/* 弹窗样式 */
|
|
|
:deep(.brightness-dialog) {
|
|
|
// background: rgba(30, 30, 30, 0.95);
|
|
|
// backdrop-filter: blur(20px);
|
|
|
background: linear-gradient(180.44deg, rgba(226, 232, 251, 1) 0.64%, rgba(255, 255, 255, 1) 25.32%);
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-dialog .el-dialog__header) {
|
|
|
// background: rgba(255, 255, 255, 0.1);
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-dialog .el-dialog__title) {
|
|
|
color: #6C75A0 100%;
|
|
|
font-size: 18px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-dialog .el-dialog__body) {
|
|
|
// background: rgba(255, 255, 255, 0.05);
|
|
|
color: #6C75A0 100%;
|
|
|
}
|
|
|
|
|
|
.brightness-content {
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
.brightness-label {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
font-weight: 500;
|
|
|
margin-bottom: 30px;
|
|
|
color: #6C75A0;
|
|
|
}
|
|
|
|
|
|
.brightness-slider-container {
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-slider .el-slider__bar) {
|
|
|
background: #1976d2;
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-slider .el-slider__button) {
|
|
|
border-color: #1976d2;
|
|
|
}
|
|
|
|
|
|
:deep(.brightness-slider .el-slider__stop) {
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.dialog-footer {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.setting-content {
|
|
|
.loopBox {
|
|
|
.title {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.selectAll {
|
|
|
color: #2d5cf6;
|
|
|
margin-left: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.selectBox {
|
|
|
.el-checkbox-group {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.el-checkbox {
|
|
|
width: 18%;
|
|
|
margin-right: 0;
|
|
|
height: 40px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.lightBox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.item {
|
|
|
.title {
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
text-align: center;
|
|
|
width: 19%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
|
|
|
:deep(.el-input-number__increase) {
|
|
|
background-color: transparent;
|
|
|
color: #6C75A0;
|
|
|
}
|
|
|
|
|
|
:deep(.el-input-number__decrease) {
|
|
|
background-color: transparent;
|
|
|
color: #6C75A0;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
background-color: transparent;
|
|
|
color: #6C75A0;
|
|
|
|
|
|
input {
|
|
|
color: #6C75A0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.timeBox {
|
|
|
margin-top: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
>span {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.modeBox {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
margin-top: 20px;
|
|
|
|
|
|
.el-button {
|
|
|
min-width: 100px;
|
|
|
width: auto;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.del_Message_box {
|
|
|
background: rgba(30, 30, 30, 0.95);
|
|
|
backdrop-filter: blur(20px);
|
|
|
|
|
|
.el-message-box__message {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
