@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: Do not edit | |||
# @Date: 2023-08-29 09:40:39 | |||
# @LastEditTime: 2024-01-02 14:42:10 | |||
# @LastEditTime: 2024-01-04 15:50:26 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -14,7 +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.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,9 +22,12 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082' | |||
VUE_APP_BASE_API = 'http://192.168.1.78:48082' | |||
# socket地址 | |||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://100.64.0.23:48082' | |||
# 积木报表指向地址 | |||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080' | |||
@@ -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' | |||
@@ -80,6 +80,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", | |||
@@ -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') { | |||
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(); | |||
@@ -79,7 +79,8 @@ Vue.use(directive); | |||
Vue.use(plugins); | |||
Vue.use(VueMeta); | |||
// 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,24 @@ | |||
const state = { | |||
fanFrequencyInfo:{},// 分机运行频率 | |||
kilnInfo:{},// 窑炉信息 | |||
gasInfo:{},// 天然气 | |||
gasInfo:{},// 天然气流量图 | |||
sumGasInfo: {},// 天然气总量 | |||
israKiln:[],// ISRA缺陷检测 | |||
material:[]// 原料 | |||
material:[],// 原料 | |||
energyInfo: { | |||
elecQty1: '', | |||
elecQty2: '', | |||
waterQty: '' | |||
}, // 能耗 | |||
energyWeekTrend:[], | |||
energyMonthTrend:[], | |||
energyYearTrend:[],// 能耗图 | |||
exhaustGasInfo:{}, // 烟气 | |||
gasChartDayTrend:{}, // 烟气 | |||
gasChartWeekTrend:{}, // 烟气 | |||
gasChartMonthTrend:{}, // 烟气 | |||
gasChartYearTrend:{} // 烟气 | |||
}; | |||
const mutations = { | |||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => { | |||
@@ -16,6 +30,9 @@ const mutations = { | |||
SET_GASINFO: (state, gasInfo) => { | |||
state.gasInfo = gasInfo | |||
}, | |||
SET_SUMGASINFO: (state, sumGasInfo) => { | |||
state.sumGasInfo = sumGasInfo | |||
}, | |||
SET_ISRAKILN: (state, israKiln) => { | |||
@@ -23,6 +40,34 @@ 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_EXHAUSTGASINFO: (state, exhaustGasInfo) => { | |||
state.exhaustGasInfo = exhaustGasInfo | |||
}, | |||
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => { | |||
state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend | |||
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend | |||
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend | |||
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend | |||
} | |||
}; | |||
const actions = { | |||
@@ -35,6 +80,9 @@ const actions = { | |||
setGasInfo({ commit }, gasInfo) { | |||
commit('SET_GASINFO', gasInfo.payload) | |||
}, | |||
setSumGasInfo({ commit }, sumGasInfo) { | |||
commit('SET_SUMGASINFO', sumGasInfo.payload) | |||
}, | |||
setIsraKiln({ commit }, israKiln) { | |||
@@ -43,6 +91,18 @@ 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) | |||
}, | |||
setExhaustGasInfo({ commit }, exhaustGasInfo) { | |||
commit('SET_EXHAUSTGASINFO', exhaustGasInfo.payload) | |||
}, | |||
setExhaustGasChart({ commit }, exhaustGasChart) { | |||
commit('SET_EXHAUSTGASCHART', exhaustGasChart.payload) | |||
}, | |||
}; | |||
export default { | |||
namespaced: true, | |||
@@ -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> | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-02 10:07:03 | |||
* @LastEditTime: 2024-01-04 16:41:17 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -41,8 +41,8 @@ | |||
<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> | |||
@@ -62,7 +62,7 @@ | |||
</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"> | |||
@@ -84,14 +84,17 @@ | |||
</div> --> | |||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 --> | |||
<el-col :span="6"> | |||
<h4 style="margin: 5px 0 5px 0;">融化风机</h4> | |||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" | |||
:table-data="funList" /> | |||
</el-col> | |||
<el-col :span="6"> | |||
<h3 style="margin: 5px 0 5px 0;">退火风机</h3> | |||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun" | |||
:table-data="annealFunList" /> | |||
</el-col> | |||
<el-col :span="12" style="float: right;"> | |||
<h3 style="margin: 5px 0 5px 0;">产线设备</h3> | |||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps" | |||
:table-data="realEqList" /> | |||
</el-col> | |||
@@ -146,19 +149,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 = [ | |||
@@ -324,7 +324,7 @@ export default { | |||
this.funInitWebSocket() | |||
this.CutInitWebSocket() | |||
this.SJGInitWebSocket() | |||
// this.getList() | |||
this.getTimes() | |||
const _this = this; | |||
_this.beilv2 = document.documentElement.clientWidth / 1920 | |||
@@ -334,7 +334,7 @@ export default { | |||
this.beilv2 = _this.clientWidth / 1920 | |||
})() | |||
} | |||
this.getList() | |||
// this.getList() | |||
// const _this = this; | |||
// window.onresize = () => { | |||
// return (() => { | |||
@@ -359,30 +359,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 +414,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 +433,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 +506,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,7 +524,7 @@ 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) + '%' | |||
@@ -572,6 +580,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) { | |||
@@ -2,7 +2,7 @@ | |||
* @Author: gtz | |||
* @Date: 2022-01-19 15:58:17 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2023-11-14 13:28:27 | |||
* @LastEditTime: 2024-01-04 16:16:22 | |||
* @Description: file content | |||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue | |||
--> | |||
@@ -1,47 +1,51 @@ | |||
<!-- | |||
* @Date: 2020-12-14 09:07:03 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-02 16:37:14 | |||
* @LastEditTime: 2024-01-04 16:16:00 | |||
* @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="height: 100%; 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> | |||
<div class="visual-base-table-container scroll_table"> | |||
<div style="display: inline-block; width: 100%"> | |||
<el-table class="top" v-loading="isLoading" | |||
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle" | |||
:data="renderData" border style="width: 100%; background: transparent"> | |||
<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"> | |||
</template> | |||
</el-table-column> | |||
<slot name="content" /> | |||
</el-table> | |||
<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> | |||
import { isObject, isString } from 'lodash' | |||
@@ -109,7 +113,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 +187,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> |
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-01-02 16:43:05 | |||
* @LastEditTime: 2024-01-04 15:52:52 | |||
* @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,9 +27,9 @@ | |||
</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-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="'设备报警'" :title-icon="'eqAlarm'"> | |||
<base-container :title="'设备报警'" :height="318" :title-icon="'eqAlarm'"> | |||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps" | |||
:table-data="equipmentList" /> | |||
</base-container> | |||
@@ -42,7 +42,7 @@ | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%" > | |||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> | |||
<base-container :height="318" :title="'工单监控'" :title-icon="'eqMonitoring'"> | |||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;"> | |||
<top-radio-group /> | |||
@@ -606,7 +606,7 @@ export default { | |||
'get', | |||
).then((res) => { | |||
// console.log('11111', res); | |||
this.qualityMonthList = res.data | |||
this.qualityMonthList = res.data ? res.data : [] | |||
}) | |||
}, | |||
getTimes() { | |||
@@ -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"> | |||
@@ -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,154 @@ export default { | |||
'#2aa1ff', | |||
]; | |||
return { | |||
chart: null, | |||
option: { | |||
color: colors, | |||
grid: { top: 32, right: 12, bottom: 20, left: 48 }, | |||
xAxis: { | |||
type: 'category', | |||
data: Array(7) | |||
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() | |||
} | |||
} | |||
}, | |||
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':{ | |||
yData = this.gasChartMsg.hisSumGas1 || [] | |||
gasName = '天然气I' | |||
xData = Array(7) | |||
.fill(1) | |||
.map((_, index) => { | |||
const today = new Date(); | |||
const dtimestamp = today - index * 24 * 60 * 60 * 1000; | |||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; | |||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( | |||
dtimestamp | |||
).getDate()}`; | |||
}) | |||
.reverse(), | |||
.reverse() | |||
break; | |||
} | |||
default: | |||
gasName = '天然气II' | |||
yData = this.gasChartMsg.hisSumGas2 || [] | |||
xData = 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() | |||
} | |||
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, | |||
@@ -82,71 +217,14 @@ 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', | |||
}, | |||
}, | |||
}; | |||
}, | |||
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) | |||
} | |||
}, | |||
mounted() { | |||
this.$el.addEventListener('resize', () => { | |||
console.log('resziing.....'); | |||
}); | |||
this.chart = echarts.init(this.$el); | |||
this.chart.setOption(this.option); | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
@@ -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, | |||
@@ -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> | |||
@@ -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; | |||
@@ -18,6 +18,17 @@ | |||
" | |||
:style="{transform:'scale('+scaleNum+')'}"> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/> | |||
<!-- <div | |||
class="main-body" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 605px 320px; | |||
"> | |||
<GasHandle /> | |||
<YieldRate /> | |||
</div> --> | |||
<div | |||
class="main-body" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
@@ -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,24 +31,24 @@ | |||
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 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: { | |||
@@ -62,17 +62,42 @@ export default { | |||
}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
return { | |||
chartType:'电耗能', | |||
chartTime:'周' | |||
}; | |||
}, | |||
computed: { | |||
gasInfoMsg() { | |||
return this.$store.state.websocket.gasInfo | |||
}, | |||
}, | |||
computed: {}, | |||
methods: { | |||
// 切换能源 | |||
toggleType() { | |||
toggleType(val) { | |||
console.log('能源' + 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) | |||
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> | |||
@@ -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}}%</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}}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}}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}}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 SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import FlueGas from '../components/FlueGas'; | |||
export default { | |||
name: 'GasHandle', | |||
@@ -130,14 +122,32 @@ export default { | |||
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,11 +19,11 @@ | |||
</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 { | |||
@@ -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 | |||
// 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) | |||
// } | |||
// ) | |||
// 原料 MA | |||
// 烟气 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: | |||
} | |||
}, | |||
@@ -0,0 +1,34 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="产线缺陷统计" size="small"> | |||
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
export default { | |||
name: 'DefectStatistics', | |||
components: { Container, SelectorBtnGroup }, | |||
data() { | |||
return { | |||
chartTime:'日' | |||
} | |||
}, | |||
methods: { | |||
// 切换时间 | |||
toggleDate(val) { | |||
console.log('时间' + val) | |||
this.chartTime = val | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss' scoped> | |||
.timeToggle { | |||
position: absolute; | |||
right: 0; | |||
} | |||
</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,155 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<Container name="订单完成情况" size="small" style=""> | |||
digndna | |||
<Container name="订单完成情况" size="small" class="wholeOrder"> | |||
<div style="width: 100%;padding: 10px; 20px"> | |||
<el-table | |||
:header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}" | |||
:row-style="setRowStyle" | |||
:data="list" | |||
height="225" | |||
border | |||
style="width: 100%; background: transparent" | |||
> | |||
<el-table-column | |||
v-for="item in tableProps" | |||
:key="item.prop" | |||
:show-overflow-tooltip="item.showOverflowtooltip" | |||
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> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}" | |||
const tableProps = [ | |||
{ | |||
prop: 'time', | |||
label: '添加时间', | |||
filter: parseTime, | |||
minWidth: 140 | |||
}, | |||
{ | |||
prop: 'name', | |||
label: '订单名称', | |||
minWidth: 120, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '订单编码', | |||
minWidth: 180 | |||
}, | |||
{ | |||
prop: 'customerId', | |||
label: '客户', | |||
showOverflowtooltip: true | |||
} | |||
] | |||
import Container from '../components/Container.vue'; | |||
import { parseTime } from '@/utils/ruoyi' | |||
export default { | |||
name: 'OrderStatus', | |||
filters: { | |||
commonFilter: (source, filterType = a => a) => { | |||
return filterType(source) | |||
} | |||
}, | |||
components: { Container }, | |||
data() { | |||
return { | |||
tableProps, | |||
list:[ | |||
{time: '2023-12-12', name: '名称名称'}, | |||
{time: '2023-12-13', name: '名称名称'}, | |||
{time: '2023-12-14', name: '名称名称'}, | |||
{time: '2023-12-15', name: '名称名称'}, | |||
{time: '2023-12-16', name: '名称名称'}, | |||
{time: '2023-12-17', name: '名称名称'}, | |||
{time: '2023-12-18', name: '名称名称'}, | |||
{time: '2023-12-19', name: '名称名称'}, | |||
{time: '2023-12-20', name: '名称名称'}, | |||
{time: '2023-12-21', name: '名称名称'} | |||
] | |||
} | |||
}, | |||
mounted() { | |||
}, | |||
methods:{ | |||
setRowStyle(v) { | |||
if (v.rowIndex % 2 === 0) { | |||
return { | |||
background: 'rgba(11, 84, 153, 1)', | |||
color: 'rgba(255,255,255,0.8)', | |||
height: '40px', | |||
lineHeight: '40px', | |||
padding: 0, | |||
fontSize: '16px' | |||
} | |||
} else { | |||
return { | |||
background: 'rgba(4, 74, 132, 1)', | |||
color: 'rgba(255,255,255,0.8)', | |||
height: '40px', | |||
lineHeight: '40px', | |||
padding: 0, | |||
fontSize: '16px' | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss'> | |||
.wholeOrder { | |||
.el-table { | |||
border: 0; | |||
} | |||
.el-table::before,.el-table--border::after { | |||
background-color: transparent; | |||
} | |||
.el-table th,td{ | |||
border-color: #0D1728 !important; | |||
padding: 0; | |||
} | |||
.el-table tr { | |||
background: transparent; | |||
} | |||
.el-table__row:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
.el-table__row--striped:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
// .el-table { | |||
// border: 0; | |||
// } | |||
// .el-table::before,.el-table--border::after { | |||
// background-color: transparent; | |||
// } | |||
// .el-table th,td{ | |||
// border-color: #0D1728 !important; | |||
// padding: 0; | |||
// } | |||
// .el-table tr { | |||
// background: transparent; | |||
// } | |||
// .el-table__row:hover > td { | |||
// background-color: rgba(79,114,136,0.29) !important; | |||
// } | |||
// .el-table__row--striped:hover > td { | |||
// background-color: rgba(79,114,136,0.29) !important; | |||
// } | |||
} | |||
</style> |
@@ -6,17 +6,17 @@ | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
<OrderStatus /> | |||
<EnergeCost /> | |||
<YieldRate /> | |||
</div> | |||
</template> | |||
<script> | |||
import OrderStatus from './OrderStatus.vue'; | |||
import EnergeCost from './../kiln/EnergeCost.vue'; | |||
import YieldRate from './YieldRate.vue'; | |||
export default { | |||
name: 'RightFour', | |||
components: { OrderStatus, YieldRate }, | |||
components: { EnergeCost, YieldRate }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
@@ -1,14 +1,127 @@ | |||
<template> | |||
<div style="flex: 1;"> | |||
<div style="flex: 2;" class="aaa"> | |||
<Container name="本日生产良品率" size="small" style=""> | |||
0000987 | |||
<el-table | |||
:header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}" | |||
:row-style="setRowStyle" | |||
:data="list" | |||
border | |||
style="width: 100%; background: transparent" | |||
> | |||
<el-table-column | |||
v-for="item in tableProps" | |||
:key="item.prop" | |||
:show-overflow-tooltip="item.showOverflowtooltip" | |||
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> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
const tableProps = [ | |||
{ | |||
prop: 'time', | |||
label: '添加时间', | |||
filter: parseTime, | |||
minWidth: 140 | |||
}, | |||
{ | |||
prop: 'name', | |||
label: '订单名称', | |||
minWidth: 120, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'code', | |||
label: '订单编码', | |||
minWidth: 180 | |||
}, | |||
{ | |||
prop: 'customerId', | |||
label: '客户', | |||
showOverflowtooltip: true | |||
} | |||
] | |||
import Container from '../components/Container'; | |||
import { parseTime } from '@/utils/ruoyi' | |||
export default { | |||
name: 'YieldRate', | |||
filters: { | |||
commonFilter: (source, filterType = a => a) => { | |||
return filterType(source) | |||
} | |||
}, | |||
components: { Container }, | |||
data() { | |||
return { | |||
tableProps, | |||
list:[ | |||
{time: '2023-12-12', name: '名称名称'}, | |||
{time: '2023-12-13', name: '名称名称'}, | |||
{time: '2023-12-14', name: '名称名称'}, | |||
{time: '2023-12-15', name: '名称名称'}, | |||
{time: '2023-12-16', name: '名称名称'}, | |||
{time: '2023-12-17', name: '名称名称'}, | |||
{time: '2023-12-18', name: '名称名称'}, | |||
{time: '2023-12-19', name: '名称名称'}, | |||
{time: '2023-12-20', name: '名称名称'}, | |||
{time: '2023-12-21', name: '名称名称'} | |||
] | |||
} | |||
}, | |||
methods: { | |||
setRowStyle(v) { | |||
if (v.rowIndex % 2 === 0) { | |||
return { | |||
background: 'rgba(11, 84, 153, 1)', | |||
color: 'rgba(255,255,255,0.8)', | |||
height: '40px', | |||
lineHeight: '40px', | |||
padding: 0, | |||
fontSize: '16px' | |||
} | |||
} else { | |||
return { | |||
background: 'rgba(4, 74, 132, 1)', | |||
color: 'rgba(255,255,255,0.8)', | |||
height: '40px', | |||
lineHeight: '40px', | |||
padding: 0, | |||
fontSize: '16px' | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
</script> | |||
<style lang='scss'> | |||
.aaa { | |||
.el-table { | |||
border: 0; | |||
} | |||
.el-table::before,.el-table--border::after { | |||
background-color: transparent; | |||
} | |||
.el-table th,td{ | |||
border-color: #0D1728 !important; | |||
padding: 0; | |||
} | |||
.el-table tr { | |||
background: transparent; | |||
} | |||
.el-table__row:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
.el-table__row--striped:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
} | |||
</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() { | |||
@@ -170,7 +170,12 @@ export default { | |||
{ width: 256, prop: 'code', label: '设备编码' }, | |||
{ prop: 'location', label: '位置' }, | |||
{ prop: 'responsiblePeopleName', label: '负责人' }, | |||
{ prop: 'dueTime', label: '有效期至' }, | |||
{ | |||
prop: 'dueDate', | |||
label: '有效期至', | |||
filter: (val) => | |||
val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '--', | |||
}, | |||
{ prop: 'remark', label: '备注' }, | |||
], | |||
searchBarFormConfig: [ | |||
@@ -250,8 +255,8 @@ export default { | |||
[ | |||
{ | |||
datetime: true, | |||
label: '有效期至', | |||
prop: 'dueTime', | |||
label: '有效期', | |||
prop: 'dueDate', | |||
bind: { clearable: true }, | |||
}, | |||
{}, | |||
@@ -195,18 +195,21 @@ export default { | |||
{ id: 3, name: '特种设备' }, | |||
], | |||
filterable: true, | |||
defaultSelect: null | |||
}, | |||
{ | |||
type: 'select', | |||
label: '设备', | |||
placeholder: '请选择设备', | |||
param: 'equipmentId', | |||
defaultSelect: null | |||
}, | |||
{ | |||
type: 'select', | |||
label: '计划名称', | |||
placeholder: '请选择计划名称', | |||
param: 'maintainPlanId', | |||
defaultSelect: null | |||
}, | |||
// 开始结束时间 | |||
{ | |||
@@ -220,6 +223,7 @@ export default { | |||
endPlaceholder: '结束日期', | |||
defaultTime: ['00:00:00', '23:59:59'], | |||
param: 'startTime', | |||
defaultSelect: null | |||
// width: 350, | |||
}, | |||
{ | |||
@@ -229,6 +233,7 @@ export default { | |||
{ name: '是', id: 1 }, | |||
{ name: '否', id: 2 }, | |||
], | |||
defaultSelect: null, | |||
param: 'relatePlan', | |||
}, | |||
{ | |||
@@ -434,12 +439,16 @@ export default { | |||
created() { | |||
this.initSearchBar(); | |||
if (this.$route.query) { | |||
this.queryParams.specialType = | |||
this.$route.query?.specialType ?? undefined; | |||
this.queryParams.equipmentId = | |||
this.$route.query?.equipmentId ?? undefined; | |||
this.queryParams.maintainPlanId = | |||
this.$route.query?.maintainPlanId ?? undefined; | |||
this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined; | |||
this.queryParams.startTime = this.$route.query?.createTime ?? undefined; | |||
this.searchBarFormConfig[0].defaultSelect = | |||
this.$route.query.specialType ?? undefined; | |||
this.searchBarFormConfig[1].defaultSelect = | |||
this.$route.query.equipmentId ?? undefined; | |||
this.searchBarFormConfig[2].defaultSelect = | |||
@@ -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); | |||
}, | |||
}; | |||
} |
@@ -0,0 +1,160 @@ | |||
import { WsConnect } from './websocket' | |||
import store from "@/store"; | |||
// 创建websocket链接 | |||
const timestr = new Date().getTime() | |||
const dcsConn = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.180.10:8081/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) | |||
} | |||
) | |||
const mesIsra = new WsConnect( | |||
'ws://10.70.2.2:8080/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; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
// 原料 MA | |||
const mesMA = new WsConnect( | |||
'ws://10.70.2.2:8080/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; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
// 能耗 EN | |||
const mesEN = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.2.2:8080/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; | |||
} | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
// 烟气 GAS | |||
const mesGAS = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.2.2:8080/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) | |||
} | |||
) | |||
export const getDcsMsg = () => { | |||
dcsConn.createWebSoket() | |||
mesIsra.createWebSoket() | |||
mesMA.createWebSoket() | |||
mesEN.createWebSoket() | |||
mesGAS.createWebSoket() | |||
} | |||
export const closeDcsMsg = () => { | |||
dcsConn.closeWebsocket() | |||
mesIsra.closeWebsocket() | |||
mesMA.closeWebsocket() | |||
mesEN.closeWebsocket() | |||
mesGAS.closeWebsocket() | |||
} |