From f3363b799cafad9fa664bbd54c3429797c8b23c5 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 28 一月 2026 14:00:28 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/procurementManagement/procurementInvoiceLedger/index.vue | 231 +++-
src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue | 4
src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue | 230 ++++
src/views/reportAnalysis/dataDashboard/index.vue | 4
src/views/procurementManagement/invoiceEntry/index.vue | 19
src/views/reportAnalysis/PSIDataAnalysis/components/CarouselCards.vue | 306 ++++++
src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue | 48
src/views/reportAnalysis/PSIDataAnalysis/index.vue | 291 ++++++
src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue | 262 +++++
src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue | 16
/dev/null | 311 ------
src/views/salesManagement/invoiceLedger/index.vue | 13
src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue | 166 +++
src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue | 162 +++
src/views/reportAnalysis/PSIDataAnalysis/components/ProductTypeSwitch.vue | 85 +
src/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue | 33
src/assets/BI/jiantou.png | 0
src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue | 217 +++
src/views/reportAnalysis/PSIDataAnalysis/components/DateTypeSwitch.vue | 94 ++
src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue | 159 +++
src/views/procurementManagement/invoiceEntry/components/Modal.vue | 122 +-
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 36
22 files changed, 2,285 insertions(+), 524 deletions(-)
diff --git a/src/assets/BI/jiantou.png b/src/assets/BI/jiantou.png
new file mode 100644
index 0000000..7bba1a9
--- /dev/null
+++ b/src/assets/BI/jiantou.png
Binary files differ
diff --git a/src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue b/src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue
index 24a368a..d329768 100644
--- a/src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue
+++ b/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();
};
// 瀛愯〃鍚堣鏂规硶
diff --git a/src/views/procurementManagement/invoiceEntry/components/Modal.vue b/src/views/procurementManagement/invoiceEntry/components/Modal.vue
index 08aaaec..efd4a4e 100644
--- a/src/views/procurementManagement/invoiceEntry/components/Modal.vue
+++ b/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 // 娣诲姞椤圭洰鍚嶇О
+ // 淇濈暀浜у搧鏈韩鐨刬d锛屼笉瑕嗙洊
});
});
}
@@ -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, // 褰曞叆浜篿d
- 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, // 褰曞叆浜篿d
+ 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, // 褰曞叆浜篿d
- 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, // 褰曞叆浜篿d
+ issUer: form.issUer, // 褰曞叆浜�
+
+ // 鍚堝悓瀹為檯淇℃伅
+ purchaseLedgerId: singleContract.id, // 浣跨敤id浣滀负瀛楁鍚嶏紝鍊间负purchaseLedgerId
purchaseContractNumber: singleContract.purchaseContractNumber, // 浣跨敤瀹為檯鐨勯噰璐悎鍚屽彿
salesContractNo: singleContract.salesContractNo, // 浣跨敤瀹為檯鐨勯攢鍞悎鍚屽彿
supplierName: singleContract.supplierName, // 浣跨敤瀹為檯鐨勪緵搴斿晢鍚嶇О
diff --git a/src/views/procurementManagement/invoiceEntry/index.vue b/src/views/procurementManagement/invoiceEntry/index.vue
index 3719ffe..11a6b4b 100644
--- a/src/views/procurementManagement/invoiceEntry/index.vue
+++ b/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,
+ },
]
);
diff --git a/src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue b/src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue
deleted file mode 100644
index 7f8b852..0000000
--- a/src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
- <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>
-
-<script setup>
- import useFormData from "@/hooks/useFormData";
- import { getProductRecordById } from "@/api/procurementManagement/procurementInvoiceLedger";
- const { proxy } = getCurrentInstance();
-
- defineOptions({
- name: "鏉ョエ鍙拌处琛ㄥ崟",
- });
- const temFutureTickets = ref(0);
- const { form, resetForm } = useFormData({
- id: undefined,
- purchaseContractNumber: undefined, // 閲囪喘鍚堝悓鍙�
- salesContractNo: undefined, // 閿�鍞悎鍚屽彿
- createdAt: undefined, // 鍒涘缓鏃堕棿
- invoiceNumber: undefined, // 鍙戠エ鍙�
- ticketsNum: undefined, // 鏉ョエ鏁�
- ticketsAmount: undefined, // 鏉ョエ閲戦
- taxInclusiveUnitPrice: undefined, // 鍚◣鍗曚环
- });
-
- const load = async (id, purchaseLedgerId, productModelId) => {
- const { code, data } = await getProductRecordById({
- id: id,
- purchaseLedgerId: purchaseLedgerId,
- productModelId: productModelId,
- });
- 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 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 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 inputTicketsAmount = val => {
- // 纭繚鍚◣鍗曚环瀛樺湪涓斾笉涓洪浂
- if (!form.taxInclusiveUnitPrice || Number(form.taxInclusiveUnitPrice) === 0) {
- proxy.$modal.msgWarning("鍚◣鍗曚环涓嶈兘涓洪浂鎴栨湭瀹氫箟");
- return;
- }
-
- 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;
- }
-
- // 纭繚鎵�鏈夋暟鍊奸兘杞崲涓烘暟瀛楃被鍨嬭繘琛岃绠�
- const ticketsNum = Number(val) / Number(form.taxInclusiveUnitPrice);
- form.ticketsNum = Number(ticketsNum.toFixed(2));
- };
-
- defineExpose({
- load,
- form,
- resetForm,
- });
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue b/src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue
index 68f3650..9794bb4 100644
--- a/src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue
+++ b/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>
diff --git a/src/views/procurementManagement/procurementInvoiceLedger/index.vue b/src/views/procurementManagement/procurementInvoiceLedger/index.vue
index b33e3e4..b90ef0d 100644
--- a/src/views/procurementManagement/procurementInvoiceLedger/index.vue
+++ b/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) => {
diff --git a/src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue b/src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue
deleted file mode 100644
index 987e6a4..0000000
--- a/src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<template>
- <div class="app-container">
- <div class="search_form">
- <div>
- <span class="search_title">閲囪喘鍚堝悓鍙凤細</span>
- <el-input
- v-model="searchForm.purchaseContractNumber"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <span class="search_title" style="margin-left: 10px">渚涘簲鍟嗭細</span>
- <el-input
- v-model="searchForm.supplierName"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <span class="search_title" style="margin-left: 10px">鏉ョエ鏃ユ湡锛�</span>
- <el-date-picker
- style="width: 240px"
- v-model="searchForm.issueDate"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- type="daterange"
- start-placeholder="寮�濮嬫椂闂�"
- end-placeholder="缁撴潫鏃堕棿"
- clearable
- @change="changeDateRange"
- @clear="clearRange"
- />
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
- >鎼滅储</el-button
- >
- </div>
- <div>
- <el-button @click="handleOut">瀵煎嚭</el-button>
- </div>
- </div>
- <div class="table_list">
- <el-table
- :data="tableData"
- border
- v-loading="tableLoading"
- :expand-row-keys="expandedRowKeys"
- :row-key="(row) => row.id"
- show-summary
- :summary-method="summarizeMainTable"
- @expand-change="expandChange"
- height="calc(100vh - 18.5em)"
- >
- <el-table-column align="center" label="搴忓彿" type="index" width="55" />
- <el-table-column type="expand">
- <template #default="props">
- <el-table
- :data="props.row.children"
- border
- show-summary
- :summary-method="summarizeChildrenTable"
- >
- <el-table-column
- align="center"
- label="搴忓彿"
- type="index"
- width="60"
- />
- <el-table-column label="浜у搧澶х被" prop="productCategory" />
- <el-table-column label="瑙勬牸鍨嬪彿" prop="specificationModel" />
- <el-table-column label="鍗曚綅" prop="unit" />
- <el-table-column label="鏁伴噺" prop="quantity" />
- <el-table-column label="绋庣巼(%)" prop="taxRate" />
- <el-table-column
- label="鍚◣鍗曚环(鍏�)"
- prop="taxInclusiveUnitPrice"
- :formatter="formattedNumber"
- />
- <el-table-column
- label="鍚◣鎬讳环(鍏�)"
- prop="taxInclusiveTotalPrice"
- :formatter="formattedNumber"
- />
- <el-table-column
- label="涓嶅惈绋庢�讳环(鍏�)"
- prop="taxExclusiveTotalPrice"
- :formatter="formattedNumber"
- />
- <el-table-column label="鏈鏉ョエ鏁�" prop="ticketsNum" />
- <el-table-column
- label="鏈鏉ョエ閲戦(鍏�)"
- prop="ticketsAmount"
- :formatter="formattedNumber"
- />
- <el-table-column label="鏈潵绁ㄦ暟" prop="futureTickets" />
- <el-table-column
- label="鏈潵绁ㄩ噾棰�(鍏�)"
- prop="futureTicketsAmount"
- :formatter="formattedNumber"
- />
- </el-table>
- </template>
- </el-table-column>
- <el-table-column
- label="閲囪喘鍚堝悓鍙�"
- prop="purchaseContractNumber"
- show-overflow-tooltip
- />
- <el-table-column
- label="閿�鍞悎鍚屽彿"
- prop="salesContractNo"
- show-overflow-tooltip
- />
- <el-table-column
- label="渚涘簲鍟嗗悕绉�"
- prop="supplierName"
- show-overflow-tooltip
- />
- <el-table-column
- label="鍙戠エ鍙�"
- prop="invoiceNumber"
- show-overflow-tooltip
- />
- <el-table-column
- label="鍚堝悓閲戦(鍏�)"
- prop="invoiceAmount"
- show-overflow-tooltip
- :formatter="formattedNumber"
- />
- <el-table-column label="寮�绁ㄤ汉" prop="issUer" show-overflow-tooltip />
- <el-table-column
- label="寮�绁ㄦ棩鏈�"
- prop="issueDate"
- show-overflow-tooltip
- />
- </el-table>
- <pagination
- v-show="total > 0"
- :total="total"
- layout="total, sizes, prev, pager, next, jumper"
- :page="page.current"
- :limit="page.size"
- @pagination="paginationChange"
- />
- </div>
- </div>
-</template>
-
-<script setup>
-import pagination from "@/components/PIMTable/Pagination.vue";
-import { ref } from "vue";
-import { Search } from "@element-plus/icons-vue";
-import { ElMessageBox } from "element-plus";
-import {
- invoiceListPage,
- productRecordList,
-} from "@/api/procurementManagement/procurementInvoiceLedger.js";
-import dayjs from "dayjs";
-
-const { proxy } = getCurrentInstance();
-const tableData = ref([]);
-const tableLoading = ref(false);
-const page = reactive({
- current: 1,
- size: 100,
-});
-const total = ref(0);
-// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
-const data = reactive({
- searchForm: {
- purchaseContractNumber: "",
- supplierName: "",
- issueDate: [
- dayjs().startOf("month").format("YYYY-MM-DD"),
- dayjs().endOf("month").format("YYYY-MM-DD"),
- ],
- issueDateStart: dayjs().startOf("month").format("YYYY-MM-DD"),
- issueDateEnd: dayjs().endOf("month").format("YYYY-MM-DD"),
- },
- form: {
- issueDate: "", // 寮�绁ㄦ棩鏈�
- purchaseLedgerId: "",
- purchaseLedgerNo: "",
- issUerId: "", // 寮�绁ㄤ汉id
- issUer: "", // 寮�绁ㄤ汉濮撳悕
- },
- rules: {
- purchaseLedgerId: [
- { required: true, message: "璇烽�夋嫨", trigger: "change" },
- ],
- },
-});
-const { searchForm } = toRefs(data);
-
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
- page.current = 1;
- getList();
-};
-const paginationChange = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
-};
-const getList = () => {
- tableLoading.value = true;
- const { issueDate, ...rest } = searchForm.value;
- invoiceListPage({ ...rest, ...page })
- .then((res) => {
- tableLoading.value = false;
- tableData.value = res.records;
- tableData.value.map((item) => {
- item.children = [];
- });
- total.value = res.total;
- expandedRowKeys.value = [];
- })
- .catch(() => {
- tableLoading.value = false;
- });
-};
-const formattedNumber = (row, column, cellValue) => {
- return parseFloat(cellValue).toFixed(2);
-};
-// 琛ㄦ牸閫夋嫨鏁版嵁
-const expandedRowKeys = ref([]);
-// 灞曞紑琛�
-const expandChange = (row, expandedRows) => {
- if (expandedRows.length > 0) {
- expandedRowKeys.value = [];
- try {
- productRecordList({ id: row.id }).then((res) => {
- const index = tableData.value.findIndex((item) => item.id === row.id);
- if (index > -1) {
- tableData.value[index].children = res;
- }
- expandedRowKeys.value.push(row.id);
- });
- } catch (error) {
- console.log(error);
- }
- } else {
- expandedRowKeys.value = [];
- }
-};
-// 涓昏〃鍚堣鏂规硶
-const summarizeMainTable = (param) => {
- return proxy.summarizeTable(param, ["invoiceAmount"], {
- ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
- futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
- });
-};
-// 瀛愯〃鍚堣鏂规硶
-const summarizeChildrenTable = (param) => {
- return proxy.summarizeTable(
- param,
- [
- "taxInclusiveUnitPrice",
- "taxInclusiveTotalPrice",
- "taxExclusiveTotalPrice",
- "ticketsNum",
- "ticketsAmount",
- "futureTickets",
- "futureTicketsAmount",
- ],
- {
- ticketsNum: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
- futureTickets: { noDecimal: true }, // 涓嶄繚鐣欏皬鏁�
- }
- );
-};
-
-// 瀵煎嚭
-const handleOut = () => {
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download("/purchase/registration/export", {}, "鏉ョエ鐧昏.xlsx");
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
-};
-
-const changeDateRange = (date) => {
- if (date) {
- searchForm.value.receiptPaymentDateStart = date[0];
- searchForm.value.receiptPaymentDateEnd = date[1];
- getList();
- }
-};
-
-const clearRange = () => {
- searchForm.value.issueDate = [];
- searchForm.value.issueDateStart = undefined;
- searchForm.value.issueDateEnd = undefined;
- getList();
-};
-
-onMounted(() => {
- getList();
-});
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/CarouselCards.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/CarouselCards.vue
new file mode 100644
index 0000000..0498824
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/DateTypeSwitch.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/DateTypeSwitch.vue
new file mode 100644
index 0000000..0c57b25
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue
new file mode 100644
index 0000000..313f1df
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/ProductTypeSwitch.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/ProductTypeSwitch.vue
new file mode 100644
index 0000000..315d887
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
new file mode 100644
index 0000000..3b8da7f
--- /dev/null
+++ b/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>
+
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue
new file mode 100644
index 0000000..e8ed776
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-top.vue
new file mode 100644
index 0000000..15df549
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
new file mode 100644
index 0000000..a1c255f
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
new file mode 100644
index 0000000..cd8f1e3
--- /dev/null
+++ b/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>
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/index.vue b/src/views/reportAnalysis/PSIDataAnalysis/index.vue
new file mode 100644
index 0000000..065b59d
--- /dev/null
+++ b/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 = () => {
+ // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
+ 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)
+ // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
+ 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;
+}
+
+/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 - 浣滅敤浜巗cale-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>
\ No newline at end of file
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue
index 72ba5ba..a4824a2 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue
+++ b/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>
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
index 520ffdf..a28ded3 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
+++ b/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>
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 9346680..67e0217 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/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>
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index f4374b0..67a700f 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/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>
diff --git a/src/views/salesManagement/invoiceLedger/index.vue b/src/views/salesManagement/invoiceLedger/index.vue
index 0b45dde..b35023f 100644
--- a/src/views/salesManagement/invoiceLedger/index.vue
+++ b/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;
};
--
Gitblit v1.9.3