fzfzcj_org_cn/components/zoom/diaoyanxuanti.vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation></HomePageNavigation>
    <!-- 面包屑导航 -->
    <div class="breadcrumb-box">
        <div class="inner">
            <span class="location">当前位置：</span>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>
                    <NuxtLink to="/">首页</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="phone_breadcrumb_text">调研选题</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <!-- 查询 -->
    <div class="search-box">
        <div class="search-left-box">
            <div class="dytlt">
                <NuxtLink to="/">所有选题</NuxtLink>
            </div>
            <ul class="xtlist">
                <li>黑龙江建三江管理局前进农场金三角半地下门市污水倒灌问题及责任追溯调研</li>
                <li>关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
                <li>关于山东省曹县未知名企业漂洗废布废料是否造成污染一事需要调研的申请</li>
                <li>关于山西省吕梁市临县城庄镇石盘头村梓腾种养专业合作社2025年12月1日发生一起安全事故致人死亡，涉嫌工伤瞒报进行调研</li>
                <li>关于隆回县北山镇小伍村农村自建房违规圈地一事的调研</li>
                <li>关于北票龙潭盖宏彦涉嫌在朝阳黄金冶炼厂倒卖氰化尾渣一事进行调研核实</li>
                <li>关于唐县黄石口镇一企业违规占地一事的调研</li>
                <li>关于怀仁市煤炭企业与生态环境措施相关事宜进行调研</li>
                <li>关于荆门市掇刀区团林铺镇人民政府违法强拆何金石房屋，猪场的违法行为和补偿不足一事的调研</li>
                <li>关于临湘市桃林镇坪上村农村自建房违规圈地一事的调研</li>
                <li>关于大同市恒安街北侧城市棚户区改造项目（s6、s7、s8）拒付高佑工程款相关事宜进行调研</li>
                <li>关于开封市杞县马廷进自家宅基地被侵占一事调研核实</li>
                <li>关于新乡市原阳县信访局陈庆利涉嫌隐瞒信访事项、打压信访人等违规行为一事进行调研核实</li>
                <li>关于洞口县岩山镇陡山村农村自建房违规圈地一事调研</li>
                <li>关于洪江市安江镇白虎脑社区一别墅违规圈地一事调研</li>
                <li>关于济宁市泗水县石料加工污水外排，环保设置不齐全调研申请</li>
                <li>关于济宁市一无名石料加工厂在组织生产期间无视环保要求，污水外排，环保设置不齐全不使用，需要实地调研特申请</li>
                <li>关于陕西星火煤业有限责任公司于2025年6月19日发生事故致人死亡，涉嫌公伤瞒报一事进行调研核实</li>
                <li>关于中科招商增股中违规操作,致投资者合法权益严重受损等情况进行调研核实</li>
                <li>关于山西怀仁中能芦子沟何家堡煤业有限责任公司越界开釆一事进行调研</li>
            </ul>
            <div class="pagesnav">
                <a>更多选题请联系客服</a>
            </div>
        </div>
        <div class="search-right-box">
            <!--选题查询-->
            <div class="search-right-box-form">
                <h3>选题查询</h3>
                <div class="search-right-form-text">
                    请输入您想要查询的选题
                </div>
                <div class="search-right-select-box">
                    地区：
                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                            @click="change(item.id)" :value="item.id" />
                    </el-select>
                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                            @click="change1(item.id)" :value="item.id" />
                    </el-select>
                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 120px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="input" placeholder="选题名称" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button">查询</button>
                    <button class="reset-button">重置</button>
                </div>
            </div>
            <!--车辆查询-->
            <div class="search-right-box-form">
                <h3>车辆查询</h3>
                <div class="search-right-form-text">请输入相关工作车辆或车牌号</div>
                <div class="search-right-input-box">
                    <el-input v-model="input" placeholder="车牌" />
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="input" placeholder="车型" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button">查询</button>
                    <button class="reset-button">重置</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <HomeFoot></HomeFoot>
</template>
<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;
//1.1 获得跳转过来的id
const route = useRoute();
//获得详情id
const articleId = parseInt(route.params.id); //获得该页面的id
//获得当前的完整路径
const fullPath = route.path;
//拆分，取出来中间这一段，然后提取数字部分
const segments = fullPath.split('/');
const targetSegment = segments[1];
// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
// let routeId = 20 //排除路径错误可以打开这个
// const routeId = numberPart;
let routeId;
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId = getRouteId.data.category_id
} else {
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    console.log("错误位置：通过url路径查询导航池id")
    console.log("后端错误反馈：", getRouteId.message)
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//1.2 获得父级栏目的名称、id
const parent_name = ref([]);
const parent_id = ref([]);
const parent_pinyin = ref("");
const parent_children_count = ref(0)
let getParentNav = async () => {
    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
        method: 'GET',
        query: {
            'catid': routeId
        },
    });
    console.log("获取父级栏目数据")
    console.log(listData)
    if (listData.code == 200) {
        console.log(listData.data);
        parent_name.value = listData.data.alias;
        parent_id.value = listData.data.parent_id;
        parent_pinyin.value = listData.data.aLIas_pinyin;
        parent_children_count.value = listData.data.children_count;
    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：获取面包屑导航")
        console.log("后端错误反馈：", listData.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
//获得父级栏目详情
getParentNav();
//1.页面依赖 end ---------------------------------------->
//2.页面数据 start ---------------------------------------->
//2.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//2.2 发布日期
const time = ref("");
//2.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//是否展示投票
const articleChoice = ref(false);
//2.4获取详情
async function getPageData() {
    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
        method: 'GET',
        query: {
            'articleid': articleId
        },
    });
    if (mkdata.code == 200) {
        //判断是否显示投票
        if (mkdata.data.is_survey == 1) {
            console.log("本篇文章含有投票！")
            articleChoice.value = true;
            getVoteList();
        }
        //获取内容
        newsDetail.value = mkdata.data;
        //获取路径
        routLevelTitle.value = newsDetail.value.cat_name;
        routLevelId.value = newsDetail.value.category_id;
        //获取发布时间
        time.value = newsDetail.value.updated_at.split(' ')[0];
        //修正标题长度
        if (newsDetail.value.title.length >= 30) {
            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
        } else {
            routeNewsTtitle.value = newsDetail.value.title
        }
    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：获取详情内容")
        console.log("后端错误反馈：", mkdata.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
getPageData();
//2.5 获得广告
//广告列表
let adImg1 = ref([]);
onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
})
//2.页面数据 end ---------------------------------------->
//3.设置seo信息 start---------------------------------------->
//3.1 设置seo信息
const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
    method: 'GET',
    query: {
        'articleid': articleId
    },
});
if (setData.code == 200) {
    let seoTitle = setData.data.title;
    let seoDescription = setData.data.introduce;
    let seoKeywords = setData.data.keyword;
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;
    useSeoMeta({
        title: seoTitle + "_" + seoName + "_" + seoSuffix,
        meta: [
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
        ]
    });
} else {
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    console.log("错误位置：设置详情页面SEO数据")
    console.log("后端错误反馈：", setData.message)
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//3.设置seo信息 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;
}
onMounted(async () => {
    //从客户端获取行政区划
    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;
        }
    }
})
//4.展示行政区划 end ---------------------------------------->
//5.表单 start---------------------------------------->
let input = ref("");
let value = ref("1");
const submitForm = () => {
    console.log(input.value)
    console.log(value.value)
}
//5.表单 end---------------------------------------->
</script>
<style lang="less" scoped>
//@import url('@/assets/css/article/pc.less');
//@import url('@/assets/css/article/yd.less');
//面包屑
.breadcrumb-box {
    width: 1400px;
    margin: 0 auto;
    .inner {
        width: 100%;
        height: 22px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #666666;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #ccc;
        margin-bottom: 10px;
        padding: 20px 20px 20px 0;
        box-sizing: border-box;
        a {
            font-size: 16px;
            line-height: 20px;
            font-weight: normal !important;
            &:hover {
                color: #333
            }
        }
        span {
            font-size: 16px;
            color: #000;
            line-height: 20px;
            &.location {
                line-height: 20px;
            }
        }
    }
}
//搜索
.search-box {
    width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .search-left-box {
        .dytlt {
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin: 0px auto 20px;
            border-bottom: 1px solid #ccc;
            a {
                display: block;
                width: 100px;
                height: 40px;
                background: #007aff;
                color: #fff;
                font-size: 16px;
                text-align: center;
            }
        }
        .xtlist {
            width: 100%;
            height: auto;
            overflow: hidden;
            li {
                list-style: none;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                border-bottom: 1px solid #ccc;
            }
        }
        .pagesnav {
            margin: 20px 0 40px 0;
            a {
                padding: 6px 12px;
                margin-left: -1px;
                line-height: 1.42857143;
                color: #337ab7;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #ddd;
                font-size: 10px;
                border-radius: 4px;
                cursor: pointer;
                &:hover {
                    background-color: #eee;
                    border-color: #ddd;
                }
            }
        }
    }
    .search-right-box {
        width: 38%;
        box-sizing: border-box;
        .search-right-box-form {
            h3 {
                width: 100%;
                line-height: 40px;
                font-size: 18px;
                color: #000;
            }
            .search-right-form-text {
                display: block;
                width: 100%;
                height: 70px;
                line-height: 70px;
                text-align: center;
                font-size: 16px;
                color: #333;
            }
            .search-right-input-box {
                margin-bottom: 20px;
                :deep(.el-input__wrapper) {
                    height: 40px;
                    line-height: 40px;
                    border: 1px solid #000;
                    box-shadow: none;
                    border-radius: 2px;
                    font-size: 16px;
                    color: #333;
                }
                :deep(.el-select__wrapper) {
                    height: 40px;
                    line-height: 40px;
                    border: 1px solid #000;
                    box-shadow: none;
                    border-radius: 2px;
                    font-size: 16px;
                    color: #333;
                }
                :deep(.el-input__inner) {
                    color: #000;
                }
            }
            .search-right-button-box {
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 20px;
                button:first-child {
                    margin-right: 20px;
                }
                .submit-button {
                    display: block;
                    width: 90px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                    background: #027dc3;
                    outline: none;
                    border: none;
                    cursor: pointer;
                }
                .reset-button {
                    display: block;
                    width: 90px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 16px;
                    background: #ccc;
                    border: 1px solid #027dc3;
                    color: #027dc3;
                    outline: none;
                    cursor: pointer;
                }
            }
            .search-right-select-box {
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 20px;
                :deep(.el-select__wrapper) {
                    margin-left: 10px;
                }
                :deep(.el-select__placeholder) {
                    color: #000;
                }
            }
        }
    }
    .search-form1-submit-button {
        text-align: center;
        button {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #027dc3;
            color: #fff;
            font-size: 16px;
            margin: 0 auto;
            display: block;
            border: none;
            cursor: pointer;
        }
    }
}
.breadcrumb-box {
    width: 1400PX;
    margin: 0px auto 0px;
}
.el-breadcrumb {
    height: 22PX;
    line-height: 22PX;
}
.breadcrumb-box .inner span.location {
    font-size: 16PX;
    ;
    height: 22PX;
    ;
    line-height: 22PX;
    font-weight: normal;
}
.breadcrumb-box .inner a {
    font-size: 16PX;
    ;
    height: 22PX;
    line-height: 22PX;
    display: inline-block;
    font-weight: normal;
}
.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
    font-size: 16PX;
    ;
    height: 22PX;
    line-height: 22PX;
    font-weight: normal;
}
.breadcrumb-box:deep(.el-icon) {
    width: 16PX;
    height: 16PX;
}
.breadcrumb-box .inner span {
    font-size: 16PX;
    ;
    height: 22PX;
    line-height: 22PX;
}
.search-box {
    width: 1400PX;
    margin: 0px auto 0px;
}
//搜索
.search-box {
    width: 1400PX;
    .search-left-box {
        .dytlt {
            height: 40PX;
            line-height: 40PX;
            margin: 0PX auto 20PX;
            border-bottom: 1PX solid #ccc;
            a {
                width: 100PX;
                height: 40PX;
                font-size: 16PX;
            }
        }
        .xtlist {
            width: 100%;
            li {
                height: 40PX;
                line-height: 40PX;
                border-bottom: 1PX solid #ccc;
            }
        }
        .pagesnav {
            margin: 20PX 0 40PX 0;
            a {
                padding: 6PX 12PX;
                margin-left: -1PX;
                border: 1PX solid #ddd;
                font-size: 10PX;
                border-radius: 4PX;
            }
        }
    }
    .search-right-box {
        .search-right-box-form {
            h3 {
                line-height: 40PX;
                font-size: 18PX;
            }
            .search-right-form-text {
                height: 70PX;
                line-height: 70PX;
                font-size: 16PX;
            }
            .search-right-input-box {
                margin-bottom: 20PX;
                :deep(.el-input__wrapper) {
                    height: 40PX;
                    line-height: 40PX;
                    border: 1PX solid #000;
                    border-radius: 2PX;
                    font-size: 16PX;
                }
                :deep(.el-select__wrapper) {
                    height: 40PX;
                    line-height: 40PX;
                    border: 1PX solid #000;
                    border-radius: 2PX;
                    font-size: 16PX;
                }
            }
            .search-right-button-box {
                margin-bottom: 20PX;
                button:first-child {
                    margin-right: 20PX;
                }
                .submit-button {
                    width: 90PX;
                    height: 40PX;
                    line-height: 40PX;
                    font-size: 16PX;
                }
                .reset-button {
                    width: 90PX;
                    height: 40PX;
                    line-height: 40PX;
                    font-size: 16PX;
                    border: 1PX solid #027dc3;
                }
            }
            .search-right-select-box {
                font-size: 16PX;
                margin-bottom: 20PX;
                :deep(.el-select__wrapper) {
                    margin-left: 10PX;
                }
            }
        }
    }
    .search-form1-submit-button {
        button {
            width: 100PX;
            height: 40PX;
            line-height: 40PX;
            font-size: 16PX;
        }
    }
}
.xtlist li {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (min-width: 1401px) {
    //你的样式
}
@media screen and (max-width: 1400px) {
    .breadcrumb-box {
        width: 100%;
        margin: 0px auto 0px;
        box-sizing: border-box;
        padding: 0px 10px;
    }
    .newsList {
        width: 100%;
        box-sizing: border-box;
        padding: 0px 10px;
        margin: 0px auto 0px;
    }
    .search-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0px 10px;
        margin: 0px auto 0px;
    }
    .search-box {
        display: block;
    }
    .search-left-box {
        width: 60%;
        float: left;
    }
    .search-right-box {
        float: right;
    }
    .search-box .search-right-box .search-right-box-form .search-right-select-box {
        word-break: keep-all;
        white-space: nowrap;
    }
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
    //你的样式
}
@media screen and (max-width: 800px) {
    //你的样式
    .search-left-box {
        width: 100%;
    }
    .search-right-box {
        display: none;
    }
}
</style>
<style>
.custom-select-dropdown .el-select-dropdown__item {
    font-size: 16px;
    color: #333;
}
.custom-select-dropdown .el-select-dropdown__item:hover {
    background-color: #027dc3;
    color: #fff;
}
</style>