fzxfb_org_cn/components/home/pageNavigation.vue

<template>
    <div class="headerNavBox">
        <NuxtLink to="/list-renyuanchaxun.html">人员查询</NuxtLink>
        <NuxtLink to="/list-cheliangchaxun.html">车辆查询</NuxtLink>
        <NuxtLink to="/list-dishizhongxin.html">地市中心</NuxtLink>
        <NuxtLink to="/list-diaoyanxuanti.html">调研选题</NuxtLink>
        <NuxtLink to="/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink>
    </div>
    <div class="headerNav-pc">
        <div class="headerNavMainBox">
            <div class="headerNavTop">
                <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
                <ul>
                    <li v-for="(item, index) in navigation1" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
                            :target="item.is_url == 1 ? '_blank' : '_self'">
                            <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
                            <span v-else>{{ item.alias }}</span>
                        </NuxtLink>
                    </li>
                </ul>
            </div>
            <div class="headerNavCenter">
                <div class="first"><NuxtLink to="/">互动</NuxtLink></div>
                <ul>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink></li>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink></li>
                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink></li>
                    <li><NuxtLink to="/">志愿服务</NuxtLink></li>
                    <li><NuxtLink to="/">公益活动</NuxtLink></li>
                    <li><NuxtLink to="/">在线服务</NuxtLink></li>
                    <li><NuxtLink to="/">网民留言</NuxtLink></li>
                    <li><NuxtLink to="/">法制知识</NuxtLink></li>
                    <li><NuxtLink to="/">法律咨询</NuxtLink></li>
                    <li><NuxtLink to="/">通知公告</NuxtLink></li>
                    <li><NuxtLink to="/">官网导航</NuxtLink></li>
                </ul>
            </div>
            <div class="headerNavBottom">
                <div class="first"><NuxtLink to="/">查询</NuxtLink></div>
                <ul>
                    <li><NuxtLink to="/list-renyuanchaxun.html">人员查询</NuxtLink></li>
                    <li><NuxtLink to="/list-cheliangchaxun.html">车辆查询</NuxtLink></li>
                    <li><NuxtLink to="/list-dishizhongxin.html">地市中心</NuxtLink></li>
                    <li><NuxtLink to="/list-diaoyanxuanti.html">调研选题</NuxtLink></li>
                    <li><NuxtLink to="/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink></li>
                    <li><NuxtLink to="/">核心网站</NuxtLink></li>
                    <li><NuxtLink to="/">政务百网</NuxtLink></li>
                    <li><NuxtLink to="/">行业百网</NuxtLink></li>
                    <li><NuxtLink to="/">规章制度</NuxtLink></li>
                    <li><NuxtLink to="/">申请加入</NuxtLink></li>
                    <li><NuxtLink to="/">项目官网</NuxtLink></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="headerNavBox-mobile">
        <div class="headerNavBox-mobile-welcome">
            欢迎来到全国法制资讯发布中心!
        </div>
        <div class="headerNavBox-mobile-btn">
            首页
            <img src="@/public/index/btn.png" alt="" @click="openTopMenu = 2">
        </div>
        <div v-if="openTopMenu == 2" class="headerNavBox-mobile-menu">
            <div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/" target="_blank">用户登录</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink>
                    <NuxtLink to="/sannongzixunzhifuxinxi/list-1.html">政策法规</NuxtLink>
                    <NuxtLink to="/">各地动态</NuxtLink>
                    <NuxtLink to="/">廉政时讯</NuxtLink>
                    <NuxtLink to="/">政策解读</NuxtLink>
                    <NuxtLink to="/">百家争鸣</NuxtLink>
                    <NuxtLink to="/">经济与法</NuxtLink>
                    <NuxtLink to="/">法治建设</NuxtLink>
                    <NuxtLink to="/">法纪通报</NuxtLink>
                    <NuxtLink to="/">社会调研</NuxtLink>
                    <NuxtLink to="/">法制文化</NuxtLink>
                    <NuxtLink to="/">特别关注</NuxtLink>
                    <NuxtLink to="/">媒体视点</NuxtLink>
                    <NuxtLink to="/">重点播报</NuxtLink>
                    <NuxtLink to="/">今日说法</NuxtLink>
                    <NuxtLink to="/">法制技术</NuxtLink>
                    <NuxtLink to="/">执法在线</NuxtLink>
                    <NuxtLink to="/">举报投诉</NuxtLink>
                    <NuxtLink to="/">法制观察</NuxtLink>
                    <NuxtLink to="/">典型案例</NuxtLink>
                    <NuxtLink to="/">百姓话题</NuxtLink>
                    <NuxtLink to="/">法制活动</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink>
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink>
                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink>
                    <NuxtLink to="/">志愿服务</NuxtLink>
                    <NuxtLink to="/">公益活动</NuxtLink>
                    <NuxtLink to="/">在线服务</NuxtLink>
                    <NuxtLink to="/">网民留言</NuxtLink>
                    <NuxtLink to="/">法制知识</NuxtLink>
                    <NuxtLink to="/">法律咨询</NuxtLink>
                    <NuxtLink to="/">通知公告</NuxtLink>
                    <NuxtLink to="/">官网导航</NuxtLink>
                </div>
                <div class="headerNavBox-mobile-menu-list">
                    <NuxtLink to="/">人员查询</NuxtLink>
                    <NuxtLink to="/">车辆查询</NuxtLink>
                    <NuxtLink to="/">地市中心</NuxtLink>
                    <NuxtLink to="/">调研选题</NuxtLink>
                    <NuxtLink to="/">介绍信查询</NuxtLink>
                    <NuxtLink to="/">核心网站</NuxtLink>
                    <NuxtLink to="/">政务百网</NuxtLink>
                    <NuxtLink to="/">行业百网</NuxtLink>
                    <NuxtLink to="/">规章制度</NuxtLink>
                    <NuxtLink to="/">申请加入</NuxtLink>
                    <NuxtLink to="/">项目官网</NuxtLink>
                </div>
            </div>
            <div class="headerNavBox-mobile-menu-button">
                <img src="@/public/index/no.png" alt="" @click="openTopMenu = 1">
            </div>
        </div>
    </div>
</template>

<script setup>
//1.加载依赖 start ---------------------------------------->
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue';
import { ElSelect, ElOption } from 'element-plus'
import { useRoute } from 'vue-router'; 
const showZonePanel = ref(false)
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;
const route = useRoute();
const routeId = route.params.id; //获得该页面的id
//1.加载依赖 end ---------------------------------------->

//2.加载模块数据 start ---------------------------------------->
// const navigation1 = ref("");
const navigation1 = useState('globalNavData', () => ([]))
async function getPageData2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': 0,
            'num': 35
        },
    });
    navigation1.value = mkdata.data;
}
getPageData2();
const getLinkPath = (item) => {
    if (item.is_url == 1) {
        return `${item.web_url}`;
    } else if (item.children_count == 0) {
        return `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        return `/${item.aLIas_pinyin}/index.html`;
    }
}
//2.加载模块数据 end ---------------------------------------->

//3.职能部门 start ---------------------------------------->
let department = ref("")
const depValue = ref("")
const typeValue = ref("")
//3.职能部门 end ---------------------------------------->

//4.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//4.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
//4.2 市
let city = ref("")
let cityid = ref("")
let cityList = ref("")
//4.3 县
let region = ref("")
let regionid = ref("")
let regionList = ref("")
//选择市
let change = async (id) => {
    provinceid.value = id;
    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    cityList.value = shengData.data;
    regionList.value = [];// 清空县 
}

//选择县
let change1 = async (id) => {
    cityid.value = id;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': id,
        },
    });
    regionList.value = xianData.data;
}
let change2 = async (id) => {
    regionid.value = id;
}
//4.展示行政区划 end ---------------------------------------->

//5.执行搜索 start ---------------------------------------->
const getcityid = ref("")
//获得cityid和11
let goToPrimary = async () => {
    if (province.value != "") { getcityid.value = province.value }
    if (city.value != "") { getcityid.value = city.value }
    if (region.value != "") { getcityid.value = region.value }
    console.log("getcityid.value=======",getcityid.value)
    if (province.value == "" && city.value == "" && region.value == "" && depValue.value == "") {
        ElMessage.error('请选择行政区划或者职能部门！')
    } else {
        const route = `/search/search?catids=${getcityid.value}&department_id=${depValue.value}`;
        window.location.href = route;
    }
}
const close_panel_fun = () => {
    foot_btn_clear_fun();
    showZonePanel.value = false;
}
const foot_btn_clear_fun = () => {
    regionList.value = [];// 清空县 
    region.value = "";// 清空县 名称
    city.value = "";// 清空市 名称
    cityList.value = [];// 清空市
    province.value = "";// 清空省 名称
    provinceid.value = "";// 清空省 id
}
let shake_bool = true // 声明在组件作用域顶部==防抖
const nav_department_drop_a_fun = (departmentId) => {
    if(shake_bool===true){//第1次点击
        shake_bool = false;
        depValue.value = departmentId;
        goToPrimary();
        // 行政职能查询
            ElMessage({
            message: '页面跳转中请稍等',
            type: 'success'
        });
        nav_department_drop_a_fun.timer = setTimeout(() => {
            shake_bool = true;
        }, 3333);
    }else{
        ElMessage({
            message: '请勿重复点击',
            type: 'warning'
        });
    }
}
//5.执行搜索 end ---------------------------------------->
onMounted(async () => {
    //从客户端获取行政职能部门 加快打开速度
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response = await fetch($webUrl + '/web/selectWebsiteDepartment', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result = await response.json();
        department.value = result.data;
    } catch (error) {
        console.error('获取部门数据失败:', error);
    }
    //从客户端获取行政区划
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result2 = await response2.json();
        provinceList.value = result2.data;
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }
    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
    const parentElement = document.querySelector('.nav_in');
    if (targetElement && parentElement) {
        const targetRect = targetElement.getBoundingClientRect();
        const parentRect = parentElement.getBoundingClientRect();
        const distanceToParentLeft = targetRect.left - parentRect.left;
        const navigationElement = document.querySelector('.partOne .navigationOne');
        if (navigationElement) {
            navigationElement.scrollLeft = distanceToParentLeft - 66;
        }
    }             
})

//打开顶部菜单 start ---------------------------------------->
const openTopMenu = ref(1)
//打开顶部菜单 end ---------------------------------------->
</script>

<style lang="less" scoped>
//自适应 start ---------------------------------------->
@media screen and (min-width: 1401px) {
    .headerNavBox-mobile {
        display: none;
    }
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
    }
    .headerNavBox {
        text-align: center;
        a {
            width: 100PX !important;
            margin: 0 10PX !important;
            display: inline-block;
            height: 40PX !important;
            line-height: 40PX !important;
            background: #158d91;
            text-align: center;
            font-size: 18PX !important;
            color: #fff;
        }
    }
    .headerNavMainBox {
        max-width: 1400PX !important;
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        background: #fff;
        .headerNavTop,.headerNavCenter,.headerNavBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            ul {
                width: 95%;
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 120PX !important;
                    height: 35PX !important;
                    line-height: 35PX !important;
                    text-align: center;
                    display: flex;
                    a {
                        font-size: 16PX !important;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }
        .headerNavTop {
            width: 100%;
            overflow: hidden;
            background: #158d91;
            .first {
                width: 5%;
                height: 70PX !important;
                line-height: 58PX !important;
                overflow: hidden;
                float: left;
                text-align: center;
                a {
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavCenter {
            width: 100%;
            overflow: hidden;
            background: #0072ff;
            margin-top: 4PX !important;
            .first {
                width: 5%;
                height: 40PX !important;
                line-height: 40PX !important;
                float: left;
                color: #fff;
                font-size: 16PX !important;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavBottom {
            background: #f90;
            margin-top: 4PX !important;
            overflow: hidden;
            .first {
                width: 5%;
                height: 40PX !important;
                line-height: 40PX !important;
                float: left;
                color: #fff;
                font-size: 16PX !important;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 16PX !important;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
    
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
    .headerNavBox-mobile {
        display: none;
    }
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        background: #fff;
    }
    .headerNavBox {
        text-align: center;
        a {
            width: 100PX;
            margin: 0 10px;
            display: inline-block;
            height: 40PX;
            line-height: 40PX;
            background: #158d91;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
    }
    .headerNavMainBox {
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        .headerNavTop,.headerNavCenter,.headerNavBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            ul {
                width: 95%;
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 12.5%;
                    height: 30PX;
                    line-height: 30PX;
                    text-align: center;
                    a {
                        font-size: 11px;
                        color: #fff;
                        font-weight: bold;
                        display: block;
                    }
                }
            }
        }
        .headerNavTop {
            width: 100%;
            //height: 70px;
            overflow: hidden;
            background: #158d91;
            .first {
                //height: 70px;
                padding-left: 5px;
                overflow: hidden;
                float: left;
                text-align: center;
                a {
                    font-size: 14px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavCenter {
            width: 100%;
            overflow: hidden;
            background: #0072ff;
            margin-top: 4px;
            .first {
                padding-left: 5px;
                float: left;
                color: #fff;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 14px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavBottom {
            background: #f90;
            margin-top: 4px;
            overflow: hidden;
            .first {
                padding-left: 5px;
                float: left;
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 14px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
}
@media screen and (max-width: 800px) {
    .headerNav-pc {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        display: none;
    }
    .headerNavBox {
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 5px;
        a {
            width: 19%;
            display: inline-block;
            height: 60px;
            line-height: 60px;
            background: #158d91;
            text-align: center;
            font-size: 24px;
            color: #fff;
            text-align: center;
        }
    }
    .headerNavMainBox {
        width: 100%;
        overflow: hidden;
        margin: 20px auto 0;
        .headerNavTop,.headerNavCenter,.headerNavBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            ul {
                width: 95%;
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 120px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    a {
                        font-size: 16px;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }
        .headerNavTop {
            width: 100%;
            //height: 70px;
            overflow: hidden;
            background: #158d91;
            .first {
                height: 70px;
                padding-left: 5px;
                overflow: hidden;
                float: left;
                text-align: center;
                a {
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavCenter {
            width: 100%;
            //height: 40px;
            overflow: hidden;
            background: #0072ff;
            margin-top: 4px;
            .first {
                height: 40px;
                padding-left: 5px;
                float: left;
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
        .headerNavBottom {
            background: #f90;
            //height: 40px;
            margin-top: 4px;
            overflow: hidden;
            .first {
                //width: 5%;
                height: 40px;
                padding-left: 5px;
                float: left;
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                a {
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
    .headerNavBox-mobile {
        position: fixed;
        top: 0;
        width: 100%;
        height: 80px;
        background: #f1f1f1;
        border-bottom: 1px solid #ccc;
        padding: 0 40px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .headerNavBox-mobile-welcome {
            font-size: 32px;
        }
        .headerNavBox-mobile-btn {
            font-size: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                width: 40px;
                height: 40px;
                margin-left: 20px;
            }
        }
    }
    .headerNavBox-mobile-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: #158d91;
        box-sizing: border-box;
        padding: 20px;
        a {
            font-size: 40px;
            color: #fff;
            margin: 0 10px;
            white-space: nowrap;
        }
        .headerNavBox-mobile-menu-list {
            border-bottom: 1px solid #c1c1c1;
            padding: 30px 0;
        }
        .headerNavBox-mobile-menu-button {
            padding: 20px 0;
            img {
                width: 70px;
                height: 70px;
                display: block;
                margin: 0 auto;
            }
        }
    }
}
//自适应 end ---------------------------------------->
</style>