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:
sjl
2025-01-06 14:07:21 +08:00
parent c4e2da8d67
commit 99e6abbcfd
4 changed files with 511 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
frontend/src/views/home/components/channelsTestTable.vue
View File

@@ -21,22 +21,36 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="UaChannel" label="结果"> <el-table-column prop="UaChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L1系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.UaChannel === '不合格'"> <el-tooltip
v-if="scope.row.UaChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
:content="'电压L1系数校准不合格原因：'+scope.row.UaData"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.UaChannel }} {{ scope.row.UaChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.UaChannel === '合格'"
class="item"
effect="light"
placement="top-start"
:content="'电压L1系数校准合格原因：'+scope.row.UaData"
>
<span class="tooltip-content">{{ scope.row.UaChannel }}</span>
</el-tooltip>
<!-- <el-tag type="danger" v-if="scope.row.UaChannel === '不合格'">
{{ scope.row.UaChannel }}
</el-tag> -->
<el-icon v-else-if="scope.row.UaChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.UaChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else> <!-- <span v-else>
{{ scope.row.UaChannel }} {{ scope.row.UaChannel }}
</span> </span> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -52,22 +66,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="UbChannel" label="结果"> <el-table-column prop="UbChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L2系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.UbChannel === '不合格'"> <el-tooltip
v-if="scope.row.UbChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
content="电压L2系数校准不合格原因"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.UbChannel }} {{ scope.row.UbChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.UbChannel === '合格'"
class="item"
effect="light"
placement="top-start"
content="电压L2系数校准合格原因"
>
<span class="tooltip-content">{{ scope.row.UbChannel }}</span>
</el-tooltip>
<el-icon v-else-if="scope.row.UbChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.UbChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else>
{{ scope.row.UbChannel }}
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -83,22 +105,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="UcChannel" label="结果"> <el-table-column prop="UcChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电压L3系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.UcChannel === '不合格'"> <el-tooltip
v-if="scope.row.UcChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
content="电压L3系数校准不合格原因"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.UcChannel }} {{ scope.row.UcChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.UcChannel === '合格'"
class="item"
effect="light"
placement="top-start"
content="电压L3系数校准合格原因"
>
<span class="tooltip-content">{{ scope.row.UcChannel }}</span>
</el-tooltip>
<el-icon v-else-if="scope.row.UcChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.UcChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else>
{{ scope.row.UcChannel }}
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -116,22 +146,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="IaChannel" label="结果"> <el-table-column prop="IaChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L1系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.IaChannel === '不合格'"> <el-tooltip
v-if="scope.row.IaChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
content="电流L1系数校准不合格原因"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.IaChannel }} {{ scope.row.IaChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.IaChannel === '合格'"
class="item"
effect="light"
placement="top-start"
content="电流L1系数校准合格原因"
>
<span class="tooltip-content">{{ scope.row.IaChannel }}</span>
</el-tooltip>
<el-icon v-else-if="scope.row.IaChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.IaChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else>
{{ scope.row.IaChannel }}
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -147,22 +185,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="IbChannel" label="结果"> <el-table-column prop="IbChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L2系数校准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.IbChannel === '不合格'"> <el-tooltip
v-if="scope.row.IbChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
content="电流L2系数校准不合格原因"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.IbChannel }} {{ scope.row.IbChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.IbChannel === '合格'"
class="item"
effect="light"
placement="top-start"
content="电流L2系数校准合格原因"
>
<span class="tooltip-content">{{ scope.row.IbChannel }}</span>
</el-tooltip>
<el-icon v-else-if="scope.row.IbChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.IbChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else>
{{ scope.row.IbChannel }}
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -178,22 +224,30 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="IcChannel" label="结果"> <el-table-column prop="IcChannel" label="结果">
<template #header >
<span>结果</span>
<el-tooltip class="item" effect="light" placement="top-start" content="电流L3系数准不合格原因">
<el-icon style="margin-left:2px;vertical-align:-2px;"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<template #default="scope"> <template #default="scope">
<el-tag type="danger" v-if="scope.row.IcChannel === '不合格'"> <el-tooltip
v-if="scope.row.IcChannel === '不合格'"
class="item"
effect="light"
placement="top-start"
content="电流L3系数校准不合格原因"
>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.IcChannel }} {{ scope.row.IcChannel }}
</el-tag> </el-tag>
</el-tooltip>
<el-tooltip
v-else-if="scope.row.IcChannel === '合格'"
class="item"
effect="light"
placement="top-start"
content="电流L3系数校准合格原因"
>
<span class="tooltip-content">{{ scope.row.IcChannel }}</span>
</el-tooltip>
<el-icon v-else-if="scope.row.IcChannel === '—'&& loading" class="loading-box"> <el-icon v-else-if="scope.row.IcChannel === '—'&& loading" class="loading-box">
<el-icon-loading /> <el-icon-loading />
</el-icon> </el-icon>
<span v-else>
{{ scope.row.IcChannel }}
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@@ -357,6 +411,19 @@
animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;
} }
.icon-margin {
margin-left: 0px;
}
.icon-align {
vertical-align: 0px;
}
.tooltip-content {
cursor: pointer;
}
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

86
frontend/src/views/home/components/timeTest.vue
View File

@@ -4,17 +4,17 @@
<el-tab-pane label="守时误差"> <el-tab-pane label="守时误差">
<div class="right-title" > <div class="right-title" >
<span v-if="activeIndex <= 1"> </span> <span v-if="activeIndex <= 1"> </span>
<span v-if="activeIndex > 1" style=" font-size: 18px;font-weight: 600;"> <span v-if="activeIndex > 1" class="time-text">
标准时间: <span style="color: #003078">{{ gpsTime }}</span> 标准时间: <span style="color: #003078">{{ gpsTime }}</span>
</span> </span>
<div class="error-dsc"> <div class="error-dsc">
<div class="green-div"></div> <div class="green-div"></div>
<span style=" color: #606266; font-size: 16px;font-weight: 600;"> <span class="description-text">
合格≤1000ms 合格≤1000ms
</span> </span>
<div class="red-div"></div> <div class="red-div"></div>
<span style=" color: #F56C6c; font-size: 16px;font-weight: 600;"> <span class="description-text unqualified">
不合格>1000ms 不合格>1000ms
</span> </span>
</div> </div>
@@ -78,7 +78,14 @@
:cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border> :cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
</ProTable> --> </ProTable> -->
<el-table v-if="activeIndex > 0" :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="margin-top: -30px;width: 100%" border> <el-table
v-if="activeIndex > 0"
:data="deviceOperatorData"
stripe
:header-cell-class-name="'el-table-header'"
:cell-class-name="'el-table-cell'"
class="el-table"
border>
<el-table-column prop="deviceName" label="设备名称" /> <el-table-column prop="deviceName" label="设备名称" />
<el-table-column prop="updataTime" label="上送时刻" /> <el-table-column prop="updataTime" label="上送时刻" />
<el-table-column prop="ErrorValue" label="守时误差(ms)"> <el-table-column prop="ErrorValue" label="守时误差(ms)">
@@ -110,6 +117,7 @@
</template> </template>
<script lang="tsx" setup name="timeTest"> <script lang="tsx" setup name="timeTest">
import { SuccessFilled } from '@element-plus/icons-vue' import { SuccessFilled } from '@element-plus/icons-vue'
import { reactive, ref, toRef, watch } from 'vue'
const stepsIndex = ref(0) const stepsIndex = ref(0)
const activeIndex = ref(0) const activeIndex = ref(0)
@@ -196,7 +204,7 @@ const columns = reactive([
prop: 'Result', prop: 'Result',
label: '检测结果', label: '检测结果',
// width: 100, // width: 100,
render: (scope) => { render: (scope: { row: { Result: string } }) => {
if (scope.row.Result === '不合格') { if (scope.row.Result === '不合格') {
return ( return (
<el-tag type='danger'>{scope.row.Result}</el-tag> <el-tag type='danger'>{scope.row.Result}</el-tag>
@@ -231,7 +239,7 @@ watch(testStatus, function (newValue, oldValue) {
} }
}) })
function formatDateTime(date) { function formatDateTime(date: Date) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');
@@ -408,4 +416,70 @@ watch(ts, function (newValue, oldValue) {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px 20px 10px 20px; padding: 10px 20px 10px 20px;
box-sizing: border-box; */ box-sizing: border-box; */
.right-title .time-text {
font-size: 18px;
font-weight: 600;
}
.right-title .gps-time {
color: #003078;
}
.error-dsc {
display: flex;
align-items: center;
margin-top: 10px; /* 根据需要调整 */
}
.error-dsc .green-div,
.error-dsc .red-div {
width: 12px;
height: 12px;
margin-right: 8px;
}
.error-dsc .green-div {
background-color: #67C23A;
}
.error-dsc .red-div {
background-color: #F56C6C;
}
.error-dsc .description-text {
color: #606266;
font-size: 16px;
font-weight: 600;
}
.error-dsc .description-text.unqualified {
color: #F56C6C;
}
.el-table-header {
text-align: center;
}
.el-table-cell {
text-align: center;
}
.el-table {
margin-top: -30px;
width: 100%;
}
.tooltip-icon {
margin-left: 4px;
vertical-align: middle;
}
.result-tag {
font-weight: 600;
}
.result-text {
font-weight: 600;
}
</style> </style>

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

@@ -113,13 +113,10 @@ defineExpose({ getTreeData })
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.plan_tree { .plan_tree {
// width: 200px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; background-color: #fff;
// height: calc(100% - 70px);
background-color: #ffffff;
.search_view { .search_view {
width: 100%; width: 100%;

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

@@ -1,61 +1,59 @@
<!-- 真正的首页 --> <!-- 真正的首页 -->
<template> <template>
<div class="static"> <div class='static'>
<div class="left_tree"> <el-row :gutter='10'>
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/> <el-col :lg='4' :xl='4' :md='4' :sm='4'>
<div class='left_tree'>
<tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' />
</div> </div>
<!-- <span class="new_span">测试scss颜色</span> --> </el-col>
<div class="right_container"> <el-col :lg='20' :xl='20' :md='20' :sm='20'>
<div class='right_container'>
<!-- 功能选择 --> <!-- 功能选择 -->
<div class="container_function"> <div class='container_function'>
<div <div
class="function_item" class='function_item'
:class=" :class="item.checked ? 'function_item checked_function' : 'function_item'"
item.checked ? 'function_item checked_function' : 'function_item' v-for='(item, index) in tabsList'
" :key='index'
v-for="(item, index) in tabsList" @click='handleCheckFunction(item.value)'
:key="index"
@click="handleCheckFunction(item.value)"
> >
<div class="item_img"> <div class='item_img'>
<img :src="item.img" alt=""/> <img :src='item.img' />
</div> </div>
<div class="item_text"> <div class='item_text'>
<p>{{ item.label }}</p> <p>{{ item.label }}</p>
</div> </div>
</div> </div>
</div> </div>
<!--检测计划统计 饼图统计-->
<!-- <el-collapse v-model="activeNames" @change="handleChange"> <div class='container_pieShow'>
<el-collapse-item title="检测进度展示" name="1"> --> <el-collapse model-value='1' accordion @change='handleCollapseChange'>
<div class="container_pieShow"> <el-collapse-item name='1'>
<el-collapse model-value="1" accordion @change="handleCollapseChange">
<el-collapse-item name="1">
<template #title> <template #title>
<div style="display: flex; justify-content: space-between; width: 100%;"> <div class='container_pieShow_title'>
<span style="font-weight: bold;margin-left: 15px;">检测计划统计</span> <span>检测计划统计</span>
<span style="font-weight: bold;margin-right: 15px;">{{ planName }}</span> <span>{{ planName }}</span>
</div> </div>
</template> </template>
<!-- 饼图 --> <!-- 饼图 -->
<div class="container_charts"> <div class='container_charts'>
<div class="charts_info" ref="chartsInfoRef"> <div class='charts_info' ref='chartsInfoRef'>
<pie <pie
:customData="{ :customData="{
title: '设备检测状态', title: '设备检测状态',
textAlign: 'left', textAlign: 'left',
}" }"
:legendData="{ :legendData="{
icon: 'circle', icon: 'circle',
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData1" :chartsData='chartsData1'
ref="pieRef1" ref='pieRef1'
></pie> ></pie>
</div> </div>
<div class="charts_info"> <div class='charts_info'>
<pie <pie
:customData="{ :customData="{
title: '设备检测结果', title: '设备检测结果',
@@ -66,28 +64,23 @@
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData2" :chartsData='chartsData2'
ref="pieRef2" ref='pieRef2'
></pie> ></pie>
</div> </div>
<div class="charts_info"> <div class='charts_info'>
<pie <pie
:customData="{ :customData="{
title: '设备报告状态', title: '设备报告状态',
textAlign: 'left', textAlign: 'left',
label: {
normal: {
position: 'inner',
},
},
}" }"
:legendData="{ :legendData="{
icon: 'circle', icon: 'circle',
left: 'left', left: 'left',
top: 'bottom', top: 'bottom',
}" }"
:chartsData="chartsData3" :chartsData='chartsData3'
ref="pieRef3" ref='pieRef3'
></pie> ></pie>
</div> </div>
</div> </div>
@@ -95,46 +88,43 @@
</el-collapse> </el-collapse>
</div> </div>
<el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }"> <!--下方表格数据-->
<el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }"> <el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue'
:style='{ height: tabsHeight }'>
<el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight }'>
<!-- 列表数据 --> <!-- 列表数据 -->
<div class="container_table" :style="{ height: tableHeight }"> <div class='container_table' :style='{ height: tableHeight }'>
<Table ref="tableRef1" :id='currentId' :isTimeCheck='isTimeCheck'></Table> <Table ref='tableRef1' :id='currentId' :isTimeCheck='isTimeCheck'></Table>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane label="已检设备" v-if="tabShow" :style="{ height: tabPaneHeight }">-->
<!-- &lt;!&ndash; 列表数据 &ndash;&gt;-->
<!-- <div class="container_table" :style="{ height: tableHeight }">-->
<!-- <Table ref="tableRef2" :id='currentId'></Table>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
</el-tabs> </el-tabs>
</div> </div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang='ts' setup>
import pie from "@/components/echarts/pie/default.vue"; import pie from '@/components/echarts/pie/default.vue'
import {useRouter} from "vue-router"; import { useRouter } from 'vue-router'
import tree from "../components/tree.vue"; import tree from '../components/tree.vue'
import Table from "../components/table.vue"; import Table from '../components/table.vue'
//import { data } from "@/api/plan/static.json";
import deviceDataList from '@/api/device/device/deviceData' import deviceDataList from '@/api/device/device/deviceData'
import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts' import { getBoundPqDevList, getPlanListByPattern } from '@/api/plan/plan.ts'
import {onBeforeMount, onUnmounted, ref, watch} from "vue"; import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
import {useModeStore} from '@/stores/modules/mode'; // 引入模式 store import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import {type Plan} from "@/api/plan/interface"; import { type Plan } from '@/api/plan/interface'
import type {CollapseModelValue} from "element-plus/es/components/collapse/src/collapse.mjs"; import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import {type Device} from "@/api/device/interface/device"; import { type Device } from '@/api/device/interface/device'
import {ResultData} from "@/api/interface"; import { ResultData } from '@/api/interface'
const planName = ref('') const planName = ref('')
const dictStore = useDictStore() const dictStore = useDictStore()
const modeStore = useModeStore(); const modeStore = useModeStore()
const chartsInfoRef = ref<HTMLElement | null>(null); const chartsInfoRef = ref<HTMLElement | null>(null)
const chartsWidth = ref<number>(0); const chartsWidth = ref<number>(0)
const deviceData = deviceDataList.plan_devicedata const deviceData = deviceDataList.plan_devicedata
const treeRef = ref(); const treeRef = ref()
const form: any = ref({ const form: any = ref({
activeTabs: 0, //功能选择,例如报告生成 activeTabs: 0, //功能选择,例如报告生成
activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成 activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
@@ -144,84 +134,71 @@ const form: any = ref({
deviceBindStatus: 0, //绑定状态 deviceBindStatus: 0, //绑定状态
deviceType: 0, //设备类型 deviceType: 0, //设备类型
manufacturer: 0, //制造厂商 manufacturer: 0, //制造厂商
}); })
const router = useRouter(); const router = useRouter()
const activeNames = ref(['2']) const tabShow = ref(false)
const tabShow = ref(false);
const tabLabel1 = ref('设备检测') const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0') const editableTabsValue = ref('0')
const checkStateTable = ref<number[]>([0, 1, 2]) const checkStateTable = ref<number[]>([0, 1, 2])
const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度 const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
const tableHeight = ref('calc(100% - 50px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度 const isTimeCheck = ref<boolean>(false)
const tableHeight = ref('calc(100% - 5px)'); // 初始高度 const planList = ref<ResultData<Plan.ReqPlan[]>>()
const handleChange = (val: string[]) => {
}
const isTimeCheck = ref<boolean>(false);
const planList = ref<ResultData<Plan.ReqPlan[]>>();
const handleCollapseChange = (val: CollapseModelValue) => { const handleCollapseChange = (val: CollapseModelValue) => {
// 计算新的高度 // 计算新的高度
let newHeight; let newHeight
if (Array.isArray(val)) { if (Array.isArray(val)) {
newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'; newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
} else { } else {
newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'; newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
}
tabsHeight.value = newHeight
tabPaneHeight.value = `calc(100% - 5px)`
tableHeight.value = `calc(100% - 5px)`
} }
//const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
tabsHeight.value = newHeight;
tabPaneHeight.value = `calc(100% - 5px)`;
tableHeight.value = `calc(100% - 5px)`;
// tableRef1.value.resize();
// tableRef2.value.resize();
};
const handleTabsChange = (val: any) => { const handleTabsChange = (val: any) => {
form.value.activeTabs = 0; form.value.activeTabs = 0
form.value.activeTabs = 3; form.value.activeTabs = 3
form.value.activeChildTabs = Number(val); form.value.activeChildTabs = Number(val)
} }
localStorage.setItem("color", "red"); localStorage.setItem('color', 'red')
//功能选择数据 //功能选择数据
const tabsList = ref([ const tabsList = ref([
{ {
label: "设备检测", label: '设备检测',
value: 0, value: 0,
img: "/src/assets/images/plan/static/1.svg", img: '/src/assets/images/plan/static/1.svg',
checked: true, checked: true,
}, },
// {
// label: "设备复检",
// value: 2,
// img: "/src/assets/images/plan/static/2.svg",
// checked: false,
// },
{ {
label: "报告生成", label: '报告生成',
value: 3, value: 3,
img: "/src/assets/images/plan/static/3.svg", img: '/src/assets/images/plan/static/3.svg',
checked: false, checked: false,
}, },
{ {
label: "设备归档", label: '设备归档',
value: 4, value: 4,
img: "/src/assets/images/plan/static/4.svg", img: '/src/assets/images/plan/static/4.svg',
checked: false, checked: false,
}, },
{ {
label: "数据操作", label: '数据操作',
value: 5, value: 5,
img: "/src/assets/images/plan/static/5.svg", img: '/src/assets/images/plan/static/5.svg',
checked: false, checked: false,
}, },
]); ])
form.value.activeTabs = tabsList.value[0].value; form.value.activeTabs = tabsList.value[0].value
const tableRef1 = ref(); const tableRef1 = ref()
const tableRef2 = ref(); const tableRef2 = ref()
const currentId = ref(''); const currentId = ref('')
watch( watch(
() => form.value, () => form.value,
@@ -230,261 +207,244 @@ watch(
if (form.value.activeTabs === 0)//设备检测 if (form.value.activeTabs === 0)//设备检测
{ {
const tabledata = deviceData.filter((item) => item.document_State === "未归档") const tabledata = deviceData.filter((item) => item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 4)//设备归档 } else if (form.value.activeTabs === 4)//设备归档
{ {
const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档") const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询 } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{ {
const tabledata = deviceData.filter((item) => item.check_State === "检测完成"); const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata); tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} }
} }
}, },
{ {
immediate: true, immediate: true,
deep: true, deep: true,
} },
); )
watch( watch(
() => form.value, () => form.value,
(val, oldVal) => { (val, oldVal) => {
if (val) { if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs); tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
} }
}, },
{ {
immediate: true, immediate: true,
deep: true, deep: true,
} },
); )
const pieRef1 = ref(), const pieRef1 = ref(),
pieRef2 = ref(), pieRef2 = ref(),
pieRef3 = ref(); pieRef3 = ref()
const chartsData1: any = ref([]), const chartsData1: any = ref([]),
chartsData2: any = ref([]), chartsData2: any = ref([]),
chartsData3: any = ref([]); chartsData3: any = ref([])
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => { const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
for (const plan of plans) { for (const plan of plans) {
if (plan.id === id) { if (plan.id === id) {
return plan; return plan
} }
if (plan.children) { if (plan.children) {
const foundPlan = findPlanById(plan.children, id); const foundPlan = findPlanById(plan.children, id)
if (foundPlan) { if (foundPlan) {
return foundPlan; return foundPlan
} }
} }
} }
return undefined; return undefined
}; }
const getPieData = async (id: string) => { const getPieData = async (id: string) => {
currentId.value = id; // 设置当前ID currentId.value = id // 设置当前ID
//handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
// 初始化计数对象 // 初始化计数对象
const checkStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0, 3: 0}; const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
const checkResultCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0}; const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
const reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0}; const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
if (id) { if (id) {
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const plan = findPlanById(planList.value?.data || [], id); const plan = findPlanById(planList.value?.data || [], id)
planName.value = '所选计划:' + plan.name planName.value = '所选计划:' + plan.name
if (plan) { if (plan) {
//isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false //isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
isTimeCheck.value = false; // 将 1 转换为 true，0 转换为 false ----目前不用守时检测，先去除 isTimeCheck.value = false // 将 1 转换为 true，0 转换为 false ----目前不用守时检测，先去除
} else { } else {
// 处理未找到计划的情况 // 处理未找到计划的情况
isTimeCheck.value = false; // 或者其他默认值 isTimeCheck.value = false // 或者其他默认值
} }
const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList': [0, 1, 2, 3]}); const pqDevList_Result2 = await getBoundPqDevList({ 'planId': id, 'checkStateList': [0, 1, 2, 3] })
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]; boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
// 遍历 boundPqDevList 并更新计数对象 // 遍历 boundPqDevList 并更新计数对象
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) { if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
checkStateCount[t.checkState]++; checkStateCount[t.checkState]++
} }
}); })
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) { if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
checkResultCount[t.checkResult]++; checkResultCount[t.checkResult]++
} }
}); })
boundPqDevList.value.forEach(t => { boundPqDevList.value.forEach(t => {
if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) { if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
reportStateCount[t.reportState]++; reportStateCount[t.reportState]++
} }
}); })
} }
chartsData1.value = [ chartsData1.value = [
{value: checkStateCount[0], name: "未检", itemStyle: {color: '#fac858'}}, { value: checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
{value: checkStateCount[1], name: "检测中", itemStyle: {color: '#ee6666'}}, { value: checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
{value: checkStateCount[2], name: "检测完成", itemStyle: {color: '#91cc75'}}, { value: checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
{value: checkStateCount[3], name: "归档", itemStyle: {color: '#5470c6'}}, { value: checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
]; ]
chartsData2.value = [ chartsData2.value = [
{value: checkResultCount[2], name: "未检", itemStyle: {color: '#fac858'}}, { value: checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
{value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}}, { value: checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
{value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}}, { value: checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
]; ]
chartsData3.value = [ chartsData3.value = [
{value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}}, { value: reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
{value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}}, { value: reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
{value: reportStateCount[1], name: "已生成", itemStyle: {color: '#91cc75'}}, { value: reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
]; ]
pieRef1.value.init(); pieRef1.value.init()
pieRef2.value.init(); pieRef2.value.init()
pieRef3.value.init(); pieRef3.value.init()
// pieRef1.value.reSize(470,145,true); }
// pieRef2.value.reSize(470,145,true);
// pieRef3.value.reSize(470,145,true);
};
const getTree = (data?: any) => { const getTree = (data?: any) => {
treeRef.value.getTreeData(data); treeRef.value.getTreeData(data)
}; }
//前往检测 //前往检测
const handleDetection = () => { const handleDetection = () => {
router.push({ router.push({
path: "/detection", path: '/detection',
}); })
}; }
//前往计划详情 //前往计划详情
const planDetail = () => { const planDetail = () => {
router.push({ router.push({
path: "/plan/planList", path: '/plan/planList',
}); })
}; }
//功能选择css切换 //功能选择css切换
const handleCheckFunction = (val: any) => { const handleCheckFunction = (val: any) => {
editableTabsValue.value = '0'; editableTabsValue.value = '0'
form.value.activeChildTabs = 0; form.value.activeChildTabs = 0
tabsList.value.map((item: any, index: any) => { tabsList.value.map((item: any, index: any) => {
if (val == item.value) { if (val == item.value) {
item.checked = true; item.checked = true
} else { } else {
item.checked = false; item.checked = false
} }
}); })
tabShow.value = false; tabShow.value = false
switch (val) { switch (val) {
case 0://自动检测 case 0://自动检测
checkStateTable.value = [0, 1, 2] checkStateTable.value = [0, 1, 2]
tabLabel1.value = "设备检测"; tabLabel1.value = '设备检测'
break; break
case 1://手动检测 case 1://手动检测
tabLabel1.value = "手动检测"; tabLabel1.value = '手动检测'
break; break
case 2://设备复检 case 2://设备复检
tabLabel1.value = "设备复检"; tabLabel1.value = '设备复检'
break; break
case 3://报告生成 case 3://报告生成
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3]
tabLabel1.value = "报告生成"; tabLabel1.value = '报告生成'
//tabShow.value = true; //tabShow.value = true;
break; break
case 4://设备归档 case 4://设备归档
checkStateTable.value = [2] checkStateTable.value = [2]
tabLabel1.value = "设备归档"; tabLabel1.value = '设备归档'
break; break
case 5://数据查询 case 5://数据查询
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3]
tabLabel1.value = "数据查询"; tabLabel1.value = '数据查询'
break; break
}
form.value.activeTabs = val
} }
form.value.activeTabs = val;
};
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) { for (let entry of entries) {
chartsWidth.value = entry.contentRect.width; chartsWidth.value = entry.contentRect.width
//console.log('Charts Info Width:', chartsWidth.value); //console.log('Charts Info Width:', chartsWidth.value);
pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true); pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
} }
}); })
onBeforeMount(async () => { onBeforeMount(async () => {
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
const reqPlan: Plan.ReqPlan = { const reqPlan: Plan.ReqPlan = {
pattern: patternId, pattern: patternId,
datasourceIds: "", datasourceIds: '',
sourceIds: "", sourceIds: '',
planId: "", planId: '',
scriptName: "", scriptName: '',
errorSysName: "", errorSysName: '',
sourceName: "", sourceName: '',
devIds: [], devIds: [],
id: "", id: '',
name: "", name: '',
dataSourceId: "", dataSourceId: '',
scriptId: "", scriptId: '',
errorSysId: "", errorSysId: '',
timeCheck: 0, timeCheck: 0,
testState: 0, testState: 0,
reportState: 0, reportState: 0,
result: 0, result: 0,
code: 0, code: 0,
state: 0 state: 0,
}; }
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>; planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
if (planList.value.data[0].children[0]) { if (planList.value.data[0].children[0]) {
currentId.value = planList.value.data[0].children[0].id; currentId.value = planList.value.data[0].children[0].id
} }
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.observe(chartsInfoRef.value); resizeObserver.observe(chartsInfoRef.value)
} }
getTree(planList.value.data); getTree(planList.value.data)
getPieData(currentId.value); getPieData(currentId.value)
}); })
onUnmounted(() => { onUnmounted(() => {
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.unobserve(chartsInfoRef.value); resizeObserver.unobserve(chartsInfoRef.value)
} }
}); })
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.static { .static {
width: 100%;
// height: calc(100vh - 165px);
height: 100%;
display: flex;
justify-content: space-between;
//background-color: #eee;
.left_tree { .left_tree {
width: 14% !important;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
} }
.right_container { .right_container {
flex: none; flex: none;
width: 85.8%;
// padding: 0 10px 0 10px;
margin-left: 10px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//justify-content: space-between;
//align-items: center;
//box-sizing: border-box;
.container_function { .container_function {
@@ -566,134 +526,47 @@ onUnmounted(() => {
} }
} }
// .container_function {
// width: 100%;
// height: auto;
// background: #fff;
// border-radius: 4px;
// display: flex;
// // justify-content: space-around;
// // justify-content: space-evenly;
// justify-content: space-between;
// align-items: center;
// margin-bottom: 10px;
// padding: 10px 20px 10px 20px;
// box-sizing: border-box;
// .function_item {
// flex: none;
// width: 6%;
// height: 40px;
// display: flex;
// justify-content: space-between;
// align-items: center;
// flex-direction: row;
// cursor: pointer;
// background-color: #607eab;
// border-radius: 8px;
// padding: 0px 30px;
// .item_img {
// width: 30px;
// height: 30px;
// border-radius: 50%;
// // background-color: #607eab;
// display: flex;
// align-items: center;
// justify-content: center;
// margin-right: 5px;
// img {
// width: 20px;
// height: auto;
// }
// }
// .item_img:nth-child(3),
// .item_img:nth-child(6) {
// padding: 10px !important;
// img {
// width: 20px !important;
// height: auto;
// }
// }
// .item_text {
// p {
// width: 80px;
// margin: 0;
// font-weight: 800;
// color: var(--el-color-primary);
// font-size: 14px;
// font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
// }
// }
// }
// .function_item:hover,
// .checked_function {
// background-color: var(--el-color-primary);
// .item_img {
// // background-color: var(--el-color-primary);
// }
// .item_text {
// p {
// // color: var(--el-color-primary);
// color: #fff;
// }
// }
// }
// }
.container_pieShow { .container_pieShow {
width: 100% !important; width: 100% !important;
//min-height: 200px !important;
height: auto; height: auto;
background-color: #eee; background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
margin-bottom: 10px; margin-bottom: 10px;
.container_pieShow_title {
display: flex;
justify-content: space-between;
padding: 0 15px;
font-weight: bold;
width: 100%;
}
} }
.el-collapse { .el-collapse {
width: 100% !important; width: 100% !important;
// min-height: 200px !important;
height: 100% !important; height: 100% !important;
background-color: #eee; background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
// margin-bottom: 10px;
} }
.el-collapse-item { .el-collapse-item {
width: 100% !important; width: 100% !important;
// min-height: 200px !important;
height: 100% !important; height: 100% !important;
background-color: #eee; background-color: #eee;
// display: flex !important;
} }
.container_charts { .container_charts {
width: 100%; width: 100%;
//min-height: 180px !important;
height: 100%; height: 100%;
background-color: #eee; background-color: #eee;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px;
.charts_info { .charts_info {
margin-top: 5px; margin-top: 1px;
border-radius: 4px;
flex: none; flex: none;
width: 33.1%; width: 33.1%;
height: 100% !important; height: 100% !important;
background-color: #fff; background-color: #fff;
// border-radius: 4px;
} }
} }
@@ -702,8 +575,11 @@ onUnmounted(() => {
border-radius: 4px; border-radius: 4px;
} }
.tabs-menu { .tabs-menu {
height: 100%; height: 100%;
border: 0;
} }
.container_table { .container_table {
@@ -724,17 +600,20 @@ onUnmounted(() => {
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
color: var(--el-color-primary); color: var(--el-color-primary);
font-size: 18px; font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif; font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
} }
:deep(.el-collapse-item__conten) { :deep(.el-collapse-item__conten) {
// background-color:#f6f6f6;
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
:deep(.el-collapse-item__content ) { :deep(.el-collapse-item__content ) {
// background-color:#f6f6f6;
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
:deep(.el-tabs--border-card > .el-tabs__content) {
padding: 0 !important;
}
</style> </style>