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

Merge pull request '修改' (#473) from projects/line-new-zhp into projects/line-new

Browse Source 
Reviewed-on: #473
This commit is contained in:
张昊鹏
2026-06-11 15:34:04 +08:00
parent 0e1c1d4c1a 51e1ef8501
commit 620b2db76e
7 changed files with 1388 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

25
src/api/monitoring/eqParamAlarmLog.js Normal file
View File

@@ -0,0 +1,25 @@
import request from '@/utils/request'
export function getEquipmentAlarmLogPage(query) {
return request({
url: '/monitoring/equipment-param-alarm-log/page',
method: 'get',
params: query,
});
}
export function getEqList(query) {
return request({
url: '/base/equipment/listByLine',
method: 'get',
params: query,
});
}
export function getLineList(query) {
return request({
url: '/base/production-line/listAll',
method: 'get',
// params: query,
});
}

321
src/views/monitoring/eqParamAlarmLog/index.vue Normal file
View File

@@ -0,0 +1,321 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick"
@select-changed="handleSearchBarItemChange" />
<!-- 列表 -->
<base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list"
@emitFun="handleEmitFun">
<!-- <method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> -->
</base-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 对话框(添加 / 修改) -->
<!-- <base-dialog
:dialogTitle="title"
:dialogVisible="open"
width="500px"
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
</base-dialog> -->
</div>
</template>
<script>
import {
getEquipmentAlarmLogPage,
getEqList,
getLineList
} from '@/api/monitoring/eqParamAlarmLog';
import Editor from '@/components/Editor';
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
// import { getFactoryPage } from '@/api/core/base/factory';
export default {
name: 'EquipmentAlarmLog',
components: {
Editor,
},
mixins: [basicPageMixin],
data() {
return {
searchBarKeys: ['checkTime'],
// optionArrUrl: [getFactoryPage,getEqList],
tableBtn: [
this.$auth.hasPermi('base:equipment-alarm-log:update')
? {
type: 'edit',
btnName: '修改',
}
: undefined,
this.$auth.hasPermi('base:equipment-alarm-log:delete')
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
tableProps: [
{
prop: 'factoryName',
label: '工厂',
},
{ prop: 'lineName', label: '产线' },
{ prop: 'equipmentName', label: '设备名称' },
{ prop: 'paramName', label: '参数名称' },
{ prop: 'paramLimit', label: '参数范围' },
{
prop: 'alarmType', label: '报警类型',
filter: (val) => (val === 1 ? '高于上限' : val === 2 ?'低于下限' : '否'),
},
// {
// // width: 90,
// prop: 'alarmGrade',
// label: '报警级别',
// filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
// },
{
prop: 'createTime',
label: '报警时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'alarmContent', label: '报警内容' },
// {
// _action: 'equipment-group-show-alert',
// label: '报警',
// ,
// subcomponent: {
// props: ['injectData'],
// render: function (h) {
// const _this = this;
// return h(
// 'el-button',
// {
// props: { type: 'text', size: 'mini' },
// on: {
// click: function () {
// console.log('inejctdata', _this.injectData);
// _this.$emit('emitData', {
// action: _this.injectData._action,
// // value: _this.injectData.id,
// value: _this.injectData,
// });
// },
// },
// },
// '查看报警'
// );
// },
// },
// },
],
searchBarFormConfig: [
{
type: 'select',
label: '产线',
selectOptions: [],
param: 'lineId',
onchange: true,
filterable: true,
},
{
type: 'select',
label: '设备名称',
selectOptions: [],
param: 'equipmentId',
filterable: true,
// onchange: true,
},
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'createTime',
// width: 350,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 20,
factoryId: undefined,
createTime: [],
},
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
created() {
this.getArr();
this.getList();
},
methods: {
async getArr() {
const params = {
page: 1,
limit: 500,
};
getLineList().then((response) => {
this.searchBarFormConfig[0].selectOptions = response.data
});
// const list = await getEqList();
// this.searchBarFormConfig[1].selectOptions = list.data.map((eq) => ({
// name: eq.name,
// id: eq.id,
// }))
// this.optionArrUrl.forEach((item, index) => {
// item(params).then((response) => {
// this.searchBarFormConfig[index].selectOptions = response.data;
// });
// });
},
/** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
handleSearchBarBtnClick(btn) {
// 仅查询一种情况
this.queryParams.lineId = btn.lineId;
this.queryParams.equipmentId = btn.equipmentId;
this.queryParams.createTime = btn.createTime;
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
// 执行查询
getEquipmentAlarmLogPage(this.queryParams).then((response) => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
},
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
alarmId: undefined,
alarmContent: undefined,
alarmValue: undefined,
alarmEquipmentId: undefined,
remark: undefined,
};
this.resetForm('form');
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
// /** 重置按钮操作 */
// resetQuery() {
// this.resetForm('queryForm');
// this.handleQuery();
// },
// /** 新增按钮操作 */
// handleAdd() {
// this.reset();
// this.open = true;
// this.title = '添加设备报警日志';
// },
async handleSearchBarItemChange({ param, value: id }) {
if (param == 'lineId') {
if (id == '') {
// 清除设备选框里的选项
this.searchBarFormConfig[1].selectOptions = [];
return;
}
const list = await getEqList({
id
});
this.searchBarFormConfig[1].selectOptions = list.data.map((eq) => ({
name: eq.name,
id: eq.id,
}));
}
},
/** 修改按钮操作 */
// handleUpdate(row) {
// this.reset();
// const id = row.id;
// getEquipmentAlarmLog(id).then((response) => {
// this.form = response.data;
// this.open = true;
// this.title = '修改设备报警日志';
// });
// },
// /** 提交按钮 */
// submitForm() {
// this.$refs['form'].validate((valid) => {
// if (!valid) {
// return;
// }
// // 修改的提交
// if (this.form.id != null) {
// updateEquipmentAlarmLog(this.form).then((response) => {
// this.$modal.msgSuccess('修改成功');
// this.open = false;
// this.getList();
// });
// return;
// }
// // 添加的提交
// createEquipmentAlarmLog(this.form).then((response) => {
// this.$modal.msgSuccess('新增成功');
// this.open = false;
// this.getList();
// });
// });
// },
/** 删除按钮操作 */
// handleDelete(row) {
// const id = row.id;
// this.$modal
// .confirm('是否确认删除设备报警日志编号为"' + id + '"的数据项?')
// .then(function () {
// return deleteEquipmentAlarmLog(id);
// })
// .then(() => {
// this.getList();
// this.$modal.msgSuccess('删除成功');
// })
// .catch(() => {});
// },
/** 导出按钮操作 */
},
};
</script>

301
src/views/monitoring/equipmentStatusAndParams copy/index.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick"
@select-changed="handleSearchBarItemChange" />
<!-- 列表 -->
<base-table
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emitFun="handleEmitFun">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
label="操作"
:width="120"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
</base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 对话框(添加 / 修改) -->
<!-- <base-dialog
:dialogTitle="title"
:dialogVisible="open"
width="500px"
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
</base-dialog> -->
</div>
</template>
<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { publicFormatter } from '@/utils/dict';
import { getPdList } from '@/api/core/monitoring/auto';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getFactoryPage } from '@/api/core/base/factory';
export default {
name: 'EquipmentStatusAndParams',
mixins: [basicPageMixin],
data() {
return {
searchBarKeys: ['equipmentId', 'productionLineId'],
optionArrUrl: [getFactoryPage, getProductionLinePage],
tableBtn: [
this.$auth.hasPermi('base:equipment-alarm-log:update')
? {
type: 'edit',
btnName: '修改',
}
: undefined,
this.$auth.hasPermi('base:equipment-alarm-log:delete')
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
tableProps: [
{
prop: 'factoryName',
label: '工厂',
},
{
prop: 'lineName',
label: '产线名',
},
{
prop: 'workshopName',
label: '工段名',
showOverflowtooltip: true,
},
{
width: 200,
prop: 'equipmentName',
label: '设备名称',
},
{
width: 150,
showOverflowtooltip: true,
prop: 'equipmentCode',
label: '设备编码',
},
{ width: 128, prop: 'inQuantity', label: '投入数[片]' },
{ width: 128, prop: 'outQuantity', label: '产出数[片]' },
{
width: 128,
prop: 'run',
label: '是否运行',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
},
{
width: 128,
prop: 'status',
label: '状态',
filter: (val) =>
val != null ? ['正常', '计划停机', '故障'][val] : '-',
},
// {
// width: 128,
// prop: 'error',
// label: '是否故障',
// filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
// },
// {
// prop: 'quantityRecordTime',
// label: '生产量记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
// {
// prop: 'statusRecordTime',
// label: '状态记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{
_action: 'params-monitor',
label: '操作',
width: 56,
subcomponent: {
props: ['injectData'],
render: function (h) {
const _this = this;
return h(
'el-button',
{
class: 'iconfont icon-detail',
props: { type: 'text' },
on: {
click: function () {
_this.$emit('emitData', {
action: _this.injectData._action,
// value: _this.injectData.id,
value: _this.injectData,
});
},
},
}
// '查看详情'
);
},
},
},
],
searchBarFormConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
{
type: 'select',
label: '产线',
onchange: true,
placeholder: '请选择产线',
selectOptions: [],
param: 'productionLineId',
},
{
type: 'select',
label: '设备',
placeholder: '请选择设备',
param: 'equipmentId',
selectOptions: [],
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
factoryId: null,
productionLineId: [],
equipmentId: null,
},
total: 0,
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
created() {
this.getArr();
this.getList();
},
methods: {
getArr() {
const params = {
page: 1,
limit: 500,
};
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.searchBarFormConfig[index].selectOptions = response.data.list;
});
});
},
/** 根据产线获取设备 */
async getEquipmentList(id) {
const { data } = await this.$axios({
url: '/base/equipment/listByLine',
method: 'get',
params: { id },
});
return data;
},
/** 监听 search bar 的产线下拉框改变 */
async handleSearchBarItemChange({ param, value: id }) {
if (param == 'productionLineId') {
if (id == '') {
// 清除设备选框里的选项
this.searchBarFormConfig[2].selectOptions = [];
return;
}
const list = await this.getEquipmentList(id);
this.searchBarFormConfig[2].selectOptions = list.map((eq) => ({
name: eq.name,
id: eq.id,
}));
} else if (param == 'factoryId') {
// 清除设备选框里的选项
this.searchBarFormConfig[2].selectOptions = [];
this.queryParams.equipmentId = undefined;
this.queryParams.productionLineId = [];
this.$refs['search-bar'].formInline.equipmentId = undefined;
this.$refs['search-bar'].formInline.productionLineId = undefined;
getPdList(id).then((res) => {
this.searchBarFormConfig[1].selectOptions = res.data || [];
});
}
},
handleSearchBarBtnClick(btn) {
const { equipmentId, productionLineId,factoryId } = btn;
if (equipmentId) this.queryParams.equipmentId = equipmentId;
else this.queryParams.equipmentId = null;
if (productionLineId)
this.queryParams.productionLineId = [productionLineId];
else this.queryParams.productionLineId = [];
this.queryParams.factoryId = factoryId || null;
this.getList();
},
/** 查询列表 */
async getList() {
this.loading = true;
const { data } = await this.$axios({
url: '/monitoring/equipment-monitor/realtime-page',
method: 'POST',
data: this.queryParams,
});
this.list = data.list;
this.total = data.total;
},
handleEmitFun({ action, value }) {
if (action == 'params-monitor') {
const { equipmentId, equipmentName, equipmentCode } = value;
this.$router.push({
name: 'equipmentFullParams',
params: {
equipmentId,
equipmentCode,
equipmentName,
},
});
}
},
},
};
</script>

400
src/views/monitoring/equipmentStatusAndParams/chart.vue Normal file
View File

@@ -0,0 +1,400 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-09-11 15:55:13
description: DialogForm for qualityInspectionRecord only
-->
<template>
<el-dialog :title="title" :append-to-body="true" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
<div>
<!-- 保留ref="search-bar"，用于获取组件实例 -->
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" />
<!-- 统一使用ref关联DOM，避免id选择器混乱 -->
<div ref="coreLineChart" style="width: 95%; height: 400px;"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
// 引入echarts（确保项目已安装：npm install echarts --save）
import * as echarts from 'echarts'; // 统一引入方式，兼容新版ECharts
export default {
name: 'DialogForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: {},
props: {
dataForm: {
type: Object,
default: () => ({}),
},
eqId: {
type: [String, Number],
default: () => '',
}
},
data() {
return {
searchBarFormConfig: [
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange',
format: 'yyyy-MM-dd',
valueFormat: 'timestamp', // 毫秒级时间戳格式
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
defaultSelect: [],
param: 'createTime', // 日期选择器的参数名，用于赋值
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
],
title:'趋势图',
dialogVisible: false,
listQuery: {
equId: undefined,
paramId: undefined,
plcName: undefined,
plcParamName: undefined,
startTime: undefined,
endTime: undefined
},
list: [],
myChart: null, // ECharts实例
resizeHandler: null // 缓存resize事件处理函数，方便销毁
};
},
mounted() {
// 初始化图表（确保DOM渲染完成）
this.$nextTick(() => {
this.initChart(); // 调用正确的初始化方法
});
},
beforeDestroy() {
// 1. 移除resize事件监听，防止内存泄漏
if (this.resizeHandler && window.removeEventListener) {
window.removeEventListener('resize', this.resizeHandler);
}
// 2. 销毁ECharts实例
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
},
methods: {
// 核心方法：获取最近30天时间段（毫秒级时间戳）
getLast30DaysTimeRange() {
const today = new Date();
// 起始时间：30天前 00:00:00.000
const startDate = new Date(today);
startDate.setDate(today.getDate() - 30);
startDate.setHours(0, 0, 0, 0);
const startTimeStamp = startDate.getTime();
// 结束时间：昨天 23:59:59.000
const endDate = new Date(today);
endDate.setDate(today.getDate() - 1);
endDate.setHours(23, 59, 59, 0);
const endTimeStamp = endDate.getTime();
return {
startTime: startTimeStamp,
endTime: endTimeStamp,
timeRangeArr: [startTimeStamp, endTimeStamp] // 关键：数组格式，直接适配daterange
};
},
// 弹窗关闭回调
handleClose(done) {
this.dialogVisible = false;
done();
},
// 搜索栏按钮点击事件
handleSearchBarBtnClick(btn) {
const { createTime } = btn;
// 解析日期选择器的时间戳数组
if (createTime && Array.isArray(createTime) && createTime.length === 2) {
this.listQuery.startTime = createTime[0];
this.listQuery.endTime = createTime[1];
}
this.getList();
},
// 初始化弹窗
init(data) {
this.dialogVisible = true;
console.log('d', data);
this.listQuery = {
equId: data.equipmentId,
paramId: data.paramId,
plcName: data.plcName,
plcParamNam: data.plcParamNam,
startTime: undefined,
endTime: undefined
};
this.title = (data.equipmentName ? data.equipmentName : '') + (data.paramName ? data.paramName : '') + '趋势图'
// 1. 获取30天时间段的时间戳数组
const { startTime, endTime, timeRangeArr } = this.getLast30DaysTimeRange();
this.listQuery.startTime = startTime
this.listQuery.endTime = endTime
// 2. 给日期选择器赋值
this.$nextTick(() => {
this.searchBarFormConfig[0].defaultSelect = timeRangeArr;
});
// 若图表未初始化，重新初始化（弹窗打开后DOM可能重新渲染）
if (!this.myChart) {
this.initChart();
}
this.getList();
},
// 获取数据
async getList() {
try {
const { data } = await this.$axios({
url: '/monitoring/equipment-monitor/paramMonitorDet',
method: 'post',
data: {
startTime: this.listQuery.startTime,
endTime: this.listQuery.endTime,
...this.listQuery
},
});
let xData = []
let maxData = []
let minData = []
let pData = []
data.paramValue.forEach(ele => {
xData.push(ele.time)
maxData.push(ele.paramMax)
minData.push(ele.paramMin)
pData.push(ele.paramMean)
});
this.updateChart(xData, maxData, minData, pData)
} catch (error) {
console.error('获取数据失败：', error);
}
},
// 统一初始化图表（修复核心：创建ECharts实例 + 绑定resize事件）
initChart() {
// 1. 通过ref获取DOM容器（避免id选择器冲突）
const chartDom = this.$refs.coreLineChart;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
// 2. 销毁已有实例，避免重复创建
if (this.myChart) {
this.myChart.dispose();
}
// 3. 创建ECharts实例
this.myChart = echarts.init(chartDom);
// 4. 初始化空配置，防止图表报错
this.myChart.setOption({
xAxis: { type: 'category', data: [] },
yAxis: { type: 'value' },
series: []
});
// 5. 绑定resize事件（仅绑定一次，缓存处理函数）
this.resizeHandler = () => {
if (this.myChart) {
this.myChart.resize(); // 图表自适应窗口大小
}
};
window.addEventListener('resize', this.resizeHandler);
},
// 更新折线图（全部实现渐变样式）
updateChart(xData, maxData, minData, pData) {
// 容错：若实例未初始化，先初始化
if (!this.myChart) {
this.initChart();
if (!this.myChart) return;
}
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: 30,
bottom: 120,
right: 20,
left: 40
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
padding: [5, 0, 0, 0],
rotate: 60, // 正确配置：文字旋转45度
},
data: xData
}
],
yAxis: {
type: 'value',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
formatter: '{value}'
},
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
axisLine: { show: true, lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } }
},
series: [
// 1. 平均值折线图（渐变样式）
// 2. 最大值折线图（渐变样式）
{
name: '最大值',
type: 'line',
lineStyle: {
color: 'rgba(75, 157, 255, 1)',
width: 2
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]),
borderColor: 'rgba(75, 157, 255, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(130, 204, 255, 0.8)' },
{ offset: 1, color: 'rgba(75, 157, 255, 0.1)' }
])
},
symbol: 'circle',
symbolSize: 6,
data: maxData || []
},
{
name: '平均值',
type: 'line',
lineStyle: {
color: 'rgba(118, 218, 190, 1)',
width: 2
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
]),
borderColor: 'rgba(118, 218, 190, 1)',
borderWidth: 2,
radius: 4
},
// areaStyle: {
// opacity: 0.3,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(174, 239, 224, 0.8)' },
// { offset: 1, color: 'rgba(118, 218, 190, 0.1)' }
// ])
// },
symbol: 'circle',
symbolSize: 6,
data: pData || []
},
// 3. 最小值折线图（渐变样式）
{
name: '最小值',
type: 'line',
lineStyle: {
color: 'rgba(249, 164, 74, 1)',
width: 2
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
]),
borderColor: 'rgba(249, 164, 74, 1)',
borderWidth: 2,
radius: 4
},
areaStyle: {
opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(253, 209, 129, 0.8)' },
{ offset: 1, color: 'rgba(249, 164, 74, 0.1)' }
])
},
symbol: 'circle',
symbolSize: 6,
data: minData || []
}
]
};
// 更新图表配置，清空原有数据
this.myChart.setOption(option, true);
},
cancel() {
this.dialogVisible = false;
}
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

215
src/views/monitoring/equipmentStatusAndParams/dialogForm.vue Normal file
View File

@@ -0,0 +1,215 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-09-11 15:55:13
description: DialogForm for qualityInspectionRecord only
-->
<template>
<div>
<base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
</base-table>
<chart v-if="open" ref="visRef" />
</div>
</template>
<script>
import chart from './chart.vue';
export default {
name: 'DialogForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: { chart },
props: {
dataForm: {
type: Object,
default: () => ({}),
},
eqId: {
type: [String, Number],
default: () => '',
}
},
data() {
return {
open: false,
tableBtn: [{
type: 'chart',
btnName: '趋势图',
}
// this.$auth.hasPermi('base:equipment-alarm-log:delete')
// ? {
// type: 'delete',
// btnName: '删除',
// }
// : undefined,
].filter((v) => v),
tableProps: [
{
prop: 'paramName',
label: '参数名',
},
// {
// prop: 'lineName',
// label: '产线名',
// },
// {
// prop: 'workshopName',
// label: '工段名',
// showOverflowtooltip: true,
// },
{
// width: 200,
prop: 'paramValue',
label: '参数值',
},
{
// width: 200,
prop: 'paramLimit',
label: '参数范围',
},
],
list: [],
queryParams: {
pageNo: 1,
pageSize: 100,
},
};
},
mounted() {
// Promise.all([this.getProductLineList(), this.getInspectionDetList()]).then(
// () => {
// this.formLoading = false;
// }
// );
},
watch: {
// 'innerDataForm.productionLineId': {
// handler: async function (plId) {
// if (plId) await this.getWorksectionList(plId);
// },
// immediate: true,
// },
eqId: {
handler: function (value) {
console.log(value, '11111');
// this.innerDataForm = Object.assign({}, dataForm);
// if (dataForm.productionLineId)
this.getList();
},
immediate: true,
},
},
methods: {
submitForm() {
this.open = false;
},
cancel() {
this.open = false;
// this.reset();
},
handleTableBtnClick({ data, type }) {
if (type === 'chart') {
console.log(data,);
this.open = true
this.$nextTick(() => {
this.$refs.visRef.init(data)
})
}
},
/** 模拟透传 ref */
// validate(cb) {
// return this.$refs.form.validate(cb);
// },
// resetFields(args) {
// return this.$refs.form.resetFields(args);
// },
async getList() {
this.loading = true;
const { data } = await this.$axios({
url: '/monitoring/equipment-monitor/paramMonitor',
method: 'get',
params: {
id: this.eqId
},
});
console.log('data', data);
this.list = data
// this.total = data.total;
},
// handleInspectionDetChange(value) {
// const { id, content } = this.cacheInspectionDetList.find(
// (item) => item.id == value
// );
// this.innerDataForm.inspectionDetId = id;
// this.innerDataForm.inspectionDetContent = content;
// this.$emit('update', this.innerDataForm);
// },
// async handleProductlineChange(id) {
// // await this.getWorksectionList(id);
// this.innerDataForm.sectionId = null;
// this.$emit('update', this.innerDataForm);
// },
// // getCode
// async getCode(url) {
// const response = await this.$axios(url);
// return response.data;
// },
// // 获取产线列表
// async getProductLineList() {
// const response = await this.$axios('/base/production-line/listAll');
// this.productionLineList = response.data.map((item) => ({
// label: item.name,
// value: item.id,
// }));
// },
// // 获取检测内容列表
// async getInspectionDetList() {
// const response = await this.$axios(
// '/base/quality-inspection-det/listAll'
// );
// this.cacheInspectionDetList = response.data;
// this.inspectionDetList = response.data.map((item) => ({
// label: item.content,
// value: item.id,
// }));
// },
// // 获取工段列表
// async getWorksectionList(plId) {
// const response = await this.$axios(
// '/base/workshop-section/listByParentId',
// {
// params: {
// id: plId,
// },
// }
// );
// this.sectionList = response.data.map((item) => ({
// label: item.name,
// value: item.id,
// }));
// },
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

251
src/views/monitoring/equipmentStatusAndParams/index.vue
View File

@@ -1,38 +1,25 @@
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick"
@select-changed="handleSearchBarItemChange" />
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick"
@select-changed="handleSearchBarItemChange" />
<!-- 列表 -->
<base-table
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emitFun="handleEmitFun">
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
label="操作"
:width="120"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
</base-table>
<!-- 列表 -->
<base-table :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-data="list"
@emitFun="handleEmitFun">
<!-- <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> -->
</base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 对话框(添加 / 修改) -->
<!-- <base-dialog
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<base-dialog :dialogTitle="title" :dialogVisible="open" width="50%" @close="cancel" @cancel="cancel"
@confirm="submitForm">
<DialogForm v-if="open" ref="form" v-model="form" :eqId="eqId" />
</base-dialog>
<!-- 对话框(添加 / 修改) -->
<!-- <base-dialog
:dialogTitle="title"
:dialogVisible="open"
width="500px"
@@ -41,7 +28,7 @@
@confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
</base-dialog> -->
</div>
</div>
</template>
<script>
@@ -51,91 +38,87 @@ import { publicFormatter } from '@/utils/dict';
import { getPdList } from '@/api/core/monitoring/auto';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getFactoryPage } from '@/api/core/base/factory';
import DialogForm from './dialogForm.vue';
export default {
name: 'EquipmentStatusAndParams',
name: 'EquipmentStatusAndParams',
components: {
DialogForm
},
mixins: [basicPageMixin],
data() {
return {
searchBarKeys: ['equipmentId', 'productionLineId'],
optionArrUrl: [getFactoryPage, getProductionLinePage],
tableBtn: [
this.$auth.hasPermi('base:equipment-alarm-log:update')
? {
type: 'edit',
btnName: '修改',
}
: undefined,
this.$auth.hasPermi('base:equipment-alarm-log:delete')
? {
type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
return {
eqId:undefined,
// searchBarKeys: ['equipmentId', 'productionLineId'],
optionArrUrl: [ getProductionLinePage],
// tableBtn: [
// this.$auth.hasPermi('base:equipment-alarm-log:update')
// ? {
// type: 'edit',
// btnName: '修改',
// }
// : undefined,
// this.$auth.hasPermi('base:equipment-alarm-log:delete')
// ? {
// type: 'delete',
// btnName: '删除',
// }
// : undefined,
// ].filter((v) => v),
tableProps: [
{
prop: 'factoryName',
label: '工厂',
},
{
prop: 'lineName',
label: '产线名',
},
{
prop: 'workshopName',
label: '工段名',
showOverflowtooltip: true,
},
{
width: 200,
// width: 200,
prop: 'equipmentName',
label: '设备名称',
},
{
width: 150,
// width: 150,
showOverflowtooltip: true,
prop: 'equipmentCode',
label: '设备编码',
},
{ width: 128, prop: 'inQuantity', label: '投入数[片]' },
{ width: 128, prop: 'outQuantity', label: '产出数[片]' },
{
// width: 128,
prop: 'inQuantity', label: '投入数(片)'
},
{
// width: 128,
prop: 'outQuantity', label: '产出数(片)'
},
{
width: 128,
// width: 128,
prop: 'run',
label: '是否运行',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
},
{
width: 128,
// width: 128,
prop: 'status',
label: '状态',
filter: (val) =>
val != null ? ['正常', '计划停机', '故障'][val] : '-',
},
// {
// width: 128,
// prop: 'error',
// label: '是否故障',
// filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
// },
// {
// prop: 'quantityRecordTime',
// label: '生产量记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
// {
// prop: 'statusRecordTime',
// label: '状态记录时间',
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{
width: 128,
prop: 'error',
label: '是否故障',
filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
},
{
prop: 'quantityRecordTime',
label: '生产量记录时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{
prop: 'statusRecordTime',
label: '状态记录时间',
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{
_action: 'params-monitor',
label: '操作',
width: 56,
label: '参数监控',
width: 100,
subcomponent: {
props: ['injectData'],
render: function (h) {
@@ -162,13 +145,13 @@ export default {
},
],
searchBarFormConfig: [
{
type: 'select',
label: '工厂',
selectOptions: [],
param: 'factoryId',
onchange: true,
},
// {
// type: 'select',
// label: '工厂',
// selectOptions: [],
// param: 'factoryId',
// onchange: true,
// },
{
type: 'select',
label: '产线',
@@ -192,7 +175,8 @@ export default {
},
],
// 是否显示弹出层
open: false,
open: false,
title:'',
// 查询参数
queryParams: {
pageNo: 1,
@@ -239,25 +223,26 @@ export default {
if (param == 'productionLineId') {
if (id == '') {
// 清除设备选框里的选项
this.searchBarFormConfig[2].selectOptions = [];
this.searchBarFormConfig[1].selectOptions = [];
return;
}
const list = await this.getEquipmentList(id);
this.searchBarFormConfig[2].selectOptions = list.map((eq) => ({
this.searchBarFormConfig[1].selectOptions = list.map((eq) => ({
name: eq.name,
id: eq.id,
}));
} else if (param == 'factoryId') {
// 清除设备选框里的选项
this.searchBarFormConfig[2].selectOptions = [];
this.queryParams.equipmentId = undefined;
this.queryParams.productionLineId = [];
this.$refs['search-bar'].formInline.equipmentId = undefined;
this.$refs['search-bar'].formInline.productionLineId = undefined;
getPdList(id).then((res) => {
this.searchBarFormConfig[1].selectOptions = res.data || [];
});
}
}
// else if (param == 'factoryId') {
// // 清除设备选框里的选项
// this.searchBarFormConfig[2].selectOptions = [];
// this.queryParams.equipmentId = undefined;
// this.queryParams.productionLineId = [];
// this.$refs['search-bar'].formInline.equipmentId = undefined;
// this.$refs['search-bar'].formInline.productionLineId = undefined;
// getPdList(id).then((res) => {
// this.searchBarFormConfig[1].selectOptions = res.data || [];
// });
// }
},
handleSearchBarBtnClick(btn) {
@@ -281,19 +266,35 @@ export default {
});
this.list = data.list;
this.total = data.total;
},
},
handleShow(value) {
// this.reset();
this.open = true;
this.eqId =value.equipmentId
this.title = value.factoryName + '/' + value.lineName + '/' + value.equipmentName;
},
/** 提交按钮 */
submitForm() {
this.open = false;
},
cancel() {
this.open = false;
// this.reset();
},
handleEmitFun({ action, value }) {
if (action == 'params-monitor') {
const { equipmentId, equipmentName, equipmentCode } = value;
this.$router.push({
name: 'equipmentFullParams',
params: {
equipmentId,
equipmentCode,
equipmentName,
},
});
if (action == 'params-monitor') {
console.log('value', value);
const { equipmentId, equipmentName, factoryName, lineName } = value;
this.handleShow(value)
// this.$router.push({
// name: 'equipmentFullParams',
// params: {
// equipmentId,
// equipmentCode,
// equipmentName,
// },
// });
}
},
},