首页调整

src/utils/threejs/main.worker.ts

@@ -20,7 +20,7 @@ export function initModalWorker() {
     // 'fc/wall_2023-10-11.glb',
     // 'fc/ddFc_2023-10-11.glb',
     // 'fc/sdFc_2023-10-19.glb',
-    // 'cf/lmcf_2023-06-02.glb',
+    'cf/lmcf_2023-06-02.glb',
     'fc/ddFc_2023-06-02.glb',
     'fc/sdFc_2023-06-02.glb',
     'cf/lmcfSide_2023-06-02.glb',

src/views/vent/home/clique/components/EchartLineCharacter3.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%; height: 100%">
-    <div :id="setid" style="width: 100%; height: 100%"></div>
+    <!-- <div id="echartsMain" style="width: 100%; height: 100%"></div> -->
   </div>
 </template>
 
@@ -12,323 +12,335 @@
 
   let props = defineProps({
     setid: String,
-    });
+  });
+  
+  let myChart=ref<any>(null)
+  let title1=ref<any>('')
+  let title2=ref('')
+  let legend=reactive(['风阻', '负压'])
+  let min= 0
+  let yname=ref('负压(Pa)')
+  let xname=ref('风量\r\n(m³/min)\r\n')
+  let ymax=ref( 3000)
+  let ymax2=ref(200)
+  let xMax=ref(300)
+  let xMin=ref(0)
+  let xdata1=reactive([])
+  let xdata2=reactive([])
+  let xdata3=reactive([])
+  let xdata4=reactive([])
+  let xdata5=reactive([])
+  let xdata6=reactive([])
+  let ynametextcolor=ref( '#3df6ff')
+  let linecolor=ref( '#0092d5')
+  let gridlinecolor=ref('#006c9d')
+  let textcolor=ref('#ffffff')
+  let myWidth=ref( window.innerWidth - 500 + 'px')
+  let padding=reactive( ['auto', 'auto', '40', '50'])
 
-    let myChart=ref<any>(null)
-       let title1=ref<any>('')
-        let title2=ref('')
-        let legend=reactive(['风阻', '负压'])
-        let min= 0
-        let yname=ref('负压(Pa)')
-        let xname=ref('风量\r\n(m³/min)\r\n')
-        let ymax=ref( 3000)
-        let ymax2=ref(200)
-        let xMax=ref(300)
-        let xMin=ref(0)
-        let xdata1=reactive([])
-        let xdata2=reactive([])
-        let xdata3=reactive([])
-        let xdata4=reactive([])
-        let xdata5=reactive([])
-        let xdata6=reactive([])
-        let ynametextcolor=ref( '#3df6ff')
-        let linecolor=ref( '#0092d5')
-        let gridlinecolor=ref('#006c9d')
-        let textcolor=ref('#ffffff')
-        let myWidth=ref( window.innerWidth - 500 + 'px')
-        let padding=reactive( ['auto', 'auto', '40', '50'])
 
+        // 风速曲线图各种参数设置
+  function optionFun() {
+    var option = {
+      title: {
+        textStyle: {
+          color: textcolor.value,
+          fontSize: 14 // 字体颜色
+        },
+        text:title.value
+      },
+      grid: {
+        top: '20%',
+        left: '3%',
+        right: '16%',
+        bottom: '5%',
+        containLabel: true
+      },
+      legend: {
+        // x:'right',
+        top: '1%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 14// 字体颜色
+        },
+        data: legend
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        textStyle: {
+          color: textcolor.value,
+          fontSize: 14 // 字体颜色
+        },
+        formatter: function (params, ticket, callback) {
+          console.log(params,'params1')
+          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+          var res = '风量' + ' : ' + params.data[0]*60 + '(m³/min)<br/>'
+          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>'
+          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
+          // lxh
+          // var res = '风量' + ' : ' + 13600 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + (13600 / 60).toFixed(2) + '(m³/s)<br/>'
+          // res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
 
-            // 风速曲线图各种参数设置
-     function optionFun() {
-        var option = {
-          title: {
-            textStyle: {
-              color: textcolor.value,
-              fontSize: 14 // 字体颜色
-            },
-            text:title.value
-          },
-          grid: {
-            top: '20%',
-            left: '3%',
-            right: '16%',
-            bottom: '5%',
-            containLabel: true
-          },
-          legend: {
-            // x:'right',
-            top: '1%',
-            textStyle: {
-              color: '#ffffff',
-              fontSize: 14// 字体颜色
-            },
-            data: legend
-          },
-          tooltip: {
-            backgroundColor: 'rgba(0,0,0,0.8)',
-            textStyle: {
-              color: textcolor.value,
-              fontSize: 14 // 字体颜色
-            },
-            formatter: function (params, ticket, callback) {
-              console.log(params,'params1')
-              // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
-              // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
-              var res = '风量' + ' : ' + params.data[0]*60 + '(m³/min)<br/>'
-              res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>'
-              res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
-              // lxh
-              // var res = '风量' + ' : ' + 13600 + '(m³/min)<br/>'
-              // res = res + '&emsp;&emsp;&emsp;' + (13600 / 60).toFixed(2) + '(m³/s)<br/>'
-              // res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>'
-
-              return res
-            },
-            trigger: 'item'
-          },
-          color: ['#00bb00',
-            '#ffbb00',
-            '#ff0000',
-            '#0000ff'],
-          xAxis: [{
-            name: xname.value,
-            nameTextStyle: {
-              color: ynametextcolor.value,
-              fontSize: 14
-            },
-            axisLine: {
-              lineStyle: {
-                color: linecolor.value,
-                width: 1 // 这里是为了突出显示加上的
-              }
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: gridlinecolor.value,
-                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
-              }
-            },
-            axisLabel: {
-              show: true,
-              position: 'bottom',
-              textStyle: {
-                color:textcolor.value,
-                fontSize: 14
-              }
-            },
-            type: 'value',
-            min: xMin.value * 60,
-            max: xMax.value * 60
-          },
-          {
-            name: '',
-            nameTextStyle: {
-              color: ynametextcolor.value,
-              fontSize: 14
-            },
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color:linecolor.value,
-                width: 1 // 这里是为了突出显示加上的
-              }
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: gridlinecolor.value,
-                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
-              }
-            },
-            axisLabel: {
-              show: false,
-              textStyle: {
-                color: textcolor.value,
-                fontSize: 14
-              }
-            },
-            type: 'value',
-            min: xMin.value,
-            max: xMax.value
+          return res
+        },
+        trigger: 'item'
+      },
+      color: ['#00bb00',
+        '#ffbb00',
+        '#ff0000',
+        '#0000ff'],
+      xAxis: [{
+        name: xname.value,
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisLine: {
+          lineStyle: {
+            color: linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
+          }
+        },
+        splitLine: {
+          show: false, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: true,
+          position: 'bottom',
+          textStyle: {
+            color:textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: xMin.value * 60,
+        max: xMax.value * 60
+      },
+      {
+        name: '',
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color:linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
           }
-          ],
-          yAxis: [{
-            name: yname.value,
-            splitNumber: 5,
-            nameTextStyle: {
-              color: ynametextcolor.value,
-              fontSize: 14
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color:linecolor.value,
-                width: 1 // 这里是为了突出显示加上的
-              }
-            },
-            splitLine: {
-              show: true, // 网格线
-              lineStyle: {
-                color: gridlinecolor.value,
-                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
-              }
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: textcolor.value,
-                fontSize: 14
-              }
-            },
-            type: 'value',
-            min: 0,
-            max: ymax.value
+        },
+        splitLine: {
+          show: false, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: false,
+          textStyle: {
+            color: textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: xMin.value,
+        max: xMax.value
+      }
+      ],
+      yAxis: [{
+        name: yname.value,
+        splitNumber: 5,
+        nameTextStyle: {
+          color: ynametextcolor.value,
+          fontSize: 14
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color:linecolor.value,
+            width: 1 // 这里是为了突出显示加上的
           }
-          ],
-          series: [
-            {
-              name: legend[0],
-              yAxisIndex: 0,
-              xAxisIndex: 1,
-              type: 'line',
-              smooth: true,
-              animationDuration: 1000,
-              showSymbol: false,
-              data: xdata1
-            },
-            {
-              name: legend[1],
-              yAxisIndex: 0,
-              xAxisIndex: 1,
-              type: 'line',
-              smooth: true,
-              animationDuration: 1000,
-              showSymbol: false,
+        },
+        splitLine: {
+          show: true, // 网格线
+          lineStyle: {
+            color: gridlinecolor.value,
+            type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
+          }
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: textcolor.value,
+            fontSize: 14
+          }
+        },
+        type: 'value',
+        min: 0,
+        max: ymax.value
+      }
+      ],
+      series: [
+        {
+          name: legend[0],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+          data: xdata1
+        },
+        {
+          name: legend[1],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
 
-              data: xdata2
-            },
+          data: xdata2
+        },
 
-            {
-              name: legend[2],
-              yAxisIndex: 0,
-              xAxisIndex: 1,
-              type: 'line',
-              smooth: true,
-              animationDuration: 1000,
-              symbolSize: 10,
-              data: xdata3
-            }
-            // {
-            //   name: this.legend[3],
-            //   yAxisIndex: 0,
-            //   type: "line",
-            //   smooth: true,
-            //   animationDuration: 1000,
-            //   showSymbol: false,
-            //   data: this.xdata4
-            // },
-          ]
+        {
+          name: legend[2],
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          symbolSize: 10,
+          data: xdata3
         }
-        // 将option返回
-        return option
-      }
+        // {
+        //   name: this.legend[3],
+        //   yAxisIndex: 0,
+        //   type: "line",
+        //   smooth: true,
+        //   animationDuration: 1000,
+        //   showSymbol: false,
+        //   data: this.xdata4
+        // },
+      ]
+    }
+    // 将option返回
+    return option
+  }
 
 
-      function initCharts () {
-        // 图表控件
-        myChart.value = echarts.init(document.getElementById(props.setid))
-        // document.getElementById(this.setid).style.width = this.myWidth;
-        // document.getElementById(this.setid).style.height = "100px";
-        // 每个仪表盘参数设置
-      // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption( optionFun())
-      }
-      setYMax(data, data2) {
-        ymax.value = data
-        ymax2.value = data2
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setLegend (data) {
-        legend = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXMax (data) {
-        xMax.value = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXMin (data) {
-        xMin.value = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXData1 (data) {
-        xdata1 = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXData2 (data) {
-        xdata2 = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXData3 (data) {
-        xdata3 = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setXData4 (data) {
-        xdata4 = data
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      clear () {
-        myChart.value.clear()
-      }
-      setTextColor (color) {
-        textcolor.value = color
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      setTitle (title1) {
-        title1.value = title1
-        // let option = optionFun()
-        // 绘制图表，设置参数信息
-        myChart.value.setOption(optionFun())
-      }
-      resize () {
-        myChart.value.resize()
-      }
+  function initCharts () {
+    // 图表控件
+    myChart.value = echarts.init(document.getElementById('echartsMain'))
+    // document.getElementById(this.setid).style.width = this.myWidth;
+    // document.getElementById(this.setid).style.height = "100px";
+    // 每个仪表盘参数设置
+  // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption( optionFun())
+  }
+  function setYMax(data, data2) {
+    ymax.value = data
+    ymax2.value = data2
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setLegend (data) {
+    legend = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXMax (data) {
+    xMax.value = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXMin (data) {
+    xMin.value = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData(data) {
+    xdata1 = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData1 (data) {
+    xdata1 = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData2 (data) {
+    xdata2 = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData3 (data) {
+    xdata3 = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setXData4 (data) {
+    xdata4 = data
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function clear () {
+    myChart.value.clear()
+  }
+  function setTextColor (color) {
+    textcolor.value = color
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function setTitle (title1) {
+    title1.value = title1
+    // let option = optionFun()
+    // 绘制图表，设置参数信息
+    myChart.value.setOption(optionFun())
+  }
+  function resize () {
+    myChart.value.resize()
+  }
+
+// computed: {
+//   scale () {
+//     return [
+//       {
+//         dataKey: 'y',
+//         alias: this.yaxisText
+//       }
+//     ]
+//   }
+// },
 
-    // computed: {
-    //   scale () {
-    //     return [
-    //       {
-    //         dataKey: 'y',
-    //         alias: this.yaxisText
-    //       }
-    //     ]
-    //   }
-    // },
+onMounted (()=>{
+  // initCharts()
+})
 
-    onMounted (()=>{
-      initCharts()
-    })
+defineExpose({
+  setXMax,
+  setYMax,
+  setXData
+});
 </script>

src/views/vent/home/clique/components/main-monitor.vue

@@ -24,8 +24,8 @@
       </div>
     </div>
     <div class="main-contents">
-      <!-- <div class="main" ref="main"></div> -->
-      <echartLine :setid="main" ref="main" style="width: 100%; height: 100%"></echartLine>
+      <div class="main" ref="main"></div>
+      <!-- <echartLine ref="main" style="width: 100%; height: 100%"></echartLine> -->
     </div>
   </div>
 </template>
@@ -33,8 +33,8 @@
 <script lang="ts" setup>
   import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
-  import echartLine from './EchartLineCharacter3.vue'
-  // import * as echarts from 'echarts';
+  // import echartLine from './EchartLineCharacter3.vue'
+  import * as echarts from 'echarts';
  
 
   let props = defineProps({
@@ -73,193 +73,193 @@
     }
   }
 
-  // function getOption() {
-  //   nextTick(() => {
-  //     const myChart = echarts.init(main.value);
-  //     let option = {
-  //       tooltip: {
-  //         trigger: 'axis',
-  //         axisPointer: {
-  //           type: 'cross',
-  //         },
-  //       },
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(main.value);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
 
 
-  //       grid: {
-  //         top: '22%',
-  //         left: '5%',
-  //         right: '16%',
-  //         bottom: '5%',
-  //         containLabel: true,
-  //       },
+        grid: {
+          top: '22%',
+          left: '5%',
+          right: '16%',
+          bottom: '5%',
+          containLabel: true,
+        },
 
-  //       xAxis: [
-  //         {
-  //           type: 'category',
-  //           name: '负压(Pa)',
-  //           nameTextStyle: {
-  //             color: '#b3b8cc',
-  //             fontSize: 12,
-  //             padding: -5,
-  //           },
-  //           // boundaryGap: false,
-  //           axisLine: {
-  //             //坐标轴轴线相关设置。数学上的x轴
-  //             show: true,
-  //             lineStyle: {
-  //               color: 'rgba(62, 103, 164)',
-  //             },
-  //           },
-  //           axisLabel: {
-  //             //坐标轴刻度标签的相关设置
-  //             textStyle: {
-  //               color: '#b3b8cc',
-  //               padding: 0,
-  //               fontSize: 14,
-  //             },
-  //             formatter: function (data) {
-  //               return data;
-  //             },
-  //           },
-  //           splitLine: {
-  //             show: false,
-  //           },
-  //           axisTick: {
-  //             show: false,
-  //           },
-  //           data: echartData.xdata,
-  //         },
-  //       ],
+        xAxis: [
+          {
+            type: 'category',
+            name: '负压(Pa)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -5,
+            },
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: echartData.xdata,
+          },
+        ],
 
-  //       yAxis: [
-  //         {
-  //           name: '风量\n(m³/min)',
-  //           nameTextStyle: {
-  //             color: '#b3b8cc',
-  //             fontSize: 12,
-  //             padding: -5,
-  //           },
-  //           min: 0,
-  //           splitLine: {
-  //             show: true,
-  //             lineStyle: {
-  //               color: 'rgba(62, 103, 164,.4)',
-  //             },
-  //           },
-  //           axisLine: {
-  //             show: true,
-  //             lineStyle: {
-  //               color: 'rgba(62, 103, 164)',
-  //             },
-  //           },
-  //           axisLabel: {
-  //             show: true,
-  //             textStyle: {
-  //               color: '#b3b8cc',
-  //               padding: 0,
-  //               fontSize: 14,
-  //             },
-  //             formatter: function (value) {
-  //               if (value === 0) {
-  //                 return value;
-  //               }
-  //               return value;
-  //             },
-  //           },
-  //           axisTick: {
-  //             show: false,
-  //           },
-  //         },
-  //       ],
-  //       series: [
-  //         {
-  //           name: '风量',
-  //           type: 'line',
-  //           smooth: true,
-  //           yAxisIndex: 0,
-  //           symbolSize: 6,
-  //           lineStyle: {
-  //             normal: {
-  //               width: 2,
-  //               color: 'orange', // 线条颜色
-  //             },
-  //             borderColor: 'rgba(0,0,0,.4)',
-  //           },
-  //           itemStyle: {
-  //             color: 'orange',
-  //             borderColor: '#646ace',
-  //             borderWidth: 0,
-  //           },
-  //           data: echartData.ydata,
-  //         },
-  //         {
-  //           name: '负压',
-  //           type: 'line',
-  //           smooth: true,
-  //           yAxisIndex: 0,
-  //           symbolSize: 6,
+        yAxis: [
+          {
+            name: '风量\n(m³/min)',
+            nameTextStyle: {
+              color: '#b3b8cc',
+              fontSize: 12,
+              padding: -5,
+            },
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164,.4)',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(62, 103, 164)',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#b3b8cc',
+                padding: 0,
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '风量',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 6,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: 'orange', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: 'orange',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata,
+          },
+          {
+            name: '负压',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 0,
+            symbolSize: 6,
 
-  //           lineStyle: {
-  //             normal: {
-  //               width: 2,
-  //               color: '#00ba01', // 线条颜色
-  //             },
-  //             borderColor: 'rgba(0,0,0,.4)',
-  //           },
-  //           itemStyle: {
-  //             color: '#00ba01',
-  //             borderColor: '#646ace',
-  //             borderWidth: 0,
-  //           },
-  //           data: echartData.ydata1,
-  //         },
-  //       ],
-  //     };
-  //     myChart.setOption(option);
-  //     window.onresize = function () {
-  //       myChart.resize();
-  //     };
-  //   });
-  // }
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: '#00ba01', // 线条颜色
+              },
+              borderColor: 'rgba(0,0,0,.4)',
+            },
+            itemStyle: {
+              color: '#00ba01',
+              borderColor: '#646ace',
+              borderWidth: 0,
+            },
+            data: echartData.ydata1,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
    // 设置曲线数据
-   function setChart(param,character) {
-      // if(this.startfan !=1 && this.startfan !=2){
-      //   return
-      // }
+  //  function setChart(param,character) {
+  //     // if(this.startfan !=1 && this.startfan !=2){
+  //     //   return
+  //     // }
     
-      param.dataQ = param.dataQ == null?0:param.dataQ
-      param.dataH = param.dataH == null?0:param.dataH
-      let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
-      let H1 = parseFloat(param.dataH);
+  //     param.dataQ = param.dataQ == null?0:param.dataQ
+  //     param.dataH = param.dataH == null?0:param.dataH
+  //     let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
+  //     let H1 = parseFloat(param.dataH);
 
-      let q = Q1 - character.dataha3;
-      let h = H1 - character.dataha4;
-      // 风压特性曲线1
-      let data = [];
-      // 风压特性曲线2
-      let data2 = [];
-      let data3 = [];
+  //     let q = Q1 - character.dataha3;
+  //     let h = H1 - character.dataha4;
+  //     // 风压特性曲线1
+  //     let data = [];
+  //     // 风压特性曲线2
+  //     let data2 = [];
+  //     let data3 = [];
      
-        for (let i = 30; i <= 400; i++) {
-          let x = i;
-          let y4 =
-            character.dataha0 * (x - q) * (x - q) +
-            character.dataha1 * (x - q) +
-            character.dataha2 +
-            h;
-          data2.push([x, y4]);
-        }
-      for (let i = 0; i <= 400; i++) {
-        let x = i;
-        let y = (H1 / Q1 / Q1) * x * x;
-        data.push([x, y]);
-      }
-      // if(this.$refs.chartlineCharacter != null){
+  //       for (let i = 30; i <= 400; i++) {
+  //         let x = i;
+  //         let y4 =
+  //           character.dataha0 * (x - q) * (x - q) +
+  //           character.dataha1 * (x - q) +
+  //           character.dataha2 +
+  //           h;
+  //         data2.push([x, y4]);
+  //       }
+  //     for (let i = 0; i <= 400; i++) {
+  //       let x = i;
+  //       let y = (H1 / Q1 / Q1) * x * x;
+  //       data.push([x, y]);
+  //     }
+  //     // if(this.$refs.chartlineCharacter != null){
         
-      main.value.setXData(data,data2,[[Q1, H1]]);
+  //     if(main.value)main.value.setXData(data,data2,[[Q1, H1]]);
       
-      // }
-    }
+  //     // }
+  //   }
 
   watch(
     () => props.maindata,
@@ -280,10 +280,10 @@
   );
   onMounted(() => { 
       // 添加resize事件监听
-      main.value.setXMax(400);
-    main.value.setYMax(4000);
+    // if(main.value)main.value.setXMax(400);
+    // if(main.value)main.value.setYMax(4000);
     // window.addEventListener("resize", this.chartResize);
-    setChart({ dataQ: 100, dataH: 200 }, { dataha0: 20, dataha1: 40, dataha2: 60, dataha3: 80, dataha4: 70 })
+    // setChart({ dataQ: 100, dataH: 200 }, { dataha0: 20, dataha1: 40, dataha2: 60, dataha3: 80, dataha4: 70 })
   });
 </script>
 

src/views/vent/home/clique/components/wind-device.vue

@@ -53,7 +53,7 @@
     },
     2: {
       url: getAssetURL('home-container/device/js.png'),
-      level: 2,
+      level: 1,
       text: '局部风机',
     },
     3: {
@@ -68,7 +68,7 @@
     },
     5: {
       url: getAssetURL('home-container/device/cf.png'),
-      level: 2,
+      level: 1,
       text: '测风装置',
     },
     6: {
@@ -78,7 +78,7 @@
     },
     7: {
       url: getAssetURL('home-container/device/penlin.png'),
-      level: 2,
+      level: 1,
       text: '喷淋',
     },
     8: {
@@ -98,7 +98,7 @@
     },
     11: {
       url: getAssetURL('home-container/device/pw.png'),
-      level: 3,
+      level: 1,
       text: '跟机喷雾',
     },
     12: {
@@ -108,7 +108,7 @@
     },
     13: {
       url: getAssetURL('home-container/device/wasibeng.png'),
-      level: 2,
+      level: 1,
       text: '瓦斯泵',
     },
     14: {

src/views/vent/home/clique/components/work-monitor.vue

@@ -133,7 +133,7 @@
           top: '28%',
           left: '5%',
           right: '5%',
-          bottom: '5%',
+          bottom: '4%',
           containLabel: true,
         },
 
@@ -178,6 +178,7 @@
               padding: -10,
             },
             min: 0,
+            splitNumber: 3,
             splitLine: {
               show: true,
               lineStyle: {
@@ -315,7 +316,7 @@
       position: absolute;
       top: 66px;
       left: 0;
-      height: 110px;
+      height: 120px;
       margin: 5px 0px;
       padding: 0px 20px;
       box-sizing: border-box;
@@ -347,7 +348,9 @@
           position: relative;
           width: 105px;
           height: 58px;
+          margin-top: 20px;
           background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+          background-size: 100% 90%;
           .item-label {
             width: 100%;
             text-align: center;
@@ -357,7 +360,7 @@
           .item-val {
             position: absolute;
             left: 50%;
-            top: 31px;
+            top: 28px;
             font-size: 14px;
             font-family: 'douyuFont';
             color: #fff;