Files
pqs-9100_client/frontend/src/views/home/tabs/dashboard.vue
2024-12-17 11:12:21 +08:00

712 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 真正的首页 -->
<template>
<div class="static">
<div class="left_tree">
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})" />
</div>
<!-- <span class="new_span">测试scss颜色</span> -->
<div class="right_container">
<!-- 功能选择 -->
<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(item.value)"
>
<div class="item_img">
<img :src="item.img" alt="" />
</div>
<div class="item_text">
<p>{{ item.label }}</p>
</div>
</div>
</div>
<!-- <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1"> -->
<div class="container_pieShow">
<el-collapse model-value="1" accordion @change="handleCollapseChange">
<el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
<!-- 饼图 -->
<div class="container_charts">
<div class="charts_info" ref="chartsInfoRef">
<pie
:customData="{
title: '设备检测状态',
textAlign: 'left',
}"
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData1"
ref="pieRef1"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '设备检测结果',
textAlign: 'left',
}"
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData2"
ref="pieRef2"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '设备报告状态',
textAlign: 'left',
label: {
normal: {
position: 'inner',
},
},
}"
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
</el-collapse-item>
</el-collapse>
</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 }">
<!-- 列表数据 -->
<div class="container_table" :style="{ height: tableHeight }">
<Table ref="tableRef1" :id='currentId'></Table>
</div>
</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>
</div>
</div>
</template>
<script lang="ts" setup>
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";
//import { data } from "@/api/plan/static.json";
import deviceDataList from '@/api/device/device/deviceData'
import {getPlanListByPattern } from '@/api/plan/plan.ts'
import { onMounted, onUnmounted, ref, watch } from "vue";
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
import { useDictStore } from '@/stores/modules/dict'
import { type Plan } from "@/api/plan/interface";
import type { CollapseModelValue } from "element-plus/es/components/collapse/src/collapse.mjs";
import { type Device } from "@/api/device/interface/device";
import { getBoundPqDevList } from '@/api/plan/plan.ts'
import { CENTERED_ALIGNMENT } from "element-plus/es/components/virtual-list/src/defaults";
const dictStore = useDictStore()
const modeStore = useModeStore();
const chartsInfoRef = ref<HTMLElement | null>(null);
const chartsWidth = ref<number>(0);
const deviceData = deviceDataList.plan_devicedata
const treeRef = ref();
const form: any = ref({
activeTabs: 0, //功能选择,例如报告生成
activeChildTabs: 0,//子功能选择,例如未检设备报告生成,或已检设备更换误差体系生成
checkStatus: 0, //检测状态
checkReportStatus: 0, //检测报告状态
checkResult: 0, //检测结果
deviceBindStatus: 0, //绑定状态
deviceType: 0, //设备类型
manufacturer: 0, //制造厂商
});
const router = useRouter();
const activeNames = ref(['2'])
const tabShow= ref(false);
const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0')
const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
const tableHeight = ref('calc(100% - 5px)'); // 初始高度
const handleChange = (val: string[]) => {
}
const handleCollapseChange = (val: CollapseModelValue) => {
// 计算新的高度
let newHeight;
if (Array.isArray(val)) {
newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
} else {
newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
}
//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) => {
form.value.activeTabs = 0;
form.value.activeTabs = 3;
form.value.activeChildTabs = Number(val);
}
localStorage.setItem("color", "red");
//功能选择数据
const tabsList = ref([
{
label: "设备检测",
value: 0,
img: "/src/assets/images/plan/static/1.svg",
checked: true,
},
// {
// label: "设备复检",
// value: 2,
// img: "/src/assets/images/plan/static/2.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();
const currentId = ref('');
watch(
() => form.value,
(val, oldVal) => {
if (val) {
if(form.value.activeTabs === 0 )//设备检测
{
const tabledata = deviceData.filter((item) => item.document_State === "未归档")
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
}
else if(form.value.activeTabs === 4)//设备归档
{
const tabledata = deviceData.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档")
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
}
else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
const tabledata = deviceData.filter((item) => item.check_State === "检测完成");
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
}
}
},
{
immediate: true,
deep: true,
}
);
watch(
() => form.value,
(val, oldVal) => {
if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
}
},
{
immediate: true,
deep: true,
}
);
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 = async (id: string) => {
currentId.value = id; // 设置当前ID
handleCheckFunction(0)//切换左侧树默认css功能是设备检测
const boundPqDevList=ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const pqDevList_Result2 = await getBoundPqDevList({'planId': id,'checkStateList':[0,1,2]});
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
// 初始化计数对象
const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 };
// 遍历 boundPqDevList 并更新计数对象
boundPqDevList.value.forEach(t => {
if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
checkStateCount[t.checkState]++;
}
});
// 统计检测结果的数量
const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 };
boundPqDevList.value.forEach(t => {
if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
checkResultCount[t.checkResult]++;
}
});
//报告状态
const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 };
boundPqDevList.value.forEach(t => {
if (t.reportState !== undefined && t.reportState !== null && reportStateCount[t.reportState] !== undefined) {
reportStateCount[t.reportState]++;
}
});
chartsData1.value = [
{ value: checkStateCount[0], name: "未检", itemStyle: { color: '#fac858' } },
{ value: checkStateCount[1], name: "检测中", itemStyle: { color: '#ee6666' } },
{ value: checkStateCount[2], name: "检测完成", itemStyle: { color: '#91cc75' } },
{ value: checkStateCount[3], name: "归档", itemStyle: { color: '#5470c6' } },
];
chartsData2.value = [
{ value: checkResultCount[0], name: "未检" , itemStyle: { color: '#fac858' } },
{ value: checkResultCount[1], name: "不符合" , itemStyle: { color: '#ee6666' } },
{ value: checkResultCount[2], name: "符合", itemStyle: { color: '#91cc75' } },
];
chartsData3.value = [
{ value: reportStateCount[0], name: "未检" , itemStyle: { color: '#fac858' } },
{ value: reportStateCount[1], name: "未生成" , itemStyle: { color: '#ee6666' } },
{ value: reportStateCount[2], name: "已生成", itemStyle: { color: '#91cc75' } },
];
pieRef1.value.init();
pieRef2.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) => {
treeRef.value.getTreeData(data);
};
//前往检测
const handleDetection = () => {
router.push({
path: "/detection",
});
};
//前往计划详情
const planDetail = () => {
router.push({
path: "/plan/planList",
});
};
//功能选择css切换
const handleCheckFunction = (val: any) => {
editableTabsValue.value = '0';
form.value.activeChildTabs = 0;
tabsList.value.map((item: any, index: any) => {
if (val == item.value) {
item.checked = true;
} else {
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;
case 5://数据查询
tabLabel1.value = "数据查询";
break;
}
form.value.activeTabs = val;
};
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
chartsWidth.value = entry.contentRect.width;
//console.log('Charts Info Width:', chartsWidth.value);
pieRef1.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);
}
});
onBeforeMount(async () => {
const patternId = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
const reqPlan: Plan.ReqPlan = {
pattern: patternId,
datasourceIds: "",
sourceIds: [],
planId: "",
scriptName: "",
errorSysName: "",
sourceName: "",
devIds: [],
id: "",
name: "",
dataSourceId: "",
scriptId: "",
errorSysId: "",
timeCheck: 0,
testState: 0,
reportState: 0,
result: 0,
code: 0,
state: 0
};
// debugger;
const planList = await getPlanListByPattern(reqPlan);
if (planList.data[0].children[0]) {
currentId.value = planList.data[0].children[0].id;
}
if (chartsInfoRef.value) {
resizeObserver.observe(chartsInfoRef.value);
}
getTree(planList.data);
//getPieData('');
});
onUnmounted(() => {
if (chartsInfoRef.value) {
resizeObserver.unobserve(chartsInfoRef.value);
}
});
</script>
<style lang="scss" scoped>
.static {
width: 100%;
// height: calc(100vh - 165px);
height: 100%;
display: flex;
justify-content: space-between;
//background-color: #eee;
.left_tree {
width: 14% !important;
height: 100%;
background-color: #fff;
}
.right_container {
flex: none;
width: 85.8%;
// padding: 0 10px 0 10px;
margin-left: 10px;
height: 100%;
display: flex;
flex-direction: column;
//justify-content: space-between;
//align-items: center;
//box-sizing: border-box;
.container_function {
width: 100%;
height: auto;
background: #fff;
border-radius: 4px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
padding: 10px 20px 10px 20px;
box-sizing: border-box;
.function_item {
flex: none;
width: 6%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
cursor: pointer;
background-color: #607eab;
border-radius: 8px;
padding: 0px 30px;
margin-right: 50px;;
.item_img {
width: 60px;
height: 60px;
border-radius: 50%;
// background-color: #607eab;
display: flex;
align-items: center;
justify-content: center;
img {
width: 40px;
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;
font-weight: 800;
color:#fff;
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_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{
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 {
width: 100% !important;
// min-height: 200px !important;
height:100% !important;
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: 180px !important;
height:100%;
background-color: #eee;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.charts_info {
margin-top: 5px;
border-radius: 4px;
flex: none;
width: 33.1%;
height: 100% !important;
background-color: #fff;
// border-radius: 4px;
}
}
.el-tabs{
width: 100% !important;
border-radius: 4px;
}
.tabs-menu{
height: 100%;
}
.container_table {
// width: 100%;
flex: 1 !important;
//height: calc(100vh - 360px - 180px);
height: 100% !important;
border-radius: 4px;
width: 100% !important;
// display: none;
.table_info {
width: 100%;
height: 100%;
}
}
}
}
:deep(.el-collapse-item__header){
color: var(--el-color-primary);
font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}
:deep(.el-collapse-item__conten){
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}
:deep(.el-collapse-item__content ){
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}
</style>