添加弹窗、修改曲线组件方式

src/views/modules_guAn/visualization/index.vue

@@ -16,16 +16,25 @@
       <div class="left-container">
         <div class="left-top-con">
           <!-- 左上 -->
-          <yuzhi-curve :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
+          <common-title title="预制曲线"></common-title>
+          <div class="visualization-common-border" @click="showModal('yuzhi')">
+            <yuzhi-curve :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
+          </div>
         </div>
         <div class="left-center-con">
           <!-- 左中 -->
-          <real-time-curve :data="curveData"></real-time-curve>
+          <common-title title="实时曲线"></common-title>
+          <div class="visualization-common-border" @click="showModal('realTime')">
+            <real-time-curve :data="curveData"></real-time-curve>
+          </div>
         </div>
         <div class="left-bottom-con">
           <!-- 左下 -->
           <!-- <test-information></test-information> -->
-          <full-curve :data="curveData"></full-curve>
+          <common-title title="全程曲线"></common-title>
+          <div class="visualization-common-border" @click="showModal('full')">
+            <full-curve :data="curveData"></full-curve>
+          </div>
         </div>
       </div>
       <!-- 中间部分 -->
@@ -62,10 +71,24 @@
         </div>
       </div>
     </div>
+    <j-modal
+      title="实时曲线"
+      :visible="visible"
+      @cancel="visible=false"
+      cancelText="关闭"
+      class="u-modal-box">
+      <yuzhi-curve v-if="curveType==='yuzhi'" :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
+      <real-time-curve v-if="curveType==='realTime'" :data="curveData"></real-time-curve>
+      <full-curve v-if="curveType==='full'" :data="curveData"></full-curve>
+      <template slot="footer">
+        <a-button @click="visible=false">关闭</a-button>
+      </template>
+    </j-modal>
   </div>
 </template>
 
 <script>
+import commonTitle from './components/commonTitle.vue'
 import AlarmModalList from "./modules/AlarmModalList.vue";
 import YuzhiCurve from './modules/YuzhiCurve.vue'
 import RealTimeCurve from './modules/RealTimeCurve.vue'
@@ -88,6 +111,7 @@ import { axios } from '@/utils/request'
 export default {
   name: '',
   components: {
+    commonTitle,
     AlarmModalList,
     YuzhiCurve,
     RealTimeCurve,
@@ -109,6 +133,8 @@ export default {
       curveData: [],
       websock: null,
       newAlarmData: null,
+      visible: false,
+      curveType: ''
     }
   },
   destroyed () {
@@ -225,6 +251,11 @@ export default {
     handleXunhuan(choose){
       this.$refs.yuzhiCurve.chooseXunhuan.circname = choose
     },
+    // 弹窗
+    showModal(type){
+      this.curveType = type
+      this.visible = true
+    },
   }
 }
 </script>
@@ -382,4 +413,36 @@ export default {
       }
     }
   }
+  .u-modal-box{
+    .ant-modal{
+      width: 100vw !important;
+      height: 100vh !important;
+      padding: 0 !important;
+      margin: 0;
+      top: 0;
+      .ant-modal-close{
+        color: #fff;
+      }
+      .ant-modal-header{
+        background-color: rgba(5, 24, 61, .9) !important;
+        border-bottom: none;
+        .ant-modal-title{
+          color: #fff;
+        }
+      }
+      .ant-modal-content{
+        border-radius: 0;
+        height: 100%;
+        background-color: rgba(5, 24, 61, .9) !important;
+        // background-color: rgba(15, 57, 91, .94) !important;
+        overflow: hidden;
+      }
+      .ant-modal-body{
+        height: calc(100% - 55px - 53px);
+      }
+      .ant-modal-footer{
+        border-top: none;
+      }
+    }
+  }
 </style>

src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="data-curve-module">
-    <common-title title="全程曲线"></common-title>    
+    <!-- <common-title title="全程曲线"></common-title>     -->
     <!-- <div style="height: 22.5px;"></div> -->
-    <div class="visualization-common-border">
+    <!-- <div class="visualization-common-border"> -->
       <div ref="dataCurve" class="h100"></div>
-    </div>
+    <!-- </div> -->
   </div>
 </template>
 
@@ -58,6 +58,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.initDataCurve()
+      this.refreshData(this.data)
     })
   },
   methods: {

src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -1,9 +1,20 @@
 <template>
   <div class="data-curve-module">
-    <common-title title="实时曲线"></common-title>
-    <div class="visualization-common-border">
+    <!-- <common-title title="实时曲线"></common-title>
+    <div class="visualization-common-border" @click="showModal"> -->
       <div ref="dataCurve" class="h100"></div>
-    </div>
+    <!-- </div>
+    <j-modal
+      title="实时曲线"
+      :visible="visible"
+      @cancel="visible=false"
+      cancelText="关闭"
+      class="u-modal-box">
+      <div ref="dataCurve1" class="h100"></div>
+      <template slot="footer">
+        <a-button @click="visible=false">关闭</a-button>
+      </template>
+    </j-modal> -->
   </div>
 </template>
 
@@ -25,6 +36,8 @@ export default {
   },
   data () {
     return {
+      // width: 1440,
+      visible: false,
       uEcharts: null,
       uOption: null,
       legendData: [
@@ -57,10 +70,12 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.initDataCurve()
+      this.refreshData(this.data)
     })
   },
   methods: {
     initDataCurve(){
+      console.log(1111)
       var _this = this
       var maxa = Math.max.apply(null, this.fusheData)
       var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
@@ -287,6 +302,203 @@ export default {
           },
         ]
       });
+    },
+    showModal(){
+      this.visible = true
+      this.$nextTick(()=>{
+        var _this = this
+      var maxa = Math.max.apply(null, this.fusheData)
+      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
+      var uEcharts = echarts.init(this.$refs.dataCurve1);
+      var uOption = {
+        color: ['rgb(255, 0, 255)', 'rgb(255, 105, 5)', 'rgb(91, 255, 255)'], // legend对应颜色
+        grid: {
+          top: '80',
+          left: '46',
+          bottom: '40'
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false }, // 横坐标刻度
+          boundaryGap: false, // 坐标轴两边留白(刻度跟数据对应)
+          axisLine: { // 横坐标线样式
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)',
+            },
+          },
+          axisLabel: {
+            textStyle: { // 坐标轴文字
+              color: '#fff'
+            }
+          },
+          data: _this.timeData
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '光照强度W/㎡', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              padding: [0, 0, 0, 20],
+            },
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxa),
+            // interval: setMax(maxa) / 5,
+          },
+          {
+            type: 'value',
+            axisLabel: { // 纵坐标样式
+              textStyle: {
+                color: '#fff',
+              }
+            },
+            splitLine: { // 网格线
+              show: true, // 是否显示
+              lineStyle: { // 网格线样式
+                color: 'rgba(255,255,255,.1)', // 网格线颜色
+                width: 1, //网格线的加粗程度
+                // type: 'dashed' // 网格线类型 dashed:虚线
+              }
+            },
+            name: '温湿度值/℃/%', // 刻度
+            nameTextStyle: {
+              color: '#fff',
+              // padding: [0, 0, 0, 20],
+            },
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxb),
+            // interval: setMax(maxb) / 5,
+          },
+        ],
+        legend: {
+          icon: "roundRect", // 样式改为方形rect，改为圆角方形roundRect
+          itemWidth: 14, // 宽度
+          itemHeight: 6, // 高度
+          textStyle: {
+            color: '#fff',
+            fontSize: 11
+          },
+          top: '15',
+          // 使用回调函数:加上数值方法
+          // formatter: function (name) {
+          //   console.log(name)
+          //   var currentObj = _this.legendData.find(item => item.name === name)
+          //   return name + '：' + currentObj.value;
+          // },
+          data: _this.legendData.map(item => item.name),
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            type: 'line',
+            // symbol: 'circle',
+            // symbolSize: 2,
+            showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
+            // itemStyle: { // symbol样式
+            //   normal: {
+            //     color: 'rgb(255, 255, 255)',
+            //     borderColor: 'rgba(255, 255, 255, 0.2)', // symbol边框颜色
+            //     borderWidth: 12 // symbol边框宽度
+            //   }
+            // },
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 0, 255, .5)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(255, 0, 255)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 0, 255, 0.5)'
+                  }
+                ])
+              }
+            },
+            data: _this.fusheData,
+          },
+          {
+            name: '温度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 105, 0, 0.5)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(255, 105, 5)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 0, 0, 0.5)'
+                  }
+                ])
+              }
+            },
+            data: _this.wenduData,
+          },
+          {
+            name: '湿度实值',
+            type: 'line',
+            yAxisIndex: 1, // 关联第几个y轴
+            showSymbol: false,
+            lineStyle: { // 线条样式
+              normal: {
+                width: 2,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                  {
+                    offset: 0,
+                    color: 'rgb(0, 255, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(91, 255, 255)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(0, 255, 255, 0)'
+                  }
+                ])
+              }
+            },
+            data: _this.shiduData,
+          }
+        ]
+      };
+      uOption && uEcharts.setOption(uOption)
+      window.addEventListener("resize", ()=>{
+        uEcharts.resize();
+      });
+      })
     }
   }
 }
@@ -301,3 +513,4 @@ export default {
     height: 100%;
   }
 </style>
+

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="yuzhi-curve-module">
-    <common-title title="预制曲线"></common-title>
-    <div class="visualization-common-border">
+    <!-- <common-title title="预制曲线"></common-title> -->
+    <!-- <div class="visualization-common-border"> -->
       <div ref="yuzhiCurve" class="h100"></div>
-    </div>
+    <!-- </div> -->
   </div>
 </template>
 
@@ -111,6 +111,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.initYuzhiCurve()
+      this.refreshData(this.data)
     })
   },
   methods: {