407 lines
10 KiB
Vue
407 lines
10 KiB
Vue
<template>
|
|
<div
|
|
class="box"
|
|
style="background-size: cover; background-color: #fff"
|
|
:style="{ backgroundImage: state.banner ? `url(${state.banner})` : '' }"
|
|
>
|
|
<div>
|
|
<el-row>
|
|
<el-col :push="4" :sm="10" :md="12">
|
|
<div class="tab">
|
|
<div
|
|
v-for="(v, index) in state.tabList"
|
|
:class="{ active: state.tabIndex == index }"
|
|
@click="switchTab(index)"
|
|
>
|
|
<!-- :style="v === '找实验室' ? `display:none` : ''" -->
|
|
{{ v }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div style="height: 16px"></div>
|
|
<el-form
|
|
:model="queryParams"
|
|
:rules="queryRules"
|
|
ref="queryRef"
|
|
@submit.prevent
|
|
>
|
|
<el-row>
|
|
<el-col :push="4" :sm="10" :md="12">
|
|
<el-form-item prop="keyword">
|
|
<el-input
|
|
v-model.trim="queryParams.keyword"
|
|
placeholder="请输入检索词"
|
|
@keyup.enter="handleQuery"
|
|
>
|
|
<template #suffix v-if="false">
|
|
<el-form-item prop="queryType">
|
|
<el-select
|
|
v-model="queryParams.queryType"
|
|
placeholder="请选择搜索类型"
|
|
class="search-type-select"
|
|
>
|
|
<el-option
|
|
v-for="item in queryTypeList[state.tabIndex]"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<!-- <template #append>
|
|
<el-button
|
|
class="x_btns"
|
|
type="primary"
|
|
icon="Search"
|
|
@click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
</template> -->
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :push="4" :sm="10" :md="8">
|
|
<div class="btnsWrap">
|
|
<el-button
|
|
class="x_btns"
|
|
type="primary"
|
|
icon="Search"
|
|
@click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
<!-- <el-button class="x_btns" @click="handleQuery"
|
|
>发布需求</el-button
|
|
> -->
|
|
<!-- <el-button class="x_btns" @click="handleQuery"
|
|
>专家机构录入</el-button
|
|
> -->
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div style="height: 15vh"></div>
|
|
<el-row>
|
|
<el-col :push="3" :pull="3" :span="18">
|
|
<div class="numBox">
|
|
<div>
|
|
<div class="val">{{ state.data.patent_count }}</div>
|
|
<div class="des">专利数量</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">{{ state.data.expert_count }}</div>
|
|
<div class="des">专家数量</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">
|
|
{{ state.data.laboratory_count }}
|
|
</div>
|
|
<div class="des">实验室数量</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">{{ state.data.demand_count }}</div>
|
|
<div class="des">需求数量</div>
|
|
</div>
|
|
<!-- <div>
|
|
<div class="val">{{ state.data.docking_count }}</div>
|
|
<div class="des">对接数量</div>
|
|
</div> -->
|
|
<div>
|
|
<div class="val">{{ state.data.company_count }}</div>
|
|
<div class="des">企业数量</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <div class="icp-beian">
|
|
<el-link type="primary" href="https://beian.miit.gov.cn/"
|
|
>皖ICP备18001784号</el-link
|
|
>
|
|
</div> -->
|
|
</div>
|
|
<!-- <webFooter></webFooter> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// TODO:成果搜索添加按成果介绍搜索，需求搜索添加按需求描述搜索,添加实验室搜索
|
|
import { onMounted, reactive, watch } from "vue";
|
|
import { banner } from "@/api/website/home/index";
|
|
import { useRouter } from "vue-router";
|
|
import { getAllCount } from "../../../../api/website/home";
|
|
// import request from "@/utils/request";
|
|
|
|
const router = useRouter();
|
|
// function indexData() {
|
|
// return request({
|
|
// url: "/v1/index",
|
|
// method: "get",
|
|
// });
|
|
// }
|
|
|
|
const testEnter = (ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
console.log("rere");
|
|
};
|
|
const queryParams = reactive({
|
|
// queryType: undefined,
|
|
keyword: "",
|
|
queryType: "2",
|
|
});
|
|
const queryRules = reactive({
|
|
queryType: [{ required: true, trigger: "change", message: "请选择搜索类型" }],
|
|
keyword: [{ required: true, trigger: "blur", message: "请选择搜索关键词" }],
|
|
});
|
|
const queryRef = ref();
|
|
const searchTypeList = ref([
|
|
"enterprise",
|
|
"achievement",
|
|
"lab",
|
|
"patent",
|
|
"expert",
|
|
// "serviceDemand",
|
|
"technologyDemand",
|
|
]);
|
|
// const patentQueryTypeList = ;
|
|
const queryTypeList = [
|
|
[
|
|
{ value: "1", label: "通过企业名称搜索" },
|
|
{ value: "2", label: "通过企业简介搜索" },
|
|
{ value: "3", label: "通过关键词搜索" },
|
|
{ value: "4", label: "通过生产方向搜索" },
|
|
{ value: "5", label: "通过产品搜索" },
|
|
],
|
|
[
|
|
{
|
|
value: "1",
|
|
label: "通过成果名称搜索",
|
|
},
|
|
{
|
|
value: "2",
|
|
label: "通过成果简介搜索",
|
|
},
|
|
],
|
|
[
|
|
{ value: "1", label: "通过实验室名称搜索" },
|
|
{ value: "2", label: "通过实验室简介搜索" },
|
|
],
|
|
[
|
|
{ value: "1", label: "通过标题搜索" },
|
|
{ value: "2", label: "通过摘要搜索" },
|
|
{ value: "3", label: "通过主权项搜索" },
|
|
{ value: "4", label: "通过作者搜索" },
|
|
],
|
|
[
|
|
{ value: "1", label: "通过专家名称搜索" },
|
|
{ value: "2", label: "通过个人简介搜索" },
|
|
{ value: "3", label: "通过关键词搜索" },
|
|
],
|
|
[
|
|
{ value: "1", label: "通过需求标题搜索" },
|
|
{ value: "2", label: "通过需求简介搜索" },
|
|
],
|
|
[],
|
|
[
|
|
{ value: "1", label: "通过实验室名称搜索" },
|
|
{ value: "2", label: "通过实验室简介搜索" },
|
|
],
|
|
// [{ value: "1", label: "通过标题搜索" }],
|
|
];
|
|
|
|
const handleDetail = async (mode, keyword, queryType) => {
|
|
console.log(mode);
|
|
await queryRef.value.validate();
|
|
const routeData = router.resolve({
|
|
path: `/searchList/${mode}`,
|
|
query: { keyword, queryType },
|
|
});
|
|
// window.open(routeData.href, "_blank");
|
|
router.push(routeData);
|
|
};
|
|
|
|
function handleQuery() {
|
|
// console.log(1234);
|
|
// console.log(queryParams.keyword, state.tabIndex);
|
|
// return;
|
|
handleDetail(
|
|
searchTypeList.value[state.tabIndex],
|
|
queryParams.keyword,
|
|
queryParams.queryType
|
|
);
|
|
}
|
|
|
|
const state = reactive({
|
|
keyword: "",
|
|
tabList: [
|
|
"找企业",
|
|
"找成果",
|
|
"找实验室",
|
|
"找专利",
|
|
"找专家",
|
|
// "接服务需求",
|
|
"接需求",
|
|
],
|
|
tabIndex: 0,
|
|
banner: "",
|
|
data: {
|
|
expert_count: 0,
|
|
company_count: 0,
|
|
patent_count: 0,
|
|
achievement_count: 0,
|
|
demand_count: 0,
|
|
docking_count: 0,
|
|
},
|
|
});
|
|
|
|
const switchTab = (index) => {
|
|
state.tabIndex = index;
|
|
// queryParams.queryType = undefined
|
|
// if(index)
|
|
queryRef.value.resetFields("queryType");
|
|
};
|
|
|
|
// watch(
|
|
// () => state.tabIndex,
|
|
// (val) => {
|
|
// console.log(val);
|
|
// // return [2, 0][val];
|
|
// queryParams.queryType = ["2", "2", "2", "2", "2", "2"][val];
|
|
// },
|
|
// { immediate: true }
|
|
// );
|
|
onMounted(() => {
|
|
banner({ locals: "首页背景" }).then((resp) => {
|
|
// console.log(resp);
|
|
state.banner = resp.data[0].images;
|
|
});
|
|
// state.data = {
|
|
// expert_count: 15,
|
|
// company_count: 9,
|
|
// patent_count: 181233,
|
|
// achievement_count: 12,
|
|
// demand_count: 0,
|
|
// docking_count: 0,
|
|
// distribution: {
|
|
// expert: null,
|
|
// laboratory: null,
|
|
// demand: null,
|
|
// patent: null,
|
|
// achievement: null,
|
|
// company: null,
|
|
// },
|
|
// };
|
|
getAllCount().then((res) => {
|
|
// if (200 == res.code) {
|
|
state.data = res.data;
|
|
// }
|
|
});
|
|
// console.log("onmunted");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.x_btns {
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
}
|
|
.box {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
& > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.btnsWrap {
|
|
margin: 0 0 0 40px;
|
|
.el-button {
|
|
height: 36px;
|
|
padding: 10px 25px;
|
|
}
|
|
}
|
|
|
|
.numBox {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
& > div {
|
|
flex: 1;
|
|
height: 200px;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
.val {
|
|
font-size: 36px;
|
|
font-family: DIN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.des {
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: 630px;
|
|
height: 42px;
|
|
overflow: hidden;
|
|
& > div {
|
|
width: 90px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
float: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
& > div.active {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 38px;
|
|
background-image: url(./img/index1-bg1.png);
|
|
background-size: cover;
|
|
}
|
|
}
|
|
.wrap {
|
|
padding-left: 460px;
|
|
}
|
|
.search {
|
|
width: 720px;
|
|
}
|
|
.icp-beian {
|
|
width: 100vw;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
}
|
|
// :deep(.el-input__inner) {
|
|
// border: 0px solid blueviolet !important;
|
|
// }
|
|
.search-type-select {
|
|
margin: 1px 0;
|
|
:deep(.el-input__inner) {
|
|
// border: 0px solid blueviolet !important;
|
|
height: 30px;
|
|
box-shadow: none;
|
|
}
|
|
:deep(.el-input.is-focus .el-input__inner) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|