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="equipmentInfo.sbwz" />
    </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',
                `status-` +
                  (equipmentDetailInfo.sbzt === '完好'
                    ? 'good'
                    : equipmentDetailInfo.sbzt === '损坏'
                    ? 'warning'
                    : 'danger'),
              ]">{{
              equipmentDetailInfo.sbzt
            }}</span>
          </template>
        </van-cell>
        <van-cell :title="'设备名称： ' + equipmentDetailInfo.sbmc"> </van-cell>
        <van-cell :title="'设备大类： ' + equipmentDetailInfo.sbdl"> </van-cell>
        <van-cell :title="'设备类型:  ' + equipmentDetailInfo.sblx"> </van-cell>
        <van-cell :title="'设备编号： ' + equipmentDetailInfo.sbbh"> </van-cell>
        <van-cell :title="'设备型号： ' + equipmentDetailInfo.sbxh"> </van-cell>
        <van-cell :title="'设备位置： ' + equipmentDetailInfo.sbwz"> </van-cell>
        <van-cell :title="'设备经纬度： '">
          <template #label>
            <span>设备经度: {{ equipmentDetailInfo.jd }}<br />设备纬度: {{ equipmentDetailInfo.wd }}</span>
          </template>
        </van-cell>
        <van-cell :title="'设备管理人员：  '+ equipmentDetailInfo.glry"> </van-cell>
        <van-cell :title="'操作员：       '+ equipmentDetailInfo.czy"> </van-cell>
        <van-cell :title="'购置日期：     '+ equipmentDetailInfo.gzrq"> </van-cell>
        <van-cell :title="'购买费用（万元）： '+ equipmentDetailInfo.gmfy"> </van-cell>
        <van-cell :title="'应急设备： '+ equipmentDetailInfo.sfyjsb"> </van-cell>
        <van-cell :title="'纳入市级补助范围： ' + equipmentDetailInfo.sfnrsjbz"> </van-cell>
        <van-cell
          :title="'辐射范围： '+ equipmentDetailInfo.fsfw"
        >
        </van-cell>
        <van-cell :title="'所属服务站： '+ equipmentDetailInfo.sbwz"> </van-cell>
      </van-cell-group>
    </div>

    <van-tabbar>
      <van-tabbar-item>
        <van-popover
          placement="top-start"
          :show="showPopover"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-button type="primary" style="width: 80px; border-radius: 10px">
              更多
            </van-button>
          </template>
        </van-popover>
      </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"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 20px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          确认删除？
        </h1>

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="onDeletePopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="onDeleteConfirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </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: '30%' }"
      @close="on报废PopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 12px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          报废
        </h1>

        <van-field
          v-model="scrapReason"
          placeholder="请填写原因"
          style="
            width: 100%;
            margin-bottom: 16px;
            border-radius: 8px;
            background: #f7f8fa;
          "
        />

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="on报废PopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="on报废Confirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";
import { request } from "../../../shared/utils/request";

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

const showPopover = ref(false);
const actions = [{ text: "删除" }, { text: "报废" }];
const onSelect = (action) => {
  if (action.text === "删除") {
    showDeletePopup.value = true;
  }
  if (action.text === "报废") {
    show报废Popup.value = true;
  }
};
const equipmentInfo = ref({});
const equipmentDetailInfo = ref({});

// 获取设备详情
const getEquipmentDetailInfo = async () => {
    try {
      const res = await request({
        url: `/api/yjsb/${equipmentInfo.value.rid}`,
        method: "GET",
      });
      if (res.code && res.code === '00000') {
        equipmentDetailInfo.value = res.data;
        console.log('equipmentDetailInfo',toRaw(equipmentDetailInfo.value));
      }
      else{
        throw new Error(res.data.message);
      }
    } catch (error) {
      showToast({ type: "error", message: error.message });
    }
};

onMounted(() => {
  equipmentInfo.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("equipmentInfo", toRaw(equipmentInfo.value));
  getEquipmentDetailInfo();
});

const onClickLeft = () => {
  router.push({
    name: "EquipManage",
    params: { data: encodeURIComponent(JSON.stringify(equipmentInfo.value)) },
  });
};

const show报废Popup = ref(false);
const scrapReason = ref(''); // 报废原因
const on报废PopupClose = () => {
  show报废Popup.value = false;
  scrapReason.value = '';
};
const on报废Confirm = () => {
  show报废Popup.value = false;
  scrapReason.value = '';
};

const showBrokenPopup = ref(false);
const onBrokenPopupOpen = () => {
  showBrokenPopup.value = true;
};
const onBrokenPopupClose = () => {
  showBrokenPopup.value = false;
};

const showDeletePopup = ref(false);
const onDeletePopupClose = () => {
  showDeletePopup.value = false;
};
const onDeleteConfirm = () => {
  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>