|
|
@@ -0,0 +1,413 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import { asyncComputed } from '@vueuse/core'
|
|
|
+import { staticFlowForm } from '/@/api/flow/flowForm'
|
|
|
+
|
|
|
+// 顶部统计卡片数据
|
|
|
+const summaryCards = asyncComputed(async () => {
|
|
|
+ const {prepare,already,start} = await staticFlowForm() as unknown as {
|
|
|
+ prepare: number
|
|
|
+ already: number
|
|
|
+ start: number
|
|
|
+ }
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: '我的待办',
|
|
|
+ number: prepare,
|
|
|
+ description: '待处理任务',
|
|
|
+ icon: 'ele-Warning',
|
|
|
+ color: '#f56c6c',
|
|
|
+ bgColor: '#fef0f0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我发起的',
|
|
|
+ number: start,
|
|
|
+ description: '发起的工单',
|
|
|
+ icon: 'ele-Document',
|
|
|
+ color: '#409eff',
|
|
|
+ bgColor: '#f0f9ff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '我处理的',
|
|
|
+ number: already,
|
|
|
+ description: '已处理任务',
|
|
|
+ icon: 'ele-User',
|
|
|
+ color: '#67c23a',
|
|
|
+ bgColor: '#f0f9ff'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '抄送我的',
|
|
|
+ // number: 8,
|
|
|
+ // description: '抄送通知',
|
|
|
+ // icon: 'ele-Setting',
|
|
|
+ // color: '#909399',
|
|
|
+ // bgColor: '#f4f4f5'
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 作业区域数据
|
|
|
+const operationCards = ref([
|
|
|
+ {
|
|
|
+ title: '设备维护',
|
|
|
+ subtitle: '设备保养维修',
|
|
|
+ icon: 'ele-Tools',
|
|
|
+ color: '#409eff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '水质检测',
|
|
|
+ subtitle: '水质监测记录',
|
|
|
+ icon: 'ele-WaterCup',
|
|
|
+ color: '#67c23a'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应急处理',
|
|
|
+ subtitle: '紧急事件处理',
|
|
|
+ icon: 'ele-Warning',
|
|
|
+ color: '#e6a23c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '巡检作业',
|
|
|
+ subtitle: '日常巡检记录',
|
|
|
+ icon: 'ele-Monitor',
|
|
|
+ color: '#909399'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '清洁作业',
|
|
|
+ subtitle: '设施清洁维护',
|
|
|
+ icon: 'ele-Brush',
|
|
|
+ color: '#f56c6c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '安全检查',
|
|
|
+ subtitle: '安全隐患排查',
|
|
|
+ icon: 'ele-View',
|
|
|
+ color: '#409eff'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 日常报告区域数据
|
|
|
+const reportCards = ref([
|
|
|
+ {
|
|
|
+ title: '日报',
|
|
|
+ subtitle: '日常工作报告',
|
|
|
+ icon: 'ele-Document',
|
|
|
+ color: '#409eff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '周报',
|
|
|
+ subtitle: '周度工作总结',
|
|
|
+ icon: 'ele-Calendar',
|
|
|
+ color: '#67c23a'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '月报',
|
|
|
+ subtitle: '月度运营报告',
|
|
|
+ icon: 'ele-TrendCharts',
|
|
|
+ color: '#e6a23c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '异常报告',
|
|
|
+ subtitle: '异常情况上报',
|
|
|
+ icon: 'ele-Warning',
|
|
|
+ color: '#909399'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '运行报告',
|
|
|
+ subtitle: '设备运行状态',
|
|
|
+ icon: 'ele-Monitor',
|
|
|
+ color: '#f56c6c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '水质报告',
|
|
|
+ subtitle: '水质检测报告',
|
|
|
+ icon: 'ele-WaterCup',
|
|
|
+ color: '#409eff'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 物料区域数据
|
|
|
+const materialCards = ref([
|
|
|
+ {
|
|
|
+ title: '物料申请',
|
|
|
+ subtitle: '物料采购申请',
|
|
|
+ icon: 'ele-Plus',
|
|
|
+ color: '#409eff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '入库登记',
|
|
|
+ subtitle: '物料入库记录',
|
|
|
+ icon: 'ele-Bottom',
|
|
|
+ color: '#67c23a'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出库申请',
|
|
|
+ subtitle: '物料领用申请',
|
|
|
+ icon: 'ele-Search',
|
|
|
+ color: '#e6a23c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '库存盘点',
|
|
|
+ subtitle: '定期库存盘点',
|
|
|
+ icon: 'ele-DataAnalysis',
|
|
|
+ color: '#909399'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报废申请',
|
|
|
+ subtitle: '物料报废处理',
|
|
|
+ icon: 'ele-Delete',
|
|
|
+ color: '#f56c6c'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '供应商管理',
|
|
|
+ subtitle: '供应商信息维护',
|
|
|
+ icon: 'ele-Connection',
|
|
|
+ color: '#409eff'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 处理卡片点击事件
|
|
|
+const handleCardClick = (type: string, item: any) => {
|
|
|
+ console.log(`${type} - ${item.title}`, item)
|
|
|
+ // 这里可以添加路由跳转或其他业务逻辑
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="flow-craft-container">
|
|
|
+ <!-- 顶部统计卡片 -->
|
|
|
+ <div class="summary-section">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24 / summaryCards.length" v-for="card in summaryCards" :key="card.title">
|
|
|
+ <el-card class="summary-card" shadow="hover">
|
|
|
+ <div class="summary-content">
|
|
|
+ <div class="summary-icon" :style="{ backgroundColor: card.bgColor, color: card.color }">
|
|
|
+ <el-icon :size="24">
|
|
|
+ <component :is="card.icon" />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="summary-info">
|
|
|
+ <div class="summary-number">{{ card.number }}</div>
|
|
|
+ <div class="summary-title">{{ card.title }}</div>
|
|
|
+ <div class="summary-desc">{{ card.description }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 作业区域 -->
|
|
|
+ <div class="section-container">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-bar"></div>
|
|
|
+ <h3 class="section-title">作业</h3>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8" v-for="card in operationCards" :key="card.title">
|
|
|
+ <el-card
|
|
|
+ class="function-card"
|
|
|
+ shadow="hover"
|
|
|
+ @click="handleCardClick('operation', card)"
|
|
|
+ >
|
|
|
+ <div class="card-content">
|
|
|
+ <el-icon :size="32" :color="card.color">
|
|
|
+ <component :is="card.icon" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="card-title">{{ card.title }}</div>
|
|
|
+ <div class="card-subtitle">{{ card.subtitle }}</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 日常报告区域 -->
|
|
|
+ <div class="section-container">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-bar"></div>
|
|
|
+ <h3 class="section-title">日常报告</h3>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8" v-for="card in reportCards" :key="card.title">
|
|
|
+ <el-card
|
|
|
+ class="function-card"
|
|
|
+ shadow="hover"
|
|
|
+ @click="handleCardClick('report', card)"
|
|
|
+ >
|
|
|
+ <div class="card-content">
|
|
|
+ <el-icon :size="32" :color="card.color">
|
|
|
+ <component :is="card.icon" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="card-title">{{ card.title }}</div>
|
|
|
+ <div class="card-subtitle">{{ card.subtitle }}</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 物料区域 -->
|
|
|
+ <div class="section-container">
|
|
|
+ <div class="section-header">
|
|
|
+ <div class="section-bar"></div>
|
|
|
+ <h3 class="section-title">物料</h3>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8" v-for="card in materialCards" :key="card.title">
|
|
|
+ <el-card
|
|
|
+ class="function-card"
|
|
|
+ shadow="hover"
|
|
|
+ @click="handleCardClick('material', card)"
|
|
|
+ >
|
|
|
+ <div class="card-content">
|
|
|
+ <el-icon :size="32" :color="card.color">
|
|
|
+ <component :is="card.icon" />
|
|
|
+ </el-icon>
|
|
|
+ <div class="card-title">{{ card.title }}</div>
|
|
|
+ <div class="card-subtitle">{{ card.subtitle }}</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.flow-craft-container {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .summary-section {
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ .summary-card {
|
|
|
+ .summary-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+
|
|
|
+ .summary-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .summary-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .summary-number {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .summary-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .summary-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-container {
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .section-bar {
|
|
|
+ width: 4px;
|
|
|
+ height: 24px;
|
|
|
+ background-color: #67c23a;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin: 16px 0 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式设计
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .flow-craft-container {
|
|
|
+ .summary-section {
|
|
|
+ .el-col {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .flow-craft-container {
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .summary-section {
|
|
|
+ .el-col {
|
|
|
+ width: 100% !important;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-container {
|
|
|
+ .el-col {
|
|
|
+ width: 100% !important;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
