+
-
+
-
一号风机
+
{{index+1}}号风机
-
-
+
+
- 状态:{{ stateOne ? '运行' : '故障' }}
+ 状态:{{ item.breakdown ? '运行' : '故障' }}
-
-
-
-
-
二号风机
-
-
-
-
-
- 状态:{{ stateTwo ? '运行' : '故障' }}
-
-
-
-
-
-
- 自动
- 手动
-
-
-
- 当前功率
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -190,13 +96,13 @@ watch(() => props.list, (now) => {
socketData.value.forEach(item => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
- if(newItem.frequencyFeedback){
- item.frequencyFeedback= newItem.frequencyFeedback
+ console.log('newItem',item,newItem)
+ if(newItem.frequencyFeedback&&item.frequencyFeedback){
+ // item.frequencyFeedback= newItem.frequencyFeedback
}
}
})
})
- // socketData.value=now
}, {deep: true});
const stateIconOne = computed(() =>
stateOne.value
@@ -208,8 +114,12 @@ const stateIconTwo = computed(() =>
? "blue-state-icon.png"
: "red-state-icon.png"
);
-onMounted(() => {
- handleOnMounted()
+onMounted(async () => {
+ setTimeout(() => {
+ nextTick(()=>{
+ handleOnMounted()
+ })
+ }, 100);
});
const getBasicData = (data) => {
let tranObj = {}
@@ -219,135 +129,133 @@ const getBasicData = (data) => {
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
- }
+ const chart = document.getElementsByClassName('echart');
+ console.log('chart',chart)
+ for(let i = 0; i < chart.length; i++ ){
+ Echarts_info1 = echarts.init(chart[i]);
+ fan01_option = {
+ series: [
+ {
+ type: "gauge",
+ startAngle: -120,
+ endAngle: -420,
+ pointer: {
+ show: 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",
+ 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
+ }
},
},
- ],
- axisLine: {
- lineStyle: {
- width: 3,
- color: [[1, "#155F7C"]],
+ max: 1000,
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: true,
+ splitNumber: 1,
+ length: 10,
+ },
+ axisLabel: {
+ show: false,
+ },
+ data: [
+ {
+ value: socketData.value[i].frequencyFeedback,
+ 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}",
},
},
- detail: {
- width: 100,
- height: 14,
- fontSize: 26,
- color: "inherit",
- formatter: "{value}",
- },
- },
- ],
+ ],
+ }
+ fan01_option && Echarts_info1.setOption(fan01_option);
}
- Echarts_info1.setOption(fan01_option);
+
+
// 挂载二号风机实例
Echarts_info2 = echarts.init(info2.value);
fan02_option = {