YF_monitor/test/src/views/banMange/index.vue

<template>
  <div>
    <div class="right-top">
      <img src="../../assets/home.png" alt="" />
      <span>解封/</span>
      <span class="info">解封</span>
    </div>

    <el-card class="search-card">
      <div class="right-bottom-inp" >
        <div class="inp">
          <label for="inp2" style="background-color: #dcdfe6">编号</label>
          <el-input
            size="mini"
            suffix-icon="el-icon-search"
            type="text"
            id="inp2"
            placeholder="请输入设备编号"
            v-model="inp2"
            autocomplete="off"
          >
          </el-input>
        </div>

        <div class="btn">
          <el-button size="mini" @click="handleReset">重置</el-button>
          <el-button size="mini" type="primary" @click="handleSearchs"
            >查询</el-button
          >
        </div>
      </div>

      <!-- 表格部分 -->
      <!-- 内容区域 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="list" style="width: 100%">
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 + (page - 1) * page_size }}
            </template>
          </el-table-column>

          <el-table-column label="设备名称" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.device_name }}</template>
          </el-table-column>

          <el-table-column label="设备编号" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.device_id }}</template>
          </el-table-column>

          <el-table-column label="拍照数量" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.photo_num }}</template>
          </el-table-column>

          <el-table-column label="描述信息" width="800" align="center">
            <template slot-scope="scope">{{ scope.row.msg_info }}</template>
          </el-table-column>

          <el-table-column label="封禁时间" width="200" align="center">
            <template slot-scope="scope">{{ scope.row.create_time }}</template>
          </el-table-column>

          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                :disabled="isDisabled"
                @click="handleBan(scope.$index, scope.row)"
                >解封</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="page_size"
          :current-page="page"
          layout="prev, pager, next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>


      
    <el-card class="data" v-for="(item, index) in phoneList" :key="index">
      
      <div class="container">
        <span id="name">{{ item.device_id }}</span>
        <el-button
          size="small"
          class="button"
          icon="el-icon-circle-check"
          @click="clickcard(item)"
          >解封</el-button
        >

        <div class="bottom clearfix">
          <div class="msg-info">{{ item.msg_info.split(":")[1] }}</div>
          <div class="time-div">
            <span id="runState-text"
              >设备名称:<span id="runState">{{ item.device_name }}</span></span
            >
            <span id="time">{{ item.create_time }}</span>
          </div>
        </div>
      </div>
      
    </el-card>

    <el-card style="width:93%;margin:10px auto;" v-if="phoneList.length === 0 ? true : false">暂无数据</el-card>


    <div class="load-bottom">
      <div id="loadMore" @click="loadMore" v-show="isShow">加载更多...</div>
      <div id="loadMore" @click="put" v-show="isPut">收起</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BanManage",
  data() {
    return {
      isDisabled: false,
      i: 1, //点击加载更多的i
      obj: {}, //存放更多操作的数据
      isShow: true, //加载更多是否显示
      isPut: false, //收起是否显示
      inp1: "",
      inp2: "",
      phoneList: [], //手机样式表格的数据源
      list: [], // 表格的数据源
      page: 1, // 当前是第几页
      page_size: 10, // 每页显示多少条数据
      total: null, // 数据总条数,
      device_name: "", // 设备名称
      device_id: "", // 设备id
      photo_num: "", // 拍照数量
      msg_info: "", // 描述信息
      create_time: "", // 封禁时间
    };
  },
  created() {},
  mounted() {
    this.getList();
    this.timer();
    this.getPhoneList();
  },
  methods: {
    // 加载更多
    async loadMore() {
      this.i++;
      this.isPut = true;
      // console.log(this.i);
      // 请求下所有数据，获取总数据量来判断是否显示记载更多
      
      

      if(this.inp2!='') {
        const res = await this.$axios(`/api/photo/?device_id=${this.inp2}`,"GET");
        let total = res.result.paging.total;
        const response = await this.$axios(`/api/photo/?device_id=${this.inp2}&page=${this.i}&size=10`,"GET");
        // console.log(response);
        this.phoneList = this.phoneList.concat(response.result.data)
        if (this.i > total / 10) {
          this.isShow = false;
        }


      }else {
        const res = await this.$axios(`/api/photo/`, "GET");
        // console.log(res);
        // console.log(res.result.paging.total);
        let total = res.result.paging.total;

        const response = await this.$axios(`/api/photo/?page=${this.i}&size=10`,"GET");
        // console.log(response.result.data);
        this.phoneList = this.phoneList.concat(response.result.data);
        // console.log(this.phoneList);
        // console.log("---------------");
        if (this.i > total / 10) {
          this.isShow = false;
        }
      }
    },
    // 收起
    async put() {
      const response = await this.$axios(`/api/photo/?page=1&size=10`, "GET");
      this.phoneList = [];
      this.phoneList = this.phoneList.concat(response.result.data);
      this.isPut = false;
      this.isShow = true;
      this.i = 1;
      this.inp2 = ''
    },
    clickcard(item) {
      // console.log(item)
      this.obj = item;
      // console.log(this.obj);

      let  confirmText = ['确定解封'+this.obj.device_id+'吗?5秒后自动解封!请稍等!','注意:解封按钮3秒内只能点击一次!'] 
        const newDatas = []
        const h = this.$createElement
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]))
        }

      this.$confirm(
        // `确定解封${this.obj.device_id}吗?5秒后自动解封!请稍等!
        // 注意:解封按钮3秒内只能点击一次!`,
        "提示",
        {
          title:'提示',
          message:h('div',null,newDatas),
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center:true
        }
      )
        .then(() => {
          // 点击确定的操作(调用接口)
          this.$axios("/api/photo/", "POST", {
            device_id: this.obj.device_id,
          }).then((data) => {
            // console.log(data);
            this.$message({
              type: "success",
              message: "已解封",
            });
            // 解封之后在刷新页面

            this.getList();
          });
          // console.log(111);
          this.getList();

          // console.log('isClick');
          this.isDisabled = true;
          setTimeout(() => {
            this.isDisabled = false;
          }, 3000);
        })
        .catch(() => {
          // 点取消的提示
          this.$message({
            type: "success",
            message: "已取消解封",
          });
        });
    },

    timer() {
      // setInterval(() => {
      //   // console.log(11);s
      //   this.getList();
      // }, 5000);
    },
    // pc端获取表格数据
    async getList() {
      const response = await this.$axios(
        `/api/photo/?page=${this.page}&size=10`,
        "GET"
      );
      // console.log(response);
      if (response.code === 0) {
        this.page_size = 10;
        this.list = response.result.data;
        this.total = response.result.paging.total;
      }
    },
    // 手机端获取数据
    async getPhoneList() {
      const response = await this.$axios(`/api/photo/?page=${this.page}&size=10`,"GET");
      // console.log(response);
      if (response.code === 0) {
        this.page_size = 10;
        this.phoneList = response.result.data;
        this.total = response.result.paging.total;
        let total = response.result.paging.total
        // console.log(total);
        if(total > 10) {
          this.isShow = true
        }else{
          this.isShow = false
        }
       
        
      }

    },

    // 解封操作
    handleBan(index, row) {
      this.$confirm(
        `确定解封${row.device_id}吗?5秒后自动解封!请稍等
        注意:解封按钮3秒内只能点击一次!`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
        }
      )
        .then(() => {
          // 点击确定的操作(调用接口)
          this.$axios("/api/photo/", "POST", {
            device_id: row.device_id,
          }).then((data) => {
            // console.log(data);
            this.$message({
              type: "success",
              message: "已解封",
            });
            // 解封之后在刷新页面

            this.getList();
          });
          // console.log(111);
          this.getList();

          // console.log('isClick');
          this.isDisabled = true;
          setTimeout(() => {
            this.isDisabled = false;
          }, 3000);
        })
        .catch(() => {
          // 点取消的提示
          this.$message({
            type: "success",
            message: "已取消解封",
          });
        });
    },
    handleSearchs() {
      this.page = 1;
      this.handleSearch();
    },
    // 查询
     async handleSearch() {
       let response = await this.$axios(`api/photo/?device_id=${this.inp2}`)
      //  console.log(response);
       
       let total = response.result.paging.total
      //  console.log(total);
       if(total <=10) {
         this.isShow = false
       }else{
         this.isShow = true
       }
      // this.page = 1
      this.$axios(`/api/photo/?device_id=${this.inp2}&page=${this.page}&size=10`,"GET").then((res) => {
          
          
          // console.log(res)
          this.list = [];
          this.phoneList = [];
          this.list = res.result.data;
          this.phoneList = res.result.data;

          this.total = res.result.paging.total;
          // console.log(this.inp2)
          this.device_id = this.inp2;
          this.inp2 = this.device_id;
          // console.log(this.device_id)
        }).catch((err) => {
          console.log(err);
        });
    },
    // 重置
    handleReset() {
      this.inp2 = "";
      this.getList();
      this.getPhoneList();
      
    },

    handleCurrentChange(val) {
      // 当前页改变的时候触发
      // console.log(this.inp2)

      this.inp2 = this.inp2.trim();
      if (this.inp2 === "") {
        this.page = val;
        // console.log('getlist')
        this.getList();
      } else {
        // console.log('search')
        // console.log(this.device_id);
        this.inp2 = this.device_id;
        this.page = val;
        this.handleSearch();
      }
    },
  },
};
</script>

<style scoped lang="less">
// pc端样式
@media screen and (min-width: 992px) {
  .data,
  .load-bottom {
    display: none;
  }
  .right-top {
    // width: 100%;
    // width: calc(100vw - 146px);
    background-color: rgb(240, 242, 245);

    min-width: 1185px;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #1a2a35;
    > img {
      margin-left: 12px;
      margin-right: 12px;
    }
    .info {
      color: #3eb984;
    }
  }

  .right-bottom-inp {
    display: flex;

    .inp:nth-child(2) {
      margin-left: 6px;
    }
    .inp {
      width: 260px;
      height: 28px;
      font-size: 13px;
      border-radius: 3px;
      font-weight: 500;
      color: #909399;
      display: flex;
      align-items: center;
      margin-left: 22px;
      label {
        display: inline-block;
        box-sizing: border-box;
        width: 88px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border: 1px solid #dcdfe6;
        border-radius: 3px 0px 0px 3px;
        border-right: none;
      }
    }
  }

  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  ::v-deep {
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: green;
      color: #fff;
    }
    .el-input__inner {
      border-radius: 0px !important;
    }
  }

  .el-card {
    // border: 1px solid red;
    // height: 800px;
    width: 93vw;
    margin: 0 auto;
  }

  .table-container {
    // border: 1px solid red;
    height: 680px;
  }

  .btn {
    // border: 1px solid red;
    margin-left: 10px;
  }
}

// 手机样式
@media screen and (min-width: 320px) and (max-width: 992px) {
  .right-top {
    // border: 1px solid blue;
      display: none;
    width: 93%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
  }
  .right-top img {
  
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-top: -3px;
  }

  .right-top span:nth-of-type(1) {
    margin-left: 5px;
  }
  .info {
    color: #3eb984;
  }

  .inp label {
    display: none;
  }

  .inp .el-input {
    // border: 1px solid red;
    width: 90%;
  }

  .right-bottom-inp {
    display: flex;
    flex-direction: row;
  }

  .table-container {
    display: none;
  }

  .pagination-container {
    display: none;
  }

  // 搜索栏卡片样式
  .search-card {
    width: 93%;
    margin: 0 auto;
    // border: 1px solid red;
  }
  .inp {
    width: 50%;
    // border: 1px solid red;
    margin-right: 10%;
  }
  .search-card .el-input {
    width: 100%;
    // border: 1px solid green;
  }

  // 展示数据卡片
  .data {
    width: 93%;
    margin: 0 auto;
    margin-top: 5px;
    position: relative;
  }

  // 解封按钮
  .button {
    position: absolute;
    top: 5%;
    right: 0;
    border: transparent;
  }

  // 设备id
  #name {
    font-weight: 600;
  }

  .msg-info {
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  // 设备名称
  #runState-text {
    color: #999;
  }
  #runState {
    color: #666;
  }

  .load-bottom {
    display: flex;
    flex-direction: row;
  }
  #loadMore {
    width: 30%;
    // border: 1px solid red;
    padding: 10px 0;
    margin-top: 10px;
    margin-left: 50px;
    color: gray;
    text-align: center;
  }

  .time-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  #time {
    color: #999;
  }

  ::v-deep {
    .search-card .el-card__body {
      padding: 10px;
    }
  }
}
</style>