Teams/shgx_tz_vue-sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(看板管理): 新增轮播看板数据管理功能并优化界面样式

Browse Source 
新增工单表和质量报表API接口
实现按日期生成和清空数据功能
优化轮播看板界面样式和数据可视化效果
添加数据管理页面和操作日志功能
This commit is contained in:
赵正易
2025-10-28 18:11:34 +08:00
parent 68b85ef2b6
commit bbd43f53ef
9 changed files with 2339 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/api/dwd/biDwdProductionQualityReport.js Normal file
View File

@@ -0,0 +1,57 @@
import request from '@/utils/request'
/**
* bi大屏-清洗后数据-质量报表分页查询
* @param {查询条件} data
*/
export function listBiDwdProductionQualityReport(query) {
return request({
url: 'dwd/BiDwdProductionQualityReport/list',
method: 'get',
params: query,
})
}
/**
* 新增bi大屏-清洗后数据-质量报表
* @param data
*/
export function addBiDwdProductionQualityReport(data) {
return request({
url: 'dwd/BiDwdProductionQualityReport',
method: 'post',
data: data,
})
}
/**
* 修改bi大屏-清洗后数据-质量报表
* @param data
*/
export function updateBiDwdProductionQualityReport(data) {
return request({
url: 'dwd/BiDwdProductionQualityReport',
method: 'PUT',
data: data,
})
}
/**
* 获取bi大屏-清洗后数据-质量报表详情
* @param {Id}
*/
export function getBiDwdProductionQualityReport(id) {
return request({
url: 'dwd/BiDwdProductionQualityReport/' + id,
method: 'get'
})
}
/**
* 删除bi大屏-清洗后数据-质量报表
* @param {主键} pid
*/
export function delBiDwdProductionQualityReport(pid) {
return request({
url: 'dwd/BiDwdProductionQualityReport/' + pid,
method: 'delete'
})
}

83
src/api/dwd/biDwdWorkorder.js Normal file
View File

@@ -0,0 +1,83 @@
import request from '@/utils/request'
/**
* bi大屏-清洗后数据-工单表分页查询
* @param {查询条件} data
*/
export function listBiDwdWorkorder(query) {
return request({
url: 'dwd/BiDwdWorkorder/list',
method: 'get',
params: query,
})
}
/**
* 新增bi大屏-清洗后数据-工单表
* @param data
*/
export function addBiDwdWorkorder(data) {
return request({
url: 'dwd/BiDwdWorkorder',
method: 'post',
data: data,
})
}
/**
* 修改bi大屏-清洗后数据-工单表
* @param data
*/
export function updateBiDwdWorkorder(data) {
return request({
url: 'dwd/BiDwdWorkorder',
method: 'PUT',
data: data,
})
}
/**
* 获取bi大屏-清洗后数据-工单表详情
* @param {Id}
*/
export function getBiDwdWorkorder(id) {
return request({
url: 'dwd/BiDwdWorkorder/' + id,
method: 'get'
})
}
/**
* 删除bi大屏-清洗后数据-工单表
* @param {主键} pid
*/
export function delBiDwdWorkorder(pid) {
return request({
url: 'dwd/BiDwdWorkorder/' + pid,
method: 'delete'
})
}
/**
* 根据日期生成数据
* @param data
*/
export function GenerateDataByDateTime(data) {
return request({
url: 'dwd/BiDwdWorkorder/GenerateDataByDateTime',
method: 'post',
data: data,
})
}
/**
* 根据日期删除数据
* @param data
*/
export function DeleteDataByDateTime(data) {
return request({
url: 'dwd/BiDwdWorkorder/DeleteDataByDateTime',
method: 'post',
data: data,
})
}

67
src/api/kanbanManagement/carouselBoard.js
View File

@@ -1,46 +1,61 @@
import request from "@/utils/request";
import request from '@/utils/request'
// 获取质量大屏轮播数据
export function getQualityStatisticsCarouselBoardData(data) {
return request({
url: "/BI/CarouselBoard/getQualityStatisticsCarouselBoardData",
method: "POST",
data: data,
});
return request({
url: '/BI/CarouselBoard/getQualityStatisticsCarouselBoardData',
method: 'POST',
data: data,
})
}
// 获取生产大屏轮播数据
export function getWorkOrderCarouselBoardData(data) {
return request({
url: "/BI/CarouselBoard/getWorkOrderCarouselBoardData",
method: "POST",
data: data,
});
return request({
url: '/BI/CarouselBoard/getWorkOrderCarouselBoardData',
method: 'POST',
data: data,
})
}
// 获取毛坯大屏轮播数据
export function getBlankInventoryCarouselBoardData(data) {
return request({
url: "/BI/CarouselBoard/getBlankInventoryCarouselBoardData",
method: "POST",
data: data,
});
return request({
url: '/BI/CarouselBoard/getBlankInventoryCarouselBoardData',
method: 'POST',
data: data,
})
}
// 获取设备报警大屏轮播数据
export function getEquipmentAlarmCarouselBoardData(data) {
return request({
url: "/BI/CarouselBoard/getEquipmentAlarmCarouselBoardData",
method: "POST",
data: data,
});
return request({
url: '/BI/CarouselBoard/getEquipmentAlarmCarouselBoardData',
method: 'POST',
data: data,
})
}
// 获取设备实时参数信息大屏轮播数据
export function getEquipmentLiveCarouselBoardData(data) {
return request({
url: "/BI/CarouselBoard/getEquipmentLiveCarouselBoardData",
method: "POST",
data: data,
});
return request({
url: '/BI/CarouselBoard/getEquipmentLiveCarouselBoardData',
method: 'POST',
data: data,
})
}
/**
* 按日期生成或清空数据
* @param {Object} params - 请求参数
* @param {string} params.GenerationTime - 日期字符串，格式为 'YYYY-MM-DD'
* @returns {Promise}
*/
export function GenerateDataByDateTime(params) {
console.log('调用 GenerateDataByDateTime 接口，参数：', params)
return request({
url: '/kanbanManagement/carouselBoard/generateDataByDateTime',
method: 'post',
data: params
})
}

46
src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="quality-statistics-card">
<div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">质量统计报表</div>
<dv-title text="质量统计报表" :color="['#00ffff', '#0066ff']" style="margin-bottom: 15px;" />
<div class="middle-data">
<span>报表数量 共 {{ realTotal }} 条</span>
<span style="margin-left: 20px">投入数:{{ totalQuantity }}</span>
@@ -37,6 +37,7 @@
ref="qualityTable"
stripe
highlight-current-row
class="dark-table"
>
<el-table-column prop="workorderId" label="工单号" width="140" sortable></el-table-column>
<el-table-column prop="finishedPartNumber" label="零件号" min-width="120" sortable></el-table-column>
@@ -61,9 +62,13 @@
<script>
import { getQualityStatisticsCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
import * as echarts from 'echarts';
import { DvTitle } from '@jiaminghi/data-view';
export default {
name: 'QualityStatisticsCard',
components: {
DvTitle
},
data() {
return {
loading: false,
@@ -561,14 +566,43 @@ export default {
<style scoped>
.quality-statistics-card {
padding: 10px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 20px;
background: transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* 表格样式优化 */
.el-table {
background: rgba(0, 20, 40, 0.6) !important;
}
::v-deep .el-table__header th {
background: rgba(0, 60, 120, 0.8) !important;
color: #00ffff !important;
border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
font-weight: bold;
}
::v-deep .el-table__body td {
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
::v-deep .el-table__row:hover td {
background-color: rgba(0, 255, 255, 0.1) !important;
}
/* 加载动画样式 */
::v-deep .el-loading-spinner .path {
stroke: #00ffff !important;
}
::v-deep .el-loading-spinner .el-loading-text {
color: #00ffff !important;
}
.middle-data {

70
src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="workorder-online-card">
<div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">生产计划工单</div>
<dv-title text="生产计划工单" :color="['#00ffff', '#0066ff']" style="margin-bottom: 15px;" />
<!-- 今日统计数据区域 -->
<div class="statistics-container">
@@ -40,6 +40,7 @@
ref="workorderTable"
stripe
highlight-current-row
class="dark-table"
>
<el-table-column type="index" width="60"></el-table-column>
<el-table-column prop="clientWorkorder" label="工单号" width="130"></el-table-column>
@@ -64,9 +65,13 @@
<script>
import { getWorkOrderCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
import * as echarts from 'echarts';
import { DvTitle } from '@jiaminghi/data-view';
export default {
name: 'WorkorderOnlineCard',
components: {
DvTitle
},
data() {
return {
loading: false,
@@ -392,9 +397,64 @@ export default {
<style scoped>
.workorder-online-card {
padding: 10px;
background: white;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 20px;
background: transparent;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* 表格样式优化 */
.dark-table {
background: rgba(0, 20, 40, 0.6) !important;
}
::v-deep .el-table__header th {
background: rgba(0, 60, 120, 0.8) !important;
color: #00ffff !important;
border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
font-weight: bold;
}
::v-deep .el-table__body td {
color: #ffffff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
::v-deep .el-table__row:hover td {
background-color: rgba(0, 255, 255, 0.1) !important;
}
/* 标签样式优化 */
::v-deep .el-tag {
background-color: rgba(0, 102, 255, 0.3) !important;
color: #ffffff !important;
border-color: #0066ff !important;
}
::v-deep .el-tag--success {
background-color: rgba(103, 194, 58, 0.3) !important;
border-color: #67c23a !important;
}
::v-deep .el-tag--warning {
background-color: rgba(230, 162, 60, 0.3) !important;
border-color: #e6a23c !important;
}
::v-deep .el-tag--info {
background-color: rgba(90, 143, 242, 0.3) !important;
border-color: #5a8ff2 !important;
}
/* 加载动画样式 */
::v-deep .el-loading-spinner .path {
stroke: #00ffff !important;
}
::v-deep .el-loading-spinner .el-loading-text {
color: #00ffff !important;
}
</style>

70
src/views/kanbanManagement/CarouselBoard/index.vue
View File

@@ -1,43 +1,31 @@
<template>
<div class="carousel-board-container">
<el-carousel
ref="carousel"
:interval="60000"
height="90vh"
arrow="never"
indicator-position="bottom"
autoplay
class="dashboard-carousel"
>
<el-carousel-item>
<QualityStatisticsCard />
</el-carousel-item>
<el-carousel-item>
<WorkorderOnlineCard />
</el-carousel-item>
<el-carousel-item>
<WmBlankInventoryCard />
</el-carousel-item>
<el-carousel-item>
<DeviceMonitoringCard />
</el-carousel-item>
</el-carousel>
</div>
<dv-full-screen-container>
<!-- <dv-decoration-1 :color="['#00ffff', '#0066ff']" />
<dv-decoration-2 :color="['#00ffff', '#0066ff']" /> -->
<div class="carousel-board-container">
<dv-border-box-1 class="dashboard-border">
<el-carousel ref="carousel" :interval="60000" height="99vh" arrow="never" indicator-position="bottom" autoplay
class="dashboard-carousel">
<el-carousel-item>
<QualityStatisticsCard />
</el-carousel-item>
<el-carousel-item>
<WorkorderOnlineCard />
</el-carousel-item>
</el-carousel>
</dv-border-box-1>
</div>
</dv-full-screen-container>
</template>
<script>
import QualityStatisticsCard from './components/QualityStatisticsCard.vue'
import WorkorderOnlineCard from './components/WorkorderOnlineCard.vue'
import WmBlankInventoryCard from './components/WmBlankInventoryCard.vue'
import DeviceMonitoringCard from './components/DeviceMonitoringCard.vue'
export default {
name: 'CarouselBoard',
components: {
QualityStatisticsCard,
WorkorderOnlineCard,
WmBlankInventoryCard,
DeviceMonitoringCard
},
mounted() {
// 可以在这里添加一些初始化逻辑
@@ -56,25 +44,28 @@ export default {
},
play() {
this.$refs.carousel.play()
}
}
},
},
}
</script>
<style scoped>
.carousel-board-container {
width: 100%;
height: 100vh;
padding: 15px;
background-color: #f0f2f5;
height: 100%;
padding: 20px;
background: linear-gradient(135deg, #001529 0%, #002140 100%);
overflow: hidden;
box-sizing: border-box;
}
.dashboard-border {
height: 100%;
}
.dashboard-carousel {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
background: rgba(0, 20, 40, 0.8);
border-radius: 4px;
overflow: hidden;
}
@@ -90,10 +81,11 @@ export default {
height: 12px;
margin: 0 8px;
transition: all 0.3s ease;
background-color: rgba(255, 255, 255, 0.3);
}
.el-carousel__indicator--active {
width: 24px;
background-color: #409EFF;
background-color: #00ffff;
}
</style>
</style>

1138
src/views/kanbanManagement/CarouselBoardManagement/BiDwdProductionQualityReport.vue Normal file
View File

File diff suppressed because it is too large Load Diff

384
src/views/kanbanManagement/CarouselBoardManagement/BiDwdWorkorder.vue Normal file
View File

@@ -0,0 +1,384 @@
<!--
* @Descripttion: (bi大屏-清洗后数据-工单表/bi_dwd_workorder)
* @version: (1.0)
* @Author: (admin)
* @Date: (2025-10-28)
* @LastEditors: (admin)
* @LastEditTime: (2025-10-28)
-->
<template>
<div class="app-container">
<!-- :model属性用于表单验证使用 比如下面的el-form-item 的 prop属性用于对表单值进行验证操作 -->
<el-form :model="queryParams" size="small" label-position="right" inline ref="queryForm" :label-width="labelWidth" v-show="showSearch"
@submit.native.prevent>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 工具区域 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" v-hasPermi="['business:bidwdworkorder:add']" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" :disabled="single" v-hasPermi="['business:bidwdworkorder:edit']" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" :disabled="multiple" v-hasPermi="['business:bidwdworkorder:delete']" plain icon="el-icon-delete" size="mini" @click="handleDelete">删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 数据区域 -->
<el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column prop="id" label="主键" align="center" />
<el-table-column prop="generationTime" label="生成时间" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="workOrder" label="工单号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="partNumber" label="零件号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="blankNumber" label="毛坯号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="colour" label="颜色" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="specification" label="规格" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="vehicleNumber" label="车数" align="center" />
<el-table-column prop="hangNumber" label="挂具摆放数" align="center" />
<el-table-column prop="previousNumber" label="上件数" align="center" />
<el-table-column prop="cylinderNumber" label="双组号缸号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="sort" label="序号" align="center" />
<el-table-column prop="remark1" label="备注1" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="remark2" label="备注2" align="center" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button size="mini" v-hasPermi="['business:bidwdworkorder:edit']" type="success" icon="el-icon-edit" title="编辑"
@click="handleUpdate(scope.row)"></el-button>
<el-button size="mini" v-hasPermi="['business:bidwdworkorder:delete']" type="danger" icon="el-icon-delete" title="删除"
@click="handleDelete(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改bi大屏-清洗后数据-工单表对话框 -->
<el-dialog :title="title" :lock-scroll="false" :visible.sync="open" >
<el-form ref="form" :model="form" :rules="rules" :label-width="formLabelWidth">
<el-row :gutter="20">
<el-col :lg="12" v-if="opertype == 2">
<el-form-item label="主键">{{form.id}}</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="生成时间" prop="generationTime">
<el-date-picker v-model="form.generationTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="工单号" prop="workOrder">
<el-input v-model="form.workOrder" placeholder="请输入工单号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="零件号" prop="partNumber">
<el-input v-model="form.partNumber" placeholder="请输入零件号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="毛坯号" prop="blankNumber">
<el-input v-model="form.blankNumber" placeholder="请输入毛坯号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="颜色" prop="colour">
<el-input v-model="form.colour" placeholder="请输入颜色" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="规格" prop="specification">
<el-input v-model="form.specification" placeholder="请输入规格" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" placeholder="请输入描述" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="车数" prop="vehicleNumber">
<el-input v-model="form.vehicleNumber" placeholder="请输入车数" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="挂具摆放数" prop="hangNumber">
<el-input v-model="form.hangNumber" placeholder="请输入挂具摆放数" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="上件数" prop="previousNumber">
<el-input v-model="form.previousNumber" placeholder="请输入上件数" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="双组号缸号" prop="cylinderNumber">
<el-input v-model="form.cylinderNumber" placeholder="请输入双组号缸号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="序号" prop="sort">
<el-input v-model="form.sort" placeholder="请输入序号" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="备注1" prop="remark1">
<el-input v-model="form.remark1" placeholder="请输入备注1" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item label="备注2" prop="remark2">
<el-input v-model="form.remark2" placeholder="请输入备注2" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listBiDwdWorkorder,
addBiDwdWorkorder,
delBiDwdWorkorder,
updateBiDwdWorkorder,
getBiDwdWorkorder,
GenerateDataByDateTime,
DeleteDataByDateTime,
} from '@/api/dwd/biDwdWorkorder.js';
export default {
name: "bidwdworkorder",
data() {
return {
labelWidth: "100px",
formLabelWidth:"100px",
// 选中id数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 遮罩层
loading: false,
// 显示搜索条件
showSearch: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sort: undefined,
sortType: undefined,
},
// 弹出层标题
title: "",
// 操作类型 1、add 2、edit
opertype: 0,
// 是否显示弹出层
open: false,
// 表单参数
form: {},
columns: [
{ index: 0, key: 'id', label: `主键`, checked: true },
{ index: 1, key: 'generationTime', label: `生成时间`, checked: true },
{ index: 2, key: 'workOrder', label: `工单号`, checked: true },
{ index: 3, key: 'partNumber', label: `零件号`, checked: true },
{ index: 4, key: 'blankNumber', label: `毛坯号`, checked: true },
{ index: 5, key: 'colour', label: `颜色`, checked: true },
{ index: 6, key: 'specification', label: `规格`, checked: true },
{ index: 7, key: 'description', label: `描述`, checked: true },
{ index: 8, key: 'vehicleNumber', label: `车数`, checked: true },
{ index: 9, key: 'hangNumber', label: `挂具摆放数`, checked: false },
{ index: 10, key: 'previousNumber', label: `上件数`, checked: false },
{ index: 11, key: 'cylinderNumber', label: `双组号缸号`, checked: false },
{ index: 12, key: 'sort', label: `序号`, checked: false },
{ index: 13, key: 'remark1', label: `备注1`, checked: false },
{ index: 14, key: 'remark2', label: `备注2`, checked: false },
{ index: 15, key: 'createTime', label: `创建时间`, checked: false },
],
// 数据列表
dataList: [],
// 总记录数
total: 0,
// 提交按钮是否显示
btnSubmitVisible: true,
// 表单校验
rules: {
},
};
},
created() {
// 列表数据查询
this.getList();
var dictParams = [
];
},
methods: {
// 查询数据
getList() {
this.loading = true;
listBiDwdWorkorder(this.queryParams).then(res => {
if (res.code == 200) {
this.dataList = res.data.result;
this.total = res.data.totalNum;
this.loading = false;
}
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 重置数据表单
reset() {
this.form = {
id: undefined,
generationTime: undefined,
workOrder: undefined,
partNumber: undefined,
blankNumber: undefined,
colour: undefined,
specification: undefined,
description: undefined,
vehicleNumber: undefined,
hangNumber: undefined,
previousNumber: undefined,
cylinderNumber: undefined,
sort: undefined,
remark1: undefined,
remark2: undefined,
createTime: undefined,
};
this.resetForm("form");
},
// 重置查询操作
resetQuery() {
this.timeRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length != 1
this.multiple = !selection.length;
},
// 自定义排序
sortChange(column) {
if (column.prop == null || column.order == null) {
this.queryParams.sort = undefined;
this.queryParams.sortType = undefined;
} else {
this.queryParams.sort = column.prop;
this.queryParams.sortType = column.order;
}
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加";
this.opertype = 1;
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.id || this.ids;
this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
.then(function () {
return delBiDwdWorkorder(Ids);
})
.then(() => {
this.handleQuery();
this.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getBiDwdWorkorder(id).then((res) => {
const { code, data } = res;
if (code == 200) {
this.open = true;
this.title = "修改数据";
this.opertype = 2;
this.form = {
...data,
};
}
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
console.log(JSON.stringify(this.form));
if (this.form.id != undefined && this.opertype === 2) {
updateBiDwdWorkorder(this.form)
.then((res) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
})
.catch((err) => {
//TODO 错误逻辑
});
} else {
addBiDwdWorkorder(this.form)
.then((res) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
})
.catch((err) => {
//TODO 错误逻辑
});
}
}
});
},
},
};
</script>

500
src/views/kanbanManagement/CarouselBoardManagement/index.vue Normal file
View File

@@ -0,0 +1,500 @@
<template>
<div class="carousel-board-management">
<!-- 页面标题 -->
<div class="page-header">
<h3>轮播看板管理</h3>
<p>用于管理轮播看板的数据和配置</p>
</div>
<!-- 工单信息管理 -->
<el-card class="management-card">
<div slot="header" class="card-header">
<span><i class="el-icon-tickets"></i> 工单信息管理</span>
</div>
<div class="button-group">
<el-button type="primary" icon="el-icon-plus" @click="handleGenerateWorkorderData">生成数据</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleClearWorkorderData">清空数据</el-button>
<el-button type="success" icon="el-icon-download" @click="handleExportWorkorderData">导出数据</el-button>
<el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleWorkorderFileChange" :show-file-list="false">
<el-button type="info" icon="el-icon-upload">导入数据</el-button>
</el-upload>
<el-button type="warning" icon="el-icon-view" @click="handleViewWorkorderData">查看数据</el-button>
</div>
</el-card>
<!-- 质量统计管理 -->
<el-card class="management-card">
<div slot="header" class="card-header">
<span><i class="el-icon-goods"></i> 质量统计管理</span>
</div>
<div class="button-group">
<el-button type="primary" icon="el-icon-plus" @click="handleGenerateQualityData">生成数据</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleClearQualityData">清空数据</el-button>
<el-button type="success" icon="el-icon-download" @click="handleExportQualityData">导出数据</el-button>
<el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleQualityFileChange" :show-file-list="false">
<el-button type="info" icon="el-icon-upload">导入数据</el-button>
</el-upload>
<el-button type="warning" icon="el-icon-view" @click="handleViewQualityData">查看数据</el-button>
</div>
</el-card>
<!-- 设备监控管理 -->
<el-card class="management-card">
<div slot="header" class="card-header">
<span><i class="el-icon-s-tools"></i> 设备监控管理</span>
</div>
<div class="button-group">
<el-button type="primary" icon="el-icon-plus" @click="handleGenerateDeviceData">生成数据</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleClearDeviceData">清空数据</el-button>
<el-button type="success" icon="el-icon-download" @click="handleExportDeviceData">导出数据</el-button>
<el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleDeviceFileChange" :show-file-list="false">
<el-button type="info" icon="el-icon-upload">导入数据</el-button>
</el-upload>
<el-button type="warning" icon="el-icon-view" @click="handleViewDeviceData">查看数据</el-button>
</div>
</el-card>
<!-- 毛坯库存管理 -->
<el-card class="management-card">
<div slot="header" class="card-header">
<span><i class="el-icon-box"></i> 毛坯库存管理</span>
</div>
<div class="button-group">
<el-button type="primary" icon="el-icon-plus" @click="handleGenerateBlankData">生成数据</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleClearBlankData">清空数据</el-button>
<el-button type="success" icon="el-icon-download" @click="handleExportBlankData">导出数据</el-button>
<el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleBlankFileChange" :show-file-list="false">
<el-button type="info" icon="el-icon-upload">导入数据</el-button>
</el-upload>
<el-button type="warning" icon="el-icon-view" @click="handleViewBlankData">查看数据</el-button>
</div>
</el-card>
<!-- 操作日志 -->
<el-card class="management-card">
<div slot="header" class="card-header">
<span><i class="el-icon-time"></i> 操作日志</span>
</div>
<el-table :data="operationLogs" style="width: 100%">
<el-table-column prop="time" label="操作时间" width="180"></el-table-column>
<el-table-column prop="module" label="操作模块" width="120"></el-table-column>
<el-table-column prop="action" label="操作类型" width="100"></el-table-column>
<el-table-column prop="result" label="操作结果"></el-table-column>
</el-table>
</el-card>
</div>
<!-- 时间选择弹窗 -->
<el-dialog :title="`${currentAction}${currentModuleName}数据 - 选择日期`" :visible.sync="timeDialogVisible" width="400px" :close-on-click-modal="false">
<div style="padding: 20px 0">
<el-form label-position="top">
<el-form-item label="请选择操作日期" :label-width="120">
<el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="timeDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmTimeSelection">{{ currentAction }}</el-button>
</span>
</el-dialog>
</template>
<script>
// 导入接口
import { GenerateDataByDateTime } from '@/api/kanbanManagement/carouselBoard'
export default {
name: 'CarouselBoardManagement',
data() {
return {
// 操作日志列表
operationLogs: [
{
time: '2024-05-01 10:00:00',
module: '工单信息',
action: '生成',
result: '成功生成10条工单数据',
},
{
time: '2024-05-01 09:30:00',
module: '质量统计',
action: '导出',
result: '成功导出质量统计报表',
},
],
// 时间选择弹窗相关
timeDialogVisible: false,
selectedDate: '',
currentAction: '',
currentModule: '',
currentModuleName: '',
}
},
methods: {
// 打开时间选择弹窗
openTimeDialog(action, module, moduleName) {
this.currentAction = action
this.currentModule = module
this.currentModuleName = moduleName
// 默认选择今天
const today = new Date()
const year = today.getFullYear()
const month = String(today.getMonth() + 1).padStart(2, '0')
const day = String(today.getDate()).padStart(2, '0')
this.selectedDate = `${year}-${month}-${day}`
this.timeDialogVisible = true
},
// 确认时间选择并执行操作
confirmTimeSelection() {
if (!this.selectedDate) {
this.$message({ type: 'warning', message: '请选择日期' })
return
}
const params = {
GenerationTime: this.selectedDate,
}
// 显示加载状态
this.$loading({
lock: true,
text: '处理中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
// 调用接口
GenerateDataByDateTime(params)
.then((res) => {
this.$loading().close()
if (res.code === 200) {
this.addLog(this.currentModuleName, this.currentAction, `${this.currentAction}${this.currentModuleName}数据成功（日期：${this.selectedDate}）`)
this.$message({ type: 'success', message: `${this.currentAction}数据成功` })
} else {
this.$message({ type: 'error', message: res.msg || `${this.currentAction}数据失败` })
}
})
.catch((error) => {
this.$loading().close()
this.$message({ type: 'error', message: `${this.currentAction}数据失败：${error.message}` })
})
.finally(() => {
this.timeDialogVisible = false
})
},
// 工单相关操作
handleGenerateWorkorderData() {
this.openTimeDialog('生成', 'workorder', '工单信息')
},
handleClearWorkorderData() {
this.openTimeDialog('清空', 'workorder', '工单信息')
// 这里添加导出数据的逻辑
this.addLog('工单信息', '导出', '成功导出工单数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleWorkorderFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('工单信息', '导入', '开始导入工单数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewWorkorderData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看工单数据' })
},
// 质量相关操作
handleGenerateQualityData() {
this.openTimeDialog('生成', 'quality', '质量统计')
},
handleClearQualityData() {
this.openTimeDialog('清空', 'quality', '质量统计')
},
handleExportQualityData() {
// 这里添加导出数据的逻辑
this.addLog('质量统计', '导出', '成功导出质量统计数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleQualityFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('质量统计', '导入', '开始导入质量统计数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewQualityData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看质量统计数据' })
},
// 设备相关操作
handleGenerateDeviceData() {
this.openTimeDialog('生成', 'device', '设备监控')
},
handleClearDeviceData() {
this.openTimeDialog('清空', 'device', '设备监控')
},
handleExportDeviceData() {
// 这里添加导出数据的逻辑
this.addLog('设备监控', '导出', '成功导出设备监控数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleDeviceFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('设备监控', '导入', '开始导入设备监控数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewDeviceData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看设备监控数据' })
},
// 毛坯相关操作
handleGenerateBlankData() {
this.openTimeDialog('生成', 'blank', '毛坯库存')
},
handleClearBlankData() {
this.openTimeDialog('清空', 'blank', '毛坯库存')
},
handleExportBlankData() {
// 这里添加导出数据的逻辑
this.addLog('毛坯库存', '导出', '成功导出毛坯库存数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleBlankFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('毛坯库存', '导入', '开始导入毛坯库存数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewBlankData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看毛坯库存数据' })
},
},
handleExportWorkorderData() {
// 这里添加导出数据的逻辑
this.addLog('工单信息', '导出', '成功导出工单数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleWorkorderFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('工单信息', '导入', '开始导入工单数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewWorkorderData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看工单数据' })
},
// 质量相关操作
handleGenerateQualityData() {
this.$confirm('确定要生成质量统计数据吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
// 这里添加生成数据的逻辑
this.addLog('质量统计', '生成', '成功生成质量统计数据')
this.$message({ type: 'success', message: '生成数据成功' })
})
.catch(() => {})
},
handleClearQualityData() {
this.$confirm('确定要清空质量统计数据吗？此操作不可恢复！', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
})
.then(() => {
// 这里添加清空数据的逻辑
this.addLog('质量统计', '清空', '成功清空质量统计数据')
this.$message({ type: 'success', message: '清空数据成功' })
})
.catch(() => {})
},
handleExportQualityData() {
// 这里添加导出数据的逻辑
this.addLog('质量统计', '导出', '成功导出质量统计数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleQualityFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('质量统计', '导入', '开始导入质量统计数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewQualityData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看质量统计数据' })
},
// 设备相关操作
handleGenerateDeviceData() {
this.$confirm('确定要生成设备监控数据吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
// 这里添加生成数据的逻辑
this.addLog('设备监控', '生成', '成功生成设备监控数据')
this.$message({ type: 'success', message: '生成数据成功' })
})
.catch(() => {})
},
handleClearDeviceData() {
this.$confirm('确定要清空设备监控数据吗？此操作不可恢复！', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
})
.then(() => {
// 这里添加清空数据的逻辑
this.addLog('设备监控', '清空', '成功清空设备监控数据')
this.$message({ type: 'success', message: '清空数据成功' })
})
.catch(() => {})
},
handleExportDeviceData() {
// 这里添加导出数据的逻辑
this.addLog('设备监控', '导出', '成功导出设备监控数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleDeviceFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('设备监控', '导入', '开始导入设备监控数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewDeviceData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看设备监控数据' })
},
// 毛坯相关操作
handleGenerateBlankData() {
this.$confirm('确定要生成毛坯库存数据吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
// 这里添加生成数据的逻辑
this.addLog('毛坯库存', '生成', '成功生成毛坯库存数据')
this.$message({ type: 'success', message: '生成数据成功' })
})
.catch(() => {})
},
handleClearBlankData() {
this.$confirm('确定要清空毛坯库存数据吗？此操作不可恢复！', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
})
.then(() => {
// 这里添加清空数据的逻辑
this.addLog('毛坯库存', '清空', '成功清空毛坯库存数据')
this.$message({ type: 'success', message: '清空数据成功' })
})
.catch(() => {})
},
handleExportBlankData() {
// 这里添加导出数据的逻辑
this.addLog('毛坯库存', '导出', '成功导出毛坯库存数据')
this.$message({ type: 'success', message: '导出数据成功' })
},
handleBlankFileChange(file) {
// 这里添加导入数据的逻辑
this.addLog('毛坯库存', '导入', '开始导入毛坯库存数据')
this.$message({ type: 'success', message: `已选择文件：${file.name}` })
},
handleViewBlankData() {
// 这里添加查看数据的逻辑，可以跳转到查看页面
this.$message({ type: 'info', message: '查看毛坯库存数据' })
},
// 添加操作日志
addLog(module, action, result) {
const now = new Date()
const timeStr = now
.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
})
.replace(/\//g, '-')
this.operationLogs.unshift({
time: timeStr,
module: module,
action: action,
result: result,
})
// 只保留最近50条日志
if (this.operationLogs.length > 50) {
this.operationLogs.pop()
}
},
}
</script>
<style scoped>
.carousel-board-management {
padding: 20px;
background-color: #f5f7fa;
min-height: 100vh;
}
.page-header {
margin-bottom: 20px;
}
.page-header h3 {
margin: 0 0 10px 0;
color: #303133;
font-size: 20px;
}
.page-header p {
margin: 0;
color: #909399;
font-size: 14px;
}
.management-card {
margin-bottom: 20px;
}
.card-header {
font-weight: bold;
font-size: 16px;
color: #303133;
}
.button-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 10px 0;
}
.upload-demo {
display: inline-block;
}
/* 响应式布局 */
@media (max-width: 768px) {
.button-group {
flex-direction: column;
}
.button-group .el-button {
width: 100%;
}
}
</style>