优化车间大屏和机台大屏

bsw215583320

2023-08-05 5bec62ee89b4beb9d631670fe436fd3de2887317

优化车间大屏和机台大屏

 src/views/dry/bigScreen/BigEqp.vue

@@ -27,7 +27,7 @@
                                    </div>
                                    <div class="formula">
                                        <div class="formulaItem">
                                            <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
                                            <Icon style="color: powderblue" icon="la:box" :size="38" />
                                            <div>
                                                <div class="mainInfo2">{{ realData?.feed }} 筐</div>
                                                <div class="subhead2">投料量</div>
@@ -154,7 +154,7 @@
                            <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">{{ realData.dryTime | 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>
@@ -1434,7 +1434,10 @@
                            }

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

                            // console.log(`output->res.remain`, res.remain)
                            // console.log(`output->res.dryTime`, res.dryTime)
                            // console.log(`output->totalTime`, totalTime)
                            // 干燥剩余时间=工单预计剩余-（当前干燥时间-最后一次记录干燥时间）
                            res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
                            progressSeries.push({
                                name: '剩余',

 src/views/dry/bigScreen/BigWorkShop.vue

@@ -17,12 +17,12 @@
                <div class="body">
                    <div class="humiture">
                        <div style="display: flex; width: 120px">
                            <Icon style="color: #f7b733" icon="solar:temperature-line-duotone" :size="28" />
                            <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: #f7b733" icon="material-symbols:humidity-percentage-outline" :size="28" />
                            <Icon style="color: #ba9853" icon="wi:humidity" :size="28" />
                            &nbsp;
                            <div style="font-size: 20px; line-height: 26px"> 53 %rh </div>
                        </div>
@@ -43,22 +43,34 @@
                                        trailColor="#2b2b2b2b"
                                        :show-info="false"
                                    />
                                    <!-- <div class="eqp-name">50%</div> -->
                                    <div class="eqp-timer">
                                        <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" />
                                             {{realTime.get(eqpCodes[num - 1])?.dryTime || 0}} min
                                        </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">{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                                    <div class="herb">
                                        <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || '暂无' }}</div>
                                        <!-- <div>33 Kg</div> -->
                                </div>
									
                                </div>
                                <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div>
                                <div class="water">
                                    <div class="temp">
                                        <div style="line-height: 28px"><Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" /> </div>
                                        <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> %
                                            <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: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
                                        <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> ℃
                                            <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> ℃
                                        </div>
                                    </div>
                                </div>
@@ -71,26 +83,28 @@
                                <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="water">
                                    <div class="temp">
                                        <div style="line-height: 28px">
                                            <Icon style="color: #2a5a63" icon="ic:twotone-water-drop" :size="28" />
                                            <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> %
                                            <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: #6c5b7b" icon="solar:temperature-bold-duotone" :size="30" /> </div>
                                        <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> ℃
                                            <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> ℃
                                        </div>
                                    </div>
                                </div>

                                <div style="height: 70px"></div>
                                <div style="height: 50px"></div>
                                <div class="eqp-title">
                                    <!-- <div class="process"> </div> -->
                                    <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
									
                                    <Progress
                                        :stroke-color="{
                                            from: '#108ee9',
@@ -102,7 +116,14 @@
                                        :show-info="false"
                                    />
                                    <!-- <div class="eqp-name">50%</div> -->
                                    <div class="eqp-name-down">{{ eqpMap.get(eqpCodes[num + 3])?.name || '预留' }}</div>
                                    <div class="eqp-timer">
                                        <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>
@@ -124,7 +145,7 @@
    import { useUserStore } from '/@/store/modules/user'
    const eqpNum = ref(4)
    const eqpMap = ref(new Map())
    const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006'])
    const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008'])
    const eqps = ref([] as dryEquipment[])

    const userStore = useUserStore()
@@ -163,7 +184,16 @@
            //console.log(`output->res`, res)
            if (res && res.trendVo) {
                res.tempValue = [res.windTemp, 100]
                res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
                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],
@@ -254,15 +284,15 @@
    }
    .eqpInfoup {
        width: 280px;
        height: 300px;
        margin: 0 41px;
        height: 315px;
        margin: -20px 41px;
        display: flex;
        flex-direction: column;
    }

    .eqpInfodown {
        width: 280px;
        height: 300px;
        height: 315px;
        margin: 0 41px;
        display: flex;
        flex-direction: column;
@@ -286,7 +316,7 @@
    }

    .eqp-title {
        height: 30px;
        height: 45px;
        border-radius: 20px;
        /* background: rgb(182, 182, 182);
        border: 1px solid green; */
@@ -298,6 +328,15 @@
        text-align: center;
        color: white;
        margin-top: -30px;
    }

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

    .eqp-name-down {
@@ -320,9 +359,15 @@
        display: flex;
    }

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

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

@@ -361,6 +406,6 @@
        height: 25px !important;
    }
    :deep() .ant-progress-inner {
        background-color: rgb(197 197 197 / 52%) !important;
        background-color: rgb(197 197 197 / 84%) !important;
    }
</style>

 src/views/dry/monitor/Eqp.vue

@@ -21,7 +21,7 @@
                                </div>
                                <div class="formula">
                                    <div class="formulaItem">
                                        <Icon style="color: powderblue" icon="icon-park-twotone:box" :size="35" />
                                        <Icon style="color: powderblue" icon="la:box" :size="35" />
                                        <div>
                                            <div class="mainInfo2">{{ realData?.feed }}筐</div>
                                            <div class="subhead2">投料量</div>
@@ -151,7 +151,7 @@
                        <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">{{ realData.dryTime | 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>

 src/views/dry/monitor/WorkShop.vue

@@ -86,7 +86,7 @@
                                    vertical
                                />
                                <div class="info-text"
                                    >热风：<span>{{ realTime.get(item.id)?.windTemp | 0 }}</span> °C</div
                                    >热风：<span>{{ realTime.get(item.id)?.trendVo?.bellowsTemp | 0 }}</span> °C</div
                                >
                            </div>
                        </div>
@@ -387,7 +387,7 @@
        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.tempValue = [res.trendVo.bellowsTemp, 100]
                res.percent = ((res.dryTime / (res.dryTime + res.remain)) * 100).toFixed(2)
                res.mois = [
                    (res.trendVo.moisture / 100).toFixed(2),