mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

更新

Browse Source
This commit is contained in:
朱文强
2026-04-29 08:57:28 +08:00
parent 00393f76c7
commit b46e09e8ec
36 changed files with 8457 additions and 2085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@@ -14,7 +14,7 @@ VUE_APP_TITLE = 智能监控分析系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://172.16.33.187:48082' # VUE_APP_BASE_API = 'http://172.16.33.187:48082'
VUE_APP_BASE_API = 'http://line.kszny.picaiba.com' VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
# VUE_APP_BASE_API = 'http://172.16.32.79:48082' # VUE_APP_BASE_API = 'http://172.16.19.12:48082'
# 路由懒加载 # 路由懒加载

35
src/api/analysis/exception.js Normal file
View File

@@ -0,0 +1,35 @@
import request from '@/utils/request'
// 获得设备健康分析周期报表list
export function getReportPage(query) {
return request({
url: '/analysis/equipment-health-auto-report/reportList',
method: 'get',
params: query
})
}// 获得设备健康分析累计
export function getQueryPage(query) {
return request({
url: '/analysis/equipment-health-auto-report/queryList',
method: 'get',
params: query
})
}
// 导出
export function exportReportExcel(query) {
return request({
url: '/analysis/equipment-health-auto-report/export-excel-report',
method: 'get',
params: query,
responseType: 'blob'
})
}
export function exportQueryExcel(query) {
return request({
url: '/analysis/equipment-health-auto-report/export-excel-query',
method: 'get',
params: query,
responseType: 'blob'
})
}

64
src/api/base/equipmentSectionShutdownLog.js Normal file
View File

@@ -0,0 +1,64 @@
import request from '@/utils/request'
// 创建计划停机配置
export function createPlan(data) {
return request({
url: '/base/equipment-section-shutdown-log/create',
method: 'post',
data: data
})
}
// 更新计划停机配置
export function updatePlan(data) {
return request({
url: '/base/equipment-section-shutdown-log/update',
method: 'put',
data: data
})
}
// 获得计划停机配置
export function getPlan(id) {
return request({
url: '/base/equipment-section-shutdown-log/get?id=' + id,
method: 'get'
})
}
// 计划停机配置list
export function planList(query) {
return request({
url: '/base/equipment-section-shutdown-log/planList',
method: 'get',
params: query
})
}
// 停机记录list
export function errorList(query) {
return request({
url: '/base/equipment-section-shutdown-log/errorList',
method: 'get',
params: query
})
}
// 导出计划停机配置list
export function exportPlanList(query) {
return request({
url: '/base/equipment-section-shutdown-log/exportPlanList',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 导出停机记录list
export function exportErrorList(query) {
return request({
url: '/base/equipment-section-shutdown-log/exportErrorList',
method: 'get',
params: query,
responseType: 'blob'
})
}

46
src/api/core/analysis/index.js
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2023-09-12 14:07:04 * @Date: 2023-09-12 14:07:04
* @LastEditTime: 2025-01-08 15:47:17 * @LastEditTime: 2026-04-28 11:13:17
* @LastEditors: zwq * @LastEditors: zwq
* @Description: * @Description:
*/ */
@@ -14,6 +14,13 @@ export function getYieldAnalysisPageData(data) {
data: data data: data
}) })
} }
export function getYieldAnalysisHandlePageData(data) {
return request({
url: '/analysis/production-analysis/getOutputManual',
method: 'post',
data: data
})
}
export function getCT(data) { export function getCT(data) {
return request({ return request({
@@ -46,3 +53,40 @@ export function getNewCTDet(data) {
data:data data:data
}); });
} }
// 获得产线累计oee与teep
export function listHeader() {
return request({
url: '/analysis/production-oee-auto-report/listHeader',
method: 'get',
});
}
// 获得产线报表oee与teep
export function listLineReport(query) {
return request({
url: '/analysis/production-oee-auto-report/listLineReport',
method: 'get',
params: query,
});
}
// 导出生产分析teepExcel
export function exportTeepExcel(query) {
return request({
url: '/analysis/production-oee-auto-report/export-excel-teep',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 导出生产分析oeeExcel
export function exportOeeExcel(query) {
return request({
url: '/analysis/production-oee-auto-report/export-excel-oee',
method: 'get',
params: query,
responseType: 'blob'
})
}

13
src/api/core/monitoring/data24.js
View File

@@ -1,8 +1,8 @@
/* /*
* @Author: Do not edit * @Author: Do not edit
* @Date: 2023-09-12 09:44:53 * @Date: 2023-09-12 09:44:53
* @LastEditTime: 2023-09-15 14:12:26 * @LastEditTime: 2026-03-30 15:01:38
* @LastEditors: DY * @LastEditors: zwq
* @Description: * @Description:
*/ */
import request from '@/utils/request' import request from '@/utils/request'
@@ -15,3 +15,12 @@ export function getPdlDataOneDay(data) {
data: data data: data
}) })
} }
// 获得近24小时产线生产数据-新版
export function getSectionDataOneDay(data) {
return request({
url: '/monitoring/production-monitor/getSectionDataOneDay',
method: 'post',
data: data
})
}

7
src/components/ButtonNav/index.vue
View File

@@ -1,10 +1,3 @@
<!--
filename: index.vue
author: liubin
date: 2024-04-02 09:49:36
description:
-->
<template> <template>
<!-- 按钮切换 --> <!-- 按钮切换 -->
<div v-if="buttonMode" class="button-nav"> <div v-if="buttonMode" class="button-nav">

189
src/views/base/equipmentSectionShutdownLog/add-or-updata.vue Normal file
View File

@@ -0,0 +1,189 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 13:52:10
* @LastEditors: zwq
* @LastEditTime: 2026-04-16 15:13:53
* @Description:
-->
<template>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
v-if="visible"
@keyup.enter.native="dataFormSubmit()"
label-width="150px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="产线" prop="lineId">
<el-select
v-model="dataForm.lineId"
filterable
clearable
:style="{ width: '100%' }"
placeholder="请选择产线">
<el-option
v-for="item in lineOptions"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="计划停机起止时间" prop="timeRange">
<el-date-picker
v-model="dataForm.timeRange"
type="datetimerange"
:style="{ width: '100%' }"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
@change="handleTimeRangeChange"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="停机时长" prop="timeStopVal">
<span>{{ timeStopText }}</span>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="原因" prop="reason">
<el-input
type="textarea"
:rows="2"
placeholder="请输入原因"
v-model="dataForm.reason"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import basicAdd from '@/mixins/basic-add';
import {
createPlan,
updatePlan,
getPlan,
} from '@/api/base/equipmentSectionShutdownLog';
import { getProductionLinePage } from '@/api/core/base/productionLine';
export default {
mixins: [basicAdd],
data() {
return {
urlOptions: {
createURL: createPlan,
updateURL: updatePlan,
infoURL: getPlan,
optionArrUrl: [getProductionLinePage],
},
setData: true,
dataForm: {
id: undefined,
lineId: undefined,
timeRange: undefined,
reason: '',
timeStopVal: undefined, // 存储分钟数或秒数
},
lineOptions: [],
timeStopText: '', // 显示文本：x天x小时x分钟
dataRule: {
lineId: [
{ required: true, message: '产线不能为空', trigger: 'change' },
],
timeRange: [
{
required: true,
message: '计划停机起止时间不能为空',
trigger: 'change',
},
],
},
};
},
created() {},
methods: {
getArr() {
getProductionLinePage({
page: 1,
limit: 500,
}).then((response) => {
this.lineOptions = response.data.list;
});
},
setDataForm() {
this.dataForm.timeRange =
this.dataForm.startTime && this.dataForm.endTime
? [this.dataForm.startTime, this.dataForm.endTime]
: undefined;
this.handleTimeRangeChange(this.dataForm.timeRange);
},
// 时间范围改变时计算停机时长
handleTimeRangeChange(val) {
if (!val || val.length < 2) {
this.timeStopText = '';
this.dataForm.timeStopVal = undefined;
return;
}
const start = new Date(val[0]).getTime();
const end = new Date(val[1]).getTime();
if (end <= start) {
this.timeStopText = '结束时间必须大于开始时间';
this.dataForm.timeStopVal = undefined;
return;
}
// 总毫秒数 → 总分钟数
const totalMinutes = (end - start) / 1000 / 60;
// 计算天、小时、剩余分钟
const days = Math.floor(totalMinutes / 1440);
const hours = Math.floor((totalMinutes % 1440) / 60);
const minutes = Math.round(totalMinutes % 60);
// 拼接显示文本
let text = '';
if (days > 0) text += `${days}天`;
if (hours > 0) text += `${hours}小时`;
if (minutes > 0 || text === '') text += `${minutes}分钟`;
this.timeStopText = text;
this.dataForm.timeStopVal = totalMinutes; // 提交时可传总分钟数
},
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false;
}
this.dataForm.startTime = this.dataForm.timeRange
? this.dataForm.timeRange[0]
: undefined;
this.dataForm.endTime = this.dataForm.timeRange
? this.dataForm.timeRange[1]
: undefined;
// 修改的提交
if (this.dataForm.id) {
this.urlOptions.updateURL(this.dataForm).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.$emit('refreshDataList');
});
return;
}
// 添加的提交
this.urlOptions.createURL(this.dataForm).then((response) => {
this.$modal.msgSuccess('新增成功');
this.visible = false;
this.$emit('refreshDataList');
});
});
},
},
};
</script>

470
src/views/base/equipmentSectionShutdownLog/index.vue Normal file
View File

@@ -0,0 +1,470 @@
<!--
* @Author: zwq
* @Date: 2026-04-16 14:03:22
* @LastEditors: zwq
* @LastEditTime: 2026-04-17 15:50:29
* @Description:
-->
<template>
<div style="background: #f2f4f9">
<div style="background: #f2f4f9; height: 38px; width: 100%">
<ButtonNav
ref="buttonNav"
:menus="['计划停机配置', '停机记录']"
@change="currentMenu">
<template v-slot:tab1>
<div>计划停机配置</div>
</template>
<template v-slot:tab2>
<div>停机记录</div>
</template>
</ButtonNav>
</div>
<div
style="
background: #ffffff;
width: 100%;
margin-bottom: 8px;
padding: 10px 10px 0 10px;
">
<!-- 搜索工作栏 -->
<search-bar
v-if="activeName === '计划停机配置'"
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div v-else class="searchBarBox">
<el-form
:inline="true"
ref="searchBarForm"
:model="formInline"
class="searchBar">
<span class="blue-block"></span>
<el-form-item label="产线/工段" prop="lineIds">
<el-cascader size="small"
v-model="formInline.lineIds"
:options="options"
:props="{
value: 'id',
label: 'name',
checkStrictly: true,
multiple: true,
emitPath: false,
}"></el-cascader>
</el-form-item>
<el-form-item label="时间范围" prop="times">
<el-date-picker size="small"
v-model="formInline.times"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"></el-date-picker>
</el-form-item>
<el-form-item label="停机时长" prop="duration">
<el-select size="small"
v-model="durationJudge"
@change="handleCompareChange"
style="width: 100px; margin-right: 8px">
<el-option label="大于" value="1"></el-option>
<el-option label="大于等于" value="2"></el-option>
<el-option label="小于" value="3"></el-option>
<el-option label="小于等于" value="4"></el-option>
<el-option label="等于" value="5"></el-option>
<el-option label="介于" value="6"></el-option>
</el-select>
<el-input size="small"
v-model.number="duration1"
type="number"
placeholder="输入整数"
min="0"
style="width: 100px; margin-right: 8px"
@keydown="preventNonInteger"></el-input>
<span v-if="durationJudge === '6'" style="margin-right: 8px">
~
</span>
<el-input size="small"
v-if="durationJudge === '6'"
v-model.number="duration2"
type="number"
placeholder="输入整数"
min="0"
style="width: 100px; margin-right: 8px"
@keydown="preventNonInteger"></el-input>
<!-- 时间单位下拉 -->
<el-select size="small" v-model="timeUnit" style="width: 100px">
<el-option label="分钟" value="minute"></el-option>
<el-option label="小时" value="hour"></el-option>
<el-option label="天" value="day"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleRecordSearch">
查询
</el-button>
<el-button size="small" type="warning" @click="handleExport1">
导出
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div
class="app-container"
v-if="activeName === '计划停机配置'"
style="background: #ffffff">
<!-- 表 -->
<div>
<base-table
:page="1"
:limit="100"
:table-props="tableProps1"
:table-data="list"
:max-height="500">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="90"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
</div>
</div>
<div
class="app-container"
v-else-if="activeName === '停机记录'"
style="background: #ffffff">
<!-- 表 -->
<div>
<base-table
:page="1"
:limit="100"
:table-props="tableProps2"
:table-data="list"
:max-height="500"></base-table>
</div>
</div>
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="40%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>
</base-dialog>
</div>
</template>
<script>
import ButtonNav from '@/components/ButtonNav';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import {
planList,
errorList,
exportPlanList,
exportErrorList,
} from '@/api/base/equipmentSectionShutdownLog';
import subDiv from './subDiv.vue';
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { getGroupPlanTree } from '@/api/group/Schedule';
const tableProps1 = [
{
prop: 'lineName',
label: '产线名称',
},
{
prop: 'timeVal',
label: '停机起止时间',
subcomponent: subDiv,
},
{
prop: 'durationStr',
label: '停机时长',
},
{
prop: 'reason',
label: '原因',
},
];
const tableProps2 = [
{
prop: 'lineName',
label: '产线名称',
},
{
prop: 'sectionName',
label: '工段名称',
},
{
prop: 'timeVal',
label: '停机起止时间',
subcomponent: subDiv,
},
{
prop: 'duration',
label: '停机时长',
},
];
export default {
mixins: [basicPage],
name: '',
data() {
return {
urlOptions: {
exportURL: exportPlanList,
},
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
collapseTags: true,
multiple: true,
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '新增',
name: 'add',
color: 'success',
plain: true,
},
{
type: 'separate',
},
{
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
},
],
tableBtn: [
{
type: 'edit',
btnName: '编辑',
},
].filter((v) => v),
activeName: '计划停机配置',
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 20,
lineIds: null,
times: null,
},
tableProps1,
tableProps2,
list: [],
lineList: [],
formInline: {
lineIds: null,
times: null,
durationJudge: '1',
duration: 0,
},
options: [], // 产线/工段选项
// 停机时长筛选相关
durationJudge: '1',
duration1: 0,
duration2: '',
timeUnit: 'minute',
};
},
components: { ButtonNav, AddOrUpdate },
mounted() {
this.$nextTick(() => {
getProductionLinePage({
page: 1,
limit: 500,
}).then((response) => {
this.formConfig[0].selectOptions = response.data.list;
});
if (this.$refs.buttonNav) {
this.$refs.buttonNav.currentMenu = '计划停机配置';
}
this.getDataList();
});
},
methods: {
currentMenu(val) {
this.activeName = val;
if (this.activeName == '计划停机配置') {
this.urlOptions.exportURL = exportPlanList;
this.getDataList();
} else {
this.urlOptions.exportURL = exportErrorList;
getGroupPlanTree().then((res) => {
this.options = res.data;
});
this.getErrorList();
}
},
//计划停机配置list
getDataList() {
planList(this.queryParams).then((response) => {
this.list = response.data;
});
},
//停机记录list
getErrorList() {
errorList(this.formInline).then((response) => {
this.list = response.data;
});
},
// 查询
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.queryParams.lineIds = val.lineIds;
this.queryParams.type = val.type;
this.queryParams.times = val.timeVal;
this.getDataList();
break;
case 'add':
this.addOrEditTitle = '新增';
this.addOrUpdateVisible = true;
this.addOrUpdateHandle();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
//tableBtn点击
handleClick(val) {
if (val.type === 'edit') {
this.addOrUpdateVisible = true;
this.addOrEditTitle = '编辑';
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data.id);
});
}
},
handleCompareChange() {
// 切换为非between时清空第二个输入框
if (this.durationJudge !== '6') {
this.duration2 = '';
}
},
// * 禁止输入非数字字符
preventNonInteger(e) {
// 允许数字、退格、删除、方向键
const keyCode = e.keyCode;
if (
!(keyCode >= 48 && keyCode <= 57) && // 0-9
!(keyCode >= 96 && keyCode <= 105) && // 小键盘0-9
keyCode !== 8 && // Backspace
keyCode !== 46 && // Delete
!(keyCode >= 37 && keyCode <= 40) // 方向键
) {
e.preventDefault();
}
},
handleRecordSearch() {
this.formInline.durationJudge = this.durationJudge;
// 构建停机时长筛选条件
if (this.durationJudge === '6') {
if (this.duration1 !== '' && this.duration2 !== '') {
this.formInline.duration = undefined;
// 转分钟
let start = Number(this.duration1);
let end = Number(this.duration2);
if (this.timeUnit === 'hour') {
start *= 60;
end *= 60;
} else if (this.timeUnit === 'day') {
start *= 60 * 24;
end *= 60 * 24;
} //minute 则不处理
this.formInline.betweenDurationStart = start;
this.formInline.betweenDurationEnd = end;
}
} else {
if (this.duration1 !== '') {
let val = Number(this.duration1);
if (this.timeUnit === 'hour') {
val *= 60;
} else if (this.timeUnit === 'day') {
val *= 60 * 24;
}
this.formInline.duration = val;
}
}
// 调用接口查询数据
this.getErrorList();
},
handleExport1() {
this.handleRecordSearch()
// 处理查询参数
let params = { ...this.formInline };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '报表.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>
<style scoped>
.searchBarBox {
width: 100%;
position: relative;
margin-bottom: 8px;
}
.searchBarBox::after {
content: '';
display: block;
clear: both;
}
.searchBar .blue-block {
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 12px;
}
.searchBar .el-form-item {
margin-bottom: 4px;
}
</style>

35
src/views/base/equipmentSectionShutdownLog/subDiv.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
* @Author: zwq
* @Date: 2024-07-01 14:53:55
* @LastEditors: zwq
* @LastEditTime: 2026-03-18 14:32:19
* @Description:
-->
<template>
<div>
<span>
{{
parseTime(injectData.startTime, '{y}年{m}月{d}日') +
'-' +
parseTime(injectData.endTime, '{y}年{m}月{d}日')
}}
</span>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>

295
src/views/core/analysis/balanceAnalysis/index-jiepai.vue Normal file
View File

@@ -0,0 +1,295 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2026-04-16 13:14:29
* @LastEditors: zwq
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<div v-if="showData.length">
<base-table
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="1"
:limit="999"
:table-data="showData">
<method-btn
v-if="showData.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<barChart
v-for="item in chartData"
:key="item.name + 'echart'"
style="margin-top: 50px"
height="600px"
:id="item.name + 'echart'"
:title="item.name + ' 节拍趋势图'"
:bar-data="item" />
</div>
<div v-else class="no-data-bg"></div>
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
close-on-click-modal
top="0"
width="50%">
<eq-detail ref="eqDetail" />
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button size="small" class="btnTextStyle" @click="handleCancel">
取消
</el-button>
</el-col>
</el-row>
</slot>
</base-dialog>
</div>
</template>
<script>
import eqDetail from './eq-detail';
import { parseTime } from '../../mixins/code-filter';
import { getPLlistByFactory } from '@/api/core/monitoring/auto';
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
import { getFactoryPage } from '@/api/core/base/factory';
// import codeFilter from '../../mixins/code-filter'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import barChart from './BarChart.vue';
const tableProps = [
{
prop: 'factoryName',
label: '工厂',
},
{
prop: 'lineName',
label: '产线',
},
{
prop: 'size',
label: '规格',
showOverflowtooltip: true,
},
{
prop: 'process',
label: '产品工艺',
},
{
prop: 'edgeCt',
label: '磨边当前节拍pcs/min',
},
{
prop: 'temperCt',
label: '钢化当前节拍pcs/min',
},
{
prop: 'downCt',
label: '下片当前节拍pcs/min',
},
];
export default {
components: {
barChart,
eqDetail,
},
data() {
return {
urlOptions: {
getDataListURL: getNewCTNow,
},
listQuery: {
lineId: [],
},
fileName: '',
dataListLoading: false,
tableProps,
tableBtn: [
{
type: 'eq',
btnName: '详情',
},
].filter((v) => v),
showData: [],
tableData: [],
chartData: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
collapseTags: true,
multiple: true,
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineId',
collapseTags: true,
multiple: true,
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'datetimerange',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
defaultTime: ['00:00:00', '23:59:59'],
param: 'timeVal',
width: 350,
clearable: false,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
addOrEditTitle: '',
addOrUpdateVisible: false,
};
},
created() {
// 获取当前时间
const now = new Date();
// 获取前一天的同一时间
const yesterday = new Date(now.getTime());
// 设置为00:00:00
yesterday.setHours(0, 0, 0, 0);
// 设置为23:59:59
const end = new Date(yesterday.getTime());
end.setHours(23, 59, 59, 59);
this.listQuery.startTime = yesterday.getTime();
this.listQuery.endTime = end.getTime();
this.$nextTick(() => {
this.$refs.searchBarForm.formInline.timeVal = [
yesterday.getTime(),
end.getTime(),
];
});
this.getDataList();
this.getPdLineList();
},
methods: {
handleExport() {
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;
},
getPdLineList() {
// getPLlistByFactory().then((res) => {
// this.formConfig[1].selectOptions = res.data || [];
// });
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.lineId = val.lineId ? val.lineId : [];
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : 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;
this.dataListLoading = false;
this.showData = this.tableData;
});
getNewCTCharts(this.listQuery).then((response) => {
this.chartData = response.data;
});
},
handleSearchBarChanged({ param, value }) {
this.listQuery.lineId = [];
this.$refs.searchBarForm.formInline.lineId = undefined;
getPLlistByFactory({ factoryIds: this.$refs.searchBarForm.formInline.factoryId }).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
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
);
});
},
handleCancel() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
},
handleConfirm() {
this.handleCancel();
},
},
};
</script>

296
src/views/core/analysis/balanceAnalysis/index-old.vue
View File

@@ -1,296 +0,0 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table
v-loading="dataListLoading"
:span-method="mergeColumnHandler"
:max-height="tableH"
:table-props="tableProps"
:table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
<balance-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
// import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter';
import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import BalanceChart from '../balanceChart';
import { time } from 'echarts';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
// const tableProps = [
// // {
// // prop: 'lineName',
// // label: '产线',
// // align: 'center',
// // },
// // {
// // prop: 'sum',
// // label: '合计',
// // align: 'center',
// // },
// // {
// // prop: 'dynamicValue',
// // label: 'dynamicName',
// // align: 'center',
// // children:[
// // ]
// // }
// ];
export default {
components: {
BalanceChart,
},
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
getDataListURL: getCT,
},
tableProps: [],
dataListLoading: false,
tableData: [],
listQuery: {
// time: ''
endTime: undefined,
lineId: undefined,
startTime: undefined,
},
timeList: [],
spanArr: [],
xData: [],
yData: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: '',
multiple: false,
filterable: true,
},
{
type: 'datePicker',
label: '时间',
dateType: 'datetimerange',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
width: 350,
param: 'time',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
};
},
created() {
this.getArr();
},
methods: {
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list;
});
});
},
setRowSpan(arr) {
let count = 0;
arr.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
} else {
if (item === arr[index - 1]) {
this.spanArr[count] += 1;
this.spanArr.push(0);
} else {
count = index;
this.spanArr.push(1);
}
}
});
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) {
if (this.spanArr[rowIndex]) {
return [
this.spanArr[rowIndex], // row span
1, // col span
];
} else {
return [0, 0];
}
}
},
getData() {
// this.listQuery.lineId = '1672847052717821953'
// this.listQuery.startTime = '1693497600000';
// this.listQuery.endTime = '1693843200000';
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
console.log(res);
let arr = [
{
prop: 'sectionName',
label: '工段',
align: 'center',
},
{
prop: 'equName',
label: '设备',
align: 'center',
width: 150
},
];
let sectionArr = [];
res.data.data.forEach((ele, index) => {
let tempData = [];
let ggData = [];
let sbluData = [];
let sbsjData = [];
let cxluData = [];
let cxsjData = [];
ele.data.forEach((item, index) => {
item.children.forEach((params) => {
if (params.dynamicName === '生产规格') {
tempData[item.dynamicName + '_gg'] = params.dynamicValue;
ggData[index] = params.dynamicValue;
} else if (params.dynamicName === '设备理论速度') {
tempData[item.dynamicName + '_sblu'] = params.dynamicValue;
sbluData[index] = params.dynamicValue;
} else if (params.dynamicName === '设备实际速度') {
tempData[item.dynamicName + '_sbsj'] = params.dynamicValue;
sbsjData[index] = params.dynamicValue;
} else if (params.dynamicName === '产线理论速度') {
tempData[item.dynamicName + '_cxlu'] = params.dynamicValue;
cxluData[index] = params.dynamicValue;
} else if(params.dynamicName === '产线实际速度') {
tempData[item.dynamicName + '_cxsj'] = params.dynamicValue;
cxsjData[index] = params.dynamicValue;
}
});
});
const equipment = {
name: ele.equName,
ggData: ggData,
sbluData: sbluData,
sbsjData: sbsjData,
cxluData: cxluData,
cxsjData: cxsjData,
};
tempData['equName'] = ele.equName;
tempData['sectionName'] = ele.sectionName;
this.tableData.push(tempData);
const { sectionName } = tempData;
sectionArr.push(sectionName);
this.yData.push(equipment);
});
this.setRowSpan(sectionArr);
res.data.nameData.forEach((item) => {
this.timeList.push(item.name);
});
const timeArray = Array.from(new Set(this.timeList));
console.log(timeArray)
for (const times of timeArray) {
if (times !== '生产规格' && times !== '设备理论速度' && times !== '设备实际速度'
&& times !== '产线理论速度' && times !== '产线实际速度'
) {
const subprop = {
label: times,
align: 'center',
children: [
{ prop: times + '_gg', label: '生产规格', align: 'center' },
{ prop: times + '_sblu', label: '设备理论速度[片/min]', align: 'center' },
{ prop: times + '_sbsj', label: '设备实际速度[片/min]', align: 'center' },
{ prop: times + '_cxlu', label: '产线理论速度[片/min]', align: 'center' },
{ prop: times + '_cxsj', label: '产线实际速度[片/min]', align: 'center' },
],
};
arr.push(subprop);
this.xData.push(times);
}
}
this.tableProps = arr;
console.log(this.$refs)
this.$nextTick(()=>{
this.$refs.lineChart.initChart(this.xData, this.yData);
})
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) {
case 'search':
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.listQuery.lineId = val.lineIds;
this.listQuery.startTime = val.time
? String(new Date(val.time[0]).getTime())
: undefined;
this.listQuery.endTime = val.time
? String(new Date(val.time[1]).getTime())
: undefined;
if (val.time && val.lineIds) {
this.tableData = [];
this.xData = [];
this.yData = [];
this.tableProps = [];
this.spanArr = [];
this.timeList = [];
this.getData();
} else {
this.$message({
message: '请选择产线和时间',
type: 'warning',
});
}
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
default:
console.log(val);
}
},
},
};
</script>

540
src/views/core/analysis/balanceAnalysis/index.vue
View File

@@ -1,144 +1,178 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2025-01-09 10:27:53
* @LastEditors: zwq
* @Description:
-->
<template> <template>
<div class="app-container"> <div style="background: #f2f4f9">
<div style="background: #f2f4f9; height: 38px; width: 100%">
<ButtonNav
ref="buttonNav"
:menus="['OEE分析', 'TEEP分析', '节拍分析']"
@change="currentMenu">
<template v-slot:tab1>
<div>OEE分析</div>
</template>
<template v-slot:tab2>
<div>TEEP分析</div>
</template>
<template v-slot:tab3>
<div>节拍分析</div>
</template>
</ButtonNav>
</div>
<div class="scroll-container" v-if="activeName !== '节拍分析'">
<!-- 外层滚动容器 -->
<div class="card-scroll-wrapper">
<!-- 卡片列表 -->
<div
v-for="(item, index) in lineList"
:key="index"
class="efficiency-card">
<div class="card-label">
{{ item[activeName === 'OEE分析' ? 'oeename' : 'teepname'] }}
</div>
<div class="card-value">
{{ item[activeName === 'OEE分析' ? 'oeevalue' : 'teepvalue'] }}%
</div>
</div>
</div>
</div>
<div
style="
background: #ffffff;
width: 100%;
margin-bottom: 8px;
padding: 10px 10px 0 10px;
">
<!-- 搜索工作栏 -->
<search-bar <search-bar
v-if="activeName !== '节拍分析'"
:formConfigs="formConfig" :formConfigs="formConfig"
ref="searchBarForm" ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" /> @headBtnClick="buttonClick" />
<div v-if="showData.length">
<base-table
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:page="1"
:limit="999"
:table-data="showData">
<method-btn
v-if="showData.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<barChart
v-for="item in chartData"
:key="item.name + 'echart'"
style="margin-top: 50px"
height="600px"
:id="item.name + 'echart'"
:title="item.name + ' 节拍趋势图'"
:bar-data="item" />
</div> </div>
<div v-else class="no-data-bg"></div>
<base-dialog <div
:dialogTitle="addOrEditTitle" class="app-container"
:dialogVisible="addOrUpdateVisible" v-if="activeName === 'OEE分析'"
@cancel="handleCancel" style="background: #ffffff">
@confirm="handleConfirm" <!-- 表 -->
:before-close="handleCancel" <div>
close-on-click-modal <base-table
top="0" :page="1"
width="50%"> :limit="100"
<eq-detail ref="eqDetail" /> :table-props="tableProps1"
<slot name="footer"> :table-data="list"
<el-row slot="footer" type="flex" justify="end"> :max-height="500"></base-table>
<el-col :span="24"> </div>
<el-button size="small" class="btnTextStyle" @click="handleCancel"> </div>
取消 <div
</el-button> class="app-container"
</el-col> v-else-if="activeName === 'TEEP分析'"
</el-row> style="background: #ffffff">
</slot> <!-- 表 -->
</base-dialog> <div>
<base-table
:page="1"
:limit="100"
:table-props="tableProps2"
:table-data="list"
:max-height="500"></base-table>
</div>
</div>
<div v-else style="background: #ffffff">
<indexJiepai />
</div>
</div> </div>
</template> </template>
<script> <script>
import eqDetail from './eq-detail'; import ButtonNav from '@/components/ButtonNav';
import { parseTime } from '../../mixins/code-filter'; import indexJiepai from './index-jiepai.vue';
import { getPLlistByFactory } from '@/api/core/monitoring/auto'; import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index'; import {
import { getFactoryPage } from '@/api/core/base/factory'; listHeader,
// import codeFilter from '../../mixins/code-filter' listLineReport,
import * as XLSX from 'xlsx'; exportTeepExcel,
import FileSaver from 'file-saver'; exportOeeExcel,
import barChart from './BarChart.vue'; } from '@/api/core/analysis/index';
import subDiv from './subDiv.vue';
const tableProps = [ const tableProps1 = [
{ {
prop: 'factoryName', prop: 'name',
label: '工厂', label: '名称',
}, },
{ {
prop: 'lineName', prop: 'timeVal',
label: '产线', label: '时间段',
subcomponent: subDiv,
}, },
{ {
prop: 'size', prop: 'plannedProductionHours',
label: '规格', label: '计划生产时长',
showOverflowtooltip: true,
}, },
{ {
prop: 'process', prop: 'actualRunningHours',
label: '产品工艺', label: '实际运行时长',
}, },
{ {
prop: 'edgeCt', prop: 'actualDowntimeHours',
label: '磨边当前节拍pcs/min', label: '实际停机时长',
}, },
{ {
prop: 'temperCt', prop: 'inputQuantity',
label: '钢化当前节拍pcs/min', label: '上片数量（片）',
}, },
{ {
prop: 'downCt', prop: 'outputQuantity',
label: '下片当前节拍pcs/min', label: '下片数量',
},
{
prop: 'qualityRate',
label: '良品率',
},
{
prop: 'availabilityRate',
label: '可用率',
},
{
prop: 'performanceRate',
label: '性能',
},
{
prop: 'oee',
label: 'OEE',
//filter: (val) => (val ? val.join(',') : ''),
}, },
]; ];
const tableProps2 = [
export default { {
components: { prop: 'name',
barChart, label: '产线名称',
eqDetail,
}, },
{
prop: 'timeVal',
label: '时间段',
subcomponent: subDiv,
},
{
prop: 'teep',
label: 'TEEP',
},
{
prop: 'oee',
label: 'OEE',
},
{
prop: 'useRate',
label: '设备使用率',
},
{
prop: 'capacityUtilization',
label: '产能利用率',
},
];
export default {
name: '',
data() { data() {
return { return {
urlOptions: {
getDataListURL: getNewCTNow,
},
listQuery: {
lineId: [],
},
fileName: '',
dataListLoading: false,
tableProps,
tableBtn: [
{
type: 'eq',
btnName: '详情',
},
].filter((v) => v),
showData: [],
tableData: [],
chartData: [],
formConfig: [ formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
collapseTags: true,
multiple: true,
onchange: true,
},
{ {
type: 'select', type: 'select',
label: '产线', label: '产线',
@@ -147,19 +181,43 @@ export default {
collapseTags: true, collapseTags: true,
multiple: true, multiple: true,
}, },
{
type: 'select',
label: '报表类型',
selectOptions: [
{
id: 0,
name: '班',
},
{
id: 1,
name: '日',
},
// {
// id: 2,
// name: '周',
// },
{
id: 3,
name: '月',
},
{
id: 4,
name: '年',
},
],
param: 'type',
},
{ {
type: 'datePicker', type: 'datePicker',
label: '时间范围', label: '时间范围',
dateType: 'datetimerange', dateType: 'daterange',
format: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd',
valueFormat: 'timestamp', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
defaultTime: ['00:00:00', '23:59:59'],
param: 'timeVal', param: 'timeVal',
width: 350,
clearable: false,
}, },
{ {
type: 'button', type: 'button',
@@ -167,139 +225,163 @@ export default {
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, },
// { {
// type: 'separate', type: 'separate',
// }, },
// { {
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '', type: 'button',
// type: 'button', btnName: '导出',
// btnName: '导出', name: 'export',
// name: 'export', color: 'warning',
// color: 'warning', },
// },
], ],
addOrEditTitle: '', activeName: 'OEE分析',
addOrUpdateVisible: false, // 查询参数
queryParams: {
pageNo: 1,
pageSize: 20,
lineId: null,
type: null,
createTime: null,
},
tableProps1,
tableProps2,
list: [],
lineList: [],
}; };
}, },
created() { components: { ButtonNav, indexJiepai },
// 获取当前时间 mounted() {
const now = new Date(); listHeader().then((response) => {
// 获取前一天的同一时间 this.lineList = response.data.map((item) => ({
const yesterday = new Date(now.getTime()); oeename: `${item.name}累计OEE综合效率`,
// 设置为00:00:00 teepname: `${item.name}累计TEEP综合效率`,
yesterday.setHours(0, 0, 0, 0); oeevalue: item.oee.toFixed(2),
// 设置为23:59:59 teepvalue: item.teep.toFixed(2),
const end = new Date(yesterday.getTime()); }));
end.setHours(23, 59, 59, 59); });
this.listQuery.startTime = yesterday.getTime(); this.$nextTick(() => {
this.listQuery.endTime = end.getTime(); getProductionLinePage({
this.$nextTick(() => { page: 1,
this.$refs.searchBarForm.formInline.timeVal = [ limit: 500,
yesterday.getTime(), }).then((response) => {
end.getTime(), this.formConfig[0].selectOptions = response.data.list;
]; });
if (this.$refs.buttonNav) {
this.$refs.buttonNav.currentMenu = 'OEE分析';
}
this.getPage();
}); });
this.getDataList();
this.getPdLineList();
}, },
methods: { methods: {
handleExport() { currentMenu(val) {
let tables = document.querySelector('.el-table').cloneNode(true); this.activeName = val;
const fix = tables.querySelector('.el-table__fixed'); if (this.activeName !== '节拍分析') {
const fixRight = tables.querySelector('.el-table__fixed-right'); this.getPage();
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;
}, },
getPdLineList() { getPage() {
// getPLlistByFactory().then((res) => { listLineReport(this.queryParams).then((response) => {
// this.formConfig[1].selectOptions = res.data || []; this.list = response.data;
// });
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
}); });
}, },
// 查询
buttonClick(val) { buttonClick(val) {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.factoryId = val.factoryId || undefined; this.queryParams.lineId = val.lineId;
this.listQuery.lineId = val.lineId ? val.lineId : []; this.queryParams.type = val.type;
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined; this.queryParams.createTime = val.timeVal;
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined; this.getPage();
this.getDataList();
break; break;
case 'export': case 'export':
this.queryParams.lineId = val.lineId;
this.queryParams.type = val.type;
this.queryParams.createTime = val.timeVal;
this.handleExport(); this.handleExport();
break; break;
default: default:
console.log(val); console.log(val);
} }
}, },
// 获取数据列表 handleExport() {
getDataList() { // 处理查询参数
this.dataListLoading = true; const params = { ...this.queryParams };
this.urlOptions.getDataListURL(this.listQuery).then((response) => { params.pageNo = undefined;
this.tableData = response.data; params.pageSize = undefined;
this.dataListLoading = false; this.$modal
this.showData = this.tableData; .confirm('是否确认导出所有数据项?')
}); .then(() => {
getNewCTCharts(this.listQuery).then((response) => { this.exportLoading = true;
this.chartData = response.data; return this.activeName == 'OEE分析'
}); ? exportOeeExcel(params)
}, : exportTeepExcel(params);
handleSearchBarChanged({ param, value }) { })
this.listQuery.lineId = []; .then((response) => {
this.$refs.searchBarForm.formInline.lineId = undefined; this.$download.excel(response, '报表.xls');
getPLlistByFactory({ factoryIds: this.$refs.searchBarForm.formInline.factoryId }).then((res) => { this.exportLoading = false;
this.formConfig[1].selectOptions = res.data || []; })
}); .catch(() => {});
},
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
);
});
},
handleCancel() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
},
handleConfirm() {
this.handleCancel();
}, },
}, },
}; };
</script> </script>
<style scoped>
/* 外层容器：限制高度，提供背景 */
.scroll-container {
width: 100%;
padding: 10px 0;
background-color: #f5f5f5; /* 背景色，可根据UI调整 */
}
/* 核心样式：横向滚动 */
.card-scroll-wrapper {
/* 重要：开启Flex，让子元素横向排列 */
display: flex;
/* 重要：不换行，强制排在一行 */
flex-wrap: nowrap;
/* 重要：添加横向滚动条 */
overflow-x: auto;
padding: 10px 15px;
/* 对齐方式 */
align-items: center;
}
/* 卡片样式：圆角、白色背景、阴影 */
.efficiency-card {
/* 固定宽度，也可以用 flex: 0 0 200px; 固定宽度 */
min-width: 200px;
height: 120px;
margin: 0 10px; /* 卡片之间的间距 */
padding: 20px 16px;
background-color: #ffffff;
border-radius: 12px; /* 圆角 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
/* 卡片内部文字布局 */
display: flex;
flex-direction: column;
justify-content: center;
/* 防止文字挤压 */
flex-shrink: 0;
text-align: center;
}
.efficiency-card:hover {
transform: scale(1.1);
}
/* 标签文字 */
.card-label {
font-size: 14px;
color: #666666;
margin-bottom: 8px;
white-space: nowrap; /* 确保文字也不换行 */
}
/* 数值文字（加粗放大） */
.card-value {
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 1.2;
}
</style>

35
src/views/core/analysis/balanceAnalysis/subDiv.vue Normal file
View File

@@ -0,0 +1,35 @@
<!--
* @Author: zwq
* @Date: 2024-07-01 14:53:55
* @LastEditors: zwq
* @LastEditTime: 2026-03-18 14:32:19
* @Description:
-->
<template>
<div>
<span>
{{
parseTime(injectData.startTime, '{y}年{m}月{d}日') +
'-' +
parseTime(injectData.endTime, '{y}年{m}月{d}日')
}}
</span>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>

103
src/views/core/analysis/yieldAnalysis-handle/LineChart.vue Normal file
View File

@@ -0,0 +1,103 @@
<!--
* @Author: zhp
* @Date: 2023-09-13 09:02:25
* @LastEditTime: 2026-03-18 14:45:07
* @LastEditors: zwq
* @Description:
-->
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
// import resize from './mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '350px',
},
// autoResize: {
// type: Boolean,
// default: true
// }
},
data() {
return {
chart: null,
};
},
// watch: {
// chartData: {
// deep: true,
// handler(val) {
// this.setOptions(val)
// }
// }
// },
mounted() {
// this.$nextTick(() => {
// this.initChart()
// })
},
// beforeDestroy() {
// if (!this.chart) {
// return
// }
// this.chart.dispose()
// this.chart = null
// },
methods: {
initChart(xData, yData, lineName) {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(xData, yData, lineName);
},
setOptions(xData, yData, lineName) {
let seriesData = [];
lineName.forEach((item, index) => {
seriesData.push(
{
name: item + '白班',
data: yData[index].map(item => item.day),
type: 'line',
},
{
name: item + '夜班',
data: yData[index].map(item => item.night),
type: 'line',
}
);
});
const result = lineName.flatMap((item) => [item + '白班', item + '夜班']);
this.chart.setOption(
{
xAxis: {
type: 'category',
data: xData,
},
legend: {
data: result,
},
yAxis: {
type: 'value',
},
series: seriesData,
},
true
);
},
},
};
</script>

272
src/views/core/analysis/yieldAnalysis-handle/index.vue Normal file
View File

@@ -0,0 +1,272 @@
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<div v-if="tableData.length">
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:max-height="tableH"
:table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" />
<line-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
</div>
</template>
<script>
import { parseTime } from '../../mixins/code-filter';
import { getYieldAnalysisHandlePageData } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import lineChart from './LineChart';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import subDiv from './subDiv.vue';
export default {
components: {
lineChart,
subDiv,
},
mixins: [tableHeightMixin],
data() {
return {
urlOptions: {
getDataListURL: getYieldAnalysisHandlePageData,
},
tableProps: [],
dataListLoading: false,
tableData: [],
listQuery: {
lineIds: [],
time: '', // 存储时间选择器的选中值（时间戳/格式化字符串，根据接口要求调整）
},
dateLabelList: [],
optionArrUrl: [getProductionLinePage],
formConfig: [
{
type: 'datePicker',
label: '时间',
dateType: 'month', // 单个月份选择
format: 'yyyy-MM', // 显示格式
valueFormat: 'yyyy-MM-dd HH:mm:ss', // 绑定值的格式
param: 'time',
defaultSelect: '', // 新增：默认月份值
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineIds',
defaultSelect: [], // 产线默认选择值（多选数组）
multiple: true,
collapseTags: true,
filterable: true,
width: 300,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
};
},
mounted() {
// 1. 初始化默认当月时间
this.initDefaultMonth();
// 2. 获取产线数据
this.getArr();
},
methods: {
/**
* 初始化默认当月时间（单个月份）
*/
initDefaultMonth() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth(); // 月份从0开始，直接使用（取当月1号）
// 创建当月1号0点0分0秒的日期对象
const firstDayOfMonth = new Date(year, month, 1, 0, 0, 0);
// 转换为时间戳（毫秒级）
const defaultTimeStamp = firstDayOfMonth.getTime();
// 给时间选择器赋值默认值
this.formConfig[0].defaultSelect = firstDayOfMonth;
// this.listQuery.time = defaultTimeStamp;
},
/**
* 获取产线数据
*/
getArr() {
const params = {
page: 1,
limit: 500,
};
// 原代码forEach遍历冗余，直接调用第一个方法即可
this.optionArrUrl[0](params)
.then((response) => {
const lineList = response.data.list;
this.formConfig[1].selectOptions = lineList;
// 产线默认选择第一条数据（多选需用数组格式）
if (lineList.length > 0) {
const firstLineId = lineList[0].id;
this.formConfig[1].defaultSelect = [firstLineId];
// 给查询参数赋值
this.listQuery.lineIds = [firstLineId];
}
})
.catch((err) => {
console.error('获取产线数据失败：', err);
});
},
/**
* 获取产量分析数据
*/
getData() {
this.dataListLoading = true; // 开启加载状态
this.urlOptions
.getDataListURL(this.listQuery)
.then((res) => {
let arr = [
{
prop: 'lineName',
label: '产线',
fixed: 'left',
},
{
prop: 'sum',
label: '合计[片]',
fixed: 'left',
},
{
prop: res.data ? res.data.nameData[0].name : undefined,
label: res.data ? res.data.nameData[0].name : undefined,
align: 'center',
children: [],
},
];
let xData = [];
let yAllData = [];
let lineName = [];
if (res.data) {
// 处理日期标签去重
let tempDateList = [];
res.data.nameData.forEach((date) => {
tempDateList.push(date.name);
});
this.dateLabelList = Array.from(new Set(tempDateList));
// 构造表头children和echarts横坐标
this.dateLabelList.forEach((item) => {
if (item.indexOf('年') === -1) {
arr[2].children.push({
prop: item,
label: item,
subcomponent: subDiv,
});
xData.push(item);
}
});
// 构造表格数据
let tableDataArr = [];
res.data.data.forEach((item) => {
let obj = {
lineName: item.lineName,
sum: item.sum,
};
item.data.forEach((ele) => {
ele.children.forEach((e) => {
obj[e.dynamicName] = JSON.parse(e.dynamicValue || '{}');
});
});
tableDataArr.push(obj);
});
this.tableData = tableDataArr;
this.tableProps = arr;
// 构造图表数据
res.data.data.forEach((item) => {
let yData = [];
lineName.push(item.lineName);
item.data.forEach((ele) => {
ele.children.forEach((e) => {
yData.push(JSON.parse(e.dynamicValue || '{}'));
});
});
yAllData.push(yData);
});
} else {
this.tableProps = arr;
this.tableData = [];
xData = [];
yAllData = [];
lineName = [];
}
// 初始化图表
this.$nextTick(() => {
this.$refs.lineChart.initChart(xData, yAllData, lineName);
});
})
.catch((err) => {
console.error('获取产量数据失败：', err);
this.tableData = [];
})
.finally(() => {
this.dataListLoading = false; // 关闭加载状态
});
},
/**
* 搜索栏按钮点击事件
* @param {Object} val - 按钮/表单传递的参数
*/
buttonClick(val) {
switch (val.btnName) {
case 'search':
// 处理产线参数（避免undefined，空值设为空数组）
this.listQuery.lineIds = val.lineIds || [];
// 处理时间参数：如果是时间字符串，可转换为时间戳（根据接口要求调整）
if (val.time) {
// this.listQuery.time = val.time;
// 若接口需要时间戳，取消下面注释：
this.listQuery.time = new Date(val.time).getTime();
} else {
this.$message({
message: '请选择时间',
type: 'warning',
});
return;
}
// 验证产线是否选择（可选，根据业务需求调整）
if (this.listQuery.lineIds.length === 0) {
this.$message({
message: '请选择至少一条产线',
type: 'warning',
});
return;
}
this.getData();
break;
case 'reset':
// 重置表单
this.$refs.searchBarForm.resetForm();
// 恢复默认值
this.listQuery = {
lineIds: this.formConfig[1].defaultSelect || [],
time: this.formConfig[0].defaultValue || '',
};
break;
default:
console.log(val);
}
},
},
};
</script>

31
src/views/core/analysis/yieldAnalysis-handle/subDiv.vue Normal file
View File

@@ -0,0 +1,31 @@
<!--
* @Author: zwq
* @Date: 2024-07-01 14:53:55
* @LastEditors: zwq
* @LastEditTime: 2026-03-18 14:32:19
* @Description:
-->
<template>
<div style="text-align:center">
<div style="padding:3px 6px;border:1px solid black">{{ injectData[injectData.prop].day || '-' }}</div>
<div style="padding:3px 6px;border:1px solid black;background-color: black;color: #fff;">{{ injectData[injectData.prop].night || '-' }}</div>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
computed: {},
created() {
},
methods: {},
};
</script>

2
src/views/core/base/equipmentType/index.vue
View File

@@ -92,6 +92,8 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备类型名称' }, { prop: 'name', label: '设备类型名称' },
{ prop: 'isCraft', label: '是否为生产设备',
filter: (val) => val?'是': '否', },
{ prop: 'code', label: '设备类型编码' }, { prop: 'code', label: '设备类型编码' },
{ prop: 'remark', label: '备注' }, { prop: 'remark', label: '备注' },
], ],

9
src/views/core/base/product/add-or-updata.vue
View File

@@ -22,9 +22,9 @@
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="产品类型" prop="typeDictValue"> <el-form-item label="玻璃类型" prop="typeDictValue">
<el-select v-model="dataForm.typeDictValue" style="width: 100%" :disabled="isdetail" <el-select v-model="dataForm.typeDictValue" style="width: 100%" :disabled="isdetail"
placeholder="请选择产品类型"> placeholder="请选择玻璃类型">
<el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label" <el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label"
:value="dict.value" /> :value="dict.value" />
</el-select> </el-select>
@@ -195,14 +195,13 @@ export default {
name: '', // 产品名称 name: '', // 产品名称
code: '', // 产品编码 code: '', // 产品编码
area: 0, // 深加工单位平方数(float only) area: 0, // 深加工单位平方数(float only)
typeDictValue: null, // 产品类型id typeDictValue: null, // 玻璃类型id
processTime: null, // 单位产品用时 (s) processTime: null, // 单位产品用时 (s)
specifications: '', // 深加工规格 specifications: '', // 深加工规格
unitDictValue: '', // 单位id unitDictValue: '', // 单位id
originalSpecifications: '', // 原片规格 originalSpecifications: '', // 原片规格
originalArea: 0, // 原片单位平方数 originalArea: 0, // 原片单位平方数
processTypes: [], processTypes: [],
typeDictValue: null,
}, },
typeList:[], typeList:[],
listQuery: { listQuery: {
@@ -251,7 +250,7 @@ export default {
typeDictValue: [ typeDictValue: [
{ {
required: true, required: true,
message: '产品类型不能为空', message: '玻璃类型不能为空',
trigger: 'blur', trigger: 'blur',
}, },
], ],

222
src/views/core/monitoring/data24/index.vue
View File

@@ -17,14 +17,14 @@
:table-props="tableProps" :table-props="tableProps"
:table-data="tableData" :table-data="tableData"
:max-height="tableH" :max-height="tableH"
@emitFun="handleEmitFun" :span-method="mergeColumnHandler"
/> @emitFun="handleEmitFun" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getPdlDataOneDay } from '@/api/core/monitoring/data24' import { getSectionDataOneDay } from '@/api/core/monitoring/data24';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin'; import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default { export default {
@@ -35,7 +35,7 @@ export default {
data() { data() {
return { return {
urlOptions: { urlOptions: {
getDataListURL: getPdlDataOneDay getDataListURL: getSectionDataOneDay,
}, },
initing: false, initing: false,
queryParams: { queryParams: {
@@ -45,6 +45,7 @@ export default {
list: [], list: [],
arr: [], arr: [],
spanArr: [], spanArr: [],
spanArrProLine: [], // 产线合并行数组
timeList: [], timeList: [],
tableData: [], tableData: [],
tableProps: [], tableProps: [],
@@ -58,78 +59,130 @@ export default {
methods: { methods: {
/** 构建tableProps - 依据第一个元素所提供的信息 */ /** 构建tableProps - 依据第一个元素所提供的信息 */
buildProps(plData) { buildProps(plData) {
plData.forEach(item => { this.timeList = []; // 重置避免重复
this.timeList.push(item.name) this.arr = []; // 重置避免重复
}) plData.forEach((item) => {
const timeArray = Array.from(new Set(this.timeList)) this.timeList.push(item.name);
console.log('nihc', timeArray) });
const timeArray = Array.from(new Set(this.timeList));
for (const times of timeArray) { for (const times of timeArray) {
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') { if (!['投入数', '产出数', '报废数量', '报废比例'].includes(times)) {
const subprop = { const subprop = {
label: times.slice(0, 10) + ' ' + times.slice(11), label: `${times.slice(0, 10)} ${times.slice(11)}`,
align: 'center', align: 'center',
children: [ children: [
{ prop: times + '_in', label: '投入数量', {
filter: (val) => (val != null ? val.toFixed(2) : '-'), }, prop: `${times}_in`,
{ prop: times + '_out', label: '产出数量', label: '投入数',
filter: (val) => (val != null ? val.toFixed(2) : '-'), }, filter: (val) => (val != null ? val : '-'),
{ prop: times + '_junk', label: '报废数量',
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
{ prop: times + '_area', label: '产出面积',
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
]
}
this.arr.push(subprop)
}
}
this.tableProps = this.arr
}, },
setRowSpan(arr) { {
let count = 0 prop: `${times}_out`,
label: '产出数',
filter: (val) => (val != null ? val : '-'),
},
{
prop: `${times}_junk`,
label: '报废数量',
filter: (val) => (val != null ? val : '-'),
},
{
prop: `${times}_area`,
label: '报废比例',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
],
};
this.arr.push(subprop);
}
}
this.tableProps = [
{
prop: 'proLineName',
label: '产线',
fixed: 'left',
width: 120,
showOverflowTooltip: true,
},
{
prop: 'spec',
label: '产品规格',
fixed: 'left',
width: 110,
showOverflowTooltip: true,
filter: (val) => val != null ? val.join(' / ') : '-',
},
{
prop: 'sectionName',
label: '工段名称',
fixed: 'left',
width: 120,
showOverflowTooltip: true,
},
{
prop: 'allNum',
label: '生产总数',
fixed: 'left',
showOverflowTooltip: true,
},
...this.arr
];
},
/** 通用合并行计算方法 */
calcRowSpan(arr) {
const spanArr = [];
let count = 0;
arr.forEach((item, index) => { arr.forEach((item, index) => {
if (index === 0) { if (index === 0) {
this.spanArr.push(1) spanArr.push(1);
} else { } else {
if (item === arr[index - 1]) { if (item === arr[index - 1]) {
this.spanArr[count] += 1 spanArr[count] += 1;
this.spanArr.push(0) spanArr.push(0);
} else { } else {
count = index count = index;
this.spanArr.push(1) spanArr.push(1);
} }
} }
}) });
console.log('打印数组长度', this.spanArr) return spanArr;
}, },
/** 把 list 里的数据转换成 tableProps 对应的格式 */ /** 把 list 里的数据转换成 tableProps 对应的格式 */
convertList(list) { convertList(list) {
let sectionArr= [] this.tableData = []; // 重置避免重复
console.log('打印看下数据list', list) const proLineNames = []; // 存储产线名称用于计算合并
list.forEach((ele, index) => { const specNames = []; // 存储规格名称用于计算合并
let tempData = []
ele.data.forEach(item => { list.forEach((ele) => {
item.children.forEach(params => { const tempData = {};
if (params.dynamicName === '投入数量') { // 基础字段赋值
tempData[item.dynamicName + '_in'] = params.dynamicValue tempData.proLineName = ele.proLineName;
} else if (params.dynamicName === '产出数量') { tempData.spec = ele.spec;
tempData[item.dynamicName + '_out'] = params.dynamicValue tempData.sectionName = ele.sectionName;
} else if (params.dynamicName === '报废数量') { tempData.allNum = ele.allNum;
tempData[item.dynamicName + '_junk'] = params.dynamicValue
} else { // 动态字段赋值
tempData[item.dynamicName + '_area'] = params.dynamicValue ele.data.forEach((item) => {
} item.children.forEach((params) => {
}) const keyMap = {
}) '投入数': `${item.dynamicName}_in`,
tempData['proLineName'] = ele.proLineName '产出数': `${item.dynamicName}_out`,
tempData['spec'] = ele.spec '报废数量': `${item.dynamicName}_junk`,
this.tableData.push(tempData) '报废比例': `${item.dynamicName}_area`,
console.log('看看数据', this.tableData, tempData) };
const { proLineName } = tempData const key = keyMap[params.dynamicName];
sectionArr.push(proLineName) if (key) tempData[key] = params.dynamicValue;
}) });
this.setRowSpan(sectionArr) });
console.log('工段名称列表', sectionArr)
this.tableData.push(tempData);
proLineNames.push(ele.proLineName);
specNames.push(ele.spec);
});
// 计算合并行数组
this.spanArrProLine = this.calcRowSpan(proLineNames);
}, },
buildData(data) { buildData(data) {
@@ -138,38 +191,55 @@ export default {
/** 合并table列的规则 */ /** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) { mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0) { // 列索引0: 产线列, 列索引1: 产品规格列
if (this.spanArr[rowIndex]) { if (columnIndex === 0) {
return [ return {
this.spanArr[rowIndex], // row span rowspan: this.spanArrProLine[rowIndex] || 0,
1, // col span colspan: this.spanArrProLine[rowIndex] ? 1 : 0
]; };
} else {
return [0, 0];
} }
if (columnIndex === 1) {
return {
rowspan: this.spanArrProLine[rowIndex] || 0,
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
};
} }
// 其他列不合并
return { rowspan: 1, colspan: 1 };
}, },
async getList() { async getList() {
this.urlOptions.getDataListURL().then(res => { this.urlOptions.getDataListURL().then((res) => {
console.log('看看数据', res) console.log('看看数据', res);
this.arr = [ this.arr = [
{ {
prop: 'proLineName', prop: 'proLineName',
label: '生产线', label: '产线',
fixed: 'left', fixed: 'left',
showOverflowTooltip: true showOverflowTooltip: true,
}, },
{ {
prop: 'spec', prop: 'spec',
label: '产品规格', label: '产品规格',
fixed: 'left', fixed: 'left',
showOverflowTooltip: true showOverflowTooltip: true,
} },
] {
prop: 'sectionName',
label: '工段名称',
fixed: 'left',
showOverflowTooltip: true,
},
{
prop: 'allNum',
label: '生产总数',
fixed: 'left',
showOverflowTooltip: true,
},
];
this.buildProps(res.data.nameData); this.buildProps(res.data.nameData);
this.buildData(res.data.data); this.buildData(res.data.data);
}) });
// // const data = this.res.data; // // const data = this.res.data;
// // console.log('recent-24', data); // // console.log('recent-24', data);

278
src/views/core/monitoring/groupReport/baseTable.vue Normal file
View File

@@ -0,0 +1,278 @@
<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;
}
.baseTable >>> .el-table .el-table__cell {
padding: 0;
height: 35px;
border: 1px solid rgb(220, 220, 220);
}
</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> -->

331
src/views/core/monitoring/groupReport/gr-detail.vue Normal file
View File

@@ -0,0 +1,331 @@
<!--
* @Author: zwq
* @Date: 2023-08-24 14:47:58
* @LastEditors: zwq
* @LastEditTime: 2025-02-25 14:03:40
* @Description:
-->
<template>
<div>
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<el-table id="detail" :data="tableData" :header-cell-style="{
background: '#F2F4F9',
color: '#606266',
}" border v-loading="dataListLoading" style="width: 100%" ref="dataList">
<el-table-column prop="lineName" label="产线" align="center" />
<!-- <el-table-column prop="sizes" width="105" showOverflowtooltip align="center" label="规格" /> -->
<!-- <el-table-column prop="process" label="产品工艺" align="center" /> -->
<el-table-column prop="inputN" label="磨边" align="center">
<el-table-column prop="edgeNum" label="投入数量/片" />
<el-table-column prop="edgeTime" label="数据上报时间">
<template v-slot="scope">
<span>
{{
scope.row.reportType === 0
? parseTime(scope.row.edgeTime)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="outputN" label="打孔/丝印" align="center">
<el-table-column prop="drillCoating" label="投入数量">
<template v-slot="scope">
<span>
{{
(scope.row.drillNum ?? '-')
+ '/'
+ (scope.row.coatingNum ?? '-')
}}
</span>
</template>
</el-table-column>
<el-table-column prop="coatingTime" label="数据上报时间">
<template v-slot="scope">
<span>
{{
scope.row.reportType === 0
? parseTime(scope.row.coatingTime)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="lossN" label="镀膜" align="center">
<el-table-column prop="silkNum" label="投入数量" />
<el-table-column prop="silkTime" label="数据上报时间">
<template v-slot="scope">
<span>
{{
scope.row.reportType === 0
? parseTime(scope.row.silkTime)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="lossN" label="钢化" align="center">
<el-table-column prop="temperingNum" label="投入数量" />
<el-table-column prop="temperingTime" label="数据上报时间">
<template v-slot="scope">
<span>
{{
scope.row.reportType === 0
? parseTime(scope.row.temperingTime)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="lossN" label="包装" align="center">
<el-table-column prop="packingNum" label="投入数量" />
<el-table-column prop="packingTime" label="数据上报时间">
<template v-slot="scope">
<span>
{{
scope.row.reportType === 0
? parseTime(scope.row.packingTime)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<!-- <el-table-column prop="lossRatio" label="不良率/%">
<template v-slot="scope">
<span>
{{
scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
}}
</span>
</template>
</el-table-column>
<el-table-column prop="outputRatio" label="投入产出率/%">
<template v-slot="scope">
<span>
{{
scope.row.outputRatio != null
? scope.row.outputRatio.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
<el-table-column prop="processingRatio" label="加工成品率/%">
<template v-slot="scope">
<span>
{{
scope.row.processingRatio != null
? scope.row.processingRatio.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
<el-table-column prop="lossD" label="不良详情" align="center">
<el-table-column prop="original" label="原片" align="center">
<el-table-column prop="originalLossNum" label="原片不良/片" />
<el-table-column prop="originalLossArea" label="原片不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.originalLossArea != null
? scope.row.originalLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="edge" label="磨边" align="center">
<el-table-column prop="edgeLossNum" label="磨边不良/片" />
<el-table-column prop="edgeLossArea" label="磨边不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.edgeLossArea != null
? scope.row.edgeLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="drill" label="打孔" align="center">
<el-table-column prop="drillLossNum" label="打孔不良/片" />
<el-table-column prop="drillLossArea" label="打孔不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.drillLossArea != null
? scope.row.drillLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="coating" label="镀膜" align="center">
<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.coatingLossArea != null
? scope.row.coatingLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="silk" label="丝印" align="center">
<el-table-column prop="silkLossNum" label="丝印不良/片" />
<el-table-column prop="silkLossArea" label="丝印不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.silkLossArea != null
? scope.row.silkLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="tempering" label="钢化" align="center">
<el-table-column prop="temperingLossNum" label="钢化不良/片" />
<el-table-column prop="temperingLossArea" label="钢化不良/m²">
<template v-slot="scope">
<span>
{{
scope.row.temperingLossArea != null
? scope.row.temperingLossArea.toFixed(2)
: '-'
}}
</span>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column prop="down" label="下片" align="center">
<el-table-column prop="downNum" label="成品数量" />
<el-table-column prop="scrapNum" label="废片数量" />
<el-table-column prop="inputOutputRate" label="投入产出率" />
<el-table-column prop="yieldRate" label="加工成品率" />
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getTeamReportPageDet, exportGroupProductReportExcel } from '@/api/core/monitoring/auto';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
export default {
components: {},
data() {
return {
tableData: [],
id:null,
dataListLoading: false,
formConfig: [
{
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
},
],
};
},
components: {},
created() {},
mounted() {},
methods: {
// 获取数据列表
init(id) {
this.id = id
this.dataListLoading = true;
getTeamReportPageDet(id).then((response) => {
this.tableData = response.data?.map((item, index) => {
item.originalLossNum = item.original?.lossNum;
item.originalLossArea = item.original?.lossArea;
item.edgeLossNum = item.edge?.lossNum;
item.edgeLossArea = item.edge?.lossArea;
item.drillLossNum = item.drill?.lossNum;
item.drillLossArea = item.drill?.lossArea;
item.coatingLossNum = item.coating?.lossNum;
item.coatingLossArea = item.coating?.lossArea;
item.silkLossNum = item.silk?.lossNum;
item.silkLossArea = item.silk?.lossArea;
item.temperingLossNum = item.tempering?.lossNum;
item.temperingLossArea = item.tempering?.lossArea;
item.packingLossNum = item.packing?.lossNum;
item.packingLossArea = item.packing?.lossArea;
if (item.isSummaryReport) {
item.lineName = '合计';
}
return item;
});
this.dataListLoading = false;
});
},
// arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// if (row.isSummaryReport) {
// if (columnIndex === 0) {
// return [1, 3];
// } else if (columnIndex === 1) {
// return [0, 0];
// } else if (columnIndex === 2) {
// return [0, 0];
// }
// }
// },
buttonClick(val) {
switch (val.btnName) {
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
handleExport() {
this.$modal.confirm('是否确认导出').then(() => {
return exportGroupProductReportExcel({id:this.id});
}).then(response => {
console.log(response)
this.$download.excel(response, '班组生产报表-详情.xls');
}).catch(() => {})
// let tables = document.querySelector('#detail').cloneNode(true);
// 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',
// }),
// '班组生产报表-详情.xlsx'
// );
// } catch (e) {
// if (typeof console !== 'undefined') console.log(e, exportTableOut);
// }
// return exportTableOut;
},
},
};
</script>

594
src/views/core/monitoring/groupReport/index.vue Normal file
View File

@@ -0,0 +1,594 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2026-04-13 14:27:08
* @LastEditors: zwq
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table-s
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="showData.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table-s>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" />
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
close-on-click-modal
top="0"
width="80%">
<gr-detail ref="grDetail" />
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button size="small" class="btnTextStyle" @click="handleCancel">
取消
</el-button>
</el-col>
</el-row>
</slot>
</base-dialog>
</div>
</template>
<script>
import grDetail from './gr-detail';
import { getTeamReportPage } from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
import { getGroupTeamPage } from '@/api/base/groupTeam';
// import codeFilter from '../../mixins/code-filter'
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import baseTableS from './baseTable.vue';
import { parseTime } from '@/filter/code-filter';
const tableProps = [
{
prop: 'reportType',
label: '报表类型',
fixed: true
},
{
prop: 'reportDate',
label: '日期',
width: 180,
fixed: true
},
{
prop: 'factoryName',
label: '工厂',
fixed: true
},
{
prop: 'teamName',
label: '班组',
fixed: true
},
{
prop: 'edgeNum',
label: '磨边',
fixed: true
}, {
prop: 'drillOrCoating',
label: '打孔/丝印',
fixed: true
}, {
prop: 'silkNum',
label: '镀膜',
fixed: true
}, {
prop: 'temperingNum',
label: '钢化',
fixed: true
}, {
prop: 'packingNum',
label: '包装',
fixed: true
},
{
prop: 'inputN',
label: '下片',
align: 'center',
children: [
{
prop: 'downNum',
label: '成品数量',
width:100
},
{
prop: 'scrapNum',
label: '废片数量',
width:100
},
{
prop: 'inputOutputRate',
label: '投入产出率',
width: 100
},
{
prop: 'yieldRate',
label: '加工成品率',
width: 100
},
],
},
// {
// prop: 'outputN',
// label: '产出',
// align: 'center',
// children: [
// {
// prop: 'outputNum',
// label: '产出数量/片',
// width:100
// },
// {
// prop: 'outputArea',
// label: '产出面积/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'lossN',
// label: '不良',
// align: 'center',
// children: [
// {
// prop: 'lossNum',
// label: '不良数量/片',
// width:100
// },
// {
// prop: 'lossArea',
// label: '不良面积/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'lossRatio',
// label: '不良率/%',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// {
// prop: 'outputRatio',
// label: '投入产出率/%',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:110
// },
// {
// prop: 'processingRatio',
// label: '加工成品率/%',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:110
// },
// {
// prop: 'lossD',
// label: '不良详情',
// align: 'center',
// children: [
// {
// prop: 'original',
// label: '原片',
// align: 'center',
// children: [
// {
// prop: 'originalLossNum',
// label: '原片不良/片',
// width:100
// },
// {
// prop: 'originalLossArea',
// label: '原片不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'edge',
// label: '磨边',
// align: 'center',
// children: [
// {
// prop: 'edgeLossNum',
// label: '磨边不良/片',
// width:100
// },
// {
// prop: 'edgeLossArea',
// label: '磨边不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'drill',
// label: '打孔',
// align: 'center',
// children: [
// {
// prop: 'drillLossNum',
// label: '打孔不良/片',
// width:100
// },
// {
// prop: 'drillLossArea',
// label: '打孔不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'coating',
// label: '镀膜',
// align: 'center',
// children: [
// {
// prop: 'coatingLossNum',
// label: '镀膜不良/片',
// width:100
// },
// {
// prop: 'coatingLossArea',
// label: '镀膜不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'silk',
// label: '丝印',
// align: 'center',
// children: [
// {
// prop: 'silkLossNum',
// label: '丝印不良/片',
// width:100
// },
// {
// prop: 'silkLossArea',
// label: '丝印不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'tempering',
// label: '钢化',
// align: 'center',
// children: [
// {
// prop: 'temperingLossNum',
// label: '钢化不良/片',
// width:100
// },
// {
// prop: 'temperingLossArea',
// label: '钢化不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// {
// prop: 'packing',
// label: '包装',
// align: 'center',
// children: [
// {
// prop: 'packingLossNum',
// label: '包装不良/片',
// width:100
// },
// {
// prop: 'packingLossArea',
// label: '包装不良/㎡',
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
// width:100
// },
// ],
// },
// ],
// },
];
export default {
components: {
baseTableS,
grDetail,
},
data() {
return {
urlOptions: {
getDataListURL: getTeamReportPage,
},
listQuery: {
reportType: 1,
pageSize: 10,
pageNo: 1,
startTime: undefined,
endTime: undefined,
total: 1,
},
fileName: '',
dataListLoading: false,
tableProps,
tableBtn: [
this.$auth.hasPermi(`monitoring:group-off:detail`)
? {
type: 'eq',
btnName: '详情',
}
: undefined,
].filter((v) => v),
showData: [],
tableData: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
},
{
type: 'select',
label: '班组',
selectOptions: [],
param: 'teamId',
},
{
type: 'select',
label: '报表类型',
selectOptions: [
{
id: 0,
name: '班',
},
{
id: 1,
name: '日',
},
// {
// id: 2,
// name: '周',
// },
{
id: 3,
name: '月',
},
{
id: 4,
name: '年',
},
],
defaultSelect: 1,
param: 'reportType',
},
{
type: 'datePicker',
label: '时间范围',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'timestamp',
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'timeVal',
},
{
type: this.$auth.hasPermi('monitoring:group-off:query') ? 'button' : '',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: this.$auth.hasPermi('monitoring:group-off:export') ? 'button' : '',
// type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
},
],
addOrEditTitle: '',
addOrUpdateVisible: false,
};
},
created() {
// 获取当前时间
const now = new Date();
// 获取前一天的同一时间
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
// 设置为00:00:00
yesterday.setHours(0, 0, 0, 0);
// 设置为23:59:59
const end = new Date(yesterday.getTime());
end.setHours(23, 59, 59, 59);
this.listQuery.startTime = yesterday.getTime(), [end.getTime()];
this.listQuery.endTime = end.getTime()
this.$nextTick(() => {
this.$refs.searchBarForm.formInline.timeVal = [yesterday.getTime(),end.getTime()];
});
this.getDataList();
this.getPdLineList();
},
methods: {
handleExport() {
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);
exportTable.Sheets.Sheet1.A1.v = '序号' //导出表格第一列表头为序号
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;
},
getPdLineList() {
const params = {
pageSize: 100,
pageNo: 1,
};
getGroupTeamPage(params).then((res) => {
this.formConfig[1].selectOptions = res.data.list || [];
});
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.teamId = val.teamId || undefined;
this.listQuery.reportType = val.reportType || undefined;
this.listQuery.startTime = val.timeVal
? val.timeVal[0]
: undefined;
this.listQuery.endTime = val.timeVal
? val.timeVal[1]
: undefined;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
console.log(this.listQuery);
const arr = ['班', '日', '', '月', '年']; // 索引0对应班，1对应日，3对应月，4对应年，索引2留空
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
if (!response.data.list) {
this.showData = [];
this.dataListLoading = false;
return;
}
this.tableData = response.data?.list.map((item, index) => {
item.reportType = arr[item.reportType] || item.reportType;
item.drillOrCoating = item.drillNum + "/" + item.coatingNum
item.originalLossNum = item.original?.lossNum;
item.originalLossArea = item.original?.lossArea;
item.edgeLossNum = item.edge?.lossNum;
item.edgeLossArea = item.edge?.lossArea;
item.drillLossNum = item.drill?.lossNum;
item.drillLossArea = item.drill?.lossArea;
item.coatingLossNum = item.coating?.lossNum;
item.coatingLossArea = item.coating?.lossArea;
item.silkLossNum = item.silk?.lossNum;
item.silkLossArea = item.silk?.lossArea;
item.temperingLossNum = item.tempering?.lossNum;
item.temperingLossArea = item.tempering?.lossArea;
item.packingLossNum = item.packing?.lossNum;
item.packingLossArea = item.packing?.lossArea;
return item;
});
this.listQuery.total = response.data?.total;
this.dataListLoading = false;
this.showData = this.tableData;
});
},
handleClick(val) {
this.addOrUpdateVisible = true;
const time = val.data.timeVal ? parseTime(val.data.timeVal[0]) + '-' + parseTime(val.data.timeVal[1]) : '- '
const teamName = val.data.teamName?val.data.teamName:'- '
const teamLeader = val.data.teamLeader?val.data.teamLeader:'- '
this.addOrEditTitle =
'时间：' +
time +
' 班组：' +
teamName +
' 组长：' +
teamLeader +
' 详情';
this.$nextTick(() => {
this.$refs.grDetail.init(val.data.id);
});
},
handleCancel() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
},
handleConfirm() {
this.handleCancel();
},
// 每页数
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
},
};
</script>

300
src/views/equipment/analysis/exception/index.vue
View File

@@ -1,17 +1,74 @@
<!-- <!--
filename: index.vue * @Author: zwq
author: liubin * @Date: 2025-06-25 09:53:10
date: 2023-09-04 09:34:52 * @LastEditors: zwq
description: 设备异常分析 * @LastEditTime: 2026-04-28 10:59:33
* @Description:
--> -->
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<SearchBar <el-form
:formConfigs="searchBarFormConfig" :inline="true"
ref="search-bar" ref="searchBarForm"
@headBtnClick="handleSearchBarBtnClick" /> :model="queryParams"
class="searchBar">
<span class="blue-block"></span>
<el-form-item label="时间维度">
<el-radio-group size="small" v-model="queryParams.radio">
<el-radio :label="1">周期报表</el-radio>
<el-radio :label="2">累计</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="时间维度">
<el-select
v-model="queryParams.type"
size="small"
:disabled="queryParams.radio === 2"
placeholder="请选择">
<el-option
v-for="item in typeoptions"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="产线/工段">
<el-cascader
size="small"
:options="options"
ref="cascaderRef"
collapse-tags
@change="handleCascaderChange"
:props="{
value: 'id',
label: 'name',
checkStrictly: true,
multiple: true,
emitPath: false,
}"></el-cascader>
</el-form-item>
<el-form-item label="时间范围" prop="recordTime">
<el-date-picker
size="small"
v-model="queryParams.recordTime"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleRecordSearch">
查询
</el-button>
<el-button size="small" type="warning" @click="handleExport1">
导出
</el-button>
</el-form-item>
</el-form>
<!-- 列表 --> <!-- 列表 -->
<base-table <base-table
@@ -43,6 +100,14 @@
import moment from 'moment'; import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin'; import basicPageMixin from '@/mixins/lb/basicPageMixin';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin'; import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import { getGroupPlanTree } from '@/api/group/Schedule';
import {
exportReportExcel,
exportQueryExcel,
getReportPage,
getQueryPage,
} from '@/api/analysis/exception';
import { parseTime } from '@/utils/ruoyi';
export default { export default {
name: 'ExceptionAnalysis', name: 'ExceptionAnalysis',
@@ -51,21 +116,6 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
searchBarKeys: ['name', 'code'],
// tableBtn: [
// this.$auth.hasPermi('base:equipment-group:update')
// ? {
// type: 'edit',
// btnName: '修改',
// }
// : undefined,
// this.$auth.hasPermi('base:equipment-group:delete')
// ? {
// type: 'delete',
// btnName: '删除',
// }
// : undefined,
// ].filter((v) => v),
tableBtn: [ tableBtn: [
{ {
type: 'edit', type: 'edit',
@@ -80,131 +130,147 @@ export default {
{ prop: 'lineName', label: '产线' }, { prop: 'lineName', label: '产线' },
{ prop: 'sectionName', label: '工段' }, { prop: 'sectionName', label: '工段' },
{ prop: 'equipmentName', label: '设备' }, { prop: 'equipmentName', label: '设备' },
{ prop: 'createTime', filter: parseTime, label: '日期' },
{
width: 128,
prop: 'actualRunningHours',
label: '运行时长(h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'),
},
{ prop: 'downtimeCount', label: '故障次数' },
{ {
width: 240, width: 240,
prop: 'mtbf', prop: 'avgDowntimeDuration',
label: '平均故障间隔时间[MTBF](h)', label: '平均故障间隔时间[MTBF](h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'), filter: (val) => (val != null ? val.toFixed(2) : '-'),
}, },
{ // {
width: 240, // width: 240,
prop: 'mttr', // prop: 'mttr',
label: '平均维修时间[MTTR](h)', // label: '平均维修时间[MTTR](h)',
filter: (val) => (val != null ? val.toFixed(2) : '-'), // filter: (val) => (val != null ? val.toFixed(2) : '-'),
}, // },
{ width: 128, prop: 'workTime', label: '工作时长(h)', // {
filter: (val) => (val != null ? val.toFixed(2) : '-'), }, // width: 128,
{ width: 128, prop: 'downTime', label: '故障时长(h)', // prop: 'downTime',
filter: (val) => (val != null ? val.toFixed(2) : '-'), }, // label: '故障时长(h)',
{ prop: 'downCount', label: '故障次数' }, // filter: (val) => (val != null ? val.toFixed(2) : '-'),
], // },
searchBarFormConfig: [
{
type: 'select',
label: '请选择月份',
placeholder: '请选择月份',
param: 'month',
selectOptions: Array(12)
.fill(0)
.map((v, i) => ({
id: i + 1,
name: `${i + 1}月`,
})),
},
{
__index: 'line',
type: 'select',
label: '产线',
placeholder: '请选择产线',
param: 'lineId',
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
], ],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
lineId: null, radio: 1,
type: null,
factoryId: null, factoryId: null,
lineId: null,
sectionId: null,
equId: null,
recordTime: null, recordTime: null,
}, },
typeoptions: [
{
value: '4',
label: '周',
},
{
value: '5',
label: '月',
},
{
value: '6',
label: '年',
},
],
options: [], // 产线/工段选项
}; };
}, },
computed: {}, computed: {},
created() { created() {
this.fillLineOptions(); getGroupPlanTree().then((res) => {
this.options = res.data;
});
this.getList();
}, },
methods: { methods: {
async fillLineOptions() { handleCascaderChange() {
const { data } = await this.$axios({ const checkedNodes = this.$refs.cascaderRef.getCheckedNodes();
url: '/base/production-line/listAll', this.queryParams.factoryId = [];
method: 'get', this.queryParams.lineId = [];
this.queryParams.sectionId = [];
this.queryParams.equId = [];
checkedNodes.forEach((node) => {
if (node.checked) {
if (node.level === 1) {
this.queryParams.factoryId.push(node.value);
} else if (node.level === 2) {
this.queryParams.lineId.push(node.value);
} else if (node.level === 3) {
this.queryParams.sectionId.push(node.value);
} else if (node.level === 4) {
this.queryParams.equId.push(node.value);
}
}
}); });
const cfg = this.searchBarFormConfig.find( },
(item) => item.__index == 'line' handleRecordSearch() {
); if (
this.$set( this.queryParams.recordTime &&
cfg, this.queryParams.recordTime.length > 0
'selectOptions', ) {
data.map((item) => ({ this.queryParams.startTime = this.queryParams.recordTime[0];
id: item.id, this.queryParams.endTime = this.queryParams.recordTime[1];
name: item.name, }
})) this.getList();
);
}, },
async getList() { async getList() {
const params = {
lineId: this.queryParams.lineId || null,
sectionId: this.queryParams.sectionId || null,
equipmentId: this.queryParams.equId || null,
startTime: this.queryParams.startTime || null,
endTime: this.queryParams.endTime || null,
type:
this.queryParams.radio === 1 ? this.queryParams.type || null : null,
};
this.loading = true; this.loading = true;
// 执行查询 // 执行查询
const { code, data } = await this.$axios({ const { code, data } = await (this.queryParams.radio === 1
url: '/analysis/equipment-analysis/efficiency', ? getReportPage(params)
method: 'get', : getQueryPage(params));
params: {
lineId: this.queryParams.lineId || null,
recordTime: this.queryParams.recordTime || null,
},
});
if (code === 0) { if (code === 0) {
this.list = data; this.list = data;
} else { } else {
this.list.splice(0); this.list.splice(0);
} }
}, },
handleExport1() {
handleSearchBarBtnClick(btn) { this.handleRecordSearch();
switch (btn.btnName) { // 处理查询参数
case 'search': const params = {
if (btn.month) { lineId: this.queryParams.lineId || null,
this.queryParams.recordTime = [ sectionId: this.queryParams.sectionId || null,
moment() equipmentId: this.queryParams.equId || null,
.month(btn.month - 1) startTime: this.queryParams.startTime || null,
.format('YYYY-MM') + '-01 00:00:00', endTime: this.queryParams.endTime || null,
moment().month(btn.month).format('YYYY-MM') + '-01 00:00:00', type:
]; this.queryParams.radio === 1 ? this.queryParams.type || null : null,
} else { };
this.queryParams.recordTime = null; this.$modal
} .confirm('是否确认导出所有数据项?')
this.queryParams.lineId = btn.lineId || null; .then(() => {
this.handleQuery(); this.exportLoading = true;
break; return this.queryParams.radio === 1
} ? exportReportExcel(params)
}, : exportQueryExcel(params);
})
/** 搜索按钮操作 */ .then((response) => {
handleQuery() { this.$download.excel(response, '报表.xls');
// this.queryParams.pageNo = 1; this.exportLoading = false;
this.getList(); })
}, .catch(() => {});
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm');
this.handleQuery();
}, },
}, },
}; };

328
src/views/equipment/equipmentOverview/chart.js Normal file
View File

@@ -0,0 +1,328 @@
import * as echarts from 'echarts'
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 2;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
{
x: params.coordSys.x,
y: params.coordSys.y - 16,
width: params.coordSys.width,
height: params.coordSys.height,
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
// unused
function getXaxisRange(startTime) {
return Array(24)
.fill(startTime)
.map((item, index) => {
return new Date(item + index * 3600 * 1000)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
});
}
function getTodayStart(today) {
const [y, m, d] = [
today.getFullYear(),
today.getMonth(),
today.getDate(),
];
// debugger;
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '故障', color: '#FC9C91' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '空白', color: '#F2F4F9' },
];
export default class GanttGraph {
// tooltip - 基本是固定的
tooltip = {
trigger: 'item',
axisPointer: {
type: 'none',
},
formatter: (params) => {
// debugger;
return `
<div style="display: flex; flex-direction: column;">
<span>${new Date(params.value[1]).toLocaleTimeString()} ~ ${new Date(params.value[2]).toLocaleTimeString()}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<span class="icon" style="width: 8px; height: 8px; border-radius: 2px; background: ${params.color}"></span>
<span class="eq-name" style="margin-left: 4px;">${params.seriesName}</span>
</div>
<span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
</div>
`
}
}
grid = []
xAxis = []
yAxis = []
series = []
constructor(el, startTime) {
this.el = el;
this.gridIndex = -1;
this.currentGraphIndex = -2;
this.startTime = new Date(startTime);
// this.startTime = new Date(new Date('2023/10/8').toLocaleDateString());
// console.log('<> Gantt Created', this.startTime);
}
// 构造一个新的 grid
makeGrid() {
this.gridIndex++;
return {
id: 'GRID_' + this.gridIndex,
// top: 12 + 128 * this.gridIndex,
top: 12 + 104 * this.gridIndex,
right: 48,
left: 100,
height: 56
}
}
// 构造一个 xAxis
makeXaxis() {
const [id1, id2] = ['' + Math.random(), '' + Math.random()]
return [
{
id: id1,
gridIndex: this.gridIndex,
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(this.startTime),
max: getStartTime(this.startTime.getTime() + 3600 * 24 * 1000),
splitNumber: 10,
axisLabel: {
margin: 12,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
axisLine: {
lineStyle: {
color: '#0005',
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
{
id: id2,
gridIndex: this.gridIndex,
axisLabel: { show: false },
axisLine: { show: false },
},
]
}
// 构造一个 yAxis
makeYaxis(equipmentName) {
const [id1, id2] = ['' + Math.random(), '' + Math.random()]
return [
// 主y轴
{
id: id1,
gridIndex: this.gridIndex,
type: 'value',
splitLine: { show: false },
name: equipmentName,
nameLocation: 'center',
nameGap: 14,
nameRotate: 0,
nameTextStyle: {
fontSize: 12,
color: '#000A'
},
axisLine: {
show: true,
lineStyle: {
color: '#0005',
},
},
axisLabel: { show: false },
axisTick: { show: false },
},
// 辅y轴
{
id: id2,
gridIndex: this.gridIndex,
type: 'value',
splitLine: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#0005',
},
},
axisLabel: { show: false },
axisTick: { show: false },
},
]
}
// 构造一个 series
makeSeries({ equipmentName, arr }) {
this.currentGraphIndex += 2;
const bgStartTime = this.startTime.getTime();
const bgEndTime = bgStartTime + 3600 * 24 * 1000;
return [
// 沉默的背景
{
xAxisIndex: this.currentGraphIndex,
yAxisIndex: this.currentGraphIndex,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, bgStartTime, bgEndTime, 0],
tooltip: { show: false },
itemStyle: {
color: '#F2F4F9',
opacity: 0.3,
}
},
]
},
{
name: equipmentName,
xAxisIndex: this.currentGraphIndex,
yAxisIndex: this.currentGraphIndex,
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: arr.map(item => ({
name: ['运行', '故障', '计划停机'][item.status],
value: [0, item.startTime, item.startTime + item.duration * 60 * 1000, 0],
itemStyle: {
color: types[item.status].color,
}
})),
},
]
}
init(data) {
if (!this.el) throw new Error('没有可供echarts初始化的容器')
if (typeof this.el == 'string') {
this.el = document.querySelector(this.el);
}
this.chart = echarts.init(this.el);
this.handleProps(data);
setTimeout(() => {
// debugger;
this.chart.setOption(this.option);
}, 200);
}
update(data) {
this.clear();
this.init(data);
}
resize() {
this.chart.resize();
}
get option() {
return {
tooltip: this.tooltip,
grid: this.grid,
xAxis: this.xAxis,
yAxis: this.yAxis,
series: this.series,
}
}
// 每次 graphList 刷新都会重新渲染整个所有图表
// 可以改进的地方：添加一个 handleAdd() 方法，一次添加一个新的
handleProps(props) {
// props 是父组件的 graphList
console.log('props: ', props);
props.forEach(eqArr => {
this.grid.push(this.makeGrid());
this.xAxis.push(...this.makeXaxis());
this.yAxis.push(...this.makeYaxis(eqArr.key));
this.series.push(...this.makeSeries({ equipmentName: eqArr.key, arr: eqArr }))
});
}
// handleAdd
handleAdd() { }
clear() {
this.grid = [];
this.xAxis = [];
this.yAxis = [];
this.series = [];
this.currentGraphIndex = -2;
this.gridIndex = -1;
this.chart.dispose();
}
// print option
print() {
console.log(JSON.stringify(this.option, null, 2));
}
}

367
src/views/equipment/equipmentOverview/gantt.js Normal file
View File

@@ -0,0 +1,367 @@
import * as echarts from 'echarts'
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
function renderItem(params, api) {
// 1. 校验value数据是否有效
const yIndex = api.value(0); // y轴索引
const startTime = api.value(1);
const endTime = api.value(2);
if (isNaN(startTime) || isNaN(endTime) || startTime >= endTime) {
return null;
}
// 2. 转换坐标（x轴是time类型，需确保转换正确）
const startPoint = api.coord([startTime, yIndex]);
const endPoint = api.coord([endTime, yIndex]);
if (!startPoint || !endPoint) return null;
// 3. 计算矩形高度（加大高度，避免高度为0）
const cellHeight = api.size([0, 1])[1] * 0.8; // 从0.5改为0.8，提高可视性
const rectX = startPoint[0];
const rectY = startPoint[1] - cellHeight / 2;
const rectWidth = endPoint[0] - startPoint[0];
// 4. 避免宽度为负/0
if (rectWidth <= 0) return null;
// 5. 裁剪矩形（简化裁剪逻辑，避免过度裁剪）
const rectShape = echarts.graphic.clipRectByRect(
{
x: rectX,
y: rectY,
width: rectWidth,
height: cellHeight,
},
params.coordSys // 直接用坐标系范围，简化裁剪
);
return rectShape ? {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
} : null;
}
// unused
function getXaxisRange(startTime) {
return Array(24)
.fill(startTime)
.map((item, index) => {
return new Date(item + index * 3600 * 1000)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
});
}
function getTodayStart(today) {
const [y, m, d] = [
today.getFullYear(),
today.getMonth(),
today.getDate(),
];
// debugger;
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '故障', color: '#FC9C91' },
{ name: '空白', color: '#F2F4F9' },
];
export default class GanttGraph {
// tooltip - 基本是固定的
tooltip = {
trigger: 'item',
axisPointer: {
type: 'none',
},
formatter: (params) => {
// debugger;
const date1 = new Date(params.value[1]);
const date2 = new Date(params.value[2]);
return `
<div style="display: flex; flex-direction: column;">
<span>${date1.getMonth() + 1}-${date1.getDate()} ${String(date1.getHours()).padStart(2, '0')}:${String(date1.getMinutes()).padStart(2, '0')} ~ ${date2.getMonth() + 1}-${date2.getDate()} ${String(date2.getHours()).padStart(2, '0')}:${String(date2.getMinutes()).padStart(2, '0')}</span>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<span class="icon" style="width: 8px; height: 8px; border-radius: 2px; background: ${params.color}"></span>
<span class="eq-name" style="margin-left: 4px;">${params.data.showName}</span>
</div>
<span class="run-status" style="margin-left: 8px; opacity: 0.6">${params.name}</span>
</div>
`
}
}
grid = []
xAxis = []
yAxis = []
series = []
constructor(el, startTime) {
this.el = el;
this.startTime = new Date(startTime);
}
// 构造一个新的 grid
makeGrid() {
return {
top: 5,
right: 20,
left: 100,
bottom: 50,
}
}
// 构造一个 xAxis
// 新增：从数据中提取时间范围的方法
getXaxisRangeFromData(data) {
let allTimes = [];
data.forEach(eqArr => {
eqArr.forEach(item => {
if (item.startTime) {
allTimes.push(item.startTime);
allTimes.push(item.startTime + (item.duration || 0) * 60 * 1000);
}
});
});
if (allTimes.length === 0) {
const today = new Date();
return [getTodayStart(today), getTodayStart(today) + 24 * 3600 * 1000];
}
const minTime = Math.min(...allTimes);
const maxTime = Math.max(...allTimes);
// 扩展1小时的缓冲
return [minTime - 3600 * 1000, maxTime + 3600 * 1000];
}
// 修改makeXaxis方法，支持传入数据动态计算范围
makeXaxis(data = []) {
let [minTime, maxTime] = this.getXaxisRangeFromData(data);
return [
{
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: minTime,
max: maxTime,
splitNumber: 24,
axisLabel: {
margin: 12,
formatter: function (val) {
return new Date(val).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
},
},
axisLine: {
lineStyle: {
color: '#0005',
},
},
boundaryGap: false,
},
];
}
// 构造一个 yAxis
makeYaxis(equipmentName) {
return [
// 主y轴
{
data: equipmentName,
type: 'category'
}
]
}
// 构造一个 series
makeSeries(xdata) {
const bgStartTime = this.startTime.getTime();
const bgEndTime = bgStartTime + 3600 * 24 * 1000;
return [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: xdata,
},
]
}
init(data) {
if (!this.el) throw new Error('没有可供echarts初始化的容器');
if (typeof this.el == 'string') {
this.el = document.querySelector(this.el);
}
this.chart = echarts.init(this.el);
this.handleProps(data);
// 调试：打印关键数据
console.log('=== 调试信息 ===');
console.log('x轴范围', this.xAxis[0]?.min, '~', this.xAxis[0]?.max);
console.log('y轴数据', this.yAxis[0]?.data);
console.log('series数据', this.series[0]?.data);
setTimeout(() => {
this.chart.setOption(this.option);
// 强制渲染
this.chart.resize();
}, 200);
}
update(data) {
this.clear();
this.init(data);
}
resize() {
this.chart.resize();
}
get option() {
return {
tooltip: this.tooltip,
grid: this.grid,
xAxis: this.xAxis,
yAxis: this.yAxis,
series: this.series,
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'weakFilter',
height: 20,
bottom: 0,
start: 0,
end: 80,
handleIcon:
'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
showDetail: false
},
{
type: 'inside',
id: 'insideX',
xAxisIndex: 0,
filterMode: 'weakFilter',
start: 0,
end: 80,
zoomOnMouseWheel: true,
moveOnMouseMove: true
},
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: 0,
end: 100,
handleSize: 0,
showDetail: false
},
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 0,
end: 100,
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: true
}
],
}
}
// 每次 graphList 刷新都会重新渲染整个所有图表
// 可以改进的地方：添加一个 handleAdd() 方法，一次添加一个新的
handleProps(props) {
console.log('props: ', props);
let ylist = []
let xdata = []
// 第一步：提前获取x轴的实际min/max（从xAxis配置中取，而非重新计算）
const xAxisConfig = this.makeXaxis(props)[0];
const xMin = xAxisConfig.min;
const xMax = xAxisConfig.max;
props.forEach((eqArr, index) => {
if (!eqArr.key) return;
ylist.push(eqArr.key)
eqArr.forEach(item => {
if (!item.startTime || !item.duration || item.status === undefined) {
console.warn('数据缺失', item);
return;
}
const status = Math.max(0, Math.min(3, item.status));
const endTime = item.startTime + item.duration * 60 * 1000;
// 第二步：修正时间校验逻辑（只要数据和x轴范围有交集，就保留）
// 原逻辑：数据完全在x轴外才过滤 → 改为：数据和x轴无交集才过滤
const isOutOfRange = endTime < xMin || item.startTime > xMax;
if (isOutOfRange) {
console.warn('数据超出x轴范围', {
startTime: new Date(item.startTime).toLocaleString(),
endTime: new Date(endTime).toLocaleString(),
xMin: new Date(xMin).toLocaleString(),
xMax: new Date(xMax).toLocaleString()
});
return;
}
xdata.push({
name: types[status].name,
showName: eqArr.key,
value: [index, item.startTime, endTime],
itemStyle: {
color: types[status].color,
}
});
});
});
this.grid.push(this.makeGrid());
this.xAxis.push(...this.makeXaxis(props)); // 传入props
this.yAxis.push(...this.makeYaxis(ylist));
this.series.push(...this.makeSeries(xdata));
}
// handleAdd
handleAdd() { }
clear() {
this.grid = [];
this.xAxis = [];
this.yAxis = [];
this.series = [];
this.chart.dispose();
}
// print option
print() {
console.log(JSON.stringify(this.option, null, 2));
}
}

1309
src/views/equipment/equipmentOverview/index-eq.vue Normal file
View File

File diff suppressed because it is too large Load Diff

487
src/views/equipment/equipmentOverview/index-his.vue Normal file
View File

@@ -0,0 +1,487 @@
<!--
* @Author: zwq
* @Date: 2026-04-21 10:22:15
* @LastEditors: zwq
* @LastEditTime: 2026-04-24 10:35:32
* @Description:
-->
<template>
<div
class="status-timegraph-container"
style="flex: 1; display: flex; flex-direction: column">
<el-row
class=""
style="
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 0;
border-radius: 8px;
">
<el-form
:inline="true"
ref="searchBarForm"
:model="formInline"
class="searchBar">
<span class="blue-block"></span>
<el-form-item label="产线/工段">
<el-cascader
size="small"
:options="options"
ref="cascaderRef"
collapse-tags
@change="handleCascaderChange"
:props="{
value: 'id',
label: 'name',
checkStrictly: true,
multiple: true,
emitPath: false,
}"></el-cascader>
</el-form-item>
<el-form-item label="时间范围" prop="recordTime">
<el-date-picker
size="small"
v-model="formInline.recordTime"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="handleRecordSearch">
查询
</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row
class=""
style="
height: 1px;
flex: 1;
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 32px;
border-radius: 8px;
display: flex;
flex-direction: column;
">
<el-row :gutter="20" style="margin-bottom: 10px">
<el-col :span="12">
<div class="blue-title">关键设备运行率</div>
<line-chart
v-if="lineChartData.length"
ref="lineChart"
:chartData="lineChartData"></line-chart>
<h2 v-else class="no-data-bg"></h2>
</el-col>
<el-col :span="12">
<div class="blue-title">今日停机/故障汇总</div>
<base-table
:page="1"
:limit="100"
:table-props="tableProps"
:table-data="tableData"
:height="300"></base-table>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row :gutter="20">
<el-col :span="6">
<div class="blue-title">设备状态甘特图</div>
</el-col>
<el-col :span="18" class="legend-row">
<div class="legend">
<div class="icon running"></div>
<div>运行中</div>
</div>
<div class="legend">
<div class="icon fault"></div>
<div>故障</div>
</div>
<div class="legend">
<div class="icon stop"></div>
<div>计划停机</div>
</div>
</el-col>
</el-row>
<div
class="main-area"
style="flex: 1; display: flex; flex-direction: column">
<div
class="graphs"
v-show="graphList.length"
id="status-chart"
style="min-height: 400px; flex: 1"></div>
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
</div>
</el-row>
</div>
</template>
<script>
import Gantt from './gantt';
import { getGroupPlanTree } from '@/api/group/Schedule';
import lineChart from './lineChart.vue';
import subDiv from './subDiv.vue';
const tableProps = [
{
prop: 'equipmentName',
label: '设备',
},
{
prop: 'sectionName',
label: '工段',
},
{
prop: 'stopCount',
label: '停机',
},
{
prop: 'downCount',
label: '故障',
},
{
prop: 'stopTime',
label: '停机时长',
},
{
prop: 'stopRate',
label: '占比',
subcomponent: subDiv,
},
];
export default {
name: '',
components: {
lineChart,
},
props: {},
data() {
return {
chart: null,
formInline: {
factoryId: null,
lineId: null,
sectionId: null,
equId: null,
recordTime: null,
},
options: [], // 产线/工段选项
graphList: [],
startTime: null,
gantt: null,
lineChartData: [],
tableData: [],
tableProps,
};
},
computed: {},
created() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day} 00:00:00`;
this.startTime = new Date(formattedDate);
this.formInline.recordTime = formattedDate
? [
formattedDate,
new Date(new Date(formattedDate).getTime() + 24 * 3600 * 1000)
.toLocaleDateString()
.split('/')
.map((value, index) => {
if (index == 1 || index == 2) {
return value.padStart(2, '0');
}
return value;
})
.join('-') + ' 00:00:00',
]
: null;
getGroupPlanTree().then((res) => {
this.options = res.data;
});
this.getList();
},
mounted() {},
watch: {
graphList: {
handler(val) {
if (val && val.length) {
this.$nextTick(() => {
if (!this.gantt) {
this.gantt = new Gantt('#status-chart', this.startTime);
this.gantt.init(val);
return;
}
this.gantt.update(val);
});
}
return;
},
deep: true,
immediate: true,
},
},
methods: {
handleRecordSearch() {
if (!this.formInline.recordTime || this.formInline.recordTime.length <= 0) {
this.$message.warning('请选择时间段');
return;
}
this.startTime = new Date(this.formInline.recordTime);
this.getList();
},
handleCascaderChange() {
const checkedNodes = this.$refs.cascaderRef.getCheckedNodes();
this.formInline.factoryId = [];
this.formInline.lineId = [];
this.formInline.sectionId = [];
this.formInline.equId = [];
checkedNodes.forEach((node) => {
if (node.checked) {
if (node.level === 1) {
this.formInline.factoryId.push(node.value);
} else if (node.level === 2) {
this.formInline.lineId.push(node.value);
} else if (node.level === 3) {
this.formInline.sectionId.push(node.value);
} else if (node.level === 4) {
this.formInline.equId.push(node.value);
}
}
});
},
findMin() {
let min = 0;
this.graphList.forEach((arr) => {
arr.forEach((item) => {
if (min < item.startTime) min = item.startTime;
});
});
return min;
},
/** 对象到数组的转换 */
objectToArray(obj) {
return Object.keys(obj).map((key) => {
obj[key].sort((a, b) => a.startTime - b.startTime);
obj[key].key = key;
return obj[key];
});
},
async getList() {
const { code, data } = await this.$axios({
url: '/monitoring/equipment-overall/getGantt',
method: 'get',
params: this.formInline,
});
if (code == 0) {
this.graphList = this.objectToArray(data);
}
const { code: code1, data: data1 } = await this.$axios({
url: '/monitoring/equipment-overall/getUseRate',
method: 'get',
params: this.formInline,
});
if (code1 == 0) {
this.lineChartData = data1;
this.$nextTick(() => {
if (this.lineChartData.length) {
this.$refs.lineChart.initChart();
}
});
}
const { code: code2, data: data2 } = await this.$axios({
url: '/monitoring/equipment-overall/getHistoryStopAndError',
method: 'get',
params: this.formInline,
});
if (code2 == 0) {
this.tableData = data2;
}
},
},
};
</script>
<style scoped lang="scss">
.graph {
// border: 1px solid #ccc;
// padding: 12px 12px 28px 12px;
// margin: 64px 0;
position: relative;
display: flex;
}
.graph-title {
// position: absolute;
// top: -64px;
// left: -1px;
// padding: 8px 18px;
padding: 0 12px;
font-size: 14px;
line-height: 1;
}
.graph-content {
display: flex;
flex: 1;
padding: 22px 12px;
border: 1px solid #ccc;
border-bottom-width: 2px;
border-top: none;
position: relative;
}
.graph-content::after,
.graph-content::before {
content: '';
position: absolute;
width: 3px;
height: 80%;
background: #fff;
right: -1px;
top: 0;
}
.graph-content::before {
right: unset;
left: -1px;
}
.graph-item,
.graph-item-fixed {
// height: 88px;
// width: 24px;
flex: 1;
// border: 1px solid #ccc;
position: relative;
}
.graph-item-fixed {
flex: unset;
}
.graph-item::before,
.graph-item-fixed::before {
position: absolute;
bottom: -16px;
left: 0;
content: attr(data-time);
// font-size - js
// rotate - js
// color - js, default:
color: #777;
transform-origin: left top;
transform: rotate(12deg);
}
.graph-item-fixed::after,
.graph-item::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
display: inline-block;
}
.graph-item.tick::after,
.graph-item-fixed.tick::after {
width: 1px;
height: 6px;
border-left: 1px solid #777;
}
.running {
background-color: #288aff;
// background-color: #84f04e;
}
.waiting {
background-color: #5ad8a6;
// background-color: #409eff;
}
.fault {
// background-color: #ea5b5b;
background-color: #fc9c91;
}
.full {
// background-color: #e6a23c;
background-color: #598fff;
}
.lack {
// background-color: #a69c8d;
background-color: #7585a2;
}
.stop {
background-color: #ffdc94;
}
.legend-row {
margin: 6px 0;
padding-right: 12px;
display: flex;
justify-content: flex-end;
> .legend:not(:last-child) {
margin-right: 12px;
}
.legend {
display: flex;
align-items: center;
}
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
margin-right: 4px;
margin-top: 1px;
}
}
.blue-title {
position: relative;
padding: 4px 0;
padding-left: 12px;
font-size: 14px;
color: #606266;
font-weight: 700;
margin-bottom: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: 16px;
width: 4px;
border-radius: 1px;
background: #0b58ff;
}
}
.echarts__status-chart {
background: #ccc;
}
.echarts__status-chart > div {
height: 100% !important;
width: 100% !important;
}
</style>

299
src/views/equipment/equipmentOverview/index-line.vue Normal file
View File

@@ -0,0 +1,299 @@
<!--
* @Author: zwq
* @Date: 2025-02-10 09:15:55
* @LastEditors: zwq
* @LastEditTime: 2025-02-25 15:48:59
* @Description:
-->
<template>
<div class="app-container" style="overflow: auto">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<div class="top-tip">
<div class="block" style="background: #5b8ff9" />
运行
<div class="block" style="background: #f4b183" />
停机
<div class="block" style="background: #ff4f3e" />
故障
</div>
<div class="canvas-line" v-for="(item, index) in lineArr" :key="index">
<div class="title">{{ item.name }}</div>
<canvas
style="
box-shadow: 1px 1px 2px 2px #909399;
padding: 0;
height: 210px;
width: 100%;
"
@click="getclient($event, index + 1, item.num)"
:id="'mycanvas' + (index + 1)"></canvas>
</div>
</div>
</template>
<script>
import { getPdList } from '@/api/core/monitoring/auto';
import { getFactoryPage, getLineEqStatus } from '@/api/core/base/factory';
import linePot from './line-pot';
export default {
data() {
return {
listQuery: {
factoryId: null,
lineId: null,
},
ctx: '', //canvas
lineArr: [],
formConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineId',
multiple: true,
width: 410
},
{
type: 'button',
btnName: '搜索',
name: 'search',
color: 'primary',
},
],
linePot,
};
},
components: {},
created() {
this.getPdLineList();
},
methods: {
initCanvas(name) {
let canvas = document.getElementById(name);
canvas.width = canvas.clientWidth;
canvas.width = canvas.clientWidth;
canvas.height = 210;
this.ctx = canvas.getContext('2d');
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#909399';
this.ctx.fillStyle = '#5b8ff9';
this.ctx.font = '12px 宋体'; //文字大小 字体样式
this.ctx.clearRect(0, 0, canvas.clientWidth, 210); //清空画布
},
//画长方形
fillRect(x, y, width, height, name, color) {
this.ctx.beginPath(); //开始
this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
this.ctx.fillRect(x, y, width, height); //左上角点的坐标(x,y) 宽 高
this.ctx.strokeRect(x, y, width, height);
this.ctx.fillStyle = '#fff'; //填充颜色
if (height === 50) {
//判断是否特殊机器 机器文字y轴定位加10
this.ctx.fillText(name, x + 5, y + 30);
} else {
this.ctx.fillText(name, x + 5, y + 20);
}
this.ctx.closePath(); //结束
},
//画特殊形
fillLRect(LArr, name, color) {
this.ctx.beginPath(); //开始
LArr.forEach((item, index) => {
if (index === 0) {
this.ctx.moveTo(item[0], item[1]);
} else {
this.ctx.lineTo(item[0], item[1]);
}
});
this.ctx.closePath(); //结束 // 闭合路径
this.ctx.fillStyle = color ? color : '#5b8ff9'; //填充颜色
this.ctx.fill();
this.ctx.stroke();
this.ctx.fillStyle = '#fff'; //填充颜色
if (LArr[0][0] === LArr[1][0]) {
//判断L形第一截是竖着还是横着
this.ctx.fillText(name, LArr[1][0] + 5, LArr[1][1] + 20); //竖着
} else {
this.ctx.fillText(name, LArr[0][0] + 5, LArr[0][1] + 20);
}
},
setRect(item, index) {
const identifier = 'line' + item.num + 'canvas';
this.$nextTick(() => {
this.initCanvas('mycanvas' + (index + 1));
});
this.$nextTick(() => {
this.linePot[identifier].forEach((idItem) => {
item.children.forEach((eqItem) => {
if (eqItem.id === idItem.id) {
idItem.color = ['#5b8ff9', '#f4b183', '#ff4f3e'][
eqItem.equipmentStatus
];
}
});
if (idItem.isL) {
this.fillLRect(idItem.line, idItem.name, idItem.color);
} else {
this.fillRect(
idItem.x,
idItem.y,
idItem.width,
idItem.height,
idItem.name,
idItem.color
);
}
});
});
},
getclient(e, index, num) {
let canvas = document.getElementById('mycanvas' + index);
const rect = canvas.getBoundingClientRect();
const identifier = 'line' + num + 'canvas';
this.isEQ(e.clientX - rect.left, e.clientY - rect.top, identifier);
},
// 检查点击位置是否在设备内
isEQ(x, y, identifier) {
this.linePot[identifier].forEach((idItem) => {
if (idItem.isEQ) {
// 检查点击位置是否在矩形内
if (
x >= idItem.x &&
x <= idItem.x + idItem.width &&
y >= idItem.y &&
y <= idItem.y + idItem.height
) {
console.log(idItem.name, idItem.id);
this.$router.push({
path: '/equipment/analysis/timing-diagram/equipment-status',
query: { eqid: idItem.id },
});
}
}
});
},
getPdLineList() {
const params = {
pageSize: 100,
pageNo: 1,
};
getFactoryPage(params).then((res) => {
this.formConfig[0].selectOptions = res.data.list || [];
});
getPdList().then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 100;
this.listQuery.factoryId = val.factoryId || undefined;
this.listQuery.lineId = val.lineId ? val.lineId : [];
this.getDataList();
break;
default:
console.log(val);
}
},
handleSearchBarChanged({ param, value }) {
this.listQuery.lineId = [];
this.$refs.searchBarForm.formInline.lineId = undefined;
getPdList(value).then((res) => {
this.formConfig[1].selectOptions = res.data || [];
});
},
getDataList() {
// this.lineArr = [
// {
// num: 1,
// name: 'A1',
// children: [],
// },
// {
// num: 2,
// name: 'A2',
// children: [],
// },
// {
// num: 3,
// name: 'A3',
// children: [],
// },
// {
// num: 4,
// name: 'A4',
// children: [],
// },
// {
// num: 5,
// name: 'A5',
// children: [],
// },
// ];
getLineEqStatus(this.listQuery).then((response) => {
this.lineArr = response.data;
this.lineArr.forEach((item, index) => {
const num = [
'20001',
'20002',
'20003',
'20004',
'20005',
].indexOf(item.id);
if (num > 0) {
item.num = num;
item.name = item.lineName;
this.setRect(item, index);
} else {
this.$message.warning('没有对应的产线！');
}
});
});
},
},
};
</script>
<style scoped lang="scss">
.top-tip {
.block {
display: inline-block;
width: 20px;
height: 10px;
margin-left: 20px;
margin-right: 3px;
}
}
.canvas-line {
margin-top: 20px;
min-width: 1600px;
.title {
font-size: 20px;
font-weight: bolder;
&::before {
content: '';
background: rgb(39, 240, 17);
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 3px;
transform: translateY(-50%);
}
}
}
</style>

1398
src/views/equipment/equipmentOverview/index.vue
View File

File diff suppressed because it is too large Load Diff

1810
src/views/equipment/equipmentOverview/line-pot.js Normal file
View File

File diff suppressed because it is too large Load Diff

92
src/views/equipment/equipmentOverview/lineChart.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div
id="linechart"
style="width: 100%"
:style="{ height: chartHeight + 'px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize';
import moment from 'moment';
export default {
name: 'LineChart',
mixins: [resize],
data() {
return {
chartDom: '',
chart: '',
chartHeight: 300,
};
},
props: {
chartData: {
type: Array,
default: () => {
return [];
},
},
},
watch: {
chartData: function () {
this.initChart();
},
},
mounted() {},
methods: {
initChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chartDom = document.getElementById('linechart');
this.chart = echarts.init(this.chartDom);
let xData = this.chartData
? this.chartData[0].detailData.map((item) => item.lastDate)
: [];
let yData = this.chartData
? this.chartData.map((item) => {
return {
type: 'line',
name: item.equipmentName,
data: item.detailData.map((subItem) => subItem.runRate),
};
})
: [];
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: yData.map((item) => item.name),
},
grid: {
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true,
},
xAxis: {
type: 'category',
data: xData,
axisLabel: {
rotate: '45',
},
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %',
},
},
series: yData,
};
option && this.chart.setOption(option);
},
},
};
</script>

29
src/views/equipment/equipmentOverview/subDiv.vue Normal file
View File

@@ -0,0 +1,29 @@
<!--
* @Author: zwq
* @Date: 2024-07-01 14:53:55
* @LastEditors: zwq
* @LastEditTime: 2026-03-18 14:32:19
* @Description:
-->
<template>
<div>
<el-progress :percentage="injectData.stopRate"></el-progress>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
computed: {},
created() {},
methods: {},
};
</script>

11
src/views/group/Schedule/bind-line.vue
View File

@@ -2,12 +2,13 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-18 14:16:25 * @Date: 2021-11-18 14:16:25
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2025-11-25 15:49:17 * @LastEditTime: 2026-01-10 23:19:01
* @Description: * @Description:
--> -->
<template> <template>
<div style="width: 100%; display: flex; justify-content: center"> <div style="width: 100%; display: flex; justify-content: center">
<tree-transfer <tree-transfer
class="treeCss"
:title="title" :title="title"
:from_data="fromData" :from_data="fromData"
:to_data="toData" :to_data="toData"
@@ -20,7 +21,6 @@
children: 'children', children: 'children',
}" }"
height="450px" height="450px"
style="padding-bottom: 20px"
:mode="mode" :mode="mode"
filter filter
openAll></tree-transfer> openAll></tree-transfer>
@@ -64,7 +64,7 @@ export default {
// 创建唯一ID：类型-原始ID // 创建唯一ID：类型-原始ID
const uniqueId = node.type + 'L' + node.id; const uniqueId = node.type + 'L' + node.id;
if (node.type > 0) { if (node.type > 0) {
node.fid = (node.type - 1)+'L'+node.pid; node.fid = node.type - 1 + 'L' + node.pid;
} }
return { return {
@@ -108,3 +108,8 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.treeCss >>> .transfer-title {
margin: 0;
}
</style>

64
src/views/monitoring/equipmentProcessAmount/graph.vue
View File

@@ -7,7 +7,7 @@
<template> <template>
<div class="chart-wrapper"> <div class="chart-wrapper">
<div class="blue-title">各设备加工数量</div> <div class="blue-title">各设备投入/产出数量</div>
<div class="chart" ref="chart"></div> <div class="chart" ref="chart"></div>
</div> </div>
</template> </template>
@@ -24,7 +24,6 @@ export default {
return { return {
chart: null, chart: null,
option: { option: {
color: ['#288AFF'],
grid: { grid: {
top: 64, top: 64,
left: 56, left: 56,
@@ -37,15 +36,8 @@ export default {
type: 'shadow', type: 'shadow',
}, },
}, },
title: { legend: {
show: false, data: ['投入数量', '产出数量'],
text: '各设备加工数量',
textStyle: {
color: '#232323',
fontSize: 16,
},
left: 'center',
top: 24,
}, },
toolbox: { toolbox: {
feature: { feature: {
@@ -59,17 +51,20 @@ export default {
}, },
dataZoom: [ dataZoom: [
{ {
type: 'slider', type: 'inside',
yAxisIndex: 0,
filterMode: 'none',
}, },
{ {
type: 'inside', type: 'slider',
yAxisIndex: 0,
filterMode: 'none',
}, },
], ],
yAxis: { yAxis: {
type: 'value',
name: '数量',
nameTextStyle: {
fontSize: 14,
},
},
xAxis: {
type: 'category', type: 'category',
data: [], data: [],
name: '设备名', name: '设备名',
@@ -77,15 +72,22 @@ export default {
fontSize: 14, fontSize: 14,
}, },
}, },
xAxis: {
type: 'value',
name: '数量',
nameTextStyle: {
fontSize: 14,
},
},
series: [ series: [
{ {
name: '投入数量',
data: [],
type: 'bar',
barWidth: 20,
label: {
show: true,
distance: 50,
formatter: '{c}',
},
large: true,
largeThreshold: 20,
},
{
name: '产出数量',
data: [], data: [],
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
@@ -106,7 +108,8 @@ export default {
handler: function (newVal, oldVal) { handler: function (newVal, oldVal) {
if (!this.chart) this.chart = echarts.init(this.$refs.chart); if (!this.chart) this.chart = echarts.init(this.$refs.chart);
this.$nextTick(() => { this.$nextTick(() => {
if (this.chart) this.chart.setOption(this.updateConfig(this.option),true); if (this.chart)
this.chart.setOption(this.updateConfig(this.option), true);
}); });
}, },
deep: true, deep: true,
@@ -118,13 +121,16 @@ export default {
methods: { methods: {
updateConfig(config) { updateConfig(config) {
let nameData = []; let nameData = [];
let valueData = []; let inQuantity = [];
let outQuantity = [];
this.equipmentList.map((eq) => { this.equipmentList.map((eq) => {
nameData.push(eq.equipmentName); nameData.push(eq.equipmentName);
valueData.push(eq.totalQuantity); inQuantity.push(eq.inQuantity);
outQuantity.push(eq.outQuantity);
}); });
config.yAxis.data = nameData; config.xAxis.data = nameData;
config.series[0].data = valueData; config.series[0].data = inQuantity;
config.series[1].data = outQuantity;
return config; return config;
}, },
}, },

3
src/views/monitoring/equipmentProcessAmount/index.vue
View File

@@ -270,7 +270,8 @@ export default {
// { prop: 'externalCode', label: '设备编码' }, // { prop: 'externalCode', label: '设备编码' },
{ prop: 'equipmentId', label: '设备编码' }, { prop: 'equipmentId', label: '设备编码' },
{ prop: 'equipmentName', label: '设备名称' }, { prop: 'equipmentName', label: '设备名称' },
{ prop: 'totalQuantity', label: '加工数量[片]' }, { prop: 'inQuantity', label: '投入数量[片]' },
{ prop: 'outQuantity', label: '产出数量[片]' },
], ],
mode: 'table', // table | graph mode: 'table', // table | graph
queryParams: { queryParams: {

46
src/views/report/files/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<!-- index.vue 完整代码 -->
<template>
<div>
<i-frame :src="url" />
</div>
</template>
<script>
import iFrame from "@/components/iFrame/index";
import axios from "axios";
export default {
components: { iFrame },
data() {
return {
url: "http://192.168.0.33:7777/files/",
isLoginSuccess: false, // 登录成功后再加载iframe
};
},
async created() {
try {
// 1. 调用目标网页的登录接口（需替换为实际登录接口地址）
const loginRes = await axios.post(
"http://192.168.0.33:7777/api/login", // 目标网页的登录接口
{
username: "admin",
password: "VSKqN1Wnr_id355z",
},
{
// 关键：允许跨域请求携带Cookie
withCredentials: true,
headers: {
"Content-Type": "application/json",
},
}
);
// 2. 登录成功后标记状态，加载iframe
if (loginRes.data.code === 200) {
this.isLoginSuccess = true;
}
} catch (error) {
console.error("免登失败：", error);
}
},
};
</script>