更新优化

helongyang

5 天以前 753361f589444455fe1b20476c658201ccd92c38

 ´úÂë¹ÜÀí/LargeScreen/CP-Screen/src/views/indexs/station-one.vue

@@ -1,66 +1,33 @@
<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
        <li class="user_Overview-item" style="color: #b3d1ff">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="inboundConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品入库</p>
            <p>成品入库占比</p>
            <br>
            <!-- <p>{{stationstate[0].station_state}}</p> -->
            <!-- <p v-if="stationstate[0].station_state == '检修中'">{{stationstate[0].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
        <li class="user_Overview-item" style="color: #f8c8dc">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="outboundConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品出库</p>
            <p>成品出库占比</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #E6A23C">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="backConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品回框</p>
            <p>成品调拨占比</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <li class="user_Overview-item" style="color: #f56c6c">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="surplusConfig" style="width:100%;height:100%;" />
            </div>
            <p>成品退库</p>
            <p>成品退料占比</p>
            <br>
            <!-- <p>{{stationstate[1].station_state}}</p> -->
            <!-- <p v-if="stationstate[1].station_state == '检修中'">{{stationstate[1].station_checkName}}</p> -->
        </li>
        <!-- <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>3号检修台</p>
            <br>
            <p>{{stationstate[2].station_state}}</p>
            <p v-if="stationstate[2].station_state == '检修中'">{{stationstate[2].station_checkName}}</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>4号检修台</p>
            <br>
            <p>{{stationstate[3].station_state}}</p>
            <p v-if="stationstate[3].station_state == '检修中'">{{stationstate[3].station_checkName}}</p>
        </li> -->
    </ul>
    <Reacquire v-else @onclick="getData" line-height="200px">
        é‡æ–°èŽ·å–
@@ -69,7 +36,7 @@

<script>
import { currentGET } from 'api/modules'
import {Floorfault} from "@/api/http.js"
import { Floorfault } from "@/api/http.js"
let style = {
    fontSize: 24
}
@@ -83,42 +50,38 @@
                onlineNum: 5,
                totalNum: 10,
            },
            stationstate:[],
            stationstate: [],
            pageflag: true,
            timer: null,
            backConfig: { //成品回框
                number: [9999],
                content: '{nt}',
            backConfig: { // æˆå“å›žæ¡†
                number: [0],
                content: '{nt}%',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#E6A23C",
                    fill: "#b3d1ff",
                },
            },
            surplusConfig: { //成品余料
                number: [100],
                content: '{nt}',
            surplusConfig: { // æˆå“ä½™æ–™
                number: [0],
                content: '{nt}%',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#f56c6c",
                },
            },
            inboundConfig: { //成品入库
                number: [100],
                content: '{nt}',
            inboundConfig: { // æˆå“å…¥åº“
                number: [0],
                content: '{nt}%',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#00fdfa",
                },
            },
            outboundConfig: { //成品出库
            outboundConfig: { // æˆå“å‡ºåº“
                number: [0],
                content: '{nt}',
                content: '{nt}%',
                style: {
                    ...style,
                    // stroke: "#07f7a8",
                    fill: "#07f7a8",
                },
            },
@@ -136,7 +99,6 @@
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
@@ -147,76 +109,52 @@
        },
        async getData() {
            this.pageflag = true;
            // currentGET("big2").then((res) => {
            //     if (!this.timer) {
            //         console.log("设备总览2", res);
            //     }
            //     if (res.success) {
            //         this.userOverview = res.data;
            //            this.onlineconfig = {
            //             ...this.onlineconfig,
            //             number: [1]
            //         }
            //         this.config = {
            //             ...this.config,
            //             number: [7]
            //         }
            //         this.offlineconfig = {
            //             ...this.offlineconfig,
            //             number: [4]
            //         }
            //         this.laramnumconfig = {
            //             ...this.laramnumconfig,
            //             number: [10]
            //         }
            //         this.switper();  
            //     } else {
            //         this.pageflag = false;
            //         this.$Message.warning(res.msg);
            //     }
            // });
                    var rep = await Floorfault();
            try {
                const rep = await Floorfault();
                
                // æå–四个类型的数量
                const values = [
                    rep.inboundCount || 0,
                    rep.outboundCount || 0,
                    rep.allocateCount || 0,
                    rep.surplusCount || 0
                ];
                
                // è®¡ç®—总和
                const total = values.reduce((sum, value) => sum + value, 0);
                
                // è®¡ç®—各类型百分比（确保总和为100%）
                let percentSum = 0;
                const percentages = values.map((value, index) => {
                    // æœ€åŽä¸€ä¸ªç™¾åˆ†æ¯”通过减法确保总和为100%
                    const isLast = index === values.length - 1;
                    const percent = isLast 
                        ? 100 - percentSum 
                        : total > 0 ? parseFloat(((value / total) * 100).toFixed(1)) : 0;
                    
                    this.inboundConfig={
                        ...this.inboundConfig,
                        number: [rep.inboundCount]
                    }
                    this.outboundConfig={
                        ...this.outboundConfig,
                        number: [rep.outboundCount]
                    }
                    this.backConfig={
                        ...this.backConfig,
                        number: [rep.backboundCount]
                    }
                    this.surplusConfig={
                        ...this.surplusConfig,
                        number: [rep.surplusCount]
                    }
                    // this.onlineconfig = {
                    //     ...this.onlineconfig,
                    //     number: [rep[0].station_qty]
                    // }
                    // this.config = {
                    //     ...this.config,
                    //     number: [rep[1].station_qty]
                    // }
                    // this.offlineconfig = {
                    //     ...this.offlineconfig,
                    //     number: [rep[2].station_qty]
                    // }
                    // this.offlineconfig = {
                    //     ...this.offlineconfig,
                    //     number: [rep[3].station_qty]
                    // }
                    this.switper(); 
                    percentSum += percent;
                    return percent;
                });
                
                // æ›´æ–°æ•°å­—翻牌器配置
                this.inboundConfig = { ...this.inboundConfig, number: [percentages[0]] };
                this.outboundConfig = { ...this.outboundConfig, number: [percentages[1]] };
                this.backConfig = { ...this.backConfig, number: [percentages[3]] };
                this.surplusConfig = { ...this.surplusConfig, number: [percentages[3]] };

                this.switper();
            } catch (error) {
                this.pageflag = false;
                console.error("获取数据失败：", error);
                this.$Message.warning("数据获取失败，请重试");
            }
        },
        //轮询
        // è½®è¯¢
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
            let looper = () => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
@@ -224,6 +162,7 @@
    },
};
</script>

<style lang='scss' scoped>
.user_Overview {
    li {
@@ -233,6 +172,8 @@
            text-align: center;
            height: 16px;
            font-size: 16px;
            white-space: nowrap; // é˜²æ­¢æ–‡å­—换行
            margin: 5px 0; // è°ƒæ•´é—´è·
        }

        .user_Overview_nums {
@@ -261,32 +202,26 @@
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");

            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");

            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");

            }
        }
    }