ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
GYYM
2024-11-29 13:45:48 +08:00
parent a1d3485ba7
commit b39c076879
17 changed files with 871 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,9 +28,9 @@
<!-- <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1"> -->
<!-- <div class="dialog-log">
<el-collapse model-value="1" accordion>
<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检测进度展示：" name="1">
<!-- 饼图 -->
<div class="container_charts">
<div class="charts_info">
@@ -81,27 +81,25 @@
></pie>
</div>
</div>
<!-- </el-collapse-item>
</el-collapse-item>
</el-collapse>
</div> -->
<el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
<el-tab-pane :label="tabLabel1">
<!-- 列表数据 -->
<div class="container_table">
<Table ref="tableRef1"></Table>
</div>
</el-tab-pane>
<el-tab-pane label="已检设备" v-if="tabShow">
<!-- 列表数据 -->
<div class="container_table">
<Table ref="tableRef2"></Table>
</div>
</el-tab-pane>
</el-tabs>
</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>
@@ -112,6 +110,9 @@ 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 deviceData = deviceDataList.plan_devicedata
const treeRef = ref();
const form: any = ref({
activeTabs: 0, //功能选择,例如报告生成
@@ -128,10 +129,26 @@ 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)`;
};
const handleTabsChange = (val) => {
form.value.activeTabs = 0;
form.value.activeTabs = 3;
@@ -148,12 +165,12 @@ const tabsList = ref([
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: 2,
// img: "/src/assets/images/plan/static/2.svg",
// checked: false,
// },
{
label: "报告生成",
value: 3,
@@ -166,59 +183,36 @@ const tabsList = ref([
img: "/src/assets/images/plan/static/5.svg",
checked: false,
},
{
label: "设备归档",
value: 4,
img: "/src/assets/images/plan/static/4.svg",
checked: false,
},
// {
// label: "设备归档",
// value: 4,
// img: "/src/assets/images/plan/static/4.svg",
// checked: false,
// },
]);
// const tabsList = ref([
// {
// label: "自动检测",
// value: 0,
// img: "/src/assets/images/plan/static/1.svg",
// checked: true,
// },
// {
// label: "手动检测",
// value: 1,
// img: "/src/assets/images/plan/static/2.svg",
// checked: false,
// },
// {
// label: "设备复检",
// value: 2,
// img: "/src/assets/images/plan/static/6.svg",
// checked: false,
// },
// {
// label: "报告生成",
// value: 3,
// img: "/src/assets/images/plan/static/3.svg",
// checked: false,
// },
// {
// label: "设备归档",
// value: 4,
// img: "/src/assets/images/plan/static/4.svg",
// checked: false,
// },
// {
// label: "设备浏览",
// value: 5,
// img: "/src/assets/images/plan/static/5.svg",
// checked: false,
// },
// ]);
form.value.activeTabs = tabsList.value[0].value;
const tableRef1 = ref();
const tableRef2 = ref();
watch(
() => form.value,
(val, oldVal) => {
if (val) {
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
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);
}
}
},
{
@@ -258,21 +252,32 @@ const getPieData = () => {
];
chartsData2.value = [
{ value: Math.floor(Math.random() * 100) + 1, name: "未检测" , itemStyle: { color: '#fac858' } },
{ value: Math.floor(Math.random() * 100) + 1, name: "全部合格", itemStyle: { color: '#91cc75' } },
{ 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: "有不合格项未生成报告" },
{ 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: "未生成" , 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);
@@ -308,7 +313,7 @@ const handleCheckFunction = (val: any) => {
});
tabShow.value = false;
console.log("test",val,tabLabel1.value);
switch (val) {
case 0://自动检测
tabLabel1.value = "设备检测";
@@ -330,7 +335,7 @@ const handleCheckFunction = (val: any) => {
tabLabel1.value = "数据查询";
break;
}
console.log("test",val,tabLabel1.value);
form.value.activeTabs = val;
};
@@ -367,14 +372,13 @@ onMounted(() => {
//align-items: center;
//box-sizing: border-box;
.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;
@@ -384,27 +388,27 @@ onMounted(() => {
.function_item {
flex: none;
width: 6%;
height: 40px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-direction: column;
cursor: pointer;
background-color: #607eab;
border-radius: 8px;
padding: 0px 30px;
.item_img {
width: 30px;
height: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
// background-color: #607eab;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
img {
width: 20px;
width: 40px;
height: auto;
}
}
@@ -421,7 +425,6 @@ onMounted(() => {
.item_text {
p {
width: 80px;
margin: 0;
font-weight: 800;
color: var(--el-color-primary);
@@ -447,10 +450,90 @@ onMounted(() => {
}
}
}
// .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;
.dialog-log{
// .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;
//min-height: 200px !important;
height:auto;
background-color: #eee;
// display: flex;
@@ -461,26 +544,26 @@ onMounted(() => {
.el-collapse {
width: 100% !important;
// min-height: 200px !important;
height:auto;
height:100% !important;
background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
margin-bottom: 10px;
}
// margin-bottom: 10px;
}
.el-collapse-item{
width: 100% !important;
.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%;
//min-height: 180px !important;
height:90%;
background-color: #eee;
display: flex;
justify-content: space-between;
@@ -500,10 +583,14 @@ onMounted(() => {
border-radius: 4px;
}
.tabs-menu{
height: 100%;
}
.container_table {
// width: 100%;
flex: 1 !important;
height: calc(100vh - 360px - 147px);
height: calc(100vh - 360px - 180px);
//height: 100% !important;
border-radius: 4px;
width: 100% !important;
// display: none;