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

feat : 新增echarts中指定日期展示及细节优化

Browse Source
This commit is contained in:
odjbin
2024-02-28 18:08:44 +08:00
parent 59aa2a92d1
commit ea4f72780f
19 changed files with 810 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,70 +5,60 @@
<div class="loading" v-if="loading===0"></div>
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div>
<div v-else class="fans">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
<div>
<!-- echarts -->
<div class="echart"></div>
<!-- 风机名 -->
<div class="fan-name">{{ changeNum(item) }}号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div>
<div class="state">
<div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
<div class="state">
<div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
</div>
<div class="switch">
<div
id="auto"
:class="{ active: item.running }"
@click="item.running = true;editOperate(item,'启动')"
>
启动
</div>
<div class="switch">
<div
id="auto"
:class="{ active: item.running }"
@click="item.running = true;editOperate(item,'启动')"
>
启动
</div>
<div
id="stop"
:class="{ active: !item.running }"
@click="item.running = false;editOperate(item,'停止')"
>
停止
</div>
<div
id="stop"
:class="{ active: !item.running }"
@click="item.running = false;editOperate(item,'停止')"
>
停止
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="item.autoMode" @change="changeModel(item)">
<el-radio :label="true">自动</el-radio>
<el-radio :label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power" title="输入完成后, 请回车进行修改">
<div>
<span style="color: white">给定频率</span>
<!-- <span class="units"-->
<!-- ><input-->
<!-- type="number"-->
<!-- min="0"-->
<!-- v-model="item.frequencySetting"-->
<!-- onchange="changeFrequency(item)"-->
<!-- :disabled="item.autoMode"-->
<!-- /></span>-->
<el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
title="输入完成后, 请回车进行修改"
@change="changeFrequency(item)" @focus="item.showTooltip=true"
@blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}">
<template #suffix>
<span>Hz</span>
</template>
</el-input>
</div>
<!-- <span v-if="item.showTooltip">-->
<!-- 正在输入中...-->
<!-- </span>-->
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="item.autoMode" @change="changeModel(item)">
<el-radio :label="true">自动</el-radio>
<el-radio :label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power" title="输入完成后, 请回车进行修改">
<span style="color: white">给定频率</span>
<!-- <span class="units"-->
<!-- ><input-->
<!-- type="number"-->
<!-- min="0"-->
<!-- v-model="item.frequencySetting"-->
<!-- onchange="changeFrequency(item)"-->
<!-- :disabled="item.autoMode"-->
<!-- /></span>-->
<el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
title="输入完成后, 请回车进行修改" @change="changeFrequency(item)" @focus="item.showTooltip=true"
@blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}"
@submit="changeFrequency(item)">
<template #suffix>
<span>Hz</span>
</template>
</el-input>
</div>
</div>
</div>
@@ -107,6 +97,8 @@
<div style="width: 1px;"></div>
</div>
<div class="time-select">
<choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
v-model="selectTimeButton"
@@ -124,6 +116,8 @@
import * as echarts from "echarts";
import FanInfoItem from "./FanInfoItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import ChooseTime from "@/components/ChooseTime/index.vue"
import ChooseMonth from "@/components/ChooseMonth/index.vue"
import {
editFrequency,
editFrequencyModelSwitch,
@@ -134,6 +128,8 @@ import {ElMessage, ElMessageBox} from "element-plus";
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const dayValue = ref('');
const monthValue = ref('');
const props = defineProps({
list: Array,
tunnelId: Number,
@@ -206,14 +202,29 @@ watch(() => props.list, (now) => {
})
handleOnMounted()
}, {deep: true});
const timeSelect = (index) => {
if (index === 0) {
getFanInfo(openEquipmentId.value, 'years')
} else if (index === 1) {
getFanInfo(openEquipmentId.value, 'month')
} else if (index === 2) {
getFanInfo(openEquipmentId.value, 'day')
const daySelect = (val) => {
console.log('daySelect')
dayValue.value = val
getFanInfo(openEquipmentId.value, 'day',val)
}
const monthSelect = (val) => {
monthValue.value = val
getFanInfo(openEquipmentId.value, 'month',val)
}
const changeDate = (index) => {
switch (index) {
case 0:
return 'years'
case 1:
return 'month'
case 2:
return 'day'
}
}
const timeSelect = (index) => {
dayValue.value = ''
monthValue.value = ''
getFanInfo(openEquipmentId.value, changeDate(index))
};
const packageData = (item, type, flag) => {
let number = 0
@@ -238,49 +249,67 @@ const packageData = (item, type, flag) => {
}
//启动/停止
const editOperate = (item, type) => {
ElMessageBox.confirm(`是否${type}该风机？`, '系统提示', {
ElMessageBox.confirm(`确认${type}${changeNum(item)}号风机吗？`, '系统提示', {
type: 'warning',
closeOnClickModal: false
}).then(() => {
const data = packageData(item, item.running)
editFrequencyOperationSwitch(data).then(res => {
console.log('修改风机启动', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.error(res.msg)
}
})
})
}).catch(() => {
item.running = !item.running
});
}
const changeFrequency = (item) => {
console.log('修改频率')
const data = packageData(item, item.frequencySetting, true)
editFrequency(data).then(res => {
console.log('修改风机频率', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
})
ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的频率为${item.frequencySetting}Hz吗？`, '系统提示', {
type: 'warning',
closeOnClickModal: false
}).then(() => {
const data = packageData(item, item.frequencySetting, true)
editFrequency(data).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
})
}).catch(() => {
// item.running=!item.running
});
}
const changeModel = (item) => {
const data = packageData(item, item.autoMode)
editFrequencyModelSwitch(data).then(res => {
console.log('修改自动模式', res)
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
})
let flag
if (item.autoMode) {
flag = '自动'
} else {
flag = '手动'
}
ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗？`, '系统提示', {
type: 'warning',
closeOnClickModal: false
}).then(() => {
const data = packageData(item, item.autoMode)
editFrequencyModelSwitch(data).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
} else {
ElMessage.warning(res.msg)
}
})
}).catch(() => {
item.autoMode = !item.autoMode
});
}
const getFanInfo = (equipmentId, type = 'day') => {
const getFanInfo = (equipmentId, type = 'day', time = '') => {
isVisited.value = true
showLoading.value = true
getFanEchartsInfo(equipmentId, type).then(res => {
getFanEchartsInfo(equipmentId, time, type).then(res => {
if (res?.code === 1000) {
showLoading.value = false
nextTick(() => {
@@ -290,6 +319,7 @@ const getFanInfo = (equipmentId, type = 'day') => {
})
}
const handleOpenChart = (item) => {
selectTimeButton.value = 2
openEquipmentId.value = item.equipmentId
getFanInfo(item.equipmentId, 'day')
if (item.equipmentId === 22) {
@@ -330,7 +360,6 @@ const getImage = (type) => {
}
}
const changeNum = (item) => {
console.log('1号变频器')
switch (item.equipmentId) {
case 22:
return '一';
@@ -450,7 +479,7 @@ const handleOnMounted = () => {
},
data: [
{
value: socketData.value[i].frequencySetting,
value: socketData.value[i].frequencyFeedback,
fontSize: 2100,
detail: {
valueAnimation: true,
@@ -543,7 +572,7 @@ const initChart = (type, valueA, valueB, valueC) => {
},
dataZoom: [{
type: 'inside',
},
},
{
type: 'slider',
top: 1050,
@@ -809,173 +838,157 @@ input[type="number"] {
}
.option-nav {
//display: flex;
//flex-direction: column;
width: 70%;
display: flex;
align-items: center;
> div:first-child {
margin-top: 48px;
.state {
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 28px;
color: #38cafb;
line-height: 35px;
gap: 40px;
.state {
flex: 1;
.stopColor {
background-color: red !important;
}
.blue-state {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 28px;
color: #38cafb;
line-height: 35px;
gap: 40px;
align-items: center;
height: 45px;
margin-right: 15px;
color: #fff;
background-color: #3eab3f;
padding-left: 10px;
border-radius: 8px;
margin-left: -5px;
.stopColor {
background-color: red !important;
.state-icon {
width: 28px;
height: 28px;
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
margin-right: 10px;
}
.blue-state {
display: flex;
align-items: center;
height: 45px;
margin-right: 15px;
color: #fff;
background-color: #3eab3f;
padding-left: 10px;
border-radius: 8px;
margin-left: -5px;
.state-icon {
width: 28px;
height: 28px;
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
margin-right: 10px;
}
.fan-state {
color: #FFFFFF;
}
}
.switch {
display: flex;
width: 165px;
height: 45px;
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-weight: bold;
color: #127399;
line-height: 40px;
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
.fan-state {
color: #FFFFFF;
}
}
.power {
flex: 1.3;
.switch {
display: flex;
flex-direction: column;
justify-content: center;
//padding: 0 20px;
font-size: 28px;
color: #38cafb;
line-height: 37px;
gap: 40px;
width: 165px;
height: 45px;
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-weight: bold;
color: #127399;
line-height: 40px;
.check-box {
display: flex;
align-items: center;
justify-content: center;
//margin-left: 20px;
}
.edit-power {
margin-top: 10px;
display: flex;
flex-direction: column;
.changeMargin {
}
> div:first-child {
display: flex;
> span:first-child {
white-space: pre;
margin-right: 14px;
}
:deep(.is-focus) {
.el-input__inner {
font-weight: normal !important;
color: #fff !important;
}
}
:deep(.el-input__wrapper) {
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;
font-size: 30px;
font-weight: bold;
color: #38CAFB;
}
.el-input__suffix-inner {
font-size: 30px;
color: #38CAFB;
line-height: 40px;
font-weight: bold;
}
}
}
//.units {
// position: relative;
//}
//
//.units::after {
// content: "Hz";
// position: absolute;
// right: 6px;
// top: 50%;
// transform: translateY(-50%);
// font-size: 28px;
// color: #38cafb;
// line-height: 37px;
//}
//
//input {
// width: 130px;
// height: 44px;
// border: 2px solid #0f82af;
// background: transparent;
// margin-left: 14px;
// outline: none;
// font-size: 28px;
// font-weight: bold;
// color: #38cafb;
// line-height: 37px;
//}
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
}
}
.power {
flex: 1.3;
display: flex;
flex-direction: column;
justify-content: center;
//padding: 0 20px;
font-size: 28px;
color: #38cafb;
line-height: 37px;
gap: 40px;
.check-box {
display: flex;
align-items: center;
justify-content: center;
//margin-left: 20px;
}
.edit-power {
margin-top: 10px;
display: flex;
//flex-direction: column;
> span:first-child {
white-space: pre;
margin-right: 14px;
}
:deep(.is-focus) {
.el-input__inner {
font-weight: normal !important;
color: #fff !important;
}
}
:deep(.el-input__wrapper) {
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;
font-size: 30px;
font-weight: bold;
color: #38CAFB;
}
.el-input__suffix-inner {
font-size: 30px;
color: #38CAFB;
line-height: 40px;
font-weight: bold;
}
}
//.units {
// position: relative;
//}
//
//.units::after {
// content: "Hz";
// position: absolute;
// right: 6px;
// top: 50%;
// transform: translateY(-50%);
// font-size: 28px;
// color: #38cafb;
// line-height: 37px;
//}
//
//input {
// width: 130px;
// height: 44px;
// border: 2px solid #0f82af;
// background: transparent;
// margin-left: 14px;
// outline: none;
// font-size: 28px;
// font-weight: bold;
// color: #38cafb;
// line-height: 37px;
//}
}
}
}
}