lb #30

Merged
g7hoo merged 23 commits from lb into test 2023-09-22 09:57:16 +08:00
2 changed files with 416 additions and 78 deletions
Showing only changes of commit 52bc38499c - Show all commits

View File

@ -6,7 +6,34 @@
-->
<template>
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
<div class="chart-grid-item" style="">
<div
class="pie-chart"
ref="pieChart"
:data-eqname="value.equipmentName || 'Default'"></div>
<div class="data-view">
<div class="data-view__item">
<!-- <div class="data-view__item__value">111</div> -->
<div class="data-view__item__value">{{ textData.workTime }}</div>
<div class="data-view__item__title blue">工作时长</div>
</div>
<div class="data-view__item">
<!-- <div class="data-view__item__value">22</div> -->
<div class="data-view__item__value">{{ textData.stopTime }}</div>
<div class="data-view__item__title green">停机时长</div>
</div>
<div class="data-view__item">
<!-- <div class="data-view__item__value">10</div> -->
<div class="data-view__item__value">{{ textData.downTime }}</div>
<div class="data-view__item__title purple">故障时长</div>
</div>
<div class="data-view__item">
<!-- <div class="data-view__item__value">100%</div> -->
<div class="data-view__item__value">{{ textData.peEfficiency }}</div>
<div class="data-view__item__title yellow">速度开动率</div>
</div>
</div>
</div>
</template>
<script>
@ -19,7 +46,27 @@ export default {
data() {
return {
chart: null,
textData: {
workTime: '',
downTime: '',
stopTime: '',
peEfficiency: '',
},
config: {
title: {
text: '产线1', //<=========
top: '35%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 18,
},
subtext: '设备', //<=========
subtextStyle: {
fontSize: 14,
},
},
color: ['#3da8fd', '#8ef0ab', '#6b5cfd', '#FFC72A', 'transparent'],
grid: {
top: 0,
left: 0,
@ -30,6 +77,7 @@ export default {
trigger: 'item',
},
legend: {
show: false,
top: '0%',
left: 'center',
textStyle: {
@ -39,34 +87,70 @@ export default {
itemHeight: 10,
},
series: [
//
{
name: this.value.equipmentName || 'Default',
//
name: '',
type: 'pie',
radius: ['40%', '75%'],
avoidLabelOverlap: false,
radius: ['75%', '90%'],
center: ['50%', '45%'],
label: {
show: false,
position: 'center',
},
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
name: ['工作时长', '停机时长', '故障时长'][index],
value: this.value[v],
})),
// data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' },
// ],
data: [
//<=========
{ name: '工作时长', value: 1048 },
{ name: '停机时长', value: 735 },
{ name: '故障时长', value: 580 },
],
},
{
//
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['60%', '75%'],
itemStyle: {
borderRadius: 10,
},
label: {
show: false,
},
data: [
//<=========
{ name: '总', value: 3000 },
{ name: '', value: 1400 },
],
},
// {
// name: this.value.equipmentName || 'Default',
// type: 'pie',
// radius: ['40%', '75%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center',
// },
// data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
// name: ['', '', ''][index],
// value: this.value[v],
// })),
// // data: [
// // { value: 1048, name: 'Search Engine' },
// // { value: 735, name: 'Direct' },
// // { value: 580, name: 'Email' },
// // { value: 484, name: 'Union Ads' },
// // { value: 300, name: 'Video Ads' },
// // ],
// },
],
},
};
},
mounted() {
console.log('value', this.value);
if (!this.chart) {
this.chart = echarts.init(this.$el);
this.chart = echarts.init(this.$refs.pieChart);
this.$nextTick(() => {
this.chart.setOption(this.config);
});
@ -75,24 +159,120 @@ export default {
beforeDestroy() {
if (this.chart) this.chart.dispose();
},
methods: {},
watch: {
value: {
handler(val) {
this.updateConfig(val);
if (this.chart) this.chart.setOption(this.config);
},
deep: true,
immediate: true,
},
},
methods: {
updateConfig(item) {
const {
lineName, // 线
equipmentName, //
downTime, // (h)
stopTime, // (h)
workTime, // (h)
peEfficiency, //
timeEfficiency, //
//===============//
sectionName,
workRate,
stopRate,
downRate,
realProcSpeed,
designProcSpeed,
oee,
teep,
downCount,
mtbf,
mttr,
} = item;
this.config.title.text = lineName;
this.config.title.subtext = equipmentName;
this.config.series[0].data = [
{ name: '工作时长', value: workTime },
{ name: '停机时长', value: stopTime },
{ name: '故障时长', value: downTime },
];
this.config.series[1].data = [
{ name: '速度开动率', value: peEfficiency },
{ name: '', value: Math.ceil(peEfficiency) - peEfficiency },
];
//
this.textData = {
workTime: +workTime.toFixed(2),
stopTime: +stopTime.toFixed(2),
downTime: +downTime.toFixed(2),
peEfficiency: +peEfficiency.toFixed(2),
};
},
},
};
</script>
<style scoped lang="scss">
.pie-chart {
.chart-grid-item {
padding: 12px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.pie-chart {
height: 1px;
width: 100%;
flex: 1;
padding: 12px;
min-height: 320px;
background: #f1f1f1;
position: relative;
}
.pie-chart::before {
content: attr(data-eqname);
.data-view {
display: flex;
justify-content: center;
}
.data-view__item {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
user-select: none;
padding: 0 6px;
}
.data-view__item:not(:last-child) {
border-right: 1px solid #f1f1f1;
}
.data-view__item__value {
font-size: 16px;
line-height: 1;
position: absolute;
top: -16px;
left: 0;
line-height: 24px;
}
.data-view__item__title {
font-size: 8px;
line-height: 14px;
}
.blue {
color: #3da8fd;
}
.green {
color: #8ef0ab;
}
.purple {
color: #6b5cfd;
}
.yellow {
color: #ffc72a;
}
</style>

View File

@ -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>