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

<template>
  <div class="container">
    <div class="gradient-text 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>
    <div class="gradient-text">视频类型</div>
    <div class="custom-table">
      <div class="th">
        <div class="td">
          所有区县
<!--          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">-->
<!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
<!--          </el-select>-->
        </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.name }}</div>
        </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>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';
import Dialog from './Dialog.vue';
import { getWaterList2 } from '@/api/globalMap/reservoir';
import { deepClone } from '@/utils';

const queryParams = reactive({
  current: 1,
  size: 10,
  keyword: '',
  area: ''
});
const total = ref(0);

const options = reactive([
  {
    value: '茂南区',
    label: '茂南区'
  },
  {
    value: '高州市',
    label: '高州市'
  },
  {
    value: '电白区',
    label: '电白区'
  },
  {
    value: '信宜市',
    label: '信宜市'
  },
  {
    value: '化州市',
    label: '化州市'
  }
]);
const listData = ref([]);

let showDialog = ref(false);
let videoMonitorData = ref({});
const handleShowDialog = (row) => {
  showDialog.value = false;
  nextTick(() => {
    videoMonitorData.value = row;
    showDialog.value = true;
  });
};
const initData = () => {
  let newQueryParams = deepClone(queryParams);
  newQueryParams.query = {
    area: queryParams.area,
    keyword: queryParams.keyword
  };
  delete newQueryParams.area;
  delete newQueryParams.keyword;
  getWaterList2(newQueryParams).then((res) => {
    listData.value = res.rows;
    total.value = res.total;
  });
};
initData();
</script>

<style lang="scss" scoped>
.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%);
  }
}

.title {
  font-size: 60px;
  position: absolute;
  top: 12px;
  left: 210px;
}
</style>