chore: 初始化株洲中车部装平台 Pad
This commit is contained in:
yexingqiang
357
src/views/ProductionMonitoring/index.vue
Normal file
357
src/views/ProductionMonitoring/index.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carMainData two-columns">
|
||||
<div class="column">
|
||||
<div class="column-title">台位1项目信息</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">项目编号：</div>
|
||||
{{ projectData.projectNo }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">项目名称：</div>
|
||||
{{ projectData.projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">车体：</div>
|
||||
{{ projectData.carBody }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">车号：</div>
|
||||
{{ projectData.carNo }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">伸缩缝：</div>
|
||||
{{ projectData.expansionJoint }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">车节：</div>
|
||||
{{ projectData.carSection }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">调节参数：</div>
|
||||
{{ projectData.adjustTheParameters }}
|
||||
</div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column-title">台位2项目信息</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">项目编号：</div>
|
||||
{{ projectData2.projectNo }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">项目名称：</div>
|
||||
{{ projectData2.projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">车体：</div>
|
||||
{{ projectData2.carBody }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">车号：</div>
|
||||
{{ projectData2.carNo }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">伸缩缝：</div>
|
||||
{{ projectData2.expansionJoint }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="title">车节：</div>
|
||||
{{ projectData2.carSection }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<div class="item">
|
||||
<div class="title">调节参数：</div>
|
||||
{{ projectData2.adjustTheParameters }}
|
||||
</div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataList">
|
||||
<div class="OpList" v-for="item in tvData">
|
||||
<div class="item">
|
||||
<div class="label">RGV通道：</div>
|
||||
<div class="value">{{ item.RGV通道 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">中控程序代码：</div>
|
||||
<div class="value">{{ item.中控程序代码 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">MES连接：</div>
|
||||
<div class="value" :style="{ color: item.生产模式 == '在线' ? '#00802d' : '#7b7e87' }">{{ item.生产模式 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">网络状态：</div>
|
||||
<div class="value" :style="{ color: item.网络状态 == '通' ? '#00802d' : '#b32f43' }">{{ item.网络状态 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">门禁状态：</div>
|
||||
<div class="value" :style="{ color: item.门禁状态 == '解锁' ? '#ff9900' : '#00802d' }">{{ item.门禁状态 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">RGV状态：</div>
|
||||
<div class="value" :style="{ color: item.RGV状态 == '空闲' ? '#ff9900' : '#00802d' }">{{ item.RGV状态 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">是否有车：</div>
|
||||
<div class="value" :style="{ color: item.是否有车 == '有车' ? '#00802d' : '#b32f43' }">{{ item.是否有车 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataList" style="margin-top: 5vh;">
|
||||
<div class="OpList" >
|
||||
<div class="item">
|
||||
<div class="label">气表编号：</div>
|
||||
<div class="value">累计消耗</div>
|
||||
</div>
|
||||
<div class="item" v-for="item in airData">
|
||||
<div class="label">{{ item.气表编号 }}：</div>
|
||||
<div class="value">{{ item.累计 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="OpList" >
|
||||
<div class="item">
|
||||
<div class="label">电表编号：</div>
|
||||
<div class="value">有功电能</div>
|
||||
</div>
|
||||
<div class="item" v-for="item in eleData">
|
||||
<div class="label">{{ item.电表编号 }}：</div>
|
||||
<div class="value">{{ item.有功电能 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import { useAppStore } from "@/store/app.js";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import mqtt from "mqtt";
|
||||
|
||||
const store = useAppStore();
|
||||
|
||||
const CreateData = inject('CreateData')
|
||||
const ExecDatabase = inject('ExecDatabase')
|
||||
const ExecWritePLC = inject('ExecWritePLC')
|
||||
const ExecReadPLC = inject('ExecReadPLC')
|
||||
const ExecMultReadPLC = inject('ExecMultReadPLC')
|
||||
const ExecIMESAPI = inject('ExecIMESAPI')
|
||||
|
||||
const projectData = reactive({
|
||||
projectNo: '', // 项目编号
|
||||
projectName: '', // 项目名称
|
||||
carNo: '', // 车号
|
||||
carSection: '', // 车节
|
||||
carBodyNo: '', // 车体流水号
|
||||
carBody: '', // 车体
|
||||
carBodyCode: '', // 车体流水号
|
||||
expansionJoint: '', // 伸缩缝
|
||||
adjustTheParameters: '', // 调节参数
|
||||
})
|
||||
|
||||
const projectData2 = reactive({
|
||||
projectNo: '', // 项目编号
|
||||
projectName: '', // 项目名称
|
||||
carNo: '', // 车号
|
||||
carSection: '', // 车节
|
||||
carBodyNo: '', // 车体流水号
|
||||
carBody: '', // 车体
|
||||
carBodyCode: '', // 车体流水号
|
||||
expansionJoint: '', // 伸缩缝
|
||||
adjustTheParameters: '', // 调节参数
|
||||
})
|
||||
|
||||
const tvData = reactive([])
|
||||
const airData = reactive([])
|
||||
const eleData = reactive([])
|
||||
|
||||
onMounted(() => {
|
||||
getRGVData()
|
||||
getTVData()
|
||||
getAirData()
|
||||
getEleData()
|
||||
// getPLCStatus()
|
||||
// // 初始化时获取所有状态
|
||||
// getConnectionStatus()
|
||||
// timer1 = setInterval(() => {
|
||||
// getRGVData()
|
||||
// // getPLCStatus()
|
||||
// }, 1000 * 5)
|
||||
});
|
||||
|
||||
|
||||
const getRGVData = () => {
|
||||
var param = []
|
||||
param[0] = ['opName', 'RGVCH2']
|
||||
var Data = CreateData('11', 'CRRC_台位_RGV送料Moby_送料平台_查询', param)
|
||||
ExecDatabase(Data).then(response => {
|
||||
if (response.data.length > 0) {
|
||||
let data = response.data[0]
|
||||
projectData.projectNo = data.项目编号
|
||||
projectData.projectName = data.项目名称
|
||||
projectData.carNo = data.车号
|
||||
projectData.carSection = data.车节
|
||||
projectData.carBodyNo = data.车体流水号
|
||||
projectData.carBody = data.车体
|
||||
projectData.carBodyCode = data.车体流水号
|
||||
projectData.expansionJoint = data.伸缩缝
|
||||
projectData.adjustTheParameters = data.调节参数
|
||||
|
||||
if (response.data.length > 1) {
|
||||
projectData2.projectNo = response.data[1].项目编号
|
||||
projectData2.projectName = response.data[1].项目名称
|
||||
projectData2.carNo = response.data[1].车号
|
||||
projectData2.carSection = response.data[1].车节
|
||||
projectData2.carBodyNo = response.data[1].车体流水号
|
||||
projectData2.carBody = response.data[1].车体
|
||||
projectData2.carBodyCode = response.data[1].车体流水号
|
||||
projectData2.expansionJoint = response.data[1].伸缩缝
|
||||
projectData2.adjustTheParameters = response.data[1].调节参数
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getTVData = () => {
|
||||
var param = []
|
||||
var Data = CreateData('11', 'CRRC_生产看板_查询', param)
|
||||
ExecDatabase(Data).then(response => {
|
||||
tvData.length = 0
|
||||
if (response.data.length > 0) {
|
||||
tvData.push(...response.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getAirData = () => {
|
||||
var param = []
|
||||
var Data = CreateData('11', 'CRRC_能源管理_气表_当前值_查询', param)
|
||||
ExecDatabase(Data).then(response => {
|
||||
airData.length = 0
|
||||
if (response.data.length > 0) {
|
||||
airData.push(...response.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getEleData = () => {
|
||||
var param = []
|
||||
var Data = CreateData('11', 'CRRC_能源管理_电表_当前值_查询', param)
|
||||
ExecDatabase(Data).then(response => {
|
||||
eleData.length = 0
|
||||
if (response.data.length > 0) {
|
||||
eleData.push(...response.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carMainData {
|
||||
width: 90vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 3vh auto 30px auto;
|
||||
border: 1px solid #a8a8a8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
|
||||
&.two-columns {
|
||||
flex-wrap: nowrap;
|
||||
gap: 20px;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
|
||||
.column-title {
|
||||
width: 100% !important;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
line-height: 32px;
|
||||
|
||||
.title {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
line-height: 32px;
|
||||
|
||||
.title {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.two-columns .item {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dataList {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
|
||||
.OpList {
|
||||
flex: 1;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 60%;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user