From 12d171dc51facdbef208bbf917381ed9d731424e Mon Sep 17 00:00:00 2001
From: ko1234 <ko.ko@mjmtech.com.tw>
Date: Fri, 1 Nov 2024 16:56:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7=E5=B0=8F?=
 =?UTF-8?q?=E8=A6=96=E7=AA=97=E7=9A=84cog=E3=80=81img=20|=20=E8=A8=AD?=
 =?UTF-8?q?=E5=82=99=E7=AE=A1=E7=90=86=E9=80=A3=E7=B5=90=E5=9C=96=E8=B3=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=9A=84=E5=9C=96=E7=89=87=20|=20=E6=A8=93?=
 =?UTF-8?q?=E5=B1=A4=E6=96=B0=E5=A2=9E=E3=80=81=E7=B7=A8=E8=BC=AF=E3=80=81?=
 =?UTF-8?q?=E5=88=AA=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/EffectScatter.vue        | 23 +++--
 src/components/customUI/Menu.vue              |  2 +-
 src/components/customUI/Pagination.vue        |  2 +-
 src/hooks/forge/useForgeSprite.js             |  2 +-
 .../AssetManagement/components/AssetTable.vue | 25 ++++-
 .../AssetTableModalLeftInfoGraph.vue          | 47 +++++++--
 .../components/AssetTableModalRightInfo.vue   | 96 ++++++++++---------
 src/views/system/System.vue                   | 67 ++++++++++---
 .../system/components/SystemInfoModalCog.vue  | 72 +++++++++++++-
 .../components/SystemInfoModalImage.vue       | 28 +++++-
 10 files changed, 274 insertions(+), 90 deletions(-)

diff --git a/src/components/chart/EffectScatter.vue b/src/components/chart/EffectScatter.vue
index 3893e4e..2ac30af 100644
--- a/src/components/chart/EffectScatter.vue
+++ b/src/components/chart/EffectScatter.vue
@@ -10,7 +10,7 @@ const props = defineProps({
   svg: Object,
   getCoordinate: {
     type: Function,
-    default: null
+    default: null,
   },
 });
 
@@ -22,7 +22,7 @@ async function updateSvg(svg, option) {
   if (!chart.value && dom.value && svg) {
     init();
   } else {
-    clear()
+    clear();
   }
   axios.get(svg.path).then(({ data }) => {
     echarts.registerMap(svg.full_name, { svg: data });
@@ -30,24 +30,33 @@ async function updateSvg(svg, option) {
     if (props.getCoordinate) {
       chart.value.getZr().on("click", function (params) {
         var pixelPoint = [params.offsetX, params.offsetY];
-        var dataPoint = chart.value.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+        var dataPoint = chart.value.convertFromPixel(
+          { geoIndex: 0 },
+          pixelPoint
+        );
         currentClickPosition.value = dataPoint;
         props.getCoordinate(dataPoint);
+        const updatedData = option.series.data
+          .filter(
+            (point) => !(point.itemStyle && point.itemStyle.color === "#0000FF")
+          )
+          .concat({
+            value: dataPoint, // 當前座標值
+            itemStyle: { color: "#0000FF" }, // 設為藍色
+          });
         chart.value.setOption({
           series: {
-            data: [dataPoint],
+            data: updatedData,
           },
         });
-
       });
     }
-
   });
   console.log("updateSvg", svg.path);
 }
 
 function clear() {
-  chart.value.clear()
+  chart.value.clear();
 }
 
 function init() {
diff --git a/src/components/customUI/Menu.vue b/src/components/customUI/Menu.vue
index 157fae1..054a6a3 100644
--- a/src/components/customUI/Menu.vue
+++ b/src/components/customUI/Menu.vue
@@ -21,7 +21,7 @@ const props = defineProps({
       />
     </a>
      <!-- 項目有子層級 -->
-    <details v-else>
+    <details v-else open>
       <summary>{{ item.name }}</summary>
       <ul>
         <li v-for="(child, index) in item.children" :key="index">
diff --git a/src/components/customUI/Pagination.vue b/src/components/customUI/Pagination.vue
index c7cb3fb..d95ed64 100644
--- a/src/components/customUI/Pagination.vue
+++ b/src/components/customUI/Pagination.vue
@@ -123,7 +123,7 @@ const pageInput = computed(() => {
 
     <span
       v-if="totalPage < 6"
-      class="absolute -bottom-8 -translate-x-1/2 text-base text-center"
+      class="absolute -bottom-8 text-base text-center"
     >
       {{ dataSource.length }} {{ $t("table.in_otal") }}</span
     >
diff --git a/src/hooks/forge/useForgeSprite.js b/src/hooks/forge/useForgeSprite.js
index 6a6678c..f992e70 100644
--- a/src/hooks/forge/useForgeSprite.js
+++ b/src/hooks/forge/useForgeSprite.js
@@ -35,7 +35,7 @@ export default function useForgeSprite() {
     console.log("onSpriteClicked", event.target);
     console.log("onSpriteClicked", data);
     // modalContent.value = data;
-    debugger;
+    // debugger;
     if (data) {
       getCurrentInfoModalData(
         event,
diff --git a/src/views/AssetManagement/components/AssetTable.vue b/src/views/AssetManagement/components/AssetTable.vue
index 7709b6e..4944c82 100644
--- a/src/views/AssetManagement/components/AssetTable.vue
+++ b/src/views/AssetManagement/components/AssetTable.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { getAssetList, getAssetSingle, deleteAssetItem } from "@/apis/asset";
-import { onMounted, ref, watch, inject, computed } from "vue";
+import { onMounted, ref, watch, inject, provide, computed } from "vue";
 import useSearchParam from "@/hooks/useSearchParam";
 import AssetTableAddModal from "./AssetTableAddModal.vue";
 import { getOperationCompanyList } from "@/apis/operation";
@@ -20,6 +20,7 @@ const getCompany = async () => {
 };
 
 const floors = ref([]);
+const totalCoordinates = ref({});
 const getFloors = async () => {
   const res = await getAssetFloorList();
   floors.value = res.data[0]?.floors.map((d) => ({ ...d, key: d.floor_guid }));
@@ -27,8 +28,18 @@ const getFloors = async () => {
 
 const tableData = ref([]);
 const getAssetData = async () => {
+  totalCoordinates.value = {}; // 在獲取新數據之前清空 totalCoordinates
   const res = await getAssetList(searchParams.value?.subSys_id);
   if (res.isSuccess) {
+    // 將 device_coordinate 推入對應樓層的座標陣列
+    res.data.forEach(d => {
+      const floorGuid = d.floor_guid;
+      if (!totalCoordinates.value[floorGuid]) {
+        totalCoordinates.value[floorGuid] = [];
+      }
+      totalCoordinates.value[floorGuid].push(d.device_coordinate);
+    });
+
     tableData.value = res.data.map((d) => ({
       ...d,
       key: d.id,
@@ -90,10 +101,10 @@ const columns = computed(() => [
     key: "buying_date",
     sort: true,
   },
-  {
-    title: t("assetManagement.oriFile"),
-    key: "oriFile",
-  },
+  // {
+  //   title: t("assetManagement.oriFile"),
+  //   key: "oriFile",
+  // },
   {
     title: t("assetManagement.created_at"),
     key: "created_at",
@@ -158,6 +169,10 @@ const remove = async (id) => {
     getAssetData();
   }
 };
+
+provide("asset_table_data", {
+  totalCoordinates,
+});
 </script>
 
 <template>
diff --git a/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue b/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
index db3d70c..90cacd2 100644
--- a/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
+++ b/src/views/AssetManagement/components/AssetTableModalLeftInfoGraph.vue
@@ -4,6 +4,7 @@ import { ref, computed, inject, watch, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import Menu from "@/components/customUI/Menu.vue";
 const { t } = useI18n();
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 const { formState } = inject("asset_table_modal_form");
 const columns = computed(() => [
   {
@@ -62,12 +63,12 @@ const openModal = () => {
 };
 
 const onOk = () => {
-  console.log("selectedId", selectedId.value);
-  formState.value.graph = selectedId.value;
+  formState.value.graph_tree_id = selectedId.value;
   onCancel();
 };
 
 const onCancel = () => {
+  selectedId.value = null;
   asset_add_graph_item.close();
 };
 
@@ -76,9 +77,28 @@ const menuCheck = (id) => {
 };
 
 watch(selectedId, (newId) => {
-  getData(newId);
+  if (newId) {
+    getData(newId);
+  } else {
+    getData(formState.value.graph_tree_id);
+  }
 });
 
+watch(
+  formState,
+  (newValue) => {
+    if (newValue?.graph_tree_id) {
+      selectedId.value = newValue?.graph_tree_id;
+    } else {
+      selectedId.value = null;
+      dataSource.value = [];
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
 onMounted(async () => {
   await getMenuData();
   menuData.value = buildMenuTree(graphData.value);
@@ -88,22 +108,29 @@ onMounted(async () => {
 <template>
   <div class="flex flex-col mt-8 col-span-2">
     <div class="flex justify-between items-center">
-      <span class="label-text-alt text-lg"> 圖片 </span>
+      <span class="label-text-alt text-lg">{{
+        $t("graphManagement.title")
+      }}</span>
       <button
         type="button"
         class="btn btn-sm btn-success"
         @click.stop.prevent="openModal"
       >
-        圖資管理
+        {{ $t("assetManagement.choose") }}
       </button>
     </div>
-    <Table
-      :columns="columns"
-      :dataSource="dataSource"
-      :withStyle="false"
-    >
+    <Table :columns="columns" :dataSource="dataSource" :withStyle="false">
       <template #bodyCell="{ record, column, index }">
         <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+        <template v-else-if="column.key === 'oriOrgName'">
+          <a
+            :href="`${FILE_BASEURL}/upload/graph_manage/${record.oriSavName}`"
+            target="_blank"
+            class="btn-link no-underline hover:no-underline :focus:outline-0"
+          >
+            {{ record.oriOrgName }}
+          </a>
+        </template>
       </template>
     </Table>
   </div>
diff --git a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
index f29cf51..e706090 100644
--- a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
@@ -7,16 +7,18 @@ import {
   deleteAssetFloor,
 } from "@/apis/asset";
 import useFormErrorMessage from "@/hooks/useFormErrorMessage";
+import useBuildingStore from "@/stores/useBuildingStore";
 import * as yup from "yup";
 import { twMerge } from "tailwind-merge";
 import { useI18n } from "vue-i18n";
+
 const { t } = useI18n();
 const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
-
+const { totalCoordinates } = inject("asset_table_data");
 const { updateRightFields, formErrorMsg, formState } = inject(
   "asset_table_modal_form"
 );
-
+const store = useBuildingStore();
 let schema = {
   floor_guid: yup.string().nullable(true),
   device_coordinate: yup.string().nullable(true),
@@ -33,41 +35,54 @@ const asset_floor_chart = ref(null);
 const currentFloor = ref(null);
 const selectedOption = ref("add");
 
-const defaultOption = (map, data = []) => ({
-  tooltip: {},
-  geo: {
-    tooltip: {
-      show: false,
+const defaultOption = (map, data = []) => {
+  // 生成坐標數據，根據坐標值的不同設置不同顏色
+  const formattedData = data.map((coordinate) => {
+    const coordString = JSON.stringify(coordinate); 
+    return {
+      name: coordString, 
+      value: coordinate,
+      itemStyle: {
+        color: coordString === formState.value.device_coordinate ? "#0000FF" : "#b02a02", 
+      },
+    };
+  });
+
+  return {
+    tooltip: {},
+    geo: {
+      tooltip: {
+        show: false,
+      },
+      map,
+      roam: true,
     },
-    map,
-    roam: true, // 一定要关闭拖拽
-  },
-  series: {
-    type: "effectScatter",
-    coordinateSystem: "geo",
-    geoIndex: 0,
-    symbolSize: 10,
-    itemStyle: {
-      color: "#b02a02",
+    series: {
+      type: "effectScatter",
+      coordinateSystem: "geo",
+      geoIndex: 0,
+      symbolSize: 10,
+      encode: {
+        tooltip: 2,
+      },
+      data: formattedData, // 使用格式化的數據
     },
-    encode: {
-      tooltip: 2,
-    },
-    data,
-  },
-});
+  };
+};
+
 watch(currentFloor, (newValue) => {
   if (newValue?.floor_map_name) {
+    const coordinates = totalCoordinates.value[newValue.floor_guid] || [];
+    const parsedCoordinates = coordinates.map((coord) => {
+      return JSON.parse(coord);
+    });
+
     asset_floor_chart.value.updateSvg(
       {
         full_name: newValue?.floor_map_name,
         path: `${FILE_BASEURL}/${newValue?.floor_map_url}.svg`,
       },
-      defaultOption(newValue?.floor_map_name, [
-        formState.value.device_coordinate
-          ? JSON.parse(formState.value.device_coordinate)
-          : [],
-      ])
+      defaultOption(newValue?.floor_map_name, parsedCoordinates)
     );
   }
 });
@@ -107,7 +122,6 @@ onMounted(() => {
 const openModal = () => {
   if (selectedOption.value === "add") {
     FloorFormState.value = {
-      building_tag: "F3",
       full_name: "",
       floorFile: [],
     };
@@ -118,7 +132,6 @@ const openModal = () => {
     if (floor) {
       console.log("floor", floor);
       FloorFormState.value = {
-        building_tag: "F3",
         full_name: floor.full_name,
         floorFile: [],
       };
@@ -129,19 +142,17 @@ const openModal = () => {
 
 const form = ref(null);
 const FloorFormState = ref({
-  building_tag: "F3",
   full_name: "",
   floorFile: [],
 });
 
 const floorScheme = yup.object({
-  building_tag: yup.string().required(t("button.required")),
   full_name: yup.string().required(t("button.required")),
   floorFile: yup.array(),
 });
 
 const updateFileList = (files) => {
-  console.log("file",files)
+  console.log("file", files);
   FloorFormState.value.floorFile = files;
 };
 
@@ -153,9 +164,9 @@ const {
 } = useFormErrorMessage(floorScheme);
 const onOk = async () => {
   const value = handleSubmit(floorScheme, FloorFormState.value);
-
   const formData = new FormData(form.value);
-  formData.append("floor_guid", "");
+  formData.append("floor_guid", currentFloor.value.floor_guid);
+  formData.append("building_tag", store.selectedBuilding.building_tag);
   formData.append("initMapName", FloorFormState.value.floorFile[0].name);
   formData.append("mapFile", FloorFormState.value.floorFile[0]);
   formData.delete("floorFile");
@@ -171,23 +182,22 @@ const onOk = async () => {
 };
 const onDelete = async () => {
   console.log("guild", formState.value.floor_guid);
-  // const res = await deleteAssetFloor({
-  //   floor_guid: formState.value.floor_guid,
-  // });
-  // if (res.isSuccess) {
-  //   getFloors(); // 更新樓層列表
-  //   formState.value.floor_guid = ""; // 重置選取
-  // }
+  const res = await deleteAssetFloor({
+    floor_guid: formState.value.floor_guid,
+  });
+  if (res.isSuccess) {
+    getFloors();
+  }
 };
 
 const onCancel = () => {
   FloorFormState.value = {
-    building_tag: "F3",
     full_name: "",
     floorFile: [],
   };
   asset_add_floor.close();
 };
+
 </script>
 
 <template>
diff --git a/src/views/system/System.vue b/src/views/system/System.vue
index ef6779d..18180d8 100644
--- a/src/views/system/System.vue
+++ b/src/views/system/System.vue
@@ -5,12 +5,15 @@ import SystemFloorBar from './components/SystemFloorBar.vue';
 import useBuildingStore from "@/stores/useBuildingStore";
 import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
 import { getSystemDevices, getSystemRealTime } from "@/apis/system";
+import { getOperationCompanyList } from "@/apis/operation";
+import { getAssetSingle, getAssetFloorList } from "@/apis/asset";
 import SystemSubBar from './components/SystemSubBar.vue';
 import SystemInfoModal from './components/SystemInfoModal.vue';
 import SystemMain from "./SystemMain.vue";
 import SystemMode from './components/SystemMode.vue';
 import SystemFloor from './SystemFloor.vue';
 import { twMerge } from 'tailwind-merge';
+import dayjs from "dayjs";
 
 const buildingStore = useBuildingStore()
 
@@ -30,9 +33,21 @@ const statusList = computed(() => {
   return null
 })
 
-const raw_data = ref([])
-const data = ref([]) // filter data
-const route = useRoute()
+const raw_data = ref([]);
+const data = ref([]); // filter data
+const route = useRoute();
+const floors = ref([]);
+const companyOptions = ref([]);
+
+const getFloors = async () => {
+  const res = await getAssetFloorList();
+  floors.value = res.data[0]?.floors.map((d) => ({ ...d, key: d.floor_guid }));
+};
+
+const getCompany = async () => {
+  const res = await getOperationCompanyList();
+  companyOptions.value = res.data.map((d) => ({ ...d, key: d.id }));
+};
 
 const getData = async () => {
   if (!route.params.sub_system_id) return
@@ -91,7 +106,7 @@ const updateDataByGas = (gas) => {
   } else {
     update_values = raw_data.value.map((d) => (
       {
-        ...d,
+      ...d,
         device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
       }
     ))
@@ -101,23 +116,24 @@ const updateDataByGas = (gas) => {
 }
 
 watch(() => buildingStore.selectedBuilding, (newBuilding) => {
-  if (Boolean(newBuilding)) {
+    if (Boolean(newBuilding)) {
     getData()
-  }
+    }
 }, {
-  deep: true,
+    deep: true,
 })
 
 watch(() => route.params.sub_system_id, (newRoute, oldRoute) => {
-  if (buildingStore.selectedBuilding && newRoute !== oldRoute) {
+    if (buildingStore.selectedBuilding && newRoute !== oldRoute) {
     getData()
   }
 })
 
 onMounted(() => {
-  getData()
-
-})
+  getFloors();
+  getCompany();
+  getData();
+});
 
 const currentFloor = ref(null);
 
@@ -143,6 +159,7 @@ watch(subscribeData, (newValue) => {
 provide("system_deviceList", { data, subscribeData, currentFloor, updateCurrentFloor, updateDataByGas, realtimeData })
 
 const selectedDevice = ref(null);
+const selectedDeviceCog = ref({});
 // const selectedDevice = computed(() => {
 //   return {
 //     ...currentInfo.value,
@@ -153,7 +170,29 @@ const selectedDevice = ref(null);
 const isMobile = (e) => {
   return e.pointerType !== "mouse" && e.type !== "click"; // is mobile
 };
-const getCurrentInfoModalData = (e, position, value) => {
+
+const getCurrentInfoModalData = async (e, position, value) => {
+  if (value.main_id) {
+    const res = await getAssetSingle(value.main_id);
+    if (res.isSuccess) {
+      selectedDeviceCog.value = {
+        ...res.data,
+        key: res.data.id,
+        floor: floors.value.find(
+          ({ floor_guid }) => res.data.floor_guid === floor_guid
+        )?.full_name,
+        company: companyOptions.value.find(
+          ({ id }) => res.data.operation_id === id
+        )?.name,
+        buying_date: res.data?.buying_date
+          ? dayjs(res.data.buying_date).format("YYYY-MM-DD")
+          : "",
+        created_at: res.data?.created_at
+          ? dayjs(res.data.created_at).format("YYYY-MM-DD")
+          : "",
+      };
+    }
+  }
   const mobile = isMobile(e);
   selectedDevice.value = {
     initPos: mobile
@@ -161,7 +200,7 @@ const getCurrentInfoModalData = (e, position, value) => {
       : { left: `${position.left}px`, top: `${position.top}px` },
     value,
     isMobile: mobile,
-  };;
+  };
   document.getElementById('system_info_modal').showModal();
 };
 
@@ -172,7 +211,7 @@ const clearSelectedDeviceInfo = () => {
   selectedDevice.value.value = null;
 }
 
-provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo })
+provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCurrentInfoModalData, clearSelectedDeviceInfo, selectedDeviceCog, })
 
 </script>
 
diff --git a/src/views/system/components/SystemInfoModalCog.vue b/src/views/system/components/SystemInfoModalCog.vue
index 5c77168..49ae667 100644
--- a/src/views/system/components/SystemInfoModalCog.vue
+++ b/src/views/system/components/SystemInfoModalCog.vue
@@ -1,5 +1,71 @@
-<script setup></script>
+<script setup>
+import { computed, inject, watch, ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const { selectedDeviceCog } = inject("system_selectedDevice");
+const tableData = ref({});
 
-<template>Cog</template>
+watch(
+  selectedDeviceCog,
+  (newValue) => {
+    if (newValue) {
+      tableData.value = newValue;
+    } else {
+      tableData.value = {};
+    }
+  },
+  { immediate: true }
+);
+</script>
 
-<style lang="scss" scoped></style>
+<template>
+  <table class="table">
+    <tbody>
+      <tr>
+        <td>{{ $t("assetManagement.device_number") }}</td>
+        <td>{{ tableData.device_number }}</td>
+      </tr>
+      <tr>
+        <td>{{ $t("assetManagement.device_name") }}</td>
+        <td>{{ tableData.full_name }}</td>
+      </tr>
+      <tr>
+        <td>{{ $t("assetManagement.floor") }}</td>
+        <td>{{ tableData.floor }}</td>
+      </tr>
+      <tr>
+        <td>{{ $t("assetManagement.device_coordinate") }}</td>
+        <td>{{ tableData.device_coordinate }}</td>
+      </tr>
+      <tr>
+        <td>{{ $t("assetManagement.brand_and_modal") }}</td>
+        <td>{{ tableData.brand }} / {{ tableData.device_model }}</td>
+      </tr>
+      <tr>
+        <td>{{ t("assetManagement.company_and_contact") }}</td>
+        <td>
+          {{ tableData.company?.name }} /
+          {{ tableData.company?.contact_person }}
+        </td>
+      </tr>
+      <tr>
+        <td>{{ t("assetManagement.buying_date") }}</td>
+        <td>{{ tableData.buying_date }}</td>
+      </tr>
+      <tr>
+        <td>{{ t("assetManagement.created_at") }}</td>
+        <td>{{ tableData.created_at }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss" scoped>
+td {
+  border: 1px solid #ddd
+}
+
+td:first-child {
+  font-weight: bold; 
+}
+</style>
diff --git a/src/views/system/components/SystemInfoModalImage.vue b/src/views/system/components/SystemInfoModalImage.vue
index cf96bb1..03c077a 100644
--- a/src/views/system/components/SystemInfoModalImage.vue
+++ b/src/views/system/components/SystemInfoModalImage.vue
@@ -1,4 +1,23 @@
-<script setup></script>
+<script setup>
+import { computed, inject, watch, ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
+const { selectedDeviceCog } = inject("system_selectedDevice");
+const imgData = ref([]);
+
+watch(
+  selectedDeviceCog,
+  (newValue) => {
+    if (newValue) {
+      imgData.value = newValue.oriFile.map(file => file.file_url);
+    } else {
+      imgData.value = [];
+    }
+  },
+  { immediate: true }
+);
+</script>
 
 <template>
   <a-carousel arrows class="mt-5 shadow-lg">
@@ -20,10 +39,9 @@
         />
       </div>
     </template>
-    <div><img src="https://picsum.photos/id/122/300/300" /></div>
-    <div><img src="https://picsum.photos/id/127/300/300" /></div>
-    <div><img src="https://picsum.photos/id/124/300/300" /></div>
-    <div><img src="https://picsum.photos/id/125/300/300" /></div>
+    <div v-for="(url, index) in imgData" :key="index">
+      <img :src="`${FILE_BASEURL}/${url}`" alt="Image" />
+    </div>
   </a-carousel>
 </template>