feat 项目页样式

2026-09-11 09:27:10 +08:00
parent 9d39a48117
commit aba6d4c09e
7 changed files with 376 additions and 63 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ node_modules
 dist
 *.local
 .opencode
+.omo

 # Editor directories and files
 .idea
@@ -20,7 +21,3 @@ dist
 *.njsproj
 *.sln
 *.sw?
-
-# unh
-pages.json
-manifest.json
--- a/README.md
+++ b/README.md
@@ -93,4 +93,3 @@ Road_roller/
 | `src/utils` | 工具函数，自动导入 |

 ### 功能模块
-标题字体是22px
--- a/src/components/project/item.vue
+++ b/src/components/project/item.vue
@@ -1,39 +1,96 @@
 <script setup lang="ts">
 defineProps<{
  projectName: string
-  status: string
-  tags: string[]
-  time: string
-  trigger: string
+  stakeRange: string
+  status: number
+  workTime: string
+  compactArea: string
+  rollerCount: string
 }>()
+
+function getStatusText(status: number) {
+  const map: Record<number, string> = {
+    0: '作业中',
+    1: '暂停中',
+    2: '已结束',
+  }
+  return map[status] || '未知'
+}
+
+function getStatusColor(status: number) {
+  const map: Record<number, string> = {
+    0: '#52c41a',
+    1: '#faad14',
+    2: '#999999',
+  }
+  return map[status] || '#999999'
+}
 </script>

 <template>
  <view class="project-item">
+    <!-- 头部：图标 + 项目名 + 状态 -->
    <view class="item-header">
+      <view class="header-left">
+        <image class="project-icon" src="/static/machine.png" mode="aspectFit" />
+        <view class="header-info">
          <text class="project-name">
            {{ projectName }}
          </text>
-      <text class="status">
-        {{ status }}
+          <text class="stake-range">
+            {{ stakeRange }}
          </text>
        </view>
-
-    <view class="tags">
-      <view v-for="(tag, index) in tags" :key="index" class="tag">
-        <text class="tag-text">
-          {{ tag }}
+      </view>
+      <view class="status-badge">
+        <view class="status-dot" :style="{ backgroundColor: getStatusColor(status) }" />
+        <text class="status-text" :style="{ color: getStatusColor(status) }">
+          {{ getStatusText(status) }}
        </text>
      </view>
    </view>

-    <text class="time">
-      {{ time }}
+    <!-- 数据统计 -->
+    <view class="stats-row">
+      <view class="stat-item">
+        <text class="stat-label">
+          作业时长
        </text>
-    <text class="trigger">
-      {{ trigger }}
+        <text class="stat-value">
+          {{ workTime }}
        </text>
      </view>
+      <view class="stat-item">
+        <text class="stat-label">
+          压实面积
+        </text>
+        <text class="stat-value">
+          {{ compactArea }}
+        </text>
+      </view>
+      <view class="stat-item">
+        <text class="stat-label">
+          碾压遍数
+        </text>
+        <text class="stat-value">
+          {{ rollerCount }}
+        </text>
+      </view>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view v-if="status === 0 || status === 1" class="btn-row">
+      <wd-button size="large" type="primary" round>
+        开始项目
+      </wd-button>
+      <wd-button size="large" type="warning" round>
+        暂停项目
+      </wd-button>
+      <wd-button size="large" type="danger" round>
+        结束项目
+      </wd-button>
+    </view>
+  </view>
 </template>

 <style scoped>
@@ -47,49 +104,85 @@ defineProps<{
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.project-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.header-info {
+  display: flex;
+  flex-direction: column;
 }

 .project-name {
-  font-size: 22px;
+  font-size: 40rpx;
  font-weight: bold;
  color: #333;
 }

-.status {
+.stake-range {
+  font-size: 32rpx;
+  color: #999;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #52c41a;
+}
+
+.status-text {
  font-size: 14px;
-  padding: 4px 12px;
-  border-radius: 12px;
-  background-color: #f6ffed;
  color: #52c41a;
 }

-.tags {
+.stats-row {
  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
+  justify-content: space-around;
+  padding: 16px 0;
+  border-top: 1px solid #f5f5f5;
+  border-bottom: 1px solid #f5f5f5;
+  margin-bottom: 16px;
 }

-.tag {
-  background-color: #fff1f0;
-  border-radius: 8px;
-  padding: 4px 12px;
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

-.tag-text {
-  font-size: 14px;
-  color: #ff4d4f;
+.stat-label {
+  font-size: 40rpx;
+  color: #999;
+  margin-bottom: 4px;
 }

-.time {
-  font-size: 18px;
-  color: #666;
-  display: block;
-  margin-bottom: 8px;
+.stat-value {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
 }

-.trigger {
-  font-size: 18px;
-  color: #666;
+.btn-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 60rpx;
 }
 </style>
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -0,0 +1,76 @@
+{
+  "name": "Road_roller",
+  "appid": "__UNI__BA80270",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "modules": {
+      "Bluetooth": {},
+      "SQLite": {}
+    },
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {}
+    },
+    "screenOrientation": [
+      "landscape-primary"
+    ]
+  },
+  "quickapp": {},
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true,
+    "darkmode": true,
+    "themeLocation": "theme.json"
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3",
+  "h5": {
+    "darkmode": true,
+    "themeLocation": "theme.json"
+  }
+}
--- a/src/pages.json
+++ b/src/pages.json
@@ -0,0 +1,145 @@
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^wd-(.*)": "@wot-ui/ui/components/wd-$1/wd-$1.vue",
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
+  "globalStyle": {
+    "backgroundColor": "@bgColor",
+    "backgroundColorBottom": "@bgColorBottom",
+    "backgroundColorTop": "@bgColorTop",
+    "backgroundTextStyle": "@bgTxtStyle",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Road-Roller"
+  },
+  "pages": [
+    // GENERATED BY UNI-PAGES, PLATFORM: H5 || APP
+    {
+      "path": "pages/Ahome/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/bluetooth/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/heatmap/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/message/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/project/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/report/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/rtk/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationBarTitleText": "RTK轨迹"
+      }
+    },
+    {
+      "path": "pages/settings/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/warning/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/work/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/report/detail/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/warning/detail/index",
+      "type": "page",
+      "layout": false,
+      "style": {
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "subPackages": [],
+  "tabBar": {
+    "backgroundColor": "@tabBgColor",
+    "borderStyle": "@tabBorderStyle",
+    "color": "@tabFontColor",
+    "selectedColor": "@tabSelectedColor",
+    "list": [
+      // GENERATED BY UNI-PAGES, PLATFORM: H5 || APP
+      {
+        "pagePath": "pages/Ahome/index",
+        "text": "首页",
+        "iconPath": "static/home.png",
+        "selectedIconPath": "static/home1.png"
+      },
+      {
+        "pagePath": "pages/work/index",
+        "text": "工作",
+        "iconPath": "static/work.png",
+        "selectedIconPath": "static/work1.png"
+      },
+      {
+        "pagePath": "pages/report/index",
+        "text": "报告",
+        "iconPath": "static/report.png",
+        "selectedIconPath": "static/report1.png"
+      }
+    ]
+  }
+}
--- a/src/pages/project/index.vue
+++ b/src/pages/project/index.vue
@@ -13,17 +13,19 @@ const tabs = ['全部', '进行中', '已结束']
 const projects = [
  {
    projectName: '徐工XS65H #01',
-    status: '进行中',
-    tags: ['定位异常', '警告'],
-    time: '14:10:04·已持续5分30秒',
-    trigger: '触发阈值：RTK信号弱，精度下降',
+    stakeRange: 'K1+200-K1+800',
+    status: 0,
+    workTime: '8h',
+    compactArea: '28.5m²',
+    rollerCount: '10遍',
  },
  {
-    projectName: '徐工XS65H #01',
-    status: '进行中',
-    tags: ['定位异常', '警告'],
-    time: '14:10:04·已持续5分30秒',
-    trigger: '触发阈值：RTK信号弱，精度下降',
+    projectName: '徐工XS65H #02',
+    stakeRange: 'K2+100-K2+600',
+    status: 2,
+    workTime: '5h',
+    compactArea: '15.2m²',
+    rollerCount: '6遍',
  },
 ]

@@ -65,10 +67,11 @@ function handleCreate() {
          v-for="(item, index) in projects"
          :key="index"
          :project-name="item.projectName"
+          :stake-range="item.stakeRange"
          :status="item.status"
-          :tags="item.tags"
-          :time="item.time"
-          :trigger="item.trigger"
+          :work-time="item.workTime"
+          :compact-area="item.compactArea"
+          :roller-count="item.rollerCount"
        />
      </view>
    </view>
--- a/src/static/machine.png
+++ b/src/static/machine.png