完成设备大屏，新增报警大屏

baoshiwei

2024-12-06 346c9a61f4407be8180aff944bf75bed9c5efd00

 src/views/dry/bigScreen/BigEqp.vue

@@ -118,45 +118,236 @@
                           >
                              {{ statusTxt }}
                           </div>
                           <div v-if="realData?.warning" style=" 
                                 margin-left: 100px;
                                 font-size: 22px;
                                 background: sandybrown;
<!--                           <div v-if="realData?.warning" style=" -->
<!--                                 margin-left: 100px;-->
<!--                                 font-size: 22px;-->
<!--                                 background: sandybrown;-->

                                 border-radius: 10px;
                                 line-height: 25px;
                                 max-width: 500px;
                                 padding: 15px;
                                 font-weight: bold;" >
                              {{ realData?.warnMsg }}
                           </div>
									
<!--                                 border-radius: 10px;-->
<!--                                 line-height: 25px;-->
<!--                                 max-width: 500px;-->
<!--                                 padding: 15px;-->
<!--                                 font-weight: bold;" >-->
<!--                              {{ realData?.warnMsg }}-->
<!--                           </div>-->
<!--                           -->
                           
                        
                           <div
                              v-if="realData?.isError"
                              class="eqpInfoText blingbling outDiv"
                              style="
                                 position: absolute;
                                 font-size: 30px;
                                 max-height: 200px;
                                 max-width: 720px;
                                 margin-top: 300px;
                                 border-radius: 10px;
                                 background-color: #ce0000;
                                 color: white;
                                 padding: 10px 30px;
                              "
                           >
                              <div class="outDiv">
                                 <div><Icon icon="bx:error" :size="30" /> </div>
                                 <div
                                    ><span>{{ realData?.errorMsg }}</span></div
                                 >
                              </div>
                           </div>
<!--                           <div-->
<!--                              v-if="realData?.isError"-->
<!--                              class="eqpInfoText blingbling outDiv"-->
<!--                              style="-->
<!--                                 position: absolute;-->
<!--                                 font-size: 30px;-->
<!--                                 max-height: 200px;-->
<!--                                 max-width: 720px;-->
<!--                                 margin-top: 300px;-->
<!--                                 border-radius: 10px;-->
<!--                                 background-color: #ce0000;-->
<!--                                 color: white;-->
<!--                                 padding: 10px 30px;-->
<!--                              "-->
<!--                           >-->
<!--                              <div class="outDiv">-->
<!--                                 <div><Icon icon="bx:error" :size="30" /> </div>-->
<!--                                 <div-->
<!--                                    ><span>{{ realData?.errorMsg }}</span></div-->
<!--                                 >-->
<!--                              </div>-->
<!--                           </div>-->
                        </div>
                     </div>
              <div style="width: 848px; height: 485px; position: absolute;" @click="showFault">
                <div v-if="zuoqianjiting" class="error-div" style=" top:309px; left:418px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style="width: 70px;">
                    &nbsp;&nbsp;左前急停
                  </div>
                </div>
                <div v-if="shebeijiting" class="error-div"  style=" top:111px; left:484px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 106px;">
                    &nbsp;&nbsp;设备急停（总）
                  </div>
                </div>
                <div v-if="chuliaojiting" class="error-div"  style=" top:300px; left:129px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;出料急停
                  </div>
                </div>
                <div v-if="mianbanjiting" class="error-div"  style=" top:258px; left:659px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;面板急停
                  </div>
                </div>
                <div v-if="fengxiangsheng" class="error-div"  style=" top:294px; left:517px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;风箱升异常
                  </div>
                </div>
                <div v-if="fengxiangjiang" class="error-div"  style=" top:319px; left:517px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;风箱降异常
                  </div>
                </div>
                <div v-if="fengjiguoliu" class="error-div"  style=" top:335px; left:655px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;风机过流
                  </div>
                </div>
                <div v-if="guntongsheng" class="error-div"  style=" top:198px; left:517px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;滚筒升异常
                  </div>
                </div>
                <div v-if="guntongjiang" class="error-div"  style=" top:223px; left:517px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;滚筒降异常
                  </div>
                </div>
                <div v-if="guntongguoliu" class="error-div"  style=" top:209px; left:642px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;滚筒过流
                  </div>
                </div>
                <div v-if="wendubaojing" class="error-div"  style=" top:234px; left:659px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;温度报警
                  </div>
                </div>

                <div v-if="zuoqianmen" class="error-div"  style=" top:388px; left:415px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;左前门报警
                  </div>
                </div>
                <div v-if="zuohoumen" class="error-div"  style=" top:367px; left:587px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;左后门报警
                  </div>
                </div>
                <div v-if="youqianmen" class="error-div"  style=" top:388px; left:284px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;右前门报警
                  </div>
                </div>
                <div v-if="youhoumen" class="error-div"  style=" top:367px; left:478px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;右后门报警
                  </div>
                </div>

                <div v-if="guntongbuzaigaowei" class="error-div"  style=" top:173px; left:517px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;滚筒不在高位
                  </div>
                </div>
                <div v-if="fengxiangbuzaigaowei" class="error-div"  style=" top:269px; left:517px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;风箱不在高位
                  </div>
                </div>
                <div v-if="fengxiangbuzaidiwei" class="error-div"  style=" top:343px; left:517px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;风箱不在低位
                  </div>
                </div>
                <div v-if="jiareweichuanganqi" class="error-div"  style=" top:283px; left:642px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;加热位传感器报警
                  </div>
                </div>
                <div v-if="zuoqianfengxianggaowei" class="error-div"  style=" top:334px; left:362px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前风箱不在高位
                  </div>
                </div>
                <div v-if="zuoqianfengxiangdiwei" class="error-div"  style=" top:334px; left:362px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前风箱不在低位
                  </div>
                </div>
                <div v-if="zuohoufengxianggaowei" class="error-div"  style=" top:309px; left:642px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后风箱不在高位
                  </div>
                </div>
                <div v-if="zuohoufengxiangdiwei" class="error-div"  style=" top:309px; left:642px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后风箱不在低位
                  </div>
                </div>
                <div v-if="youqianfengxianggaowei" class="error-div"  style=" top:272px; left:300px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前风箱不在高位
                  </div>
                </div>
                <div v-if="youqianfengxiangdiwei" class="error-div"  style=" top:272px; left:300px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前风箱不在低位
                  </div>
                </div>
                <div v-if="youhoufengxianggaowei" class="error-div"  style=" top:246px; left:506px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后风箱不在高位
                  </div>
                </div>
                <div v-if="youhoufengxiangdiwei" class="error-div"  style=" top:246px; left:506px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后风箱不在低位
                  </div>
                </div>
                <div v-if="zuoqianguntongdiwei" class="error-div"  style=" top:175px; left:358px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前滚筒不在低位
                  </div>
                </div>
                <div v-if="zuohouguntongdiwei" class="error-div"  style=" top:158px; left:643px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后滚筒不在低位
                  </div>
                </div>
                <div v-if="youqianguntongdiwei" class="error-div"  style=" top:150px; left:268px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前滚筒不在低位
                  </div>
                </div>
                <div v-if="youhouguntongdiwei" class="error-div"  style=" top:135px; left:506px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后滚筒不在低位
                  </div>
                </div>

              </div>
                  </dv-border-box7>
                  <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
                     <div class="chartTittle">风箱温度</div>
@@ -524,6 +715,40 @@
   var efficiencyLineChart: echarts.ECharts

   var compareChart: echarts.ECharts

  //----------------error----------------
  const shebeijiting = ref(false)
  const chuliaojiting = ref(false)
  const zuoqianjiting = ref(false)
  const mianbanjiting = ref(false)
  const fengxiangsheng = ref(false)
  const fengxiangjiang = ref(false)
  const fengjiguoliu = ref(false)
  const guntongsheng = ref(false)
  const guntongjiang = ref(false)
  const guntongguoliu = ref(false)
  const wendubaojing = ref(false)
  //--------------warning------------
  const zuoqianmen = ref(false)
  const zuohoumen = ref(false)
  const youqianmen = ref(false)
  const youhoumen = ref(false)
  const guntongbuzaigaowei = ref(false)
  const fengxiangbuzaigaowei = ref(false)
  const fengxiangbuzaidiwei = ref(false)
  const jiareweichuanganqi = ref(false)
  const zuoqianfengxianggaowei = ref(false)
  const zuohoufengxianggaowei = ref(false)
  const youqianfengxianggaowei = ref(false)
  const youhoufengxianggaowei = ref(false)
  const zuoqianfengxiangdiwei = ref(false)
  const zuohoufengxiangdiwei = ref(false)
  const youqianfengxiangdiwei = ref(false)
  const youhoufengxiangdiwei = ref(false)
  const zuoqianguntongdiwei = ref(false)
  const zuohouguntongdiwei = ref(false)
  const youqianguntongdiwei = ref(false)
  const youhouguntongdiwei = ref(false)

   function initCharts() {
      let domId = 'moisChart'
@@ -1327,7 +1552,11 @@
      statusGif = 'chaiwangban-1'
      setTimeout(shangliao, 7000)
   }
  function showFault () {
    console.log('showFault')
    router.push({ path: '/bigFault', query: {  num: num } })

  }
   function shangliao() {
      statusGif = 'shangliao-N'
      setTimeout(() => {
@@ -1722,17 +1951,114 @@
               } else if (res.herbName == '桑白皮') {
                  res.herbImage = 'sangbaipi.png'
               }
					
               res.isError = false
               if (res.fault) {
                  res.isError = true
                  res.errorMsg = res.fault
               }

               if (res.warning) {
                  res.isWarning = true
                  res.warnMsg = res.warning
               }
          res.isError = false
          if (res.fault) {
            res.isError = true
            res.errorMsg = res.fault;
            const faults = res.fault;
            console.log('errorMsg:', res.fault)
            if (faults.includes('急停报警')) {
              shebeijiting.value = true;
            }
            if (faults.includes('左前急停')) {
              zuoqianjiting.value = true;
            }
            if (faults.includes('面板急停')) {
              mianbanjiting.value = true;
            }
            if (faults.includes('出料急停')) {
              chuliaojiting.value = true;
            }
            if (faults.includes('温度失控')) {
              wendubaojing.value = true;
            }
            if (faults.includes('滚筒升')) {
              guntongsheng.value = true;
            }
            if (faults.includes('滚筒降')) {
              guntongjiang.value = true;
            }
            if (faults.includes('滚筒电机过流')) {
              guntongguoliu.value = true;
            }
            if (faults.includes('风箱升')) {
              fengxiangsheng.value = true;
            }
            if (faults.includes('风箱降')) {
              fengxiangjiang.value = true;
            }
            if (faults.includes('风箱风机过流')) {
              fengjiguoliu.value = true;
            }
          }

          if (res.warning) {
            res.isWarning = true
            res.warnMsg = res.warning
            const warnings = res.warning;
            console.log('warnMsg:', res.warning)
            if (warnings.includes('左前门')) {
              zuoqianmen.value = true;
            }
            if (warnings.includes('右前门')) {
              youqianmen.value = true;
            }
            if (warnings.includes('左后门')) {
              zuohoumen.value = true;
            }
            if (warnings.includes('右后门')) {
              youhoumen.value = true;
            }
            if (warnings.includes('滚筒不在高位')) {
              guntongbuzaigaowei.value = true;
            }
            if (warnings.includes('风箱不在低位')) {
              fengxiangbuzaidiwei.value = true;
            }
            if (warnings.includes('风箱不在高位')) {
              fengxiangbuzaigaowei.value = true;
            }
            if (warnings.includes('加热位传感器')) {
              jiareweichuanganqi.value = true;
            }
            if (warnings.includes('左前风箱高位传感器')) {
              zuoqianfengxianggaowei.value = true;
            }
            if (warnings.includes('右前风箱高位传感器')) {
              youqianfengxianggaowei.value = true;
            }
            if (warnings.includes('左后风箱高位传感器')) {
              zuohoufengxianggaowei.value = true;
            }
            if (warnings.includes('右后风箱高位传感器')) {
              youhoufengxianggaowei.value = true;
            }
            if (warnings.includes('左前风箱低位传感器')) {
              zuoqianfengxiangdiwei.value = true;
            }
            if (warnings.includes('右前风箱低位传感器')) {
              youqianfengxiangdiwei.value = true;
            }
            if (warnings.includes('左后风箱低位传感器')) {
              zuohoufengxiangdiwei.value = true;
            }
            if (warnings.includes('右后风箱低位传感器')) {
              youhoufengxiangdiwei.value = true;
            }
            if (warnings.includes('左前滚筒低位传感器')) {
              zuoqianguntongdiwei.value = true;
            }
            if (warnings.includes('右前滚筒低位传感器')) {
              youqianguntongdiwei.value = true;
            }
            if (warnings.includes('左后滚筒低位传感器')) {
              zuohouguntongdiwei.value = true;
            }
            if (warnings.includes('右后滚筒低位传感器')) {
              youhouguntongdiwei.value = true;
            }
          }
            } else {
               res = {
                  mois: [],
@@ -1883,7 +2209,7 @@
      margin-top: -30px;
   }
   .leftTop0 {
      height: 600px;
      height: 260px;
      width: 848px;
      display: flex;
      justify-content: center;