样式调整
This commit is contained in:
zhujiyan
@@ -8,23 +8,20 @@
|
||||
<div class="right_container">
|
||||
<!-- 功能选择 -->
|
||||
<div class="container_function">
|
||||
<!-- <div class="function_title"><p>功能选择</p></div> -->
|
||||
<div class="function_main">
|
||||
<div
|
||||
class="function_item"
|
||||
:class="
|
||||
item.checked ? 'function_item checked_function' : 'function_item'
|
||||
"
|
||||
v-for="(item, index) in tabsList"
|
||||
:key="index"
|
||||
@click="handleCheckFunction(index)"
|
||||
>
|
||||
<div class="item_img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="item_text">
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="function_item"
|
||||
:class="
|
||||
item.checked ? 'function_item checked_function' : 'function_item'
|
||||
"
|
||||
v-for="(item, index) in tabsList"
|
||||
:key="index"
|
||||
@click="handleCheckFunction(index)"
|
||||
>
|
||||
<div class="item_img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="item_text">
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,6 +60,11 @@
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
textAlign: 'right',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
},
|
||||
},
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
@@ -73,115 +75,16 @@
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选条件 -->
|
||||
<div class="container_title">
|
||||
<el-form :model="form" label-width="80px" :inline="true">
|
||||
<!-- <el-form-item label="功能选择">
|
||||
<el-select v-model="form.activeTabs" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in tabsList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报告状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkReportStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkReportStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkResult" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in checkResultList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定状态" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceBindStatus" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceBindStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceType" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceTypeList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="制造厂商" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.manufacturer" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in manufacturerList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleDetection"
|
||||
v-if="form.activeTabs === 0"
|
||||
>启动自动检测</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleDetection"
|
||||
v-if="form.activeTabs === 1"
|
||||
>启动手动检测</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 2"
|
||||
>报告生成</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 5"
|
||||
>设备导入</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" @click="planDetail">计划详情</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 列表数据 -->
|
||||
<div class="container_table">
|
||||
<Table></Table>
|
||||
<Table ref="tableRef"></Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getStaticTreeData } from "@/api/plan/static.ts";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
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";
|
||||
@@ -239,105 +142,22 @@ const tabsList = ref([
|
||||
checked: false,
|
||||
},
|
||||
]);
|
||||
//检测状态数据
|
||||
const checkStatusList = [
|
||||
{
|
||||
label: "未检测",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "检测中",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "检测完成",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "归档",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
//检测报告状态数据
|
||||
const checkReportStatusList = [
|
||||
{
|
||||
label: "未生成报告",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已生成报告",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//检测结果数组
|
||||
const checkResultList = [
|
||||
{
|
||||
label: "/",
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
label: "不合格",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "合格",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//绑定状态数组
|
||||
const deviceBindStatusList = [
|
||||
{
|
||||
label: "未绑定",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已绑定",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//设备类型数组
|
||||
const deviceTypeList = [
|
||||
{
|
||||
label: "PQS882A",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "PQS882B4",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "PQS882B5",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "PQS882B6",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "PQS882B7",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "PQS882B8",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
//制造厂商数组
|
||||
const manufacturerList = [
|
||||
{
|
||||
label: "南京灿能电力",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "南瑞继保",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "中电",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
form.value.activeTabs = tabsList.value[0].value;
|
||||
const tableRef = ref();
|
||||
watch(
|
||||
() => form.value,
|
||||
(val, oldVal) => {
|
||||
if (val) {
|
||||
tableRef.value && tableRef.value.changeActiveTabs(form.value.activeTabs);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const pieRef1 = ref(),
|
||||
pieRef2 = ref(),
|
||||
pieRef3 = ref();
|
||||
@@ -417,151 +237,133 @@ onMounted(() => {
|
||||
height: calc(100vh - 165px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eee;
|
||||
// background-color: #eee;
|
||||
|
||||
.left_tree {
|
||||
width: auto;
|
||||
width: 14% !important;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.right_container {
|
||||
flex: 1;
|
||||
// width: 100%;
|
||||
padding: 0 10px 0 10px;
|
||||
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_title {
|
||||
width: 100%;
|
||||
// min-height: 60px;
|
||||
height: auto !important;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.el-form {
|
||||
width: 100%;
|
||||
.el-form-item {
|
||||
.el-button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container_function {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 50px 10px 30px;
|
||||
padding: 10px 20px 10px 20px;
|
||||
box-sizing: border-box;
|
||||
.function_title {
|
||||
height: 100%;
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
// line-height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.function_main {
|
||||
flex: 1;
|
||||
|
||||
.function_item {
|
||||
flex: none;
|
||||
width: 6%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.function_item {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
background-color: #607eab;
|
||||
border-radius: 8px;
|
||||
padding: 0px 30px;
|
||||
|
||||
.item_img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
// background-color: #607eab;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
// border: 1px solid var(--el-color-primary);
|
||||
.item_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #607eab;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 30px;
|
||||
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;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 800;
|
||||
color: #000;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.function_item:hover,
|
||||
.checked_function {
|
||||
.item_img {
|
||||
background-color: var(--el-color-primary);
|
||||
|
||||
.item_img:nth-child(3),
|
||||
.item_img:nth-child(6) {
|
||||
padding: 10px !important;
|
||||
|
||||
img {
|
||||
width: 20px !important;
|
||||
height: auto;
|
||||
}
|
||||
.item_text {
|
||||
p {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.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_charts {
|
||||
width: 100%;
|
||||
min-height: 200px !important;
|
||||
// border: 2px solid green;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.charts_info {
|
||||
flex: none;
|
||||
width: 32.9%;
|
||||
height: 100% !important;
|
||||
// border: 2px solid pink;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.container_table {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// height: 400px;
|
||||
// width: 100%;
|
||||
flex: 1 !important;
|
||||
height: calc(100vh - 360px);
|
||||
border-radius: 4px;
|
||||
width: 100% !important;
|
||||
// display: none;
|
||||
.table_info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-select {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user