bxztApp/packages/mobile/src/views/EquipmentDetails.vue

<template>
  <div class="home">
    <van-nav-bar title="设备管理" fixed left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-cell title="当前站点" value="李家坝仓库" />
    </van-cell-group>

    <div class="content">
      <van-cell-group>
        <van-cell
          title="设备信息"
          style="font-size: 18px; font-weight: bold; line-height: inherit"
        >
          <template #value>
            <span :class="['status-tag', equipmentInfo.statusClass]">{{
              equipmentInfo.status
            }}</span>
          </template>
        </van-cell>
        <van-cell :title="'设备名称： ' + equipmentInfo.title"> </van-cell>
        <van-cell :title="'设备大类： 小修保养设备'"> </van-cell>
        <van-cell :title="equipmentInfo.label"> </van-cell>
        <van-cell :title="'设备编号： 002'"> </van-cell>
        <van-cell :title="'设备型号： E32、PS2600、专业版1949'"> </van-cell>
        <van-cell :title="'设备位置： 丰都'"> </van-cell>
        <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>
      <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="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, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

const router = useRouter();
const route = useRoute();

const equipmentInfo = ref({
  title: "",
  label: "",
  status: "",
  statusClass: "",
});
onMounted(() => {
  equipmentInfo.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("equipmentInfo", equipmentInfo.value);
});

const onClickLeft = () => {
  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 {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

.content {
  padding: 16px;
}

.grid {
  margin-top: 16px;
}

.btn {
  margin-top: 24px;
}

.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>