From c7b4b9a2f4c0f05aeb60a9e3f5fba5d9a3676f3f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 18 八月 2025 16:22:42 +0800
Subject: [PATCH] 中强恒兴设备管理页面添加
---
src/views/reportAnalysis/reportManagement.vue | 733 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 733 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/reportManagement.vue b/src/views/reportAnalysis/reportManagement.vue
new file mode 100644
index 0000000..02babb5
--- /dev/null
+++ b/src/views/reportAnalysis/reportManagement.vue
@@ -0,0 +1,733 @@
+<template>
+ <div class="report-management">
+ <!-- 椤甸潰鏍囬 -->
+ <div class="page-header">
+ <h2>鎶ヨ〃绠＄悊</h2>
+ <p>鎻愪緵鏍峰搧杩涘害銆佽澶囦娇鐢ㄣ�佹娴嬮」鐩�侀鐢ㄨ褰曠瓑鍚勭被鑷姩缁熻鎶ヨ〃</p>
+ </div>
+
+ <!-- 绛涢�夋潯浠� -->
+ <el-card class="filter-card" shadow="never">
+ <el-form :model="filterForm" inline>
+ <el-form-item label="鏃堕棿鑼冨洿">
+ <el-date-picker
+ v-model="filterForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ @change="handleFilterChange"
+ />
+ </el-form-item>
+ <el-form-item label="鎶ヨ〃绫诲瀷">
+ <el-select v-model="filterForm.reportType" placeholder="璇烽�夋嫨鎶ヨ〃绫诲瀷" @change="handleFilterChange">
+ <el-option label="鏍峰搧杩涘害鎶ヨ〃" value="sample" />
+ <el-option label="璁惧浣跨敤鎶ヨ〃" value="equipment" />
+ <el-option label="妫�娴嬮」鐩姤琛�" value="inspection" />
+ <el-option label="棰嗙敤璁板綍鎶ヨ〃" value="usage" />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleFilterChange">鏌ヨ</el-button>
+ <el-button @click="resetFilter">閲嶇疆</el-button>
+ <el-button type="success" @click="exportReport">瀵煎嚭鎶ヨ〃</el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
+
+ <!-- 缁熻鍗＄墖 -->
+ <div class="statistics-cards">
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <el-card class="stat-card" shadow="hover">
+ <div class="stat-content">
+ <div class="stat-icon">
+ <el-icon><Box /></el-icon>
+ </div>
+ <div class="stat-info">
+ <div class="stat-number">{{ statistics.totalSamples }}</div>
+ <div class="stat-label">鎬绘牱鍝佹暟</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="stat-card" shadow="hover">
+ <div class="stat-content">
+ <div class="stat-icon">
+ <el-icon><Tools /></el-icon>
+ </div>
+ <div class="stat-info">
+ <div class="stat-number">{{ statistics.activeEquipment }}</div>
+ <div class="stat-label">鍦ㄧ敤璁惧</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="stat-card" shadow="hover">
+ <div class="stat-content">
+ <div class="stat-icon">
+ <el-icon><Document /></el-icon>
+ </div>
+ <div class="stat-info">
+ <div class="stat-number">{{ statistics.completedInspections }}</div>
+ <div class="stat-label">宸插畬鎴愭娴�</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ <el-col :span="6">
+ <el-card class="stat-card" shadow="hover">
+ <div class="stat-content">
+ <div class="stat-icon">
+ <el-icon><ShoppingCart /></el-icon>
+ </div>
+ <div class="stat-info">
+ <div class="stat-number">{{ statistics.totalUsage }}</div>
+ <div class="stat-label">鎬婚鐢ㄦ鏁�</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+
+ <!-- 鍥捐〃鍖哄煙 -->
+ <div class="charts-container">
+ <el-row :gutter="20">
+ <!-- 鏍峰搧杩涘害鍥捐〃 -->
+ <el-col :span="12">
+ <el-card class="chart-card" shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>鏍峰搧杩涘害缁熻</span>
+ <el-button type="text" @click="refreshSampleChart">鍒锋柊</el-button>
+ </div>
+ </template>
+ <div ref="sampleChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+
+ <!-- 璁惧浣跨敤鍥捐〃 -->
+ <el-col :span="12">
+ <el-card class="chart-card" shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>璁惧浣跨敤鐜囩粺璁�</span>
+ <el-button type="text" @click="refreshEquipmentChart">鍒锋柊</el-button>
+ </div>
+ </template>
+ <div ref="equipmentChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20" style="margin-top: 20px;">
+ <!-- 妫�娴嬮」鐩粺璁� -->
+ <el-col :span="12">
+ <el-card class="chart-card" shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>妫�娴嬮」鐩垎甯�</span>
+ <el-button type="text" @click="refreshInspectionChart">鍒锋柊</el-button>
+ </div>
+ </template>
+ <div ref="inspectionChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+
+ <!-- 棰嗙敤璁板綍瓒嬪娍 -->
+ <el-col :span="12">
+ <el-card class="chart-card" shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>棰嗙敤璁板綍瓒嬪娍</span>
+ <el-button type="text" @click="refreshUsageChart">鍒锋柊</el-button>
+ </div>
+ </template>
+ <div ref="usageChartRef" class="chart-container"></div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+
+ <!-- 璇︾粏鏁版嵁琛ㄦ牸 -->
+ <el-card class="table-card" shadow="hover">
+ <template #header>
+ <div class="card-header">
+ <span>璇︾粏鏁版嵁</span>
+ <div>
+ <el-button type="primary" size="small" @click="refreshTable">鍒锋柊</el-button>
+ <el-button type="success" size="small" @click="exportTable">瀵煎嚭</el-button>
+ </div>
+ </div>
+ </template>
+
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ v-loading="tableLoading"
+ stripe
+ border
+ >
+ <el-table-column prop="id" label="缂栧彿" width="80" />
+ <el-table-column prop="name" label="鍚嶇О" />
+ <el-table-column prop="type" label="绫诲瀷" width="120" />
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="scope">
+ <el-tag :type="getStatusType(scope.row.status)">
+ {{ scope.row.status }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="progress" label="杩涘害" width="120">
+ <template #default="scope">
+ <el-progress :percentage="scope.row.progress" :status="getProgressStatus(scope.row.progress)" />
+ </template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
+ <el-table-column prop="updateTime" label="鏇存柊鏃堕棿" width="180" />
+ <el-table-column label="鎿嶄綔" width="150" fixed="right">
+ <template #default="scope">
+ <el-button type="text" size="small" @click="viewDetail(scope.row)">鏌ョ湅</el-button>
+ <el-button type="text" size="small" @click="editItem(scope.row)">缂栬緫</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <div class="pagination-container">
+ <el-pagination
+ v-model:current-page="pagination.currentPage"
+ v-model:page-size="pagination.pageSize"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="pagination.total"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import * as echarts from 'echarts'
+import { Box, Tools, Document, ShoppingCart } from '@element-plus/icons-vue'
+
+// 鍝嶅簲寮忔暟鎹�
+const filterForm = reactive({
+ dateRange: [],
+ reportType: 'sample'
+})
+
+const statistics = reactive({
+ totalSamples: 1250,
+ activeEquipment: 45,
+ completedInspections: 890,
+ totalUsage: 2340
+})
+
+const tableData = ref([])
+const tableLoading = ref(false)
+const pagination = reactive({
+ currentPage: 1,
+ pageSize: 20,
+ total: 0
+})
+
+// 鍥捐〃寮曠敤
+const sampleChartRef = ref(null)
+const equipmentChartRef = ref(null)
+const inspectionChartRef = ref(null)
+const usageChartRef = ref(null)
+
+// 鍥捐〃瀹炰緥
+let sampleChart = null
+let equipmentChart = null
+let inspectionChart = null
+let usageChart = null
+
+// 鍒濆鍖栨暟鎹�
+const initData = () => {
+ // 妯℃嫙琛ㄦ牸鏁版嵁
+ tableData.value = [
+ {
+ id: 'SP001',
+ name: '鏍峰搧A-001',
+ type: '閲戝睘鏉愭枡',
+ status: '妫�娴嬩腑',
+ progress: 75,
+ createTime: '2024-01-15 09:30:00',
+ updateTime: '2024-01-20 14:20:00'
+ },
+ {
+ id: 'SP002',
+ name: '鏍峰搧B-002',
+ type: '濉戞枡鍒跺搧',
+ status: '宸插畬鎴�',
+ progress: 100,
+ createTime: '2024-01-10 10:15:00',
+ updateTime: '2024-01-18 16:45:00'
+ },
+ {
+ id: 'SP003',
+ name: '鏍峰搧C-003',
+ type: '鐢靛瓙鍏冧欢',
+ status: '寰呮娴�',
+ progress: 0,
+ createTime: '2024-01-22 08:45:00',
+ updateTime: '2024-01-22 08:45:00'
+ },
+ {
+ id: 'EQ001',
+ name: '妫�娴嬭澶嘇',
+ type: '鍏夎氨浠�',
+ status: '浣跨敤涓�',
+ progress: 60,
+ createTime: '2024-01-05 14:20:00',
+ updateTime: '2024-01-20 11:30:00'
+ },
+ {
+ id: 'EQ002',
+ name: '妫�娴嬭澶嘊',
+ type: '鏄惧井闀�',
+ status: '绌洪棽',
+ progress: 0,
+ createTime: '2024-01-08 16:10:00',
+ updateTime: '2024-01-19 09:15:00'
+ }
+ ]
+
+ pagination.total = tableData.value.length
+}
+
+// 鍒濆鍖栨牱鍝佽繘搴﹀浘琛�
+const initSampleChart = () => {
+ if (sampleChartRef.value) {
+ sampleChart = echarts.init(sampleChartRef.value)
+ const option = {
+ title: {
+ text: '鏍峰搧杩涘害鍒嗗竷',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ name: '鏍峰搧鐘舵��',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '18',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 450, name: '宸插畬鎴�' },
+ { value: 320, name: '妫�娴嬩腑' },
+ { value: 280, name: '寰呮娴�' },
+ { value: 200, name: '宸叉殏鍋�' }
+ ]
+ }
+ ]
+ }
+ sampleChart.setOption(option)
+ }
+}
+
+// 鍒濆鍖栬澶囦娇鐢ㄥ浘琛�
+const initEquipmentChart = () => {
+ if (equipmentChartRef.value) {
+ equipmentChart = echarts.init(equipmentChartRef.value)
+ const option = {
+ title: {
+ text: '璁惧浣跨敤鐜�',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: ['鍏夎氨浠�', '鏄惧井闀�', '纭害璁�', '鎷夊姏鏈�', '鍐插嚮鏈�', '閲戠浉浠�']
+ },
+ yAxis: {
+ type: 'value',
+ name: '浣跨敤鐜�(%)'
+ },
+ series: [
+ {
+ name: '浣跨敤鐜�',
+ type: 'bar',
+ data: [85, 60, 75, 90, 45, 70],
+ label: {
+ show: true,
+ position: 'inside',
+ align: 'center',
+ verticalAlign: 'middle',
+ formatter: '{c}%',
+ color: '#fff'
+ },
+ itemStyle: {
+ color: function(params) {
+ const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0']
+ return colors[params.dataIndex]
+ }
+ }
+ }
+ ]
+ }
+ equipmentChart.setOption(option)
+ }
+}
+
+// 鍒濆鍖栨娴嬮」鐩浘琛�
+const initInspectionChart = () => {
+ if (inspectionChartRef.value) {
+ inspectionChart = echarts.init(inspectionChartRef.value)
+ const option = {
+ title: {
+ text: '妫�娴嬮」鐩垎甯�',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ name: '妫�娴嬮」鐩�',
+ type: 'pie',
+ radius: '50%',
+ data: [
+ { value: 335, name: '鐗╃悊鎬ц兘' },
+ { value: 310, name: '鍖栧鍒嗘瀽' },
+ { value: 234, name: '灏哄娴嬮噺' },
+ { value: 135, name: '澶栬妫�鏌�' },
+ { value: 148, name: '鍏朵粬妫�娴�' }
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+ inspectionChart.setOption(option)
+ }
+}
+
+// 鍒濆鍖栭鐢ㄨ褰曞浘琛�
+const initUsageChart = () => {
+ if (usageChartRef.value) {
+ usageChart = echarts.init(usageChartRef.value)
+ const option = {
+ title: {
+ text: '棰嗙敤璁板綍瓒嬪娍',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['棰嗙敤娆℃暟', '褰掕繕娆℃暟']
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '棰嗙敤娆℃暟',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+ },
+ {
+ name: '褰掕繕娆℃暟',
+ type: 'line',
+ stack: 'Total',
+ data: [110, 125, 95, 128, 85, 220, 200, 175, 185, 225, 280, 320]
+ }
+ ]
+ }
+ usageChart.setOption(option)
+ }
+}
+
+// 浜嬩欢澶勭悊鍑芥暟
+const handleFilterChange = () => {
+ ElMessage.success('绛涢�夋潯浠跺凡鏇存柊')
+ // 杩欓噷鍙互鏍规嵁绛涢�夋潯浠堕噸鏂板姞杞芥暟鎹�
+}
+
+const resetFilter = () => {
+ filterForm.dateRange = []
+ filterForm.reportType = 'sample'
+ ElMessage.info('绛涢�夋潯浠跺凡閲嶇疆')
+}
+
+const exportReport = () => {
+ ElMessage.success('鎶ヨ〃瀵煎嚭鍔熻兘寮�鍙戜腑...')
+}
+
+const refreshSampleChart = () => {
+ initSampleChart()
+ ElMessage.success('鏍峰搧杩涘害鍥捐〃宸插埛鏂�')
+}
+
+const refreshEquipmentChart = () => {
+ initEquipmentChart()
+ ElMessage.success('璁惧浣跨敤鍥捐〃宸插埛鏂�')
+}
+
+const refreshInspectionChart = () => {
+ initInspectionChart()
+ ElMessage.success('妫�娴嬮」鐩浘琛ㄥ凡鍒锋柊')
+}
+
+const refreshUsageChart = () => {
+ initUsageChart()
+ ElMessage.success('棰嗙敤璁板綍鍥捐〃宸插埛鏂�')
+}
+
+const refreshTable = () => {
+ tableLoading.value = true
+ setTimeout(() => {
+ tableLoading.value = false
+ ElMessage.success('琛ㄦ牸鏁版嵁宸插埛鏂�')
+ }, 1000)
+}
+
+const exportTable = () => {
+ ElMessage.success('琛ㄦ牸瀵煎嚭鍔熻兘寮�鍙戜腑...')
+}
+
+const handleSizeChange = (val) => {
+ pagination.pageSize = val
+ // 閲嶆柊鍔犺浇鏁版嵁
+}
+
+const handleCurrentChange = (val) => {
+ pagination.currentPage = val
+ // 閲嶆柊鍔犺浇鏁版嵁
+}
+
+const getStatusType = (status) => {
+ const statusMap = {
+ '宸插畬鎴�': 'success',
+ '妫�娴嬩腑': 'warning',
+ '寰呮娴�': 'info',
+ '宸叉殏鍋�': 'danger',
+ '浣跨敤涓�': 'primary',
+ '绌洪棽': 'info'
+ }
+ return statusMap[status] || 'info'
+}
+
+const getProgressStatus = (progress) => {
+ if (progress === 100) return 'success'
+ if (progress >= 80) return 'warning'
+ if (progress >= 50) return ''
+ return 'exception'
+}
+
+const viewDetail = (row) => {
+ ElMessage.info(`鏌ョ湅璇︽儏: ${row.name}`)
+}
+
+const editItem = (row) => {
+ ElMessage.info(`缂栬緫椤圭洰: ${row.name}`)
+}
+
+// 鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ initData()
+ nextTick(() => {
+ initSampleChart()
+ initEquipmentChart()
+ initInspectionChart()
+ initUsageChart()
+ })
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲锛岄噸鏂拌皟鏁村浘琛ㄥぇ灏�
+ window.addEventListener('resize', () => {
+ sampleChart?.resize()
+ equipmentChart?.resize()
+ inspectionChart?.resize()
+ usageChart?.resize()
+ })
+})
+</script>
+
+<style scoped>
+.report-management {
+ padding: 20px;
+ background-color: #f5f5f5;
+ min-height: 100vh;
+}
+
+.page-header {
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+.page-header h2 {
+ color: #303133;
+ margin-bottom: 8px;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.page-header p {
+ color: #909399;
+ font-size: 14px;
+ margin: 0;
+}
+
+.filter-card {
+ margin-bottom: 20px;
+}
+
+.statistics-cards {
+ margin-bottom: 20px;
+}
+
+.stat-card {
+ height: 120px;
+}
+
+.stat-content {
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
+
+.stat-icon {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 20px;
+ font-size: 24px;
+ color: white;
+}
+
+.stat-card:nth-child(1) .stat-icon {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.stat-card:nth-child(2) .stat-icon {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.stat-card:nth-child(3) .stat-icon {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.stat-card:nth-child(4) .stat-icon {
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.stat-info {
+ flex: 1;
+}
+
+.stat-number {
+ font-size: 28px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 8px;
+}
+
+.stat-label {
+ font-size: 14px;
+ color: #909399;
+}
+
+.charts-container {
+ margin-bottom: 20px;
+}
+
+.chart-card {
+ margin-bottom: 20px;
+}
+
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.chart-container {
+ height: 300px;
+ width: 100%;
+}
+
+.table-card {
+ margin-bottom: 20px;
+}
+
+.pagination-container {
+ margin-top: 20px;
+ text-align: right;
+}
+
+:deep(.el-card__header) {
+ padding: 15px 20px;
+ border-bottom: 1px solid #ebeef5;
+ background-color: #fafafa;
+}
+
+:deep(.el-card__body) {
+ padding: 20px;
+}
+
+:deep(.el-table) {
+ margin-bottom: 20px;
+}
+
+:deep(.el-progress) {
+ margin: 0;
+}
+
+:deep(.el-tag) {
+ margin: 0;
+}
+</style>
--
Gitblit v1.9.3