280 lines
8.1 KiB
Vue
280 lines
8.1 KiB
Vue
<!-- 模式切换页面 -->
|
||
<template>
|
||
<div class="main_container box">
|
||
<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)">
|
||
{{ item.activated ? '进入检测' : '待激活' }}
|
||
</el-button>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<!-- versionRegisterDialog -->
|
||
<VersionDialog ref="versionRegisterRef"></VersionDialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { useAuthStore } from '@/stores/modules/auth'
|
||
import { useAppSceneStore, useModeStore } from '@/stores/modules/mode' // 引入模式 store
|
||
import { getCurrentScene } from '@/api/user/login'
|
||
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
|
||
import { useTabsStore } from '@/stores/modules/tabs'
|
||
import VersionDialog from '@/views/system/versionRegister/index.vue'
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const authStore = useAuthStore()
|
||
const modeStore = useModeStore() // 使用模式 store
|
||
const AppSceneStore = useAppSceneStore()
|
||
const activateInfo = authStore.activateInfo
|
||
const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
|
||
const tabsStore = useTabsStore()
|
||
const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null)
|
||
const modeList = [
|
||
{
|
||
name: '模拟式模块',
|
||
code: '模拟式',
|
||
subName: '未启用模拟式检测计划',
|
||
img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
|
||
activated: isActivateOpen === 'true' ? activateInfo.simulate.permanently === 1 : true
|
||
},
|
||
{
|
||
name: '数字式模块',
|
||
code: '数字式',
|
||
subName: '启用数字检测计划',
|
||
img: new URL('/src/assets/images/dashboard/2.svg', import.meta.url).href,
|
||
activated: isActivateOpen === 'true' ? activateInfo.digital.permanently === 1 : true
|
||
},
|
||
{
|
||
name: '比对式模块',
|
||
code: '比对式',
|
||
subName: '启用比对式检测计划',
|
||
img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
|
||
activated: isActivateOpen === 'true' ? activateInfo.contrast.permanently === 1 : true
|
||
}
|
||
]
|
||
const handelOpen = async (item: any) => {
|
||
if (!item.activated) {
|
||
// 打开版本激活弹窗
|
||
versionRegisterRef.value?.openDialog()
|
||
return
|
||
}
|
||
modeStore.setCurrentMode(item.code) // 将模式code存入 store
|
||
const { data: scene } = await getCurrentScene() // 获取当前场景
|
||
AppSceneStore.setCurrentMode(scene + '') //0：省级平台，1：设备出厂，2：研发自测
|
||
await authStore.setShowMenu()
|
||
await tabsStore.closeMultipleTab()
|
||
await initDynamicRouter()
|
||
return
|
||
}
|
||
onMounted(() => {})
|
||
</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>
|