frontend/src/views/realTimeSearch/index.vue

<template>
  <div class="realTimeSearch">
    <div class="searchBox">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </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="imgList" v-for="(item, index) in picList" :key="index">
        <img :src="item.path" />
        <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>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      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,
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="less">
.realTimeSearch {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: #f0f0f0;
  .pictureBox {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    height: calc(100% - 52px);
    overflow: auto;
    .imgList {
      width: calc((100% - 96px) / 4);
      position: relative;
      display: inline-block;
      margin: 8px;
      position: relative;
      padding: 4px;
      border-radius: 3px;
      background: #fff;

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