Compare commits
9 Commits
master
...
106d0ed89c
| Author | SHA1 | Date | |
|---|---|---|---|
| 106d0ed89c | |||
| cfbd00b560 | |||
| a787935263 | |||
| 15da20fac7 | |||
| 6b4e906e75 | |||
| d121e408af | |||
| f8baaa8955 | |||
| 416d4bb390 | |||
| fe7821cbd8 |
6
.env.dev
6
.env.dev
@@ -12,10 +12,8 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 产线监控系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
"url": "https://github.com/YunaiV/ruoyi-vue-pro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/x6": "^2.15.3",
|
||||
"@babel/parser": "7.18.4",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.27.2",
|
||||
|
||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||
// 创建设备
|
||||
export function createEquipment(data) {
|
||||
return request({
|
||||
url: '/base/equipment/create',
|
||||
url: '/base/core-equipment/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
@@ -12,7 +12,7 @@ export function createEquipment(data) {
|
||||
// 更新设备
|
||||
export function updateEquipment(data) {
|
||||
return request({
|
||||
url: '/base/equipment/update',
|
||||
url: '/base/core-equipment/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@@ -21,7 +21,7 @@ export function updateEquipment(data) {
|
||||
// 删除设备
|
||||
export function deleteEquipment(id) {
|
||||
return request({
|
||||
url: '/base/equipment/delete?id=' + id,
|
||||
url: '/base/core-equipment/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -29,7 +29,7 @@ export function deleteEquipment(id) {
|
||||
// 获得设备
|
||||
export function getEquipment(id) {
|
||||
return request({
|
||||
url: '/base/equipment/get?id=' + id,
|
||||
url: '/base/core-equipment/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -37,7 +37,7 @@ export function getEquipment(id) {
|
||||
// 获得设备分页
|
||||
export function getEquipmentPage(query) {
|
||||
return request({
|
||||
url: '/base/equipment/page',
|
||||
url: '/base/core-equipment/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -46,7 +46,7 @@ export function getEquipmentPage(query) {
|
||||
// 导出设备 Excel
|
||||
export function exportEquipmentExcel(query) {
|
||||
return request({
|
||||
url: '/base/equipment/export-excel',
|
||||
url: '/base/core-equipment/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
@@ -55,7 +55,7 @@ export function exportEquipmentExcel(query) {
|
||||
// 获得所有设备列表
|
||||
export function getEquipmentAll() {
|
||||
return request({
|
||||
url: '/base/equipment/listAll',
|
||||
url: '/base/core-equipment/listAll',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||
// 创建设备类型
|
||||
export function createEquipmentType(data) {
|
||||
return request({
|
||||
url: '/base/equipment-type/create',
|
||||
url: '/base/core-equipment-type/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
@@ -12,7 +12,7 @@ export function createEquipmentType(data) {
|
||||
// 更新设备类型
|
||||
export function updateEquipmentType(data) {
|
||||
return request({
|
||||
url: '/base/equipment-type/update',
|
||||
url: '/base/core-equipment-type/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@@ -21,7 +21,7 @@ export function updateEquipmentType(data) {
|
||||
// 删除设备类型
|
||||
export function deleteEquipmentType(id) {
|
||||
return request({
|
||||
url: '/base/equipment-type/delete?id=' + id,
|
||||
url: '/base/core-equipment-type/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -29,7 +29,7 @@ export function deleteEquipmentType(id) {
|
||||
// 获得设备类型
|
||||
export function getEquipmentType(id) {
|
||||
return request({
|
||||
url: '/base/equipment-type/get?id=' + id,
|
||||
url: '/base/core-equipment-type/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -37,7 +37,7 @@ export function getEquipmentType(id) {
|
||||
// 获得设备类型分页
|
||||
export function getEquipmentTypePage(query) {
|
||||
return request({
|
||||
url: '/base/equipment-type/page',
|
||||
url: '/base/core-equipment-type/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -46,7 +46,7 @@ export function getEquipmentTypePage(query) {
|
||||
// 导出设备类型 Excel
|
||||
export function exportEquipmentTypeExcel(query) {
|
||||
return request({
|
||||
url: '/base/equipment-type/export-excel',
|
||||
url: '/base/core-equipment-type/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
|
||||
14
src/assets/icons/svg/icon-upload.svg
Normal file
14
src/assets/icons/svg/icon-upload.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>上传</title>
|
||||
<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65">
|
||||
<g id="上传_Resources/Button" transform="translate(-12.000000, -9.000000)">
|
||||
<g id="上传" transform="translate(12.000000, 9.000000)">
|
||||
<g id="upload" transform="translate(0.875000, 0.875000)" fill="currentColor" fill-rule="nonzero">
|
||||
<path d="M5.80371094,0.138085937 C5.8953125,0.046484375 6.01699219,0 6.13867188,0 C6.26035156,0 6.38066406,0.046484375 6.47363281,0.138085937 L8.60371094,2.26953125 C8.78828125,2.45410156 8.78828125,2.75351562 8.60371094,2.93808594 C8.51484375,3.02695312 8.39589844,3.07617188 8.27011719,3.07617188 C8.14433594,3.07617188 8.02539062,3.02695312 7.93652344,2.93808594 L6.61171875,1.61328125 L6.61171875,9.51289062 C6.61171875,9.77402344 6.39980469,9.9859375 6.13867188,9.9859375 C5.87753906,9.9859375 5.665625,9.77402344 5.665625,9.51289062 L5.665625,1.61328125 L4.34082031,2.93808594 C4.15625,3.12265625 3.85683594,3.12265625 3.67363281,2.93808594 C3.4890625,2.75351562 3.4890625,2.45410156 3.67226563,2.26953125 L5.80371094,0.138085937 Z M11.7769531,7.88046875 C11.5158203,7.88046875 11.3039063,8.09238281 11.3039063,8.35351563 L11.3039063,11.025 C11.3039063,11.1794922 11.178125,11.3066406 11.0222656,11.3066406 L1.22636719,11.3066406 C1.071875,11.3066406 0.944726562,11.1808594 0.944726562,11.025 L0.944726562,8.35214844 C0.944726562,8.09101563 0.7328125,7.87910156 0.471679688,7.87910156 C0.210546875,7.87910156 0,8.09238281 0,8.35214844 L0,11.3996094 C0,11.8685547 0.381445313,12.2486328 0.849023437,12.2486328 L11.4009766,12.2486328 C11.8699219,12.2486328 12.25,11.8671875 12.25,11.3996094 L12.25,8.35214844 C12.25,8.09238281 12.0380859,7.88046875 11.7769531,7.88046875 Z" id="Shape"></path>
|
||||
</g>
|
||||
<rect id="Rectangle-49" x="0" y="0" width="14" height="14"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -83,6 +83,9 @@
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button size="mini" :disabled="col.bind?.disabled || false">
|
||||
<svg-icon
|
||||
icon-class="icon-upload"
|
||||
style="color: inherit"></svg-icon>
|
||||
上传文件
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
@@ -94,6 +97,7 @@
|
||||
class="file"
|
||||
v-for="file in form[col.prop] || []"
|
||||
:file="file"
|
||||
:key="file.fileUrl"
|
||||
@delete="handleDeleteFile(file)" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -105,6 +109,7 @@
|
||||
<script>
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import tupleImg from '@/assets/images/tuple.png';
|
||||
import cache from '@/views/extend/processFlow/cache';
|
||||
|
||||
/**
|
||||
* 找到最长的label
|
||||
@@ -132,7 +137,6 @@ const uploadedFile = {
|
||||
},
|
||||
methods: {
|
||||
handleDelete() {
|
||||
console.log('emit delete event')
|
||||
this.$emit('delete', this.file);
|
||||
},
|
||||
},
|
||||
@@ -187,6 +191,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hasFiles: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
labelPosition: {
|
||||
type: String,
|
||||
default: 'right',
|
||||
@@ -219,7 +227,6 @@ export default {
|
||||
watch: {
|
||||
rows: {
|
||||
handler() {
|
||||
console.log('watch triggered!');
|
||||
this.$nextTick(() => {
|
||||
this.handleOptions('watch');
|
||||
});
|
||||
@@ -230,6 +237,9 @@ export default {
|
||||
dataForm: {
|
||||
handler(val) {
|
||||
this.form = JSON.parse(JSON.stringify(val));
|
||||
if (this.hasFiles) {
|
||||
this.form.files = this.form.files ?? [];
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
@@ -308,6 +318,11 @@ export default {
|
||||
'list' in response.data
|
||||
? response.data.list
|
||||
: response.data;
|
||||
|
||||
if (opt.cache) {
|
||||
cache.store(opt.cache, list);
|
||||
}
|
||||
|
||||
this.$set(
|
||||
this.optionListOf,
|
||||
opt.prop,
|
||||
@@ -367,7 +382,9 @@ export default {
|
||||
},
|
||||
|
||||
handleDeleteFile(file) {
|
||||
this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
|
||||
this.form.files = this.form.files.filter(
|
||||
(item) => item.fileUrl != file.fileUrl
|
||||
);
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -28,10 +28,37 @@ export default {
|
||||
// tableBtn: [], // 占位
|
||||
// searchBarFormConfig: [], // 占位
|
||||
// // 弹窗表单配置
|
||||
// dialogFormConfig: [], // 占位
|
||||
// dialogFormConfig: [], //
|
||||
updateUrl: '',
|
||||
addUrl: '',
|
||||
pageUrl: '',
|
||||
form: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// utils
|
||||
http(url, method, payload) {
|
||||
return this.$axios({
|
||||
url,
|
||||
method,
|
||||
params: method === 'get' ? payload : null,
|
||||
data: method !== 'get' ? payload : null,
|
||||
})
|
||||
},
|
||||
put(payload) {
|
||||
return this.http(this.updateUrl, 'put', payload);
|
||||
},
|
||||
post(payload) {
|
||||
return this.http(this.addUrl, 'post', payload);
|
||||
},
|
||||
recv(payload) {
|
||||
return this.http(this.pageUrl, 'get', payload);
|
||||
},
|
||||
info(payload) {
|
||||
return this.http(this.infoUrl, 'get', payload);
|
||||
},
|
||||
|
||||
|
||||
// 过滤后端传回的详情数据
|
||||
filterData(data, keys) {
|
||||
const obj = {};
|
||||
|
||||
@@ -72,15 +72,15 @@ export const constantRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: 'core/base/factory',
|
||||
// children: [{
|
||||
// path: 'index',
|
||||
// redirect: 'core/base/factory',
|
||||
// component: (resolve) => require(['@/views/index'], resolve),
|
||||
// name: '首页',
|
||||
// meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
// }
|
||||
// ]
|
||||
children: [{
|
||||
path: 'index',
|
||||
// redirect: 'core/base/factory',
|
||||
component: (resolve) => require(['@/views/index'], resolve),
|
||||
name: '首页',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
|
||||
@@ -219,7 +219,7 @@ export default {
|
||||
{
|
||||
select: true,
|
||||
label: '设备',
|
||||
url: '/base/equipment/page?pageNo=1&pageSize=100',
|
||||
url: '/base/core-equipment/page?pageNo=1&pageSize=100',
|
||||
prop: 'equipmentId',
|
||||
bind: {
|
||||
filterable: true,
|
||||
@@ -278,7 +278,7 @@ export default {
|
||||
input: true,
|
||||
label: '设备分组编码',
|
||||
prop: 'code',
|
||||
// url: '/base/equipment/getCode',
|
||||
// url: '/base/core-equipment/getCode',
|
||||
},
|
||||
],
|
||||
],
|
||||
|
||||
@@ -191,7 +191,7 @@ export default {
|
||||
// 获取设备列表
|
||||
async getEquipmentList() {
|
||||
const response = await this.$axios(
|
||||
'/base/equipment/page?pageNo=1&pageSize=100'
|
||||
'/base/core-equipment/page?pageNo=1&pageSize=100'
|
||||
);
|
||||
this.equipmentList = response.data.list.map((item) => ({
|
||||
label: item.name,
|
||||
|
||||
@@ -192,7 +192,7 @@ export default {
|
||||
{
|
||||
select: true,
|
||||
label: '设备',
|
||||
url: '/base/equipment/page?pageNo=1&pageSize=100',
|
||||
url: '/base/core-equipment/page?pageNo=1&pageSize=100',
|
||||
prop: 'equipmentId',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
},
|
||||
|
||||
@@ -192,7 +192,7 @@ export default {
|
||||
input: true,
|
||||
label: '设备分组编码',
|
||||
prop: 'code',
|
||||
// url: '/base/equipment/getCode',
|
||||
// url: '/base/core-equipment/getCode',
|
||||
}
|
||||
]
|
||||
],
|
||||
|
||||
@@ -247,7 +247,7 @@ export default {
|
||||
select: true,
|
||||
label: '设备',
|
||||
prop: 'equipmentId',
|
||||
url: '/base/equipment/page?pageNo=1&pageSize=99',
|
||||
url: '/base/core-equipment/page?pageNo=1&pageSize=99',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
bind: {
|
||||
filterable: true,
|
||||
@@ -283,7 +283,7 @@ export default {
|
||||
input: true,
|
||||
label: '关联表名',
|
||||
prop: 'plcTableName',
|
||||
// url: '/base/equipment/getCode',
|
||||
// url: '/base/core-equipment/getCode',
|
||||
},
|
||||
],
|
||||
],
|
||||
@@ -320,7 +320,7 @@ export default {
|
||||
methods: {
|
||||
async getEquipmentOptions() {
|
||||
const res = await this.$axios({
|
||||
url: '/base/equipment/listAll',
|
||||
url: '/base/core-equipment/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
return res.data;
|
||||
|
||||
@@ -18,7 +18,13 @@
|
||||
预览
|
||||
</div> -->
|
||||
</section>
|
||||
<section class="file-area">
|
||||
<section
|
||||
class="file-area"
|
||||
:style="{
|
||||
height: expand ? 'auto' : isPicMode ? '180px' : '152px',
|
||||
gap: isPicMode ? '0 24px' : '24px',
|
||||
gridAutoRows: isPicMode ? '180px' : '152px',
|
||||
}">
|
||||
<el-upload
|
||||
class="equipment-upload"
|
||||
:disabled="disabled"
|
||||
@@ -56,7 +62,6 @@
|
||||
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`,
|
||||
@@ -226,7 +231,7 @@ export default {
|
||||
clearTimeout(this.updateTimer);
|
||||
}
|
||||
this.updateTimer = setTimeout(() => {
|
||||
console.log('[AssetsUpload] 更新上传列表');
|
||||
// console.log('[AssetsUpload] 更新上传列表');
|
||||
this.emitFilelist();
|
||||
clearTimeout(this.updateTimer);
|
||||
this.updateTimer = null;
|
||||
@@ -314,7 +319,6 @@ export default {
|
||||
}
|
||||
|
||||
:deep(.equipment-upload) {
|
||||
background: #ccc4;
|
||||
.el-upload-dragger {
|
||||
width: 188px;
|
||||
height: 128px;
|
||||
@@ -346,6 +350,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-upload {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
@@ -354,13 +362,14 @@ export default {
|
||||
// custom
|
||||
.file-area {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 188px);
|
||||
grid-auto-rows: 128px;
|
||||
gap: 24px 18px;
|
||||
place-content: center;
|
||||
grid-template-columns: repeat(auto-fill, 188px);
|
||||
grid-auto-rows: 152px;
|
||||
gap: 48px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-list__item {
|
||||
height: 128px;
|
||||
background-color: #fff;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<!--
|
||||
filename: EquipmentAssets.vue
|
||||
author: liubin
|
||||
date: 2023-08-22 11:11:18
|
||||
description: 设备资产
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="equipment-assets"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "EquipmentAssets",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.equipment-assets {
|
||||
background: #f1f1f1;
|
||||
padding: 12px;
|
||||
min-height: 128px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -283,7 +283,7 @@ export default {
|
||||
async getEqTypeList() {
|
||||
this.formLoading = true;
|
||||
const { code, data } = await this.$axios(
|
||||
'/base/equipment-type/page?pageNo=1&pageSize=100'
|
||||
'/base/core-equipment-type/page?pageNo=1&pageSize=100'
|
||||
);
|
||||
// debugger;
|
||||
if (code == 0) {
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
<!--
|
||||
filename: EquipmentPics.vue
|
||||
author: liubin
|
||||
date: 2023-08-18 16:29:39
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="equipment-pics">
|
||||
<div v-for="(url, idx) in images" :key="url">
|
||||
<img :src="url" :alt="url" />
|
||||
<figure class="big-img" :style="inlineStyle">
|
||||
<img :src="url" :alt="url" />
|
||||
<figcaption>{{ desc[idx] }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EquipmentPics',
|
||||
components: {},
|
||||
props: {
|
||||
inlineStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
desc: [
|
||||
'车间设备 - 1',
|
||||
'车间设备 - 2',
|
||||
'车间设备 - 3',
|
||||
'车间设备 - 4',
|
||||
'车间设备 - 5',
|
||||
'车间设备 - 6',
|
||||
'车间设备 - 7',
|
||||
'车间设备 - 8',
|
||||
'车间设备 - 9',
|
||||
'车间设备 - 10',
|
||||
'车间设备 - 11',
|
||||
'车间设备 - 12',
|
||||
],
|
||||
images: Array(10)
|
||||
.fill(1)
|
||||
.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.equipment-pics {
|
||||
// background: #cfcfcf;
|
||||
padding: 12px;
|
||||
// margin: 8px;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.equipment-pics > div {
|
||||
height: 100px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.equipment-pics > div:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.equipment-pics > div > img {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure {
|
||||
display: none;
|
||||
position: fixed;
|
||||
// inset: 0;
|
||||
// margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// width: 640px;
|
||||
// height: 480px;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
|
||||
.equipment-pics > div:hover > figure {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure > img {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.equipment-pics > div > figure > figcaption {
|
||||
height: 24px;
|
||||
margin-top: 8px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -60,9 +60,9 @@
|
||||
name: '基本信息',
|
||||
key: 'base',
|
||||
rows: computedRows,
|
||||
url: '/base/equipment/get',
|
||||
urlUpdate: '/base/equipment/update',
|
||||
urlCreate: '/base/equipment/create',
|
||||
url: '/base/core-equipment/get',
|
||||
urlUpdate: '/base/core-equipment/update',
|
||||
urlCreate: '/base/core-equipment/create',
|
||||
queryParams: { id: form.id },
|
||||
},
|
||||
{
|
||||
@@ -105,9 +105,6 @@
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import EquipmentPics from './components/EquipmentPics';
|
||||
import EquipmentAssets from './components/EquipmentAssets';
|
||||
import EquipmentDrawer from './components/EquipmentDrawer';
|
||||
|
||||
import {
|
||||
@@ -132,6 +129,12 @@ export default {
|
||||
return {
|
||||
searchBarKeys: ['name', 'code'],
|
||||
tableBtn: [
|
||||
this.$auth.hasPermi(`base:equipment:update`)
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:equipment:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
@@ -144,12 +147,6 @@ export default {
|
||||
btnName: '删除',
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi(`base:equipment:update`)
|
||||
? {
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
}
|
||||
: undefined,
|
||||
].filter((v) => v),
|
||||
tableProps: [
|
||||
{
|
||||
@@ -213,6 +210,13 @@ export default {
|
||||
{
|
||||
type: 'separate',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
plain: true,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
|
||||
btnName: '新增',
|
||||
@@ -220,12 +224,6 @@ export default {
|
||||
plain: true,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
[
|
||||
@@ -242,7 +240,7 @@ export default {
|
||||
input: true,
|
||||
label: '设备编码',
|
||||
prop: 'code',
|
||||
url: '/base/equipment/getCode',
|
||||
url: '/base/core-equipment/getCode',
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
@@ -269,7 +267,7 @@ export default {
|
||||
select: true,
|
||||
label: '设备类型',
|
||||
prop: 'equipmentTypeId',
|
||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||
url: '/base/core-equipment-type/page?pageNo=1&pageSize=100',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
|
||||
@@ -37,7 +37,12 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
ref="form"
|
||||
v-model="form"
|
||||
:has-files="true"
|
||||
:rows="rows" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -139,7 +144,7 @@ export default {
|
||||
input: true,
|
||||
label: '设备类型编码',
|
||||
prop: 'code',
|
||||
url: '/base/equipment-type/getCode',
|
||||
url: '/base/core-equipment-type/getCode',
|
||||
},
|
||||
],
|
||||
[
|
||||
@@ -147,7 +152,7 @@ export default {
|
||||
select: true,
|
||||
label: '父类',
|
||||
prop: 'parentId',
|
||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||
url: '/base/core-equipment-type/page?pageNo=1&pageSize=100',
|
||||
},
|
||||
{},
|
||||
],
|
||||
@@ -207,8 +212,6 @@ export default {
|
||||
name: undefined,
|
||||
parentId: undefined,
|
||||
remark: undefined,
|
||||
fileNames: [],
|
||||
fileUrls: [],
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
|
||||
@@ -416,7 +416,7 @@ export default {
|
||||
/** 准备设备数据 */
|
||||
async initEquipment() {
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/base/equipment/listAll',
|
||||
url: '/base/core-equipment/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
if (code == 0) {
|
||||
|
||||
@@ -223,7 +223,7 @@ export default {
|
||||
/** 准备设备数据 */
|
||||
async initEquipment() {
|
||||
const { code, data } = await this.$axios({
|
||||
url: '/base/equipment/listAll',
|
||||
url: '/base/core-equipment/listAll',
|
||||
method: 'get',
|
||||
});
|
||||
if (code == 0) {
|
||||
|
||||
53
src/views/extend/processFlow/cache.js
Normal file
53
src/views/extend/processFlow/cache.js
Normal file
@@ -0,0 +1,53 @@
|
||||
let timers = [];
|
||||
|
||||
export default {
|
||||
|
||||
exists(key) {
|
||||
const _ = localStorage.getItem('stored_keys');
|
||||
return _ ? _.split(',')?.indexOf(key) != -1 : false;
|
||||
},
|
||||
|
||||
store(key, value, duration = null) {
|
||||
if (!localStorage.getItem('stored_keys')) localStorage.setItem('stored_keys', key);
|
||||
else localStorage.setItem('stored_keys', localStorage.getItem('stored_keys') + ',' + key);
|
||||
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
console.log('store duration', duration)
|
||||
if (duration) {
|
||||
if (timers[key]) clearTimeout(timers[key]);
|
||||
timers[key] = setTimeout(() => {
|
||||
console.log("clear cache", key)
|
||||
this.clear([key]);
|
||||
}, duration * 1000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} key
|
||||
* @param {*} cb
|
||||
* @param {*} param2 force 强制更新,调用cb
|
||||
* @returns
|
||||
*/
|
||||
async getList(key, cb = null, { force = false, duration = null } = {}) {
|
||||
if (this.exists(key) && !force) {
|
||||
return JSON.parse(localStorage.getItem(key))
|
||||
} else {
|
||||
const list = await cb();
|
||||
this.store(key, list, duration);
|
||||
return list;
|
||||
}
|
||||
},
|
||||
|
||||
clear(keys) {
|
||||
if (keys && keys.length) {
|
||||
let stored_keys = localStorage.getItem('stored_keys').split(',');
|
||||
keys.forEach((key) => {
|
||||
stored_keys = stored_keys.filter((item) => item != key);
|
||||
});
|
||||
localStorage.setItem('stored_keys', stored_keys);
|
||||
return;
|
||||
}
|
||||
localStorage.removeItem('stored_keys');
|
||||
},
|
||||
}
|
||||
367
src/views/extend/processFlow/index.vue
Normal file
367
src/views/extend/processFlow/index.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-10-19 10:03:42
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<section class="process-flow">
|
||||
<el-button class="process-item__add-btn" @click="handleAdd">
|
||||
+ 新增工艺
|
||||
</el-button>
|
||||
<ProcessItem
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
:name="item.name"
|
||||
:line="item.lineName"
|
||||
:desc="item.remark"
|
||||
:isActive="item.enabled"
|
||||
@edit="handleUpdate" />
|
||||
</section>
|
||||
|
||||
<base-dialog
|
||||
:dialogTitle="title"
|
||||
:dialogVisible="open"
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
width="45%"
|
||||
@confirm="submitForm">
|
||||
<DialogForm
|
||||
v-if="open"
|
||||
key="index-dialog-form"
|
||||
ref="form"
|
||||
v-model="form"
|
||||
:rows="rows" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
// import cache from './cache';
|
||||
|
||||
const ProcessItem = {
|
||||
name: 'ProcessItem',
|
||||
components: {},
|
||||
props: ['id', 'name', 'line', 'desc', 'isActive'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleEdit() {
|
||||
this.$emit('edit', this.id);
|
||||
},
|
||||
handleViewDetail(e) {
|
||||
this.$router.push({
|
||||
name: 'ProcessFlowView',
|
||||
params: {
|
||||
id: this.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
render: function (h) {
|
||||
return (
|
||||
<div
|
||||
class={'process-item' + (this.isActive ? ' active' : '')}
|
||||
style="display: flex; flex-direction: column; position: relative;">
|
||||
<div
|
||||
class="process-item__content"
|
||||
style="flex: 1; display: flex; align-items: center; cursor: pointer;"
|
||||
title="点击查看详细工序列表"
|
||||
onClick={this.handleViewDetail}>
|
||||
{this.isActive ? (
|
||||
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 100%; background: #0ebe3a; position: absolute; top: 20px; right: 20px;" />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<svg-icon
|
||||
icon-class="tree-table"
|
||||
style="margin-left: 12px; width: 48px; height: 48px; color: #0858ff33"
|
||||
/>
|
||||
<div
|
||||
class="info"
|
||||
style="margin-left: 12px; display: flex; flex-direction: column;">
|
||||
<h2 style="margin: 20px 0 0; font-weight: 600; font-size: 18px; ">
|
||||
{this.name}
|
||||
</h2>
|
||||
<h3 style="margin: 0; font-weight: 400; font-size: 14px; line-height: 2; color: #888;">
|
||||
{this.line || '/'}
|
||||
</h3>
|
||||
<p style="margin: 0; text-overflow: ellipse; white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 1.25; color: #888;">
|
||||
{this.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="process-item__footer"
|
||||
style="background: #f7f9fa; border-top: 1px solid #0001;">
|
||||
<el-row gutter={20}>
|
||||
<el-col
|
||||
span={8}
|
||||
style="text-align: center; border-right: 1px solid #0001">
|
||||
<el-button
|
||||
type="text"
|
||||
style="color: #0007; line-height: 1.75"
|
||||
onClick={this.handleEdit}>
|
||||
编辑
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col
|
||||
span={8}
|
||||
style="text-align: center; border-right: 1px solid #0001">
|
||||
<el-button type="text" style="color: #0007; line-height: 1.75">
|
||||
复制
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col span={8} style="text-align: center;">
|
||||
<el-button type="text" style="color: #0007; line-height: 1.75">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'ProcessFlow',
|
||||
components: { ProcessItem },
|
||||
mixins: [basicPageMixin],
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
updateUrl: '/extend/process-flow/update',
|
||||
addUrl: '/extend/process-flow/create',
|
||||
pageUrl: '/extend/process-flow/page',
|
||||
infoUrl: '/extend/process-flow/get',
|
||||
searchBarKeys: ['name', 'code', 'lineId', 'productId'],
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
label: '工艺流程列表',
|
||||
},
|
||||
],
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
code: null,
|
||||
name: null,
|
||||
productId: null,
|
||||
lineId: null,
|
||||
},
|
||||
lineList: null,
|
||||
list: [],
|
||||
rows: [
|
||||
[
|
||||
{
|
||||
input: true,
|
||||
label: '工艺名称',
|
||||
prop: 'name',
|
||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
// bind: {
|
||||
// disabled: this.editMode == 'detail', // some condition, like detail mode...
|
||||
// }
|
||||
},
|
||||
{
|
||||
input: true,
|
||||
label: '工艺编码',
|
||||
prop: 'code',
|
||||
// url: '/base/core-equipment/getCode',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
select: true,
|
||||
label: '产线',
|
||||
prop: 'lineId',
|
||||
// cache: 'processFlow::lineList',
|
||||
url: '/base/core-production-line/listAll',
|
||||
bind: {
|
||||
filterable: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
switch: true,
|
||||
label: '是否启用',
|
||||
prop: 'enabled',
|
||||
bind: {
|
||||
'active-value': 1,
|
||||
'inactive-value': 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
textarea: true,
|
||||
label: '功能描述',
|
||||
prop: 'remark',
|
||||
},
|
||||
],
|
||||
],
|
||||
form: {
|
||||
id: null,
|
||||
code: null,
|
||||
name: null,
|
||||
productId: null,
|
||||
lineId: null,
|
||||
enabled: 1,
|
||||
remark: null,
|
||||
externalCode: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
code: null,
|
||||
name: null,
|
||||
productId: null,
|
||||
lineId: null,
|
||||
enabled: 1,
|
||||
remark: null,
|
||||
externalCode: null,
|
||||
};
|
||||
this.resetForm('form');
|
||||
},
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.showUploadComponents = false;
|
||||
this.title = '添加工艺';
|
||||
},
|
||||
async handleUpdate(id) {
|
||||
this.reset();
|
||||
const { data } = await this.info({ id });
|
||||
this.form = data;
|
||||
this.open = true;
|
||||
this.title = '修改工艺';
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
this.put(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
this.post(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
async getList() {
|
||||
this.loading = true;
|
||||
const { code, data } = await this.recv(this.queryParams);
|
||||
if (code == 0) {
|
||||
this.list = data.list;
|
||||
this.total = data.total;
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// async getList() {
|
||||
// this.loading = true;
|
||||
// const { code, data } = await this.recv(this.queryParams);
|
||||
// if (code == 0) {
|
||||
// const list = [];
|
||||
// for (const item of data.list) {
|
||||
// const newItem = await this.itemAttachName(item);
|
||||
// list.push(newItem);
|
||||
// }
|
||||
// this.list = list;
|
||||
// this.total = data.total;
|
||||
// this.loading = false;
|
||||
// return;
|
||||
// }
|
||||
// this.loading = false;
|
||||
// },
|
||||
|
||||
// async itemAttachName(item) {
|
||||
// if (!this.lineList) {
|
||||
// this.lineList = await cache.getList(
|
||||
// 'processFlow::lineList',
|
||||
// async () => {
|
||||
// const { code, data } = await this.$axios(
|
||||
// '/base/core-production-line/listAll'
|
||||
// );
|
||||
// if (code == 0) {
|
||||
// return data;
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// return {
|
||||
// ...item,
|
||||
// lineName: this.lineList.find((line) => line.id == item.lineId)?.name,
|
||||
// };
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
grid-auto-rows: 200px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.process-item__add-btn {
|
||||
display: grid;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 20px;
|
||||
color: #ccc;
|
||||
border-style: dashed;
|
||||
border-radius: 6px;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
&:hover {
|
||||
color: #555;
|
||||
border-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.process-item {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 6px 1px #ccc;
|
||||
overflow: hidden;
|
||||
|
||||
// &.active {
|
||||
// box-shadow: 0 0 6px 1px #18c8bf66;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
104
src/views/extend/processFlowView/components/ProcessBomList.vue
Normal file
104
src/views/extend/processFlowView/components/ProcessBomList.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<!--
|
||||
filename: ProcessBomList.vue
|
||||
author: liubin
|
||||
date: 2023-10-20 15:00:58
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<section class="process-bom">
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<div
|
||||
class="btns"
|
||||
style="
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
">
|
||||
<el-button type="primary" plain class="btn-create" icon="el-icon-plus">
|
||||
分配设备
|
||||
</el-button>
|
||||
<el-input
|
||||
icon="el-icon-search"
|
||||
placeholder="搜索"
|
||||
style="margin-left: 20px">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProcessBom',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
searchBarFormConfig: [{ label: '工序下设备' }],
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'name', label: '设备名称' },
|
||||
{ prop: 'code', label: '物料BOM' },
|
||||
{ prop: 'remark', label: '参数BOM' },
|
||||
],
|
||||
list: [],
|
||||
total: 0,
|
||||
tableBtn: [],
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleEmitFun() {},
|
||||
handleTableBtnClick() {},
|
||||
getList() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-bom {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
214
src/views/extend/processFlowView/components/ProcessDetail.vue
Normal file
214
src/views/extend/processFlowView/components/ProcessDetail.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<!--
|
||||
filename: ProcessGraph.vue
|
||||
author: liubin
|
||||
date: 2023-10-20 15:00:58
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<section class="process-graph">
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<div
|
||||
class="btns"
|
||||
style="text-align: right; position: absolute; top: 20px; right: 20px">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
class="btn-create"
|
||||
icon="el-icon-plus"
|
||||
@click="createDet">
|
||||
新建工序
|
||||
</el-button>
|
||||
<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
|
||||
<el-button class="btn-antiserialize" @click="jsonToGraph">
|
||||
反序列化
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="process-graph__panel" ref="panel"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Graph } from '@antv/x6';
|
||||
import ProcessNode from './ProcessNode';
|
||||
|
||||
Graph.registerNode('process-node', ProcessNode);
|
||||
|
||||
export default {
|
||||
name: 'ProcessGraph',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
graph: null,
|
||||
searchBarFormConfig: [{ label: '工序列表' }],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const graph = new Graph({
|
||||
container: this.$refs.panel,
|
||||
grid: {
|
||||
size: 10,
|
||||
visible: false,
|
||||
type: 'dot',
|
||||
args: {
|
||||
color: '#f005',
|
||||
thickness: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const pn1 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
x: 30,
|
||||
y: 30,
|
||||
processName: '工序00A',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
const pn2 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
x: 240,
|
||||
y: 30,
|
||||
processName: '工序00B',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn3 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
x: 360,
|
||||
y: 30,
|
||||
processName: '工序00C',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn4 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
x: 360,
|
||||
y: 120,
|
||||
processName: '工序00D',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn5 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
x: 500,
|
||||
y: 30,
|
||||
processName: '工序00E',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
graph.addEdge({
|
||||
source: pn1,
|
||||
target: pn2,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: '#0b58ff',
|
||||
strokeWidth: 1,
|
||||
targetMarker: {
|
||||
// name: 'classic',
|
||||
// name: 'async',
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.addEdge({
|
||||
source: pn2,
|
||||
target: pn3,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: '#0b58ff',
|
||||
strokeWidth: 1,
|
||||
targetMarker: {
|
||||
// name: 'classic',
|
||||
// name: 'async',
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.addEdge({
|
||||
source: pn2,
|
||||
target: pn4,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: '#0b58ff',
|
||||
strokeWidth: 1,
|
||||
targetMarker: {
|
||||
// name: 'classic',
|
||||
// name: 'async',
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.addEdge({
|
||||
source: pn3,
|
||||
target: pn5,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: '#0b58ff',
|
||||
strokeWidth: 1,
|
||||
targetMarker: {
|
||||
// name: 'classic',
|
||||
// name: 'async',
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.addEdge({
|
||||
source: pn4,
|
||||
target: pn5,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: '#0b58ff',
|
||||
strokeWidth: 1,
|
||||
targetMarker: {
|
||||
// name: 'classic',
|
||||
// name: 'async',
|
||||
size: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.graph = graph;
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
createDet() {},
|
||||
jsonToGraph() {},
|
||||
graphToJson() {
|
||||
if (this.graph) {
|
||||
console.log(JSON.stringify(this.graph.toJSON(), null, 2));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-graph {
|
||||
padding: 12px 20px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.process-graph__panel {
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
89
src/views/extend/processFlowView/components/ProcessInfo.vue
Normal file
89
src/views/extend/processFlowView/components/ProcessInfo.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<!--
|
||||
filename: ProcessInfo.vue
|
||||
author: liubin
|
||||
date: 2023-10-20 15:00:58
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<section class="process-info">
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<InfoItem label="工艺名称" value="测试工艺" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<InfoItem label="产线" value="A4" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<InfoItem
|
||||
label="工艺描述"
|
||||
value="咯热门asdfkj alsdfk ;lkj flskdjf sadf" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 12px;">
|
||||
<el-col :span="6">
|
||||
<InfoItem label="创建人" value="xxse" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<InfoItem label="创建时间" value="2023-10-22 10:11:00" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<InfoItem label="更新人" value="xxse" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<InfoItem label="更新时间" value="2023-10-22 10:11:00" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
|
||||
const InfoItem = {
|
||||
name: 'InfoItem',
|
||||
components: {},
|
||||
props: ['label', 'value'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
render: function (h) {
|
||||
return (
|
||||
<div style="display: flex; align-items: center; font-size: 14px; line-height: 1.5">
|
||||
<span style="width: 100px; text-align: left; font-weight: 700">{this.label}:</span>
|
||||
<span style="width: 200px; text-align: left; text-overflow: ellipse; white-space: nowrap">
|
||||
{this.value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'ProcessInfo',
|
||||
components: { InfoItem },
|
||||
mixins: [basicPageMixin],
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
infoUrl: '/extend/process-flow/get',
|
||||
searchBarFormConfig: [{ label: '工艺详情' }],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-info {
|
||||
padding: 12px 20px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
135
src/views/extend/processFlowView/components/ProcessNode.js
Normal file
135
src/views/extend/processFlowView/components/ProcessNode.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import { Node, ObjectExt } from '@antv/x6';
|
||||
|
||||
|
||||
export default class ProcessNode extends Node {
|
||||
|
||||
}
|
||||
|
||||
ProcessNode.config({
|
||||
width: 240,
|
||||
height: 100,
|
||||
markup: [
|
||||
{
|
||||
tagName: 'rect',
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 100,
|
||||
fill: 'transparent',
|
||||
stroke: '#0b58ff'
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'rect',
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: '#ffffff',
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'rect',
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 50,
|
||||
width: 200,
|
||||
height: 50,
|
||||
fill: '#f8f8f8',
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'processName',
|
||||
attrs: {
|
||||
x: 20,
|
||||
y: 30,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'workshopName',
|
||||
attrs: {
|
||||
x: 115,
|
||||
y: 30,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'processDesc',
|
||||
// textContent: '工序00A',
|
||||
attrs: {
|
||||
x: 26,
|
||||
y: 80,
|
||||
fill: '#777',
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// textContent: '工序名称',
|
||||
// attrs: {
|
||||
// x: 20,
|
||||
// y: 30,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// textContent: '工段名称',
|
||||
// attrs: {
|
||||
// x: 115,
|
||||
// y: 30,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// selector: 'processName',
|
||||
// // textContent: '工序00A',
|
||||
// attrs: {
|
||||
// x: 26,
|
||||
// y: 80,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// selector: 'workshopName',
|
||||
// // textContent: '工段1',
|
||||
// attrs: {
|
||||
// x: 128,
|
||||
// y: 80,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
// },
|
||||
// },
|
||||
],
|
||||
//
|
||||
propHooks(metadata) {
|
||||
const { processName, workshopName, processDesc, processId, ...others } = metadata;
|
||||
// debugger;
|
||||
if (processName) {
|
||||
console.log("processName", processName)
|
||||
ObjectExt.setByPath(others, 'attrs/processName/text', processName);
|
||||
}
|
||||
if (workshopName) {
|
||||
console.log("workshopName", workshopName)
|
||||
ObjectExt.setByPath(others, 'attrs/workshopName/text', workshopName);
|
||||
}
|
||||
if (processDesc) {
|
||||
console.log("processDesc", processDesc)
|
||||
ObjectExt.setByPath(others, 'attrs/processDesc/text', processDesc);
|
||||
}
|
||||
if (processId) {
|
||||
console.log("processId", processId)
|
||||
ObjectExt.setByPath(others, 'processId', processId);
|
||||
}
|
||||
return others;
|
||||
}
|
||||
})
|
||||
44
src/views/extend/processFlowView/index.vue
Normal file
44
src/views/extend/processFlowView/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-10-18 12:25:46
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app-container process-flow-view">
|
||||
<ProcessInfo />
|
||||
<ProcessDetail style="margin-top: 16px" />
|
||||
<ProcessBomList style="margin-top: 16px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProcessInfo from './components/ProcessInfo.vue';
|
||||
import ProcessBomList from './components/ProcessBomList.vue';
|
||||
import ProcessDetail from './components/ProcessDetail.vue';
|
||||
|
||||
export default {
|
||||
name: 'ProcessFlowView',
|
||||
components: { ProcessInfo, ProcessDetail, ProcessBomList },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
activated() {
|
||||
console.log('activated...', this.$route.params);
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-flow-view {
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
background: #f2f4f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -117,6 +117,7 @@ export default {
|
||||
{
|
||||
_action: 'params-monitor',
|
||||
label: '操作',
|
||||
width: 56,
|
||||
subcomponent: {
|
||||
props: ['injectData'],
|
||||
render: function (h) {
|
||||
@@ -124,10 +125,10 @@ export default {
|
||||
return h(
|
||||
'el-button',
|
||||
{
|
||||
class: 'iconfont icon-detail',
|
||||
props: { type: 'text' },
|
||||
on: {
|
||||
click: function () {
|
||||
console.log('inejctdata', _this.injectData);
|
||||
_this.$emit('emitData', {
|
||||
action: _this.injectData._action,
|
||||
// value: _this.injectData.id,
|
||||
@@ -135,8 +136,8 @@ export default {
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
'查看详情'
|
||||
}
|
||||
// '查看详情'
|
||||
);
|
||||
},
|
||||
},
|
||||
@@ -215,7 +216,7 @@ export default {
|
||||
/** 根据产线获取设备 */
|
||||
async getEquipmentList(id) {
|
||||
const { data } = await this.$axios({
|
||||
url: '/base/equipment/listByLine',
|
||||
url: '/base/core-equipment/listByLine',
|
||||
method: 'get',
|
||||
params: { id },
|
||||
});
|
||||
|
||||
@@ -64,6 +64,7 @@ export default {
|
||||
name: item.inspectionContent,
|
||||
type: 'bar',
|
||||
barCategoryGap: 12,
|
||||
barWidth: 20,
|
||||
data: [],
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user