Merge pull request '更新' (#472) from projects/line-new-zwq into projects/line-new
Reviewed-on: #472
This commit is contained in:
2
.env.dev
2
.env.dev
@@ -14,7 +14,7 @@ VUE_APP_TITLE = 智能监控分析系统
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://172.16.33.187:48082'
|
||||
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
35
src/api/analysis/exception.js
Normal 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
64
src/api/base/equipmentSectionShutdownLog.js
Normal 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'
|
||||
})
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-12 14:07:04
|
||||
* @LastEditTime: 2025-01-08 15:47:17
|
||||
* @LastEditTime: 2026-04-28 11:13:17
|
||||
* @LastEditors: zwq
|
||||
* @Description:
|
||||
*/
|
||||
@@ -14,6 +14,13 @@ export function getYieldAnalysisPageData(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getYieldAnalysisHandlePageData(data) {
|
||||
return request({
|
||||
url: '/analysis/production-analysis/getOutputManual',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCT(data) {
|
||||
return request({
|
||||
@@ -46,3 +53,40 @@ export function getNewCTDet(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'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-09-12 09:44:53
|
||||
* @LastEditTime: 2023-09-15 14:12:26
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2026-03-30 15:01:38
|
||||
* @LastEditors: zwq
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
@@ -15,3 +15,12 @@ export function getPdlDataOneDay(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得近24小时产线生产数据-新版
|
||||
export function getSectionDataOneDay(data) {
|
||||
return request({
|
||||
url: '/monitoring/production-monitor/getSectionDataOneDay',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2024-04-02 09:49:36
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- 按钮切换 -->
|
||||
<div v-if="buttonMode" class="button-nav">
|
||||
|
||||
189
src/views/base/equipmentSectionShutdownLog/add-or-updata.vue
Normal file
189
src/views/base/equipmentSectionShutdownLog/add-or-updata.vue
Normal 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
470
src/views/base/equipmentSectionShutdownLog/index.vue
Normal 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
35
src/views/base/equipmentSectionShutdownLog/subDiv.vue
Normal 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
295
src/views/core/analysis/balanceAnalysis/index-jiepai.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
<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
|
||||
v-if="activeName !== '节拍分析'"
|
||||
: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
|
||||
class="app-container"
|
||||
v-if="activeName === 'OEE分析'"
|
||||
style="background: #ffffff">
|
||||
<!-- 表 -->
|
||||
<div>
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="100"
|
||||
:table-props="tableProps1"
|
||||
:table-data="list"
|
||||
:max-height="500"></base-table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="app-container"
|
||||
v-else-if="activeName === 'TEEP分析'"
|
||||
style="background: #ffffff">
|
||||
<!-- 表 -->
|
||||
<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>
|
||||
</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';
|
||||
import ButtonNav from '@/components/ButtonNav';
|
||||
import indexJiepai from './index-jiepai.vue';
|
||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||
import {
|
||||
listHeader,
|
||||
listLineReport,
|
||||
exportTeepExcel,
|
||||
exportOeeExcel,
|
||||
} from '@/api/core/analysis/index';
|
||||
import subDiv from './subDiv.vue';
|
||||
|
||||
const tableProps = [
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'factoryName',
|
||||
label: '工厂',
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
},
|
||||
{
|
||||
prop: 'lineName',
|
||||
label: '产线',
|
||||
prop: 'timeVal',
|
||||
label: '时间段',
|
||||
subcomponent: subDiv,
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
label: '规格',
|
||||
showOverflowtooltip: true,
|
||||
prop: 'plannedProductionHours',
|
||||
label: '计划生产时长',
|
||||
},
|
||||
{
|
||||
prop: 'process',
|
||||
label: '产品工艺',
|
||||
prop: 'actualRunningHours',
|
||||
label: '实际运行时长',
|
||||
},
|
||||
{
|
||||
prop: 'edgeCt',
|
||||
label: '磨边当前节拍pcs/min',
|
||||
prop: 'actualDowntimeHours',
|
||||
label: '实际停机时长',
|
||||
},
|
||||
{
|
||||
prop: 'temperCt',
|
||||
label: '钢化当前节拍pcs/min',
|
||||
prop: 'inputQuantity',
|
||||
label: '上片数量(片)',
|
||||
},
|
||||
{
|
||||
prop: 'downCt',
|
||||
label: '下片当前节拍pcs/min',
|
||||
prop: 'outputQuantity',
|
||||
label: '下片数量',
|
||||
},
|
||||
{
|
||||
prop: 'qualityRate',
|
||||
label: '良品率',
|
||||
},
|
||||
{
|
||||
prop: 'availabilityRate',
|
||||
label: '可用率',
|
||||
},
|
||||
{
|
||||
prop: 'performanceRate',
|
||||
label: '性能',
|
||||
},
|
||||
{
|
||||
prop: 'oee',
|
||||
label: 'OEE',
|
||||
//filter: (val) => (val ? val.join(',') : ''),
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
barChart,
|
||||
eqDetail,
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称',
|
||||
},
|
||||
{
|
||||
prop: 'timeVal',
|
||||
label: '时间段',
|
||||
subcomponent: subDiv,
|
||||
},
|
||||
{
|
||||
prop: 'teep',
|
||||
label: 'TEEP',
|
||||
},
|
||||
{
|
||||
prop: 'oee',
|
||||
label: 'OEE',
|
||||
},
|
||||
{
|
||||
prop: 'useRate',
|
||||
label: '设备使用率',
|
||||
},
|
||||
{
|
||||
prop: 'capacityUtilization',
|
||||
label: '产能利用率',
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: '',
|
||||
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: '产线',
|
||||
@@ -147,19 +181,43 @@ export default {
|
||||
collapseTags: 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',
|
||||
label: '时间范围',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'timestamp',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
param: 'timeVal',
|
||||
width: 350,
|
||||
clearable: false,
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
@@ -167,139 +225,163 @@ export default {
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
// type: 'button',
|
||||
// btnName: '导出',
|
||||
// name: 'export',
|
||||
// color: 'warning',
|
||||
// },
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
addOrEditTitle: '',
|
||||
addOrUpdateVisible: false,
|
||||
activeName: 'OEE分析',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
lineId: null,
|
||||
type: null,
|
||||
createTime: null,
|
||||
},
|
||||
tableProps1,
|
||||
tableProps2,
|
||||
list: [],
|
||||
lineList: [],
|
||||
};
|
||||
},
|
||||
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(),
|
||||
];
|
||||
components: { ButtonNav, indexJiepai },
|
||||
mounted() {
|
||||
listHeader().then((response) => {
|
||||
this.lineList = response.data.map((item) => ({
|
||||
oeename: `${item.name}累计OEE综合效率`,
|
||||
teepname: `${item.name}累计TEEP综合效率`,
|
||||
oeevalue: item.oee.toFixed(2),
|
||||
teepvalue: item.teep.toFixed(2),
|
||||
}));
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
getProductionLinePage({
|
||||
page: 1,
|
||||
limit: 500,
|
||||
}).then((response) => {
|
||||
this.formConfig[0].selectOptions = response.data.list;
|
||||
});
|
||||
if (this.$refs.buttonNav) {
|
||||
this.$refs.buttonNav.currentMenu = 'OEE分析';
|
||||
}
|
||||
this.getPage();
|
||||
});
|
||||
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'));
|
||||
currentMenu(val) {
|
||||
this.activeName = val;
|
||||
if (this.activeName !== '节拍分析') {
|
||||
this.getPage();
|
||||
}
|
||||
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 || [];
|
||||
getPage() {
|
||||
listLineReport(this.queryParams).then((response) => {
|
||||
this.list = response.data;
|
||||
});
|
||||
},
|
||||
// 查询
|
||||
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();
|
||||
this.queryParams.lineId = val.lineId;
|
||||
this.queryParams.type = val.type;
|
||||
this.queryParams.createTime = val.timeVal;
|
||||
this.getPage();
|
||||
break;
|
||||
case 'export':
|
||||
this.queryParams.lineId = val.lineId;
|
||||
this.queryParams.type = val.type;
|
||||
this.queryParams.createTime = val.timeVal;
|
||||
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();
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
const params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.$modal
|
||||
.confirm('是否确认导出所有数据项?')
|
||||
.then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.activeName == 'OEE分析'
|
||||
? exportOeeExcel(params)
|
||||
: exportTeepExcel(params);
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.excel(response, '报表.xls');
|
||||
this.exportLoading = false;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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
35
src/views/core/analysis/balanceAnalysis/subDiv.vue
Normal 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
103
src/views/core/analysis/yieldAnalysis-handle/LineChart.vue
Normal 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
272
src/views/core/analysis/yieldAnalysis-handle/index.vue
Normal 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
31
src/views/core/analysis/yieldAnalysis-handle/subDiv.vue
Normal 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>
|
||||
@@ -92,6 +92,8 @@ export default {
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{ prop: 'name', label: '设备类型名称' },
|
||||
{ prop: 'isCraft', label: '是否为生产设备',
|
||||
filter: (val) => val?'是': '否', },
|
||||
{ prop: 'code', label: '设备类型编码' },
|
||||
{ prop: 'remark', label: '备注' },
|
||||
],
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<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"
|
||||
placeholder="请选择产品类型">
|
||||
placeholder="请选择玻璃类型">
|
||||
<el-option v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
@@ -195,14 +195,13 @@ export default {
|
||||
name: '', // 产品名称
|
||||
code: '', // 产品编码
|
||||
area: 0, // 深加工单位平方数(float only)
|
||||
typeDictValue: null, // 产品类型id
|
||||
typeDictValue: null, // 玻璃类型id
|
||||
processTime: null, // 单位产品用时 (s)
|
||||
specifications: '', // 深加工规格
|
||||
unitDictValue: '', // 单位id
|
||||
originalSpecifications: '', // 原片规格
|
||||
originalArea: 0, // 原片单位平方数
|
||||
processTypes: [],
|
||||
typeDictValue: null,
|
||||
},
|
||||
typeList:[],
|
||||
listQuery: {
|
||||
@@ -251,7 +250,7 @@ export default {
|
||||
typeDictValue: [
|
||||
{
|
||||
required: true,
|
||||
message: '产品类型不能为空',
|
||||
message: '玻璃类型不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:max-height="tableH"
|
||||
@emitFun="handleEmitFun"
|
||||
/>
|
||||
:span-method="mergeColumnHandler"
|
||||
@emitFun="handleEmitFun" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPdlDataOneDay } from '@/api/core/monitoring/data24'
|
||||
import { getSectionDataOneDay } from '@/api/core/monitoring/data24';
|
||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||
|
||||
export default {
|
||||
@@ -35,7 +35,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getPdlDataOneDay
|
||||
getDataListURL: getSectionDataOneDay,
|
||||
},
|
||||
initing: false,
|
||||
queryParams: {
|
||||
@@ -45,6 +45,7 @@ export default {
|
||||
list: [],
|
||||
arr: [],
|
||||
spanArr: [],
|
||||
spanArrProLine: [], // 产线合并行数组
|
||||
timeList: [],
|
||||
tableData: [],
|
||||
tableProps: [],
|
||||
@@ -58,78 +59,130 @@ export default {
|
||||
methods: {
|
||||
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
||||
buildProps(plData) {
|
||||
plData.forEach(item => {
|
||||
this.timeList.push(item.name)
|
||||
})
|
||||
const timeArray = Array.from(new Set(this.timeList))
|
||||
console.log('nihc', timeArray)
|
||||
this.timeList = []; // 重置避免重复
|
||||
this.arr = []; // 重置避免重复
|
||||
plData.forEach((item) => {
|
||||
this.timeList.push(item.name);
|
||||
});
|
||||
const timeArray = Array.from(new Set(this.timeList));
|
||||
for (const times of timeArray) {
|
||||
if (times !== '投入数量' && times !== '产出数量' && times !== '报废数量' && times !== '产出面积') {
|
||||
if (!['投入数', '产出数', '报废数量', '报废比例'].includes(times)) {
|
||||
const subprop = {
|
||||
label: times.slice(0, 10) + ' ' + times.slice(11),
|
||||
label: `${times.slice(0, 10)} ${times.slice(11)}`,
|
||||
align: 'center',
|
||||
children: [
|
||||
{ prop: times + '_in', label: '投入数量',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ prop: times + '_out', label: '产出数量',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ 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
|
||||
{
|
||||
prop: `${times}_in`,
|
||||
label: '投入数',
|
||||
filter: (val) => (val != null ? val : '-'),
|
||||
},
|
||||
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) => {
|
||||
if (index === 0) {
|
||||
this.spanArr.push(1)
|
||||
spanArr.push(1);
|
||||
} else {
|
||||
if (item === arr[index - 1]) {
|
||||
this.spanArr[count] += 1
|
||||
this.spanArr.push(0)
|
||||
spanArr[count] += 1;
|
||||
spanArr.push(0);
|
||||
} else {
|
||||
count = index
|
||||
this.spanArr.push(1)
|
||||
count = index;
|
||||
spanArr.push(1);
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('打印数组长度', this.spanArr)
|
||||
});
|
||||
return spanArr;
|
||||
},
|
||||
|
||||
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
||||
convertList(list) {
|
||||
let sectionArr= []
|
||||
console.log('打印看下数据list', list)
|
||||
list.forEach((ele, index) => {
|
||||
let tempData = []
|
||||
ele.data.forEach(item => {
|
||||
item.children.forEach(params => {
|
||||
if (params.dynamicName === '投入数量') {
|
||||
tempData[item.dynamicName + '_in'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '产出数量') {
|
||||
tempData[item.dynamicName + '_out'] = params.dynamicValue
|
||||
} else if (params.dynamicName === '报废数量') {
|
||||
tempData[item.dynamicName + '_junk'] = params.dynamicValue
|
||||
} else {
|
||||
tempData[item.dynamicName + '_area'] = params.dynamicValue
|
||||
}
|
||||
})
|
||||
})
|
||||
tempData['proLineName'] = ele.proLineName
|
||||
tempData['spec'] = ele.spec
|
||||
this.tableData.push(tempData)
|
||||
console.log('看看数据', this.tableData, tempData)
|
||||
const { proLineName } = tempData
|
||||
sectionArr.push(proLineName)
|
||||
})
|
||||
this.setRowSpan(sectionArr)
|
||||
console.log('工段名称列表', sectionArr)
|
||||
this.tableData = []; // 重置避免重复
|
||||
const proLineNames = []; // 存储产线名称用于计算合并
|
||||
const specNames = []; // 存储规格名称用于计算合并
|
||||
|
||||
list.forEach((ele) => {
|
||||
const tempData = {};
|
||||
// 基础字段赋值
|
||||
tempData.proLineName = ele.proLineName;
|
||||
tempData.spec = ele.spec;
|
||||
tempData.sectionName = ele.sectionName;
|
||||
tempData.allNum = ele.allNum;
|
||||
|
||||
// 动态字段赋值
|
||||
ele.data.forEach((item) => {
|
||||
item.children.forEach((params) => {
|
||||
const keyMap = {
|
||||
'投入数': `${item.dynamicName}_in`,
|
||||
'产出数': `${item.dynamicName}_out`,
|
||||
'报废数量': `${item.dynamicName}_junk`,
|
||||
'报废比例': `${item.dynamicName}_area`,
|
||||
};
|
||||
const key = keyMap[params.dynamicName];
|
||||
if (key) tempData[key] = params.dynamicValue;
|
||||
});
|
||||
});
|
||||
|
||||
this.tableData.push(tempData);
|
||||
proLineNames.push(ele.proLineName);
|
||||
specNames.push(ele.spec);
|
||||
});
|
||||
|
||||
// 计算合并行数组
|
||||
this.spanArrProLine = this.calcRowSpan(proLineNames);
|
||||
},
|
||||
|
||||
buildData(data) {
|
||||
@@ -138,38 +191,55 @@ export default {
|
||||
|
||||
/** 合并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];
|
||||
// 列索引0: 产线列, 列索引1: 产品规格列
|
||||
if (columnIndex === 0) {
|
||||
return {
|
||||
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||
};
|
||||
}
|
||||
if (columnIndex === 1) {
|
||||
return {
|
||||
rowspan: this.spanArrProLine[rowIndex] || 0,
|
||||
colspan: this.spanArrProLine[rowIndex] ? 1 : 0
|
||||
};
|
||||
}
|
||||
// 其他列不合并
|
||||
return { rowspan: 1, colspan: 1 };
|
||||
},
|
||||
|
||||
async getList() {
|
||||
this.urlOptions.getDataListURL().then(res => {
|
||||
console.log('看看数据', res)
|
||||
this.urlOptions.getDataListURL().then((res) => {
|
||||
console.log('看看数据', res);
|
||||
this.arr = [
|
||||
{
|
||||
prop: 'proLineName',
|
||||
label: '生产线',
|
||||
label: '产线',
|
||||
fixed: 'left',
|
||||
showOverflowTooltip: true
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '产品规格',
|
||||
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.buildData(res.data.data);
|
||||
})
|
||||
});
|
||||
|
||||
// // const data = this.res.data;
|
||||
// // console.log('recent-24', data);
|
||||
|
||||
278
src/views/core/monitoring/groupReport/baseTable.vue
Normal file
278
src/views/core/monitoring/groupReport/baseTable.vue
Normal 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
331
src/views/core/monitoring/groupReport/gr-detail.vue
Normal 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
594
src/views/core/monitoring/groupReport/index.vue
Normal 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>
|
||||
@@ -1,17 +1,74 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-09-04 09:34:52
|
||||
description: 设备异常分析
|
||||
* @Author: zwq
|
||||
* @Date: 2025-06-25 09:53:10
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-04-28 10:59:33
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar
|
||||
:formConfigs="searchBarFormConfig"
|
||||
ref="search-bar"
|
||||
@headBtnClick="handleSearchBarBtnClick" />
|
||||
<el-form
|
||||
:inline="true"
|
||||
ref="searchBarForm"
|
||||
: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
|
||||
@@ -43,6 +100,14 @@
|
||||
import moment from 'moment';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
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 {
|
||||
name: 'ExceptionAnalysis',
|
||||
@@ -51,21 +116,6 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
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: [
|
||||
{
|
||||
type: 'edit',
|
||||
@@ -80,131 +130,147 @@ export default {
|
||||
{ prop: 'lineName', label: '产线' },
|
||||
{ prop: 'sectionName', 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,
|
||||
prop: 'mtbf',
|
||||
prop: 'avgDowntimeDuration',
|
||||
label: '平均故障间隔时间[MTBF](h)',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||
},
|
||||
{
|
||||
width: 240,
|
||||
prop: 'mttr',
|
||||
label: '平均维修时间[MTTR](h)',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||
},
|
||||
{ width: 128, prop: 'workTime', label: '工作时长(h)',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ width: 128, prop: 'downTime', label: '故障时长(h)',
|
||||
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||
{ prop: 'downCount', label: '故障次数' },
|
||||
],
|
||||
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',
|
||||
},
|
||||
// {
|
||||
// width: 240,
|
||||
// prop: 'mttr',
|
||||
// label: '平均维修时间[MTTR](h)',
|
||||
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||
// },
|
||||
// {
|
||||
// width: 128,
|
||||
// prop: 'downTime',
|
||||
// label: '故障时长(h)',
|
||||
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||
// },
|
||||
],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
lineId: null,
|
||||
radio: 1,
|
||||
type: null,
|
||||
factoryId: null,
|
||||
lineId: null,
|
||||
sectionId: null,
|
||||
equId: null,
|
||||
recordTime: null,
|
||||
},
|
||||
typeoptions: [
|
||||
{
|
||||
value: '4',
|
||||
label: '周',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '月',
|
||||
},
|
||||
{
|
||||
value: '6',
|
||||
label: '年',
|
||||
},
|
||||
],
|
||||
options: [], // 产线/工段选项
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.fillLineOptions();
|
||||
getGroupPlanTree().then((res) => {
|
||||
this.options = res.data;
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
async fillLineOptions() {
|
||||
const { data } = await this.$axios({
|
||||
url: '/base/production-line/listAll',
|
||||
method: 'get',
|
||||
handleCascaderChange() {
|
||||
const checkedNodes = this.$refs.cascaderRef.getCheckedNodes();
|
||||
this.queryParams.factoryId = [];
|
||||
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'
|
||||
);
|
||||
this.$set(
|
||||
cfg,
|
||||
'selectOptions',
|
||||
data.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
}))
|
||||
);
|
||||
},
|
||||
handleRecordSearch() {
|
||||
if (
|
||||
this.queryParams.recordTime &&
|
||||
this.queryParams.recordTime.length > 0
|
||||
) {
|
||||
this.queryParams.startTime = this.queryParams.recordTime[0];
|
||||
this.queryParams.endTime = this.queryParams.recordTime[1];
|
||||
}
|
||||
this.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;
|
||||
// 执行查询
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/analysis/equipment-analysis/efficiency',
|
||||
method: 'get',
|
||||
params: {
|
||||
lineId: this.queryParams.lineId || null,
|
||||
recordTime: this.queryParams.recordTime || null,
|
||||
},
|
||||
});
|
||||
const { code, data } = await (this.queryParams.radio === 1
|
||||
? getReportPage(params)
|
||||
: getQueryPage(params));
|
||||
if (code === 0) {
|
||||
this.list = data;
|
||||
} else {
|
||||
this.list.splice(0);
|
||||
}
|
||||
},
|
||||
|
||||
handleSearchBarBtnClick(btn) {
|
||||
switch (btn.btnName) {
|
||||
case 'search':
|
||||
if (btn.month) {
|
||||
this.queryParams.recordTime = [
|
||||
moment()
|
||||
.month(btn.month - 1)
|
||||
.format('YYYY-MM') + '-01 00:00:00',
|
||||
moment().month(btn.month).format('YYYY-MM') + '-01 00:00:00',
|
||||
];
|
||||
} else {
|
||||
this.queryParams.recordTime = null;
|
||||
}
|
||||
this.queryParams.lineId = btn.lineId || null;
|
||||
this.handleQuery();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
// this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm('queryForm');
|
||||
this.handleQuery();
|
||||
handleExport1() {
|
||||
this.handleRecordSearch();
|
||||
// 处理查询参数
|
||||
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.$modal
|
||||
.confirm('是否确认导出所有数据项?')
|
||||
.then(() => {
|
||||
this.exportLoading = true;
|
||||
return this.queryParams.radio === 1
|
||||
? exportReportExcel(params)
|
||||
: exportQueryExcel(params);
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.excel(response, '报表.xls');
|
||||
this.exportLoading = false;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
328
src/views/equipment/equipmentOverview/chart.js
Normal file
328
src/views/equipment/equipmentOverview/chart.js
Normal 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
367
src/views/equipment/equipmentOverview/gantt.js
Normal 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
1309
src/views/equipment/equipmentOverview/index-eq.vue
Normal file
File diff suppressed because it is too large
Load Diff
487
src/views/equipment/equipmentOverview/index-his.vue
Normal file
487
src/views/equipment/equipmentOverview/index-his.vue
Normal 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
299
src/views/equipment/equipmentOverview/index-line.vue
Normal 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>
|
||||
File diff suppressed because it is too large
Load Diff
1810
src/views/equipment/equipmentOverview/line-pot.js
Normal file
1810
src/views/equipment/equipmentOverview/line-pot.js
Normal file
File diff suppressed because it is too large
Load Diff
92
src/views/equipment/equipmentOverview/lineChart.vue
Normal file
92
src/views/equipment/equipmentOverview/lineChart.vue
Normal 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
29
src/views/equipment/equipmentOverview/subDiv.vue
Normal 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>
|
||||
@@ -2,12 +2,13 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-25 15:49:17
|
||||
* @LastEditTime: 2026-01-10 23:19:01
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<tree-transfer
|
||||
class="treeCss"
|
||||
:title="title"
|
||||
:from_data="fromData"
|
||||
:to_data="toData"
|
||||
@@ -20,7 +21,6 @@
|
||||
children: 'children',
|
||||
}"
|
||||
height="450px"
|
||||
style="padding-bottom: 20px"
|
||||
:mode="mode"
|
||||
filter
|
||||
openAll></tree-transfer>
|
||||
@@ -64,7 +64,7 @@ export default {
|
||||
// 创建唯一ID:类型-原始ID
|
||||
const uniqueId = node.type + 'L' + node.id;
|
||||
if (node.type > 0) {
|
||||
node.fid = (node.type - 1)+'L'+node.pid;
|
||||
node.fid = node.type - 1 + 'L' + node.pid;
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -108,3 +108,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.treeCss >>> .transfer-title {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<template>
|
||||
<div class="chart-wrapper">
|
||||
<div class="blue-title">各设备加工数量</div>
|
||||
<div class="blue-title">各设备投入/产出数量</div>
|
||||
<div class="chart" ref="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,7 +24,6 @@ export default {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: ['#288AFF'],
|
||||
grid: {
|
||||
top: 64,
|
||||
left: 56,
|
||||
@@ -37,15 +36,8 @@ export default {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
text: '各设备加工数量',
|
||||
textStyle: {
|
||||
color: '#232323',
|
||||
fontSize: 16,
|
||||
},
|
||||
left: 'center',
|
||||
top: 24,
|
||||
legend: {
|
||||
data: ['投入数量', '产出数量'],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
@@ -59,17 +51,20 @@ export default {
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
yAxisIndex: 0,
|
||||
filterMode: 'none',
|
||||
type: 'inside',
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
yAxisIndex: 0,
|
||||
filterMode: 'none',
|
||||
type: 'slider',
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
name: '设备名',
|
||||
@@ -77,15 +72,22 @@ export default {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '投入数量',
|
||||
data: [],
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
distance: 50,
|
||||
formatter: '{c}',
|
||||
},
|
||||
large: true,
|
||||
largeThreshold: 20,
|
||||
},
|
||||
{
|
||||
name: '产出数量',
|
||||
data: [],
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
@@ -106,7 +108,8 @@ export default {
|
||||
handler: function (newVal, oldVal) {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
|
||||
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,
|
||||
@@ -118,13 +121,16 @@ export default {
|
||||
methods: {
|
||||
updateConfig(config) {
|
||||
let nameData = [];
|
||||
let valueData = [];
|
||||
let inQuantity = [];
|
||||
let outQuantity = [];
|
||||
this.equipmentList.map((eq) => {
|
||||
nameData.push(eq.equipmentName);
|
||||
valueData.push(eq.totalQuantity);
|
||||
inQuantity.push(eq.inQuantity);
|
||||
outQuantity.push(eq.outQuantity);
|
||||
});
|
||||
config.yAxis.data = nameData;
|
||||
config.series[0].data = valueData;
|
||||
config.xAxis.data = nameData;
|
||||
config.series[0].data = inQuantity;
|
||||
config.series[1].data = outQuantity;
|
||||
return config;
|
||||
},
|
||||
},
|
||||
|
||||
@@ -270,7 +270,8 @@ export default {
|
||||
// { prop: 'externalCode', label: '设备编码' },
|
||||
{ prop: 'equipmentId', label: '设备编码' },
|
||||
{ prop: 'equipmentName', label: '设备名称' },
|
||||
{ prop: 'totalQuantity', label: '加工数量[片]' },
|
||||
{ prop: 'inQuantity', label: '投入数量[片]' },
|
||||
{ prop: 'outQuantity', label: '产出数量[片]' },
|
||||
],
|
||||
mode: 'table', // table | graph
|
||||
queryParams: {
|
||||
|
||||
46
src/views/report/files/index.vue
Normal file
46
src/views/report/files/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user