1762 lines
51 KiB
Vue
1762 lines
51 KiB
Vue
<template>
|
||
<!-- 青岛 -->
|
||
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
||
<home-header></home-header>
|
||
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
|
||
<detailsPageconetentTree />
|
||
</div>
|
||
<div class="details-pageconetent-left" v-else>
|
||
<detailsPageInfrastructureTree />
|
||
</div>
|
||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="resultListSearchInput-father">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
<button
|
||
v-if="Cardsname == '应用资源'"
|
||
class="button-reset"
|
||
@click="applyAll()"
|
||
style="margin-left: 0.1rem"
|
||
>
|
||
全部申请
|
||
</button>
|
||
<div class="hengxian"></div>
|
||
</div>
|
||
</div>
|
||
<div class="top-content-father" :key="listKey">
|
||
<template
|
||
v-if="
|
||
Cardsname == '组件服务' ||
|
||
Cardsname == '应用资源' ||
|
||
Cardsname == ''
|
||
"
|
||
>
|
||
<div class="top-content-son">
|
||
<div
|
||
v-for="(item, index) in ListContent.records"
|
||
:key="index"
|
||
class="top-content"
|
||
>
|
||
<span class="top-content-title">
|
||
{{ item.name }}
|
||
</span>
|
||
<div
|
||
class="leixingsumfather"
|
||
:class="!item.shrinkFlag ? 'shrink' : ''"
|
||
>
|
||
<div
|
||
v-for="(item2, index2) in item.typeList"
|
||
:key="index2"
|
||
class="leixingsum"
|
||
>
|
||
<a-checkable-tag
|
||
:checked="
|
||
item.selectedTags &&
|
||
item.selectedTags.indexOf(item2.dict_label) !== -1
|
||
"
|
||
@change="
|
||
(checked) => handleChange(item2, checked, item.name)
|
||
"
|
||
>
|
||
{{ item2.dict_label }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="shrinkTag"
|
||
v-if="item.showShrink"
|
||
:key="item.shrinkFlag"
|
||
>
|
||
<up-outlined
|
||
v-show="!item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
<down-outlined
|
||
v-show="item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div
|
||
class="top-content"
|
||
v-if="Cardsname == '组件服务' || Cardsname == '应用资源'"
|
||
>
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<searchResultList
|
||
v-show="resourceList.data && resourceList.data.length > 0"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<div class="pagination">
|
||
<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"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||
style="margin-top: 2rem"
|
||
>
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
<div class="top" v-else-if="Cardsname === '基础设施'">
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="top-content-father">
|
||
<infrastructurePage />
|
||
</div>
|
||
</div>
|
||
<div class="top" v-else>
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="resultListSearchInput-father" style="background: unset">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
</div>
|
||
</div>
|
||
<KnowledgeBase
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
></KnowledgeBase>
|
||
</div>
|
||
<div class="talk-monitor" @click="openMonitor">
|
||
<a-tooltip>
|
||
<template #title>问答机器人</template>
|
||
<i></i>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- 西海岸 -->
|
||
<div
|
||
class="details-pageconetent"
|
||
v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
|
||
>
|
||
<home-header></home-header>
|
||
<div class="details-pageconetent-left">
|
||
<detailsPageconetentTree />
|
||
</div>
|
||
<div class="top" v-if="Cardsname != '知识库'">
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 搜索框 -->
|
||
<div class="resultListSearchInput-father">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
<div class="hengxian"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 分类 -->
|
||
<div class="top-content-father" :key="listKey">
|
||
<template
|
||
v-if="
|
||
Cardsname == '组件服务' ||
|
||
Cardsname == '应用资源' ||
|
||
Cardsname == ''
|
||
"
|
||
>
|
||
<div class="top-content-son">
|
||
<div
|
||
v-for="(item, index) in ListContent.records"
|
||
:key="index"
|
||
class="top-content"
|
||
>
|
||
<span class="top-content-title">
|
||
{{ item.name }}
|
||
</span>
|
||
<div
|
||
class="leixingsumfather"
|
||
:class="!item.shrinkFlag ? 'shrink' : ''"
|
||
>
|
||
<div
|
||
v-for="(item2, index2) in item.typeList"
|
||
:key="index2"
|
||
class="leixingsum"
|
||
>
|
||
<a-checkable-tag
|
||
:checked="
|
||
item.selectedTags &&
|
||
item.selectedTags.indexOf(item2.dict_label) !== -1
|
||
"
|
||
@change="
|
||
(checked) => handleChange(item2, checked, item.name)
|
||
"
|
||
>
|
||
{{ item2.dict_label }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="shrinkTag"
|
||
v-if="item.showShrink"
|
||
:key="item.shrinkFlag"
|
||
>
|
||
<up-outlined
|
||
v-show="!item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
<down-outlined
|
||
v-show="item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="top-content" v-if="Cardsname == '组件服务'">
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<!-- 中心内容 -->
|
||
<searchResultList
|
||
v-show="resourceList.data && resourceList.data.length > 0"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<!-- 分页 -->
|
||
<div class="pagination">
|
||
<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"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||
style="margin-top: 200px"
|
||
>
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
<div class="top" v-else>
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="resultListSearchInput-father" style="background: unset">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
</div>
|
||
</div>
|
||
<KnowledgeBase
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
></KnowledgeBase>
|
||
</div>
|
||
<div class="talk-monitor" @click="openMonitor">
|
||
<a-tooltip>
|
||
<template #title>问答机器人</template>
|
||
<i></i>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
<!-- 包头 -->
|
||
<div
|
||
class="details-pageconetent"
|
||
v-else-if="whoShow1 && whoShow1.itShowBaoTou"
|
||
>
|
||
<home-header></home-header>
|
||
<div class="details-pageconetent-left">
|
||
<detailsPageconetentTree />
|
||
</div>
|
||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-show="Cardsname !== '数据资源'"
|
||
class="resultListSearchInput-father"
|
||
>
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
<div class="hengxian"></div>
|
||
</div>
|
||
</div>
|
||
<div class="top-content-father" :key="listKey">
|
||
<template
|
||
v-if="
|
||
Cardsname == '组件服务' ||
|
||
Cardsname == '应用资源' ||
|
||
Cardsname == ''
|
||
"
|
||
>
|
||
<div class="top-content-son">
|
||
<div
|
||
v-for="(item, index) in ListContent.records"
|
||
:key="index"
|
||
class="top-content"
|
||
>
|
||
<span class="top-content-title">
|
||
{{ item.name }}
|
||
</span>
|
||
<div
|
||
class="leixingsumfather"
|
||
:class="!item.shrinkFlag ? 'shrink' : ''"
|
||
>
|
||
<div
|
||
v-for="(item2, index2) in item.typeList"
|
||
:key="index2"
|
||
class="leixingsum"
|
||
>
|
||
<a-checkable-tag
|
||
:checked="
|
||
item.selectedTags &&
|
||
item.selectedTags.indexOf(item2.dict_label) !== -1
|
||
"
|
||
@change="
|
||
(checked) => handleChange(item2, checked, item.name)
|
||
"
|
||
>
|
||
{{ item2.dict_label }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="shrinkTag"
|
||
v-if="item.showShrink"
|
||
:key="item.shrinkFlag"
|
||
>
|
||
<up-outlined
|
||
v-show="!item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
<down-outlined
|
||
v-show="item.shrinkFlag"
|
||
@click="changeShrink(item.name)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="top-content" v-if="Cardsname == '组件服务'">
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<searchResultList
|
||
v-show="resourceList.data && resourceList.data.length"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<div class="pagination">
|
||
<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"
|
||
/>
|
||
</div>
|
||
<div class="shujuziyuan" v-if="Cardsname == '数据资源'">
|
||
<div class="yunziyuan">
|
||
<div class="yunziyuan-title">
|
||
<div class="tupian"></div>
|
||
<div
|
||
class="title"
|
||
@click="dianjitiaozhaun('青岛市政务资源管理平台')"
|
||
>
|
||
青岛市政务资源管理平台{{ dataShowdev }}
|
||
</div>
|
||
</div>
|
||
<div class="keyongziyuan">
|
||
<div v-for="item in shujuziyuanqingkuang" :key="item">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.value }}</div>
|
||
{{ item.danwei }}
|
||
</div>
|
||
</div>
|
||
<div class="shuoming">
|
||
说明：数据资源目前通过青岛市政务信息网进行申请
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||
style="margin-top: 2rem"
|
||
>
|
||
<a-empty v-if="!(Cardsname == '数据资源')" />
|
||
</div>
|
||
</div>
|
||
<div class="top" v-else-if="Cardsname == '数据资源'">
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<details-page-resource></details-page-resource>
|
||
</div>
|
||
<div class="top" v-else>
|
||
<div class="top-title">
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.name"
|
||
:class="item.name === Cardsname ? 'sel' : ''"
|
||
@click="changeCards(item.name)"
|
||
>
|
||
<span
|
||
class="photo"
|
||
:style="{
|
||
backgroundImage: `url(${item.photo}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="resultListSearchInput-father" style="background: unset">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getAppResources"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<button class="button-reset" @click="chongzhi()">重置</button>
|
||
</div>
|
||
</div>
|
||
<KnowledgeBase
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
></KnowledgeBase>
|
||
</div>
|
||
<!--<div class="talk-monitor" @click="openMonitor">
|
||
<a-tooltip>
|
||
<template #title>问答机器人</template>
|
||
<i></i>
|
||
</a-tooltip>
|
||
</div>-->
|
||
</div>
|
||
<home-footer></home-footer>
|
||
</template>
|
||
<script>
|
||
import HomeFooter from '@/views/newHome/components/Footer'
|
||
import mybus from '@/myplugins/mybus'
|
||
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||
import {
|
||
selectDicStoreAll,
|
||
pageWithAttrs,
|
||
getDataResource,
|
||
getIntegrationServicesList,
|
||
} from '@/api/home.js'
|
||
import { getSgcList } from '@/api/personalCenter'
|
||
import { useRouter } from 'vue-router'
|
||
import HomeHeader from '@/views/home/components/header'
|
||
import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
|
||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||
import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
|
||
// 数据资源引用
|
||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||
// 基础设施引用
|
||
import infrastructurePage from '@/views/home/infrastructurePage.vue'
|
||
import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
|
||
import { message } from 'ant-design-vue'
|
||
import {
|
||
titleNameArray,
|
||
keyongziyuanqingkaungArray,
|
||
shujuziyuanqingkuangArray,
|
||
} from './constantData/showData.js'
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const titleName = ref(titleNameArray)
|
||
|
||
const openMonitor = () => {
|
||
window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
|
||
}
|
||
// 模糊查询
|
||
const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
|
||
const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)
|
||
|
||
// 西海岸数据资源页
|
||
// const dataShowbt = ref(whoShow.itshow)
|
||
// 青岛数据资源页
|
||
const whoShow1 = ref(whoShow)
|
||
// 分页
|
||
const loading = ref(true)
|
||
const currentPage = ref(1)
|
||
const currentPageSize = ref(5)
|
||
const pageSizeOptions = ref(['5', '10', '20', '50'])
|
||
const router = useRouter()
|
||
const select = router.currentRoute.value.query.select
|
||
const str = router.currentRoute.value.query.str
|
||
const searchValue = ref(str)
|
||
let tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
let appLiCation = router.currentRoute.value.query.appLiCation
|
||
const Cardsname = ref(select)
|
||
// 刷新筛选条件组件
|
||
let listKey = ref(0)
|
||
// 刷新筛选列表信息组件
|
||
const listKey2 = ref(0)
|
||
// 储存筛选条件状态
|
||
const state = reactive({
|
||
selectedTags: [],
|
||
diyici: [],
|
||
})
|
||
// 查询参数
|
||
const paramsGetResources = {
|
||
districtId: '',
|
||
deptIds: [],
|
||
pageNum: 1,
|
||
pageSize: currentPageSize.value,
|
||
type: Cardsname.value,
|
||
name: '',
|
||
infoList: [],
|
||
orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||
}
|
||
|
||
// 查询
|
||
const onSearch = () => {
|
||
loading.value = true
|
||
paramsGetResources.name = searchValue.value
|
||
currentPage.value = 1
|
||
}
|
||
// 免批
|
||
const tagFlag = ref('')
|
||
// 视频资源
|
||
const stateTags = ref(['在线', '离线'])
|
||
const selStateTags = ref([])
|
||
const handleChangeStateTag = (tag, checked) => {
|
||
loading.value = true
|
||
paramsGetResources.pageNum = 1
|
||
currentPage.value = 1
|
||
paramsGetResources.infoList = paramsGetResources.infoList.filter(
|
||
(item) => item.attrType !== 'status'
|
||
)
|
||
if (checked) {
|
||
selStateTags.value = [tag]
|
||
paramsGetResources.infoList.push({
|
||
attrType: 'status',
|
||
attrValue: tag == '在线' ? 1 : 0,
|
||
})
|
||
} else {
|
||
selStateTags.value = selStateTags.value.filter((t) => t !== tag)
|
||
}
|
||
getAppResources()
|
||
console.log(tag, checked)
|
||
}
|
||
const selBqTags = ref([])
|
||
const handleChangeBqTags = (tag, checked) => {
|
||
loading.value = true
|
||
paramsGetResources.pageNum = 1
|
||
currentPage.value = 1
|
||
paramsGetResources.infoList = paramsGetResources.infoList.filter(
|
||
(item) => item.attrType !== 'labelName'
|
||
)
|
||
if (checked) {
|
||
selBqTags.value = [tag]
|
||
paramsGetResources.infoList.push({
|
||
attrType: 'labelName',
|
||
attrValue: tag,
|
||
})
|
||
} else {
|
||
selBqTags.value = selBqTags.value.filter((t) => t !== tag)
|
||
}
|
||
getAppResources()
|
||
}
|
||
const current = ref(5)
|
||
const chagneTag = (name) => {
|
||
paramsGetResources.pageNum = 1
|
||
currentPage.value = 1
|
||
if (tagFlag.value == name) {
|
||
tagFlag.value = ''
|
||
paramsGetResources.shareCondition = ''
|
||
} else {
|
||
tagFlag.value = name
|
||
paramsGetResources.shareCondition = name
|
||
}
|
||
listKey.value++
|
||
getAppResources()
|
||
}
|
||
|
||
// 重置数据
|
||
const chongzhi = () => {
|
||
loading.value = true
|
||
// 重置模糊查字段
|
||
searchValue.value = ''
|
||
paramsGetResources.name = searchValue.value
|
||
// 重置筛选条件
|
||
ListContent.records.forEach((val) => {
|
||
val.selectedTags = []
|
||
})
|
||
// 分页
|
||
currentPage.value = 1
|
||
currentPageSize.value = 5
|
||
// 重置查询条件
|
||
paramsGetResources.districtId = ''
|
||
paramsGetResources.deptIds = []
|
||
paramsGetResources.pageNum = 1
|
||
paramsGetResources.pageSize = 5
|
||
paramsGetResources.name = ''
|
||
paramsGetResources.shareCondition = ''
|
||
paramsGetResources.infoList = []
|
||
paramsGetResources.orderField = 'total'
|
||
paramsGetResources.orderType = 'DESC'
|
||
mybus.emit('chongzhi')
|
||
getAppResources()
|
||
}
|
||
|
||
//跳转链接
|
||
function dianjitiaozhaun(name) {
|
||
switch (name) {
|
||
case '青岛市政务资源管理平台':
|
||
window.open('http://15.72.158.81/web/root/homepage.aspx')
|
||
console.log('name', name)
|
||
break
|
||
case '青岛市视频资源管理平台':
|
||
window.open('http://15.72.183.88:8760/yzy/main')
|
||
console.log('name', name)
|
||
break
|
||
}
|
||
}
|
||
|
||
// 点击筛选条件回调
|
||
const handleChange = (tag, checked, name) => {
|
||
loading.value = true
|
||
paramsGetResources.pageNum = 1
|
||
currentPage.value = 1
|
||
console.log('点击筛选条件=================>', tag, checked, name)
|
||
ListContent.records.forEach((val) => {
|
||
if (val.name === name) {
|
||
paramsGetResources.infoList = paramsGetResources.infoList.filter(
|
||
(item) => item.attrType !== name
|
||
)
|
||
if (val.selectedTags.indexOf(tag.dict_label) == -1) {
|
||
val.selectedTags = [tag.dict_label]
|
||
paramsGetResources.infoList.push({
|
||
attrType: name,
|
||
attrValue: tag.dict_label,
|
||
})
|
||
} else {
|
||
val.selectedTags.splice(
|
||
val.selectedTags.indexOf(tag.dict_label),
|
||
1
|
||
)
|
||
}
|
||
}
|
||
})
|
||
listKey.value++
|
||
getAppResources()
|
||
}
|
||
const getNewList = () => {
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
const params = {
|
||
topCategoryName: Cardsname.value,
|
||
}
|
||
selectDicStoreAll(params).then((res) => {
|
||
console.log('selectDicStoreAll============>', res)
|
||
const { data } = res.data
|
||
ListContent.records = []
|
||
ListContent.records = data
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
mybus.emit('getDeptList')
|
||
ListContent.records.forEach((val) => {
|
||
val.selectedTags = []
|
||
if (val.name == '应用领域' && appLiCation) {
|
||
val.selectedTags[0] = []
|
||
val.selectedTags[0] = appLiCation
|
||
paramsGetResources.infoList.push({
|
||
attrType: '应用领域',
|
||
attrValue: appLiCation,
|
||
})
|
||
if (searchValue.value) {
|
||
paramsGetResources.name = searchValue.value
|
||
}
|
||
pageWithAttrs(paramsGetResources).then((res) => {
|
||
resourceList.data = []
|
||
resourceList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
})
|
||
}
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
if (val.name == '技术领域' && tecHnosphere) {
|
||
val.selectedTags[1] = tecHnosphere
|
||
paramsGetResources.infoList.push({
|
||
attrType: '技术领域',
|
||
attrValue: tecHnosphere,
|
||
})
|
||
if (searchValue.value) {
|
||
paramsGetResources.name = searchValue.value
|
||
}
|
||
pageWithAttrs(paramsGetResources).then((res) => {
|
||
resourceList.data = []
|
||
resourceList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
})
|
||
console.log('paramsGetResources', paramsGetResources)
|
||
}
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
if (val.typeList && val.typeList.length > 8) {
|
||
val.showShrink = true
|
||
val.shrinkFlag = true
|
||
}
|
||
})
|
||
listKey.value++
|
||
listKey2.value++
|
||
})
|
||
console.log('selectDicStoreAll', ListContent)
|
||
}
|
||
// 筛选条件
|
||
let ListContent = reactive({
|
||
records: [],
|
||
})
|
||
const resourceList = reactive({ data: [] })
|
||
const videoList = reactive({ data: [] })
|
||
const resourceTotal = ref('')
|
||
const getAppResources = (switchIndex) => {
|
||
//switchIndex这个参数是下面的分页传过来的参数
|
||
paramsGetResources.name = searchValue.value
|
||
paramsGetResources.type = Cardsname.value
|
||
console.log(
|
||
'执行getAppResources====================》',
|
||
paramsGetResources
|
||
)
|
||
if (
|
||
!whoShow1.value.itShowBaoTou &&
|
||
paramsGetResources.type === '数据资源'
|
||
) {
|
||
if (switchIndex != '分页查询') {
|
||
paramsGetResources.pageNum = 1
|
||
}
|
||
let dataResourceParams = {
|
||
serviceName: paramsGetResources.name || '', //资源名称
|
||
orderField: whoShow1.value.itShowQingDao
|
||
? paramsGetResources.orderField == 'applyCount'
|
||
? 'syqk'
|
||
: 'fbrq'
|
||
: paramsGetResources.orderField == 'applyCount'
|
||
? 'requestCount'
|
||
: 'createTime', //排序字段
|
||
orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
|
||
pageNum: paramsGetResources.pageNum, //页码
|
||
pageSize: paramsGetResources.pageSize, //分页大小
|
||
}
|
||
getDataResource(dataResourceParams).then((res) => {
|
||
if (whoShow1.value.itShowQingDao) {
|
||
res.data.data.data.forEach((val) => {
|
||
val.id = val.guid // id
|
||
val.name = val.zyname // 名字
|
||
val.sjlCount = val.sjcczl // 数据量
|
||
val.applyCount = val.syqk // 申请量
|
||
val.deptName = val.TGBM // 部门
|
||
val.createDate = val.fbrq // 发布时间
|
||
})
|
||
resourceList.data = res.data.data.data || []
|
||
resourceTotal.value = res.data.data.rows || ''
|
||
loading.value = false
|
||
} else if (whoShow1.value.itShowXiHaiAn) {
|
||
res.data.data.list.forEach((val) => {
|
||
val.id = val.serviceId // id
|
||
val.name = val.serviceName // 名字
|
||
val.sjlCount = val.requestQuantity // 数据量
|
||
val.applyCount = val.requestCount // 申请量
|
||
val.deptName = val.departmentName // 部门
|
||
val.createTime = val.createTime.split('.')[0]
|
||
val.createDate = val.createTime // 发布时间
|
||
})
|
||
resourceList.data = res.data.data.list || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
loading.value = false
|
||
}
|
||
})
|
||
} else if (paramsGetResources.type !== '数据资源') {
|
||
if (switchIndex != '分页查询') {
|
||
paramsGetResources.pageNum = 1
|
||
}
|
||
pageWithAttrs(paramsGetResources).then((res) => {
|
||
console.log('查询列表============>', resourceList, res.data.data)
|
||
resourceList.data = []
|
||
videoList.data = []
|
||
if (Cardsname.value === '基础设施') {
|
||
resourceList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
loading.value = false
|
||
} else {
|
||
resourceTotal.value = res.data.data.total || ''
|
||
getShoppingCartList(res.data.data.records)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
let shoppingCartList = ref([])
|
||
// 获取申购车列表
|
||
const getShoppingCartList = (list) => {
|
||
getSgcList({
|
||
pageNum: 1,
|
||
pageSize: 500,
|
||
name: '',
|
||
type: '',
|
||
}).then((res) => {
|
||
console.log('申购车列表================>', res.data.data.records)
|
||
shoppingCartList.value = res.data.data.records
|
||
list.map((item) => {
|
||
item.isInShoppingCart = false
|
||
item.isInShoppingCart = shoppingCartList.value.some((item2) => {
|
||
return item.id === item2.resourceId
|
||
})
|
||
})
|
||
console.log('经过过滤后的列表信息', list)
|
||
resourceList.data = list
|
||
})
|
||
}
|
||
mybus.on('paramsGetResources', (ids) => {
|
||
if (ids && ids.length > 0) {
|
||
paramsGetResources.deptIds = ids
|
||
} else {
|
||
delete paramsGetResources.deptIds
|
||
}
|
||
getAppResources()
|
||
console.log('paramsGetResources', paramsGetResources)
|
||
})
|
||
mybus.on('changePage', (page) => {
|
||
paramsGetResources.pageNum = page
|
||
console.log('changePage', paramsGetResources.pageNum)
|
||
getAppResources('分页查询')
|
||
console.log('paramsGetResources', paramsGetResources)
|
||
})
|
||
mybus.on('changeSelcted', () => {
|
||
getAppResources()
|
||
})
|
||
mybus.on('changeInfo', (info) => {
|
||
paramsGetResources.pageNum = 1
|
||
console.log('paramsGetResources.infoList', paramsGetResources.infoList)
|
||
paramsGetResources.infoList = paramsGetResources.infoList.filter(
|
||
(item) => item.attrType !== '文件类型'
|
||
)
|
||
if (info) {
|
||
paramsGetResources.infoList.push(info)
|
||
}
|
||
getAppResources()
|
||
console.log('paramsGetResources', paramsGetResources)
|
||
})
|
||
mybus.on('refresh', () => {
|
||
paramsGetResources.pageNum = 1
|
||
currentPage.value = 1
|
||
getAppResources()
|
||
})
|
||
mybus.on('changeCondition', (condition) => {
|
||
// orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||
// orderType: 'ASC' ASC 升序 DESC 降序
|
||
paramsGetResources.orderField = condition.orderField
|
||
paramsGetResources.orderType = condition.orderType
|
||
getAppResources()
|
||
console.log('paramsGetResources', paramsGetResources)
|
||
})
|
||
const pageChange = (val) => {
|
||
console.log(val)
|
||
loading.value = true
|
||
currentPage.value = val
|
||
paramsGetResources.pageNum = val
|
||
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
|
||
getAppResources(params)
|
||
}
|
||
|
||
onMounted(() => {
|
||
listKey2.value++
|
||
|
||
// 获取筛选条件
|
||
getNewList()
|
||
|
||
if (!tecHnosphere && !appLiCation) {
|
||
getAppResources()
|
||
}
|
||
})
|
||
// 全部申请
|
||
const applyAll = () => {
|
||
router.push({
|
||
path: '/apply',
|
||
query: {
|
||
applyAll: true,
|
||
},
|
||
})
|
||
}
|
||
// 分页
|
||
const onShowSizeChange = (current, pageSize) => {
|
||
currentPage.value = current
|
||
currentPageSize.value = pageSize
|
||
paramsGetResources.pageNum = current
|
||
paramsGetResources.pageSize = pageSize
|
||
console.log('执行onShowSizeChange', paramsGetResources)
|
||
getAppResources()
|
||
}
|
||
watch(currentPageSize, () => {
|
||
console.log('pageSize', currentPageSize.value)
|
||
})
|
||
|
||
const changeShrink = (name) => {
|
||
ListContent.records.forEach((val) => {
|
||
if (val.name === name) {
|
||
console.log(val)
|
||
val.shrinkFlag = !val.shrinkFlag
|
||
}
|
||
})
|
||
}
|
||
const changeCards = (name) => {
|
||
resourceList.data = []
|
||
videoList.data = []
|
||
resourceTotal.value = ''
|
||
router.currentRoute.value.query.tecHnosphere = ''
|
||
router.currentRoute.value.query.appLiCation = ''
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
let newQuery = JSON.parse(
|
||
JSON.stringify(router.currentRoute.value.query)
|
||
)
|
||
Cardsname.value = name
|
||
console.log(
|
||
'更改前url中的select=====================>',
|
||
router.currentRoute.value.query.select
|
||
)
|
||
newQuery.select = Cardsname.value
|
||
router
|
||
.replace({
|
||
query: newQuery,
|
||
})
|
||
.then(() => {
|
||
console.log(
|
||
'更改后url中的select=====================>',
|
||
router.currentRoute.value.query.select
|
||
)
|
||
// router.currentRoute.value.query.select
|
||
tagFlag.value = false
|
||
chongzhi()
|
||
getNewList()
|
||
})
|
||
}
|
||
// 监听地址栏变化
|
||
window.addEventListener('hashchange', () => {
|
||
location.reload()
|
||
console.log('URL发生变化了')
|
||
})
|
||
return {
|
||
listKey,
|
||
ListContent,
|
||
searchValue,
|
||
currentPage,
|
||
...toRefs(state),
|
||
changeCards,
|
||
handleChange,
|
||
resourceList,
|
||
videoList,
|
||
resourceTotal,
|
||
pageChange,
|
||
listKey2,
|
||
Cardsname,
|
||
getNewList,
|
||
getAppResources,
|
||
chongzhi,
|
||
onSearch,
|
||
onShowSizeChange,
|
||
currentPageSize,
|
||
pageSizeOptions,
|
||
changeShrink,
|
||
titleName,
|
||
keyongziyuanqingkaung,
|
||
shujuziyuanqingkuang,
|
||
dianjitiaozhaun,
|
||
chagneTag,
|
||
tagFlag,
|
||
current,
|
||
openMonitor,
|
||
stateTags,
|
||
selStateTags,
|
||
handleChangeStateTag,
|
||
// bqTags,
|
||
selBqTags,
|
||
handleChangeBqTags,
|
||
loading,
|
||
getShoppingCartList,
|
||
whoShow1,
|
||
applyAll,
|
||
}
|
||
},
|
||
components: {
|
||
HomeHeader,
|
||
HomeFooter,
|
||
detailsPageconetentTree,
|
||
searchResultList,
|
||
UpOutlined,
|
||
DownOutlined,
|
||
KnowledgeBase,
|
||
// VideoCameraOutlined,
|
||
// VideoSurveillance,
|
||
DetailsPageResource,
|
||
infrastructurePage,
|
||
detailsPageInfrastructureTree,
|
||
},
|
||
beforeUnmount() {
|
||
mybus.off('selectCardsitem')
|
||
mybus.off('paramsGetResources')
|
||
mybus.off('changeCondition')
|
||
mybus.off('refresh')
|
||
mybus.off('changePage')
|
||
mybus.off('changeInfo')
|
||
},
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.resultListSearchInput-father {
|
||
background: #f3f5f9;
|
||
padding: 0.2rem;
|
||
|
||
// padding-left: 0.2rem;
|
||
// padding-top: 0.2rem;
|
||
.resultListSearchInput-son {
|
||
background: #fff;
|
||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||
|
||
.hengxian {
|
||
width: 100%;
|
||
height: 0.01rem;
|
||
background: rgba(150, 144, 144, 0.3);
|
||
margin-top: 0.2rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.resultListSearchInput {
|
||
margin-left: 0.1rem;
|
||
|
||
:deep(.ant-input) {
|
||
width: 4rem;
|
||
height: 0.36rem;
|
||
background: #fff;
|
||
border-radius: 0.04rem;
|
||
}
|
||
|
||
:deep(.ant-input-search-button) {
|
||
width: 0.8rem;
|
||
height: 0.36rem;
|
||
background: #0087ff;
|
||
border-radius: 0.04rem !important;
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
line-height: 0.34rem;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
:deep(.ant-input-group-addon) {
|
||
left: 0 !important;
|
||
}
|
||
}
|
||
|
||
.button-reset {
|
||
border: 0;
|
||
outline: none;
|
||
width: 0.8rem;
|
||
height: 0.36rem;
|
||
background: #e1edfa;
|
||
border-radius: 0.04rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
color: #0087ff;
|
||
line-height: 0.34rem;
|
||
margin-left: 2.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
margin-left: 2.5rem;
|
||
background: #f3f5f9;
|
||
|
||
.pagination {
|
||
background: #f3f5f9;
|
||
padding-bottom: 0.6rem;
|
||
}
|
||
|
||
.jichusheshi {
|
||
height: 4.45rem;
|
||
|
||
.yunziyuan {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.shuoming {
|
||
position: absolute;
|
||
right: 0.2rem;
|
||
top: 0.15rem;
|
||
font-size: 0.12rem;
|
||
}
|
||
|
||
.yunziyuan-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tupian {
|
||
}
|
||
|
||
.title {
|
||
margin-left: 0.1rem;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 0.2rem;
|
||
margin-right: 0.3rem;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.keyongziyuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 0.3rem;
|
||
margin-right: 0.3rem;
|
||
|
||
div {
|
||
display: flex;
|
||
|
||
div:last-child {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.yunziyuan > div {
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
|
||
.shipin {
|
||
width: 100%;
|
||
|
||
.shipin-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tupian {
|
||
}
|
||
|
||
.title {
|
||
margin-left: 0.1rem;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 0.2rem;
|
||
|
||
div {
|
||
margin-right: 0.6rem;
|
||
}
|
||
|
||
.shuzi {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shipin > div {
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
}
|
||
|
||
.jichusheshi > div {
|
||
padding-top: 0.1rem;
|
||
border-radius: 0.04rem;
|
||
margin-bottom: 0.2rem;
|
||
padding-bottom: 0.4rem;
|
||
}
|
||
|
||
.shujuziyuan {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-top: 0.4rem;
|
||
|
||
.yunziyuan {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.shuoming {
|
||
position: absolute;
|
||
right: 0.2rem;
|
||
top: 0.15rem;
|
||
font-size: 0.12rem;
|
||
}
|
||
|
||
.yunziyuan-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 0.2rem;
|
||
|
||
.tupian {
|
||
}
|
||
|
||
.title {
|
||
margin-left: 0.1rem;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 0.2rem;
|
||
margin-right: 0.3rem;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.keyongziyuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 0.3rem;
|
||
margin-right: 0.3rem;
|
||
|
||
div {
|
||
display: flex;
|
||
|
||
div:last-child {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.yunziyuan > div {
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
}
|
||
|
||
.shujuziyuan > div {
|
||
background: #eaf4ff;
|
||
padding-top: 0.1rem;
|
||
border-radius: 0.04rem;
|
||
margin-bottom: 0.2rem;
|
||
padding-bottom: 0.4rem;
|
||
}
|
||
|
||
.top-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 0.2rem;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
color: #000000;
|
||
line-height: 0.34rem;
|
||
|
||
.photo {
|
||
display: inline-block;
|
||
height: 0.44rem;
|
||
width: 0.44rem;
|
||
margin-right: 0.1rem;
|
||
}
|
||
|
||
div {
|
||
margin: 0 0.2rem;
|
||
padding: 0 0.1rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
div:hover {
|
||
color: #0087ff;
|
||
}
|
||
|
||
.sel {
|
||
font-weight: 600;
|
||
color: #0087ff;
|
||
border-bottom: 0.02rem solid #0087ff;
|
||
}
|
||
}
|
||
|
||
.top-content-father {
|
||
width: 100%;
|
||
padding: 0 0.2rem 0.2rem 0.2rem;
|
||
background: #f3f5f9;
|
||
margin-bottom: 0.2rem;
|
||
|
||
.top-content-son {
|
||
background: #fff;
|
||
padding: 0.2rem 0;
|
||
}
|
||
|
||
.top-content {
|
||
display: flex;
|
||
margin-top: 0rem;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
position: relative;
|
||
line-height: 0.3614rem;
|
||
white-space: normal;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.leixingsumfather {
|
||
width: 8.1rem;
|
||
display: inline-block;
|
||
height: 0.3014rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.leixingsumfather2 {
|
||
width: 9.2rem;
|
||
}
|
||
|
||
.leixingsum {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 0.05rem;
|
||
|
||
.ant-tag-checkable {
|
||
width: 0.83rem;
|
||
height: 0.25rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 0.05rem;
|
||
padding-right: 0.05rem;
|
||
float: left;
|
||
margin: 0 0.15rem;
|
||
font-family: 'AlibabaPuHuiTiR';
|
||
font-size: 0.14rem;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
:deep(.ant-tag-checkable-checked) {
|
||
margin-left: 0.15rem;
|
||
margin-right: 0.15rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.ant-tag-checkable:active,
|
||
.ant-tag-checkable-checked {
|
||
width: 0.85rem;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
border-radius: 0.16rem;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.top-content:nth-child(1) {
|
||
margin-top: 0rem !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shrinkTag {
|
||
width: 0.5rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
margin-bottom: 0.05rem;
|
||
|
||
span {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.shrink {
|
||
height: unset !important;
|
||
overflow: unset !important;
|
||
}
|
||
|
||
.talk-monitor {
|
||
position: fixed;
|
||
bottom: 0.5rem;
|
||
right: 0.1rem;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
|
||
i {
|
||
width: 0.64rem;
|
||
height: 0.64rem;
|
||
display: inline-block;
|
||
background: url('~@/assets/home/icon-talk.png');
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.top-content-father {
|
||
width: 10.87rem;
|
||
padding-left: 0.2rem;
|
||
|
||
// margin-bottom: .2rem;
|
||
.top-content {
|
||
display: flex;
|
||
margin-top: 0.23rem;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 0.68rem;
|
||
font-weight: 600;
|
||
white-space: normal;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 0.16rem;
|
||
margin-left: 0.3rem;
|
||
}
|
||
|
||
// .top-content-title {
|
||
// top: -0.2rem;
|
||
// }
|
||
.leixingsumfather {
|
||
width: 7.7rem;
|
||
display: inline-block;
|
||
height: 0.3014rem;
|
||
overflow: hidden;
|
||
// width: 7.18rem;
|
||
}
|
||
|
||
.leixingsum {
|
||
width: 0.93rem;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 0.05rem;
|
||
|
||
// margin-bottom: .1rem;
|
||
.ant-tag-checkable {
|
||
width: 0.85rem;
|
||
height: 0.25rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 0.05rem;
|
||
padding-right: 0.05rem;
|
||
float: left;
|
||
margin: 0 0.15rem;
|
||
font-family: 'AlibabaPuHuiTiR';
|
||
font-size: 0.14rem;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
:deep(.ant-tag-checkable-checked) {
|
||
// width: .67rem;
|
||
margin-left: 0.15rem;
|
||
margin-right: 0.15rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.ant-tag-checkable:active,
|
||
.ant-tag-checkable-checked {
|
||
width: 0.85rem;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
border-radius: 0.16rem;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.top-content:nth-child(1) {
|
||
margin-top: 0.41rem !important;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-card-grid) {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
</style>
|