功能选择按钮修改
This commit is contained in:
zhujiyan
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<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 { useUserInfoStore } from "@/stores/modules/user";
|
||||
import { ElMessage } from "element-plus";
|
||||
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 = (isActive: any) => {
|
||||
if (isActive) {
|
||||
router.push({ path: "/admin/user-boot/preDetection" });
|
||||
} 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 - 140px);
|
||||
// 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>
|
||||
@@ -12,6 +12,7 @@
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:default-checked-keys="defaultChecked"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
</el-tree>
|
||||
@@ -24,13 +25,16 @@ const data: any = ref([]);
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name",
|
||||
pid:"pid",
|
||||
};
|
||||
const searchForm = ref({
|
||||
planName: "",
|
||||
});
|
||||
const defaultChecked=ref([])
|
||||
const getTreeData = (val: any) => {
|
||||
console.log(val, ",,,,");
|
||||
defaultChecked.value=[]
|
||||
data.value = val;
|
||||
defaultChecked.value.push(data.value[0].children[0].id)
|
||||
};
|
||||
const filterText = ref("");
|
||||
const treeRef = ref();
|
||||
@@ -63,6 +67,7 @@ defineExpose({ getTreeData });
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
height: calc(100% - 70px);
|
||||
background-color: #fff;
|
||||
.el-input {
|
||||
width: 100%;
|
||||
margin: 0 10px 10px 0;
|
||||
|
||||
@@ -6,53 +6,10 @@
|
||||
</div>
|
||||
<!-- <span class="new_span">测试scss颜色</span> -->
|
||||
<div class="right_container">
|
||||
<div class="container_charts">
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData1"
|
||||
ref="pieRef1"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测结果',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData2"
|
||||
ref="pieRef2"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData3"
|
||||
ref="pieRef3"
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选条件 -->
|
||||
<div class="container_title">
|
||||
<el-form :model="form" label-width="80px" :inline="true">
|
||||
<el-form-item label="功能选择">
|
||||
<!-- <el-form-item label="功能选择">
|
||||
<el-select v-model="form.activeTabs" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in tabsList"
|
||||
@@ -61,7 +18,7 @@
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkStatus" @change="changeSelect">
|
||||
<el-option
|
||||
@@ -146,7 +103,71 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 功能选择 -->
|
||||
<div class="container_function">
|
||||
<div
|
||||
class="function_item"
|
||||
:class="
|
||||
item.checked ? 'function_item checked_function' : 'function_item'
|
||||
"
|
||||
v-for="(item, index) in tabsList"
|
||||
:key="index"
|
||||
@click="handleCheckFunction(index)"
|
||||
>
|
||||
<div class="item_img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="item_text">
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 饼图 -->
|
||||
<div class="container_charts">
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData1"
|
||||
ref="pieRef1"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测结果',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData2"
|
||||
ref="pieRef2"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData3"
|
||||
ref="pieRef3"
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表数据 -->
|
||||
<div class="container_table">
|
||||
<Table></Table>
|
||||
</div>
|
||||
@@ -155,11 +176,13 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getStaticTreeData } from "@/api/plan/static";
|
||||
import { getStaticTreeData } from "@/api/plan/static.ts";
|
||||
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";
|
||||
import {data} from "@/api/plan/static.json"
|
||||
console.log(data,"??????????185");
|
||||
const treeRef = ref();
|
||||
const form: any = ref({
|
||||
activeTabs: 0, //功能选择
|
||||
@@ -173,32 +196,44 @@ const form: any = ref({
|
||||
const router = useRouter();
|
||||
localStorage.setItem("color", "red");
|
||||
//功能选择数据
|
||||
const tabsList = [
|
||||
const tabsList = ref([
|
||||
{
|
||||
label: "自动检测",
|
||||
value: 0,
|
||||
img: "/src/assets/images/plan/static/1.svg",
|
||||
checked: true,
|
||||
},
|
||||
{
|
||||
label: "手动检测",
|
||||
value: 1,
|
||||
img: "/src/assets/images/plan/static/2.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "报告生成",
|
||||
value: 2,
|
||||
img: "/src/assets/images/plan/static/3.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备归档",
|
||||
value: 3,
|
||||
img: "/src/assets/images/plan/static/4.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备浏览",
|
||||
value: 4,
|
||||
img: "/src/assets/images/plan/static/5.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备导入",
|
||||
value: 5,
|
||||
img: "/src/assets/images/plan/static/6.svg",
|
||||
checked: false,
|
||||
},
|
||||
];
|
||||
]);
|
||||
//检测状态数据
|
||||
const checkStatusList = [
|
||||
{
|
||||
@@ -297,7 +332,7 @@ const manufacturerList = [
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
form.value.activeTabs = tabsList[0].value;
|
||||
form.value.activeTabs = tabsList.value[0].value;
|
||||
const pieRef1 = ref(),
|
||||
pieRef2 = ref(),
|
||||
pieRef3 = ref();
|
||||
@@ -331,7 +366,8 @@ const getPieData = () => {
|
||||
const getTree = () => {
|
||||
getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
|
||||
console.log(res, "99999999");
|
||||
treeRef.value.getTreeData(res.data);
|
||||
// treeRef.value.getTreeData(res.data);
|
||||
treeRef.value.getTreeData(data);
|
||||
});
|
||||
};
|
||||
//前往检测
|
||||
@@ -346,6 +382,17 @@ const planDetail = () => {
|
||||
path: "/plan/planList",
|
||||
});
|
||||
};
|
||||
//功能选择css切换
|
||||
const handleCheckFunction = (val: any) => {
|
||||
tabsList.value.map((item: any, index: any) => {
|
||||
if (val == index) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
item.checked = false;
|
||||
}
|
||||
});
|
||||
form.value.activeTabs=val;
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
getTree();
|
||||
@@ -355,7 +402,7 @@ onMounted(() => {
|
||||
<style lang="scss" scoped>
|
||||
.static {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eee;
|
||||
@@ -366,7 +413,7 @@ onMounted(() => {
|
||||
}
|
||||
.right_container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
padding: 0 10px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -397,9 +444,68 @@ onMounted(() => {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
.container_function {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 50px;
|
||||
box-sizing: border-box;
|
||||
.function_item {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
// border: 1px solid var(--el-color-primary);
|
||||
.item_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #c6c6c6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.item_img:nth-child(3),
|
||||
.item_img:nth-child(6) {
|
||||
padding: 10px !important;
|
||||
img {
|
||||
width: 20px !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.item_text {
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 800;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.function_item:hover,
|
||||
.checked_function {
|
||||
.item_img {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.item_text {
|
||||
p {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container_charts {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 200px;
|
||||
// border: 2px solid green;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
@@ -416,7 +522,7 @@ onMounted(() => {
|
||||
}
|
||||
.container_table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex:1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:style="{
|
||||
height: authStore.showMenuFlag
|
||||
? 'calc(100vh - 120px)'
|
||||
: 'calc(100vh - 100px)',
|
||||
: 'calc(100vh - 80px)',
|
||||
}"
|
||||
>
|
||||
<div class="mode" v-for="(item, index) in modeList" :key="index">
|
||||
@@ -38,7 +38,6 @@ 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 = [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div class="table-box planList">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:columns="columns"
|
||||
@@ -49,7 +49,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">搜索</el-button>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -194,19 +194,21 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
{
|
||||
prop: "planName",
|
||||
label: "计划名称",
|
||||
width:120,
|
||||
},
|
||||
// { prop: "checkMode", label: "检测模式", width: 120 ,render: scope => {
|
||||
// return( <span v-if="scope,row.checkMode===0">模拟式<span/>)
|
||||
|
||||
// }},
|
||||
{ prop: "checkFrom", label: "检测源", minWidth: 120 },
|
||||
{
|
||||
prop: "checkMode",
|
||||
label: "检测模式",
|
||||
width: 120 ,
|
||||
},
|
||||
{ prop: "checkFrom", label: "检测源", Width: 120 },
|
||||
{ prop: "numberFromName", label: "数字源名称", width: 120 },
|
||||
{ prop: "checkExe", label: "检测脚本", width: 120 },
|
||||
{ prop: "wctx", label: "误差体系", width: 120 },
|
||||
{ prop: "checkStatus", label: "检测状态", width: 120 },
|
||||
{ prop: "checkReport", label: "检测报告", width: 120 },
|
||||
{ prop: "checkResult", label: "检测结果", width: 120 },
|
||||
{ prop: "parentNode", label: "父节点", width: 120 },
|
||||
{ prop: "parentNode", label: "父节点", width: 90 },
|
||||
{
|
||||
prop: "createTime",
|
||||
label: "创建时间",
|
||||
@@ -269,6 +271,10 @@ onMounted(()=>{
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.planList {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 180px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user