sy-water-data-board-ui/src/views/Main/Sluice/index.vue

<template>
  <div class="project-detail-wrapper">
    <div class="header">
      <div class="title">
        <img :src="waterIcon" />
        <span>{{ data.name }}</span>
      </div>
      <div class="btns">
        <el-icon @click="handleClose">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="content">
      <el-tabs class="main-tabs" :tab-position="'left'" v-model="activeTab">
        <el-tab-pane label="基础信息" name="1" lazy>
          <BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
        </el-tab-pane>
        <el-tab-pane label="监测数据" name="2" lazy>
          <DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
        </el-tab-pane>
        <el-tab-pane label="监测预警" name="3" lazy>
          <MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
        </el-tab-pane>
        <el-tab-pane label="巡查养护统计" name="4" lazy>
          <StatisticsAnalysis ref="statAnalysis" :resCode="resCode"></StatisticsAnalysis>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import BaseInfo from "./components/BaseInfo.vue";
import DataStatistics from "./components/DataStatistics.vue";
import MonitorWarning from "./components/MonitorWarning.vue";
import StatisticsAnalysis from "./components/StatisticsAnalysis.vue";
import { Close } from "@element-plus/icons-vue";
import SB from "@/assets/map/sluice_big.png";
import SM from "@/assets/map/sluice_middle.png";
import SS from "@/assets/map/sluice_small.png";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});
const resCode = ref("");
defineOptions({
  name: "Sluice",
});
const emits = defineEmits(["getResInfo"]);
const waterIcon = ref(SM);
const activeTab = ref("1");

function setWaterIcon() {
  switch (props.data.scale) {
    case "1.0":
    case "2.0":
      waterIcon.value = SB;
      break;
    case "3.0":
      waterIcon.value = SM;
      break;
    case "4.0":
    case "5.0":
      waterIcon.value = SS;
      break;
    default:
      waterIcon.value = SM;
      break;
  }
}
function handleGetResInfo(data: any) {
  emits("getResInfo", data);
}

function handleClose() {
  window.$bus.$emit("close-sluice-dialog");
}
watch(
  () => props.data,
  (val) => {
    if (val) {
      resCode.value = val.code;
    }
  },
  { immediate: true },
);

onMounted(() => {
  setWaterIcon();
});
</script>
<style scoped lang="scss">
.project-detail-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  min-height: 600px;
  max-height: 800px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: #fff;
  .header {
    display: flex;
    padding: 0 20px;
    height: 42px;
    color: #262626;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .title {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .btns {
      cursor: pointer;
    }
  }
  .content {
    height: 748px;
    :deep(.main-tabs) {
      height: 100%;
      .sy-tabs__content,
      .sy-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>