351 lines
9.4 KiB
Vue
351 lines
9.4 KiB
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>
|
||
|