234 lines
6.2 KiB
Vue
234 lines
6.2 KiB
Vue
|
<template>
|
||
|
|
<div class="manage-container">
|
||
|
|
<el-table
|
||
|
|
v-loading="listLoading"
|
||
|
|
:data="tableData"
|
||
|
|
stripe
|
||
|
|
border
|
||
|
|
style="width: 100%"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
fixed
|
||
|
|
prop="vehicleName"
|
||
|
|
label="车辆名称"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="vehicleIcon"
|
||
|
|
label="车辆图标"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="vehicleNumber"
|
||
|
|
label="车牌号"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="vehicleModels"-->
|
||
|
|
<!-- label="车辆品牌"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- ></el-table-column>-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="carFrame"-->
|
||
|
|
<!-- label="车架号"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- ></el-table-column>-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="driverName"-->
|
||
|
|
<!-- label="司机名称"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- ></el-table-column>-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="driverPhone"-->
|
||
|
|
<!-- label="司机电话"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- ></el-table-column>-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="enabledFlag"-->
|
||
|
|
<!-- label="是否启用"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- >-->
|
||
|
|
<!-- <template #default="{ row }">-->
|
||
|
|
<!-- <span v-if="row.enabledFlag == 0">不启用</span>-->
|
||
|
|
<!-- <span v-if="row.enabledFlag == 1">启用</span>-->
|
||
|
|
<!-- </template>-->
|
||
|
|
<!-- </el-table-column>-->
|
||
|
|
<!-- <el-table-column-->
|
||
|
|
<!-- prop="engineNumber"-->
|
||
|
|
<!-- label="电机发动机号"-->
|
||
|
|
<!-- width="150"-->
|
||
|
|
<!-- align="center"-->
|
||
|
|
<!-- ></el-table-column>-->
|
||
|
|
<el-table-column
|
||
|
|
prop="projectName"
|
||
|
|
label="绑定项目"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
<template #default="{ row }">
|
||
|
|
<span v-for="(v, k) in row.projects" :key="k" style="display: block">
|
||
|
|
{{ v.name }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="imei"
|
||
|
|
label="IMEI"
|
||
|
|
width="350"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="deviceName"
|
||
|
|
label="设备名称"
|
||
|
|
width="250"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="mcType"
|
||
|
|
label="设备型号"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="mcTypeUseScope"
|
||
|
|
label="机型"
|
||
|
|
width="120"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
<template #default="{ row }">
|
||
|
|
<span v-if="row.mcTypeUseScope == 'aotomobile'">汽车</span>
|
||
|
|
<span v-if="row.mcTypeUseScope == 'electromobile'">电动车</span>
|
||
|
|
<span v-if="row.mcTypeUseScope == 'personal'">个人</span>
|
||
|
|
<span v-if="row.mcTypeUseScope == 'pet'">宠物</span>
|
||
|
|
<span v-if="row.mcTypeUseScope == 'plane'">飞机</span>
|
||
|
|
<span v-if="row.mcTypeUseScope == 'others'">其他</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="equipType"
|
||
|
|
label="设备类型"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
<template #default="{ row }">
|
||
|
|
<span v-if="row.equipType == 'WIRED'">有线</span>
|
||
|
|
<span v-if="row.equipType == 'WIRELESS'">无线</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="sim"
|
||
|
|
label="Sim卡号"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="expiration"
|
||
|
|
label="到期时间"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="activationTime"
|
||
|
|
label="激活时间"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="reMark"
|
||
|
|
label="备注"
|
||
|
|
width="150"
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column fixed="right" label="操作" width="120" align="center">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-button type="text" @click="bindProject(row)">绑定项目</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<bind-project ref="bind"></bind-project>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getDeviceList } from '@/api/vehicle';
|
||
|
|
import bindProject from './bindProject';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
bindProject,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: [],
|
||
|
|
lazy: true,
|
||
|
|
listLoading: true,
|
||
|
|
elementLoadingText: '正在加载...',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async fetchData() {
|
||
|
|
this.listLoading = true;
|
||
|
|
const { data } = await getDeviceList();
|
||
|
|
this.tableData = data;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.listLoading = false;
|
||
|
|
}, 500);
|
||
|
|
},
|
||
|
|
bindProject(row) {
|
||
|
|
this.$refs['bind'].bindProduct(row);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.el-submenu__title:hover {
|
||
|
|
background-color: rgba(#1890ff, 0.085) !important;
|
||
|
|
color: hsla(208, 100%, 55%, 0.95) !important;
|
||
|
|
}
|
||
|
|
.el-dialog {
|
||
|
|
.el-dialog__header {
|
||
|
|
background-color: #1890ff !important;
|
||
|
|
padding: 15px 20px;
|
||
|
|
text-align: left !important;
|
||
|
|
.el-dialog__title {
|
||
|
|
color: #e8f4ff !important;
|
||
|
|
}
|
||
|
|
.el-dialog__headerbtn .el-dialog__close {
|
||
|
|
color: #e8f4ff !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-dialog__body {
|
||
|
|
padding: 20px !important;
|
||
|
|
.el-form-item {
|
||
|
|
margin-bottom: 10px !important;
|
||
|
|
.el-input {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
.el-select {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
.el-cascader {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-form-item:last-child {
|
||
|
|
margin-bottom: 20px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dialog-footer {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|