|
@@ -3,7 +3,7 @@
|
|
|
<div class="container">
|
|
|
<div class="gradient-text title">路网视频</div>
|
|
|
<div class="box-left">
|
|
|
- <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
|
|
|
+ <el-input v-model="queryParams.query.keyword" class="custom-input" placeholder="搜索" @input="initData">
|
|
|
<template #prefix>
|
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
|
</template>
|
|
@@ -26,7 +26,7 @@
|
|
|
<div class="th">
|
|
|
<div class="td">
|
|
|
<el-select
|
|
|
- v-model="queryParams.area"
|
|
|
+ v-model="queryParams.query.area"
|
|
|
placeholder="所有区县"
|
|
|
size="large"
|
|
|
class="custom-select2"
|
|
@@ -34,17 +34,20 @@
|
|
|
:teleported="false"
|
|
|
@change="initData"
|
|
|
>
|
|
|
+ <el-option label="所有区县" value="" />
|
|
|
<el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="td">名称</div>
|
|
|
</div>
|
|
|
- <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
|
|
|
- <div class="td">{{ item.area }}</div>
|
|
|
- <div class="td">{{ item.name }}</div>
|
|
|
+ <div class="table-content">
|
|
|
+ <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
|
|
|
+ <div class="td">{{ item.area }}</div>
|
|
|
+ <div class="td">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Dialog v-if="showDialog" v-model="showDialog" title="江湖河库" width="2500px" height="1200px">
|
|
|
+ <Dialog v-if="showDialog" v-model="showDialog" title="路网视频" width="2500px" height="1200px">
|
|
|
<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
<HKVideo :dot_data="videoMonitorData" />
|
|
|
</div>
|
|
@@ -54,8 +57,7 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
-import Dialog from '@/components/Dialog/index.vue';
|
|
|
-import { deepClone } from '@/utils';
|
|
|
+import Dialog from './Dialog.vue';
|
|
|
import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
@@ -63,18 +65,21 @@ const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
|
|
|
const queryParams = reactive({
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
- keyword: '',
|
|
|
- type: '',
|
|
|
- area: ''
|
|
|
+ query: {
|
|
|
+ keyword: '',
|
|
|
+ type: '1,2,3,4,5',
|
|
|
+ area: ''
|
|
|
+ }
|
|
|
});
|
|
|
let total = ref(0);
|
|
|
const options = reactive([
|
|
|
- { label: '检测站', value: '检测站', checked: true },
|
|
|
- { label: '收费站', value: '收费站', checked: true },
|
|
|
- { label: '高速公路', value: '高速公路', checked: true },
|
|
|
- { label: '国道', value: '国道', checked: true },
|
|
|
- { label: '省市县际道路', value: '省市县际道路', checked: true },
|
|
|
- { label: '高速服务区', value: '高速服务区', checked: true }
|
|
|
+ // { label: '检测站', value: '1', checked: true },
|
|
|
+ { label: '收费站', value: '1', checked: true },
|
|
|
+ { label: '高速公路', value: '2', checked: true },
|
|
|
+ { label: '国道', value: '3', checked: true },
|
|
|
+ { label: '省市县际道路', value: '4', checked: true },
|
|
|
+ { label: '乡道', value: '5', checked: true },
|
|
|
+ // { label: '高速服务区', value: '高速服务区', checked: true }
|
|
|
]);
|
|
|
const listData = ref([]);
|
|
|
|
|
@@ -88,20 +93,13 @@ const handleShowDialog = (row) => {
|
|
|
});
|
|
|
};
|
|
|
const initData = () => {
|
|
|
- let newQueryParams = deepClone(queryParams);
|
|
|
- newQueryParams.query = {
|
|
|
- area: queryParams.area,
|
|
|
- keyword: queryParams.keyword
|
|
|
- };
|
|
|
- delete newQueryParams.area;
|
|
|
- delete newQueryParams.keyword;
|
|
|
- getRoadVideoList(newQueryParams).then((res) => {
|
|
|
+ getRoadVideoList(queryParams).then((res) => {
|
|
|
listData.value = res.rows;
|
|
|
total.value = res.total;
|
|
|
});
|
|
|
};
|
|
|
const handleCancel = () => {
|
|
|
- queryParams.keyword = '';
|
|
|
+ queryParams.query.keyword = '';
|
|
|
initData();
|
|
|
};
|
|
|
const handleClick = (item) => {
|
|
@@ -112,7 +110,7 @@ const handleClick = (item) => {
|
|
|
type.push(item.value);
|
|
|
}
|
|
|
});
|
|
|
- queryParams.type = type.toString();
|
|
|
+ queryParams.query.type = type.toString();
|
|
|
initData();
|
|
|
};
|
|
|
initData();
|
|
@@ -137,7 +135,7 @@ initData();
|
|
|
.custom-table {
|
|
|
width: 1499px;
|
|
|
.table-content {
|
|
|
- height: 880px;
|
|
|
+ height: 570px;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
@@ -146,13 +144,13 @@ initData();
|
|
|
height: 151px;
|
|
|
background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
|
|
|
display: flex;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
.tr {
|
|
|
height: 139px;
|
|
|
background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
|
|
|
- //margin-left: -23px;
|
|
|
display: flex;
|
|
|
- padding-right: 20px;
|
|
|
+ padding: 20px;
|
|
|
&:hover {
|
|
|
background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
|
|
|
}
|