From 9dcf2a6c12f8c50463f04f563ca6dbf90ad393ee Mon Sep 17 00:00:00 2001
From: baicai <18221243570@163.com>
Date: Sat, 27 Sep 2025 17:37:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E5=90=88=E6=9F=A5=E8=AF=A2=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E7=AB=99=E7=82=B9=E3=80=81=E8=AE=BE=E5=A4=87=E6=B8=85?=
 =?UTF-8?q?=E7=A9=BA=E7=82=B9=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/search/index.vue | 505 +++++++++++++++++++--------------
 1 file changed, 289 insertions(+), 216 deletions(-)

diff --git a/src/views/ems/search/index.vue b/src/views/ems/search/index.vue
index b0dac96..f6be9f3 100644
--- a/src/views/ems/search/index.vue
+++ b/src/views/ems/search/index.vue
@@ -1,56 +1,86 @@
 <template>
-  <div v-loading="loading" class="ems-dashboard-editor-container" style="background-color: #ffffff">
+  <div
+    v-loading="loading"
+    class="ems-dashboard-editor-container"
+    style="background-color: #ffffff"
+  >
     <el-form ref="form" :model="form" label-position="top">
       <el-form-item
-          label="站点"
-          prop="siteIds"
-          :rules="[{ required: true, message: '请选择站点' }]"
+        label="站点"
+        prop="siteIds"
+        :rules="[{ required: true, message: '请选择站点' }]"
       >
-        <el-radio-group v-model="form.siteIds" >
-          <el-radio  v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
+        <el-radio-group v-model="form.siteIds" @input="changeSiteIds">
+          <el-radio
+            v-for="(item, index) in siteList"
+            :key="index + 'zdListSearch'"
+            :label="item.siteId"
+          >
             {{ item.siteName }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="设备" prop="categoryName" :rules="[{ required: true, message: '请选择设备' }]">
-        <el-radio-group v-model="form.categoryName" >
-          <el-radio v-for="(key,index) in deviceCategoryList" :key="index+'sbListSearch'" :label="key">
+      <el-form-item
+        label="设备"
+        prop="categoryName"
+        :rules="[{ required: true, message: '请选择设备' }]"
+      >
+        <el-radio-group v-model="form.categoryName" @input="changeSiteIds">
+          <el-radio
+            v-for="(key, index) in deviceCategoryList"
+            :key="index + 'sbListSearch'"
+            :label="key"
+          >
             {{ key }}
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item v-if="isDtdc" label="单体电池(不超过5个)" prop="child" :rules="[{ required: true, message: '请选择单体电池' }]">
+      <el-form-item
+        v-if="isDtdc"
+        label="单体电池(不超过5个)"
+        prop="child"
+        :rules="[{ required: true, message: '请选择单体电池' }]"
+      >
         <el-cascader
-            v-model="form.child"
-            style="width:400px"
-            :props="{ multiple: true }"
-            :show-all-levels="false"
-            :options="childOptions"
-            @change="handleChildChange"></el-cascader>
+          v-model="form.child"
+          style="width: 400px"
+          :props="{ multiple: true }"
+          :show-all-levels="false"
+          :options="childOptions"
+          @change="handleChildChange"
+        ></el-cascader>
       </el-form-item>
       <div style="display: flex">
-        <el-form-item label="点位" prop="pointName"  :rules="[{ required: true, message: '请输入点位' }]" style="margin-right: 50px">
+        <el-form-item
+          label="点位"
+          prop="pointName"
+          :rules="[{ required: true, message: '请输入点位' }]"
+          style="margin-right: 50px"
+        >
           <el-autocomplete
-              v-model="form.pointName"
-              placeholder="请输入点位"
-              clearable
-              :fetch-suggestions="querySearchAsync"
-              @select="handleSelect"
+            v-model="form.pointName"
+            placeholder="请输入点位"
+            clearable
+            :fetch-suggestions="querySearchAsync"
+            @select="handleSelect"
           ></el-autocomplete>
         </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>-->
-<!--            <el-radio :label="2">小时</el-radio>-->
-<!--            <el-radio :label="3">天</el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </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>-->
+        <!--            <el-radio :label="2">小时</el-radio>-->
+        <!--            <el-radio :label="3">天</el-radio>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
       </div>
       <el-form-item>
         <el-button type="primary" @click="submitForm">生成图表</el-button>
       </el-form-item>
     </el-form>
-    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+    <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">
           <el-radio-group v-model="form.dataUnit">
@@ -59,7 +89,12 @@
             <el-radio :label="3">天</el-radio>
           </el-radio-group>
         </span>
-        <date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
+        <date-time-select
+          ref="dateTimeSelect"
+          :data-unit="form.dataUnit"
+          @initDate="(e) => (form.dataRange = e || [])"
+          @updateDate="updateDate"
+        />
       </div>
       <div style="height: 350px" id="searchChart"></div>
     </el-card>
@@ -67,274 +102,312 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {getAllSites} from "@/api/ems/zddt";
-import {getAllDeviceCategory,getPointValueList,pointFuzzyQuery,getAllBatteryIdsBySites} from '@/api/ems/search'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { getAllSites } from "@/api/ems/zddt";
+import {
+  getAllDeviceCategory,
+  getPointValueList,
+  pointFuzzyQuery,
+  getAllBatteryIdsBySites,
+} from "@/api/ems/search";
 import DateTimeSelect from "./DateTimeSelect.vue";
 export default {
   name: "Search",
   mixins: [resize],
-  components:{DateTimeSelect},
+  components: { DateTimeSelect },
   computed: {
-    isDtdc(){
-      return this.form.categoryName === '单体电池'
+    isDtdc() {
+      return this.form.categoryName === "单体电池";
     },
   },
-  watch:{
-    'form.siteIds':{
-        handler(newVal){
-          newVal && this.isDtdc && this.getChildList()
-        }
+  watch: {
+    "form.siteIds": {
+      handler(newVal) {
+        newVal && this.isDtdc && this.getChildList();
+      },
     },
-    isDtdc:{
-      handler(newVal){
-        newVal && this.form.siteIds && this.getChildList()
-        !newVal && (this.form.child = [])
-      }
+    isDtdc: {
+      handler(newVal) {
+        newVal && this.form.siteIds && this.getChildList();
+        !newVal && (this.form.child = []);
+      },
     },
-    'form.dataUnit':{
-      handler(newVal,oldVal){
-        console.log('wacth到了dataUnit的变化',newVal,oldVal)
-        this.$nextTick(()=>{
-          this.$refs.dateTimeSelect.init()
-          this.getDate()
-        })
+    "form.dataUnit": {
+      handler(newVal, oldVal) {
+        console.log("wacth到了dataUnit的变化", newVal, oldVal);
+        this.$nextTick(() => {
+          this.$refs.dateTimeSelect.init();
+          this.getDate();
+        });
         // this.submitForm()
       },
-    }
+    },
   },
   data() {
     return {
       chart: null,
-      deviceCategoryList:[],//设备列表
-      siteList: [],//站点列表
-      childOptions:[],//二级设备列表
+      deviceCategoryList: [], //设备列表
+      siteList: [], //站点列表
+      childOptions: [], //二级设备列表
       form: {
-        dataRange:[],//时间选择范围
-        child:[],
-        siteIds: '',//当前选中的站点id 默认选中第一个站点
-        categoryName: '',//设备
-        pointName: '',//点位
-        dataUnit: 1,//横坐标
+        dataRange: [], //时间选择范围
+        child: [],
+        siteIds: "", //当前选中的站点id 默认选中第一个站点
+        categoryName: "", //设备
+        pointName: "", //点位
+        dataUnit: 1, //横坐标
       },
       loading: false,
-    }
+    };
   },
   methods: {
-    getChildList(){
-      this.childOptions=[]
-      this.form.child=[]
-      const {siteIds} = this.form
-      getAllBatteryIdsBySites([siteIds]).then(response=>{
+    changeSiteIds(val) {
+      console.log("切换站点或设备清空点位", val);
+      val && (this.form.pointName = "");
+    },
+    getChildList() {
+      this.childOptions = [];
+      this.form.child = [];
+      const { siteIds } = this.form;
+      getAllBatteryIdsBySites([siteIds]).then((response) => {
         const data = response?.data || {};
-        const base = 50
-        let options = []
-        Object.entries(data).forEach(([key,value],index)=>{
-          if(!value) value  =[]
+        const base = 50;
+        let options = [];
+        Object.entries(data).forEach(([key, value], index) => {
+          if (!value) value = [];
           options.push({
             value: key,
-            label: this.siteList.find(s=>s.siteId === key)?.siteName || '',
-            children:[]
-          })
-          const length = value.length
-          const num = Math.ceil(length /base )
-          if(num === 0) return
-          for(let i = 1; i <= num; i++){
-            const start = (i-1)*base+1,end = i*base
+            label: this.siteList.find((s) => s.siteId === key)?.siteName || "",
+            children: [],
+          });
+          const length = value.length;
+          const num = Math.ceil(length / base);
+          if (num === 0) return;
+          for (let i = 1; i <= num; i++) {
+            const start = (i - 1) * base + 1,
+              end = i * base;
             options[index].children.push({
-              value:i,
+              value: i,
               label: `${start}-${end}`,
-              children:[]
-            })
-            for(let s = start;s<=Math.min(length,end);s++){
-              options[index].children[i-1].children.push({
-                value:value[s-1],
-                label:value[s-1]
-              })
+              children: [],
+            });
+            for (let s = start; s <= Math.min(length, end); s++) {
+              options[index].children[i - 1].children.push({
+                value: value[s - 1],
+                label: value[s - 1],
+              });
             }
           }
-        })
-        console.log('二级设备options',options)
+        });
+        console.log("二级设备options", options);
         this.childOptions = options;
-      })
+      });
     },
-    handleChildChange(data){
-      console.log('选择二级设备',data)
-      this.form.child=data
+    handleChildChange(data) {
+      console.log("选择二级设备", data);
+      this.form.child = data;
     },
-    showLoading(){
-      this.chart && this.chart.showLoading()
+    showLoading() {
+      this.chart && this.chart.showLoading();
     },
-    hideLoading(){
-      this.chart && this.chart.hideLoading()
+    hideLoading() {
+      this.chart && this.chart.hideLoading();
     },
     initChart() {
-      this.chart = echarts.init(document.querySelector('#searchChart'))
+      this.chart = echarts.init(document.querySelector("#searchChart"));
     },
-    updateDate(val){
-      this.form.dataRange =val || []
-      this.getDate()
+    updateDate(val) {
+      this.form.dataRange = val || [];
+      this.getDate();
     },
     setOption(data) {
-      if(!this.chart) return
-      this.chart.clear()
-      console.log('返回的数据',data)
-      let dataset=[]
-      if(data.length>0){
-        data.forEach((item,index)=>{
-          item.deviceList.forEach(inner=>{
+      if (!this.chart) return;
+      this.chart.clear();
+      console.log("返回的数据", data);
+      let dataset = [];
+      if (data.length > 0) {
+        data.forEach((item, index) => {
+          item.deviceList.forEach((inner) => {
             dataset.push({
-              name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${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('暂无数据')
+              name: `${
+                this.isDtdc
+                  ? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
+                  : ""
+              }${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)
+      console.log("图表数据", dataset);
       this.chart.setOption({
         legend: {
           // left: 'center',
           // top: '10',
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        textStyle:{
-          color:"#333333",
+        textStyle: {
+          color: "#333333",
         },
-        xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
+        xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
-          }
+            end: 100,
+          },
         ],
-        series: dataset
-      })
+        series: dataset,
+      });
     },
     submitForm() {
-      this.getDate()
+      this.getDate();
     },
-    handleSelect(data){
-      this.form.pointName = data.value
+    handleSelect(data) {
+      this.form.pointName = data.value;
     },
-    querySearchAsync(query,cb){
-      console.log('查询数据',query)
-      if(!this.form.siteIds || !this.form.categoryName){
+    querySearchAsync(query, cb) {
+      console.log("查询数据", query);
+      if (!this.form.siteIds || !this.form.categoryName) {
         this.$message({
-          type: 'warning',
-          message: '请先选择站点和设备',
-        })
-        return cb([])
+          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}
-        }))
-      })
+        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 || []
-      })
+    getDeviceCategory() {
+      return getAllDeviceCategory().then((response) => {
+        this.deviceCategoryList = response?.data || [];
+      });
     },
     getZdList() {
-      return getAllSites().then(response => {
-        this.siteList = response.data || []
-      }).finally(() => {
-      })
+      return getAllSites()
+        .then((response) => {
+          this.siteList = response.data || [];
+        })
+        .finally(() => {});
     },
-    getDate(){
-      this.$refs.form.validate(valid => {
-        if(valid){
-          if(!this.form.pointName){
-            return this.$message.error('请输入正确的点位');
+    getDate() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          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个');
+          if (
+            this.isDtdc &&
+            (this.form.child.length === 0 || this.form.child.length > 5)
+          ) {
+            return this.$message.error("请选择单体电池且不能超过5个");
           }
-          const{siteIds,dataUnit,categoryName,pointName,dataRange:[start='',end=''],child}=this.form
-          if(!start || !end) return this.$message.error('请选择时间');
-          let siteDeviceMap={}
-          child.forEach(([first,second,third])=>{
-             if(siteDeviceMap[first]){
-               siteDeviceMap[first].push(third)
-             }else{
-               siteDeviceMap[first]=[]
-               siteDeviceMap[first].push(third)
-             }
-          })
-          let startDate,endDate
-          if(start && dataUnit===3){
+          const {
+            siteIds,
+            dataUnit,
+            categoryName,
+            pointName,
+            dataRange: [start = "", end = ""],
+            child,
+          } = this.form;
+          if (!start || !end) return this.$message.error("请选择时间");
+          let siteDeviceMap = {};
+          child.forEach(([first, second, third]) => {
+            if (siteDeviceMap[first]) {
+              siteDeviceMap[first].push(third);
+            } else {
+              siteDeviceMap[first] = [];
+              siteDeviceMap[first].push(third);
+            }
+          });
+          let startDate, endDate;
+          if (start && dataUnit === 3) {
             // startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
-            startDate = start + ' 00:00:00'
-          }else{
-            startDate=start
+            startDate = start + " 00:00:00";
+          } else {
+            startDate = start;
           }
-          if(end && dataUnit===3){
+          if (end && dataUnit === 3) {
             // endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
-            endDate = end + ' 00:00:00'
-          }else{
-            endDate=end
+            endDate = end + " 00:00:00";
+          } else {
+            endDate = end;
           }
-          this.loading = true
-          getPointValueList({siteIds:[siteIds],dataUnit,categoryName,pointName,startDate,endDate,siteDeviceMap}).then(response => {
-            this.setOption(response?.data || [])
-          }).finally(()=>{
-            this.loading = false
+          this.loading = true;
+          getPointValueList({
+            siteIds: [siteIds],
+            dataUnit,
+            categoryName,
+            pointName,
+            startDate,
+            endDate,
+            siteDeviceMap,
           })
+            .then((response) => {
+              this.setOption(response?.data || []);
+            })
+            .finally(() => {
+              this.loading = false;
+            });
         }
-      })
+      });
     },
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   mounted() {
-    this.loading= true
-    this.$nextTick(()=>{
-      this.initChart()
-      this.$refs.dateTimeSelect.init()
-      Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
-    })
-  }
-}
+    this.loading = true;
+    this.$nextTick(() => {
+      this.initChart();
+      this.$refs.dateTimeSelect.init();
+      Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(
+        () => (this.loading = false)
+      );
+    });
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>