Commit 7207252a authored by liuzhaoh's avatar liuzhaoh

修复样式问题

parent 5c6fcb46
...@@ -400,7 +400,9 @@ onBeforeUnmount(() => {}); ...@@ -400,7 +400,9 @@ onBeforeUnmount(() => {});
width: 100%; width: 100%;
} }
.content-box { .content-box {
// margin-top: 24px; display: flex;
flex-direction: column;
height: 100%;
.search { .search {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -408,8 +410,9 @@ onBeforeUnmount(() => {}); ...@@ -408,8 +410,9 @@ onBeforeUnmount(() => {});
margin-bottom: 16px; margin-bottom: 16px;
} }
.table-box { .table-box {
flex: 1;
width: 100%; width: 100%;
height: calc(100vh - 280px); height: calc(100vh - 600px);
} }
} }
......
...@@ -1254,7 +1254,8 @@ const handlePaginationChange = (pagination) => { ...@@ -1254,7 +1254,8 @@ const handlePaginationChange = (pagination) => {
text-align: center; text-align: center;
} }
.table-box { .table-box {
height: calc(100vh - 200px); height: calc(100vh - 600px);
flex: 1;
} }
.yellow { .yellow {
// color: #faa508; // color: #faa508;
......
...@@ -1249,7 +1249,8 @@ const handlePaginationChange = (pagination) => { ...@@ -1249,7 +1249,8 @@ const handlePaginationChange = (pagination) => {
text-align: center; text-align: center;
} }
.table-box { .table-box {
height: calc(100vh - 200px); height: calc(100vh - 600px);
flex: 1;
} }
.yellow { .yellow {
// color: #faa508; // color: #faa508;
......
...@@ -328,6 +328,23 @@ onBeforeUnmount(() => {}); ...@@ -328,6 +328,23 @@ onBeforeUnmount(() => {});
width: 100%; width: 100%;
} }
.content-box { .content-box {
display: flex;
flex-direction: column;
height: 100%;
.search {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-box {
width: 100%;
height: calc(100vh - 600px);
flex: 1;
}
}
.default-btn {
.search { .search {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
...@@ -617,6 +617,9 @@ $borderColor: #bbbdc391; ...@@ -617,6 +617,9 @@ $borderColor: #bbbdc391;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
overflow: hidden; overflow: hidden;
overflow: auto;
display: flex;
flex-direction: column;
} }
.top-box { .top-box {
padding-top: 18px; padding-top: 18px;
...@@ -633,7 +636,6 @@ $borderColor: #bbbdc391; ...@@ -633,7 +636,6 @@ $borderColor: #bbbdc391;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
width: 100%; width: 100%;
height: 100%;
height: 63vh; height: 63vh;
background: #fff; background: #fff;
.chart-box { .chart-box {
...@@ -656,7 +658,7 @@ $borderColor: #bbbdc391; ...@@ -656,7 +658,7 @@ $borderColor: #bbbdc391;
border: 1px solid rgba(13, 15, 18, 0.1); border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1); box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
background: #fff; background: #fff;
padding: 10px; padding: 1%;
box-sizing: border-box; box-sizing: border-box;
.battery { .battery {
width: 100%; width: 100%;
...@@ -801,6 +803,7 @@ $borderColor: #bbbdc391; ...@@ -801,6 +803,7 @@ $borderColor: #bbbdc391;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
flex: 1;
} }
.layout2 { .layout2 {
display: flex; display: flex;
......
<template> <template>
<div class="equipment-management"> <div class="equipment-management">
<div class="content-box"> <div class="search">
<div class="search"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="工序">
<el-form-item label="工序"> <el-select
<el-select v-model="formInline.productionLineId"
v-model="formInline.productionLineId" placeholder="请选择工序"
placeholder="请选择工序" style="width: 120px"
style="width: 120px" >
> <el-option
<el-option v-for="item in processOptions"
v-for="item in processOptions" :key="item.productionLineId"
:key="item.productionLineId" :label="item.productionLineName"
:label="item.productionLineName" :value="item.productionLineId"
:value="item.productionLineId"
/>
</el-select>
</el-form-item>
<el-form-item label="除尘器名称">
<el-input
v-model="formInline.dusterName"
placeholder="请输入除尘器名称"
style="width: 240px"
clearable
/> />
</el-form-item> </el-select>
<el-form-item label="设备名称"> </el-form-item>
<el-input <el-form-item label="除尘器名称">
v-model="formInline.deviceName" <el-input
placeholder="请输入设备名称" v-model="formInline.dusterName"
style="width: 240px" placeholder="请输入除尘器名称"
clearable style="width: 240px"
clearable
/>
</el-form-item>
<el-form-item label="设备名称">
<el-input
v-model="formInline.deviceName"
placeholder="请输入设备名称"
style="width: 240px"
clearable
/>
</el-form-item>
<el-form-item label="设备类型">
<el-select
v-model="formInline.deviceTypeId"
placeholder="请选择设备类型"
style="width: 120px"
>
<el-option
v-for="item in deviceTypeEnum"
:key="item.deviceTypeId"
:label="item.deviceType"
:value="item.deviceTypeId"
/> />
</el-form-item> </el-select>
<el-form-item label="设备类型"> </el-form-item>
<el-select
v-model="formInline.deviceTypeId"
placeholder="请选择设备类型"
style="width: 120px"
>
<el-option
v-for="item in deviceTypeEnum"
:key="item.deviceTypeId"
:label="item.deviceType"
:value="item.deviceTypeId"
/>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="default" class="default-btn" @click="onReset" <el-button type="default" class="default-btn" @click="onReset"
>重置</el-button >重置</el-button
> >
<el-button <el-button
type="primary" type="primary"
class="search-btn margin-right-10" class="search-btn margin-right-10"
@click="onQuery" @click="onQuery"
>查询</el-button >查询</el-button
> >
<el-upload <el-upload
ref="upload" ref="upload"
class="upload-demo" class="upload-demo"
:action="uploadUrl" :action="uploadUrl"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-error="handleError" :on-error="handleError"
:on-success="handleSuccess" :on-success="handleSuccess"
:on-progress="handleProgress" :on-progress="handleProgress"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:headers="{ :headers="{
token: getToken('TOKEN'), token: getToken('TOKEN'),
}" }"
>
<el-button type="success" class="add-btn margin-right-10"
>导入</el-button
> >
<el-button type="success" class="add-btn margin-right-10" </el-upload>
>导入</el-button <el-button type="success" class="add-btn" @click="onExportFile"
> >导出</el-button
</el-upload> >
<el-button type="success" class="add-btn" @click="onExportFile" <el-button type="success" class="add-btn" @click="onDownloadTemplate"
>导出</el-button >模板下载</el-button
> >
<el-button </el-form-item>
type="success" </el-form>
class="add-btn" </div>
@click="onDownloadTemplate" <div class="table-box">
>模板下载</el-button <common-table
> :data="tableData"
</el-form-item> :columns="tableColumns"
</el-form> :default-page-size="10"
</div> @pagination-change="handlePaginationChange"
<div class="table-box"> :total="total"
<common-table align="center"
:data="tableData" :pagination-texts="{
:columns="tableColumns" total: '共',
:default-page-size="10" sizeChange: '条/页',
@pagination-change="handlePaginationChange" prev: '前一页',
:total="total" next: '后一页',
align="center" jumper: '跳至',
:pagination-texts="{ }"
total: '共', >
sizeChange: '条/页', <template #index="{ $index }">
prev: '前一页', {{ getIndex($index) }}
next: '后一页', </template>
jumper: '跳至',
}"
>
<template #index="{ $index }">
{{ getIndex($index) }}
</template>
<template #operation="{ row }"> <template #operation="{ row }">
<el-button text @click="getParamsConfig(row)"> 参数设置 </el-button> <el-button text @click="getParamsConfig(row)"> 参数设置 </el-button>
</template> </template>
</common-table> </common-table>
</div>
</div> </div>
<setParamsDialog <setParamsDialog
v-model:dialogVisible="dialogVisible" v-model:dialogVisible="dialogVisible"
...@@ -461,17 +456,18 @@ onMounted(() => { ...@@ -461,17 +456,18 @@ onMounted(() => {
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
padding: 20px; padding: 20px;
.content-box { display: flex;
.search { flex-direction: column;
display: flex; .search {
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
margin-bottom: 16px; align-items: center;
} margin-bottom: 16px;
.table-box { }
width: 100%; .table-box {
height: calc(100vh - 235px); width: 100%;
} height: calc(100vh - 400px);
flex: 1;
} }
} }
.default-btn { .default-btn {
......
...@@ -297,6 +297,22 @@ onBeforeUnmount(() => {}); ...@@ -297,6 +297,22 @@ onBeforeUnmount(() => {});
width: 100%; width: 100%;
} }
.content-box { .content-box {
display: flex;
flex-direction: column;
height: 100%;
.search {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.table-box {
flex: 1;
width: 100%;
height: calc(100vh - 600px);
}
}
.default-btn {
.search { .search {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment