From 93632c779f9eaa450587a6bb2846d886e27a62a2 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期六, 10 一月 2026 13:51:37 +0800
Subject: [PATCH] 代码调整12
---
/dev/null | 390 -------------------------------------------------------
1 files changed, 0 insertions(+), 390 deletions(-)
diff --git a/src/views/financialManagement/accounting/index.vue b/src/views/financialManagement/accounting/index.vue
deleted file mode 100644
index 91588fd..0000000
--- a/src/views/financialManagement/accounting/index.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<template>
- <div style="padding: 20px;">
- <!-- 椤甸潰鏍囬鍜岀瓫閫夋潯浠� -->
- <div class="w-full md:w-auto flex items-center gap-3" style="margin-bottom: 20px;">
- <el-button
- type="primary"
- icon="Refresh"
- @click="resetFilters"
- size="default"
- >
- 鏌ヨ
- </el-button>
- </div>
-
- <main class="container mx-auto px-4 pb-10">
- <!-- 鍥哄畾璧勪骇鎸囨爣鍗＄墖 -->
- <div class="grid-container">
- <!-- 璁惧鎬绘暟 -->
- <el-card class="bg2">
- <p>璁惧鎬绘暟</p>
- <h3>
- {{ assetInfo.totalEquipment }}
- </h3>
- </el-card>
-
- <!-- 璧勪骇鍘熷�� -->
- <el-card class="bg3">
- <p>璧勪骇鍘熷��</p>
- <h3>
- 楼{{ assetInfo.totalOriginalValue }}
- </h3>
- </el-card>
-
- <!-- 绱鎶樻棫 -->
- <el-card class="bg4">
- <p>绱鎶樻棫</p>
- <h3>
- 楼{{ assetInfo.totalDepreciation }}
- </h3>
- </el-card>
-
- <!-- 鍑�鍊� -->
- <el-card class="bg5">
- <p>鍑�鍊�</p>
- <h3>
- 楼{{ assetInfo.totalNetValue }}
- </h3>
- </el-card>
- </div>
-
- <!-- 鍥哄畾璧勪骇缁熻鍥捐〃 -->
- <div class="grid-layout">
- <!-- 鎸夎澶囩被鍨嬬粺璁� -->
- <el-card style="margin-bottom: 20px;">
- <h2 class="section-title">璁惧绫诲瀷鍒嗗竷</h2>
- <div class="echarts">
- <Echarts
- :legend="typeDistributionLegend"
- :chartStyle="chartStylePie"
- :series="typeDistributionSeries"
- :tooltip="pieTooltip"
- style="height: 260px; width: 35%;">
- <div class="chart-num">
- <span style="font-size: 22px;">璁惧绫诲瀷</span>
- <span style="font-size: 36px; font-weight: 500; font-family: 'MyCustomFont', sans-serif;">{{ assetInfo.totalEquipment }}</span>
- </div>
- </Echarts>
- <Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="typeDistributionLineSeries"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- style="height: 260px; width: 64%;"></Echarts>
- </div>
- </el-card>
- </div>
- <!-- 璁惧鍙拌处琛ㄦ牸 -->
- <el-card style="margin-bottom: 20px;">
- <el-table
- :data="equipmentList"
- stripe
- style="width: 100%"
- :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
- >
- <el-table-column prop="id" label="璧勪骇缂栧彿" width="120" />
- <el-table-column prop="deviceName" label="璁惧鍚嶇О" width="250" />
- <el-table-column prop="deviceModel" label="鍨嬪彿瑙勬牸" min-width="150" />
- <el-table-column prop="supplierName" label="渚涘簲鍟�" min-width="120" />
- <el-table-column prop="unit" label="鍗曚綅" width="120" />
- <el-table-column prop="number" label="鏁伴噺" width="120" />
- <el-table-column prop="originalValue" label="鍘熷��(鍏�)" width="120">
- <template #default="{ row }">
- 楼{{ formatCurrency(row.taxIncludingPriceTotal) }}
- </template>
- </el-table-column>
- <el-table-column prop="depreciation" label="绱鎶樻棫(鍏�)" width="140">
- <template #default="{ row }">
- 楼{{ formatCurrency(row.taxIncludingPriceTotal-row.unTaxIncludingPriceTotal) }}
- </template>
- </el-table-column>
- <el-table-column prop="netValue" label="鍑�鍊�(鍏�)" width="120">
- <template #default="{ row }">
- 楼{{ formatCurrency(row.unTaxIncludingPriceTotal) }}
- </template>
- </el-table-column>
- <el-table-column prop="status" label="鐘舵��" width="100">
- <template #default="{ row }">
- <el-tag
- :type="getStatusTagType(row.status)"
- size="small"
- >
- {{ row.status }}
- </el-tag>
- </template>
- </el-table-column>
- </el-table>
-
- <!-- 鍒嗛〉 -->
- <div class="pagination-container">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="pagination.currentPage"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="pagination.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="pagination.total"
- />
- </div>
- </el-card>
- </main>
-
- </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
-import 'element-plus/dist/index.css';
-import Echarts from "@/components/Echarts/echarts.vue";
-import { getLedgerPage } from "@/api/equipmentManagement/ledger";
-import dayjs from "dayjs";
-
-// 绛涢�夋潯浠�
-const dateRange = ref(null);
-const equipmentType = ref('');
-
-
-// 鍥哄畾璧勪骇淇℃伅
-const assetInfo = ref({
- totalEquipment: 0,
- totalOriginalValue: 0,
- totalDepreciation: 0,
- totalNetValue: 0
-});
-
-// 璁惧鍒楄〃
-const equipmentList = ref([]);
-const pagination = ref({
- currentPage: 1,
- pageSize: 10,
- total: 0
-});
-
-// 鍥捐〃閰嶇疆
-const chartStyle = {
- width: '100%',
- height: '100%',
- position: 'relative',
-};
-
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
-};
-
-const lineLegend = {
- show: false,
-};
-
-// 鎶樼嚎鍥炬彁绀烘
-const tooltip = reactive({
- trigger: 'axis',
- axisPointer: {
- type: 'line',
- lineStyle: { color: '#aaa' }
- },
- // 鑷畾涔夊唴瀹�
- formatter: function (params) {
- if (!params || !params.length) return '';
- const axisLabel = params[0].axisValueLabel || params[0].axisValue || '';
- const rows = params
- .map(p => {
- const colorDot = `<span style="display:inline-block;margin-right:6px;width:8px;height:8px;border-radius:50%;background:${p.color}"></span>`;
- return `${colorDot}${p.seriesName}: ${p.value}`;
- })
- .join('<br/>');
- return `<div>${axisLabel}</div><div>${rows}</div>`;
- }
-});
-
-const xAxis = ref([
- {
- type: 'category',
- axisTick: { show: true, alignWithLabel: true },
- data: [],
- },
-]);
-
-const yAxis = [
- {
- type: 'value',
- name: '鏁伴噺/閲戦', // 宸︿晶y杞�
- position: 'left',
- min: 0,
- // 鍧愭爣杞村悕绉版牱寮�
- nameTextStyle: {
- color: '#000',
- fontSize: 14,
- },
- }
-];
-
-const chartStylePie = {
- width: '100%',
- height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-};
-
-const pieColors = ['#F04864', '#FACC14', '#8543E0', '#1890FF', '#13C2C2', '#2FC25B']; // 鍙牴鎹疄闄呰皟鏁�
-
-// 楗煎浘鏁版嵁
-const typeDistributionData = ref([]);
-const departmentDistributionData = ref([]);
-
-// 楗煎浘鍥句緥
-const typeDistributionLegend = computed(() => ({
- show: true,
- top: 'center',
- left: '60%',
- orient: 'vertical',
- icon: 'circle',
- data: typeDistributionData.value.map(item => item.name),
- formatter: function(name) {
- const item = typeDistributionData.value.find(i => i.name === name);
- if (!item) return name;
- return `${name} | ${item.count} 鍙� | ${item.amount}`;
- },
- textStyle: {
- color: '#333',
- fontSize: 14,
- lineHeight: 26,
- }
-}));
-
-
-// 楗煎浘绯诲垪
-const typeDistributionSeries = computed(() => [
- {
- type: 'pie',
- radius: ['50%', '65%'],
- center: ['25%', '50%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: typeDistributionData.value,
- color: pieColors
- }
-]);
-
-// 鎶樼嚎鍥炬暟鎹�
-const typeDistributionLineSeries = ref([]);
-
-
-// 楗煎浘鎻愮ず妗�
-const pieTooltip = reactive({
- trigger: 'item',
- formatter: function(params) {
- // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
- if (!params.data) return params.name;
- // 鎷兼帴瀹屾暣鍐呭
- return `
- <div>
- <div style="color:${params.color};font-size:16px;">鈼�</div>
- <div>${params.name}</div>
- <div>鏁伴噺锛�${params.data.count} 鍙�</div>
- <div>閲戦锛�${params.data.amount}</div>
- </div>
- `;
- }
-});
-
-// 閫夐」鏁版嵁
-const equipmentTypeOptions = ref([]);
-
-// 鑾峰彇鏁版嵁
-const fetchData = async () => {
- try {
- // 鑾峰彇鍥哄畾璧勪骇姹囨�讳俊鎭�
- const assetInfoRes = await getAssetInfo({
- startDate: dateRange.value ? dateRange.value[0] : null,
- endDate: dateRange.value ? dateRange.value[1] : null,
- equipmentType: equipmentType.value
- });
-
- if (assetInfoRes.code === 200) {
- assetInfo.value = assetInfoRes.data;
- }
-
- // 鑾峰彇璁惧鍒楄〃
- const equipmentListRes = await getLedgerPage({
- current: pagination.value.currentPage,
- size: pagination.value.pageSize,
- startDate: dateRange.value ? dateRange.value[0] : null,
- endDate: dateRange.value ? dateRange.value[1] : null,
- equipmentType: equipmentType.value
- });
-
- if (equipmentListRes.code === 200) {
- equipmentList.value = equipmentListRes.data.records;
- pagination.value.total = equipmentListRes.data.total;
-
- // 鏍规嵁 equipmentList 鎸� deviceName 杩涜鍒嗙被缁熻
- const deviceNameMap = {};
- equipmentList.value.forEach(item => {
- const deviceName = item.deviceName;
- if (!deviceNameMap[deviceName]) {
- deviceNameMap[deviceName] = {
- name: deviceName,
- count: 0,
- totalValue: 0
- };
- }
- deviceNameMap[deviceName].count += item.number || 1; // 鍋囪 number 涓鸿澶囨暟閲�
- deviceNameMap[deviceName].totalValue += item.taxIncludingPriceTotal || 0; // 绱姞鍚◣鎬讳环
- });
-
- // 杞崲涓� typeDistributionData 鏍煎紡
- typeDistributionData.value = Object.values(deviceNameMap).map(item => ({
- name: item.name,
- value: item.count,
- count: item.count,
- amount: `楼${formatCurrency(item.totalValue)}`
- }));
-
- // 鏇存柊x杞存暟鎹�
- xAxis.value[0].data = typeDistributionData.value.map(item => item.name);
-
- // 鏋勫缓鎶樼嚎鍥炬暟鎹�
- typeDistributionLineSeries.value = [
- {
- name: '璁惧鏁伴噺',
- type: 'line',
- data: typeDistributionData.value.map(item => item.count)
- }
- ];
- }
- } catch (error) {
- console.error('鑾峰彇鍥哄畾璧勪骇鏁版嵁澶辫触锛�', error);
- }
-};
-
-// 鍒濆鍖�
-onMounted(() => {
- // 鑾峰彇鍒楄〃鏁版嵁
- fetchData();
-});
-
-// 鏍煎紡鍖栬揣甯�
-const formatCurrency = (value) => {
- if (!value) return '0.00';
- return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
-
-// 鑾峰彇鐘舵�佹爣绛剧被鍨�
-const getStatusTagType = (status) => {
- switch (status) {
- case '鍦ㄧ敤':
- return 'success';
- case '闂茬疆':
- return 'info';
- case '缁翠慨涓�':
- return 'warning';
- case '鎶ュ簾':
- return 'danger';
- default:
- return 'info';
- }
-};
-
-// 閲嶇疆绛涢�夋潯浠�
-const resetFilters = () => {
- dateRange.value = null;
- equipmentType.value = '';
- fetchData();
-};
-
-// 鍒嗛〉澶勭悊
-const handleSizeChange = (size) => {
- pagination.value.pageSize = size;
- fetchData();
-};
-
-const handleCurrentChange = (page) => {
- pagination.value.currentPage = page;
- fetchData();
-};
-</script>
-
-<style scoped lang="scss">
-/* 鍩虹鏍峰紡琛ュ厖 */
-:root {
- --el-color-primary: #4f46e5;
-}
-
-.el-card {
- position: relative;
- border-radius: 12px;
- padding: 14px 10px 10px 10px;
- box-shadow: 0 2px 8px #eee;
-
- :deep(.el-card__body) {
- padding: 10px 20px !important;
- }
-
- &.bg1 {
- background: url(@/assets/icons/png/1.png) no-repeat 100% 100% !important;
- }
-
- &.bg2 {
- background: url(@/assets/icons/png/2.png) no-repeat 100% 100% !important;
- }
-
- &.bg3 {
- background: url(@/assets/icons/png/3.png) no-repeat 100% 100% !important;
- }
-
- &.bg4 {
- background: url(@/assets/icons/png/4.png) no-repeat 100% 100% !important;
- }
-
- &.bg5 {
- background: url(@/assets/icons/png/5.png) no-repeat 100% 100% !important;
- }
-}
-
-.grid-container {
- /* grid 瀹瑰櫒鍩虹鏍峰紡 */
- display: grid;
- gap: 1rem; /* gap-4 瀵瑰簲 1rem (16px) */
- margin-bottom: 2rem; /* mb-8 瀵瑰簲 2rem (32px) */
-
- p {
- font-size: 22px;
- margin-top: 0px;
- color: #fff;
- }
-
- h3 {
- font-size: 36px;
- font-weight: 500;
- font-family: 'MyCustomFont', sans-serif;
- margin: 10px 0;
- color: #fff;
- }
-}
-
-/* 绉诲姩绔粯璁ゆ牱寮� (grid-cols-1) */
-.grid-container {
- grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-/* 灏忓睆骞曞強浠ヤ笂 (sm:grid-cols-2) */
-@media (min-width: 640px) {
- .grid-container {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
-/* 澶у睆骞曞強浠ヤ笂 (lg:grid-cols-5) */
-@media (min-width: 1024px) {
- .grid-container {
- grid-template-columns: repeat(5, minmax(0, 1fr));
- }
-}
-
-/* 鍗＄墖鎮仠鏁堟灉澧炲己 */
-.el-card:hover {
- transform: translateY(-2px);
-}
-
-.echarts {
- display: flex;
- justify-content: space-between;
-}
-
-/* 鍥捐〃瀹瑰櫒鏍峰紡 */
-.el-chart {
- width: 100%;
- height: 100%;
-}
-
-.section-title {
- position: relative;
- font-size: 18px;
- color: #333;
- padding-left: 10px;
- margin-bottom: 10px;
- font-weight: 700;
-}
-
-.section-title::before {
- position: absolute;
- left: 0;
- top: 0px;
- content: '';
- width: 4px;
- height: 18px;
- background-color: #002FA7;
- border-radius: 2px;
-}
-
-.chart-num {
- position: absolute;
- z-index: 3;
- top: 92px;
- left: 92px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-.pagination-container {
- margin-top: 20px;
- display: flex;
- justify-content: center;
-}
-</style>
diff --git a/src/views/financialManagement/expenseManagement/index.vue b/src/views/financialManagement/expenseManagement/index.vue
deleted file mode 100644
index a45c32d..0000000
--- a/src/views/financialManagement/expenseManagement/index.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
- <div class="app-container">
- <el-form :model="filters" :inline="true">
- <el-form-item label="鏀嚭鏃ユ湡:">
- <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
- placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
- </el-form-item>
- <el-form-item label="浠樻鏂瑰紡:">
- <el-select
- v-model="filters.expenseMethod"
- placeholder="璇烽�夋嫨"
- clearable
- style="width: 200px;"
- >
- <el-option
- v-for="item in checkout_payment"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="getTableData">鎼滅储</el-button>
- <el-button @click="resetFilters">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
- <div class="table_list">
- <div class="actions">
- <div></div>
- <div>
- <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
- <el-button @click="handleOut" icon="download">瀵煎嚭</el-button>
- <el-button
- type="danger"
- icon="Delete"
- :disabled="multipleList.length <= 0"
- @click="deleteRow(multipleList.map((item) => item.id))"
- >
- 鎵归噺鍒犻櫎
- </el-button>
- </div>
- </div>
- <PIMTable
- rowKey="id"
- isSelection
- :column="columns"
- :tableData="dataList"
- :page="{
- current: pagination.currentPage,
- size: pagination.pageSize,
- total: pagination.total,
- }"
- @selection-change="handleSelectionChange"
- @pagination="changePage"
- >
- <template #operation="{ row }">
- <el-button type="primary" text @click="edit(row.id)" icon="editPen">
- 缂栬緫
- </el-button>
- <el-button
- type="primary"
- text
- @click="openFilesFormDia(row)"
- >
- 闄勪欢
- </el-button>
- </template>
- </PIMTable>
- </div>
- <Modal ref="modalRef" @success="getTableData"></Modal>
- <files-dia ref="filesDia"></files-dia>
- </div>
-</template>
-
-<script setup>
-import { usePaginationApi } from "@/hooks/usePaginationApi";
-import { listPage, delAccountExpense } from "@/api/financialManagement/expenseManagement";
-import { onMounted, getCurrentInstance } from "vue";
-import Modal from "./Modal.vue";
-import { ElMessageBox, ElMessage } from "element-plus";
-import dayjs from "dayjs";
-import FilesDia from "../revenueManagement/filesDia.vue";
-
-defineOptions({
- name: "鏀嚭绠＄悊",
-});
-
-// 琛ㄦ牸澶氶�夋閫変腑椤�
-const multipleList = ref([]);
-const { proxy } = getCurrentInstance();
-const modalRef = ref();
-const { checkout_payment } = proxy.useDict("checkout_payment");
-const { expense_types } = proxy.useDict("expense_types");
-const filesDia = ref()
-
-const {
- filters,
- columns,
- dataList,
- pagination,
- getTableData,
- resetFilters,
- onCurrentChange,
-} = usePaginationApi(
- listPage,
- {
- expenseMethod: undefined,
- entryDate: undefined,
- },
- [
- {
- label: "鏀嚭鏃ユ湡",
- align: "center",
- prop: "expenseDate",
- },
- {
- label: "鏀嚭绫诲瀷",
- align: "center",
- prop: "expenseType",
- dataType: "tag",
- formatData: (params) => {
- if (expense_types.value.find((m) => m.value == params)) {
- return expense_types.value.find((m) => m.value == params).label;
- } else {
- return null
- }
- },
- },
- {
- label: "渚涘簲鍟嗗悕绉�",
- align: "center",
- prop: "supplierName",
-
- },
- {
- label: "鏀嚭閲戦",
- align: "center",
- prop: "expenseMoney",
-
- },
- {
- label: "鏀嚭鎻忚堪",
- align: "center",
- prop: "expenseDescribed",
-
- },
- {
- label: "浠樻鏂瑰紡",
- align: "center",
- prop: "expenseMethod",
- dataType: "tag",
- formatData: (params) => {
- if (checkout_payment.value.find((m) => m.value == params)) {
- return checkout_payment.value.find((m) => m.value == params).label;
- } else {
- return null
- }
- },
- },
- {
- label: "鍙戠エ鍙风爜",
- align: "center",
- prop: "invoiceNumber",
-
- },
- {
- label: "澶囨敞",
- align: "center",
- prop: "note",
-
- },
- {
- label: "褰曞叆浜�",
- align: "center",
- prop: "inputUser",
- },
- {
- label: "褰曞叆鏃ユ湡",
- align: "center",
- prop: "inputTime",
-
- },
- {
- fixed: "right",
- label: "鎿嶄綔",
- dataType: "slot",
- slot: "operation",
- align: "center",
- width: "200px",
- },
- ]
-);
-
-// 澶氶�夊悗鍋氫粈涔�
-const handleSelectionChange = (selectionList) => {
- multipleList.value = selectionList;
-};
-
-const add = () => {
- modalRef.value.openModal();
-};
-const edit = (id) => {
- modalRef.value.loadForm(id);
-};
-const changePage = ({ page, limit }) => {
- pagination.currentPage = page;
- pagination.pageSize = limit;
- onCurrentChange(page);
-};
-const deleteRow = (id) => {
- ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ暟鎹�, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- }).then(async () => {
- const { code } = await delAccountExpense(id);
- if (code == 200) {
- ElMessage({
- type: "success",
- message: "鍒犻櫎鎴愬姛",
- });
- getTableData();
- }
- });
-};
-
-const changeDaterange = (value) => {
- if (value) {
- filters.entryDate = value;
- filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
- filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
- } else {
- filters.entryDate = null;
- filters.entryDateStart = undefined;
- filters.entryDateEnd = undefined;
- }
- getTableData();
-};
-
-const handleOut = () => {
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download(`/account/accountExpense/export`, {}, "鏀嚭鍙拌处.xlsx");
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
-};
-// 鎵撳紑闄勪欢寮规
-const openFilesFormDia = (row) => {
- nextTick(() => {
- filesDia.value?.openDialog( row,'鏀嚭')
- })
-};
-
-onMounted(() => {
- getTableData();
-});
-</script>
-
-<style lang="scss" scoped>
-.table_list {
- margin-top: unset;
-}
-.actions {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
-}
-</style>
-
diff --git a/src/views/financialManagement/financialStatements/index.vue b/src/views/financialManagement/financialStatements/index.vue
deleted file mode 100644
index e5f9b23..0000000
--- a/src/views/financialManagement/financialStatements/index.vue
+++ /dev/null
@@ -1,507 +0,0 @@
- <template>
- <div style="padding: 20px;">
- <!-- 椤甸潰鏍囬鍜屾棩鏈熺瓫閫� -->
- <div class="w-full md:w-auto flex items-center gap-3" style="margin-bottom: 20px;">
- <el-date-picker
- v-model="dateRange"
- type="daterange"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- clearable
- @change="handleDateChange"
- class="w-full md:w-auto"
- style="margin-right: 30px;"
- />
-
- <el-button
- type="primary"
- icon="Refresh"
- @click="resetDateRange"
- size="default"
- >
- 閲嶇疆
- </el-button>
- </div>
-
- <main class="container mx-auto px-4 pb-10">
- <!-- 璐㈠姟鎸囨爣鍗＄墖 -->
- <div class="grid-container">
- <!-- 鎬绘敹鍏� -->
- <el-card class="bg1">
- <p>鎬绘敹鍏�</p>
- <h3>
- 楼{{ pageInfo.totalIncome }}
- </h3>
- </el-card>
-
- <!-- 鏀跺叆绗旀暟 -->
- <el-card class="bg2">
- <p>鏀跺叆绗旀暟</p>
- <h3>
- {{ pageInfo.incomeNumber }}
- </h3>
- </el-card>
-
- <!-- 鎬绘敮鍑� -->
- <el-card class="bg3">
- <p>鎬绘敮鍑�</p>
- <h3>
- 楼{{ pageInfo.totalExpense }}
- </h3>
- </el-card>
-
- <!-- 鏀嚭绗旀暟 -->
- <el-card class="bg4">
- <p>鏀嚭绗旀暟</p>
- <h3>
- {{ pageInfo.expenseNumber }}
- </h3>
- </el-card>
-
- <!-- 鍑�鏀跺叆 -->
- <el-card class="bg5">
- <p>鍑�鏀跺叆</p>
- <h3>
- 楼{{ pageInfo.netRevenue }}
- </h3>
- </el-card>
- </div>
-
- <!-- 鏀跺叆缁熻鍥捐〃 -->
- <div class="grid-layout">
- <el-card style="margin-bottom: 20px;">
- <h2 class="section-title">鏀跺叆缁熻(鍏�)</h2>
- <div class="echarts">
- <Echarts :legend="pieLegend0" :chartStyle="chartStylePie"
- :series="materialPieSeries0"
- :tooltip="pieTooltip" style="height: 260px;width: 35%;">
- <div class="chart-num">
- <span style="font-size: 22px;">鏀跺叆</span>
- <span style="font-size: 36px;
- font-weight: 500;
- font-family: 'MyCustomFont', sans-serif;">{{ pageInfo.totalIncome }}</span>
- </div>
- </Echarts>
- <Echarts ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="lineSeries0"
- :tooltip="tooltip"
- :xAxis="xAxis0"
- :yAxis="yAxis0"
- style="height: 260px;width: 64%;"></Echarts>
- </div>
- </el-card>
-
- <!-- 鏀嚭缁熻鍥捐〃 -->
- <el-card>
- <h2 class="section-title">鏀嚭缁熻(鍏�)</h2>
- <div class="echarts">
- <Echarts ref="chart"
- :legend="pieLegend1"
- :chartStyle="chartStylePie"
- :series="materialPieSeries1"
- :tooltip="pieTooltip"
- style="height: 260px;width: 35%;">
- <div class="chart-num">
- <span style="font-size: 22px;">鏀嚭</span>
- <span style="font-size: 36px;
- font-weight: 500;
- font-family: 'MyCustomFont', sans-serif;">{{ pageInfo.totalExpense }}</span>
- </div></Echarts>
- <Echarts ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="lineSeries1"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- style="height: 260px;width: 64%;"></Echarts>
- </div>
- </el-card>
- </div>
- </main>
- </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
-import 'element-plus/dist/index.css';
-import Echarts from "@/components/Echarts/echarts.vue";
-import { reportForms,reportIncome,reportExpense } from "@/api/financialManagement/financialStatements";
-import dayjs from "dayjs";
-
-// 鏃ユ湡鑼冨洿
-const dateRange = ref(null);
-const chartStyle = {
- width: '100%',
- height: '100%', // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
- position:'relative',
-}
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
-}
-const lineLegend = {
- show: false,
-}
-// 鎶樼嚎鍥炬彁绀烘
-const tooltip = reactive({
- trigger: 'axis',
- axisPointer: {
- type: 'line',
- lineStyle: { color: '#aaa' }
- },
- // 鑷畾涔夊唴瀹�
- formatter: function (params) {
- if (!params || !params.length) return ''
- const axisLabel = params[0].axisValueLabel || params[0].axisValue || ''
- const rows = params
- .map(p => {
- const colorDot = `<span style="display:inline-block;margin-right:6px;width:8px;height:8px;border-radius:50%;background:${p.color}"></span>`
- return `${colorDot}${p.seriesName}: ${p.value}`
- })
- .join('<br/>')
- return `<div>${axisLabel}</div><div>${rows}</div>`
- }
-})
-const months = ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�'];
-const lineSeries0 = ref([])
-const lineSeries1 = ref([])
-
-const xAxis0 = ref([
- {
- type: 'category',
- axisTick: { show: true, alignWithLabel: true },
- data: months,
- },
-]);
-const xAxis1 = ref([
- {
- type: 'category',
- axisTick: { show: true, alignWithLabel: true },
- data: months,
- },
-]);
-const yAxis0 = [
-{
- type: 'value',
- name: '鏀跺叆缁熻', // 宸︿晶y杞�
- position: 'left',
- min: 0,
- // 鍧愭爣杞村悕绉版牱寮�
- nameTextStyle: {
- color: '#000',
- fontSize: 14,
- },
- }
-]
-
-const yAxis1 = [
-{
- type: 'value',
- name: '鏀嚭缁熻', // 宸︿晶y杞�
- position: 'left',
- min: 0,
- // 鍧愭爣杞村悕绉版牱寮�
- nameTextStyle: {
- color: '#000',
- fontSize: 14,
- },
- }
-]
-
-const chartStylePie = {
- width: '100%',
- height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
-}
-const pieColors = ['#F04864','#FACC14', '#8543E0', '#1890FF', '#13C2C2','#2FC25B']; // 鍙牴鎹疄闄呰皟鏁�
-const pieData0 = ref([]);
-const pieData1 = ref([]);
-
-const pieLegend0 = computed(() => ({
- show: true,
- top: 'center',
- left: '60%',
- orient: 'vertical',
- icon: 'circle',
- data: pieData0.value.map(item => item.name),
- formatter: function(name) {
- const item = pieData0.value.find(i => i.name === name);
- if (!item) return name;
- return `${name} | ${item.percent} ${item.amount}`;
- },
- textStyle: {
- color: '#333',
- fontSize: 14,
- lineHeight: 26,
- }
-}));
-const pieLegend1 = computed(() => ({
- show: true,
- top: 'center',
- left: '60%',
- orient: 'vertical',
- icon: 'circle',
- data: pieData1.value.map(item => item.name),
- formatter: function(name) {
- const item = pieData1.value.find(i => i.name === name);
- if (!item) return name;
- return `${name} | ${item.percent} ${item.amount}`;
- },
- textStyle: {
- color: '#333',
- fontSize: 14,
- lineHeight: 26,
- }
-}));
-
-const materialPieSeries0 = computed(() => [
- {
- type: 'pie',
- radius: ['50%', '65%'],
- center: ['25%', '50%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: pieData0.value,
- color: pieColors
- }
-]);
-const materialPieSeries1 = computed(() => [
- {
- type: 'pie',
- radius: ['50%', '65%'],
- center: ['25%', '50%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: pieData1.value,
- color: pieColors
- }
-]);
-const pieTooltip = reactive({
- trigger: 'item',
- formatter: function(params) {
- // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
- if (!params.data) return params.name;
- // 鎷兼帴瀹屾暣鍐呭
- return `
- <div>
- <div style="color:${params.color};font-size:16px;">鈼�</div>
- <div>${params.name}</div>
- <div>鍗犳瘮锛�${params.data.percent}</div>
- <div>閲戦锛�${params.data.amount}</div>
- </div>
- `;
- }
-})
-
-
-const pageInfo = ref({
-})
-
-const getData = async () => {
- if (!dateRange.value || !dateRange.value.length) {
- return;
- }
- try {
- const {code,data} = await reportForms({entryDateStart:dateRange.value[0], entryDateEnd:dateRange.value[1]});
- if(code === 200) {
- pageInfo.value = data
- pieData0.value = data.incomeType.map(item=>({
- name:item.typeName,
- value:item.account,
- percent:`${item.proportion*100}%`,
- amount:`楼${item.account}`
- }))
- pieData1.value = data.expenseType.map(item=>({
- name:item.typeName,
- value:item.account,
- percent:`${item.proportion*100}%`,
- amount:`楼${item.account}`
- }))
-
- }
- } catch (error) {
- console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
- }
- try{
- const {code,data} = await reportIncome();
- if(code==200){
- lineSeries0.value = data.map(item=>({
- name:item.typeName,
- type: 'line',
- data:item.account.map(item=>Number(item))
- }))
-
- }
- }catch (error) {
- console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
- }
- try{
- const {code,data} = await reportExpense();
- if(code==200){
- lineSeries1.value = data.map(item=>({
- name:item.typeName,
- type: 'line',
- data:item.account.map(item=>Number(item))
- }))
-
- }
- }catch (error) {
- console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
- }
-};
-
-
-// 鍒濆鍖�
-onMounted(() => {
- // 涓嶈缃粯璁ゆ棩鏈燂紝鐢辩敤鎴锋墜鍔ㄩ�夋嫨
-});
-
-// 澶勭悊鏃ユ湡鑼冨洿鍙樺寲
-const handleDateChange = (newRange) => {
- dateRange.value = newRange;
- if (newRange && newRange.length === 2) {
- getData()
- }
-};
-
-// 閲嶇疆鏃ユ湡鑼冨洿
-const resetDateRange = () => {
- dateRange.value = null;
-};
-
-</script>
-
-<style scoped lang="scss">
-/* 鍩虹鏍峰紡琛ュ厖 */
-:root {
- --el-color-primary: #4f46e5;
-}
-.el-card{
- position: relative;
- border-radius: 12px;
- padding: 14px 10px 10px 10px;
- box-shadow: 0 2px 8px #eee;
- :deep(.el-card__body){
- padding: 10px 20px !important;
- }
- &.bg1{
- background: url(@/assets/icons/png/1.png) no-repeat 100% 100% !important;
- }
- &.bg2{
- background: url(@/assets/icons/png/2.png) no-repeat 100% 100% !important;
- }
- &.bg3{
- background: url(@/assets/icons/png/3.png) no-repeat 100% 100% !important;
- }
- &.bg4{
- background: url(@/assets/icons/png/4.png) no-repeat 100% 100% !important;
- }
- &.bg5{
- background: url(@/assets/icons/png/5.png) no-repeat 100% 100% !important;
- }
-}
-
-.grid-container {
- /* grid 瀹瑰櫒鍩虹鏍峰紡 */
- display: grid;
- gap: 1rem; /* gap-4 瀵瑰簲 1rem (16px) */
- margin-bottom: 2rem; /* mb-8 瀵瑰簲 2rem (32px) */
-
- p{
- font-size: 22px;
- margin-top: 0px;
- color: #fff;
- }
- h3{
- font-size: 36px;
- font-weight: 500;
- font-family: 'MyCustomFont', sans-serif;
- margin: 10px 0;
- color: #fff;
- }
-
-}
-
-/* 绉诲姩绔粯璁ゆ牱寮� (grid-cols-1) */
-.grid-container {
- grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-/* 灏忓睆骞曞強浠ヤ笂 (sm:grid-cols-2) */
-@media (min-width: 640px) {
- .grid-container {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-}
-
-/* 澶у睆骞曞強浠ヤ笂 (lg:grid-cols-5) */
-@media (min-width: 1024px) {
- .grid-container {
- grid-template-columns: repeat(5, minmax(0, 1fr));
- }
-}
-
-/* 鍗＄墖鎮仠鏁堟灉澧炲己 */
-.el-card:hover {
- transform: translateY(-2px);
-}
-.echarts{
- display: flex;
- justify-content: space-between;
-}
-
-/* 鍥捐〃瀹瑰櫒鏍峰紡 */
-.el-chart {
- width: 100%;
- height: 100%;
-}
-.section-title {
- position: relative;
- font-size: 18px;
- color: #333;
- padding-left: 10px;
- margin-bottom: 10px;
- font-weight: 700;
-}
-
-.section-title::before {
- position: absolute;
- left: 0;
- top: 0px;
- content: '';
- width: 4px;
- height: 18px;
- background-color: #002FA7;
- border-radius: 2px;
-}
-.chart-num{
- position: absolute;
- z-index: 3;
- top: 92px;
- left: 92px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-</style>
diff --git a/src/views/financialManagement/inventoryAccounting/index.vue b/src/views/financialManagement/inventoryAccounting/index.vue
deleted file mode 100644
index cca6861..0000000
--- a/src/views/financialManagement/inventoryAccounting/index.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
- <div class="inventory-statistics">
- <!-- 绛涢�夎〃鍗� -->
- <div class="filter-form">
- <el-form :model="filterForm" inline>
-<!-- <el-form-item label="鏃堕棿鑼冨洿">-->
-<!-- <el-date-picker-->
-<!-- v-model="filterForm.dateRange"-->
-<!-- type="daterange"-->
-<!-- range-separator="鑷�"-->
-<!-- start-placeholder="寮�濮嬫棩鏈�"-->
-<!-- end-placeholder="缁撴潫鏃ユ湡"-->
-<!-- />-->
-<!-- </el-form-item>-->
-<!-- <el-form-item label="渚涘簲鍟嗗悕绉�">-->
-<!-- <el-input v-model="filterForm.supplierName" style="width: 240px" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" />-->
-<!-- </el-form-item>-->
-<!-- <el-form-item label="浜у搧鍚嶇О">-->
-<!-- <el-input v-model="filterForm.productCategory" style="width: 240px" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" />-->
-<!-- </el-form-item>-->
- <el-form-item>
- <el-button type="primary" @click="handleSearch">鏌ヨ</el-button>
-<!-- <el-button @click="handleReset">閲嶇疆</el-button>-->
-<!-- <el-button type="success" @click="handleExport">瀵煎嚭</el-button>-->
- </el-form-item>
- </el-form>
- </div>
-
- <!-- 缁熻姹囨�诲崱鐗� -->
- <div class="summary-cards">
- <el-row :gutter="20">
- <el-col :span="6">
- <el-card class="summary-card">
- <div class="summary-item">
- <p class="summary-title">鎬诲簱瀛樻暟閲�</p>
- <p class="summary-value">{{ summaryData.totalInventoryCount }}</p>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="summary-card">
- <div class="summary-item">
- <p class="summary-title">鎬诲簱瀛橀噾棰�</p>
- <p class="summary-value">楼{{ summaryData.totalInventoryValue }}</p>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="summary-card">
- <div class="summary-item">
- <p class="summary-title">搴撳瓨鍙樺姩鏁伴噺</p>
- <p class="summary-value">{{ summaryData.inventoryChangeCount }}</p>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="summary-card">
- <div class="summary-item">
- <p class="summary-title">搴撳瓨鍙樺姩閲戦</p>
- <p class="summary-value">楼{{ summaryData.inventoryChangeValue }}</p>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </div>
-
- <!-- 鍥捐〃鍖哄煙 -->
- <div class="chart-section">
- <el-row :gutter="20">
- <el-col :span="12">
- <el-card class="chart-card">
- <template #header>
- <div class="card-header">
- <span>搴撳瓨鍒嗙被鍗犳瘮</span>
- </div>
- </template>
- <div id="category-pie-chart" style="height: 400px;"></div>
- </el-card>
- </el-col>
- <el-col :span="12">
- <el-card class="chart-card">
- <template #header>
- <div class="card-header">
- <span>搴撳瓨閲戦瓒嬪娍</span>
- </div>
- </template>
- <div id="amount-trend-chart" style="height: 400px;"></div>
- </el-card>
- </el-col>
- </el-row>
- </div>
-
- <!-- 鏁版嵁琛ㄦ牸 -->
- <div class="table_list">
- <el-table
- :data="tableData"
- v-loading="loading"
- border
- style="width: 100%"
- :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
- >
- <el-table-column align="center" type="selection" width="55" />
- <el-table-column align="center" label="搴忓彿" type="index" width="60" />
- <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" width="240" show-overflow-tooltip />
- <el-table-column label="浜у搧" prop="productCategory" min-width="100" show-overflow-tooltip />
- <el-table-column label="瑙勬牸鍨嬪彿" prop="specificationModel" min-width="200" show-overflow-tooltip />
- <el-table-column label="鍗曚綅" prop="unit" width="70" show-overflow-tooltip />
- <el-table-column label="鍏ュ簱鏁伴噺" prop="inboundNum" width="90" show-overflow-tooltip />
- <el-table-column label="搴撳瓨鏁伴噺" prop="inboundNum0" width="90" show-overflow-tooltip />
- <el-table-column label="鍚◣鍗曚环" prop="taxInclusiveUnitPrice" width="100" show-overflow-tooltip />
- <el-table-column label="鍚◣鎬讳环" prop="taxInclusiveTotalPrice" width="100" show-overflow-tooltip />
- <el-table-column label="绋庣巼(%)" prop="taxRate" width="80" show-overflow-tooltip />
- <el-table-column label="涓嶅惈绋庢�讳环" prop="taxExclusiveTotalPrice" width="100" show-overflow-tooltip />
- <el-table-column label="鍏ュ簱浜�" prop="createBy" width="100" 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 { ref, reactive, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-import {getStockInPage} from "@/api/inventoryManagement/stockIn.js";
-
-// 鐘舵�佸彉閲�
-const loading = ref(false)
-const total = ref(0)
-const tableData = ref([])
-const summaryData = ref({})
-const page = reactive({
- current: 1,
- size: 100,
-})
-
-// 鍥捐〃瀹炰緥
-const categoryPieChart = ref(null)
-const amountTrendChart = ref(null)
-
-// 绛涢�夎〃鍗�
-const filterForm = reactive({
- dateRange: [],
- supplierName: '',
- productCategory: ''
-})
-
-const paginationChange = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- loadData()
-}
-
-// 鍒濆鍖栨暟鎹�
-onMounted(() => {
- loadSummaryData()
- loadData()
-})
-
-// 鍔犺浇缁熻姹囨�绘暟鎹�
-const loadSummaryData = () => {
- getStockInChartData().then(res => {
- summaryData.value = res.data
- })
-}
-
-// 鍔犺浇搴撳瓨鏁版嵁
-const loadData = () => {
- loading.value = true
- getStockInPage({ ...filterForm, ...page }).then(res => {
- loading.value = false
- tableData.value = res.data.records
- total.value = res.data.total
- console.log('res', res.data.records)
-
- // 鏁版嵁鍔犺浇瀹屾垚鍚庢覆鏌撳浘琛�
- nextTick(() => {
- renderCategoryPieChart()
- renderAmountTrendChart()
- })
- }).catch(() => {
- loading.value = false
- })
-}
-
-// 娓叉煋鍒嗙被鍗犳瘮楗煎浘
-const renderCategoryPieChart = () => {
- if (!categoryPieChart.value) {
- categoryPieChart.value = echarts.init(document.getElementById('category-pie-chart'))
- }
- // 鏍规嵁 tableData 鎸� productCategory 鍒嗙被骞惰绠� inboundNum0 鏁伴噺鎬诲拰
- const categoryMap = tableData.value.reduce((acc, cur) => {
- acc[cur.productCategory] = (acc[cur.productCategory] || 0) + cur.inboundNum0
- return acc
- }, {})
-
- // 灏嗗垎绫荤粨鏋滆浆鎹负 ECharts 楗煎浘鎵�闇�鐨勬暟鎹牸寮�
- const categoryData = Object.entries(categoryMap).map(([name, value]) => ({
- name: name,
- value: value
- }))
- const option = {
- title: {
- text: '搴撳瓨鍒嗙被鍗犳瘮',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '搴撳瓨鍒嗙被',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: true,
- formatter: '{b}: {d}%'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '16',
- fontWeight: 'bold'
- }
- },
- data: categoryData
- }
- ]
- }
-
- categoryPieChart.value.setOption(option)
-}
-// 娓叉煋閲戦瓒嬪娍鎶樼嚎鍥�
-const renderAmountTrendChart = () => {
- if (!amountTrendChart.value) {
- amountTrendChart.value = echarts.init(document.getElementById('amount-trend-chart'))
- }
- // 鎸夋湀浠藉垎缁勫苟璁＄畻taxInclusiveTotalPrice鎬诲拰
- const monthlyAmounts = tableData.value.reduce((acc, cur) => {
- const date = new Date(cur.createTime);
- const month = date.getMonth() + 1;
-
- // 纭繚month鍦�1-12鑼冨洿鍐�
- if (month >= 1 && month <= 12) {
- acc[month] = (acc[month] || 0) + cur.taxInclusiveTotalPrice;
- }
- return acc;
- }, {});
-
- // 鐢熸垚12涓湀鐨勬暟鎹紝缂哄け鏈堜唤鐢�0浠ｆ浛
- const amounts = [];
- for (let i = 1; i <= 12; i++) {
- amounts.push(monthlyAmounts[i] || 0);
- }
- const dates = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
-
- const option = {
- title: {
- text: '搴撳瓨閲戦瓒嬪娍',
- left: 'center'
- },
- tooltip: {
- trigger: 'axis',
- formatter: '{b}: 楼{c}'
- },
- xAxis: {
- type: 'category',
- data: dates
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- formatter: '楼{value}'
- }
- },
- series: [
- {
- name: '搴撳瓨閲戦',
- type: 'line',
- data: amounts,
- smooth: true,
- areaStyle: {}
- }
- ]
- }
-
- amountTrendChart.value.setOption(option)
-}
-
-// 鏌ヨ鎿嶄綔
-const handleSearch = () => {
- loadData()
-}
-
-// 閲嶇疆鎿嶄綔
-const handleReset = () => {
- filterForm.dateRange = []
- filterForm.supplierName = ''
- filterForm.productCategory = ''
- loadData()
-}
-
-// 瀵煎嚭鎿嶄綔
-const handleExport = () => {
- console.log('瀵煎嚭鏁版嵁')
-}
-
-// 绐楀彛澶у皬鏀瑰彉鏃讹紝閲嶆柊璋冩暣鍥捐〃澶у皬
-window.addEventListener('resize', () => {
- if (categoryPieChart.value) categoryPieChart.value.resize()
- if (amountTrendChart.value) amountTrendChart.value.resize()
-})
-</script>
-
-<style scoped>
-.inventory-statistics {
- padding: 20px;
-}
-
-.filter-form {
- margin-bottom: 20px;
-}
-
-.summary-cards {
- margin-bottom: 20px;
-}
-
-.summary-card {
- text-align: center;
- height: 100px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.summary-item {
- width: 100%;
-}
-
-.summary-title {
- font-size: 14px;
- color: #606266;
- margin-bottom: 5px;
-}
-
-.summary-value {
- font-size: 24px;
- font-weight: bold;
- color: #303133;
-}
-
-.summary-value.warning {
- color: #e6a23c;
-}
-
-.summary-value.danger {
- color: #f56c6c;
-}
-
-.chart-section {
- margin-bottom: 20px;
-}
-
-.chart-card {
- height: 460px;
-}
-
-.card-header {
- font-weight: bold;
-}
-
-.table_list {
- margin-top: 20px;
-}
-
-.pagination {
- text-align: right;
- margin-top: 20px;
-}
-</style>
--
Gitblit v1.9.3