39-ZhuzhouCRRC-ZZBZ-Pad/src/views/ProductionMonitoring/index.vue

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