fj-dc-ui/.svn/pristine/7d/7d9fdf26d2230a036122b65a36a58837b3bb48cc.svn-base

<template>
    <div id="trackTableContainer" class="trackTableClass">
        <draagable :title="draagableTitle" @closeDraggable="closeDraggable" initTop=-15
            initLeft=45 initWidth=615 initHeight=450 style="z-index: 999">
            <div style="padding:10px;">
                <!-- <div> -->
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd HH-mm-ss" type="datetime" placeholder="选择开始时间"></el-date-picker>
                    <el-date-picker v-model="value2" value-format="yyyy-MM-dd HH-mm-ss" type="datetime" placeholder="选择结束时间"></el-date-picker>
                    <el-button type="primary" icon="el-icon-search" @click="clickHandler">查询</el-button>
                <!-- </div> -->
                <!-- <div>
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
                </div> -->
            </div>
            <div style="height:365px;">
                <el-table :data="tableResultData" :height="360">
                    <el-table-column align="center"  prop="persName" min-width="100" label="名称"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center"  prop="mobile" min-width="100" label="手机号码"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center" prop="stDate"  min-width="160" label="开始时间"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center" prop="enDate"  min-width="160" label="结束时间"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center" label="操作" min-width="70">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="showTrackOnMap(scope.row,'track')">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </draagable>
    </div>
</template>
<script>
import request from "../../../utils/gw_ajax_request.js"
import {dateFormat} from "../../../utils/gw_date.js"
import {getPersonTrack} from '../../../api/zhxxAPI.js'
import draagable from './draggable.vue'
export default {
    components:{
        draagable,
    },
    props:['perId'],
    data(){
        return{
            loading:false,
            input5:null,
            value1:"",
            value2:"",
            draagableTitle:'历史轨迹列表',
            columObj:[],
            tableResultData:[],
            perId1:'',
        }
    },
    mounted:function(){
        this.perId1 = this.perId;
        this.value1 = dateFormat(new Date(new Date().getTime()-24*60*60*1000),'yyyy-MM-dd HH-mm-ss');
        this.value2 = dateFormat(new Date(),'yyyy-MM-dd  HH-mm-ss');
        this.getTrackList();
    },
    methods:{
        formatDate(row,column){
            if(row.stDate){
                return (dateFormat(row.stDate,'yyyy-MM-dd hh:mm:ss'));
            }
        },
        formatDate1(row,column){
            if(row.enDate){
                return (dateFormat(row.enDate,'yyyy-MM-dd hh:mm:ss'));
            }
        },
        searchButtonClick:function(){
            var _self = this;

        },
        closeDraggable:function(){
            this.$emit("closeDraggable","trackTable");
        },
        showTrackOnMap(row,type){
            this.$emit('showTrackOnMap',row,type)
        },
        clickHandler(){
            if(this.value1 == ''){
                this.$message('请选择开始时间');
                return;
            }else if(this.value2 == ''){
                this.$message('请选择结束时间');
                return;
            }
            this.getTrackList();
        },
        getTrackList:function(){
            var _self = this;
            getPersonTrack(_self.perId1,_self.value1,_self.value2).then((res)=>{
                if(res.success){
                    _self.tableResultData = res.data.itudeList;
                    _self.tableResultData.forEach((item)=>{
                        item['persName'] = res.data.persName;
                        item['mobile'] = res.data.mobile;
                    })
                }
            });
        },
    }
}
</script>
<style>
#trackTableContainer .el-table__body-wrapper{
    /* overflow: auto; */
}
.trackTableClass{
    position: fixed;
    left: 20px;
    top: 119px;
    z-index: 590;
    /* width: 390px;
    height: 490px; */
}
#draggableContainer .el-table{
    color:#928f8f;
}
#draggableContainer .el-table thead{
    color: #a29a9a;
}
#draggableContainer .el-table tr{
    background-color: #f9f9f9;
}
</style>