神东5.5主风机图表提交

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

@@ -48,10 +48,11 @@
   let main = ref<any>();
   //echart图表数据
   let echartData = reactive<any>({
-    xdata: ['1000', '2000', '3000', '4000', '5000', '6000'],
     ydata: [],
     ydata1: [],
   });
+
+
   //跳转详情
   function getDetail() {
     console.log('跳转详情');
@@ -59,16 +60,38 @@
   }
   //选项切换
   function changeSelect(val) {
-    (echartData.ydata.length = 0), (echartData.ydata1.length = 0);
+    let objParam
+    let objParam1
     switch (val) {
       case '1号回风斜井':
-        mainList.forEach((el) => {
-          echartData.ydata1.push(el.readData.DataPa);
-          echartData.ydata.push(el.readData.m3);
-        });
+         objParam = {
+          dataQ: mainList[0].readData.m3,
+          dataH: mainList[0].readData.DataPa,
+        }
+         objParam1={
+          dataha0: -0.056,
+          dataha1: 3.6491,
+          dataha2: 434.4,
+          dataha3: 100,
+          dataha4: -1000,
+        }
+        setChart(objParam,objParam1);
         getOption();
         break;
       case '2号回风立井':
+      objParam = {
+          dataQ: mainList[1].readData.m3,
+          dataH: mainList[1].readData.DataPa,
+        }
+         objParam1={
+          dataha0: -0.056,
+          dataha1: 3.6491,
+          dataha2: 434.4,
+          dataha3: 100,
+          dataha4: -1000,
+        }
+        setChart(objParam,objParam1);
+        getOption();
         break;
     }
   }
@@ -77,139 +100,168 @@
     nextTick(() => {
       const myChart = echarts.init(main.value);
       let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
+        title: {
+          textStyle: {
+            color: '#3df6ff',
+            fontSize: 14, // 字体颜色
           },
+          text: '',
         },
-
         grid: {
-          top: '22%',
-          left: '5%',
-          right: '17%',
-          bottom: '8%',
+          top: '20%',
+          left: '3%',
+          right: '16%',
+          bottom: '5%',
           containLabel: true,
         },
-
+        legend: {
+          // x:'right',
+          top: '1%',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 14, // 字体颜色
+          },
+          data: ['风阻', '负压'],
+        },
+        tooltip: {
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          textStyle: {
+            color: '#3df6ff',
+            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/>';
+            return res;
+          },
+          trigger: 'item',
+        },
+        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
         xAxis: [
           {
-            type: 'category',
-            name: '负压(Pa)',
+            name: '风量\r\n(m³/min)\r\n',
             nameTextStyle: {
-              color: '#b3b8cc',
-              fontSize: 12,
-              padding: -5,
+              color: '#3df6ff',
+              fontSize: 14,
             },
-            // boundaryGap: false,
             axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
               lineStyle: {
-                color: 'rgba(62, 103, 164)',
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
+              },
+            },
+            splitLine: {
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
               },
             },
             axisLabel: {
-              //坐标轴刻度标签的相关设置
+              show: true,
+              position: 'bottom',
               textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
+                color: '#ffffff',
                 fontSize: 14,
               },
-              formatter: function (data) {
-                return data;
+            },
+            type: 'value',
+            min: 0,
+            max: 400,
+          },
+          {
+            name: '',
+            nameTextStyle: {
+              color: '#3df6ff',
+              fontSize: 14,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
               },
             },
             splitLine: {
-              show: false,
+              show: false, // 网格线
+              lineStyle: {
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
+              },
             },
-            axisTick: {
+            axisLabel: {
               show: false,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 14,
+              },
             },
-            data: echartData.xdata,
+            type: 'value',
+            min: 0,
+            max: 400,
           },
         ],
-
         yAxis: [
           {
-            name: '风量\n(m³/min)',
+            name: '负压(Pa)',
+            splitNumber: 5,
             nameTextStyle: {
-              color: '#b3b8cc',
-              fontSize: 12,
-              padding: -5,
+              color: '#3df6ff',
+              fontSize: 14,
             },
-            min: 0,
-            splitLine: {
+            axisLine: {
               show: true,
               lineStyle: {
-                color: 'rgba(62, 103, 164,.4)',
+                color: '#0092d5',
+                width: 1, // 这里是为了突出显示加上的
               },
             },
-            axisLine: {
-              show: true,
+            splitLine: {
+              show: true, // 网格线
               lineStyle: {
-                color: 'rgba(62, 103, 164)',
+                color: '#006c9d',
+                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
               },
             },
             axisLabel: {
               show: true,
               textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
+                color: '#ffffff',
                 fontSize: 14,
               },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
-                return value;
-              },
-            },
-            axisTick: {
-              show: false,
             },
+            type: 'value',
+            min: 0,
+            max: 18000,
           },
         ],
         series: [
           {
-            name: '风量',
+            name: '风阻',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
             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,
-            },
+            animationDuration: 1000,
+            showSymbol: false,
             data: echartData.ydata,
           },
           {
             name: '负压',
+            yAxisIndex: 0,
+            xAxisIndex: 1,
             type: 'line',
             smooth: true,
-            yAxisIndex: 0,
-            symbolSize: 6,
+            animationDuration: 1000,
+            showSymbol: false,
 
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#00ba01', // 线条颜色
-              },
-              borderColor: 'rgba(0,0,0,.4)',
-            },
-            itemStyle: {
-              color: '#00ba01',
-              borderColor: '#646ace',
-              borderWidth: 0,
-            },
             data: echartData.ydata1,
           },
         ],
@@ -220,45 +272,34 @@
       };
     });
   }
-  // 设置曲线数据
-  //  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);
 
-  //     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){
+  // 设置曲线数据
+  function setChart(param, character) {
+    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);
 
-  //     if(main.value)main.value.setXData(data,data2,[[Q1, H1]]);
+    let q = Q1 - character.dataha3;
+    let h = H1 - character.dataha4;
+    // 风压特性曲线1
+    let data = [];
+    // 风压特性曲线2
+    let data2 = [];
 
-  //     // }
-  //   }
+    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]);
+    }
+    echartData.ydata=data
+    echartData.ydata1=data2
+  }
 
   watch(
     () => props.maindata,
@@ -277,13 +318,7 @@
       deep: true,
     }
   );
-  onMounted(() => {
-    // 添加resize事件监听
-    // 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 })
-  });
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>