Compare commits

..

28 Commits

Author SHA1 Message Date
9be57ad750 Merge pull request 'test' (#47) from test into master
Reviewed-on: #47
2023-10-17 08:53:53 +08:00
f7313c5911 Merge pull request 'lb' (#46) from lb into test
Reviewed-on: #46
2023-10-17 08:38:26 +08:00
lb
a7e81ad8fb Merge branch 'test' into lb 2023-10-16 17:04:34 +08:00
lb
32cbf9076f update 更新设备类型上传 2023-10-16 17:03:29 +08:00
9a411cc663 Merge pull request 'dy' (#45) from dy into test
Reviewed-on: #45
2023-10-16 15:50:05 +08:00
helloDy
445a88e540 Merge branch 'test' into dy 2023-10-16 15:47:50 +08:00
helloDy
2b355aaf8f ui 2023-10-16 15:47:31 +08:00
lb
f60a46ed1d update 设备信息上传 2023-10-16 15:36:26 +08:00
2688896660 Merge pull request 'dy' (#44) from dy into test
Reviewed-on: #44
2023-10-13 17:12:02 +08:00
helloDy
4a67e226e1 merge 2023-10-13 17:09:07 +08:00
helloDy
11ee0d6541 Merge branch 'test' into dy 2023-10-13 17:06:35 +08:00
98b3237c9a Merge pull request 'lb' (#43) from lb into test
Reviewed-on: #43
2023-10-13 17:06:02 +08:00
helloDy
46aaa47e07 bug 2023-10-13 17:05:01 +08:00
lb
ca0f62b2eb Merge branch 'test' into lb 2023-10-13 17:04:18 +08:00
lb
5534104e87 update equipment edit 2023-10-13 17:01:49 +08:00
lb
b72fe1bfed update equipment edit 2023-10-13 16:08:31 +08:00
f4493bde1c Merge pull request 'dy' (#42) from dy into test
Reviewed-on: #42
2023-10-12 17:06:04 +08:00
helloDy
d682ecc91c Merge branch 'test' into dy 2023-10-12 17:05:03 +08:00
helloDy
2b76ef7d23 bug 2023-10-12 17:04:03 +08:00
lb
9ec13b35b8 update equipment 2023-10-12 17:03:07 +08:00
lb
7acccd3de0 bugfix zentao 2023-10-12 15:40:05 +08:00
e40f45a79a Merge pull request 'zjl' (#41) from zjl into test
Reviewed-on: #41
2023-10-12 14:43:24 +08:00
77083a84a1 merge test 2023-10-12 14:41:59 +08:00
9f53ea6981 10.12 2023-10-12 14:39:59 +08:00
lb
8f634d012c bugfix zentao 2023-10-12 11:08:51 +08:00
03c573d5b2 Merge pull request 'zjl' (#40) from zjl into test
Reviewed-on: #40
2023-10-11 14:34:26 +08:00
348714edaf merge test 2023-10-11 14:33:37 +08:00
814fe4605a UI样式修改能源&班组 2023-10-11 14:30:18 +08:00
59 changed files with 14157 additions and 1102 deletions

View File

@@ -1,7 +1,7 @@
###
# @Author: Do not edit
# @Date: 2023-08-29 09:40:39
# @LastEditTime: 2023-09-18 10:44:07
# @LastEditTime: 2023-10-16 09:22:52
# @LastEditors: DY
# @Description:
###

View File

@@ -75,7 +75,7 @@
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.8",
"vue-meta": "^2.4.0",
"vue-plugin-hiprint": "^0.0.54-fix",
"vue-plugin-hiprint": "0.0.54-fix",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.4.9",
"vue-video-player": "^5.0.2",

View File

@@ -1,3 +1,10 @@
/*
* @Author: Do not edit
* @Date: 2023-08-28 15:30:53
* @LastEditTime: 2023-10-13 17:08:33
* @LastEditors: DY
* @Description:
*/
import request from '@/utils/request'
// 创建产线目前生产产品表 主要为更新
@@ -35,11 +42,11 @@ export function getLineBindProductLog(id) {
}
// 获得产线目前生产产品表 主要为更新分页
export function getLineBindProductLogPage(query) {
export function getLineBindProductLogPage(data) {
return request({
url: '/base/line-bind-product-log/page',
method: 'get',
params: query
method: 'post',
data: data
})
}

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>状态切换备份 3</title>
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon和插图" transform="translate(-877.000000, -246.000000)">
<g id="状态切换备份-3" transform="translate(885.000000, 254.000000) rotate(-270.000000) translate(-885.000000, -254.000000) translate(877.000000, 246.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
<g id="错误" transform="translate(0.000000, 0.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="6.4293957e-15" width="16" height="16"></rect>
<path d="M8,1 C11.85,1 15,4.15 15,8 C15,11.85 11.85,15 8,15 C4.15,15 1,11.85 1,8 C1,4.15 4.15,1 8,1 Z M8,2.19926499 C4.80249503,2.19926499 2.18635461,4.80959575 2.18635461,8 C2.18635461,11.1904043 4.80249503,13.800735 8,13.800735 C11.197505,13.800735 13.8136454,11.1904043 13.8136454,8 C13.8136454,4.80959575 11.197505,2.19926499 8,2.19926499 Z M9.18342887,4.39602962 C9.42080763,4.39602962 9.61773566,4.56921978 9.65474747,4.7961346 L9.66099805,4.87359881 L9.66052938,9.97276858 L10.1621026,9.47231604 C10.3071657,9.32725295 10.5223305,9.29501672 10.6985498,9.37560733 L10.7713701,9.41705393 L10.837514,9.47231606 C11.0033004,9.63810246 11.0217211,9.89545015 10.8927761,10.0815835 L10.837514,10.1477274 L9.52115984,11.4640816 C9.38457467,11.600698 9.17913638,11.6415719 9.00066062,11.5676398 C8.84450229,11.5029526 8.73591407,11.3615296 8.71120699,11.1977853 L8.70585968,11.1264012 L8.70585968,4.87359881 C8.70585968,4.60984463 8.91967469,4.39602962 9.18342887,4.39602962 Z M6.99933939,4.43236016 C7.15549771,4.49704738 7.26408594,4.63847045 7.28879302,4.80221473 L7.29414032,4.87359881 L7.29414032,11.1264012 C7.29414032,11.2530604 7.24382515,11.374532 7.15426356,11.4640936 C7.06470196,11.5536552 6.94323037,11.6039704 6.81657114,11.6039704 C6.68991191,11.6039704 6.56844032,11.5536552 6.47887872,11.4640936 C6.40722945,11.3924443 6.36069788,11.3003726 6.34495123,11.2015604 L6.33900196,11.1264012 L6.33858601,6.02634681 L5.83789738,6.52768395 C5.69283427,6.67274705 5.47766955,6.70498329 5.30145018,6.62439268 L5.22862992,6.58294608 L5.162486,6.52768394 C4.9966996,6.36189754 4.97827889,6.10454984 5.10722387,5.91841648 L5.162486,5.85227257 L6.47884017,4.53591839 C6.61542534,4.39930202 6.82086362,4.35842813 6.99933939,4.43236016 Z" id="形状结合" fill="#0B58FF"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/tuple.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 944 B

View File

@@ -10,6 +10,8 @@
ref="form"
:model="form"
:label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
@@ -46,23 +48,6 @@
:placeholder="`请选择${col.label}`"
value-format="timestamp"
v-bind="col.bind"></el-date-picker>
<el-upload
class="upload-in-dialog"
v-if="col.upload"
:file-list="uploadedFileList"
:action="col.url"
:on-success="handleUploadSuccess"
v-bind="col.bind">
<el-button
size="small"
type="primary"
:disabled="col.bind?.disabled || false">
点击上传
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件大小不超过2MB' }}
</div>
</el-upload>
<el-switch
v-if="col.switch"
v-model="form[col.prop]"
@@ -74,6 +59,43 @@
:key="col.key"
:is="col.subcomponent"
:inlineStyle="col.style"></component>
<div
class="upload-area"
:class="uploadOpen ? '' : 'height-48'"
ref="uploadArea"
v-if="col.upload">
<span class="close-icon" :class="uploadOpen ? 'open' : ''">
<el-button
type="text"
icon="el-icon-arrow-right"
@click="handleFilesOpen" />
</span>
<!-- :file-list="uploadedFileList" -->
<el-upload
class="upload-in-dialog"
v-if="col.upload"
:action="uploadUrl"
:headers="uploadHeaders"
:show-file-list="false"
icon="el-icon-upload2"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
v-bind="col.bind">
<el-button size="mini" :disabled="col.bind?.disabled || false">
上传文件
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
</div>
</el-upload>
<uploadedFile
class="file"
v-for="file in form[col.prop] || []"
:file="file"
@delete="handleDeleteFile(file)" />
</div>
</el-form-item>
</el-col>
</el-row>
@@ -81,6 +103,9 @@
</template>
<script>
import { getAccessToken } from '@/utils/auth';
import tupleImg from '@/assets/images/tuple.png';
/**
* 找到最长的label
* @param {*} options
@@ -99,6 +124,48 @@ function findMaxLabelWidth(rows) {
return max;
}
const uploadedFile = {
name: 'UploadedFile',
props: ['file'],
data() {
return {};
},
methods: {
handleDelete() {
console.log('emit delete event')
this.$emit('delete', this.file);
},
},
mounted() {},
render: function (h) {
return (
<div
title={this.file.fileName}
style={{
background: `url(${tupleImg}) no-repeat`,
backgroundSize: '14px',
backgroundPosition: '0 55%',
paddingLeft: '20px',
paddingRight: '24px',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
cursor: 'pointer',
display: 'inline-block',
}}>
{this.file.fileName}
<el-button
type="text"
icon="el-icon-close"
style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
class="dialog__upload_component__close"
onClick={this.handleDelete}
/>
</div>
);
},
};
export default {
name: 'DialogForm',
model: {
@@ -106,7 +173,7 @@ export default {
event: 'update',
},
emits: ['update'],
components: {},
components: { uploadedFile },
props: {
rows: {
type: Array,
@@ -119,14 +186,26 @@ export default {
disabled: {
type: Boolean,
default: false,
}
},
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
},
data() {
return {
uploadOpen: false,
form: {},
formLoading: true,
optionListOf: {},
uploadedFileList: [],
dataLoaded: false,
uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headersurl都是固定的
};
},
computed: {
@@ -136,16 +215,6 @@ export default {
return max * 20;
// return max * 20 + 'px';
},
form: {
get() {
// if (this.dataLoaded) return this.dataForm;
// else return {}
return this.dataForm;
},
set(val) {
console.log('set form', val);
},
},
},
watch: {
rows: {
@@ -158,6 +227,13 @@ export default {
deep: true,
immediate: false,
},
dataForm: {
handler(val) {
this.form = JSON.parse(JSON.stringify(val));
},
deep: true,
immediate: true,
},
},
mounted() {
// 处理 options
@@ -273,23 +349,27 @@ export default {
beforeUpload() {},
// 上传前的验证规则可通过 bind 属性传入
handleUploadSuccess(response, file, fileList) {
console.log(
'[dialogForm:handleUploadSuccess]',
response,
file,
fileList,
this.form
);
// 保存原始文件名
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
// 保存完整地址
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
this.form.files.push({
fileName: file.name,
fileUrl: response.data,
fileType: 2,
});
this.$modal.msgSuccess('上传成功');
this.$emit('update', this.form);
},
getFileName(fileUrl) {
return fileUrl.split('/').pop();
},
handleFilesOpen() {
this.uploadOpen = !this.uploadOpen;
},
handleDeleteFile(file) {
this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
this.$emit('update', this.form);
},
},
};
</script>
@@ -299,4 +379,52 @@ export default {
.el-select {
width: 100%;
}
.upload-area {
// background: #ccc;
// display: grid;
// grid-auto-rows: 34px;
// grid-template-columns: repeat(6, minmax(32px, max-content));
// gap: 8px;
// align-items: center;
position: relative;
overflow: hidden;
transition: height 0.3s ease-out;
}
.upload-in-dialog {
// display: inline-block;
margin-right: 24px;
// background: #ccc;
position: relative;
// top: -13px;
float: left;
}
.close-icon {
// background: #ccc;
position: absolute;
top: 0;
right: 12px;
z-index: 100;
transition: transform 0.3s ease-out;
}
.close-icon.open {
transform: rotateZ(90deg);
}
</style>
<style>
.dialog__upload_component__close {
color: #ccc;
}
.dialog__upload_component__close:hover {
/* color: #777; */
color: red;
}
.height-48 {
height: 35px !important;
}
</style>

View File

@@ -151,7 +151,7 @@ export default {
name: '',
plcParamName: '',
unit: '',
collection: '',
collection: 1,
minValue: '',
maxValue: '',
defaultValue: '',
@@ -370,7 +370,7 @@ export default {
name: '',
plcParamName: '',
unit: '',
collection: '',
collection: 1,
minValue: '',
maxValue: '',
defaultValue: '',

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-13 09:02:25
* @LastEditTime: 2023-10-08 15:39:38
* @LastEditTime: 2023-10-16 14:56:58
* @LastEditors: DY
* @Description:
-->

View File

@@ -1,8 +1,12 @@
<template>
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :table-props="tableProps" :table-data="tableData" />
<balance-chart ref="lineChart" />
<div v-if="tableData.length">
<base-table v-loading="dataListLoading" :span-method="mergeColumnHandler" :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"
@@ -89,7 +93,7 @@ export default {
},
{
type: 'button',
btnName: '搜索',
btnName: '查询',
name: 'search',
color: 'primary',
}
@@ -144,11 +148,6 @@ export default {
// this.listQuery.lineId = '1672847052717821953'
// this.listQuery.startTime = '1693497600000';
// this.listQuery.endTime = '1693843200000';
this.tableData.splice(0)
this.xData.splice(0)
this.yData.splice(0)
this.tableProps.splice(0)
this.spanArr.splice(0)
this.urlOptions.getDataListURL(this.listQuery).then(res => {
console.log(res)
let arr = [
@@ -228,11 +227,17 @@ export default {
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) {
if (val.time && val.lineIds) {
this.tableData = []
this.xData = []
this.yData = []
this.tableProps = []
this.spanArr = []
this.timeList = []
this.getData()
} else {
this.$message({
message: '请选择时间',
message: '请选择产线和时间',
type: 'warning'
});
}

View File

@@ -1,8 +1,12 @@
<template>
<div class="app-container">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
<line-chart ref="lineChart" />
<div v-if="tableData.length">
<base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
<SearchBar :formConfigs="[{ label: '产品产量对比图', type: 'title' }]" />
<line-chart ref="lineChart" />
</div>
<div v-else class="no-data-bg"></div>
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
@@ -72,7 +76,7 @@ export default {
{
type: 'datePicker',
label: '时间',
dateType: 'datetime',
dateType: 'month',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
@@ -82,7 +86,7 @@ export default {
},
{
type: 'button',
btnName: '搜索',
btnName: '查询',
name: 'search',
color: 'primary',
}
@@ -101,6 +105,8 @@ export default {
this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list
// this.formConfig[0].defaultSelect = response.data.list[0].id
this.$set(this.formConfig[0], 'defaultSelect', response.data.list[0].id)
});
});
},
@@ -112,11 +118,13 @@ export default {
let arr = [
{
prop: 'lineName',
label: '产线'
label: '产线',
fixed: 'left'
},
{
prop: 'sum',
label: '合计'
label: '合计',
fixed: 'left'
},
{
prop: res.data ? res.data.nameData[0].name : undefined,
@@ -220,7 +228,6 @@ export default {
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) {
case 'search':
this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined

View File

@@ -0,0 +1,412 @@
<!--
filename: AssetsUpload.vue
author: liubin
date: 2023-10-12 16:40:14
description: 上传资料/图片 组件
-->
<template>
<div class="assets-upload">
<section class="operations">
<el-button type="text" class="expand-btn" @click="expand = !expand">
<i class="el-icon-folder-opened" v-if="expand"></i>
<i class="el-icon-folder" v-else></i>
展开
</el-button>
<!-- <div class="preview-btn">
<i class="el-icon-view"></i>
预览
</div> -->
</section>
<section class="file-area">
<el-upload
class="equipment-upload"
:disabled="disabled"
drag
:action="uploadUrl"
:headers="headers"
multiple
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleSuccess">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<span>将文件拖到此处或</span>
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
{{
isPicMode ? '仅支持上传 .jpg .png 格式文件, 且' : ''
}}文件大小不超过2MB
</div>
</el-upload>
<!-- <div
class="file-list__item"
v-for="n in 9"
:key="n"
:style="{
display: n > 4 && !expand ? 'none' : 'block',
}"
:data-name="n"
:class="{ 'default-icon': !isPicMode }">
<i class="el-icon-delete"></i>
</div> -->
<div
class="file-list__item"
v-for="(file, index) in files"
:key="file.fileName"
:style="{
display: index > 3 && !expand ? 'none' : 'block',
background: isPicMode
? `url(${file.fileUrl}) no-repeat`
: `url(${defaultBg}) no-repeat`,
backgroundSize: isPicMode ? '100% 100%' : '64px',
backgroundPosition: isPicMode ? '0% 0%' : 'center',
}"
:data-name="file.fileName">
<el-button
v-if="!disabled"
type="text"
class="el-icon-delete"
style="padding: 0"
@click="(e) => handleDelete(file)" />
</div>
</section>
</div>
</template>
<script>
import { getAccessToken } from '@/utils/auth';
import defaultBg from '../../../../../assets/images/default-file-icon.png';
function checkSize(file, message) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('上传文件大小不能超过 2MB!');
}
return isLt2M;
}
function checkPic(file, message) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isPic = isJPG || isPNG;
if (!isPic) {
message.error('上传图片只能是 JPG/PNG 格式!');
}
return isPic;
}
export default {
name: 'AssetsUpload',
components: {},
model: {
prop: 'dataSource',
event: 'update',
},
props: {
type: {
type: String,
default: 'image',
},
dataSource: {
type: Array,
default: () => [],
},
equipmentId: {
type: String,
default: '',
},
isPicMode: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
emits: ['update-filelist'],
data() {
return {
defaultBg,
expand: false,
headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
fileList: [],
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload',
files: [
// 服务器返回的结构
// {
// fileName: 'sf.docs',
// fileType: 'asset',
// fileUrl:
// 'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
// },
// {
// fileName: 'sddf.docs',
// fileType: 'asset',
// fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
// },
// {
// fileName: 'jjj.docs',
// fileType: 'asset',
// fileUrl:
// 'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
// },
// {
// fileName: 'asdfasdf.docs',
// fileType: 'asset',
// fileUrl:
// 'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
// },
// {
// fileName: 'asdkj.docs',
// fileType: 'asset',
// fileUrl:
// 'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
// },
// {
// fileName: 'lkasjdf.docs',
// fileType: 'asset',
// fileUrl:
// 'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
// },
// {
// fileName: 'asdf.docs',
// fileType: 'asset',
// fileUrl:
// 'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
// },
// {
// fileName: 'afdffff.docs',
// fileType: 'asset',
// fileUrl:
// 'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
// },
],
updateTimer: null,
};
},
watch: {
dataSource: {
handler(val) {
this.files = JSON.parse(JSON.stringify(val));
},
immediate: true,
deep: true,
},
},
mounted() {},
methods: {
// handle success, per file!
handleSuccess(response, file, fileList) {
this.$notify({
title: '成功',
message: '上传成功! 点击确认保存上传结果',
type: 'success',
});
if (
response == null ||
!('data' in response) ||
response.data == null ||
response.data.trim() == ''
) {
this.$message.error('上传出错了!');
return;
}
this.files.push({
fileName: file.name,
fileUrl: response.data,
fileType: this.isPicMode ? 1 : 2,
});
// debugger;
// 延时更新
if (this.updateTimer) {
clearTimeout(this.updateTimer);
}
this.updateTimer = setTimeout(() => {
console.log('[AssetsUpload] 更新上传列表');
this.emitFilelist();
clearTimeout(this.updateTimer);
this.updateTimer = null;
}, 500);
},
emitFilelist() {
this.$emit('update', this.files);
},
handleRemove(file, fileList) {
debugger;
},
handleDelete(file) {
// fileName fileType 都可能一样,但 fileUrl 一定不一样
this.files = this.files.filter((item) => item.fileUrl != file.fileUrl);
this.$notify({
title: '成功',
message: '删除成功! 需点击确认保存删除结果',
type: 'success',
});
this.emitFilelist();
},
beforeUpload(file) {
if (this.isPicMode) {
return checkPic(file, this.$message) && checkSize(file, this.$message);
}
return checkSize(file, this.$message);
},
handleUpload() {
switch (this.type) {
case 'image':
break;
case 'asset':
break;
}
},
updateFileList(appendFilelist) {
// Array
this.$emit('update-filelist', this.appendFilelist);
},
},
};
</script>
<style scoped lang="scss">
.assets-upload {
position: relative;
}
.operations {
position: absolute;
top: -36px;
right: 0;
display: flex;
align-items: center;
}
.expand-btn,
.preview-btn {
font-size: 14px;
line-height: 1.2;
display: inline-block;
padding-left: 20px;
cursor: pointer;
z-index: 1000;
}
.expand-btn {
margin-right: 12px;
}
.preview-btn {
color: #ccc;
}
.expand-btn,
.preview-btn:hover,
.preview-btn.active {
// color: #0042d0;
color: #0b58ff;
}
:deep(.equipment-upload) {
background: #ccc4;
.el-upload-dragger {
width: 188px;
height: 128px;
}
.el-icon-upload {
margin: 12px 0;
font-size: 48px;
}
.el-upload__text {
font-size: 12px;
line-height: 2px;
display: flex;
flex-direction: column;
em {
margin-top: 12px;
}
}
.el-upload__tip {
font-size: 12px;
line-height: 1.5;
color: #d1d1d1;
margin: 0 0 12px;
transform: translateY(-12px);
user-select: none;
}
}
.file-list {
padding: 12px;
border: 1px solid #ccc;
}
// custom
.file-area {
display: grid;
grid-template-columns: repeat(5, 188px);
grid-auto-rows: 128px;
gap: 24px 18px;
place-content: center;
}
.file-list__item {
background-color: #fff;
border: 1px dashed #d9d9d9;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
cursor: pointer;
position: relative;
// overflow: hidden;
&:hover {
.el-icon-delete {
display: block;
}
}
.el-icon-delete {
color: #ccc;
position: absolute;
top: 8px;
right: 8px;
display: none;
&:hover {
color: rgb(210, 41, 41);
}
}
}
.file-list__item:hover {
border-color: #0b58ff;
}
.file-list__item::after {
content: attr(data-name);
position: absolute;
left: 0;
bottom: -26px;
font-size: 14px;
line-height: 2;
color: #616161;
}
.default-icon {
background: url(../../../../../assets/images/default-file-icon.png) no-repeat;
background-position: center;
background-size: 64px;
}
</style>

View File

@@ -0,0 +1,313 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
description: 弹窗的表单组件
-->
<template>
<el-form
ref="form"
:model="form"
:label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
<el-input
v-if="col.input"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-input
v-if="col.textarea"
type="textarea"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-select
v-if="col.select"
v-model="form[col.prop]"
:placeholder="`请选择${col.label}`"
@change="$emit('update', form)"
v-bind="col.bind">
<el-option
v-for="opt in optionListOf[col.prop]"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
<el-date-picker
v-if="col.datetime"
v-model="form[col.prop]"
type="datetime"
:placeholder="`请选择${col.label}`"
value-format="timestamp"
v-bind="col.bind"></el-date-picker>
<el-upload
class="upload-in-dialog"
v-if="col.upload"
:file-list="uploadedFileList"
:action="col.url"
:on-success="handleUploadSuccess"
v-bind="col.bind">
<el-button
size="small"
type="primary"
:disabled="col.bind?.disabled || false">
点击上传
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件大小不超过2MB' }}
</div>
</el-upload>
<el-switch
v-if="col.switch"
v-model="form[col.prop]"
active-color="#0b58ff"
inactive-color="#e1e1e1"
v-bind="col.bind"></el-switch>
<component
v-if="col.subcomponent"
:key="col.key"
:is="col.subcomponent"
v-bind="col.bind"
:inlineStyle="col.style"></component>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
/**
* 找到最长的label
* @param {*} options
*/
function findMaxLabelWidth(rows) {
let max = 0;
rows.forEach((row) => {
row.forEach((opt) => {
// debugger;
if (!opt.label) return 0;
if (opt.label.length > max) {
max = opt.label.length;
}
});
});
return max;
}
export default {
name: 'DialogForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: {},
props: {
rows: {
type: Array,
default: () => [],
},
dataForm: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
},
data() {
return {
formLoading: true,
optionListOf: {},
uploadedFileList: [],
dataLoaded: false,
};
},
computed: {
labelWidth() {
let max = findMaxLabelWidth(this.rows);
// 每个汉字占20px
return max * 20;
// return max * 20 + 'px';
},
form: {
get() {
// if (this.dataLoaded) return this.dataForm;
// else return {}
return this.dataForm;
},
set(val) {
console.log('set form', val);
},
},
},
watch: {
rows: {
handler() {
console.log('watch triggered!');
this.$nextTick(() => {
this.handleOptions('watch');
});
},
deep: true,
immediate: false,
},
},
mounted() {
// 处理 options
this.handleOptions();
},
methods: {
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);
},
resetFields(args) {
return this.$refs.form.resetFields(args);
},
// getCode
async getCode(url) {
const response = await this.$axios(url);
return response.data;
},
async handleOptions(trigger = 'monuted') {
console.log('[dialogForm:handleOptions]');
const promiseList = [];
this.rows.forEach((cols) => {
cols.forEach((opt) => {
if (opt.value && !this.form[opt.prop]) {
// 默认值
this.form[opt.prop] = opt.value;
}
if (opt.options) {
this.$set(this.optionListOf, opt.prop, opt.options);
} else if (opt.url) {
// 如果有 depends则暂时先不获取注册一个watcher
if (opt.depends) {
console.log('[handleOptions] setting watch');
this.$watch(
() => this.form[opt.depends],
(id) => {
console.log('<', opt.depends, '>', 'changed', id);
if (id == null) return;
// 清空原有选项
this.form[opt.prop] = null;
// 获取新的选项
this.$axios({
url: `${opt.url}?id=${id}`,
}).then((res) => {
this.$set(
this.optionListOf,
opt.prop,
res.data.map((item) => ({
label: item[opt.labelKey ?? 'name'],
value: item[opt.valueKey ?? 'id'],
}))
);
});
},
{
immediate: true,
}
);
return;
}
// 如果是下拉框,或者新增模式下的输入框,才去请求
if (opt.select || (opt.input && !this.form?.id)) {
promiseList.push(async () => {
const response = await this.$axios(opt.url, {
method: opt.method ?? 'get',
});
console.log('[dialogForm:handleOptions:response]', response);
if (opt.select) {
// 处理下拉框选项
const list =
'list' in response.data
? response.data.list
: response.data;
this.$set(
this.optionListOf,
opt.prop,
list.map((item) => ({
label: item[opt.labelKey ?? 'name'],
value: item[opt.valueKey ?? 'id'],
}))
);
} else if (opt.input) {
console.log('setting code: ', response.data);
// 处理输入框数据
this.form[opt.prop] = response.data;
}
});
}
}
});
});
console.log('[dialogForm:handleOptions] done!');
// 如果是 watch 触发的,不需要执行进一步的请求
if (trigger == 'watch') {
this.formLoading = false;
return;
}
try {
await Promise.all(promiseList.map((fn) => fn()));
this.formLoading = false;
this.dataLoaded = true;
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
} catch (error) {
console.log('[dialogForm:handleOptions:error]', error);
this.formLoading = false;
}
if (!promiseList.length) this.formLoading = false;
},
// 上传成功的特殊处理
beforeUpload() {},
// 上传前的验证规则可通过 bind 属性传入
handleUploadSuccess(response, file, fileList) {
console.log(
'[dialogForm:handleUploadSuccess]',
response,
file,
fileList,
this.form
);
// 保存原始文件名
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
// 保存完整地址
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
this.$modal.msgSuccess('上传成功');
},
getFileName(fileUrl) {
return fileUrl.split('/').pop();
},
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

View File

@@ -29,23 +29,28 @@
<section v-for="(section, index) in sections" :key="section.key">
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
<div class="form-part" v-if="section.key == 'base'">
<div
class="form-part"
v-if="section.key == 'base'"
style="margin-bottom: 32px">
<el-skeleton v-if="!showForm" animated />
<DialogForm
<EquipmentInfoForm
key="drawer-dialog-form"
v-if="showForm"
ref="form"
:dataForm="form"
:rows="formRows" />
:disabled="mode.includes('detail')"
:sync-filelist="syncFileListFlag"
v-model="form" />
</div>
<div v-if="section.key == 'attrs'" style="margin-top: 12px">
<base-table
v-loading="attrListLoading"
:table-props="section.props"
:page="section.pageNo || 1"
:limit="section.pageSize || 10"
:page="attrQuery?.params.pageNo || 1"
:limit="attrQuery?.params.pageSize || 10"
:table-data="list"
:add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr"
@emitFun="handleEmitFun">
<method-btn
v-if="section.tableBtn"
@@ -54,27 +59,31 @@
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" />
</base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="attrQuery.params.pageNo"
:limit.sync="attrQuery.params.pageSize"
@pagination="getAttrList" />
</div>
</section>
</div>
<div class="drawer-body__footer">
<el-button style="margin-right: 10px" @click="handleCancel">
返回
</el-button>
<el-button style="" @click="handleCancel">取消</el-button>
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button>
<span v-else>
<el-button type="primary" @click="handleSave">保存</el-button>
<!-- sections的第二项必须是 属性列表 -->
<el-button
<el-button v-else type="primary" @click="handleConfirm">确定</el-button>
<!-- sections的第二项必须是 属性列表 -->
<!-- <el-button
v-if="sections[1].allowAdd"
type="primary"
@click="handleAddAttr">
添加属性
</el-button>
</span>
</el-button> -->
</div>
</div>
@@ -99,11 +108,13 @@
</template>
<script>
import DialogForm from '@/components/DialogForm';
import DialogForm from './DialogForm';
import EquipmentInfoForm from './EquipmentInfoForm.vue';
const SmallTitle = {
name: 'SmallTitle',
props: ['size'],
components: {},
data() {
return {};
},
@@ -127,12 +138,13 @@ const SmallTitle = {
};
export default {
components: { SmallTitle, DialogForm },
components: { SmallTitle, DialogForm, EquipmentInfoForm },
props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
data() {
return {
visible: false,
showForm: false,
btnLoading: false,
total: 0,
form: {},
list: [],
@@ -161,10 +173,16 @@ export default {
},
],
],
attrQuery: null, // 属性列表的请求
attrQuery: {
params: {
pageNo: 1,
pageSize: 10,
},
}, // 属性列表的请求
infoQuery: null, // 基本信息的请求
attrFormSubmitting: false,
attrListLoading: false,
syncFileListFlag: null,
};
},
computed: {
@@ -175,15 +193,19 @@ export default {
// 重置图片的位置
return {
...col,
bind: {
...col.bind,
},
style: {
left: 0,
right: 'unset'
}
}
right: 'unset',
},
};
}
return {
...col,
bind: {
...col.bind,
// 详情 模式下,禁用各种输入
disabled: this.mode == 'detail',
},
@@ -208,9 +230,52 @@ export default {
this.$axios(query).then(({ data }) => {
if (section.key == 'base') {
this.form = data;
// this.form = {
// code: 'gj',
// name: '下片机',
// enName: 'unload',
// abbr: '',
// equipmentTypeId: 21084,
// remark: '备注',
// id: '1712367395052384257',
// createTime: 1697095176000,
// enterTime: 0,
// productionTime: 0,
// files: [
// {
// fileName: '测试.xlsx',
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0108%2F0f0c6f30j00r5cle9000sc000hs00gtc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
// fileType: 1
// },
// {
// fileName: '测试2.xlsx',
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0415%2F2cd23619j00racb96000kc000hs00hsc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
// fileType: 1
// },
// {
// fileName: '测试3.xlsx',
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1fea91a0-d088-409e-b145-e0e61254b28b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=2e0fe7d1de7f54adff3007efe133d67c',
// fileType: 1
// },
// {
// fileName: '测试4.xlsx',
// fileUrl: 'https://pics5.baidu.com/feed/b7003af33a87e950cdfb4b4546eed044faf2b40d.jpeg?token=1d7484cfe4b014dd201f8c8725cab945',
// fileType: 2
// },
// {
// fileName: '测试5.xlsx',
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe3500876-9c46-4b70-8d37-4799520cdd13%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=4abc1df930e62730e5361a7d3765e0f2',
// fileType: 2
// },
// ],
// tvalue: 0,
// processingTime: 0,
// manufacturer: '',
// spec: '',
// description: '描述',
// };
this.showForm = true;
this.infoQuery = query;
console.log('setting form: ', this.form, data);
} else if (section.key == 'attrs') {
this.attrQuery = query;
this.list = data.list;
@@ -231,6 +296,24 @@ export default {
break;
}
},
async handleConfirm() {
this.btnLoading = true;
this.syncFileListFlag = Math.random();
this.$nextTick(async () => {
const { code, data } = await this.$axios({
url: this.sections[0].urlUpdate,
method: 'put',
data: this.form,
});
if (code == 0) {
this.$modal.msgSuccess('更新成功');
}
this.btnLoading = false;
this.handleCancel();
});
},
handleEmitFun(val) {
console.log('handleEmitFun', val);
@@ -273,7 +356,7 @@ export default {
// 开启编辑
toggleEdit() {
this.mode = 'edit';
this.$emit('update-mode', 'edit');
},
// 新增属性
@@ -331,33 +414,44 @@ export default {
},
// 提交属性表
async submitAttrForm() {
this.$refs['attrForm'].validate((valid) => {
submitAttrForm() {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
});
console.log('this.attrform', this.attrForm);
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
try {
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit
? this.sections[1].urlUpdate
: this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
} catch (err) {
this.$message({
message: err,
type: 'error',
duration: 1500,
});
this.attrFormSubmitting = false;
}
});
},
closeAttrForm() {

View File

@@ -0,0 +1,337 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
description: 弹窗的表单组件
-->
<template>
<el-form
class="equipment-info-form"
ref="form"
:model="form"
label-width="200px"
label-position="top"
v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item
label="设备名称"
prop="name"
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
<el-input
v-model="form.name"
:disabled="disabled"
placeholder="请输入设备名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备编码" prop="code" :rules="[]">
<el-input
v-model="form.code"
:disabled="disabled"
placeholder="请输入设备编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="英文名称" prop="enName" :rules="[]">
<el-input
v-model="form.enName"
:disabled="disabled"
placeholder="请输入英文名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="缩写" prop="abbr" :rules="[]">
<el-input
v-model="form.abbr"
:disabled="disabled"
placeholder="请输入名称缩写"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备类型" prop="equipmentTypeId" :rules="[]">
<el-select
v-model="form.equipmentTypeId"
:disabled="disabled"
filterable
placeholder="请选择设备类型">
<el-option
v-for="eqType in eqTypeList"
:key="eqType.id"
:label="eqType.name"
:value="eqType.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注" prop="remark" :rules="[]">
<el-input
v-model="form.remark"
:disabled="disabled"
placeholder="请输入备注"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="生产日期" prop="productionTime" :rules="[]">
<el-date-picker
v-model="form.enterTime"
:disabled="disabled"
type="datetime"
placeholder="请选择生产日期"
value-format="timestamp"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="进场日期" prop="enterTime" :rules="[]">
<el-date-picker
v-model="form.enterTime"
:disabled="disabled"
type="datetime"
placeholder="请选择进场日期"
value-format="timestamp"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="设备TT值"
prop="tvalue"
:rules="[
{ required: true, message: '不能为空', trigger: 'blur' },
{
type: 'number',
message: '请输入正确的数字值',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="form.tvalue"
:disabled="disabled"
placeholder="请输入设备TT值"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item
label="产品加工时间(s)"
prop="processingTime"
:rules="[
{ required: true, message: '不能为空', trigger: 'blur' },
{
type: 'number',
message: '请输入正确的数字值',
trigger: 'blur',
transform: (val) => Number(val),
},
]">
<el-input
v-model="form.processingTime"
:disabled="disabled"
placeholder="请输入产品加工时间"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="制造商" prop="manufacturer" :rules="[]">
<el-input
v-model="form.manufacturer"
:disabled="disabled"
placeholder="请输入制造商"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设备规格" prop="spec" :rules="[]">
<el-input
v-model="form.spec"
:disabled="disabled"
placeholder="请输入设备规格"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 功能描述 -->
<el-col>
<el-form-item label="功能描述" prop="description" :rules="[]">
<el-input
type="textarea"
:disabled="disabled"
v-model="form.description"
placeholder="请填写功能描述"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 上传资料 -->
<el-col>
<el-form-item label="上传资料" prop="assets" :rules="[]">
<AssetsUpload v-model="form.assets" :disabled="disabled" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 上传图片 -->
<el-col>
<el-form-item label="上传图片" prop="pics" :rules="[]">
<AssetsUpload
:is-pic-mode="true"
v-model="form.pics"
:disabled="disabled" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
import AssetsUpload from './AssetsUpload.vue';
export default {
name: 'EquipmentInfoForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: { AssetsUpload },
props: {
dataForm: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
syncFilelist: {
type: Number,
default: null,
required: false,
},
},
data() {
return {
formLoading: false,
form: {
name: '',
code: '',
enName: '',
abbr: '',
equipmentTypeId: '',
remark: '',
productionTime: '',
enterTime: '',
tvalue: '',
processingTime: '',
manufacturer: '',
spec: '',
description: '',
assets: [],
pics: [],
},
eqTypeList: [],
dataLoaded: false,
};
},
watch: {
dataForm: {
handler(val) {
// debugger;
this.form = JSON.parse(JSON.stringify(val));
this.form.assets =
this.form.files?.filter((item) => item.fileType == '2') || [];
this.form.pics =
this.form.files?.filter((item) => item.fileType == '1') || [];
delete this.form.files;
},
immediate: true,
deep: true,
},
syncFilelist: {
handler(val) {
if (val != null) {
this.updateForm();
}
},
immediate: true,
},
},
mounted() {
this.getEqTypeList();
},
methods: {
updateForm() {
console.log('update form ==> ');
this.form.files = [...this.form.assets, ...this.form.pics];
delete this.form.assets;
delete this.form.pics;
this.$emit('update', this.form);
},
async getEqTypeList() {
this.formLoading = true;
const { code, data } = await this.$axios(
'/base/equipment-type/page?pageNo=1&pageSize=100'
);
// debugger;
if (code == 0) {
this.eqTypeList = data.list;
}
this.formLoading = false;
},
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);
},
resetFields(args) {
return this.$refs.form.resetFields(args);
},
// getCode
async getCode(url) {
const response = await this.$axios(url);
return response.data;
},
// 上传成功的特殊处理
beforeUpload() {},
// 上传前的验证规则可通过 bind 属性传入
handleUploadSuccess(response, file, fileList) {
console.log(
'[dialogForm:handleUploadSuccess]',
response,
file,
fileList,
this.form
);
// 保存原始文件名
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
// 保存完整地址
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
this.$modal.msgSuccess('上传成功');
},
getFileName(fileUrl) {
return fileUrl.split('/').pop();
},
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

View File

@@ -36,13 +36,16 @@
:dialogVisible="open"
@close="cancel"
@cancel="cancel"
width="60%"
@confirm="submitForm">
<DialogForm
v-if="open"
key="index-dialog-form"
ref="form"
label-position="top"
size="small"
:dataForm="form"
:rows="rows" />
:rows="computedRows" />
</base-dialog>
<!-- 设备 详情 - 编辑 -->
@@ -50,12 +53,13 @@
v-if="editVisible"
ref="drawer"
:mode="editMode"
@update-mode="editMode = $event"
:data-id="form.id"
:sections="[
{
name: '基本信息',
key: 'base',
rows: rows,
rows: computedRows,
url: '/base/equipment/get',
urlUpdate: '/base/equipment/update',
urlCreate: '/base/equipment/create',
@@ -93,8 +97,8 @@
},
]"
@refreshDataList="getList"
@cancel="editVisible = false"
@destroy="editVisible = false" />
@cancel="cancelEdit"
@destroy="cancelEdit" />
</div>
</template>
@@ -115,6 +119,7 @@ import {
exportEquipmentExcel,
} from '@/api/base/equipment';
import Editor from '@/components/Editor';
import AssetsUpload from './components/AssetsUpload.vue';
export default {
name: 'Equipment',
@@ -155,7 +160,7 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备名称' },
{ width: 256, prop: 'code', label: '检测编码' },
{ width: 256, prop: 'code', label: '设备编码' },
{ prop: 'equipmentType', label: '设备类型' },
{ prop: 'enName', label: '英文名称' },
{ prop: 'abbr', label: '缩写' },
@@ -239,8 +244,6 @@ export default {
prop: 'code',
url: '/base/equipment/getCode',
},
],
[
{
input: true,
label: '英文名称',
@@ -250,6 +253,8 @@ export default {
// disabled: true, // some condition, like detail mode...
// }
},
],
[
{
input: true,
label: '缩写',
@@ -259,13 +264,15 @@ export default {
// disabled: true, // some condition, like detail mode...
// }
},
],
[
{
select: true,
label: '设备类型',
prop: 'equipmentTypeId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
bind: {
filterable: true,
},
},
// {
// select: true,
@@ -286,8 +293,6 @@ export default {
label: '进厂日期',
prop: 'enterTime',
},
],
[
{
input: true,
prop: 'tvalue',
@@ -302,11 +307,14 @@ export default {
},
],
},
],
[
{
input: true,
label: '产品加工时间',
label: '产品加工时间s',
prop: 'processingTime',
rules: [
{ required: true, message: '不能为空', trigger: 'blur' },
{
type: 'number',
message: '请输入正确的数字值',
@@ -315,8 +323,7 @@ export default {
},
],
},
],
[
{
input: true,
label: '制造商',
@@ -337,40 +344,79 @@ export default {
prop: 'description',
},
],
[
{
upload: true,
label: '上传资料',
prop: 'uploadFiles',
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
bind: {
headers: { Authorization: 'Bearer ' + getAccessToken() },
'show-file-list': false,
},
},
],
[
{
diy: true,
key: 'eq-assets',
label: '设备资料',
prop: 'fileNames',
subcomponent: EquipmentAssets,
},
],
[
{
diy: true,
key: 'eq-pics',
label: '设备图片',
prop: 'fileUrls',
subcomponent: EquipmentPics,
pictures: async () => {
// some async request
return [];
},
},
],
// [
// {
// assetUpload: true,
// label: '上传资料',
// fieldName: 'assets',
// subcomponent: AssetsUpload
// },
// ],
// [
// {
// assetUpload: true,
// label: '上传图片',
// fieldName: 'images',
// subcomponent: AssetsUpload
// },
// ],
// [
// {
// upload: true,
// label: '上传资料',
// prop: 'uploadFiles',
// url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
// uploadFnName: 'assetsUpload', // 上传方法名
// bind: {
// headers: { Authorization: 'Bearer ' + getAccessToken() },
// 'show-file-list': false,
// },
// },
// {
// diy: true,
// key: 'eq-assets',
// label: '设备资料',
// prop: 'fileNames',
// subcomponent: EquipmentAssets,
// },
// ],
// [
// {
// upload: true,
// label: '上传图片',
// prop: 'uploadImages',
// url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
// uploadFnName: 'imagesUpload', // 上传方法名
// bind: {
// headers: { Authorization: 'Bearer ' + getAccessToken() },
// 'show-file-list': false,
// },
// },
// {
// diy: true,
// key: 'eq-pics',
// label: '设备图片',
// prop: 'fileUrls',
// subcomponent: EquipmentPics,
// pictures: async () => {
// // some async request
// return [];
// },
// },
// ],
// [
// {
// diy: true,
// key: 'eq-pics',
// label: '设备图片',
// prop: 'fileUrls',
// subcomponent: EquipmentPics,
// pictures: async () => {
// // some async request
// return [];
// },
// },
// ],
],
editVisible: false,
editMode: 'edit', // 'edit', 'detail'
@@ -399,11 +445,49 @@ export default {
form: {
id: null,
},
showUploadComponents: false, // 是否显示上传组件
};
},
created() {
this.getList();
},
computed: {
computedRows() {
return this.showUploadComponents
? [
...this.rows,
[
{
assetUpload: true,
key: 'eq-assets', // 用于区分不同的上传组件
label: '上传资料',
fieldName: 'assets',
subcomponent: AssetsUpload,
prop: 'uploadedAssets',
default: [],
bind: {
'is-pic-mode': false,
},
},
],
[
{
assetUpload: true,
key: 'eq-pics', // 用于区分不同的上传组件
label: '上传图片',
fieldName: 'images',
subcomponent: AssetsUpload,
// prop: '',
// default: [],
bind: {
'is-pic-mode': true,
},
},
],
]
: this.rows;
},
},
methods: {
/** 查询列表 */
getList() {
@@ -420,6 +504,10 @@ export default {
this.open = false;
this.reset();
},
cancelEdit() {
this.showUploadComponents = false;
this.editVisible = false;
},
/** 表单重置 */
reset() {
this.form = {
@@ -445,11 +533,13 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.showUploadComponents = false;
this.title = '添加设备';
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.showUploadComponents = true;
const id = row.id;
getEquipment(id).then((response) => {
this.form = response.data;
@@ -516,6 +606,7 @@ export default {
viewDetail(id) {
this.reset();
this.editMode = 'detail';
this.showUploadComponents = true;
this.form.id = id;
this.editVisible = true;
this.$nextTick(() => {
@@ -524,11 +615,11 @@ export default {
},
// overwrite basicPageMixin 里的 处理表格按钮 方法
handleTableBtnClick({ data, type }) {
console.log('[handleTableBtnClick]', data, type);
switch (type) {
case 'edit':
this.reset();
this.editMode = 'edit';
this.showUploadComponents = true;
this.form.id = data.id;
this.editVisible = true;
this.$nextTick(() => {

View File

@@ -37,7 +37,7 @@
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
</base-dialog>
</div>
</template>
@@ -55,7 +55,7 @@ import {
exportEquipmentTypeExcel,
} from '@/api/base/equipmentType';
import { getAccessToken } from '@/utils/auth';
// import { getAccessToken } from '@/utils/auth';
export default {
name: 'EquipmentType',
@@ -86,9 +86,9 @@ export default {
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备类型名称', },
{ prop: 'code', label: '检测类型编码', },
{ prop: 'remark', label: '备注', },
{ prop: 'name', label: '设备类型名称' },
{ prop: 'code', label: '检测类型编码' },
{ prop: 'remark', label: '备注' },
],
searchBarFormConfig: [
{
@@ -149,15 +149,13 @@ export default {
prop: 'parentId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
},
{},
],
[
{
upload: true,
label: '上传资料',
prop: 'uploadFiles',
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
bind: {
headers: { Authorization: 'Bearer ' + getAccessToken() },
'show-file-list': false,
},
prop: 'files',
},
],
[{ input: true, label: '备注', prop: 'remark' }],
@@ -236,6 +234,25 @@ export default {
const id = row.id;
getEquipmentType(id).then((response) => {
this.form = response.data;
// this.form = {
// code: 'SBLX20230925184444000041',
// name: '测试131',
// remark: '测试可删除',
// id: '1706258479729336322',
// files: [
// { fileName: '1.png', fileUrl: '', fileType: 2 },
// { fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
// { fileName: '2.txt', fileUrl: '', fileType: 2 },
// { fileName: '1.rar', fileUrl: '', fileType: 2 },
// { fileName: '1.kkk', fileUrl: '', fileType: 2 },
// { fileName: 'test.file', fileUrl: '', fileType: 2 },
// { fileName: '222', fileUrl: '', fileType: 2 },
// { fileName: 'g', fileUrl: '', fileType: 2 },
// ],
// createTime: 1695638697000,
// parentId: '1701869972319584257',
// };
// debugger;
this.open = true;
this.title = '修改设备类型';
});
@@ -267,7 +284,7 @@ export default {
handleDelete(row) {
const id = row.id;
this.$modal
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
.confirm('是否确认删除设备类型"' + row.name + '"?')
.then(function () {
return deleteEquipmentType(id);
})

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2023-08-01 16:59:06
* @LastEditors: DY
* @LastEditTime: 2023-10-16 11:16:48
* @Description:
-->
<template>
@@ -12,21 +12,30 @@
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px">
<el-form-item label="工厂编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入工厂编码" />
</el-form-item>
<el-form-item label="工厂名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入工厂名称" />
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="工厂编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入工厂编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工厂名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入工厂名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="地址" prop="address">
<el-input v-model="dataForm.address" clearable placeholder="请输入地址" />
</el-form-item>
</el-col>
<!-- <el-form-item label="启用状态" prop="enabled">
<el-select
v-model="dataForm.enabled"
@@ -38,9 +47,12 @@
:value="dict.value" />
</el-select>
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
</el-form-item>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>

View File

@@ -29,7 +29,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="70%">
width="50%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>

View File

@@ -2,15 +2,14 @@
* @Author: zwq
* @Date: 2023-08-02 15:12:42
* @LastEditors: DY
* @LastEditTime: 2023-10-10 16:49:03
* @LastEditTime: 2023-10-13 16:35:03
* @Description:
-->
<template>
<div class="app-container">
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick" />
:formConfigs="[{ label: '产线在制产品', type: 'title' }]"
ref="searchBarForm" />
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
@@ -36,20 +35,17 @@ import { getProductPage } from '@/api/core/base/product';
const tableProps = [
{
prop: 'lineName',
label: '产线',
align: 'center',
label: '产线'
},
{
prop: 'productName',
label: '在制产品',
align: 'center',
list: [],
subcomponent: selectProduct,
},
{
prop: 'recordTime',
label: '开始时间',
align: 'center',
filter: parseTime,
},
];
@@ -63,14 +59,14 @@ export default {
},
tableProps,
tableData: [],
formConfig: [
{
type: 'button',
btnName: '同步',
name: 'search',
color: 'primary',
},
],
// formConfig: [
// {
// type: 'button',
// btnName: '同步',
// name: 'search',
// color: 'primary',
// },
// ],
};
},
components: {},

View File

@@ -2,12 +2,11 @@
* @Author: zwq
* @Date: 2023-08-03 14:09:18
* @LastEditors: DY
* @LastEditTime: 2023-10-10 16:54:09
* @LastEditTime: 2023-10-13 16:47:25
* @Description:
-->
<template>
<div class="tableInner">
<el-input readonly v-model="list.productName" style="width: 50%;" ></el-input>
<el-popover
placement="top"
title="切换在制产品"
@@ -28,8 +27,11 @@
确定
</el-button>
</div>
<el-button type="text" slot="reference">切换</el-button>
<el-button type="text" slot="reference">
<svg-icon icon-class="changelogo"/>
</el-button>
</el-popover>
<el-input readonly v-model="list.productName" style="width: 50%;margin-left: 5px" ></el-input>
</div>
</template>
<script>
@@ -61,6 +63,7 @@ export default {
switchLineBindProduct(data).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.list.productName = this.list.string.split('+')[1]
this.$emit('emitData');
});
},

View File

@@ -28,24 +28,20 @@ import { getProductPage } from '@/api/core/base/product';
const tableProps = [
{
prop: 'productionLineName',
label: '产线',
align: 'center',
label: '产线'
},
{
prop: 'productName',
label: '在制产品',
align: 'center',
label: '在制产品'
},
{
prop: 'startTime',
label: '开始时间',
align: 'center',
filter: parseTime,
},
{
prop: 'endTime',
label: '结束时间',
align: 'center',
filter: parseTime,
},
];
@@ -86,7 +82,8 @@ export default {
rangeSeparator: '-',
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
param: 'createTime',
param: 'startTime',
valueFormat: 'timestamp'
},
{
type: 'button',
@@ -126,7 +123,7 @@ export default {
this.listQuery.pageSize = 10;
this.listQuery.productionLineId = val.productionLineId;
this.listQuery.productId = val.productId;
this.listQuery.createTime = val.createTime;
this.listQuery.startTime = val.startTime;
this.getDataList();
break;
case 'reset':

View File

@@ -43,7 +43,7 @@
<el-form-item label="产品类型" prop="typeDictValue">
<el-select
v-model="dataForm.typeDictValue"
style="width: 100%"
style="width: 100%"
:disabled="isdetail"
placeholder="请选择产品类型">
<el-option
@@ -58,7 +58,7 @@
<el-form-item label="单位" prop="unitDictValue">
<el-select
v-model="dataForm.unitDictValue"
style="width: 100%"
style="width: 100%"
:disabled="isdetail"
placeholder="请选择单位">
<el-option
@@ -83,8 +83,8 @@
<el-form-item label="单位平方数" prop="area">
<el-input
:disabled="isdetail"
v-model="dataForm.area"
placeholder="请输入单位平方数" />
v-model="dataForm.area"
placeholder="请输入单位平方数" />
</el-form-item>
</el-col>
</el-row>
@@ -111,6 +111,8 @@
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:add-button-show="isdetail ? null : '添加属性'"
@emitButtonClick="addNew()"
:table-data="productAttributeList">
<method-btn
v-if="!isdetail"
@@ -123,15 +125,15 @@
<pagination
v-show="listQuery.total > 0"
:total="listQuery.total"
:page.sync="listQuery.current"
:limit.sync="listQuery.size"
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.pageSize"
:page-sizes="[5, 10, 15]"
@pagination="getList" />
</div>
</div>
</div>
<div style="position: absolute; bottom: 24px; right: 24px">
<!-- <div style="position: absolute; bottom: 24px; right: 24px">
<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
@@ -145,6 +147,14 @@
添加属性
</el-button>
</span>
</div> -->
<div class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
</el-button>
<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button>
</div>
<product-attr-add
@@ -250,12 +260,12 @@ export default {
},
],
area: [
// {
// type: 'float',
// message: '单位平方数为浮点类型',
// trigger: 'blur',
// transfom: 'val => Float(val)',
// },
{
type: 'number',
message: '请输入正确的数值',
trigger: 'change',
transform: (val) => Number(val),
},
],
processTime: [
{
@@ -263,12 +273,12 @@ export default {
message: '完成单位产品用时不能为空',
trigger: 'blur',
},
// {
// type: 'number',
// message: '完成单位产品用时为浮点类型',
// trigger: 'blur',
// transfom: 'val => Number(val)',
// },
{
type: 'number',
message: '请输入正确的数值',
trigger: 'blur',
transform: (val) => Number(val),
},
],
},
isdetail: false,
@@ -277,6 +287,7 @@ export default {
methods: {
initData() {
this.productAttributeList.splice(0);
this.listQuery.total = 0;
},
init(id, isdetail) {
this.initData();
@@ -304,12 +315,10 @@ export default {
getList() {
// 获取产品的属性列表
const params = {
pageSize: 10,
pageNo: 1,
getProductAttrPage({
...this.listQuery,
productId: this.dataForm.id,
};
getProductAttrPage(params).then((response) => {
}).then((response) => {
this.productAttributeList = response.data.list;
this.listQuery.total = response.data.total;
});
@@ -390,6 +399,8 @@ export default {
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
}
.drawer >>> .el-form-item__label {
@@ -400,14 +411,20 @@ export default {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 30px;
}
.drawer >>> .el-drawer__body {
flex: 1;
height: 1px;
display: flex;
flex-direction: column;
}
.drawer >>> .content {
padding: 0 24px 30px;
padding: 30px 24px;
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
/* height: 100%; */
}
.drawer >>> .visual-part {
@@ -422,4 +439,10 @@ export default {
.drawer >>> .attr-list {
padding: 0 16px;
}
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style>

View File

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 14:55:51
* @LastEditors: zwq
* @LastEditTime: 2023-08-03 15:22:53
* @LastEditors: DY
* @LastEditTime: 2023-10-13 10:27:00
* @Description:
-->
<template>
@@ -50,30 +50,25 @@ import {
const tableProps = [
{
prop: 'code',
label: '产品编码',
align: 'center',
label: '产品编码'
},
{
prop: 'name',
label: '产品名称',
align: 'center',
label: '产品名称'
},
{
prop: 'specifications',
label: '规格',
align: 'center',
label: '规格'
},
{
prop: 'unitDictValue',
label: '单位',
align: 'center',
subcomponent: unitDict,
},
{
prop: 'createTime',
label: '创建时间',
align: 'center',
filter: parseTime,
filter: parseTime
},
];
@@ -127,14 +122,14 @@ export default {
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '重置',
name: 'reset',
},
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '重置',
// name: 'reset',
// },
{
type: 'separate',
},

View File

@@ -7,53 +7,84 @@
-->
<template>
<el-form
class="dialog-inner__form"
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="90px">
<el-form-item label="产线编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入产线编码" />
</el-form-item>
<el-form-item label="产线名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入产线名称" />
</el-form-item>
<el-form-item prop="factoryId" label="工厂名称">
<el-select
v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
<el-option
v-for="item in urlOptions.optionArr.arr0"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="产线TT值(h)" prop="tvalue">
<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
</el-form-item>
<el-form-item label="额外编码" prop="externalCode">
<el-input
v-model="dataForm.externalCode"
clearable
placeholder="请输入额外编码" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
type="textarea"
placeholder="请输入内容" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="产线编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入产线编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产线名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入产线名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item prop="factoryId" label="工厂名称">
<el-select
v-model="dataForm.factoryId"
filterable
clearable
placeholder="请选择工厂">
<el-option
v-for="item in urlOptions.optionArr.arr0"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产线TT值(h)" prop="tvalue">
<el-input
v-model="dataForm.tvalue"
clearable
placeholder="请输入每小时下片数量" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="额外编码" prop="externalCode">
<el-input
v-model="dataForm.externalCode"
clearable
placeholder="请输入额外编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
clearable
placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
type="textarea"
placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
@@ -65,22 +96,20 @@ import {
getProductionLine,
getCode,
} from '@/api/core/base/productionLine';
import {
getFactoryPage,
} from '@/api/core/base/factory';
import { getFactoryPage } from '@/api/core/base/factory';
export default {
mixins: [basicAdd],
data() {
return {
urlOptions: {
getOption: true,
isGetCode: true,
codeURL: getCode,
getOption: true,
isGetCode: true,
codeURL: getCode,
createURL: createProductionLine,
updateURL: updateProductionLine,
infoURL: getProductionLine,
optionArrUrl: [getFactoryPage],
optionArrUrl: [getFactoryPage],
},
dataForm: {
id: undefined,
@@ -99,13 +128,26 @@ export default {
name: [
{ required: true, message: '产线名称不能为空', trigger: 'blur' },
],
factoryId: [
factoryId: [
{ required: true, message: '工厂不能为空', trigger: 'change' },
],
tvalue: [
{
type: 'number',
message: '请输入正确的数字',
trigger: 'change',
transform: (val) => Number(val),
},
],
},
};
},
methods: {
},
methods: {},
};
</script>
<style scoped>
.dialog-inner__form >>> .el-select {
width: 100%;
}
</style>

View File

@@ -29,7 +29,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="70%">
width="50%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>
@@ -52,45 +52,37 @@ import {
const tableProps = [
{
prop: 'code',
label: '产线编码',
align: 'center',
label: '产线编码'
},
{
prop: 'name',
label: '产线名称',
align: 'center',
label: '产线名称'
},
{
prop: 'factoryName',
label: '工厂',
align: 'center',
label: '工厂'
},
{
prop: 'externalCode',
label: '额外编码',
align: 'center',
label: '额外编码'
},
{
prop: 'status',
label: '当前状态',
align: 'center',
filter: codeFilter('lineStatus'),
},
{
prop: 'description',
label: '描述',
align: 'center',
label: '描述'
},
{
prop: 'remark',
label: '备注',
align: 'center',
label: '备注'
},
{
prop: 'createTime',
label: '创建时间',
align: 'center',
filter: parseTime,
filter: parseTime
},
];
@@ -132,14 +124,14 @@ export default {
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '重置',
name: 'reset',
},
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '重置',
// name: 'reset',
// },
{
type: 'separate',
},
@@ -173,7 +165,7 @@ export default {
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
this.total = response.data.total;
this.listQuery.total = response.data.total;
this.getStatus(response.data.list);
this.dataListLoading = false;
});
@@ -195,7 +187,7 @@ export default {
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;.7
this.listQuery.pageSize = 10;
this.listQuery.name = val.name;
this.getDataList();
break;

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2023-08-01 13:52:10
* @LastEditors: DY
* @LastEditTime: 2023-09-21 10:48:54
* @LastEditTime: 2023-10-16 13:40:00
* @Description:
-->
<template>
@@ -12,33 +12,45 @@
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="90px">
<el-form-item label="工段编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入工段编码" />
</el-form-item>
<el-form-item label="工段名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入工段名称" />
</el-form-item>
<el-form-item prop="productionLineId" label="产线">
<el-select
v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
<el-option
v-for="item in urlOptions.optionArr.arr0"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" />
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="工段编码" prop="code">
<el-input
v-model="dataForm.code"
clearable
placeholder="请输入工段编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工段名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
placeholder="请输入工段名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item prop="productionLineId" label="产线">
<el-select
v-model="dataForm.productionLineId" filterable clearable placeholder="请选择产线">
<el-option
v-for="item in urlOptions.optionArr.arr0"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="dataForm.sort" :min="1" :max="100" clearable placeholder="请输入排序" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
</el-form-item>

View File

@@ -29,7 +29,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width="70%">
width="50%">
<add-or-update
ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update>
@@ -50,34 +50,28 @@ import {
const tableProps = [
{
prop: 'code',
label: '工段编码',
align: 'center',
label: '工段编码'
},
{
prop: 'name',
label: '工段名称',
align: 'center',
label: '工段名称'
},
{
prop: 'productionLineName',
label: '产线',
align: 'center',
label: '产线'
},
{
prop: 'sort',
label: '排序',
align: 'center',
label: '排序'
},
{
prop: 'remark',
label: '备注',
align: 'center',
label: '备注'
},
{
prop: 'createTime',
label: '创建时间',
align: 'center',
filter: parseTime,
filter: parseTime
},
];
@@ -119,14 +113,14 @@ export default {
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '重置',
name: 'reset',
},
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '重置',
// name: 'reset',
// },
{
type: 'separate',
},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-09 09:08:08
* @LastEditTime: 2023-10-16 15:10:42
* @LastEditors: DY
* @Description:
-->
@@ -12,6 +12,7 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
@@ -22,6 +23,7 @@
@selection-change="selectChange"
>
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
@@ -117,6 +119,7 @@ export default {
pageNo: 1,
total: 1,
},
fileName: '',
exportLoading: false,
dataListLoading: false,
dialogVisible: false,
@@ -194,7 +197,8 @@ export default {
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
color: 'primary',
plain: true
}
],
};
@@ -207,6 +211,7 @@ export default {
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
setTimeout(() => {
html2canvas(target).then(function(canvas) {
var contentWidth = canvas.width
@@ -242,7 +247,7 @@ export default {
}
}
pdf.save('产线统计自动报表.pdf')
pdf.save(that.fileName + '产线产量.pdf')
})
}, 300)
},
@@ -285,7 +290,7 @@ export default {
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), '产线统计自动报表.xlsx')
}), this.fileName + '产线产量.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
@@ -310,6 +315,9 @@ export default {
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}
this.getDataList();
break;
case 'export':
@@ -327,7 +335,7 @@ export default {
item.reportType = item.reportType === 1 ? '日' : item.reportType === 2 ? '周' : '月'
return item
});
this.total = response.data.total;
this.listQuery.total = response.data.total;
this.dataListLoading = false;
this.showData = this.tableData
});

View File

@@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-09 15:14:42
* @LastEditTime: 2023-10-16 15:18:23
* @LastEditors: DY
* @Description:
-->
@@ -12,6 +12,7 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
@@ -29,6 +30,7 @@
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
@@ -110,7 +112,7 @@ export default {
showData: [],
tableData: [],
selectedList: [],
fileName: [],
fileName: '',
formConfig: [
{
type: 'select',
@@ -145,7 +147,8 @@ export default {
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
color: 'primary',
plain: true
}
],
};
@@ -156,7 +159,7 @@ export default {
}
// const time = new Date()
// this.formConfig[1].defaultSelect = [time, time]
// this.getDataList()
this.getDataList()
this.getPdLineList()
},
methods: {
@@ -199,7 +202,7 @@ export default {
}
}
pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_产线产量.pdf')
pdf.save(that.fileName + '产线产量.pdf')
})
}, 300)
},
@@ -222,7 +225,7 @@ export default {
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), this.fileName[0] + '-' + this.fileName[1] + '_产线产量.xlsx')
}), this.fileName + '产线产量.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
@@ -265,17 +268,10 @@ export default {
this.listQuery.proLineId = val.line ? val.line : undefined;
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
console.log('nihc 你好', val.timeVal)
if (val.timeVal && val.timeVal.length > 0) {
this.fileName[0] = val.timeVal[0].slice(0, 10)
this.fileName[1] = val.timeVal[1].slice(0, 10)
this.getDataList();
} else {
this.$message({
message: '请选择时间',
type: 'warning'
});
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}
this.getDataList();
break;
case 'export':
this.handleExport();
@@ -289,7 +285,7 @@ export default {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data;
this.total = response.data.total;
this.listQuery.total = response.data.length;
this.dataListLoading = false;
this.showData = this.tableData
});

View File

@@ -11,13 +11,14 @@
ref="search-bar" />
<el-skeleton v-if="initing" :rows="6" animated />
<!-- :span-method="mergeColumnHandler" -->
<div v-else :class="{ 'no-data-bg': !tableData || tableData.length == 0 }">
<base-table
v-else
v-if="tableData && tableData.length > 0"
:table-props="tableProps"
:table-data="tableData"
@emitFun="handleEmitFun"></base-table>
<!-- :page="queryParams.pageNo"
:limit="queryParams.pageSize" -->
@emitFun="handleEmitFun"
/>
</div>
</div>
</template>
@@ -65,10 +66,10 @@ export default {
label: times.slice(0, 10) + ' ' + times.slice(11),
align: 'center',
children: [
{ prop: times + '_in', label: '投入数量', align: 'center' },
{ prop: times + '_out', label: '产出数量', align: 'center' },
{ prop: times + '_junk', label: '报废数量', align: 'center' },
{ prop: times + '_area', label: '产出面积', align: 'center' }
{ prop: times + '_in', label: '投入数量' },
{ prop: times + '_out', label: '产出数量' },
{ prop: times + '_junk', label: '报废数量' },
{ prop: times + '_area', label: '产出面积' }
]
}
this.arr.push(subprop)
@@ -149,14 +150,14 @@ export default {
{
prop: 'proLineName',
label: '生产线',
align: 'center',
fixed: 'left'
fixed: 'left',
showOverflowTooltip: true
},
{
prop: 'spec',
label: '产品规格',
align: 'center',
fixed: 'left'
fixed: 'left',
showOverflowTooltip: true
}
]
this.buildProps(res.data.nameData);

View File

@@ -1,7 +1,7 @@
<!--
* @Author: Do not edit
* @Date: 2023-08-29 14:59:29
* @LastEditTime: 2023-10-08 10:51:49
* @LastEditTime: 2023-10-16 15:19:04
* @LastEditors: DY
* @Description:
-->
@@ -13,6 +13,7 @@
ref="searchBarForm"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
@@ -30,6 +31,7 @@
:method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
@@ -129,6 +131,7 @@ export default {
tableBtn: [],
tableData: [],
showData: [],
fileName: '',
formConfig: [
{
type: 'select',
@@ -187,7 +190,8 @@ export default {
type: 'button',
btnName: '导出',
name: 'export',
color: 'warning',
color: 'primary',
plain: true
}
],
};
@@ -200,6 +204,7 @@ export default {
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
setTimeout(() => {
html2canvas(target).then(function(canvas) {
var contentWidth = canvas.width
@@ -235,7 +240,7 @@ export default {
}
}
pdf.save('工段统计自动报表.pdf')
pdf.save(that.fileName + '工段统计.pdf')
})
}, 300)
},
@@ -258,7 +263,7 @@ export default {
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), '工段统计自动报表.xlsx')
}), this.fileName + '工段统计.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
@@ -307,6 +312,9 @@ export default {
this.listQuery.reportType = val.reportType ? val.reportType : undefined;
this.listQuery.reportStartTime = val.timeVal ? [new Date(val.timeVal[0]).getTime()] : undefined;
this.listQuery.reportEndTime = val.timeVal ? [new Date(val.timeVal[1]).getTime()] : undefined;
if (val.timeVal && val.timeVal.length > 0) {
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
}
this.getDataList();
break;
case 'export':
@@ -325,7 +333,7 @@ export default {
return item
});
this.showData = this.tableData
this.total = response.data.total;
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},

View File

@@ -3,15 +3,20 @@
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@select-changed="handleSearchBarChanged"
@headBtnClick="buttonClick" />
<base-table
v-if="showData.length"
class="right-aside"
v-loading="dataListLoading"
:table-props="tableProps"
:table-data="showData"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:selectWidth="55"
:table-data="showData"
@selection-change="selectChange"
/>
<div v-else class="no-data-bg"></div>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
@@ -45,38 +50,31 @@ import html2canvas from 'html2canvas'
const tableProps = [
{
prop: 'proLineName',
label: '产线名称',
align: 'center',
label: '产线名称'
},
{
prop: 'sectionName',
label: '工段名称',
align: 'center',
label: '工段名称'
},
{
prop: 'inputNum',
label: '进片数量/片',
align: 'center',
label: '进片数量/片'
},
{
prop: 'outputNum',
label: '出片数量/片',
align: 'center',
label: '出片数量/片'
},
{
prop: 'lossNum',
label: '损耗数量/片',
align: 'center',
label: '损耗数量/片'
},
{
prop: 'lossArea',
label: '损耗面积/m²',
align: 'center',
label: '损耗面积/m²'
},
{
prop: 'lossRate',
label: '损耗比例/%',
align: 'center',
label: '损耗比例/%'
}
];
@@ -110,6 +108,7 @@ export default {
param: 'proLineId',
defaultSelect: '',
filterable: true,
onchange: true,
},
{
type: 'select',
@@ -132,15 +131,20 @@ export default {
},
{
type: 'button',
btnName: '搜索',
btnName: '查询',
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '导出',
name: 'export',
},
color: 'primary',
plain: true
}
],
};
},
@@ -151,9 +155,39 @@ export default {
// this.getDataList()
},
methods: {
/** 根据产线获取工段 */
async getWorksectionById(lineId) {
const { code, data } = await this.$axios({
url: '/base/workshop-section/listByParentId',
method: 'get',
params: {
id: lineId,
},
});
if (code == 0) {
this.formConfig[1].selectOptions = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
handleSearchBarChanged({ param, value }) {
if (!value) {
this.formConfig[1].selectOptions = [];
return;
}
switch (param) {
case 'proLineId':
this.getWorksectionById(value);
break;
}
},
test() {
var target = document.getElementsByClassName("right-aside")[0]
target.style.background = '#FFFFFF'
var that = this
setTimeout(() => {
html2canvas(target).then(function(canvas) {
var contentWidth = canvas.width
@@ -189,7 +223,7 @@ export default {
}
}
pdf.save('工段统计数据查询报表.pdf')
pdf.save(that.fileName[0] + '-' + that.fileName[1] + '_工段统计.pdf')
})
}, 300)
},
@@ -212,7 +246,7 @@ export default {
try {
FileSaver.saveAs(new Blob([exportTableOut], {
type: 'application/octet-stream'
}), '工段统计数据查询报表.xlsx')
}), this.fileName[0] + '-' + this.fileName[1] + '_工段统计.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, exportTableOut)
}
@@ -293,10 +327,9 @@ export default {
this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined
this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined
this.fileName[0] = val.timeSlot[0]
this.fileName[1] = val.timeSlot[1]
console.log('wfjmmki文件名称', this.fileName)
if (val.timeSlot) {
if (val.timeSlot && val.timeSlot.length > 0) {
this.fileName[0] = val.timeSlot[0].slice(0, 10)
this.fileName[1] = val.timeSlot[1].slice(0, 10)
this.getDataList()
} else {
this.$message({
@@ -315,7 +348,14 @@ export default {
this.getDataList();
break;
case 'export':
this.handleExport();
if (val.timeSlot && val.timeSlot.length > 0) {
this.handleExport();
} else {
this.$message({
message: '请选择时间',
type: 'warning'
});
}
break;
default:
console.log(val);

View File

@@ -97,6 +97,22 @@ export default {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return (
params[0].axisValue +
`<br>` +
params.map((item) => {
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
let value = item.value ? item.value : '-'
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span>
<span>${valueStr}</span>
</span>`
}).join(``)
)
}
},
grid: {
@@ -106,7 +122,11 @@ export default {
containLabel: true
},
legend: {
data: legendData
data: legendData,
right: '1%',
icon: 'rect',
itemHeight: 8,
itemWidth: 8
},
xAxis: {
type: 'category',

View File

@@ -103,7 +103,8 @@ export default {
containLabel: true
},
legend: {
data: legendData
data: legendData,
right: '1%'
},
xAxis: {
type: 'category',

View File

@@ -425,7 +425,7 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 时间整点 */
.noneMinute .el-time-spinner__wrapper {
width: 100%;
@@ -433,6 +433,16 @@ export default {
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
@@ -446,8 +456,6 @@ export default {
margin-top: 12px;
}
}
</style>
<style scoped>
.searchBarBox .foldClass {
position: absolute;
top: 14px;

View File

@@ -15,7 +15,7 @@ export default {
return {
chartDom: '',
chart: '',
chartHeight: this.tableHeight(350)
chartHeight: this.tableHeight(370)
}
},
props: {
@@ -34,7 +34,7 @@ export default {
},
mounted() {
window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(350)
this.chartHeight = this.tableHeight(370)
})
},
methods: {
@@ -86,17 +86,35 @@ export default {
}
}
var option = {
// title: {
// text: 'World Population'
// },
color:['#288AFF','#8EF0AB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return (
params[0].axisValue +
`<br>` +
params.map((item) => {
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
let value = item.value ? item.value : '-'
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span>
<span>${valueStr}</span>
</span>`
}).join(``)
)
}
},
legend: {},
legend: {
right: '1%',
icon: 'rect',
itemHeight: 8,
itemWidth: 8
},
grid: {
left: '1%',
right: '1%',

View File

@@ -194,13 +194,23 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style scoped>
<style lang="scss" scoped>
.separateStyle {
display: inline-block;
width: 1px;
@@ -208,8 +218,6 @@ export default {
background: #E8E8E8;
vertical-align: middle;
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
.blue-block {
display: inline-block;

View File

@@ -9,7 +9,8 @@
:table-data="list"
class="qoq-out-table"
/>
<div style='width: 100%;height: 300px;padding-top: 30px;'>
<div class="chartTitle">环比分析图</div>
<div style='width: 100%'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
</div>
@@ -112,3 +113,20 @@ export default {
}
}
</script>
<style lang='scss' scoped>
.chartTitle {
font-size: 16px;
color: #000;
margin-top: 20px;
}
.chartTitle::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
vertical-align: bottom;
}
</style>

View File

@@ -68,12 +68,6 @@ export default {
}
var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '1%',

View File

@@ -70,9 +70,9 @@ export default {
var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis'
},
// tooltip: {
// trigger: 'axis'
// },
grid: {
left: '4%',
right: '1%',

View File

@@ -385,7 +385,7 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
@@ -397,6 +397,16 @@ export default {
.noneMinute .el-scrollbar:nth-of-type(2) {
display: none;
}
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
.demo-form-inline {
@@ -410,8 +420,6 @@ export default {
margin-top: 12px;
}
}
</style>
<style scoped>
.searchBarBox .foldClass {
position: absolute;
top: 14px;

View File

@@ -77,7 +77,8 @@ export default {
var option = {
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
legend: {
data: keys
data: keys,
right:'1%'
},
tooltip: {
trigger: 'axis'

View File

@@ -125,7 +125,31 @@ export default {
this.$emit('submit', this.queryParams)
},
exportData() {
this.$emit('exportD')
let name
if (this.queryParams.objId) {
name = this.getObjName(this.objList, this.queryParams.objId)
} else {
this.$modal.msgWarning("对象不能为空")
return false
}
this.$emit('exportD', {name: name})
},
// 递归取对象name
getObjName(list, id) {
let _this = this
for (let i = 0; i < list.length; i++) {
let a = list[i]
if (a.id === id) {
return a.name
} else {
if (a.children && a.children.length > 0) {
let res = _this.getObjName(a.children, id)
if (res) {
return res
}
}
}
}
},
transformTime(timeStamp) {// 本月最后一天
let year = moment(timeStamp).format('YYYY')
@@ -143,19 +167,20 @@ export default {
}
}
</script>
<style>
<style lang='scss'>
/* 级联选择器 */
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
display: none;
}
</style>
<style scoped>
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
</style>
<style lang="scss" scoped>
@@ -170,4 +195,11 @@ export default {
margin-top: 10px;
}
}
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
</style>

View File

@@ -3,6 +3,7 @@
<!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/>
<div v-show='chartData.length'>
<div class="chartTitle">同比分析图</div>
<div style='width: 100%;height: 400px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
@@ -33,12 +34,12 @@ export default {
chartData: [],
tableProps: [],
list: [],
tableH: this.tableHeight(600)
tableH: this.tableHeight(640)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(600)
this.tableH = this.tableHeight(640)
})
},
methods: {
@@ -99,9 +100,10 @@ export default {
}
this.chartData = this.list
},
exportData() {
exportData(val) {
if (this.list.length > 0) {
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
let fileName = val.name + "同比分析.xlsx"
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
@@ -110,7 +112,7 @@ export default {
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"同比分析.xlsx"
fileName
)
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
@@ -123,3 +125,19 @@ export default {
}
}
</script>
<style lang='scss' scoped>
.chartTitle {
font-size: 16px;
color: #000;
}
.chartTitle::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
vertical-align: bottom;
}
</style>

View File

@@ -130,7 +130,7 @@ export default {
this.plcTableName = data.plcTableName
this.objName = data.objName
this.getList()
if (title === 'view') {
if (title === 'detail') {
this.showBtn = false
this.tableBtn = []
} else {

View File

@@ -113,22 +113,22 @@ export default {
],
tableProps,
tableBtn: [
this.$auth.hasPermi('base:energy-plc-connect:bind')
? {
type: 'connect',
btnName: '绑定'
}
: undefined,
{
type: 'detail',
btnName: '详情'
},
this.$auth.hasPermi('base:energy-plc-connect:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
{
type: 'view',
btnName: '查看'
},
this.$auth.hasPermi('base:energy-plc-connect:bind')
? {
type: 'connect',
btnName: '绑定'
}
: undefined,
this.$auth.hasPermi('base:energy-plc-connect:delete')
? {
type: 'delete',
@@ -205,10 +205,10 @@ export default {
case 'delete':
this.handleDelete(val.data)
break
case 'view':
case 'detail':
this.paramVisible = true
this.$nextTick(() => {
this.$refs.plcParam.init(val.data, 'view')
this.$refs.plcParam.init(val.data, 'detail')
})
break
default:

View File

@@ -1,54 +1,72 @@
<template>
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
<el-form-item label="监控对象" prop="objectId">
<el-cascader
style='width: 100%;'
v-model="objIds"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
@change="selectObj"
clearable></el-cascader>
</el-form-item>
<el-form-item label="能源类型" prop="energyTypeId">
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
<el-option
v-for="item in this.energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="监控模式" prop="type">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
<el-option label="合并" :value= "1" ></el-option>
<el-option label="详细" :value= "2" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="指标类型" prop="limitType">
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
<el-option
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="消耗量阈值" prop="limitValue">
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="监控对象" prop="objectId">
<el-cascader
style='width: 100%;'
v-model="objIds"
:options="objList"
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
popper-class="cascaderParent"
@change="selectObj"
clearable></el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="能源类型" prop="energyTypeId">
<el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;" @change="toggleType">
<el-option
v-for="item in this.energyTypeList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="监控模式" prop="type">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
<el-option label="合并" :value= "1" ></el-option>
<el-option label="详细" :value= "2" ></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监控详细参数" prop="type" v-if="form.type === 2">
<el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
<el-option
v-for="item in detailList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="指标类型" prop="limitType">
<el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
<el-option
v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="消耗量阈值" prop="limitValue">
<el-input-number v-model="form.limitValue" :min="0" :max="10000000000000000" style="width: 100%;"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>

View File

@@ -124,7 +124,7 @@ export default {
this.energyType = data.energyType
this.energyTypeId = data.energyTypeId
this.getList()
if (title === 'view') {
if (title === 'detail') {
this.showBtn = false
this.tableBtn = []
} else {

View File

@@ -111,22 +111,22 @@ export default {
],
tableProps,
tableBtn: [
this.$auth.hasPermi('monitoring:energy-statistics:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
{
type: 'view',
btnName: '查看'
},
this.$auth.hasPermi('monitoring:energy-statistics:bind')
? {
type: 'connect',
btnName: '绑定'
}
: undefined,
{
type: 'detail',
btnName: '详情'
},
this.$auth.hasPermi('monitoring:energy-statistics:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
this.$auth.hasPermi('monitoring:energy-statistics:delete')
? {
type: 'delete',
@@ -199,9 +199,9 @@ export default {
case 'delete':
this.handleDelete(val.data)
break
case 'view':
case 'detail':
this.$nextTick(() => {
this.$refs.plcParam.init(val.data, 'view')
this.$refs.plcParam.init(val.data, 'detail')
})
break
default:

View File

@@ -43,7 +43,7 @@ export default {
eq.okQuantity,
eq.nokQuantity,
eq.totalQuantity,
eq.passRate.toFixed(4),
eq.passRate?.toFixed(4),
]);
});
return {

View File

@@ -29,7 +29,10 @@
@emitFun="handleEmitFun"></base-table>
</el-tab-pane>
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
<div
v-if="activeName == 'graph'"
class="graph"
style="height: 40vh; display: flex; flex-direction: column">
<div class="blue-title">各设备加工数量</div>
<LineChart v-if="list && list.length" :list="list" />
<div v-else class="no-data-bg"></div>
@@ -87,6 +90,7 @@ export default {
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime',
defaultSelect: [
new Date(y, m, d)
@@ -246,7 +250,9 @@ export default {
created() {
this.fillLineOptions();
this.fillProductOptions();
this.getList();
},
mounted() {
this.$refs['search-bar'].headBtnClick('search');
},
methods: {
handleTabClick(tab, event) {
@@ -307,12 +313,16 @@ export default {
},
handleSearchBarBtnClick(btn) {
console.log('handleSearchBarBtnClick', btn);
// debugger;
switch (btn.btnName) {
case 'search':
this.queryParams.lineId = btn.lineId;
this.queryParams.productId = btn.productId;
this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null;
this.queryParams.recordTime = btn.recordTime
? btn.recordTime.map((time) =>
moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
)
: null;
this.$nextTick(() => {
this.getList();
});
@@ -388,7 +398,7 @@ export default {
font-size: 14px;
&::before {
content: "";
content: '';
position: absolute;
left: 0;
top: 6px;
@@ -398,5 +408,4 @@ export default {
background: #0b58ff;
}
}
</style>

View File

@@ -14,7 +14,7 @@ import * as echarts from 'echarts';
*
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
*/
function renderItem(params, api) { }
// function renderItem(params, api) { }
export default class Gantt {
constructor(el) {

View File

@@ -74,7 +74,7 @@
<script>
import LineChart from './components/lineChart.vue';
import response from './response.json';
// import response from './response.json';
export default {
name: 'SGProduction',

View File

@@ -1,497 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
<script src="./echarts.js"></script>
<script>
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]);
console.log(`
categoryIndex: ${categoryIndex},
start: ${start},
end: ${end},
api.value0: ${api.value(0)}
api.value1: ${api.value(1)}
api.value2: ${api.value(2)}
params.coordSys: ${JSON.stringify(params.coordSys)}
api.size: ${api.size([0, 1])}
api.style(): ${JSON.stringify(api.style())}
`);
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: 0, y: 0, width: 2000, height: 60 } // <== 也行...
// 截取矩形
{
// 截取掉grid以外的部分实质是计算方块的偏移量
x: params.coordSys.x, // {number} grid rect 的 x
// y: params.coordSys.y, // {number} grid rect 的 y
y: params.coordSys.y - 16, // {number} grid rect 的 y并多减掉 16 个单位
// width: end[0] - start[0],
width: params.coordSys.width, // {number} grid rect 的 width
height: params.coordSys.height, // {number} grid rect 的 height
}
);
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
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(),
];
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '故障', color: '#FC9C91' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '空白', color: '#F2F4F9' },
];
const option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'none',
// label: {
// backgroundColor: '#6a7985',
// },
},
formatter: (params) => {
// console.log('formatter', params)
// return `
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
// <span>${params[0].seriesName}</span>
// <span>${params[0].name}</span>
// </div>
// `
return `
<div style="display: flex; align-items: center; justify-content: space-between">
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
<h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
</div>
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
`
}
},
grid: [
{
id: 0,
top: 10,
left: 128,
right: 64,
height: 56,
},
// {
// id: 1,
// top: 80,
// height: 56,
// },
// ***************** 添加第二个grid *****************
{
id: 1,
top: 180,
left: 128,
right: 64,
height: 56
}
],
xAxis: [
{
id: 'asdf',
gridIndex: 0,
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(new Date()), // <===
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
splitNumber: 10,
axisLabel: {
margin: 12,
// rotate: -15,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
{
id: 'asdff',
gridIndex: 0,
axisLabel: { show: false },
axisLine: { show: false },
},
// ***************** 添加第二个 xAxis *****************
{
id: 'asdfjk',
gridIndex: 1,
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(new Date()), // <===
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
splitNumber: 10,
axisLabel: {
margin: 12,
// rotate: -15,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
{
id: 'fjkd',
gridIndex: 1,
axisLabel: { show: false },
axisLine: { show: false },
},
],
yAxis: [
// 主y轴
{
id: 0,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
name: '设备1',
nameLocation: 'center',
nameGap: 56,
nameRotate: 0,
nameTextStyle: {
fontSize: 18,
},
axisLine: {
show: true,
lineStyle: {},
},
axisLabel: { show: false },
axisTick: { show: false },
},
// 辅y轴
{
id: 1,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
// ***************** 添加第二个 yAxis *****************
{
id: 2,
gridIndex: 1,
type: 'value',
splitLine: { show: false },
name: '设备1',
nameLocation: 'center',
nameGap: 56,
nameRotate: 0,
nameTextStyle: {
fontSize: 18,
},
axisLine: {
show: true,
lineStyle: {},
},
axisLabel: { show: false },
axisTick: { show: false },
},
// 辅y轴
{
id: 3,
gridIndex: 1,
type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
],
series: [
{
// 沉默的背景
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{
name: '设备1',
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '运行',
value: [0, 1696694400000, 1696699400000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '运行',
value: [0, 1696730000000, 1696734040450, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '故障',
value: [0, 1696737040000, 1696754040450, 0],
itemStyle: {
normal: {
color: types[1].color,
},
},
},
{
name: '计划停机',
value: [0, 1696755000000, 1696759000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
{
name: '运行',
value: [0, 1696759000000, 1696769000000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '计划停机',
value: [0, 1696769400000, 1696779000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
],
},
// ***************** 添加第二个设备 *****************
{
// 沉默的背景
xAxisIndex: 2,
yAxisIndex: 2,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{
name: '设备2',
xAxisIndex: 2,
yAxisIndex: 2,
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '运行',
value: [0, 1696694400000, 1696699400000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
// showBackground: true,
},
{
name: '运行',
value: [0, 1696730000000, 1696734040450, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '故障',
value: [0, 1696737040000, 1696754040450, 0],
itemStyle: {
normal: {
color: types[1].color,
},
},
},
{
name: '计划停机',
value: [0, 1696755000000, 1696759000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
{
name: '运行',
value: [0, 1696759000000, 1696769000000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '计划停机',
value: [0, 1696769400000, 1696779000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
],
},
],
};
const el = document.getElementById('app');
const myChart = echarts.init(el);
console.log('mychart', myChart);
myChart.setOption(option);
</script>
</body>
</html>

View File

@@ -37,7 +37,7 @@
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width='70%'
width='50%'
>
<group-class-add ref="classList" @successSubmit="successSubmit" />
</base-dialog>
@@ -108,12 +108,6 @@ export default {
],
tableProps,
tableBtn: [
this.$auth.hasPermi('base:group-classes:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
{
type: 'cancel',
btnName: '作废',
@@ -128,6 +122,12 @@ export default {
]
}
},
this.$auth.hasPermi('base:group-classes:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
this.$auth.hasPermi('base:group-classes:delete')
? {
type: 'delete',

View File

@@ -1,17 +1,29 @@
<template>
<el-form ref="form" :rules="rules" label-width="80px" :model="form">
<el-form-item label="班组名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="班组编码" prop="code">
<el-input v-model="form.code" disabled></el-input>
</el-form-item>
<el-form-item label="班组人数" prop="num">
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number>
</el-form-item>
<el-form-item label="班组组长" prop="leaderName">
<el-input v-model="form.leaderName"></el-input>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="班组名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="班组编码" prop="code">
<el-input v-model="form.code" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="班组人数" prop="num">
<el-input-number v-model="form.num" :min="1" :max="99999999" style="width: 100%;"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="班组组长" prop="leaderName">
<el-input v-model="form.leaderName"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>

View File

@@ -308,6 +308,16 @@ export default {
}
</script>
<style lang='scss'>
.demo-form-inline {
.el-date-editor .el-range__icon {
font-size: 16px;
color: #0B58FF;
}
.el-input__prefix .el-icon-date {
font-size: 16px;
color: #0B58FF;
}
}
.groupTeamScheduling {
background-color: #F2F4F9;
.operationArea {

11832
yarn.lock Normal file

File diff suppressed because it is too large Load Diff