|
|
@@ -4,20 +4,167 @@
|
|
|
<el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
<el-col :span="24" class="iachievement">
|
|
|
<el-image class="image" :src="achievement" fit="fill" />
|
|
|
+ <div class="select">
|
|
|
+ <el-row class="select_1">
|
|
|
+ <el-col class="over" :span="4" v-if="oneList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">行业分市场：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in oneList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'one')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="4" v-if="twoList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">技术领域：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in twoList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'two')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="4" v-if="thrList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">成熟度：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in thrList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'thr')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="4" v-if="fourList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">出让方式：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in fourList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'four')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="4" v-if="fiveList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">交易价格：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in fiveList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'five')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="over" :span="4" v-if="sixList.length > 0">
|
|
|
+ <div class="list">
|
|
|
+ <div class="left">成果地区：</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="label" v-for="(item, index) in sixList" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, 'six')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="one">
|
|
|
- <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
|
|
|
- <el-col :span="3" class="left">{{ val.title }}</el-col>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">行业分市场</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button
|
|
|
+ class="title"
|
|
|
+ v-for="(item, index) in technologyList"
|
|
|
+ :key="index"
|
|
|
+ type="link"
|
|
|
+ size="samll"
|
|
|
+ @click="toSelect(item, 'one')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">技术领域</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button
|
|
|
+ class="title"
|
|
|
+ v-for="(item, index) in fieldList"
|
|
|
+ :key="index"
|
|
|
+ type="link"
|
|
|
+ size="samll"
|
|
|
+ @click="toSelect(item, 'two')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">成熟度</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button
|
|
|
+ class="title"
|
|
|
+ v-for="(item, index) in matureList"
|
|
|
+ :key="index"
|
|
|
+ type="link"
|
|
|
+ size="samll"
|
|
|
+ @click="toSelect(item, 'thr')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">出让方式</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button
|
|
|
+ class="title"
|
|
|
+ v-for="(item, index) in sellList"
|
|
|
+ :key="index"
|
|
|
+ type="link"
|
|
|
+ size="samll"
|
|
|
+ @click="toSelect(item, 'four')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">交易价格</el-col>
|
|
|
<el-col :span="21" class="right">
|
|
|
<a-button
|
|
|
class="title"
|
|
|
- v-for="(item, index) in val.list"
|
|
|
+ v-for="(item, index) in moneyList"
|
|
|
:key="index"
|
|
|
type="link"
|
|
|
size="samll"
|
|
|
- >{{ item.label }}</a-button
|
|
|
+ @click="toSelect(item, 'five')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
>
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="one_1">
|
|
|
+ <el-col :span="3" class="left">成果地区</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button
|
|
|
+ class="title"
|
|
|
+ v-for="(item, index) in cityList"
|
|
|
+ :key="index"
|
|
|
+ type="link"
|
|
|
+ size="samll"
|
|
|
+ @click="toSelect(item, 'six')"
|
|
|
+ :class="[item.is_active ? 'show' : '']"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </a-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
@@ -73,6 +220,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { getCity } from '@/utils/city'
|
|
|
import { get } from 'lodash-es'
|
|
|
const $checkRes = inject('$checkRes')
|
|
|
// 接口
|
|
|
@@ -92,105 +240,20 @@ const list = ref([])
|
|
|
let skip = 0
|
|
|
let limit = inject('limit')
|
|
|
const total = ref(0)
|
|
|
-const searchList = ref([
|
|
|
- {
|
|
|
- title: '行业分市场',
|
|
|
- list: [
|
|
|
- { value: '0', label: '全部' },
|
|
|
- { value: '1', label: '碳中和' },
|
|
|
- { value: '2', label: '水利科技' },
|
|
|
- { value: '3', label: '物联网' },
|
|
|
- { value: '4', label: '产业计量' },
|
|
|
- { value: '5', label: '卫生健康' },
|
|
|
- { value: '6', label: '时尚轻纺' },
|
|
|
- { value: '7', label: '农业科技' },
|
|
|
- { value: '8', label: '智能化' },
|
|
|
- { value: '9', label: '海洋科技' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '技术领域',
|
|
|
- list: [
|
|
|
- { value: '0', label: '全部' },
|
|
|
- { value: '1', label: '先进制造' },
|
|
|
- { value: '2', label: '地球、空间与海洋' },
|
|
|
- { value: '3', label: '新材料' },
|
|
|
- { value: '4', label: '新能源与节能' },
|
|
|
- { value: '5', label: '核应用技术' },
|
|
|
- { value: '6', label: '环境保护' },
|
|
|
- { value: '7', label: '现代交通' },
|
|
|
- { value: '8', label: '现代农业' },
|
|
|
- { value: '9', label: '生物医药与医疗器械' },
|
|
|
- { value: '10', label: '电子信息' },
|
|
|
- { value: '11', label: '航空航天' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '成熟度',
|
|
|
- list: [
|
|
|
- { value: '0', label: '全部' },
|
|
|
- { value: '1', label: '正在研发' },
|
|
|
- { value: '2', label: '已有样品' },
|
|
|
- { value: '3', label: '通过小试' },
|
|
|
- { value: '4', label: '通过中试' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '出让方式',
|
|
|
- list: [
|
|
|
- { value: '0', label: '全部' },
|
|
|
- { value: '1', label: '转让' },
|
|
|
- { value: '2', label: '许可' },
|
|
|
- { value: '3', label: '作价入股' },
|
|
|
- { value: '4', label: '其他' },
|
|
|
- { value: '4', label: '免费许可/先用后转' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '交易价格',
|
|
|
- list: [
|
|
|
- { value: '0', label: '全部' },
|
|
|
- { value: '1', label: '面议' },
|
|
|
- { value: '2', label: '1-10万元' },
|
|
|
- { value: '3', label: '10-20万元' },
|
|
|
- { value: '4', label: '20-100万元' },
|
|
|
- { value: '5', label: '100-500万元' },
|
|
|
- { value: '6', label: '500-1000万元' },
|
|
|
- { value: '7', label: '1000万元以上' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- title: '成果地区',
|
|
|
- list: [
|
|
|
- { value: '0', label: '北京市' },
|
|
|
- { value: '1', label: '天津市' },
|
|
|
- { value: '2', label: '河北省' },
|
|
|
- { value: '3', label: '山西省' },
|
|
|
- { value: '4', label: '内蒙古自治区' },
|
|
|
- { value: '5', label: '辽宁省' },
|
|
|
- { value: '6', label: '吉林省' },
|
|
|
- { value: '7', label: '上海市' },
|
|
|
- { value: '8', label: '江苏省' },
|
|
|
- { value: '9', label: '浙江省' },
|
|
|
- { value: '10', label: '安徽省' },
|
|
|
- { value: '11', label: '福建省' },
|
|
|
- { value: '0', label: '江西省' },
|
|
|
- { value: '1', label: '山东省' },
|
|
|
- { value: '2', label: '河南省' },
|
|
|
- { value: '3', label: '湖北省' },
|
|
|
- { value: '4', label: '湖南省' },
|
|
|
- { value: '5', label: '广东省' },
|
|
|
- { value: '6', label: '广西壮族自治区' },
|
|
|
- { value: '7', label: '海南省' },
|
|
|
- { value: '8', label: '重庆市' },
|
|
|
- { value: '9', label: '四川省' },
|
|
|
- { value: '10', label: '贵州省' },
|
|
|
- { value: '11', label: '云南省' }
|
|
|
- ]
|
|
|
- }
|
|
|
-])
|
|
|
+// 查询
|
|
|
+const oneList = ref([])
|
|
|
+const twoList = ref([])
|
|
|
+const thrList = ref([])
|
|
|
+const fourList = ref([])
|
|
|
+const fiveList = ref([])
|
|
|
+const sixList = ref([])
|
|
|
// 字典表
|
|
|
const fieldList = ref([])
|
|
|
+const cityList = ref([])
|
|
|
+const moneyList = ref([])
|
|
|
+const matureList = ref([])
|
|
|
+const sellList = ref([])
|
|
|
+const technologyList = ref([])
|
|
|
// 查看
|
|
|
const toView = (item) => {
|
|
|
router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
|
|
|
@@ -207,6 +270,20 @@ const searchOther = async () => {
|
|
|
// 技术领域
|
|
|
result = await dictDataStore.query({ code: 'field', is_use: '0' })
|
|
|
if ($checkRes(result)) fieldList.value = result.data
|
|
|
+ // 成熟度
|
|
|
+ result = await dictDataStore.query({ code: 'mature', is_use: '0' })
|
|
|
+ if ($checkRes(result)) matureList.value = result.data
|
|
|
+ // 出让方式
|
|
|
+ result = await dictDataStore.query({ code: 'sell', is_use: '0' })
|
|
|
+ if ($checkRes(result)) sellList.value = result.data
|
|
|
+ // 技术分类
|
|
|
+ result = await dictDataStore.query({ code: 'technology', is_use: '0' })
|
|
|
+ if ($checkRes(result)) technologyList.value = result.data
|
|
|
+ // 价格
|
|
|
+ result = await dictDataStore.query({ code: 'money', is_use: '0' })
|
|
|
+ if ($checkRes(result)) moneyList.value = result.data
|
|
|
+ // 城市
|
|
|
+ getCity().then((response) => (cityList.value = response.address))
|
|
|
}
|
|
|
const search = async (query = { skip: 0, limit }) => {
|
|
|
const info = {
|
|
|
@@ -233,6 +310,102 @@ const getArea = (data) => {
|
|
|
if (data) return data.join(',')
|
|
|
else return '暂无地区'
|
|
|
}
|
|
|
+// 选择查询
|
|
|
+const toSelect = (item, num) => {
|
|
|
+ if (item.is_active) return
|
|
|
+ if (num == 'one') {
|
|
|
+ for (const val of technologyList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ }
|
|
|
+ const one = oneList.value.find((f) => f.value == item.value)
|
|
|
+ if (!one) oneList.value.push(item)
|
|
|
+ else oneList.value = oneList.value.filter((f) => f.value == item.value)
|
|
|
+ }
|
|
|
+ if (num == 'two') {
|
|
|
+ for (const val of fieldList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ }
|
|
|
+ const two = twoList.value.find((f) => f.value == item.value)
|
|
|
+ if (!two) twoList.value.push(item)
|
|
|
+ else twoList.value = twoList.value.filter((f) => f.value == item.value)
|
|
|
+ }
|
|
|
+ if (num == 'thr') {
|
|
|
+ for (const val of matureList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ }
|
|
|
+ const thr = thrList.value.find((f) => f.value == item.value)
|
|
|
+ if (!thr) thrList.value.push(item)
|
|
|
+ else thrList.value = thrList.value.filter((f) => f.value == item.value)
|
|
|
+ }
|
|
|
+ if (num == 'four') {
|
|
|
+ for (const val of sellList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ }
|
|
|
+ const four = fourList.value.find((f) => f.value == item.value)
|
|
|
+ if (!four) fourList.value.push(item)
|
|
|
+ else fourList.value = fourList.value.filter((f) => f.value == item.value)
|
|
|
+ }
|
|
|
+ if (num == 'five') {
|
|
|
+ for (const val of moneyList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ else val.is_active = false
|
|
|
+ }
|
|
|
+ fiveList.value = [item]
|
|
|
+ }
|
|
|
+ if (num == 'six') {
|
|
|
+ for (const val of cityList.value) {
|
|
|
+ if (val.value == item.value) val.is_active = true
|
|
|
+ }
|
|
|
+ const six = sixList.value.find((f) => f.value == item.value)
|
|
|
+ if (!six) sixList.value.push(item)
|
|
|
+ else sixList.value = sixList.value.filter((f) => f.value == item.value)
|
|
|
+ }
|
|
|
+}
|
|
|
+// 删除标签
|
|
|
+const toDel = (item, type) => {
|
|
|
+ if (type == 'one') {
|
|
|
+ const one = oneList.value.filter((f) => f.value != item.value)
|
|
|
+ oneList.value = one
|
|
|
+ for (const i of technologyList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'two') {
|
|
|
+ const two = twoList.value.filter((f) => f.value != item.value)
|
|
|
+ twoList.value = two
|
|
|
+ for (const i of fieldList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'thr') {
|
|
|
+ const thr = thrList.value.filter((f) => f.value != item.value)
|
|
|
+ thrList.value = thr
|
|
|
+ for (const i of matureList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'four') {
|
|
|
+ const four = fourList.value.filter((f) => f.value != item.value)
|
|
|
+ fourList.value = four
|
|
|
+ for (const i of sellList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'five') {
|
|
|
+ const five = fiveList.value.filter((f) => f.value != item.value)
|
|
|
+ fiveList.value = five
|
|
|
+ for (const i of moneyList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == 'six') {
|
|
|
+ const six = sixList.value.filter((f) => f.value != item.value)
|
|
|
+ sixList.value = six
|
|
|
+ for (const i of cityList.value) {
|
|
|
+ if (i.value == item.value) i.is_active = !i.is_active
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
const currentPage = ref(1)
|
|
|
// 分页
|
|
|
const changePage = (page = currentPage.value) => {
|
|
|
@@ -249,10 +422,54 @@ const sizeChange = (limits) => {
|
|
|
background: rgb(248, 248, 248);
|
|
|
|
|
|
.iachievement {
|
|
|
+ position: relative;
|
|
|
.image {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
}
|
|
|
+ .select {
|
|
|
+ width: 1200px;
|
|
|
+ position: absolute;
|
|
|
+ left: 20%;
|
|
|
+ bottom: 10%;
|
|
|
+ .select_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .over {
|
|
|
+ max-height: 106px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .list {
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ .left {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .show {
|
|
|
+ color: #2374ff !important;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 3px;
|
|
|
+ padding: 5px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .over::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.one {
|
|
|
@@ -280,6 +497,9 @@ const sizeChange = (limits) => {
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
+ .show {
|
|
|
+ color: #2374ff !important;
|
|
|
+ }
|
|
|
.title {
|
|
|
color: #666;
|
|
|
font-size: 14px;
|
