|
|
|
|
@ -10,16 +10,16 @@
|
|
|
|
|
<p>线路：<span>{{ cardInfo.line }}</span></p>
|
|
|
|
|
</el-card>
|
|
|
|
|
<h2>实时位置</h2>
|
|
|
|
|
<div class="container1" id="container"></div>
|
|
|
|
|
<!-- <div style="width: 25%;text-align: center;margin-top: 14px">-->
|
|
|
|
|
<!-- <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>-->
|
|
|
|
|
<!-- <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<div id="container" class="container1"></div>
|
|
|
|
|
<!-- <div style="width: 25%;text-align: center;margin-top: 14px">-->
|
|
|
|
|
<!-- <img height="70" src="@/assets/images/tyre.png" style="" width="70"/>-->
|
|
|
|
|
<!-- <div style="width: 100%;font-size: 12px;white-space:nowrap">轮胎详情</div>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :offset="1" :span="11">
|
|
|
|
|
<div style="width: 100%;text-align: center">
|
|
|
|
|
<p style="font-weight: 600;font-size: 20px;margin-top: 32px">单车监控</p>
|
|
|
|
|
<p style="font-weight: 600;font-size: 16px;color:#cba658">名称1 里程：000.00km</p>
|
|
|
|
|
<p style="font-weight: 600;font-size: 16px;color:#cba658">{{ cardInfo.carLicense }} 里程：000.00km</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="(item,index) in 5" key="index" style="margin-bottom: 18px">
|
|
|
|
|
<div
|
|
|
|
|
@ -41,16 +41,16 @@
|
|
|
|
|
<el-col :offset="1" :span="5">
|
|
|
|
|
<el-tabs
|
|
|
|
|
v-model="tabsName"
|
|
|
|
|
type="card"
|
|
|
|
|
style="margin:24px 0 0 0"
|
|
|
|
|
type="card"
|
|
|
|
|
@tab-click="resetQuery"
|
|
|
|
|
>
|
|
|
|
|
<el-tab-pane label="有车载设备车辆" name="有车载设备车辆">
|
|
|
|
|
<el-form ref="queryRef" :inline="true" :model="queryParams"
|
|
|
|
|
label-width="60px">
|
|
|
|
|
<el-form-item label="车队" prop="carLicense">
|
|
|
|
|
<el-form-item label="车队" prop="carQueueId">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.params1"
|
|
|
|
|
v-model="queryParams.carQueueId"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
@ -58,7 +58,7 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="车牌号" prop="carLicense">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.params2"
|
|
|
|
|
v-model="queryParams.carLicense"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
@ -71,59 +71,36 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
ref="tableRef1"
|
|
|
|
|
:show-header="false"
|
|
|
|
|
highlight-current-row
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
@current-change="tableChange"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="params3" prop="params3"/>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="无车载设备车辆" name="无车载设备车辆">
|
|
|
|
|
<el-form ref="queryRef" :inline="true" :model="queryParams"
|
|
|
|
|
label-width="60px">
|
|
|
|
|
<el-form-item label="车队" prop="carLicense">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.params1"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="车牌号" prop="carLicense">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.params2"
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
ref="tableRef"
|
|
|
|
|
:show-header="false"
|
|
|
|
|
highlight-current-row
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
@current-change="tableChange"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="params3" prop="params3"/>
|
|
|
|
|
<el-table-column label="label" prop="label"/>
|
|
|
|
|
<el-table-column label="id" prop="id" v-if="false" />
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<pagination
|
|
|
|
|
v-show="total > 0"
|
|
|
|
|
v-model:limit="queryParams.pageSize"
|
|
|
|
|
v-model:page="queryParams.pageNum"
|
|
|
|
|
:total="total"
|
|
|
|
|
layout="sizes, prev, pager, next"
|
|
|
|
|
style="margin-bottom: 40px"
|
|
|
|
|
@pagination="getList"
|
|
|
|
|
/>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
<script setup>
|
|
|
|
|
import {listBaseCar,getCarGpsList} from '@/api/realTimeMonitoring/carMonitoring'
|
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
import {useI18n} from "vue-i18n";
|
|
|
|
|
import {ref} from 'vue'
|
|
|
|
|
@ -133,11 +110,28 @@ const {proxy} = getCurrentInstance();
|
|
|
|
|
const {t} = useI18n();
|
|
|
|
|
const tableRef1 = ref()
|
|
|
|
|
|
|
|
|
|
proxy.$nextTick(() => {
|
|
|
|
|
// 总条数
|
|
|
|
|
const total = ref(0);
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
console.log(queryParams.value)
|
|
|
|
|
const {rows: list} = await listBaseCar(queryParams.value)
|
|
|
|
|
tableData.value = list.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.carLicense,
|
|
|
|
|
id:e.id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
total.value = tableData.value.length
|
|
|
|
|
tableRef1.value.setCurrentRow(tableData.value[0])
|
|
|
|
|
})
|
|
|
|
|
const tableChange = (e) => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
tableChange(list[0].id)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const tableChange = async (e) => {
|
|
|
|
|
const {data:info} = await getCarGpsList({id:e.id})
|
|
|
|
|
console.log(info)
|
|
|
|
|
cardInfo.value = {
|
|
|
|
|
carLicense:info[0].carLicense
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const cardInfo = ref({
|
|
|
|
|
@ -145,42 +139,33 @@ const cardInfo = ref({
|
|
|
|
|
No: '123',
|
|
|
|
|
type: '2',
|
|
|
|
|
line: '3',
|
|
|
|
|
carLicense:''
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const tabsName = ref('有车载设备车辆')
|
|
|
|
|
const queryParams = ref({
|
|
|
|
|
params1: '',
|
|
|
|
|
params2: '',
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
carQueueId: '',
|
|
|
|
|
carLicense: '',
|
|
|
|
|
})
|
|
|
|
|
const tableData = ref([
|
|
|
|
|
{
|
|
|
|
|
params3: '1233'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
params3: '1233'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
params3: '1233'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
params3: '1233'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
params3: '1233'
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const tableData = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
function handleQuery() {
|
|
|
|
|
queryParams.value.pageNum = 1;
|
|
|
|
|
|
|
|
|
|
// getList();
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
queryParams.value = {
|
|
|
|
|
params1: '',
|
|
|
|
|
params2: '',
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
carQueueId: '',
|
|
|
|
|
carLicense: '',
|
|
|
|
|
}
|
|
|
|
|
handleQuery();
|
|
|
|
|
tableRef1.value.setCurrentRow()
|
|
|
|
|
@ -210,7 +195,7 @@ AMapLoader.load({
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.container1 {
|
|
|
|
|
@ -227,7 +212,7 @@ AMapLoader.load({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
width: 50%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
夜笙歌
2 years ago