设备详情
This commit is contained in:
parent
ab7570fa63
commit
34c6854359
@ -1,69 +1,202 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<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-cell-group>
|
<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>
|
</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>
|
</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>
|
<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>
|
<style scoped>
|
||||||
.home {
|
.home {
|
||||||
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin-top: 24px;
|
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>
|
||||||
|
|
||||||
@ -15,26 +15,20 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-cell
|
<van-cell
|
||||||
title="高枝锯、绿篱机、油锯"
|
v-for="(item, index) in equipmentList"
|
||||||
|
:key="index"
|
||||||
|
:title="item.title"
|
||||||
is-link
|
is-link
|
||||||
label="设备类型：绿化修剪设备"
|
:label="item.label"
|
||||||
:to="{
|
:to="{
|
||||||
name: 'EquipDetail',
|
name: 'EquipDetail',
|
||||||
params: { data: '@@@@传过来的数据@@@@' }
|
params: { data: encodeURIComponent(JSON.stringify(item)) },
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template #value>
|
<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>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
@ -251,6 +245,26 @@ import { showToast } from "vant";
|
|||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchValue = ref(""); // 搜索框输入值
|
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 showPopup = ref(false); // 控制弹出层显示隐藏
|
||||||
|
|
||||||
const onClickLeft = () => {
|
const onClickLeft = () => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user