632 lines
17 KiB
Vue
632 lines
17 KiB
Vue
<!-- 真正的首页 -->
|
||
<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="    检测进度展示：" name="1">
|
||
<!-- 饼图 -->
|
||
<div class="container_charts">
|
||
<div class="charts_info" ref="chartsInfoRef">
|
||
<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>
|
||
</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"></Table>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="已检设备" v-if="tabShow" :style="{ height: tabPaneHeight }">
|
||
<!-- 列表数据 -->
|
||
<div class="container_table" :style="{ height: tableHeight }">
|
||
<Table ref="tableRef2"></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'
|
||
|
||
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[]) => {
|
||
// console.log(val)
|
||
}
|
||
|
||
const handleCollapseChange = (val: string[]) => {
|
||
|
||
console.log(val)
|
||
console.log(val.length)
|
||
// 计算新的高度
|
||
const newHeight = val.length > 0 ? '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) => {
|
||
form.value.activeTabs = 0;
|
||
form.value.activeTabs = 3;
|
||
form.value.activeChildTabs = Number(val);
|
||
console.log(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: 5,
|
||
img: "/src/assets/images/plan/static/5.svg",
|
||
checked: false,
|
||
},
|
||
// {
|
||
// label: "设备归档",
|
||
// value: 4,
|
||
// img: "/src/assets/images/plan/static/4.svg",
|
||
// checked: false,
|
||
// },
|
||
]);
|
||
|
||
form.value.activeTabs = tabsList.value[0].value;
|
||
const tableRef1 = ref();
|
||
const tableRef2 = ref();
|
||
|
||
|
||
watch(
|
||
() => form.value,
|
||
(val, oldVal) => {
|
||
if (val) {
|
||
|
||
console.log(form.value.activeTabs,111);
|
||
|
||
if(form.value.activeTabs === 0 || form.value.activeTabs === 4)//设备检测、设备归档
|
||
{
|
||
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 === 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);
|
||
console.log(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 = () => {
|
||
chartsData1.value = [
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "未检测", itemStyle: { color: '#fac858' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "检测中", itemStyle: { color: '#ee6666' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "检测完成", itemStyle: { color: '#91cc75' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "归档", itemStyle: { color: '#5470c6' } },
|
||
];
|
||
chartsData2.value = [
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "未检测" , itemStyle: { color: '#fac858' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "有不合格项" , itemStyle: { color: '#ee6666' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "全部合格", itemStyle: { color: '#91cc75' } },
|
||
];
|
||
// pieRef2.value.init();
|
||
chartsData3.value = [
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
|
||
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "未检测" , itemStyle: { color: '#fac858' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "未生成" , itemStyle: { color: '#ee6666' } },
|
||
{ value: Math.floor(Math.random() * 100) + 1, name: "已生成", itemStyle: { color: '#91cc75' } },
|
||
|
||
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "未检测" , itemStyle: { color: '#fac858' } },
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项未生成报告" },
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "全部合格未生成报告" },
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项已生成报告" },
|
||
// { value: Math.floor(Math.random() * 100) + 1, name: "全部合格已生成报告" },
|
||
];
|
||
// pieRef3.value.init();
|
||
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 = () => {
|
||
treeRef.value.getTreeData(data);
|
||
// getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
|
||
// console.log(res, "99999999");
|
||
// // treeRef.value.getTreeData(res.data);
|
||
// 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,145,true);
|
||
pieRef2.value.reSize(chartsWidth.value * 0.95,145,true);
|
||
pieRef3.value.reSize(chartsWidth.value * 0.95,145,true);
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
// console.log();
|
||
if (chartsInfoRef.value) {
|
||
resizeObserver.observe(chartsInfoRef.value);
|
||
}
|
||
getTree();
|
||
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: 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_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:90%;
|
||
background-color: #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.charts_info {
|
||
flex: none;
|
||
width: 32.9%;
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|