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

修改检测入口、预检测、正式检测页面

Browse Source
This commit is contained in:
GYYM
2024-11-12 20:35:12 +08:00
parent 4b5498ad49
commit 6a5c783419
13 changed files with 1070 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -2,7 +2,7 @@
<template>
<div class="static">
<div class="left_tree">
<tree ref="treeRef" />
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
</div>
<!-- <span class="new_span">测试scss颜色</span> -->
<div class="right_container">
@@ -25,61 +25,82 @@
</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',
label: {
normal: {
position: 'inner',
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1">
<!-- 饼图 -->
<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',
label: {
normal: {
position: 'inner',
},
},
},
}"
:legendData="{
icon: 'circle',
left: 'left',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
}"
:legendData="{
icon: 'circle',
left: 'left',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
<el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
<el-tab-pane :label="tabLabel1">
<!-- 列表数据 -->
<div class="container_table">
<Table ref="tableRef"></Table>
<Table ref="tableRef1"></Table>
</div>
</el-tab-pane>
<el-tab-pane label="已检设备" v-if="tabShow">
<!-- 列表数据 -->
<div class="container_table">
<Table ref="tableRef2"></Table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
@@ -100,6 +121,19 @@ const form: any = ref({
manufacturer: 0, //制造厂商
});
const router = useRouter();
const activeNames = ref(['2'])
const tabShow= ref(false);
const tabLabel1 = ref('自动检测')
const editableTabsValue = ref('0')
const handleChange = (val: string[]) => {
console.log(val)
}
const handleTabsChange = (val) => {
form.value.activeTabs = 0;
form.value.activeTabs = 3;
console.log(val)
}
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
@@ -142,12 +176,25 @@ const tabsList = ref([
]);
form.value.activeTabs = tabsList.value[0].value;
const tableRef = ref();
const tableRef1 = ref();
const tableRef2 = ref();
watch(
() => form.value,
(val, oldVal) => {
if (val) {
tableRef.value && tableRef.value.changeActiveTabs(form.value.activeTabs);
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs);
}
},
{
immediate: true,
deep: true,
}
);
watch(
() => form.value,
(val, oldVal) => {
if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs);
}
},
{
@@ -155,7 +202,6 @@ watch(
deep: true,
}
);
const pieRef1 = ref(),
pieRef2 = ref(),
pieRef3 = ref();
@@ -167,6 +213,8 @@ 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: "检测中" },
@@ -208,8 +256,8 @@ const planDetail = () => {
};
//功能选择css切换
const handleCheckFunction = (val: any) => {
console.log("test1",val);
console.log("test",val);
editableTabsValue.value = '0';
tabsList.value.map((item: any, index: any) => {
if (val == index) {
item.checked = true;
@@ -217,6 +265,28 @@ const handleCheckFunction = (val: any) => {
item.checked = false;
}
});
tabShow.value = false;
switch (val) {
case 0://自动检测
tabLabel1.value = "自动检测";
break;
case 1://手动检测
tabLabel1.value = "手动检测";
break;
case 2://设备复检
tabLabel1.value = "设备复检";
break;
case 3://报告生成
tabLabel1.value = "未检设备";
tabShow.value = true;
break;
case 4://设备归档
tabLabel1.value = "设备归档";
break;
}
form.value.activeTabs = val;
};
@@ -331,9 +401,29 @@ onMounted(() => {
}
}
.el-collapse {
width: 100% !important;
// min-height: 200px !important;
height:auto;
background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
margin-bottom: 10px;
}
.el-collapse-item{
width: 100% !important;
// min-height: 200px !important;
height:100% !important;
background-color: #eee;
// display: flex !important;
}
.container_charts {
width: 100%;
min-height: 200px !important;
// min-height: 200px !important;
height:100%;
background-color: #eee;
display: flex;
justify-content: space-between;
@@ -348,10 +438,15 @@ onMounted(() => {
}
}
.el-tabs{
width: 100% !important;
border-radius: 4px;
}
.container_table {
// width: 100%;
flex: 1 !important;
height: calc(100vh - 360px);
height: calc(100vh - 360px - 100px);
border-radius: 4px;
width: 100% !important;
// display: none;