odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 风机区域细节优化

Browse Source
This commit is contained in:
odjbin
2024-02-26 17:47:15 +08:00
parent ae15ba62b5
commit 0301aa79bc
1 changed files with 86 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/content/fanInfo/FanInfo.vue
View File

@@ -15,7 +15,7 @@
<!-- 功能 --> <!-- 功能 -->
<div class="option-nav"> <div class="option-nav">
<div> <div>
<div class="state"> <div class="state" :class="{changeMargin: item.showTooltip}">
<div class="blue-state" :class="{ stopColor: item.breakdown }"> <div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div> <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span> 状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
@@ -45,22 +45,28 @@
</el-radio-group> </el-radio-group>
</div> </div>
<div class="edit-power"> <div class="edit-power">
<span style="color: white">给定频率</span> <div>
<!-- <span class="units"--> <span style="color: white">给定频率</span>
<!-- ><input--> <!-- <span class="units"-->
<!-- type="number"--> <!-- ><input-->
<!-- min="0"--> <!-- type="number"-->
<!-- v-model="item.frequencySetting"--> <!-- min="0"-->
<!-- onchange="changeFrequency(item)"--> <!-- v-model="item.frequencySetting"-->
<!-- :disabled="item.autoMode"--> <!-- onchange="changeFrequency(item)"-->
<!-- /></span>--> <!-- :disabled="item.autoMode"-->
<el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode" <!-- /></span>-->
@change="changeFrequency(item)"> <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode" title=""
<template #suffix> @change="changeFrequency(item)" @focus="item.showTooltip=true" @blur="item.showTooltip=false">
<span>Hz</span> <template #suffix>
</template> <span>Hz</span>
</el-input> </template>
</el-input>
</div>
<span v-if="item.showTooltip">
正在输入中...
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -122,8 +128,7 @@ import {
editFrequencyOperationSwitch, editFrequencyOperationSwitch,
getFanEchartsInfo getFanEchartsInfo
} from "@/api/largeScreen"; } from "@/api/largeScreen";
import {ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {removeToken} from "../../../utils/auth";
const timeList = ref(["年", "月", "日"]); const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2); const selectTimeButton = ref(2);
@@ -201,11 +206,11 @@ watch(() => props.list, (now) => {
}, {deep: true}); }, {deep: true});
const timeSelect = (index) => { const timeSelect = (index) => {
if (index === 0) { if (index === 0) {
getFanInfo(openEquipmentId.value,'years') getFanInfo(openEquipmentId.value, 'years')
} else if (index === 1) { } else if (index === 1) {
getFanInfo(openEquipmentId.value,'month') getFanInfo(openEquipmentId.value, 'month')
} else if (index === 2) { } else if (index === 2) {
getFanInfo(openEquipmentId.value,'day') getFanInfo(openEquipmentId.value, 'day')
} }
}; };
const packageData = (item, type, flag) => { const packageData = (item, type, flag) => {
@@ -230,27 +235,44 @@ const packageData = (item, type, flag) => {
} }
} }
//启动/停止 //启动/停止
const editOperate = (item,type) => { const editOperate = (item, type) => {
ElMessageBox.confirm(`是否${type}该风机？`,'系统提示',{ ElMessageBox.confirm(`是否${type}该风机？`, '系统提示', {
type: 'warning', type: 'warning',
closeOnClickModal: false closeOnClickModal: false
}).then(()=>{ }).then(() => {
const data = packageData(item, item.running) const data = packageData(item, item.running)
editFrequencyOperationSwitch(data).then(res => { editFrequencyOperationSwitch(data).then(res => {
console.log('修改风机启动', res) console.log('修改风机启动', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.error(res.msg)
}
}) })
}) })
} }
const changeFrequency = (item) => { const changeFrequency = (item) => {
console.log('修改频率')
const data = packageData(item, item.frequencySetting, true) const data = packageData(item, item.frequencySetting, true)
editFrequency(data).then(res => { editFrequency(data).then(res => {
console.log('修改风机频率', res) console.log('修改风机频率', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
}) })
} }
const changeModel = (item) => { const changeModel = (item) => {
const data = packageData(item, item.autoMode) const data = packageData(item, item.autoMode)
editFrequencyModelSwitch(data).then(res => { editFrequencyModelSwitch(data).then(res => {
console.log('修改自动模式', res) console.log('修改自动模式', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
}) })
} }
const getFanInfo = (equipmentId, type = 'day') => { const getFanInfo = (equipmentId, type = 'day') => {
@@ -268,10 +290,10 @@ const getFanInfo = (equipmentId, type = 'day') => {
const handleOpenChart = (item) => { const handleOpenChart = (item) => {
openEquipmentId.value = item.equipmentId openEquipmentId.value = item.equipmentId
getFanInfo(item.equipmentId, 'day') getFanInfo(item.equipmentId, 'day')
if(item.equipmentId===22){ if (item.equipmentId === 22) {
fanIndex.value='一' fanIndex.value = '一'
}else { } else {
fanIndex.value='二' fanIndex.value = '二'
} }
} }
const getTransData = (data) => { const getTransData = (data) => {
@@ -325,6 +347,7 @@ const getBasicData = (data) => {
autoMode: item.autoMode,//自动模式 autoMode: item.autoMode,//自动模式
breakdown: item.breakdown,//故障 breakdown: item.breakdown,//故障
running: item.running,//启动, running: item.running,//启动,
showTooltip:false,
frequencyFeedback: item.frequencyFeedback, frequencyFeedback: item.frequencyFeedback,
frequencySetting: item.frequencySetting frequencySetting: item.frequencySetting
} }
@@ -789,15 +812,17 @@ input[type="number"] {
} }
.option-nav { .option-nav {
display: flex; //display: flex;
flex-direction: column; //flex-direction: column;
width: 70%; width: 70%;
> div:first-child { > div:first-child {
margin-top: 48px; margin-top: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
.changeMargin{
margin-top: -40px;
}
.state { .state {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -876,43 +901,44 @@ input[type="number"] {
.edit-power { .edit-power {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column;
> span:first-child { > div:first-child {
white-space: pre; display: flex;
margin-right: 14px;
}
//:deep(.is-disabled) { > span:first-child {
// .el-input__inner{ white-space: pre;
// color: #FFFFFF!important; margin-right: 14px;
// } }
//} :deep(.el-input__wrapper) {
:deep(.el-input__wrapper) { width: 160px;
width: 160px;
height: 44px;
background-color: transparent;
box-shadow: none;
border: 1px solid #38CAFB;
transform: none;
transition: none;
margin-right: 10px;
.el-input__inner {
height: 44px; height: 44px;
font-size: 30px; background-color: transparent;
font-weight: bold; box-shadow: none;
color: #38CAFB; border: 1px solid #38CAFB;
} transform: none;
transition: none;
margin-right: 10px;
.el-input__inner {
height: 44px;
font-size: 30px;
font-weight: bold;
color: #38CAFB;
}
.el-input__suffix-inner { .el-input__suffix-inner {
font-size: 30px; font-size: 30px;
color: #38CAFB; color: #38CAFB;
line-height: 40px; line-height: 40px;
font-weight: bold; font-weight: bold;
}
} }
} }
//.units { //.units {
// position: relative; // position: relative;
//} //}