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

baoshiwei

2024-12-06 346c9a61f4407be8180aff944bf75bed9c5efd00

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

 .env

@@ -2,7 +2,7 @@
VITE_PORT = 3100

#  ç½‘站标题
VITE_GLOB_APP_TITLE = å…°æµ¦æ™ºèƒ½ç§‘技
VITE_GLOB_APP_TITLE = å…°æµ¦ä¸­è¯å¹²ç‡¥äº‘平台

# ç®€ç§°ï¼Œç”¨äºŽé…ç½®æ–‡ä»¶åå­— ä¸è¦å‡ºçŽ°ç©ºæ ¼ã€æ•°å­—开头等特殊字符
VITE_GLOB_APP_SHORT_NAME = JeecgBootAdmin

 package.json

@@ -34,6 +34,7 @@
    "gen:icon": "esno ./build/generate/icon/index.ts"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@ant-design/colors": "^6.0.0",
    "@ant-design/icons-vue": "^6.1.0",
    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
@@ -82,6 +83,7 @@
    "tinymce": "^5.10.3",
    "vditor": "^3.8.13",
    "vue": "^3.2.33",
    "vue-amap": "^0.5.10",
    "vue-cropper": "^0.5.6",
    "vue-cropperjs": "^5.0.0",
    "vue-i18n": "^9.1.9",

 src/enums/pageEnum.ts

@@ -2,7 +2,7 @@
    // basic login path
    BASE_LOGIN = '/login',
    // basic home path
    BASE_HOME = '/dashboard/workshop',
    BASE_HOME = '/dashboard/map',
    // error page path
    ERROR_PAGE = '/exception',
    // error log page path

 src/layouts/default/header/index.vue

@@ -11,7 +11,7 @@
      />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
      <!-- æ¬¢è¿Žè¯­ -->
      <span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> æ¬¢è¿Žè¿›å…¥ {{ '中药车间智能生产管理系统' }} </span>
      <span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> æ¬¢è¿Žè¿›å…¥ {{ '兰浦中药干燥云平台' }} </span>
    </div>
    <!-- left end -->


 src/router/routes/index.ts

@@ -81,6 +81,15 @@
  },
}

export const BigFault: AppRouteRecordRaw = {
  path: '/bigFault',
  name: 'BigFault',
  component: () => import('/@/views/dry/bigScreen/BigFault.vue'),
  meta: {
    title: t('big.screen.fault'),
  },
}

//update-begin---author:wangshuai ---date:20220629  for：auth2登录页面路由------------
export const Oauth2LoginRoute: AppRouteRecordRaw = {
    path: '/oauth2-app/login',
@@ -108,4 +117,4 @@
}

// Basic routing without permission
export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp,BigEqpCloud,BigFaultCloud]
export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp,BigEqpCloud,BigFaultCloud,BigFault]

 src/views/dashboard/map/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
    <div class="home_div">
        <div id="container" style="height: 100%; width: 100%"></div>
    </div>
</template>
<script setup lang="ts">
    import AMapLoader from '@amap/amap-jsapi-loader'
    import { listAllTenant } from '../../system/tenant/tenant.api'
    import { onMounted, ref } from 'vue'
  import { router } from '/@/router'
  const tenants = ref([])
    const points = ref([])

    const initMap = () => {
        window._AMapSecurityConfig = {
            securityJsCode: 'c1fa6ceb212b62bf9489da9c9986eb5e',
        }
        AMapLoader.load({
            key: '1582675884a1ef3c90b5ae1769c765a7', // ç”³è¯·å¥½çš„Web端开发者Key，首次调用 load æ—¶å¿…å¡«
            version: '2.0', // æŒ‡å®šè¦åŠ è½½çš„ JSAPI çš„版本，缺省时默认为 1.4.15
            plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        }).then((AMap) => {
            var map = new AMap.Map('container', {
                viewMode: '2D', //  æ˜¯å¦ä¸º3D地图模式
                zoom: 5, //  åœ°å›¾æ˜¾ç¤ºçš„缩放级别
                zooms: [2, 22], // åœ°å›¾ç¼©æ”¾èŒƒå›´
                // center: arr, //  åœ°å›¾ä¸­å¿ƒç‚¹åæ ‡
                layers: [new AMap.createDefaultLayer()], //设置图层,可设置成包含一个或多个图层的数组
                mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
                resizeEnable: true, //  æ˜¯å¦ç›‘控地图容器尺寸变化
            })

            var clusterIndexSet = {
                //定义点聚合规则
                city: {
                    minZoom: 2,
                    maxZoom: 9,
                },
                district: {
                    minZoom: 9,
                    maxZoom: 11,
                },
                building: {
                    minZoom: 11,
                    maxZoom: 22,
                },
            }

            function getStyle(context) {
                var clusterData = context.clusterData // èšåˆä¸­åŒ…含数据
                var index = context.index // èšåˆçš„条件
                var count = context.count // èšåˆä¸­ç‚¹çš„总数
                var marker = context.marker // èšåˆç»˜åˆ¶ç‚¹ Marker å¯¹è±¡
                var color = ['66,130,198', '107,174,214', '78,200,211']
                var indexs = ['city', 'district', 'building']
                var i = indexs.indexOf(index['mainKey'])
                var text = clusterData[0][index['mainKey']]
                var size = Math.round(30 + Math.pow(count / points.value.length, 1 / 5) * 70)
                if (i <= 1) {
                    var extra = '<span class="showCount">' + context.count + '家</span>'
                    text = '<span class="showName">' + text + '</span>'
                    text += extra
                } else {
                    size = 12 * text.length + 20
                }
                var style = {
                    bgColor: 'rgba(' + color[i] + ',.8)',
                    borderColor: 'rgba(' + color[i] + ',1)',
                    text: text,
                    size: size,
                    index: i,
                    color: '#ffffff',
                    textAlign: 'center',
                    boxShadow: '0px 0px 3px rgba(0,0,0,0.6)',
                }
                return style
            }
            function getPosition(context) {
                var key = context.index.mainKey
                var dataItem = context.clusterData && context.clusterData[0]
                var districtName = dataItem[key]
                if (!district[districtName]) {
                    return null
                }
                var center = district[districtName].center.split(',')
                var centerLnglat = new AMap.LngLat(center[0], center[1])
                return centerLnglat
            }
            function _customRender(data) {
                const keys = Object.keys(data.clusterData)
                let markers = []
                for (var i = 0; i < keys.length; i++) {
                    var key = keys[i]
                    var cluster = data.clusterData[key]
                    var position = cluster.data[0].lnglat
                    var marker = new AMap.LabelMarker({
                        position: position,
                        text: {
                            content: cluster.data.length.toString(),
                            style: {
                                fillColor: '#ffffff',
                            },
                        },
                    })
                    markers.push(marker)
                }
                return {
                    type: 'type',
                    layer: null,
                    markers: markers,
                }
            }

            //聚合点样式
            // var _renderClusterMarker = function (context) {
            //     //context ä¸ºå›žè°ƒå‚数，
            //   console.log("context", context)
            //     //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
            //     var clusterCount = context.count //聚合点内点数量
            //     context.marker.setContent('<div style="background-color:#00ff00">' + clusterCount + '</div>')
            // }
            // è‡ªå®šä¹‰èšåˆç‚¹æ ·å¼
            function _renderClusterMarker(context) {
                var clusterData = context.clusterData // èšåˆä¸­åŒ…含数据
                var index = context.index // èšåˆçš„条件
                var count = context.count // èšåˆä¸­ç‚¹çš„总数
                var marker = context.marker // èšåˆç‚¹æ ‡è®°å¯¹è±¡
                var styleObj = getStyle(context)
                // è‡ªå®šä¹‰ç‚¹æ ‡è®°æ ·å¼
                var div = document.createElement('div')
                div.className = 'amap-cluster'
                div.style.backgroundColor = styleObj.bgColor
                div.style.width = styleObj.size + 'px'
                if (styleObj.index <= 1) {
                    div.style.height = styleObj.size + 'px'
                    // è‡ªå®šä¹‰ç‚¹å‡»äº‹ä»¶
                    context.marker.on('click', function (e) {
                        console.log(e)
                        var curZoom = map.getZoom()
                        if (curZoom < 9) {
                            curZoom = 9
                        } else if (curZoom < 11) {
              curZoom = 11
            }
                        map.setZoomAndCenter(curZoom, e.lnglat)
                    })
                } else {
          // è‡ªå®šä¹‰ç‚¹å‡»äº‹ä»¶
          context.marker.on('click', function (e) {
            let innerText = e.target.dom.innerText;
            tenants.value.forEach(item => {
              if(item.companyAddress.includes(innerText)) {
                //router.push({ path: '/tongjitang/bigworkshop', params: { tenant: item.id } })
                // router.push( {path: '/tongjitang/bigworkshop/' + item.id} )
                // router.push( '/tongjitang/bigworkshop/' + item.id )
                let href = '/tongjitang/bigworkshop/' + item.id;
                window.open(href, '_blank');
              }
            })
          })
          console.log(router)
        }
                div.style.border = 'solid 1px ' + styleObj.borderColor
                div.style.borderRadius = styleObj.size + 'px'
                div.innerHTML = styleObj.text
                div.style.color = styleObj.color
                div.style.textAlign = styleObj.textAlign
                div.style.boxShadow = styleObj.boxShadow
                context.marker.setContent(div)
                // è‡ªå®šä¹‰èšåˆç‚¹æ ‡è®°æ˜¾ç¤ºä½ç½®
                // var position = getPosition(context);
                // if(position){
                //   context.marker.setPosition(position);
                // }
                context.marker.setAnchor('center')
            }

            map.plugin(['AMap.IndexCluster'], function () {
                console.log('cluster', points.value)
                var indexCluster = new AMap.IndexCluster(map, points.value, {
                    renderClusterMarker: _renderClusterMarker, //自定义聚合点样式
                    clusterIndexSet: clusterIndexSet, //聚合规则
                })
            })
        })
    }

    const getTenants = () => {
        listAllTenant().then((res) => {
      tenants.value = res
            res.forEach((item) => {
                let point = JSON.parse(item.companyAddress)
                points.value.push(point)
            })
            initMap()
            //console.log('points', points.value)
        })
    }

    getTenants()
    onMounted(() => {})
</script>
<style>
.amap-cluster {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.showName {
  font-size: 14px;
}
.showCount,
.showName {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 80%;
}
</style>
<style scoped lang="less">
    .home_div {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
        position: relative;
    }

</style>


 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;

 src/views/dry/bigScreen/BigEqpCloud.vue

@@ -158,189 +158,189 @@
                                </div>
                            </div>
              <div style="width: 848px; height: 485px; position: absolute;" @click="showFault">
                <div v-if="true | zuoqianjiting" class="error-div" style=" top:309px; left:418px">
                <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="true | shebeijiting" class="error-div"  style=" top:111px; left:484px">
                <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="true | chuliaojiting" class="error-div"  style=" top:300px; left:129px">
                <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="true | mianbanjiting" class="error-div"  style=" top:258px; left:659px">
                <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="true | fengxiangsheng" class="error-div"  style=" top:294px; left:517px">
                <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="true | fengxiangjiang" class="error-div"  style=" top:319px; left:517px">
                <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="true | fengjiguoliu" class="error-div"  style=" top:335px; left:655px">
                <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="true | guntongsheng" class="error-div"  style=" top:198px; left:517px">
                <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="true | guntongjiang" class="error-div"  style=" top:223px; left:517px">
                <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="true | guntongguoliu" class="error-div"  style=" top:209px; left:642px">
                <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="true | wendubaojing" class="error-div"  style=" top:234px; left:659px">
                <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="true | zuoqianmen" class="error-div"  style=" top:388px; left:415px">
                <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="true | zuohoumen" class="error-div"  style=" top:367px; left:587px">
                <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="true | youqianmen" class="error-div"  style=" top:388px; left:284px">
                <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="true | youhoumen" class="error-div"  style=" top:367px; left:478px">
                <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="true | guntongbuzaigaowei" class="error-div"  style=" top:173px; left:517px">
                <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="true | fengxiangbuzaigaowei" class="error-div"  style=" top:269px; left:517px">
                <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="true | fengxiangbuzaidiwei" class="error-div"  style=" top:343px; left:517px">
                <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="true | jiareweichuanganqi" class="error-div"  style=" top:283px; left:642px">
                <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="true | zuoqianfengxianggaowei" class="error-div"  style=" top:334px; left:362px">
                <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="true | zuoqianfengxiangdiwei" class="error-div"  style=" top:334px; left:362px">
                <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="true | zuohoufengxianggaowei" class="error-div"  style=" top:309px; left:642px">
                <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="true | zuohoufengxiangdiwei" class="error-div"  style=" top:309px; left:642px">
                <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="true | youqianfengxianggaowei" class="error-div"  style=" top:272px; left:300px">
                <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="true | youqianfengxiangdiwei" class="error-div"  style=" top:272px; left:300px">
                <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="true | youhoufengxianggaowei" class="error-div"  style=" top:246px; left:506px">
                <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="true | youhoufengxiangdiwei" class="error-div"  style=" top:246px; left:506px">
                <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="true | zuoqianguntongdiwei" class="error-div"  style=" top:175px; left:358px">
                <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="true | zuohouguntongdiwei" class="error-div"  style=" top:158px; left:643px">
                <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="true | youqianguntongdiwei" class="error-div"  style=" top:150px; left:268px">
                <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="true | youhouguntongdiwei" class="error-div"  style=" top:135px; left:506px">
                <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;右后滚筒不在低位
@@ -713,7 +713,7 @@
    var progressBarChart: echarts.ECharts
    var efficiencyLineChart: echarts.ECharts

    var compareChart: echarts.ECharts
    var compareChart : echarts.ECharts

  //----------------error----------------
  const shebeijiting = ref(false)
@@ -1826,6 +1826,9 @@
                        res.zhengqi = lastTrend.steam / (res.originWeight - lastTrend.weight)
                    }
                    res.zhengqi = Number(res.zhengqi)
          if (res.zhengqi < 0) {
            res.zhengqi = 0
          }
                    //eqp.value.steamConsumption = Number(eqp.value.steamConsumption)
                    // res.zhengqi = eqp.value.steamConsumption - 3
                    // console.log(res);
@@ -1850,7 +1853,10 @@
                        res.dian = lastTrend.watt / (res.originWeight - lastTrend.weight)
                    }
                    // res.dian = eqp.value.powerConsumption - 1.5
                    res.dian = Number(res.dian) 
                    res.dian = Number(res.dian)
          if (res.dian < 0) {
            res.dian = 0
          }
                    //eqp.value.powerConsumption = Number(eqp.value.powerConsumption)
                    if (res.dian > res.wattAvg) {
                        console.log("dian::", res.dian,res.wattAvg )
@@ -1950,17 +1956,112 @@
                    }
                    
                    res.isError = false
                    if (res.fault) {
                        res.isError = true
                        res.errorMsg = res.fault
            console.log("errorMsg:",res.fault)
                    }
          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
            console.log("warnMsg:",res.warning)
                    }
          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: [],

 src/views/dry/bigScreen/BigFault.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1372 @@
<template>
    <dv-full-screen-container>
        <div class="eqpBox">
            <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>
                                        <div class="subhead">剩余时间</div>
                                    </div>
                                </div>
                                <div class="leftTop1">
                                    <Icon icon="bi:fan" :size="50" />
                                    <div>
                                        <div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div>
                                        <div class="subhead">风机频率</div>
                                    </div>
                                </div>
                                <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div>
                                <div class="outDiv eqpStatus">
                                    <div
                                        style="
                                            font-size: 28px;

                                            color: white;
                                            background-color: #1595ea;
                                            height: 60px;
                                            width: 180px;
                                            line-height: 60px;
                                            text-align: center;
                                            border-radius: 10px;
                                            font-weight: bold;
                                        "
                                    >
                                        {{ statusTxt }}
                                    </div>
                                </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="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="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 :id="'chartDom'" style="width: 340px; height: 280px"></div>
                            </dv-border-box7>

                            <dv-border-box7 class="infoChart">
                                <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 :id="'chartDom3'" style="width: 340px; height: 280px"></div>
                            </dv-border-box7>
                            <dv-border-box7 class="infoChart">
                                <div class="chartTittle">
                                    <div> è­¦å‘Šæ¬¡æ•°ç»Ÿè®¡</div>
                                </div>
                                <div :id="'chartDom4'" style="width: 340px; height: 280px"></div>
                            </dv-border-box7>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </dv-full-screen-container>
</template>

<script setup lang="ts">
    import { useFullscreen } from '@vueuse/core'
    import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
    import { router } from '/@/router'
    import { onMounted, ref, onUnmounted } from 'vue'
    import { Progress } from 'ant-design-vue'
    import * as echarts from 'echarts'
    import 'echarts-liquidfill'
    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'
  import { getTenantId, getToken } from '/@/utils/auth'
    const domRef = ref<Nullable<HTMLElement>>(null)
    const { enter, toggle, exit, isFullscreen } = useFullscreen()

    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 userStore = useUserStore()
    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)

    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
    }

    // åŠ¨æ€è¯»å–图片
    function getStatusImageUrl(name: string) {
        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) => {
            // console.log(`output->res`, res)
            eqp.value = res
            eqp.value.dryEfficiency = res.dryEfficiency
            eqp.value.steamConsumption = res.steamConsumption
            eqp.value.powerConsumption = res.powerConsumption
            queryRealTime()
        })
    }

    function listAllEqp() {
        listAll({ enable: 'Y' })
            .then((result) => {
                //console.log(`output->result`, result)
                eqps.value = result
                // result.forEach((item) => {
                //     eqpCodes.push(item.code)
                // })
                queryRealTime()
            })
            .catch((err) => {
                //console.log(`output->err`, err)
            })
    }

    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'
    var statusTxt = '正在干燥'

    function chaiwangban() {
        statusGif = 'chaiwangban-1'
        setTimeout(shangliao, 7000)
    }

    function shangliao() {
        statusGif = 'shangliao-N'
        setTimeout(() => {
            statusGif = 'zhuangwangban'
            setTimeout(() => {
                statusGif = 'guanmen1'
                setTimeout(() => {
                    shangliaoFlag = false
                }, 4000)
            }, 7000)
        }, 15000)
    }
  function back() {
    router.back()
  }
    /**
     * æŸ¥è¯¢å®žæ—¶æ•°æ®
     */
    function queryRealTime() {
        if (eqp.value) {
            eqp.value = eqps.value[eqpNum.value]
            // console.log("888",eqp.value);
      let tenantId = getTenantId()
            let eqpCode = eqp.value.code
            let queryRealTimeUrl = '/dry/real/getRealTimeData'
            defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
                if (res && res.trendVo) {
                    console.log(`output->re11s`, res)
                    var totalTime = 0

                    /**水滴图含水量 */
                    res.mois = [
                        (res.trendVo.moisture / 100).toFixed(2),
                        (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                        (res.trendVo.moisture / 100 / 3).toFixed(2),
                    ]

                    /**状态/gif动图 */
                    if (!shangliaoFlag) {
                        if (res.orderStatus == 0) {
                            statusGif = 'zanting'
                            statusTxt = '准备'
                        } else if (res.orderStatus == 1) {
                            shangliaoFlag = true
                            statusGif = 'kaimen1'
                            statusTxt = '上料'
                            setTimeout(chaiwangban, 4000)
                        } else if (res.orderStatus == 2) {
                            // statusTxt = res.level
                            // statusGif = 'zanting'
                            // if (res.level === '准备阶段') {
                            //     console.log("准备阶段" + statusGif);
                            //     statusGif = 'zanting'
                            // } else if (res.level === '干燥阶段' || res.level === '正在干燥') {
                            //     statusGif = 'tmrefeng2'
                            // } else if (res.level === '翻料阶段') {
                            //     statusGif = 'fanliao-N'
                            // } else if (res.level === '出料阶段') {
                            //     statusGif = 'chuliao-N'
                            // }

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

                            // if (res.state_roller == 4) {
                            //     statusGif = 'fanliao-N'
                            //     statusTxt = '正在翻料'
                            // }

                            // if (res.state_roller == 5) {
                            //     statusGif = 'chuliao-N'
                            //     statusTxt = '正在出料'
                            // }

                            // if (res.state_windbox == 2 || res.state_windbox == 3) {
                            //     statusGif = 'fengxiangsheng-1'
                            //     statusTxt = '正在干燥'
                            // }
                        } else if (res.orderStatus == 3) {
                            statusGif = 'zanting'
                            statusTxt = '暂停'
                        } else if (res.orderStatus == 4) {
                            statusGif = 'zanting'
                            statusTxt = '干燥完成'
                        }
                    }
                    res.herbImage = 'yaocai1.png'

                    if (res.herbName == '白花蛇舌草') {
                        res.herbImage = 'baihuasheshecao.png'
                    } else if (res.herbName == '糥稻根') {
                        res.herbImage = 'nuodaogen.png'
                    } else if (res.herbName == '淫羊藿') {
                        res.herbImage = 'yinyanghuo.png'
                    } else if (res.herbName == '马齿苋') {
                        res.herbImage = 'machixian.png'
                    } else if (res.herbName == '墨旱莲') {
                        res.herbImage = 'mohanlian.png'
                    } else if (res.herbName == '桑白皮') {
                        res.herbImage = 'sangbaipi.png'
                    }

                    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;
            }
                    }
          getRealFault()
                } else {
                    res = {
                        mois: [],
                        gif: 'tmrefeng2',
                        herbImage: 'yaocai1.png',
                    }
                }

                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(() => {
      let tenantId = getTenantId()
            queryByOrderId({ orderId: realData.value.code, tenantId: tenantId }).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) {
            position.value -= 0.3
        } else {
            position.value += 0.3
        }
        if (position.value < -240) {
            move = false
        }
        if (position.value > -1) {
            move = true
        }
    }

    // å¼€å§‹è‡ªåŠ¨æ»šåŠ¨
    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()
    //queryEqp()
    // DOM挂载完成后渲染图表
    onMounted(() => {
        Timer.value = setInterval(queryRealTime, 3000)
        Timer2.value = setInterval(moveImage, 50)
        startAutoScroll()
        setTimeout(initCharts, 500)
    })

    onUnmounted(() => {
        clearInterval(Timer.value)
        clearInterval(Timer2.value)
        Timer.value = null
        Timer2.value = null
        stopAutoScroll()
    })
</script>

<style scoped>
    .eqpBox {
        height: 100%;
    }
    .eqpRow {
    }
    .eqpImage {
        height: 1080px;
        width: 1920px;
        background-image: url(/src/assets/images/dry/bg.png);
        background-repeat: no-repeat;
        color: white;
        /*background-position: 160px 280px; */
        /* background-color: red; */
        background-size: 120%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .leftEqp {
        height: 1080px;
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        /* background-color: white;
        background-image: url(/src/assets/images/dry/shebei1.png);
        background-repeat: no-repeat;
        background-size: 125%;
        border-radius: 10px;
        background-position: -119px 293px; */
    }

    .leftTop {
        height: 1060px;
        width: 1200px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        background-image: url(/src/assets/images/dry/ganzaoji-x.png);
        background-repeat: no-repeat;
        background-size: 86%;
        border-radius: 10px;
        flex-wrap: wrap;
        background-position: 85px 279px;
    }
    .leftMid {
        width: 850px;
        height: 300px;
        /* border: 1px solid; */
        margin-top: 10px;
        border-radius: 10px;
        /* background: white; */
    }
    .mainInfo {
        line-height: 33px;
        padding-left: 10px;
        font-size: 30px;
        color: white;
    }
    .subhead {
        color: #a19f9c;
        font-size: 16px;
        padding-left: 10px;
    }

    .mainInfo2 {
        line-height: 20px;
        padding-left: 0px;
        font-size: 16px;
    }
    .subhead2 {
        color: #a19f9c;
        font-size: 10px;
        padding-left: 0px;
    }
    .zhengqi {
        height: 180px;
        width: 200px;
        background-image: url(/src/assets/images/dry/liuliangji.png);
        background-repeat: no-repeat;
        background-size: 160px;
        /* border-radius: 10px; */
        background-position: 17px -6px;
    }

    .liuliangji {
    }
    .leftData {
        height: 250px;
        width: 120px;
    }
    .rightChart {
        height: 270px;
        width: 170px;
        margin-top: -30px;
    }
    .leftTop0 {
        height: 260px;
        width: 1200px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .leftTop1 {
        width: 360px;
        height: 200px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #727272;
    }
    .leftTop2 {
        width: 250px;
        height: 200px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #727272;
    }
    .leftTop3 {
        width: 340px;
        height: 200px;
        /* background-image: url(/src/assets/images/dry/fanliao.gif); */
        background-repeat: no-repeat;
        background-position: 0px 20px;
        background-size: 300px;
        border-radius: 50px;
    }

    .eqpStatus {
        width: 848px;
    }
    .rightInfo {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 1060px;
        width: 700px;
    }

    .rightTop {
        display: flex;
        height: 340px;
        padding-left: 10px;
    }
    .rightTwo {
        display: flex;
        flex-wrap: wrap;
    }

    .infoChart {
        width: 340px;
        height: 350px;
        /* background: white; */
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 10px;
    }
    .chartTittle {
        width: 340px;
        height: 30px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        padding: 15px 15px;
    }
    .chartInfo {
        width: 60px;
        height: 180px;
    }

    .compareBar {
        width: 55px;
        height: 140px;
    }
    .margintop-30 {
        margin-top: -30px;
    }

    .barTop {
        width: 55px;
        height: 30px;
    }
    .barBack {
        width: 30px;
        height: 100px;
        /* border: 1px solid black; */
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;
    }
    .barDiv {
        width: 100%;

        background-color: #1595ea;
    }
    .bad {
        background-color: #973535;
    }
    .rightLabel {
        width: 110px;
        display: flex;
        justify-content: space-between;
    }
    .label {
        color: white;
        text-align: center;
        width: 50px;
        border-radius: 4px;
        height: 20px;
        font-size: 10px;
        line-height: 21px;
    }
    .good {
        background-color: #0d6e24;
    }

    .mainInfo3 {
        font-size: 24px;
    }
    .herbInfo {
        width: 340px;
        height: 440px;
        color: #727272;
    }

    .curEqp {
        width: 340px;
        height: 170px;

        /* background: white;
        border-radius: 10px; */
    }
    .curHerb {
        margin-top: 10px;
        width: 340px;
        height: 260px;
        /* background: white;
        border-radius: 10px; */

        background-repeat: no-repeat;
        background-size: 200px;
        background-position: 0px 10px;
    }
    .tempMoisChart {
        width: 690px;
        height: 340px;
        /* background: white; */

        padding: 20px;
        border-radius: 10px;
    }
    .topLeft {
        margin: 20px 40px 60px 20px;
        padding: 15px;
        /* background: white; */
        border-radius: 10px;
        height: 325px;
        width: 440px;
        /* background-image: url(/src/assets/images/dry/yaocai.jpg); */
        background-repeat: no-repeat;
        background-size: 164px 132px;
        background-position: 239px 65px;
        display: flex;
    }
    .topMid {
        margin: 20px 20px 60px 40px;
        /* background: white; */
        border-radius: 10px;
        background-image: url(/src/assets/images/dry/fanliao.gif);
        background-repeat: no-repeat;
        background-position: 0px 20px;
        background-size: 400px;
        width: 400px;

        padding: 20px;
    }
    .topRight {
        margin: 20px 20px 60px 20px;
        /* background: white; */
        border-radius: 10px;
        width: 700px;
        padding: 20px;
    }
    .midLeft {
        height: 450px;
        width: 600px;
        display: flex;
        padding: 0 20px 20px 20px;
    }
    .midMid {
        width: 500px;
        padding-top: 50px;
    }

    .midRight {
        background-image: url(/src/assets/images/dry/fengjixz.gif);
        background-repeat: no-repeat;
        background-position: 150px 260px;
        background-size: 120px 120px;
        width: 600px;
    }

    .shangJianTou {
        margin-left: 140px;
        width: 70px;
        height: 100px;
        background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-size: 70px 100px;
    }

    .zoujiantou {
        margin-left: 225px;
        margin-top: 30px;
        width: 100px;
        height: 70px;
        background-image: url(/src/assets/images/dry/zuojiantou.gif);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-size: 100px 70px;
    }
    .fault {
        padding: 10px;
        height: 60px;
        font-size: 26px;
        width: 100%;
        text-align: right;
        color: red;
    }
    .eqpName {
        padding: 20px;

        height: 160px;
    }

    .formula {
        display: flex;
        width: 340px;
        height: 40px;
        padding: 0 20px;
        justify-content: space-around;
        justify-items: center;
    }

    .formulaItem {
        display: flex;
        justify-content: center;
        width: 85px;
        height: 40px;
    }

    .eqpInfoText {
        font-size: 18px;
        font-weight: bold;
    }

    :deep() .ant-slider-mark-text {
        padding-left: 15px;
        font-size: 10px;
    }
    :deep() .ant-slider-mark-text::before {
        content: '';
        display: block;
        width: 6px;
        height: 1px;
        background-color: #1890ff;

        position: absolute;
        top: 10px;
        left: 0px;
    }
    :deep() .ant-slider-rail {
        width: 10px !important;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%);
    }
    :deep() .ant-slider-track {
        background: rgb(216, 216, 216);

        height: 20px;
        width: 10px !important;
        border-radius: 6px 6px 0 0;
    }
    :deep() .ant-slider-track:hover {
    }
    :deep() .ant-slider-handle {
        display: none;
    }
    :deep() .ant-slider-dot {
        display: none;
    }
    :deep() .ant-slider-step {
        width: 10px !important;
    }
    :deep() .ant-slider-step > :first-child {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        bottom: -26px !important;
        left: -6px;
        border: none;
        background: #ce0000;
    }
    :deep() .progress {
        padding: 25px 25px;

        width: 360px;
        display: flex;
    }
    :deep() .ant-progress-bg {
        height: 25px !important;
    }
    .outDiv {
        display: flex;
        justify-content: center;
        justify-items: center;
    }
    .blingbling {
        -webkit-animation: scaleout 1s infinite ease-in-out;
        animation: scaleout 1s infinite ease-in-out;
    }
    .center {
        display: flex;
        justify-content: center;
        justify-items: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .centerText {
        width: 100%;
        text-align: center;
    }

    @-webkit-keyframes scaleout {
        0% {
            -webkit-transform: scale(1);
        }

        100% {
            -webkit-transform: scale(1.1);
            opacity: 0;
        }
    }

    @keyframes scaleout {
        0% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }

        100% {
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
            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;
    }
    .scroll-container {
        height: 280px; /* è®¾ç½®ä½ æƒ³è¦çš„高度 */
        overflow: hidden;
    }
</style>

 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,7 +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 { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api'
    import { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { useUserStore } from '/@/store/modules/user'
    const domRef = ref<Nullable<HTMLElement>>(null)
@@ -305,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
@@ -364,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) => {
@@ -397,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'
@@ -421,7 +505,12 @@
            }, 7000)
        }, 15000)
    }

  function back() {
    router.back()
  }
    /**
     * æŸ¥è¯¢å®žæ—¶æ•°æ®
     */
    function queryRealTime() {
        if (eqp.value) {
            eqp.value = eqps.value[eqpNum.value]
@@ -432,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 = [
@@ -439,7 +529,6 @@
                        (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                        (res.trendVo.moisture / 100 / 3).toFixed(2),
                    ]


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

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

                            // if (res.state_roller == 4) {
@@ -507,19 +596,115 @@
                    } 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)
            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
            console.log("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;
            }
                    }
          getRealFault()
                } else {
                    res = {
                        mois: [],
@@ -527,30 +712,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
        getRealFault()

            })
        }
    }

    /**
     * æŸ¥è¯¢å½“前工单故障明细
     */
    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

  function getRealFault() {
    return new Promise((resolve, reject) => {
      queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => {
        console.log(`output->res`, res)
                    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({

        // å¾ªçŽ¯åˆ—表，根据结束时间和开始时间，计算故障时长
        res.forEach((item) => {
          item.totalTime = item.endTime - item.startTime
        })
})
    })
  }
                    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) {
@@ -566,8 +808,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()
@@ -576,6 +849,8 @@
    onMounted(() => {
        Timer.value = setInterval(queryRealTime, 3000)
        Timer2.value = setInterval(moveImage, 50)
        startAutoScroll()
        setTimeout(initCharts, 500)
    })

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

@@ -726,7 +1002,6 @@

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

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

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

        padding: 20px;
@@ -1016,8 +1291,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;
@@ -1056,23 +1331,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>

 src/views/sys/login/TokenLoginPage.vue

@@ -5,7 +5,7 @@
            <div class="app-loading-dots">
                <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
            </div>
            <div class="app-loading-title">中药车间智能生产管理系统</div>
            <div class="app-loading-title">兰浦中药干燥云平台</div>
        </div>
    </div>
</template>

 src/views/system/loginmini/MiniLogin.vue

@@ -15,10 +15,10 @@
        <div v-show="type === 'login'">
            <div class="aui-content">
                <div class="aui-container">
                    <div class="aui-form">
                    <div class="aui-form" style="min-height: 570px;">
                        <div class="aui-image">
                            <div>Lanpu</div>
                            <div>中药车间智能生产管理系统</div>
                            <div>兰浦中药干燥云平台</div>
                            <!--              <div class="aui-image-text">-->
                            <!--                <img :src="adTextImg" />-->
                            <!--              </div>-->
@@ -29,9 +29,9 @@
                                    <div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
                                        >{{ t('sys.login.signInFormTitle') }}
                                    </div>
                                    <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
                                        >{{ t('sys.login.mobileSignInFormTitle') }}
                                    </div>
<!--                                    <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"-->
<!--                                        >{{ t('sys.login.mobileSignInFormTitle') }}-->
<!--                                    </div>-->
                                </div>
                                <div class="aui-form-box" style="height: 180px">
                                    <a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
@@ -94,43 +94,43 @@
                                            {{ t('sys.login.loginButton') }}</a-button
                                        >
                                    </div>
                                    <div class="aui-flex">
                                        <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
                                    </div>
<!--                                    <div class="aui-flex">-->
<!--                                        <a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>-->
<!--                                    </div>-->
                                    <div class="aui-flex">
                                        <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
                                    </div>
                                </div>
                            </div>
                            <a-form @keyup.enter.native="loginHandleClick">
                                <div class="aui-flex aui-third-text">
                                    <div class="aui-flex-box aui-third-border">
                                        <span>{{ t('sys.login.otherSignIn') }}</span>
                                    </div>
                                </div>
                                <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
                                    <div class="aui-flex-box">
                                        <div class="aui-third-login">
                                            <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
                                        </div>
                                    </div>
                                    <div class="aui-flex-box">
                                        <div class="aui-third-login">
                                            <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
                                        </div>
                                    </div>
                                    <div class="aui-flex-box">
                                        <div class="aui-third-login">
                                            <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
                                        </div>
                                    </div>
                                    <div class="aui-flex-box">
                                        <div class="aui-third-login">
                                            <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
                                        </div>
                                    </div>
                                </div>
                            </a-form>
<!--                            <a-form @keyup.enter.native="loginHandleClick">-->
<!--                                <div class="aui-flex aui-third-text">-->
<!--                                    <div class="aui-flex-box aui-third-border">-->
<!--                                        <span>{{ t('sys.login.otherSignIn') }}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="aui-flex" :class="`${prefixCls}-sign-in-way`">-->
<!--                                    <div class="aui-flex-box">-->
<!--                                        <div class="aui-third-login">-->
<!--                                            <a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="aui-flex-box">-->
<!--                                        <div class="aui-third-login">-->
<!--                                            <a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="aui-flex-box">-->
<!--                                        <div class="aui-third-login">-->
<!--                                            <a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="aui-flex-box">-->
<!--                                        <div class="aui-third-login">-->
<!--                                            <a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </a-form>-->
                        </div>
                    </div>
                </div>

 src/views/system/tenant/tenant.api.ts

@@ -19,6 +19,7 @@
  recycleBinPageList = '/sys/tenant/recycleBinPageList',
  deleteLogicDeleted = '/sys/tenant/deleteLogicDeleted',
  revertTenantLogic = '/sys/tenant/revertTenantLogic',
  listAll = '/sys/tenant/listAll',
}

/**
@@ -174,3 +175,8 @@
    handleSuccess();
  })
};


export const listAllTenant = (params) => {
  return defHttp.get({url: Api.listAll, params});
}