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

邓洁: 优化界面

Browse Source
This commit is contained in:
邓洁
2024-01-16 16:03:01 +08:00
parent 75929dcb77
commit 5a0f1997e3
11 changed files with 132 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<div class="title">风机</div>
<div v-if="socketData==null||socketData.length===0" class="showNull ">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div>
<div v-else class="fans">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
@@ -15,10 +15,10 @@
<!-- 功能 -->
<div class="option-nav">
<div>
<div class="state " :class="{ 'blue-state': !item.breakdown }">
<div :class="{ stopColor: item.breakdown }">
<div class="state">
<div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：{{ item.breakdown ? '故障' : '运行' }}
状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
</div>
<div class="switch">
<div
@@ -39,7 +39,7 @@
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="item.autoMode" class="radio-group">
<el-radio-group v-model="item.autoMode">
<el-radio :label="true">自动</el-radio>
<el-radio :label="false">手动</el-radio>
</el-radio-group>
@@ -68,32 +68,33 @@
</div>
</div>
</div>
<div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]" />
<div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]"/>
</div>
</div>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'"
width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<div class="loading"></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerFan"></div>
<div style="width: 1px;"></div>
</div>
<!-- <div class="time-select">-->
<!-- <time-range-btn-->
<!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="time-select">-->
<!-- <time-range-btn-->
<!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"-->
<!-- />-->
<!-- </div>-->
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -125,7 +126,7 @@ const showLoading = ref(false)
const fanIndex = ref(0)
let myEcharts = reactive({});
watch(() => props.loading, (now) => {
props.loading=now
props.loading = now
}, {deep: true});
watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList)
@@ -162,20 +163,20 @@ watch(() => props.list, (now) => {
}, {deep: true});
const getFanInfo = (equipmentId) => {
isVisited.value = true
showLoading.value=true
showLoading.value = true
getFanEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) {
showLoading.value=false
showLoading.value = false
nextTick(() => {
initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
})
}
})
}
const handleOpenChart = (item,index) => {
const handleOpenChart = (item, index) => {
getFanInfo(item.equipmentId)
fanIndex.value=index+1
fanIndex.value = index + 1
}
const getTransData = (data) => {
let tranObj = {}
@@ -313,7 +314,7 @@ const handleOnMounted = () => {
}
},
},
max: 1000,
max: 50,
splitLine: {
show: false,
},
@@ -364,7 +365,7 @@ const getImageUrl = (name) => {
/**
* 初始化echarts实例方法
*/
const initChart = (type, valueA,valueB,valueC) => {
const initChart = (type, valueA, valueB, valueC) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据
@@ -462,7 +463,7 @@ const initChart = (type, valueA,valueB,valueC) => {
series: [
{
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
name:'A相电流',
name: 'A相电流',
data: valueA,
type: 'line',
smooth: true,
@@ -472,7 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
},
},
{
name:'B相电流',
name: 'B相电流',
data: valueB,
type: 'line',
smooth: true,
@@ -482,7 +483,7 @@ const initChart = (type, valueA,valueB,valueC) => {
},
},
{
name:'C相电流',
name: 'C相电流',
data: valueC,
type: 'line',
smooth: true,
@@ -530,10 +531,17 @@ input::-webkit-inner-spin-button {
input[type="number"] {
-moz-appearance: textfield;
}
:deep(.el-radio-group){
.el-radio{
display: flex;
align-items: center;
}
}
:deep( .el-radio__input) {
width: 24px;
height: 24px;
width: 28px;
height: 28px;
border: 2px solid #38cafb;
border-radius: 50%;
display: flex;
@@ -544,7 +552,7 @@ input[type="number"] {
:deep( .el-radio__label) {
font-size: 28px;
color: #38cafb;
line-height: 37px;
margin-top: -5px;
}
#fan_info {
@@ -577,7 +585,7 @@ input[type="number"] {
.fan-item {
//height: 33.5%;
height: 50%;
padding-bottom:10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
font-size: 14px;
@@ -631,55 +639,49 @@ input[type="number"] {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26px;
font-size: 28px;
color: #38cafb;
line-height: 35px;
gap: 40px;
.blue-state {
> div:first-child:hover {
color: #fff;
background-color: #127399;
width: 180px;
padding-left: 5px;
border-radius: 8px;
> div:first-child {
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
}
}
.stopColor {
background-color: red !important;
}
> div:first-child {
.blue-state {
display: flex;
align-items: center;
padding-left: 5px;
height: 45px;
margin-right: 15px;
color: #fff;
background-color: #127399;
padding-left: 10px;
border-radius: 8px;
margin-left: -5px;
> div {
.state-icon {
width: 28px;
height: 28px;
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
margin-right: 10px;
}
.fan-state {
color: #FFFFFF;
}
}
img {
margin-right: 4px;
transform: translateY(15%);
}
.state-icon {
width: 26px;
height: 26px;
}
.switch {
display: flex;
width: 160px;
height: 40px;
width: 165px;
height: 45px;
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-weight: bold;
color: #127399;
line-height: 35px;
line-height: 40px;
& > div {
flex: 1;
@@ -700,6 +702,13 @@ input[type="number"] {
line-height: 37px;
gap: 33px;
.check-box {
display: flex;
align-items: center;
justify-content: center;
//margin-left: 20px;
}
.edit-power {
margin-top: 10px;
@@ -793,8 +802,9 @@ input[type="number"] {
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
&:hover{
background-color: #2E5589;
&:hover {
background-color: #2E5589;
border-radius: 6px;
}
}
@@ -808,18 +818,15 @@ input[type="number"] {
background: #0f7da9;
}
.stopColor {
color: red;
}
.stopColor:hover {
color: #fff;
width: 180px;
background: #9B2222;
border-radius: 8px;
> div:first-child {
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
}
}
//.stopColor:hover {
// color: #fff;
// width: 180px;
// background: #9B2222;
// border-radius: 8px;
//
// > div:first-child {
// background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
// }
//}
</style>