309 lines
7.3 KiB
Vue
309 lines
7.3 KiB
Vue
<!-- 模式切换页面 -->
|
||
<template>
|
||
<div class="main_container box">
|
||
<!-- :style="{
|
||
height: authStore?.showMenuFlag
|
||
? 'calc(100vh - 165px)'
|
||
: 'calc(100vh - 125px)',
|
||
}" -->
|
||
|
||
<el-carousel :interval="5000" type="card" style="width: 60%;margin-left: 20%;height: 70%;">
|
||
<el-carousel-item class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
|
||
|
||
<div class="mode_top">
|
||
<div class="mode_name">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mode_img">
|
||
<img :src="item.img" />
|
||
</div>
|
||
<div class="test_button">
|
||
<el-button size="large" type="primary" @click="handelOpen(item)"
|
||
:disabled="item.isActive == false">进入检测</el-button>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
|
||
|
||
|
||
<!-- <div class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
|
||
<div class="mode_top">
|
||
<div class="mode_name">
|
||
<p>
|
||
{{ item.name }}
|
||
</p>
|
||
</div>
|
||
<div class="test_button">
|
||
<el-button size="small" type="primary" @click="handelOpen(item)"
|
||
:disabled="item.isActive == false">进入检测</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="mode_img">
|
||
<img :src="item.img" />
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { useRouter } from "vue-router";
|
||
import { ElMessage } from "element-plus";
|
||
import { useAuthStore } from "@/stores/modules/auth";
|
||
import { useModeStore, useAppSceneStore } from "@/stores/modules/mode"; // 引入模式 store
|
||
import { ref } from "vue";
|
||
import {getCurrentScene} from "@/api/user/login";
|
||
const authStore = useAuthStore();
|
||
const modeStore = useModeStore(); // 使用模式 store
|
||
const AppSceneStore = useAppSceneStore();
|
||
const activeIndex = ref("1-1");
|
||
const router = useRouter();
|
||
const modeList = [
|
||
{
|
||
name: "模拟式模块",
|
||
code: "模拟式",
|
||
subName: "未启用模拟式检测计划",
|
||
img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
|
||
isActive: true,
|
||
},
|
||
{
|
||
name: "数字式模块",
|
||
code: "数字式",
|
||
subName: "启用数字检测计划",
|
||
img: new URL('/src/assets/images/dashboard/2.svg', import.meta.url).href,
|
||
isActive: true,
|
||
},
|
||
{
|
||
name: "比对式模块",
|
||
code: "比对式",
|
||
subName: "启用比对式检测计划",
|
||
img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
|
||
isActive: false,
|
||
},
|
||
];
|
||
const handelOpen = async (item: any) => {
|
||
modeStore.setCurrentMode(item.code); // 将模式code存入 store
|
||
const {data:scene} = await getCurrentScene(); // 获取当前场景
|
||
|
||
// AppSceneStore.setCurrentMode(scene+'');//0：省级平台，1：设备出厂，2：研发自测
|
||
AppSceneStore.setCurrentMode(scene+'');//0：省级平台，1：设备出厂，2：研发自测
|
||
await authStore.setShowMenu();
|
||
return;
|
||
// if (isActive) {
|
||
// router.push({ path: "/static" });
|
||
// } else {
|
||
// ElMessage({
|
||
// message: "当前模式未配置",
|
||
// type: "warning",
|
||
// });
|
||
// }
|
||
};
|
||
const handleSelect = (key: string, keyPath: string[]) => {
|
||
console.log(key, keyPath);
|
||
};
|
||
onMounted(() => {
|
||
console.log();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
background: #ededed;
|
||
// background-image: url("/src/assets/images/dashboard/DT.jpg");
|
||
// /* 背景图垂直、水平均居中 */
|
||
// // background-position: center center;
|
||
// /* 背景图不平铺 */
|
||
// background-repeat: no-repeat;
|
||
// /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
|
||
// background-attachment: fixed;
|
||
// /* 让背景图基于容器大小伸缩 */
|
||
// background-size: cover;
|
||
|
||
|
||
}
|
||
|
||
.main_container {
|
||
|
||
width: 100%;
|
||
// height: calc(100vh - 165px);
|
||
height: 100%;
|
||
// overflow-y: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
|
||
.mode {
|
||
|
||
height: 99.5% !important;
|
||
border: 1px solid #eee;
|
||
border-radius: 6px;
|
||
background: linear-gradient(180deg,
|
||
rgba(0, 153, 255, 1) 0%,
|
||
rgba(0, 153, 255, 1) 0%,
|
||
rgba(0, 102, 255, 1) 65%,
|
||
rgba(0, 51, 255, 1) 100%,
|
||
rgba(0, 51, 255, 1) 100%);
|
||
|
||
position: absolute;
|
||
|
||
|
||
// padding: 40px 0;
|
||
.mode_top {
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #008aff;
|
||
border-radius: 6px 6px 0 0;
|
||
|
||
.mode_name {
|
||
width: 100%;
|
||
height: 40px;
|
||
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 20px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
padding-left: 10px;
|
||
// margin-top: 20px;
|
||
|
||
.mode_subName {
|
||
font-family: "微软雅黑", sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
padding: 5px 0 0 10px;
|
||
// margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.test_button {
|
||
display: flex;
|
||
text-align: center;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 5px;
|
||
}
|
||
}
|
||
|
||
.mode_img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// padding: 30px 0 50px;
|
||
margin-top: 100px;
|
||
// margin-bottom: 100px;
|
||
|
||
img:nth-child(1) {
|
||
width: 60%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
img:nth-child(2) {
|
||
width: 70%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
img:nth-child(3) {
|
||
width: 60%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.mode_test {
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
|
||
|
||
.test_button:hover {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.test_button {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 5px;
|
||
font-family: "微软雅黑", sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
.mode:nth-child(3n + 3) {
|
||
background: linear-gradient(180deg,
|
||
rgba(0, 153, 255, 1) 0%,
|
||
rgba(0, 153, 255, 1) 0%,
|
||
rgba(0, 102, 255, 1) 39%,
|
||
rgba(102, 51, 204, 1) 100%,
|
||
rgba(102, 51, 204, 1) 100%);
|
||
|
||
}
|
||
|
||
.mode_off {
|
||
|
||
.mode_name,
|
||
.mode_subName,
|
||
.test_button {
|
||
color: #fff !important;
|
||
|
||
}
|
||
|
||
.test_button:hover {
|
||
// background: rgba(0, 0, 0, 0.2) !important;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-sub-menu__title) {
|
||
border-bottom: 0 !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
// .modeBG {
|
||
// &::before {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// background-color: #70707080;
|
||
// ;
|
||
// }
|
||
|
||
|
||
// }
|
||
:deep(.el-carousel__container) {
|
||
height: 100%;
|
||
}
|
||
|
||
:deep(.el-carousel__item) {
|
||
position: relative;
|
||
}
|
||
</style>
|