projects/mesxc-lb #205
12
.env.dev
12
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2024-01-09 16:27:57
|
||||
# @LastEditTime: 2024-02-23 16:03:51
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
@ -14,7 +14,6 @@ VUE_APP_TITLE = MES系统
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
||||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
|
||||
VUE_APP_BASE_API = 'http://192.168.1.47:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||
@ -22,17 +21,16 @@ VUE_APP_BASE_API = 'http://192.168.1.47:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.0.30:8888'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||
# socket地址
|
||||
# dcs地址
|
||||
VUE_APP_Socket_API = 'ws://192.168.0.30:8888'
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||
# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
||||
|
||||
|
||||
@ -16,6 +16,9 @@ VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://10.70.2.2:8080'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
|
||||
|
||||
# 根据服务器或域名修改
|
||||
|
||||
@ -7,8 +7,15 @@ VUE_APP_TITLE = MES系统
|
||||
# 芋道管理系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# dcs地址
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||
|
||||
|
||||
# 根据服务器或域名修改
|
||||
|
||||
@ -8,6 +8,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
<meta http-equiv="Cache" content="no-cache">
|
||||
<title>
|
||||
<%= webpackConfig.name %>
|
||||
</title>
|
||||
|
||||
@ -59,6 +59,15 @@ export function listEnabled() {
|
||||
})
|
||||
}
|
||||
|
||||
// 获得可用的排班列表(根据车间筛选)
|
||||
export function listEnabledByRoom(query) {
|
||||
return request({
|
||||
url: '/base/group-team/listEnabledByRoom',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得班组组员信息分页
|
||||
export function groupTeamPage(query) {
|
||||
return request({
|
||||
|
||||
91
src/api/base/qualityInspectionBoxPermissions.js
Normal file
91
src/api/base/qualityInspectionBoxPermissions.js
Normal file
@ -0,0 +1,91 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-04 14:10:37
|
||||
* @LastEditTime: 2024-01-31 09:56:09
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建安灯按钮16键对应
|
||||
export function createQualityInspectionBoxBtn(data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/updateBatch',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新安灯按钮16键对应
|
||||
export function updateQualityInspectionBoxBtn(data) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn-auth/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除安灯按钮16键对应
|
||||
export function deleteQualityInspectionBoxBtn(id) {
|
||||
return request({
|
||||
url: 'base/quality-inspection-box-btn-auth/delete?userId=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得安灯按钮16键对应
|
||||
export function getQualityInspectionBoxBtn(id) {
|
||||
return request({
|
||||
url: 'base/quality-inspection-box-btn-auth/get?userId=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得安灯按钮16键对应分页
|
||||
export function getQualityInspectionBoxBtnPage(query) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/listGroupByLineSection',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出安灯按钮16键对应 Excel
|
||||
export function exportQualityInspectionBoxBtnExcel(query) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAllDetByTypeList(query) {
|
||||
return request({
|
||||
url: '/base/quality-scrap-det/scrapMap',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export function getListByLineSection(query) {
|
||||
return request({
|
||||
url: '/base/quality-inspection-box-btn/detListByLineSection',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserList(query) {
|
||||
return request({
|
||||
url: 'base/quality-inspection-box-btn-auth/getUserList',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export function getPage(query) {
|
||||
return request({
|
||||
url: 'base/quality-inspection-box-btn-auth/page',
|
||||
method: 'post',
|
||||
data:query
|
||||
})
|
||||
}
|
||||
35
src/api/equipment/base/config/config.js
Normal file
35
src/api/equipment/base/config/config.js
Normal file
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2024-02-21 13:43:02
|
||||
* @LastEditTime: 2024-02-21 15:00:17
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得关联表名
|
||||
export function getplcAllList(query) {
|
||||
return request({
|
||||
url: '/base/equipment-plc/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得设备
|
||||
export function getEquipmentList(query) {
|
||||
return request({
|
||||
url: '/base/core-equipment/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据产线获得工段
|
||||
export function listByParentId(query) {
|
||||
return request({
|
||||
url: '/base/core-workshop-section/listByParentId',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-12 13:49:02
|
||||
* @LastEditTime: 2023-12-14 14:21:43
|
||||
* @LastEditTime: 2024-01-24 15:54:58
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -55,3 +55,12 @@ export function updateSumAutoDeliveDataList(query) {
|
||||
data: query,
|
||||
})
|
||||
}
|
||||
|
||||
export function exportProductExcel(query) {
|
||||
return request({
|
||||
url: '/base/report-auto-production-backup/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
14
src/assets/icons/svg/arrow.svg
Normal file
14
src/assets/icons/svg/arrow.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 13</title>
|
||||
<g id="·窑炉总览" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="总览" transform="translate(-1823.000000, -772.000000)">
|
||||
<g id="编组-20备份-5" transform="translate(1786.000000, 764.000000)">
|
||||
<g id="编组-13" transform="translate(37.000000, 8.000000)">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M3.67840479,4.47768215 L12.3215952,4.47768215 C12.87388,4.47768215 13.3215952,4.9253974 13.3215952,5.47768215 C13.3215952,5.70423387 13.2446673,5.92407165 13.1034098,6.1011931 L8.78181462,11.5200015 C8.43745903,11.9517857 7.80827335,12.0226607 7.37648905,11.6783051 C7.31796217,11.6316289 7.2648616,11.5785283 7.21818538,11.5200015 L2.89659016,6.1011931 C2.55223458,5.6694088 2.62310955,5.04022312 3.05489384,4.69586753 C3.23201529,4.55461005 3.45185307,4.47768215 3.67840479,4.47768215 Z" id="路径-2" fill="#03233C"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
18
src/assets/icons/svg/info.svg
Normal file
18
src/assets/icons/svg/info.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="25px" height="26px" viewBox="0 0 25 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>库位信息</title>
|
||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="周转看板" transform="translate(-996.000000, -618.000000)">
|
||||
<g id="编组-26备份-3" transform="translate(972.000000, 596.000000)">
|
||||
<g id="库位信息" transform="translate(24.000000, 22.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<g id="信息" transform="translate(1.000000, 2.000000)" fill-rule="nonzero">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<polygon id="路径" fill="#59D0E2" points="6.87951585 6.64119413 10.014693 6.64119413 10.014693 10.0613874 6.87951585 10.0613874"></polygon>
|
||||
<path d="M19.42625,1.5 L4.57625,1.5 C3.45125001,1.5 2.51375,2.43750001 2.51375,3.56250001 L2.51375,20.4375 C2.51375,21.5625 3.45125001,22.5 4.57625,22.5 L19.46375,22.5 C20.58875,22.5 21.52625,21.5625 21.52625,20.4375 L21.52625,3.56250001 C21.48875,2.43750001 20.58875,1.5 19.42625,1.5 Z M5.66375,6.9375 C5.66375,6.1125 6.33875,5.4375 7.16375,5.4375 L9.63875,5.4375 C10.46375,5.4375 11.13875,6.1125 11.13875,6.9375 L11.13875,9.6375 C11.13875,10.4625 10.46375,11.1375 9.63875,11.1375 L7.16375,11.1375 C6.33875,11.1375 5.66375,10.4625 5.66375,9.6375 L5.66375,6.9375 Z M17.58875,18.5625 L6.41375001,18.5625 C6.00125002,18.5625 5.66375,18.225 5.66375,17.8125 C5.66375,17.4 6.00125,17.0625 6.41375001,17.0625 L17.55125,17.0625 C17.96375,17.0625 18.30125,17.4 18.30125,17.8125 C18.30125,18.225 18.00125,18.5625 17.58875,18.5625 Z M17.58875,15.1875 L6.41375001,15.1875 C6.00125002,15.1875 5.66375,14.85 5.66375,14.4375 C5.66375,14.025 6.00125,13.6875 6.41375001,13.6875 L17.55125,13.6875 C17.96375,13.6875 18.30125,14.025 18.30125,14.4375 C18.30125,14.85 18.00125,15.1875 17.58875,15.1875 Z M17.58875,10.65 L13.83875,10.65 C13.42625,10.65 13.08875,10.3125 13.08875,9.90000001 C13.08875,9.48750002 13.42625,9.14999999 13.83875,9.14999999 L17.58875,9.14999999 C18.00125,9.14999999 18.33875,9.48749999 18.33875,9.90000001 C18.33875,10.3125 18.00125,10.65 17.58875,10.65 Z M17.58875,7.425 L13.83875,7.425 C13.42625,7.425 13.08875,7.08750001 13.08875,6.675 C13.08875,6.26249998 13.42625,5.925 13.83875,5.925 L17.58875,5.925 C18.00125,5.925 18.33875,6.2625 18.33875,6.675 C18.33875,7.08749999 18.00125,7.425 17.58875,7.425 Z" id="形状" fill="#59D0E2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
@ -1 +1,14 @@
|
||||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M459.954 607.201h233.734c14.352 0 25.941-11.088 25.941-24.799 0-13.623-11.588-24.71-25.941-24.71H459.954c-14.353 0-25.987 11.087-25.987 24.71 0 13.71 11.634 24.8 25.987 24.8zm-77.937 217.186l287.564-.272v-.634c9.37-1.494 16.66-9.233 16.66-19.054 0-9.773-7.29-17.694-16.66-19.233v-.633H369.5c-27.275 0-51.95-38.47-51.95-65.215V303.761c.182-1.041.634-1.992.634-3.123 0-10.997-8.985-20.003-20.032-20.003-11.023 0-20.01 9.007-20.01 20.003v418.708c0 54.037 48.939 105.04 103.875 105.04zm311.67-734.462c-3.235 0-311.669-.814-311.669-.814-51.292 0-96.314 39.1-102.108 88.294-.182 1.086-.657 2.037-.657 3.169 0 .09.023.135.023.18 0 .047-.023.09-.023.182h.067c.181 10.86 9.032 19.685 19.942 19.685 10.933 0 19.762-8.825 19.965-19.685h.226c6.044-24.665 27.028-52.044 50.048-52.044h284.755c-.406 60.46 0 118.435 0 118.435 0 54.532 35.992 91.642 91.36 91.642h90.428v380.377c.338 44.261-33.703 65.758-62.18 65.215v.272c-10.23.723-18.426 9.188-18.426 19.594 0 10.454 8.196 18.737 18.426 19.417v.272c.248 0 .498-.092.746-.092.184 0 .34.092.522.092.972 0 1.812-.408 2.74-.545 52.288-3.755 97.58-52.314 97.58-104.225V299.778L693.688 89.925zm51.928 209.853c-27.684 0-51.927-51.412-51.927-78.7V142.377l129.839 157.4h-77.912zM459.955 483.47h233.733c14.352 0 25.941-11.041 25.941-24.709 0-13.667-11.588-24.754-25.941-24.754H459.954c-14.353 0-25.987 11.087-25.987 24.754 0 13.669 11.634 24.71 25.987 24.71zM716.71 841.356c-8.534 0-15.327 6.246-17.114 14.257l-.476-.045c-21.73 44.17-40.426 34.032-62.295 34.032H252.18c-27.277 0-64.466-38.512-64.466-65.213V322.315c0-24.801 29.857-58.607 55.954-63.403v-.544c10.572-.543 19.083-9.142 19.083-19.867 0-10.681-8.511-19.28-19.083-19.777v-.227c-.181.044-.34.091-.52.091-.158 0-.272-.09-.43-.09-1.245 0-2.353.497-3.553.724-50.704 5.203-90.86 52.134-90.86 103.093v502.07c0 54.035 48.938 105.039 103.875 105.039h389.558c47.105 0 78.255-17.199 90.542-61.684 1.36-2.534 2.33-5.25 2.33-8.327.002-9.866-8.009-18.057-17.9-18.057z"/></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>周转进度</title>
|
||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="周转看板" transform="translate(-996.000000, -149.000000)" fill-rule="nonzero">
|
||||
<g id="编组-26备份-2" transform="translate(972.000000, 125.000000)">
|
||||
<g id="周转进度" transform="translate(24.000000, 24.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||
<path d="M14.5,8.25 L14.5,2 L4,2 C2.8954305,2 2,2.8954305 2,4 L2,14.5 L2,14.5 L8.25,14.5 L8.25,8.25 L14.5,8.25 Z M15.75,9.5 L15.75,15.75 L9.5,15.75 L9.5,22 L20,22 C21.1045695,22 22,21.1045695 22,20 L22,9.5 L22,9.5 L15.75,9.5 Z" id="形状" fill="#59D0E2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
24
src/assets/icons/svg/task.svg
Normal file
24
src/assets/icons/svg/task.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>搬运任务</title>
|
||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="周转看板" transform="translate(-64.000000, -149.000000)">
|
||||
<g id="编组-26" transform="translate(40.000000, 127.000000)">
|
||||
<g id="搬运任务" transform="translate(24.000000, 22.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<g id="异常" transform="translate(1.000000, 2.000000)" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="2" y="1" width="17" height="17"></rect>
|
||||
<g>
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="5" y="6" width="13" height="13"></rect>
|
||||
<g id="数量_面性">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="2" y="2" width="16" height="16"></rect>
|
||||
<path d="M11.5012639,11 C11.3917412,11 11.2835161,10.977151 11.184033,10.9329979 L0.441155372,6.16366481 C0.172262497,6.04432342 -1.77635684e-15,5.78507176 -1.77635684e-15,5.49973467 C-1.77635684e-15,5.21439758 0.172262497,4.95514592 0.441155372,4.83580453 L11.184033,0.066471464 C11.3846433,-0.0221571547 11.6153567,-0.0221571547 11.815967,0.066471464 L22.5588446,4.83580453 C22.8277375,4.95514592 23,5.21439758 23,5.49973467 C23,5.78507176 22.8277375,6.04432342 22.5588446,6.16366481 L11.815967,10.9329979 C11.7172585,10.9768087 11.6099339,10.9996587 11.5012639,11 L11.5012639,11 Z M22,14 L11.5,18.4986025 L1,14 L1,15.5733794 L11.1785976,19.935011 C11.3818459,20.021663 11.6155931,20.021663 11.8188415,19.935011 L22,15.5733794 L22,14 Z" id="形状" fill="#59D0E2"></path>
|
||||
<path d="M22,9 L11.5,13.4953318 L1,9 L1,10.5789585 L11.1785976,14.9350754 C11.3818459,15.0216415 11.6155931,15.0216415 11.8188415,14.9350754 L22,10.5789585 L22,9 Z" id="路径" fill="#59D0E2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
24
src/assets/icons/svg/tasks.svg
Normal file
24
src/assets/icons/svg/tasks.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>搬运任务</title>
|
||||
<g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="周转看板" transform="translate(-64.000000, -149.000000)">
|
||||
<g id="编组-26" transform="translate(40.000000, 127.000000)">
|
||||
<g id="搬运任务" transform="translate(24.000000, 22.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<g id="异常" transform="translate(1.000000, 2.000000)" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="2" y="1" width="17" height="17"></rect>
|
||||
<g>
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="5" y="6" width="13" height="13"></rect>
|
||||
<g id="数量_面性">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="2" y="2" width="16" height="16"></rect>
|
||||
<path d="M11.5012639,11 C11.3917412,11 11.2835161,10.977151 11.184033,10.9329979 L0.441155372,6.16366481 C0.172262497,6.04432342 -1.77635684e-15,5.78507176 -1.77635684e-15,5.49973467 C-1.77635684e-15,5.21439758 0.172262497,4.95514592 0.441155372,4.83580453 L11.184033,0.066471464 C11.3846433,-0.0221571547 11.6153567,-0.0221571547 11.815967,0.066471464 L22.5588446,4.83580453 C22.8277375,4.95514592 23,5.21439758 23,5.49973467 C23,5.78507176 22.8277375,6.04432342 22.5588446,6.16366481 L11.815967,10.9329979 C11.7172585,10.9768087 11.6099339,10.9996587 11.5012639,11 L11.5012639,11 Z M22,14 L11.5,18.4986025 L1,14 L1,15.5733794 L11.1785976,19.935011 C11.3818459,20.021663 11.6155931,20.021663 11.8188415,19.935011 L22,15.5733794 L22,14 Z" id="形状" fill="#59D0E2"></path>
|
||||
<path d="M22,9 L11.5,13.4953318 L1,9 L1,10.5789585 L11.1785976,14.9350754 C11.3818459,15.0216415 11.6155931,15.0216415 11.8188415,14.9350754 L22,10.5789585 L22,9 Z" id="路径" fill="#59D0E2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/img/eqStatus.png
Normal file
BIN
src/assets/img/eqStatus.png
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
@ -88,23 +88,26 @@ export default {
|
||||
visitedViews(newVal, oldVal){
|
||||
let num = 0
|
||||
newVal && newVal.map(item => {
|
||||
console.log(item)
|
||||
if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
|
||||
num++
|
||||
}
|
||||
})
|
||||
if (num > 0) {
|
||||
if(!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
this.$nextTick(() => {
|
||||
if (num > 0) {
|
||||
if(!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
}
|
||||
}else{
|
||||
if (this.wsIsOpen) {
|
||||
closeDcsMsg()
|
||||
this.wsIsOpen = false
|
||||
console.log('关闭============')
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if (this.wsIsOpen) {
|
||||
closeDcsMsg()
|
||||
this.wsIsOpen = false
|
||||
console.log('关闭============')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -9,7 +9,7 @@ import store from './store';
|
||||
import router from './router';
|
||||
import directive from './directive'; // directive
|
||||
import plugins from './plugins'; // plugins
|
||||
// import { scrollBoard } from '@jiaminghi/data-view'
|
||||
import { scrollBoard } from '@jiaminghi/data-view'
|
||||
|
||||
import './assets/icons'; // icon
|
||||
import './permission'; // permission control
|
||||
@ -79,7 +79,7 @@ Vue.use(CodeBrickZj)
|
||||
Vue.use(directive);
|
||||
Vue.use(plugins);
|
||||
Vue.use(VueMeta);
|
||||
// Vue.use(scrollBoard)
|
||||
Vue.use(scrollBoard)
|
||||
// Vue.use(hljs.vuePlugin);
|
||||
import scroll from 'vue-seamless-scroll'
|
||||
Vue.use(scroll)
|
||||
|
||||
@ -25,58 +25,8 @@ const state = {
|
||||
israWeekStatistic: [],//缺陷统计
|
||||
israMonthStatistic: [],//缺陷统计
|
||||
israYearStatistic: [],//缺陷统计
|
||||
productline: [{
|
||||
"creator": "1",
|
||||
"sumOutputNum": 15,
|
||||
"outputNum": 15,
|
||||
"passRate": 0.6,
|
||||
"lineName": "3#深加工",
|
||||
"updateTime": "2024-01-04T16:00:19",
|
||||
"updater": "1",
|
||||
"inputNum": 15,
|
||||
"deleted": false,
|
||||
"recordTime": "2023-12-25T20:00:00",
|
||||
"createTime": "2023-10-13T10:44:27",
|
||||
"tenantId": 1,
|
||||
"id": 1712660539187441666,
|
||||
"productionLineId": 1737313260027285506,
|
||||
"sumInputNum": 15
|
||||
}, {
|
||||
"creator": "1",
|
||||
"sumOutputNum": 49,
|
||||
"outputNum": 16,
|
||||
"passRate": 0.3,
|
||||
"lineName": "2#深加工",
|
||||
"updateTime": "2024-01-04T16:00:19",
|
||||
"updater": "1",
|
||||
"inputNum": 17,
|
||||
"deleted": false,
|
||||
"recordTime": "2023-12-25T20:00:00",
|
||||
"createTime": "2023-10-13T10:44:27",
|
||||
"tenantId": 1,
|
||||
"id": 1712660539187441665,
|
||||
"productionLineId": 1737313119178362881,
|
||||
"sumInputNum": 47
|
||||
}, {
|
||||
"creator": "1",
|
||||
"sumOutputNum": 29,
|
||||
"outputNum": 18,
|
||||
"passRate": 0.5,
|
||||
"lineName": "1#深加工",
|
||||
"updateTime": "2024-01-04T16:00:19",
|
||||
"updater": "1",
|
||||
"inputNum": 20,
|
||||
"deleted": false,
|
||||
"recordTime": "2023-12-25T20:00:00",
|
||||
"createTime": "2023-10-13T10:43:17",
|
||||
"tenantId": 1,
|
||||
"id": 1712660244285927426,
|
||||
"productionLineId": 1737312466842456065,
|
||||
"sumInputNum": 27
|
||||
}], // SJG产线产量及良品率
|
||||
sjgEquipment:[
|
||||
{name: 'sadd', error:false,code: 'EQ202312121624540000072',status: "正常"}
|
||||
],// SJG设备报警
|
||||
productline: [], // SJG产线产量及良品率
|
||||
sjgEquipment:[],// SJG设备报警
|
||||
workOrder: [], // 工单监控
|
||||
defectSum: [], // 缺陷汇总
|
||||
order: [],// 订单完成情况
|
||||
|
||||
@ -96,6 +96,7 @@ export const DICT_TYPE = {
|
||||
TIME_DIM: 'time_dim',
|
||||
TABLE_NAME: 'table_name',
|
||||
METHOD: 'method',
|
||||
PUSH: 'push',
|
||||
|
||||
// ============== ORDER - 订单模块 =============
|
||||
ORDER_STATUS: 'order_status',
|
||||
@ -112,7 +113,10 @@ export const DICT_TYPE = {
|
||||
REPAIR_RESULT: 'repair-result',
|
||||
|
||||
// ============== ENVIRONMENTAL - 环保模块 =============
|
||||
ENVIRONMENT_CHECK_UNIT: 'environment_check_unit'
|
||||
ENVIRONMENT_CHECK_UNIT: 'environment_check_unit',
|
||||
|
||||
// ============== GROUP - 班组模块 =============
|
||||
WORK_SHOP: 'workshop'
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-08 16:07:58
|
||||
* @LastEditTime: 2024-02-23 16:11:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,7 +14,7 @@
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||||
许昌安彩AGV原片周转看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
@ -29,13 +29,13 @@
|
||||
<el-row class="container-main flex-col" type="flex">
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
|
||||
<base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
|
||||
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -46,13 +46,15 @@
|
||||
<!-- <el-row style="margin-bottom: 1em">
|
||||
<p class="now-team-title">加工工单进度</p>
|
||||
</el-row> -->
|
||||
|
||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
||||
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
{{ op.name }}
|
||||
</p>
|
||||
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
||||
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100"
|
||||
class="custom-progress-bar" />
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||
@ -85,7 +87,7 @@
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'5_5'"
|
||||
<base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'"
|
||||
:back="'energy'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
@ -108,7 +110,7 @@
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'5_4'"
|
||||
<base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'"
|
||||
:back="'energy'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
@ -403,13 +405,13 @@ const locationTableProps = [
|
||||
prop: 'level',
|
||||
label: '存放位置',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '单位',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'product',
|
||||
@ -465,13 +467,13 @@ const inventoryTableProps = [
|
||||
prop: 'level',
|
||||
label: '规格',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '单位',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'product',
|
||||
@ -517,7 +519,7 @@ const qualityYearTableProps = [
|
||||
prop: 'level',
|
||||
label: '库位',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
// align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'product',
|
||||
@ -755,6 +757,9 @@ export default {
|
||||
this.init()
|
||||
this.getTimes()
|
||||
this.windowWidth(document.documentElement.clientWidth)
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 86400000)
|
||||
},
|
||||
mounted() {
|
||||
const _this = this;
|
||||
@ -876,6 +881,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
color: #00fff0;
|
||||
text-align: center;
|
||||
word-spacing:8px;
|
||||
position: relative;
|
||||
.unit{
|
||||
position: absolute;
|
||||
@ -986,11 +992,11 @@ export default {
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
border: rgba($color: #31878c, $alpha: 0.29);
|
||||
color: aliceblue;
|
||||
}
|
||||
// .el-input__inner {
|
||||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||||
// color: aliceblue;
|
||||
// }
|
||||
|
||||
.el-divider--vertical {
|
||||
height: 174px;
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 16:50:26
|
||||
* @LastEditTime: 2024-02-23 16:11:40
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-09 15:34:00
|
||||
* @LastEditTime: 2024-01-29 17:05:37
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,7 +21,7 @@
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||
许昌安彩冷端看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
@ -30,13 +37,15 @@
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
|
||||
:table-data="cutTableDataList" />
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
|
||||
:table-data="cutTableDataList" /> -->
|
||||
<dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'产量及良率统计'" :size="'small'" :title-icon="'energyMonitoring'">
|
||||
<base-container :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
|
||||
:title-icon="'energyMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -47,16 +56,19 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
||||
:table-data="ISRAList" />
|
||||
<base-container :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
||||
:table-data="ISRAList" /> -->
|
||||
<ISRAChart ref="ISRAChart" />
|
||||
<!-- <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> -->
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :height="256" :title="'废片 缺陷数据'" :size="'middle'" :title-icon="'scrap'">
|
||||
<base-container :no-content-padding="true" :height="256" :title="'废片 缺陷数据'" :size="'middle'"
|
||||
:title-icon="'scrap'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -78,25 +90,31 @@
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
|
||||
<base-container :height="318 + 338 + 16" :size="'middle'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
|
||||
<base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<el-col :span="6">
|
||||
<h4 style="margin: 5px 0 5px 0;">融化风机</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="funList" />
|
||||
<el-col :span="8" style="">
|
||||
<div style="font-size:20px;margin: 5px 0 10px 0">熔化风机</div>
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="funList" /> -->
|
||||
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<h4 style="margin: 5px 0 5px 0;">退火风机</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="annealFunList" />
|
||||
<span class="eqLine"></span>
|
||||
<el-col :span="8">
|
||||
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="annealFunList" /> -->
|
||||
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
|
||||
</el-col>
|
||||
<el-col :span="12" style="float: right;">
|
||||
<h4 style="margin: 5px 0 5px 0;">产线设备</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
|
||||
:table-data="realEqList" />
|
||||
<span class="eqLineTwo"></span>
|
||||
<el-col :span="8" style="float: right;">
|
||||
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
|
||||
:table-data="realEqList" /> -->
|
||||
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
|
||||
|
||||
</el-col>
|
||||
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||||
:show-legend="true" /> -->
|
||||
@ -122,27 +140,22 @@
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable1 from './components/baseTable'
|
||||
// import baseContainer1 from './components/baseContainer/indexcopy'
|
||||
// import baseTable2 from './components/baseTable'
|
||||
// import baseTable3 from './components/baseTable'
|
||||
import TopRadioGroup from './components/topRadioGroup'
|
||||
// import pieChart1 from './components/PieChart'
|
||||
// import pieChart2 from './components/PieChart'
|
||||
// import pieChart3 from './components/PieChart'
|
||||
// import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import alarmLevel from './components/alarmLevel'
|
||||
import pileBarChart from './components/pileBarChart'
|
||||
import colorDiv from './components/colorDiv'
|
||||
import moment from "moment";
|
||||
|
||||
// import axios from '@/utils/request'
|
||||
import doubleYChart from './components/doubleYChart '
|
||||
// import elementResizeDetectorMaker from 'element-resize-detector';
|
||||
// var erd = elementResizeDetectorMaker(); //创建实例
|
||||
// let resizeFun = null
|
||||
import doubleYChart from './components/coldDoubleYChart'
|
||||
import { parseTime } from '../core/mixins/code-filter';
|
||||
|
||||
|
||||
import ISRAChart from './components/ISRAChart.vue';
|
||||
import { getDcsMsg, closeDcsMsg } from "./wsInterface"
|
||||
import LinearBarChart from './components/linearBarChart'
|
||||
const qualityYearTableProps= []
|
||||
const EqMonitoringPropsFun = [
|
||||
@ -246,7 +259,9 @@ export default {
|
||||
pileBarChart,
|
||||
TopRadioGroup,
|
||||
doubleYChart,
|
||||
LinearBarChart
|
||||
LinearBarChart,
|
||||
ISRAChart
|
||||
// baseContainer1
|
||||
// pieChart1,
|
||||
// pieChart2
|
||||
// pieChart3
|
||||
@ -264,6 +279,61 @@ export default {
|
||||
ISRATableProps,
|
||||
orderList: [],
|
||||
times: '',
|
||||
cutConfig: {
|
||||
header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60,60, 132, 142, 105,105,90],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
funConfig: {
|
||||
header: ['序号', '设备名称', '运行状态'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60, 180, 90],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
realEqConfig: {
|
||||
header: ['序号','设备名称','运行状态'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60, 180, 90],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
annealFunConfig: {
|
||||
header: ['序号', '设备名称', '运行状态'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60, 180, 90],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
ISRAConfig: {
|
||||
header: ['序号', '产线', '时间', '缺陷类型', '缺陷数量', '占比'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [70, 70, 130, 150, 110, 110,],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
ISRAList:[],
|
||||
EnergyMonitoringNameList: [],
|
||||
equipmentList: [],
|
||||
@ -281,6 +351,7 @@ export default {
|
||||
SJGWsData: {},
|
||||
// orderProcessList: [],
|
||||
dateType: '0',
|
||||
wsIsOpen:false,
|
||||
funList:[],
|
||||
annealFunList: [],
|
||||
queryParams: {
|
||||
@ -323,9 +394,32 @@ export default {
|
||||
// this.fetchList('order-process')
|
||||
// this.fetchList('line-chart-data')
|
||||
this.init()
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 86400000)
|
||||
},
|
||||
destroyed() {
|
||||
this.funInitWebSocket()
|
||||
this.CutInitWebSocket()
|
||||
this.SJGWebsocketClose()
|
||||
if (this.wsIsOpen) {
|
||||
closeDcsMsg()
|
||||
this.wsIsOpen = false
|
||||
console.log('关闭============')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
|
||||
this.funInitWebSocket()
|
||||
// if (num > 0) {
|
||||
if (!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
}
|
||||
// } else {
|
||||
|
||||
// }
|
||||
this.CutInitWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
// this.getList()
|
||||
@ -338,6 +432,18 @@ export default {
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
// let obj = {
|
||||
// 'a': 11111,
|
||||
// 'b': 22222,
|
||||
// 'c': 33333,
|
||||
// 'd': 44444,
|
||||
// 'e': 55555,
|
||||
// }
|
||||
// let index = 0
|
||||
// for (let i in obj) {
|
||||
// index++,
|
||||
// console.log(index);
|
||||
// }
|
||||
// this.getList()
|
||||
// const _this = this;
|
||||
// window.onresize = () => {
|
||||
@ -363,6 +469,54 @@ export default {
|
||||
// removeEventListener('resize', resizeFun)
|
||||
// },
|
||||
methods: {
|
||||
CutWebsocketClose(e) {
|
||||
console.log('WebSocket 断开连接', e)
|
||||
},
|
||||
SJGWebsocketClose(e) {
|
||||
console.log('WebSocket 断开连接', e)
|
||||
},
|
||||
funInitWebSocket(e) {
|
||||
console.log('WebSocket 断开连接', e)
|
||||
},
|
||||
formatTime(time, option) {
|
||||
// if (('' + time).length === 10) {
|
||||
// time = parseInt(time) * 1000
|
||||
// } else {
|
||||
// time = +time
|
||||
// }
|
||||
console.log(time);
|
||||
const d = new Date(time)
|
||||
// const now = Date.now()
|
||||
// console.log(time);
|
||||
// const diff = (now - d) / 1000
|
||||
|
||||
// if (diff < 30) {
|
||||
// return '刚刚'
|
||||
// } else if (diff < 3600) {
|
||||
// // less 1 hour
|
||||
// return Math.ceil(diff / 60) + '分钟前'
|
||||
// } else if (diff < 3600 * 24) {
|
||||
// return Math.ceil(diff / 3600) + '小时前'
|
||||
// } else if (diff < 3600 * 24 * 2) {
|
||||
// return '1天前'
|
||||
// }
|
||||
// if (option) {
|
||||
// return parseTime(time, option)
|
||||
// } else {
|
||||
return (
|
||||
d.getMonth() +
|
||||
1 +
|
||||
'月' +
|
||||
d.getDate() +
|
||||
'日' +
|
||||
d.getHours() +
|
||||
'时'
|
||||
// +
|
||||
// d.getMinutes() +
|
||||
// '分'
|
||||
)
|
||||
// }
|
||||
},
|
||||
// getList() {
|
||||
// // this.loading = true;
|
||||
// // 执行查询
|
||||
@ -483,23 +637,52 @@ export default {
|
||||
// FanInfo
|
||||
if (this.funWsData.type === 'AnnealFanInfo') {
|
||||
let arr = []
|
||||
let index = 0
|
||||
for (let i in this.funWsData.data.annealFanInfo) {
|
||||
arr.push({
|
||||
equipmentName: i,
|
||||
status: this.funWsData.data.annealFanInfo[i]
|
||||
})
|
||||
index++,
|
||||
// let index = 1,
|
||||
// index++
|
||||
// arr.push({
|
||||
// equipmentName: i,
|
||||
// status: this.funWsData.data.annealFanInfo[i]
|
||||
// })
|
||||
arr.push([
|
||||
// console.log(item)
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${index || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${i || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
|
||||
])
|
||||
}
|
||||
this.annealFunList = arr
|
||||
this.annealFunConfig.data = arr
|
||||
this.$refs['annealFunScrollBoard'].updateRows(arr)
|
||||
}
|
||||
if (this.funWsData.type === 'FanInfo') {
|
||||
let arr = []
|
||||
let index = 0
|
||||
for (let i in this.funWsData.data.fanInfo) {
|
||||
arr.push({
|
||||
equipmentName: i,
|
||||
status: this.funWsData.data.fanInfo[i]
|
||||
})
|
||||
index++,
|
||||
// arr.push({
|
||||
// equipmentName: i,
|
||||
// status: this.funWsData.data.fanInfo[i]
|
||||
// })
|
||||
arr.push([
|
||||
// console.log(item)
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
|
||||
])
|
||||
}
|
||||
this.funList = arr
|
||||
this.funConfig.data = arr
|
||||
this.$refs['funScrollBoard'].updateRows(arr)
|
||||
// this.funList = arr
|
||||
}
|
||||
},
|
||||
cutWebsocketOnOpen() {
|
||||
@ -511,30 +694,48 @@ export default {
|
||||
this.CutInitWebSocket()
|
||||
},
|
||||
getSize(str) {
|
||||
console.log(str.match(/\d+(\.\d+)?/g))
|
||||
// console.log(str.match(/\d+(\.\d+)?/g))
|
||||
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
|
||||
return parseFloat(ele)
|
||||
})
|
||||
console.log(size[0] + '*' + size[1] + '*' + size[2]);
|
||||
// console.log(size[0] + '*' + size[1] + '*' + size[2]);
|
||||
return size[0] + '*' + size[1] + '*' + size[2]
|
||||
},
|
||||
// 数据接收
|
||||
cutWebsocketOnMessage(e) {
|
||||
this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
|
||||
this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
lineName: ele.lineName,
|
||||
time: ele.time,
|
||||
size: this.getSize(ele.size),
|
||||
productArea: ele.productArea + '㎡',
|
||||
wasteArea: ele.wasteArea + '㎡',
|
||||
product: (ele.product * 100).toFixed(2)
|
||||
}
|
||||
// }
|
||||
});
|
||||
// this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
|
||||
// // if (ele.progressRate != 1) {
|
||||
// return {
|
||||
// id: ele.id,
|
||||
// lineName: ele.lineName,
|
||||
// time: ele.time,
|
||||
// size: this.getSize(ele.size),
|
||||
// productArea: ele.productArea + '㎡',
|
||||
// wasteArea: ele.wasteArea + '㎡',
|
||||
// product: (ele.product * 100).toFixed(2)
|
||||
// }
|
||||
// // }
|
||||
// });
|
||||
let cutArr = this.cutWsData.productHourData.map((item, index) => [
|
||||
// console.log(item)
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
|
||||
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:rgba(255,255,255,0.7)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
|
||||
<div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
|
||||
])
|
||||
this.cutConfig.data = cutArr
|
||||
this.$refs['cutScrollBoard'].updateRows(cutArr)
|
||||
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
|
||||
let nameList = []
|
||||
let nameWasteList = []
|
||||
@ -571,33 +772,57 @@ export default {
|
||||
// let obj = JSON.parse(data.data)
|
||||
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
if (this.SJGWsData.type === 'isra') {
|
||||
this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
console.log('222222', this.SJGWsData.detData);
|
||||
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// // if (ele.progressRate != 1) {
|
||||
// return {
|
||||
// id: ele.id,
|
||||
// linename: ele.linename,
|
||||
// type: ele.type,
|
||||
// num: ele.num,
|
||||
// time:ele.time,
|
||||
// percent: ele.percent
|
||||
// }
|
||||
// // }
|
||||
// });
|
||||
console.log(this.SJGWsData.detData);
|
||||
let chartData = this.SJGWsData.detData.map((item, index) => {
|
||||
return {
|
||||
id: ele.id,
|
||||
linename: ele.linename,
|
||||
type: ele.type,
|
||||
num: ele.num,
|
||||
time:ele.time,
|
||||
percent: ele.percent
|
||||
name: item.type,
|
||||
num:item.num
|
||||
}
|
||||
// }
|
||||
});
|
||||
})
|
||||
// let ISRAArr = this.SJGWsData.detData.map((item, index) => [
|
||||
// // console.log(item)
|
||||
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
// </span>`,
|
||||
// // formatDate(item.planStartTime) || '',
|
||||
// `
|
||||
// <span style="color:rgba(255,255,255,0.5)" >${item.linename || ''}
|
||||
// </span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`,
|
||||
// ])
|
||||
// this.ISRAConfig.data = ISRAArr
|
||||
this.$refs['ISRAChart'].updateChart(chartData)
|
||||
} else if (this.SJGWsData.type === 'equipment') {
|
||||
this.realEqList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
line: ele.line,
|
||||
name: ele.name,
|
||||
code: ele.code,
|
||||
run: ele.run,
|
||||
error: ele.error,
|
||||
// percent: ele.percent
|
||||
}
|
||||
// }
|
||||
});
|
||||
|
||||
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
// `<span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
|
||||
// </span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
|
||||
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
||||
]);
|
||||
}
|
||||
this.realEqConfig.data = this.realEqList
|
||||
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value
|
||||
@ -657,6 +882,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.visual-container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
@ -668,25 +894,27 @@ export default {
|
||||
width: 100%;
|
||||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
color: rgba(0, 255, 247, 1);
|
||||
text-align: center;
|
||||
|
||||
word-spacing: 8px;
|
||||
.unit {
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
top: 25px;
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
left: 1360px;
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
top: 25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title-button {
|
||||
color: #ffffff;
|
||||
color: rgba(255, 255, 255, 0.80);
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
@ -740,6 +968,30 @@ export default {
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.eqLine{
|
||||
height: 290px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: 33.8%;
|
||||
top: 12%;
|
||||
background: linear-gradient(to bottom,rgba(60,
|
||||
231,
|
||||
255,0), #3CE7FF, rgba(60,
|
||||
231,
|
||||
255, 0));
|
||||
}
|
||||
.eqLineTwo {
|
||||
height: 290px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: 66.3%;
|
||||
top: 12%;
|
||||
background: linear-gradient(to bottom, rgba(60,
|
||||
231,
|
||||
255, 0), #3CE7FF, rgba(60,
|
||||
231,
|
||||
255, 0));
|
||||
}
|
||||
.visual-container {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
@ -784,11 +1036,11 @@ export default {
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
border: rgba($color: #31878c, $alpha: 0.29);
|
||||
color: aliceblue;
|
||||
}
|
||||
// .el-input__inner {
|
||||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||||
// color: aliceblue;
|
||||
// }
|
||||
|
||||
.el-divider--vertical {
|
||||
height: 174px;
|
||||
@ -816,4 +1068,44 @@ export default {
|
||||
/* .container-main {
|
||||
min-height: calc(100vh - 10em);
|
||||
} */
|
||||
.orange {
|
||||
color: rgba(255, 209, 96, 1)
|
||||
}
|
||||
|
||||
.white {
|
||||
color: rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
159
src/views/OperationalOverview/components/ISRAChart.vue
Normal file
159
src/views/OperationalOverview/components/ISRAChart.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 13:45:56
|
||||
* @LastEditTime: 2024-02-18 14:20:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<!-- <NotMsg v-show="notMsg"/> -->
|
||||
<div id="israChart" class="isra-chart" style="height:390px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
// import resize from './../mixins/resize'
|
||||
// import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'ISRAChart',
|
||||
// mixins: [resize],
|
||||
// components:{ NotMsg },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
// notMsg:true,
|
||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
chartData: []
|
||||
};
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
israChartMsg() {
|
||||
return this.$store.state.websocket.israKiln
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
this.chartData = newVal || []
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
console.log('update')
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num+=i.num
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
// if (this.chartData && this.chartData.length > 0) {
|
||||
// this.notMsg = false
|
||||
// } else {
|
||||
// this.notMsg = true
|
||||
// return
|
||||
// }
|
||||
this.chart = echarts.init(document.getElementById('israChart'));
|
||||
var option = {
|
||||
color:this.colors,
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
top: '32%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 20,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
itemWidth: 20,
|
||||
itemHeight:12,
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||
name:item.name,
|
||||
itemStyle:{
|
||||
color: this.colors[index%4]
|
||||
}
|
||||
}))
|
||||
},
|
||||
series:[{
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
center: ['50%', '40%'],
|
||||
radius: ['45%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.num,
|
||||
itemStyle:{
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
global: false,
|
||||
colorStops:[
|
||||
{offset: 0,color: this.colors[index%4]},
|
||||
{offset: 1,color: this.colors[index%4]+'33'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}))}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip"
|
||||
},
|
||||
}
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.isra-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-01-24 09:12:18
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-25 17:41:44
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -143,9 +143,9 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// // this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-08 16:03:05
|
||||
* @LastEditTime: 2024-02-22 10:26:59
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
@ -22,12 +22,24 @@
|
||||
</template>
|
||||
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<div v-if="title" class="bar-title" ds>
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
<!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||||
{{ time2 +'-'+ time }}
|
||||
</span> -->
|
||||
<span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
|
||||
{{ startTime + '-' + endTime }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div v-if="true" class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
||||
<slot />
|
||||
</div>
|
||||
@ -36,6 +48,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'BaseContainer',
|
||||
props: {
|
||||
@ -47,6 +60,14 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showYesTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
back: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -83,52 +104,111 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0,
|
||||
time: null,
|
||||
time2: null,
|
||||
startTime: undefined,
|
||||
endTime: undefined
|
||||
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.back);
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
|
||||
// })
|
||||
// console.log(this.$refs.baseContainer.style)
|
||||
},
|
||||
mounted () {
|
||||
// this.time = this.format(new Date().setHours(7,0,0));
|
||||
// // console.log(time);
|
||||
// //前一天时间
|
||||
let nowTime = new Date
|
||||
let hour = nowTime.getHours()
|
||||
if (hour > 6) {
|
||||
this.startTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
|
||||
this.endTime = moment(moment(nowTime) + 86400000).format('yyyy.MM.DD') + ' 7点'
|
||||
} else {
|
||||
this.endTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
|
||||
this.startTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 7点'
|
||||
}
|
||||
// this.yesStartTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 0点'
|
||||
// this.yesEndTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 24点'
|
||||
|
||||
// this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||||
// console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
|
||||
},
|
||||
methods: {
|
||||
changeTab(num) {
|
||||
this.curIndex = num
|
||||
this.$emit('tabSelect', num)
|
||||
}
|
||||
// add0(m) {
|
||||
// return m < 10 ? '0' + m : m
|
||||
// },
|
||||
// format(shijianchuo) {
|
||||
// //shijianchuo是整数，否则要parseInt转换
|
||||
// var time = new Date(shijianchuo);
|
||||
// var y = time.getFullYear();
|
||||
// var m = time.getMonth() + 1;
|
||||
// var d = time.getDate();
|
||||
// var h = time.getHours();
|
||||
// var mm = time.getMinutes();
|
||||
// var s = time.getSeconds();
|
||||
// return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
|
||||
// },
|
||||
// changeTab(num) {
|
||||
// this.curIndex = num
|
||||
// this.$emit('tabSelect', num)
|
||||
// },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
// background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
opacity: calc(.8);
|
||||
// border: 2px solid;
|
||||
// background: url('../../../../assets/img/energy.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
&__small {
|
||||
background: url(../../../../assets/img/short.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
// &__small::after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// filter: blur(20px);
|
||||
// z-index: -1;
|
||||
// }
|
||||
&__middle {
|
||||
background: url(../../../../assets/img/middle.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
&__large {
|
||||
background: url(../../../../assets/img/high.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-position: 0 0;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
&__eqStatus {
|
||||
background: url(../../../../assets/img/high.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
// &::after {
|
||||
// content: " ";
|
||||
// // display: block;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// // background: inherit;
|
||||
// /* 设置模糊，不用 filter */
|
||||
// backdrop-filter: blur(5px);
|
||||
// z-index: -1;
|
||||
// }
|
||||
// border-radius: 40px 0px 40px 0px;
|
||||
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
|
||||
// .line {
|
||||
@ -192,13 +272,15 @@ export default {
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 1.6em;
|
||||
padding: 0.67em;
|
||||
font-size: 24px;
|
||||
padding: 0.67em 0.67em 0.3em 0.67em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
padding: 1em;
|
||||
padding: .5em 1em 1em 1em;
|
||||
flex: 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
@ -213,4 +295,9 @@ export default {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
// .base-container::after{
|
||||
// z-index: -1;
|
||||
// width: 100%;
|
||||
// filter: blur(2px);
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-08 14:09:05
|
||||
* @LastEditTime: 2024-01-12 14:30:46
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
@ -110,12 +110,12 @@ export default {
|
||||
},
|
||||
classOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.list
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleHeight: 0/1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
|
||||
292
src/views/OperationalOverview/components/coldDoubleYChart.vue
Normal file
292
src/views/OperationalOverview/components/coldDoubleYChart.vue
Normal file
@ -0,0 +1,292 @@
|
||||
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-01-29 15:39:59
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'linearBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
borderRadius: {
|
||||
type: Array,
|
||||
default: () => [9, 9, 0, 0]
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 6
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, passRateList, outputNumList) {
|
||||
console.log(nameList, passRateList)
|
||||
let series= [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DD5FF' },
|
||||
{ offset: 0.3, color: '#1295FF' }
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ced1d5',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
}
|
||||
// barBorderRadius: this.borderRadius
|
||||
},
|
||||
barWidth: 12,
|
||||
data: outputNumList
|
||||
},
|
||||
{
|
||||
name: '产线良品率',
|
||||
symbol: 'circle', //变为实心圆
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 209, 96, 0.18)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 234, 153, 0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: passRateList
|
||||
}
|
||||
]
|
||||
// const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
// color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: '1%',
|
||||
// right: '20px',
|
||||
data: ['产线产量', '产线良品率'],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
data: nameList
|
||||
},
|
||||
// yAxis: {
|
||||
|
||||
// },
|
||||
yAxis: [
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '良品率/%',
|
||||
nameTextStyle: {// y轴上方单位的颜色
|
||||
color: '#fff',
|
||||
align: "left",
|
||||
},
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ced1d5', // 坐标值得具体的颜色
|
||||
formatter: '{value}%'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
}
|
||||
// type: 'value'
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: colors[0]
|
||||
// }
|
||||
// },
|
||||
},
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '产量/㎡', // y轴上方的单位
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
// fontSize: 10,
|
||||
align: "right",
|
||||
},
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||
formatter: '{value} 片'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
}
|
||||
// type: 'value'
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: colors[1]
|
||||
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
|
||||
// },
|
||||
}
|
||||
],
|
||||
series: series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.productChart{
|
||||
top: -10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-01-09 14:42:02
|
||||
* @LastEditTime: 2024-02-01 15:52:41
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||
<div style="height: 400px;">
|
||||
<div :id="id" class="productChart" :style="{ height: '420px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
// import resize from './../mixins/resize'
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
@ -67,12 +67,18 @@ export default {
|
||||
}]
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// console.log('mounted')
|
||||
// console.log('borderRadius: ', this.borderRadius)
|
||||
// // this.$nextTick(() => {
|
||||
// // this.initChart()
|
||||
// // })
|
||||
// },
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
@ -83,6 +89,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, passRateList, outputNumList) {
|
||||
console.log(nameList, passRateList)
|
||||
let series= [
|
||||
{
|
||||
name: '产线产量',
|
||||
@ -134,7 +141,8 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: passRateList
|
||||
// data: passRateList
|
||||
data: []
|
||||
}
|
||||
]
|
||||
// const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||
@ -147,15 +155,12 @@ export default {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
width: 'auto',
|
||||
height: "auto",
|
||||
containLabel: true
|
||||
},
|
||||
grid: { top: 90, right: 60, bottom: 20, left: 90 },
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: '0%',
|
||||
right: '20px',
|
||||
data: ['产线产量', '产线良品率'],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
@ -172,9 +177,12 @@ export default {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
// textStyle: {
|
||||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -188,12 +196,12 @@ export default {
|
||||
// },
|
||||
yAxis: [
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
// min: function() { // 取最小值向下取整为最小刻度
|
||||
// return 0
|
||||
// },
|
||||
// max: function(value) { // 取最大值向上取整为最大刻度
|
||||
// return Math.ceil(value.max)
|
||||
// },
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '良品率/%',
|
||||
@ -212,10 +220,11 @@ export default {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ced1d5', // 坐标值得具体的颜色
|
||||
formatter: '{value}%'
|
||||
}
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
formatter: '{value}%'
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -231,21 +240,21 @@ export default {
|
||||
// },
|
||||
},
|
||||
{
|
||||
min: function() { // 取最小值向下取整为最小刻度
|
||||
return 0
|
||||
},
|
||||
max: function(value) { // 取最大值向上取整为最大刻度
|
||||
return Math.ceil(value.max)
|
||||
},
|
||||
// min: function() { // 取最小值向下取整为最小刻度
|
||||
// return 0
|
||||
// },
|
||||
// max: function(value) { // 取最大值向上取整为最大刻度
|
||||
// return Math.ceil(value.max)
|
||||
// },
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '产量/㎡', // y轴上方的单位
|
||||
name: '产量/片', // y轴上方的单位
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
// fontSize: 10,
|
||||
align: "right",
|
||||
},
|
||||
position: 'left',
|
||||
// position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -256,10 +265,13 @@ export default {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||
formatter: '{value} 片'
|
||||
}
|
||||
// textStyle: {
|
||||
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
formatter: '{value} 片'
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -271,7 +283,7 @@ export default {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: colors[1]
|
||||
// }
|
||||
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
|
||||
// },
|
||||
}
|
||||
],
|
||||
@ -281,3 +293,11 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.productChart{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: -30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -83,20 +83,38 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList,dataList) {
|
||||
initChart(nameList, dataList) {
|
||||
console.log('1111', dataList);
|
||||
// console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
if (dataList.length !== 0) {
|
||||
// if (dataList.length !== 0) {
|
||||
// this.$set(this.series, "data", dataList);
|
||||
this.series = [{
|
||||
type: 'bar',
|
||||
data: dataList,
|
||||
barWidth: 6
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DD5FF' },
|
||||
{ offset: 0.3, color: '#1295FF' }
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ced1d5',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
}
|
||||
// barBorderRadius: this.borderRadius
|
||||
},
|
||||
barWidth: 12,
|
||||
}]
|
||||
}
|
||||
if (nameList.length !== 0) {
|
||||
// }
|
||||
// if (nameList.length !== 0) {
|
||||
this.nameList = nameList
|
||||
}
|
||||
// }
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -112,6 +130,16 @@ export default {
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
// legend: {
|
||||
// itemWidth: 10,
|
||||
// itemHeight: 10,
|
||||
// // right: '20px',
|
||||
// data: nameList,
|
||||
// textStyle: {
|
||||
// fontSize: 12 * this.beilv,
|
||||
// color: '#ced1d5'
|
||||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
@ -122,9 +150,9 @@ export default {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -134,25 +162,29 @@ export default {
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
name: '单位kwh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true, // 是否显示 y 轴
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value}/kwh'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// itemHeight: 10,
|
||||
@ -173,3 +205,4 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2023-12-29 16:28:26
|
||||
* @LastEditTime: 2024-02-21 14:38:54
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||
<div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -91,41 +91,78 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
let rawData = []
|
||||
rawData.push(passRateList,wasteList)
|
||||
// console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
let series = [
|
||||
{
|
||||
// 辅助系列
|
||||
name: '良品',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
color: '#0fdedb',
|
||||
// },
|
||||
barWidth: 10,
|
||||
data: passRateList
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
name: '废品',
|
||||
data: wasteList,
|
||||
barWidth: 10,
|
||||
// barWidth: 15,
|
||||
// label: {
|
||||
// position: [10, 10],
|
||||
// normal: {
|
||||
// position: [800, -24],
|
||||
// show: true,
|
||||
// textStyle: {
|
||||
// color: '#2359ec',
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
const totalData = [];
|
||||
for (let i = 0; i < rawData[0].length; ++i) {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < rawData.length; ++j) {
|
||||
sum += rawData[j][i];
|
||||
}
|
||||
]
|
||||
totalData.push(sum);
|
||||
}
|
||||
let colors = ['#0fdedb', '#2359ec' ]
|
||||
console.log('total', totalData);
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
const series = [
|
||||
'良品',
|
||||
'废品',
|
||||
// 'Affiliate Ad',
|
||||
// 'Video Ad',
|
||||
// 'Search Engine'
|
||||
].map((name, sid) => {
|
||||
// console.log(sid)
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||
},
|
||||
color:colors[sid],
|
||||
data: rawData[sid].map((d, did) =>
|
||||
totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||
)
|
||||
};
|
||||
});
|
||||
// let series = [
|
||||
// {
|
||||
// // 辅助系列
|
||||
// name: '良品',
|
||||
// type: 'bar',
|
||||
// stack: 'total',
|
||||
// // silent: true,
|
||||
// // itemStyle: {
|
||||
// color: '#0fdedb',
|
||||
// // },
|
||||
// // barCategoryGap: '10%',
|
||||
// barWidth: 10,
|
||||
// data: passRateList
|
||||
// },
|
||||
// {
|
||||
// type: 'bar',
|
||||
// stack: 'total',
|
||||
// name: '废品',
|
||||
// // barCategoryGap: '10%',
|
||||
// data: wasteList,
|
||||
// // barWidth: 10,
|
||||
// // barWidth: 15,
|
||||
// // label: {
|
||||
// // position: [10, 10],
|
||||
// // normal: {
|
||||
// // position: [800, -24],
|
||||
// // show: true,
|
||||
// // textStyle: {
|
||||
// // color: '#2359ec',
|
||||
// // fontSize: 16,
|
||||
// // },
|
||||
// // },
|
||||
// // },
|
||||
// }
|
||||
// ]
|
||||
// for (i = 0; i < 5; i++) {
|
||||
// series.push({
|
||||
|
||||
@ -133,16 +170,20 @@ export default {
|
||||
// }
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// top: '2.5%',
|
||||
// right: '20px',
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top:'80',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
// bottom: '3%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
height: '300',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
@ -213,3 +254,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
62
src/views/OperationalOverview/components/resize.js
Normal file
62
src/views/OperationalOverview/components/resize.js
Normal file
@ -0,0 +1,62 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-02-01 15:39:22
|
||||
* @LastEditTime: 2024-02-01 15:39:23
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-08 16:06:49
|
||||
* @LastEditTime: 2024-02-23 16:11:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -14,7 +14,7 @@
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||||
许昌安彩深加工看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
<!-- <el-button
|
||||
type="text"
|
||||
@ -30,20 +30,27 @@
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
|
||||
:table-data="equipmentList" />
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
|
||||
:table-data="equipmentList" /> -->
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList" /> -->
|
||||
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
|
||||
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList" />
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList" /> -->
|
||||
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList" /> -->
|
||||
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -56,37 +63,15 @@
|
||||
</el-row> -->
|
||||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
|
||||
<!-- <el-col :span="12"> -->
|
||||
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">{{ op.name }}</p>
|
||||
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
|
||||
:percentage="op.progressRate * 100" class="custom-progress-bar" />
|
||||
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
{{ op.name }}
|
||||
</p> -->
|
||||
<p class="now-secondary-title">{{ op.name }}</p>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
成都碲化镉5000一期订单
|
||||
</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">成都碲化镉二订单</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">长利订单1000</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">国际工程20号订单</p>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
||||
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
|
||||
</el-row> -->
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</base-container>
|
||||
@ -95,7 +80,8 @@
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :height="256" :size="'middle'" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||||
<base-container :show-yes-time="true" :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'"
|
||||
:title-icon="'energyMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -117,13 +103,13 @@
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'"
|
||||
:title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
|
||||
:data-list="cxDataList" :height="359" :show-legend="true" />
|
||||
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="390" :show-legend="true" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -145,6 +131,7 @@
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
|
||||
import baseTable1 from './components/baseTable'
|
||||
// import baseTable2 from './components/baseTable'
|
||||
// import baseTable3 from './components/baseTable'
|
||||
@ -418,21 +405,26 @@ const qualityYearTableProps = [
|
||||
]
|
||||
|
||||
const qualityYearList = [
|
||||
{ eqName: '钢化炉', eqCode: '21321312', level: 1, content: 'Temperature high' },
|
||||
{ eqName: '磨边机', eqCode: '32323232', level: 4, content: 'Device warning/alarm' },
|
||||
{ eqName: '镀膜机', eqCode: '32213213', level: 3, content: 'Temperature high' },
|
||||
{ eqName: '钢化清洗机', eqCode: '21321323', level: 1, content: 'P030: JET: Note: Transportation subsequent machine is not running' },
|
||||
{ eqName: '固化机', eqCode: '21321321', level: 2, content: 'P040' },
|
||||
{ eqName: '磨边清洗机', eqCode: '21321321', level: 2, content: 'M4033.6' },
|
||||
{ eqName: '预热机', eqCode: '21321321', level: 2, content: 'M4033.6' },
|
||||
{ eqName: '下片机', eqCode: '21321321', level: 3, content: 'P040' },
|
||||
{
|
||||
eqName: '冷却机', eqCode: '21321321', level: 4, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
|
||||
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' },
|
||||
{
|
||||
eqName: 'A储片机106', eqCode: '21321321', level: 1, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
|
||||
{ eqName: '二次清洗机', eqCode: '21321321', level: 2, content: 'Temperature high' },
|
||||
{ eqName: '二次磨边机', eqCode: '21321321', level: 2, content: 'Temperature high' },
|
||||
{ eqName: '测试设备', eqCode: '21321321', level: 2, content: 'Temperature high' }
|
||||
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' },
|
||||
{
|
||||
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' },
|
||||
{ name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' },
|
||||
{ name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' },
|
||||
{
|
||||
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' },
|
||||
{ name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' },
|
||||
{ name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' },
|
||||
{
|
||||
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' },
|
||||
{
|
||||
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' },
|
||||
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' },
|
||||
{
|
||||
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' },
|
||||
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' }
|
||||
|
||||
]
|
||||
const qualityMonthTableProps = [
|
||||
@ -453,7 +445,50 @@ const qualityMonthTableProps = [
|
||||
label: '缺陷类型'
|
||||
},
|
||||
]
|
||||
|
||||
const qualityMonthList = [
|
||||
{
|
||||
productionLineName: 'D61',
|
||||
sectionName: '成型',
|
||||
count: '3片',
|
||||
inspectionTypeName: '细长泡'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D62',
|
||||
sectionName: '组合落板',
|
||||
count: '4片',
|
||||
inspectionTypeName: '细长泡'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D61',
|
||||
sectionName: '磨边',
|
||||
count: '6片',
|
||||
inspectionTypeName: '开口泡'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D63',
|
||||
sectionName: '清洗',
|
||||
count: '5片',
|
||||
inspectionTypeName: '结石'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D64',
|
||||
sectionName: '打孔',
|
||||
count: '2片',
|
||||
inspectionTypeName: '结石'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D63',
|
||||
sectionName: '成型',
|
||||
count: '7片',
|
||||
inspectionTypeName: '开口泡'
|
||||
},
|
||||
{
|
||||
productionLineName: 'D61',
|
||||
sectionName: '上片',
|
||||
count: '8片',
|
||||
inspectionTypeName: '结石'
|
||||
}
|
||||
]
|
||||
const orderProcessList = [
|
||||
{
|
||||
id: '1', outRate: '.8', name: '凯盛0322'
|
||||
@ -500,6 +535,28 @@ export default {
|
||||
// offsetWidth: null,
|
||||
qualityYearTableProps,
|
||||
cxNameList,
|
||||
eqConfig: {
|
||||
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [70, 100, 200, 90, 90,],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
processConfig: {
|
||||
header: ['序号', '产线名称', '工序', '损耗片数', '缺陷类型'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [70, 130, 100, 120, 110,],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// index:true,
|
||||
rowNum: 10
|
||||
},
|
||||
cxDataList,
|
||||
productLineList:[],
|
||||
qualityYearList,
|
||||
@ -509,7 +566,7 @@ export default {
|
||||
// orderProcessList: [],
|
||||
orderProcessList,
|
||||
qualityTableProps1,
|
||||
qualityMonthList:[],
|
||||
qualityMonthList,
|
||||
qualityMonthTableProps,
|
||||
modelMonth: '',
|
||||
qualityList1,
|
||||
@ -553,12 +610,34 @@ export default {
|
||||
// this.fetchList('order-process')
|
||||
// this.fetchList('line-chart-data')
|
||||
this.init()
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 86400000)
|
||||
},
|
||||
destroyed () {
|
||||
this.websocketClose()
|
||||
this.SJGWebsocketClose()
|
||||
},
|
||||
mounted() {
|
||||
let eqArr = this.qualityYearList.map((item, index) => [
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
||||
])
|
||||
this.eqConfig.data = eqArr
|
||||
this.$refs['eqScrollBoard'].updateRows(eqArr)
|
||||
this.getList()
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
this.getTimes()
|
||||
// this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
|
||||
// this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
@ -606,7 +685,36 @@ export default {
|
||||
'get',
|
||||
).then((res) => {
|
||||
// console.log('11111', res);
|
||||
this.qualityMonthList = res.data ? res.data : []
|
||||
let processArr = qualityMonthList.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||||
])
|
||||
this.processConfig.data = processArr
|
||||
this.$refs['processScrollBoard'].updateRows(processArr)
|
||||
if (res.data.length !==0) {
|
||||
let processArr = res.data.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||||
])
|
||||
this.processConfig.data = processArr
|
||||
this.$refs['processScrollBoard'].updateRows(processArr)
|
||||
}
|
||||
})
|
||||
},
|
||||
getTimes() {
|
||||
@ -702,17 +810,31 @@ export default {
|
||||
});
|
||||
console.log(this.orderList)
|
||||
} else if (this.SJGWsData.type === 'equipment') {
|
||||
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
name: ele.name,
|
||||
code: ele.code,
|
||||
status: ele.status,
|
||||
error: ele.error=== true ? '是' : '否'
|
||||
}
|
||||
// }
|
||||
});
|
||||
// this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// // if (ele.progressRate != 1) {
|
||||
// return {
|
||||
// id: ele.id,
|
||||
// name: ele.name,
|
||||
// code: ele.code,
|
||||
// status: ele.status,
|
||||
// error: ele.error=== true ? '是' : '否'
|
||||
// }
|
||||
// // }
|
||||
// });
|
||||
let eqArr = this.SJGWsData.detData.map((item, index) => [
|
||||
// console.log(item)
|
||||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||||
</span>`,
|
||||
// formatDate(item.planStartTime) || '',
|
||||
`
|
||||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||||
</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
|
||||
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
|
||||
])
|
||||
this.eqConfig.data = eqArr
|
||||
this.$refs['eqScrollBoard'].updateRows(eqArr)
|
||||
// console.log(SJGWsData.orderList)
|
||||
} else if (this.SJGWsData.type === 'productline') {
|
||||
// console.log(this.wsData.detData);
|
||||
@ -724,20 +846,21 @@ export default {
|
||||
this.productLineList.forEach((item) => {
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
if (item.id == ele.productionLineId) {
|
||||
nameList.push(item.name)
|
||||
if (item.name.substr(0, 1) == "D") {
|
||||
console.log(ele)
|
||||
nameList.push(item.name)
|
||||
outputNumList.push(ele.outputNum)
|
||||
passRateList.push(ele.passRate)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
// progressRateList = EnergyNameList
|
||||
// let EnergyDataList = []
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
passRateList.push(ele.passRate *100
|
||||
)
|
||||
})
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
outputNumList.push(ele.outputNum
|
||||
)
|
||||
})
|
||||
// this.SJGWsData.detData.forEach((ele) => {
|
||||
// })
|
||||
// this.SJGWsData.detData.forEach((ele) => {
|
||||
// })
|
||||
// console.log(this.EnergyMonitoringNameList)
|
||||
// console.log(this.EnergyMonitoringList)
|
||||
// this.$nextTick(() => {
|
||||
@ -749,9 +872,9 @@ export default {
|
||||
// this.websocket.send('11111')
|
||||
// },
|
||||
// // 关闭
|
||||
// SJGWebsocketClose(e) {
|
||||
// console.log('WebSocket 断开连接', e)
|
||||
// },
|
||||
SJGWebsocketClose(e) {
|
||||
console.log('WebSocket 断开连接', e)
|
||||
},
|
||||
// // 连接建立之后执行send方法发送数据
|
||||
websocketOnOpen() {
|
||||
console.log('socket连接成功')
|
||||
@ -870,6 +993,7 @@ export default {
|
||||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #00fff0;
|
||||
word-spacing: 8px;
|
||||
text-align: center;
|
||||
.unit {
|
||||
position: absolute;
|
||||
@ -926,10 +1050,6 @@ export default {
|
||||
background-color: unset;
|
||||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||
}
|
||||
// ::v-deep .el-progress-bar__outer {
|
||||
// background-color:rgba(71, 248, 220, 1);
|
||||
// // background-image: rgba(71, 248, 220, 1))
|
||||
// }
|
||||
.visual-select {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
@ -985,11 +1105,11 @@ export default {
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
border: rgba($color: #31878c, $alpha: 0.29);
|
||||
color: aliceblue;
|
||||
}
|
||||
// .el-input__inner {
|
||||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||||
// color: aliceblue;
|
||||
// }
|
||||
|
||||
.el-divider--vertical {
|
||||
height: 174px;
|
||||
@ -999,7 +1119,6 @@ export default {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@ -1011,9 +1130,12 @@ export default {
|
||||
flex: 1 1;
|
||||
}
|
||||
.h-full {
|
||||
height: calc(100vh - 150px);
|
||||
height: calc(100vh);
|
||||
}
|
||||
/* .container-main {
|
||||
min-height: calc(100vh - 10em);
|
||||
} */
|
||||
.eqTable{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
183
src/views/OperationalOverview/websocket.js
Normal file
183
src/views/OperationalOverview/websocket.js
Normal file
@ -0,0 +1,183 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-01-29 17:05:25
|
||||
* @LastEditTime: 2024-01-29 17:05:25
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export function WsConnect(url, agentData, successCallback, errCallback) {
|
||||
this.wsUrl = url;
|
||||
this.wsObj = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
this.lockReconnect = false;
|
||||
// 重连定时器
|
||||
this.wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
this.messageCallback = successCallback;
|
||||
// 连接失败，执行回调函数
|
||||
this.errorCallback = errCallback;
|
||||
// 发送给后台的数据
|
||||
this.sendDatas = agentData;
|
||||
// 创建ws函数
|
||||
this.createWebSoket = () => {
|
||||
if (typeof WebSocket === "undefined") {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
this.wsObj = new WebSocket(url);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
this.closeWebsocket = () => {
|
||||
if (this.wsObj) {
|
||||
writeToScreen("手动关闭websocket");
|
||||
this.wsObj.close(); // 关闭websocket
|
||||
// this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
this.lockReconnect = true;
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
// heartCheck.stop();
|
||||
}
|
||||
};
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
this.wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
this.wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
this.wsObj.onclose = (event) => {
|
||||
writeToScreen("onclose执行关闭事件");
|
||||
onWsClose(event);
|
||||
};
|
||||
|
||||
this.wsObj.onerror = (event) => {
|
||||
writeToScreen("onerror执行error事件，开始重连");
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
};
|
||||
} catch (err) {
|
||||
writeToScreen("绑定事件没有成功，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen("CONNECT");
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (this.wsObj.readyState === this.wsObj.OPEN) {
|
||||
// wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
this.wsObj.send(JSON.stringify(this.sendDatas));
|
||||
}
|
||||
if (this.wsObj.readyState === this.wsObj.CLOSED) {
|
||||
// wsObj.CLOSED = 3
|
||||
writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
|
||||
reconnect();
|
||||
this.errorCallback(event);
|
||||
}
|
||||
};
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
this.messageCallback(jsonStr);
|
||||
};
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen("DISCONNECT");
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log("onclose event: ", event);
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen("非正常关闭");
|
||||
this.errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
const onWsError = (event) => {
|
||||
writeToScreen("onWsError: ", event.data);
|
||||
this.errorCallback(event);
|
||||
};
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
};
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (this.lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen("3秒后重连");
|
||||
this.lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
this.wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen("重连..." + this.wsUrl);
|
||||
this.createWebSoket();
|
||||
this.lockReconnect = false;
|
||||
writeToScreen("重连完成");
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
// let heartCheck = {
|
||||
// timeout: 15000,
|
||||
// timeoutObj: null,
|
||||
// serverTimeoutObj: null,
|
||||
// // 重启
|
||||
// reset() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// this.start();
|
||||
// },
|
||||
// // 停止
|
||||
// stop() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// },
|
||||
// // 开启定时器
|
||||
// start() {
|
||||
// this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
// this.timeoutObj = setTimeout(() => {
|
||||
// writeToScreen("心跳检查，发送ping到后台");
|
||||
// try {
|
||||
// const datas = { ping: true };
|
||||
// this.wsObj.send(JSON.stringify(datas));
|
||||
// } catch (err) {
|
||||
// writeToScreen("发送ping异常");
|
||||
// }
|
||||
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
|
||||
// // 内嵌定时器
|
||||
// this.serverTimeoutObj = setTimeout(() => {
|
||||
// writeToScreen("没有收到后台的数据，重新连接");
|
||||
// reconnect();
|
||||
// }, this.timeout);
|
||||
// }, this.timeout);
|
||||
// },
|
||||
// };
|
||||
}
|
||||
51
src/views/OperationalOverview/wsInterface.js
Normal file
51
src/views/OperationalOverview/wsInterface.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { WsConnect } from './websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建websocket链接
|
||||
|
||||
const timestr = new Date().getTime()
|
||||
// ISRA
|
||||
const mesIsra = new WsConnect(
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
|
||||
'',
|
||||
(data) => {
|
||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
// console.log(msgData)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export const getDcsMsg = () => {
|
||||
// dcsConn.createWebSoket()
|
||||
mesIsra.createWebSoket()
|
||||
// mesMA.createWebSoket()
|
||||
// mesEN.createWebSoket()
|
||||
// mesGAS.createWebSoket()
|
||||
// mesIS.createWebSoket()
|
||||
// mesSJG.createWebSoket()
|
||||
// mesOV.createWebSoket()
|
||||
// mesCUTTING.createWebSoket()
|
||||
}
|
||||
export const closeDcsMsg = () => {
|
||||
// dcsConn.closeWebsocket()
|
||||
mesIsra.closeWebsocket()
|
||||
// mesMA.closeWebsocket()
|
||||
// mesEN.closeWebsocket()
|
||||
// mesGAS.closeWebsocket()
|
||||
// mesIS.closeWebsocket()
|
||||
// mesSJG.closeWebsocket()
|
||||
// mesOV.closeWebsocket()
|
||||
// mesCUTTING.closeWebsocket()
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2024-01-08 16:11:03
|
||||
* @LastEditTime: 2024-02-21 09:04:48
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -27,7 +27,7 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="dataForm.name" :disabled="isdetail" clearable placeholder="请输入产品名称" />
|
||||
<el-input v-model="dataForm.name" :disabled="isdetail || isedit" clearable placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -35,7 +35,7 @@
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
clearable
|
||||
:disabled="isdetail"
|
||||
:disabled="isdetail || isedit"
|
||||
placeholder="请输入产品编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -44,12 +44,12 @@
|
||||
<el-select
|
||||
v-model="dataForm.materialType"
|
||||
filterable
|
||||
:disabled="isdetail"
|
||||
:disabled="isdetail || isedit"
|
||||
style="width: 100%"
|
||||
placeholder="请选择物料类型">
|
||||
<el-option
|
||||
v-for="dict in getDictDatas('material_type')"
|
||||
:key="dict.value"
|
||||
v-for="(dict, index) in getDictDatas('material_type')"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
@ -62,12 +62,12 @@
|
||||
<el-select
|
||||
v-model="dataForm.productType"
|
||||
filterable
|
||||
:disabled="isdetail"
|
||||
:disabled="isdetail || isedit"
|
||||
style="width: 100%"
|
||||
placeholder="请选择产品类型">
|
||||
<el-option
|
||||
v-for="dict in getDictDatas(DICT_TYPE.PRODUCT_TYPE)"
|
||||
:key="dict.value"
|
||||
v-for="(dict, index) in getDictDatas(DICT_TYPE.PRODUCT_TYPE)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
@ -78,12 +78,12 @@
|
||||
<el-select
|
||||
v-model="dataForm.unit"
|
||||
filterable
|
||||
:disabled="isdetail"
|
||||
:disabled="isdetail || isedit"
|
||||
style="width: 100%"
|
||||
placeholder="请选择单位">
|
||||
<el-option
|
||||
v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
|
||||
:key="dict.value"
|
||||
v-for="(dict, index) in getDictDatas(DICT_TYPE.UNIT_DICT)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
@ -91,24 +91,24 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位平方数" prop="area">
|
||||
<el-input-number v-model="dataForm.area" :precision="6" :min="0" style="width: 100%" :disabled="isdetail" clearable placeholder="请输入单位平方数" />
|
||||
<el-input-number v-model="dataForm.area" :precision="6" :min="0" style="width: 100%" :disabled="isdetail || isedit" clearable placeholder="请输入单位平方数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="规格" prop="specifications">
|
||||
<el-input v-model="dataForm.specifications" :disabled="isdetail" @blur="setArea" @clear="clearArea" clearable placeholder="请输入规格" />
|
||||
<el-input v-model="dataForm.specifications" :disabled="isdetail || isedit" @blur="setArea" @clear="clearArea" clearable placeholder="请输入规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="产线生产单位用时(S)" prop="processTime">
|
||||
<el-form-item label="生产节拍(S)" prop="processTime">
|
||||
<el-input v-model.number="dataForm.processTime" :precision="4" :min="0" type="number" :disabled="isdetail" clearable placeholder="请输入产线生产单位用时" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="重量" prop="weight">
|
||||
<el-input-number v-model="dataForm.weight" :precision="6" :min="0" style="width: 100%" :disabled="isdetail" clearable placeholder="请输入重量" />
|
||||
<el-input-number v-model="dataForm.weight" :precision="6" :min="0" style="width: 100%" :disabled="isdetail || isedit" clearable placeholder="请输入重量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -241,7 +241,7 @@ export default {
|
||||
productType: undefined,
|
||||
area: undefined,
|
||||
specifications: undefined,
|
||||
processTime: 0,
|
||||
processTime: undefined,
|
||||
remark: undefined,
|
||||
unit: undefined,
|
||||
weight: undefined
|
||||
@ -249,14 +249,14 @@ export default {
|
||||
productAttrList: [],
|
||||
visible: false,
|
||||
isdetail: false,
|
||||
isedit: false,
|
||||
idAttrShow: false,
|
||||
dataRule: {
|
||||
code: [{ required: true, message: "产品编码不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
|
||||
specifications: [{ required: true, message: "规格不能为空", trigger: "blur" }],
|
||||
materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
|
||||
productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }],
|
||||
processTime: [{ required: true, message: "产线生产单位用时不能为空", trigger: "blur" }]
|
||||
productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }]
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -326,6 +326,8 @@ export default {
|
||||
this.initData();
|
||||
this.isdetail = isdetail || false;
|
||||
this.dataForm.id = id || undefined;
|
||||
this.isedit = id ? true : false;
|
||||
console.log('你好', this.isedit)
|
||||
this.visible = true;
|
||||
if (id) {
|
||||
this.idAttrShow = true
|
||||
@ -343,10 +345,9 @@ export default {
|
||||
// this.dataForm.area = response.data.area || 0
|
||||
// this.dataForm.weight = response.data.weight || 0
|
||||
// this.dataForm.specifications = response.data.specifications || undefined
|
||||
console.log('11res112', this.dataForm.specifications, this.dataForm.weight, this.dataForm.area)
|
||||
if (this.dataForm.unit !== undefined) {
|
||||
this.dataForm.unit = String(this.dataForm.unit)
|
||||
}
|
||||
// if (this.dataForm.unit !== undefined) {
|
||||
// this.dataForm.unit = String(this.dataForm.unit)
|
||||
// }
|
||||
if (this.dataForm.materialType !== undefined) {
|
||||
this.dataForm.materialType = String(this.dataForm.materialType)
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-11-21 18:59:54
|
||||
* @LastEditTime: 2024-02-18 13:53:09
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -12,18 +12,6 @@
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线名称" prop="name">
|
||||
<el-input v-model="dataForm.name" clearable placeholder="请输入产线名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线编号" prop="code">
|
||||
<el-input v-model="dataForm.code" clearable placeholder="请输入产线编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工厂名称" prop="factoryId">
|
||||
@ -41,6 +29,36 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车间名称" prop="roomNameDict">
|
||||
<el-select
|
||||
v-model="dataForm.roomNameDict"
|
||||
filterable
|
||||
:disabled="isdetail || isedit"
|
||||
style="width: 100%"
|
||||
placeholder="请选择车间名称">
|
||||
<el-option
|
||||
v-for="(dict, index) in getDictDatas('workshop')"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线名称" prop="name">
|
||||
<el-input v-model="dataForm.name" clearable placeholder="请输入产线名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产线编号" prop="code">
|
||||
<el-input v-model="dataForm.code" clearable placeholder="请输入产线编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="产线TT值(h)" prop="tvalue">
|
||||
<el-input
|
||||
v-model.number="dataForm.tvalue"
|
||||
@ -92,11 +110,13 @@ export default {
|
||||
tvalue: 0,
|
||||
factoryId: undefined,
|
||||
remark: undefined,
|
||||
roomNameDict: undefined
|
||||
},
|
||||
factoryList: [],
|
||||
dataRule: {
|
||||
code: [{ required: true, message: "产线编号不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "产线名称不能为空", trigger: "blur" }],
|
||||
roomNameDict: [{ required: true, message: "车间名称不能为空", trigger: "blur" }],
|
||||
factoryId: [{ required: true, message: "工厂不能为空", trigger: "blur" }]
|
||||
}
|
||||
};
|
||||
|
||||
@ -47,6 +47,7 @@ import {
|
||||
} from '@/api/base/coreProductionLine';
|
||||
import { getStatus } from '@/api/core/base/productionLine';
|
||||
import codeFilter from '../../core/mixins/code-filter';
|
||||
import { publicFormatter } from '@/utils/dict';
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
@ -58,6 +59,11 @@ const tableProps = [
|
||||
prop: 'factoryName',
|
||||
label: '工厂'
|
||||
},
|
||||
{
|
||||
prop: 'roomNameDict',
|
||||
label: '车间名称',
|
||||
filter: publicFormatter('workshop')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '产线名称'
|
||||
@ -71,10 +77,10 @@ const tableProps = [
|
||||
label: '当前状态',
|
||||
filter: codeFilter('lineStatus')
|
||||
},
|
||||
{
|
||||
prop: 'tvalue',
|
||||
label: '产线TT值(h)'
|
||||
},
|
||||
// {
|
||||
// prop: 'tvalue',
|
||||
// label: '产线TT值(h)'
|
||||
// },
|
||||
{
|
||||
prop: 'description',
|
||||
label: '描述'
|
||||
@ -82,7 +88,7 @@ const tableProps = [
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注'
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
|
||||
@ -116,6 +116,22 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span='8'>
|
||||
<el-form-item label="负责车间" prop="roomNameDict">
|
||||
<el-select
|
||||
v-model="dataForm.roomNameDict"
|
||||
filterable
|
||||
:disabled="isdetail || isedit"
|
||||
style="width: 100%"
|
||||
placeholder="请选择车间名称">
|
||||
<el-option
|
||||
v-for="(dict, index) in getDictDatas('workshop')"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='8'>
|
||||
<el-form-item label="关联产线" prop="productLineIds">
|
||||
<el-select v-model="dataForm.productLineIds" placeholder="请选择关联产线" multiple style="width: 100%;">
|
||||
@ -180,6 +196,7 @@ export default {
|
||||
productLineIds: [],
|
||||
type: '',
|
||||
workers: '',
|
||||
roomNameDict: '',
|
||||
status: 1
|
||||
},
|
||||
rules: {
|
||||
@ -187,6 +204,7 @@ export default {
|
||||
planProductId: [{ required: true, message: "产品名称不能为空", trigger: "change" }],
|
||||
planAssignQuantity: [{ required: true, message: "计划投入数量不能为空", trigger: "blur" }],
|
||||
planQuantity: [{ required: true, message: "计划生产数量不能为空", trigger: "blur" }],
|
||||
roomNameDict: [{ required: true, message: "车间名称不能为空", trigger: "blur" }],
|
||||
productLineIds: [{ required: true, message: "关联产线不能为空", trigger: "change" }]
|
||||
},
|
||||
productList: [],
|
||||
@ -264,19 +282,19 @@ export default {
|
||||
this.urlOptions.createURL(this.dataForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.visible = false;
|
||||
this.$confirm('是否添加预使用主原料信息?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
console.log('121', this.dataForm.name)
|
||||
this.$emit("refreshDataList", {
|
||||
id: response.data,
|
||||
name: this.dataForm.name
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$emit("refreshDataList");
|
||||
});
|
||||
// this.$confirm('是否添加预使用主原料信息?', '提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
// console.log('121', this.dataForm.name)
|
||||
// this.$emit("refreshDataList", {
|
||||
// id: response.data,
|
||||
// name: this.dataForm.name
|
||||
// });
|
||||
// }).catch(() => {
|
||||
// this.$emit("refreshDataList");
|
||||
// });
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -60,6 +60,7 @@ import {
|
||||
getConOrderList,
|
||||
getCoreWOList
|
||||
} from '@/api/base/coreWorkOrder';
|
||||
import { publicFormatter } from '@/utils/dict';
|
||||
|
||||
|
||||
const tableProps = [
|
||||
@ -82,6 +83,13 @@ const tableProps = [
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'roomNameDict',
|
||||
label: '负责车间',
|
||||
minWidth: 120,
|
||||
filter: publicFormatter('workshop'),
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'workers',
|
||||
label: '负责人',
|
||||
@ -101,7 +109,7 @@ const tableProps = [
|
||||
{
|
||||
prop: 'status',
|
||||
label: '工单状态',
|
||||
filter: (val) => ['', '等待', '激活', '暂停', '完成', '', '', '', '', '作废'][val]
|
||||
filter: (val) => ['', '等待', '激活', '暂停', '完成', '作废', '终止'][val]
|
||||
},
|
||||
{
|
||||
prop: 'planFinishTime',
|
||||
@ -223,6 +231,20 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'stop',
|
||||
btnName: '终止',
|
||||
showParam: {
|
||||
type: '|',
|
||||
data: [
|
||||
{
|
||||
name: 'status',
|
||||
type: 'equal',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
this.$auth.hasPermi(`base:core-work-order:detail`)
|
||||
? {
|
||||
type: 'detail',
|
||||
@ -289,7 +311,8 @@ export default {
|
||||
{ id: 2, name: '激活' },
|
||||
{ id: 3, name: '暂停' },
|
||||
{ id: 4, name: '完成' },
|
||||
{ id: 9, name: '作废' }
|
||||
{ id: 5, name: '作废' },
|
||||
{ id: 6, name: '终止' }
|
||||
],
|
||||
param: 'status',
|
||||
clearable: true
|
||||
@ -401,13 +424,17 @@ export default {
|
||||
opration = '暂停'
|
||||
}
|
||||
if (val.type === 'nullify') {
|
||||
param.status = 9
|
||||
opration = '报废'
|
||||
param.status = 5
|
||||
opration = '作废'
|
||||
}
|
||||
if (val.type === 'finish') {
|
||||
param.status = 4
|
||||
opration = '完成'
|
||||
}
|
||||
if (val.type === 'stop') {
|
||||
param.status = 6
|
||||
opration = '终止'
|
||||
}
|
||||
console.log('22',val)
|
||||
this.$confirm(`确定${opration}${'"工单' + val.data.name + '"'}?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-12-04 15:10:11
|
||||
* @LastEditTime: 2024-02-21 09:41:39
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -59,7 +59,7 @@
|
||||
style="width: 100%"
|
||||
placeholder="请选择物料类型">
|
||||
<el-option
|
||||
v-for="dict in materialList"
|
||||
v-for="dict in getDictDatas('material_type')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value" />
|
||||
@ -238,7 +238,7 @@ export default {
|
||||
remark: undefined,
|
||||
unit: ''
|
||||
},
|
||||
materialList: [],
|
||||
// materialList: [],
|
||||
supplierList: [],
|
||||
materialAttrList: [],
|
||||
unitList: [],
|
||||
@ -258,17 +258,18 @@ export default {
|
||||
methods: {
|
||||
async getDict() {
|
||||
// 物料类型列表
|
||||
const res = await listData({
|
||||
pageNo: 1,
|
||||
pageSize: 99,
|
||||
dictType: 'material_type',
|
||||
});
|
||||
this.materialList = res.data.list.map(item => {
|
||||
return {
|
||||
label: item.label,
|
||||
value: Number(item.value)
|
||||
}
|
||||
});
|
||||
// const res = await listData({
|
||||
// pageNo: 1,
|
||||
// pageSize: 99,
|
||||
// dictType: 'material_type',
|
||||
// });
|
||||
// this.materialList = res.data.list
|
||||
// this.materialList = res.data.list.map(item => {
|
||||
// return {
|
||||
// label: item.label,
|
||||
// value: Number(item.value)
|
||||
// }
|
||||
// });
|
||||
// 供应商列表
|
||||
const supplierRes = await getSupplierList();
|
||||
this.supplierList = supplierRes.data;
|
||||
@ -348,6 +349,9 @@ export default {
|
||||
if (this.dataForm.unit) {
|
||||
this.dataForm.unit = String(this.dataForm.unit)
|
||||
}
|
||||
if (this.dataForm.type) {
|
||||
this.dataForm.type = String(this.dataForm.type)
|
||||
}
|
||||
});
|
||||
// 获取物料的属性列表
|
||||
this.getList();
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-10-17 16:50:19
|
||||
* @LastEditTime: 2023-12-04 13:43:19
|
||||
* @LastEditTime: 2024-01-22 09:55:32
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -282,7 +282,6 @@ export default {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields();
|
||||
|
||||
if (this.dataForm.id) {
|
||||
// 获取产品详情
|
||||
getPackingModel(id).then((response) => {
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
<el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules" label-width="110px">
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
|
||||
<el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
|
||||
<el-select v-model="form.roleIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
<el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
|
||||
@ -50,17 +50,17 @@
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 22" label="指定岗位" prop="postIds">
|
||||
<el-select v-model="form.postIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in postOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 30 || form.type === 31 || form.type === 32" label="指定用户" prop="userIds">
|
||||
<el-select v-model="form.userIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
|
||||
<el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 40" label="指定用户组" prop="userGroupIds">
|
||||
<el-select v-model="form.userGroupIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userGroupOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
|
||||
<el-option v-for="item in userGroupOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2022-08-24 11:19:43
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-09-21 16:02:07
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-01-10 10:29:29
|
||||
* @Description:
|
||||
*/
|
||||
export default {
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
this.$refs.addOrUpdate.init(val.data.id);
|
||||
});
|
||||
} else if (val.type === "delete") {
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex,val.data)
|
||||
} else if (val.type === "change") {
|
||||
this.changeStatus(val.data.id)
|
||||
} else {
|
||||
|
||||
@ -120,8 +120,12 @@ export default {
|
||||
lineData['proLineName'] = item[0].lineName
|
||||
let works = [], specs = []
|
||||
item.forEach(it => {
|
||||
works.push(it.workOrderName)
|
||||
specs.push(it.specifications)
|
||||
if (it.workOrderName) {
|
||||
works.push(it.workOrderName)
|
||||
}
|
||||
if (it.specifications) {
|
||||
specs.push(it.specifications)
|
||||
}
|
||||
lineData[it.recordTime + '_up'] = it.inputNum
|
||||
lineData[it.recordTime + '_down'] = it.outputNum
|
||||
lineData[it.recordTime + '_area'] = it.area
|
||||
@ -140,8 +144,8 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
lineData['workOrderName'] = works.join(',')
|
||||
lineData['spec'] = specs.join(',')
|
||||
lineData['workOrderName'] = Array.from(new Set(works)).join(',')
|
||||
lineData['spec'] = Array.from(new Set(specs)).join(',')
|
||||
this.tableData.push(lineData)
|
||||
})
|
||||
console.log('打印', this.tableData)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-01 13:52:10
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2023-12-05 15:41:39
|
||||
* @LastEditTime: 2024-02-19 09:36:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -44,7 +44,7 @@
|
||||
v-for="item in urlOptions.dictList.dict0"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="parseInt(item.value)"></el-option>
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 132 KiB |
@ -11,7 +11,7 @@
|
||||
<i
|
||||
class=""
|
||||
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
||||
<img :src="imgSrc" width="20" height="20" alt="" />
|
||||
<img :src="imgSrc" width="24" height="24" alt="" />
|
||||
</i>
|
||||
<span
|
||||
style="
|
||||
@ -107,6 +107,19 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background: inherit;
|
||||
/* 设置模糊，不用 filter */
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.container-body {
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
<template>
|
||||
<div class="defect-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="defectChart" style="width:580px;height:238px;" v-show="!notMsg"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'DefectChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartTime: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
tempData: []
|
||||
tempData: [],
|
||||
notMsg:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -39,6 +45,7 @@ export default {
|
||||
if (this.chartTime === '日') {
|
||||
this.tempData = this.israDayStatistic
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -47,6 +54,7 @@ export default {
|
||||
if (this.chartTime === '周') {
|
||||
this.tempData = this.israWeekStatistic
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -55,6 +63,7 @@ export default {
|
||||
if (this.chartTime === '月') {
|
||||
this.tempData = this.israMonthStatistic
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -63,8 +72,29 @@ export default {
|
||||
if (this.chartTime === '年') {
|
||||
this.tempData = this.israYearStatistic
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
chartTime: {// 监听类型变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
switch(this.chartTime){
|
||||
case '日':
|
||||
this.tempData = this.israDayStatistic
|
||||
break;
|
||||
case '周':
|
||||
this.tempData = this.israWeekStatistic
|
||||
break;
|
||||
case '月':
|
||||
this.tempData = this.israMonthStatistic
|
||||
break;
|
||||
case '年':
|
||||
this.tempData = this.israYearStatistic
|
||||
break;
|
||||
default:
|
||||
}
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -75,6 +105,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (!this.tempData || this.tempData.length == 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
@ -82,7 +118,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('defectChart'));
|
||||
let xData = []
|
||||
let seriesData = []
|
||||
for (let i = 0;i < this.israCheckType.length; i++) {
|
||||
@ -95,12 +131,25 @@ export default {
|
||||
obj.name = this.israCheckType[i]
|
||||
obj.barWidth = 12
|
||||
obj.data = []
|
||||
if (i === this.israCheckType.length-1) {
|
||||
obj.label = {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: "#fffc",
|
||||
formatter: (params)=>this.tempData[params.dataIndex].sum
|
||||
}
|
||||
}
|
||||
for (let j = 0;j < this.tempData.length; j++) {
|
||||
let num = 0
|
||||
for (let k = 0; k < this.tempData[j].data.length; k++) {
|
||||
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
|
||||
obj.data.push(this.tempData[j].data[k].checkNum)
|
||||
num++
|
||||
}
|
||||
}
|
||||
if (num === 0) {
|
||||
obj.data.push(0)
|
||||
}
|
||||
}
|
||||
seriesData.push(obj)
|
||||
}
|
||||
@ -110,10 +159,10 @@ export default {
|
||||
})
|
||||
var option = {
|
||||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
||||
grid: { top: 80, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 90, right: 12, bottom: 20, left: 70 },
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 80,
|
||||
top: 0,
|
||||
left: 8,
|
||||
padding: 5,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
@ -179,12 +228,6 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.defect-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.defect-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div class="defect-class-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'DefectClassChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -27,6 +33,7 @@ export default {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
},
|
||||
chartType: {// 监听类型变化，更新图
|
||||
@ -43,6 +50,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
@ -50,7 +63,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('defectClassChart'));
|
||||
let tempData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
@ -66,28 +79,14 @@ export default {
|
||||
})
|
||||
var option = {
|
||||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
||||
grid: { top: 40, right: 12, bottom: 80, left: 60 },
|
||||
// legend: {
|
||||
// top: 10,
|
||||
// left: 80,
|
||||
// padding: 5,
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 12,
|
||||
// itemGap: 12,
|
||||
// height: 12,
|
||||
// textStyle: {
|
||||
// color: "#DFF1FE",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// data:['a','b','c','d','e'],
|
||||
// },
|
||||
grid: { top: 40, right: 12, bottom: 65, left: 70 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fffc",
|
||||
fontSize: 12,
|
||||
rotate: 45
|
||||
rotate: 25
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
@ -98,7 +97,7 @@ export default {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/次",
|
||||
name: "单位/个",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
@ -136,7 +135,9 @@ export default {
|
||||
barWidth: 12,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
position: 'top',
|
||||
distance: 10,
|
||||
color: "#fffc"
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
||||
86
src/views/databoard/components/DropDownBtn.vue
Normal file
86
src/views/databoard/components/DropDownBtn.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="drop-down-btn">
|
||||
<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button>
|
||||
<div v-show="isExpand" class="btn-box">
|
||||
<button
|
||||
class="btn"
|
||||
v-for="opt in options"
|
||||
:key="opt"
|
||||
@click="clickBtn(opt)"
|
||||
v-show="active !== opt">
|
||||
<span class="btn-text">
|
||||
{{ opt }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DropDownBtn',
|
||||
components: {},
|
||||
props: ['options', 'active'],
|
||||
data() {
|
||||
return {
|
||||
isExpand: false
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickBtn(opt) {
|
||||
this.$emit('emitFun', opt)
|
||||
this.isExpand = !this.isExpand
|
||||
},
|
||||
toggleExpand() {
|
||||
this.isExpand = !this.isExpand
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drop-down-btn {
|
||||
z-index: 1000;
|
||||
button {
|
||||
border: none;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 5px 8px 8px;
|
||||
height: 32px;
|
||||
}
|
||||
.top-btn {
|
||||
background: #02457E;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
.arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #03233C;
|
||||
&:hover {
|
||||
background: #02457E;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.btn-text{
|
||||
padding: 0px 5px 6px;
|
||||
border-bottom: 1px solid #010D18;
|
||||
}
|
||||
}
|
||||
.btn:last-child{
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
.btn-text{
|
||||
height: 16px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="energe-monitoring-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:420px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'EnergeMonitoringChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -24,6 +30,7 @@ export default {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -42,16 +49,22 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
|
||||
let xData = []
|
||||
let yData = []
|
||||
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
|
||||
xData.push(item.lineName)
|
||||
yData.push(item.useQuantity)
|
||||
})
|
||||
var option = option = {
|
||||
if (yData.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
var option = {
|
||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
grid: { top: 82, right: 12, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@ -63,7 +76,11 @@ export default {
|
||||
className: "energe-monitoring-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['电耗能'],
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
top: '2.5%',
|
||||
right: '0',
|
||||
data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
@ -91,11 +108,13 @@ export default {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位kwh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
name: '单位',
|
||||
// min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
@ -121,7 +140,7 @@ export default {
|
||||
barWidth: 20,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
return value;
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
@ -143,6 +162,7 @@ export default {
|
||||
.energe-monitoring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div class="gas-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id='flueGasChart' class="flue-gas-chart" style="width:575px;height:250px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
name: 'FlueGasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: '',
|
||||
chartTime: ''
|
||||
@ -26,7 +30,8 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -48,6 +53,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '日') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -55,6 +61,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -62,6 +69,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -69,6 +77,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -126,7 +135,7 @@ export default {
|
||||
temp2 = temp1?.SO2_float || []
|
||||
break;
|
||||
}
|
||||
case '一氧化氮':{
|
||||
case '氮氧化物':{
|
||||
temp2 = temp1?.NOX_float || []
|
||||
break;
|
||||
}
|
||||
@ -136,9 +145,15 @@ export default {
|
||||
}
|
||||
default:
|
||||
}
|
||||
temp2.length > 0 && temp2.map(i => {
|
||||
if (temp2.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
temp2.map(i => {
|
||||
xData.push(i.time)
|
||||
yData.push(i.value)
|
||||
yData.push((i.value)?(Number(i.value)).toFixed(2):null)
|
||||
})
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
@ -157,7 +172,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
@ -172,10 +188,10 @@ export default {
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('flueGasChart'));
|
||||
var option = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
@ -192,7 +208,7 @@ export default {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -218,6 +234,7 @@ export default {
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
className: "gas-chart-tooltip"
|
||||
},
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
@ -227,8 +244,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gas-chart {
|
||||
.flue-gas-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.gas-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.gas-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,19 @@
|
||||
<!--
|
||||
filename: GasChart.vue
|
||||
author: liubin
|
||||
date: 2023-12-12 10:53:49
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="gas-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: '', // 能源类型
|
||||
chartTime: ''
|
||||
@ -33,7 +30,8 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -55,6 +53,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -62,6 +61,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -69,6 +69,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -76,6 +77,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -143,6 +145,12 @@ export default {
|
||||
}
|
||||
xData = this.getXdata()
|
||||
}
|
||||
if (yData.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
}else {
|
||||
@ -160,7 +168,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbolSize: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
@ -175,7 +184,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('gasChart'));
|
||||
var option = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
@ -195,7 +204,7 @@ export default {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -237,9 +246,7 @@ export default {
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp
|
||||
).getDate()}`;}).reverse()
|
||||
return `${new Date(dtimestamp).getMonth()+1}.${new Date(dtimestamp).getDate()}`;}).reverse()
|
||||
}else if (this.chartTime == "月") {
|
||||
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
|
||||
days = 31;
|
||||
@ -254,7 +261,7 @@ export default {
|
||||
return Array(12)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
return `${currentYear}.${12 - index}`;}).reverse()
|
||||
return `${12 - index}`;}).reverse()
|
||||
}
|
||||
},
|
||||
isLeapYear(year) {
|
||||
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
.datetime {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 240px;
|
||||
right: 425px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@ -1,56 +1,28 @@
|
||||
<template>
|
||||
<div class="isra-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'ISRAChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
notMsg:true,
|
||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
chartData: [],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 0,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series: []
|
||||
},
|
||||
chartData: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
@ -61,32 +33,43 @@ export default {
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
this.chartData = newVal
|
||||
this.chartData = newVal || []
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
updateChart() {
|
||||
console.log('update')
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num+=i.num
|
||||
})
|
||||
this.chart.setOption({
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
if (this.chartData && this.chartData.length > 0) {
|
||||
this.notMsg = false
|
||||
} else {
|
||||
this.notMsg = true
|
||||
return
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('israChart'));
|
||||
var option = {
|
||||
color:this.colors,
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
top: '32%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
@ -94,6 +77,22 @@ export default {
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '2%',
|
||||
left: 'center',
|
||||
itemWidth: 18,
|
||||
itemHeight:18,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
|
||||
name:item.name,
|
||||
itemStyle:{
|
||||
color: this.colors[index%4]
|
||||
}
|
||||
}))
|
||||
},
|
||||
series:[{
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
@ -106,9 +105,6 @@ export default {
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 12
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.num,
|
||||
@ -126,8 +122,13 @@ export default {
|
||||
]
|
||||
}
|
||||
}
|
||||
}))}]
|
||||
})
|
||||
}))}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip"
|
||||
},
|
||||
}
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -139,3 +140,13 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
27
src/views/databoard/components/NotMsg.vue
Normal file
27
src/views/databoard/components/NotMsg.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="notmsg">暂无数据</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotMsg',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notmsg {
|
||||
padding-top: 72px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="num-rate-chart"></div>
|
||||
<div style="height: 370px;">
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'NumRateChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -24,6 +30,7 @@ export default {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -31,10 +38,26 @@ export default {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (this.productline && this.productline.length > 0) {
|
||||
this.notMsg = false
|
||||
} else {
|
||||
this.notMsg = true
|
||||
return
|
||||
}
|
||||
let xData = []
|
||||
let outputNum = []
|
||||
let passRate = []
|
||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
||||
if ((item.lineName).includes('D')) {
|
||||
xData.push(item.lineName)
|
||||
outputNum.push(item.outputNum)
|
||||
passRate.push(item.passRate?item.passRate*100:null)
|
||||
}
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
@ -42,17 +65,9 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
let xData = []
|
||||
let outputNum = []
|
||||
let passRate = []
|
||||
this.productline && this.productline.length > 0 && this.productline.map(item => {
|
||||
xData.push(item.lineName)
|
||||
outputNum.push(item.outputNum)
|
||||
passRate.push(item.passRate*100)
|
||||
})
|
||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||
var option = {
|
||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
||||
grid: { top: 82, right: 60, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
@ -61,7 +76,15 @@ export default {
|
||||
className: "num-rate-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['产线产量', '合格率'],
|
||||
itemWidth:10,
|
||||
itemHeight:10,
|
||||
top: '2.5%',
|
||||
right: '20px',
|
||||
icon: 'rect',
|
||||
data: [
|
||||
{name:'产线产量',itemStyle:{color:'#364BFE'}},
|
||||
{name:'良品率',itemStyle:{color:'#FFCB59'}}
|
||||
],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
@ -91,6 +114,11 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量/片',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
@ -111,10 +139,17 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
name: '良品率',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'LEFT',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value} %'
|
||||
formatter: () =>{
|
||||
return value ? '{value} %': '-'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -138,7 +173,7 @@ export default {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 12,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
@ -148,12 +183,12 @@ export default {
|
||||
data: outputNum
|
||||
},
|
||||
{
|
||||
name: '合格率',
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + '%';
|
||||
return value?value + '%':'-';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
@ -169,6 +204,8 @@ export default {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
data: passRate
|
||||
}
|
||||
]
|
||||
@ -182,6 +219,7 @@ export default {
|
||||
.num-rate-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
@ -49,16 +49,18 @@ export default {
|
||||
.switcher {
|
||||
:deep(.el-switch__core) {
|
||||
border: none;
|
||||
background-color:rgba(3, 35, 60, 1);
|
||||
background-color:#02457e;
|
||||
height: 18px;
|
||||
|
||||
&::after {
|
||||
background-color: #02457e;
|
||||
background-color: #03233c;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.is-checked) {
|
||||
.el-switch__core {
|
||||
border: none;
|
||||
height: 18px;
|
||||
background-color: rgba(180, 255, 252, 0.71);
|
||||
|
||||
&::after {
|
||||
|
||||
75
src/views/databoard/components/TimePrompt.vue
Normal file
75
src/views/databoard/components/TimePrompt.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<span
|
||||
style="
|
||||
font-size: 20px;
|
||||
color:#52FFF8;
|
||||
">
|
||||
{{timestr}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimePrompt',
|
||||
components: {},
|
||||
props: ['timestr'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
// watch: {
|
||||
// timestr:{
|
||||
// handler(){
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drop-down-btn {
|
||||
z-index: 1000;
|
||||
button {
|
||||
border: none;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 5px 7px 8px;
|
||||
height: 32px;
|
||||
}
|
||||
.top-btn {
|
||||
background: #02457E;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
.arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #03233C;
|
||||
&:hover {
|
||||
background: #02457E;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.btn-text{
|
||||
padding: 0px 5px 6px;
|
||||
border-bottom: 1px solid #010D18;
|
||||
}
|
||||
}
|
||||
.btn:last-child{
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
.btn-text{
|
||||
height: 16px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,6 @@
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import { formatDate } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
@ -39,6 +38,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '日') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -46,6 +46,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -53,6 +54,7 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -60,13 +62,12 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年') {
|
||||
this.updateChart()
|
||||
this.$emit('emitFun')
|
||||
}
|
||||
}
|
||||
},
|
||||
chartTime: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log("===================")
|
||||
console.log(newVal)
|
||||
this.updateChart()
|
||||
}
|
||||
},
|
||||
@ -111,14 +112,14 @@ export default {
|
||||
}else{
|
||||
xData.push((item.dataTime).slice(0,10))
|
||||
}
|
||||
dayArr.push((item.day * 100).toFixed(2))
|
||||
nightArr.push((item.night * 100).toFixed(2))
|
||||
sumArr.push((item.sum * 100).toFixed(2))
|
||||
dayArr.push(item.day?(item.day * 100).toFixed(2):null)
|
||||
nightArr.push(item.night?(item.night * 100).toFixed(2):null)
|
||||
sumArr.push(item.sum?(item.sum * 100).toFixed(2):null)
|
||||
})
|
||||
if (this.chartType) {
|
||||
seriesData = [{
|
||||
color: '#ff9e00',
|
||||
name: 'sum',
|
||||
name: '总量',
|
||||
data: sumArr,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
@ -138,7 +139,7 @@ export default {
|
||||
},
|
||||
{
|
||||
color: '#08d8cd',
|
||||
name: 'day',
|
||||
name: '白班',
|
||||
data: dayArr,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
@ -158,7 +159,7 @@ export default {
|
||||
},
|
||||
{
|
||||
color: '#0b58ff',
|
||||
name: 'night',
|
||||
name: '夜班',
|
||||
data: nightArr,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
@ -179,7 +180,7 @@ export default {
|
||||
}else{
|
||||
seriesData = [{
|
||||
color: '#ff9e00',
|
||||
name: 'sum',
|
||||
name: '总量',
|
||||
data: sumArr,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<EnergyMonitoring />
|
||||
<WorkOrderMonitoring />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
@ -25,10 +25,10 @@
|
||||
|
||||
<script>
|
||||
import NumRate from './NumRate';
|
||||
import EnergyMonitoring from './EnergyMonitoring';
|
||||
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
||||
export default {
|
||||
name: 'BottomTwo',
|
||||
components: { NumRate, EnergyMonitoring },
|
||||
components: { NumRate, WorkOrderMonitoring },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="各工序缺陷汇总" size="small" style="">
|
||||
<Container name="各工序缺陷汇总" size="middle" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
||||
</div>
|
||||
@ -9,9 +10,11 @@
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'DefectSum',
|
||||
components: { Container },
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
defectSum() {
|
||||
return this.$store.state.websocket.defectSum
|
||||
@ -19,19 +22,23 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
// data: [[1, 'Y61', '破损','10','气泡']],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
watch:{
|
||||
defectSum: {
|
||||
handler(newVal, oldVal) {
|
||||
@ -44,8 +51,16 @@ export default {
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['defectScrollBoard'].updateRows(outArr)
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 240px;
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +1,41 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="能源监控" size="small" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<EnergeMonitoringChart/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<Container name="能源监控" size="large" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<EnergeMonitoringChart @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'EnergyMonitoring',
|
||||
components: { Container, EnergeMonitoringChart },
|
||||
components: { Container, EnergeMonitoringChart, TimePrompt },
|
||||
data() {
|
||||
return {
|
||||
timestr: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
methods: {
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 170px;
|
||||
}
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="设备报警" size="small" style="">
|
||||
<Container name="设备报警" size="middle" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
||||
</div>
|
||||
@ -9,9 +10,11 @@
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'EqAlarm',
|
||||
components: { Container },
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
sjgEquipment() {
|
||||
return this.$store.state.websocket.sjgEquipment
|
||||
@ -19,47 +22,56 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// config:{}
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
columnWidth: [60, 150, 190],
|
||||
align: ['center'],
|
||||
data: [
|
||||
[1, '设备1', '行1列3', '', ''],
|
||||
[2, '设备2', '行2列3', '', ''],
|
||||
[3, '设备3', '行3列3', '', ''],
|
||||
[4, '设备4', '行4列3', '', ''],
|
||||
[5, '设备5', '行5列3', '', ''],
|
||||
[6, '设备6', '行6列3', '', ''],
|
||||
[7, '设备7', '行7列3', '', ''],
|
||||
[8, '设备8', '行8列3', '', ''],
|
||||
[9, '设备9', '行9列3', '', ''],
|
||||
[10, '设备10', '行10列3', '', '']
|
||||
],
|
||||
data: [],
|
||||
// data: [
|
||||
// [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
|
||||
// [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
|
||||
// [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
|
||||
// [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
|
||||
// [5, '11线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||
// [6, '10线下片台', ' EQ20240110130743000250', '正常', '否'],
|
||||
// [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
|
||||
// [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
|
||||
// [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
|
||||
// [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
|
||||
// ],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
watch:{
|
||||
sjgEquipment: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.sjgEquipment.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
item.code,
|
||||
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
||||
`<span title=${item.code || ''}>${item.code || ''}</span>`,
|
||||
item.status,
|
||||
item.error? '是': '否'
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['eqScrollBoard'].updateRows(outArr)
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 170px;
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +1,41 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线产量及良品率" size="small" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<NumRateChart />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<Container name="产线产量及良品率" size="large" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<NumRateChart @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import NumRateChart from '../components/NumRateChart';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'NumRate',
|
||||
components: { Container, NumRateChart },
|
||||
components: { Container, NumRateChart, TimePrompt },
|
||||
data() {
|
||||
return {
|
||||
timestr: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
methods: {
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 265px;
|
||||
}
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
@ -26,19 +26,19 @@
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<WorkOrderMonitoring />
|
||||
<EnergyMonitoring />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
||||
import EqAlarm from './EqAlarm'
|
||||
import DefectSum from './DefectSum'
|
||||
import EnergyMonitoring from './EnergyMonitoring';
|
||||
export default {
|
||||
name: 'TopThree',
|
||||
components: { EqAlarm, DefectSum, WorkOrderMonitoring },
|
||||
components: { EqAlarm, DefectSum, EnergyMonitoring },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="工单监控" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<Container name="工单监控" size="middle" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;" class="WOMonitoring">
|
||||
<dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
import { formatDate } from '@/utils'
|
||||
export default {
|
||||
name: 'WorkOrderMonitoring',
|
||||
components: { Container },
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
order() {
|
||||
return this.$store.state.websocket.workOrder
|
||||
@ -19,47 +21,47 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
|
||||
// headerHeight: '17',
|
||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60, 120, 80, 60, 80, 120, 120, 120],
|
||||
columnWidth: [60, 120, 120, 60, 100, 150],
|
||||
align: ['center'],
|
||||
data: [
|
||||
[1, '工单1', '行1列3', '', '','','',''],
|
||||
[2, '工单2', '行2列3', '', '','','',''],
|
||||
[3, '工单3', '行3列3', '', '','','',''],
|
||||
[4, '工单4', '行4列3', '', '','','',''],
|
||||
[5, '工单5', '行5列3', '', '','','',''],
|
||||
[6, '工单6', '行6列3', '', '','','',''],
|
||||
[7, '工单7', '行7列3', '', '','','',''],
|
||||
[8, '工单8', '行8列3', '', '','','',''],
|
||||
[9, '工单9', '行9列3', '', '','','',''],
|
||||
[10, '工单10', '行10列3', '', '','','','']
|
||||
],
|
||||
rowNum: 10
|
||||
data: [],
|
||||
rowNum:10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.order.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
`<span title=${item.name || ''}>${item.name || ''}</span>`,
|
||||
item.specifications,
|
||||
item.lines,
|
||||
item.status,
|
||||
item.planFinishTime,
|
||||
this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
|
||||
formatDate(item.planFinishTime),
|
||||
item.planQuantity,
|
||||
item.planAssignQuantity
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['worderScrollBoard'].updateRows(outArr)
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 170px;
|
||||
}
|
||||
</style>
|
||||
@ -117,7 +117,7 @@ export default {
|
||||
screenfull.toggle(this.$refs.deepProcessingContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
|
||||
let deepProcessingContainer = document.getElementById('deepProcessingContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(deepProcessingContainer.style.width)
|
||||
@ -133,10 +133,10 @@ export default {
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
wx = (rw-280) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
wx = (rw-85) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
<template>
|
||||
<Container name="能耗" size="middle" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<EnergeTop />
|
||||
<SplitLine :horizontal="true" />
|
||||
<div class="" style="flex: 2; padding: 8px">
|
||||
@ -35,7 +36,7 @@
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
|
||||
</div>
|
||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||
<GasChart :chartType='chartType' :chartTime='chartTime'/>
|
||||
<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -49,6 +50,8 @@ import SplitLine from '../components/line';
|
||||
import EnergeTop from './EnergeTop';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'EnergeCost',
|
||||
components: {
|
||||
@ -58,14 +61,19 @@ export default {
|
||||
EnergeTop,
|
||||
GasChart,
|
||||
SelectorBtnGroup,
|
||||
TimePrompt
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chartType:'电耗能',
|
||||
chartTime:'周'
|
||||
chartTime:'周',
|
||||
timestr: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
},
|
||||
computed: {
|
||||
gasInfoMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
@ -74,37 +82,27 @@ export default {
|
||||
methods: {
|
||||
// 切换能源
|
||||
toggleType(val) {
|
||||
console.log('能源' + val)
|
||||
this.chartType = val
|
||||
// if (val === '天然气I' || val === '天然气II') {
|
||||
// if (this.chartTime === '周') {
|
||||
// this.chartType = val
|
||||
// } else {
|
||||
// this.$message.warning('暂无数据')
|
||||
// }
|
||||
// }else {
|
||||
// this.chartType = val
|
||||
// }
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
console.log('时间' + val)
|
||||
this.chartTime = val
|
||||
// if (val === '月' || val === '年') {
|
||||
// if (this.chartType === '电耗能') {
|
||||
// this.chartTime = val
|
||||
// } else {
|
||||
// this.$message.warning('暂无数据')
|
||||
// }
|
||||
// }else{
|
||||
// this.chartTime = val
|
||||
// }
|
||||
}
|
||||
this.timestr = switchShowTime(val)
|
||||
},
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 120px;
|
||||
}
|
||||
.lgd {
|
||||
color: #fff;
|
||||
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
style="
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 2fr 3fr 3fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
">
|
||||
<ShadowRect
|
||||
style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
|
||||
style="grid-row: 1/3 ; flex-direction: column; justify-content: center">
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
@ -34,6 +34,7 @@
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
color: #3ce8ff
|
||||
">
|
||||
{{energyInfo.elecQty1}}kwh
|
||||
</span>
|
||||
@ -51,7 +52,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">水耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.waterQty}}m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -66,7 +67,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气I</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas1Now}}</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -81,7 +82,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">电耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.elecQty2}}kwh</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -96,7 +97,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气II</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas2Now}}</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="gas-handle" style="flex: 2">
|
||||
<Container name="烟气处理" size="large" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div
|
||||
class=""
|
||||
style="
|
||||
@ -16,7 +17,7 @@
|
||||
style="
|
||||
font-size: 20px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
@ -29,26 +30,26 @@
|
||||
<div
|
||||
style="
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
line-height: 1.24;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
padding:5px 8px 5px 0;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
||||
<p style="margin: 0; line-height: inherit">氮氧化物</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
line-height: 1.24;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
padding:5px 8px 5px 0;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
||||
@ -62,14 +63,14 @@
|
||||
style="
|
||||
font-size: 20px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
颗粒物浓度
|
||||
</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<KilnLine :horizontal="true" />
|
||||
@ -95,11 +96,11 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
||||
:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
</div>
|
||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
|
||||
<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -112,7 +113,9 @@ import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
// import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import FlueGas from '../components/FlueGas';
|
||||
import FlueGasChart from '../components/FlueGasChart';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
|
||||
export default {
|
||||
name: 'GasHandle',
|
||||
@ -121,13 +124,15 @@ export default {
|
||||
ShadowRect,
|
||||
KilnLine,
|
||||
SelectorBtnGroup,
|
||||
FlueGas,
|
||||
FlueGasChart,
|
||||
TimePrompt
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chartType:'氧气含量',
|
||||
chartTime:'日'
|
||||
chartTime:'日',
|
||||
timestr: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -135,6 +140,9 @@ export default {
|
||||
return this.$store.state.websocket.exhaustGasInfo
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
},
|
||||
methods: {
|
||||
// 烟气
|
||||
toggleType(val) {
|
||||
@ -143,14 +151,23 @@ export default {
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
console.log('时间' + val)
|
||||
this.chartTime = val
|
||||
}
|
||||
this.timestr = switchShowTime(val)
|
||||
},
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 170px;
|
||||
}
|
||||
.gas-handle {
|
||||
}
|
||||
|
||||
|
||||
@ -1,34 +1,8 @@
|
||||
<!--
|
||||
filename: IsraCheck.vue
|
||||
author: liubin
|
||||
date: 2023-12-06 09:50:13
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<Container name="ISRA缺陷检测" size="middle" style="">
|
||||
<ISRAChart />
|
||||
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||
<div class="f" style="flex: 9;">
|
||||
|
||||
</div>
|
||||
<ul
|
||||
class="legend"
|
||||
style="
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
">
|
||||
<li class="fault-1">缺陷1</li>
|
||||
<li class="fault-2">缺陷2</li>
|
||||
<li class="fault-3">缺陷3</li>
|
||||
<li class="fault-4">缺陷4</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<ISRAChart @emitFun='dateUpdate'/>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@ -36,20 +10,36 @@
|
||||
import Container from '../components/Container';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import ISRAChart from '../components/ISRAChart.vue';
|
||||
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'IsraCheck',
|
||||
components: { Container, ShadowRect, ISRAChart },
|
||||
components: { Container, ShadowRect, ISRAChart, TimePrompt },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
timestr: ''
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
methods: {
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 210px;
|
||||
}
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
class="KilnDataBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: left top;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@ -110,7 +110,8 @@ export default {
|
||||
screenfull.toggle(this.$refs.kilnContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let kilnContainerBox = document.querySelector('#kilnContainer')
|
||||
let kilnContainerBox = document.getElementById('kilnContainer')
|
||||
console.log(kilnContainerBox)
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(kilnContainerBox.style.width)
|
||||
@ -126,10 +127,10 @@ export default {
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
wx = (rw-280) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
wx = (rw-85) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
|
||||
44
src/views/databoard/utils/index.js
Normal file
44
src/views/databoard/utils/index.js
Normal file
@ -0,0 +1,44 @@
|
||||
import moment from "moment";
|
||||
export const switchShowTime = (type) => {
|
||||
let nowTime = new Date
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
let currentYear = nowTime.getFullYear();
|
||||
let startYear = null
|
||||
switch(type) {
|
||||
case '日':
|
||||
let hour = nowTime.getHours()
|
||||
if (hour > 6) {
|
||||
startTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
|
||||
endTime = moment(moment(nowTime)+86400000).format('yyyy.MM.DD')+' 7点'
|
||||
}else{
|
||||
endTime = moment(nowTime).format('yyyy.MM.DD')+' 7点'
|
||||
startTime = moment(moment(nowTime)-86400000).format('yyyy.MM.DD')+' 7点'
|
||||
}
|
||||
return startTime+'-'+endTime
|
||||
case '周':
|
||||
let timestamp = nowTime- 24 * 60 * 60 * 1000
|
||||
endTime = moment(timestamp).format('yyyy.MM.DD')
|
||||
startTime = moment(timestamp-24 * 60 * 60 * 1000 * 6).format('yyyy.MM.DD')
|
||||
return startTime+'-'+endTime
|
||||
case '月':
|
||||
let day = 29;
|
||||
let lastMonth = nowTime.getMonth() === 0 ? 12 : nowTime.getMonth();
|
||||
if (lastMonth === 2) {
|
||||
day = isLeapYear(currentYear) ? 29 : 28;
|
||||
}
|
||||
if (lastMonth === 12) {
|
||||
startYear = currentYear - 1
|
||||
}
|
||||
startTime = startYear+'.'+lastMonth+'.'+day
|
||||
endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
|
||||
return startTime+'-'+endTime
|
||||
default:// 年
|
||||
startTime = (currentYear - 1)+'.12.29'
|
||||
endTime = currentYear+'.12.28'
|
||||
return startTime+'-'+endTime
|
||||
}
|
||||
}
|
||||
const isLeapYear = (year) => {
|
||||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
||||
}
|
||||
@ -1,38 +1,51 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线当日缺陷分类" size="small">
|
||||
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<DefectClassChart :chartType='chartType'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<Container name="产线当日缺陷分类" size="middle">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<DropDownBtn class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
||||
<div class="chart" style="height: 375px; margin-top: 8px;">
|
||||
<DefectClassChart :chartType='chartType' @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import DropDownBtn from '../components/DropDownBtn';
|
||||
import DefectClassChart from '../components/DefectClassChart';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'DefectClass',
|
||||
components: { Container, SelectorBtnGroup, DefectClassChart },
|
||||
components: { Container, DropDownBtn, DefectClassChart, TimePrompt },
|
||||
data() {
|
||||
return {
|
||||
chartType:'Y61'
|
||||
chartType:'Y61',
|
||||
timestr: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
methods: {
|
||||
// 切换产线
|
||||
toggleType(val) {
|
||||
console.log('产线' + val)
|
||||
this.chartType = val
|
||||
}
|
||||
},
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 260px;
|
||||
}
|
||||
.typeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,38 +1,54 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线缺陷统计" size="small">
|
||||
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<DropDownBtn class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
<div class="chart" style="height: 238px; margin-top: 8px;">
|
||||
<DefectChart :chartTime='chartTime'/>
|
||||
<DefectChart :chartTime='chartTime' @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import DropDownBtn from '../components/DropDownBtn';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import DefectChart from '../components/DefectChart';
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'DefectStatistics',
|
||||
components: { Container, SelectorBtnGroup, DefectChart },
|
||||
components: { Container, DropDownBtn, DefectChart, TimePrompt },
|
||||
data() {
|
||||
return {
|
||||
chartTime:'日'
|
||||
chartTime:'日',
|
||||
timestr: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
},
|
||||
methods: {
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
console.log('时间' + val)
|
||||
this.chartTime = val
|
||||
}
|
||||
this.timestr = switchShowTime(val)
|
||||
},
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 210px;
|
||||
}
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<div style="flex: 1;" class="orderContainer">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
||||
</div>
|
||||
@ -9,9 +10,12 @@
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container'
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { formatDate } from '@/utils'
|
||||
import { switchShowTime } from '../utils'
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
components: { Container, TimePrompt },
|
||||
computed: {
|
||||
order() {
|
||||
return this.$store.state.websocket.order
|
||||
@ -19,43 +23,48 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestr: '',
|
||||
config: {
|
||||
header: ['上线时间', '客户名称', '规格','完成度'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
// columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [
|
||||
['2023-12-01', '客户1', '行1列3', ''],
|
||||
['2023-12-01', '客户2', '行2列3', ''],
|
||||
['2023-12-01', '客户3', '行3列3', ''],
|
||||
['2023-12-01', '客户4', '行4列3', ''],
|
||||
['2023-12-01', '客户5', '行5列3', ''],
|
||||
['2023-12-01', '客户6', '行6列3', ''],
|
||||
['2023-12-01', '客户7', '行7列3', ''],
|
||||
['2023-12-01', '客户8', '行8列3', ''],
|
||||
['2023-12-01', '客户9', '行9列3', ''],
|
||||
['2023-12-01', '客户10', '行10列3', '']
|
||||
],
|
||||
columnWidth: [155, 160, 150],
|
||||
data: [],
|
||||
rowNum: 6
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime('日')
|
||||
},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
order:{
|
||||
handler() {
|
||||
let outArr = this.order.map((item) => [
|
||||
item.startProduceTime,
|
||||
item.name,
|
||||
item.specifications,
|
||||
item.completeRate
|
||||
formatDate(item.planStartTime) || '',
|
||||
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
|
||||
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
|
||||
`<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
||||
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
||||
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
||||
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
|
||||
</svg>
|
||||
</div>`
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
this.config.data = outArr
|
||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||
this.timestr = switchShowTime('日')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 210px;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 2;">
|
||||
<Container name="本日生产良品率" size="small">
|
||||
<Container name="本日生产良品率" size="large">
|
||||
<TimePrompt class="timeShow" :timestr="timestr" />
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
|
||||
</div>
|
||||
@ -23,11 +23,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart" style="height: 230px;">
|
||||
<YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
|
||||
<YieldRateChart :chartTime='chartTime' :chartType='chartType' @emitFun='dateUpdate'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container'
|
||||
@ -35,10 +34,12 @@ import ScrollBoard from '../components/ScrollBoard'
|
||||
import KilnLine from '../components/line'
|
||||
import Switcher from '../components/Switcher'
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import YieldRateChart from '../components/YieldRateChart'
|
||||
import YieldRateChart from '../components/YieldRateChart';
|
||||
import TimePrompt from '../components/TimePrompt';
|
||||
import { switchShowTime } from '../utils';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
|
||||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt },
|
||||
computed: {
|
||||
yieldRateTable() {
|
||||
return this.$store.state.websocket.yieldRateTable
|
||||
@ -53,18 +54,12 @@ export default {
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [
|
||||
[1, '产线1', '49%', '', ''],
|
||||
[2, '产线2', '49%', '', ''],
|
||||
[3, '产线3', '49%', '', ''],
|
||||
[4, '产线4', '49%', '', ''],
|
||||
[5, '产线5', '49%', '', '']
|
||||
],
|
||||
data: [],
|
||||
rowNum: 5
|
||||
},
|
||||
chartType:false,
|
||||
chartTime: "日"
|
||||
chartTime: "日",
|
||||
timestr: ""
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
@ -72,16 +67,19 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.yieldRateTable.map((item) => [
|
||||
item.lineName,
|
||||
item.first,
|
||||
item.second,
|
||||
item.product,
|
||||
item.waste
|
||||
item.first?(item.first*100).toFixed(2)+'%':'0.00%',
|
||||
item.second?(item.second*100).toFixed(2)+'%':'0.00%',
|
||||
item.product?(item.product*100).toFixed(2)+'%':'0.00%',
|
||||
item.waste?(item.waste*100).toFixed(2)+'%':'0.00%'
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
},
|
||||
methods: {
|
||||
changeType(val) {
|
||||
this.chartType = val
|
||||
@ -89,11 +87,21 @@ export default {
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
this.chartTime = val
|
||||
}
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
},
|
||||
// 数据更新
|
||||
dateUpdate() {
|
||||
this.timestr = switchShowTime(this.chartTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 235px;
|
||||
}
|
||||
.lgd {
|
||||
color: #fff;
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let wholePlantContainerBox = document.getElementById('wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
@ -123,10 +123,10 @@ export default {
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
wx = (rw-280) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
wx = (rw-85) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="tableInner">
|
||||
<!-- <el-input v-model="list[itemProp]" @blur="changeInput" /> -->
|
||||
<el-input-number v-model="list[itemProp]" @change="changeInput" :min="0" :max="999999999" style='width: 100%;' :controls='false' :precision='2'></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'InputArea',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
itemProp: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: this.injectData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeInput() {
|
||||
console.log(this.list)
|
||||
this.$emit('emitData', this.list)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tableInner .el-input__inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 33px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="tableInner">
|
||||
<el-select v-model="list[itemProp]" placeholder="请选择" style="width: 100%;" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectArea',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
itemProp: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: this.injectData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect() {
|
||||
console.log(this.list)
|
||||
this.$emit('emitData', this.list)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tableInner .el-input__inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 33px;
|
||||
}
|
||||
</style>
|
||||
@ -13,33 +13,6 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="水/气表名" prop="tableName">
|
||||
<el-select v-model="form.tableName" placeholder="请选择" style="width: 100%;" filterable>
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="抄表数" prop="readingQuantity">
|
||||
<el-input-number v-model="form.readingQuantity" :min="0" :max="999999999999" :controls='false' style="width: 50%;"></el-input-number>
|
||||
<el-select v-model="form.unit" placeholder="单位" style="width: 50%;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span='12'>
|
||||
<el-form-item label="抄表日期" prop="recordTime">
|
||||
<el-date-picker
|
||||
@ -53,11 +26,37 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span='24'>
|
||||
<base-table
|
||||
border
|
||||
:table-props="tableProps"
|
||||
:table-data="tableData"
|
||||
:add-button-show="addButtonShow"
|
||||
@emitFun="inputChange"
|
||||
@emitButtonClick="emitButtonClick"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { energyQuantityManualCreate, energyQuantityManualUpdate, energyQuantityManualGet } from '@/api/base/energyQuantityManual'
|
||||
import moment from 'moment'
|
||||
import InputArea from './InputArea'
|
||||
import SelectArea from './SelectArea'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'tableName',
|
||||
label: '表名',
|
||||
subcomponent: SelectArea
|
||||
},
|
||||
{
|
||||
prop: 'readingQuantity',
|
||||
label: '抄表数',
|
||||
subcomponent: InputArea
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'EnergyQuantityManualAdd',
|
||||
props: {
|
||||
@ -71,18 +70,17 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableProps,
|
||||
tableData: [],
|
||||
addButtonShow:'新增',
|
||||
form: {
|
||||
id: '',
|
||||
energyTypeId: '',
|
||||
tableName: '',
|
||||
readingQuantity: null,
|
||||
unit: '',
|
||||
recordTime: ''
|
||||
},
|
||||
rules: {
|
||||
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
|
||||
tableName: [{ required: true, message: '水/气表名不能为空', trigger: 'change' }],
|
||||
readingQuantity: [{ required: true, message: '抄表数不能为空', trigger: 'blur' }],
|
||||
recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }]
|
||||
},
|
||||
isEdit: false
|
||||
@ -96,38 +94,71 @@ export default {
|
||||
} else if (params.type === 'meterReading') {
|
||||
this.isEdit = false
|
||||
this.form.energyTypeId = params.energyTypeId
|
||||
this.form.tableName = params.tableName + ''
|
||||
let obj = {}
|
||||
obj.tableName = params.tableName + ''
|
||||
obj.readingQuantity = 0
|
||||
this.tableData.push(obj)
|
||||
}else {
|
||||
this.isEdit = true
|
||||
this.form.id = params.id
|
||||
this.addButtonShow = ''
|
||||
energyQuantityManualGet({id: this.form.id}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form.energyTypeId = res.data.energyTypeId
|
||||
this.form.tableName = res.data.tableName ? res.data.tableName+'' : ''
|
||||
this.form.readingQuantity = res.data.readingQuantity
|
||||
this.form.unit = res.data.unit ? res.data.unit+'' : ''
|
||||
this.form.recordTime = res.data.recordTime ? res.data.recordTime : null
|
||||
let obj = {}
|
||||
obj.tableName = res.data.tableName ? res.data.tableName+'' : ''
|
||||
obj.readingQuantity = res.data.readingQuantity
|
||||
this.tableData.push(obj)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
inputChange(val) {
|
||||
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
|
||||
},
|
||||
emitButtonClick() {
|
||||
let obj = {}
|
||||
obj.tableName = ''
|
||||
obj.readingQuantity = 0
|
||||
this.tableData.push(obj)
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['energyQuantityManualForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.unit) {
|
||||
this.$modal.msgError("抄表数单位不能为空");
|
||||
// 校验表格
|
||||
if (this.tableData.length === 0) {
|
||||
this.$modal.msgError("抄表数据不能为空");
|
||||
return false
|
||||
}else{
|
||||
for (let item of this.tableData) {
|
||||
console.log(item)
|
||||
if (!item.tableName || (!item.readingQuantity && item.readingQuantity!==0)) {
|
||||
this.$modal.msgError("抄表数据有空值，请检查");
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.isEdit) {
|
||||
// 编辑
|
||||
energyQuantityManualUpdate({...this.form}).then((res) => {
|
||||
energyQuantityManualUpdate({
|
||||
id:this.form.id,
|
||||
energyTypeId:this.form.energyTypeId,
|
||||
recordTime:this.form.recordTime,
|
||||
tableName:this.tableData[0].tableName,
|
||||
readingQuantity:this.tableData[0].readingQuantity
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
energyQuantityManualCreate({...this.form}).then((res) => {
|
||||
energyQuantityManualCreate({
|
||||
energyTypeId:this.form.energyTypeId,
|
||||
recordTime:this.form.recordTime,
|
||||
data:this.tableData
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit('successSubmit')
|
||||
@ -143,6 +174,8 @@ export default {
|
||||
this.$refs.energyQuantityManualForm.resetFields()
|
||||
this.form.unit = ''
|
||||
this.isEdit = false
|
||||
this.addButtonShow = '新增'
|
||||
this.tableData = []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,6 +60,12 @@ const tableProps = [
|
||||
minWidth: 110,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '单位',
|
||||
filter: publicFormatter('energy_unit'),
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
prop: 'tableName',
|
||||
label: '水/气表名',
|
||||
@ -77,18 +83,7 @@ const tableProps = [
|
||||
label: '抄表值'
|
||||
},
|
||||
{
|
||||
prop: 'recordTimeLast',
|
||||
label: '上期抄表日期',
|
||||
filter: parseTimeTable('{y}-{m}-{d}'),
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
prop: 'readingQuantityLast',
|
||||
label: '上期抄表值',
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
prop: 'diff',
|
||||
prop: 'useQty',
|
||||
label: '差值'
|
||||
}
|
||||
]
|
||||
@ -156,17 +151,7 @@ export default {
|
||||
this.$auth.hasPermi('base:energy-quantity-manual:update')
|
||||
? {
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
{
|
||||
type: 'equal',
|
||||
name: 'latest',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
btnName: '编辑'
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:energy-quantity-manual:delete')
|
||||
|
||||
@ -93,7 +93,12 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否推送" prop="push">
|
||||
<el-switch v-model="form.push"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="form.description"></el-input>
|
||||
</el-form-item>
|
||||
@ -149,7 +154,8 @@ export default {
|
||||
code: '',
|
||||
nuit: '',
|
||||
pricingMethod: 2,
|
||||
leaderName: ''
|
||||
leaderName: '',
|
||||
push: false
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
@ -178,18 +184,24 @@ export default {
|
||||
this.form.id = id
|
||||
getEnergyType( id ).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.form = res.data
|
||||
this.form.name = res.data.name
|
||||
this.form.code = res.data.code
|
||||
this.form.nuit = res.data.nuit
|
||||
this.form.pricingMethod = res.data.pricingMethod
|
||||
this.form.leaderName = res.data.leaderName
|
||||
this.form.push = res.data.push ? true : false
|
||||
switch(this.form.pricingMethod) {
|
||||
case 0:
|
||||
this.tableData1 = this.form.segPriceList
|
||||
this.tableData1 = this.form.segPriceList || []
|
||||
break;
|
||||
case 1:
|
||||
this.tableData2 = this.form.usedPriceList
|
||||
this.tableData2 = this.form.usedPriceList || []
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(this.form)
|
||||
} else {
|
||||
this.isEdit = false
|
||||
this.form.id = ''
|
||||
@ -288,6 +300,7 @@ export default {
|
||||
return false
|
||||
}
|
||||
}
|
||||
console.log(this.form)
|
||||
if (this.isEdit) {
|
||||
// 编辑
|
||||
updateEnergyType({
|
||||
@ -300,7 +313,8 @@ export default {
|
||||
dim: this.form.pricingMethod === 1 ? this.form.dim: '',
|
||||
singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
|
||||
segPriceList: this.form.pricingMethod === 0 ? this.tableData1: [],
|
||||
usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: []
|
||||
usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: [],
|
||||
push:this.form.push ? 1 : 0
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
@ -317,7 +331,8 @@ export default {
|
||||
dim: this.form.pricingMethod === 1 ? this.form.dim: '',
|
||||
singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
|
||||
segPriceList: this.form.pricingMethod === 0 ? this.tableData1: [],
|
||||
usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: []
|
||||
usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: [],
|
||||
push:this.form.push ? 1 : 0
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
|
||||
@ -52,7 +52,8 @@ const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '类型编码',
|
||||
showOverflowtooltip: true
|
||||
showOverflowtooltip: true,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
@ -67,6 +68,11 @@ const tableProps = [
|
||||
prop: 'pricingMethod',
|
||||
label: '计价方式'
|
||||
},
|
||||
{
|
||||
prop: 'push',
|
||||
label: '是否推送',
|
||||
filter: publicFormatter('push')
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: '价格(元)',
|
||||
|
||||
@ -45,7 +45,10 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
<!-- <DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> -->
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit" />
|
||||
</base-dialog>
|
||||
|
||||
<!-- 抽屉 详情 -->
|
||||
@ -123,11 +126,12 @@ import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||
// import './http';
|
||||
import BasicDrawer from './components/BasicDrawer.vue';
|
||||
import { publicFormatter } from '@/utils/dict';
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentPlcConnect',
|
||||
mixins: [basicPageMixin],
|
||||
components: { BasicDrawer },
|
||||
components: { BasicDrawer, AddOrUpdate },
|
||||
data() {
|
||||
return {
|
||||
searchBarKeys: ['equipmentId', 'plcId'],
|
||||
@ -343,6 +347,10 @@ export default {
|
||||
this.initSearchOptions();
|
||||
},
|
||||
methods: {
|
||||
successSubmit() {
|
||||
this.cancel()
|
||||
this.getList()
|
||||
},
|
||||
async getEquipmentOptions() {
|
||||
const res = await this.$axios({
|
||||
url: '/base/core-equipment/listAll',
|
||||
@ -469,26 +477,7 @@ export default {
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateEquipmentPlcConnect(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createEquipmentPlcConnect(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功');
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
});
|
||||
this.$refs.addOrUpdate.dataFormSubmit()
|
||||
},
|
||||
|
||||
// 查看报警
|
||||
|
||||
149
src/views/equipment/base/config/DataCollection/add-or-updata.vue
Normal file
149
src/views/equipment/base/config/DataCollection/add-or-updata.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2024-02-21 18:31:44
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="100px">
|
||||
<el-form-item label="设备" prop="equipmentId">
|
||||
<el-cascader
|
||||
placeholder="请选择设备"
|
||||
v-model="dataForm.equipmentId"
|
||||
:options="plLineList"
|
||||
:props="{value: 'id', label: 'name', children: 'children'}"
|
||||
filterable />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联表名" prop="plcId">
|
||||
<el-select
|
||||
v-model="dataForm.plcId"
|
||||
filterable
|
||||
placeholder="请选择关联表"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="dict in plcList"
|
||||
:key="dict.id"
|
||||
:label="dict.plcTableName"
|
||||
:value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '../../../../core/mixins/basic-add';
|
||||
import { createCorePL, updateCorePL, getCorePL, getCode, getCorePLList } from "@/api/base/coreProductionLine";
|
||||
import { createEquipmentPlcConnect, updateEquipmentPlcConnect } from '@/api/base/equipmentPlcConnect';
|
||||
import { getplcAllList, listByParentId } from "@/api/equipment/base/config/config";
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
isGetCode: true,
|
||||
codeURL: getCode,
|
||||
createURL: createCorePL,
|
||||
updateURL: updateCorePL,
|
||||
infoURL: getCorePL,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
equipmentId: undefined,
|
||||
plcId: undefined
|
||||
},
|
||||
plcList: [],
|
||||
plLineList: [],
|
||||
dataRule: {
|
||||
equipmentId: [{ required: true, message: "设备不能为空", trigger: "blur" }],
|
||||
plcId: [{ required: true, message: "关联表名不能为空", trigger: "blur" }]
|
||||
},
|
||||
options: [{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}, {
|
||||
value: 'xiaolv',
|
||||
label: '效率'
|
||||
}, {
|
||||
value: 'kekong',
|
||||
label: '可控'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航'
|
||||
}]
|
||||
}]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
async getDict() {
|
||||
// 关联表名列表
|
||||
const res = await getplcAllList();
|
||||
this.plcList = res.data;
|
||||
// 产线列表
|
||||
const res1 = await getCorePLList();
|
||||
this.plLineList = res1.data;
|
||||
this.plLineList.forEach(item => {
|
||||
listByParentId({ id: item.id }).then(resp => {
|
||||
if (resp.data.length > 0) {
|
||||
// item.children = resp.data
|
||||
this.$set(item, 'children', resp.data)
|
||||
// this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log('你好', this.plLineList)
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
console.log('11', this.dataForm.equipmentId)
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.dataForm.id) {
|
||||
updateEquipmentPlcConnect({
|
||||
id: this.dataForm.id,
|
||||
equipmentId: this.dataForm.equipmentId[this.dataForm.equipmentId.length],
|
||||
plcId: this.dataForm.plcId
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createEquipmentPlcConnect({
|
||||
id: this.dataForm.id,
|
||||
equipmentId: this.dataForm.equipmentId[this.dataForm.equipmentId.length - 1],
|
||||
plcId: this.dataForm.plcId
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.visible = false;
|
||||
this.$emit("refreshDataList");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -50,7 +50,8 @@ export default {
|
||||
watch: {
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
if (val) {
|
||||
// console.log(val);
|
||||
this.list__inner = val.map((item) => ({ ...item, disabled: false }));
|
||||
}
|
||||
},
|
||||
@ -59,7 +60,8 @@ export default {
|
||||
},
|
||||
currentSelect: {
|
||||
handler(val) {
|
||||
// val: string
|
||||
// val: string
|
||||
console.log(val)
|
||||
this.selected = val;
|
||||
this.randomKey = Math.random();
|
||||
// 更新选中状态
|
||||
@ -74,7 +76,8 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange(bomItem, selected) {
|
||||
handleChange(bomItem, selected) {
|
||||
console.log(selected);
|
||||
this.list__inner = this.list__inner.map((item) => ({
|
||||
...item,
|
||||
disabled: selected ? item.id !== bomItem.id : false,
|
||||
|
||||
@ -119,7 +119,9 @@ export default {
|
||||
console.log('value', val);
|
||||
if (val) {
|
||||
this.selectedEquipments = val.map((item) => item.equipmentId);
|
||||
this.selected = val;
|
||||
this.selected = val
|
||||
console.log(this.materialsBomList)
|
||||
// console.log(this.selectedEquipments)
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
|
||||
@ -261,7 +261,8 @@ export default {
|
||||
}
|
||||
// 设置设备id
|
||||
eq.materialsBom.equipmentId = eq.id;
|
||||
eq.valuesBom.equipmentId = eq.id;
|
||||
eq.valuesBom.equipmentId = eq.id;
|
||||
console.log(this.selectedBoms)
|
||||
return eq;
|
||||
});
|
||||
} else {
|
||||
|
||||
@ -1,18 +1,30 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="110px" :model="form">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车间名称" prop="roomNameDict">
|
||||
<el-select v-model="form.roomNameDict" placeholder="请选择" style="width: 100%;" filterable>
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.WORK_SHOP)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班次名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="form.code" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生效时间" prop="enableTime">
|
||||
<el-date-picker
|
||||
@ -25,6 +37,8 @@
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="失效时间" prop="disableTime">
|
||||
<el-date-picker
|
||||
@ -37,8 +51,6 @@
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班次开始时间" prop="startTime">
|
||||
<el-time-picker
|
||||
@ -51,6 +63,8 @@
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班次结束时间" prop="endTime">
|
||||
<el-time-picker
|
||||
@ -63,13 +77,6 @@
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否跨天" prop="daySpan">
|
||||
<el-select v-model="form.daySpan" placeholder="请选择" disabled style="width: 100%;">
|
||||
@ -79,6 +86,13 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
@ -89,6 +103,7 @@ export default {
|
||||
return {
|
||||
form: {
|
||||
id: '',
|
||||
roomNameDict: '',
|
||||
name: '',
|
||||
code: '',
|
||||
enableTime: '',
|
||||
@ -100,6 +115,7 @@ export default {
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
roomNameDict:[{ required: true, message: '请选择车间名称', trigger: 'select' }],
|
||||
name: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
|
||||
enableTime: [{ required: true, message: '请选择班次开始时间', trigger: 'change' }],
|
||||
code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
|
||||
@ -118,6 +134,8 @@ export default {
|
||||
this.form = res.data
|
||||
this.form.name = res.data.name
|
||||
this.form.code = res.data.code
|
||||
// this.form.roomNameDict = (res.data.roomNameDict || res.data.roomNameDict===0) ? String(res.data.roomNameDict) : ''
|
||||
this.$set(this.form, 'roomNameDict',(res.data.roomNameDict || res.data.roomNameDict===0) ? String(res.data.roomNameDict) : '')
|
||||
this.form.enableTime = res.data.enableTime
|
||||
// this.form.disableTime = res.data.disableTime || null
|
||||
this.$set(this.form, 'disableTime', res.data.disableTime || null)
|
||||
|
||||
@ -46,14 +46,21 @@
|
||||
|
||||
<script>
|
||||
import { getGroupClassesPage, deleteGroupClasses, updateGroupClasses } from "@/api/base/groupClasses";
|
||||
import GroupClassAdd from './components/groupClassAdd.vue'
|
||||
import GroupClassAdd from './components/groupClassAdd'
|
||||
import { formatDate } from '@/utils'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'enableTimeStr',
|
||||
label: '生效时段',
|
||||
minWidth: 300
|
||||
},
|
||||
{
|
||||
prop: 'roomNameDict',
|
||||
label: '车间名称',
|
||||
filter: publicFormatter('workshop'),
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '班次名称'
|
||||
|
||||
@ -1,18 +1,30 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车间名称" prop="roomNameDict">
|
||||
<el-select v-model="form.roomNameDict" placeholder="请选择" style="width: 100%;" filterable>
|
||||
<el-option
|
||||
v-for="item in getDictDatas(DICT_TYPE.WORK_SHOP)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组编码" prop="code">
|
||||
<el-input v-model="form.code" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班组组长" prop="leaderId">
|
||||
<el-select v-model="form.leaderId" placeholder="请选择" style="width: 100%;" filterable @change="selectLeader">
|
||||
@ -25,6 +37,8 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号" prop="telephone">
|
||||
<el-input v-model="form.telephone" disabled></el-input>
|
||||
@ -45,10 +59,12 @@ export default {
|
||||
name: '',
|
||||
code: '',
|
||||
leaderId: '',
|
||||
telephone: ''
|
||||
telephone: '',
|
||||
roomNameDict: ''
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
roomNameDict: [{ required: true, message: '请选择车间名称', trigger: 'select' }],
|
||||
name: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入班组编码', trigger: 'blur' }],
|
||||
leaderId: [{ required: true, message: '请选择组长', trigger: 'select' }]
|
||||
@ -64,7 +80,11 @@ export default {
|
||||
this.form.id = id
|
||||
getGroupTeam( id ).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.form = res.data
|
||||
this.form.name = res.data.name
|
||||
this.form.code = res.data.code
|
||||
this.form.leaderId = res.data.leaderId
|
||||
this.form.telephone = res.data.telephone
|
||||
this.form.roomNameDict = (res.data.roomNameDict || res.data.roomNameDict===0) ? String(res.data.roomNameDict) : ''
|
||||
this.selectLeader()
|
||||
}
|
||||
})
|
||||
|
||||
@ -54,6 +54,7 @@ import GroupTeamAdd from './components/groupTeamAdd'
|
||||
import StatusBtn from './components/statusBtn'
|
||||
import WorkerOperate from './components/workerOperate'
|
||||
import WorkerEdit from './components/workerEdit'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
@ -61,6 +62,11 @@ const tableProps = [
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
prop: 'roomNameDict',
|
||||
label: '车间名称',
|
||||
filter: publicFormatter('workshop')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '班组名称'
|
||||
|
||||
108
src/views/group/base/groupTeamScheduling/components/topTab.vue
Normal file
108
src/views/group/base/groupTeamScheduling/components/topTab.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="topTab">
|
||||
<div class="arr leftArr" @click='toLeft'></div>
|
||||
<div class="arr rightArr" @click='toRight'></div>
|
||||
<el-scrollbar ref="groupTeamScroll" :vertical="false" class="scrollTab">
|
||||
<ul class="tabBox">
|
||||
<li :class="{'active':roomNameDict===item.value}" v-for="(item, index) in getDictDatas('workshop')" :key='index' @click='toggleName(item.value)'>{{item.label}}</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopTab',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props:['roomNameDict'],
|
||||
computed: {
|
||||
scrollWrapper() {
|
||||
return this.$refs.groupTeamScroll.$refs.wrap
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toLeft() {
|
||||
const container = this.scrollWrapper
|
||||
container.scrollLeft-=100
|
||||
},
|
||||
toRight() {
|
||||
const container = this.scrollWrapper
|
||||
container.scrollLeft+=100
|
||||
},
|
||||
toggleName(val) {
|
||||
this.$emit('emitFun',val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.topTab {
|
||||
height: 56px;
|
||||
padding: 0px 48px 0px 56px;
|
||||
position: relative;
|
||||
.arr {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.leftArr{
|
||||
left: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.leftArr::before{
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
border-color: transparent #0B58FF transparent transparent;
|
||||
}
|
||||
.rightArr{
|
||||
right: 0;
|
||||
top:0;
|
||||
padding-left: 22px;
|
||||
}
|
||||
.rightArr::before{
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #0B58FF;
|
||||
}
|
||||
.scrollTab{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
ul,li{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tabBox >.active {
|
||||
border-bottom: 4px solid #0B58FF;
|
||||
}
|
||||
.tabBox>li {
|
||||
display: inline-block;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 0px 10px;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="groupTeamScheduling">
|
||||
<TopTab :roomNameDict='roomNameDict' @emitFun='toggleName'/>
|
||||
<div class="operationArea">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
@ -87,13 +88,15 @@
|
||||
|
||||
<script>
|
||||
import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
|
||||
import { listEnabled } from "@/api/base/groupTeam";
|
||||
import { listEnabledByRoom } from "@/api/base/groupTeam";
|
||||
import moment from 'moment';
|
||||
import TopTab from './components/topTab'
|
||||
|
||||
export default {
|
||||
name: "GroupTeamScheduling",
|
||||
data() {
|
||||
return {
|
||||
roomNameDict:null,
|
||||
startDay: '',// 查询参数
|
||||
year: '',// 2023
|
||||
month: '',// 九月
|
||||
@ -108,7 +111,9 @@ export default {
|
||||
autoScheduling: false // 只有在当前日期后的月份才生效
|
||||
};
|
||||
},
|
||||
components:{ TopTab },
|
||||
created() {
|
||||
this.roomNameDict = this.getDictDatas('workshop')[0].value
|
||||
this.startDay = new Date()
|
||||
// 设置按钮是否置灰
|
||||
this.settingBtn()
|
||||
@ -117,6 +122,22 @@ export default {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 切换车间
|
||||
toggleName(val) {
|
||||
this.roomNameDict = val
|
||||
// 如果当前在设置，则取消设置
|
||||
if (this.showSetting) {
|
||||
this.showSetting = !this.showSetting
|
||||
}
|
||||
// 如果红框选中，清除红框选中
|
||||
if (!this.jumpDisabled) {
|
||||
this.clearChoose()
|
||||
}
|
||||
// 获取班组列表
|
||||
this.getTeamList()
|
||||
// 重新获取日历数据
|
||||
this.getList()
|
||||
},
|
||||
// 切换月份
|
||||
selectMonth() {
|
||||
if (this.startDay) {
|
||||
@ -133,7 +154,10 @@ export default {
|
||||
},
|
||||
// 获取班组列表
|
||||
getTeamList() {
|
||||
listEnabled().then(res => {
|
||||
console.log(this.roomNameDict)
|
||||
listEnabledByRoom({
|
||||
room: this.roomNameDict
|
||||
}).then(res => {
|
||||
this.teamList = res.data || []
|
||||
})
|
||||
},
|
||||
@ -143,7 +167,8 @@ export default {
|
||||
let month = moment(this.startDay).format('M')
|
||||
getPreset({
|
||||
year: year,
|
||||
month: month
|
||||
month: month,
|
||||
roomNameDict: this.roomNameDict
|
||||
}).then(res => {
|
||||
let obj = res.data || {}
|
||||
if (obj) {
|
||||
@ -156,6 +181,7 @@ export default {
|
||||
}
|
||||
}
|
||||
this.list = obj
|
||||
this.settingBtnDis = false
|
||||
}).catch(() => {
|
||||
this.list = {}
|
||||
this.settingBtnDis = true // 禁用设置按钮
|
||||
@ -246,7 +272,8 @@ export default {
|
||||
// console.log(moment(this.startDay).format("YYYY-MM-DD"))
|
||||
autoSet({
|
||||
year: this.year,
|
||||
month: moment(this.startDay).month() + 1
|
||||
month: moment(this.startDay).month() + 1,
|
||||
roomNameDict: this.roomNameDict
|
||||
}).then(res => {
|
||||
this.list = res.data || {}
|
||||
})
|
||||
@ -350,6 +377,8 @@ export default {
|
||||
padding: 14px 10px 0 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
height: calc(100vh - 255px);
|
||||
overflow-y: auto;
|
||||
.el-calendar__body {
|
||||
padding: 10px 16px 16px 0;
|
||||
}
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
<p class="boldTitle">工单名称</p>
|
||||
<p class="lightText">{{ queryParams.workOrderName ? queryParams.workOrderName : '-' }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="boldTitle">车间名称</p>
|
||||
<p class="lightText">{{ (queryParams.roomNameDict || queryParams.roomNameDict === 0) ? getDictDataLabel('workshop',queryParams.roomNameDict) : '-' }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="boldTitle">班组名称</p>
|
||||
<p class="lightText">{{ queryParams.teamName ? queryParams.teamName : '-' }}</p>
|
||||
|
||||
@ -31,7 +31,15 @@
|
||||
import { getByWorkOrder } from '@/api/monitoring/groupTeamView'
|
||||
import { workOrderList } from '@/api/base/workOrder'
|
||||
import GroupTeamViewDetail from './components/groupTeamViewDetail.vue'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'roomNameDict',
|
||||
label: '车间名称',
|
||||
filter: publicFormatter('workshop'),
|
||||
showOverflowtooltip: true,
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '班组名称'
|
||||
@ -134,6 +142,7 @@ export default {
|
||||
})
|
||||
params.workOrderId = this.queryParams.workOrderId
|
||||
params.workOrderName = this.workOrderName
|
||||
params.roomNameDict = val.data.roomNameDict
|
||||
this.$nextTick(() => {
|
||||
this.$refs.groupTeamViewDetail.init(params)
|
||||
})
|
||||
|
||||
@ -37,13 +37,21 @@
|
||||
import { groupTeamSchedulingPage, groupClassesListAll } from '@/api/monitoring/teamProduction'
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import TeamProductionDetail from './components/teamProductionDetail'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '排班创建时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
prop: 'roomNameDict',
|
||||
label: '车间名称',
|
||||
filter: publicFormatter('workshop'),
|
||||
showOverflowtooltip: true,
|
||||
minWidth: 100
|
||||
},
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '排班创建时间',
|
||||
// filter: parseTime,
|
||||
// minWidth: 160
|
||||
// },
|
||||
{
|
||||
prop: 'startDay',
|
||||
label: '上班日期',
|
||||
|
||||
@ -86,18 +86,18 @@
|
||||
:model="loginForm"
|
||||
:rules="LoginRules"
|
||||
class="login-form">
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<!-- <el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input
|
||||
v-model="loginForm.tenantName"
|
||||
type="text"
|
||||
auto-complete="off"
|
||||
placeholder="租户">
|
||||
<!-- <svg-icon
|
||||
<svg-icon
|
||||
slot="prefix"
|
||||
icon-class="tree"
|
||||
class="el-input__icon input-icon" /> -->
|
||||
class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<!-- 账号密码登录 -->
|
||||
<div>
|
||||
<el-form-item prop="username">
|
||||
@ -244,25 +244,25 @@ export default {
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
tenantName: [
|
||||
{ required: true, trigger: 'blur', message: '租户不能为空' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// debugger
|
||||
getTenantIdByName(value).then((res) => {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
// 设置租户
|
||||
setTenantId(tenantId);
|
||||
callback();
|
||||
} else {
|
||||
callback('租户不存在');
|
||||
}
|
||||
});
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
// tenantName: [
|
||||
// { required: true, trigger: 'blur', message: '租户不能为空' },
|
||||
// {
|
||||
// validator: (rule, value, callback) => {
|
||||
// // debugger
|
||||
// getTenantIdByName(value).then((res) => {
|
||||
// const tenantId = res.data;
|
||||
// if (tenantId && tenantId >= 0) {
|
||||
// // 设置租户
|
||||
// setTenantId(tenantId);
|
||||
// callback();
|
||||
// } else {
|
||||
// callback('租户不存在');
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
|
||||
@ -281,11 +281,11 @@ export default {
|
||||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||
if (timeVal && timeVal.length > 0) {
|
||||
console.log('nihc ', timeVal)
|
||||
if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 10 * 60 * 1000) {
|
||||
if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 30 * 60 * 1000) {
|
||||
this.queryParams.recordTime = timeVal;
|
||||
await this.handleQuery();
|
||||
} else {
|
||||
this.$message.warning('时间范围最大一小时限制！')
|
||||
this.$message.warning('时间范围最大30分钟限制！')
|
||||
}
|
||||
} else {
|
||||
this.queryParams.recordTime = [];
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user