|
|
@@ -1,41 +1,55 @@
|
|
|
<template>
|
|
|
<div class="menu-content">
|
|
|
- <div class="title">路网视频</div>
|
|
|
- <div class="flex">
|
|
|
- <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
|
|
|
- <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
|
|
|
+ <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">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <div class="btn" @click="handleCancel">取消</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div>类型</div>
|
|
|
- <el-checkbox-group v-model="queryParams.type" size="large">
|
|
|
- <el-checkbox v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
|
|
|
- </el-checkbox-group>
|
|
|
+ <div class="custom-table">
|
|
|
+ <div class="th">
|
|
|
+ <div class="td">
|
|
|
+ <el-checkbox-group v-model="queryParams.type" size="large">
|
|
|
+ <el-checkbox v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" >
|
|
|
+ {{ item.label }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div class="btn" @click="initData">确定</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div>视频类型</div>
|
|
|
- <el-table :data="listData" border style="width: 100%">
|
|
|
- <el-table-column prop="area" show-overflow-tooltip align="center">
|
|
|
- <template #header>
|
|
|
- <el-select v-model="queryParams.area" placeholder="全部" size="large" clearable @change="initData">
|
|
|
- <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ <div class="custom-table">
|
|
|
+ <div class="th">
|
|
|
+ <div class="td">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.area"
|
|
|
+ placeholder="所有区县"
|
|
|
+ size="large"
|
|
|
+ class="custom-select2"
|
|
|
+ popper-class="custom-select-popper2"
|
|
|
+ :teleported="false"
|
|
|
+ @change="initData"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
|
|
|
</el-select>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label="名称" show-overflow-tooltip align="center">
|
|
|
- <template #default="scope">
|
|
|
- <div style="color: #409eff; cursor: pointer" @click="handleShowDialog(scope.row)">
|
|
|
- {{ scope.row.name }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination
|
|
|
- v-show="total > queryParams.size"
|
|
|
- v-model:page="queryParams.current"
|
|
|
- v-model:limit="queryParams.size"
|
|
|
- :total="total"
|
|
|
- @pagination="initData"
|
|
|
- />
|
|
|
- <Dialog v-model="showDialog" title="路网视频" width="2500px" height="1200px">
|
|
|
- <div style="width: 2500px; height: 1120px; display: flex; justify-content: center; align-items: center">
|
|
|
- <HKVideo :dot_data="videoMonitorData" :width="2400" :height="1000" />
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
</Dialog>
|
|
|
</div>
|
|
|
@@ -53,7 +67,7 @@ const queryParams = reactive({
|
|
|
current: 1,
|
|
|
size: 10,
|
|
|
keyword: '',
|
|
|
- type: '检测站',
|
|
|
+ type: '',
|
|
|
area: ''
|
|
|
});
|
|
|
let total = ref(0);
|
|
|
@@ -113,4 +127,72 @@ initData();
|
|
|
top: 30px;
|
|
|
left: 160px;
|
|
|
}
|
|
|
+.custom-table {
|
|
|
+ width: 1499px;
|
|
|
+ .table-content {
|
|
|
+ height: 880px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .th {
|
|
|
+ width: 1499px;
|
|
|
+ height: 151px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .tr {
|
|
|
+
|
|
|
+ height: 139px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
|
|
|
+ //margin-left: -23px;
|
|
|
+ display: flex;
|
|
|
+ padding-right: 20px;
|
|
|
+ &:hover {
|
|
|
+ background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .td {
|
|
|
+ flex: 1;
|
|
|
+ color: #edfaff;
|
|
|
+ font-size: 38px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .td-text {
|
|
|
+ /* 设置字体透明 */
|
|
|
+ color: transparent;
|
|
|
+ /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ /* 非Webkit内核浏览器需要使用标准前缀 */
|
|
|
+ background-clip: text;
|
|
|
+ font-family: 'YouSheBiaoTiHei';
|
|
|
+ /* 设置线性渐变，从红色渐变到蓝色 */
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
|
|
|
+ font-size: 48px;
|
|
|
+ }
|
|
|
+ .text-green {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
|
|
|
+ }
|
|
|
+ .text-danger {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.box-left {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .btn {
|
|
|
+ width: 140px;
|
|
|
+ min-width: 140px;
|
|
|
+ height: 56px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
