设备详情

packages/mobile/src/views/EquipmentDetails.vue

@@ -1,69 +1,202 @@
 <template>
   <div class="home">
-      <van-nav-bar title="愉快政" fixed left-arrow />
+    <van-nav-bar title="设备管理" fixed left-arrow @click-left="onClickLeft" />
 
     <van-cell-group>
       <van-cell title="当前站点" value="李家坝仓库" />
     </van-cell-group>
 
     <div class="content">
-        <van-grid :gutter="10" :column-num="3" class="grid">
+      <van-cell-group>
-          <van-grid-item icon="setting-o" text="设备管理" to="/EquipManage" />
+        <van-cell
-          <van-grid-item
+          title="设备信息"
-            icon="setting-o"
+          style="font-size: 18px; font-weight: bold; line-height: inherit"
-            text="物资管理"
+        >
-            to="/MaterialManage"
+          <template #value>
-          />
+            <span :class="['status-tag', equipmentInfo.statusClass]">{{
-          <van-grid-item
+              equipmentInfo.status
-            icon="setting-o"
+            }}</span>
-            text="人员管理"
+          </template>
-            to="/StaffManage"
+        </van-cell>
-          />
+        <van-cell :title="'设备名称： ' + equipmentInfo.title"> </van-cell>
-          <van-grid-item
+        <van-cell :title="'设备大类： 小修保养设备'"> </van-cell>
-            icon="setting-o"
+        <van-cell :title="equipmentInfo.label"> </van-cell>
-            text="冰雪灾害"
+        <van-cell :title="'设备编号： 002'"> </van-cell>
-            to="/IceHail"
+        <van-cell :title="'设备型号： E32、PS2600、专业版1949'"> </van-cell>
-          />
+        <van-cell :title="'设备位置： 丰都'"> </van-cell>
-        </van-grid>
+        <van-cell :title="'设备经纬度： '">
+          <template #label>
+            <span>设备经度: 108.41763025<br />设备纬度: 31.89751472</span>
+          </template>
+        </van-cell>
+        <van-cell :title="'设备管理人员 张三四'"> </van-cell>
+        <van-cell :title="'操作员： 李思思'"> </van-cell>
+        <van-cell :title="'购置日期： 2025/10/10'"> </van-cell>
+        <van-cell :title="'购买费用（万元）： 29'"> </van-cell>
+        <van-cell :title="'应急设备： 否'"> </van-cell>
+        <van-cell :title="'纳入市级补助范围： 否'"> </van-cell>
+        <van-cell
+          :title="'辐射范围： G212兰州-龙邦 K1292+460至K1302+250 S544歌石路K44+0至K67+800'"
+        >
+        </van-cell>
+        <van-cell :title="'上传人： 张三三'"> </van-cell>
+        <van-cell :title="'上传时间： 2025/10/10 10:00:00'"> </van-cell>
+        <van-cell :title="'生产商： 富士重工业株式会社群马制作所'"> </van-cell>
+        <van-cell :title="'所属服务站： 李家坝仓库'"> </van-cell>
+        <van-cell :title="'损坏原因： 坏了'"> </van-cell>
+        <van-cell :title="'报废原因： 发动机报废'"> </van-cell>
+      </van-cell-group>
     </div>
 
-      <!-- <van-tabbar v-model="active" route>
+    <van-tabbar>
-        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
+      <van-tabbar-item>
-        <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
+        <template #default>
-      </van-tabbar> -->
+          <van-button type="primary" style="width: 80px; border-radius: 10px">
-    </div>
+            更多
+          </van-button>
         </template>
+      </van-tabbar-item>
+      <van-tabbar-item
+        ><template #default>
+          <van-button type="warning" style="width: 80px; border-radius: 10px" @click="onBrokenPopupOpen">
+            损坏
+          </van-button>
+        </template></van-tabbar-item
+      >
+      <van-tabbar-item
+        ><template #default>
+          <van-button type="primary" style="width: 80px; border-radius: 10px">
+            编辑
+          </van-button>
+        </template></van-tabbar-item
+      >
+      <van-tabbar-item
+        ><template #default>
+          <van-button type="primary" style="width: 80px; border-radius: 10px" @click="onRemarkPopupOpen">
+            备注
+          </van-button>
+        </template></van-tabbar-item
+      >
+    </van-tabbar>
+
+    <van-popup
+      :show="showRemarkPopup"
+      position="bottom"
+      closeable
+      close-on-click-overlay
+      :style="{ height: '20%' }"
+      @close="onRemarkPopupClose"
+    >
+    </van-popup>
+    <van-popup
+      :show="showDeletePopup"
+      position="bottom"
+      closeable
+      close-on-click-overlay
+      :style="{ height: '20%' }"
+      @close="onDeletePopupClose"
+    >
+    </van-popup>
+    <van-popup
+      :show="showBrokenPopup"
+      position="bottom"
+      closeable
+      close-on-click-overlay
+      :style="{ height: '20%' }"
+      @close="onBrokenPopupClose"
+    >
+    </van-popup>
+    <van-popup
+      :show="show报废Popup"
+      position="bottom"
+      closeable
+      close-on-click-overlay
+      :style="{ height: '20%' }"
+      @close="on报废PopupClose"
+    >
+    </van-popup>
+  </div>
+</template>
   
   <script setup>
-  import { ref } from "vue";
+import { ref, onMounted } from "vue";
-  import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
-  import { showToast } from "vant";
+import { showToast } from "vant";
 
-  const router = useRouter();
+const router = useRouter();
-  const active = ref(0);
+const route = useRoute();
 
-  const goToUser = () => {
+const equipmentInfo = ref({
-    router.push("/user");
+  title: "",
-  };
+  label: "",
+  status: "",
+  statusClass: "",
+});
+onMounted(() => {
+  equipmentInfo.value = JSON.parse(decodeURIComponent(route.params.data));
+  console.log("equipmentInfo", equipmentInfo.value);
+});
 
-  console.log('传过来的数据',router.currentRoute.value.params.data)
+const onClickLeft = () => {
-  </script>
+  router.push("/EquipManage");
+};
+
+const show报废Popup = ref(false);
+const on报废PopupClose = () => {
+  show报废Popup.value = false;
+};
+const showBrokenPopup = ref(false);
+const onBrokenPopupOpen = () => {
+  showBrokenPopup.value = true; 
+};
+const onBrokenPopupClose = () => {
+  showBrokenPopup.value = false;
+};
+const showDeletePopup = ref(false);
+const onDeletePopupClose = () => {
+  showDeletePopup.value = false;
+};
+const showRemarkPopup = ref(false);
+const onRemarkPopupOpen = () => {
+  showRemarkPopup.value = true;
+};
+const onRemarkPopupClose = () => {
+  showRemarkPopup.value = false;
+};
+</script>
   
   <style scoped>
-  .home {
+.home {
   padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
-  }
+}
 
-  .content {
+.content {
   padding: 16px;
-  }
+}
 
-  .grid {
+.grid {
   margin-top: 16px;
-  }
+}
 
-  .btn {
+.btn {
   margin-top: 24px;
-  }
+}
-  </style>
+
+.status-tag {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+}
+.status-good {
+  background-color: #07c160;
+}
+.status-warning {
+  background-color: #ff976a;
+}
+.status-danger {
+  background-color: #ee0a24;
+}
+</style>
   

packages/mobile/src/views/EquipmentManagement.vue

@@ -15,26 +15,20 @@
     <div class="content">
       <van-cell-group>
         <van-cell
-          title="高枝锯、绿篱机、油锯"
+          v-for="(item, index) in equipmentList"
+          :key="index"
+          :title="item.title"
           is-link
-          label="设备类型：绿化修剪设备"
+          :label="item.label"
           :to="{
             name: 'EquipDetail',
-            params: { data: '@@@@传过来的数据@@@@' }
+            params: { data: encodeURIComponent(JSON.stringify(item)) },
           }"
         >
           <template #value>
-            <span class="status-tag status-good">完好</span>
+            <span :class="['status-tag', item.statusClass]">{{
-          </template>
+              item.status
-        </van-cell>
+            }}</span>
-        <van-cell title="撒布机三台" is-link label="设备类型：除雪设备">
-          <template #value>
-            <span class="status-tag status-warning">损坏</span>
-          </template>
-        </van-cell>
-        <van-cell title="撒布机三台" is-link label="设备类型：除雪设备">
-          <template #value>
-            <span class="status-tag status-danger">报废</span>
           </template>
         </van-cell>
       </van-cell-group>
@@ -251,6 +245,26 @@ import { showToast } from "vant";
 
 const router = useRouter();
 const searchValue = ref(""); // 搜索框输入值
+const equipmentList = ref([
+  {
+    title: "高枝锯、绿篱机、油锯",
+    label: "设备类型： 绿化修剪设备",
+    status: "完好",
+    statusClass: "status-good",
+  },
+  {
+    title: "撒布机三台",
+    label: "设备类型：除雪设备",
+    status: "损坏",
+    statusClass: "status-warning",
+  },
+  {
+    title: "撒布机三台",
+    label: "设备类型：除雪设备",
+    status: "报废",
+    statusClass: "status-danger",
+  },
+]);
 const showPopup = ref(false); // 控制弹出层显示隐藏
 
 const onClickLeft = () => {