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:
邓洁
2023-12-13 23:02:01 +08:00
parent 0360c8c928
commit ecead4aa09
8 changed files with 415 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,6 +98,53 @@
</div>
</div>
</div>
<div class="fan-item">
<!-- echarts -->
<div class="echart" ref="info3"></div>
<!-- 风机名称 -->
<div class="fan-name">三号风机</div>
<!-- 功能 -->
<div class="option-nav">
<div class="state" :class="{ 'blue-state': isStartTwo }">
<div :class="{ stopColor: !stateTwo }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
状态：{{ stateTwo ? '运行' : '故障' }}
</div>
<div class="switch">
<div
:class="{ active: isStartTwo }"
@click="isStartTwo = true"
>
启动
</div>
<div
:class="{ active: !isStartTwo }"
@click="isStartTwo = 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="powerThree"
:disabled="isSAuto2 === 'true'"
/></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -112,6 +159,7 @@ const props = defineProps({
//当前功率
const powerOne = ref()
const powerTwo = ref()
const powerThree = ref(555)
//状态
const stateOne = ref()
const stateTwo = ref()
@@ -128,8 +176,11 @@ let Echarts_info1 = null;
// 二号风机实例
const info2 = ref(null);
let Echarts_info2 = null;
const info3 = ref(null);
let Echarts_info3 = null;
let fan01_option = reactive();
let fan02_option = reactive();
let fan03_option = reactive();
watch(() => props.fanData, (now) => {
getBasicData(now.frequencyChangerList)
@@ -410,6 +461,119 @@ const handleOnMounted = () => {
],
}
Echarts_info2.setOption(fan02_option);
//三号风机
Echarts_info3 = echarts.init(info3.value);
fan03_option = {
series: [
{
type: "gauge",
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
},
max: 1000,
splitLine: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: powerThree.value,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
}
Echarts_info3.setOption(fan03_option);
}
const getImageUrl = (name) => {
@@ -463,18 +627,17 @@ input[type="number"] {
}
#fan_info {
height: 521px;
height: 795px;
width: 830px;
position: absolute;
z-index: 100;
top: 184px;
left: 68px;
padding: 10px;
background-image: url(../../../assets/images/fanInfo/bg.png);
//clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
color: #2fb0df;
box-sizing: border-box;
.title {
width: 40%;
text-align: left;
@@ -491,7 +654,7 @@ input[type="number"] {
height: calc(100% - 30px);
.fan-item {
height: 50%;
height: 33.3%;
display: flex;
font-size: 14px;