完成点位变更交互

zhangzengfei

2022-09-02 f997a7dc8e0f4ff2a22a39617cbea9d21d7f69c8

 src/views/invalidCamera/components/DevBox.vue

@@ -5,24 +5,27 @@
    <div class="cluster">
      <el-date-picker
        v-model="searchTime"
        @change="searchingBtn"
        type="datetimerange"
        size="small"
        @change="findCamList"
        type="daterange"
        size="mini"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="primary" size="mini" @click="findCamList">查询</el-button>
    </div>
    <div class="table-area">
      <el-table :header-cell-style="{ background: '#f0f3f5' }">
        <el-table-column label="变更时间" width="420px"></el-table-column>
        <el-table-column label="设备ID" width="440px"></el-table-column>
        <el-table-column label="设备名称" width="420"></el-table-column>
      <el-table :header-cell-style="{ background: '#f0f3f5' }" :data="dataList">
        <el-table-column label="序号" type="index" width="100"> </el-table-column>
        <el-table-column label="变更日期" prop="createTime"></el-table-column>
        <el-table-column label="设备名称" prop="cameraName"></el-table-column>
        <el-table-column label="设备通道号" prop="indexCode"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="refrash"
        @size-change="handleSizeChange"
        :current-page="page"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
@@ -34,14 +37,65 @@
  </div>
</template>
<script>
export default {}
import { getInvalidCamList } from "@/api/hik"
export default {
  name: "invalidCameraList",
  data() {
    return {
      page: 1,
      size: 10, //分页相关
      total: 0, //总数,
      dataList: [],
      searchTime: [
        this.$moment()
          .subtract(6, "days")
          .format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD")
      ]
    }
  },
  mounted() {
    this.findCamList()
  },
  methods: {
    findCamList() {
      getInvalidCamList({
        page: this.page,
        size: this.size,
        startTime: this.searchTime[0],
        endTime: this.searchTime[1]
      })
        .then((res) => {
          if (res.success) {
            this.dataList = res.data.list
            this.total = res.data.total
          } else {
            this.$notify.error("加载列表失败")
          }
        })
        .catch((e) => {
          this.$notify.error(e.msg)
        })
    },
    //分页功能
    handleSizeChange(size) {
      this.size = size
      this.findCamList()
    },
    //分页功能
    refrash(page) {
      this.page = page
      this.findCamList()
    }
  }
}
</script>

<style lang="scss" scoped>
.event-data {
  padding: 20px;
  width: 1280px;
  height: 1000px;
  min-height: 800px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 20px;