cxyy-web2/src/views/twelve/index.vue

<template>
  <custom-layout class="main">
    <!-- <div class="loading" v-if="loading">
      <el-image class="image" :src="load" fit="fill" />
    </div> -->
    <div class="w_1700 one">
      <div class="left">
        <div class="left_1">
          <div class="titleOne">
            <div class="title_left">
              <el-image class="image" :src="left" fit="fill" />
              <div class="title_center">供给信息</div>
              <el-image class="image" :src="right" fit="fill" />
            </div>
            <div class="title_right">
              <el-input v-model="supply" size="large" clearable style="max-width: 300px" placeholder="请输入想要搜索的名称">
                <template #append>
                  <el-button @click="searchsupply({ supplyskip: 0, supplylimit: 3 })" :icon="Search" />
                </template>
              </el-input>
            </div>
          </div>
          <el-empty v-if="supplytotal == 0" description="暂无数据" />
          <div class="leftOne" v-else>
            <div class="list" v-for="(item, index) in supplyList" :key="index">
              <div class="title">
                {{ item.name || '暂无供给名称' }}
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>技术领域：</span>
                <span class="textOne">{{ item.field || '暂无技术领域' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>所属产业：</span>
                <span class="textOne">{{ item.industry || '暂无所属产业' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>来源：</span>
                <span class="textOne">{{ item.source || '暂无来源' }}</span>
              </div>
              <div class="button">
                <div @click="toView(item, '0')" class="detail1">查看详情</div>
                <div @click="toMate(item, '0')" class="detail2">匹配</div>
              </div>
            </div>
            <el-col :span="24" class="page">
              <el-pagination background layout="prev, pager, next" :total="supplytotal" :page-size="supplylimit" v-model:current-page="currentPageone" @current-change="changePageone" @size-change="sizeChangeone" />
            </el-col>
          </div>
        </div>
        <div class="left_1">
          <div class="titleOne">
            <div class="title_left">
              <el-image class="image" :src="left" fit="fill" />
              <div class="title_center">需求信息</div>
              <el-image class="image" :src="right" fit="fill" />
            </div>
            <div class="title_right">
              <el-input v-model="demand" size="large" clearable style="max-width: 300px" placeholder="请输入想要搜索的名称">
                <template #append>
                  <el-button @click="searchdemand({ demandskip: 0, demandlimit: 3 })" :icon="Search" />
                </template>
              </el-input>
            </div>
          </div>
          <el-empty v-if="demandtotal == 0" description="暂无数据" />
          <div v-else class="leftOne">
            <div class="list" v-for="(item, index) in demandList" :key="index">
              <div class="title">
                {{ item.name || '暂无需求名称' }}
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>需求企业：</span>
                <span class="textOne">{{ item.company || '暂无需求企业' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>技术领域：</span>
                <span class="textOne">{{ item.field || '暂无技术领域' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>所在地：</span>
                <span class="textOne">{{ getArea(item.area) || '暂无所在地' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>投入预算：</span>
                <span class="textOne">{{ item.money || '面议' }}</span>
              </div>
              <div class="button">
                <div @click="toView(item, '1')" class="detail1">查看详情</div>
                <div @click="toMate(item, '1')" class="detail2">匹配</div>
              </div>
            </div>
            <el-col :span="24" class="page">
              <el-pagination background layout="prev, pager, next" :total="demandtotal" :page-size="demandlimit" v-model:current-page="currentPagetwo" @current-change="changePagetwo" @size-change="sizeChangetwo" />
            </el-col>
          </div>
        </div>
      </div>
      <div class="center"></div>
      <div class="right" v-if="total > 0">
        <div class="titleOne">
          <el-image class="image" :src="left" fit="fill" />
          <div class="title_center">匹配结果</div>
          <el-image class="image" :src="right" fit="fill" />
        </div>
        <div class="rightContent">
          <div class="list" v-for="(item, index) in list" :key="index">
            <div v-if="item._source == 'achievement'" @click="toView(item, '2')">
              <div class="title">
                {{ item.name || '暂无成果名称' }}
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>技术领域：</span>
                <span class="textOne">{{ item.field || '暂无技术领域' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>负责人：</span>
                <span class="textOne">{{ item.person || '暂无负责人' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>所在地：</span>
                <span class="textOne">{{ getArea(item.area) || '暂无所在地' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>推荐指数：</span>
                <el-rate size="large" v-model="item._recommend" disabled show-score text-color="#ff9900" :score-template="`${item._recommend} 星`" />
              </div>
            </div>
            <div v-if="item._source == 'supply'" @click="toView(item, '0')">
              <div class="title">
                {{ item.name || '暂无供给名称' }}
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>技术领域：</span>
                <span class="textOne">{{ item.field || '暂无技术领域' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>所属产业：</span>
                <span class="textOne">{{ item.industry || '暂无所属产业' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>来源：</span>
                <span class="textOne">{{ item.source || '暂无来源' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>推荐指数：</span>
                <el-rate size="large" v-model="item._recommend" disabled show-score text-color="#ff9900" :score-template="`${item._recommend} 星`" />
              </div>
            </div>
            <div v-if="item._source == 'demand'" @click="toView(item, '1')">
              <div class="title">
                {{ item.name || '暂无需求名称' }}
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>需求企业：</span>
                <span class="textOne">{{ item.company || '暂无需求企业' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>技术领域：</span>
                <span class="textOne">{{ item.field || '暂无技术领域' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>所在地：</span>
                <span class="textOne">{{ getArea(item.area) || '暂无所在地' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>投入预算：</span>
                <span class="textOne">{{ item.money || '面议' }}</span>
              </div>
              <div class="other_1" v-if="user && user.id">
                <span>推荐指数：</span>
                <el-rate size="large" v-model="item._recommend" disabled show-score text-color="#ff9900" :score-template="`${item._recommend} 星`" />
              </div>
            </div>
          </div>
        </div>
        <el-col :span="24" class="page">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
        </el-col>
      </div>
      <div class="right" v-else>
        <div class="titleOne">
          <el-image class="image" :src="left" fit="fill" />
          <div class="title_center">匹配结果</div>
          <el-image class="image" :src="right" fit="fill" />
        </div>
        <el-empty description="暂无数据" />
      </div>
    </div>
  </custom-layout>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onBeforeRouteLeave } from 'vue-router'
// 图片引入
import left from '/images/top-left.png'
import right from '/images/top-right.png'
// import load from '/images/load.gif'
// 接口
import { DemandStore } from '@/store/api/platform/demand'
import { SupplyStore } from '@/store/api/platform/supply'
import { EsStore } from '@/store/api/es'
const demandStore = DemandStore()
const supplyStore = SupplyStore()
const esStore = EsStore()
// 用户信息
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 列表
const supplyList = ref([])
let supplyskip = 0
let supplylimit = 3
const supplytotal = ref(0)

const demandList = ref([])
let demandskip = 0
let demandlimit = 3
const demandtotal = ref(0)
// 加载中
const loading = ref(true)
// 路由
const router = useRouter()
const keyword = ref('')
const keywordId = ref()
// 搜索
const demand = ref('')
const supply = ref('')
// 类型
const dataType = ref('0')
// 匹配结果
const list = ref([])
let skip = 0
let limit = 9
const total = ref(0)

// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await searchsupply({ supplyskip, supplylimit })
  await searchdemand({ demandskip, demandlimit })
  loading.value = false
})
const searchOther = async () => {}
// 供给信息
const searchsupply = async (query = { supplyskip, supplylimit }) => {
  supplyskip = query.supplyskip
  supplylimit = query.supplylimit
  const info = { skip: query.supplyskip, limit: query.supplylimit, is_use: '0', status: '1', user: user.value.id }
  if (supply.value) info.name = supply.value
  let res = await supplyStore.list(info)
  if (res.errcode == '0') {
    supplyList.value = res.data
    supplytotal.value = res.total
  }
  if (res.total > 0) await toMate(res.data[0], '0')
}
// 需求信息
const searchdemand = async (query = { demandskip, demandlimit }) => {
  demandskip = query.demandskip
  demandlimit = query.demandlimit
  const info = { skip: query.demandskip, limit: query.demandlimit, is_use: '0', status: '1', user: user.value.id }
  if (demand.value) info.name = demand.value
  let res = await demandStore.list(info)
  if (res.errcode == '0') {
    demandList.value = res.data
    demandtotal.value = res.total
  }
}
// 转换地区
const getArea = (data) => {
  if (data) return data.join('-')
  else return '暂无'
}
// 查看详情
const toView = (item, type) => {
  if (user.value.id) {
    if (type == '0') router.push({ path: '/supply/detail', query: { id: item.id || item._id } })
    else if (type == '1') router.push({ path: '/demand/detail', query: { id: item.id || item._id } })
    else router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
  } else ElMessage({ message: '未登录！', type: 'error' })
}
const toMate = async (item) => {
  loading.value = true
  let res
  keyword.value = item.name
  keywordId.value = item.id
  const query = { skip: skip, limit: limit, keyword: item.name, id: item.id }
  if (dataType.value == '0') res = await esStore.supply(query)
  else res = await esStore.demand(query)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
  loading.value = false
}
const currentPageone = ref(1)
const currentPagetwo = ref(1)
// 分页
const changePageone = (page = currentPageone.value) => {
  searchsupply({ supplyskip: (page - 1) * supplylimit, supplylimit: supplylimit })
}
const sizeChangeone = (limits) => {
  supplylimit = limits
  currentPageone.value = 1
  searchsupply({ supplyskip: 0, supplylimit: supplylimit })
}
// 分页
const changePagetwo = (page = currentPagetwo.value) => {
  searchdemand({ demandskip: (page - 1) * demandlimit, demandlimit: demandlimit })
}
const sizeChangetwo = (limits) => {
  demandlimit = limits
  currentPagetwo.value = 1
  searchdemand({ demandskip: 0, demandlimit: demandlimit })
}
// 匹配结果
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, keyword: keyword.value, id: keywordId.value }
  let res
  if (dataType.value != '0') res = await esStore.supply(info)
  else res = await esStore.demand(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
const scrollTop = ref(0)

onActivated(() => {
  // 配置参数依赖于浏览器
  document.documentElement.scrollTop = scrollTop.value
})
onBeforeRouteLeave((to, from, next) => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
  next()
})
</script>
<style scoped lang="scss">
.main {
  .loading {
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5f5ff5;
    .image {
      height: 100%;
    }
  }
  .one {
    display: flex;
    .left {
      width: 50%;
      .left_1 {
        margin: 10px 0;
        padding: 20px 0;
        box-shadow: 0px 1px 9px 0px rgba(50, 122, 244, 0.12);
        .titleOne {
          display: flex;
          .title_left {
            width: 510px;
            display: flex;
            align-items: end;
            justify-content: flex-end;
            margin: 0 0 30px 0;
            .image {
              margin: 0 10px;
              vertical-align: middle;
              border-style: none;
            }
            .title_center {
              font-size: $global-font-size-28;
              font-weight: 600;
            }
          }
          .title_right {
            width: 320px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
          }
        }
        .leftOne {
          display: flex;
          flex-wrap: wrap;
          background-color: #ffffff;
          .list {
            padding-bottom: 20px;
            margin: 0 10px 20px 0;
            width: 265px;
            font-size: 12px;
            color: #666666;
            border: 1px solid rgb(230, 230, 230);
            .title {
              color: #002147;
              background-color: #c8e0fc;
              width: 100%;
              height: 36px;
              text-align: center;
              line-height: 36px;
              font-family: PingFangSC-Medium;
              font-size: 20px;
              font-weight: 500;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              margin-bottom: 16px;
            }
            .other_1 {
              margin-bottom: 16px;
              padding: 0 20px;
              display: flex;
              color: #666666;
              font-size: 16px;
              span:first-child {
                max-width: 80px;
              }
              span:last-child {
                max-width: 140px;
              }
            }
            .button {
              display: flex;
              margin: 30px 0 0 0;
              .detail1 {
                font-size: 16px;
                display: block;
                margin: 0 auto;
                width: 90px;
                text-align: center;
                line-height: 28px;
                border-radius: 28px;
                color: #2281ee;
                border: 1px solid #2281ee;
                cursor: default;
              }
              .detail2 {
                font-size: 16px;
                display: block;
                margin: 0 auto;
                width: 90px;
                text-align: center;
                line-height: 28px;
                border-radius: 28px;
                color: #2281ee;
                border: 1px solid #2281ee;
                cursor: default;
              }
              .detail1:hover {
                color: #fff;
                background-color: #2281ee;
              }
              .detail2:hover {
                color: #fff;
                background-color: #2281ee;
              }
            }
          }
          .list:first-child {
            margin: 0 10px 20px 10px;
          }
          .list:nth-child(3n) {
            margin: 0 0 20px 0 !important;
          }
        }
        .page {
          display: flex;
          justify-content: center;
          margin: 20px 0 0 0;
        }
      }
      .left_1:first-child {
        margin: 20px 0 20px 0;
      }
    }
    .center {
      margin: 10px;
      border-left: 3px dashed #e5e5e5;
    }
    .right {
      width: 50%;
      .titleOne {
        display: flex;
        align-items: end;
        justify-content: center;
        margin: 30px;
        .image {
          margin: 0 10px;
          vertical-align: middle;
          border-style: none;
        }
        .title_center {
          font-size: $global-font-size-28;
          font-weight: 600;
        }
      }
      .rightContent {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
        background-color: $global-color-fff;
        .list {
          margin: 0 10px 20px 0;
          width: 272px;
          font-size: 12px;
          color: #666666;
          border: 1px solid rgb(230, 230, 230);
          .title {
            color: #002147;
            background-color: #c8e0fc;
            width: 100%;
            height: 36px;
            text-align: center;
            line-height: 36px;
            font-family: PingFangSC-Medium;
            font-size: 20px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            margin-bottom: 16px;
            padding: 0 10px;
            cursor: default;
          }
          .title:hover {
            color: #fff;
            background-color: #409eff;
          }
          .other_1 {
            margin-bottom: 10px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            color: #666666;
            font-size: 16px;
            span:first-child {
              max-width: 80px;
            }
            span:last-child {
              max-width: 148px;
            }
          }
        }
        .list:nth-child(3n) {
          margin: 0 0 20px 0 !important;
        }
      }

      .page {
        display: flex;
        justify-content: center;
        margin: 10px 0;
      }
    }
  }
}
</style>