833 lines
20 KiB
Vue
833 lines
20 KiB
Vue
<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 " :class="{ 'blue-state': isStartOne }">
|
||
<div :class="{ stopColor: !stateOne }">
|
||
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconOne)+')' }" class="state-icon"></div>
|
||
状态：{{ stateOne ? '运行' : '故障' }}
|
||
</div>
|
||
<div class="switch">
|
||
<div
|
||
id="auto"
|
||
:class="{ active: isStartOne }"
|
||
@click="isStartOne = true"
|
||
>
|
||
启动
|
||
</div>
|
||
<div
|
||
id="stop"
|
||
:class="{ active: !isStartOne }"
|
||
@click="isStartOne = 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="powerOne"
|
||
: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" :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="powerTwo"
|
||
:disabled="isSAuto2 === 'true'"
|
||
/></span>
|
||
</div>
|
||
</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>
|
||
|
||
<script setup>
|
||
import * as echarts from "echarts";
|
||
|
||
const props = defineProps({
|
||
list: Array,
|
||
fanData: Array
|
||
});
|
||
//当前功率
|
||
const powerOne = ref()
|
||
const powerTwo = ref()
|
||
const powerThree = ref(555)
|
||
//状态
|
||
const stateOne = ref()
|
||
const stateTwo = ref()
|
||
// 一号风机启动停止按钮
|
||
const isStartOne = ref(true);
|
||
const isStartTwo = ref(true);
|
||
// 功率是否自动
|
||
let isSAuto1 = ref("false");
|
||
let isSAuto2 = ref("false");
|
||
const socketData = ref()
|
||
// 一号风机echarts实例
|
||
const info1 = ref(null);
|
||
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)
|
||
}, {deep: true});
|
||
watch(() => props.list, (now) => {
|
||
console.log('socketDatawatch------------', now)
|
||
socketData.value.forEach(item => {
|
||
now.forEach(newItem => {
|
||
if (item.equipmentId === newItem.equipmentId) {
|
||
if(newItem.frequencyFeedback){
|
||
item.frequencyFeedback= newItem.frequencyFeedback
|
||
}
|
||
}
|
||
})
|
||
})
|
||
// socketData.value=now
|
||
}, {deep: true});
|
||
const stateIconOne = computed(() =>
|
||
stateOne.value
|
||
? "blue-state-icon.png"
|
||
: "red-state-icon.png"
|
||
);
|
||
const stateIconTwo = computed(() =>
|
||
stateTwo.value
|
||
? "blue-state-icon.png"
|
||
: "red-state-icon.png"
|
||
);
|
||
onMounted(() => {
|
||
handleOnMounted()
|
||
});
|
||
const getBasicData = (data) => {
|
||
let tranObj = {}
|
||
let tranArr = []
|
||
data.map(item => {
|
||
tranObj = {
|
||
equipmentId: item.equipmentId,
|
||
autoMode: item.autoMode,//自动模式
|
||
breakdown: item.breakdown,//故障
|
||
manualMode: item.manualMode,//手动模式
|
||
running: item.running,//启动,
|
||
frequencyFeedback: item.frequencyFeedback//当前功率
|
||
}
|
||
tranArr.push(tranObj)
|
||
})
|
||
socketData.value = tranArr
|
||
powerOne.value = socketData.value[0].frequencyFeedback
|
||
powerTwo.value = socketData.value[1].frequencyFeedback
|
||
stateOne.value = socketData.value[0].breakdown
|
||
stateTwo.value = socketData.value[1].breakdown
|
||
isStartOne.value = socketData.value[0].running
|
||
isStartTwo.value = socketData.value[1].running
|
||
handleOnMounted()
|
||
}
|
||
|
||
const handleOnMounted = () => {
|
||
Echarts_info1 = echarts.init(info1.value);
|
||
fan01_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: powerOne.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_info1.setOption(fan01_option);
|
||
// 挂载二号风机实例
|
||
Echarts_info2 = echarts.init(info2.value);
|
||
fan02_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: powerTwo.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_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) => {
|
||
return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep( .el-radio__input.is-checked + .el-radio__label) {
|
||
color: #38CAFB;
|
||
}
|
||
|
||
:deep( .el-radio__input.is-checked .el-radio__inner) {
|
||
border-color: #062247;
|
||
background: #38CAFB;
|
||
}
|
||
|
||
:deep( .el-radio__inner) {
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
:deep(.el-radio__inner::after) {
|
||
display: none;
|
||
}
|
||
|
||
input::-webkit-outer-spin-button,
|
||
input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
:deep( .el-radio__input) {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 2px solid #38cafb;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
:deep( .el-radio__label) {
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #38cafb;
|
||
line-height: 37px;
|
||
}
|
||
|
||
#fan_info {
|
||
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;
|
||
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: 33.3%;
|
||
display: flex;
|
||
font-size: 14px;
|
||
|
||
.echart {
|
||
height: 100%;
|
||
width: 30%;
|
||
margin: 0px 0px 0px 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.echart::after {
|
||
content: "Hz";
|
||
font-size: 24px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
line-height: 31px;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, 60%);
|
||
}
|
||
|
||
.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%;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.state {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
font-size: 26px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #38cafb;
|
||
line-height: 35px;
|
||
gap: 40px;
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 5px;
|
||
|
||
> div {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
margin-right: 4px;
|
||
transform: translateY(15%);
|
||
}
|
||
|
||
.state-icon {
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
|
||
.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: 6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #38cafb;
|
||
line-height: 37px;
|
||
}
|
||
|
||
.active {
|
||
color: white;
|
||
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;
|
||
}
|
||
}
|
||
</style>
|