设备监控完善

bsw215583320

2023-06-26 d9d32b6627e75d945e2ab8709aa1a12a95305d82

设备监控完善

 .env.development

@@ -5,7 +5,7 @@
VITE_PUBLIC_PATH = /

# è·¨åŸŸä»£ç†ï¼Œæ‚¨å¯ä»¥é…ç½®å¤šä¸ª ,请注意，没有换行符
VITE_PROXY = [["/herb","http://192.168.19.168:9999"],["/upload","http://localhost:3300/upload"]]
VITE_PROXY = [["/herb","http://jeecg-boot-gateway:9999"],["/upload","http://localhost:3300/upload"]]

# æŽ§åˆ¶å°ä¸è¾“出
VITE_DROP_CONSOLE = false
@@ -14,7 +14,7 @@
VITE_GLOB_API_URL=/herb

#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=http://192.168.19.168:9999
VITE_GLOB_DOMAIN_URL=http://jeecg-boot-gateway:9999

# æŽ¥å£å‰ç¼€
VITE_GLOB_API_URL_PREFIX=

 package.json

@@ -36,8 +36,10 @@
  "dependencies": {
    "@ant-design/colors": "^6.0.0",
    "@ant-design/icons-vue": "^6.1.0",
    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
    "@iconify/iconify": "^2.2.1",
    "@jeecg/online": "3.4.4-RC",
    "@kjgl77/datav-vue3": "^1.5.0",
    "@logicflow/core": "^1.1.13",
    "@logicflow/extension": "^1.1.13",
    "@vue/runtime-core": "^3.2.33",
@@ -97,6 +99,7 @@
    "@commitlint/config-conventional": "^16.2.1",
    "@iconify/json": "^2.1.30",
    "@purge-icons/generated": "^0.8.1",
    "@rys-fe/vite-plugin-theme": "^0.8.6",
    "@types/codemirror": "^5.60.5",
    "@types/crypto-js": "^4.1.1",
    "@types/fs-extra": "^9.0.13",
@@ -107,9 +110,9 @@
    "@types/mockjs": "^1.0.6",
    "@types/node": "^17.0.25",
    "@types/nprogress": "^0.2.0",
    "@types/pinyin": "^2.10.0",
    "@types/qrcode": "^1.4.2",
    "@types/qs": "^6.9.7",
    "@types/pinyin": "^2.10.0",
    "@types/showdown": "^1.9.4",
    "@types/sortablejs": "^1.10.7",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
@@ -172,7 +175,6 @@
    "vite-plugin-pwa": "^0.12.3",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "@rys-fe/vite-plugin-theme": "^0.8.6",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vite-plugin-windicss": "^1.8.7",
    "vue-eslint-parser": "^8.3.0",

 src/assets/images/dry/2.png

 src/assets/images/dry/bg.png

 src/assets/images/dry/bg/1.jpg

 src/assets/images/dry/bg/2.jpg

 src/assets/images/dry/bg/3.jpg

 src/assets/images/dry/bg/4.jpg

 src/assets/images/dry/bg/5.jpg

 src/assets/images/dry/bg/6.jpg

 src/assets/images/dry/bg/7.jpg

 src/assets/images/dry/bg/bg5.png

 src/assets/images/dry/chaiwangban-1.gif

 src/assets/images/dry/chaiwangban-N.gif

 src/assets/images/dry/chuliao-N.gif

 src/assets/images/dry/fanliao-N.gif

 src/assets/images/dry/fengxiangsheng-1.gif

 src/assets/images/dry/guanmen1.gif

 src/assets/images/dry/kaimen-n.gif

 src/assets/images/dry/kaimen1.gif

 src/assets/images/dry/shangliao-1.gif

 src/assets/images/dry/shangliao-N.gif

 src/assets/images/dry/tmchaiwangban.gif

 src/assets/images/dry/tmchuliao1.gif

 src/assets/images/dry/tmfanliao.gif

 src/assets/images/dry/tmfengxiangsheng.gif

 src/assets/images/dry/tmrefeng2.gif

 src/assets/images/dry/yaocai/baihuasheshecao.png

 src/assets/images/dry/yaocai/machixian.png

 src/assets/images/dry/yaocai/mohanlian.png

 src/assets/images/dry/yaocai/mohanlian1.png

 src/assets/images/dry/yaocai/sangbaipi.png

 src/assets/images/dry/yaocai/sangbaipi1.png

 src/assets/images/dry/yaocai/yaocai1.png

 src/assets/images/dry/yaocai/yinyanghuo.png

 src/assets/images/dry/yaocai/yinyanghuo1.png

 src/assets/images/dry/yaocai1.png

 src/assets/images/dry/zanting.png

 src/assets/images/dry/zhuangwangban-1.gif

 src/assets/images/dry/zhuangwangban-N.gif

 src/assets/images/dry/zhuangwangban.gif

 src/main.ts

@@ -20,7 +20,7 @@
import { setupStore } from '/@/store'
// æ³¨å†Œonline模块lib
import { registerPackages } from '/@/utils/monorepo/registerPackages'

import DataVVue3 from '@kjgl77/datav-vue3'
// åœ¨æœ¬åœ°å¼€å‘中引入的,以提高浏览器响应速度
if (import.meta.env.DEV) {
    import('ant-design-vue/dist/antd.less')
@@ -64,7 +64,7 @@

    // å½“路由准备好时再执行挂载( https://next.router.vuejs.org/api/#isready)
    await router.isReady()

    app.use(DataVVue3)
    // æŒ‚载应用
    app.mount('#app', true)
}

 src/router/routes/index.ts

@@ -39,6 +39,22 @@
    },
}

export const BigScreen: AppRouteRecordRaw = {
    path: '/bigScreen',
    name: 'BigScreen',
    component: () => import('/@/views/dry/bigScreen/BigWorkShop.vue'),
    meta: {
        title: t('big.screen.workshop'),
    },
}
export const BigEqp: AppRouteRecordRaw = {
    path: '/bigEqp',
    name: 'BigEqp',
    component: () => import('/@/views/dry/bigScreen/BigEqp.vue'),
    meta: {
        title: t('big.screen.eqp'),
    },
}
//update-begin---author:wangshuai ---date:20220629  for：auth2登录页面路由------------
export const Oauth2LoginRoute: AppRouteRecordRaw = {
    path: '/oauth2-app/login',
@@ -66,4 +82,4 @@
}

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

 src/views/dry/bigScreen/BigEqp copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1921 @@
<template>
    <dv-full-screen-container>
    <div ref="domRef"   class="eqpBox">
        <div class="eqpRow">
            <div class="eqpImage"  :style="{'background-position':position + 'px'}">
				
                <div class="leftEqp" @click="toggleDom" >
                    <div style="width: 350px;  ">
                    <div class="herbInfo">
						
                            <dv-border-box7 class="curEqp">
                                <div class="eqpName" style="padding: 30px">
                                    <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
                                    <div class="subhead">{{ eqp.type }}</div>
                                    <dv-decoration-1 style="width:300px;height:90px; margin-left: 20px;" />
                                    <!-- è®¾å¤‡ï¼š{{ eqp.name }}</div>
                                <div class="eqpName">型号：{{ eqp.type }}</div> -->
                                </div>
                            </dv-border-box7>
                            <dv-border-box7 class="curHerb">
                                <div class="eqpName" style="margin-left: 176px; height: 190px">
                                    <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                                    <div class="subhead">干燥配方</div>
                                </div>
                                <div class="formula">
                                    <div class="formulaItem">
                                        <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.feed }}筐</div>
                                            <div class="subhead2">投料量</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon style="color: red" icon="bx:wind" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.windTemp }}°C</div>
                                            <div class="subhead2">热风</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon style="color: green" icon="tabler:target-arrow" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.target }}%</div>
                                            <div class="subhead2">目标</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="eqpName">{{ realData?.herbName }}</div>
                                <div class="eqpName">{{ realData?.feed }} ç­</div> -->
                            </dv-border-box7>
                        </div>
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">含水率</div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.target }}</span
                                                >%
                                            </div>
                                            <div class="subhead2">目标含水率</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.initial }}</span
                                                >%</div
                                            >
                                            <div class="subhead2">来料含水率</div>
                                        </div>
                                    </div>
                                </div>
                                <div id="moisture" style="width: 170px; height: 170px"></div>
                            </div>
                            <div class="subhead2" style="margin-top: -37px; padding-left: 172px; font-weight: bold;">实时含水率</div>
                        </dv-border-box7>
                        <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                            <div class="chartTittle">风机频率</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="fanFreq" style="width: 240px; height: 240px"></div>
                            </div>
                        </dv-border-box7> -->
                </div>
                    <dv-border-box7 class="leftTop">
                        <div class="leftTop0">
                        <div class="leftTop1">
                            <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                            <div>
                                <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
                                <div class="subhead">剩余时间</div>
                            </div>
                        </div>
                        <div class="leftTop1">
                            <!-- <Icon icon="mdi:chart-finance" :size="50" />
                            <div>
                                <div class="mainInfo">98 %</div>
                                <div class="subhead">干燥效率</div>
                            </div> -->
                        </div>
                        <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
                        <div class="outDiv eqpStatus">
                            <div
                                style="
                                    font-size: 28px;
                                    margin-top: 190px;
                                    color: white;
                                    background-color: #1595ea;
                                    height: 60px;
                                    width: 180px;
                                    line-height: 60px;
                                    text-align: center;
                                    border-radius: 5px;
                                    font-weight: bold;
                                "
                            >
                                æ­£åœ¨å¹²ç‡¥
                            </div>
                            <div
                                class="eqpInfoText blingbling"
                                style="
                                    position: absolute;
                                    font-size: 30px;
                                    max-height: 200px;
                                    max-width: 720px;
                                    border-radius: 10px;
                                    background-color: #ce0000;
                                    color: white;
                                    padding: 10px;
                                "
                            >
                                <div class="outDiv">
                                    <div><Icon icon="bx:error" :size="30" /> </div>
                                    <div><span> æœ‰ä¸€ä¸ªæ•…障，请检查机器。</span></div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </dv-border-box7>
                    <dv-border-box7 class="infoChart">
                            <div class="chartTittle">风箱温度</div>
                            <div class="outDiv">
                                <div id="bellowsTemp" style="width: 230px; height: 230px">
                                    <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                                </div>
                            </div>
                        </dv-border-box7>
                    <dv-border-box7 class="leftMid">
                        <div id="efficiencyLine" style="width: 848px; height: 190px"></div>
                        <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
                            <div style="width: 100px; height: 20px">0 min</div>
                            <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                        </div>
                        <div id="progressBar" style="width: 848px; height: 80px"></div>
                    </dv-border-box7>
				
                    <!-- <div class="outDiv">
                        <div style="height: 100px; width: 400px">
                            <Progress
                                :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                }"
                                :percent="realData?.percent"
                                status="active"
                                :show-info="false"
                            />
                            <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                                <span>干燥 52 Min</span>
                                <span>预计 120 Min</span>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="rightInfo">
                    <div class="rightTop">
						
                        <dv-border-box7 class="tempMoisChart">
                            <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
                        </dv-border-box7>
                    </div>
                    <div class="rightTwo">


                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                å¹²ç‡¥æ•ˆçŽ‡(kg/h)
                                <div class="rightLabel">
                                    <div class="label good">&gt;{{ standard.xiaolv }} ä¼˜ </div>
                                    <div class="label bad">&lt;{{ standard.xlMin }} å·®</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
                                                >kg
                                            </div>
                                            <div class="subhead2">水分蒸发</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3">{{ realData?.dryTime | 0 }}min</div>
                                            <div class="subhead2">干燥用时</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{ standard.xiaolv }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
                                        <div class="barBack">
                                            <div
                                                class="barDiv"
                                                :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
                                                :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
                                            >
                                            </div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box7>
						
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle"
                                >蒸汽消耗(m³/kg)
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.zhengqi }} å·®</div>
                                    <div class="label good">&lt;{{ standard.zqMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.steam}}</span>m³ </div>
                                            <div class="subhead2">蒸汽用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.zhengqi}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                                :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box7>
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                <div> ç”µèƒ½æ¶ˆè€—(kw/h/kg)</div>
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.dian }} å·®</div>
                                    <div class="label good">&lt;{{ standard.dMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.watt}}</span>kw/h </div>
                                            <div class="subhead2">电能用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.dian}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.dian | 0}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                                :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </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 { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { useUserStore } from '/@/store/modules/user'
    const domRef = ref<Nullable<HTMLElement>>(null);
        const { enter, toggle, exit, isFullscreen } = useFullscreen();

const { toggle: toggleDom } = useFullscreen(domRef);
    const Timer = ref()
    const Timer2 = ref()
    const marks = ref<Record<number, any>>({
        0: '0°C',
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: '',
        8: '',
        9: '',
        10: '',
        11: '',
        12: '',
        13: '',
        14: '',
        15: '',
        16: '',
        17: '',
        18: '',
        19: '',
        20: '',
        21: '',
        22: '',
        23: '',
        24: '',
        25: '25°C',
        26: '',
        27: '',
        28: '',
        29: '',
        30: '',
        31: '',
        32: '',
        33: '',
        34: '',
        35: '',
        36: '',
        37: '',
        38: '',
        39: '',
        40: '',
        41: '',
        42: '',
        43: '',
        44: '',
        45: '',
        46: '',
        47: '',
        48: '',
        49: '',
        50: '50°C',
        51: '',
        52: '',
        53: '',
        54: '',
        55: '',
        56: '',
        57: '',
        58: '',
        59: '',
        60: '',
        61: '',
        62: '',
        63: '',
        64: '',
        65: '',
        66: '',
        67: '',
        68: '',
        69: '',
        70: '',
        71: '',
        72: '',
        73: '',
        74: '',
        75: '75°C',
        76: '',
        77: '',
        78: '',
        79: '',
        80: '',
        81: '',
        82: '',
        83: '',
        84: '',
        85: '',
        86: '',
        87: '',
        88: '',
        89: '',
        90: '',
        91: '',
        92: '',
        93: '',
        94: '',
        95: '',
        96: '',
        97: '',
        98: '',
        99: '',
        100: '100°C',
    })
    const eqps =  ref([] as dryEquipment[])
    const eqp = ref({} as dryEquipment)
    const eqpNum = ref(0)
    const userStore = useUserStore()
    const realData = ref({})
    const standard = ref({
        xiaolv: 220,
        xlMin: 200,
        zhengqi: 50,
        zqMin: 45,
        dian: 8,
        dMin: 7.5,
    })

    const position = ref(1)
    //realData.value.tempValue = [0, 100]
    realData.value.mois = [0.5, 0.35, 0.2]
    var moisChart: echarts.ECharts
    var waterChart: echarts.ECharts

    var bellowsTempChart: echarts.ECharts
    var fanFreqChart: echarts.ECharts
    var progressBarChart: echarts.ECharts
    var efficiencyLineChart: echarts.ECharts

    function initCharts() {
        let domId = 'moisChart'
        let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
        let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
        let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
        let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
        let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
        let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
        // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
        moisChart = echarts.init(chartDom)
        waterChart = echarts.init(waterDom)
        bellowsTempChart = echarts.init(bellowsTempDom)
        fanFreqChart = echarts.init(fanFreqDom)
        progressBarChart = echarts.init(progressBarDom)
        efficiencyLineChart = echarts.init(efficiencyLineDom)

        const option = {
            color: ['#2C4D90', '#CE0000'],
            title: {
                text: '含水率/温度趋势',
                textStyle: {
                    color: '#fff',
                    fontSize: 15
                },
				
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: 50,
                right: 70,
                top: 50,
                bottom: 60,
            },
            legend: {
                right: 60,
                textStyle: {
                    color: '#fff'
                }
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none',
            //         },
            //         dataView: { readOnly: false },
            //         magicType: { type: ['line', 'bar'] },
            //         restore: {},
            //         saveAsImage: {},
            //     },
            // },
            xAxis: {
                type: 'value',
                axisLabel:{
                    color: '#fff'
                },
                //boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                min: 0,
                max: function (value) {
                    if (value.max < 100) {
                        return 100
                    } else {
                        return value.max
                    }
                },
            },
            yAxis: {
                type: 'value',
                boundaryGap: ['10%', '10%'],
                axisLabel:{
                    color: '#fff'
                }
                // min: 0,
                // max: function (value) {
                //     if (value.max < 100) {
                //         return 100
                //     } else {
                //         return value.max
                //     }
                // },
            },
            // yAxis: {
            //     type: 'value',
            //     axisLabel: {
            //         formatter: '{value} Â°C',
            //     },
            // },
            series: [
                {
                    name: '含水率',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 1],
                        [2, 2],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }],
                    },
                },
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 10],
                        [2, 20],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    // markLine: {
                    //     data: [
                    //         { type: 'average', name: 'Avg' },
                    //         [
                    //             {
                    //                 symbol: 'none',
                    //                 x: '90%',
                    //                 yAxis: 'max',
                    //             },
                    //             {
                    //                 symbol: 'circle',
                    //                 label: {
                    //                     position: 'start',
                    //                     formatter: 'Max',
                    //                 },
                    //                 type: 'max',
                    //                 name: '最高点',
                    //             },
                    //         ],
                    //     ],
                    // },
                },
            ],
        }
        const waterOption = {
            series: [
                {
                    type: 'liquidFill',
                    radius: '100%',
                    //waveAnimation: false,
                    amplitude: 3,
                    animationDuration: 5,
                    //animationDurationUpdate: 0,
                    data: [0.56,0.44,0.32],
                    shape:
                        'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
                    outline: {
                        show: false,
                    },
                    label: {
                        // formatter: function () {
                        //     //console.log(`output->params`,params,mois.value)

                        //     return (
                        //         '' +
                        //         // +'初始'+(mois.value[0]*100).toFixed(2) + '%\n\n\n'
                        //         (mois.value[1] * 100).toFixed(2) +
                        //         '%'
                        //         // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
                        //     )
                        // },
                        fontSize: 20,
                        //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
                    },
                },
            ],
        }

        const bellowsOption = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    splitNumber: 8,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 10,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10,
                        },
                    },
                    axisTick: {
                        distance: -15,
                        splitNumber: 5,
                        length: 3,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        distance: -18,
                        length: 6,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -13,
                        color: '#fff',
                        fontSize: 12,
                    },
                    anchor: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '0%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: '{value}°C',
                        color: 'inherit',
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 3,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
            ],
        }

        const fanFreqOption = {
            series: [
                {
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 9,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 9,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        distance: 3,
                        length: 4,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: 15,
                        color: '#999',
                        fontSize: 10,
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 10,
                        itemStyle: {
                            borderWidth: 3,
                        },
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 20,
                        offsetCenter: [0, '70%'],
                        formatter: '{value}Hz',
                    },
                    data: [
                        {
                            value: 56,
                        },
                    ],
                },
            ],
        }
        // const weightOption = {
        //     //         title: {
        //     //   text: 'Referer of a Website',
        //     //   subtext: 'Fake Data',
        //     //   left: 'center'
        //     // },
        //     color: ['#1595EA', '#2C4D90', '#FF7F7F'],
        //     tooltip: {
        //         trigger: 'item',
        //     },
        //     radius: [0, '85%'],
        //     // grid: {
        //     //     top: 20,
        //     //     left: 20,
        //     //     right: 20,
        //     //     bottom: 20,
        //     // },
        //     // legend: {
        //     //     orient: 'vertical',
        //     //     left: 'left',
        //     // },
        //     series: [
        //         {
        //             name: '重量数据',
        //             type: 'pie',
        //             radius: '50%',
        //             data: [
        //                 { value: 1048, name: '剩余重量' },
        //                 { value: 735, name: '烘去重量' },
        //             ],
        //             label: {
        //                 show: false,
        //             },
        //             labelLine: {
        //                 show: false,
        //             },
        //             emphasis: {
        //                 itemStyle: {
        //                     shadowBlur: 10,
        //                     shadowOffsetX: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)',
        //                 },
        //             },
        //         },
        //     ],
        // }

        const progressBarOption = {
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         // Use axis to trigger tooltip
            //         type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            //     },
            // },
            // color: [
            //     '#0653F6',
            //     // '#1B61E7',
            //     '#3673D5',
            //     // '#4A80C8',
            //     '#608FB8',
            //     // '#719BAD',
            //     '#82A6A1',
            //     // '#8DAD9A',
            //     '#9CB790',
            //     // '#A7BE88',
            //     '#B3C681',
            //     '#CAD671',
            //     '#DBE165',
            // ],
            animation: false, // å…³é—­åŠ¨ç”»
            color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
            grid: {
                top: '12%',
                left: '20',
                right: '55',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                min: 0,
                max: 150,
                show: false,
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'category',
                data: ['时间'],
            },
            series: [
                // {
                //     name: '第一阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     barWidth: 26,
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: '第二阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: 'Affiliate Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [20],
                // },
                // {
                //     name: 'Video Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [15],
                // },
                // {
                //     name: 'Search Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [10],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [
                //         {
                //             value: 35,
                //             itemStyle: {
                //                 color: '#c0c0c0',
                //             },
                //         },
                //     ],
                // },
            ],
        }

        const efficiencyLineOption = {
            title: {},
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: '20%',
                left: '17',
                right: '57',
                bottom: '0%',
                containLabel: true,
            },
            legend: {
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                min: 0,
                max: 150,
                // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                axisLabel: {
                    formatter: '{value} Â°C',
                },
            },
            series: [
                {
                    name: '干燥效率',
                    type: 'line',
                    lineStyle: {
                        width: 1,
                    },
                    // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
                    data: [
                        [0, 1],
                        [15, 10],
                        [45, 11],
                        [70, 6],
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' },
                        ],
                    },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }],
                    // },
                },
            ],
        }

        option && moisChart.setOption(option)
        waterOption && waterChart.setOption(waterOption)
        bellowsOption && bellowsTempChart.setOption(bellowsOption)
        fanFreqOption && fanFreqChart.setOption(fanFreqOption)

        progressBarOption && progressBarChart.setOption(progressBarOption)
        efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
    }

    function queryEqp() {
        queryById({ id: router.currentRoute.value.params.id }).then((res) => {
            // console.log(`output->res`, res)
            eqp.value = res
            queryRealTime()
            setTimeout(initCharts, 500)
        })
    }

    function listAllEqp() {
        listAll({ enable: 'Y' })
            .then((result) => {
                console.log(`output->result`, result)
                eqps.value = result
                queryRealTime()
            setTimeout(initCharts, 500)
				
            })
            .catch((err) => {
                console.log(`output->err`, err)
            })
    }


    var num = 0;


    // function queryEqpsReal() {
        
    //     if (eqps.value.length > 0) {
    //         var i = num%eqps.value.length
    //         eqp.value = eqps[i]
    //         console.log("777",i);
    //         console.log("888",eqp.value);
    //         queryRealTime()
    //         setTimeout(initCharts, 500)
    //     }
    //     num ++;
    // }

    function queryRealTime() {

        if (eqp.value) {
        eqp.value = eqps.value[eqpNum.value]
        console.log("888",eqp.value);
        let tenantId = 1003
        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)
                //    res.tempValue = [res.windTemp, 100]
                //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
                /**水滴图含水量 */
                res.mois = [
                    (res.trendVo.moisture / 100).toFixed(2),
                    (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                    (res.trendVo.moisture / 100 / 3).toFixed(2),
                ]
                if (waterChart) {
                    waterChart.setOption({
                        series: [
                            {
                                data: res.mois,
                                label: {
                                    formatter: function () {
                                        return res.trendVo.moisture + '%'
                                    },
                                    fontSize: 20,
                                },
                            },
                        ],
                    })
                }

                /**温度环形图 */
                if (bellowsTempChart) {
                    bellowsTempChart.setOption({
                        series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
                    })
                }
                /**风机频率环形图 */
                if (fanFreqChart) {
                    fanFreqChart.setOption({
                        series: [
                            {
                                data: [
                                    {
                                        value: res.trendVo.fanFrequency,
                                    },
                                ],
                            },
                        ],
                    })
                }
                /**干燥进度、走势与阶段效率和阶段消耗 */
                if (res && res.detailList) {
                    var progressSeries = []
                    var ganZaoXiaoLv = []
                    var zhengQiXiaoHao = []
                    var dianNengXiaoHao = []
                    var totalTime = 0
                    var beforeWeight = 0
                    res.moisList = []
                    beforeWeight = res.originWeight
                    console.log(`output->res`, res)
                    res.detailList.forEach((item) => {
                        //console.log(`output->item`, item)
                        res.moisList.push([item.totalTime, item.moisture])
                        console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                        var curDryTime = item.totalTime - totalTime

                        if (curDryTime > 0) {
                            progressSeries.push({
                                name: item.moisture,
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [item.totalTime - totalTime],
                            })
                            ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])

                            totalTime = item.totalTime
                        }
                        beforeWeight = item.weight
                    })

                    if (res.remain) {
                        if (res.dryTime - totalTime > 0) {
                            progressSeries.push({
                                name: '当前',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [
                                    {
                                        value: res.dryTime - totalTime,
                                    },
                                ],
                            })
                        }

                        progressSeries.push({
                            name: '剩余',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                            },
                            emphasis: {
                                focus: 'series',
                            },
                            data: [
                                {
                                    value: res.remain - (res.dryTime - totalTime),
                                    itemStyle: {
                                        color: '#c0c0c0',
                                    },
                                },
                            ],
                        })
                    }

                    /**干燥进度 */
                    if (progressBarChart) {
                        console.log(`output->progressSeries`, progressSeries)
                        progressBarChart.setOption(
                            {
                                xAxis: {
                                    max: totalTime + res.remain,
                                },
                                series: progressSeries,
                            },
                            { replaceMerge: ['series'] }
                        )
                    }

                    res.totalTime = totalTime + res.remain
                    /**干燥效率、消耗 */
                    if (efficiencyLineChart) {
                        console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                        efficiencyLineChart.setOption({
                            xAxis: {
                                max: totalTime + res.remain,
                            },
                            series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                        })
                    }

                    res.moisList.push([res.dryTime, res.trendVo.moisture])
                }

                /**温度趋势 */
                if (res && res.bellowsTemp) {
                    Array.from(Object.entries(res.bellowsTemp))
                    var arr = Object.keys(res.bellowsTemp)
                    var temArr = []
                    arr.forEach((item) => {
                        temArr.push([item * 1, res.bellowsTemp[item]])
                    })

                    //console.log(`output->arr` + JSON.stringify(temArr))
                    res.tempArr = temArr
                }

                /**干燥过程趋势 */
                if (moisChart) {
                    //console.log(`output->更新chart`)
                    moisChart.setOption({
                        series: [
                            {
                                data: res.moisList,
                                markLine: {
                                    symbol: 'none',
                                    data: [
                                        {
                                            name: '目标',
                                            yAxis: res.target,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}%',
                                    },
                                },
                            },
                            {
                                data: res.tempArr,
                            },
                        ],
                    })
                }

                /**效率对比图 */
                res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
                if (res.xiaolv > standard.value.xiaolv) {
                    res.xlgood = true
                    res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
                    res.xlrHeight = '100%'
                } else if (res.xiaolv < standard.value.xlMin) {
                    res.xlbad = true
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                }


				
                /** è’¸æ±½æ¶ˆè€— */
                res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
                if (res.zhengqi > standard.value.zhengqi) {
                    res.zqgood = true
                    res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
                    res.zqrHeight = '100%'
                } else if (res.zhengqi < standard.value.zqMin) {
                    res.zqbad = true
                    res.zqsHeight = '100%'
                    res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
                }
				
				
                /** ç”µèƒ½æ¶ˆè€— */
                res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
                if (res.dian > standard.value.dian) {
                    res.dngood = true
                    res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
                    res.dnrHeight = '100%'
                } else if (res.dian < standard.value.dMin) {
                    res.dnbad = true
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                }

                /**gif动图 */
                res.gif = 'tmrefeng2'
            } else {
                res = {
                    mois: [],
                }
            }
            console.log(`output->res`, res)
            realData.value = res
        })
    }
    }

    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
        }

        
    }

    listAllEqp()
    //queryEqp()
    // DOM挂载完成后渲染图表
    onMounted(() => {
        Timer.value = setInterval(queryRealTime, 3000)
        Timer2.value = setInterval(moveImage, 50)
    })

    onUnmounted(() => {
        clearInterval(Timer.value)
        clearInterval(Timer2.value)
        Timer.value = null
        Timer2.value = null
    })
</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: 750px;
    width: 850px;
    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: 79%;
    border-radius: 10px;
    flex-wrap: wrap;
    background-position: 85px 279px;

    }
    .leftMid {
        padding-top: 10px;
        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: 600px;
        width: 848px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .leftTop1 {
        width: 250px;
        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;
        height: 300px;

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

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

    .infoChart {
        width: 340px;
        height: 300px;
        /* 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: #ed6f6f;
    }
    .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: #2ecf54;
    }

    .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-image: url(/src/assets/images/dry/yaocai1.png);
        background-repeat: no-repeat;
        background-size: 61%;
        background-position: 0px 10px;
    }
    .tempMoisChart {
        width: 690px;
        height: 440px;
        /* 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 1.5s infinite ease-in-out;
        animation: scaleout 1.5s 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;
        }
    }
</style>

 src/views/dry/bigScreen/BigEqp.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2216 @@
<template>
    <dv-full-screen-container>
    <div class="eqpBox">
        <div class="eqpRow">
            <div class="eqpImage"  :style="{'background-position':position + 'px'}">
				
                <div class="leftEqp">
                    <div style="width: 350px;  ">
                    <div class="herbInfo">
						
                            <dv-border-box7 class="curEqp">
                                <div class="eqpName" style="padding: 30px" @click="changeEqp">
                                    <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
                                    <div class="subhead">{{ eqp?.type }}</div>
                                    <dv-decoration-1 style="width:300px;height:90px; margin-left: 20px;" />
                                    <!-- è®¾å¤‡ï¼š{{ eqp.name }}</div>
                                <div class="eqpName">型号：{{ eqp.type }}</div> -->
                                </div>
                            </dv-border-box7>
                            <dv-border-box7 class="curHerb" :style="{'background-image': 'url('+getHerbImageUrl(realData?.herbImage)+')'}">
                                <div class="eqpName" style="margin-left: 176px; height: 190px">
                                    <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                                    <div class="subhead">干燥配方</div>
                                </div>
                                <div class="formula">
                                    <div class="formulaItem">
                                        <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.feed }} ç­</div>
                                            <div class="subhead2">投料量</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon style="color: red" icon="bx:wind" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.windTemp }} Â°C</div>
                                            <div class="subhead2">热风</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon style="color: green" icon="tabler:target-arrow" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.target }} %</div>
                                            <div class="subhead2">目标</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="eqpName">{{ realData?.herbName }}</div>
                                <div class="eqpName">{{ realData?.feed }} ç­</div> -->
                            </dv-border-box7>
                        </div>
                        <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                            <div class="chartTittle">风机频率</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="fanFreq" style="width: 240px; height: 240px"></div>
                            </div>
                        </dv-border-box7> -->
                        <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                            <div class="chartTittle">含水率</div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.target }}</span
                                                > %
                                            </div>
                                            <div class="subhead2">目标含水率</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.initial }}</span
                                                > %</div
                                            >
                                            <div class="subhead2">来料含水率</div>
                                        </div>
                                    </div>
                                </div>
                                <div id="moisture" style="width: 170px; height: 170px"></div>
                            </div>
                            <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold;">实时含水率</div>
                        </dv-border-box7>
                </div>
                    <dv-border-box7 class="leftTop">
                        <div class="leftTop0">
                        <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;
                                    margin-top: 190px;
                                    color: white;
                                    background-color: #1595ea;
                                    height: 60px;
                                    width: 180px;
                                    line-height: 60px;
                                    text-align: center;
                                    border-radius: 5px;
                                    font-weight: bold;
                                "
                            >
                            {{ statusTxt }}
                            </div>
                            <div v-if="realData?.isError"
                                class="eqpInfoText blingbling"
                                style="
                                    position: absolute;
                                    font-size: 30px;
                                    max-height: 200px;
                                    max-width: 720px;
                                    border-radius: 10px;
                                    background-color: #ce0000;
                                    color: white;
                                    padding: 10px;
                                "
                            >
                                <div class="outDiv">
                                    <div><Icon icon="bx:error" :size="30" /> </div>
                                    <div><span>{{realData?.errorMsg}}</span></div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </dv-border-box7>
                    <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
                            <div class="chartTittle">风箱温度</div>
                            <div class="outDiv">
                                <div id="bellowsTemp" style="width: 230px; height: 230px">
                                    <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                                </div>
                            </div>
                        </dv-border-box7>
                    <dv-border-box7 class="leftMid">
                        <div class="chartTittle">实时进度</div>
                        <div id="efficiencyLine" style="width: 848px; height: 180px;margin-top: -10px;"></div>
                        <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
                            <div style="width: 100px; height: 20px">0 min</div>
                            <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                        </div>
                        <div id="progressBar" style="width: 848px; height: 80px"></div>
                    </dv-border-box7>

                    <!-- <div class="outDiv">
                        <div style="height: 100px; width: 400px">
                            <Progress
                                :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                }"
                                :percent="realData?.percent"
                                status="active"
                                :show-info="false"
                            />
                            <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                                <span>干燥 52 Min</span>
                                <span>预计 120 Min</span>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="rightInfo">
                    <div class="rightTop">
						
                        <dv-border-box7 class="tempMoisChart">
                            <div :id="'moisChart'" style="width: 690px; height: 420px"></div>
                        </dv-border-box7>
                    </div>
                    <div class="rightTwo">
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                å¹²ç‡¥æ•ˆçŽ‡(kg/h)
                                <div class="rightLabel">
                                    <div class="label good">&gt;{{ standard.xiaolv }} ä¼˜ </div>
                                    <div class="label bad">&lt;{{ standard.xlMin }} å·®</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
                                                > kg
                                            </div>
                                            <div class="subhead2">水分蒸发</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div>
                                            <div class="subhead2">干燥用时</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{ standard.xiaolv }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
                                        <div class="barBack">
                                            <div
                                                class="barDiv"
                                                :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
                                                :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
                                            >
                                            </div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box7>
					
					
						
						
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle"
                                >蒸汽消耗(m³/kg)
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.zhengqi }} å·®</div>
                                    <div class="label good">&lt;{{ standard.zqMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.steam}}</span> m³ </div>
                                            <div class="subhead2">蒸汽用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.zhengqi}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                                :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box7>
                        <dv-border-box7 class="infoChart" >
                            <div class="chartTittle">效率对比</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="compare" style="width: 300px; height: 250px"></div>
                            </div>
                        </dv-border-box7>
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                <div> ç”µèƒ½æ¶ˆè€—(kWh/kg)</div>
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.dian }} å·®</div>
                                    <div class="label good">&lt;{{ standard.dMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.watt}}</span> kWh </div>
                                            <div class="subhead2">电能用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.dian}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.dian | 0}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                                :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                        </div>
                                        <div style="line-height: 20px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </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 { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { useUserStore } from '/@/store/modules/user'

	


    const domRef = ref<Nullable<HTMLElement>>(null);
        const { enter, toggle, exit, isFullscreen } = useFullscreen();

const { toggle: toggleDom } = useFullscreen(domRef);
    const Timer = ref()
    const Timer2 = ref()
    const marks = ref<Record<number, any>>({
        0: '0°C',
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: '',
        8: '',
        9: '',
        10: '',
        11: '',
        12: '',
        13: '',
        14: '',
        15: '',
        16: '',
        17: '',
        18: '',
        19: '',
        20: '',
        21: '',
        22: '',
        23: '',
        24: '',
        25: '25°C',
        26: '',
        27: '',
        28: '',
        29: '',
        30: '',
        31: '',
        32: '',
        33: '',
        34: '',
        35: '',
        36: '',
        37: '',
        38: '',
        39: '',
        40: '',
        41: '',
        42: '',
        43: '',
        44: '',
        45: '',
        46: '',
        47: '',
        48: '',
        49: '',
        50: '50°C',
        51: '',
        52: '',
        53: '',
        54: '',
        55: '',
        56: '',
        57: '',
        58: '',
        59: '',
        60: '',
        61: '',
        62: '',
        63: '',
        64: '',
        65: '',
        66: '',
        67: '',
        68: '',
        69: '',
        70: '',
        71: '',
        72: '',
        73: '',
        74: '',
        75: '75°C',
        76: '',
        77: '',
        78: '',
        79: '',
        80: '',
        81: '',
        82: '',
        83: '',
        84: '',
        85: '',
        86: '',
        87: '',
        88: '',
        89: '',
        90: '',
        91: '',
        92: '',
        93: '',
        94: '',
        95: '',
        96: '',
        97: '',
        98: '',
        99: '',
        100: '100°C',
    })
    const eqps =  ref([] as dryEquipment[])
	
    const eqp = ref({} as dryEquipment)
    const eqpNum = ref(1)
    const userStore = useUserStore()
    const realData = ref({})
    const standard = ref({
        xiaolv: 220,
        xlMin: 200,
        zhengqi: 50,
        zqMin: 45,
        dian: 8,
        dMin: 7.5,
    })

    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'
    var moisChart: echarts.ECharts
    var waterChart: echarts.ECharts

    var bellowsTempChart: echarts.ECharts
    // var fanFreqChart: echarts.ECharts
    var progressBarChart: echarts.ECharts
    var efficiencyLineChart: echarts.ECharts

    var compareChart: echarts.ECharts

    function initCharts() {
        let domId = 'moisChart'
        let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
        let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
        let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
        // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
        let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
        let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
        // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
        let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
        moisChart = echarts.init(chartDom)
        waterChart = echarts.init(waterDom)
        bellowsTempChart = echarts.init(bellowsTempDom)
        // fanFreqChart = echarts.init(fanFreqDom)
        progressBarChart = echarts.init(progressBarDom)
        efficiencyLineChart = echarts.init(efficiencyLineDom)
        compareChart = echarts.init(compaerDom)

        const option = {
            color: ['green', 'red'],
            title: {
                text: '含水率/温度趋势',
                textStyle: {
                    color: '#fff',
                    fontSize: 15
                },
				
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: 50,
                right: 70,
                top: 50,
                bottom: 60,
            },
            legend: {
                right: 60,
                textStyle: {
                    color: '#fff'
                }
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none',
            //         },
            //         dataView: { readOnly: false },
            //         magicType: { type: ['line', 'bar'] },
            //         restore: {},
            //         saveAsImage: {},
            //     },
            // },
            xAxis: {
                type: 'value',
                axisLabel:{
                    color: '#fff'
                },
                //boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                min: 0,
                max: function (value) {
                    if (value.max < 100) {
                        return 100
                    } else {
                        return value.max
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: ['#2b2b2b']
                    }
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: ['10%', '10%'],
                axisLabel:{
                    color: '#fff'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: ['#2b2b2b']
                    }
                }
                // min: 0,
                // max: function (value) {
                //     if (value.max < 100) {
                //         return 100
                //     } else {
                //         return value.max
                //     }
                // },
            },
            // yAxis: {
            //     type: 'value',
            //     axisLabel: {
            //         formatter: '{value} Â°C',
            //     },
            // },
            series: [
                {
                    name: '含水率',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 1],
                        [2, 2],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }],
                    },
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                        ])
                    },
                },
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 10],
                        [2, 20],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 0, 135)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(135, 0, 157)'
                        }
                        ])
                    },
                    // markLine: {
                    //     data: [
                    //         { type: 'average', name: 'Avg' },
                    //         [
                    //             {
                    //                 symbol: 'none',
                    //                 x: '90%',
                    //                 yAxis: 'max',
                    //             },
                    //             {
                    //                 symbol: 'circle',
                    //                 label: {
                    //                     position: 'start',
                    //                     formatter: 'Max',
                    //                 },
                    //                 type: 'max',
                    //                 name: '最高点',
                    //             },
                    //         ],
                    //     ],
                    // },
                },
            ],
        }
        const waterOption = {
            series: [
                {
                    type: 'liquidFill',
                    radius: '100%',
                    //waveAnimation: false,
                    amplitude: 3,
                    animationDuration: 5,
                    //animationDurationUpdate: 0,
                    data: [0.56,0.44,0.32],
                    shape:
                        'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
                    outline: {
                        show: false,
                    },
                    label: {
                        // formatter: function () {
                        //     //console.log(`output->params`,params,mois.value)

                        //     return (
                        //         '' +
                        //         // +'初始'+(mois.value[0]*100).toFixed(2) + '%\n\n\n'
                        //         (mois.value[1] * 100).toFixed(2) +
                        //         '%'
                        //         // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
                        //     )
                        // },
                        fontSize: 20,
                        //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
                    },
                },
            ],
        }

        const bellowsOption = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    splitNumber: 8,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 10,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10,
                        },
                    },
                    axisTick: {
                        distance: -15,
                        splitNumber: 5,
                        length: 3,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        distance: -18,
                        length: 6,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -13,
                        color: '#fff',
                        fontSize: 12,
                    },
                    anchor: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '0%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: '{value}°C',
                        color: 'inherit',
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 3,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
            ],
        }

        // const fanFreqOption = {
        //     series: [
        //         {
        //             type: 'gauge',
        //             progress: {
        //                 show: true,
        //                 width: 9,
        //             },
        //             axisLine: {
        //                 lineStyle: {
        //                     width: 9,
        //                 },
        //             },
        //             axisTick: {
        //                 show: false,
        //             },
        //             splitLine: {
        //                 distance: 3,
        //                 length: 4,
        //                 lineStyle: {
        //                     width: 1,
        //                     color: '#999',
        //                 },
        //             },
        //             axisLabel: {
        //                 distance: 15,
        //                 color: '#999',
        //                 fontSize: 10,
        //             },
        //             anchor: {
        //                 show: true,
        //                 showAbove: true,
        //                 size: 10,
        //                 itemStyle: {
        //                     borderWidth: 3,
        //                 },
        //             },
        //             title: {
        //                 show: false,
        //             },
        //             detail: {
        //                 valueAnimation: true,
        //                 fontSize: 20,
        //                 offsetCenter: [0, '70%'],
        //                 formatter: '{value}Hz',
        //             },
        //             data: [
        //                 {
        //                     value: 56,
        //                 },
        //             ],
        //         },
        //     ],
        // }
        // const weightOption = {
        //     //         title: {
        //     //   text: 'Referer of a Website',
        //     //   subtext: 'Fake Data',
        //     //   left: 'center'
        //     // },
        //     color: ['#1595EA', '#2C4D90', '#FF7F7F'],
        //     tooltip: {
        //         trigger: 'item',
        //     },
        //     radius: [0, '85%'],
        //     // grid: {
        //     //     top: 20,
        //     //     left: 20,
        //     //     right: 20,
        //     //     bottom: 20,
        //     // },
        //     // legend: {
        //     //     orient: 'vertical',
        //     //     left: 'left',
        //     // },
        //     series: [
        //         {
        //             name: '重量数据',
        //             type: 'pie',
        //             radius: '50%',
        //             data: [
        //                 { value: 1048, name: '剩余重量' },
        //                 { value: 735, name: '烘去重量' },
        //             ],
        //             label: {
        //                 show: false,
        //             },
        //             labelLine: {
        //                 show: false,
        //             },
        //             emphasis: {
        //                 itemStyle: {
        //                     shadowBlur: 10,
        //                     shadowOffsetX: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)',
        //                 },
        //             },
        //         },
        //     ],
        // }

        const progressBarOption = {
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         // Use axis to trigger tooltip
            //         type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            //     },
            // },
            // color: [
            //     '#0653F6',
            //     // '#1B61E7',
            //     '#3673D5',
            //     // '#4A80C8',
            //     '#608FB8',
            //     // '#719BAD',
            //     '#82A6A1',
            //     // '#8DAD9A',
            //     '#9CB790',
            //     // '#A7BE88',
            //     '#B3C681',
            //     '#CAD671',
            //     '#DBE165',
            // ],
            animation: false, // å…³é—­åŠ¨ç”»
            color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
            grid: {
                top: '12%',
                left: '20',
                right: '55',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                min: 0,
                max: 150,
                show: false,
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'category',
                data: ['时间'],
            },
            series: [
                // {
                //     name: '第一阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     barWidth: 26,
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: '第二阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: 'Affiliate Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [20],
                // },
                // {
                //     name: 'Video Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [15],
                // },
                // {
                //     name: 'Search Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [10],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [
                //         {
                //             value: 35,
                //             itemStyle: {
                //                 color: '#c0c0c0',
                //             },
                //         },
                //     ],
                // },
            ],
        }

        const efficiencyLineOption = {
            title: {},
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: '30%',
                left: '17',
                right: '57',
                bottom: '0%',
                containLabel: true,
            },
            legend: {
                right: 60,
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                min: 0,
                max: 150,
                // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                axisLabel: {
                    formatter: '{value} Â°C',
                },
                // max: standard.value.xiaolv + 3,
            },
            series: [
                {
                    name: '干燥效率',
                    type: 'line',
                    lineStyle: {
                        width: 1,
                    },
                    // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
                    data: [
                        [0, 1],
                        [15, 10],
                        [45, 11],
                        [70, 6],
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' },
                        ],
                    },
                    markLine: {
                                    symbol: 'none',
                                    data: [
                                        {
                                            name: '额定',
                                            yAxis: standard.value.xiaolv,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}',
                                        color: '#fff'
                                    },
                                },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }],
                    // },
                },
            ],
        }

        const compareOption = {
					
            tooltip: {
                trigger: 'axis',
			
            },
            grid: {
                top: '6%',
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
			
            },
            yAxis: {
                axisLine: {
                    show:false,
                },
                axisTick: {
                    show: false,
                },
                type: 'category',
                data: ['1#', '2#', '3#', '4#', '5#', '6#']
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    barWidth: 10,
                    data: [190, 89, 34, 70, 44, 30],
                    label: {
                        show: true,
                        position: 'right',
                        valueAnimation: true,
						
                        color: '#fff' 
                    }
                },
            ]
        }


        option && moisChart.setOption(option)
        waterOption && waterChart.setOption(waterOption)
        bellowsOption && bellowsTempChart.setOption(bellowsOption)
        // fanFreqOption && fanFreqChart.setOption(fanFreqOption)

        progressBarOption && progressBarChart.setOption(progressBarOption)
        efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
        compareOption && compareChart.setOption(compareOption)
    }

    // åŠ¨æ€è¯»å–图片
function getHerbImageUrl(name: string) {
  return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href;
}

    // åŠ¨æ€è¯»å–图片
    function getStatusImageUrl(name: string) {
  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
            queryRealTime()
            setTimeout(initCharts, 500)
        })
    }

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


    var num = eqpNum.value;

    function changeEqp() {
        //console.log("changeEqp::",eqps.value.length);
        num ++;
     if (eqps.value.length > 0) {
            var i = num%eqps.value.length
            //eqp.value = eqps.value[i]
          //  console.log("777",i);
            eqpNum.value = i;
            //console.log("888",eqp.value);
            queryRealTime()
            //setTimeout(initCharts, 500)
        }
        
    }

    // function queryEqpsReal() {
        
    //     if (eqps.value.length > 0) {
    //         var i = num%eqps.value.length
    //         eqp.value = eqps[i]
    //         console.log("777",i);
    //         console.log("888",eqp.value);
    //         queryRealTime()
    //         //setTimeout(initCharts, 500)
    //     }
    //     num ++;
    // }

    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 queryRealTime() {

        if (eqp.value) {
        eqp.value = eqps.value[eqpNum.value]
       // console.log("888",eqp.value);
        let tenantId = 1003
        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)
                //    res.tempValue = [res.windTemp, 100]
                //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
                /**水滴图含水量 */
                res.mois = [
                    (res.trendVo.moisture / 100).toFixed(2),
                    (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                    (res.trendVo.moisture / 100 / 3).toFixed(2),
                ]
                if (waterChart) {
                    waterChart.setOption({
                        series: [
                            {
                                data: res.mois,
                                label: {
                                    formatter: function () {
                                        return res.trendVo.moisture + '%'
                                    },
                                    fontSize: 20,
                                },
                            },
                        ],
                    })
                }

                /**温度环形图 */
                if (bellowsTempChart) {
                    bellowsTempChart.setOption({
                        series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
                    })
                }
                /**风机频率环形图 */
                // if (fanFreqChart) {
                //     fanFreqChart.setOption({
                //         series: [
                //             {
                //                 data: [
                //                     {
                //                         value: res.trendVo.fanFrequency,
                //                     },
                //                 ],
                //             },
                //         ],
                //     })
                // }
                /**干燥进度、走势与阶段效率和阶段消耗 */
                if (res && res.detailList) {
                    var progressSeries = []
                    var ganZaoXiaoLv = []
                    var zhengQiXiaoHao = []
                    var dianNengXiaoHao = []
                    var totalTime = 0
                    var beforeWeight = 0
                    res.moisList = []
                    beforeWeight = res.originWeight
                    //console.log(`output->res`, res)
                    res.detailList.forEach((item) => {
                        //console.log(`output->bef`, beforeWeight)
                        //console.log(`output->cur`, item.weight)
                        res.moisList.push([item.totalTime, item.moisture])
                        //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                        var curDryTime = item.totalTime - totalTime

                        if (curDryTime > 0) {
                            progressSeries.push({
                                name: item.moisture,
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [item.totalTime - totalTime],
                            })
                            ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])

                            totalTime = item.totalTime
                        }
                        beforeWeight = item.weight
                    })

                    if (res.remain) {
                        if (res.dryTime - totalTime > 0) {
                            progressSeries.push({
                                name: '当前',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [
                                    {
                                        value: res.dryTime - totalTime,
                                    },
                                ],
                            })
                        }

                        // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv])

                        res.totalRemain = res.remain - (res.dryTime - totalTime)>0?res.remain - (res.dryTime - totalTime):0
                        progressSeries.push({
                            name: '剩余',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                            },
                            emphasis: {
                                focus: 'series',
                            },
                            data: [
                                {
                                    value: res.remain - (res.dryTime - totalTime),
                                    itemStyle: {
                                        color: '#c0c0c0',
                                    },
                                },
                            ],
                        })



                    }

                    /**干燥进度 */
                    if (progressBarChart) {
                        //console.log(`output->progressSeries`, progressSeries)
                        progressBarChart.setOption(
                            {
                                xAxis: {
                                    max: totalTime + res.remain,
                                },
                                series: progressSeries,
                            },
                            { replaceMerge: ['series'] }
                        )
                    }

                    res.totalTime = totalTime + res.remain
                    /**干燥效率、消耗 */
                    if (efficiencyLineChart) {
                        //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                        efficiencyLineChart.setOption({
                            xAxis: {
                                max: totalTime + res.remain,
                            },
                            series: [{ data: ganZaoXiaoLv,
                            markLine: {
                                symbol: 'none',
                                    data: [
                                        {
                                            name: '额定',
                                            yAxis: standard.value.xiaolv,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}',
                                        color: '#fff'
                                    },
                            } },
                             { data: zhengQiXiaoHao },
                              { data: dianNengXiaoHao }],
                        })
                    }

                    res.moisList.push([res.dryTime, res.trendVo.moisture])
                }

                /**温度趋势 */
                if (res && res.bellowsTemp) {
                    Array.from(Object.entries(res.bellowsTemp))
                    var arr = Object.keys(res.bellowsTemp)
                    var temArr = []
                    arr.forEach((item) => {
                        temArr.push([item * 1, res.bellowsTemp[item]])
                    })

                    //console.log(`output->arr` + JSON.stringify(temArr))
                    res.tempArr = temArr
                }

                /**干燥过程趋势 */
                if (moisChart) {
                    //console.log(`output->更新chart`)
                    moisChart.setOption({
                        series: [
                            {
                                data: res.moisList,
                                markLine: {
                                    symbol: 'none',
                                    data: [
                                        {
                                            name: '目标',
                                            yAxis: res.target,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}%',
                                        color: '#fff'
                                    },
                                },
                            },
                            {
                                data: res.tempArr,
                            },
                        ],
                    })
                }

                /**效率对比图 */
                if( (res.originWeight - res.yield) <= 0) {
                    res.xiaolv =  standard.value.xiaolv + 6
                } else {
                    res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
                }
				
                if (res.xiaolv > standard.value.xiaolv) {
                    res.xlgood = true
                    res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
                    res.xlrHeight = '100%'
                } else if (res.xiaolv < standard.value.xlMin) {
                    res.xlbad = true
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                } else {
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                }


				
                /** è’¸æ±½æ¶ˆè€— */
                if( (res.originWeight - res.yield) <= 0) {
                    res.zhengqi = standard.value.zhengqi -3
                } else {
                    res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
                }
                //console.log('zhengqi:', res.zhengqi);
                if (res.zhengqi > standard.value.zhengqi) {
                    res.zqbad = true
                    res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
                    res.zqrHeight = '100%'
                } else if (res.zhengqi < standard.value.zqMin) {
                    res.zqgood = true
                    res.zqsHeight = '100%'
                    res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
                } else {
                    res.zqsHeight = '100%'
                    res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
                }

				
				
                /** ç”µèƒ½æ¶ˆè€— */
                if( (res.originWeight - res.yield) <= 0) {
                    res.dian = standard.value.dian -1.5
                } else {
                    res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
                }
				
                if (res.dian > standard.value.dian) {
                    res.dnbad = true
                    res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
                    res.dnrHeight = '100%'
                } else if (res.dian < standard.value.dMin) {
					
                    res.dngood = true
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                } else {
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                }

                console.log("state:::fan::", res.state_fan,"roller::", res.state_roller,"windbox::", res.state_windbox);
                console.log("===========================");
                //console.log("state:::state_windbox::", res.state_windbox);

                /**状态/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) {
                    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 = '干燥完成'
                }
                }
				
				

                if (compareChart) {
                    compareChart.setOption({
                        yAxis: {
                            data: res.compEqpNum
                        },
                        series: {
                            data: res.compEqpEffic
                        }
                    })
                }

                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

                res.errorMsg = '有一个故障，请检查。'
            } else {
                res = {
                    mois: [],
                    gif: 'tmrefeng2',
                    herbImage: 'yaocai1.png'
                }
            }
			
            //console.log(`output->res`, res)
            realData.value = res
        })
    }
    }

    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
        }

        
    }

    listAllEqp()
    //queryEqp()
    // DOM挂载完成后渲染图表
    onMounted(() => {
        Timer.value = setInterval(queryRealTime, 3000)
        Timer2.value = setInterval(moveImage, 50)
    })

    onUnmounted(() => {
        clearInterval(Timer.value)
        clearInterval(Timer2.value)
        Timer.value = null
        Timer2.value = null
    })
</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: 750px;
    width: 850px;
    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: 79%;
    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: 600px;
        width: 848px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .leftTop1 {
        width: 250px;
        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;
        height: 300px;

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

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

    .infoChart {
        width: 340px;
        height: 300px;
        /* 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: 440px;
        /* 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 1.5s infinite ease-in-out;
        animation: scaleout 1.5s 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;
        }
    }
</style>

 src/views/dry/bigScreen/BigWorkShop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
<template>
  <dv-full-screen-container>
     
  </dv-full-screen-container>
</template>

<script setup lang="ts">


</script>

<style scoped>

</style>

 src/views/dry/dataDefine/DryHerb.data.ts

@@ -28,51 +28,51 @@
    dataIndex: 'parts',
  },

  {
    title: '初始含水率',
    align: 'center',
    dataIndex: 'initial',
  },
  // {
  //   title: '初始含水率',
  //   align: 'center',
  //   dataIndex: 'initial',
  // },
  {
    title: '目标含水率',
    align: 'center',
    dataIndex: 'target',
  },
  {
    title: '投料量（筐）',
    align: 'center',
    dataIndex: 'feed',
  },
  {
    title: '预计干燥时间',
    align: 'center',
    dataIndex: 'et',
  },
  // {
  //   title: '投料量（筐）',
  //   align: 'center',
  //   dataIndex: 'feed',
  // },
  // {
  //   title: '预计干燥时间',
  //   align: 'center',
  //   dataIndex: 'et',
  // },
  {
    title: '热风温度',
    align: 'center',
    dataIndex: 'windTemp',
  },
  {
    title: '环境温度',
    align: 'center',
    dataIndex: 'envTemp',
  },
  {
    title: '环境湿度',
    align: 'center',
    dataIndex: 'envHum',
  },
  {
    title: '荡料延时（ms）',
    align: 'center',
    dataIndex: 'delay',
  },
  {
    title: '翻料次数',
    align: 'center',
    dataIndex: 'turn',
  },
  // {
  //   title: '环境温度',
  //   align: 'center',
  //   dataIndex: 'envTemp',
  // },
  // {
  //   title: '环境湿度',
  //   align: 'center',
  //   dataIndex: 'envHum',
  // },
  // {
  //   title: '荡料延时（ms）',
  //   align: 'center',
  //   dataIndex: 'delay',
  // },
  // {
  //   title: '翻料次数',
  //   align: 'center',
  //   dataIndex: 'turn',
  // },
  {
    title: '干燥方法',
    align: 'center',
@@ -160,29 +160,29 @@
    component: 'Input',
  },

  {
    label: '初始含水率',
    field: 'initial',
    component: 'InputNumber',
  },
  // {
  //   label: '初始含水率',
  //   field: 'initial',
  //   component: 'InputNumber',
  // },
  {
    label: '目标含水率',
    field: 'target',
    component: 'InputNumber',
  },
  {
    label: '投料量',
    field: 'feed',
    component: 'InputNumber',
  },
  {
    label: '预计干燥时间',
    field: 'et',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  // {
  //   label: '投料量',
  //   field: 'feed',
  //   component: 'InputNumber',
  // },
  // {
  //   label: '预计干燥时间',
  //   field: 'et',
  //   component: 'InputNumber',
  //   dynamicRules: ({ model, schema }) => {
  //     return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
  //   },
  // },
  {
    label: '热风温度',
    field: 'windTemp',
@@ -191,38 +191,38 @@
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  {
    label: '环境温度',
    field: 'envTemp',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  {
    label: '环境湿度',
    field: 'envHum',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  {
    label: '荡料延时',
    field: 'delay',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  {
    label: '翻料次数',
    field: 'turn',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
  },
  // {
  //   label: '环境温度',
  //   field: 'envTemp',
  //   component: 'InputNumber',
  //   dynamicRules: ({ model, schema }) => {
  //     return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
  //   },
  // },
  // {
  //   label: '环境湿度',
  //   field: 'envHum',
  //   component: 'InputNumber',
  //   dynamicRules: ({ model, schema }) => {
  //     return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
  //   },
  // },
  // {
  //   label: '荡料延时',
  //   field: 'delay',
  //   component: 'InputNumber',
  //   dynamicRules: ({ model, schema }) => {
  //     return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
  //   },
  // },
  // {
  //   label: '翻料次数',
  //   field: 'turn',
  //   component: 'InputNumber',
  //   dynamicRules: ({ model, schema }) => {
  //     return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
  //   },
  // },
  {
    label: '干燥方法',
    field: 'dryMethod',

 src/views/dry/monitor/Eqp.vue

@@ -1,120 +1,43 @@
<template>
    <div class="eqpBox">
    <div  class="eqpBox">
        <div class="eqpRow">
            <div class="eqpImage">
            <div class="eqpImage" >
				
                <div class="leftEqp">
                    <div class="leftTop">
                        <div class="leftTop1">
                            <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                            <div>
                                <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
                                <div class="subhead">剩余时间</div>
                            </div>
                        </div>
                        <div class="leftTop1">
                            <!-- <Icon icon="mdi:chart-finance" :size="50" />
                            <div>
                                <div class="mainInfo">98 %</div>
                                <div class="subhead">干燥效率</div>
                            </div> -->
                        </div>
                        <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
                        <div class="outDiv eqpStatus">
                            <div
                                style="
                                    font-size: 28px;
                                    margin-top: 60px;
                                    color: white;
                                    background-color: #1595ea;
                                    height: 60px;
                                    width: 180px;
                                    line-height: 60px;
                                    text-align: center;
                                    border-radius: 5px;
                                    font-weight: bold;
                                "
                            >
                                æ­£åœ¨å¹²ç‡¥
                            </div>
                            <!-- <div
                                class="eqpInfoText blingbling"
                                style="
                                    position: absolute;

                                    max-height: 130px;
                                    max-width: 360px;
                                    border-radius: 10px;
                                    background-color: #ce0000;
                                    color: white;
                                    padding: 10px;
                                "
                            >
                                <div class="outDiv">
                                    <div><Icon icon="bx:error" :size="30" /> </div>
                                    <div><span> æœ‰ä¸€ä¸ªæ•…障，请检查机器。</span></div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <div class="leftMid">
                        <div id="efficiencyLine" style="width: 780px; height: 150px"></div>
                        <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
                            <div style="width: 100px; height: 20px">0 min</div>
                            <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                        </div>
                        <div id="progressBar" style="width: 780px; height: 80px"></div>
                    </div>
                    <!-- <div class="outDiv">
                        <div style="height: 100px; width: 400px">
                            <Progress
                                :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                }"
                                :percent="realData?.percent"
                                status="active"
                                :show-info="false"
                            />
                            <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                                <span>干燥 52 Min</span>
                                <span>预计 120 Min</span>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="rightInfo">
                    <div class="rightTop">
                        <div class="herbInfo">
                            <div class="curEqp">
                                <div class="eqpName">
                                    <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
                                    <div class="subhead">{{ eqp.type }}</div>
                    <div style="width: 300px;  ">
                    <div class="herbInfo">
						
                            <dv-border-box7 class="curEqp">
                                <div class="eqpName"  @click="changeEqp">
                                    <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
                                    <div class="subhead">{{ eqp?.type }}</div>
                                    <!-- <dv-decoration-1 style="width:150px;height:60px; margin-left: 20px;" /> -->
                                    <!-- è®¾å¤‡ï¼š{{ eqp.name }}</div>
                                <div class="eqpName">型号：{{ eqp.type }}</div> -->
                                </div>
                            </div>
                            <div class="curHerb">
                            </dv-border-box7>
                            <dv-border-box7 class="curHerb" :style="{'background-image': 'url(/src/assets/images/dry/yaocai/'+realData?.herbImage+')'}">
                                <div class="eqpName" style="margin-left: 100px">
                                    <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                                    <div class="subhead">干燥配方</div>
                                </div>
                                <div class="formula">
                                    <div class="formulaItem">
                                        <Icon icon="icon-park-twotone:box" :size="35" />
                                        <Icon  style="color: powderblue"  icon="icon-park-twotone:box" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.feed }}筐</div>
                                            <div class="subhead2">投料量</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon icon="bx:wind" :size="35" />
                                        <Icon  style="color: red"  icon="bx:wind" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.windTemp }}°C</div>
                                            <div class="subhead2">热风</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon icon="tabler:target-arrow" :size="35" />
                                        <Icon  style="color: green"  icon="tabler:target-arrow" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.target }}%</div>
                                            <div class="subhead2">目标</div>
@@ -123,14 +46,15 @@
                                </div>
                                <!-- <div class="eqpName">{{ realData?.herbName }}</div>
                                <div class="eqpName">{{ realData?.feed }} ç­</div> -->
                            </dv-border-box7>
                        </div>
                        <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                            <div class="chartTittle">风机频率</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="fanFreq" style="width: 220px; height: 200px"></div>
                            </div>
                        </div>
                        <div class="tempMoisChart">
                            <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                        </div>
                    </div>
                    <div class="rightTwo">
                        <div class="infoChart">
                        </dv-border-box7> -->
                        <dv-border-box7 class="infoChart" style="margin-left: 0px;">
                            <div class="chartTittle">含水率</div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
@@ -156,25 +80,113 @@
                                <div id="moisture" style="width: 170px; height: 133px"></div>
                            </div>
                            <div class="subhead2" style="margin-top: -37px; padding-left: 172px">实时含水率</div>
                        </dv-border-box7>
                </div>
                    <dv-border-box7  class="leftTop">

                        <div class="leftTop0">
                        <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="infoChart">
                        <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(/src/assets/images/dry/' + statusGif + '.gif)' }"></div>
                        <div class="outDiv eqpStatus">
                            <div
                                style="
                                    font-size: 28px;
                                    margin-top: 60px;
                                    color: white;
                                    background-color: #1595ea;
                                    height: 60px;
                                    width: 180px;
                                    line-height: 60px;
                                    text-align: center;
                                    border-radius: 5px;
                                    font-weight: bold;
                                "
                            >
                                {{ statusTxt }}
                            </div>
                            <div v-if="realData?.isError"
                                class="eqpInfoText blingbling"
                                style="
                                    position: absolute;

                                    max-height: 130px;
                                    max-width: 360px;
                                    border-radius: 10px;
                                    background-color: #ce0000;
                                    color: white;
                                    padding: 10px;
                                "
                            >
                                <div class="outDiv">
                                    <div><Icon icon="bx:error" :size="30" /> </div>
                                    <div><span> {{realData?.errorMsg}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </dv-border-box7>
						
                    <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;">
                            <div class="chartTittle">风箱温度</div>
                            <div class="outDiv">
                                <div id="bellowsTemp" style="width: 220px; height: 200px">
                                    <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                                </div>
                            </div>
                        </dv-border-box7>
                    <dv-border-box7 class="leftMid">
                        <div class="chartTittle">实时进度</div>
                        <div id="efficiencyLine" style="width: 780px; height: 130px; margin-top: -10px"></div>
                        <div style="height: 10px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
                            <div style="width: 100px; height: 20px">0 min</div>
                            <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle">风机频率</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="fanFreq" style="width: 220px; height: 200px"></div>
                        <div id="progressBar" style="width: 780px; height: 80px"></div>
                    </dv-border-box7>
			
                    <!-- <div class="outDiv">
                        <div style="height: 100px; width: 400px">
                            <Progress
                                :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                }"
                                :percent="realData?.percent"
                                status="active"
                                :show-info="false"
                            />
                            <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                                <span>干燥 52 Min</span>
                                <span>预计 120 Min</span>
                            </div>
                        </div>
                        <div class="infoChart">
                    </div> -->
                </div>
                <div class="rightInfo">
                    <div class="rightTop">
						
                        <dv-border-box7 class="tempMoisChart">
                            <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                        </dv-border-box7>
                    </div>
                    <div class="rightTwo">
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                å¹²ç‡¥æ•ˆçŽ‡(kg/h)
                                <div style="width: 120px; display: flex; justify-content: space-between">
                                <div class="rightLabel">
                                    <div class="label good">&gt;{{ standard.xiaolv }} ä¼˜ </div>
                                    <div class="label bad">&lt;{{ standard.xlMin }} å·®</div>
                                </div>
@@ -227,11 +239,13 @@
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="infoChart">
                        </dv-border-box7>

						
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle"
                                >蒸汽消耗(m³/kg)
                                <div style="width: 120px; display: flex; justify-content: space-between">
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.zhengqi }} å·®</div>
                                    <div class="label good">&lt;{{ standard.zqMin }} ä¼˜</div>
                                </div>
@@ -240,16 +254,16 @@
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>45</span>m³ </div>
                                            <div class="mainInfo3"><span>{{realData?.steam}}</span>m³ </div>
                                            <div class="subhead2">蒸汽用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">25</div>
                                        <div class="barTop">{{standard.zhengqi}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" id="zhengqiS"></div>
                                            <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            é¢å®š
@@ -258,9 +272,10 @@
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">26</div>
                                        <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" id="zhengqiR"> </div>
                                            <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                                :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                        </div>
                                        <div style="line-height: 18px">
                                            å®žæ—¶
@@ -270,10 +285,16 @@
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="infoChart">
                        </dv-border-box7>
                        <dv-border-box7 class="infoChart" >
                            <div class="chartTittle">效率对比</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="compare" style="width: 300px; height: 200px"></div>
                            </div>
                        </dv-border-box7>
                        <dv-border-box7 class="infoChart">
                            <div class="chartTittle">
                                <div> ç”µèƒ½æ¶ˆè€—（kw/h/kg） </div>
                                <div> ç”µèƒ½æ¶ˆè€—(kWh/kg)</div>
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.dian }} å·®</div>
                                    <div class="label good">&lt;{{ standard.dMin }} ä¼˜</div>
@@ -283,16 +304,16 @@
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>45</span>kw/h </div>
                                            <div class="mainInfo3"><span>{{realData?.watt}}</span>kWh </div>
                                            <div class="subhead2">电能用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">12</div>
                                        <div class="barTop">{{standard.dian}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" id="dianS"></div>
                                            <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            é¢å®š
@@ -301,9 +322,10 @@
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">10</div>
                                        <div class="barTop">{{realData?.dian | 0}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" id="dianR"></div>
                                            <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                                :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            å®žæ—¶
@@ -313,7 +335,7 @@
                                    </div>
                                </div>
                            </div>
                        </div>
                        </dv-border-box7>
                    </div>
                </div>
            </div>
@@ -322,6 +344,8 @@
</template>

<script setup lang="ts">
  import { useFullscreen } from '@vueuse/core';
    import { BorderBox13 as DvBorderBox7 } from '@kjgl77/datav-vue3'
    import { router } from '/@/router'
    import { onMounted, ref, onUnmounted } from 'vue'
    import { Progress } from 'ant-design-vue'
@@ -332,6 +356,10 @@
    import { queryById } from '../api/DryEquipment.api'
    import { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { useUserStore } from '/@/store/modules/user'
    const domRef = ref<Nullable<HTMLElement>>(null);
        const { enter, toggle, exit, isFullscreen } = useFullscreen();

const { toggle: toggleDom } = useFullscreen(domRef);
    const Timer = ref()
    const marks = ref<Record<number, any>>({
        0: '0°C',
@@ -436,6 +464,7 @@
        99: '',
        100: '100°C',
    })
	
    const eqp = ref({} as dryEquipment)
    const userStore = useUserStore()
    const realData = ref({})
@@ -448,42 +477,51 @@
        dMin: 7.5,
    })
    //realData.value.tempValue = [0, 100]
    realData.value.mois = [0, 0, 0]
    realData.value.mois = [0.5, 0.35, 0.2]
    realData.value.gif = 'tmrefeng2'
    realData.value.herbImage = 'yaocai1.png'
    var moisChart: echarts.ECharts
    var waterChart: echarts.ECharts

    var bellowsTempChart: echarts.ECharts
    var fanFreqChart: echarts.ECharts
    // var fanFreqChart: echarts.ECharts
    var progressBarChart: echarts.ECharts
    var efficiencyLineChart: echarts.ECharts

    var compareChart: echarts.ECharts
    function initCharts() {
        let domId = 'moisChart'
        let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
        let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
        let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
        let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
        // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
        let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
        let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
        let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
        // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
        moisChart = echarts.init(chartDom)
        waterChart = echarts.init(waterDom)
        bellowsTempChart = echarts.init(bellowsTempDom)
        fanFreqChart = echarts.init(fanFreqDom)
        //fanFreqChart = echarts.init(fanFreqDom)
        progressBarChart = echarts.init(progressBarDom)
        efficiencyLineChart = echarts.init(efficiencyLineDom)
        compareChart = echarts.init(compaerDom)

        const option = {
            color: ['#2C4D90', '#CE0000'],
            color: ['green', 'red'],
            title: {
                text: '含水率温度趋势',
                text: '含水率/温度趋势',
                textStyle: {
                    //color: '#fff',
                    fontSize: 15
                },
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: 50,
                right: 50,
                right: 70,
                top: 50,
                bottom: 40,
            },
@@ -549,6 +587,19 @@
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }],
                    },
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                        ])
                    },
                },
                {
                    name: '温度',
@@ -561,6 +612,19 @@
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    areaStyle: {
                        opacity: 0.2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 0, 135)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(135, 0, 157)'
                        }
                        ])
                    },
                    // markLine: {
                    //     data: [
@@ -595,7 +659,7 @@
                    amplitude: 3,
                    animationDuration: 5,
                    //animationDurationUpdate: 0,
                    data: realData.value.mois,
                    data: [0.56,0.44,0.32],
                    shape:
                        'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
                    outline: {
@@ -731,60 +795,60 @@
            ],
        }

        const fanFreqOption = {
            series: [
                {
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 9,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 9,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        distance: 3,
                        length: 4,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: 15,
                        color: '#999',
                        fontSize: 10,
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 10,
                        itemStyle: {
                            borderWidth: 3,
                        },
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 20,
                        offsetCenter: [0, '70%'],
                        formatter: '{value}Hz',
                    },
                    data: [
                        {
                            value: 56,
                        },
                    ],
                },
            ],
        }
        // const fanFreqOption = {
        //     series: [
        //         {
        //             type: 'gauge',
        //             progress: {
        //                 show: true,
        //                 width: 9,
        //             },
        //             axisLine: {
        //                 lineStyle: {
        //                     width: 9,
        //                 },
        //             },
        //             axisTick: {
        //                 show: false,
        //             },
        //             splitLine: {
        //                 distance: 3,
        //                 length: 4,
        //                 lineStyle: {
        //                     width: 1,
        //                     color: '#999',
        //                 },
        //             },
        //             axisLabel: {
        //                 distance: 15,
        //                 color: '#999',
        //                 fontSize: 10,
        //             },
        //             anchor: {
        //                 show: true,
        //                 showAbove: true,
        //                 size: 10,
        //                 itemStyle: {
        //                     borderWidth: 3,
        //                 },
        //             },
        //             title: {
        //                 show: false,
        //             },
        //             detail: {
        //                 valueAnimation: true,
        //                 fontSize: 20,
        //                 offsetCenter: [0, '70%'],
        //                 formatter: '{value}Hz',
        //             },
        //             data: [
        //                 {
        //                     value: 56,
        //                 },
        //             ],
        //         },
        //     ],
        // }
        // const weightOption = {
        //     //         title: {
        //     //   text: 'Referer of a Website',
@@ -1001,13 +1065,16 @@
                trigger: 'axis',
            },
            grid: {
                top: '20%',
                top: '30%',
                left: '17',
                right: '57',
                bottom: '0%',
                containLabel: true,
            },
            legend: {},
            legend: {
                right: 60,
				
            },
            xAxis: {
                show: false,
                axisLine: {
@@ -1033,6 +1100,7 @@
                axisLabel: {
                    formatter: '{value} Â°C',
                },
                max: standard.value.xiaolv + 3,
            },
            series: [
                {
@@ -1054,6 +1122,19 @@
                            { type: 'min', name: 'Min' },
                        ],
                    },
                    markLine: {
                                    symbol: 'none',
                                    data: [
                                        {
                                            name: '额定',
                                            yAxis: standard.value.xiaolv,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}',
									
                                    },
                                },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }],
                    // },
@@ -1061,14 +1142,62 @@
            ],
        }

        const compareOption = {
					
                    tooltip: {
                        trigger: 'axis',
					
                    },
                    grid: {
                        top: '6%',
                        left: '10%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: 'value',
					
                    },
                    yAxis: {
                        axisLine: {
                            show:false,
                        },
                        axisTick: {
                            show: false,
                        },
                        type: 'category',
                        data: ['1#', '2#', '3#', '4#', '5#', '6#']
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            barWidth: 10,
                            data: [190, 89, 34, 70, 44, 30],
                            label: {
                                show: true,
                                position: 'right',
                                valueAnimation: true,
								
                                color: '#fff' 
                            }
                        },
                    ]
                }
		

        option && moisChart.setOption(option)
        waterOption && waterChart.setOption(waterOption)
        bellowsOption && bellowsTempChart.setOption(bellowsOption)
        fanFreqOption && fanFreqChart.setOption(fanFreqOption)
        //fanFreqOption && fanFreqChart.setOption(fanFreqOption)

        progressBarOption && progressBarChart.setOption(progressBarOption)
        efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
        compareOption && compareChart.setOption(compareOption)
    }


    function queryEqp() {
        queryById({ id: router.currentRoute.value.params.id }).then((res) => {
@@ -1079,13 +1208,39 @@
        })
    }


    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)
				
            },5000)
        },13000)
    }

    function queryRealTime() {
        let tenantId = userStore.getTenant
        let eqpCode = eqp.value.code
        let queryRealTimeUrl = '/dry/real/getRealTimeData'
        defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
            //console.log(`output->res`, res)
			
            if (res && res.trendVo) {
                console.log(`output->re11s`, res)
                //    res.tempValue = [res.windTemp, 100]
                //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
                /**水滴图含水量 */
@@ -1117,19 +1272,19 @@
                    })
                }
                /**风机频率环形图 */
                if (fanFreqChart) {
                    fanFreqChart.setOption({
                        series: [
                            {
                                data: [
                                    {
                                        value: res.trendVo.fanFrequency,
                                    },
                                ],
                            },
                        ],
                    })
                }
                // if (fanFreqChart) {
                //     fanFreqChart.setOption({
                //         series: [
                //             {
                //                 data: [
                //                     {
                //                         value: res.trendVo.fanFrequency,
                //                     },
                //                 ],
                //             },
                //         ],
                //     })
                // }
                /**干燥进度、走势与阶段效率和阶段消耗 */
                if (res && res.detailList) {
                    var progressSeries = []
@@ -1140,12 +1295,14 @@
                    var beforeWeight = 0
                    res.moisList = []

                    beforeWeight = res.originWeight
                    res.detailList.forEach((item) => {
                        console.log(`output->item`, item)
                        //console.log(`output->item`, item)
                        res.moisList.push([item.totalTime, item.moisture])
                        console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                        //console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                        var curDryTime = item.totalTime - totalTime

                        //console.log("curDryTime:", curDryTime)
                        //console.log("bw:",beforeWeight,"iw:", item.weight);
                        if (curDryTime > 0) {
                            progressSeries.push({
                                name: item.moisture,
@@ -1184,7 +1341,7 @@
                                ],
                            })
                        }

                        res.totalRemain = res.remain - (res.dryTime - totalTime)>0?res.remain - (res.dryTime - totalTime):0
                        progressSeries.push({
                            name: '剩余',
                            type: 'bar',
@@ -1208,7 +1365,7 @@

                    /**干燥进度 */
                    if (progressBarChart) {
                        console.log(`output->progressSeries`, progressSeries)
                        //console.log(`output->progressSeries`, progressSeries)
                        progressBarChart.setOption(
                            {
                                xAxis: {
@@ -1223,12 +1380,39 @@
                    res.totalTime = totalTime + res.remain
                    /**干燥效率、消耗 */
                    if (efficiencyLineChart) {
                        console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                        //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                        efficiencyLineChart.setOption({
                            xAxis: {
                                max: totalTime + res.remain,
                            },
                            series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                            yAxis: {
                                max: function (value) {
									
                                    console.log("max::",value);
                                        if (value.max < standard.value.xiaolv + 3) {
                                            return standard.value.xiaolv + 3
                                        } else {
                                            return value.max
                                        }
                                    },
								
								
								
                            },
                            series: [{ data: ganZaoXiaoLv,
                                markLine: {
                                symbol: 'none',
                                    data: [
                                        {
                                            name: '额定',
                                            yAxis: standard.value.xiaolv,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}',
										
                                    },
                            } }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                        })
                    }

@@ -1276,7 +1460,12 @@
                }

                /**效率对比图 */
                res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
                if( (res.originWeight - res.yield) <= 0) {
                    res.xiaolv =  standard.value.xiaolv + 6
                } else {
                    res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
                }
				
                if (res.xiaolv > standard.value.xiaolv) {
                    res.xlgood = true
                    res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
@@ -1285,13 +1474,130 @@
                    res.xlbad = true
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                } else {
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                }

                /**gif动图 */
                res.gif = 'refeng2'

				
                /** è’¸æ±½æ¶ˆè€— */
                if( (res.originWeight - res.yield) <= 0) {
                    res.zhengqi = standard.value.zhengqi -3
                } else {
                    res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1)
                }
                console.log('zhengqi:', res.zhengqi);
                if (res.zhengqi > standard.value.zhengqi) {
                    res.zqbad = true
                    res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%'
                    res.zqrHeight = '100%'
                } else if (res.zhengqi < standard.value.zqMin) {
                    res.zqgood = true
                    res.zqsHeight = '100%'
                    res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
                } else {
                    res.zqsHeight = '100%'
                    res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%'
                }

				
				
                /** ç”µèƒ½æ¶ˆè€— */
                if( (res.originWeight - res.yield) <= 0) {
                    res.dian = standard.value.dian -1.5
                } else {
                    res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1)
                }
				
                if (res.dian > standard.value.dian) {
                    res.dnbad = true
                    res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
                    res.dnrHeight = '100%'
                } else if (res.dian < standard.value.dMin) {
					
                    res.dngood = true
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                } else {
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                }

                /**状态/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) {
                    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 = '干燥完成'
                }
                }
				

                if (compareChart) {
                    compareChart.setOption({
                        yAxis: {
                            data: res.compEqpNum
                        },
                        series: {
                            data: res.compEqpEffic
                        }
                    })
                }

                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

                res.errorMsg = '有一个故障，请检查。'
            } else {
                res = {
                    mois: [],
                    gif: 'tmrefeng2',
                    herbImage: 'yaocai1.png'
                }
            }
            console.log(`output->res`, res)
@@ -1316,14 +1622,15 @@
        height: 100%;
    }
    .eqpRow {
        background: white;
    }
    .eqpImage {
        height: 860px;
        width: 1800px;
        background-image: url(/src/assets/images/dry/ganzaoji-x.png);
        background-repeat: no-repeat;
         /* background-image: url(/src/assets/images/dry/bg.png);
        background-repeat: no-repeat; */

        background-position: 160px 280px;
        /*background-position: 160px 280px; */
        /* background-color: red; */
        padding: 10px;
        display: flex;
@@ -1333,7 +1640,10 @@

    .leftEqp {
        height: 840px;
        width: 780px;
        width: 1080px;
        display: flex;
        flex-wrap: wrap;
		
        /* background-color: white;
        background-image: url(/src/assets/images/dry/shebei1.png);
        background-repeat: no-repeat;
@@ -1344,25 +1654,35 @@

    .leftTop {
        height: 600px;
        width: 780px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        background-color: white;
        /* background-color: white; */
        background-image: url(/src/assets/images/dry/shebei1.png);
        background-repeat: no-repeat;
        background-size: 110%;
        border-radius: 10px;
        flex-wrap: wrap;
        background-position: -78px 119px;

    }
    .leftTop0 {
        height: 600px;
        width: 780px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    .leftMid {
        padding-top: 10px;
		
        width: 780px;
        height: 230px;
        /* border: 1px solid; */
        margin-top: 10px;
        border-radius: 10px;
        background: white;
        /* background: white; */
    }
    .mainInfo {
        line-height: 33px;
@@ -1415,6 +1735,7 @@
        align-items: center;
        font-size: 30px;
        color: #727272;
		
    }
    .leftTop2 {
        width: 250px;
@@ -1447,7 +1768,7 @@
        flex-wrap: wrap;
        align-content: flex-start;
        height: 850px;
        width: 900px;
        width: 600px;
    }

    .rightTop {
@@ -1463,7 +1784,7 @@
    .infoChart {
        width: 290px;
        height: 230px;
        background: white;
        /* background: white; */
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 10px;
@@ -1507,14 +1828,15 @@
        background-color: #1595ea;
    }
    .bad {
        background-color: #fdcb6e;
        background-color: #ed6f6f;
    }
    .rightLabel {
        width: 120px;
        width: 110px;
        display: flex;
        justify-content: space-between;
    }
    .label {
        color: white;
        text-align: center;
        width: 50px;
        border-radius: 4px;
@@ -1523,7 +1845,7 @@
        line-height: 21px;
    }
    .good {
        background-color: #75f94d;
        background-color: #2ecf54;
    }

    .mainInfo3 {
@@ -1538,15 +1860,15 @@
    .curEqp {
        width: 290px;
        height: 120px;
        background: white;
        border-radius: 10px;
        /* background: white;
        border-radius: 10px; */
    }
    .curHerb {
        margin-top: 10px;
        width: 290px;
        height: 230px;
        background: white;
        border-radius: 10px;
        /* background: white;
        border-radius: 10px; */
        background-image: url(/src/assets/images/dry/yaocai.jpg);
        background-repeat: no-repeat;
        background-size: 110px 90px;
@@ -1555,15 +1877,15 @@
    .tempMoisChart {
        width: 590px;
        height: 360px;
        background: white;
        margin-left: 10px;
        /* background: white; */
		
        padding: 20px;
        border-radius: 10px;
    }
    .topLeft {
        margin: 20px 40px 60px 20px;
        padding: 15px;
        background: white;
        /* background: white; */
        border-radius: 10px;
        height: 325px;
        width: 440px;
@@ -1575,7 +1897,7 @@
    }
    .topMid {
        margin: 20px 20px 60px 40px;
        background: white;
        /* background: white; */
        border-radius: 10px;
        background-image: url(/src/assets/images/dry/fanliao.gif);
        background-repeat: no-repeat;
@@ -1587,7 +1909,7 @@
    }
    .topRight {
        margin: 20px 20px 60px 20px;
        background: white;
        /* background: white; */
        border-radius: 10px;
        width: 700px;
        padding: 20px;
@@ -1656,6 +1978,7 @@

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

 src/views/dry/monitor/Eqp1.vue

 src/views/dry/monitor/Eqp2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1788 @@
<template>
    <div class="eqpBox">
        <div class="eqpRow">
            <div class="eqpImage">
                <div class="leftEqp">
                    <div class="leftTop">
                        <div class="leftTop1">
                            <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                            <div>
                                <div class="mainInfo">{{ realData?.remain | 0 }}min</div>
                                <div class="subhead">剩余时间</div>
                            </div>
                        </div>
                        <div class="leftTop1">
                            <!-- <Icon icon="mdi:chart-finance" :size="50" />
                            <div>
                                <div class="mainInfo">98 %</div>
                                <div class="subhead">干燥效率</div>
                            </div> -->
                        </div>
                        <div class="leftTop3" :style="{ 'background-image': 'url(/src/assets/images/dry/' + realData?.gif + '.gif)' }"></div>
                        <div class="outDiv eqpStatus">
                            <div
                                style="
                                    font-size: 28px;
                                    margin-top: 60px;
                                    color: white;
                                    background-color: #1595ea;
                                    height: 60px;
                                    width: 180px;
                                    line-height: 60px;
                                    text-align: center;
                                    border-radius: 5px;
                                    font-weight: bold;
                                "
                            >
                                æ­£åœ¨å¹²ç‡¥
                            </div>
                            <!-- <div
                                class="eqpInfoText blingbling"
                                style="
                                    position: absolute;

                                    max-height: 130px;
                                    max-width: 360px;
                                    border-radius: 10px;
                                    background-color: #ce0000;
                                    color: white;
                                    padding: 10px;
                                "
                            >
                                <div class="outDiv">
                                    <div><Icon icon="bx:error" :size="30" /> </div>
                                    <div><span> æœ‰ä¸€ä¸ªæ•…障，请检查机器。</span></div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <div class="leftMid">
                        <div id="efficiencyLine" style="width: 780px; height: 150px"></div>
                        <div style="height: 0px; display: flex; width: 780px; padding: 0 60px; justify-content: space-between">
                            <div style="width: 100px; height: 20px">0 min</div>
                            <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
                        </div>
                        <div id="progressBar" style="width: 780px; height: 80px"></div>
                    </div>
                    <!-- <div class="outDiv">
                        <div style="height: 100px; width: 400px">
                            <Progress
                                :stroke-color="{
                                    from: '#108ee9',
                                    to: '#87d068',
                                }"
                                :percent="realData?.percent"
                                status="active"
                                :show-info="false"
                            />
                            <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
                                <span>干燥 52 Min</span>
                                <span>预计 120 Min</span>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="rightInfo">
                    <div class="rightTop">
                        <div class="herbInfo">
                            <div class="curEqp">
                                <div class="eqpName">
                                    <div class="mainInfo" style="font-size: 26px">{{ eqp.name }}</div>
                                    <div class="subhead">{{ eqp.type }}</div>
                                    <!-- è®¾å¤‡ï¼š{{ eqp.name }}</div>
                                <div class="eqpName">型号：{{ eqp.type }}</div> -->
                                </div>
                            </div>
                            <div class="curHerb">
                                <div class="eqpName" style="margin-left: 100px">
                                    <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
                                    <div class="subhead">干燥配方</div>
                                </div>
                                <div class="formula">
                                    <div class="formulaItem">
                                        <Icon icon="icon-park-twotone:box" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.feed }}筐</div>
                                            <div class="subhead2">投料量</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon icon="bx:wind" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.windTemp }}°C</div>
                                            <div class="subhead2">热风</div>
                                        </div>
                                    </div>
                                    <div class="formulaItem">
                                        <Icon icon="tabler:target-arrow" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.target }}%</div>
                                            <div class="subhead2">目标</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="eqpName">{{ realData?.herbName }}</div>
                                <div class="eqpName">{{ realData?.feed }} ç­</div> -->
                            </div>
                        </div>
                        <div class="tempMoisChart">
                            <div :id="'moisChart'" style="width: 550px; height: 320px"></div>
                        </div>
                    </div>
                    <div class="rightTwo">
                        <div class="infoChart">
                            <div class="chartTittle">含水率</div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.target }}</span
                                                >%
                                            </div>
                                            <div class="subhead2">目标含水率</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3"
                                                ><span>{{ realData?.initial }}</span
                                                >%</div
                                            >
                                            <div class="subhead2">来料含水率</div>
                                        </div>
                                    </div>
                                </div>
                                <div id="moisture" style="width: 170px; height: 133px"></div>
                            </div>
                            <div class="subhead2" style="margin-top: -37px; padding-left: 172px">实时含水率</div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle">风箱温度</div>
                            <div class="outDiv">
                                <div id="bellowsTemp" style="width: 220px; height: 200px">
                                    <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
                                </div>
                            </div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle">风机频率</div>
                            <div class="outDiv" style="padding-top: 10px">
                                <div id="fanFreq" style="width: 220px; height: 200px"></div>
                            </div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle">
                                å¹²ç‡¥æ•ˆçŽ‡(kg/h)
                                <div class="rightLabel">
                                    <div class="label good">&gt;{{ standard.xiaolv }} ä¼˜ </div>
                                    <div class="label bad">&lt;{{ standard.xlMin }} å·®</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 50%">
                                        <div class="centerText">
                                            <div class="mainInfo3"
                                                ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span
                                                >kg
                                            </div>
                                            <div class="subhead2">水分蒸发</div>
                                        </div>
                                    </div>
                                    <div class="center" style="height: 50%">
                                        <div>
                                            <div class="mainInfo3">{{ realData?.dryTime | 0 }}min</div>
                                            <div class="subhead2">干燥用时</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{ standard.xiaolv }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            é¢å®š
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{ realData?.xiaolv | 0 }}</div>
                                        <div class="barBack">
                                            <div
                                                class="barDiv"
                                                :class="{ good: realData?.xlgood, bad: realData?.xlbad }"
                                                :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
                                            >
                                            </div>
                                        </div>
                                        <div style="line-height: 18px">
                                            å®žæ—¶
                                            <br />
                                            æ•ˆçŽ‡
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle"
                                >蒸汽消耗(m³/kg)
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.zhengqi }} å·®</div>
                                    <div class="label good">&lt;{{ standard.zqMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.steam}}</span>m³ </div>
                                            <div class="subhead2">蒸汽用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.zhengqi}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.zhengqi | 0 }}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }"
                                                :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div>
                                        </div>
                                        <div style="line-height: 18px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="infoChart">
                            <div class="chartTittle">
                                <div> ç”µèƒ½æ¶ˆè€—(kw/h/kg)</div>
                                <div class="rightLabel">
                                    <div class="label bad">&gt;{{ standard.dian }} å·®</div>
                                    <div class="label good">&lt;{{ standard.dMin }} ä¼˜</div>
                                </div>
                            </div>
                            <div class="outDiv" style="padding-top: 20px">
                                <div class="leftData">
                                    <div class="center" style="height: 100%">
                                        <div class="centerText">
                                            <div class="mainInfo3"><span>{{realData?.watt}}</span>kw/h </div>
                                            <div class="subhead2">电能用量</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightChart center">
                                    <div class="center compareBar">
                                        <div class="barTop">{{standard.dian}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            é¢å®š
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                    <div class="center compareBar">
                                        <div class="barTop">{{realData?.dian | 0}}</div>
                                        <div class="barBack">
                                            <div class="barDiv" :class="{ good: realData?.dngood, bad: realData?.dnbad }"
                                                :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"></div>
                                        </div>
                                        <div style="line-height: 18px">
                                            å®žæ—¶
                                            <br />
                                            æ¶ˆè€—
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    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 } from '../api/DryEquipment.api'
    import { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { useUserStore } from '/@/store/modules/user'
    const Timer = ref()
    const marks = ref<Record<number, any>>({
        0: '0°C',
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: '',
        8: '',
        9: '',
        10: '',
        11: '',
        12: '',
        13: '',
        14: '',
        15: '',
        16: '',
        17: '',
        18: '',
        19: '',
        20: '',
        21: '',
        22: '',
        23: '',
        24: '',
        25: '25°C',
        26: '',
        27: '',
        28: '',
        29: '',
        30: '',
        31: '',
        32: '',
        33: '',
        34: '',
        35: '',
        36: '',
        37: '',
        38: '',
        39: '',
        40: '',
        41: '',
        42: '',
        43: '',
        44: '',
        45: '',
        46: '',
        47: '',
        48: '',
        49: '',
        50: '50°C',
        51: '',
        52: '',
        53: '',
        54: '',
        55: '',
        56: '',
        57: '',
        58: '',
        59: '',
        60: '',
        61: '',
        62: '',
        63: '',
        64: '',
        65: '',
        66: '',
        67: '',
        68: '',
        69: '',
        70: '',
        71: '',
        72: '',
        73: '',
        74: '',
        75: '75°C',
        76: '',
        77: '',
        78: '',
        79: '',
        80: '',
        81: '',
        82: '',
        83: '',
        84: '',
        85: '',
        86: '',
        87: '',
        88: '',
        89: '',
        90: '',
        91: '',
        92: '',
        93: '',
        94: '',
        95: '',
        96: '',
        97: '',
        98: '',
        99: '',
        100: '100°C',
    })
    const eqp = ref({} as dryEquipment)
    const userStore = useUserStore()
    const realData = ref({})
    const standard = ref({
        xiaolv: 220,
        xlMin: 200,
        zhengqi: 50,
        zqMin: 45,
        dian: 8,
        dMin: 7.5,
    })
    //realData.value.tempValue = [0, 100]
    realData.value.mois = [0.5, 0.35, 0.2]
    var moisChart: echarts.ECharts
    var waterChart: echarts.ECharts

    var bellowsTempChart: echarts.ECharts
    var fanFreqChart: echarts.ECharts
    var progressBarChart: echarts.ECharts
    var efficiencyLineChart: echarts.ECharts

    function initCharts() {
        let domId = 'moisChart'
        let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
        let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
        let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
        let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
        let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
        let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
        // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
        moisChart = echarts.init(chartDom)
        waterChart = echarts.init(waterDom)
        bellowsTempChart = echarts.init(bellowsTempDom)
        fanFreqChart = echarts.init(fanFreqDom)
        progressBarChart = echarts.init(progressBarDom)
        efficiencyLineChart = echarts.init(efficiencyLineDom)

        const option = {
            color: ['#2C4D90', '#CE0000'],
            title: {
                text: '含水率温度趋势',
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: 50,
                right: 50,
                top: 50,
                bottom: 40,
            },
            legend: {
                right: 20,
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none',
            //         },
            //         dataView: { readOnly: false },
            //         magicType: { type: ['line', 'bar'] },
            //         restore: {},
            //         saveAsImage: {},
            //     },
            // },
            xAxis: {
                type: 'value',
                //boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                min: 0,
                max: function (value) {
                    if (value.max < 100) {
                        return 100
                    } else {
                        return value.max
                    }
                },
            },
            yAxis: {
                type: 'value',
                boundaryGap: ['10%', '10%'],
                // min: 0,
                // max: function (value) {
                //     if (value.max < 100) {
                //         return 100
                //     } else {
                //         return value.max
                //     }
                // },
            },
            // yAxis: {
            //     type: 'value',
            //     axisLabel: {
            //         formatter: '{value} Â°C',
            //     },
            // },
            series: [
                {
                    name: '含水率',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 1],
                        [2, 2],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }],
                    },
                },
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    data: [
                        [1, 10],
                        [2, 20],
                    ],
                    lineStyle: {
                        width: 1,
                    },
                    // markLine: {
                    //     data: [
                    //         { type: 'average', name: 'Avg' },
                    //         [
                    //             {
                    //                 symbol: 'none',
                    //                 x: '90%',
                    //                 yAxis: 'max',
                    //             },
                    //             {
                    //                 symbol: 'circle',
                    //                 label: {
                    //                     position: 'start',
                    //                     formatter: 'Max',
                    //                 },
                    //                 type: 'max',
                    //                 name: '最高点',
                    //             },
                    //         ],
                    //     ],
                    // },
                },
            ],
        }
        const waterOption = {
            series: [
                {
                    type: 'liquidFill',
                    radius: '100%',
                    //waveAnimation: false,
                    amplitude: 3,
                    animationDuration: 5,
                    //animationDurationUpdate: 0,
                    data: [0.56,0.44,0.32],
                    shape:
                        'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
                    outline: {
                        show: false,
                    },
                    label: {
                        // formatter: function () {
                        //     //console.log(`output->params`,params,mois.value)

                        //     return (
                        //         '' +
                        //         // +'初始'+(mois.value[0]*100).toFixed(2) + '%\n\n\n'
                        //         (mois.value[1] * 100).toFixed(2) +
                        //         '%'
                        //         // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
                        //     )
                        // },
                        fontSize: 20,
                        //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
                    },
                },
            ],
        }

        const bellowsOption = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    splitNumber: 8,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 10,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 10,
                        },
                    },
                    axisTick: {
                        distance: -15,
                        splitNumber: 5,
                        length: 3,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        distance: -18,
                        length: 6,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -13,
                        color: '#999',
                        fontSize: 9,
                    },
                    anchor: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '0%'],
                        fontSize: 20,
                        fontWeight: 'bolder',
                        formatter: '{value}°C',
                        color: 'inherit',
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 215,
                    endAngle: -35,
                    min: 0,
                    max: 80,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 3,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
            ],
        }

        const fanFreqOption = {
            series: [
                {
                    type: 'gauge',
                    progress: {
                        show: true,
                        width: 9,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 9,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        distance: 3,
                        length: 4,
                        lineStyle: {
                            width: 1,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: 15,
                        color: '#999',
                        fontSize: 10,
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 10,
                        itemStyle: {
                            borderWidth: 3,
                        },
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 20,
                        offsetCenter: [0, '70%'],
                        formatter: '{value}Hz',
                    },
                    data: [
                        {
                            value: 56,
                        },
                    ],
                },
            ],
        }
        // const weightOption = {
        //     //         title: {
        //     //   text: 'Referer of a Website',
        //     //   subtext: 'Fake Data',
        //     //   left: 'center'
        //     // },
        //     color: ['#1595EA', '#2C4D90', '#FF7F7F'],
        //     tooltip: {
        //         trigger: 'item',
        //     },
        //     radius: [0, '85%'],
        //     // grid: {
        //     //     top: 20,
        //     //     left: 20,
        //     //     right: 20,
        //     //     bottom: 20,
        //     // },
        //     // legend: {
        //     //     orient: 'vertical',
        //     //     left: 'left',
        //     // },
        //     series: [
        //         {
        //             name: '重量数据',
        //             type: 'pie',
        //             radius: '50%',
        //             data: [
        //                 { value: 1048, name: '剩余重量' },
        //                 { value: 735, name: '烘去重量' },
        //             ],
        //             label: {
        //                 show: false,
        //             },
        //             labelLine: {
        //                 show: false,
        //             },
        //             emphasis: {
        //                 itemStyle: {
        //                     shadowBlur: 10,
        //                     shadowOffsetX: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)',
        //                 },
        //             },
        //         },
        //     ],
        // }

        const progressBarOption = {
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         // Use axis to trigger tooltip
            //         type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            //     },
            // },
            // color: [
            //     '#0653F6',
            //     // '#1B61E7',
            //     '#3673D5',
            //     // '#4A80C8',
            //     '#608FB8',
            //     // '#719BAD',
            //     '#82A6A1',
            //     // '#8DAD9A',
            //     '#9CB790',
            //     // '#A7BE88',
            //     '#B3C681',
            //     '#CAD671',
            //     '#DBE165',
            // ],
            animation: false, // å…³é—­åŠ¨ç”»
            color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8'],
            grid: {
                top: '12%',
                left: '20',
                right: '55',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                min: 0,
                max: 150,
                show: false,
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'category',
                data: ['时间'],
            },
            series: [
                // {
                //     name: '第一阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     barWidth: 26,
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: '第二阶段',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [30],
                // },
                // {
                //     name: 'Affiliate Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [20],
                // },
                // {
                //     name: 'Video Ad',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [15],
                // },
                // {
                //     name: 'Search Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [10],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [5],
                // },
                // {
                //     name: 'df Engine',
                //     type: 'bar',
                //     stack: 'total',
                //     label: {
                //         show: true,
                //     },
                //     emphasis: {
                //         focus: 'series',
                //     },
                //     data: [
                //         {
                //             value: 35,
                //             itemStyle: {
                //                 color: '#c0c0c0',
                //             },
                //         },
                //     ],
                // },
            ],
        }

        const efficiencyLineOption = {
            title: {},
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: '20%',
                left: '17',
                right: '57',
                bottom: '0%',
                containLabel: true,
            },
            legend: {},
            xAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                min: 0,
                max: 150,
                // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
            },
            yAxis: {
                show: false,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                type: 'value',
                axisLabel: {
                    formatter: '{value} Â°C',
                },
            },
            series: [
                {
                    name: '干燥效率',
                    type: 'line',
                    lineStyle: {
                        width: 1,
                    },
                    // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
                    data: [
                        [0, 1],
                        [15, 10],
                        [45, 11],
                        [70, 6],
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' },
                        ],
                    },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }],
                    // },
                },
            ],
        }

        option && moisChart.setOption(option)
        waterOption && waterChart.setOption(waterOption)
        bellowsOption && bellowsTempChart.setOption(bellowsOption)
        fanFreqOption && fanFreqChart.setOption(fanFreqOption)

        progressBarOption && progressBarChart.setOption(progressBarOption)
        efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
    }

    function queryEqp() {
        queryById({ id: router.currentRoute.value.params.id }).then((res) => {
            // console.log(`output->res`, res)
            eqp.value = res
            queryRealTime()
            setTimeout(initCharts, 500)
        })
    }

    function queryRealTime() {
        let tenantId = userStore.getTenant
        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)
                //    res.tempValue = [res.windTemp, 100]
                //res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
                /**水滴图含水量 */
                res.mois = [
                    (res.trendVo.moisture / 100).toFixed(2),
                    (res.trendVo.moisture / 100 / 1.5).toFixed(2),
                    (res.trendVo.moisture / 100 / 3).toFixed(2),
                ]
                if (waterChart) {
                    waterChart.setOption({
                        series: [
                            {
                                data: res.mois,
                                label: {
                                    formatter: function () {
                                        return res.trendVo.moisture + '%'
                                    },
                                    fontSize: 20,
                                },
                            },
                        ],
                    })
                }

                /**温度环形图 */
                if (bellowsTempChart) {
                    bellowsTempChart.setOption({
                        series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }],
                    })
                }
                /**风机频率环形图 */
                if (fanFreqChart) {
                    fanFreqChart.setOption({
                        series: [
                            {
                                data: [
                                    {
                                        value: res.trendVo.fanFrequency,
                                    },
                                ],
                            },
                        ],
                    })
                }
                /**干燥进度、走势与阶段效率和阶段消耗 */
                if (res && res.detailList) {
                    var progressSeries = []
                    var ganZaoXiaoLv = []
                    var zhengQiXiaoHao = []
                    var dianNengXiaoHao = []
                    var totalTime = 0
                    var beforeWeight = 0
                    res.moisList = []

                    res.detailList.forEach((item) => {
                        console.log(`output->item`, item)
                        res.moisList.push([item.totalTime, item.moisture])
                        console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
                        var curDryTime = item.totalTime - totalTime

                        if (curDryTime > 0) {
                            progressSeries.push({
                                name: item.moisture,
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [item.totalTime - totalTime],
                            })
                            ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])

                            totalTime = item.totalTime
                        }
                        beforeWeight = item.weight
                    })
                    if (res.remain) {
                        if (res.dryTime - totalTime > 0) {
                            progressSeries.push({
                                name: '当前',
                                type: 'bar',
                                stack: 'total',
                                label: {
                                    show: true,
                                },
                                emphasis: {
                                    focus: 'series',
                                },
                                data: [
                                    {
                                        value: res.dryTime - totalTime,
                                    },
                                ],
                            })
                        }

                        progressSeries.push({
                            name: '剩余',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true,
                            },
                            emphasis: {
                                focus: 'series',
                            },
                            data: [
                                {
                                    value: res.remain - (res.dryTime - totalTime),
                                    itemStyle: {
                                        color: '#c0c0c0',
                                    },
                                },
                            ],
                        })
                    }

                    /**干燥进度 */
                    if (progressBarChart) {
                        console.log(`output->progressSeries`, progressSeries)
                        progressBarChart.setOption(
                            {
                                xAxis: {
                                    max: totalTime + res.remain,
                                },
                                series: progressSeries,
                            },
                            { replaceMerge: ['series'] }
                        )
                    }

                    res.totalTime = totalTime + res.remain
                    /**干燥效率、消耗 */
                    if (efficiencyLineChart) {
                        console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
                        efficiencyLineChart.setOption({
                            xAxis: {
                                max: totalTime + res.remain,
                            },
                            series: [{ data: ganZaoXiaoLv }, { data: zhengQiXiaoHao }, { data: dianNengXiaoHao }],
                        })
                    }

                    res.moisList.push([res.dryTime, res.trendVo.moisture])
                }

                /**温度趋势 */
                if (res && res.bellowsTemp) {
                    Array.from(Object.entries(res.bellowsTemp))
                    var arr = Object.keys(res.bellowsTemp)
                    var temArr = []
                    arr.forEach((item) => {
                        temArr.push([item * 1, res.bellowsTemp[item]])
                    })

                    //console.log(`output->arr` + JSON.stringify(temArr))
                    res.tempArr = temArr
                }

                /**干燥过程趋势 */
                if (moisChart) {
                    //console.log(`output->更新chart`)
                    moisChart.setOption({
                        series: [
                            {
                                data: res.moisList,
                                markLine: {
                                    symbol: 'none',
                                    data: [
                                        {
                                            name: '目标',
                                            yAxis: res.target,
                                        },
                                    ],
                                    label: {
                                        formatter: '{b}\n{c}%',
                                    },
                                },
                            },
                            {
                                data: res.tempArr,
                            },
                        ],
                    })
                }

                /**效率对比图 */
                res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2)
                if (res.xiaolv > standard.value.xiaolv) {
                    res.xlgood = true
                    res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%'
                    res.xlrHeight = '100%'
                } else if (res.xiaolv < standard.value.xlMin) {
                    res.xlbad = true
                    res.xlsHeight = '100%'
                    res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%'
                }

				
                /** ç”µèƒ½æ¶ˆè€— */
                res.dian = (res.watt / (res.originWeight - res.yield))
                if (res.dian > standard.value.dian) {
                    res.dngood = true
                    res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%'
                    res.dnrHeight = '100%'
                } else if (res.dian < standard.value.dMin) {
                    res.dnbad = true
                    res.dnsHeight = '100%'
                    res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%'
                }

                /**gif动图 */
                res.gif = 'refeng2'
            } else {
                res = {
                    mois: [],
                }
            }
            console.log(`output->res`, res)
            realData.value = res
        })
    }

    queryEqp()
    // DOM挂载完成后渲染图表
    onMounted(() => {
        Timer.value = setInterval(queryRealTime, 3000)
    })

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

<style scoped>
    .eqpBox {
        height: 100%;
    }
    .eqpRow {
    }
    .eqpImage {
        height: 860px;
        width: 1800px;
        background-image: url(/src/assets/images/dry/ganzaoji-x.png);
        background-repeat: no-repeat;

        background-position: 160px 280px;
        /* background-color: red; */
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .leftEqp {
        height: 840px;
        width: 780px;
        /* 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: 600px;
        display: flex;
        justify-content: center;
        align-content: flex-start;
        background-color: white;
        background-image: url(/src/assets/images/dry/shebei1.png);
        background-repeat: no-repeat;
        background-size: 110%;
        border-radius: 10px;
        flex-wrap: wrap;
        background-position: -78px 119px;
    }
    .leftMid {
        padding-top: 10px;
        width: 780px;
        height: 230px;
        /* border: 1px solid; */
        margin-top: 10px;
        border-radius: 10px;
        background: white;
    }
    .mainInfo {
        line-height: 33px;
        padding-left: 10px;
        font-size: 30px;
    }
    .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: 180px;
        width: 120px;
    }
    .rightChart {
        height: 180px;
        width: 170px;
        margin-top: -30px;
    }
    .leftTop1 {
        width: 220px;
        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: 780px;
        height: 300px;

        padding: 100px;
    }
    .rightInfo {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 850px;
        width: 900px;
    }

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

    .infoChart {
        width: 290px;
        height: 230px;
        background: white;
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 10px;
    }
    .chartTittle {
        width: 290px;
        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: #ed6f6f;
    }
    .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: #2ecf54;
    }

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

    .curEqp {
        width: 290px;
        height: 120px;
        background: white;
        border-radius: 10px;
    }
    .curHerb {
        margin-top: 10px;
        width: 290px;
        height: 230px;
        background: white;
        border-radius: 10px;
        background-image: url(/src/assets/images/dry/yaocai.jpg);
        background-repeat: no-repeat;
        background-size: 110px 90px;
        background-position: 10px 10px;
    }
    .tempMoisChart {
        width: 590px;
        height: 360px;
        background: white;
        margin-left: 10px;
        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: 290px;
        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 1.5s infinite ease-in-out;
        animation: scaleout 1.5s 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;
        }
    }
</style>

 src/views/dry/monitor/WorkShop.vue

@@ -12,7 +12,7 @@
                                    <span class="info-text">{{ realTime.get(item.id)?.dryTime | 0 }}</span> åˆ†é’Ÿ
                                </div>

                                <div style="padding: 0 10px; width: 200px; height: 40px">
                                <div style="padding: 0 10px; width: 195px; height: 40px">
                                    <div style="padding-top: 10px">
                                        <Progress
                                            :stroke-color="{
@@ -21,6 +21,7 @@
                                            }"
                                            :percent="realTime.get(item.id)?.percent"
                                            status="active"
                                            trailColor="#2b2b2b2b"
                                            :show-info="false"
                                        />
                                    </div>
@@ -54,18 +55,18 @@
                        </div>

                        <div class="eqpStatus">
                            <div> <span class="info-text">翻料</span> </div>
                            <div> <span class="info-text">正在干燥</span> </div>
                        </div>
                    </div>
                    <!-- <div :id="'chartDom' + item.id" class="chart"> </div> -->
                    <div class="info">
                        <div class="leftInfo">
                            <div style="width: 120px">
                                <div style="height: 1px; font-size: 10px; text-align: center; margin-top: 10px; margin-bottom: -10px"
                                <div style="height: 1px; font-size: 14px; text-align: center; margin-top: 10px; margin-bottom: -10px"
                                    >初始：{{ realTime.get(item.id)?.initial }}%</div
                                >
                                <div :id="'moisture' + item.id" style="width: 110px; height: 187px"></div>
                                <div style="height: 1px; font-size: 10px; text-align: center; margin-top: -25px">目标：{{ realTime.get(item.id)?.target }}%</div>
                                <div style="height: 1px; font-size: 14px; text-align: center; margin-top: -25px">目标：{{ realTime.get(item.id)?.target }}%</div>
                                <div style="width: 110px; text-align: center; margin-top: 23px">含水率</div>
                            </div>
                            <!-- <div class="herbName"> å½“å½’ </div> -->
@@ -85,7 +86,7 @@
                                    vertical
                                />
                                <div
                                    >热风：<span class="info-text">{{ realTime.get(item.id)?.windTemp | 0 }}</span> Â°C</div
                                class="info-text">热风：<span >{{ realTime.get(item.id)?.windTemp | 0 }}</span> Â°C</div
                                >
                            </div>
                        </div>
@@ -356,7 +357,7 @@
                                    // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
                                )
                            },
                            fontSize: 10,
                            fontSize: 14,
                            //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
                        },
                    },
@@ -387,7 +388,7 @@
            console.log(`output->res`, res)
            if (res && res.trendVo) {
                res.tempValue = [res.windTemp, 100]
                res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
                res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
                res.mois = [
                    (res.trendVo.moisture / 100).toFixed(2),
                    (res.trendVo.moisture / 100 / 1.5).toFixed(2),
@@ -401,7 +402,7 @@
                                formatter: function () {
                                    return res.trendVo.moisture + '%'
                                },
                                fontSize: 10,
                                fontSize: 14,
                                //position: ['50%',(100- res.trendVo.moisture)+ '%'],
                            },
                        },
@@ -449,12 +450,13 @@

    .eqp-content {
        height: 100%;
        background-color: white;
        background-image: url('../../../assets/images/dry/ganzaoji-x.png');
        background-repeat: no-repeat;
        background-size: 60% 60%;
        background-position: 105px 150px;
        border-radius: 8px;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 23px #72727278;
    background-image: url(/src/assets/images/dry/ganzaoji-x.png);
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: 105px 127px;
    border-radius: 8px;
    }

    .chart {
@@ -475,13 +477,13 @@
    }
    .eqpStatus {
        width: 170px;
        background-position: 0 0px;
        background-image: url('../../../assets/images/dry/refeng2.gif');
        background-size: 180px;
        background-repeat: no-repeat;
        display: inline-flex;
        flex-direction: column-reverse;
        padding: 15px;
    background-position: -21px 19px;
    background-image: url(/src/assets/images/dry/refeng2.gif);
    background-size: 196px;
    background-repeat: no-repeat;
    display: inline-flex;
    flex-direction: column-reverse;
    padding: 15px;
    }
    .info {
        display: flex;
@@ -498,7 +500,7 @@
    }

    .info-text {
        font-size: 16px;
        font-size: 14px;
        font-weight: bold;
    }
    .herbName {
@@ -514,13 +516,14 @@
        line-height: 35px;
    }
    .eqpName {
        margin-top: 68px;
        margin-left: 150px;
        width: 95px;
        font-weight: bold;
        text-align: center;
        background-color: white;
        height: 22px;
        margin-top: 190px;
    margin-left: 129px;
    width: 95px;
    /* font-size: 14px; */
    font-weight: bold;
    text-align: center;
    background-color: white;
    height: 22px;
    }

    .tempChart {

 src/views/sys/login/LoginSelect.vue

@@ -144,6 +144,7 @@
        }
        
        let multi_depart = loginResult.multi_depart;
        console.log("loginResult::",loginResult);
        //0:无部门 1:一个部门 2:多个部门
        if (multi_depart == 0) {
          notification.warn({
@@ -262,6 +263,7 @@
       * å¼¹çª—打开前处理
       */
      async function show(loginResult) {
        console.log("showLoginResult::", loginResult);
        if (loginResult) {
          username.value = userStore.username;
          await reset();

 src/views/system/loginmini/MiniLogin.vue

@@ -48,7 +48,7 @@
                                                    <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
                                                </a-form-item>
                                            </div>
                                            <div class="aui-inputClear">
                                            <!-- <div class="aui-inputClear">
                                                <i class="icon icon-code"></i>
                                                <a-form-item>
                                                    <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
@@ -57,7 +57,7 @@
                                                    <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
                                                    <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
                                                </div>
                                            </div>
                                            </div> -->
                                            <div class="aui-flex">
                                                <div class="aui-flex-box">
                                                    <div class="aui-choice">
@@ -226,15 +226,15 @@
    /**
     * èŽ·å–验证码
     */
    function handleChangeCheckCode() {
        formData.inputCode = ''
    // function handleChangeCheckCode() {
    //     formData.inputCode = ''

        randCodeData.checkKey = 1629428467008
        getCodeInfo(randCodeData.checkKey).then((res) => {
            randCodeData.randCodeImage = res
            randCodeData.requestCodeSuccess = true
        })
    }
    //     randCodeData.checkKey = 1629428467008
    //     getCodeInfo(randCodeData.checkKey).then((res) => {
    //         randCodeData.randCodeImage = res
    //         randCodeData.requestCodeSuccess = true
    //     })
    // }

    /**
     * åˆ‡æ¢ç™»å½•æ–¹å¼
@@ -288,7 +288,7 @@
                description: error.message || t('sys.login.networkExceptionMsg'),
                duration: 3,
            })
            handleChangeCheckCode()
            // handleChangeCheckCode()
        } finally {
            loginLoading.value = false
        }
@@ -393,7 +393,7 @@
        Object.assign(phoneFormData, { mobile: '', smscode: '' })
        type.value = 'login'
        activeIndex.value = 'accountLogin'
        handleChangeCheckCode()
        // handleChangeCheckCode()
    }

    /**
@@ -418,7 +418,7 @@

    onMounted(() => {
        //加载验证码
        handleChangeCheckCode()
        // handleChangeCheckCode()
    })
</script>