yzzn-middleground-supplier/src/views/navigation.vue

<template>
    <div class="main_container">
        <div style="background-color: #F5F7FB;overflow: hidden;">
            <div class="top">
                <div class="top_one">
                    <div class="top_one left">
                        <span>会助理平台</span>
                    </div>
                    <div class="top_one middle">
                        <el-input popper-class="my-autocomplete" v-model="queryWord" style="width: 81.25%;"
                            placeholder="搜索关键信息">
                            <i class="el-icon-search" slot="suffix" @click="handleQuery()"
                                style="width:6%; height: 100%; display: flex;align-items: center;cursor: pointer;margin-right: 1vh;">
                            </i>
                        </el-input>
                    </div>
                    <div class="top_one right">
                        <div style="display: flex;justify-content: flex-end;align-items: center;font-weight: 400;
                            font-size: 14px; text-overflow: ellipsis;width: 40vh;">
                            <!-- <el-avatar size="medium"
                                src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar> -->
                            <img :src="avatar" class="user-avatar" />
                            <span class="user-nickname">{{ nickname }}</span>
                        </div>

                        <div style="margin-left: 10%;margin-right: 8%">
                            <span style="cursor: pointer" @click="logout">退出登录</span>
                        </div>

                    </div>
                </div>
                <div class="top_two">
                    <div class="top_two left">
                        <img :src="thisTenant.agencyLogo" alt="" style="width: 4vh;">
                        <span style="margin-left: 2%;">{{ thisTenant.agencyName }}</span>
                    </div>
                    <div class="top_two middle">
                        <el-menu default-active="1" class="top_two_menu" mode="horizontal" @select="handleSelect">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">操作台</el-menu-item>
                            <el-menu-item index="3">个人中心</el-menu-item>
                        </el-menu>
                    </div>
                </div>
            </div>
            <div class="left">
                <div class="left_top">
                    <div class="left_top left">
                        <div class="block" style="height:100%;width: 100%;">
                            <el-carousel height="29.5vh">
                                <el-carousel-item v-for="(item, index) in leftTopPics" :key="index">
                                    <img :src="item.icon" alt="" style="width: 100%;height: 100%;">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    <div class="left_top right">
                        <a class="moreMessage" @click="leftTopMore">更多</a>
                        <el-tabs v-model="leftTopRight" @tab-click="" style="width: 98%; margin: 0px auto">
                            <el-tab-pane label="机构资讯" name="1">
                                <div style="overflow-y: auto;height: 20vh;">
                                    <el-row v-for="(item, index) of leftTopOne" :key="index">
                                        <div style="margin-bottom: 1.3vh;cursor: pointer;"
                                            @click="leftTopOneDetail(index)">
                                            <el-row style="border-bottom: 1px solid #F2F2F2;">
                                                <el-col :span="16">
                                                    <span class="leftContent"> {{ item.text }}</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span class="rightContent">{{ parseTime(item.updateTime) }}</span>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-row>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="公司要闻" name="2"></el-tab-pane>
                            <el-tab-pane label="通知公告" name="3"></el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="left_middle">
                    <a class="moreMessage" @click="">更多</a>
                    <el-tabs v-model="leftMiddle" @tab-click="" style="width: 98%; margin: 0px auto">
                        <el-tab-pane label="专栏" name="1">
                            <div style="overflow-y: auto;height: 30vh;">
                                <el-row v-for="(item, index) of dataList2" :key="index">
                                    <div style="margin-bottom: 1.3vh;">
                                        <el-row style="border-bottom: 1px solid #F2F2F2;">
                                            <div style="margin-bottom: 5px;">
                                                <el-col :span="3">
                                                    <div class="leftContentPrefix">[ {{ item.tag }} ]</div>
                                                </el-col>
                                                <el-col :span="16">
                                                    <span class="leftContent"> {{ item.title }}</span>
                                                </el-col>
                                                <el-col :span="5">
                                                    <span class="rightContent">{{ parseTime(item.createTime) }}</span>
                                                </el-col>
                                            </div>
                                        </el-row>
                                    </div>
                                </el-row>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="党建" name="2"></el-tab-pane>
                        <el-tab-pane label="团建" name="3"></el-tab-pane>
                        <el-tab-pane label="工会" name="4"></el-tab-pane>
                        <el-tab-pane label="政策" name="5"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="left_bottom">
                    <a class="moreMessage" @click="leftBottomMore">更多</a>
                    <el-tabs v-model="leftBottom" @tab-click="" style="width: 98%; margin: 0px auto">
                        <el-tab-pane label="平台资讯" name="">
                            <div class="sys_card" v-for="item in leftBottomList">
                                <img :src="item.coverPic"
                                    style="width: 100%;height: 100%;border-radius: 4px;cursor: pointer;"
                                    @click="leftBottomDetail(item.id)"></img>
                                <div class="sys_card_title">
                                    <div style="width: 98%;">
                                        <el-row>
                                            <span class="sys_card_title_font"
                                                style="color: #fff;font-size: 13px;font-weight: bold;margin-left: 1vh;margin-top: 1vh; ">
                                                {{ item.title }}
                                            </span>
                                        </el-row>
                                        <el-row>
                                            <span class="sys_card_title_font"
                                                style="color: #fff;font-size: 12px;margin-left: 1vh;">
                                                {{ item.sketch }}
                                            </span>
                                        </el-row>
                                    </div>

                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="right">
                <div class="right_top">
                    <!-- <a class="moreMessage" @click="">更多</a> -->
                    <el-tabs @tab-click="" style="width: 98%; margin: 0px auto">
                        <el-tab-pane label="跳转模块" name="">
                            <div v-for="(item, index) of rightTopLink" :key="index" style="display: inline">
                                <div class="listItem" @click="goPage(item.path)" style="cursor: pointer">
                                    <div>
                                        <div class="menuImg">
                                            <img class="imgSty" :src="item.icon" />
                                        </div>
                                        <div class="titleSty">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
                <div class="right_middle">
                    <a class="moreMessage" @click="">更多</a>
                    <el-tabs v-model="rightMiddle" @tab-click="" style="width: 98%; margin: 0px auto">
                        <el-tab-pane label="规章制度" name="">
                            <div style="overflow-y: auto;height: 30vh;">
                                <el-row v-for="(item, index) of dataList2" :key="index">
                                    <div style="margin-bottom: 1.3vh;">
                                        <el-row style="border-bottom: 1px solid #F2F2F2;">
                                            <div style="margin-bottom: 5px;">
                                                <el-col :span="18">
                                                    <span class="leftContent"> {{ item.title }}</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span class="rightContent">{{ parseTime(item.createTime) }}</span>
                                                </el-col>
                                                <!-- <div class="leftContentPrefix">[ {{ item.tag }} ]</div> -->
                                            </div>
                                        </el-row>
                                    </div>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="right_bottom">
                    <a class="moreMessage" @click="">更多</a>
                    <el-tabs v-model="rightBottom" @tab-click="" style="width: 98%; margin: 0px auto">
                        <el-tab-pane label="文件下载" name="">
                            <div style="overflow-y: auto;height: 20vh;">
                                <el-row v-for="(item, index) of dataList2" :key="index">
                                    <div>
                                        <el-row style="border-bottom: 1px solid #F2F2F2;">
                                            <div style="margin-bottom: 5px;">
                                                <!-- <div class="leftContentPrefix">[ {{ item.tag }} ]</div> -->
                                                <div style="display: inline-block;">
                                                    <div class="leftContent">{{ item.title }}</div>
                                                    <div style="width: 20vh;">{{ item.createTime }}</div>
                                                </div>
                                                <div style="float: right;">
                                                    <el-button class="rightBottomButter">下载</el-button>
                                                </div>
                                            </div>
                                        </el-row>
                                    </div>
                                </el-row>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="bottom">
            </div>
            <el-dialog :title="detailTitle1" :visible.sync="openDetail1" width="800px" v-dialogDrag append-to-body>
                <div style="padding: 5rpx;width: 700px" v-html="detail1">
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
    getEnableList,
    getEnableListPic,
} from "@/api/system/moduleConfig";
import {
    getHomePlatFormForWeb,
    getXGZXForWeb,
    getPlatformInfo,
} from "@/api/content/platformInfo";
import { getThisAgencyInfo } from "@/api/content/agencyInfo";
import { getPath } from "@/utils/ruoyi";
import defaultLogo1 from '@/assets/logo/defaultLogo1.png'

export default {
    name: "Navigation",
    components: {
    },
    computed: {
        ...mapGetters(["sidebar", "avatar", "nickname", "device"]),
    },
    data() {
        return {
            detailTitle1: "",
            openDetail1: false,
            detail1: undefined,
            //当前机构
            thisTenant: { agencyLogo: defaultLogo1, },
            //左上轮播图
            leftTopPics: [],
            //右上跳转模块
            rightTopLink: [
                { name: "市场1", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场2", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场3", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场4", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场5", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场6", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场7", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场8", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场9", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
                { name: "市场10", icon: "https://hzl.willalp.com:9000/willalpbucket/2.png" },
            ],
            //左上机构咨询
            leftTopOne: [],
            //左下角平台咨询
            leftBottomList: [],
            queryWord: undefined,
            leftTopRight: '1',
            leftMiddle: '1',
            rightMiddle: undefined,
            leftBottom: undefined,
            rightBottom: undefined,
            // dataList: [
            //     { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
            //     { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
            //     { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
            //     { title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
            // ],
            dataList2: [
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
                { tag: "党政要闻", title: "这是标题这是标题", createTime: "2024-09-07 15:23:22" },
            ],
            ptzxList: [
                { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" },
                { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" },
                { coverPic: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png", title: "清明放假通知", sketch: "放假时间:4月4-6日放假，共3天。4月7日(星期日)上班。" }
            ],
        };
    },
    beforeCreate() {
    },
    created() {
        this.getTemplate();
    },
    methods: {
        //页面初始化数据获取
        getTemplate() {
            //获得当前机构信息
            getThisAgencyInfo().then(res => {
                this.thisTenant = res.data;
                if (res.data.agencyLogo) {
                    this.thisTenant.agencyLogo = JSON.parse(res.data.agencyLogo)[0].url;
                }
            })
            //获得左上轮播图
            getEnableListPic().then(res => {
                this.leftTopPics = res.data;
            });
            //获得右上跳转模块
            getEnableList().then(res => {
                this.rightTopLink = res.data;
            });
            //平台资讯
            getHomePlatFormForWeb().then(res => {
                this.leftBottomList = res.data;
            });
            //相关资讯
            getXGZXForWeb().then(res => {
                if (res.data.size < 5) {
                    this.leftTopOne = res.data;
                } else {
                    this.leftTopOne = res.data.slice(0, 4);
                }
            });
        },
        /** 注销 */
        async logout() {
            this.$modal
                .confirm("确定注销并退出系统吗？", "提示")
                .then(() => {
                    this.$store.dispatch("LogOut").then(() => {
                        location.href = getPath("/navigation");
                    });
                })
                .catch(() => { });
        },
        /** 处理搜索 */
        handleQuery() {
            console.log(this.queryWord)
        },
        /** 处理跳转 */
        goPage(path) {
            this.$router.push(path);
        },
        //导航栏跳转
        handleSelect(key, keyPath) {
            if (key == 2) {
                this.$router.push("/index");
            }
            if (key == 3) {
                this.$router.push("/user/profile");
            }
        },
        /** 左上更多按钮跳转 */
        leftTopMore() {
            if (this.leftTopRight == '1') {
                this.$router.push("/xzUnit/news");
            } else if (this.leftTopRight == '2') {

            } else if (this.leftTopRight == '3') {

            }
        },
        leftTopOneDetail(index) {
            this.detail1 = undefined;
            this.detailTitle1 = "机构资讯详情";
            this.detail1 = this.leftTopOne[index].link;
            this.detail1 = this.detail1.replace('<img', '<img style="max-width:100%;height:100%"');
            this.openDetail1 = true;
        },
        /** 左中更多按钮跳转 */
        leftMiddleMore() {

        },
        /** 左下更多按钮跳转 */
        leftBottomMore() {
            this.$router.push("/xzUnit/platformInfo");
        },
        leftBottomDetail(id) {
            this.detail1 = undefined;
            this.detailTitle1 = "平台资讯详情";
            getPlatformInfo(id).then(res => {
                this.detail1 = res.data.content;
                this.detail1 = this.detail1.replace('<img', '<img style="max-width:100%;height:100%"');
                this.openDetail1 = true;
            })
        },
        /** 右上更多按钮跳转 */
        rightTopMore() {

        },
        /** 右中更多按钮跳转 */
        rightMiddleMore() {

        },
        /** 右下更多按钮跳转 */
        rightBottomMore() {

        },

    },
};
</script>
<style scoped>
::v-deep .el-tabs__item {
    color: #6F6F6F;
}

::v-deep .el-tabs__item.is-active {
    color: #333333;
}

::v-deep .el-input--medium .el-input__inner {
    border-radius: 47px 47px 47px 47px;
    border: 2px solid #FFFFFF;
}

::v-deep .el-menu--horizontal>.el-menu-item {
    display: flex;
    height: 85%;
    align-items: center;
    line-height: 100%;
}

.rightBottomButter {
    background: #FF9736;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #FF9736;

    font-family: Inter, Inter;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 6%;
}

.sys_card_title_font {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.sys_card_title {
    position: absolute;
    width: 100%;
    height: 35%;
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    bottom: 0;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.sys_card {
    width: 31%;
    height: 19vh;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    margin: auto 1%;
    position: relative;
    float: left;
}

.titleSty {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
}

.imgSty {
    width: 100%;
    height: 100%;
}

.menuImg {
    width: 5vh;
    height: 5vh;
    /* margin: 1vh auto 0 auto; */
    margin: 1vh auto 0 auto;
}

.listItem {
    width: 20%;
    /* height: 14vh; */
    display: inline-block;
}

.rightContent {
    display: block;
    /* float: right; */
    margin-right: 25px;

    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #6F6F6F;
    line-height: 25px;
    text-align: right;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.leftContentPrefix {
    display: block;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #3B71DD;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-right: 1%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.leftContent {
    display: block;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    text-align: left;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.moreMessage {
    position: absolute;
    right: 20px;
    top: 12px;
    z-index: 9;
}

.left_bottom .left {
    height: 100vh;
    width: 49.5%;
    /* background-color: #fff; */
    border-radius: 6px;
    position: relative;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.top {
    height: 13vh;
    width: 100%;
    margin-bottom: 10px;
    /* background-color: red; */
}

.top_one {
    height: 7.5vh;
    width: 100%;
    background-color: #1890FF;
    display: flex;
    align-items: center;
}

.top_one .left {
    width: 33.33%;
    height: 85%;
    display: flex;
    justify-content: flex-start;

    span {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #FFFFFF;
        /* line-height: 28px; */
        letter-spacing: 8px;
        font-style: normal;
        text-transform: none;
        /* margin-left: 40px; */
        text-align: left;
    }
}

.top_one .middle {
    width: 33.33%;
}

.top_one .right {
    justify-content: flex-end;
    width: 33.33%;
    height: 85%;

    span {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .user-avatar {
        cursor: pointer;
        width: 6vh;
        height: 6vh;
        border-radius: 50%;
    }

    .user-nickname {
        margin-left: 2vh;
        cursor: pointer;
    }
}

.top_two {
    height: 6.5vh;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
}

.top_two .left {
    width: 20%;
    height: 85%;
    display: flex;
    margin-top: 0;
    align-items: center;
    justify-content: flex-start;

    span {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        letter-spacing: 3px;
        line-height: 28px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.top_two .middle {
    width: 60%;
}

.top_two_menu {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: Inter, Inter;
    font-weight: 400;
    font-size: 24px;
    color: #6F6F6F;
    line-height: 28px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.el-menu-item {
    margin: 0 6%;
}

.left {
    height: 100vh;
    width: 54.25%;
    margin-left: 1.5%;
    margin-top: 1vh;
    float: left;
    /* background-color: blue; */
}

.left_top {
    margin-top: 0;
    height: 29.5vh;
    background-color: #FFFFFF;
    display: flex;
}

.left_top .left {
    display: flex;
    width: 42%;
    height: 100%;
    /* background-color: rgb(255, 0, 0); */
}

.left_top .right {
    margin-top: 0;
    display: flex;
    width: 58%;
    height: 100%;
    /* background-color: rgb(255, 0, 191); */

    /* height: 100vh; */
    /* width: 49.5%; */
    position: relative;
}

.left_middle {
    height: 37vh;
    margin-top: 2vh;
    background-color: #FFFFFF;
    position: relative;
}

.left_bottom {
    height: 28.5vh;
    margin-top: 2vh;
    background-color: #FFFFFF;
    position: relative;
}

.right {
    height: 100vh;
    width: 41.25%;
    margin-left: 1.5%;
    margin-top: 1vh;
    float: left;
    /* background-color: green; */
}

.right_top {
    height: 29.5vh;
    background-color: #FFFFFF;
    ;
    position: relative;
}

.right_middle {
    height: 37vh;
    margin-top: 2vh;
    background-color: #FFFFFF;
    position: relative;
}

.right_bottom {
    height: 28.5vh;
    margin-top: 2vh;
    background-color: #FFFFFF;
    position: relative;
}

.bottom {
    height: 5vh;
    width: 100%;
    margin-top: 2vh;
    float: left;
    /* background-color: rgb(1, 7, 1); */
}
</style>