CviLux_fe/src/components/forge/ForgeModalContent.vue

<script setup>
import { defineProps, inject, ref, watch } from "vue";

const props = defineProps({
  openkey: String,
});

const modalContent = inject("modalContent");

const leafColumns = [
  {
    title: "冷媒 / 製冷劑原始填充量(Kg)",
    dataIndex: "oriAmount",
    key: "oriAmount",
  },
  { title: "使用年度", dataIndex: "usedMonth", key: "usedMonth" },
  { title: "kgCO2e", dataIndex: "kgCO2e", key: "kgCO2e" },
  { title: "處理人員", dataIndex: "operator", key: "operator" },
  { title: "記錄時間", dataIndex: "time", key: "time" },
];

const leafSource = [
  {
    key: "1",
    oriAmount: 100,
    usedMonth: "一月",
    kgCO2e: 150,
    operator: "John",
    time: "2023-01-01",
  },
  {
    key: "2",
    oriAmount: 200,
    usedMonth: "二月",
    kgCO2e: 320,
    operator: "Mike",
    time: "2023-02-01",
  },
];

const warningColumns = [
  {
    title: "異常ID",
    dataIndex: "errorCode",
    key: "errorCode",
  },
  {
    title: "異常原因",
    dataIndex: "errorMsg",
    key: "errorMsg",
  },
  {
    title: "ACK 確認",
    dataIndex: "ack",
    key: "ack",
  },
  {
    title: "發生/ 復歸時間",
    dataIndex: "ackTime",
    key: "ackTime",
  },
];

const warningSource = [
  {
    key: "1",
    errorCode: "7db7187f",
    errorMsg: "異常",
    ack: "未確認",
    ackTime: "2023/12/26 23:39:44",
  },
  {
    key: "2",
    errorCode: "943d4f1e",
    errorMsg: "異常",
    ack: "未確認",
    ackTime: "2023/12/26 23:39:44",
  },
];

const operationColumns = [
  {
    title: "類型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "項目",
    dataIndex: "item",
    key: "item",
  },
  {
    title: "處理人員",
    dataIndex: "operator",
    key: "operator",
  },
  {
    title: "發生/ 完成時間",
    dataIndex: "occurTime",
    key: "occurTime",
  },
];

const operationSource = [
  {
    key: "1",
    type: "保養",
    item: "ke_test_保養紀錄",
    operator: "webUser",
    occurTime: "2023/07/31 11:42:25",
  },
  {
    key: "2",
    type: "維修",
    item: "空調01",
    operator: "郭純胤",
    occurTime: "2022/11/17 10:48:12",
  },
];

const allCol = {
  leaf: leafColumns,
  triangle: warningColumns,
  bars: operationColumns,
};

const allSource = {
  leaf: leafSource,
  triangle: warningSource,
  bars: operationSource,
};

const columns = ref(allCol.leaf);
const dataSource = ref(allSource.leaf);

watch(
  () => props.openkey,
  (newVal) => {
    if (allCol[newVal]) {
      columns.value = allCol[newVal];
      dataSource.value = allSource[newVal];
    }
  }
);
</script>

<template>
  <!--  碳排放 -->
  <template v-if="openkey === 'desktop'">
    <div>
      <iframe
        :src="
          '/ord?station:%7Cslot:/' +
          modalContent?.device_number.replace(/_/g, '/') +
          '|view:?fullScreen=true'
        "
        style="width: 100%; height: 100%"
      ></iframe>
    </div>
  </template>
  <template v-else-if="openkey === 'cog'">
    <table class="border-collapse border border-slate-500">
      <tbody>
        <tr>
          <td class="border border-slate-600 px-3 py-3">設備編號</td>
          <td class="border border-slate-600 px-3 py-3">
            {{ modalContent?.device_number }}
          </td>
        </tr>
        <tr>
          <td class="border border-slate-600 px-3 py-3">設備名稱</td>
          <td class="border border-slate-600 px-3 py-3">
            {{ modalContent?.full_name }}
          </td>
        </tr>
      </tbody>
    </table>
  </template>
  <template v-else>
    <template v-if="openkey === 'leaf'">
      <div class="flex flex-wrap flex-row items-center justify-between">
        <p>排放量輸入</p>
        <a-button
          type="link"
          class="btn-info text-white btn btn-sm"
        ><font-awesome-icon :icon="['fas', 'plus']" size="1x" class="text-white me-1"/>Add
        </a-button>
      </div>
      <div class="flex flex-wrap flex-row items-center">
        <p><span class="opacity-50">冷媒:</span> R-22</p>
        <p><span class="opacity-50">設備逸散率:</span> 0.16</p>
        <p><span class="opacity-50">GWP:</span> 1530</p>
      </div>

    </template>
    <div class="content-box forge-modal-table">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :bordered="false"
      
      >
      </a-table>
    </div>
  </template>
</template>

<style lang="css">
/**資料框**/
.content-box.forge-modal-table {
  border: none;
  background-color: transparent;
}

.content-box.forge-modal-table .ant-table {
  border: 1px solid #fff !important;
  border-radius: 0;
}
.content-box.forge-modal-table::before,
.content-box.forge-modal-table::after {
  background-image: none !important;
}
</style>