mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.env.dev
View File

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

5
.env.stage
View File

@ -7,6 +7,11 @@ VUE_APP_TITLE = MES系统
# 芋道管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'
# dcs地址
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
# socket地址
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
# 积木报表指向地址
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'

11
src/api/report/production.js
View File

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

14
src/assets/icons/svg/arrow.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
src/assets/icons/svg/order.svg
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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

2
src/mixins/lb/basicPageMixin.js
View File

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

123
src/store/modules/websocket.js
View File

@ -20,61 +20,21 @@ const state = {
gasChartWeekTrend:{}, // 烟气
gasChartMonthTrend:{}, // 烟气
gasChartYearTrend:{}, // 烟气
israCheckType: [],
israDayStatistic: [],//缺陷统计
israWeekStatistic: [],//缺陷统计
israMonthStatistic: [],//缺陷统计
israYearStatistic: [],//缺陷统计
productline: [{
"creator": "1",
"sumOutputNum": 15,
"outputNum": 15,
"passRate": 0.6,
"lineName": "3#深加工",
"updateTime": "2024-01-04T16:00:19",
"updater": "1",
"inputNum": 15,
"deleted": false,
"recordTime": "2023-12-25T20:00:00",
"createTime": "2023-10-13T10:44:27",
"tenantId": 1,
"id": 1712660539187441666,
"productionLineId": 1737313260027285506,
"sumInputNum": 15
}, {
"creator": "1",
"sumOutputNum": 49,
"outputNum": 16,
"passRate": 0.3,
"lineName": "2#深加工",
"updateTime": "2024-01-04T16:00:19",
"updater": "1",
"inputNum": 17,
"deleted": false,
"recordTime": "2023-12-25T20:00:00",
"createTime": "2023-10-13T10:44:27",
"tenantId": 1,
"id": 1712660539187441665,
"productionLineId": 1737313119178362881,
"sumInputNum": 47
}, {
"creator": "1",
"sumOutputNum": 29,
"outputNum": 18,
"passRate": 0.5,
"lineName": "1#深加工",
"updateTime": "2024-01-04T16:00:19",
"updater": "1",
"inputNum": 20,
"deleted": false,
"recordTime": "2023-12-25T20:00:00",
"createTime": "2023-10-13T10:43:17",
"tenantId": 1,
"id": 1712660244285927426,
"productionLineId": 1737312466842456065,
"sumInputNum": 27
}], // SJG产线产量及良品率
productline: [], // SJG产线产量及良品率
sjgEquipment:[],// SJG设备报警
workOrder: [], // 工单监控
defectSum: [], // 缺陷汇总
order: [],// 订单完成情况
yieldRateTable: [],// 本日生产良率table
cutChartDay:[],
cutChartWeek:[],
cutChartMonth:[],
cutChartYear:[]
};
const mutations = {
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@ -123,12 +83,13 @@ const mutations = {
state.exhaustGasInfo = exhaustGasInfo
},
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
state.gasChartDayTrend = exhaustGasChart.dayTrend
state.gasChartWeekTrend = exhaustGasChart.weekTrend
state.gasChartMonthTrend = exhaustGasChart.monthTrend
state.gasChartYearTrend = exhaustGasChart.yearTrend
},
SET_DEFECTCHART: (state, israStatistic) => {
state.israCheckType = israStatistic.checkType
state.israDayStatistic = israStatistic.dayStatistic
state.israWeekStatistic = israStatistic.weekStatistic
state.israMonthStatistic = israStatistic.monthStatistic
@ -136,6 +97,33 @@ const mutations = {
},
SET_PRODUCTLINE: (state, 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 = {
@ -180,6 +168,33 @@ const actions = {
setProductline({ commit }, productline) {
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 {
namespaced: true,

8
src/styles/index.scss
View File

@ -201,3 +201,11 @@ input, textarea{
.el-form--label-top .el-form-item__label {
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;
}

42
src/views/OperationalOverview/AGVBoard.vue
View File

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

408
src/views/OperationalOverview/coldBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-04 16:41:17
* @LastEditTime: 2024-01-25 17:55:53
* @Description:
-->
<template>
@ -14,7 +14,7 @@
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
许昌安彩冷端看板
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<!-- <el-button
type="text"
@ -29,14 +29,16 @@
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'切割数据'" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" />
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" /> -->
<dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'产量及良率统计'" :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;">
<top-radio-group />
</div> -->
@ -47,16 +49,18 @@
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'ISRA 缺陷数据'" :title-icon="'eqMonitoring'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" />
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" /> -->
<dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' />
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :title="'废片 缺陷数据'" :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;">
<top-radio-group />
</div> -->
@ -78,25 +82,32 @@
</base-container>
</el-col>
<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;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<el-col :span="6">
<h4 style="margin: 5px 0 5px 0;">融化风机</h4>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" />
<el-col :span="6" style="">
<div style="font-size:20px;margin: 5px 0 10px 0">融化风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
</el-col>
<span class="eqLine"></span>
<el-col :span="6">
<h3 style="margin: 5px 0 5px 0;">退火风机</h3>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" />
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
</el-col>
<span class="eqLineTwo"></span>
<el-col :span="12" style="float: right;">
<h3 style="margin: 5px 0 5px 0;">产线设备</h3>
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" />
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> -->
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
</el-col>
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
:show-legend="true" /> -->
@ -122,6 +133,7 @@
<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
// import baseContainer1 from './components/baseContainer/indexcopy'
// import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup'
@ -133,13 +145,15 @@ import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel'
import pileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv'
// import axios from '@/utils/request'
import doubleYChart from './components/doubleYChart '
import doubleYChart from './components/coldDoubleYChart'
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null
import { parseTime } from '../core/mixins/code-filter';
import { formatDate } from '@/utils'
import LinearBarChart from './components/linearBarChart'
@ -170,7 +184,10 @@ const cutProps = [
{ prop: 'size', label: '规格' },
{ prop: 'productArea', label: '良品面积', width: 80 },
{ prop: 'wasteArea', label: '废片面积', width: 80 },
{ prop: 'product', label: '良品率', width: 80 },
{
prop: 'product', label: '良品率', width: 80,
subcomponent: colorDiv,
},
]
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
@ -242,7 +259,8 @@ export default {
pileBarChart,
TopRadioGroup,
doubleYChart,
LinearBarChart
LinearBarChart,
// baseContainer1
// pieChart1,
// pieChart2
// pieChart3
@ -260,6 +278,61 @@ export default {
ISRATableProps,
orderList: [],
times: '',
cutConfig: {
header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60,60, 132, 142, 105,105,90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
funConfig: {
header: ['序号', '设备名称', '运行状态'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 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:[],
EnergyMonitoringNameList: [],
equipmentList: [],
@ -334,6 +407,18 @@ export default {
this.beilv2 = _this.clientWidth / 1920
})()
}
// let obj = {
// 'a': 11111,
// 'b': 22222,
// 'c': 33333,
// 'd': 44444,
// 'e': 55555,
// }
// let index = 0
// for (let i in obj) {
// index++,
// console.log(index);
// }
// this.getList()
// const _this = this;
// window.onresize = () => {
@ -359,6 +444,45 @@ export default {
// removeEventListener('resize', resizeFun)
// },
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() {
// // this.loading = true;
// // 执行查询
@ -479,23 +603,52 @@ export default {
// FanInfo
if (this.funWsData.type === 'AnnealFanInfo') {
let arr = []
let index = 0
for (let i in this.funWsData.data.annealFanInfo) {
arr.push({
equipmentName: i,
status: this.funWsData.data.annealFanInfo[i]
})
index++,
// let index = 1,
// index++
// arr.push({
// equipmentName: i,
// status: this.funWsData.data.annealFanInfo[i]
// })
arr.push([
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
])
}
this.annealFunList = arr
this.annealFunConfig.data = arr
this.$refs['annealFunScrollBoard'].updateRows(arr)
}
if (this.funWsData.type === 'FanInfo') {
let arr = []
let index = 0
for (let i in this.funWsData.data.fanInfo) {
arr.push({
equipmentName: i,
status: this.funWsData.data.fanInfo[i]
})
index++,
// arr.push({
// equipmentName: i,
// status: this.funWsData.data.fanInfo[i]
// })
arr.push([
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
])
}
this.funList = arr
this.funConfig.data = arr
this.$refs['funScrollBoard'].updateRows(arr)
// this.funList = arr
}
},
cutWebsocketOnOpen() {
@ -507,31 +660,48 @@ export default {
this.CutInitWebSocket()
},
getSize(str) {
console.log(str.match(/\d+(\.\d+)?/g))
// console.log(str.match(/\d+(\.\d+)?/g))
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
return parseFloat(ele)
})
console.log(size[0] + '*' + size[1] + '*' + size[2]);
// console.log(size[0] + '*' + size[1] + '*' + size[2]);
return size[0] + '*' + size[1] + '*' + size[2]
},
// 数据接收
cutWebsocketOnMessage(e) {
this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
lineName: ele.lineName,
time: ele.time,
size: this.getSize(ele.size),
productArea: ele.productArea + '㎡',
wasteArea: ele.wasteArea + '㎡',
product: (ele.product * 100).toFixed(2) + '%'
}
// }
});
// this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// lineName: ele.lineName,
// time: ele.time,
// size: this.getSize(ele.size),
// productArea: ele.productArea + '㎡',
// wasteArea: ele.wasteArea + '㎡',
// product: (ele.product * 100).toFixed(2)
// }
// // }
// });
let cutArr = this.cutWsData.productHourData.map((item, index) => [
// console.log(item)
`
<span style="color:rgba(255,255,255,0.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') {
let nameList = []
let nameWasteList = []
@ -568,33 +738,51 @@ export default {
// let obj = JSON.parse(data.data)
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.SJGWsData.type === 'isra') {
this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
linename: ele.linename,
type: ele.type,
num: ele.num,
time:ele.time,
percent: ele.percent
}
// }
});
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// linename: ele.linename,
// type: ele.type,
// num: ele.num,
// time:ele.time,
// percent: ele.percent
// }
// // }
// });
console.log(this.SJGWsData.detData);
let 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') {
this.realEqList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
line: ele.line,
name: ele.name,
code: ele.code,
run: ele.run,
error: ele.error,
// percent: ele.percent
}
// }
});
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
]);
}
this.realEqConfig.data = this.realEqList
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
},
windowWidth(value) {
this.clientWidth = value
@ -665,25 +853,27 @@ export default {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
color: rgba(0, 255, 247, 1);
text-align: center;
.unit {
position: absolute;
left: 260px;
top: 25px;
color: rgba(255, 255, 255, 0.80);
font-size: 20px;
}
.time {
position: absolute;
left: 1360px;
color: rgba(255, 255, 255, 0.80);
top: 25px;
font-size: 20px;
}
.title-button {
color: #00fff0;
color: rgba(255, 255, 255, 0.80);
font-size: 20px;
position: absolute;
}
@ -737,6 +927,30 @@ export default {
</style>
<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 {
::-webkit-scrollbar {
width: 8px;
@ -813,4 +1027,44 @@ export default {
/* .container-main {
min-height: calc(100vh - 10em);
} */
.orange {
color: rgba(255, 209, 96, 1)
}
.white {
color: rgba(255, 255, 255, 0.5)
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

10
src/views/OperationalOverview/components/PieChart.vue
View File

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

82
src/views/OperationalOverview/components/baseContainer/index.vue
View File

@ -2,13 +2,13 @@
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2024-01-04 16:16:22
* @LastEditTime: 2024-01-24 17:01:21
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
<template>
<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'}"> -->
<template v-if="showLine">
<div class="line" />
@ -22,12 +22,21 @@
</template>
<div class="bar-item">
<div v-if="title" class="bar-title">
<div v-if="title" class="bar-title" ds>
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
{{ title }}
</span>
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
{{ time +'-'+ time2 }}
</span> -->
</div>
<!-- <div v-if="true" class="bar-title">
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
{{ title }}
</span>
</div> -->
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
<slot />
</div>
@ -74,26 +83,48 @@ export default {
beilv: {
type: Number,
default: 1
},
size: {
type: String,
default: ''
}
},
data() {
return {
curIndex: 0,
time: null,
time2:null
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
}
},
created() {
// console.log(this.back);
// this.$nextTick(() => {
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
// })
// console.log(this.$refs.baseContainer.style)
},
mounted () {
this.time = this.format(new Date().setHours(7,0,0));
// console.log(time);
//前一天时间
this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
},
methods: {
add0(m) {
return m < 10 ? '0' + m : m
},
format(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
},
changeTab(num) {
this.curIndex = num
this.$emit('tabSelect', num)
}
},
}
}
</script>
@ -106,8 +137,29 @@ export default {
// background-color: rgba($color: #061027, $alpha: 0.15);
position: relative;
// border: 2px solid;
background: url('../../../../assets/img/energy.png') no-repeat;
background-size: 100% 100%;
// background: url('../../../../assets/img/energy.png') no-repeat;
// background-size: 100% 100%;
&__small {
background: url(../../../../assets/img/short.png) no-repeat;
background-size: 100% 100%;
// background-position: 0 0;
}
&__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-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
// .line {
@ -170,14 +222,16 @@ export default {
.bar-title {
width: 100%;
color: #52fff1;
font-size: 1.5em;
color: #ffffff;
font-size: 24px;
padding: 0.67em;
display: flex;
}
.bar-content {
padding: 1em;
flex: 1 auto;
position: relative;
}
.no-padding {

18
src/views/OperationalOverview/components/baseTable.vue
View File

@ -1,26 +1,23 @@
<!--
* @Date: 2020-12-14 09:07:03
* @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
* @Description:
-->
<template>
<div class="visual-base-table-container scroll_table">
<div style="display: inline-block; width: 100%">
<el-table class="top" v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
:data="renderData" border style="width: 100%; background: transparent">
:header-cell-style="{ background: 'rgba(32, 55, 96, 1)', color: '#fff', height: '33px', }"
:row-style="setRowStyle" :data="renderData" border style="width: 100%; background: transparent">
<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"
v-bind="item">
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
@ -33,11 +30,9 @@
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item">
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
@ -45,7 +40,6 @@
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
@ -116,12 +110,12 @@ export default {
},
classOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.list
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleHeight: 0/1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};

292
src/views/OperationalOverview/components/coldDoubleYChart.vue Normal file
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>

44
src/views/OperationalOverview/components/colorDiv.vue Normal file
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>

65
src/views/OperationalOverview/components/doubleYChart .vue
View File

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

42
src/views/OperationalOverview/components/linearBarChart.vue
View File

@ -83,20 +83,38 @@ export default {
this.chart = null
},
methods: {
initChart(nameList,dataList) {
initChart(nameList, dataList) {
console.log('1111', dataList);
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
if (dataList.length !== 0) {
// if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
this.series = [{
type: 'bar',
data: dataList,
barWidth: 6
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 0.3, color: '#1295FF' }
]),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ced1d5',
fontSize: 12
}
},
}
// barBorderRadius: this.borderRadius
},
barWidth: 12,
}]
}
if (nameList.length !== 0) {
// }
// if (nameList.length !== 0) {
this.nameList = nameList
}
// }
this.chart.setOption({
tooltip: {
trigger: 'axis',
@ -112,6 +130,16 @@ export default {
bottom: '3%',
containLabel: true
},
// legend: {
// itemWidth: 10,
// itemHeight: 10,
// // right: '20px',
// data: nameList,
// textStyle: {
// fontSize: 12 * this.beilv,
// color: '#ced1d5'
// }
// },
xAxis: {
type: 'category',
axisLine: {
@ -142,6 +170,7 @@ export default {
}
},
axisLabel: {
show: true, // 是否显示 y 轴
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
@ -172,3 +201,4 @@ export default {
}
}
</script>

19
src/views/OperationalOverview/components/pileBarChart.vue
View File

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

277
src/views/OperationalOverview/processingBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-04 15:52:52
* @LastEditTime: 2024-01-25 17:55:51
* @Description:
-->
<template>
@ -14,7 +14,7 @@
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
许昌安彩深加工看板
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<!-- <el-button
type="text"
@ -29,21 +29,28 @@
<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-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :height="318" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" />
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" /> -->
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> -->
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" />
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :title="'工单监控'" :title-icon="'eqMonitoring'">
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
@ -56,37 +63,15 @@
</el-row> -->
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> -->
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
<p class="now-secondary-title">{{ op.name }}</p>
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
:percentage="op.progressRate * 100" class="custom-progress-bar" />
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p> -->
<p class="now-secondary-title">{{ op.name }}</p>
<!-- </el-col> -->
</el-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
<p class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
成都碲化镉5000一期订单
</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">成都碲化镉二订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">长利订单1000</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">国际工程20号订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
</el-row> -->
</div>
<!-- </div> -->
</base-container>
@ -95,7 +80,8 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :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;">
<top-radio-group />
</div> -->
@ -117,13 +103,13 @@
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="318 + 338 + 16" :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;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
:data-list="cxDataList" :height="359" :show-legend="true" />
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="359" :show-legend="true" />
</base-container>
</el-col>
</el-row>
@ -145,6 +131,7 @@
<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
// import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable'
@ -418,21 +405,26 @@ const qualityYearTableProps = [
]
const qualityYearList = [
{ eqName: '钢化炉', eqCode: '21321312', level: 1, content: 'Temperature high' },
{ eqName: '磨边机', eqCode: '32323232', level: 4, content: 'Device warning/alarm' },
{ eqName: '镀膜机', eqCode: '32213213', level: 3, content: 'Temperature high' },
{ eqName: '钢化清洗机', eqCode: '21321323', level: 1, content: 'P030: JET: Note: Transportation subsequent machine is not running' },
{ eqName: '固化机', eqCode: '21321321', level: 2, content: 'P040' },
{ eqName: '磨边清洗机', eqCode: '21321321', level: 2, content: 'M4033.6' },
{ eqName: '预热机', eqCode: '21321321', level: 2, content: 'M4033.6' },
{ eqName: '下片机', eqCode: '21321321', level: 3, content: 'P040' },
{
eqName: '冷却机', eqCode: '21321321', level: 4, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' },
{
eqName: 'A储片机106', eqCode: '21321321', level: 1, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
{ eqName: '二次清洗机', eqCode: '21321321', level: 2, content: 'Temperature high' },
{ eqName: '二次磨边机', eqCode: '21321321', level: 2, content: 'Temperature high' },
{ eqName: '测试设备', eqCode: '21321321', level: 2, content: 'Temperature high' }
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' },
{
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' },
{ name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' },
{ name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' },
{
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' },
{ name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' },
{ name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' },
{
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' },
{
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' },
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' },
{
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' },
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' }
]
const qualityMonthTableProps = [
@ -453,7 +445,50 @@ const qualityMonthTableProps = [
label: '缺陷类型'
},
]
const qualityMonthList = [
{
productionLineName: 'D61',
sectionName: '成型',
count: '3片',
inspectionTypeName: '细长泡'
},
{
productionLineName: 'D62',
sectionName: '组合落板',
count: '4片',
inspectionTypeName: '细长泡'
},
{
productionLineName: 'D61',
sectionName: '磨边',
count: '6片',
inspectionTypeName: '开口泡'
},
{
productionLineName: 'D63',
sectionName: '清洗',
count: '5片',
inspectionTypeName: '结石'
},
{
productionLineName: 'D64',
sectionName: '打孔',
count: '2片',
inspectionTypeName: '结石'
},
{
productionLineName: 'D63',
sectionName: '成型',
count: '7片',
inspectionTypeName: '开口泡'
},
{
productionLineName: 'D61',
sectionName: '上片',
count: '8片',
inspectionTypeName: '结石'
}
]
const orderProcessList = [
{
id: '1', outRate: '.8', name: '凯盛0322'
@ -500,6 +535,28 @@ export default {
// offsetWidth: null,
qualityYearTableProps,
cxNameList,
eqConfig: {
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70, 100, 200, 90, 90,],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
processConfig: {
header: ['序号', '产线名称', '工序', '损耗片数', '缺陷类型'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70, 130, 100, 120, 110,],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
cxDataList,
productLineList:[],
qualityYearList,
@ -509,7 +566,7 @@ export default {
// orderProcessList: [],
orderProcessList,
qualityTableProps1,
qualityMonthList:[],
qualityMonthList,
qualityMonthTableProps,
modelMonth: '',
qualityList1,
@ -559,6 +616,8 @@ export default {
this.initWebSocket()
this.SJGInitWebSocket()
this.getTimes()
// this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
// this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
window.onresize = () => {
@ -606,7 +665,37 @@ export default {
'get',
).then((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() {
@ -702,17 +791,31 @@ export default {
});
console.log(this.orderList)
} else if (this.SJGWsData.type === 'equipment') {
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
name: ele.name,
code: ele.code,
status: ele.status,
error: ele.error=== true ? '是' : '否'
}
// }
});
// this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// name: ele.name,
// code: ele.code,
// status: ele.status,
// error: ele.error=== true ? '是' : '否'
// }
// // }
// });
let eqArr = this.SJGWsData.detData.map((item, index) => [
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
])
this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr)
// console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') {
// console.log(this.wsData.detData);
@ -724,24 +827,40 @@ export default {
this.productLineList.forEach((item) => {
this.SJGWsData.detData.forEach((ele) => {
if (item.id == ele.productionLineId) {
nameList.push(item.name)
if (item.name.substr(0, 1) == "D") {
nameList.push(item.name)
outputNumList.push(ele.outputNum)
passRateList.push(ele.passRate * 100)
}
}
})
})
// progressRateList = EnergyNameList
// let EnergyDataList = []
this.SJGWsData.detData.forEach((ele) => {
passRateList.push(ele.passRate *100
)
})
this.SJGWsData.detData.forEach((ele) => {
outputNumList.push(ele.outputNum
)
})
// this.SJGWsData.detData.forEach((ele) => {
// })
// this.SJGWsData.detData.forEach((ele) => {
// })
// console.log(this.EnergyMonitoringNameList)
// console.log(this.EnergyMonitoringList)
// this.$nextTick(() => {
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-image: linear-gradient(to right, #4573fe, #47f8dc);
}
// ::v-deep .el-progress-bar__outer {
// background-color:rgba(71, 248, 220, 1);
// // background-image: rgba(71, 248, 220, 1))
// }
.visual-select {
position: absolute;
right: 1em;
@ -999,7 +1114,6 @@ export default {
margin-left: 3em;
}
}
</style>
<style scoped>
@ -1011,9 +1125,12 @@ export default {
flex: 1 1;
}
.h-full {
height: calc(100vh - 150px);
height: calc(100vh);
}
/* .container-main {
min-height: calc(100vh - 10em);
} */
.eqTable{
overflow: hidden;
}
</style>

266
src/views/base/coreEquipmentLineBind/dialogForm.vue Normal file
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>

51
src/views/base/coreEquipmentLineBind/index.vue
View File

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

12
src/views/base/equipmentBindSection/dialogForm.vue
View File

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

3
src/views/base/packagingPrintModel/add-or-updata.vue
View File

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

6
src/views/core/mixins/basic-page.js
View File

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

BIN
src/views/databoard/assets/head.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 132 KiB

15
src/views/databoard/components/Container.vue
View File

@ -11,7 +11,7 @@
<i
class=""
style="display: inline-block; margin-left: 12px; padding-top: 4px">
<img :src="imgSrc" width="20" height="20" alt="" />
<img :src="imgSrc" width="24" height="24" alt="" />
</i>
<span
style="
@ -107,6 +107,19 @@ export default {
background-size: 100% 100%;
background-position: 0 0;
}
&::after {
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
// background: inherit;
/* 设置模糊，不用 filter */
backdrop-filter: blur(5px);
z-index: -1;
}
}
.container-body {

148
src/views/databoard/components/DefectChart.vue
View File

@ -1,22 +1,31 @@
<template>
<div class="defect-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="defectChart" style="width:580px;height:238px;" v-show="!notMsg"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'DefectChart',
mixins: [resize],
components:{ NotMsg },
props: {
chartTime: ''
},
data() {
return {
chart: null,
tempData: []
tempData: [],
notMsg:false
}
},
computed: {
israCheckType() {
return this.$store.state.websocket.israCheckType
},
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
},
@ -34,34 +43,58 @@ export default {
israDayStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.tempData = israDayStatistic
this.tempData = this.israDayStatistic
this.updateChart()
this.$emit('emitFun')
}
}
},
israWeekStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.tempData = israWeekStatistic
this.tempData = this.israWeekStatistic
this.updateChart()
this.$emit('emitFun')
}
}
},
israMonthStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.tempData = israMonthStatistic
this.tempData = this.israMonthStatistic
this.updateChart()
this.$emit('emitFun')
}
}
},
israYearStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.tempData = israYearStatistic
this.tempData = this.israYearStatistic
this.updateChart()
this.$emit('emitFun')
}
}
},
chartTime: {// 监听类型变化，更新图
handler(newVal, oldVal) {
switch(this.chartTime){
case '日':
this.tempData = this.israDayStatistic
break;
case '周':
this.tempData = this.israWeekStatistic
break;
case '月':
this.tempData = this.israMonthStatistic
break;
case '年':
this.tempData = this.israYearStatistic
break;
default:
}
this.updateChart()
}
}
},
mounted() {
@ -72,6 +105,12 @@ export default {
},
methods: {
updateChart() {
if (!this.tempData || this.tempData.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (
this.chart !== null &&
this.chart !== '' &&
@ -79,60 +118,51 @@ export default {
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let legendData = []
this.chart = echarts.init(document.getElementById('defectChart'));
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 => {
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 = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 20, left: 48 },
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
grid: { top: 90, right: 12, bottom: 20, left: 70 },
legend: {
top: 10,
left: 80,
top: 0,
left: 8,
padding: 5,
itemWidth: 12,
itemHeight: 12,
@ -142,7 +172,7 @@ export default {
color: "#DFF1FE",
fontSize: 12,
},
data:['a','b','c','d','e'],
data:this.israCheckType,
},
xAxis: {
type: "category",
@ -191,19 +221,13 @@ export default {
},
className: "defect-chart-tooltip"
},
series: series
series: seriesData
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;

43
src/views/databoard/components/DefectClassChart.vue
View File

@ -1,18 +1,24 @@
<template>
<div class="defect-class-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'DefectClassChart',
mixins: [resize],
components:{ NotMsg },
props: {
chartType: ''
},
data() {
return {
chart: null
chart: null,
notMsg:false
}
},
computed: {
@ -27,6 +33,7 @@ export default {
return false
}
this.updateChart()
this.$emit('emitFun')
}
},
chartType: {// 监听类型变化，更新图
@ -43,6 +50,12 @@ export default {
},
methods: {
updateChart() {
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (
this.chart !== null &&
this.chart !== '' &&
@ -50,7 +63,7 @@ export default {
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
this.chart = echarts.init(document.getElementById('defectClassChart'));
let tempData = []
let xData = []
let yData = []
@ -66,28 +79,14 @@ export default {
})
var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 80, left: 60 },
// legend: {
// top: 10,
// left: 80,
// padding: 5,
// itemWidth: 12,
// itemHeight: 12,
// itemGap: 12,
// height: 12,
// textStyle: {
// color: "#DFF1FE",
// fontSize: 12,
// },
// data:['a','b','c','d','e'],
// },
grid: { top: 40, right: 12, bottom: 65, left: 70 },
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
rotate: 45
rotate: 25
},
axisTick: { show: false },
axisLine: {
@ -98,7 +97,7 @@ export default {
},
},
yAxis: {
name: "单位/次",
name: "单位/个",
nameTextStyle: {
color: "#fff",
fontSize: 10,
@ -136,7 +135,9 @@ export default {
barWidth: 12,
label: {
show: true,
position: 'top'
position: 'top',
distance: 10,
color: "#fffc"
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

86
src/views/databoard/components/DropDownBtn.vue Normal file
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>

42
src/views/databoard/components/EnergeMonitoringChart.vue
View File

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

61
src/views/databoard/components/FlueGas.vue → src/views/databoard/components/FlueGasChart.vue
View File

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

50
src/views/databoard/components/GasChart.vue
View File

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

2
src/views/databoard/components/Header.vue
View File

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

109
src/views/databoard/components/ISRAChart.vue
View File

@ -1,56 +1,28 @@
<template>
<div class="isra-chart"></div>
<div>
<NotMsg v-show="notMsg"/>
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default {
name: 'ISRAChart',
mixins: [resize],
components: {},
components:{ NotMsg },
props: {},
data() {
return {
chart: null,
notMsg:true,
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
chartData: [],
option: {
tooltip: {
trigger: 'item',
},
legend: {
bottom: '3%',
left: 'center',
icon: 'circle',
textStyle: {
color: '#fff'
}
},
title: {
text: 0,
subtext: '总数',
top: '43%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
lineHeight: 16,
color: '#fff',
},
subtextStyle: {
fontSize: 16,
color: '#fff00',
},
},
series: []
},
chartData: []
};
},
mounted() {
this.initChart();
},
activated() {
},
computed: {
@ -61,32 +33,43 @@ export default {
watch: {
israChartMsg: {
handler(newVal, oldVal) {
this.chartData = newVal
this.chartData = newVal || []
this.updateChart()
this.$emit('emitFun')
}
}
},
methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
updateChart() {
console.log('update')
let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num+=i.num
})
this.chart.setOption({
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
if (this.chartData && this.chartData.length > 0) {
this.notMsg = false
} else {
this.notMsg = true
return
}
this.chart = echarts.init(document.getElementById('israChart'));
var option = {
color:this.colors,
title:{
text: num,
subtext: '总数',
top: '43%',
top: '32%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 32,
lineHeight: 16,
color: '#fff',
},
subtextStyle: {
@ -94,6 +77,22 @@ export default {
color: '#fff00',
},
},
legend: {
bottom: '2%',
left: 'center',
itemWidth: 18,
itemHeight:18,
icon: 'circle',
textStyle: {
color: '#fff'
},
data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
name:item.name,
itemStyle:{
color: this.colors[index%4]
}
}))
},
series:[{
name: 'ISRA缺陷检测',
type: 'pie',
@ -106,9 +105,6 @@ export default {
labelLine: {
show: true,
},
itemStyle: {
borderRadius: 12
},
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
name:item.name,
value: item.num,
@ -126,8 +122,13 @@ export default {
]
}
}
}))}]
})
}))}],
tooltip: {
trigger: 'item',
className: "isra-chart-tooltip"
},
}
this.chart.setOption(option);
}
},
};
@ -139,3 +140,13 @@ export default {
height: 100%;
}
</style>
<style>
.isra-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.isra-chart-tooltip * {
color: #fff !important;
}
</style>

27
src/views/databoard/components/NotMsg.vue Normal file
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>

74
src/views/databoard/components/NumRateChart.vue
View File

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

16
src/views/databoard/components/ScrollBoard.vue
View File

@ -1,6 +1,6 @@
<template>
<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>
</template>
<script>
@ -18,6 +18,10 @@ export default {
height:{
type: String,
default: '380px'
},
id:{
type: String,
default: ''
}
},
data() {
@ -26,13 +30,3 @@ export default {
}
}
</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>

29
src/views/databoard/components/Switcher.vue
View File

@ -7,7 +7,7 @@
<template>
<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>
;
</div>
@ -17,18 +17,31 @@
export default {
name: 'Switcher',
components: {},
props: {},
props: {
showTitle:{
type: Array,
required: true,
default: () => {
return []
}
}
},
data() {
return {
value: true,
value: false,
};
},
computed: {
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>
@ -36,16 +49,18 @@ export default {
.switcher {
:deep(.el-switch__core) {
border: none;
background-color:rgba(3, 35, 60, 1);
background-color:#02457e;
height: 18px;
&::after {
background-color: #02457e;
background-color: #03233c;
}
}
:deep(.is-checked) {
.el-switch__core {
border: none;
height: 18px;
background-color: rgba(180, 255, 252, 0.71);
&::after {

75
src/views/databoard/components/TimePrompt.vue Normal file
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>

318
src/views/databoard/components/YieldRateChart.vue Normal file
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>

6
src/views/databoard/deepProcessing/BottomTwo.vue
View File

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

57
src/views/databoard/deepProcessing/DefectSum.vue
View File

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

30
src/views/databoard/deepProcessing/EnergyMonitoring.vue
View File

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

70
src/views/databoard/deepProcessing/EqAlarm.vue
View File

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

30
src/views/databoard/deepProcessing/NumRate.vue
View File

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

6
src/views/databoard/deepProcessing/TopThree.vue
View File

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

74
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
View File

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

6
src/views/databoard/deepProcessing/index.vue
View File

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

47
src/views/databoard/kiln/EnergeCost.vue
View File

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

13
src/views/databoard/kiln/EnergeTop.vue
View File

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

4
src/views/databoard/kiln/FanSequence.vue
View File

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

60
src/views/databoard/kiln/GasHandle.vue
View File

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

54
src/views/databoard/kiln/IsraCheck.vue
View File

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

3
src/views/databoard/kiln/RightTwo.vue
View File

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

9
src/views/databoard/kiln/index.vue
View File

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

44
src/views/databoard/utils/index.js Normal file
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);
}

41
src/views/databoard/wholePlant/DefectClass.vue
View File

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

32
src/views/databoard/wholePlant/DefectStatistics.vue
View File

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

65
src/views/databoard/wholePlant/OrderStatus.vue
View File

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

134
src/views/databoard/wholePlant/YieldRate.vue
View File

@ -1,45 +1,133 @@
<template>
<div style="flex: 2;" class="aaa">
<Container name="本日生产良品率" size="small" style="">
<ScrollBoard :config = "config" width='575px' height='300px'/>
<Container name="本日生产良品率" size="large">
<TimePrompt class="timeShow" :timestr="timestr" />
<div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
</div>
<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>
</div>
</template>
<script>
import Container from '../components/Container';
import Container from '../components/Container'
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 {
name: 'YieldRate',
components: { Container, ScrollBoard },
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart, TimePrompt },
computed: {
yieldRateTable() {
return this.$store.state.websocket.yieldRateTable
}
},
data() {
return {
config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
header: ['产线', '一等率', '二等率','成品率','废品率'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', ''],
[2, '设备2', '行2列3', '', ''],
[3, '设备3', '行3列3', '', ''],
[4, '设备4', '行4列3', '', ''],
[5, '设备5', '行5列3', '', ''],
[6, '设备6', '行6列3', '', ''],
[7, '设备7', '行7列3', '', ''],
[8, '设备8', '行8列3', '', ''],
[9, '设备9', '行9列3', '', ''],
[10, '设备10', '行10列3', '', '']
],
rowNum: 10
}
data: [],
rowNum: 5
},
chartType:false,
chartTime: "日",
timestr: ""
}
},
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: {
changeType(val) {
this.chartType = val
},
// 切换时间
toggleDate(val) {
this.chartTime = val
this.timestr = switchShowTime(this.chartTime)
},
// 数据更新
dateUpdate() {
this.timestr = switchShowTime(this.chartTime)
}
}
}
</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>

6
src/views/databoard/wholePlant/index.vue
View File

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

38
src/views/energy/base/energyQuantityManual/components/InputArea.vue Normal file
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>

44
src/views/energy/base/energyQuantityManual/components/SelectArea.vue Normal file
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>

111
src/views/energy/base/energyQuantityManual/components/energyQuantityManualAdd.vue
View File

@ -13,33 +13,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="水/气表名" prop="tableName">
<el-select v-model="form.tableName" placeholder="请选择" style="width: 100%;" filterable>
<el-option
v-for="item in getDictDatas(DICT_TYPE.TABLE_NAME)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span='12'>
<el-form-item label="抄表数" prop="readingQuantity">
<el-input-number v-model="form.readingQuantity" :min="0" :max="999999999999" :controls='false' style="width: 50%;"></el-input-number>
<el-select v-model="form.unit" placeholder="单位" style="width: 50%;">
<el-option
v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="抄表日期" prop="recordTime">
<el-date-picker
@ -53,11 +26,37 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span='24'>
<base-table
border
:table-props="tableProps"
:table-data="tableData"
:add-button-show="addButtonShow"
@emitFun="inputChange"
@emitButtonClick="emitButtonClick"
/>
</el-col>
</el-row>
</el-form>
</template>
<script>
import { energyQuantityManualCreate, energyQuantityManualUpdate, energyQuantityManualGet } from '@/api/base/energyQuantityManual'
import moment from 'moment'
import InputArea from './InputArea'
import SelectArea from './SelectArea'
const tableProps = [
{
prop: 'tableName',
label: '表名',
subcomponent: SelectArea
},
{
prop: 'readingQuantity',
label: '抄表数',
subcomponent: InputArea
}
]
export default {
name: 'EnergyQuantityManualAdd',
props: {
@ -71,18 +70,17 @@ export default {
},
data() {
return {
tableProps,
tableData: [],
addButtonShow:'新增',
form: {
id: '',
energyTypeId: '',
tableName: '',
readingQuantity: null,
unit: '',
recordTime: ''
},
rules: {
energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
tableName: [{ required: true, message: '水/气表名不能为空', trigger: 'change' }],
readingQuantity: [{ required: true, message: '抄表数不能为空', trigger: 'blur' }],
recordTime: [{ required: true, message: '抄表日期不能为空', trigger: 'change' }]
},
isEdit: false
@ -96,38 +94,71 @@ export default {
} else if (params.type === 'meterReading') {
this.isEdit = false
this.form.energyTypeId = params.energyTypeId
this.form.tableName = params.tableName + ''
let obj = {}
obj.tableName = params.tableName + ''
obj.readingQuantity = 0
this.tableData.push(obj)
}else {
this.isEdit = true
this.form.id = params.id
this.addButtonShow = ''
energyQuantityManualGet({id: this.form.id}).then(res => {
if (res.code === 0) {
this.form.energyTypeId = res.data.energyTypeId
this.form.tableName = res.data.tableName ? res.data.tableName+'' : ''
this.form.readingQuantity = res.data.readingQuantity
this.form.unit = res.data.unit ? res.data.unit+'' : ''
this.form.recordTime = res.data.recordTime ? res.data.recordTime : null
let obj = {}
obj.tableName = res.data.tableName ? res.data.tableName+'' : ''
obj.readingQuantity = res.data.readingQuantity
this.tableData.push(obj)
}
})
}
},
inputChange(val) {
this.tableData[val._pageIndex - 1][val.prop] = val[val.prop]
},
emitButtonClick() {
let obj = {}
obj.tableName = ''
obj.readingQuantity = 0
this.tableData.push(obj)
},
submitForm() {
this.$refs['energyQuantityManualForm'].validate((valid) => {
if (valid) {
if (!this.form.unit) {
this.$modal.msgError("抄表数单位不能为空");
// 校验表格
if (this.tableData.length === 0) {
this.$modal.msgError("抄表数据不能为空");
return false
}else{
for (let item of this.tableData) {
console.log(item)
if (!item.tableName || (!item.readingQuantity && item.readingQuantity!==0)) {
this.$modal.msgError("抄表数据有空值，请检查");
return false
}
}
}
if (this.isEdit) {
// 编辑
energyQuantityManualUpdate({...this.form}).then((res) => {
energyQuantityManualUpdate({
id:this.form.id,
energyTypeId:this.form.energyTypeId,
recordTime:this.form.recordTime,
tableName:this.tableData[0].tableName,
readingQuantity:this.tableData[0].readingQuantity
}).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit')
}
})
} else {
energyQuantityManualCreate({...this.form}).then((res) => {
energyQuantityManualCreate({
energyTypeId:this.form.energyTypeId,
recordTime:this.form.recordTime,
data:this.tableData
}).then((res) => {
if (res.code === 0) {
this.$modal.msgSuccess("操作成功");
this.$emit('successSubmit')
@ -143,6 +174,8 @@ export default {
this.$refs.energyQuantityManualForm.resetFields()
this.form.unit = ''
this.isEdit = false
this.addButtonShow = '新增'
this.tableData = []
}
}
}

31
src/views/energy/base/energyQuantityManual/index.vue
View File

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

2
src/views/order/monitoring/components/monitoringRingCharts.vue
View File

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

12
src/views/order/monitoring/orderCompletionMonitoring/index.vue
View File

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

19
src/views/quality/base/basicData/qualityInspectionBoxBtn/dialogForm.vue
View File

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

50
src/views/quality/base/basicData/qualityInspectionBoxBtn/index.vue
View File

@ -104,7 +104,7 @@ export default {
label: '工段',
},
{
prop: 'inspectionDetContent',
prop: 'inspectionInfoList',
label: '检测内容',
}
],
@ -133,17 +133,23 @@ export default {
// this.getList();
},
methods: {
/** 查询列表 */
// getList() {
// this.loading = true;
// // 执行查询
// getQualityInspectionBoxBtnPage(this.listQuery).then((response) => {
// this.list = response.data.list;
// this.total = response.data.total;
// this.loading = false;
// });
// },
/** 表单重置 */
getDataList() {
this.dataListLoading = true;
this.urlOptions.getDataListURL(this.listQuery).then(response => {
this.tableData = response.data.map((item) => {
// console.log(item);
return {
inspectionInfoList: item.inspectionInfoList.toString(),
productionLineId:item.productionLineId,
productionLineName:item.productionLineName,
sectionId: item.sectionId,
sectionName: item.sectionName
}
})
this.listQuery.total = response.data.total;
this.dataListLoading = false;
});
},
reset() {
this.form = {
id: null,
@ -156,6 +162,26 @@ export default {
};
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) {
switch (val.btnName) {
case 'search':

77
src/views/quality/base/qualityHotMaterial/add-or-updata.vue
View File

@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-12-08 13:46:17
* @LastEditTime: 2023-12-15 16:12:08
* @LastEditTime: 2024-01-22 15:29:53
* @LastEditors: zhp
* @Description:
-->
<template>
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="50%">
<small-title slot="title" :no-padding="true">
<el-drawer :visible.sync="visible" :show-close="true" :wrapper-closable="false" class="drawer" size="50%">
<small-title slot="title" :no-padding="true" @close="handleClose">
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
</small-title>
<div class="content">
@ -90,6 +90,18 @@
</span>
</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.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 :gutter="24">
<el-col :span="8">
@ -245,6 +257,7 @@ export default {
methods: {
judgeValue(val, minValue, maxValue, index) {
if (val >= minValue && val <= maxValue) {
console.log(val)
this.dataForm.checkValueList[index].showIcon = true
this.dataForm.checkValueList[index].isStandard = true
} else {
@ -252,6 +265,10 @@ export default {
this.dataForm.checkValueList[index].isStandard = false
}
},
handleClose() {
this.ingredientList = undefined
console.log(222222222);
},
dataFormSubmit() {
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
@ -288,7 +305,9 @@ export default {
Promise.all(array).then(res => {
console.log(res)
this.visible = false;
this.$modal.msgSuccess("修改成功");
this.$emit("refreshDataList");
this.ingredientList = []
}).catch(error => {
// 如果任何一个请求失败，将会进入这个 catch 块
console.log(error)
@ -326,6 +345,7 @@ export default {
Promise.all(array).then(res => {
this.$modal.msgSuccess("新增成功");
this.visible = false;
this.ingredientList= []
this.$emit("refreshDataList");
}).catch(error => {
// 如果任何一个请求失败，将会进入这个 catch 块
@ -434,6 +454,7 @@ export default {
init(id, isdetail) {
this.initData()
this.getDict()
this.ingredientList = []
this.isdetail = isdetail || false;
this.dataForm.id = id || undefined;
this.visible = true;
@ -445,7 +466,6 @@ export default {
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) {
// 获取产品详情
let valueList = []
@ -455,37 +475,59 @@ export default {
materialId: response.data.materialId
}).then((res) => {
console.log(res.data);
this.ingredientList = res.data
valueList = this.ingredientList.map((ele) => {
let arr = res.data
valueList = arr.map((ele) => {
// console.log(ele)
return {
checkDetId:ele.id,
maxValue: ele.maxValue,
minValue: ele.minValue
}
})
console.log(valueList);
getQualityHotMaterialDetList({
mainId: response.data.id
}).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) => {
return {
mainId: ele.mainId,
id: ele.id,
checkDetId: ele.id,
checkDetId: ele.checkDetId,
checkValue: ele.checkValue,
isStandard: true,
showIcon: false,
}
})
valueList.forEach((ele,index) => {
console.log(ele);
if (this.dataForm.checkValueList[index].checkValue >= ele.minValue && this.dataForm.checkValueList[index].checkValue <= ele.maxValue) {
this.dataForm.checkValueList[index].showIcon = true
this.dataForm.checkValueList[index].isStandard = true
} else {
this.dataForm.checkValueList[index].showIcon = true
this.dataForm.checkValueList[index].isStandard = false
this.ingredientList.forEach((ele, i) => {
valueList.forEach((item, index) => {
if (ele.checkDetId == item.checkDetId) {
this.ingredientList[i].minValue = item.minValue
this.ingredientList[i].maxValue = item.maxValue
}
// })
})
})
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() {
this.$emit('refreshDataList');
this.visible = false;
this.visible = false
this.ingredientList = []
// this.initData();
},
goEdit() {

25
src/views/quality/base/qualityHotMaterial/index.vue
View File

@ -53,8 +53,9 @@ const tableProps = [
label: '取样人'
},
{
prop: 'appearance',
label: '是否合格'
prop: 'checkResult',
label: '是否合格',
filter: (val) => val == false ? '不合格' : '合格' ,
},
{
prop: 'materialGrade',
@ -157,6 +158,26 @@ export default {
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() {
// 物料列表
const res = await getHotMaterialAllList();

20
src/views/quality/base/qualityScrapDet/index.vue
View File

@ -150,6 +150,26 @@ export default {
// 物料列表
const res = await getList();
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) {
switch (val.btnName) {

175
src/views/quality/base/qualityScrapLog/basic-page.js Normal file
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(() => { });
}
}
}

22
src/views/quality/base/qualityScrapLog/index.vue
View File

@ -20,7 +20,7 @@
import AddOrUpdate from './add-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 {
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() {
getWorkOrderList().then((res) => {

20
src/views/quality/base/qualityScrapType/index.vue
View File

@ -134,6 +134,26 @@ export default {
this.listQuery.total = response.data.total;
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) {
switch (val.btnName) {

22
src/views/quality/monitoring/qualityInspectionRecord/index.vue
View File

@ -310,7 +310,27 @@ export default {
// },
},
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() {
this.$axios('/base/core-work-order/listbyfilter').then((response) => {
this.searchBarFormConfig[0].selectOptions = response.data.map(

179
src/views/report/glass/day.vue Normal file
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) {
//shijianchuo是整数，否则要parseInt转换
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>

37
src/views/report/productionDayReport/InputArea.vue Normal file
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>

570
src/views/report/productionDayReport/index.vue Normal file
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) {
//shijianchuo是整数，否则要parseInt转换
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>

35
src/views/report/productionMonthReport/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:38
* @LastEditTime: 2024-01-24 15:57:10
* @LastEditors: zhp
* @Description:
-->
@ -15,15 +15,18 @@
</el-date-picker>
</el-form-item>
<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="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-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 :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>
@ -144,7 +147,8 @@
import {
getProductionDataList,
updateProductionDataList,
updateSumProductionDataList
updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production';
// import Editor from '@/components/Editor';
import moment from 'moment';
@ -251,9 +255,9 @@ export default {
monthValue:[],
// dynamicProps: [],
tableProps,
// dataForm: {
// reportTime:undefined
// },
urlOptions: {
exportURL: exportProductExcel
},
isSave:false,
disabled: true,
sumArr: [],
@ -420,6 +424,19 @@ export default {
this.getDataList()
},
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() {
// switch (this.queryParams.timeDim) {
// case '1':

11
src/views/report/productionShipmentsReport/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:40
* @LastEditTime: 2024-01-24 15:50:10
* @LastEditors: zhp
* @Description:
-->
@ -15,10 +15,13 @@
</el-date-picker>
</el-form-item>
<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="isSave" type="success" @click="saveDataList()">保存</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-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'

37
src/views/report/productionWeekReport copy/InputArea.vue Normal file
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>

468
src/views/report/productionWeekReport copy/index.vue Normal file
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) {
//shijianchuo是整数，否则要parseInt转换
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>

31
src/views/report/productionWeekReport/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:37
* @LastEditTime: 2024-01-24 15:59:13
* @LastEditors: zhp
* @Description:
-->
@ -17,10 +17,14 @@
</el-date-picker>
</el-form-item>
<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="isSave" type="success" @click="saveDataList()">保存</el-button>
<!-- <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'
@ -146,7 +150,8 @@
import {
getProductionDataList,
updateProductionDataList,
updateSumProductionDataList
updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production';
// import Editor from '@/components/Editor';
import moment from 'moment';
@ -252,6 +257,9 @@ export default {
remark:'',
// dynamicProps: [],
tableProps,
urlOptions: {
exportURL: exportProductExcel
},
timeTips:'',
// dataForm: {
// reportTime:undefined
@ -358,6 +366,19 @@ export default {
this.getDataList()
},
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() {
if (this.weekValue1 && this.weekValue2) {
let a = new Date(this.weekValue1).getTime()

32
src/views/report/productionYearReport/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-12 13:45:25
* @LastEditTime: 2023-12-14 14:56:45
* @LastEditTime: 2024-01-24 15:59:21
* @LastEditors: zhp
* @Description:
-->
@ -17,10 +17,15 @@
</el-date-picker>
</el-form-item>
<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="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-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-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'
@ -147,7 +152,8 @@
import {
getProductionDataList,
updateProductionDataList,
updateSumProductionDataList
updateSumProductionDataList,
exportProductExcel
} from '@/api/report/production';
// import Editor from '@/components/Editor';
import moment from 'moment';
@ -250,6 +256,9 @@ export default {
data() {
return {
list: [],
urlOptions: {
exportURL: exportProductExcel
},
remark: '',
timeTips:'',
yearValue1: null,//最多10年
@ -357,6 +366,19 @@ export default {
this.getDataList()
},
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() {
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')

2
src/websocket/websocket.js
View File

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

107
src/websocket/wsInterface.js
View File

@ -6,7 +6,7 @@ import store from "@/store";
const timestr = new Date().getTime()
const dcsConn = new WsConnect(
// 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) => {
@ -39,7 +39,7 @@ const dcsConn = new WsConnect(
)
// ISRA
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) => {
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
@ -51,10 +51,6 @@ const mesIsra = new WsConnect(
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
break;
}
// case "KilnInfo": {
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
// break;
// }
default:
}
},
@ -65,7 +61,7 @@ const mesIsra = new WsConnect(
// 原料 MA
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) => {
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
@ -76,10 +72,6 @@ const mesMA = new WsConnect(
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
break;
}
// case "KilnInfo": {
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
// break;
// }
default:
}
},
@ -90,7 +82,7 @@ const mesMA = new WsConnect(
// 能耗 EN
const mesEN = new WsConnect(
// 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
const mesGAS = new WsConnect(
// 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
const mesIS = new WsConnect(
// 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) {
case "isra": {
store.dispatch({type: "websocket/setDefectChart", payload:{
checkType: msgData.detData.checkType,
dayStatistic: msgData.detData.dayStatistic,
weekStatistic: msgData.detData.weekStatistic,
monthStatistic: msgData.detData.monthStatistic,
@ -183,9 +176,7 @@ const mesIS = new WsConnect(
// 深加工生产运行驾驶舱（除能源） SJG
const mesSJG = new WsConnect(
// websocket地址
// 'ws://10.70.2.2:8080/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,
process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
@ -202,6 +193,14 @@ const mesSJG = new WsConnect(
store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData})
break;
}
case "order": {
store.dispatch({type: "websocket/setWorkOrder", payload:msgData.detData})
break;
}
case "defectSum": {
store.dispatch({type: "websocket/setDefectSum", payload:msgData.detData})
break;
}
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 = () => {
dcsConn.createWebSoket()
@ -220,6 +289,8 @@ export const getDcsMsg = () => {
mesGAS.createWebSoket()
mesIS.createWebSoket()
mesSJG.createWebSoket()
mesOV.createWebSoket()
mesCUTTING.createWebSoket()
}
export const closeDcsMsg = () => {
dcsConn.closeWebsocket()
@ -229,4 +300,6 @@ export const closeDcsMsg = () => {
mesGAS.closeWebsocket()
mesIS.closeWebsocket()
mesSJG.closeWebsocket()
mesOV.closeWebsocket()
mesCUTTING.closeWebsocket()
}