ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: 模块激活流程

Browse Source
This commit is contained in:
贾同学
2025-10-14 19:00:47 +08:00
parent 7afccb58fd
commit 55ff45f9a9
16 changed files with 976 additions and 811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/views/home/index.vue
View File

@@ -1,96 +1,21 @@
<template>
<!-- style=" height: calc(100vh - 120px) !important;" -->
<div class="homeView">
<model v-if="!authStore.showMenuFlag"></model>
<dashboard v-if="authStore.showMenuFlag"></dashboard>
</div>
<!-- <div class="main">
<div class="main_container">
<div class="mode" 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"
dictType="primary"
@click="handelOpen(item.isActive)"
>进入检测</el-button
>
</div>
</div>
<div class="mode_img">
<img :src="item.img" />
</div>
</div>
<div class="homeView">
<model v-if="!authStore.showMenuFlag"></model>
<dashboard v-if="authStore.showMenuFlag"></dashboard>
</div>
</div> -->
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useAuthStore } from "@/stores/modules/auth";
import { useAuthStore } from '@/stores/modules/auth'
import model from "./tabs/model.vue";
import dashboard from "./tabs/dashboard.vue";
import { onMounted, ref } from "vue";
// defineOptions({
// name: 'home'
// })
const authStore = useAuthStore();
import model from './tabs/model.vue'
import dashboard from './tabs/dashboard.vue'
const activeIndex = ref("1-1");
const router = useRouter();
const modeList = [
{
name: "模拟式模式",
code:"模拟式",
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: false,
},
{
name: "比对式模式",
code:"比对式",
subName: "启用比对式检测计划",
img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
isActive: false,
},
];
const handelOpen = async (isActive: any) => {
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(111);
});
const authStore = useAuthStore()
</script>
<style lang="scss" scoped>
.homeView{
width: 100%;
// height: calc(100vh - 120px);
height: 100%;
.homeView {
width: 100%;
// height: calc(100vh - 120px);
height: 100%;
}
</style>

485
frontend/src/views/home/tabs/model.vue
View File

@@ -1,288 +1,264 @@
<!-- 模式切换页面 -->
<template>
<div class="main_container box">
<!-- :style="{
height: authStore?.showMenuFlag
? 'calc(100vh - 165px)'
: 'calc(100vh - 125px)',
}" -->
<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>
<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>
<div class="mode_img">
<img :src="item.img" />
</div>
<div class="test_button">
<el-button size="large" type="primary" @click="handelOpen(item)" :disabled="!item.activated">
进入检测
</el-button>
</div>
</el-carousel-item>
</el-carousel>
</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";
import { useAuthStore } from '@/stores/modules/auth'
import { useAppSceneStore, useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { getCurrentScene } from '@/api/user/login'
const authStore = useAuthStore()
const modeStore = useModeStore() // 使用模式 store
const AppSceneStore = useAppSceneStore()
const activateInfo = authStore.activateInfo
const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
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: true,
},
];
{
name: '模拟式模块',
code: '模拟式',
subName: '未启用模拟式检测计划',
img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
activated:
isActivateOpen === 'true'
? activateInfo.simulate.apply === 1 && 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.apply === 1 && 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.apply === 1 && activateInfo.contrast.permanently === 1
: true
}
]
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();
await authStore.getAuthMenuList();
return;
// if (isActive) {
// router.push({ path: "/static" });
// } else {
// ElMessage({
// message: "当前模式未配置",
// type: "warning",
// });
// }
};
if (!item.activated) {
ElMessage.warning(`${item.name}未激活`)
return
}
modeStore.setCurrentMode(item.code) // 将模式code存入 store
const { data: scene } = await getCurrentScene() // 获取当前场景
AppSceneStore.setCurrentMode(scene + '') //0：省级平台，1：设备出厂，2：研发自测
await authStore.setShowMenu()
await authStore.getAuthMenuList()
return
}
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
};
console.log(key, keyPath)
}
onMounted(() => {
console.log();
});
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;
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;
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%
);
.mode {
position: absolute;
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%);
// 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;
position: absolute;
.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;
}
}
// 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;
.test_button {
display: flex;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5px;
}
}
.mode_name {
width: 100%;
height: 40px;
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
font-weight: 700;
.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;
font-size: 20px;
color: #ffffff;
color: #fff;
text-align: center;
line-height: 40px;
padding-left: 10px;
// margin-top: 20px;
cursor: pointer;
}
.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;
.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 {
display: flex;
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5px;
}
.test_button:hover {
// background: rgba(0, 0, 0, 0.2) !important;
cursor: pointer;
}
}
.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;
border-bottom: 0 !important;
outline: none !important;
}
// .modeBG {
@@ -297,13 +273,12 @@ onMounted(() => {
// ;
// }
// }
:deep(.el-carousel__container) {
height: 100%;
height: 100%;
}
:deep(.el-carousel__item) {
position: relative;
position: relative;
}
</style>