report.vue

<!---活动状态--->
<template>
  <div class="template-box content_div_main">
     <el-form :inline="true" class="search-form" size="small">
        <el-form-item label="抓拍地点：">
          <el-input type="text" class="bla bra br0" v-model="address" placeholder=""></el-input>
        </el-form-item>
         <el-form-item label="抓拍相机：">
          <el-input type="text" class="bla bra br0" v-model="camera" placeholder=""></el-input>
        </el-form-item>
         <el-form-item label="查询库：">
           <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="查询时间：">
             <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
         <el-form-item>
          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-upload">导出</el-button>
        </el-form-item>
      </el-form>
    <el-row class="table_m_type">
      <el-table :data="tableData" style="width: 100%" height="680" >
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
        <el-table-column prop="carid" label="身份证号"></el-table-column>
        <el-table-column prop="address" label="地点"></el-table-column>
        <el-table-column prop="appearnum" label="出现次数" align="center"></el-table-column>
        <el-table-column prop="lastappear" label="最后出现时间" ></el-table-column>
        <el-table-column prop="signin" label="注册时间" ></el-table-column>
        <el-table-column prop="pic" label="人脸图片">
          <template slot-scope="scope">
            <div class="show-img-box">
              <img :src="scope.row.pic" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <div class="tab-btn-box">
              <span @click="showImg(scope.row)" class="table-btn">所有抓图片</span>
              <span @click="activityStatus(scope.row)" class="table-btn">活动状态</span>
           </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="block">
      <el-pagination
        class="mt10"
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </el-row>
    <el-row>
      <statusdetails ref="detail"></statusdetails>
    </el-row>
  </div>
</template>

<script>
import statusdetails from './detail'
export default {
  components:{
    statusdetails
  },
  data() {
    return {
      address: "",
      camera: "",
      options: [
        {
          value: "选项1",
          label: "社保库1"
        },
        {
          value: "选项2",
          label: "社保库2"
        },
        {
          value: "选项3",
          label: "社保库3"
        },
        {
          value: "选项4",
          label: "社保库4"
        },
        {
          value: "选项5",
          label: "社保库5"
        }
      ],
      tableData: [
        {
          name: "王小虎",
          age:'23',
          sex:"男",
          carid:"211232211221233341",
          address: "上海市普陀区金沙江路 1518 弄",
          appearnum:4,
          lastappear:'2019-08-01 10:00:09',
          signin:'2016-08-01 10:00:09',
          pic:require('../videos/testimg/1.jpg')
        },
        {
          name: "王小虎",
          age:'23',
          sex:"男",
          carid:"211232211221233341",
          address: "上海市普陀区金沙江路 1518 弄",
          appearnum:4,
          lastappear:'2019-08-01 10:00:09',
          signin:'2016-08-01 10:00:09',
          pic:require('../videos/testimg/1.jpg')
        },
        {
          name: "王小虎",
          age:'23',
          sex:"男",
          carid:"211232211221233341",
          address: "上海市普陀区金沙江路 1518 弄",
          appearnum:4,
          lastappear:'2019-08-01 10:00:09',
          signin:'2016-08-01 10:00:09',
          pic:require('../videos/testimg/1.jpg')
        },
        {
          name: "王小虎",
          age:'23',
          sex:"男",
          carid:"211232211221233341",
          address: "上海市普陀区金沙江路 1518 弄",
          appearnum:4,
          lastappear:'2019-08-01 10:00:09',
          signin:'2016-08-01 10:00:09',
          pic:require('../videos/testimg/1.jpg')
        }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    showImg(data){
      this.$refs.detail.initImg(data)
    },
    activityStatus(data){
      this.$refs.detail.initchart(data)
    }
  },
  created() {}
};
</script>
<style lang="stylus" scoped>
.search-box {
  color: #333;
  background: #fff;
}
.show-img-box{
  height 60px
  width 60px
  img{
    height 100%
    width 100%
  }
}
</style>