xy-frontend/src/views/reportData/photoTotal/components/photoList.vue

<template>
  <el-dialog
    class="photoDialog"
    title="图片历史数据"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    @close="hide"
    width="100%"
  >
    <div class="headInfo">
      <span class="zzid">装置编号：{{ rowData.cmdid }}</span>
      <span class="pictotal">图片总数：{{ total }}</span>
      <el-radio-group v-model="radio" @change="handleRadioChange">
        <el-radio :label="-1">全部</el-radio>
        <el-radio :label="1">通道1</el-radio>
        <el-radio :label="2">通道2</el-radio>
        <el-radio :label="3">通道3</el-radio>
        <el-radio :label="4">通道4</el-radio>
        <el-radio :label="5">通道5</el-radio>
        <el-radio :label="6">通道6</el-radio>
        <el-radio :label="7">通道7</el-radio>
        <el-radio :label="8">通道8</el-radio>
      </el-radio-group>
    </div>
    <div class="ipContain">
      <el-table
        v-loading="picloading"
        ref="multipleTable"
        :data="picListData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 0px)"
        border
      >
        <template slot="empty">
          <el-empty :image-size="160" description="暂无数据"></el-empty>
        </template>
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{ (page - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="照片Id" prop="picid"> </el-table-column> -->
        <el-table-column label="通道号" prop="channnelname"> </el-table-column>
        <el-table-column label="预置位" prop="presetId"> </el-table-column>
        <el-table-column label="收到时间" prop="recvTime"> </el-table-column>
        <el-table-column label="拍照时间" prop="photoTime"> </el-table-column>
        <el-table-column label="类型" prop="mediaType">
          <template slot-scope="scope">
            {{ scope.row.mediaType == 0 ? "图片" : "视频" }}
          </template>
        </el-table-column>
        <el-table-column label="照片" prop="path">
          <template slot-scope="scope">
            <a :href="scope.row.path" target="_blank">
              <el-image
                style="width: 120px; height: 80px; cursor: pointer"
                :src="scope.row.path"
              >
              </el-image>
              {{ scope.row.picid }}
            </a>
          </template>
        </el-table-column>
      </el-table>
      <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 slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">关 闭</el-button>
    </div> -->
  </el-dialog>
</template>
<script>
import { getphotoApi } from "@/utils/api/reportApi";

export default {
  props: {},

  data() {
    return {
      isShow: false,
      rowData: "",
      paramsData: "",
      picListData: [],
      picloading: false,
      radio: "-1",
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
    };
  },
  created() {},
  methods: {
    // 保存确定操作
    display(row, params) {
      this.isShow = true;
      this.rowData = row;
      this.paramsData = params; //获取开始时间结束时间和通道
      this.radio = this.paramsData.channelid;
      console.log(this.radio);
      console.log(row, params);
      //localStorage.setItem("picflag", this.isShow);
      this.getPhotoList();
    },
    hide() {
      this.isShow = false;
      // console.log(this.isShow);
      // localStorage.setItem("picflag", this.isShow);
    },
    getPhotoList() {
      this.picloading = true;
      setTimeout(() => {
        getphotoApi({
          dyid: this.rowData.dyId,
          lineid: this.rowData.lineId,
          towerid: this.rowData.towerId,
          channelid: this.radio,
          termid: this.rowData.id,
          starttime: this.paramsData.starttime,
          endtime: this.paramsData.endtime,
          pageindex: this.page,
          pagesize: this.pageSize,
        })
          .then((res) => {
            console.log(res);
            this.picListData = res.data.list;
            this.total = res.data.total;
            this.picloading = false;
          })
          .catch((err) => {
            this.picloading = false;
            console.log(err);
          });
      }, 100);
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getPhotoList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPhotoList();
    },
    handleRadioChange(value) {
      // 当选中项改变时，value参数会是新的选中项的label值
      console.log("当前选中的label是:", value);
      // 在这里你可以根据value做相应的处理
      this.radio = value;
      this.getPhotoList();
    },
  },

  created() {},
};
</script>
<style lang="less">
.photoDialog {
  .el-dialog {
    height: 100%;
    margin: 0px;
    .el-table {
      .cell {
        text-align: center;
        vertical-align: middle; /* 如果需要垂直居中 */
      }
    }
    .headInfo {
      position: absolute;
      top: 22px;
      left: 154px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .zzid {
        color: #333;
      }
      .pictotal {
        margin-left: 12px;
      }
      .el-radio-group {
        margin-top: 4px;
        margin-left: 24px;
      }
    }
    .el-dialog__body {
      height: calc(100% - 70px);
      padding: 8px;
    }
    .ipContain {
      height: calc(100% - 40px);
      .el-table {
        color: #000;
        thead {
          color: #000;
          font-weight: bold;
        }
        th.el-table__cell {
          background: #dcdcdc !important;
        }
        td.el-table__cell,
        th.el-table__cell.is-leaf {
          border-bottom: 1px solid #dcdcdc;
        }
        .el-table__cell {
          border-right: 1px solid #dcdcdc;
        }
      }
    }
  }
  .el-dialog__headerbtn {
    top: 18px;
    .el-dialog__close {
      font-size: 26px;
      &:hover {
        background: #e2e2e2;
      }
    }
  }
}
</style>