From e0cb2008ffb01348b54a7370180a100f3c975877 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 06 二月 2026 10:49:24 +0800
Subject: [PATCH] Merge branch 'dev_New' into dev_天津军泰伟业
---
src/views/index.vue | 1691 ++++++++++------
src/views/personnelManagement/attendanceCheckin/index.vue | 469 ++++
src/views/reportAnalysis/productionAnalysis/components/left-top.vue | 12
src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue | 2
src/api/customerService/index.js | 34
src/views/reportAnalysis/productionAnalysis/components/center-center.vue | 8
src/views/reportAnalysis/productionAnalysis/components/right-top.vue | 60
src/views/system/menu/index.vue | 23
src/views/inventoryManagement/vehicleFuelManagement/index.vue | 556 +++++
src/components/Echarts/echarts.vue | 51
src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue | 2
src/views/equipmentManagement/attendanceManagement/index.vue | 403 ++++
src/views/customerService/afterSalesHandling/index.vue | 233 ++
src/views/inventoryManagement/vehicleManagement/index.vue | 581 +++++
src/views/inventoryManagement/receiptManagement/Record.vue | 3
src/views/qualityManagement/afterSalesTraceability/index.vue | 595 ++++++
src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue | 82
src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue | 127
src/views/reportAnalysis/qualityAnalysis/components/left-top.vue | 4
src/views/reportAnalysis/productionAnalysis/components/center-top.vue | 8
src/views/reportAnalysis/qualityAnalysis/index.vue | 3
src/views/procurementManagement/procurementLedger/index.vue | 10
/dev/null | 170 -
src/api/viewIndex.js | 58
src/views/inventoryManagement/transportTaskManagement/index.vue | 692 ++++++
src/views/reportAnalysis/qualityAnalysis/components/center-top.vue | 2
src/views/inventoryManagement/stockReport/index.vue | 51
27 files changed, 4,923 insertions(+), 1,007 deletions(-)
diff --git a/src/api/customerService/index.js b/src/api/customerService/index.js
index b92033b..9f458b6 100644
--- a/src/api/customerService/index.js
+++ b/src/api/customerService/index.js
@@ -42,6 +42,40 @@
})
}
+// 鍞悗澶勭悊-闄勪欢鍒楄〃
+export function afterSalesServiceFileListPage(query) {
+ return request({
+ url: '/afterSalesService/file/listPage',
+ method: 'get',
+ params: query,
+ })
+}
+// 鍞悗澶勭悊-闄勪欢鏂板
+export function afterSalesServiceFileAdd(data) {
+ return request({
+ url: '/afterSalesService/file/add',
+ method: 'post',
+ data,
+ })
+}
+// 鍞悗澶勭悊-闄勪欢鍒犻櫎
+export function afterSalesServiceFileDel(ids) {
+ return request({
+ url: '/afterSalesService/file/del',
+ method: 'delete',
+ data: ids,
+ })
+}
+
+// 鍞悗澶勭悊-缁翠慨璁板綍鍒楄〃
+export function afterSalesServiceRepairListPage(query) {
+ return request({
+ url: '/afterSalesService/repair/listPage',
+ method: 'get',
+ params: query,
+ })
+}
+
// 涓存湡鍞悗绠＄悊-鍒嗛〉鏌ヨ
export function expiryAfterSalesListPage(query) {
return request({
diff --git a/src/api/viewIndex.js b/src/api/viewIndex.js
index 980e4b0..8b5d144 100644
--- a/src/api/viewIndex.js
+++ b/src/api/viewIndex.js
@@ -1,12 +1,21 @@
// 棣栭〉鎺ュ彛
import request from "@/utils/request";
-// 宸ュ崟鎵ц鏁堢巼鍒嗘瀽
-export const workOrderEfficiencyAnalysis = (query) => {
+// 宸ュ簭鏁版嵁鐢熶骇缁熻鏄庣粏
+export const processDataProductionStatistics = (params) => {
return request({
- url: "/home/workOrderEfficiencyAnalysis",
+ url: "/home/processDataProductionStatistics",
method: "get",
- params: query,
+ params,
+ });
+};
+
+// 璐ㄩ噺缁熻
+export const qualityInspectionStatistics = (params) => {
+ return request({
+ url: "/home/qualityInspectionStatistics",
+ method: "get",
+ params,
});
};
@@ -91,13 +100,24 @@
method: "get",
});
};
-// 璐ㄦ鍒嗘瀽
-export const qualityStatistics = () => {
+// 璐ㄦ鍒嗘瀽锛堝彲浼� dateType: 1鍛� 2鏈� 3瀛ｅ害锛�
+export const qualityStatistics = (params) => {
return request({
url: "/home/qualityStatistics",
method: "get",
+ params,
});
};
+
+// 宸ュ崟鎵ц鏁堢巼鍒嗘瀽锛坉ateType: 1鍛� 2鏈� 3瀛ｅ害锛�
+export const workOrderEfficiencyAnalysis = (params) => {
+ return request({
+ url: "/home/workOrderEfficiencyAnalysis",
+ method: "get",
+ params,
+ });
+};
+
// 鐢熶骇鏍哥畻鍒嗘瀽
export const productionAccountingAnalysis = (query) => {
return request({
@@ -135,6 +155,14 @@
export const getProgressStatistics = () => {
return request({
url: "/home/progressStatistics",
+ method: "get",
+ });
+};
+
+// 璁㈠崟鏁伴噺缁熻锛堢敓浜ц鍗曟暟銆佸凡瀹屾垚璁㈠崟鏁般�佸緟鐢熶骇璁㈠崟鏁帮級
+export const orderCount = () => {
+ return request({
+ url: "/home/orderCount",
method: "get",
});
};
@@ -207,6 +235,15 @@
});
};
+// 宸ュ簭浜у嚭鍒嗘瀽锛坉ateType: 1鍛� 2鏈� 3瀛ｅ害锛�
+export const processOutputAnalysis = (params) => {
+ return request({
+ url: "/home/processOutputAnalysis",
+ method: "get",
+ params,
+ });
+};
+
// 鍘熸潗鏂欓噰璐噾棰濆崰姣�
export const rawMaterialPurchaseAmountRatio = () => {
return request({
@@ -241,6 +278,15 @@
});
};
+// 鎶曞叆浜у嚭鍒嗘瀽
+export const inputOutputAnalysis = (params) => {
+ return request({
+ url: "/home/inputOutputAnalysis",
+ method: "get",
+ params,
+ });
+};
+
// 浜у搧鍛ㄨ浆澶╂暟
export const productTurnoverDays = () => {
return request({
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index 0e07163..54a6c39 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -9,7 +9,7 @@
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
-const emit = defineEmits(['finished'])
+const emit = defineEmits(['finished', 'click'])
// Props
const props = defineProps({
@@ -26,7 +26,7 @@
},
dataset: {
type: Object,
- default: () => {}
+ default: () => { }
},
xAxis: {
type: Array,
@@ -82,10 +82,10 @@
type: Object,
default: () => ({})
},
- option: {
- type: Object,
- default: () => ({})
- },
+ option: {
+ type: Object,
+ default: () => ({})
+ },
})
import { watch } from 'vue'
@@ -128,6 +128,9 @@
chartInstance = echarts.init(chartRef.value)
finishedHandler = () => emit('finished')
chartInstance.on('finished', finishedHandler)
+ chartInstance.on('click', (params) => {
+ emit('click', params)
+ })
renderChart()
// setOption 鍚庤ˉ涓�娆� resize锛岀‘淇濋灞忓昂瀵告纭�
nextTick(() => {
@@ -137,8 +140,8 @@
// Methods
function generateChart(option) {
- const copiedOption = option
-
+ const copiedOption = option
+
if (copiedOption.series && copiedOption.series.length > 0) {
copiedOption.series.forEach((s, index) => {
if (s.type === 'line' && props.lineColors.length) {
@@ -152,7 +155,7 @@
}
})
}
-
+
chartInstance.setOption(copiedOption)
}
@@ -170,7 +173,7 @@
tooltip: props.tooltip,
visualMap: Object.keys(props.visualMap).length ? props.visualMap : undefined,
}
-
+
chartInstance.clear()
generateChart(option)
}
@@ -202,19 +205,19 @@
// Watch all reactive props that affect the chart
watch(
- () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
- () => {
- // 濡傛灉棣栧睆杩樻病鍒濆鍖栨垚鍔燂紝绛夊緟瀹瑰櫒 ready 鍚庡啀娓叉煋
- if (!chartInstance) {
- initChartWhenReady()
- return
- }
- renderChart()
- // 鏁版嵁鍙樺寲鍚庤ˉ涓�娆� resize锛岄伩鍏嶅竷灞�鍙樺寲瀵艰嚧鐨勫亸绉�
- nextTick(() => {
- if (chartInstance) chartInstance.resize()
- })
- },
- { deep: true, immediate: true }
+ () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
+ () => {
+ // 濡傛灉棣栧睆杩樻病鍒濆鍖栨垚鍔燂紝绛夊緟瀹瑰櫒 ready 鍚庡啀娓叉煋
+ if (!chartInstance) {
+ initChartWhenReady()
+ return
+ }
+ renderChart()
+ // 鏁版嵁鍙樺寲鍚庤ˉ涓�娆� resize锛岄伩鍏嶅竷灞�鍙樺寲瀵艰嚧鐨勫亸绉�
+ nextTick(() => {
+ if (chartInstance) chartInstance.resize()
+ })
+ },
+ { deep: true, immediate: true }
)
</script>
\ No newline at end of file
diff --git a/src/views/customerService/afterSalesHandling/index.vue b/src/views/customerService/afterSalesHandling/index.vue
index 65a7551..c3a19b4 100644
--- a/src/views/customerService/afterSalesHandling/index.vue
+++ b/src/views/customerService/afterSalesHandling/index.vue
@@ -46,15 +46,64 @@
></PIMTable>
</div>
<form-dia ref="formDia" @close="handleQuery"></form-dia>
+ <FileListDialog
+ ref="fileListRef"
+ v-model="fileListDialogVisible"
+ title="鍞悗闄勪欢"
+ :show-upload-button="true"
+ :show-delete-button="true"
+ :upload-method="handleFileUpload"
+ :delete-method="handleFileDelete"
+ />
+ <el-dialog
+ v-model="repairDialogVisible"
+ title="缁翠慨璁板綍"
+ width="700px"
+ destroy-on-close
+ @close="repairRecordList = []"
+ >
+ <el-table
+ :data="repairRecordList"
+ border
+ v-loading="repairRecordLoading"
+ max-height="400"
+ >
+ <el-table-column type="index" label="搴忓彿" width="55" align="center" />
+ <el-table-column label="缁翠慨鏃ユ湡" prop="maintenanceTime" min-width="120" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ row.maintenanceTime || row.repairTime || '-' }}
+ </template>
+ </el-table-column>
+ <el-table-column label="缁翠慨浜�" prop="maintenanceName" min-width="100" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ row.maintenanceName || row.repairName || '-' }}
+ </template>
+ </el-table-column>
+ <el-table-column label="缁翠慨缁撴灉" prop="maintenanceResult" min-width="180" show-overflow-tooltip />
+ </el-table>
+ <template #footer>
+ <el-button @click="repairDialogVisible = false">鍏抽棴</el-button>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
-import {onMounted, ref, getCurrentInstance, nextTick} from "vue";
+import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import FormDia from "@/views/customerService/afterSalesHandling/components/formDia.vue";
-import {ElMessageBox} from "element-plus";
-import {afterSalesServiceDelete, afterSalesServiceListPage} from "@/api/customerService/index.js";
+import FileListDialog from "@/components/Dialog/FileListDialog.vue";
+import { ElMessageBox } from "element-plus";
+import request from "@/utils/request";
+import { getToken } from "@/utils/auth";
+import {
+ afterSalesServiceDelete,
+ afterSalesServiceListPage,
+ afterSalesServiceFileListPage,
+ afterSalesServiceFileAdd,
+ afterSalesServiceFileDel,
+ afterSalesServiceRepairListPage,
+} from "@/api/customerService/index.js";
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
@@ -134,7 +183,7 @@
label: "鎿嶄綔",
align: "center",
fixed: 'right',
- width: 120,
+ width: 240,
operation: [
{
name: "澶勭悊",
@@ -151,6 +200,22 @@
type: "text",
clickFun: (row) => {
openForm("view", row);
+ },
+ },
+ // TODO 涓哄啓鎶ュ憡娣诲姞鐨�
+ {
+ name: "闄勪欢",
+ type: "text",
+ clickFun: (row) => {
+ openFilesFormDia(row);
+ },
+ },
+ // TODO 涓哄啓鎶ュ憡娣诲姞鐨�
+ {
+ name: "缁翠慨璁板綍",
+ type: "text",
+ clickFun: (row) => {
+ openRepairDialog(row);
},
},
],
@@ -170,6 +235,166 @@
selectedRows.value = selection;
};
const formDia = ref()
+const fileListRef = ref(null)
+const fileListDialogVisible = ref(false)
+const currentFileRow = ref(null)
+const repairDialogVisible = ref(false)
+const repairRecordList = ref([])
+const repairRecordLoading = ref(false)
+
+// 鎵撳紑缁翠慨璁板綍寮规
+const openRepairDialog = async (row) => {
+ repairDialogVisible.value = true
+ repairRecordLoading.value = true
+ repairRecordList.value = []
+ try {
+ const res = await afterSalesServiceRepairListPage({
+ afterSalesServiceId: row.id,
+ current: 1,
+ size: 100,
+ })
+ if (res.code === 200 && res.data?.records) {
+ repairRecordList.value = res.data.records
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鑾峰彇缁翠慨璁板綍澶辫触")
+ } finally {
+ repairRecordLoading.value = false
+ }
+}
+
+// 鎵撳紑闄勪欢寮规----- TODO锛氭帴鍙ｆ槸娌℃湁瀵规帴鐨勶紝闇�瑕佹柊澧炴帴鍙ｏ紝涓哄啓鎶ュ憡娣诲姞鐨�
+const openFilesFormDia = async (row) => {
+ currentFileRow.value = row
+ try {
+ const res = await afterSalesServiceFileListPage({
+ afterSalesServiceId: row.id,
+ current: 1,
+ size: 100,
+ })
+ if (res.code === 200 && fileListRef.value) {
+ const fileList = (res.data?.records || []).map((item) => ({
+ name: item.name || item.fileName,
+ url: item.url || item.fileUrl,
+ id: item.id,
+ ...item,
+ }))
+ fileListRef.value.open(fileList)
+ fileListDialogVisible.value = true
+ } else {
+ fileListRef.value?.open([])
+ fileListDialogVisible.value = true
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鑾峰彇闄勪欢鍒楄〃澶辫触")
+ fileListRef.value?.open([])
+ fileListDialogVisible.value = true
+ }
+}
+
+// 涓婁紶闄勪欢
+const handleFileUpload = async () => {
+ if (!currentFileRow.value) {
+ proxy.$modal.msgWarning("璇峰厛閫夋嫨鏁版嵁")
+ return
+ }
+ return new Promise((resolve) => {
+ const input = document.createElement("input")
+ input.type = "file"
+ input.style.display = "none"
+ input.onchange = async (e) => {
+ const file = e.target.files[0]
+ if (!file) {
+ resolve(null)
+ return
+ }
+ try {
+ const formData = new FormData()
+ formData.append("file", file)
+ const uploadRes = await request({
+ url: "/file/upload",
+ method: "post",
+ data: formData,
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: `Bearer ${getToken()}`,
+ },
+ })
+ if (uploadRes.code === 200) {
+ const fileData = {
+ afterSalesServiceId: currentFileRow.value.id,
+ name: uploadRes.data?.originalName || file.name,
+ url: uploadRes.data?.tempPath || uploadRes.data?.url,
+ }
+ const saveRes = await afterSalesServiceFileAdd(fileData)
+ if (saveRes.code === 200) {
+ proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛")
+ const listRes = await afterSalesServiceFileListPage({
+ afterSalesServiceId: currentFileRow.value.id,
+ current: 1,
+ size: 100,
+ })
+ if (listRes.code === 200 && fileListRef.value) {
+ const fileList = (listRes.data?.records || []).map((item) => ({
+ name: item.name || item.fileName,
+ url: item.url || item.fileUrl,
+ id: item.id,
+ ...item,
+ }))
+ fileListRef.value.setList(fileList)
+ }
+ resolve({ name: fileData.name, url: fileData.url, id: saveRes.data?.id })
+ } else {
+ proxy.$modal.msgError(saveRes.msg || "鏂囦欢淇濆瓨澶辫触")
+ resolve(null)
+ }
+ } else {
+ proxy.$modal.msgError(uploadRes.msg || "鏂囦欢涓婁紶澶辫触")
+ resolve(null)
+ }
+ } catch (err) {
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触")
+ resolve(null)
+ } finally {
+ document.body.removeChild(input)
+ }
+ }
+ document.body.appendChild(input)
+ input.click()
+ })
+}
+
+// 鍒犻櫎闄勪欢
+const handleFileDelete = async (row) => {
+ try {
+ const res = await afterSalesServiceFileDel([row.id])
+ if (res.code === 200) {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛")
+ if (currentFileRow.value && fileListRef.value) {
+ const listRes = await afterSalesServiceFileListPage({
+ afterSalesServiceId: currentFileRow.value.id,
+ current: 1,
+ size: 100,
+ })
+ if (listRes.code === 200) {
+ const fileList = (listRes.data?.records || []).map((item) => ({
+ name: item.name || item.fileName,
+ url: item.url || item.fileUrl,
+ id: item.id,
+ ...item,
+ }))
+ fileListRef.value.setList(fileList)
+ }
+ }
+ } else {
+ proxy.$modal.msgError(res.msg || "鍒犻櫎澶辫触")
+ return false
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鍒犻櫎澶辫触")
+ return false
+ }
+}
// 鏌ヨ鍒楄〃
/** 鎼滅储鎸夐挳鎿嶄綔 */
diff --git a/src/views/equipmentManagement/attendanceManagement/index.vue b/src/views/equipmentManagement/attendanceManagement/index.vue
new file mode 100644
index 0000000..a346d0b
--- /dev/null
+++ b/src/views/equipmentManagement/attendanceManagement/index.vue
@@ -0,0 +1,403 @@
+<template>
+ <div class="app-container">
+ <!-- 鏈嶅姟璇勪环姒傝锛氭ā鎷熷憳宸ヤ笟缁╄瘎鍒� -->
+ <el-row :gutter="16" class="mb16">
+ <el-col :span="8">
+ <el-card shadow="never">
+ <div class="kpi-title">鏈湀骞冲潎璇勫垎</div>
+ <div class="kpi-value">
+ {{ overallAvgScore.toFixed(1) }}
+ <span class="kpi-unit">鍒�</span>
+ </div>
+ <el-rate v-model="overallAvgScore" disabled show-score score-template="{value} / 5" />
+ </el-card>
+ </el-col>
+ <el-col :span="8">
+ <el-card shadow="never">
+ <div class="kpi-title">宸茶瘎浠风淮淇伐鍗�</div>
+ <div class="kpi-value">
+ {{ ratedCount }}
+ <span class="kpi-unit">鍗�</span>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="8">
+ <el-card shadow="never">
+ <div class="kpi-title">寰呰瘎浠风淮淇伐鍗�</div>
+ <div class="kpi-value kpi-warning">
+ {{ pendingCount }}
+ <span class="kpi-unit">鍗�</span>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 鏌ヨ鏉′欢锛氱鐞嗗憳鎸夊伐绋嬪笀 / 瀹㈡埛 / 鏃堕棿杩芥函璇勪环 -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">缁翠慨宸ョ▼甯堬細</span>
+ <el-input
+ v-model="searchForm.engineerName"
+ placeholder="璇疯緭鍏ュ伐绋嬪笀濮撳悕"
+ style="width: 180px"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">瀹㈡埛鍚嶇О锛�</span>
+ <el-input
+ v-model="searchForm.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ style="width: 180px"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">瀹屾垚鏃堕棿锛�</span>
+ <el-date-picker
+ v-model="searchForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ />
+
+ <span class="search_title ml10">璇勪环鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.status"
+ placeholder="璇烽�夋嫨"
+ style="width: 140px"
+ clearable
+ >
+ <el-option label="寰呰瘎浠�" value="pending" />
+ <el-option label="宸茶瘎浠�" value="rated" />
+ </el-select>
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button icon="Download" @click="handleExport">
+ 瀵煎嚭璇勪环缁熻
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 缁翠慨璇勪环鍒楄〃锛氭ā鎷熲�滅淮淇畬鎴愬悗瑙﹀彂璇勪环鈥濆満鏅� -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 24em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column prop="orderNo" label="缁翠慨宸ュ崟鍙�" width="160" show-overflow-tooltip />
+ <el-table-column prop="deviceName" label="璁惧鍚嶇О" width="160" show-overflow-tooltip />
+ <el-table-column prop="customerName" label="瀹㈡埛鍚嶇О" width="180" show-overflow-tooltip />
+ <el-table-column prop="engineerName" label="缁翠慨宸ョ▼甯�" width="120" />
+ <el-table-column prop="completeTime" label="缁翠慨瀹屾垚鏃堕棿" width="180" />
+ <el-table-column prop="score" label="鏄熺骇璇勫垎" width="140" align="center">
+ <template #default="scope">
+ <el-rate v-if="scope.row.score" v-model="scope.row.score" disabled />
+ <span v-else>-</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="status" label="璇勪环鐘舵��" width="100" align="center">
+ <template #default="scope">
+ <el-tag
+ :type="scope.row.status === 'rated' ? 'success' : 'warning'"
+ size="small"
+ >
+ {{ scope.row.status === 'rated' ? '宸茶瘎浠�' : '寰呰瘎浠�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="feedback" label="瀹㈡埛鍙嶉" show-overflow-tooltip />
+ <el-table-column label="鎿嶄綔" width="160" align="center" fixed="right">
+ <template #default="scope">
+ <el-button
+ v-if="scope.row.status === 'pending'"
+ type="primary"
+ link
+ size="small"
+ @click="openEvaluate(scope.row)"
+ >
+ 鍘昏瘎浠�
+ </el-button>
+ <el-button
+ v-else
+ type="primary"
+ link
+ size="small"
+ @click="openEvaluate(scope.row)"
+ >
+ 鏌ョ湅 / 淇敼璇勪环
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 璇勪环寮规锛氭ā鎷熲�滅淮淇畬鎴愬悗寮瑰嚭瀹㈡埛绔瘎浠封�� -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ width="520px"
+ destroy-on-close
+ >
+ <div class="dialog-order-info" v-if="currentOrder">
+ <div>缁翠慨宸ュ崟锛歿{ currentOrder.orderNo }}</div>
+ <div>璁惧鍚嶇О锛歿{ currentOrder.deviceName }}</div>
+ <div>缁翠慨宸ョ▼甯堬細{{ currentOrder.engineerName }}</div>
+ </div>
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="100px"
+ >
+ <el-form-item label="鏄熺骇璇勫垎锛�" prop="score">
+ <el-rate v-model="form.score" :max="5" />
+ </el-form-item>
+ <el-form-item label="鏂囧瓧鍙嶉锛�" prop="feedback">
+ <el-input
+ v-model="form.feedback"
+ type="textarea"
+ :rows="4"
+ placeholder="璇峰～鍐欏鏈缁翠慨鏈嶅姟鐨勮瘎浠凤紝濡傚搷搴旈�熷害銆佷笓涓氱▼搴︺�佹矡閫氫綋楠岀瓑"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="handleSubmit">鎻� 浜� 璇� 浠�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import { ElMessage } from "element-plus";
+
+// 妯℃嫙缁翠慨宸ュ崟 + 瀹㈡埛璇勪环鏁版嵁
+const rawOrders = ref([
+ {
+ id: 1,
+ orderNo: "WX-2024-1201-001",
+ deviceName: "绌哄帇鏈� A1 鍙�",
+ customerName: "鍗庡崡鐢靛瓙绉戞妧鏈夐檺鍏徃",
+ engineerName: "鐜嬪笀鍌�",
+ completeTime: "2024-12-01 10:30:00",
+ completeDate: "2024-12-01",
+ status: "rated",
+ score: 5,
+ feedback: "缁翠慨闈炲父涓撲笟锛屽搷搴旈�熷害蹇紝鐜板満瑙ｉ噴涔熷緢娓呮櫚锛屾弧鎰忋��",
+ },
+ {
+ id: 2,
+ orderNo: "WX-2024-1201-002",
+ deviceName: "娉ㄥ鏈� B3 鍙�",
+ customerName: "鍗庝笢绮惧瘑鍒堕�犳湁闄愬叕鍙�",
+ engineerName: "鏉庡笀鍌�",
+ completeTime: "2024-12-01 15:20:00",
+ completeDate: "2024-12-01",
+ status: "rated",
+ score: 4,
+ feedback: "鏁翠綋杩樹笉閿欙紝灏辨槸鍒板満鏃堕棿绋嶅井闀夸簡涓�鐐癸紝甯屾湜鍚庨潰鑳藉啀蹇竴浜涖��",
+ },
+ {
+ id: 3,
+ orderNo: "WX-2024-1202-003",
+ deviceName: "鐒婃帴鏈哄櫒浜� C2 鍙�",
+ customerName: "瑗垮崡鏂拌兘婧愮鎶�鑲′唤",
+ engineerName: "寮犲笀鍌�",
+ completeTime: "2024-12-02 11:05:00",
+ completeDate: "2024-12-02",
+ status: "pending",
+ score: null,
+ feedback: "",
+ },
+ {
+ id: 4,
+ orderNo: "WX-2024-1203-005",
+ deviceName: "娴嬭瘯鍙� D1 鍙�",
+ customerName: "鍖楁柟姹借溅闆堕儴浠舵湁闄愬叕鍙�",
+ engineerName: "鐜嬪笀鍌�",
+ completeTime: "2024-12-03 09:50:00",
+ completeDate: "2024-12-03",
+ status: "pending",
+ score: null,
+ feedback: "",
+ },
+]);
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+ engineerName: "",
+ customerName: "",
+ dateRange: [],
+ status: "",
+});
+
+// 鍒楄〃鏁版嵁
+const tableData = ref([...rawOrders.value]);
+
+// 缁熻锛氭暣浣撹瘎鍒嗐�佸凡璇勪环 / 寰呰瘎浠锋暟閲�
+const ratedOrders = computed(() =>
+ rawOrders.value.filter((o) => o.status === "rated" && o.score)
+);
+
+const overallAvgScore = computed(() => {
+ if (!ratedOrders.value.length) return 0;
+ const sum = ratedOrders.value.reduce((acc, cur) => acc + (cur.score || 0), 0);
+ return sum / ratedOrders.value.length;
+});
+
+const ratedCount = computed(() => ratedOrders.value.length);
+const pendingCount = computed(
+ () => rawOrders.value.filter((o) => o.status === "pending").length
+);
+
+// 鏌ヨ / 閲嶇疆
+const recomputeTable = () => {
+ const list = rawOrders.value.filter((item) => {
+ if (
+ searchForm.engineerName &&
+ !item.engineerName.includes(searchForm.engineerName.trim())
+ ) {
+ return false;
+ }
+ if (
+ searchForm.customerName &&
+ !item.customerName.includes(searchForm.customerName.trim())
+ ) {
+ return false;
+ }
+ if (searchForm.status && item.status !== searchForm.status) {
+ return false;
+ }
+ if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+ const [start, end] = searchForm.dateRange;
+ if (item.completeDate < start || item.completeDate > end) {
+ return false;
+ }
+ }
+ return true;
+ });
+ tableData.value = list;
+};
+
+const handleQuery = () => {
+ recomputeTable();
+};
+
+const resetSearch = () => {
+ searchForm.engineerName = "";
+ searchForm.customerName = "";
+ searchForm.dateRange = [];
+ searchForm.status = "";
+ recomputeTable();
+};
+
+// 瀵煎嚭锛堟紨绀猴級
+const handleExport = () => {
+ ElMessage.success("褰撳墠涓烘紨绀洪〉闈紝璇勪环瀵煎嚭鍔熻兘鏈鎺ュ疄闄呮帴鍙�");
+};
+
+// 璇勪环寮规
+const dialogVisible = ref(false);
+const dialogTitle = ref("缁翠慨鏈嶅姟璇勪环");
+const currentOrder = ref(null);
+const formRef = ref(null);
+const form = reactive({
+ score: 0,
+ feedback: "",
+});
+
+const rules = {
+ score: [{ required: true, message: "璇烽�夋嫨鏄熺骇璇勫垎", trigger: "change" }],
+ feedback: [{ required: true, message: "璇峰～鍐欐枃瀛楀弽棣�", trigger: "blur" }],
+};
+
+// 鎵撳紑璇勪环锛氭ā鎷熲�滅淮淇畬鎴愮‘璁ゅ悗寮瑰嚭璇勪环寮规鈥�
+const openEvaluate = (row) => {
+ currentOrder.value = row;
+ dialogTitle.value =
+ row.status === "pending" ? "缁翠慨鏈嶅姟璇勪环" : "鏌ョ湅 / 淇敼璇勪环";
+ form.score = row.score || 0;
+ form.feedback = row.feedback || "";
+ dialogVisible.value = true;
+};
+
+// 鎻愪氦璇勪环锛氬悓姝ュ埌鏈湴鈥滃憳宸ヤ笟缁╃粺璁♀��
+const handleSubmit = () => {
+ if (!formRef.value) return;
+ formRef.value.validate((valid) => {
+ if (!valid || !currentOrder.value) return;
+
+ const target = rawOrders.value.find((o) => o.id === currentOrder.value.id);
+ if (target) {
+ target.score = form.score;
+ target.feedback = form.feedback;
+ target.status = "rated";
+ }
+
+ ElMessage.success("璇勪环鎻愪氦鎴愬姛锛屽凡鍚屾鑷冲憳宸ヤ笟缁╃粺璁�");
+ dialogVisible.value = false;
+ recomputeTable();
+ });
+};
+
+// 鍒濆鍖栧垪琛�
+recomputeTable();
+</script>
+
+<style scoped lang="scss">
+.mb16 {
+ margin-bottom: 16px;
+}
+
+.kpi-title {
+ font-size: 13px;
+ color: #909399;
+}
+
+.kpi-value {
+ margin-top: 6px;
+ font-size: 24px;
+ font-weight: 600;
+ color: #303133;
+}
+
+.kpi-unit {
+ font-size: 12px;
+ margin-left: 4px;
+ color: #909399;
+}
+
+.kpi-warning {
+ color: #e6a23c;
+}
+
+.dialog-order-info {
+ margin-bottom: 12px;
+ font-size: 13px;
+ color: #606266;
+ line-height: 1.8;
+}
+
+.dialog-footer {
+ text-align: right;
+}
+</style>
+
diff --git a/src/views/index.vue b/src/views/index.vue
index 401f30a..5c16ed4 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,345 +1,436 @@
<template>
- <div class="dashboard">
- <!-- 椤堕儴妯悜涓ゆ爮 -->
- <div class="dashboard-top">
- <!-- 宸︼細浼佷笟淇℃伅+涓夊ぇ鏁版嵁鍗＄墖锛堜笂涓嬫帓鍒楋級 -->
- <div class="top-left">
- <div class="company-info">
- <div class="section-title">鐧婚檰淇℃伅</div>
- <div style="display: flex;align-items: center;gap: 20px">
- <img :src="userStore.avatar" class="avatar" alt=""/>
- <div class="company-card">
- <div class="company-name">{{userStore.name}}</div>
- <div class="company-meta">{{userStore.roleName}}</div>
- </div>
- <div style="display: flex;align-items: center;gap: 8px">
- <el-icon color="#5053B5" size="22"><Clock /></el-icon>
- <span>鐧婚檰鏃ユ湡锛歿{userStore.currentLoginTime}}</span>
- </div>
- </div>
- </div>
- <div class="data-cards">
- <div class="data-card sales">
- <div class="data-title">閿�鍞暟鎹�</div>
- <div class="data-num">
- <div>
- <div class="data-desc">鏈湀閿�鍞/鍏�</div>
- <div class="data-value">{{businessInfo.monthSaleMoney}}</div>
- </div>
- <div>
- <div class="data-desc">鏈紑绁ㄩ噾棰�/鍏�</div>
- <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div>
- </div>
- </div>
-
- </div>
- <div class="data-card purchase">
- <div class="data-title">閲囪喘鏁版嵁</div>
- <div class="data-num">
- <div>
- <div class="data-desc">鏈湀閲囪喘棰�/鍏�</div>
- <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div>
- </div>
- <div>
- <div class="data-desc">寰呬粯娆鹃噾棰�/鍏�</div>
- <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div>
- </div>
- </div>
- </div>
- <div class="data-card inventory">
- <div class="data-title">搴撳瓨鏁版嵁</div>
- <div class="data-num">
- <div>
- <div class="data-desc">褰撳墠搴撳瓨鎬婚噺/浠�</div>
- <div class="data-value">{{businessInfo.inventoryNum}}</div>
- </div>
- <div>
- <div class="data-desc">浠婃棩鍏ュ簱/浠�</div>
- <div class="data-value">{{businessInfo.todayInventoryNum}}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 鍙筹細寰呭姙浜嬮」 -->
- <div class="todo-panel">
- <div class="section-title">寰呭姙浜嬮」</div>
- <ul class="todo-list" v-if="todoList.length > 0">
- <li v-for="item in todoList" :key="item.id">
- <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">
- <div style="display: flex;justify-content: space-between;align-items: center;">
- <div class="todo-title">寰呭姙缂栧彿锛歿{item.approveId}}</div>
- <div class="todo-division">閮ㄩ棬锛歿{item.approveDeptName}}</div>
- <div class="todo-time">{{item.approveTime}}</div>
- </div>
- <div class="todo-division">寰呭姙浜嬬敱锛歿{item.approveReason}}</div>
- </div>
- </li>
- </ul>
- <div v-else style="text-align: center">
- 鏆傛棤鏁版嵁
- </div>
- </div>
- </div>
-
- <!-- 涓儴妯悜涓ゆ爮 -->
- <div class="dashboard-row">
- <div class="main-panel">
- <div class="section-title">瀹㈡埛鍚堝悓閲戦鍒嗘瀽</div>
- <div class="contract-summary">
- <div class="contract-info">
- <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>
- <div class="contract-card">
- <div class="contract-name">鎬诲悎鍚岄噾棰�(鍏�)</div>
- <div class="contract-meta">
- <div class="main-amount">{{sum}}</div>
- <div>鍛ㄥ悓姣�: <span class="up">{{yny}}% </span> 鏃ョ幆姣�: <span class="up">{{chain}}% </span></div>
- </div>
- </div>
- </div>
- </div>
- <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">
- <div>
- <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
- </div>
- <ul class="contract-list">
- <li v-for="item in materialPieSeries[0].data" :key="item.name">
- <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
- <div class="line" :style="{color: item.itemStyle.color}">鈼弡{item.name}}</div>
- <div style="width: 70px">{{item.rate}}%</div>
- <div>锟{item.value}}</div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="main-panel">
- <div style="display: flex;justify-content: space-between;">
- <div class="section-title">搴旀敹搴斾粯缁熻</div>
-<!-- <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">-->
-<!-- <el-radio-button label="鎸夊懆" :value="1" />-->
-<!-- <el-radio-button label="鎸夋湀" :value="2" />-->
-<!-- <el-radio-button label="鎸夊搴�" :value="3" />-->
-<!-- </el-radio-group>-->
- </div>
- <Echarts ref="chart"
- :color="barColors2"
- :chartStyle="chartStyle"
- :grid="grid"
- :series="barSeries"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- style="height: 260px"></Echarts>
- </div>
- </div>
-
- <!-- 搴曢儴妯悜涓ゆ爮 -->
- <div class="dashboard-row">
-<!-- <div class="main-panel">-->
-<!-- <div class="section-title">璐ㄩ噺缁熻</div>-->
-<!-- <div class="quality-cards">-->
-<!-- <div class="quality-card one">鍘熸潗鏂欏凡妫�娴嬫暟 <span>{{qualityStatisticsObject.supplierNum}}浠�</span></div>-->
-<!-- <div class="quality-card two">杩囩▼妫�楠屾暟閲� <span>{{qualityStatisticsObject.processNum}}浠�</span></div>-->
-<!-- <div class="quality-card three">鍑哄巶宸叉鏁伴噺 <span>{{qualityStatisticsObject.factoryNum}}浠�</span></div>-->
-<!-- </div>-->
-<!-- <Echarts ref="chart"-->
-<!-- :chartStyle="chartStyle"-->
-<!-- :grid="grid"-->
-<!-- :legend="barLegend"-->
-<!-- :series="barSeries1"-->
-<!-- :tooltip="tooltip"-->
-<!-- :xAxis="xAxis1"-->
-<!-- :yAxis="yAxis1"-->
-<!-- style="height: 260px"></Echarts>-->
-<!-- </div>-->
- <div class="main-panel">
- <div class="section-title">鍥炴涓庡紑绁ㄥ垎鏋�</div>
- <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
- :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>
- </div>
- </div>
- </div>
+ <div class="dashboard">
+ <!-- 椤堕儴妯悜涓ゆ爮 -->
+ <div class="dashboard-top">
+ <!-- 宸︼細浼佷笟淇℃伅+涓夊ぇ鏁版嵁鍗＄墖锛堜笂涓嬫帓鍒楋級 -->
+ <div class="top-left">
+ <div class="company-info">
+ <!-- 椤堕儴闂�欐潯 -->
+ <div class="welcome-banner">
+ <div class="welcome-title">
+ <span class="welcome-user">{{ userStore.roleName || '绯荤粺绠＄悊鍛�' }}</span>
+ <span> 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</span>
+ </div>
+ <div class="welcome-time">鐧诲綍浜�: {{ userStore.currentLoginTime }}</div>
+ </div>
+
+ <!-- 鐢ㄦ埛淇℃伅鍗＄墖 -->
+ <div class="user-card">
+ <img :src="userStore.avatar" class="avatar" alt="" />
+ <div class="user-card-main">
+ <div class="user-name">{{ userStore.name }}</div>
+ <div class="user-role">{{ userStore.roleName }}</div>
+ <div class="user-meta">
+ <span>{{ userStore.phoneNumber || '123456789' }}</span>
+ <span class="sep">|</span>
+ <span>{{ userStore.deptName || '缁勭粐鏋舵瀯' }}</span>
+ <span class="sep">|</span>
+ <span>{{ userStore.postName || '宀椾綅鍚�' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="data-cards">
+ <div class="data-card sales">
+ <div class="data-title">閿�鍞暟鎹�</div>
+ <div class="data-num">
+ <div>
+ <div class="data-desc">鏈湀閿�鍞/鍏�</div>
+ <div class="data-value">{{ businessInfo.monthSaleMoney }}</div>
+ </div>
+ <div>
+ <div class="data-desc">鏈紑绁ㄩ噾棰�/鍏�</div>
+ <div class="data-value">{{ businessInfo.monthSaleHaveMoney }}</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="data-card purchase">
+ <div class="data-title">閲囪喘鏁版嵁</div>
+ <div class="data-num">
+ <div>
+ <div class="data-desc">鏈湀閲囪喘棰�/鍏�</div>
+ <div class="data-value">{{ businessInfo.monthPurchaseMoney }}</div>
+ </div>
+ <div>
+ <div class="data-desc">寰呬粯娆鹃噾棰�/鍏�</div>
+ <div class="data-value">{{ businessInfo.monthPurchaseHaveMoney }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="data-card inventory">
+ <div class="data-title">搴撳瓨鏁版嵁</div>
+ <div class="data-num">
+ <div>
+ <div class="data-desc">褰撳墠搴撳瓨鎬婚噺/浠�</div>
+ <div class="data-value">{{ businessInfo.inventoryNum }}</div>
+ </div>
+ <div>
+ <div class="data-desc">浠婃棩鍏ュ簱/浠�</div>
+ <div class="data-value">{{ businessInfo.todayInventoryNum }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 鍙筹細寰呭姙浜嬮」 -->
+ <div class="todo-panel">
+ <div class="section-title">寰呭姙浜嬮」</div>
+ <ul class="todo-list" v-if="todoList.length > 0">
+ <li v-for="item in todoList" :key="item.id">
+ <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">
+ <div style="display: flex;justify-content: space-between;align-items: center;">
+ <div class="todo-title">寰呭姙缂栧彿锛歿{ item.approveId }}</div>
+ <div class="todo-division">閮ㄩ棬锛歿{ item.approveDeptName }}</div>
+ <div class="todo-time">{{ item.approveTime }}</div>
+ </div>
+ <div class="todo-division">寰呭姙浜嬬敱锛歿{ item.approveReason }}</div>
+ </div>
+ </li>
+ </ul>
+ <div v-else style="text-align: center">
+ 鏆傛棤鏁版嵁
+ </div>
+ </div>
+ </div>
+ <div class="dashboard-row">
+ <div class="main-panel process-panel">
+ <div class="process-panel__header">
+ <div class="section-title">宸ュ簭鏁版嵁鐢熶骇缁熻鏄庣粏</div>
+ <div style="display: flex; gap: 10px; align-items: center;">
+ <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">閫夋嫨宸ュ簭</el-button>
+ <el-button type="info" size="small" plain icon="Refresh" @click="resetProcessFilter">閲嶇疆</el-button>
+ <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats">
+ <el-radio-button :value="1">鏃�</el-radio-button>
+ <el-radio-button :value="2">鍛�</el-radio-button>
+ <el-radio-button :value="3">鏈�</el-radio-button>
+ </el-radio-group>
+ </div>
+ </div>
+
+ <div class="process-panel__body">
+ <div class="process-panel__chart">
+ <Echarts :chartStyle="{ width: '100%', height: '100%' }" :grid="processGrid" :series="processSeries"
+ :tooltip="processTooltip" :xAxis="processXAxis" :yAxis="processYAxis" style="height: 100%"
+ @click="handleChartClick" />
+ </div>
+
+ <div class="process-panel__aside">
+ <div class="process-legend">
+ <div class="process-legend__item">
+ <span class="dot dot-blue"></span><span>鎶曞叆閲�</span>
+ </div>
+ <div class="process-legend__item">
+ <span class="dot dot-yellow"></span><span>鎶ュ簾閲�</span>
+ </div>
+ <div class="process-legend__item">
+ <span class="dot dot-teal"></span><span>浜у嚭閲�</span>
+ </div>
+ </div>
+
+ <div class="process-card process-card--name">{{ processAside.processName }}</div>
+
+ <div class="process-card">
+ <div class="process-card__label">绱鎬绘姇鍏�</div>
+ <div class="process-card__value">{{ formatAmount(processAside.totalInput) }}<span class="unit">鍏�</span>
+ </div>
+ </div>
+ <div class="process-card">
+ <div class="process-card__label">绱鎬绘姤搴�</div>
+ <div class="process-card__value">{{ formatAmount(processAside.totalScrap) }}<span class="unit">鍏�</span>
+ </div>
+ </div>
+ <div class="process-card">
+ <div class="process-card__label">绱鎬讳骇鍑�</div>
+ <div class="process-card__value">{{ formatAmount(processAside.totalOutput) }}<span class="unit">鍏�</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 宸ュ簭閫夋嫨寮圭獥 -->
+ <el-dialog v-model="processDialogVisible" title="閫夋嫨宸ュ簭" width="500px" append-to-body>
+ <div class="process-selection-wrapper">
+ <el-checkbox-group v-model="tempProcessIds">
+ <div class="process-grid">
+ <el-checkbox v-for="item in processOptions" :key="item.id" :label="item.id" border>
+ {{ item.name }}
+ </el-checkbox>
+ </div>
+ </el-checkbox-group>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="processDialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleProcessDialogConfirm">纭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <!-- 涓儴妯悜涓ゆ爮 -->
+ <div class="dashboard-row">
+ <div class="main-panel">
+ <div class="section-title">瀹㈡埛鍚堝悓閲戦鍒嗘瀽</div>
+ <div class="contract-summary">
+ <div class="contract-info">
+ <img src="../assets/images/khtitle.png" alt="" style="width: 42px" />
+ <div class="contract-card">
+ <div class="contract-name">鎬诲悎鍚岄噾棰�(鍏�)</div>
+ <div class="contract-meta">
+ <div class="main-amount">{{ sum }}</div>
+ <div>鍛ㄥ悓姣�: <span class="up">{{ yny }}% </span> 鏃ョ幆姣�: <span class="up">{{ chain }}% </span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">
+ <div>
+ <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie" :series="materialPieSeries"
+ :tooltip="pieTooltip"></Echarts>
+ </div>
+ <ul class="contract-list">
+ <li v-for="item in materialPieSeries[0].data" :key="item.name">
+ <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
+ <div class="line" :style="{ color: item.itemStyle.color }">鈼弡{ item.name }}</div>
+ <div style="width: 70px">{{ item.rate }}%</div>
+ <div>锟{ item.value }}</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="main-panel">
+ <div style="display: flex;justify-content: space-between;">
+ <div class="section-title">搴旀敹搴斾粯缁熻</div>
+ <!-- <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">-->
+ <!-- <el-radio-button label="鎸夊懆" :value="1" />-->
+ <!-- <el-radio-button label="鎸夋湀" :value="2" />-->
+ <!-- <el-radio-button label="鎸夊搴�" :value="3" />-->
+ <!-- </el-radio-group>-->
+ </div>
+ <Echarts ref="chart" :color="barColors2" :chartStyle="chartStyle" :grid="grid" :series="barSeries"
+ :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis" style="height: 260px"></Echarts>
+ </div>
+ </div>
+
+ <!-- 搴曢儴妯悜涓ゆ爮 -->
+ <div class="dashboard-row">
+ <div class="main-panel">
+ <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
+ <div class="section-title" style="margin-bottom: 0;">璐ㄩ噺缁熻</div>
+ <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
+ <el-radio-button :value="1">鍛�</el-radio-button>
+ <el-radio-button :value="2">鏈�</el-radio-button>
+ <el-radio-button :value="3">瀛ｅ害</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="quality-cards">
+ <div class="quality-card one">鍘熸潗鏂欏凡妫�娴嬫暟 <span>{{ qualityStatisticsObject.supplierNum }}浠�</span></div>
+ <div class="quality-card two">杩囩▼妫�楠屾暟閲� <span>{{ qualityStatisticsObject.processNum }}浠�</span></div>
+ <div class="quality-card three">鍑哄巶宸叉鏁伴噺 <span>{{ qualityStatisticsObject.factoryNum }}浠�</span></div>
+ </div>
+ <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="barSeries1"
+ :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 260px"></Echarts>
+ </div>
+
+ <div class="main-panel">
+ <div class="section-title">鍥炴涓庡紑绁ㄥ垎鏋�</div>
+ <Echarts ref="invoiceChart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
+ :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;" />
+ </div>
+ </div>
+ </div>
</template>
<script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, reactive } from 'vue'
import Echarts from "@/components/Echarts/echarts.vue";
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user.js";
import {
- analysisCustomerContractAmounts, getAmountHalfYear,
- getBusiness,
- homeTodos,
- qualityStatistics,
- statisticsReceivablePayable
+ analysisCustomerContractAmounts, getAmountHalfYear,
+ getBusiness,
+ homeTodos,
+ processDataProductionStatistics,
+ statisticsReceivablePayable,
+ qualityInspectionStatistics
} from "@/api/viewIndex.js";
+import { list } from '@/api/productionManagement/productionProcess';
+
const userStore = useUserStore()
+const processOptions = ref([])
+const selectedProcessIds = ref([])
+const tempProcessIds = ref([])
+const processDialogVisible = ref(false)
+const activeProcessIndex = ref(0)
+
const businessInfo = ref({
- inventoryNum: 0,
- monthPurchaseHaveMoney: 0,
- monthPurchaseMoney: 0,
- monthSaleHaveMoney: 0,
- monthSaleMoney: 0,
- todayInventoryNum: 0,
+ inventoryNum: 0,
+ monthPurchaseHaveMoney: 0,
+ monthPurchaseMoney: 0,
+ monthSaleHaveMoney: 0,
+ monthSaleMoney: 0,
+ todayInventoryNum: 0,
})
const qualityStatisticsObject = ref({
- supplierNum: 0,
- processNum: 0,
- factoryNum: 0,
+ supplierNum: 0,
+ processNum: 0,
+ factoryNum: 0,
})
const sum = ref(0)
const yny = ref(0)
const chain = ref(0)
const pieLegend = reactive({
- show: false,
+ show: false,
})
const barSeries = ref([
- {
- type: 'bar',
- data: [],
- label: {
- show: true,
- }
- },
+ {
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ }
+ },
])
+
const barSeries1 = ref([
- {
- name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
- type: 'bar',
- barGap: 0,
- emphasis: {
- focus: 'series'
- },
- data: []
- },
- {
- name: '杩囩▼涓嶅悎鏍兼暟',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: []
- },
- {
- name: '鍑哄巶涓嶅悎鏍兼暟',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: []
- },
+ {
+ name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
+ {
+ name: '杩囩▼涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
+ {
+ name: '鍑哄巶涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
])
const chartStyle = {
- width: '100%',
- height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+ width: '100%',
+ height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
}
const chartStylePie = {
- width: '140%',
- height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+ width: '140%',
+ height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
}
const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
}
const barLegend = {
- show: true,
- data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+ show: true,
+ data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
}
const barLegend1 = {
- show: true,
- data: ['棰勪粯璐︽', '搴斾粯璐︽', '棰勬敹璐︽', '搴旀敹璐︽']
+ show: true,
+ data: ['棰勪粯璐︽', '搴斾粯璐︽', '棰勬敹璐︽', '搴旀敹璐︽']
}
const lineLegend = {
- show: true,
- data: ['寮�绁�', '鍥炴']
+ show: true,
+ data: ['寮�绁�', '鍥炴']
}
const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
}
const xAxis = [{
- type: 'value',
+ type: 'value',
}]
const xAxis1 = ref([{
- type: 'category',
- axisTick: { show: false },
- data: []
+ type: 'category',
+ axisTick: { show: false },
+ data: []
}])
const yAxis = [{
- type: 'category',
- data: [ '搴斾粯璐︽', '搴旀敹璐︽',]
+ type: 'category',
+ data: ['搴斾粯璐︽', '搴旀敹璐︽',]
}]
const yAxis1 = [{
- type: 'value'
+ type: 'value'
}]
const pieTooltip = reactive({
- trigger: 'item',
- formatter: function (params) {
- // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
- const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
- return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
- },
- position: 'right'
+ trigger: 'item',
+ formatter: function (params) {
+ // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
+ const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
+ return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
+ },
+ position: 'right'
})
const materialPieSeries = ref([
- {
- type: 'pie',
- radius: ['66%', '90%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: []
- }
+ {
+ type: 'pie',
+ radius: ['66%', '90%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ data: []
+ }
])
const lineSeries = ref([
- {
- type: 'line',
- data: [],
- label: {
- show: true
- },
+ {
+ type: 'line',
+ data: [],
+ label: {
+ show: true
+ },
showSymbol: true, // 鏄剧ず鍦嗙偣
- },
+ },
])
const tooltipLine = {
- trigger: 'axis',
+ trigger: 'axis',
}
const yAxis2 = ref([
- {
- type: 'value',
- }
+ {
+ type: 'value',
+ }
])
const xAxis2 = ref([
- {
- type: 'category',
- data: [],
- axisLabel: {
- interval: 0,
- formatter: function(value) {
- return value.replace(/~/g, '\n');
- },
- }
- }
+ {
+ type: 'category',
+ data: [],
+ axisLabel: {
+ interval: 0,
+ formatter: function (value) {
+ return value.replace(/~/g, '\n');
+ },
+ }
+ }
])
// 寰呭姙浜嬮」
const todoList = ref([])
const radio1 = ref(1)
+const qualityRange = ref(1)
// 鍥捐〃寮曠敤
const barChart = ref(null)
@@ -352,453 +443,821 @@
}
onMounted(() => {
- getBusinessData()
- analysisCustomer()
- todoInfoS()
- statisticsReceivable()
- qualityStatisticsInfo()
- getAmountHalfYearNum()
+ getBusinessData()
+ analysisCustomer()
+ todoInfoS()
+ statisticsReceivable()
+ qualityStatisticsInfo()
+ getAmountHalfYearNum()
+ getProcessList()
})
// 鏁版嵁缁熻
const getBusinessData = () => {
- getBusiness().then((res) => {
- businessInfo.value = {...res.data}
- })
+ getBusiness().then((res) => {
+ businessInfo.value = { ...res.data }
+ })
}
// 鍚堝悓閲戦
const analysisCustomer = () => {
- analysisCustomerContractAmounts().then((res) => {
- sum.value = res.data.sum
- yny.value = res.data.yny
- chain.value = res.data.chain
+ analysisCustomerContractAmounts().then((res) => {
+ sum.value = res.data.sum
+ yny.value = res.data.yny
+ chain.value = res.data.chain
// 涓烘瘡涓暟鎹」鍒嗛厤闅忔満棰滆壊
materialPieSeries.value[0].data = res.data.item.map(item => ({
...item,
itemStyle: { color: getRandomColor() }
}))
- })
+ })
}
// 寰呭姙浜嬮」
const todoInfoS = () => {
- homeTodos().then((res) => {
- todoList.value = res.data
- })
+ homeTodos().then((res) => {
+ todoList.value = res.data
+ })
+}
+// 鑾峰彇宸ュ簭鍒楄〃
+const getProcessList = () => {
+ list().then(res => {
+ processOptions.value = res.data
+ })
+}
+
+const openProcessDialog = () => {
+ tempProcessIds.value = [...selectedProcessIds.value]
+ processDialogVisible.value = true
+}
+
+const handleProcessDialogConfirm = () => {
+ selectedProcessIds.value = [...tempProcessIds.value]
+ processDialogVisible.value = false
+ refreshProcessStats()
+}
+
+const resetProcessFilter = () => {
+ selectedProcessIds.value = []
+ tempProcessIds.value = []
+ refreshProcessStats()
+}
+
+const handleChartClick = (params) => {
+ if (params && params.dataIndex !== undefined) {
+ activeProcessIndex.value = params.dataIndex
+ }
}
// 搴斾粯搴旀敹缁熻
-const statisticsReceivable = (type) => {
- statisticsReceivablePayable({type: radio1.value}).then((res) => {
- barSeries.value[0].data = [
- // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
- { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
- // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
- { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
- ]
- })
+const statisticsReceivable = () => {
+ statisticsReceivablePayable({ type: radio1.value }).then((res) => {
+ barSeries.value[0].data = [
+ // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
+ { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
+ // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
+ { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
+ ]
+ })
}
// 璐ㄦ缁熻
const qualityStatisticsInfo = () => {
- qualityStatistics().then((res) => {
- res.data.item.forEach(item => {
- xAxis1.value[0].data.push(item.date)
- barSeries1.value[0].data.push(item.supplierNum)
- barSeries1.value[1].data.push(item.processNum)
- barSeries1.value[2].data.push(item.factoryNum)
- })
- qualityStatisticsObject.value.supplierNum = res.data.supplierNum
- qualityStatisticsObject.value.processNum = res.data.processNum
- qualityStatisticsObject.value.factoryNum = res.data.factoryNum
- })
+ qualityInspectionStatistics({ type: qualityRange.value }).then((res) => {
+ xAxis1.value[0].data = []
+ barSeries1.value[0].data = []
+ barSeries1.value[1].data = []
+ barSeries1.value[2].data = []
+ res.data.item.forEach(item => {
+ xAxis1.value[0].data.push(item.date)
+ barSeries1.value[0].data.push(item.supplierNum)
+ barSeries1.value[1].data.push(item.processNum)
+ barSeries1.value[2].data.push(item.factoryNum)
+ })
+ qualityStatisticsObject.value.supplierNum = res.data.supplierNum
+ qualityStatisticsObject.value.processNum = res.data.processNum
+ qualityStatisticsObject.value.factoryNum = res.data.factoryNum
+ })
}
const getAmountHalfYearNum = async () => {
- const res = await getAmountHalfYear()
- console.log(res)
- const monthName = []
- const receiptAmount = []
- const invoiceAmount = []
- res.data.forEach(item => {
- monthName.push(item.month)
- receiptAmount.push(item.receiptAmount)
- invoiceAmount.push(item.invoiceAmount)
- })
- // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
- xAxis2.value[0].data = monthName
- xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
- lineSeries.value = [
- {
- name: '寮�绁�',
- type: 'line',
- data: receiptAmount,
- stack: 'Total',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(131, 207, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(186, 228, 255, 1)'
- }
- ])
- },
- itemStyle: {
- color: '#2D99FF',
- borderColor: '#2D99FF'
- },
- emphasis: {
- focus: 'series'
- },
- lineStyle: {
- width: 0
- },
- showSymbol: true,
- },
- {
- name: '鍥炴',
- type: 'line',
- data: invoiceAmount,
- stack: 'Total',
- lineStyle: {
- width: 0
- },
- itemStyle: {
- color: '#83CFFF',
- borderColor: '#83CFFF'
- },
- showSymbol: true,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(54, 153, 255, 1)'
- },
- {
- offset: 1,
- color: 'rgba(89, 169, 254, 1)'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- }
- ]
+ const res = await getAmountHalfYear()
+ console.log(res)
+ const monthName = []
+ const receiptAmount = []
+ const invoiceAmount = []
+ res.data.forEach(item => {
+ monthName.push(item.month)
+ receiptAmount.push(item.receiptAmount)
+ invoiceAmount.push(item.invoiceAmount)
+ })
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ xAxis2.value[0].data = monthName
+ xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
+ lineSeries.value = [
+ {
+ name: '寮�绁�',
+ type: 'line',
+ data: receiptAmount,
+ stack: 'Total',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(131, 207, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(186, 228, 255, 1)'
+ }
+ ])
+ },
+ itemStyle: {
+ color: '#2D99FF',
+ borderColor: '#2D99FF'
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: true,
+ },
+ {
+ name: '鍥炴',
+ type: 'line',
+ data: invoiceAmount,
+ stack: 'Total',
+ lineStyle: {
+ width: 0
+ },
+ itemStyle: {
+ color: '#83CFFF',
+ borderColor: '#83CFFF'
+ },
+ showSymbol: true,
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(54, 153, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(89, 169, 254, 1)'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ }
+ ]
}
+
+// 宸ュ簭鏁版嵁鐢熶骇缁熻鏄庣粏锛堝亣鏁版嵁 + 鍥捐〃锛�
+const processRange = ref(1)
+const processChartData = ref([])
+
+const processXAxis = ref([
+ {
+ nameTextStyle: { color: 'rgba(0,0,0,0.35)', fontSize: 12 },
+ axisLabel: { color: 'rgba(0,0,0,0.35)' },
+ splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)', type: 'dashed' } },
+ },
+])
+
+const processYAxis = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLine: { show: false },
+ axisLabel: { color: 'rgba(0,0,0,0.45)' },
+ data: [],
+ },
+])
+
+const processGrid = reactive({ left: 0, right: 100, top: 30, bottom: 20, containLabel: true })
+
+const processTooltip = reactive({
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ formatter: (params) => {
+ const name = params?.[0]?.name ?? ''
+ const list = Array.isArray(params) ? params : []
+ const lines = list
+ .map((p) => {
+ const colorBox = `<span style="display:inline-block;margin-right:6px;border-radius:2px;width:10px;height:10px;background:${p.color}"></span>`
+ return `${colorBox}${p.seriesName} <b style="float:right;">${Number(p.value || 0).toFixed(2)}</b>`
+ })
+ .join('<br/>')
+ return `<div style="min-width:140px;"><div style="font-weight:700;margin-bottom:6px;">${name}</div>${lines}</div>`
+ },
+})
+
+const processSeries = computed(() => {
+ const input = processChartData.value.map((i) => i.input)
+ const scrap = processChartData.value.map((i) => i.scrap)
+ const output = processChartData.value.map((i) => i.output)
+
+ return [
+ {
+ name: '鎶曞叆閲�',
+ type: 'bar',
+ stack: 'total',
+ barWidth: 22,
+ itemStyle: { color: '#1E5BFF', borderRadius: [6, 0, 0, 6] },
+ data: input,
+ },
+ {
+ name: '鎶ュ簾閲�',
+ type: 'bar',
+ stack: 'total',
+ barWidth: 22,
+ itemStyle: { color: '#F7B500' },
+ data: scrap,
+ },
+ {
+ name: '浜у嚭閲�',
+ type: 'bar',
+ stack: 'total',
+ barWidth: 22,
+ itemStyle: { color: '#19C6C6', borderRadius: [0, 6, 6, 0] },
+ data: output,
+ },
+ ]
+})
+
+const processAside = computed(() => {
+ const list = processChartData.value
+ const item = list[activeProcessIndex.value] || {}
+ return {
+ processName: item.name || '鏆傛棤鏁版嵁',
+ totalInput: item.input || 0,
+ totalScrap: item.scrap || 0,
+ totalOutput: item.output || 0,
+ }
+})
+
+const formatAmount = (n) => {
+ const num = Number(n || 0)
+ return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+const refreshProcessStats = () => {
+ processDataProductionStatistics({
+ type: processRange.value,
+ processIds: selectedProcessIds.value.length > 0 ? selectedProcessIds.value.join(',') : null
+ }).then(res => {
+ processChartData.value = res.data.map(item => ({
+ name: item.processName,
+ input: item.totalInput,
+ scrap: item.totalScrap,
+ output: item.totalOutput
+ }))
+ processYAxis.value[0].data = processChartData.value.map((i) => i.name)
+ activeProcessIndex.value = 0
+ })
+}
+
+onMounted(() => {
+ getBusinessData()
+ analysisCustomer()
+ todoInfoS()
+ statisticsReceivable()
+ qualityStatisticsInfo()
+ getAmountHalfYearNum()
+ refreshProcessStats()
+})
</script>
<style scoped>
.dashboard {
- background: #f5f7fa;
- min-height: 100vh;
- padding: 20px;
- box-sizing: border-box;
-}
-.dashboard-top {
- display: flex;
- gap: 20px;
- margin-bottom: 20px;
-}
-.company-info {
- display: flex;
- flex-direction: column;
- gap: 8px;
- padding: 20px;
- min-width: 0;
- background-color: #EFF2FB; /* 浣跨敤鎸囧畾鐨勮儗鏅鑹� */
- background-image: url("../assets/images/denglu.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- border-radius: 12px;
- height: 138px;
-}
-.avatar {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- object-fit: contain;
- background: #fff;
- border: 1px solid #eee;
-}
-.company-card {
- display: flex;
- flex-direction: column;
- gap: 10px;
- position: relative;
- padding-right: 15px;
+ background: #f5f7fa;
+ min-height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
}
-.company-card::after {
- content: '';
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: #C9C5C5;
- border-radius: 2px;
+.dashboard-top {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+ align-items: flex-start;
+ justify-content: space-evenly;
}
-.company-name {
- font-weight: 400;
- font-size: 16px;
- color: #161A9A;
+
+.company-info {
+ padding: 0;
+ overflow: hidden;
+ border-radius: 12px;
+ background: #fff;
+ height: 100%;
}
-.company-meta {
- font-weight: 400;
- font-size: 12px;
- color: #818185;
+
+.welcome-banner {
+ padding: 10px 10px;
+ background: linear-gradient(135deg, rgba(229, 240, 255, 0.9), rgba(214, 232, 255, 0.7), rgba(207, 236, 255, 0.9));
}
+
+.welcome-title {
+ font-size: 18px;
+ font-weight: 700;
+ color: #222;
+ line-height: 1.3;
+}
+
+.welcome-user {
+ margin-right: 6px;
+}
+
+.welcome-time {
+ margin-top: 10px;
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.55);
+}
+
+.user-card {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 18px 22px;
+}
+
+.user-card-main {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ min-width: 0;
+}
+
+.user-name {
+ font-size: 16px;
+ font-weight: bold;
+ color: #111;
+ letter-spacing: 1px;
+}
+
+.user-role {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 20px;
+ padding: 5px 10px;
+ background: rgba(245, 246, 248, 1);
+ color: #333;
+ width: fit-content;
+ font-weight: 600;
+}
+
+.user-meta {
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.55);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.user-meta .sep {
+ margin: 0 10px;
+ color: rgba(0, 0, 0, 0.25);
+}
+
+.avatar {
+ width: 90px;
+ height: 90px;
+ border-radius: 50%;
+ object-fit: cover;
+ flex: 0 0 auto;
+}
+
.data-cards {
- display: flex;
- gap: 16px;
- justify-content: flex-start;
- background: #ffffff;
- border-radius: 12px;
- padding: 20px;
+ width: 50%;
+ display: flex;
+ gap: 16px;
+ justify-content: flex-start;
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 20px;
}
+
.data-title {
- font-weight: 700;
- font-size: 26px;
- color: #FFFFFF;
+ font-weight: 700;
+ font-size: 26px;
+ color: #FFFFFF;
}
+
.data-num {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 20px;
}
+
.data-card {
- background: #fff;
- border-radius: 12px;
- padding: 14px 10px 10px 10px;
- min-width: 160px;
- box-shadow: 0 2px 8px #eee;
- display: flex;
- flex-direction: column;
- width: 32%;
- height: 140px;
+ background: #fff;
+ border-radius: 12px;
+ padding: 14px 10px 10px 10px;
+ min-width: 160px;
+ box-shadow: 0 2px 8px #eee;
+ display: flex;
+ flex-direction: column;
+ width: 32%;
+ height: 140px;
}
+
.data-card.sales {
- background-image: url("../assets/images/xioashoushuju.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+ background-image: url("../assets/images/xioashoushuju.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
+
.data-card.purchase {
- background-image: url("../assets/images/caigou.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+ background-image: url("../assets/images/caigou.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
+
.data-card.inventory {
- background-image: url("../assets/images/kucun.png");
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+ background-image: url("../assets/images/kucun.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
+
.data-desc {
- font-weight: 500;
- font-size: 13px;
- color: #FFFFFF;
+ font-weight: 500;
+ font-size: 13px;
+ color: #FFFFFF;
}
+
.data-value {
- font-size: 18px;
- font-weight: 500;
- margin: 10px 0;
- color: #FFFFFF;
+ font-size: 18px;
+ font-weight: 500;
+ margin: 10px 0;
+ color: #FFFFFF;
}
+
.top-left {
- display: flex;
- flex-direction: column;
- gap: 20px;
- width: 50%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ height: 180px;
+ width: 20%;
}
+
.todo-panel {
- background: #fff;
- border-radius: 12px;
- padding: 20px;
- width: 50%;
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ height: 180px;
+ width: 30%;
}
+
.todo-list {
- list-style: none;
- padding: 0;
- margin: 0;
- font-size: 15px;
- overflow-y: auto;
- height: 260px;
+ height: 100px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ font-size: 15px;
+ overflow-y: auto;
}
+
.todo-list li {
- border-radius: 8px;
- margin-bottom: 12px;
- padding: 8px 20px;
- height: 74px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: rgba(225,227,250,0.62);
+ border-radius: 8px;
+ margin-bottom: 12px;
+ padding: 8px 20px;
+ height: 74px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: rgba(225, 227, 250, 0.62);
}
+
.todo-title {
- font-weight: 400;
- font-size: 12px;
- color: #000000;
- position: relative;
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
+ position: relative;
}
+
.todo-title::before {
- content: ''; /* 蹇呴渶锛岃〃绀鸿繖閲屾湁涓�涓唴瀹� */
- position: absolute;
- left: -10px; /* 瀹氫綅鍒板乏渚� */
- top: 50%; /* 鍨傜洿灞呬腑 */
- transform: translateY(-50%); /* 寰皟鍨傜洿灞呬腑 */
- width: 6px; /* 鍦嗙殑鐩村緞 */
- height: 6px; /* 鍦嗙殑鐩村緞 */
- background: #498CEB;
- border-radius: 50%; /* 璁╁叾鍙樻垚鍦嗗舰 */
+ content: '';
+ /* 蹇呴渶锛岃〃绀鸿繖閲屾湁涓�涓唴瀹� */
+ position: absolute;
+ left: -10px;
+ /* 瀹氫綅鍒板乏渚� */
+ top: 50%;
+ /* 鍨傜洿灞呬腑 */
+ transform: translateY(-50%);
+ /* 寰皟鍨傜洿灞呬腑 */
+ width: 6px;
+ /* 鍦嗙殑鐩村緞 */
+ height: 6px;
+ /* 鍦嗙殑鐩村緞 */
+ background: #498CEB;
+ border-radius: 50%;
+ /* 璁╁叾鍙樻垚鍦嗗舰 */
}
+
.todo-division {
- font-weight: 400;
- font-size: 12px;
- color: #000000;
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
}
+
.todo-time {
- font-weight: 400;
- font-size: 12px;
- color: #000000;
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
}
+
.todo-meta {
- color: #888;
- font-size: 13px;
+ color: #888;
+ font-size: 13px;
}
+
.dashboard-row {
- display: flex;
- gap: 20px;
- margin-bottom: 20px;
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
}
+
.main-panel {
- background: #fff;
- border-radius: 12px;
- padding: 20px;
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
}
+
.section-title {
- position: relative;
- font-size: 18px;
- color: #333;
- padding-left: 10px;
- margin-bottom: 10px;
- font-weight: 700;
+ position: relative;
+ font-size: 18px;
+ color: #333;
+ padding-left: 10px;
+ margin-bottom: 10px;
+ font-weight: 700;
}
.section-title::before {
- position: absolute;
- left: 0;
- top: 4px;
- content: '';
- width: 4px;
- height: 18px;
- background-color: #002FA7;
- border-radius: 2px;
+ position: absolute;
+ left: 0;
+ top: 4px;
+ content: '';
+ width: 4px;
+ height: 18px;
+ background-color: #002FA7;
+ border-radius: 2px;
}
+
.contract-info {
- display: flex;
- align-items: center;
- gap: 20px;
- height: 90px;
- background: rgba(245,245,245,0.59);
- width: 100%;
- border-radius: 10px;
- padding: 10px 30px;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ height: 90px;
+ background: rgba(245, 245, 245, 0.59);
+ width: 100%;
+ border-radius: 10px;
+ padding: 10px 30px;
}
+
.contract-summary {
- display: flex;
- align-items: center;
- gap: 30px;
+ display: flex;
+ align-items: center;
+ gap: 30px;
}
+
.contract-card {
- display: flex;
- flex-direction: column;
- gap: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
+
.contract-name {
- font-weight: 400;
- font-size: 14px;
- color: #050505;
+ font-weight: 400;
+ font-size: 14px;
+ color: #050505;
}
+
.contract-meta {
- display: flex;
- align-items: center;
- width: 100%;
- gap: 80px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ gap: 80px;
}
+
.main-amount {
- font-size: 24px;
- color: rgba(51,50,50,0.85);
+ font-size: 24px;
+ color: rgba(51, 50, 50, 0.85);
}
-.up { color: #e57373; }
+
+.up {
+ color: #e57373;
+}
+
.contract-list {
- margin-top: 16px;
- font-size: 14px;
- color: #666;
- list-style: none;
- padding: 0;
- height: 190px;
- overflow-y: auto;
- width: 460px;
+ margin-top: 16px;
+ font-size: 14px;
+ color: #666;
+ list-style: none;
+ padding: 0;
+ height: 190px;
+ overflow-y: auto;
+ width: 460px;
}
+
.line {
- position: relative;
- width: 230px;
+ position: relative;
+ width: 230px;
}
+
.line::after {
- content: '';
- position: absolute;
- right: 2px;
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: #C9C5C5;
- border-radius: 2px;
+ content: '';
+ position: absolute;
+ right: 2px;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #C9C5C5;
+ border-radius: 2px;
}
+
.contract-list li {
- margin-top: 10px;
+ margin-top: 10px;
}
+
.quality-cards {
- display: flex;
- gap: 12px;
- margin-bottom: 12px;
+ display: flex;
+ gap: 12px;
+ margin-bottom: 12px;
}
+
.quality-card {
- border-radius: 8px;
- padding: 15px 10px 10px 50px;
- font-weight: 400;
- font-size: 12px;
- color: rgba(0,0,0,0.67);
- width: 236px;
- height: 49px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+ border-radius: 8px;
+ padding: 15px 10px 10px 50px;
+ font-weight: 400;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.67);
+ width: 236px;
+ height: 49px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
+
.quality-card.one {
- background-image: url("../assets/images/yuancailiao.png");
+ background-image: url("../assets/images/yuancailiao.png");
}
+
.quality-card.two {
- background-image: url("../assets/images/guocheng.png");
+ background-image: url("../assets/images/guocheng.png");
}
+
.quality-card.three {
- background-image: url("../assets/images/chuchang.png");
-
+ background-image: url("../assets/images/chuchang.png");
+
}
+
.quality-card span {
- color: #4fc3f7;
- font-weight: bold;
- margin-left: 6px;
+ color: #4fc3f7;
+ font-weight: bold;
+ margin-left: 6px;
}
+
.chart {
- width: 100%;
- height: 220px;
- margin-top: 10px;
+ width: 100%;
+ height: 220px;
+ margin-top: 10px;
+}
+
+.process-panel {
+ padding-bottom: 10px;
+}
+
+.process-panel__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.process-panel__body {
+ display: flex;
+ gap: 24px;
+ align-items: stretch;
+ margin-top: 10px;
+}
+
+.process-panel__chart {
+ flex: 1;
+ min-width: 0;
+ padding: 6px 0;
+}
+
+.process-panel__aside {
+ width: 260px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.process-legend {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 8px 6px;
+}
+
+.process-legend__item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.55);
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 2px;
+ display: inline-block;
+}
+
+.dot-blue {
+ background: #1E5BFF;
+}
+
+.dot-yellow {
+ background: #F7B500;
+}
+
+.dot-teal {
+ background: #19C6C6;
+}
+
+.process-card {
+ background: rgba(245, 247, 250, 0.9);
+ border-radius: 10px;
+ padding: 16px 16px;
+}
+
+.process-card--name {
+ background: rgba(235, 242, 255, 1);
+ color: #1E5BFF;
+ font-weight: 800;
+ font-size: 14px;
+}
+
+.process-card__label {
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.55);
+ margin-bottom: 10px;
+}
+
+.process-card__value {
+ font-size: 24px;
+ font-weight: 800;
+ color: rgba(0, 0, 0, 0.8);
+}
+
+.process-card__value .unit {
+ font-size: 12px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.45);
+ margin-left: 6px;
+}
+
+@media (max-width: 1200px) {
+ .process-panel__body {
+ flex-direction: column;
+ }
+
+ .process-panel__aside {
+ width: 100%;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .process-card {
+ flex: 1;
+ min-width: 220px;
+ }
+}
+
+.process-selection-wrapper {
+ max-height: 400px;
+ overflow-y: auto;
+ padding: 10px;
+}
+
+.process-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+ gap: 12px;
+}
+
+:deep(.el-checkbox.is-bordered) {
+ margin-left: 0 !important;
+ width: 100%;
}
</style>
\ No newline at end of file
diff --git a/src/views/inventoryManagement/receiptManagement/Record.vue b/src/views/inventoryManagement/receiptManagement/Record.vue
index cd103ea..3f90edf 100644
--- a/src/views/inventoryManagement/receiptManagement/Record.vue
+++ b/src/views/inventoryManagement/receiptManagement/Record.vue
@@ -129,7 +129,7 @@
const stockRecordTypeOptions = ref([]);
const page = reactive({
current: 1,
- size: 100,
+ size: 10,
});
const total = ref(0);
@@ -167,6 +167,7 @@
getStockInRecordListPage(params)
.then(res => {
tableData.value = res.data.records;
+ total.value = res.data.total || 0;
}).finally(() => {
tableLoading.value = false;
})
diff --git a/src/views/inventoryManagement/stockReport/index.vue b/src/views/inventoryManagement/stockReport/index.vue
index ff1d901..89773cf 100644
--- a/src/views/inventoryManagement/stockReport/index.vue
+++ b/src/views/inventoryManagement/stockReport/index.vue
@@ -48,7 +48,7 @@
style="width: 240px;"
/>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ <el-button type="primary" @click="onSearch" style="margin-left: 10px">
鏌ヨ
</el-button>
<el-button @click="handleReset">閲嶇疆</el-button>
@@ -230,21 +230,29 @@
show-overflow-tooltip
/>
</el-table>
+ <pagination
+ :total="total"
+ layout="total, sizes, prev, pager, next, jumper"
+ :page="page.current"
+ :limit="page.size"
+ @pagination="paginationChange"
+ />
</el-card>
</div>
</div>
</template>
<script setup>
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
+import pagination from '@/components/PIMTable/Pagination.vue'
import {
getStockInventoryInAndOutReportList,
getStockInventoryReportList
} from "@/api/inventoryManagement/stockInventory.js";
import {
- findAllQualifiedStockInRecordTypeOptions,
+ findAllQualifiedStockInRecordTypeOptions,findAllUnQualifiedStockInRecordTypeOptions,
} from "@/api/basicData/enum.js";
@@ -267,6 +275,13 @@
tableData: []
})
+const page = reactive({
+ current: 1,
+ size: 10,
+})
+
+const total = ref(0)
+
const stockRecordTypeOptions = ref([])
const getRecordType = (recordType) => {
@@ -278,6 +293,10 @@
findAllQualifiedStockInRecordTypeOptions()
.then(res => {
stockRecordTypeOptions.value = res.data;
+ findAllUnQualifiedStockInRecordTypeOptions()
+ .then(res => {
+ stockRecordTypeOptions.value = [...stockRecordTypeOptions.value,...res.data];
+ })
})
}
@@ -293,6 +312,7 @@
// 鎶ヨ〃绫诲瀷鏀瑰彉
const handleReportTypeChange = () => {
+ page.current = 1
reportData.value = {
summary: null,
chartData: null,
@@ -308,7 +328,12 @@
tableLoading.value = true
try {
- const params = getQueryParams()
+ const baseParams = getQueryParams()
+ const params = {
+ ...baseParams,
+ current: page.current,
+ size: page.size,
+ }
let response
if (searchForm.reportType === 'inout') {
@@ -317,7 +342,8 @@
response = await getStockInventoryReportList(params)
}
if (response.code === 200) {
- reportData.value.tableData = response.data.records
+ reportData.value.tableData = response.data.records || []
+ total.value = response.data.total || 0
// reportData.value.summary = response.data.summary
// reportData.value.chartData = response.data.chartData
// nextTick(() => {
@@ -330,6 +356,19 @@
} finally {
tableLoading.value = false
}
+}
+
+// 鏌ヨ鎸夐挳锛氶噸缃埌绗竴椤靛苟鏌ヨ
+const onSearch = () => {
+ page.current = 1
+ handleQuery()
+}
+
+// 鍒嗛〉鍙樺寲
+const paginationChange = (obj) => {
+ page.current = obj.page
+ page.size = obj.limit
+ handleQuery()
}
// // 鐢熸垚鍋囨暟鎹�
// const generateMockData = () => {
@@ -550,6 +589,8 @@
]
fetchStockRecordTypeOptions()
+ // 鍒濆鍖栧姞杞戒竴娆℃暟鎹�
+ handleQuery()
})
</script>
diff --git a/src/views/inventoryManagement/transportTaskManagement/index.vue b/src/views/inventoryManagement/transportTaskManagement/index.vue
new file mode 100644
index 0000000..1feb54b
--- /dev/null
+++ b/src/views/inventoryManagement/transportTaskManagement/index.vue
@@ -0,0 +1,692 @@
+<template>
+ <div class="app-container">
+ <!-- 缁熻姒傝 -->
+ <el-row :gutter="16" style="margin-bottom: 16px">
+ <el-col :span="6">
+ <el-card shadow="never">
+ <div>鎬讳换鍔℃暟</div>
+ <div style="font-size: 22px; font-weight: 600; margin-top: 4px">
+ {{ totalTasks }}
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card shadow="never">
+ <div>杩涜涓换鍔�</div>
+ <div style="font-size: 22px; font-weight: 600; margin-top: 4px">
+ {{ runningTasks }}
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card shadow="never">
+ <div>宸插畬鎴愪换鍔�</div>
+ <div style="font-size: 22px; font-weight: 600; margin-top: 4px">
+ {{ finishedTasks }}
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card shadow="never">
+ <div>瀹屾垚鐜�</div>
+ <div style="font-size: 22px; font-weight: 600; margin-top: 4px">
+ {{ completionRate }}%
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <!-- 鏌ヨ鏉′欢 -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">浠诲姟缂栧彿锛�</span>
+ <el-input
+ v-model="searchForm.taskNo"
+ style="width: 200px"
+ placeholder="璇疯緭鍏ヤ换鍔＄紪鍙�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">杞﹁締缂栧彿锛�</span>
+ <el-input
+ v-model="searchForm.vehicleCode"
+ style="width: 200px"
+ placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">浠诲姟鏃ユ湡锛�</span>
+ <el-date-picker
+ v-model="searchForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ @change="handleQuery"
+ />
+
+ <span class="search_title ml10">鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.status"
+ style="width: 140px"
+ placeholder="璇烽�夋嫨浠诲姟鐘舵��"
+ clearable
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button type="primary" icon="Plus" @click="openAdd">
+ 鏂板缓杩愯緭浠诲姟
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 琛ㄦ牸 -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 22em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column
+ prop="taskNo"
+ label="浠诲姟缂栧彿"
+ width="150"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="outboundOrderNo"
+ label="鍑哄簱璁㈠崟鍙�"
+ width="180"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="vehicleCode"
+ label="杞﹁締缂栧彿"
+ width="130"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="plateNumber"
+ label="杞︾墝鍙风爜"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="driverName"
+ label="鍙告満"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="loadAddress"
+ label="瑁呰揣鍦扮偣"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="deliveryAddress"
+ label="閫佽揣鍦扮偣"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="loadTime"
+ label="瑁呰揣鏃堕棿"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="deliveryTime"
+ label="閫佽揣鏃堕棿"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="signTime"
+ label="绛炬敹鏃堕棿"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鐘舵��" width="110" align="center">
+ <template #default="scope">
+ <el-tag :type="statusTagType(scope.row.status)">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="杩涘害" width="150" align="center">
+ <template #default="scope">
+ <el-progress
+ :percentage="scope.row.progress"
+ :status="scope.row.status === '宸插畬鎴�' ? 'success' : undefined"
+ :stroke-width="12"
+ :show-text="false"
+ />
+ <div style="font-size: 12px; margin-top: 4px">
+ {{ scope.row.progress }}%
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" fixed="right" width="160" align="center">
+ <template #default="scope">
+ <el-button
+ type="primary"
+ link
+ size="small"
+ @click="openEdit(scope.row)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="danger"
+ link
+ size="small"
+ @click="removeRow(scope.row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 鏂板/缂栬緫寮圭獥 -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ width="780px"
+ destroy-on-close
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="110px"
+ label-position="right"
+ >
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="浠诲姟缂栧彿锛�" prop="taskNo">
+ <el-input
+ v-model="form.taskNo"
+ placeholder="璇疯緭鍏ヤ换鍔＄紪鍙�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍑哄簱璁㈠崟鍙凤細" prop="outboundOrderNo">
+ <el-input
+ v-model="form.outboundOrderNo"
+ placeholder="璇疯緭鍏ュ叧鑱斿嚭搴撹鍗曞彿"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="杞﹁締缂栧彿锛�" prop="vehicleCode">
+ <el-input
+ v-model="form.vehicleCode"
+ placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="杞︾墝鍙风爜锛�" prop="plateNumber">
+ <el-input
+ v-model="form.plateNumber"
+ placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍙告満锛�" prop="driverName">
+ <el-input
+ v-model="form.driverName"
+ placeholder="璇疯緭鍏ュ徃鏈哄鍚�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍙告満鐢佃瘽锛�" prop="driverPhone">
+ <el-input
+ v-model="form.driverPhone"
+ placeholder="璇疯緭鍏ュ徃鏈鸿仈绯荤數璇�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="瑁呰揣鍦扮偣锛�" prop="loadAddress">
+ <el-input
+ v-model="form.loadAddress"
+ placeholder="璇疯緭鍏ヨ璐у湴鐐�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="閫佽揣鍦扮偣锛�" prop="deliveryAddress">
+ <el-input
+ v-model="form.deliveryAddress"
+ placeholder="璇疯緭鍏ラ�佽揣鍦扮偣"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="8">
+ <el-form-item label="瑁呰揣鏃堕棿锛�" prop="loadTime">
+ <el-date-picker
+ v-model="form.loadTime"
+ type="datetime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm"
+ placeholder="璇烽�夋嫨瑁呰揣鏃堕棿"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="閫佽揣鏃堕棿锛�" prop="deliveryTime">
+ <el-date-picker
+ v-model="form.deliveryTime"
+ type="datetime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm"
+ placeholder="璇烽�夋嫨閫佽揣鏃堕棿"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="绛炬敹鏃堕棿锛�" prop="signTime">
+ <el-date-picker
+ v-model="form.signTime"
+ type="datetime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm"
+ placeholder="璇烽�夋嫨绛炬敹鏃堕棿"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鐘舵�侊細" prop="status">
+ <el-select v-model="form.status" placeholder="璇烽�夋嫨浠诲姟鐘舵��">
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="璁″垝鏃ユ湡锛�" prop="planDate">
+ <el-date-picker
+ v-model="form.planDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨璁″垝鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleCancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="handleSubmit">淇� 瀛�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 妯℃嫙杩愯緭浠诲姟鏁版嵁
+const rawTasks = ref([
+ {
+ id: 1,
+ taskNo: "T2024-1201-001",
+ outboundOrderNo: "OUT-2024-1201-1001",
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ driverName: "寮犲笀鍌�",
+ driverPhone: "13800000001",
+ loadAddress: "娣卞湷浠撳簱A鍖�",
+ deliveryAddress: "骞垮窞瀹㈡埛涓�閮�",
+ planDate: "2024-12-01",
+ loadTime: "2024-12-01 09:00:00",
+ deliveryTime: "2024-12-01 14:30:00",
+ signTime: "2024-12-01 15:00:00",
+ status: "宸插畬鎴�",
+ },
+ {
+ id: 2,
+ taskNo: "T2024-1201-002",
+ outboundOrderNo: "OUT-2024-1201-1002",
+ vehicleCode: "CL-202402",
+ plateNumber: "绮67890",
+ driverName: "鏉庡笀鍌�",
+ driverPhone: "13800000002",
+ loadAddress: "娣卞湷浠撳簱B鍖�",
+ deliveryAddress: "涓滆帪瀹㈡埛浜岄儴",
+ planDate: "2024-12-01",
+ loadTime: "2024-12-01 10:00:00",
+ deliveryTime: "2024-12-01 13:00:00",
+ signTime: "",
+ status: "杩愯緭涓�",
+ },
+ {
+ id: 3,
+ taskNo: "T2024-1202-001",
+ outboundOrderNo: "OUT-2024-1202-1003",
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ driverName: "寮犲笀鍌�",
+ driverPhone: "13800000001",
+ loadAddress: "娣卞湷浠撳簱A鍖�",
+ deliveryAddress: "浣涘北瀹㈡埛涓夐儴",
+ planDate: "2024-12-02",
+ loadTime: "2024-12-02 08:30:00",
+ deliveryTime: "",
+ signTime: "",
+ status: "寰呭彂杞�",
+ },
+ {
+ id: 4,
+ taskNo: "T2024-1203-001",
+ outboundOrderNo: "OUT-2024-1203-1004",
+ vehicleCode: "CL-202403",
+ plateNumber: "绮11223",
+ driverName: "鐜嬪笀鍌�",
+ driverPhone: "13800000003",
+ loadAddress: "娣卞湷浠撳簱C鍖�",
+ deliveryAddress: "鎯犲窞瀹㈡埛鍥涢儴",
+ planDate: "2024-12-03",
+ loadTime: "",
+ deliveryTime: "",
+ signTime: "",
+ status: "鏈紑濮�",
+ },
+]);
+
+// 鐘舵�佹灇涓�
+const statusOptions = [
+ { label: "鏈紑濮�", value: "鏈紑濮�" },
+ { label: "寰呭彂杞�", value: "寰呭彂杞�" },
+ { label: "杩愯緭涓�", value: "杩愯緭涓�" },
+ { label: "寰呯鏀�", value: "寰呯鏀�" },
+ { label: "宸插畬鎴�", value: "宸插畬鎴�" },
+];
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+ taskNo: "",
+ vehicleCode: "",
+ dateRange: [],
+ status: "",
+});
+
+// 琛ㄦ牸鏁版嵁锛堝甫杩涘害绛夎绠楀瓧娈碉級
+const tableData = ref([]);
+
+// 缁熻
+const totalTasks = computed(() => rawTasks.value.length);
+const finishedTasks = computed(
+ () => rawTasks.value.filter((t) => t.status === "宸插畬鎴�").length
+);
+const runningTasks = computed(
+ () =>
+ rawTasks.value.filter((t) =>
+ ["寰呭彂杞�", "杩愯緭涓�", "寰呯鏀�"].includes(t.status)
+ ).length
+);
+const completionRate = computed(() => {
+ if (!totalTasks.value) return 0;
+ return Math.round((finishedTasks.value / totalTasks.value) * 100);
+});
+
+// 璁＄畻鍗曟潯浠诲姟杩涘害
+const computeProgress = (task) => {
+ if (task.status === "宸插畬鎴�" || task.signTime) return 100;
+ if (task.status === "寰呯鏀�" || task.deliveryTime) return 80;
+ if (task.status === "杩愯緭涓�") return 60;
+ if (task.status === "寰呭彂杞�" || task.loadTime) return 30;
+ if (task.status === "鏈紑濮�") return 0;
+ return 0;
+};
+
+// 鐘舵�� tag 鏍峰紡
+const statusTagType = (status) => {
+ if (status === "宸插畬鎴�") return "success";
+ if (status === "杩愯緭涓�") return "warning";
+ if (status === "寰呯鏀�" || status === "寰呭彂杞�") return "info";
+ return "default";
+};
+
+// 閲嶇畻琛ㄦ牸鏁版嵁
+const recomputeTable = () => {
+ const filtered = rawTasks.value
+ .filter((t) => {
+ if (searchForm.taskNo && !t.taskNo.includes(searchForm.taskNo.trim())) {
+ return false;
+ }
+ if (
+ searchForm.vehicleCode &&
+ !t.vehicleCode.includes(searchForm.vehicleCode.trim())
+ ) {
+ return false;
+ }
+ if (searchForm.status && t.status !== searchForm.status) {
+ return false;
+ }
+ if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+ const [start, end] = searchForm.dateRange;
+ if (!t.planDate || t.planDate < start || t.planDate > end) {
+ return false;
+ }
+ }
+ return true;
+ })
+ .map((t) => ({
+ ...t,
+ progress: computeProgress(t),
+ }));
+
+ tableData.value = filtered;
+};
+
+// 鏌ヨ
+const handleQuery = () => {
+ recomputeTable();
+};
+
+const resetSearch = () => {
+ searchForm.taskNo = "";
+ searchForm.vehicleCode = "";
+ searchForm.dateRange = [];
+ searchForm.status = "";
+ recomputeTable();
+};
+
+// 琛屾牱寮�
+const tableRowClassName = ({ row }) => {
+ if (row.status === "宸插畬鎴�") {
+ return "row-finished";
+ }
+ if (row.status === "杩愯緭涓�") {
+ return "row-running";
+ }
+ return "";
+};
+
+// 寮圭獥 & 琛ㄥ崟
+const dialogVisible = ref(false);
+const dialogTitle = ref("鏂板缓杩愯緭浠诲姟");
+const isEdit = ref(false);
+const formRef = ref(null);
+const form = reactive({
+ id: null,
+ taskNo: "",
+ outboundOrderNo: "",
+ vehicleCode: "",
+ plateNumber: "",
+ driverName: "",
+ driverPhone: "",
+ loadAddress: "",
+ deliveryAddress: "",
+ planDate: "",
+ loadTime: "",
+ deliveryTime: "",
+ signTime: "",
+ status: "鏈紑濮�",
+});
+
+const rules = {
+ taskNo: [{ required: true, message: "璇疯緭鍏ヤ换鍔＄紪鍙�", trigger: "blur" }],
+ outboundOrderNo: [
+ { required: true, message: "璇疯緭鍏ュ嚭搴撹鍗曞彿", trigger: "blur" },
+ ],
+ vehicleCode: [{ required: true, message: "璇疯緭鍏ヨ溅杈嗙紪鍙�", trigger: "blur" }],
+ plateNumber: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿鐮�", trigger: "blur" }],
+ driverName: [{ required: true, message: "璇疯緭鍏ュ徃鏈哄鍚�", trigger: "blur" }],
+ loadAddress: [{ required: true, message: "璇疯緭鍏ヨ璐у湴鐐�", trigger: "blur" }],
+ deliveryAddress: [
+ { required: true, message: "璇疯緭鍏ラ�佽揣鍦扮偣", trigger: "blur" },
+ ],
+ planDate: [{ required: true, message: "璇烽�夋嫨璁″垝鏃ユ湡", trigger: "change" }],
+};
+
+// 鏂板缓
+const openAdd = () => {
+ dialogTitle.value = "鏂板缓杩愯緭浠诲姟";
+ isEdit.value = false;
+ Object.assign(form, {
+ id: null,
+ taskNo: "",
+ outboundOrderNo: "",
+ vehicleCode: "",
+ plateNumber: "",
+ driverName: "",
+ driverPhone: "",
+ loadAddress: "",
+ deliveryAddress: "",
+ planDate: "",
+ loadTime: "",
+ deliveryTime: "",
+ signTime: "",
+ status: "鏈紑濮�",
+ });
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const openEdit = (row) => {
+ dialogTitle.value = "缂栬緫杩愯緭浠诲姟";
+ isEdit.value = true;
+ Object.assign(form, row);
+ dialogVisible.value = true;
+};
+
+// 淇濆瓨
+const handleSubmit = () => {
+ if (!formRef.value) return;
+ formRef.value.validate((valid) => {
+ if (!valid) return;
+
+ if (isEdit.value) {
+ const index = rawTasks.value.findIndex((t) => t.id === form.id);
+ if (index !== -1) {
+ rawTasks.value[index] = { ...form };
+ }
+ ElMessage.success("杩愯緭浠诲姟宸叉洿鏂�");
+ } else {
+ const newId = rawTasks.value.length
+ ? Math.max(...rawTasks.value.map((t) => t.id)) + 1
+ : 1;
+ rawTasks.value.push({ ...form, id: newId });
+ ElMessage.success("杩愯緭浠诲姟宸叉柊澧�");
+ }
+ dialogVisible.value = false;
+ recomputeTable();
+ });
+};
+
+const handleCancel = () => {
+ dialogVisible.value = false;
+};
+
+// 鍒犻櫎
+const removeRow = (row) => {
+ ElMessageBox.confirm("鏄惁纭鍒犻櫎璇ヨ繍杈撲换鍔★紵", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ rawTasks.value = rawTasks.value.filter((t) => t.id !== row.id);
+ recomputeTable();
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {});
+};
+
+onMounted(() => {
+ recomputeTable();
+});
+</script>
+
+<style scoped lang="scss">
+.dialog-footer {
+ text-align: right;
+}
+
+::v-deep(.row-finished) {
+ background-color: #f6ffed;
+}
+
+::v-deep(.row-running) {
+ background-color: #fffbe6;
+}
+</style>
+
diff --git a/src/views/inventoryManagement/vehicleFuelManagement/index.vue b/src/views/inventoryManagement/vehicleFuelManagement/index.vue
new file mode 100644
index 0000000..8579cba
--- /dev/null
+++ b/src/views/inventoryManagement/vehicleFuelManagement/index.vue
@@ -0,0 +1,556 @@
+<template>
+ <div class="app-container">
+ <!-- 鏌ヨ鏉′欢 -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">杞﹁締缂栧彿锛�</span>
+ <el-input
+ v-model="searchForm.vehicleCode"
+ style="width: 200px"
+ placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">鍔犳补鏃堕棿锛�</span>
+ <el-date-picker
+ v-model="searchForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ @change="handleQuery"
+ />
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button type="primary" icon="Plus" @click="openAdd">
+ 鏂板鍔犳补璁板綍
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 琛ㄦ牸 -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 18.5em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column
+ prop="vehicleCode"
+ label="杞﹁締缂栧彿"
+ width="130"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="plateNumber"
+ label="杞︾墝鍙风爜"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="fuelDate"
+ label="鍔犳补鏃ユ湡"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="gunNo"
+ label="娌规灙鍙�"
+ width="90"
+ align="center"
+ />
+ <el-table-column
+ prop="amount"
+ label="閲戦(鍏�)"
+ width="100"
+ align="right"
+ >
+ <template #default="scope">
+ <span>{{ scope.row.amount?.toFixed(2) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="liters"
+ label="鍗囨暟(L)"
+ width="90"
+ align="right"
+ >
+ <template #default="scope">
+ <span>{{ scope.row.liters?.toFixed(2) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="startMileage"
+ label="璧峰閲岀▼(km)"
+ width="120"
+ align="right"
+ />
+ <el-table-column
+ prop="endMileage"
+ label="缁撴潫閲岀▼(km)"
+ width="120"
+ align="right"
+ />
+ <el-table-column
+ prop="distance"
+ label="琛岄┒閲岀▼(km)"
+ width="120"
+ align="right"
+ />
+ <el-table-column
+ prop="fuelConsumption"
+ label="娌硅��(L/100km)"
+ width="130"
+ align="center"
+ >
+ <template #default="scope">
+ <span
+ :style="scope.row.isAbnormal ? 'color:#F56C6C;font-weight:600;' : ''"
+ >
+ {{ scope.row.fuelConsumption != null ? scope.row.fuelConsumption.toFixed(2) : '-' }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="avgConsumption"
+ label="杞﹁締骞冲潎娌硅��"
+ width="130"
+ align="center"
+ >
+ <template #default="scope">
+ <span>
+ {{ scope.row.avgConsumption != null ? scope.row.avgConsumption.toFixed(2) : '-' }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column label="寮傚父棰勮" width="100" align="center">
+ <template #default="scope">
+ <el-tag v-if="scope.row.isAbnormal" type="danger" size="small">
+ 寮傚父
+ </el-tag>
+ <span v-else>-</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" fixed="right" width="140" align="center">
+ <template #default="scope">
+ <el-button
+ type="primary"
+ link
+ size="small"
+ @click="openEdit(scope.row)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="danger"
+ link
+ size="small"
+ @click="removeRow(scope.row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 鏂板/缂栬緫寮圭獥 -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ width="640px"
+ destroy-on-close
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="110px"
+ label-position="right"
+ >
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="杞﹁締缂栧彿锛�" prop="vehicleCode">
+ <el-input
+ v-model="form.vehicleCode"
+ placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="杞︾墝鍙风爜锛�" prop="plateNumber">
+ <el-input
+ v-model="form.plateNumber"
+ placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍔犳补鏃ユ湡锛�" prop="fuelDate">
+ <el-date-picker
+ v-model="form.fuelDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鍔犳补鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="娌规灙鍙凤細" prop="gunNo">
+ <el-input
+ v-model="form.gunNo"
+ placeholder="璇疯緭鍏ユ补鏋彿"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="閲戦(鍏�)锛�" prop="amount">
+ <el-input-number
+ v-model="form.amount"
+ :min="0"
+ :step="0.01"
+ :precision="2"
+ placeholder="璇疯緭鍏ラ噾棰�"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍗囨暟(L)锛�" prop="liters">
+ <el-input-number
+ v-model="form.liters"
+ :min="0"
+ :step="0.01"
+ :precision="2"
+ placeholder="璇疯緭鍏ュ崌鏁�"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="璧峰閲岀▼(km)锛�" prop="startMileage">
+ <el-input-number
+ v-model="form.startMileage"
+ :min="0"
+ :step="1"
+ placeholder="璇疯緭鍏ヨ捣濮嬮噷绋�"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="缁撴潫閲岀▼(km)锛�" prop="endMileage">
+ <el-input-number
+ v-model="form.endMileage"
+ :min="0"
+ :step="1"
+ placeholder="璇疯緭鍏ョ粨鏉熼噷绋�"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleCancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="handleSubmit">淇� 瀛�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 妯℃嫙鍔犳补璁板綍鏁版嵁
+const rawRecords = ref([
+ {
+ id: 1,
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ fuelDate: "2024-12-01",
+ gunNo: "01",
+ amount: 500,
+ liters: 70,
+ startMileage: 12000,
+ endMileage: 12600,
+ },
+ {
+ id: 2,
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ fuelDate: "2024-12-15",
+ gunNo: "02",
+ amount: 520,
+ liters: 72,
+ startMileage: 12600,
+ endMileage: 13250,
+ },
+ {
+ id: 3,
+ vehicleCode: "CL-202402",
+ plateNumber: "绮67890",
+ fuelDate: "2024-12-05",
+ gunNo: "03",
+ amount: 430,
+ liters: 60,
+ startMileage: 8000,
+ endMileage: 8520,
+ },
+ {
+ id: 4,
+ vehicleCode: "CL-202402",
+ plateNumber: "绮67890",
+ fuelDate: "2024-12-20",
+ gunNo: "01",
+ amount: 450,
+ liters: 63,
+ startMileage: 8520,
+ endMileage: 9000,
+ },
+ {
+ id: 5,
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ fuelDate: "2025-01-05",
+ gunNo: "01",
+ amount: 700,
+ liters: 90,
+ startMileage: 13250,
+ endMileage: 13600, // 鏄庢樉寮傚父娌硅��
+ },
+]);
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+ vehicleCode: "",
+ dateRange: [],
+});
+
+// 琛ㄦ牸鏁版嵁锛堝寘鍚绠楀瓧娈碉級
+const tableData = ref([]);
+
+// 寮圭獥 & 琛ㄥ崟
+const dialogVisible = ref(false);
+const dialogTitle = ref("鏂板鍔犳补璁板綍");
+const isEdit = ref(false);
+const formRef = ref(null);
+const form = reactive({
+ id: null,
+ vehicleCode: "",
+ plateNumber: "",
+ fuelDate: "",
+ gunNo: "",
+ amount: null,
+ liters: null,
+ startMileage: null,
+ endMileage: null,
+});
+
+const rules = {
+ vehicleCode: [{ required: true, message: "璇疯緭鍏ヨ溅杈嗙紪鍙�", trigger: "blur" }],
+ plateNumber: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿鐮�", trigger: "blur" }],
+ fuelDate: [{ required: true, message: "璇烽�夋嫨鍔犳补鏃ユ湡", trigger: "change" }],
+ gunNo: [{ required: true, message: "璇疯緭鍏ユ补鏋彿", trigger: "blur" }],
+ amount: [{ required: true, message: "璇疯緭鍏ラ噾棰�", trigger: "blur" }],
+ liters: [{ required: true, message: "璇疯緭鍏ュ崌鏁�", trigger: "blur" }],
+ startMileage: [{ required: true, message: "璇疯緭鍏ヨ捣濮嬮噷绋�", trigger: "blur" }],
+ endMileage: [{ required: true, message: "璇疯緭鍏ョ粨鏉熼噷绋�", trigger: "blur" }],
+};
+
+// 閲嶆柊璁＄畻娌硅�椼�佸钩鍧囨补鑰楀拰寮傚父棰勮
+const recomputeTable = () => {
+ const records = rawRecords.value;
+
+ // 1. 鍏堟寜杞﹁締缁熻骞冲潎娌硅��
+ const stats = {};
+ records.forEach((r) => {
+ const distance = r.endMileage - r.startMileage;
+ if (distance <= 0 || !r.liters) return;
+ const cons = (r.liters / distance) * 100; // L/100km
+ if (!stats[r.vehicleCode]) {
+ stats[r.vehicleCode] = { totalCons: 0, count: 0 };
+ }
+ stats[r.vehicleCode].totalCons += cons;
+ stats[r.vehicleCode].count += 1;
+ });
+
+ const avgMap = {};
+ Object.keys(stats).forEach((key) => {
+ avgMap[key] = stats[key].totalCons / stats[key].count;
+ });
+
+ // 2. 鎸夌瓫閫夋潯浠惰繃婊ゅ苟琛ュ厖璁＄畻瀛楁
+ const filtered = records
+ .filter((r) => {
+ if (
+ searchForm.vehicleCode &&
+ !r.vehicleCode.includes(searchForm.vehicleCode.trim())
+ ) {
+ return false;
+ }
+ if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+ const [start, end] = searchForm.dateRange;
+ if (r.fuelDate < start || r.fuelDate > end) {
+ return false;
+ }
+ }
+ return true;
+ })
+ .map((r) => {
+ const distance = r.endMileage - r.startMileage;
+ const fuelConsumption =
+ distance > 0 && r.liters
+ ? (r.liters / distance) * 100
+ : null;
+ const avgConsumption =
+ avgMap[r.vehicleCode] != null ? avgMap[r.vehicleCode] : null;
+ const isAbnormal =
+ avgConsumption != null &&
+ fuelConsumption != null &&
+ fuelConsumption > avgConsumption * 1.2;
+
+ return {
+ ...r,
+ distance,
+ fuelConsumption,
+ avgConsumption,
+ isAbnormal,
+ };
+ });
+
+ tableData.value = filtered;
+};
+
+// 鏌ヨ
+const handleQuery = () => {
+ recomputeTable();
+};
+
+const resetSearch = () => {
+ searchForm.vehicleCode = "";
+ searchForm.dateRange = [];
+ recomputeTable();
+};
+
+// 琛屾牱寮忥紙寮傚父楂樹寒锛�
+const tableRowClassName = ({ row }) => {
+ if (row.isAbnormal) {
+ return "row-abnormal";
+ }
+ return "";
+};
+
+// 鏂板
+const openAdd = () => {
+ dialogTitle.value = "鏂板鍔犳补璁板綍";
+ isEdit.value = false;
+ Object.assign(form, {
+ id: null,
+ vehicleCode: "",
+ plateNumber: "",
+ fuelDate: "",
+ gunNo: "",
+ amount: null,
+ liters: null,
+ startMileage: null,
+ endMileage: null,
+ });
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const openEdit = (row) => {
+ dialogTitle.value = "缂栬緫鍔犳补璁板綍";
+ isEdit.value = true;
+ Object.assign(form, row);
+ dialogVisible.value = true;
+};
+
+// 淇濆瓨
+const handleSubmit = () => {
+ if (!formRef.value) return;
+ formRef.value.validate((valid) => {
+ if (!valid) return;
+
+ if (form.endMileage <= form.startMileage) {
+ ElMessage.warning("缁撴潫閲岀▼蹇呴』澶т簬璧峰閲岀▼");
+ return;
+ }
+
+ if (isEdit.value) {
+ const index = rawRecords.value.findIndex((r) => r.id === form.id);
+ if (index !== -1) {
+ rawRecords.value[index] = { ...form };
+ }
+ ElMessage.success("鍔犳补璁板綍宸叉洿鏂�");
+ } else {
+ const newId = rawRecords.value.length
+ ? Math.max(...rawRecords.value.map((r) => r.id)) + 1
+ : 1;
+ rawRecords.value.push({ ...form, id: newId });
+ ElMessage.success("鍔犳补璁板綍宸叉柊澧�");
+ }
+ dialogVisible.value = false;
+ recomputeTable();
+ });
+};
+
+const handleCancel = () => {
+ dialogVisible.value = false;
+};
+
+// 鍒犻櫎
+const removeRow = (row) => {
+ ElMessageBox.confirm("鏄惁纭鍒犻櫎璇ュ姞娌硅褰曪紵", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ rawRecords.value = rawRecords.value.filter((r) => r.id !== row.id);
+ recomputeTable();
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {});
+};
+
+onMounted(() => {
+ recomputeTable();
+});
+</script>
+
+<style scoped lang="scss">
+.dialog-footer {
+ text-align: right;
+}
+
+::v-deep(.row-abnormal) {
+ background-color: #fff5f5;
+}
+</style>
+
diff --git a/src/views/inventoryManagement/vehicleManagement/index.vue b/src/views/inventoryManagement/vehicleManagement/index.vue
new file mode 100644
index 0000000..1e383c6
--- /dev/null
+++ b/src/views/inventoryManagement/vehicleManagement/index.vue
@@ -0,0 +1,581 @@
+<template>
+ <div class="app-container">
+ <!-- 鏌ヨ鏉′欢 -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">杞︾墝鍙风爜锛�</span>
+ <el-input
+ v-model="searchForm.plateNumber"
+ style="width: 180px"
+ placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+
+ <span class="search_title ml10">杞﹁締绫诲瀷锛�</span>
+ <el-select
+ v-model="searchForm.vehicleType"
+ style="width: 160px"
+ placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
+ clearable
+ >
+ <el-option
+ v-for="item in vehicleTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <span class="search_title ml10">鎵�灞為儴闂細</span>
+ <el-select
+ v-model="searchForm.department"
+ style="width: 160px"
+ placeholder="璇烽�夋嫨鎵�灞為儴闂�"
+ clearable
+ >
+ <el-option
+ v-for="item in departmentOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <span class="search_title ml10">鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.status"
+ style="width: 140px"
+ placeholder="璇烽�夋嫨鐘舵��"
+ clearable
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <span class="search_title ml10">褰掓。鐘舵�侊細</span>
+ <el-select
+ v-model="searchForm.archived"
+ style="width: 140px"
+ placeholder="璇烽�夋嫨褰掓。鐘舵��"
+ clearable
+ >
+ <el-option label="鏈綊妗�" value="false" />
+ <el-option label="宸插綊妗�" value="true" />
+ </el-select>
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button type="primary" icon="Plus" @click="openAdd">鏂板杞﹁締</el-button>
+ </div>
+ </div>
+
+ <!-- 琛ㄦ牸 -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 18.5em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column
+ prop="vehicleCode"
+ label="杞﹁締缂栧彿"
+ width="140"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="plateNumber"
+ label="杞︾墝鍙风爜"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="vehicleType"
+ label="杞﹁締绫诲瀷"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="department"
+ label="鎵�灞為儴闂�"
+ width="140"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="purchaseDate"
+ label="璐疆鏃ユ湡"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="licenseNumber"
+ label="琛岄┒璇佺紪鍙�"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="licenseIssueDate"
+ label="鍙戣瘉鏃ユ湡"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="licenseExpireDate"
+ label="鍒版湡鏃ユ湡"
+ width="120"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鐘舵��" width="100" align="center">
+ <template #default="scope">
+ <el-tag :type="statusTagType(scope.row.status)">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="褰掓。鐘舵��" width="100" align="center">
+ <template #default="scope">
+ <el-tag :type="scope.row.archived ? 'info' : 'success'">
+ {{ scope.row.archived ? '宸插綊妗�' : '鏈綊妗�' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" fixed="right" width="220" align="center">
+ <template #default="scope">
+ <el-button
+ type="primary"
+ link
+ size="small"
+ @click="openEdit(scope.row)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="warning"
+ link
+ size="small"
+ :disabled="scope.row.archived"
+ @click="archiveRow(scope.row)"
+ >
+ 褰掓。
+ </el-button>
+ <el-button
+ type="danger"
+ link
+ size="small"
+ @click="removeRow(scope.row)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 鏂板/缂栬緫寮圭獥 -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ width="600px"
+ destroy-on-close
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="100px"
+ label-position="right"
+ >
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="杞﹁締缂栧彿锛�" prop="vehicleCode">
+ <el-input v-model="form.vehicleCode" placeholder="璇疯緭鍏ヨ溅杈嗙紪鍙�" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="杞︾墝鍙风爜锛�" prop="plateNumber">
+ <el-input v-model="form.plateNumber" placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="杞﹁締绫诲瀷锛�" prop="vehicleType">
+ <el-select
+ v-model="form.vehicleType"
+ placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
+ clearable
+ >
+ <el-option
+ v-for="item in vehicleTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鎵�灞為儴闂細" prop="department">
+ <el-select
+ v-model="form.department"
+ placeholder="璇烽�夋嫨鎵�灞為儴闂�"
+ clearable
+ >
+ <el-option
+ v-for="item in departmentOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="璐疆鏃ユ湡锛�" prop="purchaseDate">
+ <el-date-picker
+ v-model="form.purchaseDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨璐疆鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐘舵�侊細" prop="status">
+ <el-select v-model="form.status" placeholder="璇烽�夋嫨鐘舵��">
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="琛岄┒璇佺紪鍙凤細" prop="licenseNumber">
+ <el-input
+ v-model="form.licenseNumber"
+ placeholder="璇疯緭鍏ヨ椹惰瘉缂栧彿"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍙戣瘉鏃ユ湡锛�" prop="licenseIssueDate">
+ <el-date-picker
+ v-model="form.licenseIssueDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鍙戣瘉鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-form-item label="鍒版湡鏃ユ湡锛�" prop="licenseExpireDate">
+ <el-date-picker
+ v-model="form.licenseExpireDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鍒版湡鏃ユ湡"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleCancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="handleSubmit">淇� 瀛�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 妯℃嫙杞﹁締鍩虹鏁版嵁
+const allVehicles = ref([
+ {
+ id: 1,
+ vehicleCode: "CL-202401",
+ plateNumber: "绮12345",
+ vehicleType: "鍘㈠紡璐ц溅",
+ department: "鐗╂祦涓�閮�",
+ purchaseDate: "2022-03-15",
+ licenseNumber: "4401-2022-0001",
+ licenseIssueDate: "2022-03-10",
+ licenseExpireDate: "2026-03-10",
+ status: "鍦ㄧ敤",
+ archived: false,
+ },
+ {
+ id: 2,
+ vehicleCode: "CL-202402",
+ plateNumber: "绮67890",
+ vehicleType: "鍐疯棌杞�",
+ department: "鐗╂祦浜岄儴",
+ purchaseDate: "2021-08-01",
+ licenseNumber: "4401-2021-0123",
+ licenseIssueDate: "2021-07-28",
+ licenseExpireDate: "2025-07-28",
+ status: "缁翠慨",
+ archived: false,
+ },
+ {
+ id: 3,
+ vehicleCode: "CL-202403",
+ plateNumber: "绮11223",
+ vehicleType: "鐗靛紩杞�",
+ department: "椤圭洰杩愯緭閮�",
+ purchaseDate: "2020-05-20",
+ licenseNumber: "4401-2020-0456",
+ licenseIssueDate: "2020-05-18",
+ licenseExpireDate: "2024-05-18",
+ status: "闂茬疆",
+ archived: false,
+ },
+ {
+ id: 4,
+ vehicleCode: "CL-202404",
+ plateNumber: "绮33445",
+ vehicleType: "鍘㈠紡璐ц溅",
+ department: "璧勪骇绠＄悊閮�",
+ purchaseDate: "2019-11-11",
+ licenseNumber: "4401-2019-0789",
+ licenseIssueDate: "2019-11-08",
+ licenseExpireDate: "2023-11-08",
+ status: "鍦ㄧ敤",
+ archived: true,
+ },
+]);
+
+// 涓嬫媺鏋氫妇
+const vehicleTypeOptions = [
+ { label: "鍘㈠紡璐ц溅", value: "鍘㈠紡璐ц溅" },
+ { label: "鍐疯棌杞�", value: "鍐疯棌杞�" },
+ { label: "鐗靛紩杞�", value: "鐗靛紩杞�" },
+ { label: "鍏朵粬", value: "鍏朵粬" },
+];
+
+const departmentOptions = [
+ { label: "鐗╂祦涓�閮�", value: "鐗╂祦涓�閮�" },
+ { label: "鐗╂祦浜岄儴", value: "鐗╂祦浜岄儴" },
+ { label: "椤圭洰杩愯緭閮�", value: "椤圭洰杩愯緭閮�" },
+ { label: "璧勪骇绠＄悊閮�", value: "璧勪骇绠＄悊閮�" },
+];
+
+const statusOptions = [
+ { label: "鍦ㄧ敤", value: "鍦ㄧ敤" },
+ { label: "闂茬疆", value: "闂茬疆" },
+ { label: "缁翠慨", value: "缁翠慨" },
+];
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+ plateNumber: "",
+ vehicleType: "",
+ department: "",
+ status: "",
+ archived: "",
+});
+
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([...allVehicles.value]);
+
+// 寮圭獥 & 琛ㄥ崟
+const dialogVisible = ref(false);
+const dialogTitle = ref("鏂板杞﹁締");
+const isEdit = ref(false);
+const formRef = ref(null);
+const form = reactive({
+ id: null,
+ vehicleCode: "",
+ plateNumber: "",
+ vehicleType: "",
+ department: "",
+ purchaseDate: "",
+ licenseNumber: "",
+ licenseIssueDate: "",
+ licenseExpireDate: "",
+ status: "鍦ㄧ敤",
+ archived: false,
+});
+
+const rules = {
+ vehicleCode: [{ required: true, message: "璇疯緭鍏ヨ溅杈嗙紪鍙�", trigger: "blur" }],
+ plateNumber: [{ required: true, message: "璇疯緭鍏ヨ溅鐗屽彿鐮�", trigger: "blur" }],
+ vehicleType: [{ required: true, message: "璇烽�夋嫨杞﹁締绫诲瀷", trigger: "change" }],
+ department: [{ required: true, message: "璇烽�夋嫨鎵�灞為儴闂�", trigger: "change" }],
+ purchaseDate: [{ required: true, message: "璇烽�夋嫨璐疆鏃ユ湡", trigger: "change" }],
+ status: [{ required: true, message: "璇烽�夋嫨鐘舵��", trigger: "change" }],
+ licenseNumber: [{ required: true, message: "璇疯緭鍏ヨ椹惰瘉缂栧彿", trigger: "blur" }],
+ licenseIssueDate: [{ required: true, message: "璇烽�夋嫨鍙戣瘉鏃ユ湡", trigger: "change" }],
+};
+
+// 鏌ヨ
+const handleQuery = () => {
+ tableData.value = allVehicles.value.filter((item) => {
+ if (
+ searchForm.plateNumber &&
+ !item.plateNumber.includes(searchForm.plateNumber.trim())
+ ) {
+ return false;
+ }
+ if (searchForm.vehicleType && item.vehicleType !== searchForm.vehicleType) {
+ return false;
+ }
+ if (searchForm.department && item.department !== searchForm.department) {
+ return false;
+ }
+ if (searchForm.status && item.status !== searchForm.status) {
+ return false;
+ }
+ if (searchForm.archived !== "") {
+ const targetArchived = searchForm.archived === "true";
+ if (item.archived !== targetArchived) return false;
+ }
+ return true;
+ });
+};
+
+const resetSearch = () => {
+ searchForm.plateNumber = "";
+ searchForm.vehicleType = "";
+ searchForm.department = "";
+ searchForm.status = "";
+ searchForm.archived = "";
+ handleQuery();
+};
+
+// 鏂板
+const openAdd = () => {
+ dialogTitle.value = "鏂板杞﹁締";
+ isEdit.value = false;
+ Object.assign(form, {
+ id: null,
+ vehicleCode: "",
+ plateNumber: "",
+ vehicleType: "",
+ department: "",
+ purchaseDate: "",
+ licenseInfo: "",
+ status: "鍦ㄧ敤",
+ archived: false,
+ });
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const openEdit = (row) => {
+ dialogTitle.value = "缂栬緫杞﹁締";
+ isEdit.value = true;
+ Object.assign(form, row);
+ dialogVisible.value = true;
+};
+
+// 淇濆瓨
+const handleSubmit = () => {
+ if (!formRef.value) return;
+ formRef.value.validate((valid) => {
+ if (!valid) return;
+ if (isEdit.value) {
+ const index = allVehicles.value.findIndex((v) => v.id === form.id);
+ if (index !== -1) {
+ allVehicles.value[index] = { ...form };
+ }
+ ElMessage.success("杞﹁締淇℃伅宸叉洿鏂�");
+ } else {
+ const newId = allVehicles.value.length
+ ? Math.max(...allVehicles.value.map((v) => v.id)) + 1
+ : 1;
+ allVehicles.value.push({ ...form, id: newId });
+ ElMessage.success("杞﹁締淇℃伅宸叉柊澧�");
+ }
+ dialogVisible.value = false;
+ handleQuery();
+ });
+};
+
+const handleCancel = () => {
+ dialogVisible.value = false;
+};
+
+// 褰掓。
+const archiveRow = (row) => {
+ if (row.archived) return;
+ ElMessageBox.confirm(
+ "鏄惁纭灏嗚杞﹁締褰掓。锛熷綊妗ｅ悗浠呬繚鐣欐煡璇紝涓嶅啀鍙備笌杩愯緭浠诲姟鍒嗛厤銆�",
+ "褰掓。鎻愮ず",
+ {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ row.archived = true;
+ if (row.status === "鍦ㄧ敤") {
+ row.status = "闂茬疆";
+ }
+ ElMessage.success("杞﹁締宸插綊妗�");
+ handleQuery();
+ })
+ .catch(() => {});
+};
+
+// 鍒犻櫎
+const removeRow = (row) => {
+ ElMessageBox.confirm("鏄惁纭鍒犻櫎璇ヨ溅杈嗗熀纭�淇℃伅锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ allVehicles.value = allVehicles.value.filter((v) => v.id !== row.id);
+ handleQuery();
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ })
+ .catch(() => {});
+};
+
+// 鐘舵�佹牱寮�
+const statusTagType = (status) => {
+ if (status === "鍦ㄧ敤") return "success";
+ if (status === "闂茬疆") return "info";
+ if (status === "缁翠慨") return "warning";
+ return "default";
+};
+</script>
+
+<style scoped lang="scss">
+.dialog-footer {
+ text-align: right;
+}
+</style>
+
diff --git a/src/views/personnelManagement/attendanceCheckin/index.vue b/src/views/personnelManagement/attendanceCheckin/index.vue
new file mode 100644
index 0000000..bcfdb00
--- /dev/null
+++ b/src/views/personnelManagement/attendanceCheckin/index.vue
@@ -0,0 +1,469 @@
+<template>
+ <div class="app-container">
+ <!-- 鍛樺伐鎵撳崱鍖� -->
+ <el-card shadow="never" class="mb16">
+ <div class="attendance-header">
+ <div>
+ <div class="title">鎵撳崱绛惧埌</div>
+ <div class="sub-title">鏀寔涓�閿墦鍗★紝鑷姩璁板綍涓婁笅鐝椂闂�</div>
+ </div>
+ <div class="attendance-actions">
+ <div class="time-block">
+ <div class="label">褰撳墠鏃堕棿</div>
+ <div class="value">{{ nowTime }}</div>
+ </div>
+ <el-button type="primary" size="large" @click="handleCheckInOut">
+ {{ checkInOutText }}
+ </el-button>
+ </div>
+ </div>
+ <el-descriptions border :column="4" class="mt10">
+ <el-descriptions-item label="鍛樺伐濮撳悕">
+ {{ currentUser.name }}
+ </el-descriptions-item>
+ <el-descriptions-item label="宸ュ彿">
+ {{ currentUser.no }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎵�灞為儴闂�">
+ {{ currentUser.dept }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浠婃棩鐘舵��">
+ <el-tag :type="todayStatusTag" size="small">
+ {{ todayStatusText }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="涓婄彮鏃堕棿">
+ {{ todayRecord?.checkInTime || '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="涓嬬彮鏃堕棿">
+ {{ todayRecord?.checkOutTime || '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="宸ユ椂(灏忔椂)">
+ {{ todayRecord?.workHours ?? '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="寮傚父鏍囪">
+ <span v-if="todayRecord?.status === 'normal'">-</span>
+ <el-tag v-else type="danger" size="small">
+ {{ todayRecord?.statusText }}
+ </el-tag>
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 鏌ヨ鏉′欢锛堢鐞嗗憳鑰冨嫟鏃ユ姤锛� -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">閮ㄩ棬锛�</span>
+ <el-select
+ v-model="searchForm.dept"
+ placeholder="璇烽�夋嫨閮ㄩ棬"
+ style="width: 180px"
+ clearable
+ >
+ <el-option
+ v-for="item in deptOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <span class="search_title ml10">鏃ユ湡锛�</span>
+ <el-date-picker
+ v-model="searchForm.date"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ clearable
+ />
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button icon="Download" @click="handleExport">
+ 瀵煎嚭鑰冨嫟鏃ユ姤
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 鑰冨嫟鏃ユ姤琛ㄦ牸 -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 24em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :row-class-name="rowClassName"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column
+ prop="date"
+ label="鏃ユ湡"
+ width="120"
+ />
+ <el-table-column
+ prop="dept"
+ label="閮ㄩ棬"
+ width="140"
+ />
+ <el-table-column
+ prop="name"
+ label="濮撳悕"
+ width="120"
+ />
+ <el-table-column
+ prop="no"
+ label="宸ュ彿"
+ width="120"
+ />
+ <el-table-column
+ prop="checkInTime"
+ label="涓婄彮鏃堕棿"
+ width="140"
+ />
+ <el-table-column
+ prop="checkOutTime"
+ label="涓嬬彮鏃堕棿"
+ width="140"
+ />
+ <el-table-column
+ prop="workHours"
+ label="宸ユ椂(灏忔椂)"
+ width="110"
+ align="center"
+ />
+ <el-table-column
+ prop="statusText"
+ label="鑰冨嫟鐘舵��"
+ width="120"
+ align="center"
+ >
+ <template #default="scope">
+ <el-tag
+ v-if="scope.row.status === 'normal'"
+ type="success"
+ size="small"
+ >
+ 姝ｅ父
+ </el-tag>
+ <el-tag
+ v-else
+ type="danger"
+ size="small"
+ >
+ {{ scope.row.statusText }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="remark"
+ label="澶囨敞"
+ show-overflow-tooltip
+ />
+ </el-table>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import { ElMessage } from "element-plus";
+
+// 妯℃嫙褰撳墠鐧诲綍鍛樺伐
+const currentUser = reactive({
+ id: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+});
+
+// 閮ㄩ棬閫夐」
+const deptOptions = [
+ { label: "鐢熶骇涓�閮�", value: "鐢熶骇涓�閮�" },
+ { label: "鐢熶骇浜岄儴", value: "鐢熶骇浜岄儴" },
+ { label: "璁惧缁存姢閮�", value: "璁惧缁存姢閮�" },
+ { label: "璐ㄦ閮�", value: "璐ㄦ閮�" },
+];
+
+// 妯℃嫙鑰冨嫟鍘熷鏁版嵁
+const rawAttendance = ref([
+ {
+ id: 1,
+ date: "2024-12-01",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:58",
+ checkOutTime: "18:10",
+ workHours: 9.2,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "",
+ },
+ {
+ id: 2,
+ date: "2024-12-01",
+ userId: 2,
+ name: "鏉庡洓",
+ no: "E10002",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "09:15",
+ checkOutTime: "18:05",
+ workHours: 8.8,
+ status: "late",
+ statusText: "杩熷埌",
+ remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
+ },
+ {
+ id: 3,
+ date: "2024-12-01",
+ userId: 3,
+ name: "鐜嬩簲",
+ no: "E20001",
+ dept: "璁惧缁存姢閮�",
+ checkInTime: "08:50",
+ checkOutTime: "17:20",
+ workHours: 8.5,
+ status: "early",
+ statusText: "鏃╅��",
+ remark: "澶栧嚭澶勭悊绱ф�ユ晠闅�",
+ },
+ {
+ id: 4,
+ date: "2024-12-02",
+ userId: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+ checkInTime: "08:45",
+ checkOutTime: "18:30",
+ workHours: 9.7,
+ status: "normal",
+ statusText: "姝ｅ父",
+ remark: "鍔犵彮0.5灏忔椂",
+ },
+]);
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+ dept: "",
+ date: "",
+});
+
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+
+// 褰撳墠鏃堕棿灞曠ず
+const nowTime = ref("");
+let timer = null;
+
+const updateNowTime = () => {
+ const now = new Date();
+ const Y = now.getFullYear();
+ const M = String(now.getMonth() + 1).padStart(2, "0");
+ const D = String(now.getDate()).padStart(2, "0");
+ const h = String(now.getHours()).padStart(2, "0");
+ const m = String(now.getMinutes()).padStart(2, "0");
+ const s = String(now.getSeconds()).padStart(2, "0");
+ nowTime.value = `${Y}-${M}-${D} ${h}:${m}:${s}`;
+};
+
+// 浠婃棩鏃ユ湡
+const todayStr = computed(() => nowTime.value.slice(0, 10));
+
+// 褰撴棩褰撳墠鍛樺伐鑰冨嫟璁板綍
+const todayRecord = computed(() =>
+ rawAttendance.value.find(
+ (item) =>
+ item.userId === currentUser.id && item.date === todayStr.value
+ )
+);
+
+// 鎵撳崱鎸夐挳鏂囨湰
+const checkInOutText = computed(() => {
+ if (!todayRecord.value || !todayRecord.value.checkInTime) {
+ return "涓婄彮鎵撳崱";
+ }
+ if (!todayRecord.value.checkOutTime) {
+ return "涓嬬彮鎵撳崱";
+ }
+ return "浠婃棩宸叉墦鍗″畬鎴�";
+});
+
+// 浠婃棩鐘舵�佸睍绀�
+const todayStatusTag = computed(() => {
+ if (!todayRecord.value) return "info";
+ if (todayRecord.value.status === "normal") return "success";
+ return "danger";
+});
+
+const todayStatusText = computed(() => {
+ if (!todayRecord.value) return "鏈墦鍗�";
+ return todayRecord.value.statusText || "姝ｅ父";
+});
+
+// 琛屾牱寮忥細寮傚父楂樹寒
+const rowClassName = ({ row }) => {
+ if (row.status === "late" || row.status === "early") {
+ return "row-abnormal";
+ }
+ return "";
+};
+
+// 鏌ヨ
+const recomputeTable = () => {
+ const list = rawAttendance.value.filter((item) => {
+ if (searchForm.dept && item.dept !== searchForm.dept) {
+ return false;
+ }
+ if (searchForm.date && item.date !== searchForm.date) {
+ return false;
+ }
+ return true;
+ });
+ tableData.value = list;
+};
+
+const handleQuery = () => {
+ recomputeTable();
+};
+
+const resetSearch = () => {
+ searchForm.dept = "";
+ searchForm.date = "";
+ recomputeTable();
+};
+
+// 瀵煎嚭锛堟紨绀猴級
+const handleExport = () => {
+ ElMessage.success("褰撳墠涓烘紨绀洪〉闈紝瀵煎嚭鍔熻兘鏈鎺ュ疄闄呮帴鍙�");
+};
+
+// 鎵撳崱閫昏緫锛堜粎鍓嶇妯℃嫙锛�
+const handleCheckInOut = () => {
+ const [dateStr, timeStr] = nowTime.value.split(" ");
+ if (!dateStr || !timeStr) return;
+
+ // 涓婄彮鎵撳崱
+ if (!todayRecord.value) {
+ const newId = rawAttendance.value.length
+ ? Math.max(...rawAttendance.value.map((i) => i.id)) + 1
+ : 1;
+ const status =
+ timeStr > "09:00:00" ? "late" : "normal";
+ const statusText = status === "late" ? "杩熷埌" : "姝ｅ父";
+ rawAttendance.value.push({
+ id: newId,
+ date: dateStr,
+ userId: currentUser.id,
+ name: currentUser.name,
+ no: currentUser.no,
+ dept: currentUser.dept,
+ checkInTime: timeStr.slice(0, 5),
+ checkOutTime: "",
+ workHours: null,
+ status,
+ statusText,
+ remark: "",
+ });
+ ElMessage.success("涓婄彮鎵撳崱鎴愬姛");
+ } else if (!todayRecord.value.checkOutTime) {
+ // 涓嬬彮鎵撳崱
+ todayRecord.value.checkOutTime = timeStr.slice(0, 5);
+ // 绠�鍗曟寜 9:00-18:00 璁＄畻宸ユ椂
+ const start = todayRecord.value.checkInTime || "09:00";
+ const [sh, sm] = start.split(":").map((v) => parseInt(v, 10));
+ const [eh, em] = todayRecord.value.checkOutTime
+ .split(":")
+ .map((v) => parseInt(v, 10));
+ const diff = (eh * 60 + em - (sh * 60 + sm)) / 60;
+ todayRecord.value.workHours = Number(Math.max(diff, 0).toFixed(1));
+
+ // 鏃╅��鍒ゆ柇锛�18:00 鍓嶇寮�瑙嗕负鏃╅��锛堝彧绀烘剰锛�
+ if (timeStr < "18:00:00") {
+ todayRecord.value.status = "early";
+ todayRecord.value.statusText = "鏃╅��";
+ } else if (todayRecord.value.status === "normal") {
+ todayRecord.value.statusText = "姝ｅ父";
+ }
+ ElMessage.success("涓嬬彮鎵撳崱鎴愬姛");
+ } else {
+ ElMessage.info("浠婃棩宸插畬鎴愪笂涓嬬彮鎵撳崱");
+ }
+
+ recomputeTable();
+};
+
+onMounted(() => {
+ updateNowTime();
+ timer = setInterval(updateNowTime, 1000);
+ // 榛樿灞曠ず褰撳ぉ鏁版嵁
+ const today = new Date();
+ const Y = today.getFullYear();
+ const M = String(today.getMonth() + 1).padStart(2, "0");
+ const D = String(today.getDate()).padStart(2, "0");
+ searchForm.date = `${Y}-${M}-${D}`;
+ recomputeTable();
+});
+
+onBeforeUnmount(() => {
+ if (timer) {
+ clearInterval(timer);
+ }
+});
+</script>
+
+<style scoped lang="scss">
+.mb16 {
+ margin-bottom: 16px;
+}
+
+.attendance-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.attendance-header .title {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+
+.attendance-header .sub-title {
+ font-size: 13px;
+ color: #909399;
+}
+
+.attendance-actions {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.time-block {
+ text-align: right;
+}
+
+.time-block .label {
+ font-size: 12px;
+ color: #909399;
+}
+
+.time-block .value {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+::v-deep(.row-abnormal) {
+ background-color: #fff5f5;
+}
+</style>
+
diff --git a/src/views/procurementManagement/procurementLedger/index.vue b/src/views/procurementManagement/procurementLedger/index.vue
index 5c83ab2..a1fcdfb 100644
--- a/src/views/procurementManagement/procurementLedger/index.vue
+++ b/src/views/procurementManagement/procurementLedger/index.vue
@@ -1648,7 +1648,7 @@
delProduct(ids).then(res => {
proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
closeProductDia();
- getSalesLedgerWithProducts({ id: currentId.value, type: 2 }).then(
+ getPurchaseById({ id: currentId.value, type: 2 }).then(
res => {
productData.value = res.productData;
}
@@ -1683,14 +1683,6 @@
const handleDelete = () => {
let ids = [];
if (selectedRows.value.length > 0) {
- // 妫�鏌ユ槸鍚︽湁浠栦汉缁存姢鐨勬暟鎹�
- const unauthorizedData = selectedRows.value.filter(
- item => item.recorderName !== userStore.nickName
- );
- if (unauthorizedData.length > 0) {
- proxy.$modal.msgWarning("涓嶅彲鍒犻櫎浠栦汉缁存姢鐨勬暟鎹�");
- return;
- }
ids = selectedRows.value.map(item => item.id);
} else {
proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
diff --git a/src/views/qualityManagement/afterSalesTraceability/index.vue b/src/views/qualityManagement/afterSalesTraceability/index.vue
new file mode 100644
index 0000000..8cd4856
--- /dev/null
+++ b/src/views/qualityManagement/afterSalesTraceability/index.vue
@@ -0,0 +1,595 @@
+<template>
+ <div class="app-container">
+ <!-- 鏌ヨ鏉′欢 -->
+ <el-form
+ :model="queryParams"
+ ref="queryForm"
+ :inline="true"
+ v-show="showSearch"
+ label-width="90px"
+ >
+ <el-form-item label="浜у搧鍨嬪彿" prop="productModel">
+ <el-input
+ v-model="queryParams.productModel"
+ placeholder="璇疯緭鍏ヤ骇鍝佸瀷鍙�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+ <el-input
+ v-model="queryParams.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="鍙嶉鏃堕棿" prop="feedbackRange">
+ <el-date-picker
+ v-model="queryParams.feedbackRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ clearable
+ />
+ </el-form-item>
+ <el-form-item label="澶勭悊鐘舵��" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="璇烽�夋嫨澶勭悊鐘舵��"
+ clearable
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">
+ 鎼滅储
+ </el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+
+ <!-- 鎿嶄綔鍖� -->
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="3">
+ <el-button
+ type="primary"
+ plain
+ icon="Plus"
+ @click="handleAdd"
+ >
+ 鏂板鍞悗璐ㄩ噺璁板綍
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="success"
+ plain
+ icon="Edit"
+ :disabled="single"
+ @click="handleUpdate"
+ >
+ 淇敼
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="danger"
+ plain
+ icon="Delete"
+ :disabled="multiple"
+ @click="handleDelete"
+ >
+ 鍒犻櫎
+ </el-button>
+ </el-col>
+ <el-col :span="3">
+ <el-button
+ type="warning"
+ plain
+ icon="Download"
+ @click="handleExport"
+ >
+ 瀵煎嚭
+ </el-button>
+ </el-col>
+ <right-toolbar
+ v-model:showSearch="showSearch"
+ @queryTable="getList"
+ />
+ </el-row>
+
+ <!-- 鏁版嵁琛� -->
+ <el-table
+ v-loading="loading"
+ :data="afterSalesList"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="搴忓彿" type="index" width="55" align="center" />
+ <el-table-column label="閿�鍞悎鍚屽彿" prop="contractNo" width="160" />
+ <el-table-column label="浜у搧缂栧彿" prop="productCode" width="140" />
+ <el-table-column label="浜у搧鍨嬪彿" prop="productModel" width="140" />
+ <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" width="160" />
+ <el-table-column label="鑱旂郴鏂瑰紡" prop="contact" width="140" />
+ <el-table-column label="鍙嶉鏃堕棿" prop="feedbackTime" width="160">
+ <template #default="scope">
+ <span>{{ scope.row.feedbackTime }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="闂鎻忚堪" prop="problemDesc" show-overflow-tooltip />
+ <el-table-column label="缁翠慨鎯呭喌" prop="repairInfo" show-overflow-tooltip />
+ <el-table-column label="澶勭悊缁撴灉" prop="result" show-overflow-tooltip />
+ <el-table-column label="澶勭悊鐘舵��" prop="status" width="120" align="center">
+ <template #default="scope">
+ <dict-tag
+ :options="statusOptions"
+ :value="scope.row.status"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="160" fixed="right">
+ <template #default="scope">
+ <el-button size="small" type="text" icon="Edit" @click="handleUpdate(scope.row)">
+ 淇敼
+ </el-button>
+ <el-button size="small" type="text" icon="Delete" @click="handleDelete(scope.row)">
+ 鍒犻櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <pagination
+ v-show="total > 0"
+ :total="total"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+
+ <!-- 鏂板/淇敼寮圭獥 -->
+ <el-dialog
+ :title="title"
+ v-model="open"
+ width="900px"
+ append-to-body
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="110px"
+ >
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="閿�鍞悎鍚屽彿" prop="contractNo">
+ <el-input
+ v-model="form.contractNo"
+ placeholder="璇烽�夋嫨鍏宠仈閿�鍞悎鍚屽彿"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="浜у搧缂栧彿" prop="productCode">
+ <el-input
+ v-model="form.productCode"
+ placeholder="璇烽�夋嫨鍏宠仈浜у搧缂栧彿"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="浜у搧鍨嬪彿" prop="productModel">
+ <el-input
+ v-model="form.productModel"
+ placeholder="璇疯緭鍏ヤ骇鍝佸瀷鍙�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+ <el-input
+ v-model="form.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鑱旂郴鏂瑰紡" prop="contact">
+ <el-input
+ v-model="form.contact"
+ placeholder="璇疯緭鍏ュ鎴疯仈绯绘柟寮�"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍙嶉鏃堕棿" prop="feedbackTime">
+ <el-date-picker
+ v-model="form.feedbackTime"
+ type="datetime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ format="YYYY-MM-DD HH:mm"
+ placeholder="璇烽�夋嫨鍙嶉鏃堕棿"
+ style="width: 100%"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="瀹㈡埛鍙嶉闂" prop="problemDesc">
+ <el-input
+ v-model="form.problemDesc"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯缁嗚褰曞鎴峰弽棣堥棶棰樸�佺幇璞℃弿杩扮瓑淇℃伅"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="缁翠慨鎯呭喌" prop="repairInfo">
+ <el-input
+ v-model="form.repairInfo"
+ type="textarea"
+ :rows="2"
+ placeholder="璁板綍缁翠慨杩囩▼銆佷娇鐢ㄥ浠躲�佽繑淇鏁扮瓑"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="澶勭悊缁撴灉" prop="result">
+ <el-input
+ v-model="form.result"
+ type="textarea"
+ :rows="2"
+ placeholder="璁板綍鏈�缁堝鐞嗙粨鏋滐紝濡傛洿鎹€�侀��璐с�佸崌绾х瓑"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="澶勭悊鐘舵��" prop="status">
+ <el-select
+ v-model="form.status"
+ placeholder="璇烽�夋嫨澶勭悊鐘舵��"
+ >
+ <el-option
+ v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ :rows="2"
+ placeholder="鍙褰曞悗缁窡韪剰瑙併�佸鐩樼粨璁虹瓑"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ <el-button @click="cancel">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup name="AfterSalesTraceability">
+import { ref, reactive, onMounted } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+
+// 鐘舵�佸瓧鍏�
+const statusOptions = ref([
+ { label: "寰呭鐞�", value: "0" },
+ { label: "澶勭悊涓�", value: "1" },
+ { label: "宸插畬鎴�", value: "2" },
+ { label: "宸插叧闂�", value: "3" },
+]);
+
+// 妯℃嫙鍞悗璐ㄩ噺鏁版嵁
+const afterSalesList = ref([
+ {
+ id: 1,
+ contractNo: "SC-2024-001",
+ productCode: "P-10001",
+ productModel: "XG-500A",
+ customerName: "鍗庡崡鐢靛瓙绉戞妧鏈夐檺鍏徃",
+ contact: "寮犲伐 / 13800000001",
+ feedbackTime: "2024-12-01 10:23:00",
+ problemDesc: "浣跨敤涓変釜鏈堝悗鍑虹幇闂存瓏鎬ф帀鐢碉紝褰卞搷浜х嚎绋冲畾杩愯銆�",
+ repairInfo: "瀹夋帓宸ョ▼甯堜笂闂ㄦ淇紝鏇存崲鐢垫簮妯″潡骞跺姞鍥烘帴绾跨瀛愩��",
+ result: "鏇存崲鐢垫簮鎬绘垚锛屾仮澶嶆甯镐娇鐢紝寤鸿瀹㈡埛澧炲姞UPS淇濇姢銆�",
+ status: "2",
+ remark: "鍒楀叆閲嶇偣璺熻釜瀹㈡埛锛屽悗缁瀵熶竴涓搴︺��",
+ },
+ {
+ id: 2,
+ contractNo: "SC-2024-015",
+ productCode: "P-10045",
+ productModel: "XG-500B",
+ customerName: "鍗庝笢绮惧瘑鍒堕�犳湁闄愬叕鍙�",
+ contact: "鏉庡伐 / 13800000002",
+ feedbackTime: "2024-12-05 15:40:00",
+ problemDesc: "閮ㄥ垎鎵规鍑虹幇澶栧３鍒姳锛屽鎴锋姇璇夊瑙傝川閲忎笉杈炬爣銆�",
+ repairInfo: "涓庣敓浜х幇鍦烘牳鏌ワ紝纭鏉ユ枡鎼繍鍙婂寘瑁呯幆鑺傚瓨鍦ㄧ纰伴闄┿��",
+ result: "瀵归棶棰樻壒娆￠噸鏂拌繑宸ワ紝琛ュ彂鑹搧锛屽苟浼樺寲鍖呰闃叉姢鏂规銆�",
+ status: "1",
+ remark: "闇�璺熻釜鍚庣画鎵规鎶曡瘔鐜囧彉鍖栥��",
+ },
+ {
+ id: 3,
+ contractNo: "SC-2024-032",
+ productCode: "P-10110",
+ productModel: "XG-600C",
+ customerName: "瑗垮崡鏂拌兘婧愮鎶�鑲′唤",
+ contact: "鐜嬪伐 / 13800000003",
+ feedbackTime: "2024-11-28 09:15:00",
+ problemDesc: "鐜板満璋冭瘯鏃跺彂鐜版帴鍙ｄ笉鍏煎锛岄渶瑕侀�傞厤瀹㈡埛鏃х増绯荤粺銆�",
+ repairInfo: "杩滅▼鎶�鏈敮鎸�+鐜板満宸ョ▼甯堣仈鍚堟帓鏌ワ紝鎻愪緵杩囨浮閫傞厤鏂规銆�",
+ result: "閫氳繃鏇存崲鎺ユ彃浠跺苟鍗囩骇鍥轰欢鐗堟湰瑙ｅ喅銆�",
+ status: "0",
+ remark: "寤鸿涓嬫鍚堝悓鍓嶇疆娌熼�氭帴鍙ｈ鏍笺��",
+ },
+]);
+
+const open = ref(false);
+const loading = ref(false);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(3);
+const title = ref("鏂板鍞悗璐ㄩ噺璁板綍");
+
+const data = reactive({
+ form: {},
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ productModel: null,
+ customerName: null,
+ feedbackRange: [],
+ status: null,
+ },
+ rules: {
+ contractNo: [
+ { required: true, message: "閿�鍞悎鍚屽彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ productCode: [
+ { required: true, message: "浜у搧缂栧彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ productModel: [
+ { required: true, message: "浜у搧鍨嬪彿涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ customerName: [
+ { required: true, message: "瀹㈡埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ contact: [
+ { required: true, message: "鑱旂郴鏂瑰紡涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ feedbackTime: [
+ { required: true, message: "鍙嶉鏃堕棿涓嶈兘涓虹┖", trigger: "change" },
+ ],
+ problemDesc: [
+ { required: true, message: "瀹㈡埛鍙嶉闂涓嶈兘涓虹┖", trigger: "blur" },
+ ],
+ status: [
+ { required: true, message: "澶勭悊鐘舵�佷笉鑳戒负绌�", trigger: "change" },
+ ],
+ },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+// 鏌ヨ鍒楄〃锛堜粎鍓嶇绛涢�夛紝涓嶈皟鎺ュ彛锛�
+function getList() {
+ loading.value = true;
+ const list = afterSalesList.value.filter((item) => {
+ if (
+ queryParams.value.productModel &&
+ !item.productModel
+ ?.toLowerCase()
+ .includes(queryParams.value.productModel.toLowerCase())
+ ) {
+ return false;
+ }
+ if (
+ queryParams.value.customerName &&
+ !item.customerName
+ ?.toLowerCase()
+ .includes(queryParams.value.customerName.toLowerCase())
+ ) {
+ return false;
+ }
+ if (queryParams.value.status && item.status !== queryParams.value.status) {
+ return false;
+ }
+ if (
+ Array.isArray(queryParams.value.feedbackRange) &&
+ queryParams.value.feedbackRange.length === 2
+ ) {
+ const [start, end] = queryParams.value.feedbackRange;
+ const dateStr = item.feedbackTime?.slice(0, 10);
+ if (dateStr < start || dateStr > end) {
+ return false;
+ }
+ }
+ return true;
+ });
+ total.value = list.length;
+ // 姝ゅ鏈仛鍒嗛〉锛屼粎妯℃嫙鍏ㄩ噺灞曠ず
+ afterSalesList.value = list;
+ loading.value = false;
+}
+
+// 鍙栨秷
+function cancel() {
+ open.value = false;
+ reset();
+}
+
+// 琛ㄥ崟閲嶇疆
+function reset() {
+ form.value = {
+ id: null,
+ contractNo: null,
+ productCode: null,
+ productModel: null,
+ customerName: null,
+ contact: null,
+ feedbackTime: null,
+ problemDesc: null,
+ repairInfo: null,
+ result: null,
+ status: "0",
+ remark: null,
+ };
+ proxy.resetForm("formRef");
+}
+
+// 鎼滅储
+function handleQuery() {
+ queryParams.value.pageNum = 1;
+ getList();
+}
+
+// 閲嶇疆
+function resetQuery() {
+ proxy.resetForm("queryForm");
+ queryParams.value.feedbackRange = [];
+ handleQuery();
+}
+
+// 澶氶��
+function handleSelectionChange(selection) {
+ ids.value = selection.map((item) => item.id);
+ single.value = selection.length !== 1;
+ multiple.value = !selection.length;
+}
+
+// 鏂板
+function handleAdd() {
+ reset();
+ open.value = true;
+ title.value = "鏂板鍞悗璐ㄩ噺璁板綍";
+}
+
+// 淇敼
+function handleUpdate(row) {
+ reset();
+ const current = row || afterSalesList.value.find((item) => item.id === ids.value[0]);
+ if (current) {
+ form.value = { ...current };
+ open.value = true;
+ title.value = "淇敼鍞悗璐ㄩ噺璁板綍";
+ }
+}
+
+// 鎻愪氦
+function submitForm() {
+ proxy.$refs["formRef"].validate((valid) => {
+ if (valid) {
+ if (form.value.id != null) {
+ // 淇敼锛氭浛鎹㈡湰鍦版ā鎷熸暟鎹�
+ const index = afterSalesList.value.findIndex(
+ (item) => item.id === form.value.id
+ );
+ if (index !== -1) {
+ afterSalesList.value.splice(index, 1, { ...form.value });
+ }
+ proxy.$modal.msgSuccess("淇敼鎴愬姛");
+ } else {
+ // 鏂板锛氭彃鍏ユ湰鍦版ā鎷熸暟鎹�
+ const newId =
+ afterSalesList.value.length > 0
+ ? Math.max(...afterSalesList.value.map((i) => i.id)) + 1
+ : 1;
+ afterSalesList.value.push({ ...form.value, id: newId });
+ proxy.$modal.msgSuccess("鏂板鎴愬姛");
+ }
+ open.value = false;
+ getList();
+ }
+ });
+}
+
+// 鍒犻櫎
+function handleDelete(row) {
+ const deleteIds = row?.id ? [row.id] : ids.value;
+ if (!deleteIds || deleteIds.length === 0) {
+ proxy.$modal.msgWarning("璇峰厛閫夋嫨瑕佸垹闄ょ殑璁板綍");
+ return;
+ }
+ ElMessageBox.confirm(
+ '鏄惁纭鍒犻櫎閫変腑鐨勫敭鍚庤川閲忚褰曪紵',
+ "璀﹀憡",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ // 鍓嶇鍒犻櫎鏈湴妯℃嫙鏁版嵁
+ afterSalesList.value = afterSalesList.value.filter(
+ (item) => !deleteIds.includes(item.id)
+ );
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ })
+ .catch(() => {});
+}
+
+// 瀵煎嚭
+function handleExport() {
+ proxy.$modal.msgSuccess("瀵煎嚭鍔熻兘涓烘紨绀哄姛鑳斤紝褰撳墠鏈鎺ュ疄闄呭鍑烘帴鍙�");
+}
+
+onMounted(() => {
+ getList();
+});
+</script>
+
+<style scoped>
+.mb8 {
+ margin-bottom: 8px;
+}
+.dialog-footer {
+ text-align: right;
+}
+</style>
+
diff --git a/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue
index c8eeeb9..20a612d 100644
--- a/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/financialAnalysis/components/center-bottom.vue
@@ -101,7 +101,7 @@
border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
- height: 428px;
+ height: 432px;
}
</style>
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-center.vue b/src/views/reportAnalysis/productionAnalysis/components/center-center.vue
index cd6a6b5..973c68d 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/center-center.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-center.vue
@@ -30,7 +30,7 @@
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
-import { productInOutAnalysis } from '@/api/viewIndex.js'
+import { inputOutputAnalysis } from '@/api/viewIndex.js'
const chartStyle = { width: '100%', height: '100%' }
const grid = {
@@ -132,13 +132,13 @@
}
const fetchData = () => {
- productInOutAnalysis({ type: 1 })
+ inputOutputAnalysis()
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
const list = res.data
xAxis1.value[0].data = list.map((d) => d.date)
- lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0)
- lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0)
+ lineSeries.value[0].data = list.map((d) => Number(d.outputSum) || 0)
+ lineSeries.value[1].data = list.map((d) => Number(d.inputSum) || 0)
}
})
.catch((err) => {
diff --git a/src/views/reportAnalysis/productionAnalysis/components/center-top.vue b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
index 0937b32..7201828 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/center-top.vue
@@ -25,7 +25,7 @@
<script setup>
import { ref, onMounted } from 'vue'
-import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'
+import { orderCount } from '@/api/viewIndex.js'
const statItems = ref([])
@@ -37,7 +37,7 @@
const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
const fetchData = () => {
- salesPurchaseStorageProductCount()
+ orderCount()
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
statItems.value = res.data.map((item) => ({
@@ -48,7 +48,7 @@
}
})
.catch((err) => {
- console.error('鑾峰彇閿�鍞�/閲囪喘/鍌ㄥ瓨浜у搧鏁板け璐�:', err)
+ console.error('鑾峰彇璁㈠崟鏁伴噺缁熻澶辫触:', err)
})
}
@@ -97,7 +97,7 @@
.card-label {
font-weight: 400;
- font-size: 19px;
+ font-size: 16px;
color: rgba(208, 231, 255, 0.7);
}
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
index 0cce7d6..932def8 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
@@ -24,7 +24,7 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
-import { productSalesAnalysis } from '@/api/viewIndex.js'
+import { processOutputAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'
@@ -73,7 +73,7 @@
formatter: function (name) {
const item = pieObjData.value[name]
if (!item) return name
- return `{title|${name}}{value|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
+ return `{title|${name}}{value|${item.value}}{unit|浠秨{percent|${item.rate}}{unit|%}`
},
textStyle: {
rich: {
@@ -106,12 +106,12 @@
const pieTooltip = {
trigger: 'item',
- formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
+ formatter: '{a} <br/>{b} : {c}浠� ({d}%)',
}
const pieSeries = computed(() => [
{
- name: '浜у搧閿�鍞噾棰濆垎鏋�',
+ name: '宸ュ簭浜у嚭鍒嗘瀽',
type: 'pie',
radius: '60%',
center: ['25%', '50%'],
@@ -150,7 +150,7 @@
})
const fetchData = () => {
- productSalesAnalysis()
+ processOutputAnalysis({ dateType: dateType.value })
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
const items = res.data
@@ -162,7 +162,7 @@
}
})
.catch((err) => {
- console.error('鑾峰彇浜у搧閿�鍞噾棰濆垎鏋愬け璐�:', err)
+ console.error('鑾峰彇宸ュ簭浜у嚭鍒嗘瀽澶辫触:', err)
})
}
diff --git a/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue b/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue
index 95a4907..28de03b 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue
@@ -28,29 +28,27 @@
import DateTypeSwitch from './DateTypeSwitch.vue'
import Echarts from '@/components/Echarts/echarts.vue'
-const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+const dateType = ref(1)
const chartStyle = {
width: '100%',
height: '140%',
}
-const grid = { left: '10%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
+const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
const barLegend = {
show: true,
textStyle: { color: '#B8C8E0' },
- data: ['浜ч噺', '宸ヨ祫', '鍚堟牸鐜�'],
+ data: ['瀹屾垚鏁伴噺', '宸ヨ祫閲戦', '鍚堟牸鐜�'],
}
-// 鏌辩姸鍥撅細浜ч噺銆佸伐璧勶紱鎶樼嚎鍥撅細鍚堟牸鐜囷紙缁胯壊锛�
const chartSeries = ref([
{
- name: '浜ч噺',
+ name: '瀹屾垚鏁伴噺',
type: 'bar',
barWidth: 20,
barGap: '40%',
- yAxisIndex: 0,
emphasis: { focus: 'series' },
itemStyle: {
color: {
@@ -68,11 +66,10 @@
data: [],
},
{
- name: '宸ヨ祫',
+ name: '宸ヨ祫閲戦',
type: 'bar',
barGap: '40%',
barWidth: 20,
- yAxisIndex: 1,
emphasis: { focus: 'series' },
itemStyle: {
color: {
@@ -92,7 +89,7 @@
{
name: '鍚堟牸鐜�',
type: 'line',
- yAxisIndex: 2,
+ yAxisIndex: 1,
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
@@ -103,31 +100,21 @@
},
])
-const tooltip = {
- trigger: 'axis',
- axisPointer: { type: 'cross' },
- formatter(params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- let unit = '浠�'
- if (item.seriesName === '鍚堟牸鐜�') unit = '%'
- else if (item.seriesName === '宸ヨ祫') unit = '鍏�'
- result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
- })
- return result
- },
-}
-
const xAxis1 = ref([
{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
])
+
const yAxis1 = [
- { type: 'value', name: '浜ч噺(浠�)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
- { type: 'value', name: '宸ヨ祫(鍏�)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
+ {
+ type: 'value',
+ name: '鏁伴噺/閲戦',
+ axisLabel: { color: '#B8C8E0' },
+ nameTextStyle: { color: '#B8C8E0' },
+ // splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
+ },
{
type: 'value',
name: '鍚堟牸鐜�(%)',
- position: 'right',
min: 0,
max: 100,
axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
@@ -136,6 +123,19 @@
},
]
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' },
+ formatter(params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ const unit = item.seriesName === '鍚堟牸鐜�' ? '%' : (item.seriesName === '宸ヨ祫閲戦' ? ' 鍏�' : ' 涓�')
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
+ })
+ return result
+ },
+}
+
const handleDateTypeChange = () => {
fetchData()
}
@@ -143,28 +143,19 @@
const fetchData = () => {
productionAccountingAnalysis({ type: dateType.value })
.then((res) => {
- console.log('res ======> ', res)
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const items = res.data
- if (!Array.isArray(res?.data)) return
-
- const items = res.data
-
- xAxis1.value[0].data = items.map(d => d.dateStr)
-
- // 浜ч噺
- chartSeries.value[0].data = items.map(d => Number(d.numberOfCompleted) || 0)
-
- // 宸ヨ祫
- chartSeries.value[1].data = items.map(d => Number(d.amount) || 0)
-
- // 鍚堟牸鐜�
- chartSeries.value[2].data = items.map(d => Number(d.passRate) || 0)
+ xAxis1.value[0].data = items.map(item => item.dateStr)
+ chartSeries.value[0].data = items.map(item => Number(item.numberOfCompleted) || 0)
+ chartSeries.value[1].data = items.map(item => Number(item.amount) || 0)
+ chartSeries.value[2].data = items.map(item => Number(item.passRate) || 0)
+ }
})
.catch((err) => {
- console.error('鑾峰彇浜ч噺銆佸伐璧勪笌鍚堟牸鐜囨暟鎹け璐�:', err)
+ console.error('鏁版嵁鍔犺浇澶辫触', err)
})
}
-
onMounted(() => {
fetchData()
@@ -191,5 +182,6 @@
padding: 18px;
width: 100%;
height: 449px;
+ box-sizing: border-box;
}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/reportAnalysis/productionAnalysis/components/right-top.vue b/src/views/reportAnalysis/productionAnalysis/components/right-top.vue
index e6717d1..d3a9eb9 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/right-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/right-top.vue
@@ -2,9 +2,21 @@
<div>
<PanelHeader title="宸ュ崟鎵ц鏁堢巼鍒嗘瀽" />
<div class="main-panel panel-item-customers">
- <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="chartSeries"
- :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" style="height: 260px" />
+ <div class="filters-row">
+ <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="chartSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
</div>
</div>
</template>
@@ -14,10 +26,13 @@
import { workOrderEfficiencyAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
+import DateTypeSwitch from './DateTypeSwitch.vue'
+
+const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
const chartStyle = {
width: '100%',
- height: '160%',
+ height: '140%',
}
const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
@@ -115,24 +130,25 @@
},
]
+const handleDateTypeChange = () => {
+ fetchData()
+}
+
const fetchData = () => {
- workOrderEfficiencyAnalysis()
+ workOrderEfficiencyAnalysis({ dateType: dateType.value })
.then((res) => {
- // 鏍规嵁浣犵殑缁撴瀯锛屾暟鎹洿鎺ュ湪 res.data 涓�
- if (!res?.data || !Array.isArray(res.data)) return
-
- const list = res.data
-
- xAxis1.value[0].data = list.map((item) => item.date)
-
- chartSeries.value[0].data = list.map((item) => Number(item.startQuantity) || 0)
-
- chartSeries.value[1].data = list.map((item) => Number(item.finishQuantity) || 0)
-
- chartSeries.value[2].data = list.map((item) => Number(item.yieldRate) || 0)
+ if (res.code !== 200 || !Array.isArray(res.data)) return
+ const items = res.data
+ xAxis1.value[0].data = items.map((d) => d.date)
+ // 寮�宸�
+ chartSeries.value[0].data = items.map((d) => Number(d.startQuantity) || 0)
+ // 瀹屾垚
+ chartSeries.value[1].data = items.map((d) => Number(d.finishQuantity) || 0)
+ // 鑹搧鐜�
+ chartSeries.value[2].data = items.map((d) => Math.min(100, parseFloat(d.yieldRate) || 0))
})
.catch((err) => {
- console.error('鑾峰彇宸ュ崟鏁堢巼鏁版嵁澶辫触:', err)
+ console.error('鑾峰彇宸ュ崟鎵ц鏁堢巼鍒嗘瀽澶辫触:', err)
})
}
@@ -148,6 +164,14 @@
gap: 20px;
}
+.filters-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
.panel-item-customers {
border: 1px solid #1a58b0;
padding: 18px;
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
index 24d9552..fe875d0 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
@@ -1,21 +1,23 @@
<template>
<div>
<div class="chart-header">
- <PanelHeader title="瀹屾垚妫�楠屾暟" />
+ <div class="chart-header-title">
+ <PanelHeader title="瀹屾垚妫�楠屾暟" />
+ </div>
<div class="warn-range" @click="handleRangeClick">杩�7澶�</div>
</div>
<div class="main-panel panel-item-customers">
<Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend"
- :series="chartSeries"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
- style="height: 260px"
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="chartSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
/>
</div>
</div>
@@ -29,28 +31,23 @@
const chartStyle = {
width: '100%',
- height: '135%',
+ height: '140%',
}
-const grid = { left: '8%', right: '8%', bottom: '8%', top: '15%', containLabel: true }
+const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
const barLegend = {
show: true,
- top: '5%',
- left: 'center',
- textStyle: { color: '#B8C8E0', fontSize: 14 },
- itemGap: 30,
+ textStyle: { color: '#B8C8E0' },
data: ['鍚堟牸', '涓嶅悎鏍�', '鍚堟牸鐜�'],
}
-// 鏌辩姸鍥撅細鍚堟牸锛堥粍鑹诧級銆佷笉鍚堟牸锛堢传鑹诧級锛涙姌绾垮浘锛氬悎鏍肩巼锛堣摑鑹诧級
const chartSeries = ref([
{
name: '鍚堟牸',
type: 'bar',
barWidth: 20,
- barGap: '20%',
- yAxisIndex: 0,
+ barGap: '40%',
emphasis: { focus: 'series' },
itemStyle: {
color: {
@@ -60,8 +57,8 @@
x2: 0,
y2: 1,
colorStops: [
- { offset: 0, color: 'rgba(255, 215, 0, 1)' }, // 閲戦粍鑹查《閮�
- { offset: 1, color: 'rgba(255, 215, 0, 0.5)' }, // 鍗婇�忔槑搴曢儴
+ { offset: 1, color: 'rgba(0, 164, 237, 0)' },
+ { offset: 0, color: 'rgba(78, 228, 255, 1)' },
],
},
},
@@ -70,9 +67,8 @@
{
name: '涓嶅悎鏍�',
type: 'bar',
- barGap: '20%',
+ barGap: '40%',
barWidth: 20,
- yAxisIndex: 0,
emphasis: { focus: 'series' },
itemStyle: {
color: {
@@ -82,8 +78,8 @@
x2: 0,
y2: 1,
colorStops: [
- { offset: 0, color: 'rgba(144, 97, 248, 1)' }, // 绱壊椤堕儴
- { offset: 1, color: 'rgba(144, 97, 248, 0.6)' }, // 鍗婇�忔槑搴曢儴
+ { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
+ { offset: 0, color: 'rgba(144, 97, 248, 1)' },
],
},
},
@@ -93,87 +89,43 @@
name: '鍚堟牸鐜�',
type: 'line',
yAxisIndex: 1,
- smooth: true,
+ showSymbol: true,
symbol: 'circle',
symbolSize: 8,
- lineStyle: {
- color: 'rgba(78, 228, 255, 1)', // 闈掕壊
- width: 2,
- },
- itemStyle: {
- color: 'rgba(78, 228, 255, 1)',
- borderWidth: 2,
- borderColor: '#fff',
- },
- emphasis: {
- focus: 'series',
- itemStyle: {
- shadowBlur: 10,
- shadowColor: 'rgba(78, 228, 255, 0.8)',
- },
- },
+ lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
+ itemStyle: { color: 'rgba(90, 216, 166, 1)' },
data: [],
+ emphasis: { focus: 'series' },
},
])
const tooltip = {
trigger: 'axis',
axisPointer: { type: 'cross' },
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
- borderColor: 'rgba(78, 228, 255, 0.5)',
- borderWidth: 1,
- textStyle: { color: '#B8C8E0' },
formatter(params) {
let result = params[0].axisValueLabel + '<br/>'
params.forEach((item) => {
- let unit = ''
- if (item.seriesName === '鍚堟牸鐜�') {
- unit = '%'
- } else {
- unit = '浠�'
- }
- result += `<div style="margin: 4px 0;">${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
+ const unit = item.seriesName === '鍚堟牸鐜�' ? '%' : '浠�'
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
})
return result
},
}
const xAxis1 = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0', fontSize: 12 },
- axisLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
- data: [],
- },
+ { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
])
const yAxis1 = [
+ { type: 'value', name: '浠�', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
{
type: 'value',
- name: '鍗曚綅: 浠�',
- nameLocation: 'start',
- nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 10] },
- axisLabel: { color: '#B8C8E0', fontSize: 12 },
- axisLine: { show: false },
- splitLine: {
- show: true,
- lineStyle: { color: 'rgba(184, 200, 224, 0.2)', type: 'dashed' },
- },
- },
- {
- type: 'value',
- name: '鍗曚綅: %',
- nameLocation: 'end',
- nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 10] },
+ name: '鍚堟牸鐜�(%)',
min: 0,
max: 100,
- axisLabel: { color: '#B8C8E0', fontSize: 12, formatter: '{value}' },
- axisLine: { show: false },
- splitLine: {
- show: true,
- lineStyle: { color: 'rgba(184, 200, 224, 0.2)', type: 'dashed' },
- },
+ axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
+ nameTextStyle: { color: '#B8C8E0' },
+ splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
},
]
@@ -212,6 +164,13 @@
position: relative;
display: flex;
align-items: center;
+ width: 100%;
+}
+
+.chart-header-title {
+ flex: 1;
+ min-width: 0;
+ width: 100%;
}
.warn-range {
@@ -247,8 +206,6 @@
border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
- height: 449px;
- position: relative;
- background: radial-gradient(circle at 50% 50%, rgba(78, 228, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
+ height: 436px;
}
</style>
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
index 3ecf799..8e46770 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
@@ -117,6 +117,8 @@
gap: 6px;
font-size: 15px;
color: #d0e7ff;
+ white-space: nowrap;
+ flex-wrap: nowrap;
}
.card-compare>span:first-child {
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue
deleted file mode 100644
index 33f431d..0000000
--- a/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
- <div>
- <PanelHeader title="鍦ㄥ埗鍝佺粺璁″垎鏋�" />
- <div class="main-panel panel-item-customers">
- <CarouselCards :items="cardItems" :visible-count="3" />
- <div class="chart-wrapper">
- <Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="workInProcessBarLegend"
- :series="workInProcessBarSeries"
- :tooltip="tooltip"
- :xAxis="workInProcessXAxis"
- :yAxis="workInProcessYAxis"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
- style="height: 100%"
- />
- </div>
- </div>
- </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import Echarts from '@/components/Echarts/echarts.vue'
-import PanelHeader from './PanelHeader.vue'
-import CarouselCards from './CarouselCards.vue'
-import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
-
-// 鍦ㄥ埗鍝佸懆杞粺璁″璞�
-const workInProcessStatistics = ref({
- totalQuantity: 0,
- avgTurnoverDays: 0,
- turnoverEfficiency: 0,
-})
-
-// 杞挱鍗＄墖鏁版嵁锛堢敱 workInProcessStatistics 鍚屾锛�
-const cardItems = ref([])
-
-const chartStyle = {
- width: '100%',
- height: '100%',
-}
-
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
-}
-
-const tooltip = {
- trigger: 'axis',
- axisPointer: { type: 'shadow' },
- formatter: function (params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
- })
- return result
- },
-}
-
-// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
-const workInProcessXAxis = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- data: [],
- },
-])
-const workInProcessYAxis = [
- {
- type: 'value',
- axisLabel: { color: '#B8C8E0' },
- name: '',
- },
-]
-const workInProcessBarLegend = {
- show: false,
- textStyle: { color: '#B8C8E0' },
- data: [],
-}
-const workInProcessBarSeries = ref([
- {
- name: '鍦ㄥ埗鍝佹暟閲�',
- type: 'bar',
- barWidth: 25,
- barGap: 0,
- emphasis: { focus: 'series' },
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 1, color: 'rgba(0,164,237,0)' },
- { offset: 0, color: '#4EE4FF' },
- ],
- },
- },
- label: {
- show: true,
- position: 'top',
- color: '#B8C8E0',
- },
- data: [],
- },
-])
-
-const workInProcessTurnoverInfo = () => {
- getWorkInProcessTurnover()
- .then((res) => {
- if (!res || !res.data) return
- const stats = {
- totalQuantity: res.data.totalOrderCount || 0,
- avgTurnoverDays: res.data.averageTurnoverDays || 0,
- turnoverEfficiency: res.data.turnoverEfficiency || 0,
- }
- workInProcessStatistics.value = stats
- cardItems.value = [
- { label: '鎬诲湪鍒舵暟閲�', value: stats.totalQuantity, unit: '浠�' },
- { label: '骞冲潎鍛ㄨ浆澶╂暟', value: stats.avgTurnoverDays, unit: '澶�' },
- { label: '鍛ㄨ浆鏁堢巼', value: stats.turnoverEfficiency, unit: '%' },
- ]
- if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
- workInProcessXAxis.value[0].data = res.data.processDetails
- } else {
- workInProcessXAxis.value[0].data = []
- }
- if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {
- workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
- } else {
- workInProcessBarSeries.value[0].data = []
- }
- })
- .catch((err) => {
- console.error('鑾峰彇鍦ㄥ埗鍝佸懆杞粺璁″け璐�:', err)
- })
-}
-
-onMounted(() => {
- workInProcessTurnoverInfo()
-})
-</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;
-}
-
-.chart-wrapper {
- height: 70%;
- flex: 1;
- min-height: 200px;
-}
-</style>
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
index 8237a3f..cce4894 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
@@ -220,7 +220,7 @@
})
</script>
-<style scoped>
+<style scoped lang="scss">
.main-panel {
display: flex;
flex-direction: column;
@@ -304,7 +304,7 @@
border: 1px solid #1a58b0;
padding: 14px 18px;
width: 100%;
- height: 960px;
+ height: 958px;
box-sizing: border-box;
}
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
index 49621f3..f4b0a0c 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
@@ -163,7 +163,7 @@
border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
- height: 420px;
+ height: 449px;
}
.pie-chart-wrapper {
diff --git a/src/views/reportAnalysis/qualityAnalysis/index.vue b/src/views/reportAnalysis/qualityAnalysis/index.vue
index 1163154..59fcc9b 100644
--- a/src/views/reportAnalysis/qualityAnalysis/index.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/index.vue
@@ -13,7 +13,7 @@
<!-- 椤堕儴鏍囬鏍� -->
<div class="dashboard-header">
- <div class="factory-name">杩涢攢璐ㄩ噺绫诲垎鏋�</div>
+ <div class="factory-name">璐ㄩ噺鏁版嵁鍒嗘瀽</div>
</div>
<!-- 涓昏鍐呭鍖哄煙 -->
@@ -43,7 +43,6 @@
<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 './components/right-top.vue'
import RightBottom from './components/right-bottom.vue'
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index bccb9e9..3bea122 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -84,8 +84,8 @@
</el-table>
<!-- 娣诲姞鎴栦慨鏀硅彍鍗曞璇濇 -->
- <el-dialog :title="title" v-model="open" width="680px" append-to-body>
- <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
+ <el-dialog :title="title" v-model="open" width="880px" append-to-body>
+ <el-form ref="menuRef" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="24">
<el-form-item label="涓婄骇鑿滃崟">
@@ -194,6 +194,19 @@
</span>
</template>
<el-input v-model="form.component" placeholder="璇疯緭鍏ョ粍浠惰矾寰�" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12" v-if="form.menuType == 'C'">
+ <el-form-item prop="appComponent">
+ <template #label>
+ <span>
+ <el-tooltip content="APP 绔闂殑缁勪欢璺緞锛屽锛歚app/system/user/index`" placement="top">
+ <el-icon><question-filled /></el-icon>
+ </el-tooltip>
+ APP缁勪欢璺緞
+ </span>
+ </template>
+ <el-input v-model="form.appComponent" placeholder="璇疯緭鍏� APP 缁勪欢璺緞锛堝彲閫夛級" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.menuType != 'M'">
@@ -316,7 +329,8 @@
rules: {
menuName: [{ required: true, message: "鑿滃崟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
orderNum: [{ required: true, message: "鑿滃崟椤哄簭涓嶈兘涓虹┖", trigger: "blur" }],
- path: [{ required: true, message: "璺敱鍦板潃涓嶈兘涓虹┖", trigger: "blur" }]
+ path: [{ required: true, message: "璺敱鍦板潃涓嶈兘涓虹┖", trigger: "blur" }],
+ appComponent: [{ required: false, message: "APP缁勪欢璺緞涓嶈兘涓虹┖", trigger: "blur" }]
},
})
@@ -359,7 +373,8 @@
isFrame: "1",
isCache: "0",
visible: "0",
- status: "0"
+ status: "0",
+ appComponent: undefined
}
proxy.resetForm("menuRef")
}
--
Gitblit v1.9.3