merge test
This commit is contained in:
commit
44b45a6a04
12
.env.dev
12
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2023-12-29 08:57:36
|
||||
# @LastEditTime: 2024-01-09 16:27:57
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
@ -14,6 +14,7 @@ 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.4.173:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
||||
@ -22,8 +23,15 @@ VUE_APP_TITLE = MES系统
|
||||
# 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'
|
||||
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||
# socket地址
|
||||
# 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_Socket_API = 'ws://192.168.0.33:48082'
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||
|
||||
|
||||
# 根据服务器或域名修改
|
||||
PUBLIC_PATH = 'http://192.168.0.33:8889/'
|
||||
PUBLIC_PATH = ''
|
||||
|
||||
# 二级部署路径
|
||||
# VUE_APP_APP_NAME ='yudao-admin'
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
"dependencies": {
|
||||
"@antv/x6": "^2.15.3",
|
||||
"@babel/parser": "7.18.4",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.27.2",
|
||||
"benz-amr-recorder": "^1.1.5",
|
||||
@ -80,6 +81,7 @@
|
||||
"vue-plugin-hiprint": "0.0.54-fix",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.4.9",
|
||||
"vue-seamless-scroll": "^1.1.23",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.2",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 37 KiB |
BIN
src/assets/img/high.png
Normal file
BIN
src/assets/img/high.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/img/logo-back.png
Normal file
BIN
src/assets/img/logo-back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 7.3 KiB |
BIN
src/assets/img/middle.png
Normal file
BIN
src/assets/img/middle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/img/short.png
Normal file
BIN
src/assets/img/short.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@ -48,6 +48,7 @@
|
||||
<script>
|
||||
import ScrollPane from './ScrollPane';
|
||||
import path from 'path';
|
||||
import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface"
|
||||
|
||||
export default {
|
||||
components: { ScrollPane },
|
||||
@ -58,6 +59,7 @@ export default {
|
||||
left: 0,
|
||||
selectedTag: {},
|
||||
affixTags: [],
|
||||
wsIsOpen: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -83,6 +85,27 @@ export default {
|
||||
document.body.removeEventListener('click', this.closeMenu);
|
||||
}
|
||||
},
|
||||
visitedViews(newVal, oldVal){
|
||||
let num = 0
|
||||
newVal && newVal.map(item => {
|
||||
if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
|
||||
num++
|
||||
}
|
||||
})
|
||||
if (num > 0) {
|
||||
if(!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
}
|
||||
}else{
|
||||
if (this.wsIsOpen) {
|
||||
closeDcsMsg()
|
||||
this.wsIsOpen = false
|
||||
console.log('关闭============')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTags();
|
||||
|
||||
@ -9,6 +9,7 @@ import store from './store';
|
||||
import router from './router';
|
||||
import directive from './directive'; // directive
|
||||
import plugins from './plugins'; // plugins
|
||||
// import { scrollBoard } from '@jiaminghi/data-view'
|
||||
|
||||
import './assets/icons'; // icon
|
||||
import './permission'; // permission control
|
||||
@ -78,8 +79,10 @@ Vue.use(CodeBrickZj)
|
||||
Vue.use(directive);
|
||||
Vue.use(plugins);
|
||||
Vue.use(VueMeta);
|
||||
// Vue.use(scrollBoard)
|
||||
// Vue.use(hljs.vuePlugin);
|
||||
|
||||
import scroll from 'vue-seamless-scroll'
|
||||
Vue.use(scroll)
|
||||
// bpmnProcessDesigner 需要引入
|
||||
import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
|
||||
Vue.use(MyPD);
|
||||
|
||||
@ -1,10 +1,90 @@
|
||||
const state = {
|
||||
fanFrequencyInfo:{},// 分机运行频率
|
||||
kilnInfo:{},// 窑炉信息
|
||||
gasInfo:{},// 天然气
|
||||
gasInfo:{},// 天然气流量图
|
||||
sumGasInfo: {},// 天然气总量
|
||||
|
||||
israKiln:[],// ISRA缺陷检测
|
||||
material:[]// 原料
|
||||
israKiln:[],// ISRA窑炉缺陷检测
|
||||
material:[],// 原料
|
||||
energyInfo: {
|
||||
elecQty1: '',
|
||||
elecQty2: '',
|
||||
waterQty: ''
|
||||
}, // 能耗
|
||||
energyWeekTrend:[],
|
||||
energyMonthTrend:[],
|
||||
energyYearTrend:[],// 能耗图
|
||||
energyMonitoring: [], // 能源监控
|
||||
exhaustGasInfo:{}, // 烟气
|
||||
gasChartDayTrend:{}, // 烟气
|
||||
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产线产量及良品率
|
||||
sjgEquipment:[
|
||||
{name: 'sadd', error:false,code: 'EQ202312121624540000072',status: "正常"}
|
||||
],// SJG设备报警
|
||||
workOrder: [], // 工单监控
|
||||
defectSum: [], // 缺陷汇总
|
||||
order: [],// 订单完成情况
|
||||
yieldRateTable: [],// 本日生产良率table
|
||||
cutChartDay:[],
|
||||
cutChartWeek:[],
|
||||
cutChartMonth:[],
|
||||
cutChartYear:[]
|
||||
};
|
||||
const mutations = {
|
||||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
|
||||
@ -16,6 +96,9 @@ const mutations = {
|
||||
SET_GASINFO: (state, gasInfo) => {
|
||||
state.gasInfo = gasInfo
|
||||
},
|
||||
SET_SUMGASINFO: (state, sumGasInfo) => {
|
||||
state.sumGasInfo = sumGasInfo
|
||||
},
|
||||
|
||||
|
||||
SET_ISRAKILN: (state, israKiln) => {
|
||||
@ -23,6 +106,74 @@ const mutations = {
|
||||
},
|
||||
SET_MATERIAL: (state, material) => {
|
||||
state.material = material
|
||||
},
|
||||
SET_ENERGYINFO: (state, energyInfo) => {
|
||||
if (Object.keys(energyInfo).length > 1) {
|
||||
state.energyInfo.elecQty1 = energyInfo.elecQty1
|
||||
state.energyInfo.elecQty2 = energyInfo.elecQty2
|
||||
} else {
|
||||
state.energyInfo.waterQty = energyInfo.waterQty
|
||||
}
|
||||
},
|
||||
SET_ENERGYTREND: (state, energyTrend) => {
|
||||
if (energyTrend.week.length > 0) {
|
||||
state.energyWeekTrend = energyTrend.week
|
||||
}
|
||||
if (energyTrend.month.length > 0) {
|
||||
state.energyMonthTrend = energyTrend.month
|
||||
}
|
||||
if (energyTrend.year.length > 0) {
|
||||
state.energyYearTrend = energyTrend.year
|
||||
}
|
||||
},
|
||||
SET_ENERGY_MONITORING: (state, energyMonitoring) => {
|
||||
state.energyMonitoring = energyMonitoring
|
||||
},
|
||||
SET_EXHAUSTGASINFO: (state, exhaustGasInfo) => {
|
||||
state.exhaustGasInfo = exhaustGasInfo
|
||||
},
|
||||
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
|
||||
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
|
||||
state.israYearStatistic = israStatistic.yearStatistic
|
||||
},
|
||||
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 = {
|
||||
@ -35,6 +186,9 @@ const actions = {
|
||||
setGasInfo({ commit }, gasInfo) {
|
||||
commit('SET_GASINFO', gasInfo.payload)
|
||||
},
|
||||
setSumGasInfo({ commit }, sumGasInfo) {
|
||||
commit('SET_SUMGASINFO', sumGasInfo.payload)
|
||||
},
|
||||
|
||||
|
||||
setIsraKiln({ commit }, israKiln) {
|
||||
@ -43,6 +197,54 @@ const actions = {
|
||||
setMaterial({ commit }, material) {
|
||||
commit('SET_MATERIAL', material.payload)
|
||||
},
|
||||
setEnergyInfo({ commit }, energyInfo) {
|
||||
commit('SET_ENERGYINFO', energyInfo.payload)
|
||||
},
|
||||
setEnergyTrend({ commit }, energyTrend) {
|
||||
commit('SET_ENERGYTREND', energyTrend.payload)
|
||||
},
|
||||
setEnergyMonitoring({ commit }, energyMonitoring) {
|
||||
commit('SET_ENERGY_MONITORING', energyMonitoring.payload)
|
||||
},
|
||||
setExhaustGasInfo({ commit }, exhaustGasInfo) {
|
||||
commit('SET_EXHAUSTGASINFO', exhaustGasInfo.payload)
|
||||
},
|
||||
setExhaustGasChart({ commit }, exhaustGasChart) {
|
||||
commit('SET_EXHAUSTGASCHART', exhaustGasChart.payload)
|
||||
},
|
||||
setDefectChart({ commit }, israStatistic) {
|
||||
commit('SET_DEFECTCHART', israStatistic.payload)
|
||||
},
|
||||
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,
|
||||
|
||||
@ -200,4 +200,12 @@ input, textarea{
|
||||
// 弹出框，上下分布，去掉label的padding-bottom
|
||||
.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;
|
||||
}
|
||||
@ -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-08 16:07:58
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -12,7 +12,7 @@
|
||||
lineHeight: 88 + 'px',
|
||||
fontSize: 31 + 'px'
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||||
许昌安彩AGV原片周转看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
@ -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> -->
|
||||
@ -85,16 +85,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 +108,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>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-29 16:41:18
|
||||
* @LastEditTime: 2024-01-09 15:34:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -29,26 +29,26 @@
|
||||
<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"
|
||||
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
|
||||
:table-data="cutTableDataList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'产量及良率统计'" :title-icon="'productLine'">
|
||||
<base-container :title="'产量及良率统计'" :size="'small'" :title-icon="'energyMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||||
:show-legend="true" />
|
||||
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
|
||||
:height="359" :show-legend="true" />
|
||||
</base-container>
|
||||
</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"
|
||||
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
|
||||
:table-data="ISRAList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
@ -56,13 +56,13 @@
|
||||
|
||||
<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 :height="256" :title="'废片 缺陷数据'" :size="'middle'" :title-icon="'scrap'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
<!-- <el-row :gutter="9"> -->
|
||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
|
||||
<pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
|
||||
<pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
|
||||
:height="359" />
|
||||
<!-- </el-col> -->
|
||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
@ -78,21 +78,24 @@
|
||||
</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="'middle'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<el-col :span="6">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
<h4 style="margin: 5px 0 5px 0;">融化风机</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="funList" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
<h4 style="margin: 5px 0 5px 0;">退火风机</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
|
||||
:table-data="annealFunList" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="float: right;">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
|
||||
<h4 style="margin: 5px 0 5px 0;">产线设备</h4>
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
|
||||
:table-data="realEqList" />
|
||||
</el-col>
|
||||
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||||
@ -130,6 +133,7 @@ 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 '
|
||||
@ -146,19 +150,16 @@ const EqMonitoringPropsFun = [
|
||||
{ prop: 'status', label: '运行状态', width: 80}
|
||||
]
|
||||
const EqMonitoringProps = [
|
||||
{ prop: 'productLine', label: '产线' },
|
||||
{ prop: 'equipmentName', label: '设备名称' },
|
||||
{ prop: 'equipmentCode', label: '设备编码' },
|
||||
{ prop: 'line', label: '产线' },
|
||||
{ prop: 'name', label: '设备名称' },
|
||||
{ prop: 'code', label: '设备编码' },
|
||||
{
|
||||
prop: 'status',
|
||||
prop: 'run',
|
||||
label: '运行状态',
|
||||
filter: (val) =>
|
||||
val != null ? ['正常', '计划停机', '故障'][val] : '',
|
||||
},
|
||||
{
|
||||
prop: 'error',
|
||||
label: '故障状态',
|
||||
filter: (val) => (val != null ? (val ? '是' : '否') : ''),
|
||||
},
|
||||
]
|
||||
const cutProps = [
|
||||
@ -170,7 +171,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 = ['周一', '周二', '周三', '周四', '周五']
|
||||
|
||||
@ -324,7 +328,7 @@ export default {
|
||||
this.funInitWebSocket()
|
||||
this.CutInitWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
|
||||
// this.getList()
|
||||
this.getTimes()
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
@ -334,7 +338,7 @@ export default {
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
this.getList()
|
||||
// this.getList()
|
||||
// const _this = this;
|
||||
// window.onresize = () => {
|
||||
// return (() => {
|
||||
@ -359,30 +363,30 @@ export default {
|
||||
// removeEventListener('resize', resizeFun)
|
||||
// },
|
||||
methods: {
|
||||
getList() {
|
||||
// this.loading = true;
|
||||
// 执行查询
|
||||
// let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
|
||||
// let obj = JSON.parse(data)
|
||||
// // for()
|
||||
// let arr = []
|
||||
// for (let i in obj.data.FanFrequencyInfo) {
|
||||
// arr.push({
|
||||
// equipmentName: i,
|
||||
// status: obj.data.FanFrequencyInfo[i]
|
||||
// })
|
||||
// }
|
||||
// this.funList = arr``
|
||||
this.$axios.get(
|
||||
'/monitoring/equipment-monitor/realtime-page',
|
||||
'get',
|
||||
this.queryParams
|
||||
).then((res) => {
|
||||
this.realEqList = res.data.list;
|
||||
// this.total = response.data.total;
|
||||
// this.loading = false;
|
||||
});
|
||||
},
|
||||
// getList() {
|
||||
// // this.loading = true;
|
||||
// // 执行查询
|
||||
// // let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
|
||||
// // let obj = JSON.parse(data)
|
||||
// // // for()
|
||||
// // let arr = []
|
||||
// // for (let i in obj.data.FanFrequencyInfo) {
|
||||
// // arr.push({
|
||||
// // equipmentName: i,
|
||||
// // status: obj.data.FanFrequencyInfo[i]
|
||||
// // })
|
||||
// // }
|
||||
// // this.funList = arr``
|
||||
// this.$axios.get(
|
||||
// '/monitoring/equipment-monitor/realtime-page',
|
||||
// 'get',
|
||||
// this.queryParams
|
||||
// ).then((res) => {
|
||||
// this.realEqList = res.data.list;
|
||||
// // this.total = response.data.total;
|
||||
// // this.loading = false;
|
||||
// });
|
||||
// },
|
||||
getTimes() {
|
||||
setInterval(this.getTimesInterval, 1000);
|
||||
},
|
||||
@ -414,7 +418,7 @@ export default {
|
||||
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=COLD${date}`
|
||||
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
|
||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||||
@ -433,7 +437,7 @@ export default {
|
||||
// const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
const cutWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=CUTTING${date}`
|
||||
const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
|
||||
|
||||
this.cutWebsocket = new WebSocket(cutWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
@ -506,6 +510,14 @@ export default {
|
||||
cutWebsocketOnError(e) {
|
||||
this.CutInitWebSocket()
|
||||
},
|
||||
getSize(str) {
|
||||
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]);
|
||||
return size[0] + '*' + size[1] + '*' + size[2]
|
||||
},
|
||||
// 数据接收
|
||||
cutWebsocketOnMessage(e) {
|
||||
this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
@ -516,11 +528,10 @@ export default {
|
||||
id: ele.id,
|
||||
lineName: ele.lineName,
|
||||
time: ele.time,
|
||||
size: ele.size,
|
||||
size: this.getSize(ele.size),
|
||||
productArea: ele.productArea + '㎡',
|
||||
wasteArea: ele.wasteArea + '㎡',
|
||||
product: (ele.product * 100).toFixed(2) + '%'
|
||||
|
||||
product: (ele.product * 100).toFixed(2)
|
||||
}
|
||||
// }
|
||||
});
|
||||
@ -532,7 +543,7 @@ export default {
|
||||
let wasteList = []
|
||||
let sumAreaList = []
|
||||
let yieldList = []
|
||||
// this.cutTableDataList =
|
||||
// this.cutTableDataList =
|
||||
this.cutWsData.coldDetData.forEach((ele, index) => {
|
||||
nameList.push(ele.lineName)
|
||||
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
|
||||
@ -572,6 +583,20 @@ export default {
|
||||
}
|
||||
// }
|
||||
});
|
||||
} 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
|
||||
}
|
||||
// }
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
windowWidth(value) {
|
||||
@ -643,7 +668,7 @@ export default {
|
||||
width: 100%;
|
||||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #00fff0;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
|
||||
.unit {
|
||||
@ -661,7 +686,7 @@ export default {
|
||||
}
|
||||
|
||||
.title-button {
|
||||
color: #00fff0;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-11-14 13:28:27
|
||||
* @LastEditTime: 2024-01-08 16:03:05
|
||||
* @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" />
|
||||
@ -74,6 +74,10 @@ export default {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -106,8 +110,25 @@ 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;
|
||||
}
|
||||
// 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,8 +191,8 @@ export default {
|
||||
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
color: #52fff1;
|
||||
font-size: 1.5em;
|
||||
color: #ffffff;
|
||||
font-size: 1.6em;
|
||||
padding: 0.67em;
|
||||
}
|
||||
|
||||
|
||||
@ -1,46 +1,44 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-28 09:00:44
|
||||
* @LastEditTime: 2024-01-08 14:09:05
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
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"
|
||||
>
|
||||
<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" />
|
||||
</el-table>
|
||||
<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(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" />
|
||||
</el-table>
|
||||
<vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
|
||||
<el-table class="bottom" 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">
|
||||
<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" />
|
||||
</el-table>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -109,7 +107,19 @@ export default {
|
||||
return this.tableConfig.filter((item, index) => {
|
||||
return this.selectedBox[index]
|
||||
})
|
||||
}
|
||||
},
|
||||
classOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.selectedBox = new Array(100).fill(true)
|
||||
@ -171,16 +181,23 @@ export default {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
}
|
||||
// .setting {
|
||||
// text-align: right;
|
||||
// padding: 15px;
|
||||
// .setting-box {
|
||||
// width: 100px;
|
||||
// }
|
||||
// i {
|
||||
// color: #aaa;
|
||||
// @extend .pointer;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.seamless-warp {
|
||||
height: 308px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.min {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.top .el-table__body-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.bottom .el-table__header-wrapper {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
44
src/views/OperationalOverview/components/colorDiv.vue
Normal file
44
src/views/OperationalOverview/components/colorDiv.vue
Normal 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>
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2023-12-29 16:18:17
|
||||
* @LastEditTime: 2024-01-09 14:42:02
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -88,11 +88,21 @@ export default {
|
||||
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 +110,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '产线良品率',
|
||||
symbol: 'circle', //变为实心圆
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
@ -126,10 +137,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,8 +148,8 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
width: 'auto',
|
||||
height: "auto",
|
||||
@ -187,11 +198,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 +240,15 @@ export default {
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '产量/㎡', // y轴上方的单位
|
||||
nameTextStyle: {// y轴上方单位的颜色
|
||||
color: '#fff'
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
// fontSize: 10,
|
||||
align: "right",
|
||||
},
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
|
||||
@ -142,6 +142,7 @@ export default {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true, // 是否显示 y 轴
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-29 15:15:50
|
||||
* @LastEditTime: 2024-01-08 16:06:49
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -12,7 +12,7 @@
|
||||
lineHeight: 88 + 'px',
|
||||
fontSize: 31 + 'px'
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
|
||||
许昌安彩深加工看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
<h3 class="time">{{ times }}</h3>
|
||||
@ -27,23 +27,23 @@
|
||||
</el-button> -->
|
||||
</el-row>
|
||||
<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="qualityYearTableProps"
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
|
||||
:table-data="equipmentList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||||
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -56,12 +56,12 @@
|
||||
</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 v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<el-progress :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>
|
||||
<p class="now-secondary-title">{{ op.name }}</p>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
<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 :height="256" :size="'middle'" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -117,7 +117,7 @@
|
||||
</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 :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@ -606,7 +606,7 @@ export default {
|
||||
'get',
|
||||
).then((res) => {
|
||||
// console.log('11111', res);
|
||||
this.qualityMonthList = res.data
|
||||
this.qualityMonthList = res.data ? res.data : []
|
||||
})
|
||||
},
|
||||
getTimes() {
|
||||
@ -637,9 +637,9 @@ export default {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
alert('您的浏览器不支持WebSocket')
|
||||
} else {
|
||||
const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
|
||||
// 实例化 WebSocket
|
||||
this.websocket = new WebSocket(wsUrl)
|
||||
@ -661,7 +661,8 @@ export default {
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
// console.log(date);
|
||||
const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=SJG${date}`
|
||||
console.log(process.env);
|
||||
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
|
||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||||
@ -675,7 +676,7 @@ export default {
|
||||
},
|
||||
SJGWebsocketOnOpen() {
|
||||
console.log('socket连接成功')
|
||||
console.log(this.SJGWebsocket.onmessage);
|
||||
// console.log(this.SJGWebsocket.onmessage);
|
||||
this.SJGWebsocket.onmessage()
|
||||
},
|
||||
// 连接建立失败重连
|
||||
@ -686,7 +687,7 @@ export default {
|
||||
// 数据接收
|
||||
SJGWebsocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.SJGWsData = JSON.parse(e.data)
|
||||
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
// console.log(this.wsData.detData);
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.SJGWsData.type === 'order') {
|
||||
@ -727,7 +728,6 @@ export default {
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(Array.from(new Set(nameList)))
|
||||
// progressRateList = EnergyNameList
|
||||
// let EnergyDataList = []
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
@ -741,7 +741,7 @@ export default {
|
||||
// console.log(this.EnergyMonitoringNameList)
|
||||
// console.log(this.EnergyMonitoringList)
|
||||
// this.$nextTick(() => {
|
||||
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
|
||||
this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
|
||||
}
|
||||
},
|
||||
// 数据发送
|
||||
@ -765,7 +765,7 @@ export default {
|
||||
// 数据接收
|
||||
websocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.wsData = JSON.parse(e.data)
|
||||
this.wsData = e?.data ? JSON.parse(e?.data) : {}
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.wsData.type === 'EnergyMonitoring') {
|
||||
let EnergyNameList = []
|
||||
@ -926,6 +926,10 @@ 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;
|
||||
@ -935,8 +939,6 @@ export default {
|
||||
// .container-main {
|
||||
// padding: 5px;
|
||||
// }
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-12-06 10:36:56
|
||||
* @LastEditTime: 2024-01-08 16:11:03
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@ -253,6 +253,7 @@ export default {
|
||||
dataRule: {
|
||||
code: [{ required: true, message: "产品编码不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
|
||||
specifications: [{ required: true, message: "规格不能为空", trigger: "blur" }],
|
||||
materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
|
||||
productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }],
|
||||
processTime: [{ required: true, message: "产线生产单位用时不能为空", trigger: "blur" }]
|
||||
|
||||
BIN
src/views/databoard/assets/defectStatistics.png
Normal file
BIN
src/views/databoard/assets/defectStatistics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 B |
BIN
src/views/databoard/assets/eqMonitor.png
Normal file
BIN
src/views/databoard/assets/eqMonitor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
BIN
src/views/databoard/assets/goodRate.png
Normal file
BIN
src/views/databoard/assets/goodRate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/views/databoard/assets/order.png
Normal file
BIN
src/views/databoard/assets/order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
@ -55,6 +55,24 @@ export default {
|
||||
return require('../assets/msg.png');
|
||||
case '烟气处理':
|
||||
return require('../assets/gas.png');
|
||||
case '产线缺陷统计':
|
||||
return require('../assets/defectStatistics.png');
|
||||
case '产线当日缺陷分类':
|
||||
return require('../assets/check.png');
|
||||
case '本日生产良品率':
|
||||
return require('../assets/goodRate.png');
|
||||
case '订单完成情况':
|
||||
return require('../assets/order.png');
|
||||
case '设备报警':
|
||||
return require('../assets/goodRate.png');
|
||||
case '各工序缺陷汇总':
|
||||
return require('../assets/check.png');
|
||||
case '能源监控':
|
||||
return require('../assets/defectStatistics.png');
|
||||
case '产线产量及良品率':
|
||||
return require('../assets/order.png');
|
||||
case '工单监控':
|
||||
return require('../assets/eqMonitor.png');
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
197
src/views/databoard/components/DefectChart.vue
Normal file
197
src/views/databoard/components/DefectChart.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="defect-chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
export default {
|
||||
name: 'DefectChart',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
chartTime: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
tempData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
israCheckType() {
|
||||
return this.$store.state.websocket.israCheckType
|
||||
},
|
||||
israDayStatistic() {
|
||||
return this.$store.state.websocket.israDayStatistic
|
||||
},
|
||||
israWeekStatistic() {
|
||||
return this.$store.state.websocket.israWeekStatistic
|
||||
},
|
||||
israMonthStatistic() {
|
||||
return this.$store.state.websocket.israMonthStatistic
|
||||
},
|
||||
israYearStatistic() {
|
||||
return this.$store.state.websocket.israYearStatistic
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
israDayStatistic: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '日') {
|
||||
this.tempData = this.israDayStatistic
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
israWeekStatistic: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周') {
|
||||
this.tempData = this.israWeekStatistic
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
israMonthStatistic: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月') {
|
||||
this.tempData = this.israMonthStatistic
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
israYearStatistic: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年') {
|
||||
this.tempData = this.israYearStatistic
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
let xData = []
|
||||
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 = []
|
||||
for (let j = 0;j < this.tempData.length; j++) {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
seriesData.push(obj)
|
||||
}
|
||||
|
||||
this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
|
||||
xData.push(item.name)
|
||||
})
|
||||
var option = {
|
||||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
||||
grid: { top: 80, right: 12, bottom: 20, left: 48 },
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 80,
|
||||
padding: 5,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 12,
|
||||
height: 12,
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
},
|
||||
data:this.israCheckType,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fffc",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/个",
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "defect-chart-tooltip"
|
||||
},
|
||||
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;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.defect-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
170
src/views/databoard/components/DefectClassChart.vue
Normal file
170
src/views/databoard/components/DefectClassChart.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="defect-class-chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
export default {
|
||||
name: 'DefectClassChart',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
chartType: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
israDayStatistic() {
|
||||
return this.$store.state.websocket.israDayStatistic
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
israDayStatistic: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal === oldVal) {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
}
|
||||
},
|
||||
chartType: {// 监听类型变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
let tempData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
|
||||
if (this.chartType === item.name) {
|
||||
tempData = item.data
|
||||
return
|
||||
}
|
||||
})
|
||||
tempData.length > 0 && tempData.map(item => {
|
||||
xData.push(item.checkType)
|
||||
yData.push(item.checkNum)
|
||||
})
|
||||
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'],
|
||||
// },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fffc",
|
||||
fontSize: 12,
|
||||
rotate: 45
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/次",
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "defect-chart-tooltip"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' }
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.defect-class-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.defect-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.defect-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
157
src/views/databoard/components/EnergeMonitoringChart.vue
Normal file
157
src/views/databoard/components/EnergeMonitoringChart.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="energe-monitoring-chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
export default {
|
||||
name: 'EnergeMonitoringChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
energyMonitoring() {
|
||||
return this.$store.state.websocket.energyMonitoring
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
energyMonitoring: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal === oldVal) {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
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 = {
|
||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
className: "energe-monitoring-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['电耗能'],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位',
|
||||
// min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '电耗能',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' }
|
||||
])
|
||||
},
|
||||
data: yData
|
||||
}
|
||||
]
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.energe-monitoring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.energe-monitoring-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.energe-monitoring-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
234
src/views/databoard/components/FlueGas.vue
Normal file
234
src/views/databoard/components/FlueGas.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="gas-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() {
|
||||
const colors = [
|
||||
'#12FFF5',
|
||||
'#2760FF',
|
||||
'#FFD160',
|
||||
'#E80091',
|
||||
'#8064ff',
|
||||
'#ff8a3b',
|
||||
'#8cd26d',
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
gasChartDayTrend() {
|
||||
return this.$store.state.websocket.gasChartDayTrend
|
||||
},
|
||||
gasChartWeekTrend() {
|
||||
return this.$store.state.websocket.gasChartWeekTrend
|
||||
},
|
||||
gasChartMonthTrend() {
|
||||
return this.$store.state.websocket.gasChartMonthTrend
|
||||
},
|
||||
gasChartYearTrend() {
|
||||
return this.$store.state.websocket.gasChartYearTrend
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
gasChartDayTrend: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '日') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
gasChartWeekTrend: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
gasChartMonthTrend: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
gasChartYearTrend: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
chartType: {// 监听类型变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
},
|
||||
chartTime: {// 监听时间变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
let gasName = ''
|
||||
const colors = ['#FFCB59'];
|
||||
let temp1 = []
|
||||
let temp2 = []
|
||||
let seriesData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
switch (this.chartTime) {
|
||||
case '日':{
|
||||
temp1 = this.gasChartDayTrend
|
||||
break;
|
||||
}
|
||||
case '周':{
|
||||
temp1 = this.gasChartWeekTrend
|
||||
break;
|
||||
}
|
||||
case '月':{
|
||||
temp1 = this.gasChartMonthTrend
|
||||
break;
|
||||
}
|
||||
case '年':{
|
||||
temp1 = this.gasChartYearTrend
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
switch (this.chartType) {
|
||||
case '氧气含量':{
|
||||
temp2 = temp1?.O2_float || []
|
||||
break;
|
||||
}
|
||||
case '二氧化硫':{
|
||||
temp2 = temp1?.SO2_float || []
|
||||
break;
|
||||
}
|
||||
case '一氧化氮':{
|
||||
temp2 = temp1?.NOX_float || []
|
||||
break;
|
||||
}
|
||||
case '颗粒物':{
|
||||
temp2 = temp1?.dust_float || []
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
temp2.length > 0 && temp2.map(i => {
|
||||
xData.push(i.time)
|
||||
yData.push(i.value)
|
||||
})
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
}else {
|
||||
seriesData = [{
|
||||
name: gasName,
|
||||
data: yData,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFCB59' + "40" },
|
||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
||||
{ offset: 1, color: '#FFCB59' + "00" },
|
||||
]),
|
||||
},
|
||||
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 = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#213259',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gas-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -17,7 +17,10 @@ export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
chartType: '', // 能源类型
|
||||
chartTime: ''
|
||||
},
|
||||
data() {
|
||||
const colors = [
|
||||
'#12FFF5',
|
||||
@ -30,22 +33,155 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.sumGasInfo
|
||||
},
|
||||
energyWeekTrend() {
|
||||
return this.$store.state.websocket.energyWeekTrend
|
||||
},
|
||||
energyMonthTrend() {
|
||||
return this.$store.state.websocket.energyMonthTrend
|
||||
},
|
||||
energyYearTrend() {
|
||||
return this.$store.state.websocket.energyYearTrend
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
energyWeekTrend: {// 监听周电能，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
energyMonthTrend: {// 监听月电能，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
energyYearTrend: {// 监听年电能，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
gasChartMsg: {// 监听天然气，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
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 gasName = ''
|
||||
const colors = ['#FFCB59'];
|
||||
let temp = []
|
||||
let seriesData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
switch (this.chartType) {
|
||||
case '电耗能':{
|
||||
gasName = '电耗能'
|
||||
if (this.chartTime === '周') {
|
||||
temp = this.energyWeekTrend || []
|
||||
}else if(this.chartTime === '月') {
|
||||
temp = this.energyMonthTrend || []
|
||||
}else{
|
||||
temp = this.energyYearTrend || []
|
||||
}
|
||||
temp && temp.map(i => {
|
||||
xData.push(i.time)
|
||||
yData.push(i.qty)
|
||||
})
|
||||
break;
|
||||
}
|
||||
case '天然气I':{
|
||||
if (this.chartTime === '周') {
|
||||
yData = this.gasChartMsg.hisSumGas1For7Day || []
|
||||
}else if(this.chartTime === '月') {
|
||||
yData = this.gasChartMsg.sumGas1ForMonth || []
|
||||
}else{
|
||||
yData = this.gasChartMsg.sumGas1ForYear || []
|
||||
}
|
||||
gasName = '天然气I'
|
||||
xData = this.getXdata()
|
||||
break;
|
||||
}
|
||||
default:
|
||||
gasName = '天然气II'
|
||||
if (this.chartTime === '周') {
|
||||
yData = this.gasChartMsg.hisSumGas2For7Day || []
|
||||
}else if(this.chartTime === '月') {
|
||||
yData = this.gasChartMsg.sumGas2ForMonth || []
|
||||
}else{
|
||||
yData = this.gasChartMsg.sumGas2ForYear || []
|
||||
}
|
||||
xData = this.getXdata()
|
||||
}
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
}else {
|
||||
seriesData = [{
|
||||
name: gasName,
|
||||
data: yData,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFCB59' + "40" },
|
||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
||||
{ offset: 1, color: '#FFCB59' + "00" },
|
||||
]),
|
||||
},
|
||||
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 = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
@ -82,71 +218,49 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
].map((v, i) => ({
|
||||
name: ['总量', '白班', '夜班'][i],
|
||||
data: v,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// i % 8 避免超过8个数据时无颜色的问题
|
||||
{ offset: 0, color: colors[i % 8] + '40' },
|
||||
{ offset: 0.5, color: colors[i % 8] + '20' },
|
||||
{ offset: 1, color: colors[i % 8] + '00' },
|
||||
]),
|
||||
},
|
||||
})),
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
className: "gas-tooltip"
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
},
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sidebarStatus(val) {
|
||||
console.log('sidebarStatus', val);
|
||||
this.chart && this.chart.dispose();
|
||||
|
||||
setTimeout(() => {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
}, 500);
|
||||
},
|
||||
gasChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
// this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
// this.updateChart()
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -156,3 +270,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>
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
filename: ISRAChart.vue
|
||||
author: liubin
|
||||
date: 2023-12-12 09:05:25
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="isra-chart"></div>
|
||||
</template>
|
||||
@ -68,9 +61,7 @@ export default {
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
@ -99,48 +90,18 @@ export default {
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontSize: 20,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series:[{
|
||||
name: 'Access From',
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
radius: ['45%', '65%'],
|
||||
center: ['50%', '40%'],
|
||||
radius: ['45%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: ({ dataIndex, percent }) => {
|
||||
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
||||
return `{${styleName}|${percent}%}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: '#2760ff',
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
b: {
|
||||
color: '#518eec',
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
c: {
|
||||
color: '#0ee8e4',
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
d: {
|
||||
color: '#ddb523',
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
},
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
|
||||
196
src/views/databoard/components/NumRateChart.vue
Normal file
196
src/views/databoard/components/NumRateChart.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="num-rate-chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
export default {
|
||||
name: 'NumRateChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
productline() {
|
||||
return this.$store.state.websocket.productline
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
productline: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal === oldVal) {
|
||||
return false
|
||||
}
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
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)
|
||||
})
|
||||
var option = {
|
||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
className: "num-rate-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['产线产量', '合格率'],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量/片',
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '良品率',
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: '{value} %'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#5CB7FF' },
|
||||
{ offset: 1, color: '#364BFE' }
|
||||
])
|
||||
},
|
||||
data: outputNum
|
||||
},
|
||||
{
|
||||
name: '合格率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + '%';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFD160'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFCB59' + "40" },
|
||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
||||
{ offset: 1, color: '#FFCB59' + "00" },
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
data: passRate
|
||||
}
|
||||
]
|
||||
};
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.num-rate-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.num-rate-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.num-rate-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
32
src/views/databoard/components/ScrollBoard.vue
Normal file
32
src/views/databoard/components/ScrollBoard.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="scroll-board-container">
|
||||
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" :ref='id'/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScrollBoard',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
width:{
|
||||
type: String,
|
||||
default: '600px'
|
||||
},
|
||||
height:{
|
||||
type: String,
|
||||
default: '380px'
|
||||
},
|
||||
id:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -11,7 +11,7 @@
|
||||
class="btn"
|
||||
v-for="opt in options"
|
||||
:key="opt"
|
||||
@click="active = opt"
|
||||
@click="clickBtn(opt)"
|
||||
:class="active == opt ? 'btn-active' : ''">
|
||||
{{ opt }}
|
||||
</button>
|
||||
@ -22,15 +22,18 @@
|
||||
export default {
|
||||
name: 'SelectorBtnGroup',
|
||||
components: {},
|
||||
props: ['options'],
|
||||
props: ['options', 'active'],
|
||||
data() {
|
||||
return {
|
||||
active: this.options[0] || 'default'
|
||||
// active: this.options[0] || 'default'
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
|
||||
clickBtn(opt) {
|
||||
// this.active = opt
|
||||
this.$emit('emitFun', opt)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
317
src/views/databoard/components/YieldRateChart.vue
Normal file
317
src/views/databoard/components/YieldRateChart.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="yield-rate-chart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import { formatDate } from '@/utils'
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
},
|
||||
cutChartWeek: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
cutChartMonth: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
cutChartYear: {
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
chartTime: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log("===================")
|
||||
console.log(newVal)
|
||||
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 * 100).toFixed(2))
|
||||
nightArr.push((item.night * 100).toFixed(2))
|
||||
sumArr.push((item.sum * 100).toFixed(2))
|
||||
})
|
||||
if (this.chartType) {
|
||||
seriesData = [{
|
||||
color: '#ff9e00',
|
||||
name: 'sum',
|
||||
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: 'day',
|
||||
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: 'night',
|
||||
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: 'sum',
|
||||
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>
|
||||
@ -1,22 +1,34 @@
|
||||
<template>
|
||||
<div
|
||||
class="bottom-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<EnergyMonitoring />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<NumRate />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
import NumRate from './NumRate';
|
||||
import EnergyMonitoring from './EnergyMonitoring';
|
||||
export default {
|
||||
name: 'BottomTwo',
|
||||
components: { OrderStatus, YieldRate },
|
||||
components: { NumRate, EnergyMonitoring },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
51
src/views/databoard/deepProcessing/DefectSum.vue
Normal file
51
src/views/databoard/deepProcessing/DefectSum.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="各工序缺陷汇总" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'DefectSum',
|
||||
components: { Container },
|
||||
computed: {
|
||||
defectSum() {
|
||||
return this.$store.state.websocket.defectSum
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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: [],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
src/views/databoard/deepProcessing/EnergyMonitoring.vue
Normal file
30
src/views/databoard/deepProcessing/EnergyMonitoring.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="能源监控" size="small" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<EnergeMonitoringChart/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
|
||||
export default {
|
||||
name: 'EnergyMonitoring',
|
||||
components: { Container, EnergeMonitoringChart },
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
}
|
||||
</style>
|
||||
65
src/views/databoard/deepProcessing/EqAlarm.vue
Normal file
65
src/views/databoard/deepProcessing/EqAlarm.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="设备报警" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'EqAlarm',
|
||||
components: { Container },
|
||||
computed: {
|
||||
sjgEquipment() {
|
||||
return this.$store.state.websocket.sjgEquipment
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// config:{}
|
||||
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', '', '']
|
||||
],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
watch:{
|
||||
sjgEquipment: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.sjgEquipment.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
item.code,
|
||||
item.status,
|
||||
item.error? '是': '否'
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['eqScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
src/views/databoard/deepProcessing/NumRate.vue
Normal file
30
src/views/databoard/deepProcessing/NumRate.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线产量及良品率" size="small" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<NumRateChart />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import NumRateChart from '../components/NumRateChart';
|
||||
export default {
|
||||
name: 'NumRate',
|
||||
components: { Container, NumRateChart },
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
@ -1,22 +1,44 @@
|
||||
<template>
|
||||
<div
|
||||
class="top-three"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
|
||||
<div class="left-side" style="flex: 1;">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<EqAlarm />
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<DefectSum />
|
||||
</div>
|
||||
</div>
|
||||
<div class="righe-side" style="flex: 1">
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-rows: 462px;
|
||||
">
|
||||
<WorkOrderMonitoring />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
import WorkOrderMonitoring from './WorkOrderMonitoring';
|
||||
import EqAlarm from './EqAlarm'
|
||||
import DefectSum from './DefectSum'
|
||||
export default {
|
||||
name: 'TopThree',
|
||||
components: { OrderStatus, YieldRate },
|
||||
components: { EqAlarm, DefectSum, WorkOrderMonitoring },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
65
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
Normal file
65
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="工单监控" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'WorkOrderMonitoring',
|
||||
components: { Container },
|
||||
computed: {
|
||||
order() {
|
||||
return this.$store.state.websocket.workOrder
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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, 120, 80, 60, 80, 120, 120, 120],
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.order.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
item.specifications,
|
||||
item.lines,
|
||||
item.status,
|
||||
item.planFinishTime,
|
||||
item.planQuantity,
|
||||
item.planAssignQuantity
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['worderScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
@ -6,10 +6,10 @@
|
||||
class="deepProcessingBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
transform-origin: left top;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
@ -17,8 +17,19 @@
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<TopThree />
|
||||
<BottomTwo />
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
@ -27,7 +38,7 @@
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<BottomTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -103,14 +114,14 @@ export default {
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
screenfull.toggle(this.$refs.deepProcessingContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
||||
let bw = parseFloat(deepProcessingContainer.style.width)
|
||||
let bh = parseFloat(deepProcessingContainer.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
|
||||
@ -31,48 +31,74 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
|
||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
|
||||
</div>
|
||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||
<GasChart />
|
||||
<GasChart :chartType='chartType' :chartTime='chartTime'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
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.vue';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
export default {
|
||||
name: 'EnergeCost',
|
||||
components: {
|
||||
Container,
|
||||
ShadowRect,
|
||||
SplitLine,
|
||||
Switcher,
|
||||
EnergeTop,
|
||||
GasChart,
|
||||
SelectorBtnGroup,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
chartType:'电耗能',
|
||||
chartTime:'周'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
gasInfoMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 切换能源
|
||||
toggleType() {
|
||||
|
||||
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() {
|
||||
|
||||
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
|
||||
// }
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -23,8 +23,7 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
余热发电
|
||||
@ -33,11 +32,10 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
1023kWh
|
||||
{{energyInfo.elecQty1}}kwh
|
||||
</span>
|
||||
</ShadowRect>
|
||||
|
||||
@ -46,14 +44,14 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">水耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -61,14 +59,14 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气I</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -76,14 +74,14 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">电耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -91,14 +89,14 @@
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
flex: 1.2;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气II</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</template>
|
||||
@ -113,7 +111,14 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
sumGasInfo(){
|
||||
return this.$store.state.websocket.sumGasInfo
|
||||
},
|
||||
energyInfo() {
|
||||
return this.$store.state.websocket.energyInfo
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
|
||||
<template>
|
||||
<Container name="风机运行频率" size="middle" style="">
|
||||
<div class="" style="position: absolute; top: 26px; left: 220px">
|
||||
<!-- <div class="" style="position: absolute; top: 26px; left: 220px">
|
||||
<Switcher />
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="absolute"
|
||||
style="
|
||||
padding: 12px;
|
||||
padding: 5px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
@ -23,7 +23,7 @@
|
||||
<span
|
||||
style="
|
||||
font-size: 18px;
|
||||
line-height: 1.1;
|
||||
line-height: 1.15;
|
||||
flex: 3.5;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
@ -31,7 +31,7 @@
|
||||
">
|
||||
{{ key }}:
|
||||
</span>
|
||||
<span style="font-size: 20px; line-height: 1; flex: 1">
|
||||
<span style="font-size: 20px; line-height: 1.15; flex: 1">
|
||||
{{ value }}Hz
|
||||
</span>
|
||||
</ShadowRect>
|
||||
@ -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
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
filename: GasHandle.vue
|
||||
author: liubin
|
||||
date: 2023-12-11 09:02:40
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="gas-handle" style="flex: 2">
|
||||
<Container name="烟气处理" size="large" style="">
|
||||
@ -26,11 +19,11 @@
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 3px;
|
||||
">
|
||||
氧气含量
|
||||
</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</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
|
||||
@ -45,7 +38,7 @@
|
||||
<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">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -61,23 +54,22 @@
|
||||
<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">59mg/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>
|
||||
<div
|
||||
<span
|
||||
style="
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 3px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
<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">82%</span>
|
||||
颗粒物浓度
|
||||
</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<KilnLine :horizontal="true" />
|
||||
@ -103,11 +95,11 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
</div>
|
||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||
<GasChart />
|
||||
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -115,12 +107,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
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.vue';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
// import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import FlueGas from '../components/FlueGas';
|
||||
|
||||
export default {
|
||||
name: 'GasHandle',
|
||||
@ -128,16 +120,33 @@ export default {
|
||||
Container,
|
||||
ShadowRect,
|
||||
KilnLine,
|
||||
Switcher,
|
||||
SelectorBtnGroup,
|
||||
GasChart,
|
||||
FlueGas,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
chartType:'氧气含量',
|
||||
chartTime:'日'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
exhaustGasInfo() {
|
||||
return this.$store.state.websocket.exhaustGasInfo
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 烟气
|
||||
toggleType(val) {
|
||||
console.log('烟气' + val)
|
||||
this.chartType = val
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
console.log('时间' + val)
|
||||
this.chartTime = val
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import Container from '../components/Container';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import ISRAChart from '../components/ISRAChart.vue';
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- {{item.materialName}} -
|
||||
- {{item.materialName}}/kg-
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
@ -60,7 +60,7 @@
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- {{item.materialName}} -
|
||||
- {{item.materialName}}/kg-
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
@ -71,7 +71,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import Container from '../components/Container';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
export default {
|
||||
name: 'MaterialCost',
|
||||
|
||||
@ -19,16 +19,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
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.vue';
|
||||
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 {};
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
filename: KilnDataBoard.vue
|
||||
author: liubin
|
||||
date: 2023-12-04 16:51:00
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
@ -13,10 +6,10 @@
|
||||
class="KilnDataBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
transform-origin: left top;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
@ -45,15 +38,19 @@ import LeftFour from './LeftFour';
|
||||
import RightTwo from './RightTwo.vue';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'KilnDataBoard',
|
||||
name: 'Kiln',
|
||||
components: {
|
||||
KHeader,
|
||||
LeftFour,
|
||||
RightTwo,
|
||||
},
|
||||
computed:{
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
}
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
@ -65,6 +62,11 @@ export default {
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
sidebarStatus() {
|
||||
this.boxReset()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
@ -79,14 +81,6 @@ export default {
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// this.getMes()
|
||||
// closeWebsocket()
|
||||
getDcsMsg()
|
||||
getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import { connectWebsocket, closeWebsocket } from './websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
@ -27,6 +27,10 @@ export const getDcsMsg = () => {
|
||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
case "SumGasInfo": {
|
||||
store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
@ -41,54 +45,110 @@ export const getDcsMsg = () => {
|
||||
export const getMesMsg = () => {
|
||||
const sj = new Date().getTime()
|
||||
// ISRA
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "israKiln": {
|
||||
// store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
// break;
|
||||
// }
|
||||
// // case "KilnInfo": {
|
||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// // break;
|
||||
// // }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// 原料 MA
|
||||
// // 原料 MA
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "material": {
|
||||
// store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
// break;
|
||||
// }
|
||||
// // case "KilnInfo": {
|
||||
// // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// // break;
|
||||
// // }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// 能耗 EN
|
||||
// connectWebsocket(
|
||||
// // 测试地址
|
||||
// 'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+sj,
|
||||
// // 传递给后台的数据
|
||||
// '',
|
||||
// // 成功拿到后台返回的数据的回调函数
|
||||
// (data) => {
|
||||
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
|
||||
// let msgData = JSON.parse(data)
|
||||
// if (msgData == null) return;
|
||||
// switch (msgData?.type) {
|
||||
// case "EnergyInfo": {
|
||||
// store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
|
||||
// break;
|
||||
// }
|
||||
// default:
|
||||
// }
|
||||
// },
|
||||
// // websocket连接失败的回调函数
|
||||
// (err) => {
|
||||
// console.log('失败的回调函数', err)
|
||||
// }
|
||||
// )
|
||||
|
||||
// 烟气 GAS
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "material": {
|
||||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
case "exhaustGas": {
|
||||
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
|
||||
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
|
||||
dayTrend: msgData.dayTrend,
|
||||
weekTrend: msgData.weekTrend,
|
||||
monthTrend: msgData.monthTrend,
|
||||
yearTrend: msgData.yearTrend,
|
||||
}})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
|
||||
38
src/views/databoard/wholePlant/DefectClass.vue
Normal file
38
src/views/databoard/wholePlant/DefectClass.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import DefectClassChart from '../components/DefectClassChart';
|
||||
export default {
|
||||
name: 'DefectClass',
|
||||
components: { Container, SelectorBtnGroup, DefectClassChart },
|
||||
data() {
|
||||
return {
|
||||
chartType:'Y61'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换产线
|
||||
toggleType(val) {
|
||||
console.log('产线' + val)
|
||||
this.chartType = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.typeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 30px;
|
||||
}
|
||||
</style>
|
||||
38
src/views/databoard/wholePlant/DefectStatistics.vue
Normal file
38
src/views/databoard/wholePlant/DefectStatistics.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线缺陷统计" size="small">
|
||||
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
<div class="chart" style="height: 238px; margin-top: 8px;">
|
||||
<DefectChart :chartTime='chartTime'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import DefectChart from '../components/DefectChart';
|
||||
export default {
|
||||
name: 'DefectStatistics',
|
||||
components: { Container, SelectorBtnGroup, DefectChart },
|
||||
data() {
|
||||
return {
|
||||
chartTime:'日'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
console.log('时间' + val)
|
||||
this.chartTime = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.timeToggle {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
grid-template-rows: 308px 616px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
grid-template-rows: 605px 320px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
<GasHandle />
|
||||
<DefectStatistics />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
import GasHandle from './../kiln/GasHandle';
|
||||
import DefectStatistics from './DefectStatistics';
|
||||
export default {
|
||||
name: 'MiddleFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
components: { GasHandle, DefectStatistics },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,14 +1,61 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import Container from '../components/Container'
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
computed: {
|
||||
order() {
|
||||
return this.$store.state.websocket.order
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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', '']
|
||||
],
|
||||
rowNum: 6
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.order.map((item) => [
|
||||
item.startProduceTime,
|
||||
item.name,
|
||||
item.specifications,
|
||||
item.completeRate
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,17 +6,17 @@
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
<EnergeCost />
|
||||
<DefectClass />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
import EnergeCost from './../kiln/EnergeCost.vue';
|
||||
import DefectClass from './DefectClass.vue';
|
||||
export default {
|
||||
name: 'RightFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
components: { EnergeCost, DefectClass },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,14 +1,125 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
<div style="flex: 2;">
|
||||
<Container name="本日生产良品率" size="small">
|
||||
<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'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
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'
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
|
||||
computed: {
|
||||
yieldRateTable() {
|
||||
return this.$store.state.websocket.yieldRateTable
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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', '49%', '', ''],
|
||||
[2, '产线2', '49%', '', ''],
|
||||
[3, '产线3', '49%', '', ''],
|
||||
[4, '产线4', '49%', '', ''],
|
||||
[5, '产线5', '49%', '', '']
|
||||
],
|
||||
rowNum: 5
|
||||
},
|
||||
chartType:false,
|
||||
chartTime: "日"
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
yieldRateTable: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.yieldRateTable.map((item) => [
|
||||
item.lineName,
|
||||
item.first,
|
||||
item.second,
|
||||
item.product,
|
||||
item.waste
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeType(val) {
|
||||
this.chartType = val
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate(val) {
|
||||
this.chartTime = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.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>
|
||||
@ -8,8 +8,8 @@
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
@ -42,7 +42,6 @@ import MiddleTwo from './MiddleTwo';
|
||||
import RightTwo from './RightTwo';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'wholePlantBoard',
|
||||
@ -77,9 +76,6 @@ export default {
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// closeWebsocket()
|
||||
// getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
@ -51,10 +51,10 @@ export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
const now = new Date();
|
||||
// const now = new Date().getTime();
|
||||
// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||
const today = new Date().getTime();
|
||||
const tenminAgo = today - (10 * 60 * 1000);
|
||||
const tenminAgo = new Date(today - (10 * 60 * 1000)).getTime();
|
||||
return {
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
dateType: 'datetimerange', // datetimerange
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'timestamp',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
@ -94,8 +94,8 @@ export default {
|
||||
},
|
||||
],
|
||||
queryParams: {
|
||||
id: null,
|
||||
time: [tenminAgo, today],
|
||||
equipmentId: null,
|
||||
recordTime: [parseTime(tenminAgo), parseTime(today)],
|
||||
},
|
||||
tableList: [
|
||||
// {
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
beforeRouteEnter(to, from, next) {
|
||||
if (Object.keys(to.params).length > 0) {
|
||||
next((vm) => {
|
||||
vm.$set(vm.queryParams, 'id', to.params.equipmentId);
|
||||
vm.$set(vm.queryParams, 'equipmentId', to.params.equipmentId);
|
||||
vm.$set(
|
||||
vm.searchBarFormConfig[0],
|
||||
'defaultSelect',
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
vm.$set(
|
||||
vm.searchBarFormConfig[2],
|
||||
'defaultSelect',
|
||||
vm.queryParams.time
|
||||
vm.queryParams.recordTime
|
||||
);
|
||||
vm.handleQuery();
|
||||
});
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
// clean job
|
||||
this.$set(this.queryParams, 'id', null);
|
||||
this.$set(this.queryParams, 'equipmentId', null);
|
||||
this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
|
||||
this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
|
||||
this.tableList = [];
|
||||
@ -204,7 +204,7 @@ export default {
|
||||
props.push({
|
||||
label: item.name,
|
||||
prop: item.name,
|
||||
width: 128,
|
||||
// width: 128,
|
||||
});
|
||||
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
||||
item.maxValue ?? ''
|
||||
@ -280,14 +280,15 @@ export default {
|
||||
|
||||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||
if (timeVal && timeVal.length > 0) {
|
||||
if (timeVal[1] - timeVal[0] <= 10 * 60 * 1000) {
|
||||
this.queryParams.time = timeVal;
|
||||
console.log('nihc ', timeVal)
|
||||
if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 10 * 60 * 1000) {
|
||||
this.queryParams.recordTime = timeVal;
|
||||
await this.handleQuery();
|
||||
} else {
|
||||
this.$message.warning('时间范围最大一小时限制！')
|
||||
}
|
||||
} else {
|
||||
this.queryParams.time = [];
|
||||
this.queryParams.recordTime = [];
|
||||
this.$message.warning('时间段必选！')
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-08 13:46:17
|
||||
* @LastEditTime: 2023-12-15 16:12:08
|
||||
* @LastEditTime: 2024-01-09 16:03:22
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -455,8 +455,8 @@ 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 {
|
||||
maxValue: ele.maxValue,
|
||||
@ -466,6 +466,17 @@ export default {
|
||||
getQualityHotMaterialDetList({
|
||||
mainId: response.data.id
|
||||
}).then((result) => {
|
||||
this.ingredientList = result.data.map((ele) => {
|
||||
return {
|
||||
name: ele.checkName,
|
||||
id: ele.id,
|
||||
checkDetId: ele.id,
|
||||
checkValue: ele.checkValue,
|
||||
// isStandard: true,
|
||||
// showIcon: false,
|
||||
}
|
||||
})
|
||||
console.log(this.ingredientList);
|
||||
this.dataForm.checkValueList = result.data.map((ele) => {
|
||||
return {
|
||||
mainId: ele.mainId,
|
||||
|
||||
176
src/websocket/websocket.js
Normal file
176
src/websocket/websocket.js
Normal file
@ -0,0 +1,176 @@
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export function WsConnect(url, agentData, successCallback, errCallback) {
|
||||
this.wsUrl = url;
|
||||
this.wsObj = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
this.lockReconnect = false;
|
||||
// 重连定时器
|
||||
this.wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
this.messageCallback = successCallback;
|
||||
// 连接失败，执行回调函数
|
||||
this.errorCallback = errCallback;
|
||||
// 发送给后台的数据
|
||||
this.sendDatas = agentData;
|
||||
// 创建ws函数
|
||||
this.createWebSoket = () => {
|
||||
if (typeof WebSocket === "undefined") {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
this.wsObj = new WebSocket(url);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
this.closeWebsocket = () => {
|
||||
if (this.wsObj) {
|
||||
writeToScreen("手动关闭websocket");
|
||||
this.wsObj.close(); // 关闭websocket
|
||||
// this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
this.lockReconnect = true;
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
// heartCheck.stop();
|
||||
}
|
||||
};
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
this.wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
this.wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
// heartCheck.start();
|
||||
};
|
||||
|
||||
this.wsObj.onclose = (event) => {
|
||||
writeToScreen("onclose执行关闭事件");
|
||||
onWsClose(event);
|
||||
};
|
||||
|
||||
this.wsObj.onerror = (event) => {
|
||||
writeToScreen("onerror执行error事件，开始重连");
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
};
|
||||
} catch (err) {
|
||||
writeToScreen("绑定事件没有成功，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen("CONNECT");
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (this.wsObj.readyState === this.wsObj.OPEN) {
|
||||
// wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
this.wsObj.send(JSON.stringify(this.sendDatas));
|
||||
}
|
||||
if (this.wsObj.readyState === this.wsObj.CLOSED) {
|
||||
// wsObj.CLOSED = 3
|
||||
writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
|
||||
reconnect();
|
||||
this.errorCallback(event);
|
||||
}
|
||||
};
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
this.messageCallback(jsonStr);
|
||||
};
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen("DISCONNECT");
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log("onclose event: ", event);
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen("非正常关闭");
|
||||
this.errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
};
|
||||
const onWsError = (event) => {
|
||||
writeToScreen("onWsError: ", event.data);
|
||||
this.errorCallback(event);
|
||||
};
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
};
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (this.lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen("3秒后重连");
|
||||
this.lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
|
||||
this.wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen("重连..." + this.wsUrl);
|
||||
this.createWebSoket();
|
||||
this.lockReconnect = false;
|
||||
writeToScreen("重连完成");
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// 心跳检查（看看websocket是否还在正常连接中）
|
||||
// let heartCheck = {
|
||||
// timeout: 15000,
|
||||
// timeoutObj: null,
|
||||
// serverTimeoutObj: null,
|
||||
// // 重启
|
||||
// reset() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// this.start();
|
||||
// },
|
||||
// // 停止
|
||||
// stop() {
|
||||
// clearTimeout(this.timeoutObj);
|
||||
// clearTimeout(this.serverTimeoutObj);
|
||||
// },
|
||||
// // 开启定时器
|
||||
// start() {
|
||||
// this.timeoutObj && clearTimeout(this.timeoutObj);
|
||||
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||||
// // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
|
||||
// this.timeoutObj = setTimeout(() => {
|
||||
// writeToScreen("心跳检查，发送ping到后台");
|
||||
// try {
|
||||
// const datas = { ping: true };
|
||||
// this.wsObj.send(JSON.stringify(datas));
|
||||
// } catch (err) {
|
||||
// writeToScreen("发送ping异常");
|
||||
// }
|
||||
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
|
||||
// // 内嵌定时器
|
||||
// this.serverTimeoutObj = setTimeout(() => {
|
||||
// writeToScreen("没有收到后台的数据，重新连接");
|
||||
// reconnect();
|
||||
// }, this.timeout);
|
||||
// }, this.timeout);
|
||||
// },
|
||||
// };
|
||||
}
|
||||
305
src/websocket/wsInterface.js
Normal file
305
src/websocket/wsInterface.js
Normal file
@ -0,0 +1,305 @@
|
||||
import { WsConnect } from './websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建websocket链接
|
||||
|
||||
const timestr = new Date().getTime()
|
||||
const dcsConn = new WsConnect(
|
||||
// websocket地址
|
||||
process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
(data) => {
|
||||
// console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
case "GasInfo": {
|
||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
case "SumGasInfo": {
|
||||
store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
// ISRA
|
||||
const mesIsra = new WsConnect(
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
|
||||
'',
|
||||
(data) => {
|
||||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
// console.log(msgData)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 原料 MA
|
||||
const mesMA = new WsConnect(
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr,
|
||||
'',
|
||||
(data) => {
|
||||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "material": {
|
||||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
// 能耗 EN
|
||||
const mesEN = new WsConnect(
|
||||
// websocket地址
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "EnergyInfo": {
|
||||
store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
case "EnergyTrend": {
|
||||
store.dispatch({type: "websocket/setEnergyTrend", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
case "EnergyMonitoring": {
|
||||
store.dispatch({type: "websocket/setEnergyMonitoring", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
// 烟气 GAS
|
||||
const mesGAS = new WsConnect(
|
||||
// websocket地址
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
// console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "exhaustGas": {
|
||||
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
|
||||
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
|
||||
dayTrend: msgData.dayTrend,
|
||||
weekTrend: msgData.weekTrend,
|
||||
monthTrend: msgData.monthTrend,
|
||||
yearTrend: msgData.yearTrend,
|
||||
}})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 缺陷分类/统计 IS
|
||||
const mesIS = new WsConnect(
|
||||
// websocket地址
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=IS'+timestr,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
// console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
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,
|
||||
yearStatistic: msgData.detData.yearStatistic,
|
||||
}})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 深加工生产运行驾驶舱（除能源） SJG
|
||||
const mesSJG = new WsConnect(
|
||||
// websocket地址
|
||||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "productline": {
|
||||
store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
|
||||
break;
|
||||
}
|
||||
case "equipment": {
|
||||
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:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 订单完成情况 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()
|
||||
mesIsra.createWebSoket()
|
||||
mesMA.createWebSoket()
|
||||
mesEN.createWebSoket()
|
||||
mesGAS.createWebSoket()
|
||||
mesIS.createWebSoket()
|
||||
mesSJG.createWebSoket()
|
||||
mesOV.createWebSoket()
|
||||
mesCUTTING.createWebSoket()
|
||||
}
|
||||
export const closeDcsMsg = () => {
|
||||
dcsConn.closeWebsocket()
|
||||
mesIsra.closeWebsocket()
|
||||
mesMA.closeWebsocket()
|
||||
mesEN.closeWebsocket()
|
||||
mesGAS.closeWebsocket()
|
||||
mesIS.closeWebsocket()
|
||||
mesSJG.closeWebsocket()
|
||||
mesOV.closeWebsocket()
|
||||
mesCUTTING.closeWebsocket()
|
||||
}
|
||||
57
yarn.lock
57
yarn.lock
@ -1119,6 +1119,51 @@
|
||||
"cssnano-preset-default" "^4.0.0"
|
||||
"postcss" "^7.0.0"
|
||||
|
||||
"@jiaminghi/bezier-curve@*":
|
||||
"integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
|
||||
"version" "0.0.9"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
|
||||
"@jiaminghi/c-render@^0.4.3":
|
||||
"integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
|
||||
"version" "0.4.3"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@jiaminghi/bezier-curve" "*"
|
||||
"@jiaminghi/color" "*"
|
||||
"@jiaminghi/transition" "*"
|
||||
|
||||
"@jiaminghi/charts@*":
|
||||
"integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
|
||||
"version" "0.2.18"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@jiaminghi/c-render" "^0.4.3"
|
||||
|
||||
"@jiaminghi/color@*":
|
||||
"integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
|
||||
"version" "1.1.3"
|
||||
|
||||
"@jiaminghi/data-view@^2.10.0":
|
||||
"integrity" "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz"
|
||||
"version" "2.10.0"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@jiaminghi/charts" "*"
|
||||
|
||||
"@jiaminghi/transition@*":
|
||||
"integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
|
||||
"resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
|
||||
"version" "1.1.11"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
|
||||
"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
|
||||
"integrity" "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ=="
|
||||
"resolved" "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
|
||||
@ -3507,6 +3552,11 @@
|
||||
"safe-buffer" "5.1.2"
|
||||
"vary" "~1.1.2"
|
||||
|
||||
"comutils@^1.1.9":
|
||||
"integrity" "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
|
||||
"resolved" "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz"
|
||||
"version" "1.1.19"
|
||||
|
||||
"concat-map@0.0.1":
|
||||
"integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
|
||||
"resolved" "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
|
||||
@ -11378,6 +11428,13 @@
|
||||
"resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.4.9.tgz"
|
||||
"version" "3.4.9"
|
||||
|
||||
"vue-seamless-scroll@^1.1.23":
|
||||
"integrity" "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA=="
|
||||
"resolved" "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz"
|
||||
"version" "1.1.23"
|
||||
dependencies:
|
||||
"comutils" "^1.1.9"
|
||||
|
||||
"vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
|
||||
"integrity" "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg=="
|
||||
"resolved" "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user