video_ca/src/views/VideoList.vue

<script>
import axios from "axios";
import { inject } from "vue";
import { getVideoListService } from "@/api/video.js";
import router from "@/router/index.js";

export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  // setup: function() {
  //   const globalData = inject("globalData");
  //   const token = globalData.token;
  //   return { token };
  // },
  data() {
    return {
      tableData: [],
      tokenData: {
        token: localStorage.getItem("token"),
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("username"),
        hour: 0,
        entrydate: [],
      },
      searchForm: {
        hour: 0,
        entrydate: [],
      },
    };
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    async getVideoList() {
      console.log(this.tokenData.token);
      let result = {};
      try {
        result = await getVideoListService(this.tokenData);
      } catch (e) {
        console.log(e);
      }
      this.tableData = JSON.parse(result.data);
      console.log(this.tableData[0]);
    },
    onSubmit() {
      getVideoList({ token: token });
    },
    handleSizeChange() {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange() {
      alert("页码发生变化" + val);
    },
    playVideo(index) {
      var id = this.tableData[index].id;
      var name = this.tableData[index].video_name;
      localStorage.setItem("video_id", id);
      localStorage.setItem("video_name", name);
      //alert("id=" + id + " name=" + name);
      router.push("/video");
    },
    // 修改条纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.human === 1) {
        return {
          background: "#488aff",
        };
      } else {
        return "";
      }
    },
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    if (localStorage.getItem("token") === null) {
      router.push("/login");
    }
    console.log("mounted");
    this.getVideoList();
  },
};
</script>

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >监控视频列表</el-header
      >
      <el-container>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
            <el-form-item label="视频日期">
              <el-date-picker
                v-model="tokenData.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <!-- <el-select v-model="tokenData.hour">
              <el-option label="0点" value="24"></el-option>
              <el-option label="1点" value="1"></el-option>
              <el-option label="2点" value="2"></el-option>
              <el-option label="3点" value="3"></el-option>
              <el-option label="4点" value="4"></el-option>
              <el-option label="5点" value="5"></el-option>
              <el-option label="6点" value="6"></el-option>
              <el-option label="7点" value="7"></el-option>
              <el-option label="8点" value="8"></el-option>
              <el-option label="9点" value="9"></el-option>
              <el-option label="10点" value="10"></el-option>
              <el-option label="11点" value="11"></el-option>
              <el-option label="12点" value="12"></el-option>
              <el-option label="13点" value="13"></el-option>
              <el-option label="14点" value="14"></el-option>
              <el-option label="15点" value="15"></el-option>
              <el-option label="16点" value="16"></el-option>
              <el-option label="17点" value="17"></el-option>
              <el-option label="18点" value="18"></el-option>
              <el-option label="19点" value="19"></el-option>
              <el-option label="20点" value="20"></el-option>
              <el-option label="21点" value="21"></el-option>
              <el-option label="22点" value="22"></el-option>
              <el-option label="23点" value="23"></el-option>
            </el-select> -->

            <el-form-item>
              <el-button type="primary" @click="getVideoList()">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table
            :data="tableData"
            :row-style="this.tableRowClassName"
            border
          >
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column
              prop="video_name"
              label="视频名称"
              width="250"
            ></el-table-column>
            <el-table-column label="是否有人" width="50" prop="human">
              <template #default="scope">
                {{ scope.row.human == 1 ? "有" : "无" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建时间"
              width="250"
            ></el-table-column>
            <el-table-column
              prop="delete_time"
              label="预期删除时间"
              width="250"
            ></el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click.prevent="playVideo(scope.$index)"
                  >播放</el-button
                >

                <!-- <el-button type="danger" size="mini">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <br />

          <!-- 分页条 -->
          <!-- Pagination 分页 -->
          <!-- <el-pagination
            background
            layout="total,sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.blueRowbg {
  background: "#488aff";
}
</style>