监测参数查询

src/views/module_ems/energyAnalyse/moniparamData/index.vue

@@ -1,59 +1,61 @@
 <template>
-  <div class="demand-analysis" :loading="loading">
-    <div class="table-page-search-wrapper search-compoments">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="设备名称">
-              <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择设备" dict="tpm_equipment,equipmentname,id"  />
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="能源参数">
-              <!-- <a-select
-                v-model="queryParam.energyitemid"
-                placeholder="请选择能源参数"
-                :options="options">
-              </a-select> -->
-              <a-select v-model="queryParam.queryparamtype" placeholder="请选择能源参数">
-                <a-select-option
-                  v-for="item in options"
-                  :key="item"
-                  :value="item"
-                >{{item}}</a-select-option>
-              </a-select>
-              <!-- <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择能源参数" dict="tpm_equipment,equipmentname,id"  /> -->
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="11" :md="12" :sm="24">
-            <a-form-item label="时间">
-              <a-range-picker date-format="YYYY-MM-DD" v-model="queryParam.date" @change="onChangeDate" />
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="getList" 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>
+  <a-spin :spinning="loading">
+    <div class="demand-analysis" :loading="loading">
+      <div class="table-page-search-wrapper search-compoments">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="设备名称">
+                <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择设备" dict="tpm_equipment,equipmentname,id"  />
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="能源参数">
+                <a-select v-model="queryParam.queryparamtype" placeholder="请选择能源参数">
+                  <a-select-option
+                    v-for="item in options"
+                    :key="item"
+                    :value="item"
+                  >{{item}}</a-select-option>
+                </a-select>
+                <!-- <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择能源参数" dict="tpm_equipment,equipmentname,id"  /> -->
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="11" :md="12" :sm="24">
+              <a-form-item label="时间">
+                <a-range-picker
+                format="YYYY-MM-DD"
+                value-format="yyyy-MM-DD"
+                v-model="queryParam.date"
+                :disabled-date="setDisabledDate"
+                @openChange="openChange"
+                @calendarChange="onCalendarChange"
+                />
+                <!-- date-format="YYYY-MM-DD" -->
+                <!-- @change="onChangeDate"  -->
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="getMoniparamData" 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>
+      <div class="item-echarts" ref="echarts" :style="{ height: echartsHeight + 'px' }"></div>
     </div>
-    <!-- <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch> -->
-    <div class="item-echarts" ref="echarts" :style="{ height: echartsHeight + 'px' }"></div>
-  </div>
+  </a-spin>
 </template>
 
 <script>
+import moment from 'moment';
 import * as echarts from 'echarts'
-import commonSearch from '../components/commonSearch.vue'
 import { httpAction, getAction } from '@/api/manage'
 import { emsdata } from '../emsdata'
 export default {
   name: 'moniparamData',
-  components: {
-    commonSearch,
-  },
   data() {
     return {
       description: '参数历史查询',
@@ -62,71 +64,120 @@ export default {
       echartsHeight: window.innerHeight - 84 - 60 - 30,
       myChart: null,
       url: {
-        list: '/ems/statistics/demandanalysis',
         nycsList: '/dataVoltage/dataVoltage/xialaList',
-        list2: '/dataVoltage/dataVoltage/dataList',
+        list: '/dataVoltage/dataVoltage/dataList',
       },
       moniparamData: {},
-      options: []
+      options: [],
+      disabledCurrent: null, // 用来判断日期不超过2天的第一个数
+      echartsColor: ['#91CC75', '#EE6666', '#FAAD14', '#5470C6'],
+      seriesData: [],
+      xAxisData: [],
+      legendData: [],
     }
   },
   created() {
-    this.getNycsList()
   },
   mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        // this.getList()
-        this.getTest()
-      }, 1000)
-      // this.getDemandanalysis()
-    })
+    this.getNycsList()
+    this.getNowDate()
+    // this.$nextTick(() => {
+    //   this.getMoniparamData()
+    // })
   },
   methods: {
-    // 后端好了需要删掉
-    getTest() {
-      this.moniparamData = emsdata.moniparamData
-      console.log(7788,this.moniparamData)
-      this.initEcharts()
-    },
-    // 时间处理
-    onChangeDate(date, dateString){
-      console.log(date, dateString);
-      this.queryParam.logtimebegin= dateString[0]
-      this.queryParam.logtimeend= dateString[1]
-    },
     // 获取能源参数下拉列表
     getNycsList(){
       getAction(this.url.nycsList, null).then((res) => {
-        // this.options = res.map((item,index )=> {
-        //   return {
-        //     key: item,
-        //     value: item,
-        //     lable: item
-        //   }
-        // })
         this.options = res
+        this.queryParam.queryparamtype = this.options[0]
+      }).finally(()=>{
+        this.getMoniparamData()
       })
     },
-    getList() {
-      getAction(this.url.list2, this.queryParam).then((res) => {
-        console.log(9999,res)
-      })
+    // 时间处理
+    // onChangeDate(date, dateString){
+    //   console.log(date, dateString);
+    //   this.queryParam.logtimebegin= dateString[0]
+    //   this.queryParam.logtimeend= dateString[1]
+    // },
+    /**
+     * 获取手动选择的时间段起始值
+     */
+    onCalendarChange (dates) {
+      // 获取手动选择的时间段起始值
+      this.disabledCurrent = dates[0]
+      this.queryParam.logtimebegin= dates[0]
+      this.queryParam.logtimeend= dates[1]
+      this.queryParam.date = dates
+      // 手动更新视图
+      this.$forceUpdate()
+    },
+    // 动态渲染禁用日期
+    setDisabledDate(current) {
+      // 限制为前后一天 || // 今天以后的不可选
+      if (!this.disabledCurrent) return (current && current > moment().endOf('day'))
+      return (current && current < moment(this.disabledCurrent).subtract(1, "days") || current > moment(this.disabledCurrent).add(1, "days")) || (current && current > moment().endOf('day'))
+    },
+    // 关闭日期选择器后清空判断值
+    openChange(status){
+      if (!status) this.disabledCurrent = null
+    },
+    /**
+     * 查询当天日期
+     */
+    getNowDate() {
+      const nowTime = new Date()
+      const year = nowTime.getFullYear()
+      let month = nowTime.getMonth() + 1
+      let day = nowTime.getDate()
+      month = month < 10 ? '0' + month : month
+      day = day < 10 ? '0' + day : day
+      // const NOW_MONTHS_AGO = `${year}-${month}`
+      this.queryParam.date = [`${year}-${month}-${day}`, `${year}-${month}-${day}`]
+      this.queryParam.logtimebegin = `${year}-${month}-${day}`
+      this.queryParam.logtimeend = `${year}-${month}-${day}`
     },
     searchReset(){
-
+      this.queryParam = {}
+      this.getMoniparamData()
     },
-    async getDemandanalysis() {
+    getMoniparamData() {
       this.loading = true
-      var data = this.$refs.commonSearch.queryParams
-      getAction(this.url.list, data).then((response) => {
-        console.log(response)
-        this.monthsplit = response.data.monthsplit
-        this.mubiao = response.data.mubiao
-        this.shiji = response.data.shiji
+      getAction(this.url.list, this.queryParam).then((response) => {
+        if(response.success){
+          var data = response.result
+          this.seriesData = data.filter(res=> res.name !== 'logtime').map((item, index)=> {
+          var itemData = {
+            name: item.name,
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: this.echartsColor[index],
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' },
+              ],
+            },
+            data: item.data,
+          }
+          return itemData
+        })
+        console.log(this.seriesData)
+        this.xAxisData = data.find(res=> res.name === 'logtime').data
+        console.log(this.xAxisData)
+        this.legendData = data.map(res=> res.name).filter(res=> res !== 'logtime')
+        console.log(this.legendData)
+        }else{
+          this.$message.warning(response.message);
+        }
+      }).finally(() => {
+        this.initEcharts()
         this.loading = false
       })
-      this.initEcharts()
     },
     initEcharts() {
       var _this = this
@@ -145,12 +196,12 @@ export default {
           text: '参数历史数据',
         },
         legend: {
-          data: ['Pa', 'Pb', 'Pc', 'P'],
+          data: _this.legendData,
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: _this.moniparamData.times,
+          data: _this.xAxisData,
         },
         yAxis: {
           type: 'value',
@@ -176,72 +227,7 @@ export default {
             right: "7%",
           },
         ],
-        series: [
-          {
-            name: 'Pa',
-            type: 'line',
-            symbol: 'none',
-            sampling: 'lttb',
-            itemStyle: {
-              color: '#91CC75',
-            },
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' },
-              ],
-            },
-            data: _this.moniparamData.result.Pa,
-          },
-          {
-            name: 'Pb',
-            type: 'line',
-            symbol: 'none',
-            sampling: 'lttb',
-            itemStyle: {
-              color: '#EE6666',
-            },
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' },
-              ],
-            },
-            data: _this.moniparamData.result.Pb,
-          },
-          {
-            name: 'Pc',
-            type: 'line',
-            symbol: 'none',
-            sampling: 'lttb',
-            itemStyle: {
-              color: '#FAAD14',
-            },
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' },
-              ],
-            },
-            data: _this.moniparamData.result.Pc,
-          },
-          {
-            name: 'P',
-            type: 'line',
-            symbol: 'none',
-            sampling: 'lttb',
-            itemStyle: {
-              color: '#5470C6',
-            },
-            markPoint: {
-              data: [
-                { type: 'max', name: 'Max' },
-                { type: 'min', name: 'Min' },
-              ],
-            },
-            data: _this.moniparamData.result.P,
-          },
-        ],
+        series: _this.seriesData,
       }
 
       option && _this.myChart.setOption(option)
@@ -250,11 +236,6 @@ export default {
         _this.myChart.resize()
       })
     },
-    /** 搜索按钮操作 */
-    handleSearch(param) {
-      this.getTest()
-      // this.getDemandanalysis()
-    },
   },
 }
 </script>