邓洁 : 风机接口部分数据
This commit is contained in:
dengj
@@ -9,23 +9,23 @@
|
||||
<div class="fan-name">一号风机</div>
|
||||
<!-- 功能 -->
|
||||
<div class="option-nav">
|
||||
<div class="state " :class="{ 'blue-state': isStart }">
|
||||
<div :class="{ stopColor: !isStart }">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
|
||||
状态：{{ state }}
|
||||
<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: isStart }"
|
||||
@click="isStart = true"
|
||||
:class="{ active: isStartOne }"
|
||||
@click="isStartOne = true"
|
||||
>
|
||||
启动
|
||||
</div>
|
||||
<div
|
||||
id="stop"
|
||||
:class="{ active: !isStart }"
|
||||
@click="isStart = false"
|
||||
:class="{ active: !isStartOne }"
|
||||
@click="isStartOne = false"
|
||||
>
|
||||
停止
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@
|
||||
><input
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="fan01_option.series[0].data[0].value"
|
||||
v-model="powerOne"
|
||||
:disabled="isSAuto1 === 'true'"
|
||||
/></span>
|
||||
</div>
|
||||
@@ -58,21 +58,21 @@
|
||||
<div class="fan-name">二号风机</div>
|
||||
<!-- 功能 -->
|
||||
<div class="option-nav">
|
||||
<div class="state" :class="{ 'blue-state': isStart2 }">
|
||||
<div :class="{ stopColor: !isStart2 }">
|
||||
<div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
|
||||
状态：{{ state2 }}
|
||||
<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: isStart2 }"
|
||||
@click="isStart2 = true"
|
||||
:class="{ active: isStartTwo }"
|
||||
@click="isStartTwo = true"
|
||||
>
|
||||
启动
|
||||
</div>
|
||||
<div
|
||||
:class="{ active: !isStart2 }"
|
||||
@click="isStart2 = false"
|
||||
:class="{ active: !isStartTwo }"
|
||||
@click="isStartTwo = false"
|
||||
>
|
||||
停止
|
||||
</div>
|
||||
@@ -91,7 +91,7 @@
|
||||
><input
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="fan02_option.series[0].data[0].value"
|
||||
v-model="powerTwo"
|
||||
:disabled="isSAuto2 === 'true'"
|
||||
/></span>
|
||||
</div>
|
||||
@@ -104,10 +104,23 @@
|
||||
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
fanData:Array
|
||||
fanData: Array
|
||||
});
|
||||
//当前功率
|
||||
const powerOne = ref()
|
||||
const powerTwo = ref()
|
||||
//状态
|
||||
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);
|
||||
@@ -115,269 +128,36 @@ let Echarts_info1 = null;
|
||||
// 二号风机实例
|
||||
const info2 = ref(null);
|
||||
let Echarts_info2 = null;
|
||||
const 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: 50,
|
||||
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}",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const option2 = {
|
||||
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: 500,
|
||||
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}",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const fan01_option = reactive(option);
|
||||
const fan02_option = reactive(option2);
|
||||
// 一号风机启动停止按钮
|
||||
const isStart = ref(true);
|
||||
const isStart2 = ref(false);
|
||||
// 功率是否自动
|
||||
let isSAuto1 = ref("false");
|
||||
let isSAuto2 = ref("false");
|
||||
let fan01_option = reactive();
|
||||
let fan02_option = reactive();
|
||||
|
||||
watch(() => props.fanData, (now) => {
|
||||
getBasicData(now.frequencyChangerList)
|
||||
}, {deep: true});
|
||||
watch(() => props.list, (now) => {
|
||||
console.log('socketDatawatch', now, old)
|
||||
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});
|
||||
|
||||
watch(fan01_option, () => {
|
||||
Echarts_info1.setOption(fan01_option);
|
||||
});
|
||||
watch(fan02_option, () => {
|
||||
Echarts_info2.setOption(fan02_option);
|
||||
});
|
||||
|
||||
let state = computed(() => {
|
||||
return isStart.value ? "运行" : "故障";
|
||||
// return socketData[0].running ? "运行" : "故障";
|
||||
});
|
||||
const stateIcon1 = computed(() =>
|
||||
isStart.value
|
||||
const stateIconOne = computed(() =>
|
||||
stateOne.value
|
||||
? "blue-state-icon.png"
|
||||
: "red-state-icon.png"
|
||||
);
|
||||
|
||||
let state2 = computed(() => {
|
||||
return isStart2.value ? "运行" : "故障";
|
||||
});
|
||||
const stateIcon2 = computed(() =>
|
||||
isStart2.value
|
||||
const stateIconTwo = computed(() =>
|
||||
stateTwo.value
|
||||
? "blue-state-icon.png"
|
||||
: "red-state-icon.png"
|
||||
);
|
||||
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
handleOnMounted()
|
||||
});
|
||||
const getBasicData = (data) => {
|
||||
@@ -385,18 +165,250 @@ const getBasicData = (data) => {
|
||||
let tranArr = []
|
||||
data.map(item => {
|
||||
tranObj = {
|
||||
equipmentId: item.equipmentId
|
||||
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=()=> {
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -625,9 +637,8 @@ input[type="number"] {
|
||||
|
||||
.units::after {
|
||||
content: "Hz";
|
||||
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 28px;
|
||||
|
||||
Reference in New Issue
Block a user