731 lines
21 KiB
Vue
731 lines
21 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: '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' :isTimeCheck='isTimeCheck'></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" :id='currentId'></Table>-->
|
||
<!-- </div>-->
|
||
<!-- </el-tab-pane>-->
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
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 {getBoundPqDevList, getPlanListByPattern} from '@/api/plan/plan.ts'
|
||
import {onBeforeMount, 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 {ResultData} from "@/api/interface";
|
||
|
||
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 checkStateTable = ref<number[]>([0, 1, 2])
|
||
const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
|
||
|
||
const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
|
||
const tableHeight = ref('calc(100% - 5px)'); // 初始高度
|
||
const handleChange = (val: string[]) => {
|
||
}
|
||
const isTimeCheck = ref<boolean>(false);
|
||
const planList = ref<ResultData<Plan.ReqPlan[]>>();
|
||
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 chartsData1: any = ref([]),
|
||
chartsData2: any = ref([]),
|
||
chartsData3: any = ref([]);
|
||
|
||
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
|
||
for (const plan of plans) {
|
||
if (plan.id === id) {
|
||
return plan;
|
||
}
|
||
if (plan.children) {
|
||
const foundPlan = findPlanById(plan.children, id);
|
||
if (foundPlan) {
|
||
return foundPlan;
|
||
}
|
||
}
|
||
}
|
||
return undefined;
|
||
};
|
||
|
||
const getPieData = async (id: string) => {
|
||
currentId.value = id; // 设置当前ID
|
||
//handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
|
||
|
||
// 初始化计数对象
|
||
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 reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
|
||
if (id) {
|
||
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
|
||
const plan = findPlanById(planList.value?.data || [], id);
|
||
if (plan) {
|
||
isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
|
||
} else {
|
||
// 处理未找到计划的情况
|
||
isTimeCheck.value = false; // 或者其他默认值
|
||
}
|
||
const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList': [0, 1, 2, 3]});
|
||
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
|
||
// 遍历 boundPqDevList 并更新计数对象
|
||
boundPqDevList.value.forEach(t => {
|
||
if (t.checkState !== undefined && t.checkState !== null && checkStateCount[t.checkState] !== undefined) {
|
||
checkStateCount[t.checkState]++;
|
||
}
|
||
});
|
||
boundPqDevList.value.forEach(t => {
|
||
if (t.checkResult !== undefined && t.checkResult !== null && checkResultCount[t.checkResult] !== undefined) {
|
||
checkResultCount[t.checkResult]++;
|
||
}
|
||
});
|
||
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[2], name: "未检", itemStyle: {color: '#fac858'}},
|
||
{value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}},
|
||
{value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}},
|
||
];
|
||
chartsData3.value = [
|
||
{value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}},
|
||
{value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}},
|
||
{value: reportStateCount[1], 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://自动检测
|
||
checkStateTable.value = [0, 1, 2]
|
||
tabLabel1.value = "设备检测";
|
||
break;
|
||
case 1://手动检测
|
||
tabLabel1.value = "手动检测";
|
||
break;
|
||
case 2://设备复检
|
||
tabLabel1.value = "设备复检";
|
||
break;
|
||
case 3://报告生成
|
||
checkStateTable.value = [2, 3]
|
||
tabLabel1.value = "报告生成";
|
||
//tabShow.value = true;
|
||
break;
|
||
case 4://设备归档
|
||
checkStateTable.value = [2]
|
||
tabLabel1.value = "设备归档";
|
||
break;
|
||
case 5://数据查询
|
||
checkStateTable.value = [2, 3]
|
||
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
|
||
};
|
||
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>;
|
||
|
||
if (planList.value.data[0].children[0]) {
|
||
currentId.value = planList.value.data[0].children[0].id;
|
||
}
|
||
if (chartsInfoRef.value) {
|
||
resizeObserver.observe(chartsInfoRef.value);
|
||
}
|
||
getTree(planList.value.data);
|
||
|
||
getPieData(currentId.value);
|
||
});
|
||
|
||
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>
|