<template>
|
<div
|
style="
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
<div v-if="isMobile" class="mian">
|
<div class="main_t">
|
<div
|
class="item"
|
style="background-color: #9f58d5"
|
@click="pageJump('/PickAndDrop', '接送车')"
|
>
|
<span>接送车</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon1.png" alt="" />
|
</div>
|
</div>
|
|
<div
|
class="item"
|
style="background-color: #2200de"
|
@click="pageJump('/Enteroverhaul', '进入检修')"
|
>
|
<span>进入检修</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon6.png" alt="" />
|
</div>
|
</div>
|
<div
|
class="item"
|
style="background-color: #00bbde"
|
@click="pageJump('/Parametersettings', '参数设置')"
|
>
|
<span>参数设置</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon3.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="main_b">
|
<div
|
class="item"
|
style="background-color: #9ccc65"
|
@click="pageJump('/Datalogging', '数据记录')"
|
>
|
<span>数据记录</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon4.png" alt="" />
|
</div>
|
</div>
|
<div
|
class="item"
|
style="background-color: #669cff"
|
@click="pageJump('/Usermanagement', '用户管理')"
|
>
|
<span>用户管理</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon5.png" alt="" />
|
</div>
|
</div>
|
|
<div
|
class="item"
|
style="background-color: #ffa726"
|
@click="pageJump('/AlarmReset', '报警复位')"
|
>
|
<span>报警复位</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon2.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="mian_mobile">
|
<div class="main_t">
|
<div
|
class="item"
|
style="background-color: #9f58d5"
|
@click="pageJump('/PickAndDrop', '接送车')"
|
>
|
<span>接送车</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon1.png" alt="" />
|
</div>
|
</div>
|
<div
|
class="item"
|
style="background-color: #2200de"
|
@click="pageJump('/Enteroverhaul', '进入检修')"
|
>
|
<span>进入检修</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon6.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="main_b" style="margin-top: 9rem; margin-bottom: 9rem">
|
<div
|
class="item"
|
style="background-color: #9ccc65"
|
@click="pageJump('/Datalogging', '数据记录')"
|
>
|
<span>数据记录</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon4.png" alt="" />
|
</div>
|
</div>
|
<div
|
class="item"
|
style="background-color: #00bbde"
|
@click="pageJump('/Parametersettings', '参数设置')"
|
>
|
<span>参数设置</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon3.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="main_c">
|
<div
|
class="item"
|
style="background-color: #669cff"
|
@click="pageJump('/Usermanagement', '用户管理')"
|
>
|
<span>用户管理</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon5.png" alt="" />
|
</div>
|
</div>
|
|
<div
|
class="item"
|
style="background-color: #ffa726"
|
@click="pageJump('/AlarmReset', '报警复位')"
|
>
|
<span>报警复位</span>
|
<div class="count">
|
<img src="@/assets/index/icon/icon2.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import { GetRoleInfoApi } from "@/api/role.js";
|
const router = useRouter();
|
const isMobile = ref(false);
|
const userInfo = ref(null);
|
const pageData = ref([]);
|
const pageList = ref([]);
|
//获取页面
|
const getPage = async (val) => {
|
pageList.value = [];
|
let res = await GetRoleInfoApi({
|
roleId: val.roleId,
|
});
|
pageData.value = res.data.filter((item) => {
|
return item.pid == 0;
|
});
|
pageData.value.forEach((item) => {
|
pageList.value.push(item.text);
|
});
|
};
|
// 页面跳转
|
const pageJump = (path, val) => {
|
// if (!pageList.value.includes(val) && userInfo.value.roleId != 1) {
|
// ElMessage({
|
// message: "您没有权限访问此页面",
|
// type: "warning",
|
// duration: 2000,
|
// });
|
// return;
|
// }
|
router.push(path);
|
};
|
|
onMounted(() => {
|
// 获取用户信息
|
userInfo.value = JSON.parse(localStorage.getItem("user"));
|
// if (userInfo.value.roleId != 1) {
|
// getPage(userInfo.value);
|
// }
|
|
// 监听窗口大小变化
|
window.addEventListener("resize", () => {
|
nextTick(() => {
|
if (window.innerWidth > 1080) {
|
isMobile.value = true;
|
} else {
|
isMobile.value = false;
|
}
|
});
|
});
|
// 初始化时判断窗口大小
|
if (window.innerWidth > 1080) {
|
// 如果窗口宽度小于1080px，执行相应的操作
|
isMobile.value = true;
|
} else {
|
// 如果窗口宽度大于等于1080px，执行相应的操作
|
isMobile.value = false;
|
}
|
});
|
|
onUnmounted(() => {});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
.mian {
|
width: 80rem;
|
display: flex;
|
flex-direction: column;
|
|
.main_t {
|
display: flex;
|
justify-content: space-between;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 25rem;
|
height: 18.75rem;
|
span {
|
display: flex;
|
text-align: left;
|
font-size: 1.88rem;
|
color: rgba(255, 255, 255, 1);
|
font-weight: bold;
|
padding-left: 2rem;
|
padding-top: 0.78rem;
|
box-sizing: border-box;
|
}
|
.count {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
img {
|
width: 6.25rem;
|
height: 6.25rem;
|
}
|
}
|
}
|
}
|
.main_b {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 1.56rem;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 25rem;
|
height: 18.75rem;
|
span {
|
display: flex;
|
text-align: left;
|
font-size: 1.88rem;
|
color: rgba(255, 255, 255, 1);
|
font-weight: bold;
|
padding-left: 2rem;
|
padding-top: 0.78rem;
|
box-sizing: border-box;
|
}
|
.count {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
img {
|
width: 6.25rem;
|
height: 6.25rem;
|
}
|
}
|
}
|
}
|
}
|
.mian_mobile {
|
width: 80rem;
|
display: flex;
|
flex-direction: column;
|
|
.main_t {
|
display: flex;
|
justify-content: space-between;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 35rem;
|
height: 25rem;
|
span {
|
display: flex;
|
text-align: left;
|
font-size: 1.88rem;
|
color: rgba(255, 255, 255, 1);
|
font-weight: bold;
|
padding-left: 2rem;
|
padding-top: 0.78rem;
|
box-sizing: border-box;
|
}
|
.count {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
img {
|
width: 6.25rem;
|
height: 6.25rem;
|
}
|
}
|
}
|
}
|
.main_b {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 1.56rem;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 35rem;
|
height: 25rem;
|
span {
|
display: flex;
|
text-align: left;
|
font-size: 1.88rem;
|
color: rgba(255, 255, 255, 1);
|
font-weight: bold;
|
padding-left: 2rem;
|
padding-top: 0.78rem;
|
box-sizing: border-box;
|
}
|
.count {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
img {
|
width: 6.25rem;
|
height: 6.25rem;
|
}
|
}
|
}
|
}
|
.main_c {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 1.56rem;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 35rem;
|
height: 25rem;
|
span {
|
display: flex;
|
text-align: left;
|
font-size: 1.88rem;
|
color: rgba(255, 255, 255, 1);
|
font-weight: bold;
|
padding-left: 2rem;
|
padding-top: 0.78rem;
|
box-sizing: border-box;
|
}
|
.count {
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
img {
|
width: 6.25rem;
|
height: 6.25rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
