TP_Web/src/components/Home.vue

<template>

  <div class="hello">
    <Nav></Nav>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="日期：">
        <el-input v-model="formInline.date" placeholder="日期"></el-input>
      </el-form-item>

      <el-form-item label="警号：">
        <el-input v-model="formInline.policeId" placeholder="警号"></el-input>
      </el-form-item>
      <el-form-item label="事件：">
        <el-input v-model="formInline.event" placeholder="事件"></el-input>

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

    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="record_time"
          label="记录仪日期时间">
      </el-table-column>
      <el-table-column
          prop="police_id"
          label="警号">
      </el-table-column>
      <el-table-column
          prop="event_type"
          label="事件">
        <template v-slot="scope">
          <span>
            {{ scope.row.event_type || '未定义事件' }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          prop="is_violation"
          label="是否违规">
        <template v-slot="scope">
          <span v-if="scope.row.is_violation">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>


      <el-table-column
          prop="small_image"
          label="缩率图">

        <template v-slot="scope">
          <el-image :preview-src-list="[scope.row.small_image]"
                    style="width: 80px; height: 80px"
                    :src="scope.row.small_image"
          ></el-image>

        </template>

      </el-table-column>

      <el-table-column
          prop="car_number"
          label="车牌号">
      </el-table-column>

      <el-table-column show-overflow-tooltip label="视频">

        <template v-slot="scope">

          <el-button type="primary" @click="goto_video(scope.row)" icon="el-icon-video-play"
                     :disabled="scope.row.video_dir === '' || scope.row.video_dir === null"
          >

            <span v-if="scope.row.video_dir">播放视频</span>
            <span v-else>暂无视频</span>
          </el-button>
        </template>

      </el-table-column>


    </el-table>
    <el-pagination
        class="tablePage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalNumber">
    </el-pagination>

  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";

export default {
  name: 'HelloWorld',
  components: {
    Nav
  },
  props: {
    msg: String
  },

  data() {
    return {
      currentPage: 1,
      totalNumber: 0,
      pageSize: 10,
      isDisplay: true,

      formInline: {
        date: '',
        policeId: '',
        event: ''
      },

      eventMap: {
        1: "抽烟",
        2: "汽车追尾",
        3: "打架",
        4: "闯红绿灯",
      },

      tableData: [
        {
          record_time: '2016-05-02 20:20:20',
          police_id: '王小虎',
          event_type: '上海市普陀区金沙江路 1518 弄',
          is_violation: true,
          small_image: "",
          video_dir: "http://static.smartisanos.cn/common/video/t1-ui.mp4",
          car_number: "",
          is_display: true,
          relative_time: 0
        }
      ]
    }
  },

  methods: {
    goto_video(rowData) {
      let highlights = [  // 进度条时间点高亮
        {
          text: rowData.event_type,
          time: rowData.relative_time,
        }
      ];

      this.$router.push({
        name: 'play_video',
        params: {video_url: rowData.video_dir, highlights: highlights}
      });
    },

    onSearch() {
      this.$axios({
        url: window.serverConfig.VUE_APP_HOST_URL,
        method: 'get',
        params: {
          datetime: this.formInline.date || undefined,
          police_id: this.formInline.policeId || undefined,
          event_type: this.formInline.event || undefined,
          page: this.currentPage || undefined,
          page_size: this.pageSize || undefined
        }
      }).then(response => {
        // console.log('请求成功');
        // console.log(response.data);
        this.totalNumber = response.data.count;
        if (!this.isDisplay) {
          this.tableData = response.data.results.filter((data) => {
            return data.is_display === true;
          });
        } else {
          this.tableData = response.data.results
        }


      }).catch(error => {
        // console.log('请求失败');
        console.log(error);
      })
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.onSearch();
    }
  },
  mounted() {
    this.onSearch();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
}

a {
  color: #42b983;
}

.hello {
  margin: 10px auto;
  text-align: right;
  overflow: hidden;
}

.demo-form-inline {
  display: flex;
  justify-content: flex-end;
  margin: 10px 10px;
}

.tablePage {
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
}
</style>