diff --git a/src/views/dietaryNutritionTips/dietaryNutritionTips4.vue b/src/views/dietaryNutritionTips/dietaryNutritionTips4.vue
new file mode 100644
index 0000000..2ec561f
--- /dev/null
+++ b/src/views/dietaryNutritionTips/dietaryNutritionTips4.vue
@@ -0,0 +1,410 @@
+<template>
+    <div id="dietaryNutritionTips">
+        <div class="tips">
+            <div></div>
+            <div>温馨提示</div>
+            <div></div>
+        </div>
+
+        <div class="title">
+            <div></div>
+            <div>
+                <div>体重管理行动（{{ personnelType === 'staff' ? '员工' : '部门'}}）</div>
+                <div>{{ currentData }}</div>
+            </div>
+            <div></div>
+        </div>
+
+        <div class="content">
+            <div class="contentHeader">
+                <div>序号</div>
+                <div>单位(部门)</div>
+                <div>
+                    <template v-if="personnelType === 'staff'">姓名</template>
+                    <template v-else>用餐人数</template>
+                </div>
+                <div>
+                    <template v-if="personnelType === 'staff'">营养得分</template>
+                    <template v-else>人均营养评分</template>
+                </div>
+            </div>
+            <div class="contentSection">
+                <template v-if="list && list.length">
+                    <template v-for="(item, index) in list">
+                        <div :class="['contentSectionLst', personnelType]">
+                            <div>{{ index + 1 }}</div>
+                            <div>{{ item.departName }}</div>
+                            <div>{{ personnelType === 'staff' ? maskUserName(item.userName) : item.userCount }}</div>
+                            <div>{{ personnelType === 'staff' ? item.fraction : item.avgFraction}}</div>
+                        </div>
+                    </template>
+                </template>
+                <template v-else>
+                    <div class="nullData">
+                        <div></div>
+                        <div>~ 暂无体重管理信息 ~</div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {httpRequest} from "@/XMLHttpRequest";
+import {getCurrentDate} from "@/utils/times";
+import signMd5Utils from "@/utils/signMd5";
+
+export default {
+    name: "dietaryNutritionTips",
+    data() {
+        return {
+            setTimeoutParams: {
+                status: true,
+                times: 15
+            },
+
+            requestConfig: {
+                agreement: "http",
+                url: "192.168.10.6",
+                suffix: "gateway"
+            },
+            personnelType: "department",  // 员工：staff  /  部门：department
+
+
+            currentData: "",
+            list: [],
+            timerId: null
+        }
+    },
+    created() {
+        let agreement = this.$route.query.agreement;
+        if(agreement) {
+            this.requestConfig.agreement = agreement;
+        }
+        let url = this.$route.query.url;
+        if(url) {
+            this.requestConfig.url = url;
+        }
+        let suffix = this.$route.query.suffix;
+        if(suffix) {
+            this.requestConfig.suffix = suffix;
+        }
+        this.loadDataUrl();
+    },
+    methods: {
+        loadDataUrl() {
+            this.currentData = getCurrentDate();
+            this.personnelType = this.personnelType === "staff" ? "department" : "staff";
+            let url = this.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings";
+            this.loadData(url);
+        },
+
+        loadData(u) {
+            let this_ = this;
+            let url = this.requestConfig.agreement + '://'+ this.requestConfig.url +'/'+ this.requestConfig.suffix +'local/food/userRank' + u;
+
+            if (this_.isRequesting) {
+                console.warn('请求正在进行中，跳过本次调用。');
+                return;
+            }
+            this_.isRequesting = true;
+
+            let params = {
+                no: this.personnelType === "staff" ? 15 : 10
+            };
+            httpRequest('GET', url, params, {
+                'X-Sign': signMd5Utils.getSign(url, params),
+                'X-TIMESTAMP': signMd5Utils.getDateTimeToString(url, params),
+            }).then(function(res) {
+                if (res.success) {
+                    if(this_.personnelType === "department") {
+                        res.result.map(item => {
+                            if(item.userCount && item.avgStepCount) {
+                                item.avgStepCount = (item.avgStepCount / item.userCount).toFixed(0);
+                            }
+                        })
+                    }
+                    this_.list = res.result && res.result.length ? res.result : [];
+                }
+
+            }).catch(function() {
+                this_.list = [];
+            }).finally(() => {
+                this_.isRequesting = false;
+
+                if (this_.setTimeoutParams.status) {
+                    if (this_.timerId) {
+                        clearTimeout(this_.timerId);
+                    }
+                    this_.timerId = setTimeout(() => {
+                        this_.loadDataUrl();
+                        this_.timerId = null;
+                    }, this_.setTimeoutParams.times * 1000);
+                }
+            });
+        },
+
+        maskUserName(fullName) {
+            if (!fullName || typeof fullName !== 'string' || fullName.length === 0) {
+                return '';
+            }
+
+            const len = fullName.length;
+
+            if (len === 1) {
+                return fullName;
+            } else if (len === 2) {
+                return fullName.charAt(0) + '*';
+            } else {
+                const firstChar = fullName.charAt(0);
+                const lastChar = fullName.charAt(len - 1);
+                const maskedPart = '*'.repeat(len - 2);
+                return firstChar + maskedPart + lastChar;
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+#dietaryNutritionTips {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 44px 40px 45px;
+    box-sizing: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
+
+    .tips {
+        width: 100%;
+        height: 36px;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 96px;
+
+        > div:nth-of-type(1) {
+            width: 120px;
+            height: 4px;
+            background: linear-gradient(270deg, #FFC87C 0%, rgba(42,199,159,0) 100%);
+            border-radius: 2px;
+        }
+
+        > div:nth-of-type(2) {
+            color: #FFC87C;
+            height: 36px;
+            font-size: 36px;
+            font-weight: bold;
+            line-height: 36px;
+            margin: 0 36px;
+        }
+
+        > div:nth-of-type(3) {
+            width: 120px;
+            height: 4px;
+            background: linear-gradient(90deg, #FFC87C 0%, rgba(42,199,159,0) 100%);
+            border-radius: 2px;
+        }
+    }
+
+    .title {
+        width: 100%;
+        height: 182px;
+        position: fixed;
+        top: 85px;
+        left: 0;
+        right: 0;
+        z-index: 3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > div:nth-of-type(1) {
+            width: 86px;
+            height: 182px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-image: url("@/assets/images/dietaryNutritionTips/l.png");
+        }
+
+        > div:nth-of-type(2) {
+            width: 720px;
+            height: 136px;
+            padding-top: 18px;
+            border-radius: 24px;
+            box-sizing: border-box;
+            background: linear-gradient(-90deg, #FFC77B 0%, #FFF4E6 47%, #FFC879 100%);
+
+            > div:nth-of-type(1) {
+                color: #8D0503;
+                width: 100%;
+                height: 48px;
+                font-size: 48px;
+                font-weight: bold;
+                line-height: 48px;
+                text-align: center;
+                margin-bottom: 20px;
+            }
+
+            > div:nth-of-type(2) {
+                color: #8D0503;
+                width: 100%;
+                height: 30px;
+                font-size: 30px;
+                font-weight: bold;
+                line-height: 30px;
+                text-align: center;
+            }
+        }
+
+        > div:nth-of-type(3) {
+            width: 86px;
+            height: 182px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-image: url("@/assets/images/dietaryNutritionTips/r.png");
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 132px);
+        border-radius: 16px;
+        padding: 105px 24px 0;
+        box-sizing: border-box;
+        border: 2px solid #FFC548;
+        background: linear-gradient(180deg, rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 0.3) 100%);
+
+        .contentHeader {
+            width: 100%;
+            height: 82px;
+            display: flex;
+            flex-wrap: nowrap;
+            margin-bottom: 60px;
+            border-radius: 16px;
+            background-color: #7E0B08;
+
+            > div {
+                color: #FFC87C;
+                height: 82px;
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 82px;
+                text-align: center;
+
+                &:nth-of-type(1) {
+                    width: 120px;
+                }
+
+                &:nth-of-type(2) {
+                    flex: 1;
+                    text-align: left;
+                }
+
+                &:nth-of-type(3) {
+                    width: 180px;
+                }
+
+                &:nth-of-type(4) {
+                    width: 220px;
+                }
+
+                &:nth-of-type(5) {
+                    width: 180px;
+                }
+            }
+        }
+
+        .contentSection {
+            width: 100%;
+            overflow: hidden;
+            height: calc(100% - 142px);
+
+            .contentSectionLst {
+                width: 100%;
+                display: flex;
+                flex-wrap: nowrap;
+
+                &.staff {
+                    margin-bottom: 56px;
+                }
+
+                &.department {
+                    margin-bottom: 106px;
+                }
+
+                > div {
+                    color: #FFFFFF;
+                    height: 40px;
+                    font-size: 40px;
+                    font-weight: bold;
+                    line-height: 40px;
+                    text-align: center;
+
+                    &:nth-of-type(1) {
+                        width: 120px;
+                    }
+
+                    &:nth-of-type(2) {
+                        flex: 1;
+                        width: 0;
+                        text-align: left;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    &:nth-of-type(3) {
+                        width: 180px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+
+                    &:nth-of-type(4) {
+                        width: 220px;
+                    }
+
+                    &:nth-of-type(5) {
+                        width: 180px;
+                    }
+                }
+
+                &:last-of-type {
+                    margin-bottom: 0 !important;
+                }
+            }
+        }
+    }
+
+    .nullData {
+        width: 100%;
+        padding-top: 350px;
+
+        > div:nth-of-type(1) {
+            width: 280px;
+            height: 232px;
+            margin: 0 auto 40px;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center top;
+            background-image: url("@/assets/images/dietaryNutritionTips/nullData.png");
+        }
+
+        > div:nth-of-type(2) {
+            color: #FFC87C;
+            width: 100%;
+            height: 40px;
+            font-size: 40px;
+            line-height: 40px;
+            text-align: center;
+        }
+    }
+}
+</style>
\ No newline at end of file