<template>
|
<div class="content page-branch">
|
<div class="filter-section">
|
<!-- 查询条件 -->
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="filterForm"
|
ref="filterForm"
|
class="g-table-filter"
|
>
|
<el-form-item label="场站名称">
|
<el-input
|
style="width: 154px"
|
v-model="filterForm.stationName"
|
placeholder="请输入关键字并回车"
|
@keypress.enter.native="handleChange"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="场站类别">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.stationType"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in typeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option
|
></el-select>
|
</el-form-item>
|
</el-form>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="exportData">
|
数据导出
|
</div>
|
<div class="action-item blue pointer" @click="addSt" v-if="getAuthBtn('assistant:changzhan:add')">
|
新增场站
|
</div>
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="g-table">
|
<el-table
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:height="'calc(100vh - 400px)'"
|
:data="dataList"
|
highlight-current-row
|
class="bs"
|
@sort-change="handleSortChange"
|
ref="stationTable"
|
:default-sort="{prop: 'stationName', order: 'descending'}"
|
>
|
<el-table-column
|
align="center"
|
prop="stationName"
|
label="场站名称"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="stationType"
|
label="场站类型"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="companyName"
|
label="所属公司"
|
sortable="custom"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="stationFunction"
|
label="场站功能"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.stationFunction)}}</template>
|
</el-table-column>
|
<!-- <el-table-column
|
align="center"
|
prop="floorArea"
|
label="场站面积㎡"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.floorArea)}}</template>
|
</el-table-column> -->
|
<el-table-column
|
align="center"
|
prop="stationChara"
|
label="土地性质"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.stationChara)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="ownership"
|
label="权属"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{getDefault(scope.row.ownership)}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="location"
|
label="地点"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.location ? scope.row.location : '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="longitudeAndLatitude"
|
label="位置"
|
width="100"
|
sortable="custom"
|
/>
|
<el-table-column
|
align="center"
|
prop="leaveOnTimeRate"
|
label="发车准点率"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.leaveOnTimeRate ? `${scope.row.leaveOnTimeRate}%` : '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="passengerFlow"
|
label="场站客流"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.passengerFlow ? scope.row.passengerFlow : '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="provideService"
|
label="可提供服务"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.provideService ? scope.row.provideService : '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="headEndLine"
|
label="首末站线路"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.headEndLine ? scope.row.headEndLine : '-'}}</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="tripPassLine"
|
label="途径站线路"
|
width="120"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.tripPassLine ? scope.row.tripPassLine : '-'}}</template>
|
</el-table-column>
|
<!-- <el-table-column
|
align="center"
|
prop="longitudeAndLatitude"
|
label="经纬度"
|
sortable="custom"
|
>
|
<template slot-scope="scope">{{scope.row.longitudeAndLatitude ? scope.row.longitudeAndLatitude : '-'}}</template>
|
</el-table-column> -->
|
|
<el-table-column align="center" prop="location" label="操作" width="150">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="showChange(scope.row)" v-if="getAuthBtn('assistant:changzhan:edit')">编辑</el-button>
|
<el-button type="text" size="small" @click="delStation(scope.row.stationId)" v-if="getAuthBtn('assistant:changzhan:del')">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="g-pagination">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:total="total"
|
:current-page="filterForm.pageNum"
|
:page-size="filterForm.pageSize"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="pageChange"
|
></el-pagination>
|
</div>
|
</div>
|
|
<el-dialog class="dilog-bos" :title="typeStation==='add'?'新增场站':'修改场站'" :visible.sync="centerDialogVisible" width="50%" center >
|
<el-form label-width="100px" :model="filterForm" ref="filterForm">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="场站名称"><el-input v-model="addStation.stationName"></el-input></el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="场站类型">
|
<el-select v-model="addStation.stationType" placeholder="请选择场站功能">
|
<el-option label="枢纽站" value="枢纽站"></el-option>
|
<el-option label="综合车场" value="综合车场"></el-option>
|
<el-option label="汽车" value="汽车"></el-option>
|
<el-option label="修配厂" value="修配厂"></el-option>
|
<el-option label="首末站" value="首末站"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="场站面积㎡"><el-input v-model="addStation.floorArea"></el-input></el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所属公司">
|
<el-select v-model="addStation.companyId" placeholder="请选择场站功能" >
|
<el-option :label="item.companyName" :value="item.companyId" v-for="(item,index) in companyList" :key="index"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-form-item label="经度"><el-input v-model="addStation.longitude"></el-input></el-form-item>
|
</el-col>
|
<el-col :span="10">
|
|
<el-form-item label="纬度"><el-input v-model="addStation.latitude"></el-input></el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-button type="primary" class="ml30" @click="setLocation">地图选点</el-button>
|
</el-col>
|
</el-row>
|
<el-form-item label="地点"><el-input v-model="addStation.location"></el-input></el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="权属"><el-input v-model="addStation.ownership"></el-input></el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="土地性质"><el-input v-model="addStation.stationChara"></el-input></el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="场站功能">
|
<el-checkbox-group v-model="arrStation" @change="handleCheckedCitiesChange">
|
<el-checkbox label="起始" value="起始"></el-checkbox>
|
<el-checkbox label="停场" value="停场"></el-checkbox>
|
<el-checkbox label="充电" value="充电"></el-checkbox>
|
<el-checkbox label="维保" value="维保"></el-checkbox>
|
<el-checkbox label="食堂" value="食堂"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-form>
|
<div class="flex ju-se smbox">
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitAdd">确 定</el-button>
|
</div>
|
|
</el-dialog>
|
|
<amap v-if="amapFlag" ref="mapvue" :stId="stId" @refreshDataList="getList"></amap>
|
|
</div>
|
</template>
|
|
<script>
|
import qs from 'qs'
|
import amap from '../../components/amap'
|
import companyJson from '../../assets/json/fgsmarkers'
|
export default {
|
name: "station",
|
data() {
|
return {
|
filterForm: {
|
stationType: "",
|
stationName: "",
|
pageSize: 20,
|
pageNum: 1,
|
},
|
reRender: true, // 页面是否重新渲染
|
addStation:{
|
companyId: "",
|
companyName: "",
|
condition: "",
|
floorArea: 0,
|
latitude: "",
|
location: "",
|
longitude: "",
|
ownership: "",
|
stationChara: "",
|
stationFunction: '',
|
stationId: "",
|
stationName: "",
|
stationType: ""
|
},
|
typeOptions: [
|
{ label: "全部", value: "" },
|
{ label: "枢纽站", value: "枢纽站" },
|
{ label: "综合车场", value: "综合车场" },
|
{ label: "汽车修配厂", value: "汽车修配厂" },
|
{ label: "首末站", value: "首末站" },
|
],
|
dataList: [],
|
arrStation: [],
|
authButton: [],
|
companyList:companyJson.datas,
|
total: 0,
|
amapFlag: false,
|
typeStation:'',
|
centerDialogVisible: false,
|
stId: '',
|
};
|
},
|
components:{amap},
|
mounted() {
|
if (this.$route.query.stationName){
|
this.filterForm.stationName = this.$route.query.stationName;
|
}else {
|
this.filterForm.stationName = '';
|
}
|
if(this.reRender) {
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
this.$refs.stationTable.sort(prop, order);
|
}else {
|
this.$refs.stationTable.sort('stationName', 'descending')
|
}
|
this.getAuth();
|
}
|
|
},
|
activated() {
|
if (this.$route.query.stationName){
|
this.filterForm.stationName = this.$route.query.stationName;
|
}else {
|
this.filterForm.stationName = '';
|
}
|
if(!this.reRender) {
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
this.$refs.stationTable.sort(prop, order);
|
}else {
|
this.$refs.stationTable.sort('stationName', 'descending')
|
}
|
this.getAuth();
|
}
|
},
|
methods: {
|
handleSortChange(opt){
|
let {prop, order} = opt;
|
this.filterForm.sortWord = prop;
|
switch (order){
|
case 'ascending':
|
this.filterForm.sortFx = 'ASC';
|
break;
|
case 'descending':
|
this.filterForm.sortFx = 'DESC';
|
break;
|
default:
|
this.filterForm.sortFx = '';
|
}
|
this.getList();
|
},
|
setLocation(){
|
this.amapFlag=false;
|
this.$nextTick(() => {
|
this.amapFlag=true;
|
setTimeout(()=>{
|
this.$refs.mapvue.popCenters(this.addStation.longitude,this.addStation.latitude)
|
},100)
|
})
|
},
|
|
addSt(){
|
this.typeStation='add';
|
this.centerDialogVisible=true;
|
this.arrStation=[];
|
this.addStation={
|
companyId: "",
|
companyName: "",
|
condition: "",
|
floorArea: 0,
|
latitude: "",
|
location: "",
|
longitude: "",
|
ownership: "",
|
stationChara: "",
|
stationFunction: '',
|
stationId: "",
|
stationName: "",
|
stationType: ""
|
};
|
},
|
showChange(item){
|
this.typeStation='edit';
|
this.centerDialogVisible=true;
|
this.arrStation=item.stationFunction?item.stationFunction.split(","):[];
|
console.log(item)
|
let arr=[];
|
if(item.longitudeAndLatitude){
|
arr=item.longitudeAndLatitude.split(",");
|
}
|
this.addStation={
|
companyId: item.companyId,
|
companyName: item.companyName,
|
condition: item.condition,
|
floorArea: item.floorArea,
|
latitude: arr.length?arr[1]:'',
|
location: item.location,
|
longitude: arr.length?arr[0]:'',
|
ownership: item.ownership,
|
stationChara: item.stationChara,
|
stationFunction: '',
|
stationId: item.stationId,
|
stationName: item.stationName,
|
stationType: item.stationType
|
};
|
},
|
getAuth() {
|
this.$axios.get(this.$Interface.auth).then(res=>{
|
if(res.data && res.data.length>0){
|
this.authButton= res.data.map(item=>item.permissions);
|
}else{
|
this.authButton=[]
|
}
|
})
|
},
|
getAuthBtn(type){
|
return this.authButton.includes(type);
|
},
|
handleCheckedCitiesChange(){
|
|
},
|
submitAdd(){
|
this.addStation.stationFunction=this.arrStation.toString()
|
let params=this.addStation;
|
let url='';
|
if(this.typeStation==='add'){
|
url=this.$Interface.basicResource.insertTnBusMaintainStation
|
}else{
|
url=this.$Interface.basicResource.updateTnBusMaintainStation
|
}
|
this.$axios.post(url,params).then(res=>{
|
console.log(res);
|
if(res.code==0){
|
this.$message({
|
type: 'success',
|
message: '操作成功!'
|
});
|
this.centerDialogVisible=false;
|
this.getList();
|
}else{
|
this.$message({
|
type: 'success',
|
message: '操作失败!'
|
});
|
}
|
|
})
|
},
|
// showAmap(id){
|
// this.typeStation='add';
|
// this.amapFlag=false;
|
// this.stId=id;
|
// this.$nextTick(() => {
|
// this.amapFlag=true;
|
// })
|
// },
|
changeLocation(la,ln){
|
this.addStation.latitude=la;
|
this.addStation.longitude=ln;
|
},
|
delStation(id){
|
let params={id:id};
|
this.$confirm('此操作将永久删除该场站, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$axios.post(`${this.$Interface.basicResource.deleteTnBusMaintainStation}`,params).then(res=>{
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.getList();
|
})
|
|
})
|
|
},
|
handleChange() {
|
this.filterForm.pageNum = 1;
|
this.dataList = [];
|
this.getList();
|
},
|
getList() {
|
const params = {};
|
if (this.filterForm.stationType) {
|
params.stationType = this.filterForm.stationType;
|
}
|
if (this.filterForm.stationName) {
|
params.stationName = this.filterForm.stationName;
|
}
|
if(this.filterForm.sortFx) {
|
params.sortFx = this.filterForm.sortFx;
|
params.sortWord = this.filterForm.sortWord;
|
}
|
this.$axios
|
.get(this.$Interface.basicResource.station, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
...params,
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.total = Number(res.data.total);
|
});
|
},
|
exportData() {
|
const params = {};
|
if (this.filterForm.stationType) {
|
params.stationType = this.filterForm.stationType;
|
}
|
if (this.filterForm.stationName) {
|
params.stationName = this.filterForm.stationName;
|
}
|
let token = localStorage.getItem("mtoken");
|
let _params = qs.stringify({
|
token,
|
...params,
|
});
|
let a = document.createElement("a");
|
a.href = `${
|
this.$exportBase + this.$Interface.basicResource.export.station
|
}?${_params}`;
|
a.click();
|
a = null;
|
},
|
pageChange(page) {
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
},
|
deactivated() {
|
this.reRender = false;
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.smbox{width:50%;margin:0 auto;}
|
.dilog-bos /deep/ .el-dialog{background: linear-gradient(180deg,#06203f, #08141c) !important;}
|
.dilog-bos /deep/ .el-input__inner{background: #06203f !important;border: 1px solid rgba(17,133,226,0.40)!important;color:#fff;}
|
.dilog-bos /deep/ .el-form-item__label{color:#A3B0D1 !important;}
|
.dilog-bos /deep/ .el-dialog__title{color:#fff !important;}
|
.content {
|
margin-top: 16px;
|
.filter-section {
|
display: flex;
|
text-align: right;
|
align-items: flex-start;
|
}
|
}
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 50px;
|
padding-top: 5px;
|
.action-item:first-child {
|
margin-right: 20px;
|
}
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
</style>
|
