hi-ucs/front/src/views/home/integrationServices.vue

667 lines
17 KiB
Vue
Raw Normal View History

<template>
2022-07-19 09:42:41 +08:00
<!-- 青岛 -->
2023-01-04 15:49:00 +08:00
<div class="top-title">
<div v-for="item in titleName" :key="item.index" class="tabAll" @click="changeCards(item.index)"
:class="{ sel: item.index === number }">
<span>
{{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }}
</span>
</div>
</div>
2022-07-19 09:42:41 +08:00
<div class="details-pageconetent">
<home-header></home-header>
<div class="top">
2023-01-04 15:49:00 +08:00
2022-08-25 20:47:41 +08:00
<div class="resultListSearchInput-father" v-if="number === 0">
2023-01-04 15:49:00 +08:00
<div class="second-title">
<div :class="[cityOrArea === 0 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(0)">
<img src="~@/assets/home/city.png" /> 市级领域场景
<div :class="cityOrArea === 0 ? 'sanjiao' : ''"></div>
</div>
<div :class="[cityOrArea === 1 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(1)">
<img src="~@/assets/home/area.png" /> 基层场景
<div :class="cityOrArea === 1 ? 'sanjiao' : ''"></div>
</div>
</div>
2022-07-19 09:42:41 +08:00
<div class="resultListSearchInput-son">
2023-01-04 15:49:00 +08:00
<div class="son-input">
<a-input-search v-model:value="searchValue" placeholder="请输入关键字" enter-button="搜索" size="large"
@search="getIntegrationList" @change="onSearch" class="resultListSearchInput" />
<i class="searchImg" aria-hidden="true"></i>
<!-- <button class="button-reset" @click="resetAction()">重置</button> -->
</div>
<div>
<div class="all">全部</div>
<div class="choose-tab" v-if="cityOrArea === 0">
<span v-for="item in senses" :key="item.data" @click="tabSensesClick(item.dict_label)" :class="
clickSensesList.indexOf(item.dict_label) != -1
? 'down'
: ''
">
{{ item.dict_label }}
</span>
</div>
<div v-else class="choose-tab">
<span v-for="item in areas" :key="item.data" @click="tabAreasClick(item.name)" :class="
clickAreasList.indexOf(item.name) != -1
? 'down'
: ''
">
{{ item.name }}
</span>
</div>
</div>
</div>
2022-07-19 09:42:41 +08:00
</div>
2023-01-04 15:49:00 +08:00
<div style="background:#fff;margin-left:16px;margin-right:16px;">
<div v-if="number === 0" class="checkResult">检测结果: <span>{{ resourceTotal }}</span></div>
2022-08-10 17:52:49 +08:00
<div v-loading="loadingData">
2023-01-04 15:49:00 +08:00
<searchResultList v-if="number === 1" v-show="resourceList.data && resourceList.data.length > 0"
:resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition"
ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
<CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList"
@saveSearchCodition="saveSearchCodition" :resourceTotal="resourceTotal"
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
2022-08-10 17:52:49 +08:00
<div class="pagination">
2023-01-04 15:49:00 +08:00
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
:total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
@showSizeChange="onShowSizeChange" />
2022-08-10 17:52:49 +08:00
</div>
2023-01-04 15:49:00 +08:00
<div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
2022-08-10 17:52:49 +08:00
<a-empty />
</div>
2022-07-19 09:42:41 +08:00
</div>
</div>
2023-01-04 15:49:00 +08:00
</div>
2022-07-19 09:42:41 +08:00
</div>
<home-footer></home-footer>
</template>
<script>
2022-10-13 15:45:21 +08:00
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
2023-01-04 15:49:00 +08:00
import qs from 'qs'
2022-10-13 15:45:21 +08:00
import {
defineComponent,
reactive,
ref,
toRefs,
onMounted,
nextTick,
} from 'vue'
2023-01-04 15:49:00 +08:00
import { getIntegrationServicesList, getRegion, selectDicStoreAll } from '@/api/home.js'
import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue'
import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
beforeRouteLeave(to, from, next) {
console.log('to---integrationServices--beforeRouteLeave------->', to)
console.log('from---integrationServices--beforeRouteLeave------->', from)
console.log('next---integrationServices--beforeRouteLeave------->', next)
if (
to.name !== 'packagingDetails' &&
to.name !== 'integrationServicesDetails'
) {
localStorage.removeItem('integrationServices')
}
next()
},
setup() {
// 分页
const loading = ref(true)
const currentPage = ref(1)
const currentPageSize = ref(10)
const pageSizeOptions = ref(['2', '5', '10', '20', '50'])
const router = useRouter()
const select = router.currentRoute.value.query.select
const returnType = router.currentRoute.value.query.returnType
const searchValue = ref('')
const Cardsname = ref(select)
const resourceList = reactive({ data: [] })
const resourceTotal = ref(0)
const loadingData = ref(false)
// 选项卡
const titleName = ref([
{
name: '赋能场景',
index: 0,
},
{
name: '打包模式',
index: 1,
},
])
let number = ref(0)
// 查询参数
const paramsGetResources = {
page: currentPage.value,
limit: currentPageSize.value,
type: titleName.value[number.value].name,
name: searchValue.value,
orderField: 'create_date',
orderType: 'DESC', // ASC 升序 DESC 降序
areas:[],
senses:[],
district: 1,//0市级1基层
}
let cityOrArea = ref(0)//0市级 1基层
let senses = ref([])//场景领域
let areas = ref([])//区市
let clickSensesList = ref([])//多选场景领域
let clickAreasList = ref([])//多选区域领域
const searchResultListDom = ref(null)
const storageSearchInfo = JSON.parse(
localStorage.getItem('integrationServices')
)
// 读取本地存储:表单赋值
const handleSetSearchData = () => {
if (storageSearchInfo) {
number.value = storageSearchInfo.type == '打包模式' ? 1 : 0
// 搜索名称
searchValue.value = storageSearchInfo.name
currentPage.value = storageSearchInfo.page
currentPageSize.value = storageSearchInfo.limit
paramsGetResources.limit = storageSearchInfo.limit
paramsGetResources.page = storageSearchInfo.page
paramsGetResources.type = storageSearchInfo.type
// 延迟使用,因为还没有返回跟挂载
nextTick(() => {
searchResultListDom.value &&
searchResultListDom.value.changeCondition &&
searchResultListDom.value.changeCondition(
{
value: storageSearchInfo.orderField,
orderType: storageSearchInfo.orderType,
},
true
)
})
getIntegrationList()
}
}
const changeCards = (val) => {
number.value = val
paramsGetResources.type = titleName.value[number.value].name
resetAction()
}
//市级或者基层
const handleChose = (index) => {
cityOrArea.value = index;
getIntegrationList()
}
//多选区域
const tabAreasClick = (name) => {
if (clickAreasList.value.indexOf(name) == -1) {
clickAreasList.value.push(name);
} else {
clickAreasList.value.splice(clickAreasList.value.indexOf(name), 1)
}
getIntegrationList()
}
//多选场景领域
const tabSensesClick = (name) => {
if (clickSensesList.value.indexOf(name) == -1) {
clickSensesList.value.push(name);
} else {
clickSensesList.value.splice(clickSensesList.value.indexOf(name), 1)
}
2023-01-04 15:49:00 +08:00
getIntegrationList()
}
// 查询
const onSearch = () => {
currentPage.value = 1
getIntegrationList()
}
// 重置数据
const resetAction = () => {
// 重置模糊查字段
searchValue.value = ''
// 分页
2023-01-04 15:49:00 +08:00
currentPage.value = 1
currentPageSize.value = 10
// 重置查询条件
paramsGetResources.page = 1
paramsGetResources.limit = 10
paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC'
mybus.emit('resetAction', {
2022-10-13 15:45:21 +08:00
type: titleName.value[number.value].name,
2023-01-04 15:49:00 +08:00
})
getIntegrationList()
}
//查询领域和地区
const searchAreas = () => {
const params = {
topCategoryName: '应用资源'
2022-10-13 15:45:21 +08:00
}
2023-01-04 15:49:00 +08:00
selectDicStoreAll(params).then(
(res) => {
senses.value = res.data.data[0].typeList
console.log("==================== senses.value", senses.value)
})
const params1 = {
pid: '250000'
2022-09-30 10:27:57 +08:00
}
2023-01-04 15:49:00 +08:00
getRegion(params1).then(
(res) => {
2023-01-04 15:49:00 +08:00
areas.value = res.data.data
2022-10-13 15:45:21 +08:00
})
2023-01-04 15:49:00 +08:00
}
2023-01-04 15:49:00 +08:00
// 获取融合服务列表
const getIntegrationList = () => {
loadingData.value = true
paramsGetResources.name = searchValue.value
if(number.value==1){
paramsGetResources.district=''
}else{
if(cityOrArea.value==0){//市级挂接
paramsGetResources.district=0
paramsGetResources.areas=[]
paramsGetResources.senses=JSON.stringify(clickSensesList.value)
}else{//基层挂接
paramsGetResources.district=1
paramsGetResources.senses=[]
paramsGetResources.areas=JSON.stringify(clickAreasList.value)
2022-10-13 15:45:21 +08:00
}
2023-01-04 15:49:00 +08:00
}
getIntegrationServicesList(paramsGetResources).then(
(res) => {
loadingData.value = false
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
resourceList.data = res.data.data.list || []
resourceTotal.value = res.data.data.total || 0
},
(err) => {
loadingData.value = false
message.error(err)
2022-10-13 15:45:21 +08:00
}
2023-01-04 15:49:00 +08:00
)
}
2022-10-13 15:45:21 +08:00
2023-01-04 15:49:00 +08:00
mybus.on('paramsGetResources', (ids) => {
if (ids && ids.length > 0) {
paramsGetResources.deptIds = ids
} else {
delete paramsGetResources.deptIds
}
2023-01-04 15:49:00 +08:00
getIntegrationList()
})
mybus.on('changePage', (page) => {
paramsGetResources.page = page
getIntegrationList()
})
mybus.on('changeSelcted', () => {
getIntegrationList()
})
mybus.on('refresh', () => {
paramsGetResources.page = 1
currentPage.value = 1
getIntegrationList()
})
mybus.on('changeCondition', (condition) => {
paramsGetResources.orderField = condition.orderField
paramsGetResources.orderType = condition.orderType
getIntegrationList()
})
const pageChange = (val) => {
currentPage.value = val
paramsGetResources.page = val
getIntegrationList() //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
}
2023-01-04 15:49:00 +08:00
// 分页
const onShowSizeChange = (current, pageSize) => {
currentPage.value = current
currentPageSize.value = pageSize
paramsGetResources.page = current
paramsGetResources.limit = pageSize
getIntegrationList()
}
2022-10-13 15:45:21 +08:00
2023-01-04 15:49:00 +08:00
// 存储查询条件到本地
const saveSearchCodition = (n) => {
console.log(
'融合服务-----存储查询条件到本地------->',
paramsGetResources
)
localStorage.setItem(
'integrationServices',
JSON.stringify(paramsGetResources)
)
}
onMounted(() => {
searchAreas()
if (returnType == '典型赋能场景') {
changeCards(0)
2022-10-13 15:45:21 +08:00
2023-01-04 15:49:00 +08:00
} else if (returnType == '打包模式') {
changeCards(1)
} else {
if (storageSearchInfo) {
2022-10-13 15:45:21 +08:00
handleSetSearchData()
} else {
getIntegrationList()
}
}
2023-01-04 15:49:00 +08:00
// if (storageSearchInfo) {
// handleSetSearchData()
// } else {
// getIntegrationList()
// }
})
return {
tabSensesClick,
tabAreasClick,
searchValue,
currentPage,
resourceList,
resourceTotal,
pageChange,
Cardsname,
getIntegrationList,
resetAction,
onSearch,
currentPageSize,
pageSizeOptions,
loading,
titleName,
changeCards,
returnType,
number,
loadingData,
cityOrArea,
onShowSizeChange,
saveSearchCodition,
handleChose,
searchAreas,
senses,
areas,
searchResultListDom,
clickSensesList,
clickAreasList,
}
},
components: {
HomeHeader,
HomeFooter,
searchResultList,
CanAssignCase,
},
beforeUnmount() {
mybus.off('paramsGetResources')
mybus.off('changeCondition')
mybus.off('refresh')
mybus.off('changePage')
},
})
2022-08-25 20:47:41 +08:00
</script>
<style lang="less" scoped>
2023-01-04 15:49:00 +08:00
.top-title {
display: flex;
font-size: 20px;
margin-top: 65px;
background: #e5eefc;
opacity: 0.8;
height: 72px;
.tabAll {
color: #212121;
margin-right: 35px;
cursor: pointer;
margin-top: 24px;
text-align: center;
width: 240px;
padding-top: 8px;
}
.tabAll:nth-child(1) {
margin-left: 720px;
}
.sel {
border-top: 2px solid #0058e1;
height: 48px;
background: #fff;
width: 240px;
span {
font-weight: bold;
}
}
}
.checkResult {
margin-left: 16px;
2022-12-02 16:05:46 +08:00
font-size: 14px;
font-weight: 500;
color: #212121;
2023-01-04 15:49:00 +08:00
margin-top: 16px;
margin-bottom: 16px;
2022-12-02 16:05:46 +08:00
2023-01-04 15:49:00 +08:00
span {
font-size: 18px;
color: #0058e1;
}
2022-12-02 16:05:46 +08:00
}
2022-08-25 20:47:41 +08:00
2023-01-04 15:49:00 +08:00
.resultListSearchInput-father {
background: #f3f5f9;
margin-bottom:24px;
.sanjiao {
background: url('~@/assets/home/sanjiao.png');
background-repeat: no-repeat;
height: 10px;
width: 10px;
margin-left: 80px;
position: absolute;
}
2022-08-25 20:47:41 +08:00
2023-01-04 15:49:00 +08:00
.second-title {
padding-top: 16px;
margin-bottom: 16px;
font-size: 18px;
cursor: pointer;
text-align: center;
vertical-align: bottom;
background: #fff;
height: 53px;
border-bottom: 1px solid #d9d9d9;
2022-08-25 20:47:41 +08:00
}
2023-01-04 15:49:00 +08:00
.departmentStyle {
float: left;
width: 180px;
// color: #0058e1;
background-color: #fff;
2023-01-04 15:49:00 +08:00
border-bottom: 3px solid #0058e1;
}
.departmentStyle1 {
float: left;
width: 180px;
}
.resultListSearchInput-son {
.son-input {
margin: 24px 0px 12px 340px;
2022-10-13 15:45:21 +08:00
}
2023-01-04 15:49:00 +08:00
// background: #fff;
//padding: 0.2rem 0.2rem 0rem 0.3rem;
.all {
float: left;
display: inline;
width: 42px;
margin-top: 12px;
margin-left: 100px;
font-size: 14px;
font-weight: bold;
2022-10-13 15:45:21 +08:00
}
2023-01-04 15:49:00 +08:00
.choose-tab {
float: left;
display: inline;
width: 940px;
span {
display: inline-block;
height: 28px;
font-size: 14px;
width: 90px;
line-height: 28px;
border-radius: 1px;
margin-left: 14px;
text-align: center;
color: #212121;
background: #e8e9eb;
cursor: pointer;
margin-top: 12px;
}
.down {
background: #0058e1;
color: #ffffff;
}
}
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
.searchImg {
width: 17px;
height: 17px;
background: url('~@/assets/home/searchInner.png');
position: absolute;
top: 85px;
left: 668px;
2022-10-13 15:45:21 +08:00
}
2022-07-28 17:52:31 +08:00
}
2023-01-04 15:49:00 +08:00
}
.resultListSearchInput {
margin-left: 0.1rem;
2023-01-04 15:49:00 +08:00
:deep(.ant-input) {
width: 340px;
2022-11-15 18:23:26 +08:00
height: 0.32rem;
2023-01-04 15:49:00 +08:00
background: #fff;
2022-11-15 18:23:26 +08:00
border-radius: 0.02rem;
2023-01-04 15:49:00 +08:00
}
:deep(.ant-input-search-button) {
// width: 56px;
height: 0.32rem;
background: #0558e1;
border-radius: 0.02rem !important;
font-size: 0.14rem;
font-weight: 400;
2023-01-04 15:49:00 +08:00
color: #fff;
2022-11-15 18:23:26 +08:00
line-height: 0.32rem;
2023-01-04 15:49:00 +08:00
margin-left: 0.1rem;
}
2023-01-04 15:49:00 +08:00
:deep(.ant-input-group-addon) {
left: 0 !important;
}
}
2023-01-04 15:49:00 +08:00
.button-reset {
border: 0;
outline: none;
width: 56px;
height: 0.32rem;
//background: #e1edfa;
background: #0558e1;
border-radius: 0.02rem;
font-size: 0.14rem;
font-weight: 400;
//color: #0087ff;
color: #fff;
line-height: 0.32rem;
margin-left: 2.5rem;
cursor: pointer;
}
2023-01-04 15:49:00 +08:00
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
//margin-top: 0.67rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
}
2022-09-30 10:27:57 +08:00
2023-01-04 15:49:00 +08:00
.top {
min-height: 7.2rem;
position: relative;
width: 11.5rem;
display: flex;
// padding-top: 0.2rem;
flex-direction: column;
font-size: 0.16rem;
justify-content: left;
background: #f3f5f9;
2022-10-13 15:45:21 +08:00
2023-01-04 15:49:00 +08:00
.pagination {
background: #f3f5f9;
padding-top: 10px;
padding-bottom: 23px;
}
2022-10-13 15:45:21 +08:00
2022-09-30 10:27:57 +08:00
2022-07-19 09:42:41 +08:00
}
2023-01-04 15:49:00 +08:00
}
2023-01-04 15:49:00 +08:00
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
word-break: break-all;
}
</style>