WholeProcessPlatform/frontend/src/modules/jidiInfoMod/index.vue

<!-- SidePanelItem.vue -->
<template>
  <div>
    <SidePanelItem title="基本情况介绍" :shrink="true">
      <p v-if="title_text" class="basic_body1">{{ title_text }}</p>
      <div v-else class="zanwushujv"><a-empty /></div>
    </SidePanelItem>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";

import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import SidePanelItem from "@/components/SidePanelItem/index.vue";

const JidiSelectEventStore = useJidiSelectEventStore();
// 定义组件名（便于调试和递归）
defineOptions({
  name: "jidiInfoMod",
});
const title_text = ref(
  "我国水能资源丰富，主要集中在金沙江、长江上游、雅砻江、黄河上游、大渡河、南盘江-红水河、乌江和西南诸河等流域，总技术可开发量约3.81亿kW，占全国技术可开发量的55.5%。截至2023年年底，雅砻江、金沙江、大渡河、乌江、长江上游、南盘江-红水河等流域已建和在建比例超80%，水能资源开发程度较高，剩余待开发水利资源主要集中在西南诸河，发展潜力巨大。"
);
watch(
  () => JidiSelectEventStore.selectedItem,
  (newVal) => {
    console.log(newVal);
    if (newVal.name == '当前全部') {
    }
  },
  { deep: true }
);
// 页面加载时执行的逻辑
onMounted(() => {});
</script>

<style lang="scss">
.zanwushujv {
  display: flex;
  align-items: center;
  justify-content: center;
}

.basic_body1 {
    width: 100%;
    line-break: anywhere;
}
</style>