|
|
<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">
|
|
|
<div class="main_item">
|
|
|
<div class="main_title">
|
|
|
主控器设置
|
|
|
</div>
|
|
|
<div class="main_content">
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">设备时间</div>
|
|
|
<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" style="flex: 1;" v-model="deviceTime" type="datetime" placeholder="请选择时间" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">大地经度</div>
|
|
|
<!-- <el-input v-model="formField.lat" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" /> -->
|
|
|
<el-input-number :min="0" :max="180" v-model="formField.lat" style="width: 100px" placeholder="请输入" :controls="false" />
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">大地纬度</div>
|
|
|
<!-- <el-input v-model="formField.lgn" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" /> -->
|
|
|
<el-input-number :min="0" :max="90" v-model="formField.lgn" style="width: 100px" placeholder="请输入" :controls="false" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">经纬开灯偏差</div>
|
|
|
<!-- <el-input readonly v-model="formField.rise" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" /> -->
|
|
|
<el-select v-model="formField.rise" placeholder="请选择">
|
|
|
<el-option v-for="item in RiseSetOption" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">经纬关灯偏差</div>
|
|
|
<!-- <el-input readonly v-model="formField.set" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" /> -->
|
|
|
<el-select v-model="formField.set" placeholder="请选择">
|
|
|
<el-option v-for="item in RiseSetOption" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<!-- <div class="item"></div> -->
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">控制回路数</div>
|
|
|
<div class="value" style="min-width: 100px;">{{ subLoopParameter.subLoopData?.length || 0 }}</div>
|
|
|
</div>
|
|
|
<div class="item"></div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">在线升级固件</div>
|
|
|
<div class="button disabled">禁用</div>
|
|
|
</div>
|
|
|
<div class="item"></div>
|
|
|
</div>
|
|
|
<div class="buttonBox">
|
|
|
<div class="button save" @click="save">掉电保存</div>
|
|
|
<div class="button restart" @click="restartSystem">重启</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_item">
|
|
|
<div class="main_title">
|
|
|
稳压分控器
|
|
|
</div>
|
|
|
<div class="main_content energy_meter subLoopParame" style="width:235px">
|
|
|
<div class="subLoopParameter_item" v-for="item in subLoopParameter.subLoopData">
|
|
|
<div class="item">
|
|
|
<div class="key">回路地址</div>
|
|
|
<div class="value">{{ item.LoopAddress }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">子模块数量</div>
|
|
|
<div class="value">{{ item.Modules?.length || 0 }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="key">调光幅度</div>
|
|
|
<div class="value">{{ item.DimmingValue ? item.DimmingValue + '%' : item.DimmingValue }}</div>
|
|
|
</div>
|
|
|
<div class="buttonBox" v-if="item.Modules?.length">
|
|
|
<div class="button save" style="width: 100px;" @click="openDialog(item)">查看子模块</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_item">
|
|
|
<div class="main_title">
|
|
|
电能表
|
|
|
</div>
|
|
|
<div class="main_content energy_meter" style="width:235px">
|
|
|
<!-- <div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">主控器地址</div>
|
|
|
<div class="value"> </div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">电能表型号</div>
|
|
|
<div class="value">ADL400</div>
|
|
|
<!-- <el-input v-model="formField.g" style="width: 100px" placeholder="请输入" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">电能表地址</div>
|
|
|
<div class="value">{{ address }}</div>
|
|
|
<!-- <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 底部信息 -->
|
|
|
<div class="bottom-info">
|
|
|
<div style="color:#fff">
|
|
|
设备号：{{ commit_uid }}
|
|
|
</div>
|
|
|
<div class="bottom_item">
|
|
|
<!-- <div class="time-item">
|
|
|
<span>日出时间：{{ sunriseTime }}</span>
|
|
|
</div>
|
|
|
<div class="time-item">
|
|
|
<span>日落时间：{{ sunsetTime }}</span>
|
|
|
</div> -->
|
|
|
</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>
|
|
|
<TableDialog v-if="isShowDialog" @closed="isShowDialog = false" :tableData="currentTableData" :title="currentTitle"></TableDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import RPC from '@/utils/rpc';
|
|
|
import TableDialog from './TableDialog.vue';
|
|
|
|
|
|
const router = useRouter()
|
|
|
const currentTime = ref('')
|
|
|
const systemRuntime = ref('38分钟')
|
|
|
const formField = ref({})
|
|
|
const deviceTime = ref('')
|
|
|
const subLoopParameter = ref([])
|
|
|
const commit_uid = localStorage.getItem('central_control_comm_uid')
|
|
|
|
|
|
const RiseSetOption = [
|
|
|
{ label: '0', value: 0 },
|
|
|
{ label: '提前60分钟', value: 60 },
|
|
|
{ label: '提前50分钟', value: 50 },
|
|
|
{ label: '提前40分钟', value: 40 },
|
|
|
{ label: '提前30分钟', value: 30 },
|
|
|
{ label: '提前20分钟', value: 20 },
|
|
|
{ label: '提前10分钟', value: 10 },
|
|
|
{ label: '延后10分钟', value: -10 },
|
|
|
{ label: '延后20分钟', value: -20 },
|
|
|
{ label: '延后30分钟', value: -30 },
|
|
|
{ label: '延后40分钟', value: -40 },
|
|
|
{ label: '延后50分钟', value: -50 },
|
|
|
{ label: '延后60分钟', value: -60 },
|
|
|
]
|
|
|
|
|
|
RPC.post('/m9z/getLgnLatData', { comm_uid: commit_uid }).then(res => {
|
|
|
formField.value.lat = res.lat
|
|
|
formField.value.lgn = res.lgn
|
|
|
formField.value.loc = res.loc
|
|
|
})
|
|
|
RPC.post('/m9z/getSunRiseSet', { comm_uid: commit_uid }).then(res => {
|
|
|
formField.value.rise = res.rise
|
|
|
formField.value.set = res.set
|
|
|
})
|
|
|
RPC.post('/m9z/getDeviceTime', { comm_uid: commit_uid }).then(res => {
|
|
|
deviceTime.value = res.deviceTime
|
|
|
})
|
|
|
RPC.post('/m9z/getAllSubLoopParameter', { comm_uid: commit_uid }).then(res => {
|
|
|
subLoopParameter.value = res
|
|
|
// subLoopParameter.value = {
|
|
|
// "subLoopData": [
|
|
|
// {
|
|
|
// "DCVoltage": 0.5,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 70,
|
|
|
// "AlarmStatus": 9,
|
|
|
// "AlarmCode": "09 01",
|
|
|
// "RelayStatus": 1,
|
|
|
// "LoopAddress": "0x1",
|
|
|
// "SubModuleCount": 1,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": [
|
|
|
// {
|
|
|
// "OutputVoltage": 0,
|
|
|
// "OutputCurrent": 0,
|
|
|
// "CurrentPWMDuty": 0,
|
|
|
// "VoltagePWMDuty": 0,
|
|
|
// "DeviceAddress": "0x0",
|
|
|
// "ModuleLoopAddress": "0x0",
|
|
|
// "CurrentLimitPct": 0,
|
|
|
// "OperatingMode": 0,
|
|
|
// "ModuleVersion": 0,
|
|
|
// "RatedVoltageDuty": 0,
|
|
|
// "RatedCurrentDuty": 0,
|
|
|
// "RatedOutputVoltage": 0,
|
|
|
// "RatedOutputCurrent": 0
|
|
|
// }
|
|
|
// ]
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x1",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": null
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x2",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": null
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x4",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": null
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// },
|
|
|
// {
|
|
|
// "DCVoltage": 0,
|
|
|
// "DCCurrent": 0,
|
|
|
// "DimmingValue": 0,
|
|
|
// "AlarmStatus": 0,
|
|
|
// "AlarmCode": "00 00",
|
|
|
// "RelayStatus": 0,
|
|
|
// "LoopAddress": "0x0",
|
|
|
// "SubModuleCount": 0,
|
|
|
// "Reserved": [
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0,
|
|
|
// 0
|
|
|
// ],
|
|
|
// "Modules": []
|
|
|
// }
|
|
|
// ],
|
|
|
// "totalP": 0
|
|
|
// }
|
|
|
})
|
|
|
|
|
|
const address = ref('')
|
|
|
RPC.post('/adl400/getMsgAddress', { comm_uid: commit_uid }).then(res => {
|
|
|
address.value = res
|
|
|
})
|
|
|
|
|
|
const week = ref('')
|
|
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
// 更新时间
|
|
|
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 restartSystem = () => {
|
|
|
ElMessageBox.confirm(
|
|
|
`此操作将远程重启，是否继续?`,
|
|
|
'提示',
|
|
|
{
|
|
|
confirmButtonText: '确认',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
}
|
|
|
).then(() => {
|
|
|
RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
|
|
|
ElMessage.success('远程重启成功')
|
|
|
getInfo()
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const save = () => {
|
|
|
ElMessageBox.confirm(
|
|
|
`此操作将保存配置，是否继续?`,
|
|
|
'提示',
|
|
|
{
|
|
|
confirmButtonText: '确认',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
}
|
|
|
).then(() => {
|
|
|
const params = {
|
|
|
"comm_uid": commit_uid,
|
|
|
"lat": Number(formField.value.lat),
|
|
|
"lgn": Number(formField.value.lgn),
|
|
|
"loc_str": formField.value.loc,
|
|
|
"rise": Number(formField.value.rise),
|
|
|
"set": Number(formField.value.set)
|
|
|
}
|
|
|
Promise.all(RPC.post('/m9z/setDeviceLgnLatAndSunRsTime', params), RPC.post('/m9z/setDeviceTime', { "comm_uid": commit_uid, device_time: deviceTime.value })).then(res => {
|
|
|
ElMessage.success('操作成功')
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
const currentTableData = ref([])
|
|
|
const currentTitle = ref('')
|
|
|
const isShowDialog = ref(false)
|
|
|
const openDialog = item => {
|
|
|
isShowDialog.value = true
|
|
|
currentTableData.value = item.Modules
|
|
|
currentTitle.value = item.LoopAddress
|
|
|
}
|
|
|
|
|
|
// 返回主界面
|
|
|
const goBack = () => {
|
|
|
router.push('/')
|
|
|
}
|
|
|
|
|
|
let timeInterval = null
|
|
|
|
|
|
onMounted(() => {
|
|
|
updateTime()
|
|
|
timeInterval = setInterval(updateTime, 1000)
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (timeInterval) {
|
|
|
clearInterval(timeInterval)
|
|
|
}
|
|
|
})
|
|
|
</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/handle_control_bg.png') no-repeat;
|
|
|
}
|
|
|
|
|
|
.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: 20px;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.main_item {
|
|
|
border: .5px solid #ddd;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 450px;
|
|
|
|
|
|
.main_title {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 50px;
|
|
|
font-size: 16px;
|
|
|
background-color: #21232A;
|
|
|
color: #8088AA;
|
|
|
border-bottom: .5px solid #ddd;
|
|
|
}
|
|
|
|
|
|
.main_content {
|
|
|
padding: 20px;
|
|
|
font-size: 14px;
|
|
|
background-color: #282d36;
|
|
|
flex: 1;
|
|
|
|
|
|
&.energy_meter {
|
|
|
.value {
|
|
|
width: 100px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.subLoopParame {
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.key {
|
|
|
color: #fff;
|
|
|
margin-right: 10px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
text-align: center;
|
|
|
background-color: #21232A;
|
|
|
color: #8088AA;
|
|
|
padding: 5px 10px;
|
|
|
min-height: 32px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 5px;
|
|
|
// border: 1px solid #ccc;
|
|
|
}
|
|
|
|
|
|
.subLoopParameter_item {
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid #fff;
|
|
|
padding: 15px;
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
gap: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.button {
|
|
|
width: 50px;
|
|
|
height: 30px;
|
|
|
background-color: #939393;
|
|
|
color: #fff;
|
|
|
border-radius: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.buttonBox {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
|
|
|
.button {
|
|
|
width: 70px;
|
|
|
margin: 0 10px;
|
|
|
|
|
|
&.save {
|
|
|
background-color: #61c24b;
|
|
|
}
|
|
|
|
|
|
&.restart {
|
|
|
background-color: #d42d1f;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-input {
|
|
|
background-color: #21232A;
|
|
|
|
|
|
}
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
|
background-color: #212329 !important;
|
|
|
box-shadow: none;
|
|
|
border: 1px soild #3B3D45;
|
|
|
|
|
|
input {
|
|
|
color: #8088AA;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
:deep(.el-select__wrapper) {
|
|
|
background-color: #212329 !important;
|
|
|
box-shadow: none;
|
|
|
border: 1px soild #3B3D45;
|
|
|
|
|
|
.el-select__placeholder {
|
|
|
color: #8088AA;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
