fzxfb_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="/list-cheliangchaxun.html">所有选题</NuxtLink>
            </div>
            <ul class="xtlist">
                <li v-for="item in topicDataList" :key="item.id">{{ item.title }}</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" @click="change2(item.id)" />
                    </el-select>
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="topicTitle" placeholder="选题名称" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button" @click="getTopicList">查询</button>
                    <button class="reset-button" @click="resetTopicQuery">重置</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="carLicense" placeholder="车牌" />
                </div>
                <div class="search-right-input-box">
                    <el-input v-model="carModel" placeholder="车型" />
                </div>
                <div class="search-right-button-box">
                    <button class="submit-button" @click="getCarQuery">查询</button>
                    <button class="reset-button" @click="resetCarQuery">重置</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 route = useRoute();
//1.页面依赖 end ---------------------------------------->
//2.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//2.1 省
let province = ref("")
let provinceid = ref("")
let provinceList = ref("")
//2.2 市
let city = ref("")
let cityid = ref("")
let cityList = ref("")
//2.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;
        }
    }
})
//2.展示行政区划 end ---------------------------------------->
//3.表单 start---------------------------------------->
//3.1 调研选题 start---------------------------------------->
//获得路由中的参数
const routerProvinceid = parseInt(route.query.provinceid);
const routerCityid = parseInt(route.query.cityid);
const routerRegionid = parseInt(route.query.regionid);
const routerTitle = route.query.title;
//选题名称
let topicTitle = ref("");
let topicDataList = ref([]);
const getTopicList = async () => {
    //获得调研选题列表
    const personList = await requestDataPromise('/web/getWebsiteResearchTopic', {
        method: 'GET',
        query: {
            'title':topicTitle.value,
            'sheng':provinceid.value,
            'shi':cityid.value,
            'qu':regionid.value,
            'page':1,
            'page_size':20
        },
    });
    if(personList.code == 200){
        //查询成功
        topicDataList.value = personList.data.rows;
    }else{
        topicDataList.value = [];
        //查询失败
        console.log(personList.message)
    }
}
//判断是直接访问还是携带参数跳转
if(routerProvinceid && routerCityid && routerRegionid && routerTitle){
    provinceid.value = routerProvinceid;
    cityid.value = routerCityid;
    regionid.value = routerRegionid;
    topicTitle.value = routerTitle;
    //携带参数就查询参数中的值
    getTopicList();
}else{
    //默认查询所有
    getTopicList();
}
//重置选项
const resetTopicQuery = () => {
    provinceid.value = "";
    cityid.value = "";
    regionid.value = "";
    topicTitle.value = "";
}
//3.1 调研选题 end---------------------------------------->
//3.2 车辆查询 start---------------------------------------->
let carLicense = ref("");//车牌
let carModel = ref("");//车型
//跳转到车辆查询
const getCarQuery = () => {
    navigateTo({
        path: '/list-cheliangchaxun.html',
        query: { 
            chepaihao: carLicense.value,
            chexing: carModel.value,
        }
    })
}
//重置车辆查询
let resetCarQuery = () => {
    carLicense.value = "";
    carModel.value = "";
}
//3.2 车辆查询 end---------------------------------------->
//3.表单 end---------------------------------------->
</script>
    <style lang="less" scoped>
        //面包屑
        .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-radius: 2PX;
                            font-size: 16PX;
                        }
                        :deep(.el-select__wrapper) {
                            height: 40PX;
                            line-height: 40PX;
                            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;
        }
        .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;
        }
        .search-left-box {
            width: 60%;
        }
        .breadcrumb-box .inner {
            height: 22PX;
            margin-top: 20PX;
            margin-bottom: 20PX;
            font-size: 20PX;
            line-height: 23PX;
            margin-bottom: 10PX;
            padding: 20PX 20PX 20PX 0;
        }
        @media screen and (min-width: 1401px) {
            .search-right-box :deep(.el-select .el-select__wrapper) {
                min-height: 40PX !important;
                height: 40PX !important;
                padding: 10PX 10PX;
                font-size: 14PX;
            }
            .search-right-box :deep(.el-select__caret) {
                font-size: 18PX;
            }
            .custom-select-dropdown .el-select-dropdown__item {
                height: 33PX;
                line-height: 33PX;
                font-size: 14PX;
            }
        }
        @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) {
            //你的样式
            .search-right-box :deep(.el-select .el-select__wrapper) {
                min-height: 40PX !important;
                height: 40PX !important;
                padding: 10PX 10PX;
                font-size: 14PX;
            }
            .custom-select-dropdown .el-select-dropdown__item {
                height: 33PX;
                line-height: 33PX;
                font-size: 14PX;
            }
        }
        @media screen and (max-width: 800px) {
            //你的样式
            .search-left-box {
                width: 100%;
                float: none;
            }
            .breadcrumb-box :deep(.el-icon) {}
            .breadcrumb-box .inner span.location,
            .breadcrumb-box .inner span {
                font-size: 24px;
            }
            .breadcrumb-box .inner a {
                font-size: 24px;
                height: 55px;
                line-height: 55px;
            }
            .breadcrumb-box .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
                font-size: 24px;
                height: 55px;
                line-height: 55px;
            }
            .search-box .search-left-box .dytlt {
                height: 50px;
                line-height: 50px;
                margin: 0px auto 30px;
                border-bottom: 1px solid #ccc;
            }
            .search-box .search-left-box .dytlt a {
                float: left;
                width: auto;
                padding: 0px 10px;
                height: 50px;
                font-size: 26px;
            }
            .search-box .search-left-box .pagesnav {
                margin: 30px 0 50px 0;
            }
            .search-box .search-left-box .pagesnav a {
                padding: 10px 16px;
                margin-left: 0px;
                font-size: 20px;
                border-radius: 14px;
            }
            .search-box .search-left-box .xtlist li {
                height: 50px;
                line-height: 50px;
                font-size: 20px;
            }
            .search-box .search-right-box {
                width: 100%;
                float: none;
            }
            .search-box .search-right-box .search-right-box-form h3 {
                line-height: 50px;
                font-size: 26px;
            }
            .search-box .search-right-box .search-right-box-form .search-right-form-text {
                height: 80px;
                line-height: 80px;
                font-size: 26px;
            }
            .search-box .search-right-box .search-right-box-form .search-right-select-box {
                font-size: 24px;
                margin-bottom: 30px;
            }
            :deep(.el-select .el-select__wrapper) {
                min-height: 50px !important;
                height: 50px !important;
                box-sizing: border-box;
            }
            .search-box .search-right-box .search-right-box-form .search-right-input-box {
                margin-bottom: 30px;
            }
            .search-right-input-box :deep(.el-input__wrapper) {
                height: 50px !important;
                line-height: 50px !important;
                font-size: 16px !important;
            }
            .search-right-input-box :deep(.el-input__wrapper) {
                height: 55px !important;
            }
            .search-box .search-right-box .search-right-box-form .search-right-button-box .submit-button {
                width: 100px;
                height: 50px;
                line-height: 50px;
                font-size: 26px;
                margin-right: 30px;
            }
            .search-box .search-right-box .search-right-box-form .search-right-button-box .reset-button {
                width: 100px;
                height: 50px;
                line-height: 50px;
                font-size: 26px;
            }
        }
        @media screen and (max-width: 400px) {
            :deep(.el-select .el-select__wrapper) {
                min-height: 66px !important;
                height: 66px !important;
            }
        }
    </style>
    <style>
        @media screen and (min-width: 801px) and (max-width: 1400px) {
            .custom-select-dropdown .el-select-dropdown__empty {
                font-size: 16PX;
                height: 33PX;
                line-height: 33PX;
            }
        }
        @media screen and (min-width: 1401px) {
            .custom-select-dropdown .el-select-dropdown__empty {
                font-size: 16PX;
                height: 33PX;
                line-height: 33PX;
            }
        }
    </style>