综合查询

src/filters/ems.js

@@ -17,7 +17,7 @@ export const formatDate = (val,toSeconds = false,onlyTime=false) => {
   if(!toSeconds){
     return front
   } else{
-    return front +''+back
+    return front +' '+back
   }
 
 

src/views/ems/search/DateTimeSelect.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="time-range">
+        <el-date-picker
+            v-model="dateRange"
+            :type="type"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :format="valueFormat"
+            :value-format="valueFormat"
+            :clearable="false"
+            :picker-options="pickerOptions"
+            end-placeholder="结束时间">
+            </el-date-picker>
+            <el-button size="mini" style="margin-left: 10px;" :loading="loading" @click="reset">重置</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="search">搜索</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('before')">上一时段</el-button>
+            <el-button type="primary" size="mini" :loading="loading" @click="timeLine('next')" :disabled="disabledNextBtn">下一时段</el-button>
+        </div>
+</template>
+
+<script>
+import {formatDate} from '@/filters/ems'
+export default {
+  props:{
+    dataUnit:{
+      type:Number,
+      default:1
+    }
+  },
+  computed:{
+    type(){
+      return this.dataUnit === 3 ? 'daterange' : 'datetimerange'
+    },
+    valueFormat(){
+      return this.dataUnit === 3 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm'
+    },
+    disabledNextBtn(){
+      if(this.dateRange && this.dateRange.length ===2){
+        return new Date(this.dateRange[1]) >= new Date(this.defaultDateRange[1])
+      }else{
+        return true
+      }
+
+    }
+  },
+  watch:{
+    dataUnit:{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        newVal && newVal!==oldVal && this.init()
+      },
+      immediate: true,
+    }
+  },
+  data() {
+    return {
+      loading:false,
+      dateRange:[],
+      defaultDateRange:[],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+    }
+  },
+  methods: {
+    init(){
+      const {dataUnit} = this
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
+        const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)
+        this.dateRange = [timeAgo, formatNow];
+        this.defaultDateRange=[timeAgo, formatNow];
+        console.log('init',timeAgo,formatNow)
+        this.$emit('updateDate',this.dateRange || [])
+    },
+    showBtnLoading(status){
+        this.loading = status
+    },
+    // 切换分、时、天 重置时间可选范围
+    resetDate(){
+      this.dateRange = this.defaultDateRange
+    },
+    //重置 设置时间范围为初始化时间段
+    reset(){
+        this.resetDate()
+        this.$emit('updateDate',this.dateRange || [])
+    },
+    // 搜索
+    search(){
+      if(this.dateRange && this.dateRange.length>0){
+        const {dataUnit} = this
+        const [start,end] = this.dateRange
+        const startTime = new Date(start),endTime=new Date(end)
+        const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
+        if(endTime - startTime > timeDis){
+          this.$message.error(`时间范围不能超过${dataUnit === 3 ? '30天' : dataUnit === 2 ? '24小时' : '1小时'}`)
+        }
+      }else{
+        this.$emit('updateDate',this.dateRange || [])
+      }
+    },
+    timeLine(type){
+      if(!this.dateRange) return
+      //baseTime,maxTime 毫秒数
+      const baseTimes= this.dataUnit === 3 ? 24 * 60 * 60 * 1000 :this.dataUnit === 2 ? 60 * 60 * 1000 : 60 * 1000
+      const baseDis = this.dataUnit === 3 ? 30 :this.dataUnit === 2 ? 24 : 60
+      let baseTime = type === 'before' ? new Date(this.dateRange[0]).getTime() - baseTimes :new Date(this.dateRange[1]).getTime() + baseTimes  ,
+        maxTime = new Date(this.defaultDateRange[1]).getTime()
+      //updateTime 毫秒数
+      let updateTime = type === 'before' ? baseTime - baseDis * baseTimes : baseTime + baseDis * baseTimes
+      if(type === 'next' && updateTime >= maxTime) updateTime = maxTime
+      const start = formatDate(type === 'before' ? updateTime : baseTime,this.dataUnit !== 3)
+      const end = formatDate(type === 'before' ? baseTime : updateTime,this.dataUnit !== 3)
+      this.dateRange = [start,end]
+      this.$emit('updateDate',this.dateRange || [])
+    },
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.time-range{
+    display: flex;
+    ::v-deep {
+        .el-range-editor--medium .el-range__icon, .el-range-editor--medium .el-range__close-icon{
+          line-height: 22px;
+        }
+        .el-range-editor--medium.el-input__inner{
+            height: 30px;
+        }
+        .el-range-editor--medium .el-range-separator{
+            line-height: 24px;
+        }
+        .el-button--mini{
+            padding:3px 10px;
+        }
+    }
+
+}
+</style>

src/views/ems/search/index.vue

@@ -28,6 +28,13 @@
               @select="handleSelect"
           ></el-autocomplete>
         </el-form-item>
+        <el-form-item v-if="isDtdc" label="二级设备(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择二级设备' }]" style="width: 200px;margin-right: 50px">
+          <el-cascader
+              v-model="form.child"
+              :props="{ multiple: true }"
+              :options="childOptions"
+              @change="handleChildChange"></el-cascader>
+        </el-form-item>
         <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">
           <el-radio-group v-model="form.dataUnit">
             <el-radio :label="1">分钟</el-radio>
@@ -43,6 +50,7 @@
     <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
       <div slot="header" class="time-range-header">
         <span class="card-title"></span>
+        <date-time-select :data-unit="this.form.dataUnit" @updateDate="(val)=>form.dataRange =val"/>
       </div>
       <div style="height: 310px" id="searchChart"></div>
     </el-card>
@@ -54,26 +62,91 @@ import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
 import {getAllSites} from "@/api/ems/zddt";
 import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery} from '@/api/ems/search'
+import DateTimeSelect from "./DateTimeSelect.vue";
 export default {
   name: "Search",
   mixins: [resize],
+  components:{DateTimeSelect},
   computed: {
+    isDtdc(){
+      return this.form.categoryName === '单体电池'
+    }
   },
   data() {
     return {
       chart: null,
       deviceCategoryList:[],//设备列表
       siteList: [],//站点列表
+      childOptions:[
+        {
+          value: '021_DDS_01',
+          label: '站点一',
+          children:[{
+            value: '1',
+            label: '1-50',
+            children:[{
+              value: '001',
+              label: '设备一'
+            },{
+              value: '002',
+              label: '设备二'
+            },{
+              value: '003',
+              label: '设备三'
+            }]
+          }]
+        },
+        {
+          value: '021_DDS_02',
+          label: '站点二',
+          children:
+            [{
+              value: '1',
+              label: '1-50',
+              children:[{
+                value: '001',
+                label: '设备一'
+              },{
+                value: '002',
+                label: '设备二'
+              }, {
+                value: '003',
+                label: '设备三'
+              }]
+            },
+            {
+              value: '2',
+              label: '51-100',
+              children:[{
+                value: '001',
+                label: '设备一'
+              },{
+                value: '002',
+                label: '设备二'
+              },{
+                value: '003',
+                label: '设备三'
+              }]
+            }]
+
+        }
+      ],//二级设备列表
       form: {
+        dataRange:[],//时间选择范围
+        child:[],
         siteIds: [],//当前选中的站点id 默认选中第一个站点
         categoryName: '',//设备
         pointName: '',//点位
-        dataUnit: '',//横坐标
+        dataUnit: 1,//横坐标
       },
       loading: false,
     }
   },
   methods: {
+    handleChildChange(data){
+      console.log('选择二级设备',data)
+      this.form.child=data
+    },
     showLoading(){
       this.chart && this.chart.showLoading()
     },
@@ -150,7 +223,6 @@ export default {
       this.form.pointName = data.value
     },
     querySearchAsync(query,cb){
-      // query = query.trim()
       console.log('查询数据',query)
       if(this.form.siteIds.length===0 || !this.form.categoryName){
         this.$message({
@@ -188,6 +260,9 @@ export default {
           if(!this.form.pointName){
             return this.$message.error('请输入正确的点位');
           }
+          if(this.isDtdc && (this.form.child.length === 0 || this.form.child.length > 5 )){
+            return this.$message.error('请选择二级设备且不能超过5个');
+          }
           this.loading = true
           const{siteIds,dataUnit,categoryName,pointName}=this.form
           getPointValueList({siteIds,dataUnit,categoryName,pointName}).then(response => {