车间大屏增加统计数据

baoshiwei

2023-12-06 6313e591d3854b57ae9d217dd7c91e21a568e578

车间大屏增加统计数据

 src/views/dry/bigScreen/BigWorkShop.vue

@@ -19,78 +19,53 @@
                        <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"> {{envTemp}} ℃ </div>
                            <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} ℃ </div>
                        </div>
                        <div style="display: flex">
                            <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> {{envHum}} %rh </div>
                            <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %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 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_label font16"> 总投料量 </div>
                                        <div class="stat_value">
                                            5066 
                                            <span class="font16">
                                            Kg
                                        </span>
                                        </div> 
                                            {{ originWeight.toFixed(2) }}
                                            <span class="font16"> Kg </span>
                                        </div>
                                        <div class="stat_avg">
                                            <div>
                                                预计产量
                                            </div>	
                                            <div>
                                                2321kg
                                            </div> 
                                            <div> 预计产量 </div>
                                            <div> {{ totalYield.toFixed(2) }} kg </div>
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            电量消耗
                                        </div>
                                        <div class="stat_label font16"> 电量消耗 </div>
                                        <div class="stat_value">
                                            {{dianneng.toFixed(2)}} 
                                            <span class="font16">
                                                Kwh
                                        </span>
                                        </div> 
                                            {{ watt.toFixed(2) }}
                                            <span class="font16"> Kwh </span>
                                        </div>
                                        <div class="stat_avg">
                                            <div>
                                                平均电耗
                                            </div>	
                                            <div>
                                                13 Kwh/kg
                                            </div> 
                                            <div> 平均电耗 </div>
                                            <div> {{wattAvg.toFixed(2)}} Kwh/kg </div>
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding:10px">
                                <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16">
                                            蒸汽消耗
                                        </div>
                                        <div class="stat_label font16"> 蒸汽消耗 </div>
                                        <div class="stat_value">
                                            {{zhengqi.toFixed(2)}} 
                                            <span class="font16">
                                                m³
                                        </span>
                                        </div> 
                                            {{ steam.toFixed(2) }}
                                            <span class="font16"> m³ </span>
                                        </div>
                                        <div class="stat_avg">
                                            <div>
                                                平均汽耗
                                            </div>	
                                            <div>
                                                23 m³
                                            </div> 
                                            <div> 平均汽耗 </div>
                                            <div> {{steamAvg.toFixed(2)}} m³ </div>
                                        </div>
                                    </div>
                                </dv-border-box7>
@@ -104,9 +79,9 @@
                                    </div>
                                </div> -->
                            </div>
							

                            <div>
                            <!-- <div class="statistics electroncolor">
                                <!-- <div class="statistics electroncolor">
                                <div class="stat_label font16">电量消耗</div>
                                <div class="stat_value">500</div>
                                <div class="font16">
@@ -144,8 +119,6 @@
                                
                            </div> -->
                            </div>
						
							
                        </div>
                        <!-- <div style="padding-right: 100px;">
                            <div class="statistics">
@@ -158,8 +131,6 @@
                            
                            </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 }">
@@ -182,14 +153,17 @@
                                        :show-info="false"
                                    />
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                        <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
                                            ><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
                                            ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
                                            {{ realTime.get(eqpCodes[num - 1])?.totalRemain || 0 }} min
                                        </div>
                                    </div>
                                </div>
@@ -198,13 +172,14 @@
                                        <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="weight"
                                    ><div class="herb">
                                        {{ showInfo(realTime.get(eqpCodes[num - 1])) }}
                                    </div></div
                                >
                                <div class="water">
                                    <div class="eqp_num">{{ num }}</div>
                                    <!-- <div class="temp">
@@ -230,7 +205,9 @@
                                    <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="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">
@@ -255,7 +232,7 @@
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || '暂无' }}</div>
                                        <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div>
                                    </div>
									

                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
@@ -268,17 +245,20 @@
                                    />
                                    <!-- <div class="eqp-name">50%</div> -->
                                    <div class="eqp-timer">
                                        <div><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" />
                                        <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
                                            ><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
                                            ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" />
                                            {{ realTime.get(eqpCodes[num + 3])?.totalRemain || 0 }} min
                                        </div>
                                    </div>
                                </div>
@@ -287,9 +267,8 @@
                    </div>

                    <div class="footer">
						
                        <div >{{ nowDate }}</div> 
                        <div >{{ nowTime }}</div>
                        <div>{{ nowDate }}</div>
                        <div>{{ nowTime }}</div>
                    </div>
                </div>
            </div>
@@ -310,28 +289,29 @@
    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 title = ref('兰浦智能干燥车间')
    const userStore = useUserStore()
    const envHum = ref();
    const envTemp = ref();
    const zhengqi = ref();
    const dianneng = ref()
    const envHum = ref(0)
    const envTemp = ref(0)
    const originWeight = ref(0)
    const totalYield = ref(0)
    const dryReduce = ref(0)
    const steam = ref(0)
    const watt = ref(0)

    const steam = ref();
    const watt = ref()
    const steamAvg = ref(0)
    const wattAvg = ref(0)
    console.log(userStore.dictItems.title)
    userStore.dictItems.title?.forEach(element => {
        if (element.value === "bigscreentitle") {
    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' })
@@ -351,51 +331,49 @@

    function updateRealTime() {
        //console.log(`output->定时刷新数据`)
        zhengqi.value = 0;
        dianneng.value = 0

     new Promise(async function(resolve){
        queryWorkShopStatistics()

        await    eqps.value.forEach(async (item) => {
             await queryRealTime(item)
            })
            resolve()

            console.log("执行完成");
        }).then(()=>{
            console.log("then:::::" + dianneng.value,zhengqi.value );
			
            steam.value = zhengqi.value
            watt.value = dianneng.value
        eqps.value.forEach((item) => {
             queryRealTime(item)
        })

		
    }

    async function queryRealTime(eqp: dryEquipment) {
        console.log("sdkfjlasjdflkajsldfjlsd")
    function queryWorkShopStatistics() {
        let tenantId = userStore.getTenant
        defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenantId } }).then((res) => {
            console.log(`output->res`, res)
            steam.value = res.steam
            watt.value = res.watt
            envHum.value = res.envHum
            envTemp.value = res.envTemp
            originWeight.value = res.originWeight
            totalYield.value = res.yield
            dryReduce.value = res.reduce
            if(res.reduce > 0) {
                steamAvg.value = res.steam/res.reduce
                wattAvg.value = res.watt/res.reduce
            }
        })
    }

    function queryRealTime(eqp: dryEquipment) {
        let tenantId = userStore.getTenant
        let eqpCode = eqp.code
        let queryRealTimeUrl = '/dry/real/getRealTimeData'
     await    defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then( async (res) => {
            console.log(`output->res`, res)
        defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((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)
                    // 干燥剩余时间=工单预计剩余-（当前干燥时间-最后一次记录干燥时间）
                    res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime)
                }
                if(res.totalRemain < 0) {
                if (res.totalRemain < 0) {
                    res.totalRemain = 0
                }
				

                res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2)
                envHum.value = res.envHum
                envTemp.value = res.envTemp
                zhengqi.value += res.steam
                dianneng.value += res.watt
                console.log("zhengqi:::" , res.steam);
            } else {
                res = {
                    tempValue: [0, 100],
@@ -408,7 +386,7 @@
        })
    }
    function gotoeqp(num) {
        console.log('跳转机台',num);
        console.log('跳转机台', num)
        if (num < eqpCodes.value.length) {
            router.push({ path: '/bigEqp', query: { num: num } })
        }
@@ -416,20 +394,28 @@

    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("获取当前时间！");
        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())
    }

    function showInfo(data) {
        return data?data.fault?data.fault:data.warning?data.warning:data.level?data.level:'空闲':'空闲'
        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)
        setInterval(getNowTime, 10000)
    })

    onUnmounted(() => {
@@ -541,11 +527,11 @@
    }

    .eqp-title {
        height: 125px;
        height: 125px;

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

        padding: 10px 20px;
    }

    .eqp-name {
@@ -561,7 +547,7 @@
        color: white;
        margin-top: 6px;
        justify-content: space-between;
    display: flex;
        display: flex;
    }

    .eqp-name-down {
@@ -608,7 +594,7 @@
        width: 110px;
        margin-left: 200px;
        display: flex;
        flex-wrap: wrap; 
        flex-wrap: wrap;
    }

    .temp {
@@ -617,7 +603,6 @@
    .font {
        line-height: 26px;
    }


    .footer {
        height: 160px;
@@ -629,7 +614,6 @@
        color: white;
        line-height: 40px;
        margin-top: -150px;

    }
    :deep() .progress {
        padding: 25px 25px;
@@ -649,14 +633,13 @@
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
		
    }
    .stat_label {
        width:45px
        width: 45px;
    }
 

    .stat_value {
        font-size: 28px
        font-size: 28px;
    }

    .herb_weight {
@@ -667,16 +650,16 @@
    }
    .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;
        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 {
@@ -688,13 +671,18 @@
    }

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