frontend/src/views/realTimeSearch/index.vue

<template>
  <div class="realTimeSearch">
    <div class="searchMain">
      <div class="searchBox">
        <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="formdata.xlVal" @change="getSearchgt">
              <el-option v-for="item in xlOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="杆塔名称">
            <el-select v-model="formdata.gtVal" @change="getSearchtd">
              <el-option v-for="item in gtOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通道监拍点">
            <el-select v-model="formdata.tdVal">
              <el-option v-for="item in tdOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="formdata.timeVal" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" 
            value-format="timestamp"></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" v-loading="loading">
        <el-card
          class="box-card imgList"
          v-for="(item, index) in picList"
          :key="index"
        >
          <viewer class="bigpic">
            <img :src="item.path" />
            <!-- <el-image :src="item.path" lazy></el-image> -->
            <div class="caption">
              <p class="infoTop">
                {{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
              </p>
              <p class="infoBottom">
                拍照时间：{{
                  $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss")
                }}
                上传时间：{{
                  $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
                }}
              </p>
            </div>
          </viewer>
        </el-card>
      </div>
      <div class="pageNation">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper,total"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchInfo, getPictureList } from "@/utils/api/index";
export default {
  data() {
    return {
      dyOptions: [],//电压数据
      xlOptions: [],//线路数据
      gtOptions: [],//杆塔数据
      tdOptions: [],//通道数据
      formdata: {
        dyVal:'',
        xlVal:'',
        gtVal: '',
        tdVal: '',
        timeVal: '',
      },
      picList: [],
      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() {
      this.getPicData()
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getPicData()
    },
    //每页条数
    handleSizeChange(val){
      this.pageSize = val;
      this.getPicData()
    }
  },
};
</script>
<style lang="less">
.realTimeSearch {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: #fff;
  .searchMain {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
  }
  .pictureBox {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    height: calc(100% - 86px);
    overflow: auto;
    border: 1px solid #eee;

    .imgList {
      width: calc((100% - 104px) / 4);
      position: relative;
      display: inline-block;
      margin: 8px;
      position: relative;
      padding: 4px;
      border-radius: 3px;
      background: #fff;
      .el-card__body {
        padding: 0px;
      }
      img {
        cursor: pointer;
        width: 100%;
        //height: 100%;
      }

      .caption {
        padding: 9px;
        color: #333;
        .infoTop {
          font-size: 16px;
          color: #000;
          font-weight: normal;
          margin-top: 2px;
          padding-left: 5px;
          padding-right: 5px;
        }
        .infoBottom {
          color: #000;
          font-size: 12px;
          font-weight: normal;
          margin-top: 6px;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>