导航栏/菜单栏显示逻辑修改
This commit is contained in:
zhujiyan
89
frontend/src/views/home/components/table.vue
Normal file
89
frontend/src/views/home/components/table.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<el-table :data="tableData" stripe style="width: 100%; height: 100%">
|
||||
<el-table-column fixed type="selection" width="55" />
|
||||
<el-table-column align="center" prop="date" label="设备序列号" fixed />
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="name"
|
||||
label="设备类型"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="state"
|
||||
label="制造厂商"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="address"
|
||||
label="MAC/IP"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<!-- <el-table-column align="center" fixed="right" label="操作" width="120">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click="handleClick">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small">修改</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
const handleClick = () => {
|
||||
console.log("click");
|
||||
};
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
date: "B0000F03",
|
||||
name: "PQS882",
|
||||
state: "南京灿能",
|
||||
city: "Los Angeles",
|
||||
address: "192.168.0.0.0",
|
||||
zip: "CA 90036",
|
||||
tag: "Home",
|
||||
},
|
||||
{
|
||||
date: "B0000F02",
|
||||
name: "PQS882",
|
||||
state: "南京灿能",
|
||||
city: "Los Angeles",
|
||||
address: "192.168.0.0.0",
|
||||
zip: "CA 90036",
|
||||
tag: "Office",
|
||||
},
|
||||
{
|
||||
date: "B0000F04",
|
||||
name: "PQS882",
|
||||
state: "南京灿能",
|
||||
city: "Los Angeles",
|
||||
address: "192.168.0.0.0",
|
||||
zip: "CA 90036",
|
||||
tag: "Home",
|
||||
},
|
||||
{
|
||||
date: "B0000F01",
|
||||
name: "PQS882",
|
||||
state: "南京灿能",
|
||||
city: "Los Angeles",
|
||||
address: "192.168.0.0.0",
|
||||
zip: "CA 90036",
|
||||
tag: "Office",
|
||||
},
|
||||
];
|
||||
onMounted(() => {
|
||||
console.log(
|
||||
tableData,
|
||||
"tableDatatableDatatableDatatableDatatableDatatableDatatableData"
|
||||
);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
70
frontend/src/views/home/components/tree.vue
Normal file
70
frontend/src/views/home/components/tree.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="plan_tree">
|
||||
<el-input
|
||||
placeholder="请输入计划名称"
|
||||
v-model="searchForm.planName"
|
||||
></el-input>
|
||||
<el-tree
|
||||
:data="data"
|
||||
ref="treeRef"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineExpose, watch } from "vue";
|
||||
const data: any = ref([]);
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name",
|
||||
};
|
||||
const searchForm = ref({
|
||||
planName: "",
|
||||
});
|
||||
const getTreeData = (val: any) => {
|
||||
console.log(val, ",,,,");
|
||||
data.value = val;
|
||||
};
|
||||
const filterText = ref("");
|
||||
const treeRef = ref();
|
||||
watch(
|
||||
() => searchForm.value.planName,
|
||||
(val) => {
|
||||
treeRef.value!.filter(val);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
const handleNodeClick = (data) => {
|
||||
console.log(data);
|
||||
};
|
||||
const filterNode = (value: string, data) => {
|
||||
if (!value) return true;
|
||||
return data.name.includes(value);
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
defineExpose({ getTreeData });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plan_tree {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
padding: 5px;
|
||||
.el-input {
|
||||
width: 100%;
|
||||
// height: 40px;
|
||||
margin:0 10px 10px 0;
|
||||
}
|
||||
.el-tree {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,240 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary">按钮</el-button>
|
||||
<div class="home">
|
||||
<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"
|
||||
type="primary"
|
||||
@click="handelOpen(item.isActive)"
|
||||
>进入检测</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode_img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAuthStore } from "@/stores/modules/auth.ts";
|
||||
import model from "./tabs/model.vue";
|
||||
import dashboard from "./tabs/dashboard.vue";
|
||||
const authStore = useAuthStore();
|
||||
console.log(authStore.showMenuFlagGet, "????????????????33333333");
|
||||
const activeIndex = ref("1-1");
|
||||
const router = useRouter();
|
||||
const modeList = [
|
||||
{
|
||||
name: "模拟式模式",
|
||||
subName: "未启用模拟式检测计划",
|
||||
img: "/src/assets/images/dashboard/1.svg",
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
name: "数字式模式",
|
||||
subName: "启用数字检测计划",
|
||||
img: "/src/assets/images/dashboard/2.svg",
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
name: "对比式模式",
|
||||
subName: "启用对比式检测计划",
|
||||
img: "/src/assets/images/dashboard/3.svg",
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.main_container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px);
|
||||
// overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// padding: 20px 2%;
|
||||
.mode {
|
||||
// width: 31.5%;
|
||||
// height: 100%;
|
||||
flex: none;
|
||||
width: 32.5%;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
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: space-between;
|
||||
align-items: center;
|
||||
background: #008aff;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.mode_name {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
// background: #fff;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
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 {
|
||||
width: 150px;
|
||||
height: 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;
|
||||
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 {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(121, 121, 121, 1);
|
||||
border-radius: 5px;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.test_button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-sub-menu__title {
|
||||
border-bottom: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
406
frontend/src/views/home/tabs/dashboard.vue
Normal file
406
frontend/src/views/home/tabs/dashboard.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<!-- 真正的首页 -->
|
||||
<template>
|
||||
<div class="static">
|
||||
<div class="left_tree">
|
||||
<tree ref="treeRef" />
|
||||
</div>
|
||||
<!-- <span class="new_span">测试scss颜色</span> -->
|
||||
<div class="right_container">
|
||||
<div class="container_title">
|
||||
<el-form :model="form" label-width="80px" :inline="true">
|
||||
<el-form-item label="功能选择">
|
||||
<el-select v-model="form.activeTabs" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in tabsList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报告状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkReportStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkReportStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkResult" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkResultList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定状态" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceBindStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceBindStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceType" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceTypeList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="制造厂商" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.manufacturer" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in manufacturerList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 0"
|
||||
>启动自动检测</el-button
|
||||
>
|
||||
<el-button type="primary" @click="handleDetection" v-if="form.activeTabs === 1"
|
||||
>启动手动检测</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 2"
|
||||
>报告生成</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 5"
|
||||
>设备导入</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="container_charts">
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测状态',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
}"
|
||||
:chartsData="chartsData1"
|
||||
ref="pieRef1"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测结果',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
}"
|
||||
:chartsData="chartsData2"
|
||||
ref="pieRef2"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
}"
|
||||
:chartsData="chartsData3"
|
||||
ref="pieRef3"
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container_table">
|
||||
<Table></Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getStaticTreeData } from "@/api/plan/static";
|
||||
import pie from "@/components/echarts/pie/default.vue";
|
||||
import {useRouter} from 'vue-router'
|
||||
import tree from "../components/tree.vue";
|
||||
import Table from "../components/table.vue";
|
||||
const treeRef = ref();
|
||||
const form: any = ref({
|
||||
activeTabs: 0, //功能选择
|
||||
checkStatus: 0, //检测状态
|
||||
checkReportStatus: 0, //检测报告状态
|
||||
checkResult: 0, //检测结果
|
||||
deviceBindStatus: 0, //绑定状态
|
||||
deviceType: 0, //设备类型
|
||||
manufacturer: 0, //制造厂商
|
||||
});
|
||||
const router=useRouter()
|
||||
localStorage.setItem("color", "red");
|
||||
//功能选择数据
|
||||
const tabsList = [
|
||||
{
|
||||
label: "自动检测",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "手动检测",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "报告生成",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "设备归档",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "设备浏览",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "设备导入",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
//检测状态数据
|
||||
const checkStatusList = [
|
||||
{
|
||||
label: "未检测",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "检测中",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "检测完成",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "归档",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
//检测报告状态数据
|
||||
const checkReportStatusList = [
|
||||
{
|
||||
label: "未生成报告",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已生成报告",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//检测结果数组
|
||||
const checkResultList = [
|
||||
{
|
||||
label: "/",
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
label: "不合格",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "合格",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//绑定状态数组
|
||||
const deviceBindStatusList = [
|
||||
{
|
||||
label: "未绑定",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已绑定",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//设备类型数组
|
||||
const deviceTypeList = [
|
||||
{
|
||||
label: "PQS882A",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "PQS882B4",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "PQS882B5",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "PQS882B6",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "PQS882B7",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "PQS882B8",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
//制造厂商数组
|
||||
const manufacturerList = [
|
||||
{
|
||||
label: "南京灿能电力",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "南瑞继保",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "中电",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
form.value.activeTabs = tabsList[0].value;
|
||||
const pieRef1 = ref(),
|
||||
pieRef2 = ref(),
|
||||
pieRef3 = ref();
|
||||
const changeSelect = () => {
|
||||
console.log(form.value.activeTabs);
|
||||
getPieData();
|
||||
};
|
||||
const chartsData1: any = ref([]),
|
||||
chartsData2: any = ref([]),
|
||||
chartsData3: any = ref([]);
|
||||
const getPieData = () => {
|
||||
chartsData1.value = [
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "检测完成" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "归档" },
|
||||
];
|
||||
chartsData2.value = [
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "/" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "合格" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "不合格" },
|
||||
];
|
||||
chartsData3.value = [
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
|
||||
{ value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
|
||||
];
|
||||
pieRef1.value.init();
|
||||
pieRef2.value.init();
|
||||
pieRef3.value.init();
|
||||
};
|
||||
const getTree = () => {
|
||||
getStaticTreeData({ userName: 'zhangsan', planName: "111" }).then(
|
||||
(res) => {
|
||||
console.log(res, "99999999");
|
||||
treeRef.value.getTreeData(res.data);
|
||||
}
|
||||
);
|
||||
};
|
||||
//前往检测
|
||||
const handleDetection=()=>{
|
||||
router.push({
|
||||
path:"/detection"
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
getTree();
|
||||
getPieData();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.static {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eee;
|
||||
.left_tree {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.right_container {
|
||||
flex: 1;
|
||||
// width: 100%;
|
||||
padding: 0 10px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.container_title {
|
||||
width: 100%;
|
||||
// min-height: 50px;
|
||||
min-height: 100px;
|
||||
background: #fff;
|
||||
// padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
.el-form {
|
||||
width: 100%;
|
||||
.el-form-item {
|
||||
// flex:1;
|
||||
// margin: 0 !important;
|
||||
// margin:10px 10px 10px 0;
|
||||
// display: flex;
|
||||
.el-button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container_charts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
// border: 2px solid green;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.charts_info {
|
||||
width: 32.9%;
|
||||
height: 100%;
|
||||
// border: 2px solid pink;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.container_table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
242
frontend/src/views/home/tabs/model.vue
Normal file
242
frontend/src/views/home/tabs/model.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<!-- 模式切换页面 -->
|
||||
<template>
|
||||
<div class="main">
|
||||
<div
|
||||
class="main_container"
|
||||
:style="{
|
||||
height: authStore.showMenuFlag
|
||||
? 'calc(100vh - 120px)'
|
||||
: 'calc(100vh - 100px)',
|
||||
}"
|
||||
>
|
||||
<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"
|
||||
type="primary"
|
||||
@click="handelOpen(item.isActive)"
|
||||
>进入检测</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode_img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAuthStore } from "@/stores/modules/auth.ts";
|
||||
const authStore = useAuthStore();
|
||||
console.log(authStore.showMenuFlagGet, "????????????????33333333");
|
||||
const activeIndex = ref("1-1");
|
||||
const router = useRouter();
|
||||
const modeList = [
|
||||
{
|
||||
name: "模拟式模式",
|
||||
subName: "未启用模拟式检测计划",
|
||||
img: "/src/assets/images/dashboard/1.svg",
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
name: "数字式模式",
|
||||
subName: "启用数字检测计划",
|
||||
img: "/src/assets/images/dashboard/2.svg",
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
name: "对比式模式",
|
||||
subName: "启用对比式检测计划",
|
||||
img: "/src/assets/images/dashboard/3.svg",
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main_container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px);
|
||||
// overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// padding: 20px 2%;
|
||||
.mode {
|
||||
// width: 31.5%;
|
||||
// height: 100%;
|
||||
flex: none;
|
||||
width: 32.5%;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
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: space-between;
|
||||
align-items: center;
|
||||
background: #008aff;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.mode_name {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
// background: #fff;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
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 {
|
||||
width: 150px;
|
||||
height: 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;
|
||||
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 {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(121, 121, 121, 1);
|
||||
border-radius: 5px;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.test_button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-sub-menu__title {
|
||||
border-bottom: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
|
||||
<template #prefix>
|
||||
@@ -10,7 +15,13 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="密码：123456" show-password autocomplete="new-password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="密码：123456"
|
||||
show-password
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<lock />
|
||||
@@ -20,8 +31,22 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="login-btn">
|
||||
<el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
|
||||
<el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
|
||||
<el-button
|
||||
:icon="CircleClose"
|
||||
round
|
||||
size="large"
|
||||
@click="resetForm(loginFormRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="UserFilled"
|
||||
round
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="login(loginFormRef)"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -40,9 +65,10 @@ import { useTabsStore } from "@/stores/modules/tabs";
|
||||
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
|
||||
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
|
||||
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
import type { ElForm } from "element-plus";
|
||||
import md5 from "md5";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const tabsStore = useTabsStore();
|
||||
@@ -52,24 +78,27 @@ type FormInstance = InstanceType<typeof ElForm>;
|
||||
const loginFormRef = ref<FormInstance>();
|
||||
const loginRules = reactive({
|
||||
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const loginForm = reactive<Login.ReqLoginForm>({
|
||||
username: "",
|
||||
password: ""
|
||||
password: "",
|
||||
});
|
||||
|
||||
// login
|
||||
const login = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(async valid => {
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
// 1.执行登录接口
|
||||
const { data } = await loginApi({ ...loginForm, password: md5(loginForm.password) });
|
||||
const { data } = await loginApi({
|
||||
...loginForm,
|
||||
password: md5(loginForm.password),
|
||||
});
|
||||
userStore.setToken(data.accessToken);
|
||||
|
||||
// 2.添加动态路由
|
||||
@@ -81,11 +110,13 @@ const login = (formEl: FormInstance | undefined) => {
|
||||
|
||||
// 4.跳转到首页
|
||||
router.push(HOME_URL);
|
||||
// 5.登录默认不显示菜单和导航栏
|
||||
authStore.resetAuthStore();
|
||||
ElNotification({
|
||||
title: getTimeState(),
|
||||
message: "登录成功",
|
||||
type: "success",
|
||||
duration: 3000
|
||||
duration: 3000,
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
16
frontend/src/views/plan/detection/index.vue
Normal file
16
frontend/src/views/plan/detection/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="detection"></div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detection {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid green;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user