From 3bc5236c5ff1b8b7f6b71648836b265446f39afc Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期四, 29 一月 2026 11:26:45 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue | 243 +++++
src/views/reportAnalysis/financialAnalysis/components/CarouselCards.vue | 306 ++++++
src/views/reportAnalysis/financialAnalysis/components/PanelHeader.vue | 33
src/views/reportAnalysis/financialAnalysis/components/center-center.vue | 183 ++++
src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue | 94 ++
src/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue | 94 ++
src/views/reportAnalysis/financialAnalysis/components/center-top.vue | 210 ++++
src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue | 4
src/api/safeProduction/hazardousMaterialsControl.js | 33
src/views/reportAnalysis/financialAnalysis/index.vue | 291 ++++++
src/views/reportAnalysis/financialAnalysis/components/ProductTypeSwitch.vue | 85 +
src/views/reportAnalysis/financialAnalysis/components/left-top.vue | 105 ++
src/views/procurementManagement/invoiceEntry/components/Modal.vue | 42
src/views/safeProduction/hazardousMaterialsControl/index.vue | 891 ++++++++++++++++++++
src/views/safeProduction/dangerInvestigation/index.vue | 25
15 files changed, 2,604 insertions(+), 35 deletions(-)
diff --git a/src/api/safeProduction/hazardousMaterialsControl.js b/src/api/safeProduction/hazardousMaterialsControl.js
new file mode 100644
index 0000000..0f5557f
--- /dev/null
+++ b/src/api/safeProduction/hazardousMaterialsControl.js
@@ -0,0 +1,33 @@
+import request from "@/utils/request";
+
+export function safeHazardRecordListPage(query) {
+ return request({
+ url: "/safeHazardRecord/page",
+ method: "get",
+ params: query,
+ });
+}
+
+export function safeHazardRecordDel(ids) {
+ return request({
+ url: '/safeHazardRecord/' + ids,
+ method: 'delete',
+ data: ids
+ })
+}
+// 鏂板鍗遍櫓婧愬彴璐�
+export function safeHazardRecordAdd(query) {
+ return request({
+ url: '/safeHazardRecord/borrow',
+ method: 'post',
+ data: query
+ })
+}
+
+export function safeHazardRecordUpdate(query) {
+ return request({
+ url: '/safeHazardRecord/return',
+ method: 'put',
+ data: query
+ })
+}
\ No newline at end of file
diff --git a/src/views/procurementManagement/invoiceEntry/components/Modal.vue b/src/views/procurementManagement/invoiceEntry/components/Modal.vue
index efd4a4e..b723175 100644
--- a/src/views/procurementManagement/invoiceEntry/components/Modal.vue
+++ b/src/views/procurementManagement/invoiceEntry/components/Modal.vue
@@ -411,13 +411,15 @@
item.futureTicketsAmount !== undefined ? item.futureTicketsAmount : (item.taxInclusiveTotalPrice || 0)
);
- // 鏂板鏃讹細鏈寮�绁ㄩ粯璁や笉濉紙0锛夛紝閬垮厤涓�鎵撳紑灏辨妸鈥滄湭鏉ョエ鏁扳�濇墸鎴� 0
- item.ticketsNum = 0;
- item.ticketsAmount = 0;
-
- // 椤甸潰灞曠ず鐨勨�滄湭鏉ョエ鏁�/鏈潵绁ㄩ噾棰濃�濋粯璁ゅ睍绀哄師濮嬫湭鏉ュ��
- item.futureTickets = item.tempFutureTickets;
- item.futureTicketsAmount = item.tempFutureTicketsAmount;
+ // 鏂板鏃讹細鏈寮�绁ㄦ暟榛樿 = 鏈潵绁ㄦ暟锛堜笖涓嶈兘澶т簬鏈潵绁ㄦ暟锛�
+ item.ticketsNum = Number(item.tempFutureTickets || 0);
+ // 鑱斿姩璁＄畻鏈寮�绁ㄩ噾棰濄�佹湭鏉ョエ鏁般�佹湭鏉ョエ閲戦
+ const unitPrice = Number(item.taxInclusiveUnitPrice || 0);
+ item.ticketsAmount = Number((item.ticketsNum * unitPrice).toFixed(2));
+ item.futureTickets = Number((item.tempFutureTickets - item.ticketsNum).toFixed(2));
+ item.futureTicketsAmount = Number(
+ (item.tempFutureTicketsAmount - item.ticketsAmount).toFixed(2)
+ );
});
form.productData = allProductData;
@@ -426,7 +428,7 @@
const totalAmount = allProductData.reduce((sum, item) => {
return sum + (Number(item.ticketsAmount) || 0);
}, 0);
- form.invoiceAmount = totalAmount.toFixed(2);
+ form.invoiceAmount = Number(totalAmount.toFixed(2));
// 瀛樺偍閫変腑鐨勫悎鍚屾暟鎹�
selectedContracts.value = selectedRows;
@@ -467,11 +469,11 @@
row.ticketsNum = Number(row.tempFutureTickets || 0);
}
// 璁＄畻鏈鏉ョエ閲戦
- row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
+ row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
// 璁＄畻鏈潵绁ㄦ暟
- row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
+ row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
// 璁＄畻鏈潵绁ㄩ噾棰�
- row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
+ row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
calculateinvoiceAmount();
};
@@ -494,12 +496,12 @@
proxy.$modal.msgWarning("鏈寮�绁ㄦ暟涓嶈兘澶т簬鏈潵绁ㄦ暟");
row.ticketsNum = Number(row.tempFutureTickets || 0);
// 閲嶆柊璁＄畻鏈鏉ョエ閲戦
- row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2);
+ row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
}
// 璁＄畻鏈潵绁ㄦ暟
- row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
+ row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
// 璁＄畻鏈潵绁ㄩ噾棰�
- row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
+ row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
calculateinvoiceAmount();
};
@@ -510,7 +512,7 @@
invoiceAmountTotal += Number(item.ticketsAmount);
}
});
- form.invoiceAmount = invoiceAmountTotal.toFixed(2);
+ form.invoiceAmount = Number(invoiceAmountTotal.toFixed(2));
};
const open = async (type, selectedRows) => {
@@ -518,9 +520,15 @@
// 濡傛灉鏄壒閲忔搷浣滐紝璁剧疆鏍囬
if (Array.isArray(selectedRows) && selectedRows.length > 1) {
- modalOptions.title = `鎵归噺鏂板 (${selectedRows.length}鏉�)`;
+ modalOptions.value = {
+ ...(modalOptions.value || {}),
+ title: `鎵归噺鏂板 (${selectedRows.length}鏉�)`,
+ };
} else {
- modalOptions.title = type === "add" ? "鏂板" : "缂栬緫";
+ modalOptions.value = {
+ ...(modalOptions.value || {}),
+ title: type === "add" ? "鏂板" : "缂栬緫",
+ };
}
// 濡傛灉鏄崟涓搷浣滐紝鑾峰彇id
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
index 8277650..ccd7504 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/center-bottom.vue
@@ -51,8 +51,8 @@
itemHeight: 12,
textStyle: { color: '#B8C8E0', fontSize: 14 },
data: [
- { name: '鍑哄簱', itemStyle: { color: '#4EE4FF' } },
- { name: '鍏ュ簱', itemStyle: { color: '#00D68F' } },
+ { name: '鍑哄簱', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
+ { name: '鍏ュ簱', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
],
}
diff --git a/src/views/reportAnalysis/financialAnalysis/components/CarouselCards.vue b/src/views/reportAnalysis/financialAnalysis/components/CarouselCards.vue
new file mode 100644
index 0000000..0498824
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/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/financialAnalysis/components/DateTypeSwitch.vue b/src/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue
new file mode 100644
index 0000000..0c57b25
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/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/financialAnalysis/components/PanelHeader.vue b/src/views/reportAnalysis/financialAnalysis/components/PanelHeader.vue
new file mode 100644
index 0000000..313f1df
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/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/financialAnalysis/components/ProductTypeSwitch.vue b/src/views/reportAnalysis/financialAnalysis/components/ProductTypeSwitch.vue
new file mode 100644
index 0000000..87cde44
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/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="3">鍗婃垚鍝�</el-radio-button>
+ <el-radio-button :label="2">鎴愬搧</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/financialAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue
new file mode 100644
index 0000000..1d15a39
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue
@@ -0,0 +1,94 @@
+<template>
+ <div>
+ <PanelHeader title="鍒╂鼎瓒嬪娍" />
+ <div class="main-panel panel-item-customers">
+ <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 PanelHeader from './PanelHeader.vue'
+
+const chartStyle = { width: '100%', height: '150%' }
+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 xAxis1 = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: [],
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter(params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value} 鍏�</div>`
+ })
+ return result
+ },
+}
+
+const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]
+
+onMounted(() => {
+ // 鍏堢敤鏈湴鍋囨暟鎹紙鍚庣画濡傛湁鎺ュ彛鍙浛鎹級
+ xAxis1.value[0].data = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�']
+ barSeries1.value[0].data = [12000, 18000, 9000, 16000, 14000, 20000]
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 428px;
+}
+</style>
+
diff --git a/src/views/reportAnalysis/financialAnalysis/components/center-center.vue b/src/views/reportAnalysis/financialAnalysis/components/center-center.vue
new file mode 100644
index 0000000..7778752
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/center-center.vue
@@ -0,0 +1,183 @@
+<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="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'
+
+const chartStyle = { width: '100%', height: '100%' }
+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: 'rgba(11, 137, 254, 1)' } },
+ { name: '鏀嚭', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
+ ],
+}
+
+const xAxis1 = ref([
+ {
+ type: 'category',
+ data: [],
+ 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, 1)', width: 2 },
+ itemStyle: { color: 'rgba(11, 137, 254, 1)', 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: [],
+ emphasis: { focus: 'series' },
+ },
+ {
+ name: '鏀嚭',
+ type: 'line',
+ smooth: false,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
+ itemStyle: { color: 'rgba(11, 249, 254, 1)', 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: [],
+ emphasis: { focus: 'series' },
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'line' },
+ formatter(params) {
+ let result = params[0].axisValue + '<br/>'
+ params.forEach((item) => {
+ result += `${item.marker} ${item.seriesName}: ${item.value} 鍏�<br/>`
+ })
+ return result
+ },
+}
+
+// 鍏堢敤鏈湴鍋囨暟鎹紙鍚庣画濡傛湁鎺ュ彛鍙洿鎺ユ浛鎹㈣繖閲岋級
+const setMockData = () => {
+ const dates = ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28']
+ xAxis1.value[0].data = dates
+ lineSeries.value[0].data = [1200, 1800, 900, 1600, 1400, 2000, 1700] // 鏀跺叆
+ lineSeries.value[1].data = [800, 1100, 700, 1200, 1000, 1500, 1300] // 鏀嚭
+}
+
+onMounted(() => {
+ setMockData()
+})
+</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/financialAnalysis/components/center-top.vue b/src/views/reportAnalysis/financialAnalysis/components/center-top.vue
new file mode 100644
index 0000000..fc61311
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/center-top.vue
@@ -0,0 +1,210 @@
+<template>
+ <div>
+ <!-- 椤堕儴鏀舵敮鍗＄墖 -->
+ <div class="finance-cards">
+ <!-- 鏈堝害鏀跺叆 -->
+ <div class="finance-card income-card">
+ <div class="icon-box">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ </div>
+ <div class="card-body">
+ <div class="card-left">
+ <div class="card-title">鏈堝害鏀跺叆</div>
+ <div class="card-amount">{{ income.amount }}</div>
+ </div>
+ <div class="card-right">
+ <div class="metric-row">
+ <span class="metric-label">鍥炴鐜�</span>
+ <span class="metric-value" :class="metricClass(income.repayRate)">
+ {{ formatPercent(income.repayRate.value) }}
+ <span class="arrow">{{ metricArrow(income.repayRate) }}</span>
+ </span>
+ </div>
+ <div class="metric-row">
+ <span class="metric-label">閫炬湡鏁�</span>
+ <span class="metric-value metric-up">{{ income.overdueCount }}</span>
+ </div>
+ <div class="metric-row">
+ <span class="metric-label">閫炬湡鐜�</span>
+ <span class="metric-value" :class="metricClass(income.overdueRate)">
+ {{ formatPercent(income.overdueRate.value) }}
+ <span class="arrow">{{ metricArrow(income.overdueRate) }}</span>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鏈堝害鏀嚭 -->
+ <div class="finance-card expense-card">
+ <div class="icon-box">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ </div>
+ <div class="card-body">
+ <div class="card-left">
+ <div class="card-title">鏈堝害鏀嚭</div>
+ <div class="card-amount">{{ expense.amount }}</div>
+ </div>
+ <div class="card-right">
+ <div class="metric-row">
+ <span class="metric-label">鍑�鍒╂鼎</span>
+ <span class="metric-value metric-down">{{ expense.netProfit }}</span>
+ </div>
+ <div class="metric-row">
+ <span class="metric-label">姣涘埄娑�</span>
+ <span class="metric-value metric-down">{{ expense.grossProfit }}</span>
+ </div>
+ <div class="metric-row">
+ <span class="metric-label">鍒╂鼎鐜�</span>
+ <span class="metric-value" :class="metricClass(expense.profitRate)">
+ {{ formatPercent(expense.profitRate.value) }}
+ <span class="arrow">{{ metricArrow(expense.profitRate) }}</span>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 鏆傛椂浣跨敤鏈湴绀轰緥鏁版嵁锛屽悗缁彲鎺ョ湡瀹炴帴鍙ｈ鐩�
+const income = ref({
+ amount: 102,
+ repayRate: { value: 52, trend: 1 }, // 姝ｅ悜 鈫�
+ overdueCount: 10092,
+ overdueRate: { value: 12, trend: 1 },
+})
+
+const expense = ref({
+ amount: 102,
+ netProfit: 291013,
+ grossProfit: 10092,
+ profitRate: { value: 12, trend: -1 }, // 璐熷悜 鈫�
+})
+
+const formatPercent = (val) => {
+ const num = Number(val) || 0
+ return `${num.toFixed(2)}%`
+}
+
+const metricClass = (metric) =>
+ Number(metric.trend) >= 0 ? 'metric-up' : 'metric-down'
+
+const metricArrow = (metric) =>
+ Number(metric.trend) >= 0 ? '鈫�' : '鈫�'
+</script>
+
+<style scoped>
+.finance-cards {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.finance-card {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding: 18px 24px;
+ background-image: url('@/assets/BI/border@2x.png');
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ min-height: 138px;
+}
+
+.icon-box {
+ width: 92px;
+ height: 92px;
+ /* border: 1px dashed rgba(208, 231, 255, 0.55); */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 18px;
+}
+
+.card-icon {
+ width: 78px;
+ height: 78px;
+}
+
+.card-body {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+}
+
+.card-left {
+ min-width: 90px;
+}
+
+.card-title {
+ font-weight: 400;
+ font-size: 18px;
+ color: rgba(208, 231, 255, 0.7);
+}
+
+.card-amount {
+ font-weight: 500;
+ font-size: 36px;
+ line-height: 1.1;
+ margin-top: 8px;
+ background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.card-right {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding-right: 6px;
+}
+
+.metric-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #d0e7ff;
+ white-space: nowrap;
+}
+
+.metric-label {
+ margin-right: 12px;
+}
+
+.metric-label {
+ opacity: 0.8;
+}
+
+.metric-value {
+ font-weight: 600;
+ display: inline-flex;
+ align-items: center;
+}
+
+.metric-value .arrow {
+ font-size: 13px;
+ margin-left: 4px;
+}
+
+.metric-up {
+ color: #00c853;
+}
+
+.metric-down {
+ color: #ff5252;
+}
+
+
+</style>
diff --git a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
new file mode 100644
index 0000000..076dcbe
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
@@ -0,0 +1,243 @@
+<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 { rawMaterialPurchaseAmountRatio } 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 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: '52%',
+ itemGap: 30,
+ show: false,
+ 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, 10],
+ },
+ 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: ['50%', '75%'],
+ center: ['50%', '60%'],
+ itemStyle: {
+ borderColor: '#0a1c3a',
+ borderWidth: 2,
+ color: function (params) {
+ return landColors[params.dataIndex % landColors.length]
+ },
+ },
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ fontSize: 12,
+ lineHeight: 18,
+ // rich: {
+ // ...dotRich,
+ // parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
+ // child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ // },
+ },
+ minAngle: 15,
+ data: dataList.value,
+ animationType: 'scale',
+ animationEasing: 'elasticOut',
+ animationDelay: function () {
+ return Math.random() * 200
+ },
+ },
+ {
+ // 鍐呭湀
+ type: 'pie',
+ radius: ['50%', '60%'],
+ center: ['50%', '60%'],
+ 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 fetchData = () => {
+ rawMaterialPurchaseAmountRatio()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const items = res.data
+ cardItems.value = items.map((item) => ({
+ label: item.name,
+ value: item.value,
+ unit: '鍏�',
+ rate: item.rate,
+ }))
+ dataList.value = items.map((it) => ({
+ name: it.name,
+ value: parseFloat(it.value) || 0,
+ rate: it.rate,
+ children: [],
+ }))
+ landSeries.value[0].data = dataList.value
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鍘熸潗鏂欓噰璐噾棰濆崰姣斿け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</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: 50%;
+ top: 60%;
+ transform: translate(-51.5%, -50%);
+ width: 380px;
+ height: 380px;
+ 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/financialAnalysis/components/left-top.vue b/src/views/reportAnalysis/financialAnalysis/components/left-top.vue
new file mode 100644
index 0000000..1c9f085
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/left-top.vue
@@ -0,0 +1,105 @@
+<template>
+ <div>
+ <PanelHeader title="鍥炴涓庡紑绁ㄥ垎鏋�" />
+ <div class="main-panel panel-item-customers">
+ <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 { productSalesAnalysis } from '@/api/viewIndex.js'
+import PanelHeader from './PanelHeader.vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+
+const chartStyle = {
+ width: '100%',
+ height: '160%',
+}
+
+const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
+const barLegend = { show: true, textStyle: { color: '#B8C8E0' }, data: ['閲戦'] }
+const barSeries1 = ref([
+ {
+ name: '閲戦',
+ type: 'bar',
+ barGap: 0,
+ barWidth: 30,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#00A4ED' },
+ { offset: 0, color: '#4EE4FF' },
+ ],
+ },
+ },
+ data: [],
+ },
+])
+
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter(params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ result += `<div>${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 fetchData = () => {
+ productSalesAnalysis()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const items = res.data
+ xAxis1.value[0].data = items.map((item) => item.name)
+ barSeries1.value[0].data = items.map((item) => parseFloat(item.value) || 0)
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇浜у搧閿�鍞噾棰濆垎鏋愬け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</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;
+}
+</style>
diff --git a/src/views/reportAnalysis/financialAnalysis/index.vue b/src/views/reportAnalysis/financialAnalysis/index.vue
new file mode 100644
index 0000000..8d90a59
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/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">璐㈠姟鏁版嵁鍒嗘瀽</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/safeProduction/dangerInvestigation/index.vue b/src/views/safeProduction/dangerInvestigation/index.vue
index eaa12bb..1878370 100644
--- a/src/views/safeProduction/dangerInvestigation/index.vue
+++ b/src/views/safeProduction/dangerInvestigation/index.vue
@@ -215,7 +215,7 @@
prop="createUser">
<el-select v-model="form.createUser"
placeholder="璇烽�夋嫨"
- @change="handleChange"
+ disabled
clearable>
<el-option v-for="item in userList"
:key="item.userId"
@@ -228,14 +228,13 @@
<el-form-item label="涓婃姤鏃堕棿锛�"
prop="createTime">
<el-date-picker style="width: 100%"
- readonly
+ disabled
v-model="form.createTime"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
placeholder="璇烽�夋嫨"
- clearable
- :disabled="operationType === 'view'" />
+ clearable />
</el-form-item>
</el-col>
</el-row>
@@ -263,8 +262,7 @@
format="YYYY-MM-DD"
type="date"
placeholder="璇烽�夋嫨"
- clearable
- :disabled="operationType === 'view'" />
+ clearable />
</el-form-item>
</el-col>
</el-row>
@@ -345,8 +343,7 @@
format="YYYY-MM-DD"
type="date"
placeholder="璇烽�夋嫨"
- clearable
- :disabled="operationType === 'view'" />
+ clearable />
</el-form-item>
</el-col>
</el-row>
@@ -586,12 +583,6 @@
customer: "",
});
- const handleChange = userId => {
- const selectedUser = userList.value.find(user => user.userId === userId);
- if (selectedUser) {
- form.value.createUserName = selectedUser.nickName;
- }
- };
const handleChange2 = userId => {
const selectedUser = userList.value.find(user => user.userId === userId);
if (selectedUser) {
@@ -722,8 +713,8 @@
hiddenCode: "", // 闅愭偅缂栧彿
location: "", // 闅愭偅浣嶇疆
hiddenDesc: "", // 闅愭偅鎻忚堪
- createUser: "", // 涓婃姤浜�
- createUserName: "",
+ createUser: Number(currentUserId.value), // 涓婃姤浜�
+ createUserName: currentUserName.value,
createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 涓婃姤鏃堕棿
rectifyUserId: "", // 鏁存敼璐ｄ换浜�
rectifyUserName: "",
@@ -952,9 +943,11 @@
});
};
const currentUserId = ref("");
+ const currentUserName = ref("");
const getCurrentFactoryName = async () => {
let res = await userStore.getInfo();
currentUserId.value = res.user.userId;
+ currentUserName.value = res.user.nickName;
};
/**
diff --git a/src/views/safeProduction/hazardousMaterialsControl/index.vue b/src/views/safeProduction/hazardousMaterialsControl/index.vue
new file mode 100644
index 0000000..5be4bdc
--- /dev/null
+++ b/src/views/safeProduction/hazardousMaterialsControl/index.vue
@@ -0,0 +1,891 @@
+<template>
+ <div class="app-container">
+ <div class="search_form">
+ <div>
+ <span class="search_title">鍗遍櫓婧愬悕绉帮細</span>
+ <el-input v-model="searchForm.name"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ュ嵄闄╂簮鍚嶇О鎼滅储"
+ @change="handleQuery"
+ clearable
+ :prefix-icon="Search" />
+ <span class="search_title ml10">鍗遍櫓婧愮被鍨嬶細</span>
+ <el-select v-model="searchForm.type"
+ clearable
+ @change="handleQuery"
+ style="width: 240px">
+ <el-option v-for="item in knowledgeTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
+ </el-select>
+ <el-button type="primary"
+ @click="handleQuery"
+ style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ </div>
+ <div>
+ <el-button type="primary"
+ @click="openForm('add')">鍘婚鐢�</el-button>
+ <el-button type="danger"
+ plain
+ @click="handleDelete">鍒犻櫎</el-button>
+ </div>
+ </div>
+ <div class="table_list">
+ <PIMTable rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ @selection-change="handleSelectionChange"
+ :tableLoading="tableLoading"
+ @pagination="pagination1"
+ :total="page.total"></PIMTable>
+ </div>
+ <!-- 鏂板/缂栬緫鐭ヨ瘑寮圭獥 -->
+ <el-dialog v-model="dialogVisible"
+ :title="dialogTitle"
+ width="800px"
+ :close-on-click-modal="false">
+ <el-form ref="formRef"
+ v-if="dialogType === 'add'"
+ :model="form"
+ :rules="rules"
+ label-width="140px"
+ label-position="top">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍗遍櫓婧�"
+ prop="safeHazardId">
+ <el-input v-model="valueItem.name"
+ readonly
+ @click="openSafeHazardSelect"
+ placeholder="璇烽�夋嫨鍗遍櫓婧�" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鎵�鍦ㄤ綅缃�"
+ prop="location">
+ <el-input v-model="valueItem.location"
+ disabled
+ placeholder="鑷姩甯﹀嚭" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍗遍櫓婧愮被鍨�"
+ prop="type">
+ <el-input v-model="valueItem.type"
+ disabled
+ placeholder="鑷姩甯﹀嚭" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="椋庨櫓绛夌骇"
+ prop="riskLevel">
+ <el-input v-model="valueItem.riskLevel"
+ disabled
+ placeholder="鑷姩甯﹀嚭" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="搴撳瓨鏁伴噺"
+ prop="stockQty">
+ <el-input v-model="valueItem.stockQty"
+ disabled
+ placeholder="鑷姩甯﹀嚭" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="棰嗙敤鐢ㄩ��"
+ prop="applyPurpose">
+ <el-input v-model="form.applyPurpose"
+ placeholder="璇疯緭鍏ラ鐢ㄧ敤閫�" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="棰嗙敤鏁伴噺"
+ prop="applyQty">
+ <el-input v-model="form.applyQty"
+ type="number"
+ min="0"
+ @input="handleApplyQtyChange"
+ placeholder="璇疯緭鍏ラ鐢ㄦ暟閲�" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="棰嗙敤浜�"
+ prop="applyUserId">
+ <el-select v-model="form.applyUserId"
+ disabled
+ placeholder="璇烽�夋嫨"
+ clearable>
+ <el-option v-for="item in userList"
+ :key="item.userId"
+ :label="item.nickName"
+ :value="item.userId" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="棰嗙敤鏃堕棿"
+ prop="applyTime">
+ <el-date-picker style="width: 100%"
+ disabled
+ v-model="form.applyTime"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ type="date"
+ placeholder="璇烽�夋嫨"
+ clearable />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <el-descriptions :column="2"
+ style="margin-bottom: 20px"
+ v-if="dialogType === 'edit' || dialogType === 'view'"
+ border>
+ <el-descriptions-item label="鍗遍櫓婧愮紪鐮�">
+ <span>{{ form.code }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍗遍櫓婧愬悕绉�">
+ <span>{{ form.name }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍗遍櫓婧愮被鍨�">
+ <span>{{ getTypeLabel(form.type) }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="鎵�鍦ㄤ綅缃�">
+ <span>{{ form.location }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="椋庨櫓绛夌骇">
+ <el-tag :type="getTypeTagType(form.riskLevel)">
+ {{ form.riskLevel }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="棰嗙敤鐢ㄩ��">
+ <span>{{ form.applyPurpose }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="棰嗙敤鏃堕棿">
+ <span>{{ form.applyTime }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="棰嗙敤鏁伴噺">
+ <span>{{ form.applyQty }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item label="棰嗙敤浜�">
+ <span>{{ form.applyUserName }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
+ label="褰掕繕浜�">
+ <span>{{ form.returnUserName }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item v-if="dialogType === 'view' && form.returnTime"
+ label="褰掕繕鏃堕棿">
+ <span>{{ form.returnTime }}</span>
+ </el-descriptions-item>
+ <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
+ label="褰掕繕鎯呭喌璇存槑">
+ <span>{{ form.returnRemark }}</span>
+ </el-descriptions-item>
+ </el-descriptions>
+ <el-form ref="formRef1"
+ v-if="dialogType === 'edit'"
+ :model="form"
+ :rules="rules1"
+ label-width="140px"
+ label-position="top">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="褰掕繕浜�"
+ prop="returnUserId">
+ <el-select v-model="form.returnUserId"
+ disabled
+ placeholder="璇烽�夋嫨"
+ clearable>
+ <el-option v-for="item in userList"
+ :key="item.userId"
+ :label="item.nickName"
+ :value="item.userId" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="褰掕繕鏃堕棿"
+ prop="returnTime">
+ <el-date-picker style="width: 100%"
+ disabled
+ v-model="form.returnTime"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ type="date"
+ placeholder="璇烽�夋嫨"
+ clearable />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-form-item label="褰掕繕鎯呭喌璇存槑"
+ prop="applyPurpose">
+ <el-input v-model="form.returnRemark"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏ュ綊杩樻儏鍐佃鏄�" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary"
+ @click="submitForm">纭畾</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <!-- 鍗遍櫓婧愰�夋嫨寮圭獥 -->
+ <el-dialog v-model="safeHazardSelectVisible"
+ title="閫夋嫨鍗遍櫓婧�"
+ width="800px"
+ :close-on-click-modal="false">
+ <div>
+ <el-table :data="safeHazardList"
+ border
+ v-loading="safeHazardLoading"
+ style="width: 100%"
+ @row-click="handleSafeHazardSelect">
+ <el-table-column prop="code"
+ label="鍗遍櫓婧愮紪鐮�"
+ width="180"
+ show-overflow-tooltip />
+ <el-table-column prop="name"
+ label="鍗遍櫓婧愬悕绉�"
+ show-overflow-tooltip />
+ <el-table-column prop="type"
+ label="鍗遍櫓婧愮被鍨�"
+ width="120"
+ show-overflow-tooltip>
+ <template #default="scope">
+ {{ getTypeLabel(scope.row.type) }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="location"
+ label="鎵�鍦ㄤ綅缃�"
+ width="180"
+ show-overflow-tooltip />
+ <el-table-column prop="riskLevel"
+ label="椋庨櫓绛夌骇"
+ width="100">
+ <template #default="scope">
+ <el-tag :type="getTypeTagType(scope.row.riskLevel)">
+ {{ scope.row.riskLevel }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="stockQty"
+ label="搴撳瓨鏁伴噺"
+ width="100" />
+ </el-table>
+ <pagination :total="safeHazardPage.total"
+ style="margin-top: 20px"
+ layout="total, sizes, prev, pager, next, jumper"
+ :page="safeHazardPage.current"
+ :limit="safeHazardPage.size"
+ @pagination="safeHazardPagination" />
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="safeHazardSelectVisible = false">鍙栨秷</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+ import { Search } from "@element-plus/icons-vue";
+ import {
+ onMounted,
+ ref,
+ reactive,
+ toRefs,
+ getCurrentInstance,
+ computed,
+ } from "vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ import PIMTable from "@/components/PIMTable/PIMTable.vue";
+ import pagination from "@/components/PIMTable/Pagination.vue";
+ import { userListNoPage } from "@/api/system/user.js";
+ import { safeHazardListPage } from "@/api/safeProduction/hazardSourceLedger.js";
+ import {
+ safeHazardRecordListPage,
+ safeHazardRecordDel,
+ safeHazardRecordAdd,
+ safeHazardRecordUpdate,
+ } from "@/api/safeProduction/hazardousMaterialsControl.js";
+ import dayjs from "dayjs";
+ import useUserStore from "@/store/modules/user";
+ const userStore = useUserStore();
+ // 琛ㄥ崟楠岃瘉瑙勫垯
+ const rules = {
+ applyPurpose: [
+ { required: true, message: "璇疯緭鍏ラ鐢ㄧ敤閫�", trigger: "blur" },
+ ],
+ applyQty: [{ required: true, message: "璇疯緭鍏ラ鐢ㄦ暟閲�", trigger: "blur" }],
+ safeHazardId: [
+ { required: true, message: "璇烽�夋嫨鍗遍櫓婧�", trigger: "change" },
+ ],
+ };
+ const rules1 = {
+ returnRemark: [
+ { required: true, message: "璇疯緭鍏ュ綊杩樻儏鍐佃鏄�", trigger: "blur" },
+ ],
+ };
+ // 鍝嶅簲寮忔暟鎹�
+ const data = reactive({
+ searchForm: {
+ name: "",
+ type: "",
+ },
+ tableLoading: false,
+ page: {
+ current: 1,
+ size: 20,
+ total: 0,
+ },
+ tableData: [],
+ selectedIds: [],
+ form: {
+ applyPurpose: "", // 棰嗙敤鐢ㄩ��
+ applyTime: "", // 棰嗙敤鏃堕棿
+ applyQty: "", // 棰嗙敤鏁伴噺
+ applyUserId: "", // 棰嗙敤浜篒D
+ safeHazardId: "", // 鍗遍櫓婧怚D
+ },
+ dialogVisible: false,
+ dialogTitle: "",
+ dialogType: "add",
+ viewDialogVisible: false,
+ currentKnowledge: {},
+ safeHazardSelectVisible: false,
+ safeHazardList: [],
+ safeHazardLoading: false,
+ safeHazardPage: {
+ current: 1,
+ size: 10,
+ total: 0,
+ },
+ });
+
+ const {
+ searchForm,
+ tableLoading,
+ page,
+ tableData,
+ selectedIds,
+ form,
+ dialogVisible,
+ dialogTitle,
+ dialogType,
+ viewDialogVisible,
+ currentKnowledge,
+ safeHazardSelectVisible,
+ safeHazardList,
+ safeHazardLoading,
+ safeHazardPage,
+ } = toRefs(data);
+ const valueItem = ref({});
+
+ // 琛ㄥ崟寮曠敤
+ const formRef = ref();
+ const formRef1 = ref();
+ const riskLevelOptions = ref([
+ { value: "浣庨闄�", label: "浣庨闄�" },
+ { value: "涓�鑸闄�", label: "涓�鑸闄�" },
+ { value: "杈冨ぇ椋庨櫓", label: "杈冨ぇ椋庨櫓" },
+ { value: "閲嶅ぇ椋庨櫓", label: "閲嶅ぇ椋庨櫓" },
+ ]);
+
+ // 琛ㄦ牸鍒楅厤缃�
+ const tableColumn = ref([
+ {
+ label: "鍗遍櫓婧愮紪鐮�",
+ prop: "code",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "鍗遍櫓婧愬悕绉�",
+ prop: "name",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "鍗遍櫓婧愮被鍨�",
+ prop: "type",
+ showOverflowTooltip: true,
+ formatData: params => {
+ return getTypeLabel(params);
+ },
+ },
+ {
+ label: "椋庨櫓绛夌骇",
+ prop: "riskLevel",
+ showOverflowTooltip: true,
+ dataType: "tag",
+ formatType: params => {
+ const typeMap = {
+ 浣庨闄�: "info",
+ 涓�鑸闄�: "info",
+ 杈冨ぇ椋庨櫓: "warning",
+ 閲嶅ぇ椋庨櫓: "danger",
+ };
+ return typeMap[params] || "info";
+ },
+ },
+ {
+ label: "棰嗙敤鐢ㄩ��",
+ prop: "applyPurpose",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "棰嗙敤鏃堕棿",
+ prop: "applyTime",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "棰嗙敤鏁伴噺",
+ prop: "applyQty",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "褰掕繕鏃堕棿",
+ prop: "returnTime",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "褰掕繕浜�",
+ prop: "returnUserName",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "褰掕繕鎯呭喌璇存槑",
+ prop: "returnRemark",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "鎵�鍦ㄤ綅缃�",
+ prop: "location",
+ showOverflowTooltip: true,
+ },
+ {
+ label: "鍗曞彿",
+ prop: "materialRecordCode",
+ showOverflowTooltip: true,
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 200,
+ operation: [
+ {
+ name: "褰掕繕",
+ type: "text",
+ clickFun: row => {
+ openForm("edit", row);
+ },
+ disabled: row => row.returnUserId,
+ },
+ {
+ name: "鏌ョ湅",
+ type: "text",
+ clickFun: row => {
+ openForm("view", row);
+ },
+ },
+ ],
+ },
+ ]);
+ const userList = ref([]);
+ // 鐢熷懡鍛ㄦ湡
+ onMounted(() => {
+ getCurrentFactoryName();
+ getList();
+ startAutoRefresh();
+ userListNoPage().then(res => {
+ userList.value = res.data;
+ });
+ });
+ const currentUserId = ref("");
+ const currentUserName = ref("");
+ const getCurrentFactoryName = async () => {
+ let res = await userStore.getInfo();
+ currentUserId.value = res.user.userId;
+ currentUserName.value = res.user.nickName;
+ };
+
+ // 澶勭悊鐢ㄦ埛閫夋嫨鍙樺寲
+ const handleUserChange = userId => {
+ const selectedUser = userList.value.find(user => user.userId === userId);
+ if (selectedUser) {
+ form.value.principalUser = selectedUser.nickName;
+ form.value.principalMobile = selectedUser.phonenumber;
+ }
+ };
+ const handleApplyQtyChange = () => {
+ if (form.value.applyQty > valueItem.value.stockQty) {
+ ElMessage.error("棰嗙敤鏁伴噺涓嶈兘澶т簬搴撳瓨鏁伴噺");
+ form.value.applyQty = "";
+ }
+ };
+
+ // 寮�濮嬭嚜鍔ㄥ埛鏂�
+ const startAutoRefresh = () => {
+ setInterval(() => {
+ getList();
+ }, 600000); // 10鍒嗛挓鍒锋柊涓�娆� (10 * 60 * 1000 = 600000ms)
+ };
+
+ // 鏌ヨ鏁版嵁
+ const handleQuery = () => {
+ page.value.current = 1;
+ getList();
+ };
+
+ const getList = () => {
+ tableLoading.value = true;
+ safeHazardRecordListPage({ ...page.value, ...searchForm.value })
+ .then(res => {
+ tableLoading.value = false;
+ tableData.value = res.data.records;
+ page.value.total = res.data.total;
+ })
+ .catch(err => {
+ tableLoading.value = false;
+ });
+ };
+ const openSafeHazardSelect = async () => {
+ await fetchSafeHazardList();
+ safeHazardSelectVisible.value = true;
+ };
+
+ const fetchSafeHazardList = () => {
+ safeHazardLoading.value = true;
+ return safeHazardListPage({
+ page: safeHazardPage.value.current,
+ size: safeHazardPage.value.size,
+ })
+ .then(res => {
+ safeHazardList.value = res.data.records;
+ safeHazardPage.value.total = res.data.total;
+ })
+ .finally(() => {
+ safeHazardLoading.value = false;
+ });
+ };
+
+ const handleSafeHazardSelect = item => {
+ valueItem.value = {
+ ...item,
+ };
+ valueItem.value.type = getTypeLabel(valueItem.value.type);
+ form.value.safeHazardId = item.id;
+ safeHazardSelectVisible.value = false;
+ };
+
+ const safeHazardPagination = obj => {
+ safeHazardPage.value.current = obj.page;
+ safeHazardPage.value.size = obj.limit;
+ fetchSafeHazardList();
+ };
+
+ // 鍒嗛〉澶勭悊
+ const pagination1 = obj => {
+ page.value.current = obj.page;
+ page.value.size = obj.limit;
+ handleQuery();
+ };
+
+ // 閫夋嫨鍙樺寲澶勭悊
+ const handleSelectionChange = selection => {
+ selectedIds.value = selection.map(item => item.id);
+ };
+
+ // 鎵撳紑琛ㄥ崟
+ const openForm = (type, row = null) => {
+ dialogType.value = type;
+ if (type === "add") {
+ dialogTitle.value = "棰嗙敤鍗遍櫓婧�";
+ // 閲嶇疆琛ㄥ崟
+ form.value = {};
+ Object.assign(form.value, {
+ applyPurpose: "", // 棰嗙敤鐢ㄩ��
+ applyTime: dayjs().format("YYYY-MM-DD"), // 棰嗙敤鏃堕棿
+ applyQty: "", // 棰嗙敤鏁伴噺
+ applyUserId: currentUserId.value, // 棰嗙敤浜篒D
+ safeHazardId: "", // 鍗遍櫓婧怚D
+ });
+ valueItem.value = {};
+ } else if (type === "edit" && row) {
+ dialogTitle.value = "褰掕繕";
+ Object.assign(form.value, {
+ id: row.id, // 涓婚敭ID
+ materialRecordCode: row.materialRecordCode, // 鍗曞彿
+ applyPurpose: row.applyPurpose, // 棰嗙敤鐢ㄩ��
+ applyTime: row.applyTime, // 棰嗙敤鏃堕棿
+ applyQty: row.applyQty, // 棰嗙敤鏁伴噺
+ applyUserId: row.applyUserId, // 棰嗙敤浜篒D
+ safeHazardId: row.safeHazardId, // 鍗遍櫓婧怚D
+ applyUserName: row.applyUserName, // 棰嗙敤浜哄鍚�
+ code: row.code, // 鍗遍櫓婧愮紪鐮�
+ name: row.name, // 鍗遍櫓婧愬悕绉�
+ type: row.type, // 鍗遍櫓婧愮被鍨�
+ location: row.location, // 鎵�鍦ㄤ綅缃�
+ riskLevel: row.riskLevel, // 椋庨櫓绛夌骇
+ type: row.type, // 鍗遍櫓婧愮被鍨�
+ returnTime: dayjs().format("YYYY-MM-DD"), // 褰掕繕鏃堕棿
+ returnUserName: "", // 褰掕繕浜哄鍚�
+ returnUserId: currentUserId.value, // 褰掕繕浜篒D
+ returnRemark: "", // 褰掕繕鎯呭喌璇存槑
+ });
+ } else if (type === "view") {
+ dialogTitle.value = "鏌ョ湅";
+ form.value = { ...row };
+ }
+ dialogVisible.value = true;
+ };
+
+ // 鏌ョ湅鍗遍櫓婧愯鎯�
+ const viewKnowledge = row => {
+ currentKnowledge.value = { ...row };
+ viewDialogVisible.value = true;
+ };
+
+ // 鑾峰彇绫诲瀷鏍囩绫诲瀷
+ const getTypeTagType = type => {
+ const typeMap = {
+ 杈冨ぇ椋庨櫓: "warning",
+ 浣庨闄�: "info",
+ 涓�鑸闄�: "info",
+ 閲嶅ぇ椋庨櫓: "danger",
+ };
+ return typeMap[type] || "info";
+ };
+
+ // 鑾峰彇绫诲瀷鏍囩鏂囨湰
+ const getTypeLabel = type => {
+ return getKnowledgeTypeLabel(type);
+ };
+
+ // 鑾峰彇鏁堢巼鏍囩绫诲瀷
+ const getEfficiencyTagType = efficiency => {
+ const typeMap = {
+ high: "success",
+ medium: "warning",
+ low: "info",
+ };
+ return typeMap[efficiency] || "info";
+ };
+
+ // 鑾峰彇鏁堢巼鏍囩鏂囨湰
+ const getEfficiencyLabel = efficiency => {
+ const efficiencyMap = {
+ high: "鏄捐憲鎻愬崌",
+ medium: "涓�鑸彁鍗�",
+ low: "杞诲井鎻愬崌",
+ };
+ return efficiencyMap[efficiency] || efficiency;
+ };
+
+ // 鑾峰彇鏁堢巼鎻愬崌鐧惧垎姣�
+ const getEfficiencyScore = efficiency => {
+ const scoreMap = {
+ high: 40,
+ medium: 25,
+ low: 15,
+ };
+ return scoreMap[efficiency] || 0;
+ };
+
+ // 鑾峰彇骞冲潎鑺傜渷鏃堕棿
+ const getTimeSaved = efficiency => {
+ const timeMap = {
+ high: "2-3澶�",
+ medium: "1-2澶�",
+ low: "0.5-1澶�",
+ };
+ return timeMap[efficiency] || "鏈煡";
+ };
+
+ // 鎻愪氦鍗遍櫓婧愯〃鍗�
+ const submitForm = async () => {
+ try {
+ if (dialogType.value === "add") {
+ await formRef.value.validate();
+ safeHazardRecordAdd({ ...form.value })
+ .then(res => {
+ if (res.code == 200) {
+ ElMessage.success("娣诲姞鎴愬姛");
+ dialogVisible.value = false;
+ getList();
+ }
+ })
+ .catch(err => {
+ ElMessage.error(err.msg);
+ });
+ } else {
+ await formRef1.value.validate();
+ safeHazardRecordUpdate({ ...form.value })
+ .then(res => {
+ if (res.code == 200) {
+ ElMessage.success("鏇存柊鎴愬姛");
+ dialogVisible.value = false;
+ getList();
+ }
+ })
+ .catch(err => {
+ ElMessage.error(err.msg);
+ });
+ }
+ } catch (error) {
+ console.error("琛ㄥ崟楠岃瘉澶辫触:", error);
+ }
+ };
+
+ // 鍒犻櫎鍗遍櫓婧愯褰�
+ const handleDelete = () => {
+ if (selectedIds.value.length === 0) {
+ ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑璁板綍");
+ return;
+ }
+
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ // console.log(selectedIds.value);
+ safeHazardRecordDel(selectedIds.value).then(res => {
+ if (res.code == 200) {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ selectedIds.value = [];
+ getList();
+ }
+ });
+ })
+ .catch(() => {
+ // 鐢ㄦ埛鍙栨秷
+ });
+ };
+
+ // 瀵煎嚭
+ const { proxy } = getCurrentInstance();
+ const { hazard_source_type } = proxy.useDict("hazard_source_type");
+
+ // 瀛楀吀宸ュ叿
+ const knowledgeTypeOptions = computed(() => hazard_source_type?.value || []);
+ const getKnowledgeTypeLabel = val => {
+ const item = knowledgeTypeOptions.value.find(
+ i => String(i.value) === String(val)
+ );
+ return item ? item.label : val;
+ };
+ const getKnowledgeTypeTagType = val => {
+ const item = knowledgeTypeOptions.value.find(
+ i => String(i.value) === String(val)
+ );
+ return item?.elTagType || "info";
+ };
+ const handleExport = () => {
+ proxy.download(
+ "/knowledgeBase/export",
+ { ...searchForm.value },
+ "鐭ヨ瘑搴�.xlsx"
+ );
+ };
+</script>
+
+<style scoped>
+ .auto-refresh-info {
+ margin-bottom: 15px;
+ }
+
+ .auto-refresh-info .el-alert {
+ border-radius: 8px;
+ }
+
+ .dialog-footer {
+ text-align: right;
+ }
+
+ .knowledge-detail {
+ padding: 20px 0;
+ }
+
+ .detail-title {
+ font-size: 18px;
+ font-weight: bold;
+ color: #303133;
+ }
+
+ .detail-section {
+ margin-top: 24px;
+ }
+
+ .detail-section h4 {
+ margin: 0 0 12px 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ border-left: 4px solid #409eff;
+ padding-left: 12px;
+ }
+
+ .detail-content {
+ background: #f8f9fa;
+ padding: 16px;
+ border-radius: 6px;
+ line-height: 1.6;
+ color: #606266;
+ white-space: pre-wrap;
+ }
+
+ .key-points {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ .usage-stats {
+ margin-top: 16px;
+ }
+
+ .stat-item {
+ text-align: center;
+ padding: 20px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ }
+
+ .stat-number {
+ font-size: 24px;
+ font-weight: bold;
+ color: #409eff;
+ margin-bottom: 8px;
+ }
+
+ .stat-label {
+ font-size: 14px;
+ color: #909399;
+ }
+
+ :deep(.danger-row td) {
+ color: #e95a66 !important;
+ }
+</style>
--
Gitblit v1.9.3