|
@@ -20,7 +20,7 @@
|
|
|
<div class="td" style="width: 120px; flex: unset">操作</div>
|
|
|
</div>
|
|
|
<div class="table-content">
|
|
|
- <div v-for="(item, index) in dataList" :key="item.id" class="tr">
|
|
|
+ <div v-for="item in dataList" :key="item.id" class="tr">
|
|
|
<div class="td">{{ item.vehicle_no }}</div>
|
|
|
<div class="td">
|
|
|
<dict-tag :options="alarm_identification" :value="item.alarm_flag" />
|
|
@@ -30,12 +30,23 @@
|
|
|
</div>
|
|
|
<div class="td">{{ parseTime(item.gpsDate) }}</div>
|
|
|
<div class="td" style="width: 120px; flex: unset">
|
|
|
- <div class="text" @click="handleConnect(index, item)">连线</div>
|
|
|
- <div class="text" @click="handleCollaborate(index, item)">协同</div>
|
|
|
+ <div class="text" @click="handleConnect">连线</div>
|
|
|
+ <div class="text" @click="handleCollaborate">协同</div>
|
|
|
<div class="text" @click="handleTrack(item)">轨迹</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="footer">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :hide-on-single-page="true"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ :page-size="queryParams.size"
|
|
|
+ :current-page="queryParams.current"
|
|
|
+ @current-change="handleChangePage"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -47,44 +58,40 @@ import { parseTime } from '@/utils/ruoyi';
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { car_type, alarm_identification } = toRefs<any>(proxy?.useDict('car_type', 'alarm_identification'));
|
|
|
|
|
|
-const AMapType = ['vectorgraph', 'satellite'];
|
|
|
const initDataToPlay = inject('initDataToPlay');
|
|
|
-const props = defineProps({
|
|
|
- activeMap: String
|
|
|
-});
|
|
|
// 数据列表,直接定义为数组
|
|
|
-const dataList = reactive([]);
|
|
|
-//入参
|
|
|
+const dataList = ref([]);
|
|
|
+// 入参
|
|
|
const queryParams = reactive({
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
keywords: ''
|
|
|
});
|
|
|
-//调接口
|
|
|
+const total = ref(0);
|
|
|
+// 调接口
|
|
|
const initData = () => {
|
|
|
- getVehicleList({
|
|
|
- query: {
|
|
|
- keywords: queryParams.keywords
|
|
|
- }
|
|
|
- }).then((res) => {
|
|
|
- if (res.code === 0 && Array.isArray(res.rows)) {
|
|
|
- dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容,保持响应性
|
|
|
- } else {
|
|
|
- console.error('Invalid response from server:', res);
|
|
|
- // 可以选择清空数据列表或显示错误消息
|
|
|
- dataList.splice(0, dataList.length); // 清空数据列表
|
|
|
- }
|
|
|
+ getVehicleList({ current: queryParams.current, size: queryParams.size, query: { keywords: queryParams.keywords } }).then((res) => {
|
|
|
+ dataList.value = res.rows;
|
|
|
+ total.value = res.total;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const handleChangePage = (newNum) => {
|
|
|
+ queryParams.current = newNum;
|
|
|
+ initData();
|
|
|
+};
|
|
|
+
|
|
|
// 取消按钮的逻辑,搜索框清空并重新加载数据
|
|
|
const handleCancel = () => {
|
|
|
queryParams.keywords = '';
|
|
|
+ queryParams.current = 1;
|
|
|
initData();
|
|
|
};
|
|
|
|
|
|
const handleConnect = () => {};
|
|
|
const handleCollaborate = () => {};
|
|
|
-// 轨迹
|
|
|
|
|
|
+// 轨迹
|
|
|
const handleTrack = (item) => {
|
|
|
getVehicleTrajectory(item.vehicle_no).then((res) => {
|
|
|
const trajectory = [];
|
|
@@ -97,7 +104,7 @@ const handleTrack = (item) => {
|
|
|
initDataToPlay({ type: 'track', data: trajectory });
|
|
|
});
|
|
|
};
|
|
|
-//调用函数
|
|
|
+// 调用函数
|
|
|
onMounted(() => {
|
|
|
initData();
|
|
|
});
|
|
@@ -131,11 +138,13 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.custom-table {
|
|
|
- width: 550px;
|
|
|
+ width: 100%;
|
|
|
+ height: 470px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
.table-content {
|
|
|
- height: 385px;
|
|
|
+ flex: 1;
|
|
|
overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
}
|
|
|
.th {
|
|
|
background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
|
|
@@ -190,4 +199,47 @@ onMounted(() => {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
+.footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 8px;
|
|
|
+ .pagination-container {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination__total) {
|
|
|
+ color: #a7ccdf;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination) {
|
|
|
+ .btn-next,
|
|
|
+ .btn-prev {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ .el-icon {
|
|
|
+ color: #a7ccdf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-prev:disabled,
|
|
|
+ .btn-next:disabled {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-pager li {
|
|
|
+ text-align: center;
|
|
|
+ color: #a7ccdf;
|
|
|
+ background-color: #0e3064;
|
|
|
+ border: 1px solid #0c57a7;
|
|
|
+ &:hover {
|
|
|
+ background-color: #038dff;
|
|
|
+ border: 1px solid #038dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pager li.is-active {
|
|
|
+ background-color: #038dff;
|
|
|
+ border: 1px solid #038dff;
|
|
|
+ }
|
|
|
+ .el-pagination__goto {
|
|
|
+ color: #a7ccdf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|