生产管理
This commit is contained in:
‘937886381’
2
.env.dev
2
.env.dev
@@ -13,7 +13,7 @@ VUE_APP_TITLE = 智能监控分析系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
|
||||
VUE_APP_BASE_API = 'http://172.16.32.79:48082'
|
||||
VUE_APP_BASE_API = 'http://172.16.33.65:48082'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@@ -25,10 +25,10 @@ export function getCT(data) {
|
||||
// 获取产线平衡分析数据（new）
|
||||
export function getNewCTNow(data) {
|
||||
return request({
|
||||
url: '/analysis/production-analysis/getNewCTNow',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
url: '/analysis/production-analysis/getNewCTNow',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 获取产线平衡分析数据趋势图（new）
|
||||
export function getNewCTCharts(data) {
|
||||
@@ -39,9 +39,10 @@ export function getNewCTCharts(data) {
|
||||
})
|
||||
}
|
||||
// 获取产线平衡分析数据设备list（new）
|
||||
export function getNewCTDet(id) {
|
||||
export function getNewCTDet(data) {
|
||||
return request({
|
||||
url: '/analysis/production-analysis/getNewCTDet?lineId='+id,
|
||||
method: 'get',
|
||||
})
|
||||
url: '/analysis/production-analysis/getNewCTDet',
|
||||
method: 'post',
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
@@ -41,6 +41,16 @@ export function getProductAuto(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function getPdlAutoReportNewSearchNow(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow',
|
||||
method: 'post',
|
||||
data: data,
|
||||
timeout: 60000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 班组自动报表分页
|
||||
export function getTeamReportPage(data) {
|
||||
return request({
|
||||
@@ -57,3 +67,29 @@ export function getTeamReportPageDet(id) {
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取产品当班数据
|
||||
export function getProcessAutoReportGroup(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getProcessAutoReportGroup',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取产品当天数据
|
||||
export function getProcessAutoReportDay(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getProcessAutoReportDay',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 获取产品历史数据
|
||||
export function getProcessAutoReportNew(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getProcessAutoReportNew',
|
||||
method: 'post',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -14,3 +14,79 @@ export function getSectionDataSearch(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取下片日志分页数据
|
||||
export function getDownLogPage(data) {
|
||||
return request({
|
||||
url: '/base/down-log/page',
|
||||
method: 'get',
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取下片日志历史数据
|
||||
export function getDownLogHisData(data) {
|
||||
return request({
|
||||
url: '/base/down-log/pagehis',
|
||||
method: 'get',
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 导出下片日志Excel
|
||||
export function exportDownLogData(query) {
|
||||
return request({
|
||||
url: '/base/down-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获得所有工厂产线列表
|
||||
export function getPdList() {
|
||||
return request({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 获得玻璃型号列表
|
||||
export function getThick() {
|
||||
return request({
|
||||
url: '/base/down-log/thick',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 获得原片报表
|
||||
export function getCostOriginRadioHisData(data) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/page',
|
||||
method: 'get',
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改原片报表
|
||||
export function editCostOriginRadioHisData(data) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/update',
|
||||
method: 'put',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 导出原片报表
|
||||
export function exportCostOriginRadioHisData(data) {
|
||||
return request({
|
||||
url: '/monitoring/cost-origin-ratio-his/export-excel',
|
||||
method: 'get',
|
||||
params: data,
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ export default {
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
color: #888;
|
||||
letter-spacing: 2px;
|
||||
flex: 1;
|
||||
|
||||
@@ -80,8 +80,18 @@ export default {
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
methods: {
|
||||
getUniqueTimes() {
|
||||
const { edgeCt, temperCt, downCt } = this.barData;
|
||||
// 合并所有包含时间的数组
|
||||
const allTimeEntries = [...(edgeCt || []), ...(temperCt || []), ...(downCt || [])];
|
||||
// 提取时间戳并去重（使用 Set）
|
||||
const uniqueTimes = [...new Set(allTimeEntries.map(item => item.recordTime))];
|
||||
// 按时间戳排序（确保时间顺序正确）
|
||||
return uniqueTimes.sort((a, b) => a - b);
|
||||
},
|
||||
initChart() {
|
||||
const uniqueTimes = this.getUniqueTimes();
|
||||
const _this = this;
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
@@ -124,9 +134,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.barData.edgeCt.map((item) => {
|
||||
return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
|
||||
}),
|
||||
data: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')),
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
@@ -152,44 +160,50 @@ export default {
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '磨边节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: this.barData.edgeCt.map((item) => {
|
||||
return item.ct;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: '钢化节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: this.barData.temperCt.map((item) => {
|
||||
return item.ct;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: '下片节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: this.barData.downCt.map((item) => {
|
||||
return item.ct;
|
||||
}),
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '磨边节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: uniqueTimes.map(time => {
|
||||
// 查找当前时间对应的 ct 值，没有则补 null（图表中会显示为断点）
|
||||
const match = this.barData.edgeCt.find(item => item.recordTime === time);
|
||||
return match ? match.ct : 0;
|
||||
})
|
||||
},
|
||||
// 钢化节拍
|
||||
{
|
||||
name: '钢化节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: uniqueTimes.map(time => {
|
||||
const match = this.barData.temperCt.find(item => item.recordTime === time);
|
||||
return match ? match.ct : 0;
|
||||
})
|
||||
},
|
||||
// 下片节拍
|
||||
{
|
||||
name: '下片节拍',
|
||||
type: 'line',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + 'pcs/min';
|
||||
},
|
||||
},
|
||||
data: uniqueTimes.map(time => {
|
||||
const match = this.barData.downCt.find(item => item.recordTime === time);
|
||||
return match ? match.ct : 0;
|
||||
})
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -119,12 +119,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
init(lineId, startTime, endTime) {
|
||||
init(lId, startTime, endTime) {
|
||||
this.eqChartData = [];
|
||||
this.time.startTime = startTime;
|
||||
this.time.endTime = endTime;
|
||||
this.dataListLoading = true;
|
||||
getNewCTDet(lineId).then((response) => {
|
||||
getNewCTDet({ lineId: [lId], startTime, endTime }).then((response) => {
|
||||
this.tableData = response.data;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
|
||||
@@ -183,7 +183,7 @@ export default {
|
||||
// 获取当前时间
|
||||
const now = new Date();
|
||||
// 获取前一天的同一时间
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
const yesterday = new Date(now.getTime());
|
||||
// 设置为00:00:00
|
||||
yesterday.setHours(0, 0, 0, 0);
|
||||
// 设置为23:59:59
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
defaultSelect: [],
|
||||
multiple: true,
|
||||
filterable: true,
|
||||
width: 400,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
|
||||
@@ -1,157 +1,104 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:show-close="false"
|
||||
:wrapper-closable="false"
|
||||
class="drawer"
|
||||
size="60%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||
</small-title>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品编码" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
:disabled="isdetail"
|
||||
placeholder="请输入产品编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
clearable
|
||||
:disabled="isdetail"
|
||||
placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品类型" prop="typeDictValue">
|
||||
<el-select
|
||||
v-model="dataForm.typeDictValue"
|
||||
style="width: 100%"
|
||||
:disabled="isdetail"
|
||||
placeholder="请选择产品类型">
|
||||
<el-option
|
||||
v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="unitDictValue">
|
||||
<el-select
|
||||
v-model="dataForm.unitDictValue"
|
||||
style="width: 100%"
|
||||
:disabled="isdetail"
|
||||
placeholder="请选择单位">
|
||||
<el-option
|
||||
v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="原片规格" prop="originalSpecifications">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.originalSpecifications"
|
||||
placeholder="请输入原片规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="原片单位平方数" prop="originalArea">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.originalArea"
|
||||
placeholder="请输入原片单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="深加工规格" prop="specifications">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.specifications"
|
||||
placeholder="请输入深加工规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="深加工单位平方数" prop="area">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.area"
|
||||
placeholder="请输入深加工单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="完成单位产品用时" prop="processTime">
|
||||
<el-input
|
||||
:disabled="isdetail"
|
||||
v-model="dataForm.processTime"
|
||||
placeholder="请输入完成单位产品用时" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品编码" prop="code">
|
||||
<el-input v-model="dataForm.code" clearable :disabled="isdetail" placeholder="请输入产品编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="dataForm.name" clearable :disabled="isdetail" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品类型" prop="typeDictValue">
|
||||
<el-select v-model="dataForm.typeDictValue" style="width: 100%" :disabled="isdetail"
|
||||
placeholder="请选择产品类型">
|
||||
<el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="unitDictValue">
|
||||
<el-select v-model="dataForm.unitDictValue" style="width: 100%" :disabled="isdetail"
|
||||
placeholder="请选择单位">
|
||||
<el-option v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="原片规格" prop="originalSpecifications">
|
||||
<el-input :disabled="isdetail" v-model="dataForm.originalSpecifications" placeholder="请输入原片规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="原片单位平方数" prop="originalArea">
|
||||
<el-input :disabled="isdetail" v-model="dataForm.originalArea" placeholder="请输入原片单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="深加工规格" prop="specifications">
|
||||
<el-input :disabled="isdetail" v-model="dataForm.specifications" placeholder="请输入深加工规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="深加工单位平方数" prop="area">
|
||||
<el-input :disabled="isdetail" v-model="dataForm.area" placeholder="请输入深加工单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="完成单位产品用时" prop="processTime">
|
||||
<el-input :disabled="isdetail" v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label=" 加工属性" prop="processType">
|
||||
<el-select v-model="dataForm.processType" clearable style="width: 100%" :disabled="isdetail"
|
||||
placeholder="请选择加工属性">
|
||||
<el-option v-for="dict in processTypeList" :key="dict.id" :label="dict.label"
|
||||
:value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
产品属性列表
|
||||
</small-title>
|
||||
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
|
||||
产品属性列表
|
||||
</small-title>
|
||||
|
||||
<div class="attr-list">
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:add-button-show="isdetail ? null : '添加属性'"
|
||||
@emitButtonClick="addNew()"
|
||||
:table-data="productAttributeList">
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="listQuery.total > 0"
|
||||
:total="listQuery.total"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attr-list">
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||
:add-button-show="isdetail ? null : '添加属性'" @emitButtonClick="addNew()" :table-data="productAttributeList">
|
||||
<method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 15]" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
|
||||
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
|
||||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
@@ -167,22 +114,19 @@
|
||||
</span>
|
||||
</div> -->
|
||||
|
||||
<div class="drawer-body__footer">
|
||||
<el-button style="" @click="goback()">取消</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="dataFormSubmit()">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="drawer-body__footer">
|
||||
<el-button style="" @click="goback()">取消</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="dataFormSubmit()">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<product-attr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:product-id="dataForm.id"
|
||||
@refreshDataList="getList" />
|
||||
</el-drawer>
|
||||
<product-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :product-id="dataForm.id"
|
||||
@refreshDataList="getList" />
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -246,13 +190,31 @@ export default {
|
||||
specifications: '', // 深加工规格
|
||||
unitDictValue: '', // 单位id
|
||||
originalSpecifications: '', // 原片规格
|
||||
originalArea: 0, // 原片单位平方数
|
||||
originalArea: 0, // 原片单位平方数
|
||||
processType:undefined,
|
||||
},
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
},
|
||||
},
|
||||
processTypeList: [
|
||||
{
|
||||
id: '0',
|
||||
label:'压花丝印'
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
label: '无印打孔'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: '单层镀膜'
|
||||
}, {
|
||||
id: '3',
|
||||
label: '双层镀膜'
|
||||
}
|
||||
],
|
||||
dataRule: {
|
||||
code: [
|
||||
{
|
||||
|
||||
@@ -6,31 +6,17 @@
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:selectWidth="55"
|
||||
:table-data="showData"
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
<!-- <div v-show="false" ref="pdf">
|
||||
<div class="app-container">
|
||||
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table v-if="showData.length" class="right-aside" v-loading="dataListLoading" :table-props="tableProps"
|
||||
:page="listQuery.pageNo" :limit="listQuery.pageSize" :selectWidth="55" :table-data="showData"
|
||||
@selection-change="selectChange">
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<!-- <div v-show="false" ref="pdf">
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
@@ -39,19 +25,15 @@
|
||||
:table-data="selectedList"
|
||||
/>
|
||||
</div> -->
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -203,7 +185,8 @@ export default {
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
|
||||
132
src/views/core/monitoring/components/buttonNav.vue
Normal file
132
src/views/core/monitoring/components/buttonNav.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-10-21 08:43:35
|
||||
* @LastEditTime: 2024-10-21 09:10:09
|
||||
* @LastEditors: zhp
|
||||
* @Description: Vue2版本的标签切换组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- 按钮切换 -->
|
||||
<div v-if="buttonMode" class="button-nav">
|
||||
<button v-for="m in menus" :key="m" :class="{ active: m === currentMenu }" :data-text="m"
|
||||
@click="handleMenuChange(m)"></button>
|
||||
</div>
|
||||
<!-- 标签切换 -->
|
||||
<div v-else class="custom-tabs" style="height: 100%; width: 100%">
|
||||
<el-tabs v-model="currentMenu" class="tag-nav" style="height: 100%">
|
||||
<el-tab-pane v-for="(m, idx) in menus" :key="m" :label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
|
||||
:name="m">
|
||||
<slot :name="`tab${idx + 1}`"></slot>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator(val) {
|
||||
return val.length > 0;
|
||||
}
|
||||
},
|
||||
buttonMode: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentMenu: this.menus[0] || ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleMenuChange(menu) {
|
||||
this.currentMenu = menu;
|
||||
this.$emit('change', menu);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentMenu(val) {
|
||||
this.$emit('change', val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.menus.length > 0) {
|
||||
this.currentMenu = this.menus[0];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button-nav {
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.button-nav * {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button-nav button {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
letter-spacing: 2px;
|
||||
flex: 1;
|
||||
box-sizing: padding-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-nav button::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.button-nav button.active {
|
||||
color: #111;
|
||||
border-bottom: 4px solid #0b58ff;
|
||||
}
|
||||
|
||||
.custom-tabs /deep/ .el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.custom-tabs /deep/ .el-tabs__item {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.custom-tabs /deep/ .el-tabs__content {
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
|
||||
.custom-tabs /deep/ .el-tab-pane {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border: 10px solid #f002;
|
||||
}
|
||||
</style>
|
||||
272
src/views/core/monitoring/lineAuto/BarChart.vue
Normal file
272
src/views/core/monitoring/lineAuto/BarChart.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width, marginLeft: '10px' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
require('echarts/theme/macarons'); // 引入主题
|
||||
import resize from '@/utils/chartMixins/resize';
|
||||
|
||||
const animationDuration = 1000;
|
||||
|
||||
export default {
|
||||
mixins: [resize], // 混入 resize 逻辑（自适应窗口）
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
barData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null, // 图表实例
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 barData 变化（深度监听数组内部元素）
|
||||
barData: {
|
||||
deep: true,
|
||||
handler: 'handleBarDataChange', // 调用处理方法
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载后初始化图表（确保 DOM 已就绪）
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清理图表实例
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// barData 变化时的处理方法
|
||||
handleBarDataChange() {
|
||||
// 确保 DOM 存在再更新图表
|
||||
this.$nextTick(() => {
|
||||
// 如果图表未初始化，先初始化；否则直接更新数据
|
||||
if (!this.chart) {
|
||||
this.initChart();
|
||||
} else {
|
||||
this.updateChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
// 避免重复初始化（先销毁旧实例）
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
|
||||
// 确保 DOM 元素存在
|
||||
if (!this.$el) {
|
||||
console.error('图表容器 DOM 元素不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化图表实例
|
||||
this.chart = echarts.init(this.$el, 'macarons');
|
||||
// 设置图表配置
|
||||
this.setChartOption();
|
||||
},
|
||||
|
||||
// 更新图表数据（复用配置逻辑）
|
||||
updateChart() {
|
||||
if (!this.chart) return;
|
||||
this.setChartOption();
|
||||
},
|
||||
|
||||
// 图表配置项（抽离为单独方法，方便初始化和更新复用）
|
||||
setChartOption() {
|
||||
const dataValues = this.barData.flatMap(item => [item.inputNum || 0, item.outputNum || 0]);
|
||||
const maxData = Math.max(...dataValues, 0); // 加 0 确保无数据时 maxData 为 0
|
||||
|
||||
// 2. 计算 Y 轴最大值（留 10% 余量，避免数据顶到顶部）
|
||||
let yMax = 0;
|
||||
if (maxData > 0) {
|
||||
yMax = Math.ceil(maxData * 1.1); // 向上取整，确保刻度为整数
|
||||
} else {
|
||||
yMax = 100; // 无数据时默认最大值为 100，避免 Y 轴消失
|
||||
}
|
||||
|
||||
// 3. 计算 interval（5 个刻度对应 4 个间隔，向上取整确保间隔为整数）
|
||||
const yInterval = Math.ceil((yMax - 0) / 4); // min 固定为 0，直接减 0
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: this.title
|
||||
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||||
: '',
|
||||
textStyle: {
|
||||
rich: {
|
||||
tip: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 50,
|
||||
backgroundColor: '#288AFF',
|
||||
},
|
||||
space: {
|
||||
width: 8,
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
color: 'black',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['投入', '产出', '加工成品率'],
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 30,
|
||||
top:40,
|
||||
bottom: 10,
|
||||
|
||||
containLabel: true,
|
||||
splitArea: {
|
||||
show: false // 关键：关闭网格背景分区（去掉间隔色块）
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.barData.map((item) => item.lineName),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
width: 1 // 轴线宽度（可选，默认 1，可按需调整）
|
||||
}
|
||||
},
|
||||
// 2. 控制 X 轴刻度线颜色（与轴线颜色保持一致，视觉统一）
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)', // 刻度线颜色，需与轴线颜色匹配
|
||||
width: 1 // 刻度线宽度（可选）
|
||||
},
|
||||
alignWithLabel: true // 可选：让刻度线与文字对齐（避免文字偏移时刻度线错位）
|
||||
},
|
||||
// 3. 控制 X 轴文字颜色（如：深灰色 rgba(0, 0, 0, 0.45)）
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)6', // 文字颜色，可自定义
|
||||
fontSize: 12, // 可选：调整文字大小（默认 12，按需修改）
|
||||
// 可选：文字过长时换行/省略（避免文字重叠，按需开启）
|
||||
formatter: (value) => {
|
||||
// 示例：文字超过 6 个字符时换行（可根据需求调整字符数）
|
||||
if (value.length > 6) {
|
||||
return value.slice(0, 6) + '\n' + value.slice(6);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
},
|
||||
// 原有配置（若需保留可解开注释）
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '投入/产出 片',
|
||||
min: 0, // 最小值固定为 0
|
||||
max: yMax,
|
||||
interval: yInterval,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
},
|
||||
|
||||
// 可选：修改 Y 轴名称颜色（与文字颜色保持一致）
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '加工成品率',
|
||||
min: 0,
|
||||
max: 100, // 成品率固定 0-100%
|
||||
interval: 25, // 100 / 4 = 25，刚好 5 个刻度（0、25、50、75、100）
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
// 可选：修改 Y 轴名称颜色
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '投入',
|
||||
type: 'bar',
|
||||
barWidth: '20',
|
||||
data: this.barData.map((item) => item.inputNum),
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} 片`,
|
||||
},
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: '产出',
|
||||
type: 'bar',
|
||||
barWidth: '20',
|
||||
data: this.barData.map((item) => item.outputNum),
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} 片`,
|
||||
},
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: '加工成品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} %`,
|
||||
},
|
||||
data: this.barData.map((item) => item.processingRatio),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
361
src/views/core/monitoring/nextClip/hisData.vue
Normal file
361
src/views/core/monitoring/nextClip/hisData.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2024-12-02 13:44:47
|
||||
* @LastEditors: zwq
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- :isFold="true" 控制展开 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="showData"
|
||||
>
|
||||
<!-- <method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" /> -->
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<!-- <el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getDownLogHisData, getPdList, getThick } from '@/api/core/monitoring/index'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '下片机械手编号'
|
||||
},
|
||||
{
|
||||
prop: 'pos',
|
||||
label: '工位编号'
|
||||
},
|
||||
{
|
||||
prop: 'pallet',
|
||||
label: '托数/托'
|
||||
},
|
||||
{
|
||||
prop: 'palletNum',
|
||||
label: '下片托数'
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间',
|
||||
filter: parseTime,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '结束时间',
|
||||
filter: parseTime,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'outputNum',
|
||||
label: '玻璃长度/mm'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '玻璃宽度/mm',
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '玻璃长度/mm'
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getDownLogHisData
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
eqName: undefined,
|
||||
productionLineId: undefined,
|
||||
thick:undefined
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
selectedList: [],
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'his',
|
||||
btnName: '历史',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
showData: [],
|
||||
fileName: '',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'productionLineId'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '玻璃型号',
|
||||
selectOptions: [],
|
||||
param: 'thick'
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '统计开始时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
defaultSelect: []
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.searchBarForm.formInline.productionLineId = this.$route.query.productionLineId
|
||||
this.$refs.searchBarForm.formInline.thick = this.$route.query.thick
|
||||
this.listQuery.productionLineId = this.$route.query.productionLineId
|
||||
this.listQuery.thick = this.$route.query.thick
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
console.log('this.$route.query', this.$route.query);
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClick(val) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrEditTitle =
|
||||
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.eqDetail.init(
|
||||
val.data.lineId,
|
||||
this.listQuery.startTime,
|
||||
this.listQuery.endTime
|
||||
);
|
||||
});
|
||||
},
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
var that = this
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save(that.fileName + '工段统计.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportECL() {
|
||||
let tables = document.querySelector('.el-table').cloneNode(true)
|
||||
const fix = tables.querySelector('.el-table__fixed')
|
||||
const fixRight = tables.querySelector('.el-table__fixed-right')
|
||||
if (fix) {
|
||||
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
||||
}
|
||||
if (fixRight) {
|
||||
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
|
||||
}
|
||||
let exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), this.fileName + '工段统计.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
exportPdf() {
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
getThick().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data.map((item) => {
|
||||
return {
|
||||
id: item.thick + 'mm',
|
||||
name: item.thick + 'mm'
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productId = val.productId ? val.productId : undefined;
|
||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0]: undefined;
|
||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1]: undefined;
|
||||
|
||||
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.listQuery.eqName = this.$route.query.eqName
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list
|
||||
this.showData = this.tableData
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.listQuery.pageSize = val;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.listQuery.pageNo = val;
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
if (this.selectedList.length > 0) {
|
||||
this.showData = this.selectedList
|
||||
}
|
||||
this.dialogVisible = true
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
373
src/views/core/monitoring/nextClip/index.vue
Normal file
373
src/views/core/monitoring/nextClip/index.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2024-12-02 13:44:47
|
||||
* @LastEditors: zwq
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- :isFold="true" 控制展开 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-if="showData.length"
|
||||
class="right-aside"
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="showData"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<!-- <el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getDownLogPage, getPdList, getThick, exportDownLogData } from '@/api/core/monitoring/index'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '下片机械手编号'
|
||||
},
|
||||
{
|
||||
prop: 'pos',
|
||||
label: '工位编号'
|
||||
},
|
||||
{
|
||||
prop: 'pallet',
|
||||
label: '托数/托'
|
||||
},
|
||||
{
|
||||
prop: 'palletNum',
|
||||
label: '下片托数'
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间',
|
||||
filter: parseTime,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '结束时间',
|
||||
filter: parseTime,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'outputNum',
|
||||
label: '玻璃长度/mm'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '玻璃宽度/mm',
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '玻璃厚度/mm'
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getDownLogPage
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
productionLineId: undefined,
|
||||
thick: undefined,
|
||||
|
||||
},
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
selectedList: [],
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'his',
|
||||
btnName: '历史',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
showData: [],
|
||||
fileName: '',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'productionLineId'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '玻璃型号',
|
||||
selectOptions: [],
|
||||
param: 'thick'
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '统计开始时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
defaultSelect: []
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(val) {
|
||||
console.log(val);
|
||||
if (val.type === 'his') {
|
||||
this.$router.push({
|
||||
path: 'nextClipHis',
|
||||
query: {
|
||||
eqName: val.data.eqName,
|
||||
productionLineId: this.listQuery.productionLineId,
|
||||
thick: this.listQuery.thick,
|
||||
},
|
||||
});
|
||||
}
|
||||
// this.addOrUpdateVisible = true;
|
||||
// this.addOrEditTitle =
|
||||
// val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.eqDetail.init(
|
||||
// val.data.lineId,
|
||||
// this.listQuery.startTime,
|
||||
// this.listQuery.endTime
|
||||
// );
|
||||
// });
|
||||
},
|
||||
test() {
|
||||
var target = document.getElementsByClassName("right-aside")[0]
|
||||
target.style.background = '#FFFFFF'
|
||||
var that = this
|
||||
setTimeout(() => {
|
||||
html2canvas(target).then(function(canvas) {
|
||||
var contentWidth = canvas.width
|
||||
var contentHeight = canvas.height
|
||||
|
||||
// 一页pdf显示html页面生成的canvas高度
|
||||
var pageHeight = contentHeight / 592.28 * 841.89
|
||||
// 未生成pdf的html页面高度
|
||||
var leftHeight = contentHeight
|
||||
// 页面偏移
|
||||
var position = 0
|
||||
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的高度
|
||||
var imgWidth = 595.28
|
||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||
|
||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
console.log('nihc URL', leftHeight, pageHeight)
|
||||
|
||||
var pdf = new jsPDF('', 'pt', 'a4')
|
||||
|
||||
if (leftHeight < pageHeight) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||
} else {
|
||||
while(leftHeight > 0) {
|
||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
leftHeight -= pageHeight
|
||||
position -= 841.89
|
||||
// 避免空白页
|
||||
if (leftHeight > 0) {
|
||||
pdf.addPage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save(that.fileName + '工段统计.pdf')
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
exportECL() {
|
||||
let tables = document.querySelector('.el-table').cloneNode(true)
|
||||
const fix = tables.querySelector('.el-table__fixed')
|
||||
const fixRight = tables.querySelector('.el-table__fixed-right')
|
||||
if (fix) {
|
||||
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
||||
}
|
||||
if (fixRight) {
|
||||
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
|
||||
}
|
||||
let exportTable = XLSX.utils.table_to_book(tables)
|
||||
|
||||
var exportTableOut = XLSX.write(exportTable, {
|
||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||
})
|
||||
// sheetjs.xlsx为导出表格的标题名称
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||
type: 'application/octet-stream'
|
||||
}), this.fileName + '工段统计.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||
}
|
||||
return exportTableOut
|
||||
},
|
||||
exportPdf() {
|
||||
this.test()
|
||||
setTimeout(() =>{
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
}, 600)
|
||||
|
||||
},
|
||||
exportXlsx() {
|
||||
this.exportECL()
|
||||
this.dialogVisible = false
|
||||
this.showData = this.tableData
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
getThick().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data.map((item) => {
|
||||
return {
|
||||
id: item.thick + 'mm',
|
||||
name: item.thick + 'mm'
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
},
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.productionLineId = val.productionLineId ? val.productionLineId : undefined;
|
||||
this.listQuery.thick = val.thick ? val.thick : undefined;
|
||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0]: undefined;
|
||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1]: undefined;
|
||||
|
||||
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
this.tableData = response.data.list
|
||||
this.showData = this.tableData
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.listQuery.pageSize = val;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.listQuery.pageNo = val;
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = { ...this.listQuery };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出下片日志?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportDownLogData(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '下片日志.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
272
src/views/core/monitoring/productAuto/BarChart.vue
Normal file
272
src/views/core/monitoring/productAuto/BarChart.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width, marginLeft: '10px' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
require('echarts/theme/macarons'); // 引入主题
|
||||
import resize from '@/utils/chartMixins/resize';
|
||||
|
||||
const animationDuration = 1000;
|
||||
|
||||
export default {
|
||||
mixins: [resize], // 混入 resize 逻辑（自适应窗口）
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
barData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null, // 图表实例
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 barData 变化（深度监听数组内部元素）
|
||||
barData: {
|
||||
deep: true,
|
||||
handler: 'handleBarDataChange', // 调用处理方法
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载后初始化图表（确保 DOM 已就绪）
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清理图表实例
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// barData 变化时的处理方法
|
||||
handleBarDataChange() {
|
||||
// 确保 DOM 存在再更新图表
|
||||
this.$nextTick(() => {
|
||||
// 如果图表未初始化，先初始化；否则直接更新数据
|
||||
if (!this.chart) {
|
||||
this.initChart();
|
||||
} else {
|
||||
this.updateChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
// 避免重复初始化（先销毁旧实例）
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
|
||||
// 确保 DOM 元素存在
|
||||
if (!this.$el) {
|
||||
console.error('图表容器 DOM 元素不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化图表实例
|
||||
this.chart = echarts.init(this.$el, 'macarons');
|
||||
// 设置图表配置
|
||||
this.setChartOption();
|
||||
},
|
||||
|
||||
// 更新图表数据（复用配置逻辑）
|
||||
updateChart() {
|
||||
if (!this.chart) return;
|
||||
this.setChartOption();
|
||||
},
|
||||
|
||||
// 图表配置项（抽离为单独方法，方便初始化和更新复用）
|
||||
setChartOption() {
|
||||
const dataValues = this.barData.flatMap(item => [item.inputNum || 0, item.outputNum || 0]);
|
||||
const maxData = Math.max(...dataValues, 0); // 加 0 确保无数据时 maxData 为 0
|
||||
|
||||
// 2. 计算 Y 轴最大值（留 10% 余量，避免数据顶到顶部）
|
||||
let yMax = 0;
|
||||
if (maxData > 0) {
|
||||
yMax = Math.ceil(maxData * 1.1); // 向上取整，确保刻度为整数
|
||||
} else {
|
||||
yMax = 100; // 无数据时默认最大值为 100，避免 Y 轴消失
|
||||
}
|
||||
|
||||
// 3. 计算 interval（5 个刻度对应 4 个间隔，向上取整确保间隔为整数）
|
||||
const yInterval = Math.ceil((yMax - 0) / 4); // min 固定为 0，直接减 0
|
||||
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: this.title
|
||||
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||||
: '',
|
||||
textStyle: {
|
||||
rich: {
|
||||
tip: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 50,
|
||||
backgroundColor: '#288AFF',
|
||||
},
|
||||
space: {
|
||||
width: 8,
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
color: 'black',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['投入', '产出', '加工成品率'],
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 30,
|
||||
top:40,
|
||||
bottom: 10,
|
||||
|
||||
containLabel: true,
|
||||
splitArea: {
|
||||
show: false // 关键：关闭网格背景分区（去掉间隔色块）
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.barData.map((item) => item.lineName),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
width: 1 // 轴线宽度（可选，默认 1，可按需调整）
|
||||
}
|
||||
},
|
||||
// 2. 控制 X 轴刻度线颜色（与轴线颜色保持一致，视觉统一）
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)', // 刻度线颜色，需与轴线颜色匹配
|
||||
width: 1 // 刻度线宽度（可选）
|
||||
},
|
||||
alignWithLabel: true // 可选：让刻度线与文字对齐（避免文字偏移时刻度线错位）
|
||||
},
|
||||
// 3. 控制 X 轴文字颜色（如：深灰色 rgba(0, 0, 0, 0.45)）
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)6', // 文字颜色，可自定义
|
||||
fontSize: 12, // 可选：调整文字大小（默认 12，按需修改）
|
||||
// 可选：文字过长时换行/省略（避免文字重叠，按需开启）
|
||||
formatter: (value) => {
|
||||
// 示例：文字超过 6 个字符时换行（可根据需求调整字符数）
|
||||
if (value.length > 6) {
|
||||
return value.slice(0, 6) + '\n' + value.slice(6);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
},
|
||||
// 原有配置（若需保留可解开注释）
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '投入/产出 片',
|
||||
min: 0, // 最小值固定为 0
|
||||
max: yMax,
|
||||
interval: yInterval,
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
},
|
||||
|
||||
// 可选：修改 Y 轴名称颜色（与文字颜色保持一致）
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '加工成品率',
|
||||
min: 0,
|
||||
max: 100, // 成品率固定 0-100%
|
||||
interval: 25, // 100 / 4 = 25，刚好 5 个刻度（0、25、50、75、100）
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
// 可选：修改 Y 轴名称颜色
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)'
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '投入',
|
||||
type: 'bar',
|
||||
barWidth: '20',
|
||||
data: this.barData.map((item) => item.inputNum),
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} 片`,
|
||||
},
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: '产出',
|
||||
type: 'bar',
|
||||
barWidth: '20',
|
||||
data: this.barData.map((item) => item.outputNum),
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} 片`,
|
||||
},
|
||||
animationDuration,
|
||||
},
|
||||
{
|
||||
name: '加工成品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: (value) => `${value} %`,
|
||||
},
|
||||
data: this.barData.map((item) => item.processingRatio),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
273
src/views/core/monitoring/productAuto/baseTable.vue
Normal file
273
src/views/core/monitoring/productAuto/baseTable.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="baseTable">
|
||||
<el-table
|
||||
:ref="id"
|
||||
:data="renderData"
|
||||
v-bind="$attrs"
|
||||
:border="cancelBorder ? false : true"
|
||||
@current-change="currentChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
background: '#F2F4F9',
|
||||
color: '#606266',
|
||||
}">
|
||||
<!-- 多选 -->
|
||||
<el-table-column
|
||||
v-if="selectWidth"
|
||||
type="selection"
|
||||
:width="selectWidth" />
|
||||
<!-- 序号 -->
|
||||
<el-table-column
|
||||
v-if="page && limit"
|
||||
prop="_pageIndex"
|
||||
:width="pageWidth"
|
||||
align="center"
|
||||
:fixed="cancelPageFixed ? false : true">
|
||||
<template slot="header">
|
||||
<el-popover placement="bottom-start" width="300" trigger="click">
|
||||
<div
|
||||
class="setting-box"
|
||||
style="max-height: 400px; overflow-y: auto">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in tableProps"
|
||||
:key="'cb' + index"
|
||||
v-model="selectedBox[index]"
|
||||
:label="item.label" />
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-s-tools" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="item in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
v-bind="item"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:fixed="item.fixed || false"
|
||||
:show-overflow-tooltip="item.showOverflowtooltip || false"
|
||||
:sortable="item.sortable || false">
|
||||
<template slot="header">
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
<!-- 多表头 -->
|
||||
<template v-if="item.children">
|
||||
<el-table-column
|
||||
v-for="sub in item.children"
|
||||
:prop="sub.prop"
|
||||
:key="sub.prop"
|
||||
v-bind="sub"
|
||||
:label="sub.label">
|
||||
<template v-if="sub.children">
|
||||
<el-table-column
|
||||
v-for="ssub in sub.children"
|
||||
:prop="ssub.prop"
|
||||
:key="ssub.prop"
|
||||
v-bind="ssub"
|
||||
:label="ssub.label">
|
||||
<template slot-scope="sscopeInner">
|
||||
<component
|
||||
:is="ssub.subcomponent"
|
||||
v-if="ssub.subcomponent"
|
||||
:key="sscopeInner.row.id"
|
||||
:inject-data="{ ...sscopeInner.row, ...ssub }"
|
||||
@emitData="emitData" />
|
||||
<span v-else>
|
||||
{{ sscopeInner.row[ssub.prop] | commonFilter(ssub.filter) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template slot-scope="scopeInner">
|
||||
<component
|
||||
:is="sub.subcomponent"
|
||||
v-if="sub.subcomponent"
|
||||
:key="scopeInner.row.id"
|
||||
:inject-data="{ ...scopeInner.row, ...sub }"
|
||||
@emitData="emitData" />
|
||||
<span v-else>
|
||||
{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<component
|
||||
:is="item.subcomponent"
|
||||
v-if="item.subcomponent"
|
||||
:key="scope.row.id"
|
||||
:itemProp="item.prop"
|
||||
:inject-data="{ ...scope.row, ...item }"
|
||||
@emitData="emitData" />
|
||||
<span v-else>
|
||||
{{ scope.row[item.prop] | commonFilter(item.filter) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="handleBtn" />
|
||||
</el-table>
|
||||
<!-- 表格底部加号 -->
|
||||
<el-button
|
||||
v-if="addButtonShow"
|
||||
class="addButton"
|
||||
icon="el-icon-plus"
|
||||
@click="emitButtonClick">
|
||||
{{ addButtonShow }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = (a) => a) => {
|
||||
return filterType(source);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
cancelBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
cancelPageFixed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableProps: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
pageWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 70,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
selectWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
addButtonShow: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedBox: new Array(100).fill(true),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
renderTableHeadList() {
|
||||
return this.tableProps.filter((item, index) => {
|
||||
return this.selectedBox[index];
|
||||
});
|
||||
},
|
||||
renderData() {
|
||||
return this.tableData.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true);
|
||||
},
|
||||
methods: {
|
||||
currentChange(newVal, oldVal) {
|
||||
this.$emit('current-change', { newVal, oldVal });
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.$emit('selection-change', val);
|
||||
},
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val);
|
||||
},
|
||||
emitButtonClick() {
|
||||
this.$emit('emitButtonClick');
|
||||
},
|
||||
setCurrent(name, index) {
|
||||
let _this = this;
|
||||
let obj = _this.$refs[name].data[index];
|
||||
_this.$refs[name].setCurrentRow(obj);
|
||||
},
|
||||
doLayout(name) {
|
||||
this.$refs[name].doLayout();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.baseTable .show-col-btn {
|
||||
margin-right: 5px;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.baseTable .el-icon-refresh {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.baseTable .el-table__body tr.current-row > td.el-table__cell {
|
||||
background-color: #eaf1fc;
|
||||
}
|
||||
.baseTable .el-table .el-table__cell {
|
||||
padding: 0;
|
||||
height: 35px;
|
||||
}
|
||||
.baseTable .addButton {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-top: none;
|
||||
color: #0b58ff;
|
||||
border-color: #ebeef5;
|
||||
border-radius: 0;
|
||||
}
|
||||
.baseTable .addButton:hover {
|
||||
color: #0b58ff;
|
||||
border-color: #ebeef5;
|
||||
background-color: #fff;
|
||||
}
|
||||
.baseTable .addButton:focus {
|
||||
border-color: #ebeef5;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.el-tooltip__popper.is-dark {
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
.el-tooltip__popper .popper__arrow,
|
||||
.el-tooltip__popper .popper__arrow::after {
|
||||
border-top-color: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
65
src/views/core/monitoring/rawFilmReport/SmallTitle.vue
Normal file
65
src/views/core/monitoring/rawFilmReport/SmallTitle.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-01 15:27:31
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-08-01 16:25:54
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :class="[className, { 'p-0': noPadding }]">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
// 取值范围: xl lg md sm
|
||||
type: String,
|
||||
default: 'de',
|
||||
validator: function (val) {
|
||||
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
|
||||
},
|
||||
},
|
||||
noPadding: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
className: function () {
|
||||
return `${this.size}-title`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
|
||||
$mgr: 8px;
|
||||
@each $size, $height in $pxls {
|
||||
.#{$size}-title {
|
||||
font-size: 18px;
|
||||
line-height: $height;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 4px;
|
||||
height: $height + 2px;
|
||||
border-radius: 1px;
|
||||
margin-right: $mgr;
|
||||
background-color: #0b58ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
221
src/views/core/monitoring/rawFilmReport/add-or-updata.vue
Normal file
221
src/views/core/monitoring/rawFilmReport/add-or-updata.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" width="40%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ !dataForm.id ? '新增' : '编辑' }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px"
|
||||
@keyup.enter.native="dataFormSubmit">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="维度" prop="statisticType">
|
||||
<el-select v-model="dataForm.statisticType" style="width: 100%" placeholder="请选择维度">
|
||||
<el-option v-for="item in statisticTypeList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="厚度" prop="modifyThick">
|
||||
<el-input v-model="dataForm.modifyThick" placeholder="请输入厚度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="在线速度" prop="modifySpeed">
|
||||
<el-input v-model="dataForm.modifySpeed" placeholder="请输入在线速度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="宽度" prop="modifyWidth">
|
||||
<el-input v-model="dataForm.modifyWidth" placeholder="请输入宽度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="拉引量" prop="modifyInArea">
|
||||
<el-input v-model="dataForm.modifyInArea" placeholder="请输入拉引量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="下片面积" prop="modifyOutArea">
|
||||
<el-input v-model="dataForm.modifyOutArea" placeholder="请输入下片面积" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="良品率" prop="modifyRatio">
|
||||
<el-input v-model="dataForm.modifyRatio" placeholder="请输入良品率" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button style="" @click="goback()">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { editCostOriginRadioHisData } from '@/api/core/monitoring/index'
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import SmallTitle from './SmallTitle';
|
||||
export default {
|
||||
components: { SmallTitle },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
statisticTypeList: [
|
||||
{
|
||||
id: '0',
|
||||
name: '班组'
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '日'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '周'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '月'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '年'
|
||||
}
|
||||
],
|
||||
dataForm: {
|
||||
id: null,
|
||||
statisticType:undefined,
|
||||
modifyThick: undefined,
|
||||
modifySpeed: undefined,
|
||||
modifyWidth: undefined,
|
||||
modifyInArea: undefined,
|
||||
modifyOutArea: undefined,
|
||||
modifyRatio: undefined,
|
||||
},
|
||||
dataRule: {
|
||||
statisticType: [
|
||||
{
|
||||
required: true,
|
||||
message: '维度不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
// {
|
||||
// type: 'number',
|
||||
// message: '产品编码为数字类型',
|
||||
// trigger: 'blur',
|
||||
// transfom: 'val => Number(val)',
|
||||
// },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(data) {
|
||||
console.log(data,'data');
|
||||
|
||||
this.dataForm.id = data.id || null;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields();
|
||||
this.dataForm = {
|
||||
id: data.id || null,
|
||||
statisticType: data.statisticType || undefined,
|
||||
modifyThick: data.thick || undefined, // 厚度对应
|
||||
modifySpeed: data.speed || undefined, // 在线速度对应
|
||||
modifyWidth: data.width || undefined, // 掰边宽度对应
|
||||
modifyInArea: data.inArea || undefined, // 拉引量对应
|
||||
modifyOutArea: data.outArea || undefined, // 下片面积对应
|
||||
modifyRatio: data.ratio || undefined, // 良品率对应
|
||||
};
|
||||
});
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
// 修改的提交
|
||||
if (this.dataForm.id) {
|
||||
editCostOriginRadioHisData(this.dataForm).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.visible = false;
|
||||
this.$emit('refreshDataList');
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
goback() {
|
||||
this.$emit('refreshDataList');
|
||||
this.visible = false;
|
||||
this.initData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
.drawer >>> .el-drawer__body {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 30px 24px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.drawer-body__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 18px;
|
||||
}
|
||||
</style>
|
||||
281
src/views/core/monitoring/rawFilmReport/index.vue
Normal file
281
src/views/core/monitoring/rawFilmReport/index.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<!--
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-08-29 14:59:29
|
||||
* @LastEditTime: 2024-12-02 13:44:47
|
||||
* @LastEditors: zwq
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- :isFold="true" 控制展开 -->
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table v-if="tableData.length" class="right-aside" v-loading="dataListLoading" :table-props="tableProps"
|
||||
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
|
||||
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<div v-else class="no-data-bg"></div>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<!-- <el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog> -->
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import { parseTime } from '../../mixins/code-filter';
|
||||
import { getCostOriginRadioHisData, getPdList } from '@/api/core/monitoring/index'
|
||||
import * as XLSX from 'xlsx'
|
||||
import FileSaver from 'file-saver'
|
||||
import jsPDF from 'jspdf'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { exportCostOriginRadioHisData } from '../../../../api/core/monitoring';
|
||||
|
||||
const tableProps = [
|
||||
|
||||
{
|
||||
prop: 'reportType',
|
||||
label: '报表类型'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '日期',
|
||||
// filter: parseTime,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: 'bindObjectName',
|
||||
label: '产线'
|
||||
},
|
||||
{
|
||||
prop: 'thick',
|
||||
label: '厚度'
|
||||
},
|
||||
{
|
||||
prop: 'speed',
|
||||
label: '在线速度'
|
||||
},
|
||||
{
|
||||
prop: 'width',
|
||||
label: '掰边宽度'
|
||||
},
|
||||
{
|
||||
prop: 'inArea',
|
||||
label: '拉引量/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'outArea',
|
||||
label: '下片面积/㎡'
|
||||
},
|
||||
{
|
||||
prop: 'ratio',
|
||||
label: '良品率'
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddOrUpdate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getCostOriginRadioHisData
|
||||
},
|
||||
tableData: [],
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
bindObjectId: undefined,
|
||||
statisticType: undefined,
|
||||
},
|
||||
pdLineList:[],
|
||||
exportLoading: false,
|
||||
dataListLoading: false,
|
||||
selectedList: [],
|
||||
dialogVisible: false,
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
fileName: '',
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '维度',
|
||||
selectOptions: [
|
||||
{
|
||||
id: '0',
|
||||
name:'班组'
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '日'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '周'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '月'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '年'
|
||||
}
|
||||
],
|
||||
param: 'statisticType'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '产线',
|
||||
selectOptions: [],
|
||||
param: 'bindObjectId'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '统计开始时间',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'timeVal',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
defaultSelect: []
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.searchBarForm.formInline.statisticType = '1';
|
||||
this.listQuery.statisticType = '1';
|
||||
this.getDataList()
|
||||
this.getPdLineList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(val) {
|
||||
console.log(val);
|
||||
if (val.type === 'edit') {
|
||||
this.addOrUpdateVisible= true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(val.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getPdLineList() {
|
||||
getPdList().then((res) => {
|
||||
this.formConfig[1].selectOptions = res.data || []
|
||||
this.pdLineList = res.data || []; // 保存产线数据
|
||||
})
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
this.selectedList = val
|
||||
},
|
||||
buttonClick(val) {
|
||||
console.log('val', val);
|
||||
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.bindObjectId = val.bindObjectId ? val.bindObjectId : undefined;
|
||||
this.listQuery.statisticType = val.statisticType ? val.statisticType : undefined;
|
||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0]: undefined;
|
||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1]: undefined;
|
||||
|
||||
//this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||
const arr = ['班组','日', '周', '月', '年'];
|
||||
this.tableData = response.data?.list?.map((item) => {
|
||||
item.reportType = arr[this.listQuery.statisticType];
|
||||
item.statisticType = this.listQuery.statisticType
|
||||
|
||||
// 匹配 bindObjectName
|
||||
const targetLine = this.pdLineList.find(line => line.id === item.bindObjectId);
|
||||
item.bindObjectName = targetLine ? targetLine.name : ''; // 赋值名称，无匹配则为空
|
||||
return item;
|
||||
});
|
||||
this.listQuery.total = response.data.total;
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.listQuery.pageSize = val;
|
||||
this.listQuery.pageNo = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.listQuery.pageNo = val;
|
||||
this.getDataList();
|
||||
},
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = { ...this.listQuery };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal.confirm('是否确认导出原片报表?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportCostOriginRadioHisData(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '原片报表.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -3,16 +3,17 @@
|
||||
<div class='count-box'>
|
||||
<div class='count-tip-box'>
|
||||
<div class='item'>
|
||||
<p class='num'>2,344</p>
|
||||
<p class='num'> {{ totalDownLoadNumClass ? totalDownLoadNumClass : 0}}</p>
|
||||
<p class='title'>本班合计</p>
|
||||
</div>
|
||||
<div class='split'></div>
|
||||
<div class='item'>
|
||||
<p class='num'>2,344</p>
|
||||
<p class='num'>{{ totalDownLoadNumDay ? totalDownLoadNumDay : 0 }} </p>
|
||||
<p class='title'>本日合计</p>
|
||||
</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="config" style="width:580px;height:180px;margin-top: 10px;" class='count-table'/>
|
||||
<dv-scroll-board ref="locationScrollBoardTable" :config="config" style="width:580px;height:180px;margin-top: 10px;"
|
||||
class='count-table' />
|
||||
<span class='split-line' style='left: 70px;'></span>
|
||||
<span class='split-line' style='left: 195px;'></span>
|
||||
<span class='split-line' style='left: 320px;'></span>
|
||||
@@ -26,9 +27,64 @@ export default {
|
||||
name: 'Count',
|
||||
components: {
|
||||
ModelBox
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, 'newVal');
|
||||
if (newVal) {
|
||||
this.totalGlassNum = 0;
|
||||
this.tableData = [];
|
||||
// 累加所有项目的downLoadNumDay
|
||||
this.totalDownLoadNumDay = 0;
|
||||
this.totalDownLoadNumClass = 0
|
||||
// 遍历每条产线数据
|
||||
newVal.forEach(item => {
|
||||
// 计算当前项目的glassNum总和
|
||||
const glassArray = JSON.parse(item.glassNum);
|
||||
const itemGlassSum = glassArray.reduce((sum, num) => sum + num, 0);
|
||||
this.tableData.push({
|
||||
lineName: item.lineName,
|
||||
glassSum: itemGlassSum,
|
||||
downLoadNumDay:item.downLoadNumDay,
|
||||
downLoadNumClass: item.downLoadNumClass
|
||||
});
|
||||
|
||||
// 累加downLoadNumDay
|
||||
this.totalDownLoadNumDay += item.downLoadNumDay;
|
||||
this.totalDownLoadNumClass += item.downLoadNumClass;
|
||||
|
||||
});
|
||||
let eqArr = this.tableData.map((item, index) => [
|
||||
`<span style="color:#000;" >${index+1 || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;" >${item.lineName || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${item.downLoadNumClass || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.downLoadNumDay || ''}</span>`,
|
||||
`<span style="color:#000;">${item.glassSum || ''}</span>`,
|
||||
])
|
||||
this.config.data = eqArr
|
||||
this.$refs['locationScrollBoardTable'].updateRows(eqArr)
|
||||
}
|
||||
// this.getChart(this.todayClass)
|
||||
},
|
||||
deep: true // 深度监听
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalDownLoadNumDay: 0,
|
||||
totalDownLoadNumClass:0,
|
||||
config:{
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">产线</span>', '<span style="color:#000;">本班</span>', '<span style="color:#000;">本日</span>', '<span style="color:#000;">一托玻璃数量</span>'],
|
||||
headerHeight: 30,
|
||||
@@ -39,11 +95,6 @@ export default {
|
||||
columnWidth: [70, 125, 125, 125, 130],
|
||||
align : ['center', 'center', 'center', 'center', 'center'],
|
||||
data: [
|
||||
['<span style="color:#000;">1</span>', '<span style="color:#000;">A1</span>', '<span style="color:#000;">23</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">2</span>', '<span style="color:#000;">A2</span>', '<span style="color:#000;">13</span>', '<span style="color:#000;">234</span>','<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">3</span>', '<span style="color:#000;">A3</span>', '<span style="color:#000;">24</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">4</span>', '<span style="color:#000;">A4</span>', '<span style="color:#000;">45</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>'],
|
||||
['<span style="color:#000;">5</span>', '<span style="color:#000;">A5</span>', '<span style="color:#000;">55</span>', '<span style="color:#000;">234</span>', '<span style="color:#000;">234</span>']
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ModelBox name='1-2'>
|
||||
<div class='eq-alarm'>
|
||||
<dv-scroll-board :config="config" style="width:580px;height:250px;margin-top: 10px;" />
|
||||
<dv-scroll-board ref='locationScrollBoard' :config="config" style="width:580px;height:250px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 226px;'></span>
|
||||
<span class='split-line' style='left: 366px;'></span>
|
||||
@@ -15,8 +15,39 @@ export default {
|
||||
components: {
|
||||
ModelBox
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, 'newVal');
|
||||
if (newVal) {
|
||||
this.tableData = newVal
|
||||
let eqArr = this.tableData.map((item, index) => [
|
||||
`<span style="color:#000;" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${this.formatDate(item.time) || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.equipmentName || ''}</span>`,
|
||||
`<span style="color:#000;">${item.content || ''}</span>`,
|
||||
])
|
||||
this.config.data = eqArr
|
||||
this.$refs['locationScrollBoard'].updateRows(eqArr)
|
||||
}
|
||||
// this.getChart(this.todayClass)
|
||||
},
|
||||
deep: true // 深度监听
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData:[],
|
||||
config:{
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">报警时间</span>', '<span style="color:#000;">报警设备</span>', '<span style="color:#000;">报警内容</span>'],
|
||||
headerHeight: 25,
|
||||
@@ -27,14 +58,6 @@ export default {
|
||||
columnWidth: [66, 160, 140, 214],
|
||||
align : ['center', 'center', 'center', 'center'],
|
||||
data: [
|
||||
['<span style="color:#000;">1</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-1打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">2</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">3</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">4</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">5</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">6</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">7</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>'],
|
||||
['<span style="color:#000;">8</span>', '<span style="color:#000;">2014/12/28 19:20</span>', '<span style="color:#000;">A-2打孔机</span>', '<span style="color:#000;">各种报警内容</span>']
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -42,6 +65,25 @@ export default {
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
},
|
||||
formatDate(time) {
|
||||
if (!time) return '';
|
||||
|
||||
// 如果是时间戳格式
|
||||
if (typeof time === 'number' || !isNaN(time)) {
|
||||
const date = new Date(parseInt(time));
|
||||
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 如果是ISO字符串格式
|
||||
if (typeof time === 'string') {
|
||||
const date = new Date(time);
|
||||
if (!isNaN(date.getTime())) {
|
||||
return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
||||
return time;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class='line-container'>
|
||||
<div class='table-box'>
|
||||
<div class='title'>本班次</div>
|
||||
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
|
||||
<dv-scroll-board ref="classToday" :config="classConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 311px;'></span>
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class='table-box'>
|
||||
<div class='title'>本日</div>
|
||||
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
|
||||
<dv-scroll-board ref="day" :config="dayConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 311px;'></span>
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
<div class='table-box'>
|
||||
<div class='title'>本周</div>
|
||||
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
|
||||
<dv-scroll-board ref="week" :config="weekConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 311px;'></span>
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class='table-box'>
|
||||
<div class='title'>本月</div>
|
||||
<dv-scroll-board :config="config" style="width:600px;height:242px;margin-top: 10px;"/>
|
||||
<dv-scroll-board ref="month" :config="monthConfig" style="width:600px;height:242px;margin-top: 10px;" />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 311px;'></span>
|
||||
@@ -43,9 +43,105 @@ export default {
|
||||
components: {
|
||||
ModelBox
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, 'newVal');
|
||||
if (newVal) {
|
||||
this.nowMonth = newVal.todayClass ? newVal.nowMonth.map((item, index) => [
|
||||
`<span style="color:#000;" >${index + 1 || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;" >${item.name || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${item.inputNum || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
||||
`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
||||
</div>`,
|
||||
]) : []
|
||||
this.monthConfig.data = this.nowMonth
|
||||
this.$refs['month'].updateRows(this.nowMonth)
|
||||
this.nowWeek = newVal.nowWeek ? newVal.nowWeek.map((item, index) => [
|
||||
`<span style="color:#000;" >${index + 1 || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;" >${item.name || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${item.inputNum || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
||||
`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
||||
</div>`,
|
||||
]) : []
|
||||
this.weekConfig.data = this.nowWeek
|
||||
this.$refs['week'].updateRows(this.nowWeek)
|
||||
this.oneDay = newVal.oneDay ? newVal.oneDay.map((item, index) => [
|
||||
`<span style="color:#000;" >${index + 1 || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;" >${item.name || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${item.inputNum || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
||||
`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
||||
</div>`,
|
||||
]) : []
|
||||
this.dayConfig.data = this.oneDay
|
||||
this.$refs['day'].updateRows(this.oneDay)
|
||||
this.todayClass = newVal.todayClass ? newVal.todayClass.map((item, index) => [
|
||||
`<span style="color:#000;" >${index + 1 || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;" >${item.name || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:#000;" >${item.inputNum || ''}
|
||||
</span>`,
|
||||
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
||||
`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
|
||||
</div>`,
|
||||
]) : []
|
||||
this.classConfig.data = this.todayClass
|
||||
this.$refs['classToday'].updateRows(this.todayClass)
|
||||
}
|
||||
},
|
||||
deep: true // 深度监听
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config:{
|
||||
nowMonth: [],
|
||||
nowWeek: [],
|
||||
oneDay: [],
|
||||
todayClass: [],
|
||||
classConfig:{
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
|
||||
headerHeight: 25,
|
||||
headerBGC: '#E8EDF8',
|
||||
@@ -55,7 +151,41 @@ export default {
|
||||
columnWidth: [66, 120, 125, 126, 174],
|
||||
align : ['center', 'center', 'center', 'center', 'center'],
|
||||
data: []
|
||||
},
|
||||
monthConfig: {
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
||||
headerHeight: 25,
|
||||
headerBGC: '#E8EDF8',
|
||||
oddRowBGC: '#E8EDF8',
|
||||
evenRowBGC: '#fff',
|
||||
rowNum: 8,
|
||||
columnWidth: [66, 120, 125, 126, 174],
|
||||
align: ['center', 'center', 'center', 'center', 'center'],
|
||||
data: []
|
||||
},
|
||||
dayConfig: {
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
||||
headerHeight: 25,
|
||||
headerBGC: '#E8EDF8',
|
||||
oddRowBGC: '#E8EDF8',
|
||||
evenRowBGC: '#fff',
|
||||
rowNum: 8,
|
||||
columnWidth: [66, 120, 125, 126, 174],
|
||||
align: ['center', 'center', 'center', 'center', 'center'],
|
||||
data: []
|
||||
},
|
||||
weekConfig: {
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>', '<span style="color:#000;">产出率/%</span>'],
|
||||
headerHeight: 25,
|
||||
headerBGC: '#E8EDF8',
|
||||
oddRowBGC: '#E8EDF8',
|
||||
evenRowBGC: '#fff',
|
||||
rowNum: 8,
|
||||
columnWidth: [66, 120, 125, 126, 174],
|
||||
align: ['center', 'center', 'center', 'center', 'center'],
|
||||
data: []
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -63,33 +193,33 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let arr1 = []
|
||||
let arr2 = []
|
||||
let data = [
|
||||
[1,'A1-磨边',234344,234333,100],
|
||||
[2,'A1-磨边',234344,234333,10],
|
||||
[3,'A1-磨边',234344,234333,96],
|
||||
[4,'A1-磨边',234344,234333,20],
|
||||
[5,'A1-磨边',234344,234333,40],
|
||||
[6,'A1-磨边',234344,234333,90],
|
||||
[7,'A1-磨边',234344,234333,80],
|
||||
[8,'A1-磨边',234344,234333,80],
|
||||
]
|
||||
for (let i =0; i < data.length; i++) {
|
||||
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
|
||||
arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
|
||||
arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
|
||||
arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
|
||||
arr1.push(`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
|
||||
</div>`)
|
||||
arr2.push(arr1)
|
||||
arr1 = []
|
||||
}
|
||||
this.config.data = arr2
|
||||
// let arr1 = []
|
||||
// let arr2 = []
|
||||
// let data = [
|
||||
// [1,'A1-磨边',234344,234333,100],
|
||||
// [2,'A1-磨边',234344,234333,10],
|
||||
// [3,'A1-磨边',234344,234333,96],
|
||||
// [4,'A1-磨边',234344,234333,20],
|
||||
// [5,'A1-磨边',234344,234333,40],
|
||||
// [6,'A1-磨边',234344,234333,90],
|
||||
// [7,'A1-磨边',234344,234333,80],
|
||||
// [8,'A1-磨边',234344,234333,80],
|
||||
// ]
|
||||
// for (let i =0; i < data.length; i++) {
|
||||
// arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
|
||||
// arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
|
||||
// arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
|
||||
// arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
|
||||
// arr1.push(`<div style="width:136px; margin:0px;">
|
||||
// <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
// <div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
// </div>
|
||||
// <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
|
||||
// </div>`)
|
||||
// arr2.push(arr1)
|
||||
// arr1 = []
|
||||
// }
|
||||
// this.config.data = arr2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,19 +22,38 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
legendArr:[
|
||||
{color:'#FFCE6A', name:'A1'},
|
||||
{color:'#21CECD', name:'A2'},
|
||||
{color:'#77B4FD', name:'A3'},
|
||||
{color:'#29BDFA', name:'A4'},
|
||||
{color:'#5A7DDA', name:'A5'},
|
||||
{color:'#FFB49D', name:'A6'},
|
||||
{color:'#C5A6FC', name:'A7'},
|
||||
{color:'#7164FF', name:'A8'},
|
||||
{color:'#98B0C7', name:'A9'},
|
||||
{color:'#5D7092', name:'A10'}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, 'newVal');
|
||||
if (newVal) {
|
||||
let xData = []
|
||||
newVal.forEach(ele => {
|
||||
xData.push(this.formatDate(ele.time))
|
||||
});
|
||||
// console.log(, 'xData');
|
||||
const series = this.convertToSeries(newVal)
|
||||
this.getChart([...new Set(xData)], series)
|
||||
// this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
|
||||
// this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
|
||||
// this.oneDay = newVal.oneDay ? newVal.oneDay : []
|
||||
// this.todayClass = newVal.todayClass ? newVal.todayClass : []
|
||||
}
|
||||
// this.getChart(this.todayClass)
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getChart()
|
||||
},
|
||||
@@ -42,7 +61,69 @@ export default {
|
||||
init() {
|
||||
|
||||
},
|
||||
getChart() {
|
||||
formatDate(time) {
|
||||
if (!time) return '';
|
||||
|
||||
// 如果是时间戳格式
|
||||
if (typeof time === 'number' || !isNaN(time)) {
|
||||
const date = new Date(parseInt(time));
|
||||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 如果是ISO字符串格式
|
||||
if (typeof time === 'string') {
|
||||
const date = new Date(time);
|
||||
if (!isNaN(date.getTime())) {
|
||||
return `$${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
||||
return time;
|
||||
},
|
||||
convertToSeries(data) {
|
||||
this.legendArr = []
|
||||
// 1. 按产线ID分组
|
||||
const colorArr = ['#FFCE6A', '#21CECD', '#77B4FD', '#29BDFA', '#5A7DDA', '#FFB49D', '#C5A6FC', '#7164FF', '#98B0C7', '#5D7092']
|
||||
const grouped = {};
|
||||
|
||||
data.forEach(item => {
|
||||
if (!grouped[item.id]) {
|
||||
grouped[item.id] = {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
data: []
|
||||
};
|
||||
}
|
||||
// 将数据存入对应产线，并保留时间信息用于排序
|
||||
grouped[item.id].data.push({
|
||||
value: item.inputOutputRate,
|
||||
time: item.time
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 转换为series格式，并按时间排序数据点
|
||||
// let legendArr= []
|
||||
return Object.values(grouped)
|
||||
.sort((a, b) => a.id - b.id) // 按产线ID排序
|
||||
.map((line,index) => {
|
||||
// 按时间排序每个产线的数据点
|
||||
line.data.sort((a, b) => a.time - b.time);
|
||||
this.legendArr.push({
|
||||
name: line.name, // 产线名称（与series.name一致）
|
||||
color: colorArr[index] // 匹配colorArr中对应索引的颜色
|
||||
});
|
||||
|
||||
// 提取value作为数据，保持ECharts series格式
|
||||
return {
|
||||
name: line.name,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: line.data.map(item => item.value)
|
||||
};
|
||||
});
|
||||
},
|
||||
getChart(xData, series) {
|
||||
var chartDom = document.getElementById('lineRate');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
@@ -67,7 +148,7 @@ export default {
|
||||
color: 'rgba(0,0,0,0.45)'
|
||||
}
|
||||
},
|
||||
data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
|
||||
data: xData ? xData: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@@ -81,43 +162,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'A1',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [82, 13, 10, 33, 90, 23, 71]
|
||||
},
|
||||
{
|
||||
name: 'A2',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [22, 38, 59, 23, 99, 33, 31]
|
||||
},
|
||||
{
|
||||
name: 'A3',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [15, 43, 20, 95, 89, 33, 41]
|
||||
},
|
||||
{
|
||||
name: 'A4',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [32, 33, 30, 33, 39, 33, 32]
|
||||
},
|
||||
{
|
||||
name: 'A5',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
data: [82, 93, 90, 93, 29, 33, 32]
|
||||
}
|
||||
]
|
||||
series: series ? series: []
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
@@ -128,7 +173,7 @@ export default {
|
||||
.line-rate {
|
||||
position: relative;
|
||||
.legend-box {
|
||||
width: 280px;
|
||||
width: 340px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -136,7 +181,7 @@ export default {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
.legend-item {
|
||||
width: 55px;
|
||||
width: 100px;
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
|
||||
@@ -18,14 +18,115 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
nowMonth:[],
|
||||
nowWeek: [],
|
||||
oneDay: [],
|
||||
todayClass: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getChart()
|
||||
// this.getChart()
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal,'newVal');
|
||||
if (newVal) {
|
||||
this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
|
||||
this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
|
||||
this.oneDay = newVal.oneDay ? newVal.oneDay :[]
|
||||
this.todayClass = newVal.todayClass ? newVal.todayClass : []
|
||||
}
|
||||
this.getChart(this.todayClass)
|
||||
},
|
||||
deep: true // 深度监听
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
getChart(val) {
|
||||
console.log(val, 'val');
|
||||
let series = []
|
||||
const lineNames = [...new Set(val.map(item => item.lineName))].sort();
|
||||
// const types = [...new Set(val.map(item => item.type))].sort();
|
||||
// lineNames.forEach(lineName => {
|
||||
// series.push({
|
||||
// name: lineName,
|
||||
// type: 'bar',
|
||||
// barGap: '30%',
|
||||
// barWidth: 15,
|
||||
// data: []
|
||||
// });
|
||||
// });
|
||||
const types = ['上片', '磨边', '打孔', '丝印', '镀膜', '钢化', '包装']
|
||||
const typeMap = { 1: '上片', 2: '磨边', 3: '打孔',4:'丝印', 5: '镀膜', 6: '钢化', 7: '包装' };
|
||||
types.forEach(typeName => {
|
||||
series.push({
|
||||
name: typeName,
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 15,
|
||||
data: []
|
||||
});
|
||||
});
|
||||
types.forEach((type, index) => {
|
||||
const typeValue = parseInt(Object.keys(typeMap).find(key => typeMap[key] === type));
|
||||
console.log(typeValue,'typeValue');
|
||||
|
||||
const itemSeries = series.find(s => s.name === type);
|
||||
lineNames.forEach(lineName => {
|
||||
const item = val.find(d => d.lineName === lineName && d.type === typeValue);
|
||||
if (item) {
|
||||
itemSeries.data.push(item.lossNum);
|
||||
} else {
|
||||
// 如果没有数据，添加0
|
||||
itemSeries.data.push(0);
|
||||
}
|
||||
});
|
||||
// lineSeries.data.push(lineSeries.lossNum)
|
||||
// types.forEach(type => {
|
||||
// // 查找对应产线和工序类型的数据
|
||||
// const item = oneDay.find(d => d.lineName === lineName && d.type === type);
|
||||
// if (item) {
|
||||
// // 将lossNum添加到对应的系列中
|
||||
// lineSeries.data.push(item.lossNum);
|
||||
// } else {
|
||||
// // 如果没有数据，添加0
|
||||
// lineSeries.data.push(0);
|
||||
// }
|
||||
// });
|
||||
});
|
||||
console.log('series', series);
|
||||
|
||||
// const lineNames = [...new Set(val.map(item => item.lineName))].sort();
|
||||
// // let xData = []
|
||||
// lineNames.forEach(line => {
|
||||
// // sectionNames.forEach(section => {
|
||||
// // 查找对应产线和工段的数据
|
||||
// const item = val.find(d => d.lineName === line);
|
||||
// if (item) {
|
||||
// // 将lossNum添加到对应的系列中
|
||||
// this.series[item.type - 1].data.push(item.lossNum);
|
||||
// } else {
|
||||
// // 如果没有数据，添加0
|
||||
// this.series.forEach(s => s.data.push(0));
|
||||
// }
|
||||
// // });
|
||||
// });
|
||||
// val.forEach((ele) => {
|
||||
// console.log(ele.lineName,ele.type);
|
||||
|
||||
// if (!xData.includes(ele.lineName)) {
|
||||
// xData.push(ele.lineName)
|
||||
// }
|
||||
// })
|
||||
// console.log('xData', xData);
|
||||
|
||||
var chartDom = document.getElementById('lossSum');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
@@ -35,7 +136,8 @@ export default {
|
||||
top:18,
|
||||
right:5,
|
||||
itemWidth:8,
|
||||
itemHeight:8,
|
||||
itemHeight: 8,
|
||||
// data: [ '上片', '磨边','打孔','镀膜','钢化','包装'],
|
||||
textStyle:{
|
||||
color: '#8C8C8C',
|
||||
fontSize: '14px'
|
||||
@@ -76,7 +178,7 @@ export default {
|
||||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
data:['A1', 'A2', 'A3', 'A4', 'A5']
|
||||
data: lineNames
|
||||
},
|
||||
yAxis: {
|
||||
name:'单位/片',
|
||||
@@ -91,62 +193,20 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '包装',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [433, 858, 937, 926, 928]
|
||||
},
|
||||
{
|
||||
name: '上片',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [831, 734, 551, 864, 810]
|
||||
},
|
||||
{
|
||||
name: '磨边',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [864, 652, 825, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '打孔',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [724, 539, 391, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '丝印',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [831, 734, 551, 864, 810]
|
||||
},
|
||||
{
|
||||
name: '镀膜',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [864, 652, 825, 810, 810]
|
||||
},
|
||||
{
|
||||
name: '钢化',
|
||||
type: 'bar',
|
||||
barGap: '30%',
|
||||
barWidth: 8,
|
||||
data: [433, 858, 937, 926, 928]
|
||||
},
|
||||
]
|
||||
series: series
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
chooseBtn(val) {
|
||||
console.log(val)
|
||||
if (val ===3) {
|
||||
this.getChart(this.nowMonth)
|
||||
} else if (val === 2) {
|
||||
this.getChart(this.nowWeek)
|
||||
} else if (val === 1) {
|
||||
this.getChart(this.oneDay)
|
||||
} else if (val === 0) {
|
||||
this.getChart(this.todayClass)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
<template>
|
||||
<ModelBox name='2-1'>
|
||||
<div class='section-content'>
|
||||
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn'/>
|
||||
<SwitchBtn class='switch-btn' @chooseBtn='chooseBtn' />
|
||||
<div class='section-list'>
|
||||
<div
|
||||
v-for='item in sectionArr'
|
||||
:key='item.id'
|
||||
class='section-item'
|
||||
:class='{acvtive: sectionActive === item.id}'
|
||||
@click='sectionActive = item.id'
|
||||
>{{item.name}}</div>
|
||||
<div v-for='item in sectionArr' :key='item.id' class='section-item'
|
||||
:class='{active: sectionActive === item.id}' @click='sectionActive = item.id'>{{item.name}}</div>
|
||||
</div>
|
||||
<dv-scroll-board :config="config" style="width:583px;height:220px;" class='section-table'/>
|
||||
<dv-scroll-board ref="showTable" :config="config" style="width:583px;height:220px;" class='section-table' />
|
||||
<span class='split-line' style='left: 66px;'></span>
|
||||
<span class='split-line' style='left: 186px;'></span>
|
||||
<span class='split-line' style='left: 306px;'></span>
|
||||
@@ -30,17 +25,67 @@ export default {
|
||||
ModelBox,
|
||||
SwitchBtn
|
||||
},
|
||||
watch: {
|
||||
dataObj: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal, 'newVal');
|
||||
if (newVal) {
|
||||
this.nowMonth = newVal.nowMonth ? newVal.nowMonth : []
|
||||
this.nowWeek = newVal.nowWeek ? newVal.nowWeek : []
|
||||
this.oneDay = newVal.oneDay ? newVal.oneDay : []
|
||||
this.todayClass = newVal.todayClass ? newVal.todayClass : []
|
||||
}
|
||||
// this.getChart(this.todayClass)
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
},
|
||||
sectionActive: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
console.log(newVal, 'sectionActive');
|
||||
this.updateChartData();
|
||||
}
|
||||
// this.updateChartData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
time: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
console.log(newVal, 'sectionActive');
|
||||
this.updateChartData();
|
||||
}
|
||||
// this.updateChartData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
props: {
|
||||
dataObj: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sectionArr:[
|
||||
{id:'1', name:'上片'},
|
||||
{id:'2', name:'磨边'},
|
||||
{id:'3', name:'打孔'},
|
||||
{id:'4', name:'丝印'},
|
||||
{id:'5', name:'镀膜'},
|
||||
{id:'6', name:'钢化'},
|
||||
{id:'7', name:'包装'}
|
||||
{id:1, name:'上片'},
|
||||
{id:2, name:'磨边'},
|
||||
{id:3, name:'打孔'},
|
||||
{id:4, name:'丝印'},
|
||||
{id:5, name:'镀膜'},
|
||||
{id:6, name:'钢化'},
|
||||
{id:7, name:'包装'}
|
||||
],
|
||||
nowMonth: [],
|
||||
nowWeek: [],
|
||||
oneDay: [],
|
||||
todayClass: [],
|
||||
time: 0,
|
||||
showData: [],
|
||||
sectionActive: '1',
|
||||
config:{
|
||||
header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">工段</span>', '<span style="color:#000;">投入数量/片</span>', '<span style="color:#000;">产出数量/片</span>','<span style="color:#000;">产出率/%</span>'],
|
||||
@@ -56,40 +101,90 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
this.updateChartData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
let arr1 = []
|
||||
let arr2 = []
|
||||
let data = [
|
||||
[1,'A1-磨边',234344,234333,100],
|
||||
[2,'A1-磨边',234344,234333,10],
|
||||
[3,'A1-磨边',234344,234333,96],
|
||||
[4,'A1-磨边',234344,234333,20],
|
||||
[5,'A1-磨边',234344,234333,40],
|
||||
[6,'A1-磨边',234344,234333,90],
|
||||
[7,'A1-磨边',234344,234333,80],
|
||||
]
|
||||
for (let i =0; i < data.length; i++) {
|
||||
arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
|
||||
arr1.push(`<img src=${arrowRed} width=12 style="margin-right:2px" /><span style="color:#000;">${data[i][1]}</span>`)
|
||||
arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
|
||||
arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
|
||||
arr1.push(`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
|
||||
</div>`)
|
||||
arr2.push(arr1)
|
||||
arr1 = []
|
||||
updateChartData() {
|
||||
const data = this.getDataByTimeAndType();
|
||||
this.getData(data);
|
||||
},
|
||||
getDataByTimeAndType() {
|
||||
// console.log(this.time,'time');
|
||||
console.log(this.sectionActive, this.time, 'sectionActive');
|
||||
|
||||
// 确定当前时间范围的数据源
|
||||
let dataSource;
|
||||
switch (this.time) {
|
||||
case 3: // 本月
|
||||
dataSource = this.nowMonth;
|
||||
break;
|
||||
case 2: // 本周
|
||||
dataSource = this.nowWeek;
|
||||
break;
|
||||
case 1: // 今日
|
||||
dataSource = this.oneDay;
|
||||
break;
|
||||
case 0: // 今日班次
|
||||
default:
|
||||
dataSource = this.todayClass;
|
||||
break;
|
||||
}
|
||||
this.config.data = arr2
|
||||
console.log(dataSource,'dataSource');
|
||||
|
||||
// 如果没有数据，返回空数组
|
||||
if (!dataSource || dataSource.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 根据sectionActive（对应type）筛选数据
|
||||
const filteredData = dataSource.filter(item => item.type === parseInt(this.sectionActive));
|
||||
|
||||
// 按产出率排序
|
||||
return filteredData
|
||||
},
|
||||
getData(data) {
|
||||
console.log(data,'ryf');
|
||||
this.showData = data ? data.map((item, index) => [
|
||||
// `<span style="color:#000;" >${index + 1 || ''}
|
||||
// </span>`,
|
||||
`<span style="color:#000;">${index + 1 }</span>`,
|
||||
// `<span style="color:#000;" >${item.sectionName || ''}
|
||||
// </span>`,
|
||||
`<span style="color:#000;">${item.sectionName}</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`<span style="color:#000;" >${item.inputNum || ''}
|
||||
</span>`,
|
||||
// `<span style="color:#000;">${data[i][3]}</span>`
|
||||
`<span style="color:#000;">${item.outputNum || ''}</span>`,
|
||||
`<div style="width:136px; margin:0px;">
|
||||
<div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
|
||||
<div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
|
||||
</div>
|
||||
<span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate }%</span>
|
||||
</div>`,
|
||||
]) : []
|
||||
|
||||
this.config = {
|
||||
...this.config,
|
||||
data: this.showData
|
||||
};
|
||||
console.log(this.showData, 'arr', this.config.data);
|
||||
// console.log(this.$refs['showTable'])
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.showTable) {
|
||||
this.$refs.showTable.updateRows(this.showData);
|
||||
}
|
||||
});
|
||||
// this.$forceUpdate()
|
||||
// this.config.data = arr2
|
||||
},
|
||||
chooseBtn(val) {
|
||||
console.log(val)
|
||||
this.time = val
|
||||
console.log(this.time,' this.time');
|
||||
|
||||
this.updateChartData()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -116,7 +211,7 @@ export default {
|
||||
letter-spacing: 4px;
|
||||
background-color: #E8EDF8;
|
||||
}
|
||||
.acvtive {
|
||||
.active {
|
||||
background-color: #0B58FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1,27 +1,20 @@
|
||||
<template>
|
||||
<div class='home-box'>
|
||||
<div
|
||||
id="homeComtainerB"
|
||||
ref="homeComtainerB"
|
||||
>
|
||||
<div
|
||||
class='home-comtainer'
|
||||
id="homeComtainer"
|
||||
style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }"
|
||||
>
|
||||
<HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange"/>
|
||||
<div id="homeComtainerB" ref="homeComtainerB">
|
||||
<div class='home-comtainer' id="homeComtainer" style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<HomeHeader :isFullScreen="isFullScreen" @screenfullChange="screenfullChange" />
|
||||
<div class='line-one'>
|
||||
<LossSum style='margin-right: 16px;'/>
|
||||
<EqAlarm style='margin-right: 16px;'/>
|
||||
<Count />
|
||||
<LossSum style='margin-right: 16px;' :dataObj="dataObj.workShopData" />
|
||||
<EqAlarm style='margin-right: 16px;' :dataObj="dataObj.alarmData" />
|
||||
<Count :dataObj="dataObj.downLoadNum" />
|
||||
</div>
|
||||
<div class='line-two'>
|
||||
<div>
|
||||
<SectionInputAndOutput style='margin-bottom: 16px;'/>
|
||||
<LineRate />
|
||||
<SectionInputAndOutput style='margin-bottom: 16px;' :dataObj="dataObj.workShopData" />
|
||||
<LineRate :dataObj="dataObj.lineHours"/>
|
||||
</div>
|
||||
<LineInpurAndOutput style='margin-left: 16px;'/>
|
||||
<LineInpurAndOutput :dataObj="dataObj.productionLineData" style='margin-left: 16px;' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,6 +31,8 @@ import LineRate from './components/LineRate.vue';
|
||||
import LineInpurAndOutput from './components/LineInpurAndOutput.vue';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import screenfull from 'screenfull';
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import store from "@/store";
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
@@ -52,15 +47,29 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 1
|
||||
scaleNum: 1,
|
||||
dataObj: {},
|
||||
sseReader: null, // 保存流读取器
|
||||
abortController: null, // 用于中止 fetch 请求
|
||||
retryCount: 0, // 当前重试次数
|
||||
isDestroyed: false // 标记组件是否已销毁
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.init();
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
window.addEventListener('resize', this.boxReset);
|
||||
// this.boxReset = debounce(() => {
|
||||
// this.resetSize()
|
||||
// }, 300)
|
||||
// this.boxReset()
|
||||
// window.addEventListener('resize', () => {
|
||||
// this.boxReset()
|
||||
// })
|
||||
this.getData()
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
@@ -70,7 +79,92 @@ export default {
|
||||
debounce(() => {
|
||||
this.resetSize();
|
||||
}, 300)();
|
||||
},
|
||||
},
|
||||
async getData() {
|
||||
let _this = this;
|
||||
if (_this.isDestroyed) return;
|
||||
const url = process.env.VUE_APP_BASE_API + '/admin-api/monitoring/message/subscribe/' + store.getters.userId + '-' + Date.now();
|
||||
const token = getAccessToken()
|
||||
const headers = new Headers({
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'text/event-stream'
|
||||
});
|
||||
try {
|
||||
// 创建中止控制器
|
||||
this.abortController = new AbortController();
|
||||
// 发起 fetch 请求（替换为你的接口地址）
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: headers,
|
||||
signal: _this.abortController.signal // 绑定中止信号
|
||||
});
|
||||
|
||||
// 获取流读取器
|
||||
_this.sseReader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
// 持续读取流数据
|
||||
while (true) {
|
||||
const { done, value } = await _this.sseReader.read();
|
||||
if (done) {
|
||||
console.log('SSE 连接正常关闭');
|
||||
_this.handleReconnect(); // 触发重连
|
||||
break;
|
||||
}
|
||||
// 处理 SSE 事件数据
|
||||
const data = decoder.decode(value);
|
||||
console.log('收到消息:', data);
|
||||
if (_this.isValidData(data)) {
|
||||
_this.upDateMsg(data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 主动中止的请求不报错
|
||||
if (error.name === 'AbortError') return;
|
||||
console.error('SSE 连接异常:', error);
|
||||
_this.handleReconnect(); // 触发重连
|
||||
}
|
||||
},
|
||||
closeSSE() {
|
||||
this.isDestroyed = true; // 标记销毁
|
||||
if (this.abortController) {
|
||||
this.abortController.abort(); // 中止 fetch 请求
|
||||
}
|
||||
if (this.sseReader) {
|
||||
this.sseReader.cancel(); // 关闭流读取器
|
||||
this.sseReader = null;
|
||||
}
|
||||
console.log('SSE 连接已强制关闭');
|
||||
},
|
||||
handleReconnect() {
|
||||
if (this.isDestroyed) return;
|
||||
// 指数退避策略（最大重试 5 次）
|
||||
const maxRetries = 5;
|
||||
if (this.retryCount < maxRetries) {
|
||||
const delay = Math.pow(2, this.retryCount) * 1000;
|
||||
setTimeout(() => {
|
||||
this.retryCount++;
|
||||
this.initSSE();
|
||||
}, delay);
|
||||
} else {
|
||||
console.error('SSE 重连次数已达上限');
|
||||
}
|
||||
},
|
||||
isValidData(data) {
|
||||
return data.trim().startsWith('data:{') && !data.includes('heartbeat');
|
||||
},
|
||||
upDateMsg(data) {
|
||||
const jsonStr = data.replace(/^data:/, '').trim();
|
||||
console.log('jsonStr', jsonStr);
|
||||
|
||||
try {
|
||||
const dataObj = JSON.parse(jsonStr);
|
||||
this.dataObj = dataObj
|
||||
console.log('dataObj', this.dataObj)
|
||||
} catch (e) {
|
||||
console.error('JSON 解析失败:', e);
|
||||
}
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user