Merge branch 'main' of http://118.25.48.201:3000/RIZO/Valeo_Line_MES_vue

src/views/plcConnectionStatus/index.vue

@@ -54,11 +54,11 @@ const getList = async () => {
 			dataLoaded.value = true
 		} else {
 			console.error('获取数据失败:', res.msg)
-			dataLoaded.value = true 
+			dataLoaded.value = true
 		}
 	} catch (error) {
 		console.error('请求错误:', error)
-		dataLoaded.value = true 
+		dataLoaded.value = true
 	}
 }
 
@@ -73,10 +73,6 @@ onMounted(() => {
 <style scoped>
 .equipment-rate-container {
 	font-family: "Microsoft YaHei", sans-serif;
-	/* 保留你原有注释的样式，不做修改 */
-	/* padding: 16px;
-	background-color: #f4f6f8;
-	border-radius: 8px; */
 }
 
 h2 {
@@ -85,10 +81,8 @@ h2 {
 	font-size: 18px;
 	font-weight: 600;
 	text-align: center;
-	/* 标题也居中 */
 }
 
-/* 汇总卡片样式 */
 .summary-card {
 	display: flex;
 	gap: 20px;
@@ -99,7 +93,6 @@ h2 {
 	margin-bottom: 16px;
 	flex-wrap: wrap;
 	justify-content: center;
-	/* 汇总信息居中 */
 }
 
 .summary-item {
@@ -119,7 +112,6 @@ h2 {
 	font-size: 16px;
 }
 
-/* 表格容器 */
 .table-container {
 	background: #fff;
 	border-radius: 8px;
@@ -128,35 +120,27 @@ h2 {
 	height: 100%;
 }
 
-/* 表头样式 */
 .table-header {
 	display: flex;
 	background: #eef2f7;
 	border-bottom: 1px solid #dee2e6;
 	font-weight: 600;
 	width: 100%;
-	/* 确保表头宽度100% */
 }
 
-/* 单元格通用样式 - 核心修改：平均分布+居中对齐 */
 .cell {
 	flex: 1;
-	/* 平均分配宽度，6列各占约16.67% */
 	padding: 12px;
 	text-align: center;
-	/* 文字居中对齐 */
 	font-size: 14px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: flex;
 	justify-content: center;
-	/* flex居中 */
 	align-items: center;
-	/* 垂直居中 */
 }
 
-/* 状态标签样式 */
 .status-success {
 	color: #059669;
 	background-color: #d1fae5;
@@ -175,12 +159,8 @@ h2 {
 	font-weight: 600;
 }
 
-/* 移除之前的列宽固定，改为纯平均分布 */
-
-/* 滚动区域 */
 .scroll-wrapper {
-	height: 60vh;
-	/* 固定高度 */
+	height: 100%;
 	overflow: hidden;
 }
 
@@ -188,23 +168,20 @@ h2 {
 	height: 100%;
 }
 
-/* 数据行样式 */
 .table-row {
 	display: flex;
 	align-items: center;
 	border-bottom: 1px solid #f0f2f5;
 	transition: background 0.2s;
 	height: 60px;
-	/* 必须与 singleHeight 一致 */
 	width: 100%;
-	/* 确保行宽度100% */
 }
 
 .table-row:hover {
 	background: #f9fafb;
 }
 
-/* 状态标签 */
+
 .rate-tag {
 	display: inline-block;
 	padding: 4px 8px;
@@ -228,7 +205,6 @@ h2 {
 	color: #991b1b;
 }
 
-/* 无数据 */
 .empty-tip {
 	height: 60vh;
 	display: flex;
@@ -238,7 +214,6 @@ h2 {
 	font-size: 14px;
 }
 
-/* 响应式 */
 @media (max-width: 768px) {
 	.cell {
 		padding: 8px;

src/views/productionProductStatistics/index.vue

@@ -0,0 +1,336 @@
+<template>
+    <el-form :model="queryParams" inline>
+        <el-form-item label="产线">
+            <el-input v-model="queryParams.productionLine" placeholder="请输入产线" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="设备">
+            <el-input v-model="queryParams.equipment" placeholder="请输入设备" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="handleQuery">搜索</el-button>
+            <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+    </el-form>
+    <el-row :gutter="15" class="mb10">
+        <el-col :span="1.5">
+            <el-button type="primary" @click="handleAdd">
+                新增
+            </el-button>
+        </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" border :data="dataList"  style="width: 100%">
+        <el-table-column label="序号" type="index" width="70"></el-table-column>
+        <el-table-column label="产线" prop="productionLine" align="center"></el-table-column>
+        <el-table-column label="设备" prop="equipment" align="center"></el-table-column>
+        <el-table-column label="工站" prop="station" align="center"></el-table-column>
+        <el-table-column label="产品" prop="product" align="center"></el-table-column>
+        <el-table-column label="产量" prop="quantity" align="center"></el-table-column>
+        <el-table-column label="完成时间" prop="completedTime" align="center"></el-table-column>
+        <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+                <el-button type="success" size="small" icon="edit" title="编辑"
+                    @click="handleUpdate(scope.row)"></el-button>
+                <el-button type="danger" size="small" icon="delete" title="删除"
+                    @click="handleDelete(scope.row)"></el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div style="display: flex; justify-content: right; margin-top: 10px;">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total">
+    </el-pagination>
+    </div>
+ 
+
+    <el-dialog :close-on-click-modal="false" :title="title" v-model="open" width="1000px">
+        <el-form :model="form" label-width="80px">
+            <el-row>
+                <el-col :lg="12">
+                    <el-form-item label="产线" prop="productionLine">
+                        <el-input v-model="form.productionLine" placeholder="请输入产线" />
+                    </el-form-item>
+                </el-col>
+                <el-col :lg="12">
+                    <el-form-item label="设备" prop="equipment">
+                        <el-input v-model="form.equipment" placeholder="请输入设备" />
+                    </el-form-item>
+                </el-col>
+                <el-col :lg="12">
+                    <el-form-item label="工站" prop="station">
+                        <el-input v-model="form.station" placeholder="请输入工站" />
+                    </el-form-item>
+                </el-col>
+                <el-col :lg="12">
+                    <el-form-item label="产品" prop="product">
+                        <el-input v-model="form.product" placeholder="请输入产品" />
+                    </el-form-item>
+                </el-col>
+                <el-col :lg="12">
+                    <el-form-item label="产量" prop="quantity">
+                        <el-input v-model="form.quantity" type="number" placeholder="请输入产量" />
+                    </el-form-item>
+                </el-col>
+                <el-col :lg="12">
+                    <el-form-item label="完成时间" prop="completedTime">
+                        <el-input v-model="form.completedTime" placeholder="请输入完成时间" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="open = false">取消</el-button>
+            <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
+
+const loading = ref(false)
+const dataList = ref([])
+const total = ref(0)
+const title = ref('')
+const open = ref(false)
+const opertype = ref(0)
+const showSearch = ref(true)
+const { proxy } = getCurrentInstance()
+
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 10,
+    productionLine: '',
+    equipment: ''
+})
+
+const form = ref({
+    id: '',
+    productionLine: '',
+    equipment: '',
+    station: '',
+    product: '',
+    quantity: '',
+    completedTime: ''
+})
+
+const mockData = ref([
+    {
+        id: 1,
+        productionLine: "装配线A",
+        equipment: "自动化装配机001",
+        station: "总装工站1",
+        product: "智能控制器X01",
+        quantity: 150,
+        completedTime: "2024-01-15 10:30:00"
+    },
+    {
+        id: 2,
+        productionLine: "焊接线B",
+        equipment: "激光焊接机002",
+        station: "焊接工站2",
+        product: "金属支架Y02",
+        quantity: 95,
+        completedTime: "2024-01-15 11:15:00"
+    },
+    {
+        id: 3,
+        productionLine: "喷涂线C",
+        equipment: "静电喷涂机003",
+        station: "喷涂工站3",
+        product: "外壳组件Z03",
+        quantity: 200,
+        completedTime: "2024-01-15 09:45:00"
+    },
+    {
+        id: 4,
+        productionLine: "总装线D",
+        equipment: "流水线组装台004",
+        station: "总装工站4",
+        product: "整机成品W04",
+        quantity: 78,
+        completedTime: "2024-01-15 14:20:00"
+    },
+    {
+        id: 5,
+        productionLine: "检测线E",
+        equipment: "性能检测仪005",
+        station: "质检工站5",
+        product: "成品检测件V05",
+        quantity: 120,
+        completedTime: "2024-01-15 16:00:00"
+    },
+    {
+        id: 6,
+        productionLine: "包装线F",
+        equipment: "自动包装机006",
+        station: "包装工站6",
+        product: "成品包装件U06",
+        quantity: 180,
+        completedTime: "2024-01-15 17:30:00"
+    },
+    {
+        id: 7,
+        productionLine: "装配线A",
+        equipment: "自动化装配机007",
+        station: "预装工站7",
+        product: "核心组件T07",
+        quantity: 210,
+        completedTime: "2024-01-16 08:45:00"
+    },
+    {
+        id: 8,
+        productionLine: "焊接线B",
+        equipment: "氩弧焊机008",
+        station: "精密焊接工站8",
+        product: "精密连接件S08",
+        quantity: 85,
+        completedTime: "2024-01-16 09:20:00"
+    },
+    {
+        id: 9,
+        productionLine: "喷涂线C",
+        equipment: "UV固化机009",
+        station: "固化工站9",
+        product: "固化处理件R09",
+        quantity: 160,
+        completedTime: "2024-01-16 10:10:00"
+    },
+    {
+        id: 10,
+        productionLine: "总装线D",
+        equipment: "螺丝紧固机010",
+        station: "紧固工站10",
+        product: "紧固组件Q10",
+        quantity: 135,
+        completedTime: "2024-01-16 11:00:00"
+    },
+    {
+        id: 11,
+        productionLine: "检测线E",
+        equipment: "老化测试机011",
+        station: "老化测试工站11",
+        product: "老化测试件P11",
+        quantity: 90,
+        completedTime: "2024-01-16 13:45:00"
+    }
+])
+
+const getList = () => {
+    loading.value = true
+    setTimeout(() => {
+        let filteredData = mockData.value.filter(item => {
+            const lineMatch = !queryParams.productionLine || item.productionLine.includes(queryParams.productionLine)
+            const equipMatch = !queryParams.equipment || item.equipment.includes(queryParams.equipment)
+            return lineMatch && equipMatch
+        })
+        const start = (queryParams.pageNum - 1) * queryParams.pageSize
+        const end = start + queryParams.pageSize
+        dataList.value = filteredData.slice(start, end)
+        total.value = filteredData.length
+        loading.value = false
+    }, 300)
+}
+
+// 分页大小改变
+const handleSizeChange = (val) => {
+    queryParams.pageSize = val
+    getList()
+}
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+    queryParams.pageNum = val
+    getList()
+}
+
+onMounted(() => {
+    getList()
+})
+
+// 搜索查询
+const handleQuery = () => {
+    queryParams.pageNum = 1 
+    getList()
+}
+
+// 重置查询
+const resetQuery = () => {
+    queryParams.productionLine = ''
+    queryParams.equipment = ''
+    queryParams.pageNum = 1
+    getList()
+}
+
+// 处理新增
+const handleAdd = () => {
+    form.value = {
+        id: '',
+        productionLine: '',
+        equipment: '',
+        station: '',
+        product: '',
+        quantity: '',
+        completedTime: ''
+    }
+    open.value = true
+    title.value = '新增生产数据'
+    opertype.value = 1
+}
+
+// 处理更新
+const handleUpdate = (row) => {
+    title.value = '修改生产数据'
+    open.value = true
+    opertype.value = 2
+    form.value = { ...row } 
+}
+
+// 表单提交（新增/编辑）
+const handleSubmit = () => {
+    if (opertype.value === 1) {
+        const newId = Math.max(...mockData.value.map(item => item.id)) + 1
+        form.value.id = newId
+        mockData.value.push(form.value)
+        proxy.$message.success('新增成功')
+    } else {
+        const index = mockData.value.findIndex(item => item.id === form.value.id)
+        if (index > -1) {
+            mockData.value[index] = { ...form.value }
+            proxy.$message.success('修改成功')
+        }
+    }
+    open.value = false
+    getList() 
+}
+
+// 处理删除
+const handleDelete = (row) => {
+    proxy
+        .$confirm(`是否确认删除ID为"${row.id}"的生产数据？`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
+        .then(() => {
+            mockData.value = mockData.value.filter(item => item.id !== row.id)
+            getList() 
+            proxy.$message.success("删除成功")
+        })
+        .catch(() => {
+            proxy.$message.info("已取消删除")
+        })
+}
+</script>
+
+<style scoped>
+.mb10 {
+    margin-bottom: 10px;
+}
+
+.dialog-footer {
+    text-align: right;
+    margin-top: 20px;
+}
+</style>