监测曲线修改

src/views/spectrum/common/historyCurve/index.vue

@@ -1,46 +1,69 @@
 <template>
   <div>
     <!-- 地图通用组件：历史曲线 -->
-    <el-dialog v-dialogDrag title="历史监测信息" :visible.sync="dialogVisible" :modal="false" :append-to-body="true" width="520px">
+    <el-dialog v-dialogDrag title="历史监测信息" :visible.sync="dialogVisible" :modal="false" :append-to-body="true" width="1200px">
       <div class="top">
         <el-form ref="form" :model="form" label-width="auto" size="small">
           <el-row :gutter="24">
-            <el-col :span="16">
-              <el-form-item label="监测站点：" style="padding:0">
+            <el-col :span="6">
+              <el-form-item label="监测站点">
                 <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:100%">
                   <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
-              <el-form-item label-width="0" style="text-align: right;">
-                <el-button type="primary" size="small" style="width:85px">图上选点</el-button>
+            <el-col :span="18">
+              <el-form-item label="数据日期范围">
+                <el-radio-group v-model="timeType">
+                  <el-radio :label="1">近24小时</el-radio>
+                  <el-radio :label="2">今天</el-radio>
+                  <el-radio :label="3">昨天</el-radio>
+                  <el-radio :label="4">近7天</el-radio>
+                  <el-radio :label="5">近15天</el-radio>
+                  <el-radio :label="6">近30天</el-radio>
+                  <el-radio :label="7">
+                    <el-date-picker :disabled="timeType!=7" v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy/MM/dd" style="width:250px" :clearable="false">
+                    </el-date-picker>
+                  </el-radio>
+                </el-radio-group>
               </el-form-item>
             </el-col>
-            <el-col :span="16">
-              <el-form-item label="日期范围：" style="padding:0">
-                <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy/MM/dd" style="width:100%" :clearable="false">
-                </el-date-picker>
+            <el-col :span="6">
+              <el-form-item label="站点对比">
+                <el-select v-model="form.siteId2" filterable placeholder="选择站点" style="width:100%">
+                  <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
+                  </el-option>
+                </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
-              <el-form-item label-width="0" style="text-align: right;">
+            <el-col :span="6">
+              <el-form-item label="同比开始时间">
+                <el-date-picker v-model="form.value1" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <el-form-item label-width="0">
                 <el-button type="primary" size="small" style="width:85px" @click="query()">查询</el-button>
               </el-form-item>
             </el-col>
+            <el-col :span="2">
+              <el-form-item label-width="0">
+                <el-button type="primary" size="small" style="width:85px" @click="query()">导出</el-button>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
       </div>
       <div class="time-select">
         <el-radio-group v-model="radio">
-          <el-radio :label="1">实时</el-radio>
+          <el-radio :label="1">实时数据</el-radio>
           <el-radio :label="2">每小时均值</el-radio>
           <el-radio :label="3">每日均值</el-radio>
         </el-radio-group>
       </div>
       <!-- 标签页 -->
-      <el-tabs v-model="activeName" type="card" style="height:500px">
+      <el-tabs v-model="activeName" style="height:550px">
         <el-tab-pane label="图表" name="first">
           <div class="chart-div" v-for="(item,index) in targetData" :key="index">
             <div class="chart-title" v-cloak>{{item.targetName}}({{item.targetCode}})</div>
@@ -48,16 +71,15 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="列表" name="second" style="height:100%">
-          <el-table :data="tableData" stripe height="100%" :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
+          <el-table :data="tableData" stripe height="100%" style="width:100%" :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
             <template slot="empty">
               <img src="@/assets/icon/null.png" alt="" />
-              <p style="margin-top: -7px">暂无数据</p>
             </template>
             <el-table-column prop="date" label="序号" width="50" align="center">
               <template slot-scope="scope">{{scope.$index+1}}</template>
             </el-table-column>
-            <el-table-column prop="collectionDates" label="采集时间" width="200" align="center"></el-table-column>
-            <el-table-column v-for="(item,index) in targetData" :key="index" :prop="item.targetCode+'s'" :label="item.targetName" width="100" align="center">
+            <el-table-column prop="collectionDates" label="采集时间" align="center"></el-table-column>
+            <el-table-column v-for="(item,index) in targetData" :key="index" :prop="item.targetCode+'s'" :label="item.targetName" align="center">
             </el-table-column>
           </el-table>
         </el-tab-pane>
@@ -69,6 +91,8 @@
 <script>
 import { getHistoryCurve, getSites } from '@/views/spectrum/dynamicMonitor/api/api'
 
+import elementResizeDetectorMaker from 'element-resize-detector'
+
 import * as echarts from 'echarts'
 export default {
   name: 'historyCurve',
@@ -131,7 +155,9 @@ export default {
       radio: 1,
       activeName: 'first',
       targetData: [], // 图表类型
-      tableData: [] // 列表数据
+      tableData: [], // 列表数据
+      dialogDragWidth: '520px',
+      timeType: 1
     }
   },
   mounted() {},
@@ -144,10 +170,15 @@ export default {
     }
   },
   methods: {
-    show(siteId) {
+    maximizing() {
+      this.dialogDragWidth = '50%'
+    },
+    show(siteId = null) {
       this.getSites(siteId)
       this.dialogVisible = true
-      this.getHistoryCurve({ siteId: siteId })
+      if (siteId != null) {
+        this.getHistoryCurve({ siteId: siteId })
+      }
     },
     /**
      * 获取站点
@@ -156,7 +187,7 @@ export default {
       getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then((res) => {
         if (res.code && res.code == 1) {
           this.siteOption = res.result.records
-          this.$set(this.form, 'siteId', siteId)
+          if (siteId) this.$set(this.form, 'siteId', siteId)
         }
       })
     },
@@ -195,14 +226,61 @@ export default {
         }
       })
     },
+    /**
+     * 获取查询时间
+     */
+    getQueryTime() {
+      // 当前时间
+      const CURRENT_TIME = this.$moment().format('YYYY-MM-DD HH:mm:ss')
+      let endTime = ''
+      let startTime = ''
+      // 获取时间
+      switch (this.timeType) {
+        case 1: // 近24小时
+          endTime = CURRENT_TIME // 当前时间
+          startTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+          break
+        case 2: // 今天
+          endTime = this.$moment(CURRENT_TIME).format('YYYY-MM-DD HH:mm:ss')
+          startTime = this.$moment(CURRENT_TIME).format('YYYY-MM-DD 00:00:00')
+          break
+        case 3: // 昨天
+          endTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
+          startTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD 00:00:00')
+          break
+        case 4: // 近7天
+          endTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
+          startTime = this.$moment(endTime).subtract(7, 'day').format('YYYY-MM-DD 00:00:00')
+          break
+        case 5: // 近15天
+          endTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
+          startTime = this.$moment(endTime).subtract(15, 'day').format('YYYY-MM-DD 00:00:00')
+          break
+        case 6:
+          endTime = this.$moment(CURRENT_TIME).subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
+          startTime = this.$moment(endTime).subtract(30, 'day').format('YYYY-MM-DD 00:00:00')
+          break
+        case 7:
+          endTime = this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
+          startTime = this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00')
+          break
+      }
+      return {
+        startTime: startTime,
+        endTime: endTime
+      }
+    },
     /**
      * 查询
      */
     query() {
+      let timeInterval = this.getQueryTime()
       let params = {
         siteId: this.form.siteId,
-        beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
-        endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
+        // beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
+        // endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
+        beginTime: timeInterval.startTime,
+        endTime: timeInterval.endTime
       }
       this.getHistoryCurve(params)
     },
@@ -279,6 +357,13 @@ export default {
       }
       myChart.clear()
       option && myChart.setOption(option)
+
+      let erd = elementResizeDetectorMaker()
+      erd.listenTo(chartDom, () => {
+        this.$nextTick(() => {
+          myChart.resize()
+        })
+      })
     },
     /**
      * 加载列表
@@ -318,19 +403,39 @@ export default {
     // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
     pointer-events: auto;
     .el-dialog__header {
-      background-color: #13479e;
+      background-color: #2d74e7;
+      padding: 10px 20px 10px;
       .el-dialog__title {
         color: #ffffff;
+        font-size: 16px;
+      }
+      .el-dialog__headerbtn {
+        top: 15px;
       }
       .el-dialog__close {
         color: #ffffff !important;
       }
     }
+    .el-dialog__full {
+      position: absolute;
+      top: 15px;
+      right: 45px;
+      i {
+        color: #fff !important;
+      }
+    }
   }
   .el-form {
     >>> .el-form-item {
       .el-form-item__label {
-        padding: 0;
+        // padding: 0;
+      }
+      .el-form-item__content {
+        .el-radio-group {
+          .el-radio {
+            margin-right: 15px !important;
+          }
+        }
       }
     }
     // >>> .el-date-editor {
@@ -349,7 +454,7 @@ export default {
     margin-top: 15px;
     z-index: 99;
     .el-radio {
-      margin-right: 4px;
+      // margin-right: 4px;
       >>> .el-radio__label {
         padding-left: 2px !important;
       }

src/views/spectrum/dynamicMonitor/waterQualityLedger/widget.vue

@@ -36,7 +36,6 @@
       <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick" :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'40px',textAlign:'center'}">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
-          <p style="margin-top: -7px">暂无数据</p>
         </template>
         <el-table-column type="selection" align="center"></el-table-column>
         <el-table-column prop="date" label="序号" width="50" align="center">

src/views/spectrum/reform/afterAssess/widget.vue

@@ -7,9 +7,9 @@
           <thematic-map></thematic-map>
         </template>
       </mini-map>
-      <transition name="el-zoom-in-bottom">
+      <!-- <transition name="el-zoom-in-bottom">
         <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
-      </transition>
+      </transition> -->
     </div>
     <div class="right-panel">
       <div class="top-box">
@@ -128,6 +128,8 @@
         </div>
       </div>
     </div>
+    <!-- 监测曲线 -->
+    <historyCurve ref="historyCurve"></historyCurve>
   </div>
 </template>
 
@@ -135,12 +137,14 @@
 import miniMap from '@/views/widgets/miniMap/index.vue'
 import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
 import thematicMap from '@/views/widgets/thematicMap/index.vue'
+import historyCurve from '@/views/spectrum/common/historyCurve/index'
 import * as echarts from 'echarts'
 export default {
   components: {
     miniMap,
     moniterSee,
-    thematicMap
+    thematicMap,
+    historyCurve
   },
   data() {
     return {
@@ -180,10 +184,11 @@ export default {
   mounted() {},
   methods: {
     viewCurve(row = null) {
-      this.moniterVisible = true
-      if (row) {
-        this.$refs.moniterSee.open()
-      }
+      // this.moniterVisible = true
+      // if (row) {
+      //   this.$refs.moniterSee.open()
+      // }
+      this.$refs.historyCurve.show(row)
     },
     moniterClose() {
       this.moniterVisible = false

src/views/spectrum/reform/preAssess/widget.vue

@@ -7,9 +7,9 @@
           <thematic-map></thematic-map>
         </template>
       </mini-map>
-      <transition name="el-zoom-in-bottom">
+      <!-- <transition name="el-zoom-in-bottom">
         <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
-      </transition>
+      </transition> -->
     </div>
     <div class="right-panel">
       <div class="head-title line">评估结果</div>
@@ -115,6 +115,8 @@
         </el-tabs>
       </div>
     </div>
+    <!-- 监测曲线 -->
+    <historyCurve ref="historyCurve"></historyCurve>
   </div>
 </template>
 
@@ -122,12 +124,14 @@
 import miniMap from '@/views/widgets/miniMap/index.vue'
 import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
 import thematicMap from '@/views/widgets/thematicMap/index.vue'
+import historyCurve from '@/views/spectrum/common/historyCurve/index'
 import * as echarts from 'echarts'
 export default {
   components: {
     miniMap,
     moniterSee,
-    thematicMap
+    thematicMap,
+    historyCurve
   },
   data() {
     return {
@@ -219,10 +223,11 @@ export default {
       option && myChart.setOption(option)
     },
     viewCurve(row = null) {
-      this.moniterVisible = true
-      if (row) {
-        this.$refs.moniterSee.open()
-      }
+      // this.moniterVisible = true
+      // if (row) {
+      //   // this.$refs.moniterSee.open()
+      // }
+      this.$refs.historyCurve.show(row)
     },
     moniterClose() {
       this.moniterVisible = false

src/views/spectrum/statisticalAnalysis/wqSingleSite/widget.vue

@@ -54,7 +54,7 @@
       <!-- 结果 -->
       <div class="result-box">
         <div class="empty" v-if="targetVos.length==0"></div>
-        <div v-for="(item,index) in targetVos" :key="index" :id="'chart'+index" class="chart-box"></div>
+        <div v-for="(item,index) in targetVos" :key="index" :ref="'chart'+index" class="chart-box"></div>
       </div>
     </div>
 
@@ -82,6 +82,8 @@ import { getSiteIcon } from '@/views/spectrum/common/siteIcon/siteIcon' // 站
 import { MapPopup } from '@/views/spectrum/common/mapPopup/mapPopup'
 import historyCurve from '@/views/spectrum/common/historyCurve/index'
 import { creatTipMonitor } from '@/views/spectrum/common/mapPopup/getPopupInfo'
+
+import * as echarts from 'echarts'
 export default {
   components: {
     historyCurve
@@ -312,8 +314,8 @@ export default {
       })
     },
     loadChart(chartData, target, domIndex) {
-      let chartDom = document.getElementById('chart' + domIndex)
-      let myChart = this.$echarts.init(chartDom)
+      let chartDom = this.$refs['chart' + domIndex][0]
+      let myChart = echarts.init(chartDom)
       let colorAry = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
       let option = {
         title: {