Merge branch 'test' into dy
This commit is contained in:
commit
b1c0d21888
2
.env.dev
2
.env.dev
@ -9,7 +9,7 @@
|
|||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 产线监控系统
|
||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 产线监控系统
|
||||||
|
|
||||||
# 芋道管理系统/本地环境
|
# 芋道管理系统/本地环境
|
||||||
VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'
|
VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 产线监控系统
|
||||||
|
|
||||||
# 芋道管理系统/生产环境
|
# 芋道管理系统/生产环境
|
||||||
VUE_APP_BASE_API = '/prod-api'
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
NODE_ENV = production
|
NODE_ENV = production
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 产线监控系统
|
||||||
|
|
||||||
# 测试环境配置
|
# 测试环境配置
|
||||||
ENV = 'staging'
|
ENV = 'staging'
|
||||||
|
@ -4,7 +4,7 @@ NODE_ENV = development
|
|||||||
ENV = 'staging'
|
ENV = 'staging'
|
||||||
|
|
||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 芋道管理系统
|
VUE_APP_TITLE = 产线监控系统
|
||||||
|
|
||||||
# 芋道管理系统/测试环境
|
# 芋道管理系统/测试环境
|
||||||
VUE_APP_BASE_API = 'http://127.0.0.1:48080'
|
VUE_APP_BASE_API = 'http://127.0.0.1:48080'
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 2.0 KiB |
13
src/assets/icons/svg/downArrow.svg
Normal file
13
src/assets/icons/svg/downArrow.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?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>收起箭头小备份 3</title>
|
||||||
|
<g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="能源监控-同比分析" transform="translate(-848.000000, -392.000000)" fill-rule="nonzero">
|
||||||
|
<g id="收起箭头小备份-3" transform="translate(855.000000, 399.000000) scale(1, -1) translate(-855.000000, -399.000000) translate(848.000000, 392.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
|
||||||
|
<path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#FFBD02"></path>
|
||||||
|
<path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#FFBD02"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.0 KiB |
13
src/assets/icons/svg/upArrow.svg
Normal file
13
src/assets/icons/svg/upArrow.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?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>收起箭头小备份 11</title>
|
||||||
|
<g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="能源监控-同比分析" transform="translate(-848.000000, -269.000000)" fill-rule="nonzero">
|
||||||
|
<g id="收起箭头小备份-11" transform="translate(848.000000, 269.000000)">
|
||||||
|
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
|
||||||
|
<path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#37D97F"></path>
|
||||||
|
<path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#37D97F"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.9 KiB |
@ -94,7 +94,7 @@ export default {
|
|||||||
async logout() {
|
async logout() {
|
||||||
this.$modal.confirm('确定注销并退出系统吗?', '提示').then(() => {
|
this.$modal.confirm('确定注销并退出系统吗?', '提示').then(() => {
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
||||||
location.href = getPath('/index');
|
location.href = getPath('/');
|
||||||
})
|
})
|
||||||
}).catch(() => {});
|
}).catch(() => {});
|
||||||
}
|
}
|
||||||
|
@ -65,16 +65,17 @@ export const constantRoutes = [
|
|||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '/',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: 'index',
|
redirect: 'core/base/factory',
|
||||||
children: [{
|
// children: [{
|
||||||
path: 'index',
|
// path: 'index',
|
||||||
component: (resolve) => require(['@/views/index'], resolve),
|
// redirect: 'core/base/factory',
|
||||||
name: '首页',
|
// component: (resolve) => require(['@/views/index'], resolve),
|
||||||
meta: {title: '首页', icon: 'dashboard', affix: true}
|
// name: '首页',
|
||||||
}
|
// meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||||
]
|
// }
|
||||||
|
// ]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/user',
|
path: '/user',
|
||||||
@ -82,15 +83,15 @@ export const constantRoutes = [
|
|||||||
hidden: true,
|
hidden: true,
|
||||||
redirect: 'noredirect',
|
redirect: 'noredirect',
|
||||||
children: [{
|
children: [{
|
||||||
path: 'profile',
|
path: 'profile',
|
||||||
component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
|
component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
|
||||||
name: 'Profile',
|
name: 'Profile',
|
||||||
meta: {title: '个人中心', icon: 'user'}
|
meta: { title: '个人中心', icon: 'user' }
|
||||||
}, {
|
}, {
|
||||||
path: 'notify-message',
|
path: 'notify-message',
|
||||||
component: (resolve) => require(['@/views/system/notify/my/index'], resolve),
|
component: (resolve) => require(['@/views/system/notify/my/index'], resolve),
|
||||||
name: 'MyNotifyMessage',
|
name: 'MyNotifyMessage',
|
||||||
meta: { title: '我的站内信', icon: 'message' },
|
meta: { title: '我的站内信', icon: 'message' },
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -98,11 +99,11 @@ export const constantRoutes = [
|
|||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'type/data/:dictId(\\d+)',
|
path: 'type/data/:dictId(\\d+)',
|
||||||
component: (resolve) => require(['@/views/system/dict/data'], resolve),
|
component: (resolve) => require(['@/views/system/dict/data'], resolve),
|
||||||
name: 'SystemDictData',
|
name: 'SystemDictData',
|
||||||
meta: {title: '字典数据', icon: '', activeMenu: '/system/dict'}
|
meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -110,22 +111,22 @@ export const constantRoutes = [
|
|||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'log',
|
path: 'log',
|
||||||
component: (resolve) => require(['@/views/infra/job/log'], resolve),
|
component: (resolve) => require(['@/views/infra/job/log'], resolve),
|
||||||
name: 'InfraJobLog',
|
name: 'InfraJobLog',
|
||||||
meta: {title: '调度日志', activeMenu: '/infra/job'}
|
meta: { title: '调度日志', activeMenu: '/infra/job' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/codegen',
|
path: '/codegen',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'edit/:tableId(\\d+)',
|
path: 'edit/:tableId(\\d+)',
|
||||||
component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
|
component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
|
||||||
name: 'InfraCodegenEditTable',
|
name: 'InfraCodegenEditTable',
|
||||||
meta: {title: '修改生成配置', activeMenu: '/infra/codegen'}
|
meta: { title: '修改生成配置', activeMenu: '/infra/codegen' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -134,16 +135,16 @@ export const constantRoutes = [
|
|||||||
hidden: true,
|
hidden: true,
|
||||||
redirect: 'noredirect',
|
redirect: 'noredirect',
|
||||||
children: [{
|
children: [{
|
||||||
path: 'oa/leave/create',
|
path: 'oa/leave/create',
|
||||||
component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
|
component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
|
||||||
name: 'BpmOALeaveCreate',
|
name: 'BpmOALeaveCreate',
|
||||||
meta: {title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave'}
|
meta: { title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave' }
|
||||||
}, {
|
}, {
|
||||||
path: 'oa/leave/detail',
|
path: 'oa/leave/detail',
|
||||||
component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
|
component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
|
||||||
name: 'BpmOALeaveDetail',
|
name: 'BpmOALeaveDetail',
|
||||||
meta: {title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave'}
|
meta: { title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -151,31 +152,31 @@ export const constantRoutes = [
|
|||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
children: [{
|
children: [{
|
||||||
path: 'manager/form/edit',
|
path: 'manager/form/edit',
|
||||||
component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
|
component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
|
||||||
name: 'BpmFormEditor',
|
name: 'BpmFormEditor',
|
||||||
meta: {title: '流程表单-编辑', activeMenu: '/bpm/manager/form'}
|
meta: { title: '流程表单-编辑', activeMenu: '/bpm/manager/form' }
|
||||||
}, {
|
}, {
|
||||||
path: 'manager/definition',
|
path: 'manager/definition',
|
||||||
component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
|
component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
|
||||||
name: 'BpmProcessDefinition',
|
name: 'BpmProcessDefinition',
|
||||||
meta: {title: '流程定义', activeMenu: '/bpm/manager/model'}
|
meta: { title: '流程定义', activeMenu: '/bpm/manager/model' }
|
||||||
}, {
|
}, {
|
||||||
path: 'manager/model/design',
|
path: 'manager/model/design',
|
||||||
component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
|
component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
|
||||||
name: 'BpmModelEditor',
|
name: 'BpmModelEditor',
|
||||||
meta: {title: '设计流程', activeMenu: '/bpm/manager/model'}
|
meta: { title: '设计流程', activeMenu: '/bpm/manager/model' }
|
||||||
}, {
|
}, {
|
||||||
path: 'process-instance/create',
|
path: 'process-instance/create',
|
||||||
component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
|
component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
|
||||||
name: 'BpmProcessInstanceCreate',
|
name: 'BpmProcessInstanceCreate',
|
||||||
meta: {title: '发起流程', activeMenu: '/bpm/task/my'}
|
meta: { title: '发起流程', activeMenu: '/bpm/task/my' }
|
||||||
}, {
|
}, {
|
||||||
path: 'process-instance/detail',
|
path: 'process-instance/detail',
|
||||||
component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
|
component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
|
||||||
name: 'BpmProcessInstanceDetail',
|
name: 'BpmProcessInstanceDetail',
|
||||||
meta: {title: '流程详情', activeMenu: '/bpm/task/my'}
|
meta: { title: '流程详情', activeMenu: '/bpm/task/my' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -186,7 +187,7 @@ export const constantRoutes = [
|
|||||||
path: 'value/:propertyId(\\d+)',
|
path: 'value/:propertyId(\\d+)',
|
||||||
component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
|
component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
|
||||||
name: 'ProductPropertyValue',
|
name: 'ProductPropertyValue',
|
||||||
meta: {title: '商品属性值', icon: '', activeMenu: '/product/property'}
|
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -198,14 +199,14 @@ export const constantRoutes = [
|
|||||||
path: 'edit/:spuId(\\d+)',
|
path: 'edit/:spuId(\\d+)',
|
||||||
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
||||||
name: 'ProductSpuUpdate',
|
name: 'ProductSpuUpdate',
|
||||||
meta: {title: '修改商品', activeMenu: '/product/spu'}
|
meta: { title: '修改商品', activeMenu: '/product/spu' }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'add',
|
path: 'add',
|
||||||
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
||||||
name: 'ProductSpuCreate',
|
name: 'ProductSpuCreate',
|
||||||
meta: {title: '添加商品', activeMenu: '/product/spu'}
|
meta: { title: '添加商品', activeMenu: '/product/spu' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -248,6 +249,6 @@ Router.prototype.push = function push(location) {
|
|||||||
export default new Router({
|
export default new Router({
|
||||||
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
|
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
|
||||||
mode: 'hash', // 去掉url中的#
|
mode: 'hash', // 去掉url中的#
|
||||||
scrollBehavior: () => ({y: 0}),
|
scrollBehavior: () => ({ y: 0 }),
|
||||||
routes: constantRoutes
|
routes: constantRoutes
|
||||||
})
|
})
|
||||||
|
@ -303,7 +303,7 @@ export default {
|
|||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
const id = row.id;
|
const id = row.id;
|
||||||
this.$modal
|
this.$modal
|
||||||
.confirm('是否确认删除设备与分组绑定编号为"' + id + '"的数据项?')
|
.confirm('是否确认删除该分组绑定?')
|
||||||
.then(function () {
|
.then(function () {
|
||||||
return deleteEquipmentBindGroup(id);
|
return deleteEquipmentBindGroup(id);
|
||||||
})
|
})
|
||||||
|
@ -211,6 +211,7 @@ export default {
|
|||||||
switch: true,
|
switch: true,
|
||||||
label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
|
label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
|
||||||
prop: 'collection',
|
prop: 'collection',
|
||||||
|
value: 1,
|
||||||
bind: {
|
bind: {
|
||||||
'active-value': 1,
|
'active-value': 1,
|
||||||
'inactive-value': 0,
|
'inactive-value': 0,
|
||||||
|
@ -144,7 +144,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: 'PLC编码',
|
label: '编码',
|
||||||
placeholder: '请选择编码',
|
placeholder: '请选择编码',
|
||||||
param: 'plcId',
|
param: 'plcId',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
@ -184,6 +184,9 @@ export default {
|
|||||||
labelKey: `plcTableName`,
|
labelKey: `plcTableName`,
|
||||||
url: '/base/equipment-plc/listAll',
|
url: '/base/equipment-plc/listAll',
|
||||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
bind: {
|
||||||
|
filterable: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
@ -193,6 +196,9 @@ export default {
|
|||||||
prop: 'equipmentId',
|
prop: 'equipmentId',
|
||||||
url: '/base/equipment/page?pageNo=1&pageSize=99',
|
url: '/base/equipment/page?pageNo=1&pageSize=99',
|
||||||
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||||
|
bind: {
|
||||||
|
filterable: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
@ -351,11 +357,7 @@ export default {
|
|||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
const id = row.id;
|
const id = row.id;
|
||||||
this.$modal
|
this.$modal
|
||||||
.confirm(
|
.confirm('是否删除该配置?')
|
||||||
'是否确认删除设备与实时采集关系表(一对多)编号为"' +
|
|
||||||
id +
|
|
||||||
'"的数据项?'
|
|
||||||
)
|
|
||||||
.then(function () {
|
.then(function () {
|
||||||
return deleteEquipmentPlcConnect(id);
|
return deleteEquipmentPlcConnect(id);
|
||||||
})
|
})
|
||||||
|
@ -419,7 +419,7 @@ export default {
|
|||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
const id = row.id;
|
const id = row.id;
|
||||||
this.$modal
|
this.$modal
|
||||||
.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?')
|
.confirm('是否确认删除"' + row.name + '"的参数绑定?')
|
||||||
.then(function () {
|
.then(function () {
|
||||||
return deleteEquipmentPlcParam(id);
|
return deleteEquipmentPlcParam(id);
|
||||||
})
|
})
|
||||||
|
@ -25,6 +25,10 @@ export default {
|
|||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
timeDim: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -58,32 +62,58 @@ export default {
|
|||||||
tempArr = this.chartData[0].trendRespVOList
|
tempArr = this.chartData[0].trendRespVOList
|
||||||
}
|
}
|
||||||
for (let k = 0; k < tempArr.length; k++) {
|
for (let k = 0; k < tempArr.length; k++) {
|
||||||
xData.push(tempArr[k].time)
|
let time = ''
|
||||||
|
if (this.timeDim === '3') {
|
||||||
|
let year = tempArr[k].time.slice(0,4)
|
||||||
|
let weak = tempArr[k].time.slice(4,6)
|
||||||
|
time = year+' 第 '+weak+' 周'
|
||||||
|
} else {
|
||||||
|
time = tempArr[k].time
|
||||||
|
}
|
||||||
|
xData.push(time)
|
||||||
}
|
}
|
||||||
for (let i = 0; i < this.chartData.length; i++) {
|
for (let i = 0; i < this.chartData.length; i++) {
|
||||||
let obj = {
|
let obj = {
|
||||||
name: this.chartData[i].objName + this.chartData[i].objCode,
|
name: this.chartData[i].objName + this.chartData[i].objCode,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
barMaxWidth: 20,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
data: []
|
data: []
|
||||||
}
|
}
|
||||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
||||||
let temp = this.chartData[i].trendRespVOList
|
let temp = this.chartData[i].trendRespVOList
|
||||||
for (let j = 0; j < temp.length; j++) {
|
for (let j = 0; j < temp.length; j++) {
|
||||||
let num = temp[j].useNum ? temp[j].useNum : 0
|
let num = temp[j].useNum ? temp[j].useNum : ''
|
||||||
obj.data.push(num)
|
obj.data.push(num)
|
||||||
}
|
}
|
||||||
yData.push(obj)
|
yData.push(obj)
|
||||||
}
|
}
|
||||||
var option = {
|
var option = {
|
||||||
|
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '4%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '1%',
|
||||||
|
containLabel: true
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: legendData
|
data: legendData
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData
|
data: xData,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: "45"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
|
@ -25,6 +25,10 @@ export default {
|
|||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
timeDim: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -58,7 +62,15 @@ export default {
|
|||||||
tempArr = this.chartData[0].trendRespVOList
|
tempArr = this.chartData[0].trendRespVOList
|
||||||
}
|
}
|
||||||
for (let k = 0; k < tempArr.length; k++) {
|
for (let k = 0; k < tempArr.length; k++) {
|
||||||
xData.push(tempArr[k].time)
|
let time = ''
|
||||||
|
if (this.timeDim === '3') {
|
||||||
|
let year = tempArr[k].time.slice(0,4)
|
||||||
|
let weak = tempArr[k].time.slice(4,6)
|
||||||
|
time = year+' 第 '+weak+' 周'
|
||||||
|
} else {
|
||||||
|
time = tempArr[k].time
|
||||||
|
}
|
||||||
|
xData.push(time)
|
||||||
}
|
}
|
||||||
for (let i = 0; i < this.chartData.length; i++) {
|
for (let i = 0; i < this.chartData.length; i++) {
|
||||||
let obj = {
|
let obj = {
|
||||||
@ -70,22 +82,35 @@ export default {
|
|||||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
||||||
let temp = this.chartData[i].trendRespVOList
|
let temp = this.chartData[i].trendRespVOList
|
||||||
for (let j = 0; j < temp.length; j++) {
|
for (let j = 0; j < temp.length; j++) {
|
||||||
let num = temp[j].useNum ? temp[j].useNum : 0
|
let num = temp[j].useNum ? temp[j].useNum : ''
|
||||||
obj.data.push(num)
|
obj.data.push(num)
|
||||||
}
|
}
|
||||||
yData.push(obj)
|
yData.push(obj)
|
||||||
}
|
}
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
|
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '4%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '1%',
|
||||||
|
containLabel: true
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: legendData
|
data: legendData
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData
|
data: xData,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: "45"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
|
@ -135,7 +135,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="对象选择">
|
<el-form-item label="对象选择">
|
||||||
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;" size="small">
|
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple :multiple-limit='5' collapse-tags style="width: 200px;" size="small">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in objectList"
|
v-for="item in objectList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
@ -1,15 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container" id="contrastAnalysisBox">
|
<div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area :isFold="isFold" @submit="getList"/>
|
<search-area :isFold="isFold" @submit="getList"/>
|
||||||
<el-tabs v-model="activeName" @tab-click="switchChart">
|
<el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
|
||||||
<el-tab-pane label="柱状图" name="bar">
|
<el-tab-pane label="柱状图" name="bar">
|
||||||
<bar-chart ref="analysisBarChart" :chartData="chartData" />
|
<bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="折线图" name="line">
|
<el-tab-pane label="折线图" name="line">
|
||||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
<line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
<!-- 没有数据 -->
|
||||||
|
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -25,7 +27,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isFold: false,
|
isFold: false,
|
||||||
activeName: 'bar',
|
activeName: 'bar',
|
||||||
chartData: []
|
chartData: [],
|
||||||
|
timeDim: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -38,6 +41,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getList(params) {
|
getList(params) {
|
||||||
|
this.timeDim = params.timeDim
|
||||||
getCompare({ ...params }).then((res) => {
|
getCompare({ ...params }).then((res) => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
@ -60,4 +64,33 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang='scss'>
|
||||||
|
.contrastAnalysisBox {
|
||||||
|
.el-tabs__nav::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #e4e7ed;
|
||||||
|
/* z-index: 1; */
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.el-tabs__item:hover {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -57,12 +57,22 @@ export default {
|
|||||||
{
|
{
|
||||||
name: '本期',
|
name: '本期',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: []
|
data: [],
|
||||||
|
barWidth: 20,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '上期',
|
name: '上期',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: []
|
data: [],
|
||||||
|
barWidth: 20,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
for (let j = 0; j < arr.length; j++) {
|
for (let j = 0; j < arr.length; j++) {
|
||||||
@ -79,6 +89,7 @@ export default {
|
|||||||
// title: {
|
// title: {
|
||||||
// text: 'World Population'
|
// text: 'World Population'
|
||||||
// },
|
// },
|
||||||
|
color:['#288AFF','#8EF0AB'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
@ -87,8 +98,8 @@ export default {
|
|||||||
},
|
},
|
||||||
legend: {},
|
legend: {},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '1%',
|
||||||
right: '4%',
|
right: '1%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
@ -3,14 +3,18 @@
|
|||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area @submit="getList" @exportD="exportData"/>
|
<search-area @submit="getList" @exportD="exportData"/>
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
<base-table
|
<div v-show="chartData.length">
|
||||||
:table-props="tableProps"
|
<base-table
|
||||||
:table-data="list"
|
:table-props="tableProps"
|
||||||
class="qoq-out-table"
|
:table-data="list"
|
||||||
/>
|
class="qoq-out-table"
|
||||||
<div style='width: 100%;height: 300px;padding-top: 30px;'>
|
/>
|
||||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
<div style='width: 100%;height: 300px;padding-top: 30px;'>
|
||||||
|
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 没有数据 -->
|
||||||
|
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -25,6 +25,10 @@ export default {
|
|||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
timeDim: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -51,13 +55,37 @@ export default {
|
|||||||
let xData = []
|
let xData = []
|
||||||
let yData = []
|
let yData = []
|
||||||
for (let i = 0; i < this.chartData.length; i++) {
|
for (let i = 0; i < this.chartData.length; i++) {
|
||||||
xData.push(this.chartData[i].time)
|
let time = ""
|
||||||
|
if (this.timeDim === '3') {
|
||||||
|
let year = this.chartData[i].time.slice(0,4)
|
||||||
|
let weak = this.chartData[i].time.slice(4,6)
|
||||||
|
time = year+' 第 '+weak+' 周'
|
||||||
|
} else {
|
||||||
|
time = this.chartData[i].time
|
||||||
|
}
|
||||||
|
xData.push(time)
|
||||||
yData.push(this.chartData[i].useNum)
|
yData.push(this.chartData[i].useNum)
|
||||||
}
|
}
|
||||||
var option = {
|
var option = {
|
||||||
|
color:['#288AFF'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '4%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '1%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData
|
data: xData,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: "45"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
@ -65,7 +93,12 @@ export default {
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: yData,
|
data: yData,
|
||||||
type: 'bar'
|
type: 'bar',
|
||||||
|
barMaxWidth: 20,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import resize from '@/utils/chartMixins/resize'
|
import resize from '@/utils/chartMixins/resize'
|
||||||
|
import moment from 'moment'
|
||||||
export default {
|
export default {
|
||||||
name: "LineChart",
|
name: "LineChart",
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
@ -25,6 +26,10 @@ export default {
|
|||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
timeDim: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -51,14 +56,35 @@ export default {
|
|||||||
let xData = []
|
let xData = []
|
||||||
let yData = []
|
let yData = []
|
||||||
for (let i = 0; i < this.chartData.length; i++) {
|
for (let i = 0; i < this.chartData.length; i++) {
|
||||||
xData.push(this.chartData[i].time)
|
let time = ""
|
||||||
|
if (this.timeDim === '3') {
|
||||||
|
let year = this.chartData[i].time.slice(0,4)
|
||||||
|
let weak = this.chartData[i].time.slice(4,6)
|
||||||
|
time = year+' 第 '+weak+' 周'
|
||||||
|
} else {
|
||||||
|
time = this.chartData[i].time
|
||||||
|
}
|
||||||
|
xData.push(time)
|
||||||
yData.push(this.chartData[i].useNum)
|
yData.push(this.chartData[i].useNum)
|
||||||
}
|
}
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
|
color:['#288AFF'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '4%',
|
||||||
|
right: '1%',
|
||||||
|
bottom: '1%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xData
|
data: xData,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: "45"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value'
|
||||||
|
@ -1,15 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container" id="trendAnalysisBox">
|
<div class="app-container trendAnalysisBox" id="trendAnalysisBox">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area :isFold="isFold" @submit="getList"/>
|
<search-area :isFold="isFold" @submit="getList"/>
|
||||||
<el-tabs v-model="activeName" @tab-click="switchChart">
|
<el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
|
||||||
<el-tab-pane label="柱状图" name="bar">
|
<el-tab-pane label="柱状图" name="bar">
|
||||||
<bar-chart ref="analysisBarChart" :chartData="chartData" />
|
<bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="折线图" name="line">
|
<el-tab-pane label="折线图" name="line">
|
||||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
<line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
<!-- 没有数据 -->
|
||||||
|
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -25,7 +27,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isFold: false,
|
isFold: false,
|
||||||
activeName: 'bar',
|
activeName: 'bar',
|
||||||
chartData: []
|
chartData: [],
|
||||||
|
timeDim: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -37,6 +40,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getList(params) {
|
getList(params) {
|
||||||
|
this.timeDim = params.timeDim
|
||||||
getEnergyTrend({ ...params }).then((res) => {
|
getEnergyTrend({ ...params }).then((res) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.chartData = res.data
|
this.chartData = res.data
|
||||||
@ -58,4 +62,33 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang='scss'>
|
||||||
|
.trendAnalysisBox {
|
||||||
|
.el-tabs__nav::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #e4e7ed;
|
||||||
|
/* z-index: 1; */
|
||||||
|
}
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.el-tabs__item:hover {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -75,6 +75,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
var option = {
|
var option = {
|
||||||
|
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
|
||||||
legend: {
|
legend: {
|
||||||
data: keys
|
data: keys
|
||||||
},
|
},
|
||||||
@ -82,8 +83,8 @@ export default {
|
|||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '1%',
|
||||||
right: '4%',
|
right: '1%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
|
18
src/views/energy/analysis/yoyAnalysis/components/subRate.vue
Normal file
18
src/views/energy/analysis/yoyAnalysis/components/subRate.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<svg-icon icon-class="upArrow" v-show='injectData[injectData.prop] > 0'/>
|
||||||
|
<svg-icon icon-class="downArrow" v-show='injectData[injectData.prop] < 0'/>
|
||||||
|
<span style="margin-left: 5px;">{{ injectData[injectData.prop] }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'subRate',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -2,20 +2,25 @@
|
|||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
<search-area @submit="getList" @exportD="exportData"/>
|
<search-area @submit="getList" @exportD="exportData"/>
|
||||||
<div style='width: 100%;height: 300px;'>
|
<div v-show='chartData.length'>
|
||||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
<div style='width: 100%;height: 400px;'>
|
||||||
|
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||||||
|
</div>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="list"
|
||||||
|
:max-height="tableH"
|
||||||
|
class="yoy-out-table"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表格 -->
|
<!-- 没有数据 -->
|
||||||
<base-table
|
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||||
:table-props="tableProps"
|
|
||||||
:table-data="list"
|
|
||||||
:max-height="tableH"
|
|
||||||
class="yoy-out-table"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getYoy } from "@/api/analysis/energyAnalysis"
|
import { getYoy } from "@/api/analysis/energyAnalysis"
|
||||||
|
import subRate from "./components/subRate.vue"
|
||||||
import SearchArea from "./components/searchArea"
|
import SearchArea from "./components/searchArea"
|
||||||
import LineChart from "./components/lineChart"
|
import LineChart from "./components/lineChart"
|
||||||
import FileSaver from "file-saver"
|
import FileSaver from "file-saver"
|
||||||
@ -28,12 +33,12 @@ export default {
|
|||||||
chartData: [],
|
chartData: [],
|
||||||
tableProps: [],
|
tableProps: [],
|
||||||
list: [],
|
list: [],
|
||||||
tableH: this.tableHeight(500)
|
tableH: this.tableHeight(600)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.tableH = this.tableHeight(500)
|
this.tableH = this.tableHeight(600)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -65,11 +70,15 @@ export default {
|
|||||||
let obj = {}
|
let obj = {}
|
||||||
obj.prop = tempX[j].prop + '_' + nameData[i].name
|
obj.prop = tempX[j].prop + '_' + nameData[i].name
|
||||||
obj.label = nameData[i].name
|
obj.label = nameData[i].name
|
||||||
|
if (obj.label.indexOf('同比')!= -1) {
|
||||||
|
obj.subcomponent = subRate
|
||||||
|
}
|
||||||
tempX[j].children.push(obj)
|
tempX[j].children.push(obj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
|
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
|
||||||
|
console.log(this.tableProps)
|
||||||
// 数据
|
// 数据
|
||||||
this.list = []
|
this.list = []
|
||||||
for (let k = 0; k < data.length; k++) {
|
for (let k = 0; k < data.length; k++) {
|
||||||
|
@ -38,15 +38,15 @@ const tableProps = [
|
|||||||
label: '能源类型'
|
label: '能源类型'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'startNum',
|
prop: 'startValue',
|
||||||
label: '抄表数(起始)'
|
label: '抄表数(起始)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'endNum',
|
prop: 'endValue',
|
||||||
label: '抄表数(结束)'
|
label: '抄表数(结束)'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'useNum',
|
prop: 'diffValue',
|
||||||
label: '消耗量'
|
label: '消耗量'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -55,7 +55,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="graph-grid">
|
<div class="graph-grid">
|
||||||
<div class="bg-grid grid-line">
|
<div class="bg-grid grid-line">
|
||||||
<div class="grid-item" v-for="item in list.length" :key="item"></div>
|
<div
|
||||||
|
class="grid-item"
|
||||||
|
v-for="item in list.length"
|
||||||
|
:key="item"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-grid grid-charts">
|
<div class="bg-grid grid-charts">
|
||||||
@ -115,12 +118,12 @@ export default {
|
|||||||
{
|
{
|
||||||
width: 128,
|
width: 128,
|
||||||
prop: 'workTime',
|
prop: 'workTime',
|
||||||
label: '工作时长',
|
label: '工作时长[h]',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
width: 128,
|
width: 128,
|
||||||
prop: 'workRate',
|
prop: 'workRate',
|
||||||
label: '百分比',
|
label: '百分比[%]',
|
||||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -131,9 +134,9 @@ export default {
|
|||||||
{
|
{
|
||||||
width: 128,
|
width: 128,
|
||||||
prop: 'stopTime',
|
prop: 'stopTime',
|
||||||
label: '停机时长',
|
label: '停机时长[h]',
|
||||||
},
|
},
|
||||||
{ width: 128, prop: 'stopRate', label: '百分比' },
|
{ width: 128, prop: 'stopRate', label: '百分比[%]' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -142,10 +145,10 @@ export default {
|
|||||||
{
|
{
|
||||||
width: 128,
|
width: 128,
|
||||||
prop: 'downTime',
|
prop: 'downTime',
|
||||||
label: '故障时长',
|
label: '故障时长[h]',
|
||||||
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'),
|
||||||
},
|
},
|
||||||
{ width: 128, prop: 'downRate', label: '百分比' },
|
{ width: 128, prop: 'downRate', label: '百分比[%]' },
|
||||||
{
|
{
|
||||||
width: 128,
|
width: 128,
|
||||||
prop: 'timeEfficiency',
|
prop: 'timeEfficiency',
|
||||||
@ -253,7 +256,7 @@ export default {
|
|||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
param: 'recordTime',
|
param: 'timerange',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
parent: 'dateFilterType',
|
parent: 'dateFilterType',
|
||||||
@ -264,7 +267,7 @@ export default {
|
|||||||
placeholder: '选择日期',
|
placeholder: '选择日期',
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: 'yyyy-MM-dd',
|
valueFormat: 'yyyy-MM-dd',
|
||||||
param: 'recordTime',
|
param: 'timeday',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -383,22 +386,18 @@ export default {
|
|||||||
if (btnName == 'search') {
|
if (btnName == 'search') {
|
||||||
this.queryParams.factoryId = payload.factoryId || null;
|
this.queryParams.factoryId = payload.factoryId || null;
|
||||||
this.queryParams.lineId = payload.lineId || null;
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
if (payload.recordTime != null) {
|
if (0 == payload.dateFilterType) {
|
||||||
if (typeof payload.recordTime == 'string') {
|
this.queryParams.recordTime = payload.timerange;
|
||||||
if (payload.recordTime.trim() !== '') {
|
} else if (1 == payload.dateFilterType) {
|
||||||
this.queryParams.recordTime = [
|
this.queryParams.recordTime = [
|
||||||
`${payload.recordTime} 00:00:00`,
|
`${payload.timeday} 00:00:00`,
|
||||||
`${payload.recordTime} 23:59:59`,
|
`${payload.timeday} 23:59:59`,
|
||||||
];
|
];
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.queryParams.recordTime = payload.recordTime;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.queryParams.recordTime = null;
|
|
||||||
}
|
}
|
||||||
this.getList();
|
} else {
|
||||||
|
this.queryParams.recordTime = null;
|
||||||
}
|
}
|
||||||
|
this.getList();
|
||||||
},
|
},
|
||||||
|
|
||||||
cancel() {
|
cancel() {
|
||||||
|
@ -155,7 +155,7 @@ export default {
|
|||||||
async getList() {
|
async getList() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
// 执行查询
|
// 执行查询
|
||||||
const { data } = await this.$axios({
|
const { code, data } = await this.$axios({
|
||||||
url: '/analysis/equipment-analysis/efficiency',
|
url: '/analysis/equipment-analysis/efficiency',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: {
|
params: {
|
||||||
@ -163,6 +163,11 @@ export default {
|
|||||||
recordTime: this.queryParams.recordTime || null,
|
recordTime: this.queryParams.recordTime || null,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
if (code === 0) {
|
||||||
|
this.list = data;
|
||||||
|
} else {
|
||||||
|
this.list.splice(0);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSearchBarBtnClick(btn) {
|
handleSearchBarBtnClick(btn) {
|
||||||
|
@ -37,8 +37,14 @@ export default {
|
|||||||
option() {
|
option() {
|
||||||
const opt = [];
|
const opt = [];
|
||||||
this.list.map((eq) => {
|
this.list.map((eq) => {
|
||||||
/** [设备名, ok数量, 不ok数量] */
|
/** [设备名, ok数量, 不ok数量, 加工数量, 合格率] */
|
||||||
opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
|
opt.push([
|
||||||
|
eq.equipmentName,
|
||||||
|
eq.okQuantity,
|
||||||
|
eq.nokQuantity,
|
||||||
|
eq.totalQuantity,
|
||||||
|
eq.passRate.toFixed(4),
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
color: ['#288AFF', '#8EF0AB'],
|
color: ['#288AFF', '#8EF0AB'],
|
||||||
@ -47,11 +53,35 @@ export default {
|
|||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow',
|
type: 'shadow',
|
||||||
},
|
},
|
||||||
|
formatter: (params) => {
|
||||||
|
const name = params[0].name;
|
||||||
|
const goodRate = opt.find((item) => item[0] == name)[4];
|
||||||
|
return `
|
||||||
|
<h1 style="font-size: 18px; letter-spacing: 1px;">${
|
||||||
|
params[0].axisValue
|
||||||
|
} <small>${goodRate}%</small></h1>
|
||||||
|
<ul style="margin: 0; padding: 0; min-width: 128px;">
|
||||||
|
${params
|
||||||
|
.map(
|
||||||
|
(item, index) => `
|
||||||
|
<li style="list-style: none; display: flex; justify-content: space-between; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 5px;"></span>
|
||||||
|
${item.seriesName}
|
||||||
|
</div>
|
||||||
|
${item.value}
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
)
|
||||||
|
.join('')}
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 12,
|
itemHeight: 12,
|
||||||
right: 0
|
right: 0,
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '1%',
|
||||||
@ -104,6 +134,17 @@ export default {
|
|||||||
stack: 's',
|
stack: 's',
|
||||||
data: opt.map((item) => item[2]),
|
data: opt.map((item) => item[2]),
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: '加工数量',
|
||||||
|
// type: 'bar',
|
||||||
|
// barWidth: 20,
|
||||||
|
// data: opt.map((item) => item[3]),
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '合格率',
|
||||||
|
// type: 'line',
|
||||||
|
// data: opt.map((item) => item[4]),
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -31,7 +31,8 @@
|
|||||||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
|
<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>
|
<div class="blue-title">各设备加工数量</div>
|
||||||
<LineChart :list="list" />
|
<LineChart v-if="list && list.length" :list="list" />
|
||||||
|
<div v-else class="no-data-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
191
src/views/equipment/timing-diagram/components/gantt.js
Normal file
191
src/views/equipment/timing-diagram/components/gantt.js
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
|
||||||
|
// filename: gantt.vue
|
||||||
|
// author: liubin
|
||||||
|
// date: 2023 -09 - 25 14: 28: 12
|
||||||
|
// description: 甘特图
|
||||||
|
|
||||||
|
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {*} params
|
||||||
|
* @param {*} api
|
||||||
|
*
|
||||||
|
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
|
||||||
|
*/
|
||||||
|
function renderItem(params, api) { }
|
||||||
|
|
||||||
|
export default class Gantt {
|
||||||
|
constructor(el) {
|
||||||
|
this.chart = echarts.init(el);
|
||||||
|
let options = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'custom',
|
||||||
|
coordinateSystem: 'cartesian2d',
|
||||||
|
renderItem: renderItem,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.chart.setOption(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(options) {
|
||||||
|
this.chart.setOption(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
resize() {
|
||||||
|
// todo
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.chart.dispose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var data = [];
|
||||||
|
var categories = ['设备1', '设备2', '设备3'];
|
||||||
|
var types = [
|
||||||
|
{ name: '运行', color: '#7b9ce1' },
|
||||||
|
{ name: '故障', color: '#bd6d6c' },
|
||||||
|
{ name: '停机', color: '#75d874' },
|
||||||
|
];
|
||||||
|
// return new Date(new Date(timestamp).toLocaleDateString()).getTime()
|
||||||
|
// })(1691568181000))
|
||||||
|
function getStartTime(timestamp) {
|
||||||
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
data.push({
|
||||||
|
name: 'running',
|
||||||
|
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function renderItem(params, api) {
|
||||||
|
var categoryIndex = api.value(0);
|
||||||
|
var start = api.coord([api.value(1), categoryIndex]);
|
||||||
|
var end = api.coord([api.value(2), categoryIndex]);
|
||||||
|
var height = api.size([0, 1])[1] * 0.8;
|
||||||
|
var rectShape = echarts.graphic.clipRectByRect(
|
||||||
|
{
|
||||||
|
x: start[0],
|
||||||
|
y: start[1] - height / 2,
|
||||||
|
width: end[0] - start[0],
|
||||||
|
height: height
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: params.coordSys.x,
|
||||||
|
y: params.coordSys.y,
|
||||||
|
width: params.coordSys.width,
|
||||||
|
height: params.coordSys.height
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
rectShape && {
|
||||||
|
type: 'rect',
|
||||||
|
transition: ['shape'],
|
||||||
|
shape: rectShape,
|
||||||
|
style: api.style()
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
// show: false,
|
||||||
|
formatter: function (params) {
|
||||||
|
return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// title: {
|
||||||
|
// text: 'Profile',
|
||||||
|
// left: 'center'
|
||||||
|
// },
|
||||||
|
// dataZoom: [
|
||||||
|
// {
|
||||||
|
// type: 'slider',
|
||||||
|
// filterMode: 'weakFilter',
|
||||||
|
// showDataShadow: false,
|
||||||
|
// top: 400,
|
||||||
|
// labelFormatter: ''
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'inside',
|
||||||
|
// filterMode: 'weakFilter'
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
grid: {
|
||||||
|
height: 300
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
min: getStartTime(1691568181000),
|
||||||
|
max: getStartTime(1691568181000 + 3600 * 24 * 1000),
|
||||||
|
splitNumber: 10,
|
||||||
|
// interval: 60*3600*1000,
|
||||||
|
// scale: true,
|
||||||
|
axisLabel: {
|
||||||
|
// rotate: -15,
|
||||||
|
formatter: function (val) {
|
||||||
|
return new Date(val).toLocaleTimeString()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
axisLine: {
|
||||||
|
// show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: categories
|
||||||
|
}, {
|
||||||
|
axisLine: {
|
||||||
|
// show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: renderItem,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.8
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
x: [1, 2],
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
@ -8,7 +8,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="production-timegraph-container"
|
class="production-timegraph-container"
|
||||||
style="background: #f2f4f9; flex: 1">
|
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
|
||||||
<el-row
|
<el-row
|
||||||
class=""
|
class=""
|
||||||
style="
|
style="
|
||||||
@ -24,12 +24,16 @@
|
|||||||
:formConfigs="searchBarFormConfig"
|
:formConfigs="searchBarFormConfig"
|
||||||
ref="search-bar"
|
ref="search-bar"
|
||||||
:remove-blue="true"
|
:remove-blue="true"
|
||||||
|
@select-changed="handleSearchBarChanged"
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row
|
<el-row
|
||||||
class=""
|
class=""
|
||||||
style="
|
style="
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 16px 16px 24px;
|
padding: 16px 16px 24px;
|
||||||
@ -37,7 +41,7 @@
|
|||||||
">
|
">
|
||||||
<div class="blue-title">设备产量时序图</div>
|
<div class="blue-title">设备产量时序图</div>
|
||||||
|
|
||||||
<div class="main-area">
|
<div class="main-area" style="flex: 1">
|
||||||
<div class="graphs" v-if="graphList.length">
|
<div class="graphs" v-if="graphList.length">
|
||||||
<LineChart :config="templateConfig" />
|
<LineChart :config="templateConfig" />
|
||||||
</div>
|
</div>
|
||||||
@ -70,6 +74,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LineChart from './components/lineChart.vue';
|
import LineChart from './components/lineChart.vue';
|
||||||
|
import response from './response.json';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SGProduction',
|
name: 'SGProduction',
|
||||||
@ -77,6 +82,7 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
startTime: null, // new Date(2023, 8, 26, 0, 0, 0, 0).getTime(),
|
||||||
accumulators: new Map(),
|
accumulators: new Map(),
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
{
|
{
|
||||||
@ -85,6 +91,7 @@ export default {
|
|||||||
placeholder: '请选择产线',
|
placeholder: '请选择产线',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
param: 'lineId',
|
param: 'lineId',
|
||||||
|
onchange: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -108,6 +115,7 @@ export default {
|
|||||||
// defaultTime: ['00:00:00', '23:59:59'],
|
// defaultTime: ['00:00:00', '23:59:59'],
|
||||||
placeholder: '选择日期',
|
placeholder: '选择日期',
|
||||||
param: 'recordTime',
|
param: 'recordTime',
|
||||||
|
required: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
@ -136,7 +144,18 @@ export default {
|
|||||||
eqList: [],
|
eqList: [],
|
||||||
graphList: [],
|
graphList: [],
|
||||||
templateConfig: {
|
templateConfig: {
|
||||||
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
|
color: [
|
||||||
|
'#283D68',
|
||||||
|
'#FFB61F',
|
||||||
|
'#4481FF',
|
||||||
|
'#5AD8A6',
|
||||||
|
'#E97466',
|
||||||
|
'#ccc', //<=== 需按情况更新
|
||||||
|
'#ccc',
|
||||||
|
'#ccc',
|
||||||
|
'#ccc',
|
||||||
|
'#ccc',
|
||||||
|
],
|
||||||
grid: {
|
grid: {
|
||||||
top: 48,
|
top: 48,
|
||||||
left: 48,
|
left: 48,
|
||||||
@ -159,25 +178,30 @@ export default {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
show: true,
|
show: true,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
formatter: function (params) {
|
||||||
xAxis: {
|
return `
|
||||||
type: 'category',
|
<div style="margin-bottom: 8px;">${new Date(
|
||||||
boundaryGap: true,
|
+params[0].name
|
||||||
axisTick: {
|
).toLocaleTimeString()}</div>
|
||||||
// show: false,
|
${params
|
||||||
alignWithLabel: true,
|
.map(({ seriesName, color, data }) =>
|
||||||
lineStyle: {
|
data != null
|
||||||
color: '#0003',
|
? `
|
||||||
},
|
<div style="min-width: 160px; display: flex; justify-content: space-between; align-items: center;">
|
||||||
|
<span style="display: flex; align-items: center;">
|
||||||
|
<span style="display: inline-block; margin-right: 8px; width: 12px; height: 12px; background: ${color}"></span>
|
||||||
|
<span style="">${seriesName}</span>
|
||||||
|
</span>
|
||||||
|
<span style="color: #c7c7c7; text-align: right;">${data}</span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
.join('')}
|
||||||
|
`;
|
||||||
},
|
},
|
||||||
axisLabel: {
|
|
||||||
color: '#0007',
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
// data: Array(24)
|
|
||||||
// .fill(1)
|
|
||||||
// .map((item, index) => `${index}:00`),
|
|
||||||
},
|
},
|
||||||
|
xAxis: null,
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '产量',
|
name: '产量',
|
||||||
@ -186,9 +210,12 @@ export default {
|
|||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
align: 'center',
|
align: 'center',
|
||||||
},
|
},
|
||||||
nameGap: 26,
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
max: function (value) {
|
max: function (value) {
|
||||||
return value.max + Math.floor(value.max / 5);
|
return value.max + Math.ceil(value.max / 4);
|
||||||
|
// return value.max + 50
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -223,16 +250,29 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
timeArr() {
|
||||||
|
return Array(24)
|
||||||
|
.fill(this.startTime)
|
||||||
|
.map((time, index) => time + index * 3600000);
|
||||||
|
},
|
||||||
|
},
|
||||||
created() {
|
created() {
|
||||||
this.initProductline();
|
this.initProductline();
|
||||||
this.initWorksection();
|
this.initWorksection();
|
||||||
this.initEquipment();
|
this.initEquipment();
|
||||||
this.getList();
|
// this.getList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
switch (btnName) {
|
switch (btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
|
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||||
|
this.$message.error('请选择时间段');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.startTime = new Date(payload.recordTime).getTime();
|
||||||
|
|
||||||
this.queryParams.lineId = payload.lineId || null;
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
this.queryParams.sectionId = payload.sectionId || null;
|
this.queryParams.sectionId = payload.sectionId || null;
|
||||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||||
@ -250,6 +290,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleSearchBarChanged({ param, value }) {
|
||||||
|
if (!value) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (param) {
|
||||||
|
case 'lineId':
|
||||||
|
this.getWorksectionById(value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/** 重置查询条件 */
|
/** 重置查询条件 */
|
||||||
initQuery() {
|
initQuery() {
|
||||||
this.queryParams.lineId = null;
|
this.queryParams.lineId = null;
|
||||||
@ -267,43 +319,74 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
initState() {
|
||||||
|
this.accumulators = new Map();
|
||||||
|
this.templateConfig.series = [];
|
||||||
|
},
|
||||||
|
|
||||||
async getList() {
|
async getList() {
|
||||||
|
this.initState();
|
||||||
|
|
||||||
const { code, data } = await this.$axios({
|
const { code, data } = await this.$axios({
|
||||||
url: '/analysis/equipment-analysis/quantity',
|
url: '/analysis/equipment-analysis/quantity',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: this.queryParams,
|
params: this.queryParams,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// const { code, data } = response;
|
||||||
if (code == 0) {
|
if (code == 0) {
|
||||||
this.graphList = this.objectToArray(data);
|
this.graphList = this.objectToArray(data);
|
||||||
// const eq1 = [
|
this.setXaxis();
|
||||||
// { totalQuantity: 20, startTime: 1693964578000 },
|
|
||||||
// { totalQuantity: 43, startTime: 1693964678000 },
|
|
||||||
// { totalQuantity: 12, startTime: 1693964778000 },
|
|
||||||
// { totalQuantity: 11, startTime: 1693964878000 },
|
|
||||||
// { totalQuantity: 98, startTime: 1693965478000 },
|
|
||||||
// { totalQuantity: 87, startTime: 1693965578000 },
|
|
||||||
// ];
|
|
||||||
// eq1.key = 'SS1';
|
|
||||||
// const eq2 = [
|
|
||||||
// { totalQuantity: 23, startTime: 1693961578000 },
|
|
||||||
// { totalQuantity: 42, startTime: 1693964578000 },
|
|
||||||
// { totalQuantity: 51, startTime: 1693965578000 },
|
|
||||||
// { totalQuantity: 18, startTime: 1693966578000 },
|
|
||||||
// { totalQuantity: 77, startTime: 1693966778000 },
|
|
||||||
// { totalQuantity: 38, startTime: 1693967578000 },
|
|
||||||
// { totalQuantity: 57, startTime: 1693969578000 },
|
|
||||||
// ];
|
|
||||||
// eq2.key = 'SS2';
|
|
||||||
// this.graphList = [eq1, eq2];
|
|
||||||
|
|
||||||
this.graphList.forEach(this.setSeries);
|
this.graphList.forEach(this.setSeries);
|
||||||
} else {
|
} else {
|
||||||
this.graphList = [];
|
this.graphList = [];
|
||||||
this.graphList.forEach(this.setSeries);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setSeries(eqArr) {
|
setXaxis() {
|
||||||
|
const xaxis = {
|
||||||
|
type: 'category',
|
||||||
|
// interval: 12,
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#0003',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: function (value, index) {
|
||||||
|
return new Date(+value)
|
||||||
|
.toLocaleTimeString()
|
||||||
|
.split(':')
|
||||||
|
.slice(0, 2)
|
||||||
|
.join(':');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.timeArr,
|
||||||
|
};
|
||||||
|
this.templateConfig.xAxis = xaxis;
|
||||||
|
},
|
||||||
|
|
||||||
|
setYaxis() {},
|
||||||
|
|
||||||
|
setSeries(list) {
|
||||||
|
const data = Array(24).fill(null);
|
||||||
|
list.map((item, index) => {
|
||||||
|
const idx = this.timeArr.indexOf(item.startTime);
|
||||||
|
if (idx != -1) {
|
||||||
|
data[idx] = item.totalQuantity;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const seriesItem = {
|
||||||
|
name: list.key,
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle',
|
||||||
|
data,
|
||||||
|
};
|
||||||
|
this.templateConfig.series.push(seriesItem);
|
||||||
|
},
|
||||||
|
|
||||||
|
setSeriesOld(eqArr) {
|
||||||
if (eqArr.length == 0) {
|
if (eqArr.length == 0) {
|
||||||
this.templateConfig.series = [];
|
this.templateConfig.series = [];
|
||||||
return;
|
return;
|
||||||
@ -330,18 +413,6 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 获得设备产量 */
|
|
||||||
getEquipmentQuantity(equipmentArr) {
|
|
||||||
return equipmentArr.map((item) => item.totalQuantity);
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 获得设备产量的时间 */
|
|
||||||
getTimeinfo(equipmentArr) {
|
|
||||||
return equipmentArr.map((item) =>
|
|
||||||
new Date(item.startTime).toLocaleTimeString()
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 准备设备数据 */
|
/** 准备设备数据 */
|
||||||
async initEquipment() {
|
async initEquipment() {
|
||||||
const { code, data } = await this.$axios({
|
const { code, data } = await this.$axios({
|
||||||
@ -390,6 +461,25 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/** 根据产线获取工段 */
|
||||||
|
async getWorksectionById(lineId) {
|
||||||
|
const { code, data } = await this.$axios({
|
||||||
|
url: '/base/workshop-section/listByParentId',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
id: lineId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
async submitForm() {
|
async submitForm() {
|
||||||
const { code, data } = await this.$axios({
|
const { code, data } = await this.$axios({
|
||||||
url: '/analysis/equipment-analysis/quantity',
|
url: '/analysis/equipment-analysis/quantity',
|
||||||
|
333
src/views/equipment/timing-diagram/output/response.json
Normal file
333
src/views/equipment/timing-diagram/output/response.json
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
{
|
||||||
|
"code": 0,
|
||||||
|
"data": {
|
||||||
|
"上片机": [
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695657600000,
|
||||||
|
"startTime": 1695657600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 189,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 189,
|
||||||
|
"nokQuantity": 11,
|
||||||
|
"recordTime": 1695661200000,
|
||||||
|
"startTime": 1695661200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 198,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 198,
|
||||||
|
"nokQuantity": 2,
|
||||||
|
"recordTime": 1695664800000,
|
||||||
|
"startTime": 1695664800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 197,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 197,
|
||||||
|
"nokQuantity": 3,
|
||||||
|
"recordTime": 1695668400000,
|
||||||
|
"startTime": 1695668400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695672000000,
|
||||||
|
"startTime": 1695672000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 170,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 170,
|
||||||
|
"nokQuantity": 30,
|
||||||
|
"recordTime": 1695675600000,
|
||||||
|
"startTime": 1695675600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695679200000,
|
||||||
|
"startTime": 1695679200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695682800000,
|
||||||
|
"startTime": 1695682800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 195,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 195,
|
||||||
|
"nokQuantity": 5,
|
||||||
|
"recordTime": 1695686400000,
|
||||||
|
"startTime": 1695686400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 198,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 198,
|
||||||
|
"nokQuantity": 2,
|
||||||
|
"recordTime": 1695690000000,
|
||||||
|
"startTime": 1695690000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695693600000,
|
||||||
|
"startTime": 1695693600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 197,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 197,
|
||||||
|
"nokQuantity": 3,
|
||||||
|
"recordTime": 1695697200000,
|
||||||
|
"startTime": 1695697200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 197,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 197,
|
||||||
|
"nokQuantity": 3,
|
||||||
|
"recordTime": 1695700800000,
|
||||||
|
"startTime": 1695700800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 196,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 196,
|
||||||
|
"nokQuantity": 4,
|
||||||
|
"recordTime": 1695704400000,
|
||||||
|
"startTime": 1695704400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 193,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 193,
|
||||||
|
"nokQuantity": 7,
|
||||||
|
"recordTime": 1695708000000,
|
||||||
|
"startTime": 1695708000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 190,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 190,
|
||||||
|
"nokQuantity": 10,
|
||||||
|
"recordTime": 1695711600000,
|
||||||
|
"startTime": 1695711600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695715200000,
|
||||||
|
"startTime": 1695715200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695718800000,
|
||||||
|
"startTime": 1695718800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695722400000,
|
||||||
|
"startTime": 1695722400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 198,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 198,
|
||||||
|
"nokQuantity": 2,
|
||||||
|
"recordTime": 1695726000000,
|
||||||
|
"startTime": 1695726000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695729600000,
|
||||||
|
"startTime": 1695729600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 189,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 189,
|
||||||
|
"nokQuantity": 11,
|
||||||
|
"recordTime": 1695733200000,
|
||||||
|
"startTime": 1695733200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 179,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 179,
|
||||||
|
"nokQuantity": 21,
|
||||||
|
"recordTime": 1695736800000,
|
||||||
|
"startTime": 1695736800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695740400000,
|
||||||
|
"startTime": 1695740400000
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"下片机": [
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 190,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 190,
|
||||||
|
"nokQuantity": 10,
|
||||||
|
"recordTime": 1695672000000,
|
||||||
|
"startTime": 1695672000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 177,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 177,
|
||||||
|
"nokQuantity": 23,
|
||||||
|
"recordTime": 1695675600000,
|
||||||
|
"startTime": 1695675600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 198,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 198,
|
||||||
|
"nokQuantity": 2,
|
||||||
|
"recordTime": 1695679200000,
|
||||||
|
"startTime": 1695679200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695682800000,
|
||||||
|
"startTime": 1695682800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 185,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 185,
|
||||||
|
"nokQuantity": 15,
|
||||||
|
"recordTime": 1695686400000,
|
||||||
|
"startTime": 1695686400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 198,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 198,
|
||||||
|
"nokQuantity": 2,
|
||||||
|
"recordTime": 1695690000000,
|
||||||
|
"startTime": 1695690000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695693600000,
|
||||||
|
"startTime": 1695693600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 193,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 193,
|
||||||
|
"nokQuantity": 7,
|
||||||
|
"recordTime": 1695697200000,
|
||||||
|
"startTime": 1695697200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695700800000,
|
||||||
|
"startTime": 1695700800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 200,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 200,
|
||||||
|
"nokQuantity": 0,
|
||||||
|
"recordTime": 1695704400000,
|
||||||
|
"startTime": 1695704400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 192,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 192,
|
||||||
|
"nokQuantity": 8,
|
||||||
|
"recordTime": 1695708000000,
|
||||||
|
"startTime": 1695708000000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"inQuantity": 200,
|
||||||
|
"totalQuantity": 199,
|
||||||
|
"outQuantity": 200,
|
||||||
|
"okQuantity": 199,
|
||||||
|
"nokQuantity": 1,
|
||||||
|
"recordTime": 1695711600000,
|
||||||
|
"startTime": 1695711600000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
280
src/views/equipment/timing-diagram/status/demo.html
Normal file
280
src/views/equipment/timing-diagram/status/demo.html
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
<!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: #ccc3; 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,
|
||||||
|
},
|
||||||
|
// 截取矩形
|
||||||
|
{
|
||||||
|
// 截取掉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: 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: 'axis',
|
||||||
|
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 `
|
||||||
|
<h1 style="font-size: 18px; font-weight: 600; letter-spacing: 1px;">${params[0].name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params[0].color} "></span></h1>
|
||||||
|
<div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
top: 10,
|
||||||
|
left: 128,
|
||||||
|
right: 64,
|
||||||
|
height: 56,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 1,
|
||||||
|
// top: 80,
|
||||||
|
// height: 56,
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
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: 1,
|
||||||
|
gridIndex: 0,
|
||||||
|
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 },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '设备1',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: renderItem,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
x: [1, 2],
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
//function getTimestamp(point) {
|
||||||
|
// const t = new Date();
|
||||||
|
// const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()]
|
||||||
|
// const [h,M] = point.split(':')
|
||||||
|
// return new Date(y,m,d,h,M,0,0).getTime()
|
||||||
|
//}
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
// 01:00 ~ 05:00
|
||||||
|
name: '运行',
|
||||||
|
value: [0, 1695747600000, 1695762000000, 0],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 5:00 ~ 8:00
|
||||||
|
name: '故障',
|
||||||
|
value: [0, 1695762000000, 1695772800000, 0],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[1].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 8:00 ~ 8:39
|
||||||
|
name: '计划停机',
|
||||||
|
value: [0, 1695772800000, 1695775140000, 0],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[2].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 08:39 ~ 18:00
|
||||||
|
name: '运行',
|
||||||
|
value: [0, 1695775140000, 1695808800000, 0],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 18:00 ~ 23:30
|
||||||
|
name: '计划停机',
|
||||||
|
value: [0, 1695808800000, 1695828600000, 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>
|
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
0
src/views/equipment/timing-diagram/status/demo.js
Normal file
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
235
src/views/equipment/timing-diagram/status/gantt.js
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
|
||||||
|
function renderItem(params, api) {
|
||||||
|
var categoryIndex = api.value(0);
|
||||||
|
var start = api.coord([api.value(1), categoryIndex]);
|
||||||
|
var end = api.coord([api.value(2), categoryIndex]);
|
||||||
|
var height = api.size([0, 1])[1] * 1;
|
||||||
|
// var height = api.size([0, 1])[1] * 0.8;
|
||||||
|
// var height = 56;
|
||||||
|
var rectShape = echarts.graphic.clipRectByRect(
|
||||||
|
{
|
||||||
|
x: start[0],
|
||||||
|
y: start[1] - height / 2,
|
||||||
|
width: end[0] - start[0],
|
||||||
|
height: height,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: params.coordSys.x,
|
||||||
|
y: params.coordSys.y,
|
||||||
|
width: params.coordSys.width,
|
||||||
|
height: params.coordSys.height,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
rectShape && {
|
||||||
|
type: 'rect',
|
||||||
|
transition: ['shape'],
|
||||||
|
shape: rectShape,
|
||||||
|
style: api.style(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** 颜色配置 */
|
||||||
|
const types = [
|
||||||
|
{ name: '运行', color: '#5ad8a6' },
|
||||||
|
{ name: '故障', color: '#fc9c91' },
|
||||||
|
{ name: '计划停机', color: '#000' },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
/** 从时间戳获取 startTime */
|
||||||
|
function getStartTime(timestamp) {
|
||||||
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default class GanttGraph {
|
||||||
|
constructor(el) {
|
||||||
|
this.chart = null;
|
||||||
|
this.el = el;
|
||||||
|
/** 默认配置 */
|
||||||
|
this.grid = {
|
||||||
|
top: 32,
|
||||||
|
left: 128,
|
||||||
|
right: 128,
|
||||||
|
bottom: 64,
|
||||||
|
}
|
||||||
|
this.tooltip = {
|
||||||
|
formatter: function (params) {
|
||||||
|
return (
|
||||||
|
params.marker +
|
||||||
|
params.name +
|
||||||
|
': ' +
|
||||||
|
new Date(params.value[1]).toLocaleTimeString() +
|
||||||
|
' - ' +
|
||||||
|
new Date(params.value[2]).toLocaleTimeString()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'time',
|
||||||
|
min: getStartTime(1691568181000), // <===
|
||||||
|
max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
|
||||||
|
splitNumber: 10,
|
||||||
|
axisLabel: {
|
||||||
|
// rotate: -15,
|
||||||
|
formatter: function (val) {
|
||||||
|
return new Date(val).toLocaleTimeString();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
interval: 40,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
// data: [], // <====
|
||||||
|
data: ['设备1', '设备2', '设备3', '设备4'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: renderItem,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
x: [1, 2],
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
// data: [], // <===
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
0,
|
||||||
|
1691568181000,
|
||||||
|
1691568181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '计划停机',
|
||||||
|
value: [
|
||||||
|
0,
|
||||||
|
1691578581000,
|
||||||
|
1691578581000 + 10 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[2].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
1,
|
||||||
|
1691568181000,
|
||||||
|
1691568181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '故障',
|
||||||
|
value: [
|
||||||
|
2,
|
||||||
|
1691538181000,
|
||||||
|
1691538181000 + 60 * 60 * 1000,
|
||||||
|
60 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[1].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '运行',
|
||||||
|
value: [
|
||||||
|
2,
|
||||||
|
1691578181000,
|
||||||
|
1691578181000 + 90 * 60 * 1000,
|
||||||
|
90 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[0].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '计划停机',
|
||||||
|
value: [
|
||||||
|
3,
|
||||||
|
1691528181000,
|
||||||
|
1691528181000 + 240 * 60 * 1000,
|
||||||
|
240 * 10 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[2].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.chart = echarts.init(this.el);
|
||||||
|
this.chart.setOption(this.getOption())
|
||||||
|
}
|
||||||
|
|
||||||
|
getOption() {
|
||||||
|
const { grid, xAxis, yAxis, series, tooltip } = this;
|
||||||
|
return {
|
||||||
|
grid, xAxis, yAxis, series, tooltip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -6,7 +6,9 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
|
<div
|
||||||
|
class="status-timegraph-container"
|
||||||
|
style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
|
||||||
<el-row
|
<el-row
|
||||||
class=""
|
class=""
|
||||||
style="
|
style="
|
||||||
@ -22,16 +24,21 @@
|
|||||||
:formConfigs="searchBarFormConfig"
|
:formConfigs="searchBarFormConfig"
|
||||||
ref="search-bar"
|
ref="search-bar"
|
||||||
:remove-blue="true"
|
:remove-blue="true"
|
||||||
|
@select-changed="handleSearchBarSelectChange"
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row
|
<el-row
|
||||||
class=""
|
class=""
|
||||||
style="
|
style="
|
||||||
|
height: 1px;
|
||||||
|
flex: 1;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 16px 16px 32px;
|
padding: 16px 16px 32px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
">
|
">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
@ -64,43 +71,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div class="main-area">
|
<div
|
||||||
<div class="graphs" v-if="graphList.length">
|
class="main-area"
|
||||||
<div class="graph" v-for="eq in graphList" :key="eq.key">
|
style="flex: 1; display: flex; flex-direction: column">
|
||||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
<div
|
||||||
|
class="graphs"
|
||||||
<div class="graph-content">
|
v-show="graphList.length"
|
||||||
<el-popover
|
id="status-chart"
|
||||||
trigger="hover"
|
style="height: 1px; flex: 1"></div>
|
||||||
v-for="blc in eq"
|
<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
|
||||||
:key="blc.startTime"
|
|
||||||
:title="
|
|
||||||
blc.status == 0
|
|
||||||
? '运行'
|
|
||||||
: blc.status == 2
|
|
||||||
? '故障'
|
|
||||||
: '计划停机'
|
|
||||||
"
|
|
||||||
placement="top"
|
|
||||||
:content="new Date(blc.startTime).toLocaleTimeString()">
|
|
||||||
<div
|
|
||||||
slot="reference"
|
|
||||||
:key="blc.startTime + '__div'"
|
|
||||||
class="graph-item-fixed tick"
|
|
||||||
:class="{
|
|
||||||
running: blc.status == 0,
|
|
||||||
fault: blc.status == 2,
|
|
||||||
stop: blc.status == 1,
|
|
||||||
}"
|
|
||||||
:style="{ height: '32px', width: blc.duration * 2 + 'px' }"
|
|
||||||
:data-time="
|
|
||||||
new Date(blc.startTime).toLocaleTimeString()
|
|
||||||
"></div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2 v-else>请添加设备</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
@ -128,12 +107,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// import * as echarts from 'echarts';
|
||||||
|
import Gantt from './gantt';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SGStatus',
|
name: 'SGStatus',
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
chart: null,
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -141,6 +124,7 @@ export default {
|
|||||||
placeholder: '请选择产线',
|
placeholder: '请选择产线',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
param: 'lineId',
|
param: 'lineId',
|
||||||
|
onchange: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
@ -153,16 +137,13 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
label: '时间段',
|
label: '时间段',
|
||||||
dateType: 'daterange', // datetimerange
|
dateType: 'date',
|
||||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
// valueFormat: 'timestamp',
|
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始日期',
|
placeholder: '选择日期',
|
||||||
endPlaceholder: '结束日期',
|
|
||||||
defaultTime: ['00:00:00', '23:59:59'],
|
|
||||||
param: 'recordTime',
|
param: 'recordTime',
|
||||||
|
required: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
@ -185,11 +166,13 @@ export default {
|
|||||||
lineId: null,
|
lineId: null,
|
||||||
sectionId: null,
|
sectionId: null,
|
||||||
equipmentId: null,
|
equipmentId: null,
|
||||||
recordTime: [],
|
recordTime: null,
|
||||||
},
|
},
|
||||||
graphList: [],
|
graphList: [],
|
||||||
open: false,
|
open: false,
|
||||||
eqList: [],
|
eqList: [],
|
||||||
|
startTime: null,
|
||||||
|
gantt: null
|
||||||
// demo: [
|
// demo: [
|
||||||
// [
|
// [
|
||||||
// {
|
// {
|
||||||
@ -217,15 +200,85 @@ export default {
|
|||||||
this.initProductline();
|
this.initProductline();
|
||||||
this.initWorksection();
|
this.initWorksection();
|
||||||
this.initEquipment();
|
this.initEquipment();
|
||||||
this.getList();
|
// this.getList();
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
graphList: {
|
||||||
|
handler(val) {
|
||||||
|
if (val && val.length) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (!this.chart) this.initChart();
|
||||||
|
this.setInitialConfig();
|
||||||
|
this.handleGraphList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
setInitialConfig() {
|
||||||
|
console.log('in setInitialConfig', this.chartOption);
|
||||||
|
this.chart.setOption(this.chartOption);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleGraphList() {
|
||||||
|
console.log('in handleGraphList:', this.graphList);
|
||||||
|
return;
|
||||||
|
const min = this.queryParams.recordTime
|
||||||
|
? new Date(this.queryParams.recordTime).getTime()
|
||||||
|
: this.findMin();
|
||||||
|
|
||||||
|
console.log('min is', min);
|
||||||
|
this.chartOption.xAxis.min = getStartTime(min);
|
||||||
|
this.chartOption.xAxis.max = getStartTime(min + 3600 * 24 * 1000);
|
||||||
|
this.graphList.forEach((arr) => {
|
||||||
|
this.chartOption.yAxis[0].data.push(arr.key);
|
||||||
|
arr.forEach((item) => {
|
||||||
|
this.chartOption.series[0].data.push({
|
||||||
|
name: ['运行', '故障', '计划停机'][item.status],
|
||||||
|
value: [
|
||||||
|
0,
|
||||||
|
item.startTime,
|
||||||
|
item.startTime + item.duration * 60 * 1000,
|
||||||
|
item.duration * 60 * 1000,
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: types[item.status].color,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
console.log('chartOptions', this.chartOption);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
findMin() {
|
||||||
|
let min = 0;
|
||||||
|
this.graphList.forEach((arr) => {
|
||||||
|
arr.forEach((item) => {
|
||||||
|
if (min < item.startTime) min = item.startTime;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return min;
|
||||||
|
},
|
||||||
|
|
||||||
|
initChart() {
|
||||||
|
const el = document.getElementById('status-chart');
|
||||||
|
this.gantt = new Gantt(el);
|
||||||
|
this.gantt.init();
|
||||||
|
},
|
||||||
|
|
||||||
/** 重置查询条件 */
|
/** 重置查询条件 */
|
||||||
initQuery() {
|
initQuery() {
|
||||||
this.queryParams.lineId = null;
|
this.queryParams.lineId = null;
|
||||||
this.queryParams.equipmentId = null;
|
this.queryParams.equipmentId = null;
|
||||||
this.queryParams.sectionId = null;
|
this.queryParams.sectionId = null;
|
||||||
this.queryParams.recordTime = [];
|
this.queryParams.recordTime = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 对象到数组的转换 */
|
/** 对象到数组的转换 */
|
||||||
@ -297,13 +350,62 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleSearchBarSelectChange({ param, value }) {
|
||||||
|
if (!value) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (param) {
|
||||||
|
case 'lineId':
|
||||||
|
this.$axios({
|
||||||
|
url: '/base/workshop-section/listByParentId',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
id: value,
|
||||||
|
},
|
||||||
|
}).then(({ code, data }) => {
|
||||||
|
if (code == 0) {
|
||||||
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
id: item.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||||
switch (btnName) {
|
switch (btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
|
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||||
|
this.$message.error('请选择时间段');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.startTime = new Date(payload.recordTime).getTime();
|
||||||
|
|
||||||
this.queryParams.lineId = payload.lineId || null;
|
this.queryParams.lineId = payload.lineId || null;
|
||||||
this.queryParams.sectionId = payload.sectionId || null;
|
this.queryParams.sectionId = payload.sectionId || null;
|
||||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||||
this.queryParams.recordTime = payload.recordTime || null;
|
this.queryParams.recordTime = payload.recordTime
|
||||||
|
? [
|
||||||
|
payload.recordTime,
|
||||||
|
new Date(
|
||||||
|
new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
|
||||||
|
)
|
||||||
|
.toLocaleDateString()
|
||||||
|
.split('/')
|
||||||
|
.map((value, index) => {
|
||||||
|
if (index == 1 || index == 2) {
|
||||||
|
return value.padStart(2, '0');
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
})
|
||||||
|
.join('-') + ' 00:00:00',
|
||||||
|
]
|
||||||
|
: null;
|
||||||
this.getList();
|
this.getList();
|
||||||
break;
|
break;
|
||||||
case 'compare':
|
case 'compare':
|
||||||
@ -493,4 +595,13 @@ export default {
|
|||||||
background: #0b58ff;
|
background: #0b58ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.echarts__status-chart {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts__status-chart > div {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -82,10 +82,11 @@ export default {
|
|||||||
: undefined,
|
: undefined,
|
||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
tableProps: [
|
tableProps: [
|
||||||
{ width: 128, prop: 'productionLine', label: '产线' },
|
{ prop: 'productionLine', label: '产线' },
|
||||||
{ width: 128, prop: 'workshopSection', label: '工段' },
|
{ prop: 'workshopSection', label: '工段' },
|
||||||
{ width: 128, prop: 'equipment', label: '设备名称' },
|
{ prop: 'equipment', label: '设备名称' },
|
||||||
{
|
{
|
||||||
|
width: 90,
|
||||||
prop: 'alarmGrade',
|
prop: 'alarmGrade',
|
||||||
label: '报警级别',
|
label: '报警级别',
|
||||||
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
|
<div class="blue-title">各设备加工数量</div>
|
||||||
<div class="chart" ref="chart"></div>
|
<div class="chart" ref="chart"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -30,7 +31,7 @@ export default {
|
|||||||
bottom: 56,
|
bottom: 56,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
show: true,
|
show: false,
|
||||||
text: '各设备加工数量',
|
text: '各设备加工数量',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#232323',
|
color: '#232323',
|
||||||
@ -132,4 +133,22 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
// background: lightcoral;
|
// background: lightcoral;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blue-title {
|
||||||
|
position: relative;
|
||||||
|
padding: 4px 0;
|
||||||
|
padding-left: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 6px;
|
||||||
|
height: 16px;
|
||||||
|
width: 4px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: #0b58ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
title="点击切换工厂"
|
title="点击切换工厂"
|
||||||
@mouseenter="factoryListOpen = true"
|
@mouseenter="factoryListOpen = true"
|
||||||
@mouseleave="factoryListOpen = false">
|
@mouseleave="factoryListOpen = false">
|
||||||
{{ currentFactory?.label || '工厂名称' }}
|
{{ currentFactory?.label || '点我选择工厂' }}
|
||||||
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
|
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
|
||||||
<ul
|
<ul
|
||||||
class="factory-list"
|
class="factory-list"
|
||||||
@ -47,7 +47,7 @@
|
|||||||
class="custom-tree-class"
|
class="custom-tree-class"
|
||||||
:data="currentFactory?.children"
|
:data="currentFactory?.children"
|
||||||
:props="treeProps"
|
:props="treeProps"
|
||||||
:empty-text="' - 暂无数据 - '"
|
:empty-text="''"
|
||||||
icon-class="custom-icon-class"
|
icon-class="custom-icon-class"
|
||||||
@node-click="handleSidebarItemClick">
|
@node-click="handleSidebarItemClick">
|
||||||
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
|
<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
@ -268,7 +268,8 @@ export default {
|
|||||||
tableProps: [
|
tableProps: [
|
||||||
{ prop: 'lineName', label: '产线' },
|
{ prop: 'lineName', label: '产线' },
|
||||||
{ prop: 'sectionName', label: '工段' },
|
{ prop: 'sectionName', label: '工段' },
|
||||||
{ prop: 'externalCode', label: '设备编码' },
|
// { prop: 'externalCode', label: '设备编码' },
|
||||||
|
{ prop: 'equipmentId', label: '设备编码' },
|
||||||
{ prop: 'equipmentName', label: '设备名称' },
|
{ prop: 'equipmentName', label: '设备名称' },
|
||||||
{ prop: 'totalQuantity', label: '加工数量' },
|
{ prop: 'totalQuantity', label: '加工数量' },
|
||||||
],
|
],
|
||||||
@ -526,6 +527,7 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.custom-tree-class >>> .el-tree-node__content {
|
.custom-tree-class >>> .el-tree-node__content {
|
||||||
|
width: 100%;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
padding: 8px 12px !important;
|
padding: 8px 12px !important;
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'QualityRecentHours',
|
name: 'QualityRecentHours',
|
||||||
components: {},
|
components: {},
|
||||||
@ -62,7 +64,8 @@ export default {
|
|||||||
|
|
||||||
for (const key of Object.keys(hourData).sort()) {
|
for (const key of Object.keys(hourData).sort()) {
|
||||||
const subprop = {
|
const subprop = {
|
||||||
label: key,
|
// label: 'key',
|
||||||
|
label: moment(key).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
children: [
|
children: [
|
||||||
{ prop: key + '__in', label: '进数据' },
|
{ prop: key + '__in', label: '进数据' },
|
||||||
{ prop: key + '__out', label: '出数据' },
|
{ prop: key + '__out', label: '出数据' },
|
||||||
@ -85,7 +88,11 @@ export default {
|
|||||||
this.list.splice(0);
|
this.list.splice(0);
|
||||||
let rowIndex = 0;
|
let rowIndex = 0;
|
||||||
for (const line of list) {
|
for (const line of list) {
|
||||||
const { productLine, specification, data } = line;
|
const {
|
||||||
|
productLine,
|
||||||
|
specification = [],
|
||||||
|
data,
|
||||||
|
} = line;
|
||||||
|
|
||||||
// 设置span的行数
|
// 设置span的行数
|
||||||
this.spanInfo[rowIndex] = data.length;
|
this.spanInfo[rowIndex] = data.length;
|
||||||
|
@ -110,7 +110,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'statusRecordTime',
|
prop: 'statusRecordTime',
|
||||||
label: '状态量记录时间',
|
label: '状态记录时间',
|
||||||
width: 180,
|
width: 180,
|
||||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
},
|
},
|
||||||
@ -217,7 +217,7 @@ export default {
|
|||||||
const { data } = await this.$axios({
|
const { data } = await this.$axios({
|
||||||
url: '/base/equipment/listByLine',
|
url: '/base/equipment/listByLine',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
query: { id },
|
params: { id },
|
||||||
});
|
});
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
@ -0,0 +1,270 @@
|
|||||||
|
<!--
|
||||||
|
filename: dialogForm.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-09-11 15:55:13
|
||||||
|
description: DialogForm for qualityInspectionRecord only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
ref="form"
|
||||||
|
:model="innerDataForm"
|
||||||
|
label-width="100px"
|
||||||
|
v-loading="formLoading">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="检测内容"
|
||||||
|
prop="inspectionDetId"
|
||||||
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
|
<el-select
|
||||||
|
v-model="innerDataForm.inspectionDetId"
|
||||||
|
placeholder="请选择检测内容"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
@change="handleInspectionDetChange">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in inspectionDetList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="来源"
|
||||||
|
prop="source"
|
||||||
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
|
<el-select
|
||||||
|
v-model="innerDataForm.source"
|
||||||
|
placeholder="请选择来源"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
@change="$emit('update', innerDataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in [
|
||||||
|
{ label: '手动', value: 1 },
|
||||||
|
{ label: '自动', value: 2 },
|
||||||
|
]"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="产线"
|
||||||
|
prop="productionLineId"
|
||||||
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
|
<el-select
|
||||||
|
v-model="innerDataForm.productionLineId"
|
||||||
|
placeholder="请选择产线"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
@change="handleProductlineChange">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in productionLineList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="工段"
|
||||||
|
prop="sectionId"
|
||||||
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
|
<el-select
|
||||||
|
v-model="innerDataForm.sectionId"
|
||||||
|
placeholder="请选择工段"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
@change="$emit('update', innerDataForm)">
|
||||||
|
<el-option
|
||||||
|
v-for="opt in sectionList"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="检测人员" prop="checkPerson">
|
||||||
|
<el-input
|
||||||
|
v-model="innerDataForm.checkPerson"
|
||||||
|
clearable
|
||||||
|
@change="$emit('update', innerDataForm)"
|
||||||
|
placeholder="请输入检测人员" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
|
label="检测时间"
|
||||||
|
prop="checkTime"
|
||||||
|
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="innerDataForm.checkTime"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请选择检测时间"
|
||||||
|
value-format="timestamp"
|
||||||
|
@change="$emit('update', innerDataForm)"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col>
|
||||||
|
<el-form-item label="描述" prop="explainText">
|
||||||
|
<el-input
|
||||||
|
v-model="innerDataForm.explainText"
|
||||||
|
placeholder="请输入描述信息"
|
||||||
|
@change="$emit('update', innerDataForm)"
|
||||||
|
type="textarea"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input
|
||||||
|
v-model="innerDataForm.remark"
|
||||||
|
@change="$emit('update', innerDataForm)"
|
||||||
|
placeholder="请输入备注"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DialogForm',
|
||||||
|
model: {
|
||||||
|
prop: 'dataForm',
|
||||||
|
event: 'update',
|
||||||
|
},
|
||||||
|
emits: ['update'],
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dataForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formLoading: true,
|
||||||
|
inspectionDetList: [],
|
||||||
|
productionLineList: [],
|
||||||
|
sectionList: [],
|
||||||
|
innerDataForm: {},
|
||||||
|
cacheInspectionDetList: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
Promise.all([this.getProductLineList(), this.getInspectionDetList()]).then(
|
||||||
|
() => {
|
||||||
|
this.formLoading = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 'innerDataForm.productionLineId': {
|
||||||
|
// handler: async function (plId) {
|
||||||
|
// if (plId) await this.getWorksectionList(plId);
|
||||||
|
// },
|
||||||
|
// immediate: true,
|
||||||
|
// },
|
||||||
|
dataForm: {
|
||||||
|
handler: function (dataForm) {
|
||||||
|
this.innerDataForm = Object.assign({}, dataForm);
|
||||||
|
|
||||||
|
if (dataForm.productionLineId)
|
||||||
|
this.getWorksectionList(dataForm.productionLineId);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 模拟透传 ref */
|
||||||
|
validate(cb) {
|
||||||
|
return this.$refs.form.validate(cb);
|
||||||
|
},
|
||||||
|
resetFields(args) {
|
||||||
|
return this.$refs.form.resetFields(args);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleInspectionDetChange(value) {
|
||||||
|
const { id, content } = this.cacheInspectionDetList.find(
|
||||||
|
(item) => item.id == value
|
||||||
|
);
|
||||||
|
this.innerDataForm.inspectionDetId = id;
|
||||||
|
this.innerDataForm.inspectionDetContent = content;
|
||||||
|
this.$emit('update', this.innerDataForm);
|
||||||
|
},
|
||||||
|
|
||||||
|
async handleProductlineChange(id) {
|
||||||
|
// await this.getWorksectionList(id);
|
||||||
|
this.innerDataForm.sectionId = null;
|
||||||
|
this.$emit('update', this.innerDataForm);
|
||||||
|
},
|
||||||
|
|
||||||
|
// getCode
|
||||||
|
async getCode(url) {
|
||||||
|
const response = await this.$axios(url);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取产线列表
|
||||||
|
async getProductLineList() {
|
||||||
|
const response = await this.$axios('/base/production-line/listAll');
|
||||||
|
this.productionLineList = response.data.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取检测内容列表
|
||||||
|
async getInspectionDetList() {
|
||||||
|
const response = await this.$axios(
|
||||||
|
'/base/quality-inspection-det/listAll'
|
||||||
|
);
|
||||||
|
this.cacheInspectionDetList = response.data;
|
||||||
|
this.inspectionDetList = response.data.map((item) => ({
|
||||||
|
label: item.content,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取工段列表
|
||||||
|
async getWorksectionList(plId) {
|
||||||
|
const response = await this.$axios(
|
||||||
|
'/base/workshop-section/listByParentId',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
id: plId,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.sectionList = response.data.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.el-date-editor,
|
||||||
|
.el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -39,7 +39,7 @@
|
|||||||
@close="cancel"
|
@close="cancel"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
@confirm="submitForm">
|
@confirm="submitForm">
|
||||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
<DialogForm v-if="open" ref="form" v-model="form" />
|
||||||
</base-dialog>
|
</base-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -53,14 +53,15 @@ import {
|
|||||||
getQualityInspectionRecordPage,
|
getQualityInspectionRecordPage,
|
||||||
exportQualityInspectionRecordExcel,
|
exportQualityInspectionRecordExcel,
|
||||||
} from '@/api/monitoring/qualityInspectionRecord';
|
} from '@/api/monitoring/qualityInspectionRecord';
|
||||||
import Editor from '@/components/Editor';
|
// import Editor from '@/components/Editor';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import DialogForm from './dialogForm.vue';
|
||||||
|
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
export default {
|
export default {
|
||||||
name: 'QualityInspectionRecord',
|
name: 'QualityInspectionRecord',
|
||||||
components: {
|
components: {
|
||||||
Editor,
|
DialogForm,
|
||||||
},
|
},
|
||||||
mixins: [basicPageMixin],
|
mixins: [basicPageMixin],
|
||||||
data() {
|
data() {
|
||||||
@ -272,32 +273,38 @@ export default {
|
|||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.getProductLineList();
|
// this.getProductLineList();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 注册弹窗里产线改变时的监听事件
|
form: {
|
||||||
'form.productionLineId': {
|
|
||||||
handler: function (val) {
|
handler: function (val) {
|
||||||
if (val == null) return;
|
console.log('form change:', val);
|
||||||
this.$axios('/base/workshop-section/listByParentId', {
|
|
||||||
params: {
|
|
||||||
id: val,
|
|
||||||
},
|
|
||||||
}).then((response) => {
|
|
||||||
this.$set(
|
|
||||||
this.rows[1][1], // 这里索引是硬编码,所以当 this.rows 里数据顺序改变时,此处也要改
|
|
||||||
'options',
|
|
||||||
response.data.map((item) => {
|
|
||||||
return {
|
|
||||||
label: item.name,
|
|
||||||
value: item.id,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
immediate: true,
|
deep: true
|
||||||
},
|
}
|
||||||
|
// 注册弹窗里产线改变时的监听事件
|
||||||
|
// 'form.productionLineId': {
|
||||||
|
// handler: function (val) {
|
||||||
|
// if (val == null) return;
|
||||||
|
// this.$axios('/base/workshop-section/listByParentId', {
|
||||||
|
// params: {
|
||||||
|
// id: val,
|
||||||
|
// },
|
||||||
|
// }).then((response) => {
|
||||||
|
// this.$set(
|
||||||
|
// this.rows[1][1], // 这里索引是硬编码,所以当 this.rows 里数据顺序改变时,此处也要改
|
||||||
|
// 'options',
|
||||||
|
// response.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// label: item.name,
|
||||||
|
// value: item.id,
|
||||||
|
// };
|
||||||
|
// })
|
||||||
|
// );
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// immediate: true,
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/** 获取搜索栏的产线列表 */
|
/** 获取搜索栏的产线列表 */
|
||||||
@ -366,7 +373,11 @@ export default {
|
|||||||
const id = row.id;
|
const id = row.id;
|
||||||
getQualityInspectionRecord(id).then((response) => {
|
getQualityInspectionRecord(id).then((response) => {
|
||||||
/** 因为后端返回的时间是时间戳格式,需转换 */
|
/** 因为后端返回的时间是时间戳格式,需转换 */
|
||||||
this.form = this.filterData(response.data, Object.keys(this.form));
|
const info = {}
|
||||||
|
Object.keys(this.form).forEach(key => {
|
||||||
|
info[key] = response.data[key]
|
||||||
|
});
|
||||||
|
this.form = info;
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = '修改质量检查信息记录表';
|
this.title = '修改质量检查信息记录表';
|
||||||
});
|
});
|
||||||
|
@ -147,7 +147,7 @@ export default {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '单位/片',
|
name: '检测数量',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
@ -8,7 +8,7 @@ function resolve(dir) {
|
|||||||
|
|
||||||
const CompressionPlugin = require('compression-webpack-plugin')
|
const CompressionPlugin = require('compression-webpack-plugin')
|
||||||
|
|
||||||
const name = process.env.VUE_APP_TITLE || '芋道管理系统' // 网页标题
|
const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司' // 网页标题
|
||||||
|
|
||||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user