yjhtgl-web/src/views/globalMap/RightMenu/RoadNetworkVideo.vue

<template>
  <div class="menu-content">
    <div class="container">
      <div class="gradient-text common-dialog-title2">路网视频</div>
      <div class="box-left">
        <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>
        </el-input>
        <div class="btn" @click="handleCancel">取消</div>
      </div>
    </div>
    <div class="title-box">
      <div class="gradient-text">类型</div>
    </div>
    <div class="box">
      <div v-for="(item, index) in options" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
        <div class="text1">{{ item.label }}</div>
      </div>
    </div>
    <div class="title-box">
      <div class="gradient-text">视频类型</div>
    </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="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>
        <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>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      :total="total"
      layout="total, prev, pager, next"
      @pagination="initData"
    />
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';
import { getRoadVideoList } from '@/api/globalMap/roadNetworkVideo';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
const handleShowVideo2 = inject('handleShowVideo2');
const queryParams = reactive({
  current: 1,
  size: 10,
  query: {
    keyword: '',
    type: '1,2,3,4,5',
    area: ''
  }
});
let total = ref(0);
const options = reactive([
  // { 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([]);

const handleShowDialog = (row) => {
  handleShowVideo2(row);
};
const initData = () => {
  getRoadVideoList(queryParams).then((res) => {
    listData.value = res.rows;
    total.value = res.total;
  });
};
const handleCancel = () => {
  queryParams.query.keyword = '';
  initData();
};
const handleClick = (item) => {
  item.checked = !item.checked;
  let type = [];
  options.forEach((item) => {
    if (!!item.checked) {
      type.push(item.value);
    }
  });
  queryParams.query.type = type.toString();
  initData();
};
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;
}
.custom-table {
  width: 550px;
  .table-content {
    height: 250px;
    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%);
  }
}
.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;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  .box-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 63px 0 34px;
    cursor: pointer;
    width: 184px;
    height: 43px;
    background: url('@/assets/images/map/rightMenu/tag.png') no-repeat;
    background-size: 100% 100%;
    margin-left: -60px;
    &:nth-child(1),
    &:nth-child(5) {
      margin-left: -10px;
    }
    &:hover {
      background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
      background-size: 100% 100%;
    }
    .text1 {
      flex: 1;
      color: #ffffff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .text2 {
      font-family: 'BEBAS-1';
      margin-left: 25px;
      font-size: 38px;
      color: #00e8ff;
    }
  }
  .box-item-active {
    background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
    background-size: 100% 100%;
  }
}
.title-box {
  height: 27px;
  background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat  bottom left;
  background-size: 135px 20px;
  padding-left: 28px;
  font-size: 16px;
  color: #f4f7fa;
  display: flex;
  align-items: center;
}

.pagination-container {
  height: 64px;
  margin: 8px 0 0 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>