Merge branch 'projects/mesxc-test' into projects/mesxc-dy

This commit is contained in:
helloDy 2024-01-26 09:25:32 +08:00
commit 62f1901c72
93 changed files with 4973 additions and 941 deletions

View File

@ -1,8 +1,8 @@
### ###
# @Author: Do not edit # @Author: Do not edit
# @Date: 2023-08-29 09:40:39 # @Date: 2023-08-29 09:40:39
# @LastEditTime: 2024-01-08 16:23:54 # @LastEditTime: 2024-01-11 10:20:21
# @LastEditors: DY # @LastEditors: zhp
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置
@ -13,22 +13,26 @@ VUE_APP_TITLE = MES系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://100.64.0.26:48082' # 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.0.33:48082' VUE_APP_BASE_API = 'http://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://192.168.1.101:8080' # VUE_APP_BASE_API = 'http://192.168.1.20:48080'
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
# VUE_APP_BASE_API = 'http://192.168.2.173:48080' # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
# VUE_APP_BASE_API = 'http://192.168.1.49:48082' # VUE_APP_BASE_API = 'http://192.168.1.49:48082'
# VUE_APP_BASE_API = 'http://192.168.1.8: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.4.159:48080'
# VUE_APP_BASE_API = 'http://192.168.1.104:48082' # VUE_APP_BASE_API = 'http://192.168.1.104: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.62:48082'
# VUE_APP_BASE_API = 'http://192.168.1.78:48082' # VUE_APP_BASE_API = 'http://192.168.1.78:48082'
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
# dcs地址
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
# socket地址 # socket地址
VUE_APP_Socket_API = 'ws://192.168.0.33:48082' # VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
VUE_APP_Socket_API = 'ws://192.168.0.30:8888'
# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://100.64.0.23:48082'
# 积木报表指向地址 # 积木报表指向地址
VUE_APP_JIMU_API = 'http://10.70.2.22:8080' VUE_APP_JIMU_API = 'http://10.70.2.22:8080'

View File

@ -7,6 +7,11 @@ VUE_APP_TITLE = MES系统
# 芋道管理系统/生产环境 # 芋道管理系统/生产环境
VUE_APP_BASE_API = '/prod-api' 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' VUE_APP_JIMU_API = 'http://192.168.0.33:48082'

View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:49:02 * @Date: 2023-12-12 13:49:02
* @LastEditTime: 2023-12-14 14:21:43 * @LastEditTime: 2024-01-24 15:54:58
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -55,3 +55,12 @@ export function updateSumAutoDeliveDataList(query) {
data: query, data: query,
}) })
} }
export function exportProductExcel(query) {
return request({
url: '/base/report-auto-production-backup/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

View 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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -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: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/img/eqStatus.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

BIN
src/assets/img/high.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/img/middle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/img/short.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View File

@ -62,7 +62,7 @@ export default {
url, url,
method, method,
params: (method === 'get' || method === 'delete') ? payload : null, params: (method === 'get' || method === 'delete') ? payload : null,
data: method !== 'get' ? payload : null, data: (method === 'get' || method === 'delete') ? null : payload
}) })
}, },
put(payload) { put(payload) {

View File

@ -20,61 +20,21 @@ const state = {
gasChartWeekTrend:{}, // 烟气 gasChartWeekTrend:{}, // 烟气
gasChartMonthTrend:{}, // 烟气 gasChartMonthTrend:{}, // 烟气
gasChartYearTrend:{}, // 烟气 gasChartYearTrend:{}, // 烟气
israCheckType: [],
israDayStatistic: [],//缺陷统计 israDayStatistic: [],//缺陷统计
israWeekStatistic: [],//缺陷统计 israWeekStatistic: [],//缺陷统计
israMonthStatistic: [],//缺陷统计 israMonthStatistic: [],//缺陷统计
israYearStatistic: [],//缺陷统计 israYearStatistic: [],//缺陷统计
productline: [{ productline: [], // SJG产线产量及良品率
"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:[],// SJG设备报警 sjgEquipment:[],// SJG设备报警
workOrder: [], // 工单监控
defectSum: [], // 缺陷汇总
order: [],// 订单完成情况
yieldRateTable: [],// 本日生产良率table
cutChartDay:[],
cutChartWeek:[],
cutChartMonth:[],
cutChartYear:[]
}; };
const mutations = { const mutations = {
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => { SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@ -123,12 +83,13 @@ const mutations = {
state.exhaustGasInfo = exhaustGasInfo state.exhaustGasInfo = exhaustGasInfo
}, },
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => { SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend state.gasChartDayTrend = exhaustGasChart.dayTrend
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend state.gasChartWeekTrend = exhaustGasChart.weekTrend
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend state.gasChartMonthTrend = exhaustGasChart.monthTrend
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend state.gasChartYearTrend = exhaustGasChart.yearTrend
}, },
SET_DEFECTCHART: (state, israStatistic) => { SET_DEFECTCHART: (state, israStatistic) => {
state.israCheckType = israStatistic.checkType
state.israDayStatistic = israStatistic.dayStatistic state.israDayStatistic = israStatistic.dayStatistic
state.israWeekStatistic = israStatistic.weekStatistic state.israWeekStatistic = israStatistic.weekStatistic
state.israMonthStatistic = israStatistic.monthStatistic state.israMonthStatistic = israStatistic.monthStatistic
@ -136,6 +97,33 @@ const mutations = {
}, },
SET_PRODUCTLINE: (state, productline) => { SET_PRODUCTLINE: (state, productline) => {
state.productline = productline state.productline = productline
},
SET_SJGEQ: (state, equipment) => {
state.sjgEquipment = equipment
},
SET_WORKORDER: (state, workOrder) => {
state.workOrder = workOrder
},
SET_DEFECTSUM: (state, defectSum) => {
state.defectSum = defectSum
},
SET_ORDER: (state, order) => {
state.order = order
},
SET_YIELDRATETABLE: (state, yieldRateTable) => {
state.yieldRateTable = yieldRateTable
},
SET_CUTCHARDAY: (state, cutChartDay) => {
state.cutChartDay = cutChartDay
},
SET_CUTCHARWEEK: (state, cutChartWeek) => {
state.cutChartWeek = cutChartWeek
},
SET_CUTCHARMONTH: (state, cutChartMonth) => {
state.cutChartMonth = cutChartMonth
},
SET_CUTCHARYEAR: (state, cutChartYear) => {
state.cutChartYear = cutChartYear
} }
}; };
const actions = { const actions = {
@ -180,6 +168,33 @@ const actions = {
setProductline({ commit }, productline) { setProductline({ commit }, productline) {
commit('SET_PRODUCTLINE', productline.payload) commit('SET_PRODUCTLINE', productline.payload)
}, },
setSJGEq({ commit }, equipment) {
commit('SET_SJGEQ', equipment.payload)
},
setWorkOrder({ commit }, workOrder) {
commit('SET_WORKORDER', workOrder.payload)
},
setDefectSum({ commit }, defectSum) {
commit('SET_DEFECTSUM', defectSum.payload)
},
setOrder({ commit }, order) {
commit('SET_ORDER', order.payload)
},
setYieldRateTable({ commit }, yieldRateTable) {
commit('SET_YIELDRATETABLE', yieldRateTable.payload)
},
setCutChartDay({ commit }, cutChartDay) {
commit('SET_CUTCHARDAY', cutChartDay.payload)
},
setCutChartWeek({ commit }, cutChartWeek) {
commit('SET_CUTCHARWEEK', cutChartWeek.payload)
},
setCutChartMonth({ commit }, cutChartMonth) {
commit('SET_CUTCHARMONTH', cutChartMonth.payload)
},
setCutChartYear({ commit }, cutChartYear) {
commit('SET_CUTCHARYEAR', cutChartYear.payload)
}
}; };
export default { export default {
namespaced: true, namespaced: true,

View File

@ -200,4 +200,12 @@ input, textarea{
// 弹出框上下分布去掉label的padding-bottom // 弹出框上下分布去掉label的padding-bottom
.el-form--label-top .el-form-item__label { .el-form--label-top .el-form-item__label {
padding: 0; padding: 0;
}
// 大屏滚动表格
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
border-right: none;
} }

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2023-11-23 11:14:30 * @LastEditTime: 2024-01-19 16:31:53
* @Description: * @Description:
--> -->
<template> <template>
@ -14,7 +14,7 @@
}"> }">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt=""> <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
许昌安彩AGV原片周转看板 许昌安彩AGV原片周转看板
<h3 class="unit">单位河南汇融科技服务有限公司</h3> <h3 class="unit">单位河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3> <h3 class="time">{{ times }}</h3>
<!-- <el-button <!-- <el-button
type="text" type="text"
@ -29,13 +29,13 @@
<el-row class="container-main flex-col" type="flex"> <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-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'"> <base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
<base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps" <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> :table-data="qualityYearList" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'"> <base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -46,13 +46,15 @@
<!-- <el-row style="margin-bottom: 1em"> <!-- <el-row style="margin-bottom: 1em">
<p class="now-team-title">加工工单进度</p> <p class="now-team-title">加工工单进度</p>
</el-row> --> </el-row> -->
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em"> <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"> <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" /> <i class="el-icon-check" />
{{ op.name }} {{ op.name }}
</p> </p>
<p v-else class="now-secondary-title">{{ 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-row> <!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" /> <el-progress :percentage="100" class="custom-progress-bar" />
@ -85,16 +87,17 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'"> <base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'5_5'"
:back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
<!-- <el-row :gutter="9 * beilv"> --> <!-- <el-row :gutter="9 * beilv"> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> --> <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
<base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps" <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" /> :table-data="inventoryList" />
<!-- </el-col> --> <!-- </el-col> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-table3 <base-table3
:page="2" :page="2"
:limit="5" :limit="5"
@ -107,12 +110,13 @@
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'"> <base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'5_4'"
:back="'energy'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
<!-- 像下面这样表格里的limit值也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值也许可以用js动态计算出来 -->
<base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps" <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" /> :table-data="locationList" />
</base-container> </base-container>
</el-col> </el-col>
@ -401,13 +405,13 @@ const locationTableProps = [
prop: 'level', prop: 'level',
label: '存放位置', label: '存放位置',
// subcomponent: alarmLevel, // subcomponent: alarmLevel,
align: 'center' // align: 'center'
}, },
{ {
prop: 'unit', prop: 'unit',
label: '单位', label: '单位',
// subcomponent: alarmLevel, // subcomponent: alarmLevel,
align: 'center' // align: 'center'
}, },
{ {
prop: 'product', prop: 'product',
@ -463,13 +467,13 @@ const inventoryTableProps = [
prop: 'level', prop: 'level',
label: '规格', label: '规格',
// subcomponent: alarmLevel, // subcomponent: alarmLevel,
align: 'center' // align: 'center'
}, },
{ {
prop: 'unit', prop: 'unit',
label: '单位', label: '单位',
// subcomponent: alarmLevel, // subcomponent: alarmLevel,
align: 'center' // align: 'center'
}, },
{ {
prop: 'product', prop: 'product',
@ -515,7 +519,7 @@ const qualityYearTableProps = [
prop: 'level', prop: 'level',
label: '库位', label: '库位',
// subcomponent: alarmLevel, // subcomponent: alarmLevel,
align: 'center' // align: 'center'
}, },
{ {
prop: 'product', prop: 'product',

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-01-04 16:41:17 * @LastEditTime: 2024-01-25 17:55:53
* @Description: * @Description:
--> -->
<template> <template>
@ -14,7 +14,7 @@
}"> }">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt=""> <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> <h3 class="time">{{ times }}</h3>
<!-- <el-button <!-- <el-button
type="text" type="text"
@ -29,14 +29,16 @@
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'切割数据'" :title-icon="'eqAlarm'"> <base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="cutProps" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" /> :table-data="cutTableDataList" /> -->
<dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'产量及良率统计'" :title-icon="'productLine'"> <base-container :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
:title-icon="'energyMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -47,16 +49,18 @@
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'ISRA 缺陷数据'" :title-icon="'eqMonitoring'"> <base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="ISRATableProps" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" /> :table-data="ISRAList" /> -->
<dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :title="'废片 缺陷数据'" :title-icon="'energyMonitoring'"> <base-container :no-content-padding="true" :height="256" :title="'废片 缺陷数据'" :size="'middle'"
:title-icon="'scrap'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -78,25 +82,32 @@
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
<base-container :height="318 + 338 + 16" :title="'设备状态监控'" :title-icon="'scrap'"> <base-container :height="318 + 338 + 16" :size="'eqStatus'"
:title="'设备状态监控'" :title-icon="'eqMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
<!-- 像下面这样表格里的limit值也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值也许可以用js动态计算出来 -->
<el-col :span="6"> <el-col :span="6" style="">
<h4 style="margin: 5px 0 5px 0;">融化风机</h4> <div style="font-size:20px;margin: 5px 0 10px 0">融化风机</div>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> :table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
</el-col> </el-col>
<span class="eqLine"></span>
<el-col :span="6"> <el-col :span="6">
<h3 style="margin: 5px 0 5px 0;">退火风机</h3> <div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> :table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
</el-col> </el-col>
<span class="eqLineTwo"></span>
<el-col :span="12" style="float: right;"> <el-col :span="12" style="float: right;">
<h3 style="margin: 5px 0 5px 0;">产线设备</h3> <div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> :table-data="realEqList" /> -->
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
</el-col> </el-col>
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359" <!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
:show-legend="true" /> --> :show-legend="true" /> -->
@ -122,6 +133,7 @@
<script> <script>
import baseContainer from './components/baseContainer' import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable' import baseTable1 from './components/baseTable'
// import baseContainer1 from './components/baseContainer/indexcopy'
// import baseTable2 from './components/baseTable' // import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable' // import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup' import TopRadioGroup from './components/topRadioGroup'
@ -133,13 +145,15 @@ import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue' // import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel' import alarmLevel from './components/alarmLevel'
import pileBarChart from './components/pileBarChart' import pileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv'
// import axios from '@/utils/request' // import axios from '@/utils/request'
import doubleYChart from './components/doubleYChart ' import doubleYChart from './components/coldDoubleYChart'
// import elementResizeDetectorMaker from 'element-resize-detector'; // import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); // // var erd = elementResizeDetectorMaker(); //
// let resizeFun = null // let resizeFun = null
import { parseTime } from '../core/mixins/code-filter'; import { parseTime } from '../core/mixins/code-filter';
import { formatDate } from '@/utils'
import LinearBarChart from './components/linearBarChart' import LinearBarChart from './components/linearBarChart'
@ -170,7 +184,10 @@ const cutProps = [
{ prop: 'size', label: '规格' }, { prop: 'size', label: '规格' },
{ prop: 'productArea', label: '良品面积', width: 80 }, { prop: 'productArea', label: '良品面积', width: 80 },
{ prop: 'wasteArea', label: '废片面积', width: 80 }, { prop: 'wasteArea', label: '废片面积', width: 80 },
{ prop: 'product', label: '良品率', width: 80 }, {
prop: 'product', label: '良品率', width: 80,
subcomponent: colorDiv,
},
] ]
const cxNameList = ['周一', '周二', '周三', '周四', '周五'] const cxNameList = ['周一', '周二', '周三', '周四', '周五']
@ -242,7 +259,8 @@ export default {
pileBarChart, pileBarChart,
TopRadioGroup, TopRadioGroup,
doubleYChart, doubleYChart,
LinearBarChart LinearBarChart,
// baseContainer1
// pieChart1, // pieChart1,
// pieChart2 // pieChart2
// pieChart3 // pieChart3
@ -260,6 +278,61 @@ export default {
ISRATableProps, ISRATableProps,
orderList: [], orderList: [],
times: '', 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, 90, 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, 80, 90,90,90,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, 90, 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:[], ISRAList:[],
EnergyMonitoringNameList: [], EnergyMonitoringNameList: [],
equipmentList: [], equipmentList: [],
@ -334,6 +407,18 @@ export default {
this.beilv2 = _this.clientWidth / 1920 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() // this.getList()
// const _this = this; // const _this = this;
// window.onresize = () => { // window.onresize = () => {
@ -359,6 +444,45 @@ export default {
// removeEventListener('resize', resizeFun) // removeEventListener('resize', resizeFun)
// }, // },
methods: { methods: {
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() { // getList() {
// // this.loading = true; // // this.loading = true;
// // // //
@ -479,23 +603,52 @@ export default {
// FanInfo // FanInfo
if (this.funWsData.type === 'AnnealFanInfo') { if (this.funWsData.type === 'AnnealFanInfo') {
let arr = [] let arr = []
let index = 0
for (let i in this.funWsData.data.annealFanInfo) { for (let i in this.funWsData.data.annealFanInfo) {
arr.push({ index++,
equipmentName: i, // let index = 1,
status: this.funWsData.data.annealFanInfo[i] // 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') { if (this.funWsData.type === 'FanInfo') {
let arr = [] let arr = []
let index = 0
for (let i in this.funWsData.data.fanInfo) { for (let i in this.funWsData.data.fanInfo) {
arr.push({ index++,
equipmentName: i, // arr.push({
status: this.funWsData.data.fanInfo[i] // 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() { cutWebsocketOnOpen() {
@ -507,31 +660,48 @@ export default {
this.CutInitWebSocket() this.CutInitWebSocket()
}, },
getSize(str) { 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 => { let size = str.match(/\d+(\.\d+)?/g).map(ele => {
return parseFloat(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] return size[0] + '*' + size[1] + '*' + size[2]
}, },
// //
cutWebsocketOnMessage(e) { cutWebsocketOnMessage(e) {
this.cutWsData = e?.data ? JSON.parse(e?.data) : {} this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') { if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => { // this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
// if (ele.progressRate != 1) { // // if (ele.progressRate != 1) {
return { // return {
id: ele.id, // id: ele.id,
lineName: ele.lineName, // lineName: ele.lineName,
time: ele.time, // time: ele.time,
size: this.getSize(ele.size), // size: this.getSize(ele.size),
productArea: ele.productArea + '㎡', // productArea: ele.productArea + '',
wasteArea: ele.wasteArea + '㎡', // wasteArea: ele.wasteArea + '',
product: (ele.product * 100).toFixed(2) + '%' // 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.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)">${this.formatTime(item.time) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.getSize(item.size) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.productArea + '㎡' || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.wasteArea + '㎡' || ''}</span>`,
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:rgba(255,255,255,0.5)' : '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') { } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
let nameList = [] let nameList = []
let nameWasteList = [] let nameWasteList = []
@ -568,33 +738,51 @@ export default {
// let obj = JSON.parse(data.data) // let obj = JSON.parse(data.data)
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {} this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.SJGWsData.type === 'isra') { if (this.SJGWsData.type === 'isra') {
this.ISRAList = this.SJGWsData.detData.map((ele, index) => { // this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) { // // if (ele.progressRate != 1) {
return { // return {
id: ele.id, // id: ele.id,
linename: ele.linename, // linename: ele.linename,
type: ele.type, // type: ele.type,
num: ele.num, // num: ele.num,
time:ele.time, // time:ele.time,
percent: ele.percent // percent: ele.percent
} // }
// } // // }
}); // });
console.log(this.SJGWsData.detData);
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['ISRAScrollBoard'].updateRows(ISRAArr)
} else if (this.SJGWsData.type === 'equipment') { } else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) => { this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// if (ele.progressRate != 1) { // console.log(item)
return { `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
line: ele.line, </span>`,
name: ele.name, // formatDate(item.planStartTime) || '',
code: ele.code, `
run: ele.run, <span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
error: ele.error, </span>`,
// percent: ele.percent `<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) { windowWidth(value) {
this.clientWidth = value this.clientWidth = value
@ -665,25 +853,27 @@ export default {
width: 100%; width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat; background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #00fff0; color: rgba(0, 255, 247, 1);
text-align: center; text-align: center;
.unit { .unit {
position: absolute; position: absolute;
left: 260px; left: 260px;
top: 25px; top: 25px;
color: rgba(255, 255, 255, 0.80);
font-size: 20px; font-size: 20px;
} }
.time { .time {
position: absolute; position: absolute;
left: 1360px; left: 1360px;
color: rgba(255, 255, 255, 0.80);
top: 25px; top: 25px;
font-size: 20px; font-size: 20px;
} }
.title-button { .title-button {
color: #00fff0; color: rgba(255, 255, 255, 0.80);
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
} }
@ -737,6 +927,30 @@ export default {
</style> </style>
<style lang="scss"> <style lang="scss">
.eqLine{
height: 290px;
width: 1px;
position: absolute;
left: 25%;
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: 50%;
top: 12%;
background: linear-gradient(to bottom, rgba(60,
231,
255, 0), #3CE7FF, rgba(60,
231,
255, 0));
}
.visual-container { .visual-container {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@ -813,4 +1027,44 @@ export default {
/* .container-main { /* .container-main {
min-height: calc(100vh - 10em); 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> </style>

View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2022-01-21 14:43:06 * @Date: 2022-01-21 14:43:06
* @LastEditors: zwq * @LastEditors: zhp
* @LastEditTime: 2022-01-24 09:12:18 * @LastEditTime: 2024-01-25 17:41:44
* @Description: * @Description:
--> -->
<template> <template>
@ -143,9 +143,9 @@ export default {
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { // this.$nextTick(() => {
this.initChart() // // this.initChart()
}) // })
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {

View File

@ -2,13 +2,13 @@
* @Author: gtz * @Author: gtz
* @Date: 2022-01-19 15:58:17 * @Date: 2022-01-19 15:58:17
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-01-04 16:16:22 * @LastEditTime: 2024-01-24 17:01:21
* @Description: file content * @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->
<template> <template>
<div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }" <div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"> :class="[{ 'no-padding': noPadding, 'border-none': !showLine }, 'base-container__' + size]">
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> --> <!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
<template v-if="showLine"> <template v-if="showLine">
<div class="line" /> <div class="line" />
@ -22,12 +22,21 @@
</template> </template>
<div class="bar-item"> <div class="bar-item">
<div v-if="title" class="bar-title"> <div v-if="title" class="bar-title" ds>
<span> <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 }} {{ title }}
</span> </span>
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
{{ time +'-'+ time2 }}
</span> -->
</div> </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 }"> <div class="bar-content" :class="{ 'p-0': noContentPadding }">
<slot /> <slot />
</div> </div>
@ -74,26 +83,48 @@ export default {
beilv: { beilv: {
type: Number, type: Number,
default: 1 default: 1
},
size: {
type: String,
default: ''
} }
}, },
data() { data() {
return { return {
curIndex: 0, curIndex: 0,
time: null,
time2:null
// imgUrl: require(`../../../../assets/img/${this.back}.png`), // imgUrl: require(`../../../../assets/img/${this.back}.png`),
} }
}, },
created() { created() {
// console.log(this.back); },
// this.$nextTick(() => { mounted () {
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)` this.time = this.format(new Date().setHours(7,0,0));
// }) // console.log(time);
// console.log(this.$refs.baseContainer.style) //
this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
}, },
methods: { methods: {
add0(m) {
return m < 10 ? '0' + m : m
},
format(shijianchuo) {
//shijianchuoparseInt
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) { changeTab(num) {
this.curIndex = num this.curIndex = num
this.$emit('tabSelect', num) this.$emit('tabSelect', num)
} },
} }
} }
</script> </script>
@ -106,8 +137,29 @@ export default {
// background-color: rgba($color: #061027, $alpha: 0.15); // background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
// border: 2px solid; // border: 2px solid;
background: url('../../../../assets/img/energy.png') no-repeat; // background: url('../../../../assets/img/energy.png') no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
&__small {
background: url(../../../../assets/img/short.png) no-repeat;
background-size: 100% 100%;
// background-position: 0 0;
}
&__middle {
background: url(../../../../assets/img/middle.png) no-repeat;
background-size: 100% 100%;
// background-position: 0 0;
}
&__large {
background: url(../../../../assets/img/high.png) no-repeat;
background-size: 100% 100%;
// background-position: 0 0;
}
&__eqStatus {
background: url(../../../../assets/img/short.png) no-repeat;
background-size: 100% 100%;
}
// border-radius: 40px 0px 40px 0px; // 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; // border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
// .line { // .line {
@ -170,14 +222,16 @@ export default {
.bar-title { .bar-title {
width: 100%; width: 100%;
color: #52fff1; color: #ffffff;
font-size: 1.5em; font-size: 24px;
padding: 0.67em; padding: 0.67em;
display: flex;
} }
.bar-content { .bar-content {
padding: 1em; padding: 1em;
flex: 1 auto; flex: 1 auto;
position: relative;
} }
.no-padding { .no-padding {

View File

@ -1,26 +1,23 @@
<!-- <!--
* @Date: 2020-12-14 09:07:03 * @Date: 2020-12-14 09:07:03
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-01-04 16:16:00 * @LastEditTime: 2024-01-12 14:30:46
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description: * @Description:
--> -->
<template> <template>
<div class="visual-base-table-container scroll_table"> <div class="visual-base-table-container scroll_table">
<div style="display: inline-block; width: 100%"> <div style="display: inline-block; width: 100%">
<el-table class="top" v-loading="isLoading" <el-table class="top" v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle" :header-cell-style="{ background: 'rgba(32, 55, 96, 1)', color: '#fff', height: '33px', }"
:data="renderData" border style="width: 100%; background: transparent"> :row-style="setRowStyle" :data="renderData" border style="width: 100%; background: transparent">
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" /> <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow" <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item"> v-bind="item">
<template slot-scope="scope"> <template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" /> @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -33,11 +30,9 @@
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow" <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item"> v-bind="item">
<template slot-scope="scope"> <template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" /> @emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -45,7 +40,6 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
@ -116,12 +110,12 @@ export default {
}, },
classOption() { classOption() {
return { return {
step: 0.3, // step: 0.2, //
limitMoveNum: 1, // this.list limitMoveNum: 10, // this.list
hoverStop: true, // stop hoverStop: true, // stop
direction: 1, // 0 1 2 3 direction: 1, // 0 1 2 3
openWatch: true, // dom openWatch: true, // dom
singleHeight: 0, // (0) direction => 0/1 singleHeight: 0/1, // (0) direction => 0/1
singleWidth: 0, // (0) direction => 2/3 singleWidth: 0, // (0) direction => 2/3
waitTime: 1000, // (1000ms) waitTime: 1000, // (1000ms)
}; };

View File

@ -0,0 +1,292 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-17 15:26:04
* @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: -40px;
}
</style>

View File

@ -0,0 +1,44 @@
<!--
* @Date: 2021-02-20 10:45:21
* @LastEditors: zhp
* @LastEditTime: 2024-01-09 16:16:43
* @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\ColorSqua.vue
* @Description:
-->
<template>
<span :class="[injectData.product <= 91 ? 'orange' : 'white']" >
{{ injectData.product + "%" }}
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({})
}
},
data() {
return {
color: 'rgba(255,255,255,0.5)',
}
},
mounted() {
this.product = this.injectData.product
},
methods: {
emitClick() {
console.log(this.injectData)
}
}
}
</script>
<style scoped>
.orange{
color:rgba(255, 209, 96, 1)
}
.white{
color:rgba(255, 255, 255, 0.5)
}
</style>

View File

@ -1,13 +1,13 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-09-21 09:06:28 * @Date: 2023-09-21 09:06:28
* @LastEditTime: 2023-12-29 16:18:17 * @LastEditTime: 2024-01-17 13:56:46
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<div> <div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" /> <div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
</div> </div>
</template> </template>
@ -70,9 +70,9 @@ export default {
mounted() { mounted() {
console.log('mounted') console.log('mounted')
console.log('borderRadius: ', this.borderRadius) console.log('borderRadius: ', this.borderRadius)
this.$nextTick(() => { // this.$nextTick(() => {
this.initChart() // this.initChart()
}) // })
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
@ -83,16 +83,27 @@ export default {
}, },
methods: { methods: {
initChart(nameList, passRateList, outputNumList) { initChart(nameList, passRateList, outputNumList) {
console.log(nameList, passRateList)
let series= [ let series= [
{ {
name: '产线产量', name: '产线产量',
type: 'bar', type: 'bar',
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ normal: {
{ offset: 0, color: '#9DD5FF' }, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: '#1295FF' } { offset: 0, color: '#9DD5FF' },
]) { offset: 0.3, color: '#1295FF' }
]),
label: {
show: true, //
position: 'top', //
textStyle: { //
color: '#ced1d5',
fontSize: 12
}
},
}
// barBorderRadius: this.borderRadius // barBorderRadius: this.borderRadius
}, },
barWidth: 12, barWidth: 12,
@ -100,6 +111,7 @@ export default {
}, },
{ {
name: '产线良品率', name: '产线良品率',
symbol: 'circle', //
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
areaStyle: { areaStyle: {
@ -126,10 +138,10 @@ export default {
data: passRateList data: passRateList
} }
] ]
const colors = ['#5470C6', '#91CC75', '#EE6666'] // const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({ this.chart.setOption({
color: colors, // color: colors,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -137,14 +149,15 @@ export default {
} }
}, },
grid: { grid: {
left: "4%", left: "6%",
right: "4%", right: "6%",
bottom: "3%", bottom: "3%",
width: 'auto',
height: "auto",
containLabel: true containLabel: true
}, },
legend: { legend: {
itemWidth: 10,
itemHeight: 10,
right: '20px',
data: ['产线产量', '产线良品率'], data: ['产线产量', '产线良品率'],
textStyle: { textStyle: {
fontSize: 12 * this.beilv, fontSize: 12 * this.beilv,
@ -187,11 +200,13 @@ export default {
type: 'value', type: 'value',
name: '良品率/%', name: '良品率/%',
nameTextStyle: {// y nameTextStyle: {// y
color: '#fff' color: '#fff',
align: "left",
}, },
position: 'right', position: 'right',
alignTicks: true, alignTicks: true,
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: '#213259', // 线 color: '#213259', // 线
@ -227,12 +242,15 @@ export default {
scale: true, scale: true,
type: 'value', type: 'value',
name: '产量/㎡', // y name: '产量/㎡', // y
nameTextStyle: {// y nameTextStyle: {
color: '#fff' color: "#fff",
// fontSize: 10,
align: "right",
}, },
position: 'left', // position: 'left',
alignTicks: true, alignTicks: true,
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: '#213259', // 线 color: '#213259', // 线
@ -255,7 +273,7 @@ export default {
// show: true, // show: true,
// lineStyle: { // lineStyle: {
// color: colors[1] // color: colors[1]
// } // }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// }, // },
} }
], ],
@ -265,3 +283,8 @@ export default {
} }
} }
</script> </script>
<style>
.productChart{
top: -40px;
}
</style>

View File

@ -83,20 +83,38 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initChart(nameList,dataList) { initChart(nameList, dataList) {
console.log('1111', dataList);
// console.log(1) // console.log(1)
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
if (dataList.length !== 0) { // if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList); // this.$set(this.series, "data", dataList);
this.series = [{ this.series = [{
type: 'bar', type: 'bar',
data: dataList, 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.nameList = nameList
} // }
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -112,6 +130,16 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
// legend: {
// itemWidth: 10,
// itemHeight: 10,
// // right: '20px',
// data: nameList,
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisLine: { axisLine: {
@ -142,6 +170,7 @@ export default {
} }
}, },
axisLabel: { axisLabel: {
show: true, // y
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.5)' // color: 'rgba(255,255,255,0.5)' //
} }
@ -172,3 +201,4 @@ export default {
} }
} }
</script> </script>

View File

@ -1,13 +1,13 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-27 13:54:52 * @Date: 2023-12-27 13:54:52
* @LastEditTime: 2023-12-29 16:28:26 * @LastEditTime: 2024-01-25 14:08:27
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<div> <div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" /> <div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
</div> </div>
</template> </template>
@ -103,6 +103,7 @@ export default {
// itemStyle: { // itemStyle: {
color: '#0fdedb', color: '#0fdedb',
// }, // },
// barCategoryGap: '10%',
barWidth: 10, barWidth: 10,
data: passRateList data: passRateList
}, },
@ -110,8 +111,9 @@ export default {
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
name: '废品', name: '废品',
// barCategoryGap: '10%',
data: wasteList, data: wasteList,
barWidth: 10, // barWidth: 10,
// barWidth: 15, // barWidth: 15,
// label: { // label: {
// position: [10, 10], // position: [10, 10],
@ -133,16 +135,19 @@ export default {
// } // }
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
// top: '2.5%',
// right: '20px',
textStyle: { textStyle: {
color: '#ffffff' color: '#ffffff'
} }
}, },
grid: { grid: {
top:'80',
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', // bottom: '3%',
width: 'auto', width: 'auto',
height: 'auto', height: '300',
containLabel: true containLabel: true
}, },
yAxis: [ yAxis: [
@ -213,3 +218,7 @@ export default {
} }
} }
</script> </script>
<style scoped lang="scss">
</style>

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-01-04 15:52:52 * @LastEditTime: 2024-01-25 17:55:51
* @Description: * @Description:
--> -->
<template> <template>
@ -14,7 +14,7 @@
}"> }">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt=""> <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> <h3 class="time">{{ times }}</h3>
<!-- <el-button <!-- <el-button
type="text" type="text"
@ -29,21 +29,28 @@
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;"> <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%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :height="318" :title-icon="'eqAlarm'"> <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" /> :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> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'"> <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> :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> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :title="'工单监控'" :title-icon="'eqMonitoring'"> <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -56,37 +63,15 @@
</el-row> --> </el-row> -->
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em"> <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> --> <!-- <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"> <!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" /> <i class="el-icon-check" />
{{ op.name }} {{ op.name }}
</p> --> </p> -->
<p class="now-secondary-title">{{ op.name }}</p>
<!-- </el-col> --> <!-- </el-col> -->
</el-row> </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>
<!-- </div> --> <!-- </div> -->
</base-container> </base-container>
@ -95,7 +80,8 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'"> <base-container :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'"
:title-icon="'energyMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
@ -117,13 +103,13 @@
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'"> <base-container :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'"
:title-icon="'productLine'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group /> <top-radio-group />
</div> --> </div> -->
<!-- 像下面这样表格里的limit值也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值也许可以用js动态计算出来 -->
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList" <double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="359" :show-legend="true" />
:data-list="cxDataList" :height="359" :show-legend="true" />
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
@ -145,6 +131,7 @@
<script> <script>
import baseContainer from './components/baseContainer' import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable' import baseTable1 from './components/baseTable'
// import baseTable2 from './components/baseTable' // import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable' // import baseTable3 from './components/baseTable'
@ -418,21 +405,26 @@ const qualityYearTableProps = [
] ]
const qualityYearList = [ 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' }, name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' },
{ eqName: '二次清洗机', eqCode: '21321321', level: 2, content: 'Temperature high' }, {
{ eqName: '二次磨边机', eqCode: '21321321', level: 2, content: 'Temperature high' }, name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' },
{ eqName: '测试设备', eqCode: '21321321', level: 2, content: 'Temperature high' } { 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 = [ const qualityMonthTableProps = [
@ -453,7 +445,50 @@ const qualityMonthTableProps = [
label: '缺陷类型' 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 = [ const orderProcessList = [
{ {
id: '1', outRate: '.8', name: '凯盛0322' id: '1', outRate: '.8', name: '凯盛0322'
@ -500,6 +535,28 @@ export default {
// offsetWidth: null, // offsetWidth: null,
qualityYearTableProps, qualityYearTableProps,
cxNameList, 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, cxDataList,
productLineList:[], productLineList:[],
qualityYearList, qualityYearList,
@ -509,7 +566,7 @@ export default {
// orderProcessList: [], // orderProcessList: [],
orderProcessList, orderProcessList,
qualityTableProps1, qualityTableProps1,
qualityMonthList:[], qualityMonthList,
qualityMonthTableProps, qualityMonthTableProps,
modelMonth: '', modelMonth: '',
qualityList1, qualityList1,
@ -559,6 +616,8 @@ export default {
this.initWebSocket() this.initWebSocket()
this.SJGInitWebSocket() this.SJGInitWebSocket()
this.getTimes() 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; const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920 _this.beilv2 = document.documentElement.clientWidth / 1920
window.onresize = () => { window.onresize = () => {
@ -606,7 +665,37 @@ export default {
'get', 'get',
).then((res) => { ).then((res) => {
// console.log('11111', res); // console.log('11111', res);
this.qualityMonthList = res.data ? res.data : [] 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)
} else {
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)
}
}) })
}, },
getTimes() { getTimes() {
@ -702,17 +791,31 @@ export default {
}); });
console.log(this.orderList) console.log(this.orderList)
} else if (this.SJGWsData.type === 'equipment') { } else if (this.SJGWsData.type === 'equipment') {
this.equipmentList = this.SJGWsData.detData.map((ele, index) => { // this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) { // // if (ele.progressRate != 1) {
return { // return {
id: ele.id, // id: ele.id,
name: ele.name, // name: ele.name,
code: ele.code, // code: ele.code,
status: ele.status, // status: ele.status,
error: ele.error=== true ? '是' : '否' // 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) // console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') { } else if (this.SJGWsData.type === 'productline') {
// console.log(this.wsData.detData); // console.log(this.wsData.detData);
@ -724,24 +827,40 @@ export default {
this.productLineList.forEach((item) => { this.productLineList.forEach((item) => {
this.SJGWsData.detData.forEach((ele) => { this.SJGWsData.detData.forEach((ele) => {
if (item.id == ele.productionLineId) { if (item.id == ele.productionLineId) {
nameList.push(item.name) if (item.name.substr(0, 1) == "D") {
nameList.push(item.name)
outputNumList.push(ele.outputNum)
passRateList.push(ele.passRate * 100)
}
} }
}) })
}) })
// progressRateList = EnergyNameList // progressRateList = EnergyNameList
// let EnergyDataList = [] // let EnergyDataList = []
this.SJGWsData.detData.forEach((ele) => { // this.SJGWsData.detData.forEach((ele) => {
passRateList.push(ele.passRate *100 // })
) // this.SJGWsData.detData.forEach((ele) => {
}) // })
this.SJGWsData.detData.forEach((ele) => {
outputNumList.push(ele.outputNum
)
})
// console.log(this.EnergyMonitoringNameList) // console.log(this.EnergyMonitoringNameList)
// console.log(this.EnergyMonitoringList) // console.log(this.EnergyMonitoringList)
// this.$nextTick(() => { // this.$nextTick(() => {
this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList) this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
} else {
console.log(this.qualityYearList);
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)
} }
}, },
// //
@ -926,10 +1045,6 @@ export default {
background-color: unset; background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc); 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 { .visual-select {
position: absolute; position: absolute;
right: 1em; right: 1em;
@ -999,7 +1114,6 @@ export default {
margin-left: 3em; margin-left: 3em;
} }
} }
</style> </style>
<style scoped> <style scoped>
@ -1011,9 +1125,12 @@ export default {
flex: 1 1; flex: 1 1;
} }
.h-full { .h-full {
height: calc(100vh - 150px); height: calc(100vh);
} }
/* .container-main { /* .container-main {
min-height: calc(100vh - 10em); min-height: calc(100vh - 10em);
} */ } */
.eqTable{
overflow: hidden;
}
</style> </style>

View File

@ -0,0 +1,266 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-09-11 15:55:13
description: DialogForm for equipmentBindSection only
-->
<template>
<el-form
ref="form"
:model="dataForm"
label-width="128px"
v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="产线"
prop="productionLineId"
:rules="[
{ required: true, message: '产线不能为空', trigger: 'blur' },
]">
<el-select
v-model="dataForm.productionLineId"
placeholder="请选择产线"
filterable
clearable
@change="handleProductlineChange">
<el-option
v-for="opt in productionLineList"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="工段"
prop="workshopSectionId"
:rules="[
{ required: true, message: '工段不能为空', trigger: 'blur' },
]">
<el-select
v-model="dataForm.workshopSectionId"
filterable
clearable
placeholder="请选择工段"
@change="$emit('update', dataForm)">
<el-option
v-for="opt in worksectionList"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="设备"
prop="equipmentId"
clearable
filterable
:rules="[
{ required: true, message: '设备不能为空', trigger: 'blur' },
]">
<el-select
v-model="dataForm.equipmentId"
filterable
placeholder="请选择设备"
@change="$emit('update', dataForm)">
<el-option
v-for="opt in equipmentList"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="工段排序"
prop="sort"
:rules="[
{
type: 'number',
trigger: 'change',
message: '请输入正确的数字类型',
transform: (val) => Number(val),
},
]">
<el-input
v-model="dataForm.sort"
clearable
@change="$emit('update', dataForm)"
placeholder="请输入工段排序" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="产线统计类型"
prop="lineDataType"
:rules="[
{
required: true,
message: '产线统计类型不能为空',
trigger: 'change',
},
]">
<el-select
v-model="dataForm.lineDataType"
placeholder="请选择产线统计类型"
clearable
filterable
@change="$emit('update', dataForm)">
<el-option
v-for="opt in [
{ label: '无类型', value: 0 },
{ label: '进口统计', value: 1 },
{ label: '出口统计', value: 2 },
]"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="工段统计类型"
prop="sectionDataType"
:rules="[
{
required: true,
message: '工段统计类型不能为空',
trigger: 'change',
},
]">
<el-select
v-model="dataForm.sectionDataType"
placeholder="请选择工段统计类型"
clearable
filterable
@change="$emit('update', dataForm)">
<el-option
v-for="opt in [
{ label: '无类型', value: 0 },
{ label: '进口统计', value: 1 },
{ label: '出口统计', value: 2 },
]"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
name: 'DialogForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: {},
props: {
dataForm: {
type: Object,
default: () => ({}),
},
},
data() {
return {
formLoading: true,
productionLineList: [],
equipmentList: [],
worksectionList: [],
dataFormCache: null,
};
},
mounted() {
Promise.all([this.getProductLineList(), this.getEquipmentList()]).then(
() => {
this.formLoading = false;
}
);
},
watch: {
'dataForm.productionLineId': {
handler: async function (plId) {
if (plId) await this.getWorksectionList(plId);
},
immediate: true,
},
},
methods: {
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);
},
resetFields(args) {
return this.$refs.form.resetFields(args);
},
async handleProductlineChange(id) {
await this.getWorksectionList(id);
this.dataForm.workshopSectionId = null;
this.$emit('update', this.dataForm);
},
// getCode
async getCode(url) {
const response = await this.$axios(url);
return response.data;
},
// 线
async getProductLineList() {
const response = await this.$axios('/base/core-production-line/listAll');
this.productionLineList = response.data.map((item) => ({
label: item.name,
value: item.id,
}));
},
//
async getEquipmentList() {
const response = await this.$axios(
// '/base/core-equipment/page?pageNo=1&pageSize=100'
'/base/core-equipment/listAll'
);
this.equipmentList = response.data.map((item) => ({
label: item.name,
value: item.id,
}));
},
//
async getWorksectionList(plId) {
const response = await this.$axios(
'/base/core-workshop-section/listByParentId',
{
params: {
id: plId,
},
}
);
this.worksectionList = response.data.map((item) => ({
label: item.name,
value: item.id,
}));
},
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

View File

@ -50,12 +50,13 @@
<script> <script>
import moment from 'moment'; import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin'; import basicPageMixin from '@/mixins/lb/basicPageMixin';
import DialogForm from './dialogForm.vue';
// import { getAccessToken } from '@/utils/auth'; // import { getAccessToken } from '@/utils/auth';
export default { export default {
name: 'EquipmentLineBind', name: 'EquipmentLineBind',
components: {}, components: { DialogForm },
mixins: [basicPageMixin], mixins: [basicPageMixin],
data() { data() {
return { return {
@ -149,7 +150,9 @@ export default {
select: true, select: true,
label: '产线', label: '产线',
prop: 'productionLineId', prop: 'productionLineId',
rules: [{ required: true, message: '产线名不能为空', trigger: 'blur' }], rules: [
{ required: true, message: '产线名不能为空', trigger: 'blur' },
],
url: '/base/core-production-line/listAll', url: '/base/core-production-line/listAll',
bind: { clearable: true, filterable: true }, bind: { clearable: true, filterable: true },
// watch: 'workshopSectionId' // watch: 'workshopSectionId'
@ -159,7 +162,9 @@ export default {
label: '工段', label: '工段',
prop: 'workshopSectionId', prop: 'workshopSectionId',
depends: 'productionLineId', depends: 'productionLineId',
rules: [{ required: true, message: '工段不能为空', trigger: 'blur' }], rules: [
{ required: true, message: '工段不能为空', trigger: 'blur' },
],
bind: { clearable: true, filterable: true }, bind: { clearable: true, filterable: true },
url: '/base/core-workshop-section/listByParentId', url: '/base/core-workshop-section/listByParentId',
}, },
@ -169,7 +174,9 @@ export default {
select: true, select: true,
label: '设备', label: '设备',
prop: 'equipmentId', prop: 'equipmentId',
rules: [{ required: true, message: '设备名不能为空', trigger: 'blur' }], rules: [
{ required: true, message: '设备名不能为空', trigger: 'blur' },
],
bind: { clearable: true, filterable: true }, bind: { clearable: true, filterable: true },
url: '/base/core-equipment/listAll', url: '/base/core-equipment/listAll',
}, },
@ -190,9 +197,16 @@ export default {
label: '产线统计类型', label: '产线统计类型',
prop: 'lineDataType', prop: 'lineDataType',
bind: { bind: {
clearable: true, filterable: true clearable: true,
filterable: true,
}, },
rules: [{ required: true, message: '产线统计类型不能为空', trigger: 'change' }], rules: [
{
required: true,
message: '产线统计类型不能为空',
trigger: 'change',
},
],
}, },
{ {
select: true, select: true,
@ -204,9 +218,16 @@ export default {
label: '工段统计类型', label: '工段统计类型',
prop: 'sectionDataType', prop: 'sectionDataType',
bind: { bind: {
clearable: true, filterable: true clearable: true,
filterable: true,
}, },
rules: [{ required: true, message: '工段统计类型不能为空', trigger: 'change' }], rules: [
{
required: true,
message: '工段统计类型不能为空',
trigger: 'change',
},
],
}, },
], ],
], ],
@ -335,15 +356,21 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除绑定"' + row.name + '"?') .confirm(
.then(function () { '是否确认删除绑定"' +
return deleteEquipmentType(id); (row.equipmentName == null ? '这条记录' : row.equipmentName) +
'"?'
)
.then(() => {
return this.del({ id });
}) })
.then(() => { .then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess('删除成功'); this.$modal.msgSuccess('删除成功');
}) })
.catch(() => {}); .catch((err) => {
console.error(err);
});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {

View File

@ -16,7 +16,9 @@
<el-form-item <el-form-item
label="产线" label="产线"
prop="productionLineId" prop="productionLineId"
:rules="[{ required: true, message: '产线不能为空', trigger: 'blur' }]"> :rules="[
{ required: true, message: '产线不能为空', trigger: 'blur' },
]">
<el-select <el-select
v-model="dataForm.productionLineId" v-model="dataForm.productionLineId"
placeholder="请选择产线" placeholder="请选择产线"
@ -35,7 +37,9 @@
<el-form-item <el-form-item
label="工段" label="工段"
prop="workshopSectionId" prop="workshopSectionId"
:rules="[{ required: true, message: '工段不能为空', trigger: 'blur' }]"> :rules="[
{ required: true, message: '工段不能为空', trigger: 'blur' },
]">
<el-select <el-select
v-model="dataForm.workshopSectionId" v-model="dataForm.workshopSectionId"
filterable filterable
@ -55,7 +59,9 @@
<el-form-item <el-form-item
label="设备" label="设备"
prop="equipmentId" prop="equipmentId"
:rules="[{ required: true, message: '设备不能为空', trigger: 'blur' }]"> :rules="[
{ required: true, message: '设备不能为空', trigger: 'blur' },
]">
<el-select <el-select
v-model="dataForm.equipmentId" v-model="dataForm.equipmentId"
filterable filterable

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-10-17 16:50:19 * @Date: 2023-10-17 16:50:19
* @LastEditTime: 2023-12-04 13:43:19 * @LastEditTime: 2024-01-22 09:55:32
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -282,7 +282,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields(); this.$refs['dataForm'].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
// //
getPackingModel(id).then((response) => { getPackingModel(id).then((response) => {

View File

@ -1,8 +1,8 @@
/* /*
* @Author: zwq * @Author: zwq
* @Date: 2022-08-24 11:19:43 * @Date: 2022-08-24 11:19:43
* @LastEditors: DY * @LastEditors: zhp
* @LastEditTime: 2023-09-21 16:02:07 * @LastEditTime: 2024-01-10 10:29:29
* @Description: * @Description:
*/ */
export default { export default {
@ -92,7 +92,7 @@ export default {
this.$refs.addOrUpdate.init(val.data.id); this.$refs.addOrUpdate.init(val.data.id);
}); });
} else if (val.type === "delete") { } 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") { } else if (val.type === "change") {
this.changeStatus(val.data.id) this.changeStatus(val.data.id)
} else { } else {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 132 KiB

View File

@ -11,7 +11,7 @@
<i <i
class="" class=""
style="display: inline-block; margin-left: 12px; padding-top: 4px"> 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> </i>
<span <span
style=" style="
@ -107,6 +107,19 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
background-position: 0 0; 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 { .container-body {

View File

@ -1,22 +1,31 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'DefectChart', name: 'DefectChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
props: { props: {
chartTime: '' chartTime: ''
}, },
data() { data() {
return { return {
chart: null, chart: null,
tempData: [] tempData: [],
notMsg:false
} }
}, },
computed: { computed: {
israCheckType() {
return this.$store.state.websocket.israCheckType
},
israDayStatistic() { israDayStatistic() {
return this.$store.state.websocket.israDayStatistic return this.$store.state.websocket.israDayStatistic
}, },
@ -34,34 +43,58 @@ export default {
israDayStatistic: { israDayStatistic: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '日') { if (this.chartTime === '日') {
this.tempData = israDayStatistic this.tempData = this.israDayStatistic
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
israWeekStatistic: { israWeekStatistic: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '周') { if (this.chartTime === '周') {
this.tempData = israWeekStatistic this.tempData = this.israWeekStatistic
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
israMonthStatistic: { israMonthStatistic: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '月') { if (this.chartTime === '月') {
this.tempData = israMonthStatistic this.tempData = this.israMonthStatistic
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
israYearStatistic: { israYearStatistic: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '年') { if (this.chartTime === '年') {
this.tempData = israYearStatistic this.tempData = this.israYearStatistic
this.updateChart() 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() { mounted() {
@ -72,6 +105,12 @@ export default {
}, },
methods: { methods: {
updateChart() { updateChart() {
if (!this.tempData || this.tempData.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
@ -79,60 +118,51 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('defectChart'));
let legendData = []
let xData = [] let xData = []
let yData = [] let seriesData = []
for (let i = 0;i < this.israCheckType.length; i++) {
let obj = {}
obj.type = 'bar'
obj.stack = 'all'
obj.emphasis = {
focus:"series"
}
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)
}
this.tempData && this.tempData.length > 0 && this.tempData.map(item => { this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
xData.push(item.name) xData.push(item.name)
}) })
var series = [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
stack: 'all',
name: 'a',
barWidth: 12,
},
{
data: [10, 46, 64, '-', 0, '-', 0],
type: 'bar',
stack: 'all',
name: 'b',
barWidth: 12,
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'c'
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'd'
},
{
data: [10, 20, 150, 0, '-', 50, 10],
type: 'bar',
stack: 'all',
name: 'e',
barWidth: 12,
label: {
show: true,
position: 'top'
}
}
];
var option = { var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'], color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
grid: { top: 40, right: 12, bottom: 20, left: 48 }, grid: { top: 90, right: 12, bottom: 20, left: 70 },
legend: { legend: {
top: 10, top: 0,
left: 80, left: 8,
padding: 5, padding: 5,
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
@ -142,7 +172,7 @@ export default {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
}, },
data:['a','b','c','d','e'], data:this.israCheckType,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -191,19 +221,13 @@ export default {
}, },
className: "defect-chart-tooltip" className: "defect-chart-tooltip"
}, },
series: series series: seriesData
}; };
option && this.chart.setOption(option) option && this.chart.setOption(option)
} }
} }
} }
</script> </script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style> <style>
.defect-chart-tooltip { .defect-chart-tooltip {
background: #0a2b4f77 !important; background: #0a2b4f77 !important;

View File

@ -1,18 +1,24 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'DefectClassChart', name: 'DefectClassChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
props: { props: {
chartType: '' chartType: ''
}, },
data() { data() {
return { return {
chart: null chart: null,
notMsg:false
} }
}, },
computed: { computed: {
@ -27,6 +33,7 @@ export default {
return false return false
} }
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
}, },
chartType: {// chartType: {//
@ -43,6 +50,12 @@ export default {
}, },
methods: { methods: {
updateChart() { updateChart() {
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
@ -50,7 +63,7 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('defectClassChart'));
let tempData = [] let tempData = []
let xData = [] let xData = []
let yData = [] let yData = []
@ -66,28 +79,14 @@ export default {
}) })
var option = { var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'], color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 80, left: 60 }, grid: { top: 40, right: 12, bottom: 65, left: 70 },
// 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'],
// },
xAxis: { xAxis: {
type: "category", type: "category",
data: xData, data: xData,
axisLabel: { axisLabel: {
color: "#fffc", color: "#fffc",
fontSize: 12, fontSize: 12,
rotate: 45 rotate: 25
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
@ -98,7 +97,7 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: "单位/", name: "单位/",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 10, fontSize: 10,
@ -136,7 +135,9 @@ export default {
barWidth: 12, barWidth: 12,
label: { label: {
show: true, show: true,
position: 'top' position: 'top',
distance: 10,
color: "#fffc"
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

View 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>

View File

@ -1,15 +1,21 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'EnergeMonitoringChart', name: 'EnergeMonitoringChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
data() { data() {
return { return {
chart: null chart: null,
notMsg:true
} }
}, },
computed: { computed: {
@ -24,6 +30,7 @@ export default {
return false return false
} }
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -42,16 +49,22 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
let xData = [] let xData = []
let yData = [] let yData = []
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => { this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
xData.push(item.lineName) xData.push(item.lineName)
yData.push(item.useQuantity) 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'], // 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -63,7 +76,11 @@ export default {
className: "energe-monitoring-chart-tooltip" className: "energe-monitoring-chart-tooltip"
}, },
legend: { legend: {
data: ['电耗能'], itemWidth:10,
itemHeight:10,
top: '2.5%',
right: '0',
data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
@ -91,11 +108,13 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value', type: 'value',
name: '单位',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -121,7 +140,7 @@ export default {
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value + ' ml'; return value;
} }
}, },
itemStyle: { itemStyle: {
@ -143,6 +162,7 @@ export default {
.energe-monitoring-chart { .energe-monitoring-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -50px;
} }
</style> </style>
<style> <style>

View File

@ -1,15 +1,19 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts'
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'GasChart', name: 'FlueGasChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: { props: {
chartType: '', chartType: '',
chartTime: '' chartTime: ''
@ -26,7 +30,8 @@ export default {
'#2aa1ff', '#2aa1ff',
]; ];
return { return {
chart: null chart: null,
notMsg:false
}; };
}, },
computed: { computed: {
@ -48,6 +53,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '日') { if (this.chartTime === '日') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -55,6 +61,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '周') { if (this.chartTime === '周') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -62,6 +69,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '月') { if (this.chartTime === '月') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -69,6 +77,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '年') { if (this.chartTime === '年') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -119,27 +128,33 @@ export default {
} }
switch (this.chartType) { switch (this.chartType) {
case '氧气含量':{ case '氧气含量':{
temp2 = temp1.O2_float || [] temp2 = temp1?.O2_float || []
break; break;
} }
case '二氧化硫':{ case '二氧化硫':{
temp2 = temp1.SO2_float || [] temp2 = temp1?.SO2_float || []
break; break;
} }
case '一氧化氮':{ case '氮氧化物':{
temp2 = temp1.NOX_float || [] temp2 = temp1?.NOX_float || []
break; break;
} }
case '颗粒物':{ case '颗粒物':{
temp2 = temp1.dust_float || [] temp2 = temp1?.dust_float || []
break; break;
} }
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) xData.push(i.time)
yData.push(i.value) yData.push((i.value)?(Number(i.value)).toFixed(2):null)
}) })
if (yData.length == 0) { if (yData.length == 0) {
seriesData = [] seriesData = []
}else { }else {
@ -157,7 +172,8 @@ export default {
lineStyle: { lineStyle: {
width: 1 width: 1
}, },
symbolSize: 1, symbol: 'circle',
symbolSize: 5,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
} }
@ -172,10 +188,10 @@ export default {
) { ) {
this.chart.dispose() // Dom this.chart.dispose() // Dom
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('flueGasChart'));
var option = { var option = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 60 },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData, data: xData,
@ -192,7 +208,7 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -218,6 +234,7 @@ export default {
series: seriesData, series: seriesData,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
className: "gas-chart-tooltip"
}, },
} }
option && this.chart.setOption(option) option && this.chart.setOption(option)
@ -227,8 +244,18 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.gas-chart { .flue-gas-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<style>
.gas-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.gas-chart-tooltip * {
color: #fff !important;
}
</style>

View File

@ -1,22 +1,19 @@
<!--
filename: GasChart.vue
author: liubin
date: 2023-12-12 10:53:49
description:
-->
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'GasChart', name: 'GasChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: { props: {
chartType: '', // chartType: '', //
chartTime: '' chartTime: ''
@ -33,7 +30,8 @@ export default {
'#2aa1ff', '#2aa1ff',
]; ];
return { return {
chart: null chart: null,
notMsg:false
}; };
}, },
computed: { computed: {
@ -55,6 +53,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '周' && this.chartType === '电耗能') { if (this.chartTime === '周' && this.chartType === '电耗能') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -62,6 +61,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '月' && this.chartType === '电耗能') { if (this.chartTime === '月' && this.chartType === '电耗能') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -69,6 +69,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartTime === '年' && this.chartType === '电耗能') { if (this.chartTime === '年' && this.chartType === '电耗能') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -76,6 +77,7 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (this.chartType === '天然气I' || this.chartType === '天然气II') { if (this.chartType === '天然气I' || this.chartType === '天然气II') {
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -143,6 +145,12 @@ export default {
} }
xData = this.getXdata() xData = this.getXdata()
} }
if (yData.length === 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (yData.length == 0) { if (yData.length == 0) {
seriesData = [] seriesData = []
}else { }else {
@ -160,7 +168,8 @@ export default {
lineStyle: { lineStyle: {
width: 1 width: 1
}, },
symbolSize: 1, symbol: 'circle',
symbolSize: 5,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
} }
@ -175,7 +184,7 @@ export default {
) { ) {
this.chart.dispose() // Dom this.chart.dispose() // Dom
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('gasChart'));
var option = { var option = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 60 }, grid: { top: 32, right: 12, bottom: 20, left: 60 },
@ -195,7 +204,7 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '单位/h', name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -221,6 +230,7 @@ export default {
series: seriesData, series: seriesData,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
className: "gas-tooltip"
}, },
} }
option && this.chart.setOption(option) option && this.chart.setOption(option)
@ -236,7 +246,7 @@ export default {
.map((_, index) => { .map((_, index) => {
const today = new Date(); const today = new Date();
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( return `${currentMonth < 10?'0'+currentMonth:currentMonth }.${new Date(
dtimestamp dtimestamp
).getDate()}`;}).reverse() ).getDate()}`;}).reverse()
}else if (this.chartTime == "月") { }else if (this.chartTime == "月") {
@ -253,7 +263,7 @@ export default {
return Array(12) return Array(12)
.fill(1) .fill(1)
.map((_, index) => { .map((_, index) => {
return `${currentYear}.${12 - index}`;}).reverse() return `${12 - index}`;}).reverse()
} }
}, },
isLeapYear(year) { isLeapYear(year) {
@ -269,3 +279,13 @@ export default {
height: 100%; height: 100%;
} }
</style> </style>
<style>
.gas-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.gas-tooltip * {
color: #fff !important;
}
</style>

View File

@ -80,7 +80,7 @@ export default {
.datetime { .datetime {
position: absolute; position: absolute;
top: 45px; top: 45px;
right: 240px; right: 425px;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
letter-spacing: 1px; letter-spacing: 1px;

View File

@ -1,56 +1,28 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'ISRAChart', name: 'ISRAChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: {}, props: {},
data() { data() {
return { return {
chart: null, chart: null,
notMsg:true,
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
chartData: [], 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: []
},
}; };
}, },
mounted() {
this.initChart();
},
activated() { activated() {
}, },
computed: { computed: {
@ -61,32 +33,43 @@ export default {
watch: { watch: {
israChartMsg: { israChartMsg: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.chartData = newVal this.chartData = newVal || []
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
methods: { methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
updateChart() { updateChart() {
console.log('update') console.log('update')
let num = 0 let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => { this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num+=i.num 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:{ title:{
text: num, text: num,
subtext: '总数', subtext: '总数',
top: '43%', top: '32%',
left: '49%', left: '49%',
textAlign: 'center', textAlign: 'center',
textStyle: { textStyle: {
fontSize: 32, fontSize: 32,
lineHeight: 16,
color: '#fff', color: '#fff',
}, },
subtextStyle: { subtextStyle: {
@ -94,6 +77,22 @@ export default {
color: '#fff00', 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:[{ series:[{
name: 'ISRA缺陷检测', name: 'ISRA缺陷检测',
type: 'pie', type: 'pie',
@ -106,9 +105,6 @@ export default {
labelLine: { labelLine: {
show: true, show: true,
}, },
itemStyle: {
borderRadius: 12
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name:item.name, name:item.name,
value: item.num, 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%; height: 100%;
} }
</style> </style>
<style>
.isra-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.isra-chart-tooltip * {
color: #fff !important;
}
</style>

View 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>

View File

@ -1,15 +1,21 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'NumRateChart', name: 'NumRateChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
data() { data() {
return { return {
chart: null chart: null,
notMsg:true
} }
}, },
computed: { computed: {
@ -24,6 +30,7 @@ export default {
return false return false
} }
this.updateChart() this.updateChart()
this.$emit('emitFun')
} }
} }
}, },
@ -31,10 +38,26 @@ export default {
this.$el.addEventListener('resize', () => { this.$el.addEventListener('resize', () => {
console.log('resziing.....'); console.log('resziing.....');
}); });
this.updateChart() this.updateChart()
}, },
methods: { methods: {
updateChart() { 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 ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
@ -42,17 +65,9 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('numRateChart'));
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)
})
var option = { var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 }, grid: { top: 82, right: 60, bottom: 20, left: 90 },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -61,7 +76,15 @@ export default {
className: "num-rate-chart-tooltip" className: "num-rate-chart-tooltip"
}, },
legend: { legend: {
data: ['产线产量', '合格率'], itemWidth:10,
itemHeight:10,
top: '2.5%',
right: '20px',
icon: 'rect',
data: [
{name:'产线产量',itemStyle:{color:'#364BFE'}},
{name:'良品率',itemStyle:{color:'#FFCB59'}}
],
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
@ -91,6 +114,11 @@ export default {
{ {
type: 'value', type: 'value',
name: '产量/片', name: '产量/片',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -111,10 +139,17 @@ export default {
{ {
type: 'value', type: 'value',
name: '良品率', name: '良品率',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'LEFT',
},
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
formatter: '{value} %' formatter: () =>{
return value ? '{value} %': '-'
}
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -138,7 +173,7 @@ export default {
return value; return value;
} }
}, },
barWidth: 12, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' }, { offset: 0, color: '#5CB7FF' },
@ -148,12 +183,12 @@ export default {
data: outputNum data: outputNum
}, },
{ {
name: '合格率', name: '良品率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value + '%'; return value?value + '%':'-';
} }
}, },
itemStyle: { itemStyle: {
@ -169,6 +204,8 @@ export default {
lineStyle: { lineStyle: {
width: 1 width: 1
}, },
symbol: 'circle',
symbolSize: 5,
data: passRate data: passRate
} }
] ]
@ -182,6 +219,7 @@ export default {
.num-rate-chart { .num-rate-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -50px;
} }
</style> </style>
<style> <style>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="scroll-board-container"> <div class="scroll-board-container">
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" /> <dv-scroll-board :config="config" :style="{'width':width,'height':height}" :ref='id'/>
</div> </div>
</template> </template>
<script> <script>
@ -18,6 +18,10 @@ export default {
height:{ height:{
type: String, type: String,
default: '380px' default: '380px'
},
id:{
type: String,
default: ''
} }
}, },
data() { data() {
@ -25,14 +29,4 @@ export default {
} }
} }
} }
</script> </script>
<style lang='scss'>
.scroll-board-container {
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
border-right: none;
}
}
</style>

View File

@ -7,7 +7,7 @@
<template> <template>
<div class="switcher" style="display: flex; align-items: center; gap: 12px"> <div class="switcher" style="display: flex; align-items: center; gap: 12px">
<el-switch v-model="value"></el-switch> <el-switch v-model="value" @change="handleClick"></el-switch>
<span style="color: #fff; font-size: 16px">{{ mode }}</span> <span style="color: #fff; font-size: 16px">{{ mode }}</span>
; ;
</div> </div>
@ -17,18 +17,31 @@
export default { export default {
name: 'Switcher', name: 'Switcher',
components: {}, components: {},
props: {}, props: {
showTitle:{
type: Array,
required: true,
default: () => {
return []
}
}
},
data() { data() {
return { return {
value: true, value: false,
}; };
}, },
computed: { computed: {
mode() { mode() {
return this.value ? '历史详情' : '实时数据'; return this.value ? this.showTitle[0]: this.showTitle[1];
}, },
}, },
methods: {}, methods: {
handleClick(v) {
this.value = v;
this.$emit('emitFun', v);
}
},
}; };
</script> </script>
@ -36,16 +49,18 @@ export default {
.switcher { .switcher {
:deep(.el-switch__core) { :deep(.el-switch__core) {
border: none; border: none;
background-color:rgba(3, 35, 60, 1); background-color:#02457e;
height: 18px;
&::after { &::after {
background-color: #02457e; background-color: #03233c;
} }
} }
:deep(.is-checked) { :deep(.is-checked) {
.el-switch__core { .el-switch__core {
border: none; border: none;
height: 18px;
background-color: rgba(180, 255, 252, 0.71); background-color: rgba(180, 255, 252, 0.71);
&::after { &::after {

View 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>

View File

@ -0,0 +1,318 @@
<template>
<div class="yield-rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'GasChart',
mixins: [resize],
components: {},
props: {
chartType: '', //
chartTime: ''
},
data() {
return {
chart: null
};
},
computed: {
cutChartDay() {
return this.$store.state.websocket.cutChartDay
},
cutChartWeek() {
return this.$store.state.websocket.cutChartWeek
},
cutChartMonth() {
return this.$store.state.websocket.cutChartMonth
},
cutChartYear() {
return this.$store.state.websocket.cutChartYear
}
},
watch: {
cutChartDay: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.updateChart()
this.$emit('emitFun')
}
}
},
cutChartWeek: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.updateChart()
this.$emit('emitFun')
}
}
},
cutChartMonth: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.updateChart()
this.$emit('emitFun')
}
}
},
cutChartYear: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.updateChart()
this.$emit('emitFun')
}
}
},
chartTime: {
handler(newVal, oldVal) {
this.updateChart()
}
},
chartType: {
handler(newVal, oldVal) {
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
let chartData = []
let xData = []
let dayArr = []
let nightArr = []
let sumArr = []
let seriesData = []
switch(this.chartTime) {
case '日':
chartData = this.cutChartDay
break;
case '周':
chartData = this.cutChartWeek
break;
case '月':
chartData = this.cutChartMonth
break;
case '年':
chartData = this.cutChartYear
break;
default:
}
chartData && chartData.length > 0 && chartData.map(item => {
if (this.chartTime === '日') {
xData.push((item.dataTime).slice(11))
}else{
xData.push((item.dataTime).slice(0,10))
}
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: '总量',
data: sumArr,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB5940' },
{ offset: 0.5, color: '#FFCB5920' },
{ offset: 1, color: '#FFCB5900' },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
},
{
color: '#08d8cd',
name: '白班',
data: dayArr,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#12FFF540" },
{ offset: 0.5, color: "#12FFF520" },
{ offset: 1, color: "#12FFF510" },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
},
{
color: '#0b58ff',
name: '夜班',
data: nightArr,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2760FF40" },
{ offset: 0.5, color: "#2760FF20" },
{ offset: 1, color: "#2760FF10" },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
}]
}else{
seriesData = [{
color: '#ff9e00',
name: '总量',
data: sumArr,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB5940' },
{ offset: 0.5, color: '#FFCB5920' },
{ offset: 1, color: '#FFCB5900' },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
}]
}
//
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // Dom
}
this.chart = echarts.init(this.$el);
var option = {
grid: { top: 15, right: 12, bottom: 45, left: 60 },
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: "#fff",
fontSize: 10,
rotate: 25,
margin: 13,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value} %",
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
interval: 10,
min: 0,
max: 100,
},
series: seriesData,
tooltip: {
trigger: 'axis',
className: "yield-rate-tooltip"
},
}
option && this.chart.setOption(option)
},
getXdata() {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1;
let days = 30;
if (this.chartTime === '周') {
return Array(7)
.fill(1)
.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()
}else if (this.chartTime == "月") {
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
days = 31;
} else if (currentMonth == 2) {
days = this.isLeapYear(currentYear) ? 29 : 28;
}
return Array(days)
.fill(1)
.map((_, index) => {
return `${currentMonth}.${days - index}`;}).reverse()
} else {
return Array(12)
.fill(1)
.map((_, index) => {
return `${currentYear}.${12 - index}`;}).reverse()
}
},
isLeapYear(year) {
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
}
},
};
</script>
<style scoped lang="scss">
.yield-rate-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.yield-rate-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.yield-rate-tooltip * {
color: #fff !important;
}
</style>

View File

@ -8,7 +8,7 @@
display: grid; display: grid;
grid-template-rows: 462px; grid-template-rows: 462px;
"> ">
<EnergyMonitoring /> <WorkOrderMonitoring />
</div> </div>
</div> </div>
<div class="right-side" style="flex: 1"> <div class="right-side" style="flex: 1">
@ -25,10 +25,10 @@
<script> <script>
import NumRate from './NumRate'; import NumRate from './NumRate';
import EnergyMonitoring from './EnergyMonitoring'; import WorkOrderMonitoring from './WorkOrderMonitoring';
export default { export default {
name: 'BottomTwo', name: 'BottomTwo',
components: { NumRate, EnergyMonitoring }, components: { NumRate, WorkOrderMonitoring },
props: {}, props: {},
data() { data() {
return {}; return {};

View File

@ -1,43 +1,66 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;">
<Container name="各工序缺陷汇总" size="small" style=""> <Container name="各工序缺陷汇总" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/> <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
</div> </div>
</Container> </Container>
</div> </div>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard' import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'DefectSum', name: 'DefectSum',
components: { Container, ScrollBoard }, components: { Container, TimePrompt },
computed: {
defectSum() {
return this.$store.state.websocket.defectSum
}
},
data() { data() {
return { return {
timestr: '',
config: { config: {
header: ['序号', '产线', '工序','损耗片数','缺陷类型'], header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60],
align: ['center'], align: ['center'],
data: [ data: [],
[1, '产线1', '行1列3', '', ''], // data: [[1, 'Y61', '','10','']],
[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 rowNum: 10
} }
} }
},
mounted() {
this.timestr = switchShowTime('日')
},
watch:{
defectSum: {
handler(newVal, oldVal) {
let outArr = this.defectSum.map((item, index) => [
index+1,
item.productionLineName,
item.sectionName,
item.count,
item.inspectionTypeName
]);
this.config.data = outArr
this.$refs['defectScrollBoard'].updateRows(outArr)
this.timestr = switchShowTime('日')
}
}
} }
} }
</script> </script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 240px;
}
</style>

View File

@ -1,27 +1,41 @@
<template> <template>
<div style="flex: 1;"> <Container name="能源监控" size="large" style="">
<Container name="能源监控" size="small" style=""> <TimePrompt class="timeShow" :timestr="timestr" />
<div class="chart" style="height: 370px; margin-top: 8px;"> <div class="chart" style="height: 370px; margin-top: 8px;">
<EnergeMonitoringChart/> <EnergeMonitoringChart @emitFun='dateUpdate'/>
</div> </div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import EnergeMonitoringChart from '../components/EnergeMonitoringChart'; import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'EnergyMonitoring', name: 'EnergyMonitoring',
components: { Container, EnergeMonitoringChart }, components: { Container, EnergeMonitoringChart, TimePrompt },
data() { data() {
return { return {
timestr: ''
} }
}, },
mounted() {
this.timestr = switchShowTime('日')
},
methods: { methods: {
//
dateUpdate() {
this.timestr = switchShowTime('日')
}
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.timeShow {
position: absolute;
top: 18px;
left: 170px;
}
.timeToggle { .timeToggle {
position: absolute; position: absolute;
right: 20px; right: 20px;

View File

@ -1,43 +1,77 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;">
<Container name="设备报警" size="small" style=""> <Container name="设备报警" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/> <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
</div> </div>
</Container> </Container>
</div> </div>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard' import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'EqAlarm', name: 'EqAlarm',
components: { Container, ScrollBoard }, components: { Container, TimePrompt },
computed: {
sjgEquipment() {
return this.$store.state.websocket.sjgEquipment
}
},
data() { data() {
return { return {
timestr: '',
config: { config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60, 150, 190],
align: ['center'], align: ['center'],
data: [ data: [],
[1, '设备1', '行1列3', '', ''], // data: [
[2, '设备2', '行2列3', '', ''], // [1, '线3线', 'EQ20240110130909000255', '', ''],
[3, '设备3', '行3列3', '', ''], // [2, '线2线', 'EQ20240110130848000254', '', ''],
[4, '设备4', '行4列3', '', ''], // [3, '线1线', 'EQ20240110130832000253', '', ''],
[5, '设备5', '行5列3', '', ''], // [4, '12线', 'EQ20240110130817000252', '', ''],
[6, '设备6', '行6列3', '', ''], // [5, '11线', ' EQ20240110130743000250', '', ''],
[7, '设备7', '行7列3', '', ''], // [6, '10线', ' EQ20240110130743000250', '', ''],
[8, '设备8', '行8列3', '', ''], // [7, '4线线', 'EQ20240110130731000249', '', ''],
[9, '设备9', '行9列3', '', ''], // [8, '线2线', 'EQ20240110112716000248', '', ''],
[10, '设备10', '行10列3', '', ''] // [9, '线1线', 'EQ20240110112700000247', '', ''],
], // [10, '4线线', 'EQ20240110112646000246', '', '']
// ],
rowNum: 10 rowNum: 10
} }
} }
},
mounted(){
this.timestr = switchShowTime('日')
},
watch:{
sjgEquipment: {
handler(newVal, oldVal) {
let outArr = this.sjgEquipment.map((item, index) => [
index+1,
`<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> </script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
</style>

View File

@ -1,27 +1,41 @@
<template> <template>
<div style="flex: 1;"> <Container name="产线产量及良品率" size="large" style="">
<Container name="产线产量及良品率" size="small" style=""> <TimePrompt class="timeShow" :timestr="timestr" />
<div class="chart" style="height: 370px; margin-top: 8px;"> <div class="chart" style="height: 370px; margin-top: 8px;">
<NumRateChart /> <NumRateChart @emitFun='dateUpdate'/>
</div> </div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container'; import Container from '../components/Container';
import NumRateChart from '../components/NumRateChart'; import NumRateChart from '../components/NumRateChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'NumRate', name: 'NumRate',
components: { Container, NumRateChart }, components: { Container, NumRateChart, TimePrompt },
data() { data() {
return { return {
timestr: ''
} }
}, },
mounted() {
this.timestr = switchShowTime('日')
},
methods: { methods: {
//
dateUpdate() {
this.timestr = switchShowTime('日')
}
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 265px;
}
.timeToggle { .timeToggle {
position: absolute; position: absolute;
right: 20px; right: 20px;

View File

@ -26,19 +26,19 @@
display: grid; display: grid;
grid-template-rows: 462px; grid-template-rows: 462px;
"> ">
<WorkOrderMonitoring /> <EnergyMonitoring />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import WorkOrderMonitoring from './WorkOrderMonitoring';
import EqAlarm from './EqAlarm' import EqAlarm from './EqAlarm'
import DefectSum from './DefectSum' import DefectSum from './DefectSum'
import EnergyMonitoring from './EnergyMonitoring';
export default { export default {
name: 'TopThree', name: 'TopThree',
components: { EqAlarm, DefectSum, WorkOrderMonitoring }, components: { EqAlarm, DefectSum, EnergyMonitoring },
props: {}, props: {},
data() { data() {
return {}; return {};

View File

@ -1,43 +1,67 @@
<template> <template>
<div style="flex: 1;"> <Container name="工单监控" size="middle" style="">
<Container name="工单监控" size="small" style=""> <TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;" class="WOMonitoring">
<ScrollBoard :config = "config" width='575px' height='380px'/> <dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
</div> </div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard' import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
import { formatDate } from '@/utils'
export default { export default {
name: 'WorkOrderMonitoring', name: 'WorkOrderMonitoring',
components: { Container, ScrollBoard }, components: { Container, TimePrompt },
computed: {
order() {
return this.$store.state.websocket.workOrder
}
},
data() { data() {
return { return {
timestr: '',
config: { config: {
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'], header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60, 120, 120, 60, 100, 150],
align: ['center'], align: ['center'],
data: [ data: [],
[1, '设备1', '行1列3', '', '','','',''], rowNum:10
[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
} }
} }
},
mounted(){
this.timestr = switchShowTime('日')
},
watch:{
order: {
handler(newVal, oldVal) {
let outArr = this.order.map((item, index) => [
index+1,
`<span title=${item.name || ''}>${item.name || ''}</span>`,
item.specifications,
item.lines,
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> </script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
</style>

View File

@ -117,7 +117,7 @@ export default {
screenfull.toggle(this.$refs.deepProcessingContainerB) screenfull.toggle(this.$refs.deepProcessingContainerB)
}, },
resetSize() { resetSize() {
let deepProcessingContainer = document.querySelector('#deepProcessingContainer') let deepProcessingContainer = document.getElementById('deepProcessingContainer')
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(deepProcessingContainer.style.width) let bw = parseFloat(deepProcessingContainer.style.width)
@ -133,10 +133,10 @@ export default {
console.log('非全屏') console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened) console.log(this.$store.state.app.sidebar.opened)
if (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 hx = (rh-116) / bh
}else{ }else{
wx = (rw-78) / bw wx = (rw-85) / bw
hx = (rh-116) / bh hx = (rh-116) / bh
} }
} }

View File

@ -7,6 +7,7 @@
<template> <template>
<Container name="能耗" size="middle" style=""> <Container name="能耗" size="middle" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<EnergeTop /> <EnergeTop />
<SplitLine :horizontal="true" /> <SplitLine :horizontal="true" />
<div class="" style="flex: 2; padding: 8px"> <div class="" style="flex: 2; padding: 8px">
@ -35,7 +36,7 @@
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/> <SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
</div> </div>
<div class="chart" style="height: 200px; margin-top: 8px;"> <div class="chart" style="height: 200px; margin-top: 8px;">
<GasChart :chartType='chartType' :chartTime='chartTime'/> <GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
</div> </div>
</div> </div>
</Container> </Container>
@ -45,28 +46,34 @@
import Container from '../components/Container'; import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue'; import ShadowRect from '../components/ShadowRect.vue';
import SplitLine from '../components/line'; import SplitLine from '../components/line';
import Switcher from '../components/Switcher'; // import Switcher from '../components/Switcher';
import EnergeTop from './EnergeTop'; import EnergeTop from './EnergeTop';
import GasChart from '../components/GasChart.vue'; import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup'; import SelectorBtnGroup from '../components/SelectorBtnGroup';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'EnergeCost', name: 'EnergeCost',
components: { components: {
Container, Container,
ShadowRect, ShadowRect,
SplitLine, SplitLine,
Switcher,
EnergeTop, EnergeTop,
GasChart, GasChart,
SelectorBtnGroup, SelectorBtnGroup,
TimePrompt
}, },
props: {}, props: {},
data() { data() {
return { return {
chartType:'电耗能', chartType:'电耗能',
chartTime:'周' chartTime:'周',
timestr: ''
}; };
}, },
mounted() {
this.timestr = switchShowTime(this.chartTime)
},
computed: { computed: {
gasInfoMsg() { gasInfoMsg() {
return this.$store.state.websocket.gasInfo return this.$store.state.websocket.gasInfo
@ -75,37 +82,27 @@ export default {
methods: { methods: {
// //
toggleType(val) { toggleType(val) {
console.log('能源' + val)
this.chartType = 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) { toggleDate(val) {
console.log('时间' + val)
this.chartTime = val this.chartTime = val
// if (val === '' || val === '') { this.timestr = switchShowTime(val)
// if (this.chartType === '') { },
// this.chartTime = val //
// } else { dateUpdate() {
// this.$message.warning('') this.timestr = switchShowTime(this.chartTime)
// } }
// }else{
// this.chartTime = val
// }
}
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.timeShow {
position: absolute;
top: 20px;
left: 120px;
}
.lgd { .lgd {
color: #fff; color: #fff;

View File

@ -11,14 +11,14 @@
style=" style="
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 2fr 3fr 3fr;
grid-template-rows: auto; grid-template-rows: auto;
gap: 8px; gap: 8px;
padding: 4px; padding: 4px;
margin-bottom: 6px; margin-bottom: 6px;
"> ">
<ShadowRect <ShadowRect
style="grid-row: 1 / 3; flex-direction: column; justify-content: center"> style="grid-row: 1/3 ; flex-direction: column; justify-content: center">
<span <span
style=" style="
font-size: 16px; font-size: 16px;
@ -34,6 +34,7 @@
line-height: 1.55; line-height: 1.55;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
color: #3ce8ff
"> ">
{{energyInfo.elecQty1}}kwh {{energyInfo.elecQty1}}kwh
</span> </span>
@ -51,7 +52,7 @@
"> ">
<p style="margin: 0; line-height: inherit">水耗量</p> <p style="margin: 0; line-height: inherit">水耗量</p>
</div> </div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}</span> <span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.waterQty}}</span>
</ShadowRect> </ShadowRect>
<ShadowRect> <ShadowRect>
@ -66,7 +67,7 @@
"> ">
<p style="margin: 0; line-height: inherit">天然气I</p> <p style="margin: 0; line-height: inherit">天然气I</p>
</div> </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>
<ShadowRect> <ShadowRect>
@ -81,7 +82,7 @@
"> ">
<p style="margin: 0; line-height: inherit">电耗量</p> <p style="margin: 0; line-height: inherit">电耗量</p>
</div> </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>
<ShadowRect> <ShadowRect>
@ -96,7 +97,7 @@
"> ">
<p style="margin: 0; line-height: inherit">天然气II</p> <p style="margin: 0; line-height: inherit">天然气II</p>
</div> </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> </ShadowRect>
</div> </div>
</template> </template>

View File

@ -42,10 +42,10 @@
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue'; import ShadowRect from '../components/ShadowRect.vue';
import Switcher from '../components/Switcher'; // import Switcher from '../components/Switcher';
export default { export default {
name: 'FanSequence', name: 'FanSequence',
components: { Container, ShadowRect, Switcher }, components: { Container, ShadowRect },
computed: { computed: {
fanFrequencyInfo() { fanFrequencyInfo() {
return this.$store.state.websocket.fanFrequencyInfo return this.$store.state.websocket.fanFrequencyInfo

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="gas-handle" style="flex: 2"> <div class="gas-handle" style="flex: 2">
<Container name="烟气处理" size="large" style=""> <Container name="烟气处理" size="large" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div <div
class="" class=""
style=" style="
@ -16,45 +17,45 @@
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.24; line-height: 1.24;
flex: 1.2; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding-right: 8px;
letter-spacing: 3px; letter-spacing: 3px;
"> ">
氧气含量 氧气含量
</span> </span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span> <span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(exhaustGasInfo.O2_float)).toFixed(2) : ''}}%</span>
</ShadowRect> </ShadowRect>
<ShadowRect> <ShadowRect>
<div <div
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.5; line-height: 1.24;
flex: 1.2; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding:5px 8px 5px 0;
letter-spacing: 3px; 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> <p style="margin: 0; line-height: inherit">排放浓度</p>
</div> </div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/</span> <span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/</span>
</ShadowRect> </ShadowRect>
<ShadowRect> <ShadowRect>
<div <div
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.5; line-height: 1.24;
flex: 1.2; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding:5px 8px 5px 0;
letter-spacing: 3px; 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> <p style="margin: 0; line-height: inherit">排放浓度</p>
</div> </div>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/</span> <span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (Number(exhaustGasInfo.SO2_float)).toFixed(2) : ''}}mg/</span>
</ShadowRect> </ShadowRect>
<ShadowRect> <ShadowRect>
@ -62,14 +63,14 @@
style=" style="
font-size: 20px; font-size: 20px;
line-height: 1.24; line-height: 1.24;
flex: 1.2; flex: 1;
text-align: right; text-align: right;
padding-right: 8px; padding-right: 8px;
letter-spacing: 1px; letter-spacing: 1px;
"> ">
颗粒物浓度 颗粒物浓度
</span> </span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/</span> <span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/</span>
</ShadowRect> </ShadowRect>
</div> </div>
<KilnLine :horizontal="true" /> <KilnLine :horizontal="true" />
@ -95,11 +96,11 @@
justify-content: space-between; justify-content: space-between;
"> ">
<SelectorBtnGroup <SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/> :options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</div> </div>
<div class="chart" style="height: 250px;margin-top: 10px;"> <div class="chart" style="height: 250px;margin-top: 10px;">
<FlueGas :chartType='chartType' :chartTime='chartTime'/> <FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
</div> </div>
</div> </div>
</Container> </Container>
@ -110,9 +111,11 @@
import Container from '../components/Container'; import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue'; import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line'; import KilnLine from '../components/line';
import Switcher from '../components/Switcher'; // import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup'; 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 { export default {
name: 'GasHandle', name: 'GasHandle',
@ -120,15 +123,16 @@ export default {
Container, Container,
ShadowRect, ShadowRect,
KilnLine, KilnLine,
Switcher,
SelectorBtnGroup, SelectorBtnGroup,
FlueGas, FlueGasChart,
TimePrompt
}, },
props: {}, props: {},
data() { data() {
return { return {
chartType:'氧气含量', chartType:'氧气含量',
chartTime:'日' chartTime:'日',
timestr: ''
}; };
}, },
computed: { computed: {
@ -136,6 +140,9 @@ export default {
return this.$store.state.websocket.exhaustGasInfo return this.$store.state.websocket.exhaustGasInfo
} }
}, },
mounted() {
this.timestr = switchShowTime(this.chartTime)
},
methods: { methods: {
// //
toggleType(val) { toggleType(val) {
@ -144,14 +151,23 @@ export default {
}, },
// //
toggleDate(val) { toggleDate(val) {
console.log('时间' + val)
this.chartTime = val this.chartTime = val
} this.timestr = switchShowTime(val)
},
//
dateUpdate() {
this.timestr = switchShowTime(this.chartTime)
}
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.timeShow {
position: absolute;
top: 20px;
left: 170px;
}
.gas-handle { .gas-handle {
} }

View File

@ -1,34 +1,8 @@
<!--
filename: IsraCheck.vue
author: liubin
date: 2023-12-06 09:50:13
description:
-->
<template> <template>
<Container name="ISRA缺陷检测" size="middle" style=""> <Container name="ISRA缺陷检测" size="middle" style="">
<ISRAChart /> <TimePrompt class="timeShow" :timestr="timestr" />
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;"> <ISRAChart @emitFun='dateUpdate'/>
<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> -->
</Container> </Container>
</template> </template>
@ -36,20 +10,36 @@
import Container from '../components/Container'; import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue'; import ShadowRect from '../components/ShadowRect.vue';
import ISRAChart from '../components/ISRAChart.vue'; import ISRAChart from '../components/ISRAChart.vue';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'IsraCheck', name: 'IsraCheck',
components: { Container, ShadowRect, ISRAChart }, components: { Container, ShadowRect, ISRAChart, TimePrompt },
props: {}, props: {},
data() { data() {
return {}; return {
timestr: ''
};
}, },
computed: {}, computed: {},
methods: {}, mounted() {
this.timestr = switchShowTime('日')
},
methods: {
//
dateUpdate() {
this.timestr = switchShowTime('日')
}
},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.timeShow {
position: absolute;
top: 19px;
left: 210px;
}
ul, ul,
li { li {
margin: 0; margin: 0;

View File

@ -22,13 +22,12 @@
import Container from '../components/Container'; import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue'; import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line'; import KilnLine from '../components/line';
import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup'; import SelectorBtnGroup from '../components/SelectorBtnGroup';
import KilnInfo from './KilnInfo.vue'; import KilnInfo from './KilnInfo.vue';
import GasHandle from './GasHandle.vue'; import GasHandle from './GasHandle.vue';
export default { export default {
name: 'RightTwo', name: 'RightTwo',
components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle }, components: { Container, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle },
props: {}, props: {},
data() { data() {
return {}; return {};

View File

@ -6,7 +6,7 @@
class="KilnDataBoard" class="KilnDataBoard"
style=" style="
position: absolute; position: absolute;
transform-origin: left top; transform-origin: 16px 8px;
font-size: 16px; font-size: 16px;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -110,7 +110,8 @@ export default {
screenfull.toggle(this.$refs.kilnContainerB) screenfull.toggle(this.$refs.kilnContainerB)
}, },
resetSize() { resetSize() {
let kilnContainerBox = document.querySelector('#kilnContainer') let kilnContainerBox = document.getElementById('kilnContainer')
console.log(kilnContainerBox)
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(kilnContainerBox.style.width) let bw = parseFloat(kilnContainerBox.style.width)
@ -126,10 +127,10 @@ export default {
console.log('非全屏') console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened) console.log(this.$store.state.app.sidebar.opened)
if (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 hx = (rh-116) / bh
}else{ }else{
wx = (rw-78) / bw wx = (rw-85) / bw
hx = (rh-116) / bh hx = (rh-116) / bh
} }
} }

View 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);
}

View File

@ -1,38 +1,51 @@
<template> <template>
<div style="flex: 1;"> <Container name="产线当日缺陷分类" size="middle">
<Container name="产线当日缺陷分类" size="small"> <TimePrompt class="timeShow" :timestr="timestr" />
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' /> <DropDownBtn class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
<div class="chart" style="height: 370px; margin-top: 8px;"> <div class="chart" style="height: 375px; margin-top: 8px;">
<DefectClassChart :chartType='chartType'/> <DefectClassChart :chartType='chartType' @emitFun='dateUpdate'/>
</div> </div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container'; import Container from '../components/Container';
import SelectorBtnGroup from '../components/SelectorBtnGroup'; import DropDownBtn from '../components/DropDownBtn';
import DefectClassChart from '../components/DefectClassChart'; import DefectClassChart from '../components/DefectClassChart';
import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils'
export default { export default {
name: 'DefectClass', name: 'DefectClass',
components: { Container, SelectorBtnGroup, DefectClassChart }, components: { Container, DropDownBtn, DefectClassChart, TimePrompt },
data() { data() {
return { return {
chartType:'Y61' chartType:'Y61',
timestr: ''
} }
}, },
mounted() {
this.timestr = switchShowTime('日')
},
methods: { methods: {
// 线 // 线
toggleType(val) { toggleType(val) {
console.log('产线' + val)
this.chartType = val this.chartType = val
} },
//
dateUpdate() {
this.timestr = switchShowTime('日')
}
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.timeShow {
position: absolute;
top: 18px;
left: 260px;
}
.typeToggle { .typeToggle {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 30px; top: 15px;
} }
</style> </style>

View File

@ -1,38 +1,54 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;">
<Container name="产线缺陷统计" size="small"> <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;"> <div class="chart" style="height: 238px; margin-top: 8px;">
<DefectChart :chartTime='chartTime'/> <DefectChart :chartTime='chartTime' @emitFun='dateUpdate'/>
</div> </div>
</Container> </Container>
</div> </div>
</template> </template>
<script> <script>
import Container from '../components/Container'; 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 DefectChart from '../components/DefectChart';
import { switchShowTime } from '../utils'
export default { export default {
name: 'DefectStatistics', name: 'DefectStatistics',
components: { Container, SelectorBtnGroup, DefectChart }, components: { Container, DropDownBtn, DefectChart, TimePrompt },
data() { data() {
return { return {
chartTime:'日' chartTime:'日',
timestr: ''
} }
}, },
mounted() {
this.timestr = switchShowTime(this.chartTime)
},
methods: { methods: {
// //
toggleDate(val) { toggleDate(val) {
console.log('时间' + val)
this.chartTime = val this.chartTime = val
} this.timestr = switchShowTime(val)
},
//
dateUpdate() {
this.timestr = switchShowTime(this.chartTime)
}
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 210px;
}
.timeToggle { .timeToggle {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 15px;
} }
</style> </style>

View File

@ -1,43 +1,70 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style=""> <Container name="订单完成情况" size="small" style="">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='230px'/> <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
</div> </div>
</Container> </Container>
</div> </div>
</template> </template>
<script> <script>
import Container from '../components/Container' import Container from '../components/Container'
import ScrollBoard from '../components/ScrollBoard' import TimePrompt from '../components/TimePrompt';
import { formatDate } from '@/utils'
import { switchShowTime } from '../utils'
export default { export default {
name: 'OrderStatus', name: 'OrderStatus',
components: { Container, ScrollBoard }, components: { Container, TimePrompt },
computed: {
order() {
return this.$store.state.websocket.order
}
},
data() { data() {
return { return {
timestr: '',
config: { config: {
header: ['上线时间', '客户名称', '规格','完成度'], header: ['上线时间', '客户名称', '规格','完成度'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
// columnWidth: [60], columnWidth: [155, 160, 150],
align: ['center'], data: [],
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', '']
],
rowNum: 6 rowNum: 6
} }
} }
},
mounted() {
this.timestr = switchShowTime('日')
},
watch:{
order:{
handler() {
let outArr = this.order.map((item) => [
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.timestr = switchShowTime('日')
}
}
} }
} }
</script> </script>
<style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 210px;
}
</style>

View File

@ -1,45 +1,133 @@
<template> <template>
<div style="flex: 2;" class="aaa"> <Container name="本日生产良品率" size="large">
<Container name="本日生产良品率" size="small" style=""> <TimePrompt class="timeShow" :timestr="timestr" />
<ScrollBoard :config = "config" width='575px' height='300px'/> <div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
</div>
<KilnLine :horizontal="true" />
<div class="" style="flex: 2; padding: 8px">
<div
class="header-line"
style="margin: 8px 0 16px; display: flex; align-items: center">
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
生产良品率
</h2>
<Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
<div style="width: 169px;">
<span class="lgd lgd-total">总量</span>
<span class="lgd lgd-day" v-show='chartType'>白班</span>
<span class="lgd lgd-night" v-show='chartType'>夜班</span>
</div>
<div>
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
</div>
</div>
<div class="chart" style="height: 230px;">
<YieldRateChart :chartTime='chartTime' :chartType='chartType' @emitFun='dateUpdate'/>
</div>
</div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container'; import Container from '../components/Container'
import ScrollBoard from '../components/ScrollBoard' 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 TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils';
export default { export default {
name: 'YieldRate', name: 'YieldRate',
components: { Container, ScrollBoard }, components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt },
computed: {
yieldRateTable() {
return this.$store.state.websocket.yieldRateTable
}
},
data() { data() {
return { return {
config: { config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], header: ['产线', '一等率', '二等率','成品率','废品率'],
// headerHeight: '17', // headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60],
align: ['center'], data: [],
data: [ rowNum: 5
[1, '设备1', '行1列3', '', ''], },
[2, '设备2', '行2列3', '', ''], chartType:false,
[3, '设备3', '行3列3', '', ''], chartTime: "日",
[4, '设备4', '行4列3', '', ''], timestr: ""
[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
}
} }
}, },
watch:{
yieldRateTable: {
handler(newVal, oldVal) {
let outArr = this.yieldRateTable.map((item) => [
item.lineName,
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: { methods: {
changeType(val) {
this.chartType = val
},
//
toggleDate(val) {
this.chartTime = val
this.timestr = switchShowTime(this.chartTime)
},
//
dateUpdate() {
this.timestr = switchShowTime(this.chartTime)
}
} }
} }
</script> </script>
<style lang='scss'> <style lang='scss' scoped>
.timeShow {
position: absolute;
top: 20px;
left: 235px;
}
.lgd {
color: #fff;
&:not(:last-child) {
margin-right: 12px;
}
}
.lgd::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 2px;
}
.lgd.lgd-total::before {
background-color: #ff9e00;
}
.lgd.lgd-day::before {
background-color: #08d8cd;
}
.lgd.lgd-night::before {
background-color: #0b58ff;
}
</style> </style>

View File

@ -107,7 +107,7 @@ export default {
screenfull.toggle(this.$refs.wholePlantContainerB) screenfull.toggle(this.$refs.wholePlantContainerB)
}, },
resetSize() { resetSize() {
let wholePlantContainerBox = document.querySelector('#wholePlantContainer') let wholePlantContainerBox = document.getElementById('wholePlantContainer')
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight)
let bw = parseFloat(wholePlantContainerBox.style.width) let bw = parseFloat(wholePlantContainerBox.style.width)
@ -123,10 +123,10 @@ export default {
console.log('非全屏') console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened) console.log(this.$store.state.app.sidebar.opened)
if (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 hx = (rh-116) / bh
}else{ }else{
wx = (rw-78) / bw wx = (rw-85) / bw
hx = (rh-116) / bh hx = (rh-116) / bh
} }
} }

View File

@ -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>

View File

@ -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>

View File

@ -13,33 +13,6 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </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-col :span='12'>
<el-form-item label="抄表日期" prop="recordTime"> <el-form-item label="抄表日期" prop="recordTime">
<el-date-picker <el-date-picker
@ -53,11 +26,37 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </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> </el-form>
</template> </template>
<script> <script>
import { energyQuantityManualCreate, energyQuantityManualUpdate, energyQuantityManualGet } from '@/api/base/energyQuantityManual' import { energyQuantityManualCreate, energyQuantityManualUpdate, energyQuantityManualGet } from '@/api/base/energyQuantityManual'
import moment from 'moment' 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 { export default {
name: 'EnergyQuantityManualAdd', name: 'EnergyQuantityManualAdd',
props: { props: {
@ -71,18 +70,17 @@ export default {
}, },
data() { data() {
return { return {
tableProps,
tableData: [],
addButtonShow:'新增',
form: { form: {
id: '', id: '',
energyTypeId: '', energyTypeId: '',
tableName: '',
readingQuantity: null,
unit: '', unit: '',
recordTime: '' recordTime: ''
}, },
rules: { rules: {
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }], energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
tableName: [{ required: true, message: '水/气表名不能为空', trigger: 'change' }],
readingQuantity: [{ required: true, message: '抄表数不能为空', trigger: 'blur' }],
recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }] recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }]
}, },
isEdit: false isEdit: false
@ -96,38 +94,71 @@ export default {
} else if (params.type === 'meterReading') { } else if (params.type === 'meterReading') {
this.isEdit = false this.isEdit = false
this.form.energyTypeId = params.energyTypeId this.form.energyTypeId = params.energyTypeId
this.form.tableName = params.tableName + '' let obj = {}
obj.tableName = params.tableName + ''
obj.readingQuantity = 0
this.tableData.push(obj)
}else { }else {
this.isEdit = true this.isEdit = true
this.form.id = params.id this.form.id = params.id
this.addButtonShow = ''
energyQuantityManualGet({id: this.form.id}).then(res => { energyQuantityManualGet({id: this.form.id}).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.form.energyTypeId = res.data.energyTypeId 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 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() { submitForm() {
this.$refs['energyQuantityManualForm'].validate((valid) => { this.$refs['energyQuantityManualForm'].validate((valid) => {
if (valid) { if (valid) {
if (!this.form.unit) { //
this.$modal.msgError("抄表数单位不能为空"); if (this.tableData.length === 0) {
this.$modal.msgError("抄表数据不能为空");
return false 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) { 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) { if (res.code === 0) {
this.$modal.msgSuccess("操作成功"); this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit') this.$emit('successSubmit')
} }
}) })
} else { } else {
energyQuantityManualCreate({...this.form}).then((res) => { energyQuantityManualCreate({
energyTypeId:this.form.energyTypeId,
recordTime:this.form.recordTime,
data:this.tableData
}).then((res) => {
if (res.code === 0) { if (res.code === 0) {
this.$modal.msgSuccess("操作成功"); this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit') this.$emit('successSubmit')
@ -143,6 +174,8 @@ export default {
this.$refs.energyQuantityManualForm.resetFields() this.$refs.energyQuantityManualForm.resetFields()
this.form.unit = '' this.form.unit = ''
this.isEdit = false this.isEdit = false
this.addButtonShow = '新增'
this.tableData = []
} }
} }
} }

View File

@ -60,6 +60,12 @@ const tableProps = [
minWidth: 110, minWidth: 110,
showOverflowtooltip: true showOverflowtooltip: true
}, },
{
prop: 'unit',
label: '单位',
filter: publicFormatter('energy_unit'),
minWidth: 110
},
{ {
prop: 'tableName', prop: 'tableName',
label: '水/气表名', label: '水/气表名',
@ -77,18 +83,7 @@ const tableProps = [
label: '抄表值' label: '抄表值'
}, },
{ {
prop: 'recordTimeLast', prop: 'useQty',
label: '上期抄表日期',
filter: parseTimeTable('{y}-{m}-{d}'),
minWidth: 110
},
{
prop: 'readingQuantityLast',
label: '上期抄表值',
minWidth: 110
},
{
prop: 'diff',
label: '差值' label: '差值'
} }
] ]
@ -156,17 +151,7 @@ export default {
this.$auth.hasPermi('base:energy-quantity-manual:update') this.$auth.hasPermi('base:energy-quantity-manual:update')
? { ? {
type: 'edit', type: 'edit',
btnName: '编辑', btnName: '编辑'
showParam: {
type: '&',
data: [
{
type: 'equal',
name: 'latest',
value: 1
}
]
}
} }
: undefined, : undefined,
this.$auth.hasPermi('base:energy-quantity-manual:delete') this.$auth.hasPermi('base:energy-quantity-manual:delete')

View File

@ -1,4 +1,4 @@
<!-- <!--
filename: index.vue filename: index.vue
author: liubin author: liubin
date: 2023-09-04 09:34:52 date: 2023-09-04 09:34:52

View File

@ -132,7 +132,7 @@ export default {
.chartBox { .chartBox {
width: 100%; width: 100%;
padding-right: 6px; padding-right: 6px;
height: calc(100vh - 310px); height: calc(100vh - 356px);
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
overflow: auto; overflow: auto;

View File

@ -28,15 +28,15 @@
@clickBtn="handleClick" @clickBtn="handleClick"
/> />
</base-table> </base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getPage"
/>
</div> </div>
<!-- --> <!-- -->
<monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList'/> <monitoring-ring-charts ref='monitoringRingCharts' v-else :chart-list='chartList'/>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getPage"
/>
</div> </div>
</template> </template>
<script> <script>

View File

@ -140,10 +140,10 @@ export default {
init(obj) { init(obj) {
// console.log(productionLineId); // console.log(productionLineId);
console.log(obj); console.log(obj);
this.visible = true; this.visible = true
// if(obj.id) // if(obj.id)
if (obj) { if (obj) {
this.dataForm.id = obj.id ? obj.id : "" this.dataForm.id = obj.id || null;
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["dataForm"].resetFields() this.$refs["dataForm"].resetFields()
@ -154,13 +154,16 @@ export default {
}).then((res) => { }).then((res) => {
console.log(res); console.log(res);
this.dataForm.inspectionDetIdList = res.data this.dataForm.inspectionDetIdList = res.data
this.dataForm.productionLineId = obj.productionLineId
this.getWorksectionList(obj.productionLineId)
this.dataForm.sectionId = obj.sectionId
}) })
} }
if (this.dataForm.id) { if (this.dataForm.id) {
console.log(1111);
this.urlOptions.infoURL(obj.id).then(response => { this.urlOptions.infoURL(obj.id).then(response => {
this.dataForm.id = response.data.id this.dataForm.id = response.data.id
this.dataForm.productionLineId = response.data.productionLineId
this.dataForm.sectionId = response.data.sectionId
// if (this.setData) { // if (this.setData) {
// this.setDataForm() // this.setDataForm()
// } // }
@ -261,10 +264,10 @@ export default {
this.$emit('update', this.dataForm); this.$emit('update', this.dataForm);
}, },
async getCode(url) { // async getCode(url) {
const response = await this.$axios(url); // const response = await this.$axios(url);
return response.data; // return response.data;
}, // },
}, },
}; };
</script> </script>

View File

@ -104,7 +104,7 @@ export default {
label: '工段', label: '工段',
}, },
{ {
prop: 'inspectionDetContent', prop: 'inspectionInfoList',
label: '检测内容', label: '检测内容',
} }
], ],
@ -133,17 +133,23 @@ export default {
// this.getList(); // this.getList();
}, },
methods: { methods: {
/** 查询列表 */ getDataList() {
// getList() { this.dataListLoading = true;
// this.loading = true; this.urlOptions.getDataListURL(this.listQuery).then(response => {
// // this.tableData = response.data.map((item) => {
// getQualityInspectionBoxBtnPage(this.listQuery).then((response) => { // console.log(item);
// this.list = response.data.list; return {
// this.total = response.data.total; inspectionInfoList: item.inspectionInfoList.toString(),
// this.loading = false; productionLineId:item.productionLineId,
// }); productionLineName:item.productionLineName,
// }, sectionId: item.sectionId,
/** 表单重置 */ sectionName: item.sectionName
}
})
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
reset() { reset() {
this.form = { this.form = {
id: null, id: null,
@ -156,6 +162,26 @@ export default {
}; };
this.resetForm('form'); this.resetForm('form');
}, },
deleteHandle(id, name, index, data) {
this.$confirm(`确认要删除产线名为${data.productionLineName}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
buttonClick(val) { buttonClick(val) {
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':

View File

@ -1,13 +1,13 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-08 13:46:17 * @Date: 2023-12-08 13:46:17
* @LastEditTime: 2023-12-15 16:12:08 * @LastEditTime: 2024-01-22 15:29:53
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<template> <template>
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="50%"> <el-drawer :visible.sync="visible" :show-close="true" :wrapper-closable="false" class="drawer" size="50%">
<small-title slot="title" :no-padding="true"> <small-title slot="title" :no-padding="true" @close="handleClose">
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }} {{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
</small-title> </small-title>
<div class="content"> <div class="content">
@ -90,6 +90,18 @@
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4">
<el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最小值"
>
<el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.minValue"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最大值"
>
<el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.maxValue"></el-input>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="8"> <el-col :span="8">
@ -245,6 +257,7 @@ export default {
methods: { methods: {
judgeValue(val, minValue, maxValue, index) { judgeValue(val, minValue, maxValue, index) {
if (val >= minValue && val <= maxValue) { if (val >= minValue && val <= maxValue) {
console.log(val)
this.dataForm.checkValueList[index].showIcon = true this.dataForm.checkValueList[index].showIcon = true
this.dataForm.checkValueList[index].isStandard = true this.dataForm.checkValueList[index].isStandard = true
} else { } else {
@ -252,6 +265,10 @@ export default {
this.dataForm.checkValueList[index].isStandard = false this.dataForm.checkValueList[index].isStandard = false
} }
}, },
handleClose() {
this.ingredientList = undefined
console.log(222222222);
},
dataFormSubmit() { dataFormSubmit() {
this.$refs["dataForm"].validate((valid) => { this.$refs["dataForm"].validate((valid) => {
if (!valid) { if (!valid) {
@ -288,7 +305,9 @@ export default {
Promise.all(array).then(res => { Promise.all(array).then(res => {
console.log(res) console.log(res)
this.visible = false; this.visible = false;
this.$modal.msgSuccess("修改成功");
this.$emit("refreshDataList"); this.$emit("refreshDataList");
this.ingredientList = []
}).catch(error => { }).catch(error => {
// catch // catch
console.log(error) console.log(error)
@ -326,6 +345,7 @@ export default {
Promise.all(array).then(res => { Promise.all(array).then(res => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.visible = false; this.visible = false;
this.ingredientList= []
this.$emit("refreshDataList"); this.$emit("refreshDataList");
}).catch(error => { }).catch(error => {
// catch // catch
@ -434,6 +454,7 @@ export default {
init(id, isdetail) { init(id, isdetail) {
this.initData() this.initData()
this.getDict() this.getDict()
this.ingredientList = []
this.isdetail = isdetail || false; this.isdetail = isdetail || false;
this.dataForm.id = id || undefined; this.dataForm.id = id || undefined;
this.visible = true; this.visible = true;
@ -445,7 +466,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields(); this.$refs['dataForm'].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
// //
let valueList = [] let valueList = []
@ -455,37 +475,59 @@ export default {
materialId: response.data.materialId materialId: response.data.materialId
}).then((res) => { }).then((res) => {
console.log(res.data); console.log(res.data);
this.ingredientList = res.data let arr = res.data
valueList = this.ingredientList.map((ele) => { valueList = arr.map((ele) => {
// console.log(ele) // console.log(ele)
return { return {
checkDetId:ele.id,
maxValue: ele.maxValue, maxValue: ele.maxValue,
minValue: ele.minValue minValue: ele.minValue
} }
}) })
console.log(valueList);
getQualityHotMaterialDetList({ getQualityHotMaterialDetList({
mainId: response.data.id mainId: response.data.id
}).then((result) => { }).then((result) => {
this.ingredientList = result.data.map((ele) => {
return {
name: ele.checkName,
id: ele.id,
checkDetId: ele.checkDetId,
checkValue: ele.checkValue,
maxValue:null,
minValue: null
}
})
console.log(this.ingredientList);
this.dataForm.checkValueList = result.data.map((ele) => { this.dataForm.checkValueList = result.data.map((ele) => {
return { return {
mainId: ele.mainId, mainId: ele.mainId,
id: ele.id, id: ele.id,
checkDetId: ele.id, checkDetId: ele.checkDetId,
checkValue: ele.checkValue, checkValue: ele.checkValue,
isStandard: true, isStandard: true,
showIcon: false, showIcon: false,
} }
}) })
valueList.forEach((ele,index) => { this.ingredientList.forEach((ele, i) => {
console.log(ele); valueList.forEach((item, index) => {
if (this.dataForm.checkValueList[index].checkValue >= ele.minValue && this.dataForm.checkValueList[index].checkValue <= ele.maxValue) { if (ele.checkDetId == item.checkDetId) {
this.dataForm.checkValueList[index].showIcon = true this.ingredientList[i].minValue = item.minValue
this.dataForm.checkValueList[index].isStandard = true this.ingredientList[i].maxValue = item.maxValue
} else {
this.dataForm.checkValueList[index].showIcon = true
this.dataForm.checkValueList[index].isStandard = false
} }
// }) })
})
valueList.forEach((ele, index) => {
this.dataForm.checkValueList.forEach((item, i) => {
if (ele.checkDetId == item.checkDetId && item.checkValue >= ele.minValue && item.checkValue <= ele.maxValue) {
console.log(1111)
item.showIcon = true
item.isStandard = true
} else {
item.showIcon = true
item.isStandard = false
}
})
}) })
}) })
}); });
@ -501,7 +543,8 @@ export default {
}, },
goback() { goback() {
this.$emit('refreshDataList'); this.$emit('refreshDataList');
this.visible = false; this.visible = false
this.ingredientList = []
// this.initData(); // this.initData();
}, },
goEdit() { goEdit() {

View File

@ -53,8 +53,9 @@ const tableProps = [
label: '取样人' label: '取样人'
}, },
{ {
prop: 'appearance', prop: 'checkResult',
label: '是否合格' label: '是否合格',
filter: (val) => val == false ? '不合格' : '合格' ,
}, },
{ {
prop: 'materialGrade', prop: 'materialGrade',
@ -157,6 +158,26 @@ export default {
this.dataListLoading = false; this.dataListLoading = false;
}); });
}, },
deleteHandle(id, name, index, data) {
this.$confirm(`确认要删除序号为${index}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
async getDict() { async getDict() {
// //
const res = await getHotMaterialAllList(); const res = await getHotMaterialAllList();

View File

@ -150,6 +150,26 @@ export default {
// //
const res = await getList(); const res = await getList();
this.formConfig[1].selectOptions = res.data; this.formConfig[1].selectOptions = res.data;
},
deleteHandle(id, name, index,data) {
this.$confirm(`确认要删除报废原因名为${data.content}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
}, },
buttonClick(val) { buttonClick(val) {
switch (val.btnName) { switch (val.btnName) {

View File

@ -0,0 +1,175 @@
/*
* @Author: zhp
* @Date: 2024-01-17 16:59:30
* @LastEditTime: 2024-01-17 16:59:30
* @LastEditors: zhp
* @Description:
*/
/*
* @Author: zwq
* @Date: 2022-08-24 11:19:43
* @LastEditors: zhp
* @LastEditTime: 2024-01-10 10:29:29
* @Description:
*/
export default {
data() {
/* eslint-disable */
return {
urlOptions: {
getDataListURL: '',
deleteURL: '',
statusUrl: '',
exportURL: ''
},
tableData: [],
listQuery: {
pageSize: 10,
pageNo: 1,
total: 1,
},
exportLoading: false,
dataListLoading: false,
addOrEditTitle: '',
addOrUpdateVisible: false,
}
},
created() {
},
mounted() {
// this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.list;
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.listQuery.pageSize = val;
this.listQuery.pageNo = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.listQuery.pageNo = val;
this.getDataList();
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
cancel(id) {
this.$refs["popover-" + id].showPopper = false;
},
//改变状态
changeStatus(id) {
this.$http
.post(this.urlOptions.statusUrl, { id })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$refs["popover-" + id].showPopper = false;
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.getDataList();
},
});
})
.catch(() => { });
},
//tableBtn点击
handleClick(val) {
if (val.type === "edit") {
this.addOrUpdateVisible = true;
this.addOrEditTitle = "编辑";
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data.id);
});
} else if (val.type === "delete") {
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex,val.data)
} else if (val.type === "change") {
this.changeStatus(val.data.id)
} else {
this.otherMethods(val)
}
},
// 删除
deleteHandle(id, name, index) {
this.$confirm(`确定对${name ? '[名称=' + name + ']' : '[序号=' + index + ']'}进行删除操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
//search-bar点击
buttonClick(val) {
switch (val.btnName) {
case "search":
this.listQuery.xm1 = val.xm1;
this.listQuery.xm2 = val.xm2;
this.listQuery.pageNo = 1;
this.getDataList();
break;
case "add":
this.addOrEditTitle = '新增'
this.addOrUpdateVisible = true;
this.addOrUpdateHandle()
break;
default:
console.log(val)
}
},
handleCancel() {
this.$refs.addOrUpdate.formClear()
this.addOrUpdateVisible = false
this.addOrEditTitle = ''
},
handleConfirm() {
this.$refs.addOrUpdate.dataFormSubmit()
},
successSubmit() {
this.handleCancel()
this.getDataList()
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = { ...this.queryParams };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '工厂.xls');
this.exportLoading = false;
}).catch(() => { });
}
}
}

View File

@ -20,7 +20,7 @@
import AddOrUpdate from './add-or-updata'; import AddOrUpdate from './add-or-updata';
import DetailOrUpdate from './detail-or-updata'; import DetailOrUpdate from './detail-or-updata';
import basicPage from '../../../core/mixins/basic-page'; import basicPage from './basic-page';
import { parseTime } from '../../../core/mixins/code-filter'; import { parseTime } from '../../../core/mixins/code-filter';
import { import {
getQualityScrapLogPage, getQualityScrapLogPage,
@ -143,6 +143,26 @@ export default {
}); });
} }
}, },
deleteHandle(id, name, index, data) {
this.$confirm(`确认要删除序号为${index}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
// //
getDict() { getDict() {
getWorkOrderList().then((res) => { getWorkOrderList().then((res) => {

View File

@ -134,6 +134,26 @@ export default {
this.listQuery.total = response.data.total; this.listQuery.total = response.data.total;
this.dataListLoading = false; this.dataListLoading = false;
}); });
},
deleteHandle(id, name, index) {
this.$confirm(`确认要删除报废类型名为${name}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
}, },
buttonClick(val) { buttonClick(val) {
switch (val.btnName) { switch (val.btnName) {

View File

@ -310,7 +310,27 @@ export default {
// }, // },
}, },
methods: { methods: {
/** 获取搜索栏的产线列表 */ /** 获取搜索栏的产线列表 */
deleteHandle(id, name, index, data) {
this.$confirm(`确认要删除序号为${index}的数据项?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.urlOptions.deleteURL(id).then(({ data }) => {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
});
})
.catch(() => { });
},
getProductLineList() { getProductLineList() {
this.$axios('/base/core-work-order/listbyfilter').then((response) => { this.$axios('/base/core-work-order/listbyfilter').then((response) => {
this.searchBarFormConfig[0].selectOptions = response.data.map( this.searchBarFormConfig[0].selectOptions = response.data.map(

View File

@ -0,0 +1,179 @@
<!--
* @Author: zhp
* @Date: 2024-01-24 15:15:24
* @LastEditTime: 2024-01-24 15:38:53
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="app-container">
<div>
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="日" prop="reportTime">
<el-date-picker v-model="reportTime" @change="changeTime" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-if="this.$auth.hasPermi('report:glass-month:query')" type="primary" size="small"
@click="getDataList">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
@click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</div>
<inputTable :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" :type="listQuery.reportType"
@refreshDataList="getDataList" />
<!-- <pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList" /> -->
</div>
</template>
<script>
import { parseTime } from '../../core/mixins/code-filter';
import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
import inputTable from './inputTable.vue';
import { getCorePLList } from '@/api/base/coreProductionLine';
import moment from 'moment'
export default {
components: { inputTable },
data() {
return {
urlOptions: {
getDataListURL: getGlassPage,
exportURL: exportGlasscExcel
},
listQuery: {
pageSize: 10,
pageNo: 1,
total: 0,
reportType: 2,
reportTime: []
},
reportTime: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [],
proLineList: [],
all: {}
};
},
created() {
this.getDict()
},
methods: {
async getDict() {
// 线
const res = await getCorePLList();
this.proLineList = res.data;
},
//
async getDataList() {
this.dataListLoading = true;
await this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.filter(item => {
this.proLineList.forEach(it => {
if (item.lineId === it.id) {
item.lineName = it.name
}
})
if (item.det === false) {
this.all = {
id: item.id,
remark: item.remark
}
}
return item.det === true
});
this.listQuery.total = response.data.length;
this.dataListLoading = false;
});
},
add0(m) {
return m < 10 ? '0' + m : m
},
format(shijianchuo) {
//shijianchuoparseInt
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
// console.log(time)
// 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 time
},
changeTime(val) {
if (val) {
// console.log(val)
// console.log(val.setHours(7, 0, 0))
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
// let time = this.format(val.setHours(7, 0, 0))
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
console.log(this.listQuery.reportTime);
} else {
this.listQuery.reportTime = []
}
},
//yy-mm-dd hh:mm:ss
timeFun(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 10;
this.getDataList();
break;
case 'export':
this.handleExport();
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
//
let params = { ...this.listQuery };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '原片生产周报.xls');
this.exportLoading = false;
}).catch(() => { });
}
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
</style>

View File

@ -0,0 +1,37 @@
<template>
<div class="tableInner">
<el-input v-model="list[itemProp]" @blur="changeInput" />
</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>
.tableInner .el-input__inner {
border: none;
padding: 0;
height: 33px;
}
</style>

View File

@ -0,0 +1,570 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-01-24 16:53:41
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="app-container">
<el-form :inline="true" :model="dataForm" class="demo-form-inline">
<el-form-item label="日" prop="reportTime">
<el-date-picker v-model="reportTime" @change="changeTime" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
@click="handleExport">导出</el-button>
</el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9',
color: '#606266'
}">
<el-table-column :label="'许昌安彩月成品生产汇总' + timeTips" align="center">
<el-table-column prop="lineId" label="生产线">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.lineId" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.lineId }} </span>
</template>
</el-table-column>
<el-table-column label="投入数㎡">
<el-table-column prop="inputNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputNow" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputNow }} </span>
</template>
</el-table-column>
<el-table-column prop="inputHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputHis" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputHis }} </span>
</template>
</el-table-column>
<el-table-column prop="inputTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputTrend" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="完成良品产量">
<el-table-column prop="goodProductNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductNow" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductNow }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductHis" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductHis }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="原片漏检率">
<el-table-column prop="missCheckNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckNow" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.missCheckNow }} </span>
</template>
</el-table-column>
<el-table-column prop="missCheckHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckHis" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.missCheckHis }} </span>
</template>
</el-table-column>
<el-table-column prop="missCheckTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.missCheckTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="综合良品率">
<el-table-column prop="goodProductPassNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassNow" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassNow }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductPassHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassHis" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassHis }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductPassTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassTrend }} </span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<div style="height: 50px;" class="remark" slot="append">
<h3 style="float: left;text-align: center;margin-left: 20px;">备注</h3>
<el-input :disabled="disabled" style="float:right;width: 96%;margin-top: 8px;" v-model="remark"></el-input>
</div>
</el-table>
<!-- 搜索工作栏 -->
<!-- <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" /> -->
<!-- 列表 -->
<!-- <base-table :table-props="tableProps" :page="1" :limit="10" :summary-method="getSummaries" show-summary
:table-data="list">
</base-table> -->
<!-- 分页组件 -->
<!-- <pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" /> -->
</div>
</template>
<script>
import {
getProductionDataList,
updateProductionDataList,
updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production';
// import Editor from '@/components/Editor';
import moment from 'moment';
// import DialogForm from './dialogForm.vue';
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
const tableProps = [
{
// width: 128,
prop: 'lineId',
label: '生产线',
},
{
// width: 128,
prop: '',
label: '投入数㎡',
align: 'center',
children: [
{
prop: 'inputNow',
label: '本周'
},
{
prop: 'inputHis',
label: '上周'
},
{
prop: 'inputTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '完成良品产量',
align: 'center',
children: [
{
prop: 'goodProductNow',
label: '本周'
},
{
prop: 'goodProductHis',
label: '上周'
},
{
prop: 'goodProductTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '原片漏检率',
align: 'center',
children: [
{
prop: 'missCheckNow',
label: '本周'
},
{
prop: 'missCheckHis',
label: '上周'
},
{
prop: 'missCheckTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '综合良品率',
align: 'center',
children: [
{
prop: 'goodProductPassNow',
label: '本周'
},
{
prop: 'goodProductPassHis',
label: '上周'
},
{
prop: 'goodProductPassTrend',
label: '增减'
}
]
},
];
export default {
name: 'statisticalData',
// components: {
// DialogForm,
// },
// mixins: [basicPageMixin],
data() {
return {
list: [],
remark: '',
monthValue:[],
// dynamicProps: [],
tableProps,
urlOptions: {
exportURL: exportProductExcel
},
isSave:false,
disabled: true,
sumArr: [],
timeTips:'',
searchBarFormConfig: [
// {
// type: 'select',
// label: '',
// placeholder: '',
// param: 'workOrderIdList',
// selectOptions: [],
// multiple: true,
// labelField: 'name',
// valueField: 'id',
// defaultSelect: []
// },
// {
// type: 'select',
// label: '',
// placeholder: '',
// param: 'productionId',
// selectOptions: [],
// },
// {
// type: 'input',
// label: '',
// placeholder: '',
// param: 'inspectionDetContent',
// },
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'checkTime',
// width: 350,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
// {
// type: this.$auth.hasPermi(
// 'base:quality-inspection-record:create'
// )
// ? 'button'
// : '',
// btnName: '',
// name: 'add',
// plain: true,
// color: 'success',
// },
],
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now()
}
},
// tableBtn: [
// this.$auth.hasPermi('base:quality-inspection-record:update')
// ? {
// type: 'edit',
// btnName: '',
// }
// : undefined,
// this.$auth.hasPermi('base:quality-inspection-record:delete')
// ? {
// type: 'delete',
// btnName: '',
// }
// : undefined,
// ].filter((v) => v),
// tableProps: [
// {
// prop: 'createTime',
// label: '',
// fixed: true,
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
// {
// // width: 128,
// prop: 'inspectionDetContent',
// label: '',
// },
// {
// // width: 128,
// prop: 'lineName',
// label: '线',
// },
// {
// // width: 128,
// prop: 'checkPerson',
// label: '',
// },
// {
// // width: 160,
// prop: 'checkTime',
// label: '',
// filter: (val) =>
// val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-',
// },
// {
// width: 90,
// prop: 'source',
// label: '',
// filter: (val) => ['', '', ''][val],
// },
// ],
// keys, queryParams pageNo, pageSize key
// searchBarKeys: ['inspectionDetContent', 'checkTime', 'productionLineId'],
// form: {
// id: undefined,
// inspectionDetId: undefined,
// inspectionDetContent: undefined,
// productionLineId: undefined,
// sectionId: undefined,
// checkPerson: undefined,
// checkTime: undefined,
// source: undefined,
// explainText: undefined,
// remark: undefined,
// },
//
dataForm: {
// workOrderIdList:undefined,
// productionId: undefined,
// startTime: undefined,
// endTime: undefined,
reportTime: [],
reportType:2,
// productionLineId: null,
},
};
},
created() {
// this.getProductLineList();
},
mounted() {
// if (this.$route.params.startTime && this.$route.params.endTime) {
// this.searchBarFormConfig[0].defaultSelect = [
// this.$route.params.startTime,
// this.$route.params.endTime,
// ];
// this.queryParams.param = {};
// this.$set(
// this.queryParams.param,
// 'startTime',
// this.$route.params.startTime
// );
// this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
// } else {
// this.searchBarFormConfig[0].defaultSelect = [];
// }
this.getDataList()
},
methods: {
format(shijianchuo) {
//shijianchuoparseInt
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
// console.log(time)
// 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 time
},
changeTime(val) {
if (val) {
// console.log(val)
// console.log(val.setHours(7, 0, 0))
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
// let time = this.format(val.setHours(7, 0, 0))
this.dataForm.reportTime[0] = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.dataForm.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
console.log(this.dataForm.reportTime);
} else {
this.dataForm.reportTime = []
}
},
handleExport() {
//
let params = { ...this.dataForm };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '成品生产月报.xls');
this.exportLoading = false;
}).catch(() => { });
},
timeSelect() {
// switch (this.queryParams.timeDim) {
// case '1':
// if (this.timeValue[1] - this.timeValue[0] > 7 * 24 * 3600000) {
// this.$modal.msgError('7')
// this.timeValue = []
// }
// break
// case '2':
if (this.monthValue[1] - this.monthValue[0] > 729 * 24 * 3600000) {
this.$modal.msgError('最大时间范围为24个月请重新选择')//
this.monthValue = []
}
// break
// case '4':
// if (this.monthValue[1] - this.monthValue[0] > 729 * 24 * 3600000) {
// this.$modal.msgError('24')//
// this.monthValue = []
// }
// break
// default:
},
transformTime(timeStamp) {//
let year = moment(timeStamp).format('YYYY')
let month = moment(timeStamp).format('MM')
let newData = moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59'
let value = newData
console.log(value);
return value
},
// selectTime() {
// switch (this.queryParams.type) {
// case 1:
// this.queryParams.searchTime = this.monthValue
// break;
// case 2:
// this.queryParams.searchTime = this.weekValue
// break;
// default:
// this.queryParams.searchTime = this.dateValue
// }
// },
editDataList() {
this.disabled = false
this.isSave = true
},
async saveDataList() {
let obj = {}
this.list.forEach((ele, index) => {
if (ele.det === false) {
this.list[index].lineId = ''
this.list[index].remark = this.remark
obj = ele
this.list.splice(index,1)
}
})
let updateArr = this.list
// console.log(JSON.stringify(updateArr[1]))
const result = await Promise.all([
await updateSumProductionDataList(obj),
await updateProductionDataList(updateArr),
]);
if (result[0] == true && result[1] == true) {
// console.log(res)
this.disabled = true
this.isSave = false
this.getDataList()
} else {
this.$modal.msgError('更新失败');
}
},
async getDataList() {
if (this.monthValue.length > 0) {
console.log(this.monthValue)
this.dataForm.reportTime[0] = this.transformTime(this.monthValue[0])
// this.queryParams.startTime = this.monthValue[0]
this.dataForm.reportTime[1] = this.transformTime(this.monthValue[1])
this.timeTips = moment(this.monthValue[0]).format('YYYY-MM-DD') + ' - ' + moment(this.monthValue[1]).format('YYYY-MM-DD')
console.log(this.timeTips);
} else {
// this.$modal.msgError('')
// return false
}
console.log(this.dataForm);
const res = await this.$axios({
url: '/base/report-auto-production/page',
method: 'get',
params: this.dataForm
})
console.log(res)
// let sum = undefined
// res.data.list.forEach((ele, index) => {
// if (ele.det === false) {
// sum = res.data.list.splice(index, 1)
// }
// })
res.data.list.forEach((ele,index) => {
if (ele.det === false) {
res.data.list[index].lineId = '合计'
this.remark = res.data.list[index].remark
}
});
this.list = res.data.list
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:38 * @LastEditTime: 2024-01-24 15:57:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -15,15 +15,18 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button> <el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button> <el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
<el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> @click="handleExport">导出</el-button>
</el-form> </el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{ <el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9', background: '#F2F4F9',
color: '#606266' color: '#606266'
}"> }">
<el-table-column :label="'许昌安彩月成品生产汇总' + timeTips" align="center"> <el-table-column :label="'许昌安彩月成品生产汇总' + timeTips" align="center">
<el-table-column prop="lineId" label="生产线"> <el-table-column prop="lineId" label="生产线">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.lineId" :disabled="disabled"></el-input> <el-input v-if="scope.row.det === true" v-model="scope.row.lineId" :disabled="disabled"></el-input>
@ -144,7 +147,8 @@
import { import {
getProductionDataList, getProductionDataList,
updateProductionDataList, updateProductionDataList,
updateSumProductionDataList updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production'; } from '@/api/report/production';
// import Editor from '@/components/Editor'; // import Editor from '@/components/Editor';
import moment from 'moment'; import moment from 'moment';
@ -251,9 +255,9 @@ export default {
monthValue:[], monthValue:[],
// dynamicProps: [], // dynamicProps: [],
tableProps, tableProps,
// dataForm: { urlOptions: {
// reportTime:undefined exportURL: exportProductExcel
// }, },
isSave:false, isSave:false,
disabled: true, disabled: true,
sumArr: [], sumArr: [],
@ -420,6 +424,19 @@ export default {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
handleExport() {
//
let params = { ...this.dataForm };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '成品生产月报.xls');
this.exportLoading = false;
}).catch(() => { });
},
timeSelect() { timeSelect() {
// switch (this.queryParams.timeDim) { // switch (this.queryParams.timeDim) {
// case '1': // case '1':

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:40 * @LastEditTime: 2024-01-24 15:50:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -15,10 +15,13 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button> <el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button> <!-- <el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button>
<el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> <el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> -->
</el-form> </el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{ <el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9', background: '#F2F4F9',
color: '#606266' color: '#606266'

View File

@ -0,0 +1,37 @@
<template>
<div class="tableInner">
<el-input v-model="list[itemProp]" @blur="changeInput" />
</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>
.tableInner .el-input__inner {
border: none;
padding: 0;
height: 33px;
}
</style>

View File

@ -0,0 +1,468 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2024-01-24 15:55:48
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="app-container">
<el-form :inline="true" :model="dataForm" class="demo-form-inline">
<el-form-item>
<el-form-item label="日" prop="reportTime">
<el-date-picker v-model="reportTime" @change="changeTime" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
@click="handleExport">导出</el-button>
</el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9',
color: '#606266'
}">
<el-table-column :label="'许昌安彩月成品生产汇总' + timeTips" align="center">
<el-table-column prop="lineId" label="生产线">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.lineId" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.lineId }} </span>
</template>
</el-table-column>
<el-table-column label="投入数㎡">
<el-table-column prop="inputNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputNow" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputNow }} </span>
</template>
</el-table-column>
<el-table-column prop="inputHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputHis" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputHis }} </span>
</template>
</el-table-column>
<el-table-column prop="inputTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.inputTrend" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.inputTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="完成良品产量">
<el-table-column prop="goodProductNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductNow" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductNow }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductHis" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductHis }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="原片漏检率">
<el-table-column prop="missCheckNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckNow" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.missCheckNow }} </span>
</template>
</el-table-column>
<el-table-column prop="missCheckHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckHis" :disabled="disabled"></el-input>
<span v-else>{{ scope.row.missCheckHis }} </span>
</template>
</el-table-column>
<el-table-column prop="missCheckTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.missCheckTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.missCheckTrend }} </span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="综合良品率">
<el-table-column prop="goodProductPassNow" label="本周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassNow" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassNow }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductPassHis" label="上周">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassHis" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassHis }} </span>
</template>
</el-table-column>
<el-table-column prop="goodProductPassTrend" label="增减">
<template slot-scope="scope">
<el-input v-if="scope.row.det === true" v-model="scope.row.goodProductPassTrend" :disabled="disabled">
</el-input>
<span v-else>{{ scope.row.goodProductPassTrend }} </span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
<div style="height: 50px;" class="remark" slot="append">
<h3 style="float: left;text-align: center;margin-left: 20px;">备注</h3>
<el-input :disabled="disabled" style="float:right;width: 96%;margin-top: 8px;" v-model="remark"></el-input>
</div>
</el-table>
<!-- 搜索工作栏 -->
<!-- <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" /> -->
<!-- 列表 -->
<!-- <base-table :table-props="tableProps" :page="1" :limit="10" :summary-method="getSummaries" show-summary
:table-data="list">
</base-table> -->
<!-- 分页组件 -->
<!-- <pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList" /> -->
</div>
</template>
<script>
import {
getProductionDataList,
updateProductionDataList,
updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production';
// import Editor from '@/components/Editor';
import moment from 'moment';
// import DialogForm from './dialogForm.vue';
// import basicPageMixin from '@/mixins/lb/basicPageMixin';
const tableProps = [
{
// width: 128,
prop: 'lineId',
label: '生产线',
},
{
// width: 128,
prop: '',
label: '投入数㎡',
align: 'center',
children: [
{
prop: 'inputNow',
label: '本周'
},
{
prop: 'inputHis',
label: '上周'
},
{
prop: 'inputTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '完成良品产量',
align: 'center',
children: [
{
prop: 'goodProductNow',
label: '本周'
},
{
prop: 'goodProductHis',
label: '上周'
},
{
prop: 'goodProductTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '原片漏检率',
align: 'center',
children: [
{
prop: 'missCheckNow',
label: '本周'
},
{
prop: 'missCheckHis',
label: '上周'
},
{
prop: 'missCheckTrend',
label: '增减'
}
]
},
{
// width: 128,
prop: '',
label: '综合良品率',
align: 'center',
children: [
{
prop: 'goodProductPassNow',
label: '本周'
},
{
prop: 'goodProductPassHis',
label: '上周'
},
{
prop: 'goodProductPassTrend',
label: '增减'
}
]
},
];
export default {
name: 'statisticalData',
// components: {
// DialogForm,
// },
// mixins: [basicPageMixin],
data() {
return {
list: [],
remark: '',
urlOptions: {
// getDataListURL: getGlassPage,
exportURL: exportProductExcel
},
// dynamicProps: [],
tableProps,
timeTips:'',
// dataForm: {
// reportTime:undefined
// },
isSave:false,
disabled: true,
sumArr: [],
weekValue1: null,//24
weekValue2: null,
searchBarFormConfig: [
// {
// type: 'select',
// label: '',
// placeholder: '',
// param: 'workOrderIdList',
// selectOptions: [],
// multiple: true,
// labelField: 'name',
// valueField: 'id',
// defaultSelect: []
// },
// {
// type: 'select',
// label: '',
// placeholder: '',
// param: 'productionId',
// selectOptions: [],
// },
// {
// type: 'input',
// label: '',
// placeholder: '',
// param: 'inspectionDetContent',
// },
{
type: 'datePicker',
label: '时间段',
dateType: 'daterange', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'checkTime',
// width: 350,
},
{
type: 'button',
btnName: '查询',
name: 'search',
color: 'primary',
},
// {
// type: this.$auth.hasPermi(
// 'base:quality-inspection-record:create'
// )
// ? 'button'
// : '',
// btnName: '',
// name: 'add',
// plain: true,
// color: 'success',
// },
],
pickerOptionsWeek: {
disabledDate(time) {
let day = Date.now()
let limitTime = moment(day).day(-1)
return time.getTime() > new Date(limitTime).getTime()
}
},
reportTime:undefined,
dataForm: {
// workOrderIdList:undefined,
// productionId: undefined,
// startTime: undefined,
// endTime: undefined,
reportTime: [],
reportType:2
// productionLineId: null,
},
};
},
created() {
// this.getProductLineList();
},
mounted() {
// if (this.$route.params.startTime && this.$route.params.endTime) {
// this.searchBarFormConfig[0].defaultSelect = [
// this.$route.params.startTime,
// this.$route.params.endTime,
// ];
// this.queryParams.param = {};
// this.$set(
// this.queryParams.param,
// 'startTime',
// this.$route.params.startTime
// );
// this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
// } else {
// this.searchBarFormConfig[0].defaultSelect = [];
// }
this.getDataList()
},
methods: {
format(shijianchuo) {
//shijianchuoparseInt
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
// console.log(time)
// 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 time
},
changeTime(val) {
if (val) {
// console.log(val)
// console.log(val.setHours(7, 0, 0))
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
// let time = this.format(val.setHours(7, 0, 0))
this.dataForm.reportTime[0] = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
this.dataForm.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
console.log(this.dataForm.reportTime);
} else {
this.dataForm.reportTime = []
}
},
editDataList() {
this.disabled = false
this.isSave = true
},
async saveDataList() {
let obj = {}
this.list.forEach((ele, index) => {
if (ele.det === false) {
this.list[index].lineId = ''
this.list[index].remark = this.remark
obj = ele
this.list.splice(index,1)
}
})
let updateArr = this.list
// console.log(JSON.stringify(updateArr[1]))
const result = await Promise.all([
await updateSumProductionDataList(obj),
await updateProductionDataList(updateArr),
]);
if (result[0].data == true && result[1].data == true) {
// console.log(res)
this.disabled = true
this.isSave = false
this.getDataList()
} else {
this.$modal.msgError('更新失败');
}
},
handleExport() {
//
let params = { ...this.dataForm };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '成品生产日报.xls');
this.exportLoading = false;
}).catch(() => { });
},
async getDataList() {
// if (this.weekValue1 && this.weekValue2) {
// this.dataForm.reportTime[0] = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
// // this.queryParams.startTime = this.monthValue[0]
// this.dataForm.reportTime[1] = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
// this.timeTips = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' - ' + moment(this.weekValue2).day(0).format('YYYY-MM-DD')
// } else {
// }
this.loading = true;
//
const res = await this.$axios({
url: '/base/report-auto-production/page',
method: 'get',
params: this.dataForm
})
// console.log(this.queryParams);
console.log(res)
// let sum = undefined
// res.data.list.forEach((ele, index) => {
// if (ele.det === false) {
// sum = res.data.list.splice(index, 1)
// }
// })
res.data.list.forEach((ele,index) => {
if (ele.det === false) {
res.data.list[index].lineId = '合计'
this.remark = res.data.list[index].remark
}
});
this.list = res.data.list
},
},
};
</script>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:37 * @LastEditTime: 2024-01-24 15:59:13
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -17,10 +17,14 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button> <el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button> <!-- <el-button type="primary" @click="getDataList()">查询</el-button> -->
<el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> <el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
@click="handleExport">导出</el-button>
</el-form> </el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{ <el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9', background: '#F2F4F9',
color: '#606266' color: '#606266'
@ -146,7 +150,8 @@
import { import {
getProductionDataList, getProductionDataList,
updateProductionDataList, updateProductionDataList,
updateSumProductionDataList updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production'; } from '@/api/report/production';
// import Editor from '@/components/Editor'; // import Editor from '@/components/Editor';
import moment from 'moment'; import moment from 'moment';
@ -252,6 +257,9 @@ export default {
remark:'', remark:'',
// dynamicProps: [], // dynamicProps: [],
tableProps, tableProps,
urlOptions: {
exportURL: exportProductExcel
},
timeTips:'', timeTips:'',
// dataForm: { // dataForm: {
// reportTime:undefined // reportTime:undefined
@ -358,6 +366,19 @@ export default {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
handleExport() {
//
let params = { ...this.dataForm };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '成品生产周报.xls');
this.exportLoading = false;
}).catch(() => { });
},
startWeek() { startWeek() {
if (this.weekValue1 && this.weekValue2) { if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime() let a = new Date(this.weekValue1).getTime()

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-12 13:45:25 * @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:45 * @LastEditTime: 2024-01-24 15:59:21
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -17,10 +17,15 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button> <el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button> <el-button v-if="this.$auth.hasPermi('report:glass-month:export')" type="primary" size="small" plain
<el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> @click="handleExport">导出</el-button>
<!-- <el-button type="primary" icon="el-icon-edit-outline" @click="editDataList()">编辑</el-button>
<el-button v-if="isSave" type="success" @click="saveDataList()">保存</el-button> -->
</el-form> </el-form>
<el-row style="float: right; margin-bottom: 5px">
<el-button size="small" @click="editDataList()">编辑</el-button>
<el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button>
</el-row>
<el-table :data="list" style="width: 100%" :header-cell-style="{ <el-table :data="list" style="width: 100%" :header-cell-style="{
background: '#F2F4F9', background: '#F2F4F9',
color: '#606266' color: '#606266'
@ -147,7 +152,8 @@
import { import {
getProductionDataList, getProductionDataList,
updateProductionDataList, updateProductionDataList,
updateSumProductionDataList updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production'; } from '@/api/report/production';
// import Editor from '@/components/Editor'; // import Editor from '@/components/Editor';
import moment from 'moment'; import moment from 'moment';
@ -250,6 +256,9 @@ export default {
data() { data() {
return { return {
list: [], list: [],
urlOptions: {
exportURL: exportProductExcel
},
remark: '', remark: '',
timeTips:'', timeTips:'',
yearValue1: null,//10 yearValue1: null,//10
@ -357,6 +366,19 @@ export default {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
handleExport() {
//
let params = { ...this.dataForm };
params.pageNo = undefined;
params.pageSize = undefined;
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
this.exportLoading = true;
return this.urlOptions.exportURL(params);
}).then(response => {
this.$download.excel(response, '成品生产月报.xls');
this.exportLoading = false;
}).catch(() => { });
},
startYear() { startYear() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) { if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('开始时间不能晚于结束时间,请重新选择') this.$modal.msgError('开始时间不能晚于结束时间,请重新选择')

View File

@ -94,7 +94,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
}; };
const onWsMessage = (event) => { const onWsMessage = (event) => {
const jsonStr = event.data; const jsonStr = event.data;
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr); // writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
this.messageCallback(jsonStr); this.messageCallback(jsonStr);
}; };
const onWsClose = (event) => { const onWsClose = (event) => {

View File

@ -6,7 +6,7 @@ import store from "@/store";
const timestr = new Date().getTime() const timestr = new Date().getTime()
const dcsConn = new WsConnect( const dcsConn = new WsConnect(
// websocket地址 // websocket地址
'ws://10.70.180.10:8081/xc-screen/websocket/dcsmsg'+timestr, process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr,
// 传递给后台的数据 // 传递给后台的数据
'', '',
(data) => { (data) => {
@ -39,7 +39,7 @@ const dcsConn = new WsConnect(
) )
// ISRA // ISRA
const mesIsra = new WsConnect( const mesIsra = new WsConnect(
'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
'', '',
(data) => { (data) => {
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data) // console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
@ -51,10 +51,6 @@ const mesIsra = new WsConnect(
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic}) store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
break; break;
} }
// case "KilnInfo": {
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
// break;
// }
default: default:
} }
}, },
@ -65,7 +61,7 @@ const mesIsra = new WsConnect(
// 原料 MA // 原料 MA
const mesMA = new WsConnect( const mesMA = new WsConnect(
'ws://10.70.2.2:8080/websocket/message?userId=MA'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr,
'', '',
(data) => { (data) => {
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data) // console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
@ -76,10 +72,6 @@ const mesMA = new WsConnect(
store.dispatch({type: "websocket/setMaterial", payload:msgData.data}) store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
break; break;
} }
// case "KilnInfo": {
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
// break;
// }
default: default:
} }
}, },
@ -90,7 +82,7 @@ const mesMA = new WsConnect(
// 能耗 EN // 能耗 EN
const mesEN = new WsConnect( const mesEN = new WsConnect(
// websocket地址 // websocket地址
'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr,
// 传递给后台的数据 // 传递给后台的数据
'', '',
// 成功拿到后台返回的数据的回调函数 // 成功拿到后台返回的数据的回调函数
@ -122,7 +114,7 @@ const mesEN = new WsConnect(
// 烟气 GAS // 烟气 GAS
const mesGAS = new WsConnect( const mesGAS = new WsConnect(
// websocket地址 // websocket地址
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr,
// 传递给后台的数据 // 传递给后台的数据
'', '',
// 成功拿到后台返回的数据的回调函数 // 成功拿到后台返回的数据的回调函数
@ -153,7 +145,7 @@ const mesGAS = new WsConnect(
// 缺陷分类/统计 IS // 缺陷分类/统计 IS
const mesIS = new WsConnect( const mesIS = new WsConnect(
// websocket地址 // websocket地址
'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=IS'+timestr,
// 传递给后台的数据 // 传递给后台的数据
'', '',
// 成功拿到后台返回的数据的回调函数 // 成功拿到后台返回的数据的回调函数
@ -164,6 +156,7 @@ const mesIS = new WsConnect(
switch (msgData?.type) { switch (msgData?.type) {
case "isra": { case "isra": {
store.dispatch({type: "websocket/setDefectChart", payload:{ store.dispatch({type: "websocket/setDefectChart", payload:{
checkType: msgData.detData.checkType,
dayStatistic: msgData.detData.dayStatistic, dayStatistic: msgData.detData.dayStatistic,
weekStatistic: msgData.detData.weekStatistic, weekStatistic: msgData.detData.weekStatistic,
monthStatistic: msgData.detData.monthStatistic, monthStatistic: msgData.detData.monthStatistic,
@ -183,9 +176,7 @@ const mesIS = new WsConnect(
// 深加工生产运行驾驶舱(除能源) SJG // 深加工生产运行驾驶舱(除能源) SJG
const mesSJG = new WsConnect( const mesSJG = new WsConnect(
// websocket地址 // websocket地址
// 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr, process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr,
// 'ws://192.168.0.33:48082/websocket/message?userId=SJG'+timestr,
'ws://192.168.1.62:48082/websocket/message?userId=SJG'+timestr,
// 传递给后台的数据 // 传递给后台的数据
'', '',
// 成功拿到后台返回的数据的回调函数 // 成功拿到后台返回的数据的回调函数
@ -202,6 +193,14 @@ const mesSJG = new WsConnect(
store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData}) store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData})
break; break;
} }
case "order": {
store.dispatch({type: "websocket/setWorkOrder", payload:msgData.detData})
break;
}
case "defectSum": {
store.dispatch({type: "websocket/setDefectSum", payload:msgData.detData})
break;
}
default: default:
} }
}, },
@ -211,6 +210,76 @@ const mesSJG = new WsConnect(
} }
) )
// 订单完成情况 OV
const mesOV = new WsConnect(
// websocket地址
process.env.VUE_APP_Socket_API + '/websocket/message?userId=OV'+timestr,
// 'ws://192.168.0.33:48082/websocket/message?userId=OV'+timestr,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
if (msgData == null) return;
switch (msgData?.type) {
case "order": {
store.dispatch({type: "websocket/setOrder", payload:msgData.detData})
break;
}
default:
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
}
)
// 本日生产良品率 CUTTING
const mesCUTTING = new WsConnect(
// websocket地址
process.env.VUE_APP_Socket_API + '/websocket/message?userId=CUTTING'+timestr,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
if (msgData == null) return;
console.log(msgData)
switch (msgData?.type) {
case "cutting": {
if (msgData?.name === 'table') {
store.dispatch({type: "websocket/setYieldRateTable", payload:msgData.data})
return
}
if (msgData?.dateType === 'day') {
store.dispatch({type: "websocket/setCutChartDay", payload:msgData.detData})
return
}
if (msgData?.dateType === 'weekly') {
store.dispatch({type: "websocket/setCutChartWeek", payload:msgData.detData})
return
}
if (msgData?.dateType === 'month') {
store.dispatch({type: "websocket/setCutChartMonth", payload:msgData.detData})
return
}
if (msgData?.dateType === 'year') {
store.dispatch({type: "websocket/setCutChartYear", payload:msgData.detData})
return
}
break;
}
default:
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
}
)
export const getDcsMsg = () => { export const getDcsMsg = () => {
dcsConn.createWebSoket() dcsConn.createWebSoket()
@ -220,6 +289,8 @@ export const getDcsMsg = () => {
mesGAS.createWebSoket() mesGAS.createWebSoket()
mesIS.createWebSoket() mesIS.createWebSoket()
mesSJG.createWebSoket() mesSJG.createWebSoket()
mesOV.createWebSoket()
mesCUTTING.createWebSoket()
} }
export const closeDcsMsg = () => { export const closeDcsMsg = () => {
dcsConn.closeWebsocket() dcsConn.closeWebsocket()
@ -229,4 +300,6 @@ export const closeDcsMsg = () => {
mesGAS.closeWebsocket() mesGAS.closeWebsocket()
mesIS.closeWebsocket() mesIS.closeWebsocket()
mesSJG.closeWebsocket() mesSJG.closeWebsocket()
mesOV.closeWebsocket()
mesCUTTING.closeWebsocket()
} }