综合查询

src/api/ems/search.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+// 获取设备列表
+export function getAllDeviceCategory() {
+  return request({
+    url: '/ems/generalQuery/getAllDeviceCategory',
+    method: 'get'
+  })
+}
+// 点位列表
+export function pointFuzzyQuery(data) {
+  return request({
+    url: '/ems/generalQuery/pointFuzzyQuery',
+    method: 'post',
+    data
+  })
+}
+// 图表
+export function getPointValueList(data) {
+  return request({
+    url: '/ems/generalQuery/getPointValueList',
+    method: 'post',
+    data
+  })
+}

src/views/ems/search/index.vue

@@ -3,36 +3,36 @@
     <el-form ref="form" :model="form" label-position="top">
       <el-form-item
           label="站点"
-          prop="siteId"
+          prop="siteIds"
           :rules="[{ required: true, message: '请选择站点' }]"
       >
-        <el-checkbox-group v-model="form.siteId">
+        <el-checkbox-group v-model="form.siteIds">
           <el-checkbox v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
             {{ item.siteName }}
           </el-checkbox>
         </el-checkbox-group>
       </el-form-item>
-      <el-form-item label="设备" prop="deviceCategory" :rules="[{ required: true, message: '请选择设备' }]">
+      <el-form-item label="设备" prop="categoryName" :rules="[{ required: true, message: '请选择设备' }]">
-        <el-radio-group v-model="form.deviceCategory" >
+        <el-radio-group v-model="form.categoryName" >
-          <el-radio v-for="([value,name],index) in deviceCategoryList" :key="index+'sbListSearch'" :label="value">
+          <el-radio v-for="(key,index) in deviceCategoryList" :key="index+'sbListSearch'" :label="key">
-            {{ name }}
+            {{ key }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
       <div style="display: flex">
-        <el-form-item label="点位" prop="point" :rules="[{ required: true, message: '请输入点位' }]" style="width: 200px;margin-right: 50px">
+        <el-form-item label="点位" prop="pointName"  :rules="[{ required: true, message: '请输入点位' }]" style="width: 200px;margin-right: 50px">
-          <el-input
+          <el-autocomplete
-            v-model="form.point"
+              v-model="form.pointName"
-            placeholder="请输入点位"
+              placeholder="请输入点位"
-            type="text"
+              :fetch-suggestions="querySearchAsync"
-          >
+              @select="handleSelect"
-          </el-input>
+          ></el-autocomplete>
         </el-form-item>
-        <el-form-item label="横坐标" prop="xAxios" :rules="[{ required: true, message: '请选择横坐标' }]">
+        <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">
-          <el-radio-group v-model="form.xAxios">
+          <el-radio-group v-model="form.dataUnit">
-            <el-radio label="hour">时</el-radio>
+            <el-radio :label="1">分钟</el-radio>
-            <el-radio label="minute">分</el-radio>
+            <el-radio :label="2">小时</el-radio>
-            <el-radio label="second">秒</el-radio>
+            <el-radio :label="3">天</el-radio>
           </el-radio-group>
         </el-form-item>
       </div>
@@ -43,7 +43,6 @@
     <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-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
       </div>
       <div style="height: 310px" id="searchChart"></div>
     </el-card>
@@ -53,35 +52,23 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
-import {mapState} from "vuex";
 import {getAllSites} from "@/api/ems/zddt";
-import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
+import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery} from '@/api/ems/search'
 export default {
   name: "Search",
   mixins: [resize],
-  components: {DateRangeSelect},
   computed: {
-    ...mapState({
-      deviceCategoryOptions: state => state?.ems?.deviceCategoryOptions || {},
-    }),
-    //设备列表
-    deviceCategoryList() {
-      // deviceCategoryOptions:{'PCS':'PCS','STACK':'电池堆','CLUSTER':'电池簇','COOLING':'液冷','BATTERY':'单体电池','AMMETER':'电表'},//设备类别
-      return Object.entries(this.deviceCategoryOptions).filter(([key, value]) => {
-        return ['STACK', 'CLUSTER', 'BATTERY', 'AMMETER'].includes(key)
-      })
-    },
   },
   data() {
     return {
       chart: null,
-      timeRange:[],
+      deviceCategoryList:[],//设备列表
       siteList: [],//站点列表
       form: {
-        siteId: [],//当前选中的站点id 默认选中第一个站点
+        siteIds: [],//当前选中的站点id 默认选中第一个站点
-        deviceCategory: '',//设备
+        categoryName: '',//设备
-        point: '',//点位
+        pointName: '',//点位
-        xAxios: '',//横坐标
+        dataUnit: '',//横坐标
       },
       loading: false,
     }
@@ -96,37 +83,135 @@ export default {
     initChart() {
       this.chart = echarts.init(document.querySelector('#searchChart'))
     },
-    // 更新时间范围 重置图表
+    setOption(data) {
-    updateDate(data){
+      if(!this.chart) return
-      this.timeRange=data
+      this.chart.clear()
-      this.getDate()
+      console.log('返回的数据',data)
+      let dataset=[]
+      if(data.length>0){
+        data.forEach((item,index)=>{
+          item.deviceList.forEach(inner=>{
+            dataset.push({
+              name:`${this.siteList.find(s=>s.siteId === item.siteId)?.siteName || ''}-${inner.deviceId}`,
+              type:'line',
+              xdata:[],
+              data:[]
+            })
+            const length = dataset.length
+            inner.pointValueList.forEach(value=>{
+              dataset[length-1].xdata.push(value.valueDate)
+              dataset[length-1].data.push(value.pointValue)
+            })
+          })
+        })
+      }else{
+        this.$message.warning('暂无数据')
+      }
+      console.log('图表数据',dataset)
+      this.chart.setOption({
+        legend: {
+          left: 'center',
+          top: '10',
+        },
+        grid: {
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: 'value',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          },
+          {
+            start: 0,
+            end: 100
+          }
+        ],
+        series: dataset
+      })
     },
     submitForm() {
-      this.$refs.form.validate(valid => {
+      this.getDate()
-        valid && this.getDate()
+    },
+    handleSelect(data){
+      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({
+          type: 'warning',
+          message: '请先选择站点和设备',
+        })
+        return cb([])
+      }
+      pointFuzzyQuery({
+        siteIds:this.form.siteIds,
+        categoryName:this.form.categoryName,
+        pointName:query,
+      }).then(response => {
+        const data  = response?.data || []
+        cb(data.map(item => {
+          return {name: item, value: item}
+        }))
+      })
+    },
+    // 获取所有设备
+    getDeviceCategory(){
+      return getAllDeviceCategory().then(response => {
+        this.deviceCategoryList=response?.data || []
       })
     },
     getZdList() {
       return getAllSites().then(response => {
         this.siteList = response.data || []
-        console.log("获取站点列表返回数据", this.siteList)
-        // this.siteList.length > 0 && (this.form.siteId = [this.siteList[0].siteId])
       }).finally(() => {
-        this.loading = false;
-        this.searchLoading = false
       })
     },
     getDate(){
-
+      this.$refs.form.validate(valid => {
-    },
+        if(valid){
-    init() {
+          if(!this.form.pointName){
-
+            return this.$message.error('请输入正确的点位');
+          }
+          this.loading = true
+          const{siteIds,dataUnit,categoryName,pointName}=this.form
+          getPointValueList({siteIds,dataUnit,categoryName,pointName}).then(response => {
+            this.setOption(response?.data || [])
+          }).finally(()=>{
+            this.loading = false
+          })
+        }
+      })
     },
   },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
   mounted() {
-    this.getZdList()
+    this.loading= true
-    this.initChart()
+    this.$nextTick(()=>{
-    this.$refs.dateRangeSelect.init()
+      this.initChart()
+      Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
+    })
   }
 }
 </script>