设备详情
This commit is contained in:
parent
ab7570fa63
commit
34c6854359
@ -1,69 +1,202 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<van-nav-bar title="愉快政" fixed left-arrow />
|
||||
<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="当前站点" value="李家坝仓库" />
|
||||
<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 class="content">
|
||||
<van-grid :gutter="10" :column-num="3" class="grid">
|
||||
<van-grid-item icon="setting-o" text="设备管理" to="/EquipManage" />
|
||||
<van-grid-item
|
||||
icon="setting-o"
|
||||
text="物资管理"
|
||||
to="/MaterialManage"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="setting-o"
|
||||
text="人员管理"
|
||||
to="/StaffManage"
|
||||
/>
|
||||
<van-grid-item
|
||||
icon="setting-o"
|
||||
text="冰雪灾害"
|
||||
to="/IceHail"
|
||||
/>
|
||||
</van-grid>
|
||||
</div>
|
||||
|
||||
<!-- <van-tabbar v-model="active" route>
|
||||
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
|
||||
<van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
|
||||
</van-tabbar> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { showToast } from "vant";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { showToast } from "vant";
|
||||
|
||||
const router = useRouter();
|
||||
const active = ref(0);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const goToUser = () => {
|
||||
router.push("/user");
|
||||
};
|
||||
const equipmentInfo = ref({
|
||||
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)
|
||||
</script>
|
||||
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); /* 自动匹配导航栏高度 */
|
||||
}
|
||||
.home {
|
||||
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.grid {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
.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>
|
||||
|
||||
@ -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>
|
||||
</template>
|
||||
</van-cell>
|
||||
<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>
|
||||
<span :class="['status-tag', item.statusClass]">{{
|
||||
item.status
|
||||
}}</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 = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user