552 lines
15 KiB
Vue
552 lines
15 KiB
Vue
<template>
|
|
<div class="content">
|
|
<div class="search">
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle" class="row-margin">
|
|
<el-col :span="8">
|
|
<div class="lable-title">Brand:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-select
|
|
v-model="brand"
|
|
placeholder="Please choose Brand!"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in brandList"
|
|
:key="i"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle" class="row-margin">
|
|
<el-col :span="8">
|
|
<div class="lable-title">Model Code:</div>
|
|
</el-col>
|
|
<el-col :span="16" class="timers">
|
|
<el-select
|
|
v-model="modelCode"
|
|
placeholder="Please choose Model Code!"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in modelCodeList"
|
|
:key="i"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle" class="row-margin">
|
|
<el-col :span="8">
|
|
<div class="lable-title">Model Year:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-select
|
|
v-model="modelYear"
|
|
placeholder="Please choose Model Year!"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in modelYearList"
|
|
:key="i"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle" class="row-margin">
|
|
<el-col :span="8">
|
|
<div class="lable-title">ADS Version:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-select
|
|
v-model="adsVersion"
|
|
placeholder="Please choose ADS Version!"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in adsVersionList"
|
|
:key="i"
|
|
:label="item"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle">
|
|
<el-col :span="8">
|
|
<div class="lable-title">VIN:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-input
|
|
v-model="vin"
|
|
placeholder="Please input VIN!"
|
|
clearable
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle">
|
|
<el-col :span="8">
|
|
<div class="lable-title">Existing Group:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-input
|
|
v-model="existGroup"
|
|
placeholder="Please input Existing Group!"
|
|
clearable
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-row type="flex" align="middle">
|
|
<el-col :span="8">
|
|
<div class="lable-title">Online Status:</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-select
|
|
v-model="onlineStatus"
|
|
placeholder="Please choose Online Status!"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="item in onlineStatusList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6" class="btn-group">
|
|
<el-popconfirm
|
|
v-if="groupList.length > 0 || ticketList.length > 0"
|
|
confirm-button-text="confirm"
|
|
cancel-button-text="cancel"
|
|
title="There are unsaved vehicles with groups at present, do you want to confirm the operation?"
|
|
@confirm="search"
|
|
>
|
|
<el-button slot="reference" type="primary" size="small">
|
|
<div class="flex-row-center">
|
|
Search
|
|
<div
|
|
class="icon iconfont icon-sousuo"
|
|
style="margin-left:5px"
|
|
></div>
|
|
</div>
|
|
</el-button>
|
|
</el-popconfirm>
|
|
<el-button v-else type="primary" size="small" @click="search">
|
|
<div class="flex-row-center">
|
|
Search
|
|
<div
|
|
class="icon iconfont icon-sousuo"
|
|
style="margin-left:5px"
|
|
></div>
|
|
</div>
|
|
</el-button>
|
|
|
|
<el-button
|
|
style="margin-left:10px"
|
|
type="primary"
|
|
size="small"
|
|
@click="reset"
|
|
>
|
|
<div class="flex-row-center">
|
|
Reset
|
|
<div
|
|
class="icon iconfont icon-zhongzhi"
|
|
style="margin-left:5px"
|
|
></div>
|
|
</div>
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<div class="title">
|
|
<h6>Vehicle List</h6>
|
|
<div>
|
|
<el-button type="primary" size="small">Add all to ticket</el-button>
|
|
<el-button :disabled="!isaddGroup" type="primary" size="small"
|
|
>Add all to group</el-button
|
|
>
|
|
<el-button @click="showTickDialog()" type="primary" size="small"
|
|
>Generate New Ticket ({{ ticketList.length }})</el-button
|
|
>
|
|
<el-popover
|
|
placement="top"
|
|
width="400"
|
|
trigger="hover"
|
|
v-if="!isaddGroup"
|
|
>
|
|
<el-alert
|
|
:closable="false"
|
|
title="info"
|
|
type="warning"
|
|
description="You cannot create a group until the criteria filter is complete."
|
|
show-icon
|
|
>
|
|
</el-alert>
|
|
<button
|
|
slot="reference"
|
|
style="margin-left:10px"
|
|
class="el-button el-button--primary el-button--small is-disabled el-popover__reference"
|
|
>
|
|
<span> Generate New Group ({{ groupList.length }})</span>
|
|
</button>
|
|
</el-popover>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
v-else
|
|
@click="showGroupDialog()"
|
|
>Generate New Group ({{ groupList.length }})</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column prop="vin" label="VIN" width="220px"></el-table-column>
|
|
<el-table-column prop="vid" label="VID" width="120px"></el-table-column>
|
|
<el-table-column
|
|
prop="brand"
|
|
label="Brand"
|
|
width="120px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="modelCode"
|
|
label="Model Code"
|
|
width="120px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="modelYear"
|
|
label="Model Year"
|
|
width="120px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="modelFamily"
|
|
label="Model Family"
|
|
width="150px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="adsVersion"
|
|
label="ADS Version"
|
|
width="150px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="lifeCycle"
|
|
label="LifeCycle"
|
|
width="120px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="onlineStatus"
|
|
label="Online Status"
|
|
width="150px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="shadowVersion"
|
|
label="Shadow Version"
|
|
width="150px"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="existGroup"
|
|
label="Exit Groups"
|
|
width="150px"
|
|
></el-table-column>
|
|
<el-table-column prop="existIssue" label="Warning" width="120px">
|
|
<template slot-scope="scope">
|
|
<span class="red-circle">{{ scope.row.existIssue }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="action"
|
|
label="Action"
|
|
width="150px"
|
|
fixed="right"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tooltip
|
|
content="Add to issue ticket"
|
|
placement="top"
|
|
effect="light"
|
|
>
|
|
<span
|
|
:style="{ color: getIsColor(scope.row.vin, ticketList) }"
|
|
class="icon iconfont icon-xinzengruku cursor table-acion"
|
|
@click="addTicket(scope.row)"
|
|
>
|
|
</span>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="isaddGroup"
|
|
content="Add to group"
|
|
placement="top"
|
|
effect="light"
|
|
>
|
|
<span
|
|
:style="{ color: getIsColor(scope.row.vin, groupList) }"
|
|
class="icon iconfont icon-tianjiaqunzu cursor table-acion"
|
|
@click="addGroup(scope.row)"
|
|
>
|
|
</span>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<template slot="empty" v-if="tableData.length == 0">
|
|
<span>No data available</span>
|
|
</template>
|
|
</el-table>
|
|
<el-pagination
|
|
v-if="totalPage > 1"
|
|
:current-page.sync="page"
|
|
:page-size="limit"
|
|
:total="total"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
background
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="prev,sizes, pager, next"
|
|
></el-pagination>
|
|
</div>
|
|
<newGroupDialog
|
|
ref="newGroupDialog"
|
|
@addSuccess="groupList = []"
|
|
></newGroupDialog>
|
|
<newTicketDialog
|
|
ref="newTicketDialog"
|
|
@addSuccess="ticketList = []"
|
|
></newTicketDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { GetModel, GetVehicleList } from "@/api/vehicle";
|
|
import { removeNull } from "@/utils/utils";
|
|
import newGroupDialog from "./newGroupDialog.vue";
|
|
import newTicketDialog from "./newTicketDialog.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
brandList: [],
|
|
modelCodeList: [],
|
|
modelYearList: [],
|
|
adsVersionList: [],
|
|
onlineStatusList: [
|
|
{ code: "1", name: "Off" },
|
|
{ code: "0", name: "On" },
|
|
],
|
|
brand: "",
|
|
modelCode: "",
|
|
modelYear: "",
|
|
adsVersion: "",
|
|
vin: "",
|
|
existGroup: "",
|
|
onlineStatus: "",
|
|
tableData: [],
|
|
maxHeight: 0,
|
|
page: 1,
|
|
limit: 10,
|
|
total: 0,
|
|
totalPage: 10,
|
|
isaddGroup: false,
|
|
groupList: [],
|
|
ticketList: [],
|
|
};
|
|
},
|
|
components: { newGroupDialog, newTicketDialog },
|
|
created() {
|
|
this.getModel();
|
|
this.getTableData();
|
|
// this.getMaxHeight();
|
|
// window.addEventListener('resize', () => {
|
|
// this.getMaxHeight();
|
|
// })
|
|
},
|
|
methods: {
|
|
getModel() {
|
|
GetModel().then((res) => {
|
|
this.modelCodeList = removeNull(res.data.modelCode);
|
|
this.modelYearList = removeNull(res.data.modelYear);
|
|
this.adsVersionList = removeNull(res.data.adsVersion);
|
|
this.brandList = removeNull(res.data.brand);
|
|
});
|
|
},
|
|
getTableData() {
|
|
let {
|
|
brand,
|
|
modelCode,
|
|
modelYear,
|
|
adsVersion,
|
|
vin,
|
|
existGroup,
|
|
onlineStatus,
|
|
page,
|
|
limit,
|
|
} = this;
|
|
GetVehicleList({
|
|
brand,
|
|
modelCode,
|
|
modelYear,
|
|
adsVersion,
|
|
vin,
|
|
existGroup,
|
|
onlineStatus,
|
|
currentPage: page,
|
|
pageSize: limit,
|
|
}).then((res) => {
|
|
this.tableData = res.data.records;
|
|
this.total = res.data.total;
|
|
this.totalPage = res.data.pages;
|
|
});
|
|
},
|
|
addTicket(additem) {
|
|
let isadd = true;
|
|
this.ticketList.map((item, index) => {
|
|
if (item.vin == additem.vin) {
|
|
isadd = false;
|
|
console.log("index", index);
|
|
this.ticketList.splice(index, 1);
|
|
// this.removeItem()
|
|
}
|
|
});
|
|
if (isadd) {
|
|
this.ticketList.push(additem);
|
|
}
|
|
},
|
|
addGroup(additem) {
|
|
let isadd = true;
|
|
this.groupList.map((item, index) => {
|
|
if (item.vin == additem.vin) {
|
|
isadd = false;
|
|
this.groupList.splice(index, 1);
|
|
}
|
|
});
|
|
if (isadd) {
|
|
this.groupList.push(additem);
|
|
}
|
|
},
|
|
showGroupDialog() {
|
|
let {
|
|
brand,
|
|
modelCode,
|
|
modelYear,
|
|
adsVersion,
|
|
vin,
|
|
existGroup,
|
|
onlineStatus,
|
|
groupList,
|
|
} = this;
|
|
let data = {
|
|
brand,
|
|
modelCode,
|
|
modelYear,
|
|
adsVersion,
|
|
vin,
|
|
existGroup,
|
|
onlineStatus,
|
|
groupList,
|
|
};
|
|
this.$refs.newGroupDialog.show(data);
|
|
},
|
|
showTickDialog() {
|
|
if (this.ticketList.length == 0) {
|
|
this.$message.info("please add frist Vehile");
|
|
return;
|
|
}
|
|
let data = { ticketList: this.ticketList };
|
|
this.$refs.newTicketDialog.show(data);
|
|
},
|
|
search() {
|
|
let {
|
|
brand,
|
|
modelCode,
|
|
modelYear,
|
|
adsVersion,
|
|
vin,
|
|
existGroup,
|
|
onlineStatus,
|
|
page,
|
|
limit,
|
|
} = this;
|
|
if (
|
|
brand ||
|
|
modelCode ||
|
|
modelYear ||
|
|
adsVersion ||
|
|
vin ||
|
|
existGroup ||
|
|
onlineStatus
|
|
) {
|
|
this.isaddGroup = true;
|
|
}
|
|
this.ticketList = [];
|
|
this.groupList = [];
|
|
this.page = 1;
|
|
this.getTableData();
|
|
},
|
|
reset() {
|
|
this.brand = "";
|
|
this.modelCode = "";
|
|
this.modelYear = "";
|
|
this.adsVersion = "";
|
|
this.vin = "";
|
|
this.existGroup = "";
|
|
this.onlineStatus = "";
|
|
this.page = 1;
|
|
this.ticketList = [];
|
|
this.groupList = [];
|
|
this.isaddGroup = false;
|
|
this.getTableData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.getTableData();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.limit = val;
|
|
this.handleCurrentChange(1);
|
|
},
|
|
getMaxHeight() {
|
|
let bodyHeight =
|
|
document.documentElement.clientHeight || document.body.clientHeight;
|
|
this.maxHeight = bodyHeight - 194;
|
|
},
|
|
getIsColor(vin, list) {
|
|
let isin = false;
|
|
list.map((item) => {
|
|
if (item.vin == vin) {
|
|
isin = true;
|
|
}
|
|
});
|
|
if (isin) {
|
|
return "#0070fb";
|
|
} else {
|
|
return "#4a4a4c";
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|