修改报警解除后界面仍显示问题

baoshiwei

2024-12-24 d5b77e6f03d8477cbae9bc097f888caf939de00f

 src/views/dry/bigScreen/BigFaultCloud.vue

@@ -4,10 +4,14 @@
         <div class="eqpRow">
            <div class="eqpImage" :style="{ 'background-position': position + 'px' }">
               <div class="leftEqp">

                  <dv-border-box7 class="leftTop">
                     <div class="leftTop0">
                <div style="padding-top: 20px; padding-left: 10px" @click="back">
                  <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
                </div>

                        <div class="leftTop1">

                           <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                           <div>
                              <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div>
@@ -41,241 +45,177 @@
                           </div>
                        </div>
                     </div>
              <div style="width: 1200px; height: 798px; position: absolute;">
                <div v-if="true | zuoqianjiting" class="error-div" style=" top:466px; left:589px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style="width: 70px;">
                    &nbsp;&nbsp;左前急停
                  </div>
                </div>
                <div v-if="true | shebeijiting" class="error-div"  style=" top:170px; left:702px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 106px;">
                    &nbsp;&nbsp;设备急停（总）
                  </div>
                </div>
                <div v-if="true | chuliaojiting" class="error-div"  style=" top:450px; left:158px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;出料急停
                  </div>
                </div>
                <div v-if="true | mianbanjiting" class="error-div"  style=" top:398px; left:978px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;面板急停
                  </div>
                </div>
                <div v-if="true | fengxiangsheng" class="error-div"  style=" top:476px; left:753px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;风箱升异常
                  </div>
                </div>
                <div v-if="true | fengxiangjiang" class="error-div"  style=" top:502px; left:753px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;风箱降异常
                  </div>
                </div>
                <div v-if="true | fengjiguoliu" class="error-div"  style=" top:510px; left:975px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;风机过流
                  </div>
                </div>
                <div v-if="true | guntongsheng" class="error-div"  style=" top:331px; left:753px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;滚筒升异常
                  </div>
                </div>
                <div v-if="true | guntongjiang" class="error-div"  style=" top:356px; left:753px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 86px;">
                    &nbsp;&nbsp;滚筒降异常
                  </div>
                </div>
                <div v-if="true | guntongguoliu" class="error-div"  style=" top:324px; left:916px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;滚筒过流
                  </div>
                </div>
                <div v-if="true | wendubaojing" class="error-div"  style=" top:373px; left:978px">
                  <div class="blingbling error-marker" ></div>
                  <div class="error-msg" style=" width: 70px;">
                    &nbsp;&nbsp;温度报警
                  </div>
                </div>
                     <div style="width: 1200px; height: 798px; position: absolute">
                        <div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px">
                           <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: 170px; left: 702px">
                           <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: 450px; left: 158px">
                           <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: 398px; left: 978px">
                           <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: 476px; left: 753px">
                           <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: 502px; left: 753px">
                           <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: 510px; left: 975px">
                           <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: 331px; left: 753px">
                           <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: 356px; left: 753px">
                           <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: 324px; left: 916px">
                           <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: 373px; left: 978px">
                           <div class="blingbling error-marker"></div>
                           <div class="error-msg" style="width: 70px"> &nbsp;&nbsp;温度报警 </div>
                        </div>

                <div v-if="true | zuoqianmen" class="error-div"  style=" top:595px; left:591px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;左前门报警
                  </div>
                </div>
                <div v-if="true | zuohoumen" class="error-div"  style=" top:565px; left:868px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;左后门报警
                  </div>
                </div>
                <div v-if="true | youqianmen" class="error-div"  style=" top:593px; left:396px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;右前门报警
                  </div>
                </div>
                <div v-if="true | youhoumen" class="error-div"  style=" top:565px; left:697px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 80px;">
                    &nbsp;&nbsp;右后门报警
                  </div>
                </div>
                        <div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px">
                           <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: 565px; left: 868px">
                           <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: 593px; left: 396px">
                           <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: 565px; left: 697px">
                           <div class="blingbling warn-marker"></div>
                           <div class="warn-msg" style="width: 80px"> &nbsp;&nbsp;右后门报警 </div>
                        </div>

                <div v-if="true | guntongbuzaigaowei" class="error-div"  style=" top:304px; left:753px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;滚筒不在高位
                  </div>
                </div>
                <div v-if="true | fengxiangbuzaigaowei" class="error-div"  style=" top:451px; left:753px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;风箱不在高位
                  </div>
                </div>
                <div v-if="true | fengxiangbuzaidiwei" class="error-div"  style=" top:528px; left:753px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 100px;">
                    &nbsp;&nbsp;风箱不在低位
                  </div>
                </div>
                <div v-if="true | jiareweichuanganqi" class="error-div"  style=" top:433px; left:904px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;加热位传感器报警
                  </div>
                </div>
                <div v-if="true | zuoqianfengxianggaowei" class="error-div"  style=" top:502px; left:535px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前风箱不在高位
                  </div>
                </div>
                <div v-if="true | zuoqianfengxiangdiwei" class="error-div"  style=" top:528px; left:535px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前风箱不在低位
                  </div>
                </div>
                <div v-if="true | zuohoufengxianggaowei" class="error-div"  style=" top:459px; left:904px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后风箱不在高位
                  </div>
                </div>
                <div v-if="true | zuohoufengxiangdiwei" class="error-div"  style=" top:484px; left:904px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后风箱不在低位
                  </div>
                </div>
                <div v-if="true | youqianfengxianggaowei" class="error-div"  style=" top:447px; left:420px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前风箱不在高位
                  </div>
                </div>
                <div v-if="true | youqianfengxiangdiwei" class="error-div"  style=" top:473px; left:420px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前风箱不在低位
                  </div>
                </div>
                <div v-if="true | youhoufengxianggaowei" class="error-div"  style=" top:383px; left:805px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后风箱不在高位
                  </div>
                </div>
                <div v-if="true | youhoufengxiangdiwei" class="error-div"  style=" top:408px; left:805px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后风箱不在低位
                  </div>
                </div>
                <div v-if="true | zuoqianguntongdiwei" class="error-div"  style=" top:343px; left:530px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左前滚筒不在低位
                  </div>
                </div>
                <div v-if="true | zuohouguntongdiwei" class="error-div"  style=" top:296px; left:916px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;左后滚筒不在低位
                  </div>
                </div>
                <div v-if="true | youqianguntongdiwei" class="error-div"  style=" top:316px; left:419px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右前滚筒不在低位
                  </div>
                </div>
                <div v-if="true | youhouguntongdiwei" class="error-div"  style=" top:270px; left:797px">
                  <div class="blingbling warn-marker" ></div>
                  <div class="warn-msg" style=" width: 126px;">
                    &nbsp;&nbsp;右后滚筒不在低位
                  </div>
                </div>

              </div>
                        <div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px">
                           <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: 451px; left: 753px">
                           <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: 528px; left: 753px">
                           <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: 433px; left: 904px">
                           <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: 502px; left: 535px">
                           <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: 528px; left: 535px">
                           <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: 459px; left: 904px">
                           <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: 484px; left: 904px">
                           <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: 447px; left: 420px">
                           <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: 473px; left: 420px">
                           <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: 383px; left: 805px">
                           <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: 408px; left: 805px">
                           <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: 343px; left: 530px">
                           <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: 296px; left: 916px">
                           <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: 316px; left: 419px">
                           <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: 270px; left: 797px">
                           <div class="blingbling warn-marker"></div>
                           <div class="warn-msg" style="width: 126px"> &nbsp;&nbsp;右后滚筒不在低位 </div>
                        </div>
                     </div>
                  </dv-border-box7>


               </div>
               <div class="rightInfo">
                  <div class="rightTop">
                     <dv-border-box7 class="tempMoisChart">

                        <a-row>
                           <a-col :span="7">故障名称</a-col>
                           <a-col :span="7">开始时间</a-col>
                           <a-col :span="7">结束时间</a-col>
                           <a-col :span="3">持续时长</a-col>
                        </a-row>
                        <div ref="scrollContainer" class="scroll-container">
                           <a-row v-for="item in faultList" :key="item.id">
                              <a-col :span="7">{{ item.faultName }}</a-col>
                              <a-col :span="7">{{ item.startTime }}</a-col>
                              <a-col :span="7">{{ item.endTime }}</a-col>
                              <a-col :span="3">{{ item.totalTime }}</a-col>
                           </a-row>
                        </div>
                     </dv-border-box7>
                  </div>
                  <div class="rightTwo">
                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle">
                           故障时长统计

                        </div>
                        <div class="outDiv" style="padding-top: 20px">

                        </div>
                        <div class="chartTittle"> 故障时长统计 </div>
                        <!--                        <div class="outDiv" style="padding-top: 20px">-->
                        <!--                  -->
                        <!--                </div>-->
                        <div :id="'chartDom'" style="width: 340px; height: 280px"></div>
                     </dv-border-box7>

                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle"
                           >故障次数纹

                        </div>
                        <div class="outDiv" style="padding-top: 20px">

                        </div>
                        <div class="chartTittle">故障次数纹 </div>
                        <div :id="'chartDom2'" style="width: 340px; height: 280px"></div>
                     </dv-border-box7>
                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle">警告时长统计</div>
                        <div class="outDiv" style="padding-top: 10px">

                        </div>
                        <div :id="'chartDom3'" style="width: 340px; height: 280px"></div>
                     </dv-border-box7>
                     <dv-border-box7 class="infoChart">
                        <div class="chartTittle">
                           <div> 警告次数统计</div>

                        </div>
                        <div class="outDiv" style="padding-top: 20px">

                        </div>
                        <div :id="'chartDom4'" style="width: 340px; height: 280px"></div>
                     </dv-border-box7>
                  </div>
               </div>
@@ -296,6 +236,7 @@
   import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
   import { defHttp } from '/@/utils/http/axios'
   import { queryById, listAll } from '../api/DryEquipment.api'
   import { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api'
   import { dryEquipment } from '../dataDefine/DryEquipment.data'
   import { useUserStore } from '/@/store/modules/user'
   const domRef = ref<Nullable<HTMLElement>>(null)
@@ -304,58 +245,66 @@
   const { toggle: toggleDom } = useFullscreen(domRef)
   const Timer = ref()
   const Timer2 = ref()

   const scrollContainer = ref(null)
   let scrollInterval = null
   const isScrolling = ref(false) // 控制是否正在滚动以防止重复触发
   const eqps = ref([] as dryEquipment[])
   console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query)
   const eqp = ref({} as dryEquipment)
   const eqpNum = ref(router.currentRoute.value.query.num || 1)
  const tenant = ref(router.currentRoute.value.query.tenant)
   const tenant = ref(router.currentRoute.value.query.tenant)
   const userStore = useUserStore()
   const realData = ref({})

   const realData = ref({
      code: 0,
   })

   const position = ref(1)
   //realData.value.tempValue = [0, 100]
   realData.value.mois = [0.5, 0.35, 0.2]
   statusGif = 'tmrefeng2'
   realData.value.herbImage = 'yaocai1.png'
  // const faultConst = ['急停报警','左前急停','面板急停','出料急停','温度失控','滚筒升','滚筒降','滚筒电机过流','风箱升','风箱降','风箱风机过流']
  // const warningConst = ['左前门','右前门','左后门','右后门','滚筒不在高位','风箱不在低位','风箱不在高位','加热位传感器','左前风箱高位传感器','右前风箱高位传感器','左后风箱高位传感器','右后风箱高位传感器','左前风箱低位传感器','右前风箱低位传感器','左后风箱低位传感器','右后风箱低位传感器','左前滚筒低位传感器','右前滚筒低位传感器','左后滚筒低位传感器','右后滚筒低位传感器']

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

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


   const faultList = ref([])
   var chart1: echarts.ECharts
   var chart2: echarts.ECharts
   var chart3: echarts.ECharts
   var chart4: echarts.ECharts
   // 动态读取图片
   function getHerbImageUrl(name: string) {
      return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
@@ -363,12 +312,11 @@

   // 动态读取图片
   function getStatusImageUrl(name: string) {
      if (name =='zanting') {
      if (name == 'zanting') {
         return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href
      } else {
         return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href
      }
		
   }
   function queryEqp() {
      queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -396,8 +344,145 @@
         })
   }

   var num = eqpNum.value
   function initCharts() {
      let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement
      let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement
      let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement
      let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement

      chart1 = echarts.init(chartDom1)
      chart2 = echarts.init(chartDom2)
      chart3 = echarts.init(chartDom3)
      chart4 = echarts.init(chartDom4)

      const option2 = {
         grid: {
            left: '13%', // 左边距，也可以是具体的像素值，例如 50
            right: '6%', // 右边距
            top: '13%', // 上边距
            bottom: '35%', // 设置下边距，例如这里设置为15%
         },
         xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
               rotate: 55, // 这里设置旋转的角度，正值表示顺时针旋转
               interval: 0, // 强制显示所有标签，不进行间隔显示
               color: '#fff', // 设置X轴标签字体颜色
            },
         },
         yAxis: {
            type: 'value',
            axisLabel: {
               color: '#fff', // 设置Y轴标签字体颜色
            },
            splitLine: { show: false }, // 不显示Y轴分割线（网格线）
         },
         series: [
            {
               data: [],
               type: 'bar',
               itemStyle: {
                  color: '#3398DB', // 指定柱子的颜色
               },
            },
         ],
      }
      const option1 = {
         tooltip: {
            trigger: 'item',
         },

         series: [
            {
               data: [],
               type: 'pie',
               radius: '50%',
               emphasis: {
                  itemStyle: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
               },
               label: {
                  show: true, // 显示标签
                  //position: 'outside', // 标签的位置，可以是 'outside', 'inside', 'center'
                  //formatter: '{b}: {c} ({d}%)', // 标签内容格式化函数或字符串模板
                  fontSize: 12, // 设置字体大小
                  // fontWeight: 'bold', // 设置字体粗细
                  color: '#fff', // 设置字体颜色
               },
            },
         ],
      }
      const option4 = {
         grid: {
            left: '13%', // 左边距，也可以是具体的像素值，例如 50
            right: '6%', // 右边距
            top: '13%', // 上边距
            bottom: '35%', // 设置下边距，例如这里设置为15%
         },
         xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
               rotate: 55, // 这里设置旋转的角度，正值表示顺时针旋转
               interval: 0, // 强制显示所有标签，不进行间隔显示
               color: '#fff', // 设置X轴标签字体颜色
            },
         },
         yAxis: {
            type: 'value',
            axisLabel: {
               color: '#fff', // 设置Y轴标签字体颜色
            },
            splitLine: { show: false }, // 不显示Y轴分割线（网格线）
         },
         series: [
            {
               data: [],
               type: 'bar',
               itemStyle: {
                  color: '#3398DB', // 指定柱子的颜色
               },
            },
         ],
      }
      const option3 = {
         tooltip: {
            trigger: 'item',
         },

         series: [
            {
               data: [],
               type: 'pie',
               radius: '50%',
               emphasis: {
                  itemStyle: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
               },
               label: {
                  show: true, // 显示标签
                  //position: 'outside', // 标签的位置，可以是 'outside', 'inside', 'center'
                  //formatter: '{b}: {c} ({d}%)', // 标签内容格式化函数或字符串模板
                  fontSize: 12, // 设置字体大小
                  //fontWeight: 'bold', // 设置字体粗细
                  color: '#fff', // 设置字体颜色
               },
            },
         ],
      }

      option1 && chart1.setOption(option1)
      option2 && chart2.setOption(option2)
      option3 && chart3.setOption(option3)
      option4 && chart4.setOption(option4)
   }

   var shangliaoFlag = false
   var statusGif = 'tmrefeng2'
@@ -420,7 +505,12 @@
         }, 7000)
      }, 15000)
   }

  function back() {
    router.back()
  }
   /**
    * 查询实时数据
    */
   function queryRealTime() {
      if (eqp.value) {
         eqp.value = eqps.value[eqpNum.value]
@@ -431,6 +521,7 @@
         defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => {
            if (res && res.trendVo) {
               console.log(`output->re11s`, res)
               var totalTime = 0

               /**水滴图含水量 */
               res.mois = [
@@ -438,7 +529,6 @@
                  (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                  (res.trendVo.moisture / 100 / 3).toFixed(2),
               ]


               /**状态/gif动图 */
               if (!shangliaoFlag) {
@@ -465,8 +555,8 @@
                     // }

                     // if (res.state_fan == 1) {
                        statusGif = 'tmrefeng2'
                        statusTxt = '正在干燥'
                     statusGif = 'tmrefeng2'
                     statusTxt = '正在干燥'
                     // }

                     // if (res.state_roller == 4) {
@@ -506,19 +596,212 @@
               } else if (res.herbName == '桑白皮') {
                  res.herbImage = 'sangbaipi.png'
               }
					
               res.isError = false
               if (res.fault) {
                  res.isError = true
                  res.errorMsg = res.fault
            console.log("errorMsg:",res.fault)
               }

               if (res.warning) {
                  res.isWarning = true
                  res.warnMsg = res.warning
            console.log("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;
            } else {
              shebeijiting.value = false;
            }
            if (faults.includes('左前急停')) {
              zuoqianjiting.value = true;
            } else {
              zuoqianjiting.value = false;
            }
            if (faults.includes('面板急停')) {
              mianbanjiting.value = true;
            } else {
              mianbanjiting.value = false;
            }
            if (faults.includes('出料急停')) {
              chuliaojiting.value = true;
            } else {
              chuliaojiting.value = false;
            }
            if (faults.includes('温度失控')) {
              wendubaojing.value = true;
            } else {
              wendubaojing.value = false;
            }
            if (faults.includes('滚筒升')) {
              guntongsheng.value = true;
            } else {
              guntongjiang.value = false;
            }
            if (faults.includes('滚筒降')) {
              guntongjiang.value = true;
            } else {
              guntongjiang.value = false;
            }
            if (faults.includes('滚筒电机过流')) {
              guntongguoliu.value = true;
            } else {
              guntongguoliu.value = false;
            }
            if (faults.includes('风箱升')) {
              fengxiangsheng.value = true;
            } else {
              fengxiangsheng.value = false;
            }
            if (faults.includes('风箱降')) {
              fengxiangjiang.value = true;
            } else {
              fengxiangjiang.value = false;
            }
            if (faults.includes('风箱风机过流')) {
              fengjiguoliu.value = true;
            } else {
              fengjiguoliu.value = false;
            }
          }
          else {
            shebeijiting.value = false
            chuliaojiting.value = false
            zuoqianjiting.value = false
            mianbanjiting.value = false
            fengxiangsheng.value = false
            fengxiangjiang.value = false
            fengjiguoliu.value = false
            guntongsheng.value = false
            guntongjiang.value = false
            guntongguoliu.value = false
            wendubaojing.value = false
          }

          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;
            } else {
              zuoqianmen.value = false;
            }
            if (warnings.includes('右前门')) {
              youqianmen.value = true;
            } else {
              youqianmen.value = false;
            }
            if (warnings.includes('左后门')) {
              zuohoumen.value = true;
            } else {
              zuohoumen.value = false;
            }
            if (warnings.includes('右后门')) {
              youhoumen.value = true;
            } else {
              youhoumen.value = false;
            }
            if (warnings.includes('滚筒不在高位')) {
              guntongbuzaigaowei.value = true;
            } else {
              guntongbuzaigaowei.value = false;
            }
            if (warnings.includes('风箱不在低位')) {
              fengxiangbuzaidiwei.value = true;
            } else {
              fengxiangbuzaidiwei.value = false;
            }
            if (warnings.includes('风箱不在高位')) {
              fengxiangbuzaigaowei.value = true;
            } else {
              fengxiangbuzaigaowei.value = false;
            }
            if (warnings.includes('加热位传感器')) {
              jiareweichuanganqi.value = true;
            } else {
              jiareweichuanganqi.value = false;
            }
            if (warnings.includes('左前风箱高位传感器')) {
              zuoqianfengxianggaowei.value = true;
            } else {
              zuoqianfengxianggaowei.value = false;
            }
            if (warnings.includes('右前风箱高位传感器')) {
              youqianfengxianggaowei.value = true;
            } else {
              youqianfengxianggaowei.value = false;
            }
            if (warnings.includes('左后风箱高位传感器')) {
              zuohoufengxianggaowei.value = true;
            } else {
              zuohoufengxianggaowei.value = false;
            }
            if (warnings.includes('右后风箱高位传感器')) {
              youhoufengxianggaowei.value = true;
            } else {
              youhoufengxianggaowei.value = false;
            }
            if (warnings.includes('左前风箱低位传感器')) {
              zuoqianfengxiangdiwei.value = true;
            } else {
              zuoqianfengxiangdiwei.value = false;
            }
            if (warnings.includes('右前风箱低位传感器')) {
              youqianfengxiangdiwei.value = true;
            } else {
              youqianfengxiangdiwei.value = false;
            }
            if (warnings.includes('左后风箱低位传感器')) {
              zuohoufengxiangdiwei.value = true;
            } else {
              zuohoufengxiangdiwei.value = false;
            }
            if (warnings.includes('右后风箱低位传感器')) {
              youhoufengxiangdiwei.value = true;
            } else {
              youhoufengxiangdiwei.value = false;
            }
            if (warnings.includes('左前滚筒低位传感器')) {
              zuoqianguntongdiwei.value = true;
            } else {
              zuoqianguntongdiwei.value = false;
            }
            if (warnings.includes('右前滚筒低位传感器')) {
              youqianguntongdiwei.value = true;
            } else {
              youqianguntongdiwei.value = false;
            }
            if (warnings.includes('左后滚筒低位传感器')) {
              zuohouguntongdiwei.value = true;
            } else {
              zuohouguntongdiwei.value = false;
            }
            if (warnings.includes('右后滚筒低位传感器')) {
              youhouguntongdiwei.value = true;
            } else {
              youhouguntongdiwei.value = false;
            }
          }
          else {
            zuoqianmen.value = false;
            zuohoumen.value = false;
            youqianmen.value = false;
            youhoumen.value = false;
            guntongbuzaigaowei.value = false;
            fengxiangbuzaigaowei.value = false;
            fengxiangbuzaidiwei.value = false;
            jiareweichuanganqi.value = false;
            zuoqianfengxianggaowei.value = false;
            zuohoufengxianggaowei.value = false;
            youqianfengxianggaowei.value = false;
            youhoufengxianggaowei.value = false;
            zuoqianfengxiangdiwei.value = false;
            zuohoufengxiangdiwei.value = false;
            youqianfengxiangdiwei.value = false;
            youhoufengxiangdiwei.value = false;
            zuoqianguntongdiwei.value = false;
            zuohouguntongdiwei.value = false;
            youqianguntongdiwei.value = false;
            youhouguntongdiwei.value = false;
          }
          getRealFault()
            } else {
               res = {
                  mois: [],
@@ -526,17 +809,87 @@
                  herbImage: 'yaocai1.png',
               }
            }
        var totalTime = 0
        res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0

            res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
            // console.log(`output->res`, res.detailList[res.detailList.length-1])
            realData.value = res

         })
      }
   }

   /**
    * 查询当前工单故障明细
    */
   function getRealFault() {
      return new Promise(() => {
         queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => {
            const faultStats = {}
            const warningStats = {}
            // 循环列表，根据结束时间和开始时间，计算故障时长
            res.forEach((item) => {
               const faultName = item.faultName
               item.totalTime = new Date(item.endTime) - new Date(item.startTime)
               item.totalTime = item.totalTime / 1000

               if (item.faultType === 1) {
                  if (!faultStats[faultName]) {
                     faultStats[faultName] = {
                        count: 0,
                        totalDuration: 0, // 毫秒
                     }
                  }
                  // 更新统计数据
                  faultStats[faultName].count += 1
                  faultStats[faultName].totalDuration += item.totalTime
               } else if (item.faultType === 2) {
                  if (!warningStats[faultName]) {
                     warningStats[faultName] = {
                        count: 0,
                        totalDuration: 0, // 毫秒
                     }
                  }
                  // 更新统计数据
                  warningStats[faultName].count += 1
                  warningStats[faultName].totalDuration += item.totalTime
               }
            })
            console.log(`output->res`, res)
            faultList.value = res
            const prepareFault = prepareData(faultStats)
            const prepareWarning = prepareData(warningStats)
            console.log('prePareFault', prepareFault)
            console.log('prePareWarning', prepareWarning)
            chart1.setOption({

               series: [{ data: prepareFault.duration }],
            })
            chart2.setOption({
          xAxis: { data: prepareFault.faultNames },
               series: [{ data: prepareFault.count }],
            })
            chart3.setOption({
               series: [{ data: prepareWarning.duration }],
            })
            chart4.setOption({
          xAxis: { data: prepareWarning.faultNames },
               series: [{ data: prepareWarning.count }],
            })
         })
      })
   }
   // 将统计数据转换为适合ECharts使用的格式
   function prepareData(stats) {
      const faultNames = Object.keys(stats)
      const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration)
      const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count)

      return {
         faultNames: faultNames,
         duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })),
         count: countSorted.map((name) => ({ name, value: stats[name].count })),
      }
   }
   var move = true
   function moveImage() {
      if (move) {
@@ -552,8 +905,39 @@
      }
   }

   function back() {
      router.back()
   // 开始自动滚动
   const startAutoScroll = () => {
      console.log('开始自动滚动')
      scrollInterval = setInterval(() => {
         if (isScrolling.value) return
         isScrolling.value = true

         const container = scrollContainer.value

         // 滚动容器
         container.scrollTop += 1
         // 当滚动到底部时，重置到顶部
         if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
            setTimeout(() => {
               container.scrollTop = 0
               isScrolling.value = false // 立即允许下一次滚动开始
               return
            }, 2000)
         }
         if (container.scrollTop < container.scrollHeight - container.clientHeight) {
        setTimeout(() => {
          isScrolling.value = false
        }, 20) // 确保每次滚动间隔足够长，避免连续触发
      }
      }, 20) // 控制滚动速度，数值越小滚动越快

   }

   // 停止自动滚动
   const stopAutoScroll = () => {
      if (scrollInterval) {
         clearInterval(scrollInterval)
      }
   }

   listAllEqp()
@@ -562,6 +946,8 @@
   onMounted(() => {
      Timer.value = setInterval(queryRealTime, 3000)
      Timer2.value = setInterval(moveImage, 50)
      startAutoScroll()
      setTimeout(initCharts, 500)
   })

   onUnmounted(() => {
@@ -569,6 +955,7 @@
      clearInterval(Timer2.value)
      Timer.value = null
      Timer2.value = null
      stopAutoScroll()
   })
</script>

@@ -712,7 +1099,6 @@

   .eqpStatus {
      width: 848px;
		
   }
   .rightInfo {
      display: flex;
@@ -724,7 +1110,7 @@

   .rightTop {
      display: flex;
      height: 440px;
      height: 340px;
      padding-left: 10px;
   }
   .rightTwo {
@@ -734,7 +1120,7 @@

   .infoChart {
      width: 340px;
      height: 300px;
      height: 350px;
      /* background: white; */
      margin-left: 10px;
      margin-top: 10px;
@@ -828,7 +1214,7 @@
   }
   .tempMoisChart {
      width: 690px;
      height: 440px;
      height: 340px;
      /* background: white; */

      padding: 20px;
@@ -1002,8 +1388,8 @@
      justify-items: center;
   }
   .blingbling {
      -webkit-animation: scaleout 1.0s infinite ease-in-out;
      animation: scaleout 1.0s infinite ease-in-out;
      -webkit-animation: scaleout 1s infinite ease-in-out;
      animation: scaleout 1s infinite ease-in-out;
   }
   .center {
      display: flex;
@@ -1042,23 +1428,41 @@
         opacity: 0;
      }
   }
  .error-div {
    position: absolute; display: flex; align-items: center;
  }
  .error-marker {
    width: 18px; height: 18px; background: red; border-radius: 50%;
  }
  .error-msg {
    margin-left: 6px;
    height: 24px;
    background: gray; border-radius: 5px; font-weight: bold; color: red
  }
  .warn-marker {
    width: 18px; height: 18px; background: orange; border-radius: 50%;
  }
  .warn-msg {
    margin-left: 6px;
    height: 24px;
    background: gray; border-radius: 5px; font-weight: bold; color: orange;
  }
   .error-div {
      position: absolute;
      display: flex;
      align-items: center;
   }
   .error-marker {
      width: 18px;
      height: 18px;
      background: red;
      border-radius: 50%;
   }
   .error-msg {
      margin-left: 6px;
      height: 24px;
      background: gray;
      border-radius: 5px;
      font-weight: bold;
      color: red;
   }
   .warn-marker {
      width: 18px;
      height: 18px;
      background: orange;
      border-radius: 50%;
   }
   .warn-msg {
      margin-left: 6px;
      height: 24px;
      background: gray;
      border-radius: 5px;
      font-weight: bold;
      color: orange;
   }
   .scroll-container {
      height: 280px; /* 设置你想要的高度 */
      overflow: hidden;
   }
</style>