综合查询

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 => {