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-13 18:58:53 +08:00
parent 328696eb55
commit 86e7705985
9 changed files with 178 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/views/home/components/table.vue
View File

@@ -55,13 +55,13 @@
type="primary"
@click="handleTest"
v-if="form.activeTabs === 0"
>启动自动检测</el-button
>自动检测</el-button
>
<el-button
type="primary"
@click="handleTest"
v-if="form.activeTabs === 1"
>启动手动检测</el-button
v-if="form.activeTabs === 0"
>手动检测</el-button
>
<el-button type="primary" v-if="form.activeTabs === 2"
>不合格项复检</el-button
@@ -71,7 +71,7 @@
>
<el-button type="primary" v-if="form.activeTabs === 3"
>批量生成报告</el-button
>报告批量生成</el-button
>
<el-button type="primary" v-if="form.activeTabs === 4"
@@ -307,27 +307,27 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
{
prop: 'reCheck_Num',
label: '复检次数',
minWidth: 70,
minWidth: 100,
},
{
prop: 'report_State',
label: '报告状态',
minWidth: 130,
minWidth: 100,
},
{
prop: 'check_Result',
label: '检测结果',
minWidth: 130,
minWidth: 100,
},
{
prop: 'check_State',
label: '检测状态',
minWidth: 130,
minWidth: 100,
},
{
prop: 'document_State',
label: '归档状态',
minWidth: 130,
minWidth: 100,
},
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 150 ,isShow: operationShow},
])

2
frontend/src/views/home/components/tree.vue
View File

@@ -32,7 +32,7 @@
</div>
</template>
<script lang='ts' setup>
import { Menu, Platform } from '@element-plus/icons-vue'
import { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

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

@@ -15,7 +15,7 @@
"
v-for="(item, index) in tabsList"
:key="index"
@click="handleCheckFunction(index)"
@click="handleCheckFunction(item.value)"
>
<div class="item_img">
<img :src="item.img" alt="" />
@@ -26,8 +26,8 @@
</div>
</div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1">
<!-- <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1"> -->
<!-- 饼图 -->
<div class="container_charts">
@@ -80,8 +80,8 @@
</div>
</div>
</el-collapse-item>
</el-collapse>
<!-- </el-collapse-item>
</el-collapse> -->
<el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
<el-tab-pane :label="tabLabel1">
@@ -138,21 +138,15 @@ localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
{
label: "自动检测",
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/6.svg",
img: "/src/assets/images/plan/static/2.svg",
checked: false,
},
{
@@ -167,14 +161,45 @@ const tabsList = ref([
img: "/src/assets/images/plan/static/4.svg",
checked: false,
},
{
label: "设备浏览",
value: 5,
img: "/src/assets/images/plan/static/5.svg",
checked: false,
},
]);
// 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/6.svg",
// checked: false,
// },
// {
// label: "报告生成",
// value: 3,
// img: "/src/assets/images/plan/static/3.svg",
// checked: false,
// },
// {
// label: "设备归档",
// value: 4,
// img: "/src/assets/images/plan/static/4.svg",
// checked: false,
// },
// {
// label: "设备浏览",
// value: 5,
// img: "/src/assets/images/plan/static/5.svg",
// checked: false,
// },
// ]);
form.value.activeTabs = tabsList.value[0].value;
const tableRef1 = ref();
const tableRef2 = ref();
@@ -213,8 +238,6 @@ 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: "检测中" },
@@ -259,7 +282,7 @@ const handleCheckFunction = (val: any) => {
console.log("test",val);
editableTabsValue.value = '0';
tabsList.value.map((item: any, index: any) => {
if (val == index) {
if (val == item.value) {
item.checked = true;
} else {
item.checked = false;
@@ -338,11 +361,11 @@ onMounted(() => {
.function_item {
flex: none;
width: 6%;
height: 70px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
flex-direction: row;
cursor: pointer;
background-color: #607eab;
border-radius: 8px;
@@ -356,7 +379,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
img {
width: 40px;
height: auto;
@@ -422,8 +445,8 @@ onMounted(() => {
.container_charts {
width: 100%;
// min-height: 200px !important;
height:100%;
min-height: 180px !important;
// height:100%;
background-color: #eee;
display: flex;
justify-content: space-between;
@@ -446,7 +469,7 @@ onMounted(() => {
.container_table {
// width: 100%;
flex: 1 !important;
height: calc(100vh - 360px - 100px);
height: calc(100vh - 360px - 155px);
border-radius: 4px;
width: 100% !important;
// display: none;