|
|
|
@ -1,11 +1,870 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="Monitoring">
|
|
|
|
<div class="control-view">
|
|
|
|
111
|
|
|
|
<!-- 主要内容 -->
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<!-- 左侧电力参数区域 -->
|
|
|
|
|
|
|
|
<div class="power-section">
|
|
|
|
|
|
|
|
<!-- ABC三相电力参数 -->
|
|
|
|
|
|
|
|
<div class="power-params">
|
|
|
|
|
|
|
|
<div v-for="phase in powerPhases" :key="phase.name" class="phase-card">
|
|
|
|
|
|
|
|
<div class="phase-name"><span>{{ phase.name }}</span>相</div>
|
|
|
|
|
|
|
|
<div class="param-list">
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">电压:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ phase.voltage }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">电流:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ phase.current }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">有功功率:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ phase.power }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">功率因数:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ phase.factor }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 电能参数 -->
|
|
|
|
|
|
|
|
<div class="energy-card">
|
|
|
|
|
|
|
|
<div class="energy-name"><span>电</span><span>能</span><span>参</span><span>数</span></div>
|
|
|
|
|
|
|
|
<div class="param-list">
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">DC电压:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ energyParams.dcVoltage }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">有功电能:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ energyParams.activeEnergy }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">有功功率:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ energyParams.activePower }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="param-item">
|
|
|
|
|
|
|
|
<span class="param-label">功率因数:</span>
|
|
|
|
|
|
|
|
<span class="param-value">{{ energyParams.powerFactor }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="control-group">
|
|
|
|
|
|
|
|
<div class="control-title">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-icon>
|
|
|
|
|
|
|
|
<Setting />
|
|
|
|
|
|
|
|
</el-icon>
|
|
|
|
|
|
|
|
当前模式
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-button class="mode-button active" @click="info.disable = !info.disable">{{ info.disable ? '手动' : '自动' }}</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="circuit-section">
|
|
|
|
|
|
|
|
<!-- 上排回路 -->
|
|
|
|
|
|
|
|
<div class="circuit-row">
|
|
|
|
|
|
|
|
<div v-for="(circuit, index) in info.loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
|
|
|
|
|
|
|
|
<div class="circuit-status" :class="{ active: circuit.is_open }">
|
|
|
|
|
|
|
|
回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="circuit-icon" :class="{ active: circuit.is_open }">
|
|
|
|
|
|
|
|
<el-icon>
|
|
|
|
|
|
|
|
<Sunny />
|
|
|
|
|
|
|
|
</el-icon>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 下排回路 -->
|
|
|
|
|
|
|
|
<div class="circuit-row">
|
|
|
|
|
|
|
|
<div v-for="(circuit, index) in info.loops.slice(5, 10)" :key="circuit.name" class="circuit-item">
|
|
|
|
|
|
|
|
<div class="circuit-status" :class="{ active: circuit.is_open }">
|
|
|
|
|
|
|
|
回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="circuit-icon" :class="{ active: circuit.is_open }">
|
|
|
|
|
|
|
|
<el-icon>
|
|
|
|
|
|
|
|
<Sunny />
|
|
|
|
|
|
|
|
</el-icon>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 调光通道区域 -->
|
|
|
|
|
|
|
|
<div class="dimming-section">
|
|
|
|
|
|
|
|
<!-- 上排调光通道 -->
|
|
|
|
|
|
|
|
<div class="dimming-row">
|
|
|
|
|
|
|
|
<div v-for="(channel, index) in info.loops.slice(0, 5)" :key="channel.name" class="dimming-item">
|
|
|
|
|
|
|
|
<div class="channel-label">调光通道{{ index + 1 }}</div>
|
|
|
|
|
|
|
|
<div class="brightness-display" :class="{ active: channel.pwm > 0 }">
|
|
|
|
|
|
|
|
{{ channel.pwm }}%
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 下排调光通道 -->
|
|
|
|
|
|
|
|
<div class="dimming-row">
|
|
|
|
|
|
|
|
<div v-for="(channel, index) in info.loops.slice(5, 10)" :key="channel.name" class="dimming-item">
|
|
|
|
|
|
|
|
<div class="channel-label">调光通道{{ index + 6 }}</div>
|
|
|
|
|
|
|
|
<div class="brightness-display" :class="{ active: channel.pwm > 0 }">
|
|
|
|
|
|
|
|
{{ channel.pwm }}%
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<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 router = useRouter()
|
|
|
|
|
|
|
|
const currentTime = ref('')
|
|
|
|
|
|
|
|
const systemRuntime = ref('38分钟')
|
|
|
|
|
|
|
|
const brightnessDialogVisible = ref(false)
|
|
|
|
|
|
|
|
const currentBrightness = ref(50)
|
|
|
|
|
|
|
|
const selectedChannelName = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const week = ref('')
|
|
|
|
|
|
|
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 电力参数数据
|
|
|
|
|
|
|
|
const powerPhases = ref([
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: 'A',
|
|
|
|
|
|
|
|
voltage: '0V',
|
|
|
|
|
|
|
|
current: '0A',
|
|
|
|
|
|
|
|
power: '20.88kw',
|
|
|
|
|
|
|
|
factor: '0'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: 'B',
|
|
|
|
|
|
|
|
voltage: '0V',
|
|
|
|
|
|
|
|
current: '0A',
|
|
|
|
|
|
|
|
power: '0kw',
|
|
|
|
|
|
|
|
factor: '0'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: 'C',
|
|
|
|
|
|
|
|
voltage: '0V',
|
|
|
|
|
|
|
|
current: '0A',
|
|
|
|
|
|
|
|
power: '0kw',
|
|
|
|
|
|
|
|
factor: '0'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const energyParams = ref({
|
|
|
|
|
|
|
|
dcVoltage: '0.0V',
|
|
|
|
|
|
|
|
activeEnergy: '0kwh',
|
|
|
|
|
|
|
|
activePower: '0kw',
|
|
|
|
|
|
|
|
powerFactor: '0'
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const info = ref({
|
|
|
|
|
|
|
|
"disable": false,
|
|
|
|
|
|
|
|
"backup_byte1": 0,
|
|
|
|
|
|
|
|
"loops": [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 0,
|
|
|
|
|
|
|
|
"name": "#1",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 1,
|
|
|
|
|
|
|
|
"name": "#2",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 2,
|
|
|
|
|
|
|
|
"name": "#3",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 3,
|
|
|
|
|
|
|
|
"name": "#4",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 4,
|
|
|
|
|
|
|
|
"name": "#5",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 5,
|
|
|
|
|
|
|
|
"name": "#6",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 6,
|
|
|
|
|
|
|
|
"name": "#7",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 7,
|
|
|
|
|
|
|
|
"name": "#8",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 8,
|
|
|
|
|
|
|
|
"name": "#9",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"index": 9,
|
|
|
|
|
|
|
|
"name": "#10",
|
|
|
|
|
|
|
|
"is_open": false,
|
|
|
|
|
|
|
|
"pwm": 0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
"backup_byte4": 0
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getInfo = () => {
|
|
|
|
|
|
|
|
RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
|
|
|
|
|
|
|
|
info.value = res
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
|
|
|
|
|
|
|
|
powerPhases.value[0].voltage = res.aVoltage + 'V'
|
|
|
|
|
|
|
|
powerPhases.value[0].current = res.aElectricCurrent + 'A'
|
|
|
|
|
|
|
|
powerPhases.value[0].power = res.aPower + 'Kw'
|
|
|
|
|
|
|
|
powerPhases.value[0].factor = res.aPowerFactor
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
powerPhases.value[1].voltage = res.bVoltage + 'V'
|
|
|
|
|
|
|
|
powerPhases.value[1].current = res.bElectricCurrent + 'A'
|
|
|
|
|
|
|
|
powerPhases.value[1].power = res.bPower + 'Kw'
|
|
|
|
|
|
|
|
powerPhases.value[1].factor = res.bPowerFactor
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
powerPhases.value[2].voltage = res.cVoltage + 'V'
|
|
|
|
|
|
|
|
powerPhases.value[2].current = res.cElectricCurrent + 'A'
|
|
|
|
|
|
|
|
powerPhases.value[2].power = res.cPower + 'Kw'
|
|
|
|
|
|
|
|
powerPhases.value[2].factor = res.cPowerFactor
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
energyParams.value.activeEnergy = res.activeEnergy + 'A'
|
|
|
|
|
|
|
|
energyParams.value.powerFactor = res.powerFactor
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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') : ''
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
getInfo()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const oldInfo = ref('')
|
|
|
|
|
|
|
|
// watch(info, () => {
|
|
|
|
|
|
|
|
// if (oldInfo.value === JSON.stringify(info.value)) return
|
|
|
|
|
|
|
|
// RPC.post('/m9z/setDeviceManualInfo', { comm_uid: commit_uid, ...info.value }).finally(() => {
|
|
|
|
|
|
|
|
// if (!isSync.value) {
|
|
|
|
|
|
|
|
// isSync.value = true
|
|
|
|
|
|
|
|
// getInfo()
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// oldInfo.value = JSON.stringify(info.value)
|
|
|
|
|
|
|
|
// }, { deep: true })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sunriseTime = ref('')
|
|
|
|
|
|
|
|
const sunsetTime = ref('')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 更新时间
|
|
|
|
|
|
|
|
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 openLightSettings = () => {
|
|
|
|
|
|
|
|
if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
|
|
|
|
|
|
|
|
info.value.loops.forEach(circuit => {
|
|
|
|
|
|
|
|
circuit.is_open = true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// dimmingChannels.value.forEach(channel => {
|
|
|
|
|
|
|
|
// channel.brightness = 100
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 全关灯光
|
|
|
|
|
|
|
|
const turnOffAll = () => {
|
|
|
|
|
|
|
|
if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
|
|
|
|
|
|
|
|
info.value.loops.forEach(circuit => {
|
|
|
|
|
|
|
|
circuit.is_open = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// dimmingChannels.value.forEach(channel => {
|
|
|
|
|
|
|
|
// channel.brightness = 0
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// ElMessage.success('所有灯光已关闭')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 返回主界面
|
|
|
|
|
|
|
|
const goBack = () => {
|
|
|
|
|
|
|
|
router.push('/')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 重启系统
|
|
|
|
|
|
|
|
const restartSystem = () => {
|
|
|
|
|
|
|
|
RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
|
|
|
|
|
|
|
|
ElMessage.success('远程重启成功')
|
|
|
|
|
|
|
|
getInfo()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let timeInterval = null
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
updateTime()
|
|
|
|
|
|
|
|
timeInterval = setInterval(updateTime, 1000)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
|
|
|
if (timeInterval) {
|
|
|
|
|
|
|
|
clearInterval(timeInterval)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.control-view {
|
|
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-status {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
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% - 110px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.power-section {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
// justify-content: space-between;
|
|
|
|
|
|
|
|
/* width: 500px; */
|
|
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.power-params {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
gap: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
width: 23%;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
/* padding: 15px; */
|
|
|
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
background-color: #212329;
|
|
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.param-list {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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: rgba(255, 255, 255, 0.7);
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.control-panel {
|
|
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.control-group {
|
|
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
|
|
padding: 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;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mode-button {
|
|
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mode-button.active {
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
|
|
color: #1976d2;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
: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: #ffffff;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.brightness-dialog .el-dialog__body) {
|
|
|
|
|
|
|
|
// background: rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.brightness-content {
|
|
|
|
|
|
|
|
padding: 20px 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.brightness-label {
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
