<style>
.googleMap {
width: 800px;
height: 350px;
margin-top: 10px;
}
</style>
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="个人排行榜" name="first">个人排行榜</el-tab-pane>
<el-tab-pane label="部门排行榜" name="second">部门排行榜</el-tab-pane>
<el-tab-pane label="公司排行榜" name="third">公司排行榜</el-tab-pane>
</el-tabs>
<v-table
is-horizontal-resize
column-width-drag
style="width:100%"
:columns="columns"
:table-data="tableData"
:filter-method="filterMethod"
:total='total'
:pageSize='pageSize'
:pageIndex='pageIndex'
:handleCurrentChange='handleCurrentChanges'
@sort-change="sortChange"
multiple-sort><!– 多个排序 –>
</v-table>
<el-button size='mini' @click="exportExcelCurrentPage">导出</el-button>
<!-- <div class="googleMap" id="MapContent">
</div>
<div>
<strong>开始: </strong>
<select id="start" @change="calcRoute()" v-model="startCity">
<option value="30.647379,104.09179900000004">东方广场</option>
<option value="30.6185055,104.0661053">成都凯宾斯基饭店</option>
<option value="30.6742031,103.99873279999997">金沙万瑞中心</option>
<option value="30.6988101,104.05426569999997">西南交大</option>
<option value="30.67416759999999,104.04721970000003">成都永陵博物馆</option>
<option value="30.6623041,104.09450620000007">四川电视塔</option>
<option value="30.6303279,104.09371220000003">望江楼</option>
<option value="30.5226477,104.05806469999993">维也纳森林公园</option>
</select>
<strong>目的地: </strong>
<select id="end" @change="calcRoute()" v-model="endCity">
<option value="30.647379,104.09179900000004">东方广场</option>
<option value="30.6185055,104.0661053">成都凯宾斯基饭店</option>
<option value="30.6742031,103.99873279999997">金沙万瑞中心</option>
<option value="30.6988101,104.05426569999997">西南交大</option>
<option value="30.67416759999999,104.04721970000003">成都永陵博物馆</option>
<option value="30.6623041,104.09450620000007">四川电视塔</option>
<option value="30.6303279,104.09371220000003">望江楼</option>
<option value="30.5226477,104.05806469999993">维也纳森林公园</option>
</select>
</div> -->
</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default{
name: 'filters',
data(){
return {
tableData: [],
columns: [
{field: 'name', title: '姓名', width: 80, titleAlign: 'left',columnAlign:'left',orderBy:'',isResize:true, //orderBy排序 asc 升序 desc降序
filterMultiple: false, // 筛选项是否多选
filters: [//筛选项 无筛选项 传[{}]
{
label: '赵伟',
value: '0',
},{
label: '李伟',
value: '1',
},{
label: '孙伟',
value: '2',
},
{
label: '周伟',
value: '3',
},
{
label: '吴伟',
value: '4',
}],
result:'', //筛选项默认值 单选传字符串'1' 多选数组 [1,2,2]
type:'select',// 筛选项方式 select 下拉 check 单选、多选 text搜索 datetime时间
isFrozen:true
},
{field: 'gender', title: '性别', width: 50, titleAlign: 'left',columnAlign:'left',orderBy:'',isResize:true,
filterMultiple: true,
result:[],
filters: [{
label: '男',
value: '男',
}, {
label: '女',
value: '女',
}],
type:'check'
},
{field: 'hobby', title: '爱好', width: 150, titleAlign: 'left',columnAlign:'left',isResize:true,result:'',filterMultiple:false,filters: [{}],type:'text'},
{field: 'dateRange', title: '日期', width: 150, titleAlign: 'left',columnAlign:'left',isResize:true,result:{},filterMultiple:false,filters: [{}],type:'datetime'},
{field: 'address', title: '地址',width: 280, titleAlign: 'left',columnAlign:'left',isResize:true}
],
pageSize:1,
pageIndex:1,
total:5,
map:{},
directionsService: new google.maps.DirectionsService(),
directionsDisplay: new google.maps.DirectionsRenderer(),
startCity:'',
endCity: ''
}
},
methods: {
exportExcelCurrentPage(){
//待实现
let xlsxName='测试下载'
let dataSource=this.getTableData()
let wscols={}
wscols=[{wpx: 40}, {wpx: 100}, {wpx: 120},{wpx: 100}, {wpx: 150},{wpx: 250}]
let data=[]
data.push(['编号','姓名','性别','爱好','日期','地址'])
dataSource.forEach(x=>{
let obj=[]
obj.push(x.id+" ")
obj.push(x.name)
obj.push(x.gender)
obj.push(x.hobby)
obj.push(x.dateRange)
obj.push(x.address)
data.push(obj)
})
const ws = XLSX.utils.aoa_to_sheet(data)
ws['!cols'] = wscols
ws['!rows'] =[{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 },{ hpx:20 }]
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
var dataInfo = wb.Sheets[wb.SheetNames[0]];
// dataInfo["A1"].v = district + '广播电视安全播出监管中心'; //设置表格标题
// dataInfo["A2"] = {v: titleName}; //设置表格标题
// dataInfo["A3"] = {v: '日期：' + time}; //设置表格日期
// dataInfo["B4"] = {v: condition}; //设置筛选条件
let colName=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
data[0].forEach((x,i)=>{
dataInfo[colName[i]+'1'].s={
font: {
name: '微软雅黑',
sz: 14,
color: "#fe0035",
bold: true,
italic: true,
underline: true
},
alignment: {
horizontal: "center",
vertical: "center"
}
}
})
XLSX.writeFile(wb, xlsxName + ".xlsx")
},
sortChange(param){
//自己写实现
//{gender:"",name:"asc"}
},
// 数据筛选
filterMethod(filters){
let tableData = this.getTableData();
if (filters.gender && filters.gender.length>0){
tableData = tableData.filter(item => filters.gender.indexOf(item.gender)!=-1)
}
if (filters.name!='' && filters.name!='-1'){
if(!Array.isArray(filters.name))
tableData = tableData.filter(item => filters.name==item.id);
else
tableData = tableData.filter(item => filters.name==item.id);
}
if (filters.hobby!=''){
tableData = tableData.filter(item => item.hobby.indexOf(filters.hobby)!=-1);
}
if(filters.dateRange.beginDate){
tableData = tableData.filter(item => new Date(filters.dateRange.beginDate).getTime()<=new Date(item.dateRange).getTime());
}
if(filters.dateRange.endDate){
tableData = tableData.filter(item => new Date(filters.dateRange.endDate).getTime()>=new Date(item.dateRange).getTime());
}
this.pageIndex = 1
this.total=tableData.length
this.tableData = tableData.filter((item,index)=>index==0);
},
handleCurrentChanges(val){
this.pageIndex=val
this.tableData = this.getTableData().filter((item,index)=>index==val-1);
},
getTableData(){
return [
{"id":0,"name":"赵伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-22","address":"上海市黄浦区金陵东路569号17楼"},
{"id":1,"name":"李伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-23","address":"上海市奉贤区南桥镇立新路12号2楼"},
{"id":2,"name":"孙伟","gender":"男","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-24","address":"上海市崇明县城桥镇八一路739号"},
{"id":3,"name":"周伟","gender":"女","hobby":"钢琴、书法、唱歌","dateRange":"2018-11-25","address":"上海市青浦区青浦镇章浜路24号"},
{"id":4,"name":"吴伟","gender":"男","hobby":"钢琴、书法、唱歌、造作","dateRange":"2018-11-26","address":"上海市松江区乐都西路867-871号"}
]
},
calcRoute: function() {
let _this = this;
var start = _this.startCity;
var end = _this.endCity;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING,
waypoints: [{location:"30.5226477,104.05806469999993"},{location:"30.67416759999999,104.04721970000003"}]
};
_this.directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
_this.directionsDisplay.setDirections(result);
}
});
},
initialize: function() {
let _this = this;
let directionsDisplay;
let map;
_this.directionsDisplay = new google.maps.DirectionsRenderer();
let chengdu = new google.maps.LatLng(30.6574389,104.06592380000006);
let geocoder = new google.maps.Geocoder();
let mapOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chengdu
};
_this.map = new google.maps.Map(document.getElementById("MapContent"), mapOptions);
_this.directionsDisplay.setMap(_this.map);
google.maps.event.addListener(_this.map, 'click', function (event) { // 地图点击事件 获取经纬度
geocoder.geocode({ 'location': event.latLng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
} else {
}
});
});
}
},
created(){
this.tableData = this.getTableData().filter((item,index)=>index==0);
let jsArray = document.getElementsByTagName("script");
let flag = false;
let jsUrl = this.domainManager().GoogleMapUrl;
for (let i = 0; i < jsArray.length; i++) {
if (jsArray[i].src == jsUrl) {
flag = true;
}
}
if (!flag) {
const s = document.createElement("script");
s.type = "text/javascript";
s.src = jsUrl;
document.body.appendChild(s);
}
},
mounted () {
let items = [];
let item = {};
item['lat'] = parseFloat("30.6574389");
item['lng'] = parseFloat("104.06592380000006");
items[0] = item;
let listData = items;
let LatLng = new google.maps.LatLng(listData[0].lat, listData[0].lng);
let map_id = document.getElementById("MapContent");
this.initialize()
}
}
</script>