机台大屏优化，车间大屏换背景

baoshiwei

2023-11-09 ee34eecc99626bfdd47a605861722a110b82d14d

机台大屏优化，车间大屏换背景

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

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

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

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

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

 src/router/routes/index.ts

@@ -47,6 +47,14 @@
        title: t('big.screen.workshop'),
    },
}
export const BigScreenN: AppRouteRecordRaw = {
    path: '/bigScreenN',
    name: 'BigScreenN',
    component: () => import('/@/views/dry/bigScreen/BigWorkShop2.vue'),
    meta: {
        title: t('big.screen.workshopn'),
    },
}
export const BigEqp: AppRouteRecordRaw = {
    path: '/bigEqp',
    name: 'BigEqp',
@@ -82,4 +90,4 @@
}

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

 src/views/dry/bigScreen/BigEqp.vue

@@ -122,10 +122,11 @@
                                            margin-left: 100px;
                                            font-size: 22px;
                                            background: sandybrown;
                                            height: 60px;

                                            border-radius: 10px;
                                            line-height: 0;
                                            padding: 29px;
                                            line-height: 25px;
                                            max-width: 500px;
                                            padding: 15px;
                                            font-weight: bold;" >
                                        {{ realData?.warnMsg }}
                                    </div>
@@ -1912,7 +1913,7 @@

    .eqpStatus {
        width: 848px;
        height: 300px;
		
    }
    .rightInfo {
        display: flex;

 src/views/dry/bigScreen/BigWorkShop1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,668 @@
<template>
    <dv-full-screen-container>
        <div class="fbg">
            <div class="bgImage">
                <div class="head">
                    <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>

                    <div class="title">
                        <span>{{ title }}</span>

                        <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
                    </div>
                    <div style="width: 600px; height: 50px; display: flex; justify-content: end">
                        <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px"
                    /></div>
                </div>
                <div class="body">
                    <div class="humiture">
                        <div style="display: flex; width: 120px">
                            <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> 26 â„ƒ </div>
                        </div>
                        <div style="display: flex">
                            <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
                        </div>
                    </div>
                    <div class="feed">
                        <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between;">

                            <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            æ€»æŠ•æ–™é‡
                                        </div>
                                        <div class="stat_value">
                                            5066 
                                            <span class="font16">
                                            Kg
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                é¢„计产量
                                            </div>	
                                            <div>
                                                2321kg
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            ç”µé‡æ¶ˆè€—
                                        </div>
                                        <div class="stat_value">
                                            462 
                                            <span class="font16">
                                                Kwh
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                å¹³å‡ç”µè€—
                                            </div>	
                                            <div>
                                                13 Kwh/kg
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            è’¸æ±½æ¶ˆè€—
                                        </div>
                                        <div class="stat_value">
                                            683 
                                            <span class="font16">
                                                m³
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                å¹³å‡æ±½è€—
                                            </div>	
                                            <div>
                                                23 m³
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <!-- <div class="statistics putincolor">
                                    <div class="stat_label font16">预计产量</div>
                                    <div class="stat_value">3000</div>
									
                                    <div class="font16">
                                        <br/>
                                        Kg
                                    </div>
                                </div> -->
                            </div>
							
                            <div>
                            <!-- <div class="statistics electroncolor">
                                <div class="stat_label font16">电量消耗</div>
                                <div class="stat_value">500</div>
                                <div class="font16">
                                    <br/>
                                     Kwh
                                </div>
								 
                            </div>
                            <div class="statistics steamcolor">
                                <div class="stat_label font16">蒸汽消耗</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    m³
                                </div>
								 
                            </div>
						
                            <div class="statistics electroncolor">
                                <div class="stat_label font16">平均电耗</div>
                                <div class="stat_value">12</div>
                                <div class="font16">
                                    <br/>
                                    Kwh/kg
                                </div>
								 
                            </div>
                            <div class="statistics steamcolor">
                                <div class="stat_label font16">平均汽耗</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    m³/kg
                                </div>
								
                            </div> -->
                            </div>
						
							
                        </div>
                        <!-- <div style="padding-right: 100px;">
                            <div class="statistics">
                                <div class="stat_label font16">干料产量</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    kg
                                </div>
							
                            </div>
                        </div> -->
						
						
                    </div>
                    <div class="up">
                        <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
                            <div class="eqpInfoup" @click="gotoeqp(num - 1)">
                                <div class="eqp-title">
                                    <div class="herb_weight">
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
                                    </div>
                                    <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '预留' }}</div> -->
                                    <!-- <div class="process"> </div> -->
                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
                                            to: '#87d068',
                                        }"
                                        :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
                                        status="active"
                                        trailColor="#2b2b2b2b"
                                        :show-info="false"
                                    />
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                            {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} %
                                        </div>
                                        <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                             {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} â„ƒ
                                        </div>
                                        <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                            {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
                                        </div>
                                    </div>
                                </div>
                                <div class="eqp-info-up">
                                    <!-- <div class="herb">
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
										
                                    </div> -->
									
                                </div>
                                <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->

                                <div class="weight"><div class="herb">
                                    {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
                                </div></div>
                                <div class="water">
                                    <div class="eqp_num">{{ num }}</div>
                                    <!-- <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
                                        <div class="font">
                                            <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> %
                                        </div>
                                    </div>
                                    <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> â„ƒ
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="down">
                        <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
                            <div class="eqpInfodown" @click="gotoeqp(num + 3)">
                                <!-- <div class="eqp-info-down">
                                    <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                                </div>
                                <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> -->
                                <div class="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div>
                                <div class="water">
                                    <div class="eqp_num">{{ num + 4 }}</div>
                                    <!-- <div class="temp">
                                        <div style="line-height: 28px">
                                            <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
                                        </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> %
                                        </div>
                                    </div>
                                    <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> â„ƒ
                                        </div>
                                    </div> -->
                                </div>

                                <div style="height: 40px"></div>
                                <div class="eqp-title">
                                    <div class="herb_weight">
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
                                    </div>
									
                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
                                            to: '#87d068',
                                        }"
                                        :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
                                        status="active"
                                        trailColor="#2b2b2b2b"
                                        :show-info="false"
                                    />
                                    <!-- <div class="eqp-name">50%</div> -->
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                            {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} %
                                        </div>
                                        <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                             {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} â„ƒ
                                        </div>
                                        <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
                                             {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
                                        </div> -->
                                        <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                            {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
						
                        <div >{{ nowDate }}</div> 
                        <div >{{ nowTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </dv-full-screen-container>
</template>

<script setup lang="ts">
    import { Progress } from 'ant-design-vue'
    import { onMounted, ref, onUnmounted } from 'vue'
    import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
    import { listAll } from '../api/DryEquipment.api'
    import { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { router } from '/@/router'
    import { defHttp } from '/@/utils/http/axios'
    import { useUserStore } from '/@/store/modules/user'
    const eqpNum = ref(4)
    const eqpMap = ref(new Map())
    const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
    const eqps = ref([] as dryEquipment[])
    const title = ref("兰浦智能干燥车间")
    const userStore = useUserStore()
    console.log(userStore.dictItems.title)
    userStore.dictItems.title?.forEach(element => {
        if (element.value === "bigscreentitle") {
            title.value = element.text
        }
		
    });
    const Timer = ref()

    const realTime = ref(new Map())
    const nowTime = ref()
    const nowDate = ref()


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

                result.forEach((item) => {
                    eqpMap.value.set(item.code, item)
                })
                updateRealTime()
            })
            .catch((err) => {
                console.log(`output->err`, err)
            })
    }

    function updateRealTime() {
        //console.log(`output->定时刷新数据`)
        eqps.value.forEach((item) => {
            queryRealTime(item)
        })
    }

    function queryRealTime(eqp: dryEquipment) {
		
        let tenantId = userStore.getTenant
        let eqpCode = eqp.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) {
                res.tempValue = [res.windTemp, 100]
                res.totalRemain = res.remain
                if (res.detailList) {
                    // å¹²ç‡¥å‰©ä½™æ—¶é—´=工单预计剩余-（当前干燥时间-最后一次记录干燥时间） 
                    res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
                }
                if(res.totalRemain < 0) {
                    res.totalRemain = 0
                }
				
                res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
            } else {
                res = {
                    tempValue: [0, 100],
                    percent: 0,
                    mois: [],
                }
            }

            realTime.value.set(eqp.code, res)
        })
    }
    function gotoeqp(num) {
        console.log('跳转机台',num);
        if (num < eqpCodes.value.length) {
            router.push({ path: '/bigEqp', query: { num: num } })
        }
    }

    function getNowTime() {
        var date = new Date()
        nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
        nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() :  date.getHours())  + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
        //console.log("获取当前时间！");
    }

    function showInfo(data) {
        return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'空闲':'空闲'
    }

    getNowTime()
    listAllEqp()
    onMounted(() => {
        Timer.value = setInterval(updateRealTime, 3000)
        setInterval(getNowTime,10000)
    })

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

<style scoped>
    .fbg {
        height: 1080px;
        width: 1920px;
        background-image: url(/src/assets/images/dry/bg/wkshopp.png);
        background-repeat: no-repeat;
    }
    .bgImage {
        height: 1080px;
        width: 1920px;
		
    }

    .head {
        display: flex;
        align-content: center;
        justify-content: center;
    }

    .body {
        height: 980px;
        width: 100%;
        margin-top: -100px;
        font-size: 20px;
    }
    .title {
        height: 200px;
        padding: 20px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    .humiture {
        height: 0px;
        justify-content: center;
        color: white;
        display: flex;
    }

    .feed {
        display: flex;
        height: 0px;
        color: gray;
        padding-top: 20px;
        justify-content: space-between;
    }

    .up {
        padding-left: 0px;
        padding-top: 00px;
        display: flex;

        align-content: center;
        justify-content: flex-start;
    }
    .down {
        padding-left: 402px;
        margin-top: -246px;
        display: flex;

        align-content: center;
        justify-content: flex-start;
    }
    .eqpInfoup {
        width: 300px;
        height: 400px;
        margin: -50px 31px;
        display: flex;
        flex-direction: column;
    }

    .eqpInfodown {
        width: 300px;
        height: 430px;
        margin: 0 31px;
        padding-top: 132px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .one {
        margin-top: 227px;
    }

    .two {
        margin-top: 183px;
    }

    .three {
        margin-top: 132px;
    }

    .four {
        margin-top: 69px;
    }

    .eqp-title {
        height: 125px;

    width: 100%;
   
    padding: 10px 20px;
    }

    .eqp-name {
        line-height: 30px;
        text-align: center;
        color: white;
        margin-top: -30px;
    }

    .eqp-timer {
        line-height: 30px;
        text-align: center;
        color: white;
        margin-top: 6px;
        justify-content: space-between;
    display: flex;
    }

    .eqp-name-down {
        line-height: 40px;
        text-align: center;
        color: white;
    }

    .process {
        width: 50%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
        background: #3f4c6b;
    }

    .eqp-info-up {
        flex: 1;
        padding-top: 108px;
        display: flex;
    }

    .weight {
        flex: 1;
        display: flex;
        font-size: 20px;
    }

    .eqp-info-down {
        flex: 1;
        padding-top: 70px;
        display: flex;
    }

    .herb {
        height: 32px;
        background: #3f4c6b;
        color: white;
        line-height: 30px;
        padding: 0 10px;
    }
    .water {
        height: 120px;
        width: 110px;
        margin-left: 200px;
        display: flex;
        flex-wrap: wrap; 
    }

    .temp {
        display: flex;
    }
    .font {
        line-height: 26px;
    }


    .footer {
        height: 160px;
        display: flex;
        padding: 10px 20px;
        font-size: 30px;
        flex-direction: column-reverse;
        align-items: flex-end;
        color: white;
        line-height: 40px;
        margin-top: -150px;

    }
    :deep() .progress {
        padding: 25px 25px;

        width: 360px;
        display: flex;
    }
    :deep() .ant-progress-bg {
        height: 25px !important;
    }
    :deep() .ant-progress-inner {
        background-color: rgb(197 197 197 / 84%) !important;
    }

    .statistics {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
		
    }
    .stat_label {
        width:45px
    }
 
    .stat_value {
        font-size: 32px
    }

    .herb_weight {
        padding: 0 10px;
        color: white;
        display: flex;
        justify-content: space-between;
    }
    .eqp_num {
        font-weight: bold;
    width: 40px;
    height: 40px;
    background: #a0782e;
    border-radius: 50px;
    /* text-align: center; */
    font-size: 23px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .putincolor {
        color: antiquewhite;
    }

    .electroncolor {
        color: aquamarine;
    }

    .steamcolor {
        color: sandybrown
    }
    .font16 {
        font-size: 16px;
    }
    .stat_avg {
        width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
        margin-top: 6px;
    }
</style>

 src/views/dry/bigScreen/BigWorkShop2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,753 @@
<template>
    <dv-full-screen-container>
        <div class="fbg">
            <div class="bgImage">
                <div class="head">
                    <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div>

                    <div class="title">
                        <span>{{ title }}</span>

                        <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" />
                    </div>
                    <div style="width: 600px; height: 50px; display: flex; justify-content: end">
                        <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px"
                    /></div>
                </div>
                <div class="body">
                    <div class="humiture">
                        <div style="display: flex; width: 120px">
                            <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> 26 â„ƒ </div>
                        </div>
                        <div style="display: flex">
                            <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
                        </div>
                    </div>
                    <div class="feed">
                        <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between;">

                            <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            æ€»æŠ•æ–™é‡
                                        </div>
                                        <div class="stat_value">
                                            5066 
                                            <span class="font16">
                                            Kg
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                é¢„计产量
                                            </div>	
                                            <div>
                                                2321kg
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            ç”µé‡æ¶ˆè€—
                                        </div>
                                        <div class="stat_value">
                                            462 
                                            <span class="font16">
                                                Kwh
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                å¹³å‡ç”µè€—
                                            </div>	
                                            <div>
                                                13 Kwh/kg
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            è’¸æ±½æ¶ˆè€—
                                        </div>
                                        <div class="stat_value">
                                            683 
                                            <span class="font16">
                                                m³
                                        </span>
                                        </div> 
                                        <div class="stat_avg">
                                            <div>
                                                å¹³å‡æ±½è€—
                                            </div>	
                                            <div>
                                                23 m³
                                            </div> 
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <!-- <div class="statistics putincolor">
                                    <div class="stat_label font16">预计产量</div>
                                    <div class="stat_value">3000</div>
									
                                    <div class="font16">
                                        <br/>
                                        Kg
                                    </div>
                                </div> -->
                            </div>
							
                            <div>
                            <!-- <div class="statistics electroncolor">
                                <div class="stat_label font16">电量消耗</div>
                                <div class="stat_value">500</div>
                                <div class="font16">
                                    <br/>
                                     Kwh
                                </div>
								 
                            </div>
                            <div class="statistics steamcolor">
                                <div class="stat_label font16">蒸汽消耗</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    m³
                                </div>
								 
                            </div>
						
                            <div class="statistics electroncolor">
                                <div class="stat_label font16">平均电耗</div>
                                <div class="stat_value">12</div>
                                <div class="font16">
                                    <br/>
                                    Kwh/kg
                                </div>
								 
                            </div>
                            <div class="statistics steamcolor">
                                <div class="stat_label font16">平均汽耗</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    m³/kg
                                </div>
								
                            </div> -->
                            </div>
						
							
                        </div>
                        <!-- <div style="padding-right: 100px;">
                            <div class="statistics">
                                <div class="stat_label font16">干料产量</div>
                                <div class="stat_value">300</div>
                                <div class="font16">
                                    <br/>
                                    kg
                                </div>
							
                            </div>
                        </div> -->
						
						
                    </div>
                    <div class="up">
                        <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }">
                            <div class="eqpInfoup" @click="gotoeqp(num - 1)">
                                <div class="eqp-title">
                                    <div class="herb_weight">
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div>
                                    </div>
                                    <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || '预留' }}</div> -->
                                    <!-- <div class="process"> </div> -->
                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
                                            to: '#87d068',
                                        }"
                                        :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')"
                                        status="active"
                                        trailColor="#2b2b2b2b"
                                        :show-info="false"
                                    />
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                            {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture.toFixed(1) || '0' }} %
                                        </div>
                                        <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                             {{realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} â„ƒ
                                        </div>
                                        <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                            {{ realTime.get(eqpCodes[num - 1])?.totalRemain||0}} min
                                        </div>
                                    </div>
                                </div>
                                <div class="eqp-info-up">
                                    <!-- <div class="herb">
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
										
                                    </div> -->
									
                                </div>
                                <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> -->

                                <div class="weight"><div class="herb">
                                    {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
                                </div></div>
                                <div class="water">
                                    <div class="eqp_num">{{ num }}</div>
                                    <!-- <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div>
                                        <div class="font">
                                            <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> %
                                        </div>
                                    </div>
                                    <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> â„ƒ
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="down">
                        <div v-for="num in eqpNum" :key="num" :class="{ done: num === 1, dtwo: num === 2, dthree: num === 3, dfour: num === 4 }">
                            <div class="eqpInfodown" @click="gotoeqp(num + 3)">
                                <!-- <div class="eqp-info-down">
                                    <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                                </div>
                                <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> -->
                                <div class="weight"><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div>
                                <div class="water">
                                    <div class="eqp_num">{{ num + 4 }}</div>
                                    <!-- <div class="temp">
                                        <div style="line-height: 28px">
                                            <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" />
                                        </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> %
                                        </div>
                                    </div>
                                    <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div>
                                        <div class="font">
                                            <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> â„ƒ
                                        </div>
                                    </div> -->
                                </div>

                                <div class="dblank"></div>
                                <div class="eqp-title">
                                    <div class="herb_weight">
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
                                    </div>
									
                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
                                            to: '#87d068',
                                        }"
                                        :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')"
                                        status="active"
                                        trailColor="#2b2b2b2b"
                                        :show-info="false"
                                    />
                                    <!-- <div class="eqp-name">50%</div> -->
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                            {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture.toFixed(1) || '0' }} %
                                        </div>
                                        <div><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" />
                                             {{realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp.toFixed(0) || '0'}} â„ƒ
                                        </div>
                                        <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
                                             {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min
                                        </div> -->
                                        <div><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> 
                                            {{ realTime.get(eqpCodes[num + 3])?.totalRemain||0}} min
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
						
                        <div >{{ nowDate }}</div> 
                        <div >{{ nowTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </dv-full-screen-container>
</template>

<script setup lang="ts">
    import { Progress } from 'ant-design-vue'
    import { onMounted, ref, onUnmounted } from 'vue'
    import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
    import { listAll } from '../api/DryEquipment.api'
    import { dryEquipment } from '../dataDefine/DryEquipment.data'
    import { router } from '/@/router'
    import { defHttp } from '/@/utils/http/axios'
    import { useUserStore } from '/@/store/modules/user'
    const eqpNum = ref(4)
    const eqpMap = ref(new Map())
    const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
    const eqps = ref([] as dryEquipment[])
    const title = ref("兰浦智能干燥车间")
    const userStore = useUserStore()
    console.log(userStore.dictItems.title)
    userStore.dictItems.title?.forEach(element => {
        if (element.value === "bigscreentitle") {
            title.value = element.text
        }
		
    });
    const Timer = ref()

    const realTime = ref(new Map())
    const nowTime = ref()
    const nowDate = ref()


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

                result.forEach((item) => {
                    eqpMap.value.set(item.code, item)
                })
                updateRealTime()
            })
            .catch((err) => {
                console.log(`output->err`, err)
            })
    }

    function updateRealTime() {
        //console.log(`output->定时刷新数据`)
        eqps.value.forEach((item) => {
            queryRealTime(item)
        })
    }

    function queryRealTime(eqp: dryEquipment) {
		
        let tenantId = userStore.getTenant
        let eqpCode = eqp.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) {
                res.tempValue = [res.windTemp, 100]
                res.totalRemain = res.remain
                if (res.detailList) {
                    // å¹²ç‡¥å‰©ä½™æ—¶é—´=工单预计剩余-（当前干燥时间-最后一次记录干燥时间） 
                    res.totalRemain = res.remain-(res.dryTime-res.detailList[res.detailList.length - 1].totalTime)
                }
                if(res.totalRemain < 0) {
                    res.totalRemain = 0
                }
				
                res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
            } else {
                res = {
                    tempValue: [0, 100],
                    percent: 0,
                    mois: [],
                }
            }

            realTime.value.set(eqp.code, res)
        })
    }
    function gotoeqp(num) {
        console.log('跳转机台',num);
        if (num < eqpCodes.value.length) {
            router.push({ path: '/bigEqp', query: { num: num } })
        }
    }

    function getNowTime() {
        var date = new Date()
        nowDate.value = (date.getFullYear()) + "/" + (date.getMonth()< 9? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "/" + (date.getDay() < 10? "0" + date.getDay() : date.getDay())
        nowTime.value = "" + (date.getHours()<10? "0" + date.getHours() :  date.getHours())  + ":" + (date.getMinutes()< 10? "0" + date.getMinutes(): date.getMinutes())
        //console.log("获取当前时间！");
    }

    function showInfo(data) {
        return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'空闲':'空闲'
    }

    getNowTime()
    listAllEqp()
    onMounted(() => {
        Timer.value = setInterval(updateRealTime, 3000)
        setInterval(getNowTime,10000)
    })

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

<style scoped>
    .fbg {
        height: 1080px;
        width: 1920px;
        background-image: url(/src/assets/images/dry/bg/bg5.png);
        background-repeat: no-repeat;
    }
    .bgImage {
        height: 1080px;
        width: 1920px;
        background-image: url(/src/assets/images/dry/bg/wkspbg3.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0px 50px;
    }

    .head {
        display: flex;
        align-content: center;
        justify-content: center;
    }

    .body {
        height: 980px;
        width: 100%;
        margin-top: -100px;
        font-size: 20px;
    }
    .title {
        height: 200px;
        padding: 20px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        color: white;
    }

    .humiture {
        height: 0px;
        justify-content: center;
        color: white;
        display: flex;
    }

    .feed {
        display: flex;
        height: 0px;
        color: gray;
        padding-top: 20px;
        justify-content: space-between;
    }

    .up {
        padding-left: 55px;
        padding-top: 48px;
        display: flex;

        align-content: center;
        justify-content: flex-start;
    }
    .down {
        padding-left: 340px;
        margin-top: -246px;
        display: flex;

        align-content: center;
        justify-content: flex-start;
    }
    .eqpInfoup {
        width: 300px;
        height: 400px;
        margin: -50px 10px;
        display: flex;
        flex-direction: column;
    }

    .eqpInfodown {
        width: 300px;
        height: 380px;
        margin: 0 50px;
        padding-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .one {
        margin-top: 227px;
    }

    .two {
        margin-top: 193px;
    }

    .three {
        margin-top: 160px;
    }

    .four {
        margin-top: 127px;
    }

    .done {
        margin-top: 240px;
    }

    .dtwo {
        margin-left: -20px;
        margin-top: 184px;
    }

    .dthree {
        margin-left: 58px;
        margin-top: 107px;
    }

    .dfour {
        margin-left: -71px;
    margin-top: 70px;
    }

    .eqp-title {
        height: 125px;

    width: 100%;
   
    padding: 10px 20px;
    }

    .eqp-name {
        line-height: 30px;
        text-align: center;
        color: white;
        margin-top: -30px;
    }

    .eqp-timer {
        line-height: 30px;
        text-align: center;
        color: white;
        margin-top: 6px;
        justify-content: space-between;
    display: flex;
    }

    .eqp-name-down {
        line-height: 40px;
        text-align: center;
        color: white;
    }

    .process {
        width: 50%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
        background: #3f4c6b;
    }

    .eqp-info-up {
	
        padding-top: 20px;
        display: flex;
    }

    .weight {

        display: flex;
        font-size: 20px;
    }

    .eqp-info-down {
        flex: 1;
        padding-top: 70px;
        display: flex;
    }

    .herb {
        height: 32px;
        background: #3f4c6b;
        color: white;
        line-height: 30px;
        padding: 0 10px;
    }
    .water {
		
        height: 120px;
        width: 110px;
		
        display: flex;
        flex-wrap: wrap; 
    }
    .one .eqpInfoup .water  {
        padding-top: 37px;
        margin-left: 201px;
    }
    .two .eqpInfoup .water  {
        padding-top: 32px;
        margin-left: 184px;
    }
    .three .eqpInfoup .water  {
        padding-top: 11px;
        margin-left: 284px;
    }
    .three .eqpInfoup .weight  {

        margin-left: 69px;
    }
    .four .eqpInfoup .water  {
        padding-top: 14px;
        margin-left: 186px;
    }
    .done .eqpInfodown .water  {
        padding-top: 89px;
        margin-left: 205px;
    }
    .dtwo .eqpInfodown .water  {
        padding-top: 72px;
        margin-left: 213px;
    }
    .dthree .eqpInfodown .water  {
        padding-top: 48px;
        margin-left: 263px;
    }

    .dfour .eqpInfodown .water  {
        padding-top: 38px;
        margin-left: 189px;
    }
    .done .eqpInfodown .dblank  {
        height: 93px;
    }
    .dtwo .eqpInfodown .dblank  {
        height: 103px;
    }
    .dthree .eqpInfodown .dblank  {
        height: 83px;
    }

    .dfour .eqpInfodown .dblank  {
        height: 48px;
    }
    .done .eqpInfodown .weight  {
        margin-left: -77px;
    }
    .dtwo .eqpInfodown .weight  {
        margin-left: -77px;
    }
    .dthree .eqpInfodown .weight  {
        margin-left: -50px;
    }

    .dfour .eqpInfodown .weight  {
        margin-left: -50px;
    }
    .temp {
        display: flex;
    }
    .font {
        line-height: 26px;
    }


    .footer {
        height: 160px;
        display: flex;
        padding: 10px 20px;
        font-size: 30px;
        flex-direction: column-reverse;
        align-items: flex-end;
        color: white;
        line-height: 40px;
        margin-top: -150px;

    }
    :deep() .progress {
        padding: 25px 25px;

        width: 360px;
        display: flex;
    }
    :deep() .ant-progress-bg {
        height: 25px !important;
    }
    :deep() .ant-progress-inner {
        background-color: rgb(197 197 197 / 84%) !important;
    }

    .statistics {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
		
    }
    .stat_label {
        width:45px
    }
 
    .stat_value {
        font-size: 32px
    }

    .herb_weight {
        padding: 0 10px;
        color: white;
        display: flex;
        justify-content: space-between;
    }
    .eqp_num {
        font-weight: bold;
    width: 40px;
    height: 40px;
    background: #a0782e;
    border-radius: 50px;
    /* text-align: center; */
    font-size: 23px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .putincolor {
        color: antiquewhite;
    }

    .electroncolor {
        color: aquamarine;
    }

    .steamcolor {
        color: sandybrown
    }
    .font16 {
        font-size: 16px;
    }
    .stat_avg {
        width: 100%; font-size: 16px; display: flex; color: rgb(176, 176, 176); justify-content: space-between; border-top: 1px solid;
        margin-top: 6px;
    }
</style>