Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

zhangwencui

2 天以前 f3363b799cafad9fa664bbd54c3429797c8b23c5

Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New

 src/assets/BI/jiantou.png

 src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue

@@ -6,6 +6,7 @@
    :tableLoading="loading"
        :summaryMethod="summarizeChildrenTable"
        :isShowSummary="true"
    :isShowPagination="false"
    height="auto"
  >
  </PIMTable>
@@ -111,6 +112,9 @@
const getList = async (id) => {
  await nextTick();
  filters.salesLedgerId = id;
  // è®¾ç½®ä¸€ä¸ªå¾ˆå¤§çš„ pageSize ä»¥èŽ·å–所有数据
  pagination.pageSize = 10000;
  pagination.currentPage = 1;
  getTableData();
};
// å­è¡¨åˆè®¡æ–¹æ³•

 src/views/procurementManagement/invoiceEntry/components/Modal.vue

@@ -96,22 +96,6 @@
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上传附件">
                        <FileUpload
                            :showTip="false"
                            accept="*"
                            :autoUpload="true"
                            :action="action"
                            :headers="{
                Authorization: 'Bearer ' + getToken(),
              }"
                            :limit="10"
                            @success="uploadSuccess"
                            @remove="removeFile"
                        />
                    </el-form-item>
                </el-col>
            
            </el-row>
            <el-form-item label="产品信息："> </el-form-item>
@@ -149,7 +133,7 @@
                />
                <el-table-column label="本次开票数" prop="ticketsNum" width="180">
                    <template #default="scope">
                        <el-input-number :step="0.1" :min="0" style="width: 100%"
                        <el-input-number :step="0.1" :min="0" :max="scope.row.tempFutureTickets || 0" style="width: 100%"
                                                         :precision="2"
                                                         v-model="scope.row.ticketsNum"
                                                         @change="invoiceNumBlur(scope.row)"
@@ -205,14 +189,12 @@
import { defineEmits } from 'vue';
import { useModal } from "@/hooks/useModal";
import useFormData from "@/hooks/useFormData";
import FileUpload from "@/components/Upload/FileUpload.vue";
import {
    getPurchaseNoById,
    getInfo,
    addOrUpdateRegistration,
} from "@/api/procurementManagement/invoiceEntry.js";
import { getPurchaseById } from "@/api/procurementManagement/procurementLedger.js";
import { getToken } from "@/utils/auth";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";

@@ -221,7 +203,6 @@
});

const userStore = useUserStore();
const action = import.meta.env.VITE_APP_BASE_API + "/file/upload";
const formRef = ref();
const { proxy } = getCurrentInstance();
const { form } = useFormData({
@@ -237,7 +218,6 @@
    salesContractNoId: undefined, // å¼€ç¥¨æ—¥æœŸ
    enterDate: dayjs().format("YYYY-MM-DD"),
    productData: [], // è¡¨æ ¼
    tempFileIds: [], // æ–‡ä»¶
});

const selectedContracts = ref([]); // å­˜å‚¨é€‰ä¸­çš„合同数据
@@ -398,10 +378,11 @@
                    result.data.productData.forEach(item => {
                        allProductData.push({
                            ...item,
                            id: contractId, // æ˜Žç¡®è®¾ç½®åˆåŒID
                            purchaseLedgerId: contractId, // æ·»åŠ åˆåŒID用于筛选
                            purchaseLedgerNo: contract.purchaseContractNumber, // æ·»åŠ é‡‡è´­åˆåŒå·
                            supplierName: contract.supplierName, // æ·»åŠ ä¾›åº”商名称
                            projectName: contract.projectName // æ·»åŠ é¡¹ç›®åç§°
                            // ä¿ç•™äº§å“æœ¬èº«çš„id，不覆盖
                        });
                    });
                }
@@ -421,23 +402,29 @@
            
            // è®¾ç½®äº§å“æ•°æ®ï¼Œå¹¶åˆå§‹åŒ–开票数量和金额
            allProductData.forEach(item => {
                // æœ¬æ¬¡å¼€ç¥¨æ•°é»˜è®¤ä¸ºæ€»æ•°é‡
                item.ticketsNum = Number(item.quantity || 0);
                // æœ¬æ¬¡å¼€ç¥¨é‡‘额默认为含税总价
                item.ticketsAmount = Number(item.taxInclusiveTotalPrice || 0);
                // ä¿å­˜åŽŸå§‹æœªæ¥ç¥¨æ•°å’Œé‡‘额（用于计算）
                item.tempFutureTickets = Number(item.quantity || 0);
                item.tempFutureTicketsAmount = Number(item.taxInclusiveTotalPrice || 0);
                // æœªæ¥ç¥¨æ•°å’Œé‡‘额初始为0（因为全部开票）
                item.futureTickets = 0;
                item.futureTicketsAmount = 0;
                // ä¿å­˜â€œåŽŸå§‹æœªæ¥ç¥¨æ•°/金额”（用于校验与计算）
                // ä¼˜å…ˆä½¿ç”¨åŽç«¯è¿”回的 futureTickets/futureTicketsAmount；没有则回退到 quantity/taxInclusiveTotalPrice
                item.tempFutureTickets = Number(
                    item.futureTickets !== undefined ? item.futureTickets : (item.quantity || 0)
                );
                item.tempFutureTicketsAmount = Number(
                    item.futureTicketsAmount !== undefined ? item.futureTicketsAmount : (item.taxInclusiveTotalPrice || 0)
                );

                // æ–°å¢žæ—¶ï¼šæœ¬æ¬¡å¼€ç¥¨é»˜è®¤ä¸å¡«ï¼ˆ0），避免一打开就把“未来票数”扣成 0
                item.ticketsNum = 0;
                item.ticketsAmount = 0;

                // é¡µé¢å±•ç¤ºçš„“未来票数/未来票金额”默认展示原始未来值
                item.futureTickets = item.tempFutureTickets;
                item.futureTicketsAmount = item.tempFutureTicketsAmount;
            });
            
            form.productData = allProductData;
            
            // è®¡ç®—发票金额：所有产品的含税总价之和
            // è®¡ç®—发票金额：所有产品的本次开票金额之和（新增默认 0）
            const totalAmount = allProductData.reduce((sum, item) => {
                return sum + (Number(item.taxInclusiveTotalPrice) || 0);
                return sum + (Number(item.ticketsAmount) || 0);
            }, 0);
            form.invoiceAmount = totalAmount.toFixed(2);
            
@@ -476,9 +463,8 @@
        row.ticketsNum = 0;
    }
    if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
        proxy.$modal.msgWarning("本次开票数不得大于未开票数");
        row.ticketsNum = 0;
        return;
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
    }
    // è®¡ç®—本次来票金额
    row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
@@ -497,12 +483,19 @@
    // è®¡ç®—是否超过来票总金额
    if (row.ticketsAmount > row.tempFutureTicketsAmount) {
        proxy.$modal.msgWarning("本次来票金额不得大于未来票金额");
        row.ticketsAmount = 0;
        row.ticketsAmount = Number(row.tempFutureTicketsAmount || 0);
    }
    // è®¡ç®—本次来票数
    row.ticketsNum = Number(
        (row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2)
    );
    // æ£€æŸ¥æœ¬æ¬¡å¼€ç¥¨æ•°æ˜¯å¦å¤§äºŽæœªæ¥ç¥¨æ•°
    if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
        // é‡æ–°è®¡ç®—本次来票金额
        row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2);
    }
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    // è®¡ç®—未来票金额
@@ -539,15 +532,6 @@
    await getTableData(type, selectedRows);
};

const uploadSuccess = (response) => {
    form.tempFileIds.push(response.data.tempId);
    console.log(form);
};

const removeFile = (file) => {
    const { tempId } = file.response.data;
    form.tempFileIds = form.tempFileIds.filter((item) => item !== tempId);
};

const closeAndRefresh = () => {
    closeModal();
@@ -563,22 +547,21 @@
                const batchData = selectedContracts.value.map(contract => {
                    // ç­›é€‰å‡ºå±žäºŽå½“前合同的产品数据
                    const contractProductData = form.productData.filter(item =>
                        item.id === contract.id
                        item.purchaseLedgerId === contract.id
                    );
                    
                    // ä¸ºæ¯ä¸ªé‡‡è´­åˆåŒåˆ›å»ºç‹¬ç«‹çš„对象
                    return {
                        // åŸºç¡€è¡¨å•æ•°æ®
                        invoiceNumber: form.invoiceNumber,
                        invoiceAmount: form.invoiceAmount,
                        entryDate: form.entryDate,
                        enterDate: form.enterDate,
                        issUerId: form.issUerId, // å½•å…¥äººid
                        issUer: form.issUer, // å½•å…¥äºº
                        tempFileIds: form.tempFileIds,
						
                        // åˆåŒå®žé™…信息
                        purchaseLedgerId: contract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                    // åŸºç¡€è¡¨å•æ•°æ®
                    invoiceNumber: form.invoiceNumber,
                    invoiceAmount: form.invoiceAmount,
                    entryDate: form.entryDate,
                    enterDate: form.enterDate,
                    issUerId: form.issUerId, // å½•å…¥äººid
                    issUer: form.issUer, // å½•å…¥äºº
					
                    // åˆåŒå®žé™…信息
                    purchaseLedgerId: contract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                        purchaseContractNumber: contract.purchaseContractNumber, // ä½¿ç”¨å®žé™…的采购合同号
                        salesContractNo: contract.salesContractNo, // ä½¿ç”¨å®žé™…的销售合同号
                        supplierName: contract.supplierName, // ä½¿ç”¨å®žé™…的供应商名称
@@ -609,17 +592,16 @@
                    // å•ä¸ªåˆåŒæäº¤é€»è¾‘ - ä»¥æ•°ç»„格式传递
                    const singleContract = selectedContracts.value[0];
                    const singleFormArray = [{
                        // åŸºç¡€è¡¨å•æ•°æ®
                        invoiceNumber: form.invoiceNumber,
                        invoiceAmount: form.invoiceAmount,
                        entryDate: form.entryDate,
                        enterDate: form.enterDate,
                        issUerId: form.issUerId, // å½•å…¥äººid
                        issUer: form.issUer, // å½•å…¥äºº
                        tempFileIds: form.tempFileIds,
						
                        // åˆåŒå®žé™…信息
                        purchaseLedgerId: singleContract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                    // åŸºç¡€è¡¨å•æ•°æ®
                    invoiceNumber: form.invoiceNumber,
                    invoiceAmount: form.invoiceAmount,
                    entryDate: form.entryDate,
                    enterDate: form.enterDate,
                    issUerId: form.issUerId, // å½•å…¥äººid
                    issUer: form.issUer, // å½•å…¥äºº
					
                    // åˆåŒå®žé™…信息
                    purchaseLedgerId: singleContract.id, // ä½¿ç”¨id作为字段名，值为purchaseLedgerId
                        purchaseContractNumber: singleContract.purchaseContractNumber, // ä½¿ç”¨å®žé™…的采购合同号
                        salesContractNo: singleContract.salesContractNo, // ä½¿ç”¨å®žé™…的销售合同号
                        supplierName: singleContract.supplierName, // ä½¿ç”¨å®žé™…的供应商名称

 src/views/procurementManagement/invoiceEntry/index.vue

@@ -68,9 +68,8 @@
        </template>
        <template #operation="{ row }">
          <el-button
            text
            link
            type="primary"
            size="small"
            @click="handleEdit('edit', row.id)"
          >
            ç¼–辑
@@ -168,14 +167,14 @@
        return val ? parseFloat(val).toFixed(2) : 0;
      },
    },
    // {
    //   fixed: "right",
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    //   width: "200px",
    // },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: 100,
    },
  ]
);


 src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue

@@ -2,7 +2,61 @@
  <el-dialog :title="modalOptions.title"
             v-model="visible"
             @close="close">
    <EditForm ref="editFormRef" />
    <el-form :model="form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="采购合同号：">
            <el-tag size="large">{{ form.purchaseContractNumber }}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售合同号：">
            <el-text>{{ form.salesContractNo }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="含税单价(元)：">
            <el-text type="primary">{{ form.taxInclusiveUnitPrice }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            <el-text>{{ form.createdAt }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票号：">
            <el-input disabled
                      v-model="form.invoiceNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="来票数：">
            <el-input-number :step="0.1"
                             :min="0"
                             style="width: 100%"
                             v-model="form.ticketsNum"
                             @change="inputTicketsNum"
                             :precision="2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本次来票金额(元)：">
            <el-input-number :step="0.1"
                             :min="0"
                             style="width: 100%"
                             v-model="form.ticketsAmount"
                             @change="inputTicketsAmount"
                             :precision="2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="未来票数：">
            <el-text type="success">{{ form.futureTickets }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary"
                 :loading="loading"
@@ -15,52 +69,131 @@
</template>

<script setup>
  import { useModal } from "@/hooks/useModal";
  import EditForm from "../Form/EditForm.vue";
  import { updateRegistration } from "@/api/procurementManagement/procurementInvoiceLedger";
  import { ElMessage } from "element-plus";
import { useModal } from "@/hooks/useModal";
import useFormData from "@/hooks/useFormData";
import { updateRegistration, getProductRecordById } from "@/api/procurementManagement/procurementInvoiceLedger";
import { ElMessage } from "element-plus";
import { getCurrentInstance, ref, nextTick } from "vue";

  defineOptions({
    name: "来票台账编辑",
defineOptions({
  name: "来票台账编辑",
});
const emits = defineEmits(["success"]);

const saleLedgerProjectId = ref("");
const temFutureTickets = ref(0);
const { proxy } = getCurrentInstance();

const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "来票台账" });

const { form, resetForm } = useFormData({
  id: undefined,
  purchaseContractNumber: undefined, // é‡‡è´­åˆåŒå·
  salesContractNo: undefined, // é”€å”®åˆåŒå·
  createdAt: undefined, // åˆ›å»ºæ—¶é—´
  invoiceNumber: undefined, // å‘票号
  ticketsNum: undefined, // æ¥ç¥¨æ•°
  ticketsAmount: undefined, // æ¥ç¥¨é‡‘额
  taxInclusiveUnitPrice: undefined, // å«ç¨Žå•ä»·
  futureTickets: undefined, // æœªæ¥ç¥¨æ•°
});

const load = async (id, purchaseLedgerId, productModelId) => {
  const { code, data } = await getProductRecordById({
    id: id,
    purchaseLedgerId: purchaseLedgerId,
    productModelId: productModelId,
  });
  const emits = defineEmits(["success"]);
  if (code === 200) {
    form.id = data.id;
    form.purchaseContractNumber = data.purchaseContractNumber;
    form.salesContractNo = data.salesContractNo;
    form.createdAt = data.createdAt;
    form.invoiceNumber = data.invoiceNumber;
    form.ticketsNum = data.ticketsNum;
    form.ticketsAmount = data.ticketsAmount.toFixed(2);
    form.taxInclusiveUnitPrice = data.taxInclusiveUnitPrice;
    form.futureTickets = data.futureTickets;
    temFutureTickets.value = data.futureTickets;
  }
};

  const saleLedgerProjectId = ref("");
  const editFormRef = ref();
  const {
    id,
    visible,
    loading,
    openModal,
    modalOptions,
    handleConfirm,
    closeModal,
  } = useModal({ title: "来票台账" });
const inputTicketsNum = val => {
  // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
  if (!form.taxInclusiveUnitPrice || Number(form.taxInclusiveUnitPrice) === 0) {
    proxy.$modal.msgWarning("含税单价不能为零或未定义");
    return;
  }
  if (Number(form.ticketsNum) > Number(temFutureTickets.value)) {
    proxy.$modal.msgWarning("开票数不得大于未开票数");
    form.ticketsNum = temFutureTickets.value;
  }

  const open = async row => {
    openModal(row.id);
    saleLedgerProjectId.value = row.saleLedgerProjectId;
    await nextTick();
    editFormRef.value.load(row.id, row.purchaseLedgerId, row.productModelId);
  };
  // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
  const ticketsAmount =
    Number(form.ticketsNum) * Number(form.taxInclusiveUnitPrice);
  const futureTickets =
    Number(temFutureTickets.value) - Number(form.ticketsNum);
  form.futureTickets = Number(futureTickets.toFixed(2));
  form.ticketsAmount = Number(ticketsAmount.toFixed(2));
};

  const close = () => {
    editFormRef.value.resetForm();
    closeModal();
  };
const inputTicketsAmount = val => {
  // ç¡®ä¿å«ç¨Žå•ä»·å­˜åœ¨ä¸”不为零
  if (!form.taxInclusiveUnitPrice || Number(form.taxInclusiveUnitPrice) === 0) {
    proxy.$modal.msgWarning("含税单价不能为零或未定义");
    return;
  }

  const sendForm = async () => {
    const form = editFormRef.value.form;
    form.saleLedgerProjectId = saleLedgerProjectId.value;
    const { code } = await updateRegistration(form);
    if (code === 200) {
      emits("success");
      ElMessage({ message: "操作成功", type: "success" });
      close();
    }
  };
  if (Number(val) > Number(form.futureTickets * form.taxInclusiveUnitPrice)) {
    proxy.$modal.msgWarning("本次来票金额不得大于总金额");
    form.ticketsAmount = (
      form.futureTickets * form.taxInclusiveUnitPrice
    ).toFixed(2);
    const ticketsNum =
      Number(form.ticketsAmount) / Number(form.taxInclusiveUnitPrice);
    form.ticketsNum = Number(ticketsNum.toFixed(2));
    return;
  }

  defineExpose({
    open,
  });
  // ç¡®ä¿æ‰€æœ‰æ•°å€¼éƒ½è½¬æ¢ä¸ºæ•°å­—类型进行计算
  const ticketsNum = Number(val) / Number(form.taxInclusiveUnitPrice);
  form.ticketsNum = Number(ticketsNum.toFixed(2));
};

const open = async row => {
  openModal(row.id);
  saleLedgerProjectId.value = row.saleLedgerProjectId;
  await nextTick();
  load(row.id, row.purchaseLedgerId, row.productModelId);
};

const close = () => {
  resetForm();
  closeModal();
};

const sendForm = async () => {
  form.saleLedgerProjectId = saleLedgerProjectId.value;
  const { code } = await updateRegistration(form);
  if (code === 200) {
    emits("success");
    ElMessage({ message: "操作成功", type: "success" });
    close();
  }
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped></style>

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -58,36 +58,24 @@
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #commonFilesRef="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-button link :icon="Files" type="danger"> é™„件 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-if="row.commonFiles.length !== 0"
                  :icon="Download"
                  command="download"
                >
                  ä¸‹è½½
                </el-dropdown-item>
                <el-dropdown-item :icon="Upload" command="upload">
                  ä¸Šä¼ 
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="downLoadFile(row)"
          >
            é™„件
          </el-button>
          <el-button
            type="primary"
            link
            @click="openEdit(row)"
          >
            ç¼–辑
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="handleDelete(row)"
          >
            åˆ é™¤
@@ -95,7 +83,16 @@
        </template>
      </PIMTable>
    </div>
    <UploadModal ref="modalRef" @uploadSuccess="uploadSuccess"></UploadModal>
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      title="附件列表"
      :showUploadButton="true"
      :showDeleteButton="true"
      :deleteMethod="handleDeleteFile"
      :uploadMethod="handleFileUpload"
      :rulesRegulationsManagementId="currentRowId"
    />
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </div>
</template>
@@ -104,31 +101,30 @@
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import {
  Files,
  Download,
  Search,
  Upload,
  EditPen,
    Search,
} from "@element-plus/icons-vue";
import {
    delRegistration,
    productRecordPage,
    productUploadFile,
    delCommonFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import UploadModal from "./Modal/UploadModal.vue";
import EditModal from "./Modal/EditModal.vue";
import FileListDialog from '@/components/Dialog/FileListDialog.vue';
import useUserStore from "@/store/modules/user.js";
import {delInvoiceLedgerByRegProductId} from "@/api/salesManagement/invoiceLedger.js";
const userStore = useUserStore();

defineOptions({
  name: "来票台账",
});

const modalRef = ref();
const editmodalRef = ref();
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentRowId = ref(null); // å½“前查看附件的行ID

const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
@@ -219,17 +215,8 @@
      width: 200,
    },
    {
      label: "附件",
      align: "center",
      prop: "commonFiles",
      dataType: "slot",
            fixed: "right",
      slot: "commonFilesRef",
      width: 120,
    },
    {
      fixed: "right",
      width: 150,
      width: 200,
      label: "操作",
      dataType: "slot",
      slot: "operation",
@@ -281,48 +268,152 @@
    });
};

const handleFiles = (fileList) => {
  fileList.forEach((e) => {
    proxy.$download.name(e.url);
  });
};

const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
    pagination.pageSize = limit;
  onCurrentChange(page);
};

const handleCommand = (command, row) => {
  switch (command) {
    case "download":
      handleFiles(row.commonFiles);
      break;
    case "upload":
      console.log(row.commonFiles);
      openUoload(row.ticketRegistrationId);
      break;
const downLoadFile = row => {
  currentRowId.value = row.id;
  if (fileListRef.value) {
    fileListRef.value.open(row.commonFiles || []);
  }
};

const openUoload = (id) => {
  modalRef.value.handleImport(id);
// ä¸Šä¼ é™„件（自定义上传方法）
const handleFileUpload = async () => {
  if (!currentRowId.value) {
    proxy.$modal.msgWarning("缺少登记ID，无法保存附件");
    return;
  }
  
  return new Promise((resolve) => {
    // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';
    input.onchange = async (e) => {
      const file = e.target.files[0];
      if (!file) {
        resolve(null);
        return;
      }
      
      try {
        // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
        const formData = new FormData();
        formData.append('file', file);
        formData.append('type', '4'); // type å‚数，用户未指定具体值，先传空字符串
        formData.append('id', currentRowId.value); // å½“前行的 id
        
        const uploadRes = await request({
          url: '/file/uploadByCommon',
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${getToken()}`
          }
        });
        
        if (uploadRes.code === 200) {
          proxy.$modal.msgSuccess("附件上传成功");
          
          // åˆ·æ–°åˆ—表获取最新数据
          await new Promise((resolveRefresh) => {
            // è°ƒç”¨ API èŽ·å–最新列表数据
            productRecordPage({
              ...filters,
              current: pagination.currentPage,
              size: pagination.pageSize
            }).then(({ code, data }) => {
              if (code === 200) {
                // æ›´æ–°æ•°æ®åˆ—表
                dataList.value = data.records;
                pagination.total = data.total;
                
                // ä»Žå¤–部数据获取 commonFiles
                const currentRow = dataList.value.find(row => row.id === currentRowId.value);
                if (currentRow && fileListRef.value) {
                  // åˆ·æ–°é™„件列表，使用从外部获取的最新 commonFiles
                  fileListRef.value.open(currentRow.commonFiles || []);
                }
                resolveRefresh();
              } else {
                resolveRefresh();
              }
            }).catch(() => {
              resolveRefresh();
            });
          });
          
          resolve({
            name: uploadRes.data?.originalName || file.name,
            url: uploadRes.data?.tempPath || uploadRes.data?.url,
            id: uploadRes.data?.id
          });
        } else {
          proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
          resolve(null);
        }
      } catch (error) {
        console.error("附件上传失败:", error);
        proxy.$modal.msgError("附件上传失败");
        resolve(null);
      } finally {
        document.body.removeChild(input);
      }
    };
    
    document.body.appendChild(input);
    input.click();
  });
};

// åˆ é™¤é™„件
const handleDeleteFile = async (file) => {
  try {
    await delCommonFile([file.id]);
    proxy.$modal.msgSuccess("删除成功");
    
    // åˆ·æ–°åˆ—表获取最新数据
    await new Promise((resolveRefresh) => {
      // è°ƒç”¨ API èŽ·å–最新列表数据
      productRecordPage({
        ...filters,
        current: pagination.currentPage,
        size: pagination.pageSize
      }).then(({ code, data }) => {
        if (code === 200) {
          // æ›´æ–°æ•°æ®åˆ—表
          dataList.value = data.records;
          pagination.total = data.total;
          
          // ä»Žå¤–部数据获取 commonFiles
          const currentRow = dataList.value.find(row => row.id === currentRowId.value);
          if (currentRow && fileListRef.value) {
            // åˆ·æ–°é™„件列表，使用从外部获取的最新 commonFiles
            fileListRef.value.open(currentRow.commonFiles || []);
          }
          resolveRefresh();
        } else {
          resolveRefresh();
        }
      }).catch(() => {
        resolveRefresh();
      });
    });
    
    return true;
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
};

const openEdit = (row) => {
  editmodalRef.value.open(row);
};

// ä¸Šä¼ æˆåŠŸåŽåšä»€ä¹ˆ
const uploadSuccess = async (data) => {
  const { code } = await productUploadFile({
    ticketRegistrationId: data.id,
    tempFileIds: data.tempFileIds,
  });
  if (code === 200) {
    proxy.$modal.msgSuccess("提交成功");
    getTableData();
  }
};
// åˆ é™¤
const handleDelete = (row) => {

 src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue

ÎļþÒÑɾ³ý

 src/views/reportAnalysis/PSIDataAnalysis/components/CarouselCards.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
  <div class="carousel-cards">
    <button 
      v-if="canScrollLeft"
      class="nav-button nav-button-left"
      @click="scrollLeftFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="左箭头" />
    </button>
    <div 
      class="cards-container" 
      :style="{ '--visible-count': visibleCount }"
      ref="cardsContainerRef"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="card-item"
      >
        <div v-if="item.icon" class="card-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
        <div class="card-title">
          <div class="card-label">{{ item.label }}</div>
          <div class="card-value">
            <span class="value-number">{{ item.value }}</span>
            <span class="value-unit">{{ item.unit }}</span>
          </div>
          <div v-if="item.rate ?? item.ratio ?? item.percent" class="card-rate">
            <span class="rate-value">{{ item.rate ?? item.ratio ?? item.percent }}%</span>
          </div>
        </div>
      </div>
    </div>
    <button 
      v-if="canScrollRight"
      class="nav-button nav-button-right"
      @click="scrollRightFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="右箭头" />
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
    validator: (value) => {
      return value.every(item => 
        item && typeof item.label !== 'undefined' && 
        typeof item.value !== 'undefined' && 
        typeof item.unit !== 'undefined'
      )
    }
  },
  visibleCount: {
    type: Number,
    default: 3
  }
})

const cardsContainerRef = ref(null)
const currentScrollLeft = ref(0)
const maxScrollLeft = ref(0)

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘左滚动
const canScrollLeft = computed(() => {
  return currentScrollLeft.value > 0
})

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘右滚动
const canScrollRight = computed(() => {
  return currentScrollLeft.value < maxScrollLeft.value
})

// æ›´æ–°æ»šåŠ¨çŠ¶æ€
const updateScrollState = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  currentScrollLeft.value = container.scrollLeft
  maxScrollLeft.value = container.scrollWidth - container.clientWidth
}

// å‘左滚动
const scrollLeftFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: -scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// å‘右滚动
const scrollRightFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// ç›‘听 items å˜åŒ–，更新滚动状态
watch(() => props.items, () => {
  nextTick(() => {
    updateScrollState()
  })
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    updateScrollState()
    // ç›‘听滚动事件
    const container = cardsContainerRef.value
    if (container) {
      container.addEventListener('scroll', updateScrollState)
    }
  })
})

onBeforeUnmount(() => {
  // æ¸…理滚动事件监听器
  const container = cardsContainerRef.value
  if (container) {
    container.removeEventListener('scroll', updateScrollState)
  }
})
</script>

<style scoped>
.carousel-cards {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.cards-container {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  padding-bottom: 4px;
  scroll-behavior: smooth;
}

.cards-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(26, 88, 176, 0.6);
  border: 1px solid rgba(26, 88, 176, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 0;
}

.nav-button:hover {
  background: rgba(26, 88, 176, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.nav-button-left {
  left: -16px;
}

.nav-button-left img {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.nav-button-right {
  right: -16px;
}

.nav-button-right img {
  width: 16px;
  height: 16px;
}

.card-item {
  flex: 0 0 calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  min-width: calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  display: flex;
  align-items: center;
  background: linear-gradient(269deg, rgba(27,57,126,0.13) 0%, rgba(33,137,206,0.33) 98.13%, #24AFF4 100%);
  border-radius: 8px 8px 8px 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2px);
}

.card-icon {
  width: 80px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 12px;
}

.card-title {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
}

.card-label {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.card-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card-rate {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.rate-label {
  opacity: 0.85;
}

.rate-value {
  font-weight: 500;
}

.value-number {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 1;
}

.value-unit {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 400;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/DateTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="date-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">周</el-radio-button>
    <el-radio-button :label="2">月</el-radio-button>
    <el-radio-button :label="3">季度</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // é»˜è®¤é€‰ä¸­"周"
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

// ç›‘听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

// å¤„理值变化
const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.date-type-switch {
  display: inline-flex;
}

/* æœªé€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

/* ç¬¬ä¸€ä¸ªæŒ‰é’®å·¦ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* æœ€åŽä¸€ä¸ªæŒ‰é’®å³ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* æŒ‰é’®ä¹‹é—´çš„分隔线 */
.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* é€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

/* æ‚¬åœæ•ˆæžœ */
.date-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* é€‰ä¸­çŠ¶æ€æ‚¬åœ */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
<template>
  <div class="panel-header">
    <span class="panel-title">{{ title }}</span>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
    default: ''
  }
})
</script>

<style scoped>
.panel-header {
  background-image: url("@/assets/BI/kehuhetongback@2x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.panel-title {
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #D9ECFF;
  padding-left: 46px;
  line-height: 36px;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/ProductTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="product-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">原材料</el-radio-button>
    <el-radio-button :label="2">半成品</el-radio-button>
    <el-radio-button :label="3">成品</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // é»˜è®¤é€‰ä¸­"原材料"
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.product-type-switch {
  display: inline-flex;
}

.product-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

.product-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

.product-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,166 @@
<template>
  <div>
    <PanelHeader title="出入库趋势" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">

        <ProductTypeSwitch v-model="productType" @change="handleFilterChange" />
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="lineLegend"
        :series="lineSeries"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import ProductTypeSwitch from './ProductTypeSwitch.vue'

const productType = ref(1) // 1=原材料 2=半成品 3=成品

const chartStyle = { width: '100%', height: '130%' }

const grid = {
  left: '3%',
  right: '4%',
  bottom: '3%',
  top: '16%',
  containLabel: true,
}

const lineLegend = {
  show: true,
  top: '2%',
  left: 'center',
  itemGap: 24,
  itemWidth: 12,
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  data: [
    { name: '出库', itemStyle: { color: '#4EE4FF' } },
    { name: '入库', itemStyle: { color: '#00D68F' } },
  ],
}

const xAxis1 = ref([
  {
    type: 'category',
    data: ['6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15'],
    axisTick: { show: false },
    axisLine: { show: false,lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
  },
])

const yAxis1 = [
  {
    type: 'value',
    name: '单位: ä»¶',
    nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { lineStyle: {  color: '#B8C8E0' } },
  },
]

const lineSeries = ref([
  {
    name: '出库',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 137, 254, 0.40)', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 0.40)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
        { offset: 1, color: 'rgba(11, 137, 254, 0.05)' },
      ]),
    },
    data: [80, 100, 140, 160, 120, 150, 180],
    emphasis: { focus: 'series' },
  },
  {
    name: '入库',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    
    lineStyle: { color: 'rgba(11, 249, 254, 0.5)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 0.5)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
        { offset: 1, color: 'rgba(11, 249, 254, 0.05)' },
      ]),
    },
    data: [160, 200, 200, 200, 170, 200, 200],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'line' },
  backgroundColor: 'rgba(10, 28, 58, 0.9)',
  borderColor: 'rgba(78, 228, 255, 0.3)',
  borderWidth: 1,
  textStyle: { color: '#B8C8E0', fontSize: 12 },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
      result += `${item.marker} ${item.seriesName}: ${item.value} ä»¶<br/>`
    })
    return result
  },
}

const handleFilterChange = () => {
  // å¯æŒ‰ productType åˆ‡æ¢åŽè¯·æ±‚出入库接口，此处仅预留
}

onMounted(() => {})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filters-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 428px;
}
</style>


 src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,159 @@
<template>
  <div>
    <!-- è®¾å¤‡ç»Ÿè®¡ -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">产品周转天数</span>
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import { customerRevenueAnalysis } from '@/api/viewIndex.js'
import { listCustomer } from '@/api/basicData/customerFile.js'

const dateType = ref(1)
const customerValue = ref(null)
const customerOptions = ref([])

const chartStyle = { width: '100%', height: '100%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['营收'] }
const barSeries1 = ref([
  {
    name: '营收',
    type: 'bar',
    barGap: 0,
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(0,164,237,0)' },
          { offset: 1, color: '#4EE4FF' },
        ],
      },
    },
    data: [],
  },
])
const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
}
const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

const getCustomerRevenueAnalysis = () => {
  if (customerOptions.value.length > 0 && !customerValue.value) customerValue.value = customerOptions.value[0].value
  if (!customerValue.value) return
  customerRevenueAnalysis({ customerId: customerValue.value, type: dateType.value })
    .then((res) => {
      xAxis1.value[0].data = []
      barSeries1.value[0].data = []
      const items = res.data?.items || []
      items.forEach((item) => {
        xAxis1.value[0].data.push(item.name)
        barSeries1.value[0].data.push(item.value)
      })
    })
    .catch((e) => console.error('获取客户营收分析失败:', e))
}

const fetchCustomerOptions = async () => {
  try {
    const res = await listCustomer({ pageNum: 1, pageSize: 200 })
    const records = res?.records || res?.data?.records || res?.rows || []
    customerOptions.value = records.map((r) => ({
      label: r.customerName || r.name || r.customer || '-',
      value: r.id ?? r.customerId ?? r.customerCode ?? r.customerName,
    }))
    if (customerOptions.value.length > 0 && !customerValue.value) {
      customerValue.value = customerOptions.value[0].value
      getCustomerRevenueAnalysis()
    }
  } catch (e) {
    customerOptions.value = [
      { label: '华东精密', value: '华东精密' },
      { label: '星辰电子', value: '星辰电子' },
      { label: '启航科技', value: '启航科技' },
      { label: '铭诚制造', value: '铭诚制造' },
      { label: '远景材料', value: '远景材料' },
    ]
  }
}

onMounted(() => {
  fetchCustomerOptions()
})
</script>

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<template>
  <div>
    <!-- é¡¶éƒ¨ç»Ÿè®¡å¡ç‰‡ -->
    <div class="stats-cards">
      <div class="stat-card">
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">销售产品数</span>
          <span class="card-value">{{ totalStaff }}</span>
          <div class="card-compare" :class="compareClass(staffYoY)">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(staffYoY) }}</span>
            <span class="compare-icon">{{ staffYoY >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
      <div class="stat-card">
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">采购产品数</span>
          <span class="card-value">{{ totalCustomers }}</span>
          <div class="card-compare" :class="compareClass(customersYoY)">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(customersYoY) }}</span>
            <span class="compare-icon">{{ customersYoY >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
      <div class="stat-card">
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">库存数</span>
          <span class="card-value">{{ totalSuppliers }}</span>
          <div class="card-compare" :class="compareClass(suppliersYoY)">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(suppliersYoY) }}</span>
            <span class="compare-icon">{{ suppliersYoY >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { summaryStatistics } from '@/api/viewIndex.js'

// ç»Ÿè®¡æ•°æ®
const totalStaff = ref(0)
const totalCustomers = ref(0)
const totalSuppliers = ref(0)
// åŒæ¯”
const staffYoY = ref(0)
const customersYoY = ref(0)
const suppliersYoY = ref(0)

const formatPercent = (val) => {
  const num = Number(val) || 0
  return `${Math.abs(num).toFixed(2)}%`
}

const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

// èŽ·å–员工、客户、供应商数量
const getNum = () => {
  summaryStatistics().then((res) => {
    totalStaff.value = res.data.totalStaff
    staffYoY.value = res.data.staffGrowthRate
    totalCustomers.value = res.data.totalCustomer
    customersYoY.value = res.data.customerGrowthRate
    totalSuppliers.value = res.data.totalSupplier
    suppliersYoY.value = res.data.supplierGrowthRate
  }).catch(err => {
    console.error('获取基础统计数据失败:', err)
  })
}

onMounted(() => {
  getNum()
})
</script>

<style scoped>
.stats-cards {
  display: flex;
  gap: 30px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 142px;
}

.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-value {
  font-weight: 500;
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-label {
  font-weight: 400;
  font-size: 19px;
  color: rgba(208, 231, 255, 0.7);
}

.card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
}

.card-compare > span:first-child {
  font-size: 13px;
  opacity: 0.8;
}

.compare-value {
  font-weight: 600;
}

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px; /* è½»å¾®ä¸Šç§»ï¼Œè®©ç®­å¤´ä¸Žæ–‡å­—垂直居中对齐 */
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
}

</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,262 @@
<template>
  <div>
    <PanelHeader title="产品采购金额分析" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :legend="landLegend"
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="pieOptions"
          style="height: 320px"
          class="land-chart"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array ä¼ å…¥çš„数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  å±žæ€§å a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

// æ•°æ®åˆ—表（来自接口）
const dataList = ref([])

// å¡ç‰‡æ•°æ®
const cardItems = ref([])

// å‡æ•°æ®
const mockCardData = [
  { name: '电子产品', value: 156, rate: '28.5' },
  { name: '机械设备', value: 132, rate: '24.1' },
  { name: '原材料', value: 98, rate: '17.9' },
  { name: '化工产品', value: 87, rate: '15.9' },
  { name: '纺织品', value: 45, rate: '8.2' },
  { name: '其他', value: 31, rate: '5.7' },
]

// é¢œè‰²åˆ—表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']

const landObjData = computed(() => array2obj(dataList.value, 'name'))

// å›¾ä¾‹é…ç½®ï¼ˆå³ä¾§ç«–排）
const landLegend = computed(() => {
  const data = dataList.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: landColors[idx % landColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '60%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
      const item = landObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|件}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 30],
        },
        unit: {
          color: '#82baff',
          fontSize: 12,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 0],
        },
        title: {
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
      },
    },
  }
})

// æç¤ºæ¡†
const landTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
}

// åŒå±‚环形饼图
const landSeries = ref([
  {
    name: '产品大类',
    type: 'pie',
    radius: ['40%', '60%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: dataList.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
  {
    // å†…圈
    type: 'pie',
    radius: ['40%', '45%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
    },
    data: [1],
  },
])

const chartStyle = {
  width: '100%',
  height: '100%',
}

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

const setMockData = () => {
  // å¡ç‰‡æ•°æ®
  cardItems.value = mockCardData.map(item => ({
    label: item.name,
    value: item.value,
    unit: '件',
    rate: item.rate
  }))
  // å›¾è¡¨æ•°æ®
  dataList.value = mockCardData.map((it) => ({
    name: it.name,
    value: Number(it.value || 0),
    rate: it.rate,
    children: [],
  }))
  landSeries.value[0].data = dataList.value
}

const loadData = async () => {
  setMockData()
  // try {
  //   const res = await productCategoryDistribution()
  //   const items = res?.data?.items || []
  //   dataList.value = items.map((it) => ({
  //     name: it.name,
  //     value: Number(it.value || 0),
  //     rate: it.rate,
  //     children: Array.isArray(it.children) ? it.children : [],
  //   }))
  //   // å¡ç‰‡æ•°æ®
  //   cardItems.value = items.map(item => ({
  //     label: item.name,
  //     value: parseInt(item.value),
  //     unit: '件',
  //     rate: item.rate
  //   }))
  //   landLegend.data = dataList.value.map((d) => d.name)
  //   landSeries.value[0].data = dataList.value
  // } catch (e) {
  //   console.error('获取产品大类分布失败:', e)
  //   setMockData()
  // }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}


.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,230 @@
<template>
  <div>
    <PanelHeader title="产品销售金额分析" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import Echarts from '@/components/Echarts/echarts.vue'

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array ä¼ å…¥çš„数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  å±žæ€§å a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

const chartStyle = {
  width: '100%',
  height: '100%',
}

const echartsRef = ref(null)
const pieDatas = ref([])
const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']

const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))

const pieLegend = computed(() => {
  const data = pieDatas.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: pieColors[idx % pieColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '60%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
      const item = pieObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|人}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 30],
        },
        unit: {
          color: '#82baff',
          fontSize: 12,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 0],
        },
        title: {
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
      },
    },
  }
})

const pieTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
}

const pieSeries = computed(() => [
  {
    name: '各产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: pieDatas.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
])

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

const cardItems = ref([])

// å‡æ•°æ®
const mockData = [
  { name: '生产部', value: 125, rate: '35.2' },
  { name: '技术部', value: 85, rate: '23.9' },
  { name: '销售部', value: 65, rate: '18.3' },
  { name: '财务部', value: 32, rate: '9.0' },
  { name: '人事部', value: 28, rate: '7.9' },
  { name: '行政部', value: 20, rate: '5.6' },
]

const getDeptStaffDistribution = () => {
  setMockData()
  // deptStaffDistribution().then(res => {
  //   if (res.code === 200) {
  //     const items = res.data.items || []
  //     // å¡ç‰‡æ•°æ®
  //     cardItems.value = items.map(item => ({
  //       label: item.name,
  //       value: parseInt(item.value),
  //       unit: '人'
  //     }))
  //     // å›¾è¡¨æ•°æ®
  //     pieDatas.value = items.map(item => ({
  //       name: item.name,
  //       value: parseInt(item.value),
  //       rate: item.rate
  //     }))
  //   } else {
  //     // ä½¿ç”¨å‡æ•°æ®
  //     setMockData()
  //   }
  // }).catch(err => {
  //   console.error('获取部门人员分布数据失败:', err)
  //   // ä½¿ç”¨å‡æ•°æ®
  //   setMockData()
  // })
}

const setMockData = () => {
  // å¡ç‰‡æ•°æ®
  cardItems.value = mockData.map(item => ({
    label: item.name,
    value: item.value,
    unit: '人'
  }))
  // å›¾è¡¨æ•°æ®
  pieDatas.value = mockData.map(item => ({
    name: item.name,
    value: item.value,
    rate: item.rate
  }))
}

onMounted(() => {
  getDeptStaffDistribution()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
}
.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/PSIDataAnalysis/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
  <div class="scale-container">
    <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
    <!-- å…¨å±æŒ‰é’® - ç§»åŠ¨åˆ°å·¦ä¸Šè§’ -->
    <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
      <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
      </svg>
      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
      </svg>
    </button>

    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
    <div class="dashboard-header">
      <div class="factory-name">PSI æ•°æ®åˆ†æž</div>
    </div>

    <!-- ä¸»è¦å†…容区域 -->
    <div class="dashboard-content">
      <!-- å·¦ä¾§åŒºåŸŸ -->
      <div class="left-panel">
        <LeftTop />

        <LeftBottom />
      </div>

      <!-- ä¸­é—´åŒºåŸŸ -->
      <div class="center-panel">
        <CenterTop />
        <CenterCenter/>
        <CenterBottom />
      </div>

      <!-- å³ä¾§åŒºåŸŸ -->
      <div class="right-panel">
        <RightBottom />
        <RightTop />
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import LeftBottom from './components/left-bottom.vue'
import CenterCenter from './components/center-center.vue'
import RightTop from '../dataDashboard/components/basic/right-top.vue'
import RightBottom from '../dataDashboard/components/basic/right-bottom.vue'
import useUserStore from '@/store/modules/user'
import LeftTop from './components/left-top.vue'
import CenterTop from './components/center-top.vue'
import CenterBottom from './components/center-bottom.vue'

// å…¨å±ç›¸å…³çŠ¶æ€
const isFullscreen = ref(false);

// ç¼©æ”¾æ¯”例
const scaleRatio = ref(1)
// è®¾è®¡å°ºå¯¸ï¼ˆåŸºå‡†å°ºå¯¸ï¼‰- æ ¹æ®å®žé™…设计稿调整
const designWidth = 1920
const designHeight = 1080

// ç”¨æˆ·store
const userStore = useUserStore()

// è®¡ç®—缩放比例
const calculateScale = () => {
  const container = document.querySelector('.scale-container')
  if (!container) return

  // èŽ·å–容器的实际尺寸
  const rect = container.getBoundingClientRect?.()
  const containerWidth = container.clientWidth || rect?.width || window.innerWidth
  const containerHeight = container.clientHeight || rect?.height || window.innerHeight

  // è®¡ç®—宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
  const scaleY = containerHeight / designHeight
  scaleRatio.value = Math.min(scaleX, scaleY)
}

// çª—口大小变化处理
const handleResize = () => {
  // å»¶è¿Ÿæ‰§è¡Œï¼Œç¡®ä¿DOM更新完成
  setTimeout(() => {
    calculateScale()
  }, 100)
}

// å…¨å±åŠŸèƒ½å®žçŽ° - é’ˆå¯¹scale-container元素
const toggleFullscreen = () => {
  const element = document.querySelector('.scale-container')

  if (!element) return

  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
}

// ç›‘听全屏变化事件
const handleFullscreenChange = () => {
  const fullscreenElement = document.fullscreenElement || 
                           document.webkitFullscreenElement || 
                           document.msFullscreenElement
  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')

  // å…¨å±çŠ¶æ€å˜åŒ–时，延迟重新计算缩放比例（确保DOM更新完成）
  setTimeout(() => {
    calculateScale()
  }, 200)
}

// ç”Ÿå‘½å‘¨æœŸé’©å­
onMounted(() => {
  // ä½¿ç”¨nextTick确保DOM完全渲染后再初始化
  nextTick(() => {
    // è®¡ç®—初始缩放比例
    calculateScale()
  })

  window.addEventListener('resize', handleResize)
  window.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
  // ç§»é™¤æˆ‘们添加的autofit动态调整监听器
  if (window._autofitUpdateHandler) {
    window.removeEventListener('resize', window._autofitUpdateHandler)
    delete window._autofitUpdateHandler
  }
  // å…³é—­autofit
  autofit.off()
})
</script>

<style scoped>
/* å¤–部缩放容器 - å æ®æ•´ä¸ªè§†å£ */
.scale-container {
position: relative;
width: 100%;
/* é¡µé¢åœ¨å¸¸è§„布局下（有顶栏）默认减去 84px，避免内容被裁切 */
height: calc(100vh - 84px);
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
overflow: hidden;
}

/* å†…部内容区域 - å›ºå®šè®¾è®¡å°ºå¯¸ */
.data-dashboard {
position: relative;
width: 1920px;
height: 1080px;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-origin: center center;
}

/* å…¨å±çŠ¶æ€çš„样式 - ä½œç”¨äºŽscale-container */
.scale-container:fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* Webkit浏览器前缀 */
.scale-container:-webkit-full-screen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* MS浏览器前缀 */
.scale-container:-ms-fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}


.dashboard-header {
position: relative;
z-index: 1;
height: 86px;
background-image: url("@/assets/BI/biaoti.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

.factory-name {
font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 16px;
position: absolute;
}

.fullscreen-btn {
position: absolute;
top: 10px;
left: 20px;
width: 40px;
height: 40px;
background: rgba(0, 20, 60, 0.8);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 6px;
color: #00d4ff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 10000;
}

.fullscreen-btn:hover {
background: rgba(0, 30, 90, 0.9);
border-color: rgba(0, 212, 255, 0.5);
}

.dashboard-content {
position: relative;
z-index: 1;
display: flex;
gap: 30px;
padding: 0 30px;
height: calc(100% - 86px);
overflow: hidden;
}

/* ç¡®ä¿å„面板能够正确显示 */
.left-panel, .center-panel, .right-panel {
overflow: hidden;
}

.left-panel,
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
width: 520px;
}

.center-panel {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 20px;
}

</style>

 src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue

@@ -2,16 +2,19 @@
  <div>
    <PanelHeader title="人员分布" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="echartsRef"
        :chartStyle="chartStyle"
        :legend="pieLegend"
        :series="pieSeries"
        :tooltip="pieTooltip"
        :color="pieColors"
        :options="pieOptions"
        style="height: 320px"
      />
      <div class="pie-chart-wrapper">
        <div class="pie-background" :style="{ backgroundImage: `url(${roseBorderImg})` }"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>
@@ -21,6 +24,7 @@
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import roseBorderImg from '@/assets/BI/玫瑰图边框.png'

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
@@ -110,7 +114,7 @@
    center: ['20%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      borderWidth:5,
    },
    label: {
      show: false
@@ -162,4 +166,26 @@
  width: 100%;
  height: 370px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}


.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-113%, -50%);
  width: 360px;
  height: 360px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue

@@ -9,6 +9,8 @@
          placeholder="请选择客户"
          clearable
          filterable
          popper-class="customer-select-dropdown"
          :teleported="false"
          @change="handleFilterChange"
        >
          <el-option
@@ -242,3 +244,17 @@
  height: 478px;
}
</style>

<style>
/* å…¨å±æ¨¡å¼ä¸‹ä¸‹æ‹‰æ¡†å±‚级修复 */
.customer-select-dropdown {
  z-index: 10001 !important;
}

/* ç¡®ä¿åœ¨å…¨å±å®¹å™¨å†…的下拉框也能正常显示 */
.scale-container:fullscreen .customer-select-dropdown,
.scale-container:-webkit-full-screen .customer-select-dropdown,
.scale-container:-ms-fullscreen .customer-select-dropdown {
  z-index: 10001 !important;
}
</style>

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -2,7 +2,8 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%">
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -10,7 +11,7 @@
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :options="pieOptions"
          style="height: 100%"
          class="land-chart"
        />
@@ -116,7 +117,7 @@
        if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
        // å°åœ†ç‚¹ + çˆ¶çº§ name + çˆ¶çº§ value，换行展示 children çš„ name + value
        return [
          `${dot}{parent|${parentName} ${parentValue}}`,
          `${dot}{parent|${parentName}}`,
          ...children.map((c) => `{child|${c.name}}`),
        ].join('\n')
      },
@@ -157,7 +158,12 @@

const chartStyle = {
  width: '100%',
  height: '150%',
  height: '126%',
}

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

const loadData = async () => {
@@ -192,4 +198,26 @@
  width: 100%;
  height: 420px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}

.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
  width: 360px;
  height: 360px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -20,10 +20,8 @@
    <div class="dashboard-content">
    <!-- å·¦ä¾§åŒºåŸŸ -->
    <div class="left-panel">
      <!-- å®¢æˆ·ä¿¡æ¯ç»Ÿè®¡åˆ†æž -->
      <LeftTop />

      <!-- è´¨é‡ç»Ÿè®¡ -->
      <LeftBottom />
    </div>

@@ -36,10 +34,8 @@

    <!-- å³ä¾§åŒºåŸŸ -->
    <div class="right-panel">
      <!-- åº”收应付统计 -->
      <RightTop />

      <!-- å›žæ¬¾ä¸Žå¼€ç¥¨åˆ†æž -->
       <RightBottom />
    </div>
    </div>

 src/views/salesManagement/invoiceLedger/index.vue

@@ -73,8 +73,11 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`发票金额(元)： åˆåŒæ€»é¢(${form.taxInclusiveTotalPrice}元)`" prop="invoiceTotal">
              <el-input-number :step="0.01" :min="0" :max="form.taxInclusiveTotalPrice" style="width: 100%" v-model="form.invoiceTotal" placeholder="请输入" clearable :precision="2"/>
            <el-form-item :label="`发票金额(元)： `" prop="invoiceTotal">
              <el-input-number :step="0.01" :min="0" :max="maxInvoiceAmount || form.taxInclusiveTotalPrice" style="width: 100%" v-model="form.invoiceTotal" placeholder="请输入" clearable :precision="2"/>
              <div v-if="maxInvoiceAmount > 0" style="color: #909399; font-size: 12px; margin-top: 5px;">
                å¯å¡«æœ€å¤§é‡‘额为：¥{{ maxInvoiceAmount.toFixed(2) }}元
              </div>
            </el-form-item>
          </el-col>
        </el-row>
@@ -203,6 +206,7 @@
const { form: searchForm, resetForm } = useFormData(data.searchForm);
const currentId = ref("");
const userStore = useUserStore();
const maxInvoiceAmount = ref(0); // å‘票金额最大值
const upload = reactive({
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/invoiceLedger/uploadFile",
@@ -269,6 +273,11 @@
    if (!form.value.invoicePerson) {
      form.value.invoicePerson = userStore.nickName;
    }
    
    // è®¡ç®—发票金额最大值：noInvoiceAmount + invoiceAmount
    const noInvoiceAmount = parseFloat(res.data.noInvoiceAmount || 0);
    const invoiceAmount = parseFloat(res.data.invoiceAmount || 0);
    maxInvoiceAmount.value = noInvoiceAmount + invoiceAmount;
  });
  dialogFormVisible.value = true;
};