首页-新原型

ygtx-ui/src/views/index4.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="index4-container">
+    <!-- 左侧表单，占据20%宽度 -->
+    <div class="left-form">
+      <el-card class="form-card floating-card">
+        <div class="form-button">
+            <el-button class="filter-button reset-button" @click="resetFilter">重置筛选</el-button>
+        </div>
+        <div class="form-button">
+            <el-button class="filter-button apply-button" @click="applyFilter">应用筛选</el-button>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 右侧内容，占据80%宽度 -->
+    <div class="right-content">
+      <!-- 第一行：4个图标，每个占据25%宽度 -->
+      <div class="icons-row">
+        <el-card class="floating-card icon-item">
+          <div class="icon-wrapper">
+            <div class="icon-circle" style="background-color: #dbeafe;">
+              <el-icon class="fa fa-ticket text-primary" style="color: #165dff;"></el-icon>
+              <!-- 角标 -->
+              <div class="badge">3</div>
+            </div>
+          </div>
+          <div class="icon-label">我的待办</div>
+        </el-card>
+        <el-card class="floating-card icon-item">
+          <div class="icon-wrapper">
+            <div class="icon-circle" style="background-color: #fef9c3;">
+              <el-icon class="fa fa-star text-warning"></el-icon>
+            </div>
+          </div>
+          <div class="icon-label">我发起的</div>
+        </el-card>
+        <el-card class="floating-card icon-item">
+          <div class="icon-wrapper">
+            <div class="icon-circle" style="background-color: #fee2e2;">
+              <el-icon class="fa fa-minus-circle text-danger"></el-icon>
+            </div>
+          </div>
+          <div class="icon-label">我处理的</div>
+        </el-card>
+        <el-card class="floating-card icon-item">
+          <div class="icon-wrapper">
+            <div class="icon-circle" style="background-color: #dcfce7;">
+              <el-icon class="fa fa-history text-success" style="color: #00b42a;"></el-icon>
+            </div>
+          </div>
+          <div class="icon-label">我相关的</div>
+        </el-card>
+      </div>
+
+      <!-- 第二行：4个表单，每个占据25%宽度 -->
+      <div class="forms-row">
+        <div class="form-item">
+          <el-card class="data-card floating-card">
+            <div class="card-header">
+              <span class="card-title">维保工单总数</span>
+              <div class="card-icon">
+                <el-icon><data-analysis /></el-icon>
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="data-value">120</div>
+              <div class="data-description">较上月增长 15%</div>
+            </div>
+          </el-card>
+        </div>
+        <div class="form-item">
+          <el-card class="data-card floating-card">
+            <div class="card-header">
+              <span class="card-title">维修工单总数</span>
+              <div class="card-icon">
+                <el-icon><list /></el-icon>
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="data-value">85</div>
+              <div class="data-description">较上月增长 8%</div>
+            </div>
+          </el-card>
+        </div>
+        <div class="form-item">
+          <el-card class="data-card floating-card">
+            <div class="card-header">
+              <span class="card-title">本月工时(小时)</span>
+              <div class="card-icon">
+                <el-icon><timer /></el-icon>
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="data-value">168</div>
+              <div class="data-description">较上月增长 12%</div>
+            </div>
+          </el-card>
+        </div>
+        <div class="form-item">
+          <el-card class="data-card floating-card">
+            <div class="card-header">
+              <span class="card-title">本月工分</span>
+              <div class="card-icon">
+                <el-icon><star-filled /></el-icon>
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="data-value">92</div>
+              <div class="data-description">较上月增长 5%</div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+
+      <!-- 第三行：工单数据列表 -->
+      <div class="list-row">
+        <el-card class="list-card floating-card">
+          <template #header>
+            <div class="list-header">
+              <span>工单数据列表</span>
+            </div>
+          </template>
+          <el-table :data="orderList" style="width: 100%">
+            <el-table-column prop="orderNo" label="工单编号" width="150" header-align="center" align="center"></el-table-column>
+            <el-table-column prop="orderType" label="工单类型" width="120" header-align="center" align="center"></el-table-column>
+            <el-table-column prop="createTime" label="创建时间" width="180" header-align="center" align="center"></el-table-column>
+            <el-table-column prop="handler" label="处理人" width="120" header-align="center" align="center"></el-table-column>
+            <el-table-column prop="status" label="状态" width="100" header-align="center" align="center">
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '已完成' ? 'success' : scope.row.status === '处理中' ? 'warning' : 'info'">
+                  {{ scope.row.status }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="score" label="评分" width="80" header-align="center" align="center"></el-table-column>
+            <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { 
+  Document, 
+  Promotion, 
+  Edit, 
+  Link, 
+  DataAnalysis, 
+  List, 
+  Timer, 
+  StarFilled 
+} from '@element-plus/icons-vue'
+
+export default {
+  name: 'Index4',
+  components: {
+    Document,
+    Promotion,
+    Edit,
+    Link,
+    DataAnalysis,
+    List,
+    Timer,
+    StarFilled
+  },
+  setup() {
+    // 表单数据
+    const leftFormData = reactive({
+      field1: '',
+      field2: '',
+      field3: '',
+      field4: ''
+    })
+
+    // 列表数据
+    const orderList = ref([
+      {
+        orderNo: 'WO2023001',
+        orderType: '维保工单',
+        createTime: '2023-05-15 09:30:22',
+        handler: '张三',
+        status: '已完成',
+        score: '95',
+        remark: '按时完成'
+      },
+      {
+        orderNo: 'WO2023002',
+        orderType: '维修工单',
+        createTime: '2023-05-16 14:22:10',
+        handler: '李四',
+        status: '处理中',
+        score: '88',
+        remark: '进行中'
+      },
+      {
+        orderNo: 'WO2023003',
+        orderType: '维保工单',
+        createTime: '2023-05-17 11:05:45',
+        handler: '王五',
+        status: '待处理',
+        score: '92',
+        remark: '等待分配'
+      },
+      {
+        orderNo: 'WO2023004',
+        orderType: '维修工单',
+        createTime: '2023-05-18 16:40:33',
+        handler: '赵六',
+        status: '已完成',
+        score: '90',
+        remark: '提前完成'
+      }
+    ])
+
+    // 重置筛选
+    const resetFilter = () => {
+      leftFormData.field1 = ''
+      leftFormData.field2 = ''
+      leftFormData.field3 = ''
+      leftFormData.field4 = ''
+      console.log('重置筛选')
+    }
+
+    // 应用筛选
+    const applyFilter = () => {
+      console.log('应用筛选', leftFormData)
+    }
+
+    return {
+      leftFormData,
+      orderList,
+      resetFilter,
+      applyFilter
+    }
+  }
+}
+</script>
+
+<style scoped>
+.index4-container {
+  display: flex;
+  padding: 20px;
+  min-height: calc(100vh - 84px);
+  position: relative;
+}
+
+.left-form {
+  width: 20%;
+  box-sizing: border-box;
+}
+
+.right-content {
+  width: 80%;
+  display: flex;
+  margin-left: 20px;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-card {
+  height: 100%;
+}
+
+.form-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.form-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.form-button {
+  text-align: center;
+}
+
+.filter-button {
+  color: white;
+  border: none;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.filter-button:hover {
+  opacity: 0.9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.reset-button {
+  background-color: #165dff;
+}
+
+.apply-button {
+  background-color: #165dff;
+}
+
+/* 图标行样式 */
+.icons-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.icon-item {
+  width: 24%;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.icon-item:hover {
+  transform: scale(1.05);
+}
+
+.icon-wrapper {
+  position: relative;
+}
+
+.icon-circle {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  font-size: 24px;
+  position: relative;
+}
+
+.icon-label {
+  font-size: 14px;
+  color: #606266;
+}
+
+.badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  background-color: #ff4d4f;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+
+/* 表单行样式 */
+.forms-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-item {
+  width: 24%; /* 留一些间距 */
+}
+
+.data-card {
+  height: 160px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.card-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: rgba(245, 247, 250, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: #409eff;
+}
+
+.card-content {
+  text-align: center;
+}
+
+.data-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #409eff;
+  margin-bottom: 5px;
+}
+
+.data-description {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 列表行样式 */
+.list-row {
+  flex: 1;
+}
+
+.list-header {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+/* 表头加粗 */
+.el-table th {
+  font-weight: bold !important;
+}
+
+/* 悬浮卡片通用样式 */
+.floating-card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.floating-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+}
+</style>