yjxp-web/src/views/disasterRiskMonitor/windAndFloodPreventionView.vue

<template>
  <div class="container">
    <div class="title">
      {{ name }}
    </div>
    <div class="box">
      <div class="card-header">
        <i class="icon-line" />
        <div class="text">视频</div>
      </div>
      <HKVideo
        v-if="!!video1"
        :dot_data="video1"
        autoplay
        style="height: 200px"
      />
    </div>
    <div class="box">
      <div class="card-header">
        <i class="icon-line" />
        <div class="text">周边视频</div>
      </div>
      <el-table
        :data="videoList"
        header-cell-class-name="common-table-header"
        :row-class-name="getTableRowClass"
        table-layout="auto"
        class="common-table"
      >
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column label="视频名称" prop="name" align="center" />
        <!--        <el-table-column-->
        <!--            label="距离"-->
        <!--            prop="distance"-->
        <!--            align="center"-->
        <!--            width="60px"-->
        <!--        />-->
        <el-table-column label="操作" align="center" width="50px">
          <template #default="scope">
            <div
              class="btn"
              :style="{ color: video1 === scope.row ? '#000' : '#1d92ff' }"
              @click="switchVideo(scope.row)"
            >
              切换
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElTable, ElTableColumn } from "element-plus";
import {
  getVideoInfo,
  getVideoInfo2
} from "@/api/disasterRiskMonitor/rainfall";

const route = useRoute();
const latitude = ref(route.query.latitude);
const longitude = ref(route.query.longitude);
const name = ref(decodeURIComponent(route.query.name));
// const queryParams = reactive({
//   location: "",
//   radius: "2000"
// });
const queryParams = reactive({
  radius: "2000",
  page: 1,
  pageSize: 10,
  longitude: "",
  latitude: ""
});
const videoList = ref();
const getTableRowClass = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? "" : "common-table-tr";
};
// queryParams.location = "POINT(" + longitude.value + " " + latitude.value + ")";
const getVideo = () => {
  getVideoInfo2(queryParams).then(res => {
    res.data.list.forEach(item => {
      item.video_code = item.indexcode;
      item.distance = (Math.ceil(item.distance * 100) / 100).toFixed(2);
    });
    videoList.value = res.data.list;
    video1.value = res.data.list[0];
  });
};
getVideo();
const video1 = ref();
const switchVideo = row => {
  video1.value = row;
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  padding: 8px 16px;
  .box {
    background-color: #ffffff;
    border: 1px solid #eaedf7;
    box-shadow: 0 0 4px 0 #4554661a;
    border-radius: 4px;
    background-image: linear-gradient(
      to bottom,
      #f3f7fd 0%,
      #f7fafe 20px,
      #fcfdff 50px,
      #ffffff 50px,
      #ffffff 100%
    );
    .icon-line {
      display: inline-block;
      width: 6px;
      height: 16px;
      background: url("@/assets/images/line.jpg") no-repeat;
      background-size: 100% 100%;
      margin-right: 3px;
    }
    padding: 10px 16px;
    margin-bottom: 10px;
    .box-item {
      display: flex;
      align-items: center;
      height: 30px;
      .box-tag {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tag-active {
        background-color: #5f9ff2;
        border-radius: 4px;
        color: #ffffff;
      }
    }
  }
}
/* 移除表单容器背景 */
:deep(.van-cell-group) {
  background: transparent !important;
}

/* 移除每个表单项的背景 */
:deep(.van-cell) {
  background: transparent !important;
}

/* 移除内嵌容器的边距和阴影 */
:deep(.van-cell-group--inset) {
  margin: 0;
  box-shadow: none;
  &::after {
    border: none !important; /* 移除默认边框 */
  }
}
:deep(.van-field--disabled) {
  .van-field__label,
  .van-field__control {
    color: rgba(12, 12, 12, 0.93) !important; /* 设置文字颜色为黑色 */
    -webkit-text-fill-color: #4a4848 !important; /* 适配 iOS 设备 */
  }

  /* 移除禁用蒙层 */
  .van-field__disabled-mask {
    display: none !important;
  }
}
.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
</style>