This commit is contained in:
lb 2023-09-25 15:47:39 +08:00
parent 56f209a27e
commit bbbfa9644d
10 changed files with 296 additions and 43 deletions

View File

@ -211,6 +211,7 @@ export default {
switch: true,
label: '是否采集', // 0 , 1
prop: 'collection',
value: 1,
bind: {
'active-value': 1,
'inactive-value': 0,

View File

@ -419,7 +419,7 @@ export default {
handleDelete(row) {
const id = row.id;
this.$modal
.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?')
.confirm('是否确认删除"' + row.name + '"的参数绑定?')
.then(function () {
return deleteEquipmentPlcParam(id);
})

View File

@ -55,7 +55,10 @@
</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
class="grid-item"
v-for="item in list.length"
:key="item"></div>
</div>
<div class="bg-grid grid-charts">
@ -253,7 +256,7 @@ export default {
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'recordTime',
param: 'timerange',
},
{
parent: 'dateFilterType',
@ -264,7 +267,7 @@ export default {
placeholder: '选择日期',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
param: 'recordTime',
param: 'timeday',
},
],
},
@ -383,22 +386,18 @@ export default {
if (btnName == 'search') {
this.queryParams.factoryId = payload.factoryId || null;
this.queryParams.lineId = payload.lineId || null;
if (payload.recordTime != null) {
if (typeof payload.recordTime == 'string') {
if (payload.recordTime.trim() !== '') {
this.queryParams.recordTime = [
`${payload.recordTime} 00:00:00`,
`${payload.recordTime} 23:59:59`,
];
}
} else {
this.queryParams.recordTime = payload.recordTime;
}
} else {
this.queryParams.recordTime = null;
if (0 == payload.dateFilterType) {
this.queryParams.recordTime = payload.timerange;
} else if (1 == payload.dateFilterType) {
this.queryParams.recordTime = [
`${payload.timeday} 00:00:00`,
`${payload.timeday} 23:59:59`,
];
}
this.getList();
} else {
this.queryParams.recordTime = null;
}
this.getList();
},
cancel() {

View File

@ -37,8 +37,14 @@ export default {
option() {
const opt = [];
this.list.map((eq) => {
/** [设备名, ok数量, 不ok数量] */
opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
/** [设备名, ok数量, 不ok数量, 加工数量, 合格率] */
opt.push([
eq.equipmentName,
eq.okQuantity,
eq.nokQuantity,
eq.totalQuantity,
eq.passRate.toFixed(2),
]);
});
return {
color: ['#288AFF', '#8EF0AB'],
@ -51,7 +57,7 @@ export default {
legend: {
itemWidth: 12,
itemHeight: 12,
right: 0
right: 0,
},
grid: {
left: '1%',
@ -104,6 +110,17 @@ export default {
stack: 's',
data: opt.map((item) => item[2]),
},
{
name: '加工数量',
type: 'bar',
barWidth: 20,
data: opt.map((item) => item[3]),
},
{
name: '合格率',
type: 'line',
data: opt.map((item) => item[4]),
},
],
};
},

View File

@ -6,7 +6,9 @@
-->
<template>
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
<div
class="status-timegraph-container"
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
<el-row
class=""
style="
@ -28,10 +30,14 @@
<el-row
class=""
style="
height: 1px;
flex: 1;
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 32px;
border-radius: 8px;
display: flex;
flex-direction: column;
">
<el-row :gutter="20">
<el-col :span="6">
@ -64,9 +70,15 @@
</div>
</el-col>
</el-row>
<div class="main-area">
<div class="graphs" v-if="graphList.length">
<div class="graph" v-for="eq in graphList" :key="eq.key">
<div
class="main-area"
style="flex: 1; display: flex; flex-direction: column">
<div
class="graphs"
v-show="graphList.length"
id="status-chart"
style="height: 1px; flex: 1">
<!-- <div class="graph" v-for="eq in graphList" :key="eq.key">
<h2 class="graph-title">{{ eq.key }}</h2>
<div class="graph-content">
@ -98,9 +110,9 @@
"></div>
</el-popover>
</div>
</div>
</div> -->
</div>
<h2 v-else>请添加设备</h2>
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
</div>
</el-row>
@ -128,12 +140,65 @@
</template>
<script>
import * as echarts from 'echarts';
var data = [];
var categories = [];
var types = [
{ name: '运行', color: '#5ad8a6' },
{ name: '故障', color: '#fc9c91' },
{ name: '停机', color: '#000' },
];
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
// var height = api.size([0, 1])[1] * 0.8;
var height = 56
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
data.push({
name: 'running',
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
itemStyle: {
normal: {
color: types[0].color,
},
},
});
export default {
name: 'SGStatus',
components: {},
props: {},
data() {
return {
chart: null,
searchBarFormConfig: [
{
type: 'select',
@ -153,15 +218,17 @@ export default {
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange', // datetimerange
// dateType: 'daterange', // datetimerange
dateType: 'date',
// format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
// valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
// startPlaceholder: '',
// endPlaceholder: '',
placeholder: '选择日期',
// defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime',
},
{
@ -210,6 +277,90 @@ export default {
// },
// ],
// ],
chartOption: {
grid: {
top: 32,
left: 128,
right: 128,
bottom: 64,
},
tooltip: {
// show: false,
formatter: function (params) {
return (
params.marker +
params.name +
': ' +
new Date(params.value[1]).toLocaleTimeString() +
' - ' +
new Date(params.value[2]).toLocaleTimeString()
);
},
},
xAxis: {
type: 'time',
min: getStartTime(1691568181000),
max: getStartTime(1691568181000 + 3600 * 24 * 1000),
splitNumber: 10,
axisLabel: {
// rotate: -15,
formatter: function (val) {
return new Date(val).toLocaleTimeString();
},
},
axisTick: {
show: true,
},
splitLine: {
show: false,
},
},
yAxis: [
{
interval: 40,
axisLine: {
// show: false,
lineStyle: {
color: '',
},
},
axisLabel: {
fontSize: 18,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
},
data: categories,
},
{
axisLine: {
// show: false,
lineStyle: {
color: '',
},
},
data: [],
},
],
series: [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: data,
},
],
},
};
},
computed: {},
@ -219,7 +370,38 @@ export default {
this.initEquipment();
this.getList();
},
mounted() {},
watch: {
graphList: {
handler(val) {
if (val && val.length) {
this.$nextTick(() => {
if (!this.chart) this.initChart();
this.setInitialConfig();
this.handleGraphList();
});
}
return;
},
deep: true,
immediate: true,
},
},
methods: {
setInitialConfig() {
console.log('in setInitialConfig', this.chartOption);
this.chart.setOption(this.chartOption);
},
handleGraphList() {
console.log('in handleGraphList:', this.graphList);
},
initChart() {
const el = document.getElementById('status-chart');
this.chart = echarts.init(el);
},
/** 重置查询条件 */
initQuery() {
this.queryParams.lineId = null;
@ -303,7 +485,23 @@ export default {
this.queryParams.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || null;
this.queryParams.recordTime = payload.recordTime || null;
this.queryParams.recordTime = payload.recordTime
? [
payload.recordTime,
new Date(
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
: null;
this.getList();
break;
case 'compare':
@ -493,4 +691,13 @@ export default {
background: #0b58ff;
}
}
.echarts__status-chart {
background: #ccc;
}
.echarts__status-chart > div {
height: 100% !important;
width: 100% !important;
}
</style>

View File

@ -82,10 +82,11 @@ export default {
: undefined,
].filter((v) => v),
tableProps: [
{ width: 128, prop: 'productionLine', label: '产线' },
{ width: 128, prop: 'workshopSection', label: '工段' },
{ width: 128, prop: 'equipment', label: '设备名称' },
{ prop: 'productionLine', label: '产线' },
{ prop: 'workshopSection', label: '工段' },
{ prop: 'equipment', label: '设备名称' },
{
width: 90,
prop: 'alarmGrade',
label: '报警级别',
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),

View File

@ -7,6 +7,7 @@
<template>
<div class="chart-wrapper">
<div class="blue-title">各设备加工数量</div>
<div class="chart" ref="chart"></div>
</div>
</template>
@ -30,7 +31,7 @@ export default {
bottom: 56,
},
title: {
show: true,
show: false,
text: '各设备加工数量',
textStyle: {
color: '#232323',
@ -132,4 +133,22 @@ export default {
width: 100%;
// background: lightcoral;
}
.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;
}
}
</style>

View File

@ -21,7 +21,7 @@
title="点击切换工厂"
@mouseenter="factoryListOpen = true"
@mouseleave="factoryListOpen = false">
{{ currentFactory?.label || '工厂名称' }}
{{ currentFactory?.label || '点我选择工厂' }}
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
<ul
class="factory-list"
@ -47,7 +47,7 @@
class="custom-tree-class"
:data="currentFactory?.children"
:props="treeProps"
:empty-text="' - 暂无数据 - '"
:empty-text="''"
icon-class="custom-icon-class"
@node-click="handleSidebarItemClick">
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
@ -268,7 +268,8 @@ export default {
tableProps: [
{ prop: 'lineName', label: '产线' },
{ prop: 'sectionName', label: '工段' },
{ prop: 'externalCode', label: '设备编码' },
// { prop: 'externalCode', label: '' },
{ prop: 'equipmentId', label: '设备编码' },
{ prop: 'equipmentName', label: '设备名称' },
{ prop: 'totalQuantity', label: '加工数量' },
],
@ -526,6 +527,7 @@ li {
}
.custom-tree-class >>> .el-tree-node__content {
width: 100%;
height: auto !important;
padding: 8px 12px !important;
}

View File

@ -25,6 +25,8 @@
</template>
<script>
import moment from 'moment';
export default {
name: 'QualityRecentHours',
components: {},
@ -62,7 +64,8 @@ export default {
for (const key of Object.keys(hourData).sort()) {
const subprop = {
label: key,
// label: 'key',
label: moment(key).format('YYYY-MM-DD HH:mm:ss'),
children: [
{ prop: key + '__in', label: '进数据' },
{ prop: key + '__out', label: '出数据' },
@ -85,7 +88,11 @@ export default {
this.list.splice(0);
let rowIndex = 0;
for (const line of list) {
const { productLine, specification, data } = line;
const {
productLine,
specification = [],
data,
} = line;
// span
this.spanInfo[rowIndex] = data.length;

View File

@ -110,7 +110,7 @@ export default {
},
{
prop: 'statusRecordTime',
label: '状态记录时间',
label: '状态记录时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
@ -217,7 +217,7 @@ export default {
const { data } = await this.$axios({
url: '/base/equipment/listByLine',
method: 'get',
query: { id },
params: { id },
});
return data;
},