update 设备效率分析
This commit is contained in:
@@ -13,46 +13,64 @@
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
class="base-table__margin"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<!-- :page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize" -->
|
||||
<!-- <method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" /> -->
|
||||
</base-table>
|
||||
<el-row>
|
||||
<el-col class="custom-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
:stretch="true"
|
||||
@tab-click="handleTabClick">
|
||||
<el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
class="base-table__margin"
|
||||
:table-props="tableProps"
|
||||
:page="1"
|
||||
:limit="10"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun"></base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="'\u3000可视化\u3000'" name="graph">
|
||||
<div
|
||||
v-if="activeName == 'graph'"
|
||||
class="graph"
|
||||
style="display: flex; flex-direction: column; position: relative">
|
||||
<div class="blue-title">各设备加工数量</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="icon blue"></span>
|
||||
<span class="text">工作时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon green"></span>
|
||||
<span class="text">停机时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon purple"></span>
|
||||
<span class="text">故障时长</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="icon yellow"></span>
|
||||
<span class="text">速度开动率</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="graph-grid">
|
||||
<div class="bg-grid grid-line">
|
||||
<div class="grid-item" v-for="item in list.length" :key="item"></div>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<!-- <pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" /> -->
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<base-dialog
|
||||
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'"
|
||||
:dialogVisible="open"
|
||||
:width="visualizationOpen ? '80%' : '700px'"
|
||||
@closed="closed"
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<div class="visualization" v-if="visualizationOpen">
|
||||
<pie-chart v-for="item in list" :key="item.id" :value="item" />
|
||||
</div>
|
||||
<div v-if="trendOpen">
|
||||
<h1>查看趋势</h1>
|
||||
</div>
|
||||
</base-dialog>
|
||||
<div class="bg-grid grid-charts">
|
||||
<pie-chart
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:value="item" />
|
||||
<!-- <pie-chart v-for="item in 5" :key="item" :value="item" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -68,6 +86,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'table',
|
||||
open: false,
|
||||
visualizationOpen: false,
|
||||
trendOpen: false,
|
||||
@@ -226,7 +245,7 @@ export default {
|
||||
parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// label: '时间段',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
@@ -240,7 +259,7 @@ export default {
|
||||
parent: 'dateFilterType',
|
||||
// 日期选择
|
||||
type: 'datePicker',
|
||||
label: '日期',
|
||||
// label: '日期',
|
||||
dateType: 'date',
|
||||
placeholder: '选择日期',
|
||||
format: 'yyyy-MM-dd',
|
||||
@@ -255,16 +274,16 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '设备可视化',
|
||||
name: 'visualization',
|
||||
plain: true,
|
||||
color: 'success',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '设备可视化',
|
||||
// name: 'visualization',
|
||||
// plain: true,
|
||||
// color: 'success',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: 'OEE',
|
||||
@@ -393,6 +412,8 @@ export default {
|
||||
},
|
||||
|
||||
submitForm() {},
|
||||
|
||||
handleTabClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -402,4 +423,141 @@ export default {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
:deep(.custom-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-title {
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 1px;
|
||||
background: #0b58ff;
|
||||
}
|
||||
}
|
||||
|
||||
.graph-grid {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #ccc;
|
||||
// background: #0003;
|
||||
}
|
||||
.bg-grid {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
grid-template-columns: repeat(4, minmax(280px, 1fr));
|
||||
grid-auto-columns: 280px;
|
||||
grid-auto-rows: 290px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
display: inline-block;
|
||||
border: 8px solid #fff;
|
||||
}
|
||||
|
||||
.grid-charts {
|
||||
position: absolute;
|
||||
width: calc(100% - 24px);
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.grid-item:not(:first-child) {
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.legend .legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.legend .legend-item .icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
margin-right: 4px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.legend .legend-item .text {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3da8fd;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #8ef0ab;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #6b5cfd;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffc72a;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1390px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(3, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1190px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.bg-grid {
|
||||
grid-template-columns: repeat(1, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user