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

唐润平：UI显示面板开发起步版

Browse Source
This commit is contained in:
trp
2023-12-08 16:12:55 +08:00
parent 3edbf7312f
commit e20b7c1002
34 changed files with 1202 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

438
src/components/content/fanInfo/FanInfo.vue Normal file
View File

@@ -0,0 +1,438 @@
<template>
<div id="fan_info">
<div class="title">风机</div>
<div class="fans">
<div class="fan-item">
<!-- echarts -->
<div class="echart" ref="info1"></div>
<!-- 风机名 -->
<div class="fan-name">一号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state">
<div :class="{ stopColor: !isStart }">
<span> <img :src="stateIcon1" alt="" />状态：</span
><span>{{ state }}</span>
</div>
<div class="switch">
<div
id="auto"
:class="{ active: isStart }"
@click="isStart = true"
>
启动
</div>
<div
id="stop"
:class="{ active: !isStart }"
@click="isStart = false"
>
停止
</div>
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="isSAuto1" class="radio-group">
<el-radio label="true">自动</el-radio>
<el-radio label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power">
<span style="color: white">当前功率</span>
<span class="units"
><input
type="number"
min="0"
v-model="fan01_option.series[0].data[0].value"
:disabled="isSAuto1 === 'true'"
/></span>
</div>
</div>
</div>
</div>
<div class="fan-item">
<!-- echarts -->
<div class="echart" ref="info2"></div>
<!-- 风机名称 -->
<div class="fan-name">二号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state">
<div :class="{ stopColor: !isStart2 }">
<span><img :src="stateIcon2" alt="" />状态：{{ state2 }}</span
><span></span>
</div>
<div class="switch">
<div
id="auto"
:class="{ active: isStart2 }"
@click="isStart2 = true"
>
启动
</div>
<div
id="stop"
:class="{ active: !isStart2 }"
@click="isStart2 = false"
>
停止
</div>
</div>
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="isSAuto2" class="radio-group">
<el-radio label="true">自动</el-radio>
<el-radio label="false">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power">
<span style="color: white">当前功率</span>
<span class="units"
><input
type="number"
min="0"
v-model="fan02_option.series[0].data[0].value"
:disabled="isSAuto2 === 'true'"
/></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, reactive, onMounted, computed, watch } from "vue";
onMounted(handleOnMounted);
// 一号风机echarts实例
const info1 = ref(null);
let Echarts_info1 = null;
// 二号风机实例
const info2 = ref(null);
let Echarts_info2 = null;
const option = {
series: [
{
type: "gauge",
progress: {
show: true,
width: 15,
lineStyle: {
color: "yellow",
},
},
axisLine: {
lineStyle: {
width: 5,
},
},
axisTick: {
show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 1,
color: "#099",
},
},
axisLabel: {
show: false,
distance: 25,
color: "#999",
fontSize: 20,
},
pointer: {
show: false,
},
anchor: {
show: false,
showAbove: true,
size: 0,
itemStyle: {
borderWidth: 10,
},
},
title: {
show: true,
},
detail: {
valueAnimation: true,
fontSize: 40,
offsetCenter: [0, "0%"],
formatter: "{value}Hz",
color: "white",
},
data: [
{
value: 10,
},
],
},
],
};
const option2 = {
series: [
{
type: "gauge",
progress: {
show: true,
width: 15,
lineStyle: {
color: "yellow",
},
},
axisLine: {
lineStyle: {
width: 5,
},
},
axisTick: {
show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 1,
color: "#099",
},
},
axisLabel: {
show: false,
distance: 25,
color: "#999",
fontSize: 20,
},
pointer: {
show: false,
},
anchor: {
show: false,
showAbove: true,
size: 0,
itemStyle: {
borderWidth: 10,
},
},
title: {
show: true,
},
detail: {
valueAnimation: true,
fontSize: 40,
offsetCenter: [0, "0%"],
formatter: "{value}Hz",
color: "white",
},
data: [
{
value: 10,
},
],
},
],
};
const fan01_option = reactive(option, { deep: true });
const fan02_option = reactive(option2, { deep: true });
function handleOnMounted() {
Echarts_info1 = echarts.init(info1.value);
Echarts_info1.setOption(fan01_option);
// 挂载二号风机实例
Echarts_info2 = echarts.init(info2.value);
Echarts_info2.setOption(fan02_option);
}
watch(fan01_option, () => {
Echarts_info1.setOption(fan01_option);
});
watch(fan02_option, () => {
Echarts_info2.setOption(fan02_option);
});
// 一号风机启动停止按钮
const isStart = ref(true);
let state = computed(() => {
return isStart.value ? "启动" : "停止";
});
const stateIcon1 = computed(() =>
isStart.value
? "/images/fanInfo/blue-state-icon.png"
: "/images/fanInfo/red-state-icon.png"
);
const isStart2 = ref(true);
let state2 = computed(() => {
return isStart2.value ? "启动" : "停止";
});
const stateIcon2 = computed(() =>
isStart2.value
? "/images/fanInfo/blue-state-icon.png"
: "/images/fanInfo/red-state-icon.png"
);
let is = ref("isInput");
// 功率是否自动
let isSAuto1 = ref("false");
let isSAuto2 = ref("false");
</script>
<style lang="scss" scoped>
::v-deep .el-radio__input {
width: 24px;
height: 24px;
border: 2px solid #38cafb;
border-radius: 50%;
text-align: center;
}
::v-deep .el-radio__label {
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
#fan_info {
height: 521px;
width: 830px;
position: absolute;
z-index: 100;
top: 184px;
left: 68px;
padding: 10px;
background-image: url(../../../assets/images/fanInfo/bg.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
//clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
color: #2fb0df;
.title {
width: 40%;
text-align: left;
font-size: 20px;
padding: 0px 0px 0px 62px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 42px;
}
.fans {
height: calc(100% - 30px);
.fan-item {
height: 50%;
display: flex;
font-size: 14px;
.echart {
height: 100%;
width: 30%;
margin: 0px 0px 0px 10px;
}
.fan-name {
width: 39px;
height: 140px;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
text-align: center;
margin-right: 42px;
transform: translateY(33%);
}
.option-nav {
display: flex;
width: 70%;
.state {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 35px;
gap: 33px;
img {
margin-right: 4px;
transform: translateY(15%);
}
.switch {
display: flex;
width: 160px;
height: 40px;
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #127399;
line-height: 35px;
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
}
}
.power {
flex: 1.3;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 20px;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
gap: 33px;
.edit-power {
margin-top: 10px;
input {
width: 130px;
height: 44px;
border: 2px solid #0f82af;
background: transparent;
margin-left: 14px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #38cafb;
line-height: 37px;
}
}
}
}
}
}
}
.units {
position: relative;
}
.units::after {
content: "Hz";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 28px;
font-family: MicrosoftYaHei;
color: #38cafb;
line-height: 37px;
}
.active {
color: white;
background: #0f7da9;
}
.stopColor {
color: red;
}
</style>