添加搜索并设置判断条件

src/views/modules_guAn/visualization/index.vue

@@ -74,12 +74,30 @@
     <j-modal
       :title="title"
       :visible="visible"
-      @cancel="visible=false"
+      @cancel="curveClose"
       cancelText="关闭"
       class="u-modal-box">
+      <div v-if="title==='全程曲线'" class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :lg="18" :md="12">
+              <a-form-item label="试验开始时间	">
+                <j-date placeholder="请选择试验开始时间	"  v-model="queryParam.starttime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :lg="6" :md="12">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              </span>
+            </a-col>
+
+          </a-row>
+        </a-form>
+      </div>
       <yuzhi-curve v-if="title==='预制曲线'" :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
       <real-time-curve v-if="title==='实时曲线'" :data="curveData"></real-time-curve>
-      <full-curve v-if="title==='全程曲线'" :data="curveData"></full-curve>
+      <full-curve-model v-if="title==='全程曲线'" :data="curveModelData" ref="fullCurveModel"></full-curve-model>
       <template slot="footer">
         <a-button @click="visible=false">关闭</a-button>
       </template>
@@ -93,6 +111,7 @@ import AlarmModalList from "./modules/AlarmModalList.vue";
 import YuzhiCurve from './modules/YuzhiCurve.vue'
 import RealTimeCurve from './modules/RealTimeCurve.vue'
 import FullCurve from './modules/FullCurve.vue'
+import FullCurveModel from './modules/FullCurveModel.vue'
 import Info3D from './modules/info3D.vue'
 import RunningState from './modules/RunningState.vue'
 import EquipmentInfo from './modules/EquipmentInfo.vue'
@@ -106,7 +125,7 @@ import store from '@/store'
 import Vue from 'vue'
 import signMd5Utils from '@/utils/encryption/signMd5Utils'
 import { axios } from '@/utils/request'
-  import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 export default {
   name: '',
@@ -116,6 +135,7 @@ export default {
     YuzhiCurve,
     RealTimeCurve,
     FullCurve,
+    FullCurveModel,
     Info3D,
     RunningState,
     EquipmentInfo,
@@ -131,11 +151,15 @@ export default {
       yuzhiData: [],
       yuzhiMarkData: [],
       curveData: [],
+      curveModelData: [],
       websock: null,
       newAlarmData: null,
       title: '',
       visible: false,
-      curveType: ''
+      curveType: '',
+      // 弹窗搜索
+      queryParam: {},
+      isFullWebSocket: true, // 判断：当搜索之后就不随websocket进行改变了
     }
   },
   destroyed () {
@@ -221,6 +245,9 @@ export default {
       // 接收数据之后操作
       this.eqRealData = redata['设备实时值']
       this.curveData = redata['设备历史值']
+      if(this.isFullWebSocket){
+        this.curveModelData = redata['设备历史值']
+      }
       this.newAlarmData = redata['最新一条报警信息']
       this.yuzhiData = redata['预制曲线']
       this.yuzhiMarkData = redata['预制曲线线段']
@@ -257,6 +284,32 @@ export default {
       this.title = title
       this.visible = true
     },
+    getSearchData(){
+      getAction('/datacoll/webaccess/getQcqx', this.queryParam).then(res=>{
+        console.log(res)
+        if(res.success){
+          this.curveModelData = res.result
+        }
+      })
+    },
+    searchQuery() {
+      this.getSearchData()
+      this.isFullWebSocket = false
+      // this.$refs.fullCurveModel.refreshData()
+      // this.$refs.fullCurveModel.isSearched = true
+    },
+    searchReset() {
+      // this.$refs.fullCurveModel.isSearched = false
+      this.queryParam = {}
+      this.getSearchData()
+      this.isFullWebSocket = true
+    },
+    curveClose(){
+      // this.$refs.fullCurveModel.isSearched = false
+      this.isFullWebSocket = true
+      this.visible = false
+      this.queryParam = {}
+    },
   }
 }
 </script>

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

@@ -0,0 +1,345 @@
+<template>
+  <div class="data-curve-module">
+    <!-- <common-title title="全程曲线"></common-title>     -->
+    <!-- <div style="height: 22.5px;"></div> -->
+    <!-- <div class="visualization-common-border"> -->
+      <div ref="dataCurve" class="h100"></div>
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import commonTitle from '../components/commonTitle.vue'
+import { setMax } from "../components/common.js";
+
+export default {
+  components: { commonTitle },
+  name: '',
+  props: {
+    data: {
+      type: Array,
+      default: function(){
+        return [] // 使用工厂函数返回默认值
+      }
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+      legendData: [
+        { name: '辐射强度值', value: 9000 },
+        { name: '温度实值', value: 50 },
+        { name: '湿度实值', value: 60.3 },
+      ],
+      fusheData: [],
+      wenduData: [],
+      shiduData: [],
+      timeData: [],
+      // fusheData: [150, 230, 224, 218, 135, 147, 260],
+      // wenduData: [120, 132, 101, 134, 90, 230, 210],
+      // shiduData: [220, 182, 191, 234, 290, 330, 310],
+      // timeData: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
+    }
+  },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log('全程曲线', newValue, oldValue)
+        this.refreshData(newValue)
+      },
+      // immediate: true,
+      deep: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initDataCurve()
+      this.refreshData(this.data)
+    })
+  },
+  methods: {
+    initDataCurve(){
+      var _this = this
+      var maxa = Math.max.apply(null, this.fusheData)
+      var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
+      this.uEcharts = echarts.init(this.$refs.dataCurve);
+      this.uOption = {
+        color: ['#07D626', '#E30106', '#E39106'], // legend对应颜色
+        grid: {
+          top: '80',
+          left: '46',
+          bottom: '45'
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // dataZoom: [
+        //   {
+        //     type: 'inside',
+        //     start: 0,
+        //     end: 100,
+        //   },
+        //   {
+        //     start: 0,
+        //     end: 100,
+        //     height: 10,
+        //     bottom: 16,
+        //   }
+        // ],
+        dataZoom: [
+          {
+            show: true,
+            moveHandleSize: 0, // 隐藏上面那那层
+            height: 12,
+            xAxisIndex: [
+              0
+            ],
+            bottom: 12,
+            start: 0,
+            end: 100,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle:{
+              color:"#d3dee5",
+
+            },
+            textStyle:{ color:"#fff" },
+            borderColor:"#90979c"
+          }, {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 0,
+            end: 100
+          }
+        ],
+        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: 'rgb(7, 214, 38, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(7, 214, 38)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(7, 214, 38, 0)'
+                  }
+                ])
+              }
+            },
+            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(227, 1, 6, .5)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(227, 1, 6)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(227, 1, 6, 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: 'rgba(227, 145, 6, .5)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgb(227, 145, 6)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(227, 145, 6, .5)'
+                  }
+                ])
+              }
+            },
+            data: _this.shiduData,
+          }
+        ]
+      };
+      this.uOption && this.uEcharts.setOption(this.uOption)
+      window.addEventListener("resize", ()=>{
+        this.uEcharts.resize();
+      });
+    },
+    refreshData(data){
+      if(data.length === 0){
+        return
+      }
+      var wendu = data.find(item => item.Name === '温度实值-全程')
+      var shidu = data.find(item => item.Name === '湿度实值-全程')
+      var fushe = data.find(item => item.Name === '辐射强度值-全程')
+      var time = data.find(item => item.Name === '全程曲线-时间分布')
+      this.wenduData = wendu ? wendu.Values : []
+      this.shiduData = shidu ? shidu.Values : []
+      this.fusheData = fushe ? fushe.Values : []
+      this.timeData = time ? time.Values : []
+      // console.log(this.shiduData)
+      var _this = this
+      this.uEcharts.setOption({
+        xAxis: {
+          data: this.timeData
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: _this.fusheData
+          },
+          {
+            name: '温度实值',
+            data: _this.wenduData
+          },
+          {
+            name: '湿度实值',
+            data: _this.shiduData
+          },
+        ]
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .data-curve-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>