yjdp-web/src/views/globalMap/RightMenu/tranBureauVideo.vue

<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: 240px">
              <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: 240px">
              <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.dictValue" />
              </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>
          <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="initData2"
            />
          </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: 1579px;
  height: 1394px;
  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  padding: 130px 20px 20px 20px;
  font-size: 36px;
  position: relative;
  color: #ffffff;
}
.title {
  font-size: 60px;
  position: absolute;
  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;
  }
}
.footer {
  height: 64px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  .pagination-container {
    height: 64px;
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf;
    font-size: 32px;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent;
      border: none;
      .el-icon {
        font-size: 22px;
        color: #a7ccdf;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent;
      border: none;
    }
    .el-pager li {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 32px;
      color: #a7ccdf;
      background-color: #0e3064;
      border: 1px solid #0c57a7;
      margin: 0 6px;
      &:hover {
        background-color: #038dff;
        border: 1px solid #038dff;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff;
      border: 1px solid #038dff;
    }
  }
}
</style>