实时查询功能

src/utils/api/index.js

@@ -47,6 +47,16 @@ export function getPictureList(data){
   })
 }
 
+//实时查询
+//获取电压-线路-杆塔等信息
+export function getSearchInfo(data){
+  return request({
+    url: "/test/getLineAndGt",
+    method: "post",
+    data
+  })
+}
+
 //杆塔信息
 //1.获取杆塔列表
 export function getTowerListApi(data) {

src/views/realTimeSearch/index.vue

@@ -2,47 +2,37 @@
   <div class="realTimeSearch">
     <div class="searchMain">
       <div class="searchBox">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <el-form-item label="电压名称">
+            <el-select v-model="formdata.dyVal" @change="getSearchxl">
+              <el-option v-for="item in dyOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item label="线路名称">
-            <el-select v-model="formInline.xlVal" placeholder="活动区域">
+            <el-select v-model="formdata.xlVal" @change="getSearchgt">
-              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option v-for="item in xlOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="杆塔名称">
-            <el-select v-model="formInline.gtVal" placeholder="活动区域">
+            <el-select v-model="formdata.gtVal" @change="getSearchtd">
-              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option v-for="item in gtOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="通道监拍点">
-            <el-select v-model="formInline.tdVal" placeholder="活动区域">
+            <el-select v-model="formdata.tdVal">
-              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option v-for="item in tdOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
-              <el-option label="区域二" value="beijing"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="开始日期">
+          <el-form-item label="日期">
-            <el-date-picker
+            <el-date-picker v-model="formdata.timeVal" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" 
-              v-model="formInline.startTimeVal"
+            value-format="timestamp"></el-date-picker>
-              type="datetime"
-              placeholder="选择日期时间"
-            >
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="结束日期">
-            <el-date-picker
-              v-model="formInline.endTimeVal"
-              type="datetime"
-              placeholder="选择日期时间"
-            >
-            </el-date-picker>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
           </el-form-item>
         </el-form>
       </div>
-      <div class="pictureBox">
+      <div class="pictureBox" v-loading="loading">
         <el-card
           class="box-card imgList"
           v-for="(item, index) in picList"
@@ -70,9 +60,10 @@
       <div class="pageNation">
         <el-pagination
           @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
           :current-page="page"
           :page-size="pageSize"
-          layout=" prev, pager, next, jumper,total"
+          layout="sizes, prev, pager, next, jumper,total"
           :total="total"
           background
         >
@@ -83,175 +74,96 @@
 </template>
 
 <script>
+import { getSearchInfo, getPictureList } from "@/utils/api/index";
 export default {
   data() {
     return {
-      formInline: {
+      dyOptions: [],//电压数据
-        xlVal: "",
+      xlOptions: [],//线路数据
-        gtVal: "",
+      gtOptions: [],//杆塔数据
-        tdVal: "",
+      tdOptions: [],//通道数据
-        startTimeVal: "",
+      formdata: {
-        endTimeVal: "",
+        dyVal:'',
+        xlVal:'',
+        gtVal: '',
+        tdVal: '',
+        timeVal: '',
       },
-
+      picList: [],
-      picList: [
-        {
-          id: 15,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 265357,
-          photoTime: "2023-05-05T17:21:04.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012104.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 16,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 263597,
-          photoTime: "2023-05-05T17:21:49.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012149.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 17,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 265471,
-          photoTime: "2023-05-05T17:25:13.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012513.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 18,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 263625,
-          photoTime: "2023-05-05T17:36:37.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013617.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 19,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 261572,
-          photoTime: "2023-05-05T17:37:14.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013654.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 22,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 264348,
-          photoTime: "2023-05-05T17:40:06.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013946.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 23,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 262231,
-          photoTime: "2023-05-05T17:42:33.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014213.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 24,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 262564,
-          photoTime: "2023-05-05T17:43:11.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014252.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 26,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 177557,
-          photoTime: "2023-05-05T17:46:23.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014604.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 37,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 219467,
-          photoTime: "2023-05-05T17:47:31.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014711.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 89,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 257854,
-          photoTime: "2023-05-06T00:54:07.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506085401.jpg",
-          manualRequest: 0,
-        },
-      ],
       page: 1, // 当前页数
       pageSize: 10, // 每页数量
       total: 0, //总条数
+      loading: false,
     };
   },
+  mounted(){
+    this.$set(this.formdata, "timeVal", [new Date(new Date().toLocaleDateString()).getTime(), new Date().getTime()]);
+    this.getSearchdy()
+    this.getPicData()
+  },
   methods: {
+    //获取电压信息
+    getSearchdy(){
+      getSearchInfo({ type:1 }).then((res) => {
+        this.dyOptions = res.data.list;
+        this.formdata.dyVal = res.data.list[0].id
+        this.getSearchxl()
+      }).catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl(){
+      getSearchInfo({ type: 2, id: this.formdata.dyVal }).then((res) => {
+        this.xlOptions = res.data.list;
+        this.formdata.xlVal = res.data.list[0].id
+        this.getSearchgt()
+      }).catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt(){
+      getSearchInfo({ type: 3, id: this.formdata.xlVal }).then((res) => {
+        this.gtOptions = res.data.list;
+        this.formdata.gtVal = res.data.list[0].id
+        this.getSearchtd()
+      }).catch((err) => {});
+    },
+    //获取通道数据
+    getSearchtd(){
+      getSearchInfo({ type: 4, id: this.formdata.gtVal }).then((res) => {
+        this.tdOptions = res.data.list;
+        this.formdata.tdVal = res.data.list[0].id
+      }).catch((err) => {});
+    },
+    //获取图片列表
+    getPicData() {
+      this.loading = true;
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      this.$set(this.formdata, "startTimeVal", this.formdata.timeVal[0]);
+      this.$set(this.formdata, "endTimeVal", this.formdata.timeVal[1]);
+      getPictureList(this.formdata)
+        .then((res) => {
+          this.picList = res.data.list;
+          this.total = res.data.total;
+          this.loading = false;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //查询
     onSubmit() {
-      console.log("submit!");
+      this.getPicData()
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
+      this.getPicData()
     },
+    //每页条数
+    handleSizeChange(val){
+      this.pageSize = val;
+      this.getPicData()
+    }
   },
 };
 </script>