|
|
@@ -0,0 +1,248 @@
|
|
|
+<template>
|
|
|
+ <div class="menu-content">
|
|
|
+ <div class="container">
|
|
|
+ <div class="gradient-text title">交通局视频</div>
|
|
|
+ <div class="box-left">
|
|
|
+ <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData2">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <div class="btn" @click="handleCancel">取消</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="gradient-text">视频类型</div>-->
|
|
|
+ <div class="custom-table">
|
|
|
+ <div class="th">
|
|
|
+ <div class="td">
|
|
|
+ <div style="width: 100px">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.area"
|
|
|
+ placeholder="所有区县"
|
|
|
+ size="large"
|
|
|
+ class="custom-select2"
|
|
|
+ popper-class="custom-select-popper2"
|
|
|
+ :teleported="false"
|
|
|
+ @change="initData2"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ <div class="td">
|
|
|
+ <div style="width: 100px">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.video_type"
|
|
|
+ placeholder="类型"
|
|
|
+ size="large"
|
|
|
+ class="custom-select2"
|
|
|
+ popper-class="custom-select-popper2"
|
|
|
+ :teleported="false"
|
|
|
+ @change="initData2"
|
|
|
+ >
|
|
|
+ <el-option label="所有类型" value="" />
|
|
|
+ <el-option v-for="item in videoType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="td">名称</div>
|
|
|
+ </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.video_type_label }}</div>
|
|
|
+ <div class="td">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+<!-- <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="listData" />-->
|
|
|
+ <div class="footer">
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ v-model:page="queryParams.page"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ @pagination="listData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Dialog v-if="showDialog" v-model="showDialog" type="md" title="交通局视频" hide-footer>
|
|
|
+ <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
|
|
|
+ <HKVideo :dot_data="videoMonitorData" />
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Search } from '@element-plus/icons-vue';
|
|
|
+import { getRescue } from '@/api/globalMap/mitigation';
|
|
|
+import { deepClone } from '@/utils';
|
|
|
+import { getVideoList, getVideoType } from '@/api/globalMap/tranBureauVideo';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const { district_type, danger_type } = toRefs<any>(proxy?.useDict('district_type', 'danger_type'));
|
|
|
+const queryParams = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ keyword: '',
|
|
|
+ area: '',
|
|
|
+ video_type: ''
|
|
|
+});
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const listData = ref([]);
|
|
|
+const videoType = ref([]);
|
|
|
+
|
|
|
+let showDialog = ref(false);
|
|
|
+let videoMonitorData = ref({});
|
|
|
+const handleShowDialog = (row) => {
|
|
|
+ showDialog.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ videoMonitorData.value = row;
|
|
|
+ showDialog.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+const initData = () => {
|
|
|
+ getVideoType().then((res) => {
|
|
|
+ videoType.value = res.data;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const initData2 = () => {
|
|
|
+ getVideoList(queryParams).then((res) => {
|
|
|
+ listData.value = res.data;
|
|
|
+ total.value = res.total;
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleCancel = () => {
|
|
|
+ queryParams.keyword = '';
|
|
|
+ initData2();
|
|
|
+};
|
|
|
+initData2();
|
|
|
+initData();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.menu-content {
|
|
|
+ width: 574px;
|
|
|
+ height: 581px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 60px 10px 10px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ position: relative;
|
|
|
+ color: #ffffff;
|
|
|
+ .box-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .btn {
|
|
|
+ width: 59px;
|
|
|
+ height: 23px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-table {
|
|
|
+ width: 550px;
|
|
|
+ .table-content {
|
|
|
+ height: 420px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .th {
|
|
|
+ background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ padding: 7px 12px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .tr {
|
|
|
+ background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ padding: 7px 12px;
|
|
|
+ &:hover {
|
|
|
+ background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .td {
|
|
|
+ flex: 1;
|
|
|
+ color: #edfaff;
|
|
|
+ font-size: 14px;
|
|
|
+ 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: 14px;
|
|
|
+ }
|
|
|
+ .text-green {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
|
|
|
+ }
|
|
|
+ .text-danger {
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .pagination-container {
|
|
|
+ height: 64px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination__total) {
|
|
|
+ color: #a7ccdf !important;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination) {
|
|
|
+ .btn-next,
|
|
|
+ .btn-prev {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ .el-icon {
|
|
|
+ color: #a7ccdf !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-prev:disabled,
|
|
|
+ .btn-next:disabled {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ .el-pager li {
|
|
|
+ text-align: center;
|
|
|
+ color: #a7ccdf !important;
|
|
|
+ background-color: #0e3064 !important;
|
|
|
+ border: 1px solid #0c57a7 !important;
|
|
|
+ &:hover {
|
|
|
+ background-color: #038dff !important;
|
|
|
+ border: 1px solid #038dff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pager li.is-active {
|
|
|
+ background-color: #038dff !important;
|
|
|
+ border: 1px solid #038dff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
