WholeProcessPlatform/frontend/src/modules/rightSearchDrawer/basicInfo/index.vue

<template>
  <SidePanelItem title="基本信息" :shrink="false">
    <template #title-right-content>
      <img
        class="w-[15px] h-[15px] cursor-pointer"
        src="@/assets/svg/basicInfo.svg"
        @click="iconClick"
        alt=""
      />
    </template>
    <a-spin :spinning="loading" style="width: 100%; text-align: center">
      <a-image v-if="logo" width="100%" height="250px" :src="logo" />
      <a-form>
        <a-row class="px-2">
          <a-col :span="item.col" v-for="(item, index) in formDiv" :key="index">
            <a-form-item :label="item.label" :title="info[item.value]">
              <span v-if="item.type == 'date'">
                {{
                  info[item.value]
                    ? dayjs(info[item.value]).format('YYYY-MM-DD')
                    : '-'
                }}
              </span>
              <span v-else>{{ info[item.value] || '-' }} </span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </SidePanelItem>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
import { useModelStore } from '@/store/modules/model';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import {
  ENGInfo,
  DWInfo,
  EQInfo,
  FBInfo,
  VPInfo,
  VAInfo,
  WTInfo,
  WQInfo,
  ZQInfo,
  VDInfo,
  FHInfo
} from './config.js';
import { getStcdDetail } from '@/api/mapModal';

const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
const modelStore = useModelStore();
const info = ref({});
const formDiv = ref(null);
const logo = ref('');
const loading = ref(false);
const moduleMap = {
  ENGInfo: ENGInfo,
  DWInfo: DWInfo,
  FPInfo: DWInfo,
  EQInfo: EQInfo,
  FBInfo: FBInfo,
  VPInfo: VPInfo,
  VAInfo: VAInfo,
  WTInfo: WTInfo,
  WQInfo: WQInfo,
  ZQInfo: ZQInfo,
  VDInfo: VDInfo,
  WTRVInfo: WTInfo,
  WTVTInfo: WTInfo,
  WQFBInfo: WQInfo,
  WQFPInfo: WQInfo,
  FHInfo: FHInfo
} as const;
watch(
  () => modelStore.selectedAnchorPoint,
  async newVal => {
    if (!newVal?.stcd) return;
    loading.value = true;
    console.log(newVal);
    try {
      logo.value = '';
      const res = await getStcdDetail(
        'eng/base/msstbprpt/getStcdInfo',
        newVal.stcd
      );
      const data = res.data.msStbprpT || {};
      console.log(data);
      if (data.logo) {
        logo.value = baseUrl + '/?' + data.logo;
      } else {
        logo.value = '';
      }
      if (data.sttpCode == 'ENG') {
        data.sttp = data.sttpCode;
      }
      const code = data.sttp.split('_')[0];
      formDiv.value = moduleMap[code + 'Info'];

      if (data.ttpwr) {
        data.ttpwr = data.ttpwr / 1000;
      }
      console.log(data);
      info.value = data;
    } finally {
      loading.value = false;
    }
  },
  { immediate: true, deep: true }
);
const iconClick = () => {
  if (info.value.sttpMap == 'ylfb') {
    modelStore.ylfbModalVisible = true;
    modelStore.params = info.value;
  } else {
    modelStore.modalVisible = true;
    modelStore.params = info.value;
    modelStore.title = info.value.titleName || info.value.stnm;
  }
};
</script>

<style lang="scss" scoped>
:deep(.ant-form-item) {
  margin-bottom: 0;
}
:deep(.ant-form-item-label) {
  & > label {
    color: #949494 !important;
  }
}
:deep(.ant-form-item-control-input-content) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>