298 lines
13 KiB
Vue
298 lines
13 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive } from 'vue'
|
|||
|
|
const lineTabs = ref([
|
|||
|
|
{
|
|||
|
|
label: '线路一定值',
|
|||
|
|
value: '1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '线路二定值',
|
|||
|
|
value: '2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '线路三定值',
|
|||
|
|
value: '3'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '线路四定值',
|
|||
|
|
value: '4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '线路五定值',
|
|||
|
|
value: '5'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
const activeTab = ref('1')
|
|||
|
|
const infoList = ref({
|
|||
|
|
category: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
voltage: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
current: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
diffCurrent: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
power: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
frequency: {a: '180', b: '180', c: '开出1', d: '0'},
|
|||
|
|
ptBreak: {a: '180', b: '180', c: '开出1', d: '1'},
|
|||
|
|
ctBreak: {a: '180', b: '180', c: '开出1', d: '1'},
|
|||
|
|
})
|
|||
|
|
const handleSave = () => {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const options = ref([
|
|||
|
|
{
|
|||
|
|
label: '开出1',
|
|||
|
|
value: '1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '开出2',
|
|||
|
|
value: '2'
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="line-page">
|
|||
|
|
<div class="line-tabs">
|
|||
|
|
<div class="tab-item" v-for="item in lineTabs" :key="item.value"
|
|||
|
|
:class="{ 'is-active': activeTab === item.value }" @click="activeTab = item.value">
|
|||
|
|
{{ item.label }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="line-tabs-box">
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box" style="height: 265px;">越限告警</div>
|
|||
|
|
<div class="tab-content-item-box" style="height: 85px;">故障告警</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box box-height">类别</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">电压</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">电流</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">差流</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">功率</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">频率</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">PT断线</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">CT断线</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box box-height">限制</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.voltage.a" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.current.a" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.diffCurrent.a" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.power.a" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.frequency.a" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height" style="border: none;">
|
|||
|
|
<img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height" style="border: none;">
|
|||
|
|
<img src="@/assets/images/menuicon/noitem.png" style="width: 100%; height: 100%;" alt="">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box box-height">延时（s）</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.voltage.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.current.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.diffCurrent.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.power.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.frequency.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.ptBreak.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-input-number v-model="infoList.ctBreak.b" style="width: 100%;" :controls="false" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box box-height">输出节点</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.voltage.c">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.current.c">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.diffCurrent.c">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.power.c">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.frequency.c">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.ptBreak.c" >
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-select v-model="infoList.ctBreak.c" >
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item">
|
|||
|
|
<div class="tab-content-item-box box-height">是否投入</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.voltage.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.current.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.diffCurrent.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.power.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.frequency.d" active-value="1" inactive-value="10"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.ptBreak.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content-item-box box-color box-height">
|
|||
|
|
<el-switch v-model="infoList.ctBreak.d" active-value="1" inactive-value="0"></el-switch>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.line-page {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
.line-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #e9ecf3;
|
|||
|
|
border: 1px solid #dfe4ee;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border-bottom-right-radius: 0px;
|
|||
|
|
border-bottom-left-radius: 0px;
|
|||
|
|
box-shadow: 0px 0px 6px rgba(232, 236, 244, 1);
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606060;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.is-active {
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: #0099ff;
|
|||
|
|
border-color: #0099ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line-tabs-box {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.tab-content {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
padding: 60px 0;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
// height: calc(100vh - 260px);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
|||
|
|
padding: 20px 20px;
|
|||
|
|
min-height: max-content;
|
|||
|
|
gap: 5px;
|
|||
|
|
.tab-content-item {
|
|||
|
|
width: calc(100% / 6);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 5px;
|
|||
|
|
|
|||
|
|
.tab-content-item-box {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #f9fafe;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-width: 1px;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: rgba(228, 228, 228, 1);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #787878;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-align: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-color {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.box-height{
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-btn {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
width: 150px;
|
|||
|
|
height: 40px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
background-color: #0099ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
:deep(.el-select__wrapper),
|
|||
|
|
:deep(.el-input__wrapper) {
|
|||
|
|
border: none !important;
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
background: transparent !important;
|
|||
|
|
text-align: center !important;
|
|||
|
|
}
|
|||
|
|
:deep(.el-select__wrapper.is-hover),
|
|||
|
|
:deep(.el-input__wrapper.is-hover),
|
|||
|
|
:deep(.el-select__wrapper.is-focused),
|
|||
|
|
:deep(.el-input__wrapper.is-focused) {
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
:deep(.el-input__inner){
|
|||
|
|
text-align: center !important;
|
|||
|
|
}
|
|||
|
|
</style>
|