2174 lines
67 KiB
Vue
2174 lines
67 KiB
Vue
<template>
|
||
<!-- 青岛 -->
|
||
|
||
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
||
<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}) `,
|
||
backgroundSize: 'cover',
|
||
}"
|
||
></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-show="Cardsname !== '基础设施' && 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">
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<searchResultList
|
||
v-show="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<div class="pagination">
|
||
<a-pagination
|
||
v-if="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
|
||
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="jichusheshi" v-if="Cardsname == '基础设施'">
|
||
<!-- <div class="yunziyuan">
|
||
<div class="yunziyuan-title">
|
||
<div class="tupian"></div>
|
||
<div class="title" @click="dianjitiaozhaun('青岛市云资源管理平台')">
|
||
青岛市云资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>可用资源情况</div>
|
||
<div>更新时间：2020-10-29</div>
|
||
</div>
|
||
<div class="keyongziyuan">
|
||
<div v-for="item in keyongziyuanqingkaung" :key="item">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="shuoming">
|
||
说明：政务云资源目前通过青岛市云资源管理平台进行申请
|
||
</div>
|
||
</div> -->
|
||
<!-- <div class="shipin">
|
||
<div class="shipin-title">
|
||
<div class="tupian"></div>
|
||
<div
|
||
class="title"
|
||
@click="dianjitiaozhaun('青岛市视频资源管理平台')"
|
||
>
|
||
青岛市视频资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>
|
||
视频总数：
|
||
<span class="shuzi">23</span>
|
||
万路
|
||
</div>
|
||
<div>更新时间：2022-05-06</div>
|
||
</div>
|
||
<div class="top-content-father">
|
||
<div class="top-content-son">
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '.08rem' }">
|
||
标签
|
||
</span>
|
||
<div
|
||
class="leixingsumfather leixingsumfather2"
|
||
style="height: unset"
|
||
>
|
||
<div class="leixingsum" v-for="tag in bqTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selBqTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeBqTags(tag, checked)"
|
||
style="width: 1rem"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '.08rem' }">
|
||
在线状态
|
||
</span>
|
||
<div class="leixingsumfather leixingsumfather2">
|
||
<div class="leixingsum" v-for="tag in stateTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selStateTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeStateTag(tag, checked)"
|
||
style="width: 1rem"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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="itemList" style="margin-top: .2rem">
|
||
<a-card :loading="loading">
|
||
<a-card-grid
|
||
style="width: 20%; text-align: center"
|
||
v-for="item in videoList.data"
|
||
:key="item.id"
|
||
>
|
||
<a-tooltip placement="topLeft">
|
||
<template #title>
|
||
<span>
|
||
{{ item.name }}
|
||
</span>
|
||
</template>
|
||
<video-camera-outlined />
|
||
{{ item.name }}
|
||
</a-tooltip>
|
||
</a-card-grid>
|
||
</a-card>
|
||
<a-pagination
|
||
v-model:current="currentPage"
|
||
pageSize="20"
|
||
:total="resourceTotal"
|
||
show-less-items
|
||
@change="pageChange"
|
||
hideOnSinglePage
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<VideoSurveillance></VideoSurveillance>
|
||
</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?.length <= 0" style="margin-top: 2rem">
|
||
<a-empty
|
||
v-if="!(Cardsname == '基础设施') && !(Cardsname == '数据资源')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="top" v-else-if="Cardsname == '数据资源' && dataShowbt">
|
||
<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>
|
||
<!-- 西海岸 -->
|
||
<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>
|
||
<!-- v-show="Cardsname !== '基础设施'" -->
|
||
<!-- 搜索框 -->
|
||
<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">
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<!-- 中心内容 -->
|
||
<searchResultList
|
||
v-show="resourceList.data?.length > 0"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<!-- 分页 -->
|
||
<div class="pagination">
|
||
<a-pagination
|
||
v-if="
|
||
resourceList.data?.length > 0 &&
|
||
Cardsname != '基础设施' &&
|
||
Cardsname != '数据资源'
|
||
"
|
||
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"
|
||
/>
|
||
<a-pagination
|
||
v-else
|
||
v-model:current="currentPage"
|
||
v-model:pageSize="currentPageSize"
|
||
show-size-changer
|
||
show-less-items
|
||
show-quick-jumper
|
||
:total="resourceTotal"
|
||
:page-size-options="pageSizeOptions"
|
||
@change="pageChangeOther"
|
||
@showSizeChange="onShowSizeChangeOther"
|
||
/>
|
||
</div>
|
||
<!-- <div class="jichusheshi" v-if="Cardsname == '基础设施'">
|
||
<div class="yunziyuan">
|
||
<div class="yunziyuan-title">
|
||
<div class="tupian"></div>
|
||
<div class="title" @click="dianjitiaozhaun('青岛市云资源管理平台')">
|
||
青岛市云资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>可用资源情况</div>
|
||
<div>更新时间：2020-10-29</div>
|
||
</div>
|
||
<div class="keyongziyuan">
|
||
<div v-for="item in keyongziyuanqingkaung" :key="item">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="shuoming">
|
||
说明：政务云资源目前通过青岛市云资源管理平台进行申请
|
||
</div>
|
||
</div>
|
||
<div class="shipin">
|
||
<div class="shipin-title">
|
||
<div class="tupian"></div>
|
||
<div
|
||
class="title"
|
||
@click="dianjitiaozhaun('青岛市视频资源管理平台')"
|
||
>
|
||
青岛市视频资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>
|
||
视频总数：
|
||
<span class="shuzi">23</span>
|
||
万路
|
||
</div>
|
||
<div>更新时间：2022-05-06</div>
|
||
</div>
|
||
<div class="top-content-father">
|
||
<div class="top-content-son">
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '8px' }">
|
||
标签
|
||
</span>
|
||
<div
|
||
class="leixingsumfather leixingsumfather2"
|
||
style="height: unset"
|
||
>
|
||
<div class="leixingsum" v-for="tag in bqTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selBqTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeBqTags(tag, checked)"
|
||
style="width: 100px"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '8px' }">
|
||
在线状态
|
||
</span>
|
||
<div class="leixingsumfather leixingsumfather2">
|
||
<div class="leixingsum" v-for="tag in stateTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selStateTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeStateTag(tag, checked)"
|
||
style="width: 100px"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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="itemList" style="margin-top: 20px">
|
||
<a-card :loading="loading">
|
||
<a-card-grid
|
||
style="width: 20%; text-align: center"
|
||
v-for="item in videoList.data"
|
||
:key="item.id"
|
||
>
|
||
<a-tooltip placement="topLeft">
|
||
<template #title>
|
||
<span>
|
||
{{ item.name }}
|
||
</span>
|
||
</template>
|
||
<video-camera-outlined />
|
||
{{ item.name }}
|
||
</a-tooltip>
|
||
</a-card-grid>
|
||
</a-card>
|
||
<a-pagination
|
||
v-model:current="currentPage"
|
||
pageSize="20"
|
||
:total="resourceTotal"
|
||
show-less-items
|
||
@change="pageChange"
|
||
hideOnSinglePage
|
||
/>
|
||
</div>
|
||
</div>
|
||
<VideoSurveillance></VideoSurveillance>
|
||
</div> -->
|
||
<!-- <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
|
||
<div class="yunziyuan">
|
||
<div class="yunziyuan-title">
|
||
<div class="tupian"></div>
|
||
<div
|
||
class="title"
|
||
@click="dianjitiaozhaun('青岛市政务资源管理平台')"
|
||
>
|
||
青岛市政务资源管理平台
|
||
</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?.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 !== '基础设施' && 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">
|
||
<span class="top-content-title">共享条件</span>
|
||
<div class="leixingsumfather">
|
||
<div class="leixingsum">
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '申请'"
|
||
@change="() => chagneTag('申请')"
|
||
>
|
||
申请
|
||
</a-checkable-tag>
|
||
<a-checkable-tag
|
||
:checked="tagFlag == '免批申请'"
|
||
@change="() => chagneTag('免批申请')"
|
||
>
|
||
免批申请
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<searchResultList
|
||
v-show="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
|
||
:key="listKey2"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
:select-cardsname="Cardsname"
|
||
/>
|
||
<div class="pagination">
|
||
<a-pagination
|
||
v-if="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
|
||
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="jichusheshi" v-if="Cardsname == '基础设施'">
|
||
<!-- <div class="yunziyuan">
|
||
<div class="yunziyuan-title">
|
||
<div class="tupian"></div>
|
||
<div class="title" @click="dianjitiaozhaun('青岛市云资源管理平台')">
|
||
青岛市云资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>可用资源情况</div>
|
||
<div>更新时间：2020-10-29</div>
|
||
</div>
|
||
<div class="keyongziyuan">
|
||
<div v-for="item in keyongziyuanqingkaung" :key="item">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.value }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="shuoming">
|
||
说明：政务云资源目前通过青岛市云资源管理平台进行申请
|
||
</div>
|
||
</div> -->
|
||
<!-- <div class="shipin">
|
||
<div class="shipin-title">
|
||
<div class="tupian"></div>
|
||
<div
|
||
class="title"
|
||
@click="dianjitiaozhaun('青岛市视频资源管理平台')"
|
||
>
|
||
青岛市视频资源管理平台
|
||
</div>
|
||
</div>
|
||
<div class="fenlei">
|
||
<div>
|
||
视频总数：
|
||
<span class="shuzi">23</span>
|
||
万路
|
||
</div>
|
||
<div>更新时间：2022-05-06</div>
|
||
</div>
|
||
<div class="top-content-father">
|
||
<div class="top-content-son">
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '.08rem' }">
|
||
标签
|
||
</span>
|
||
<div
|
||
class="leixingsumfather leixingsumfather2"
|
||
style="height: unset"
|
||
>
|
||
<div class="leixingsum" v-for="tag in bqTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selBqTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeBqTags(tag, checked)"
|
||
style="width: 1rem"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-content">
|
||
<span class="top-content-title" :style="{ marginRight: '.08rem' }">
|
||
在线状态
|
||
</span>
|
||
<div class="leixingsumfather leixingsumfather2">
|
||
<div class="leixingsum" v-for="tag in stateTags" :key="tag">
|
||
<a-checkable-tag
|
||
:checked="selStateTags.indexOf(tag) > -1"
|
||
@change="(checked) => handleChangeStateTag(tag, checked)"
|
||
style="width: 1rem"
|
||
>
|
||
{{ tag }}
|
||
</a-checkable-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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="itemList" style="margin-top: .2rem">
|
||
<a-card :loading="loading">
|
||
<a-card-grid
|
||
style="width: 20%; text-align: center"
|
||
v-for="item in videoList.data"
|
||
:key="item.id"
|
||
>
|
||
<a-tooltip placement="topLeft">
|
||
<template #title>
|
||
<span>
|
||
{{ item.name }}
|
||
</span>
|
||
</template>
|
||
<video-camera-outlined />
|
||
{{ item.name }}
|
||
</a-tooltip>
|
||
</a-card-grid>
|
||
</a-card>
|
||
<a-pagination
|
||
v-model:current="currentPage"
|
||
pageSize="20"
|
||
:total="resourceTotal"
|
||
show-less-items
|
||
@change="pageChange"
|
||
hideOnSinglePage
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<VideoSurveillance></VideoSurveillance>
|
||
</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?.length <= 0" style="margin-top: 2rem">
|
||
<a-empty
|
||
v-if="!(Cardsname == '基础设施') && !(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,
|
||
// computed,
|
||
watch,
|
||
} from 'vue'
|
||
import {
|
||
UpOutlined,
|
||
DownOutlined,
|
||
// VideoCameraOutlined,
|
||
} from '@ant-design/icons-vue'
|
||
import { selectDicStoreAll, pageWithAttrs, zywMessage } from '@/api/home.js'
|
||
import { getSgcList } from '@/api/personalCenter'
|
||
import { useRouter } from 'vue-router'
|
||
// import { useStore } from 'vuex'
|
||
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 VideoSurveillance from '@/views/home/videoSurveillance'
|
||
// 数据资源引用
|
||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||
export default defineComponent({
|
||
setup() {
|
||
// const store = useStore()
|
||
const titleName = ref([
|
||
{
|
||
photo: require('@/assets/newHome/banner-zj.png'),
|
||
name: '组件服务',
|
||
},
|
||
{
|
||
photo: require('@/assets/newHome/banner-yy.png'),
|
||
name: '应用资源',
|
||
},
|
||
{
|
||
photo: require('@/assets/newHome/banner-jc.png'),
|
||
name: '基础设施',
|
||
},
|
||
{
|
||
photo: require('@/assets/newHome/banner-sj.png'),
|
||
name: '数据资源',
|
||
},
|
||
{
|
||
photo: require('@/assets/newHome/banner-zs.png'),
|
||
name: '知识库',
|
||
},
|
||
])
|
||
const openMonitor = () => {
|
||
window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
|
||
}
|
||
// const jichusheshi=ref([
|
||
// {
|
||
// name:'青岛市云资源管理平台'
|
||
|
||
// }
|
||
// ])
|
||
// 模糊查询
|
||
const keyongziyuanqingkaung = ref([
|
||
{
|
||
name: 'CPU/核：',
|
||
value: 2102,
|
||
},
|
||
{
|
||
name: '内存/T：',
|
||
value: 6.68,
|
||
},
|
||
{
|
||
name: '存储/T：',
|
||
value: 2102,
|
||
},
|
||
{
|
||
name: 'RDS for Mysql/G：',
|
||
value: 982.82,
|
||
},
|
||
{
|
||
name: 'RDS for SqlServer/G：',
|
||
value: 997.17,
|
||
},
|
||
])
|
||
const shujuziyuanqingkuang = ref([
|
||
{
|
||
name: '已上线目录：',
|
||
value: 10372,
|
||
danwei: '条',
|
||
},
|
||
{
|
||
name: '已发布服务：',
|
||
value: 1080,
|
||
danwei: '条',
|
||
},
|
||
{
|
||
name: '已发布接口：',
|
||
value: 976,
|
||
danwei: '条',
|
||
},
|
||
{
|
||
name: '更新时间：',
|
||
value: '2022-05-06',
|
||
},
|
||
])
|
||
// 西海岸数据资源页
|
||
// const dataShowbt = ref(whoShow.itshow)
|
||
// 青岛数据资源页
|
||
const whoShow1 = ref(whoShow)
|
||
console.log(whoShow, 'dataShowdev==========================>')
|
||
// 分页
|
||
const loading = ref(true)
|
||
const currentPage = ref(1)
|
||
const currentPageSize = ref(5)
|
||
const pageSizeOptions = ref(['5', '10', '20', '50'])
|
||
// 从store获取选中的类型
|
||
// const Cardsname = computed(() => store.getters['home/selectCardsnum'])
|
||
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 bqTags = ref([
|
||
'火车站',
|
||
'长途汽车站',
|
||
'轮渡码头',
|
||
'景区景点',
|
||
'公园广场',
|
||
'海水浴场',
|
||
'商业街区',
|
||
'建筑工地',
|
||
'农贸市场',
|
||
'渔港',
|
||
'河道',
|
||
'水库',
|
||
'积水点',
|
||
'加油站',
|
||
'山区/林区',
|
||
'墓地',
|
||
'旅游景点',
|
||
'输油管道',
|
||
'危化企业',
|
||
'学校',
|
||
'广场',
|
||
'公园',
|
||
'政府',
|
||
'桥梁',
|
||
'隧道',
|
||
'物资储备库',
|
||
'地铁站',
|
||
'安全生产企业',
|
||
'敬老院',
|
||
'医院',
|
||
'港口',
|
||
'高速',
|
||
])
|
||
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()
|
||
console.log(tag, checked)
|
||
}
|
||
const current = ref(2)
|
||
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()
|
||
console.log('点击筛选条件=================>', tagFlag.value)
|
||
}
|
||
// 重置数据
|
||
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)
|
||
}
|
||
// debugger
|
||
tecHnosphere = router.currentRoute.value.query.tecHnosphere
|
||
appLiCation = router.currentRoute.value.query.appLiCation
|
||
// if (!appLiCation && !tecHnosphere) {
|
||
// ListContent.records[0].selectedTags = []
|
||
// ListContent.records[1].selectedTags = []
|
||
// ListContent.records = []
|
||
// ListContent.records = data
|
||
// paramsGetResources.infoList = []
|
||
// // debugger
|
||
// // pageWithAttrs(paramsGetResources).then((res) => {
|
||
// // resourceList.data = []
|
||
// // resourceList.data = res.data.data.records
|
||
// // resourceTotal.value = res.data.data.total
|
||
// // })
|
||
// }
|
||
if (val.typeList?.length > 6) {
|
||
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 = () => {
|
||
paramsGetResources.name = searchValue.value
|
||
paramsGetResources.type = Cardsname.value
|
||
pageWithAttrs(paramsGetResources).then((res) => {
|
||
console.log('查询列表============>', resourceList, res.data.data)
|
||
resourceList.data = []
|
||
videoList.data = []
|
||
if (Cardsname.value === '基础设施') {
|
||
console.log('基础设施~~~~~~~~~~~')
|
||
videoList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
loading.value = false
|
||
} else {
|
||
// resourceList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
getShoppingCartList(res.data.data.records)
|
||
console.log(
|
||
'其他~~~~~~~~~~~',
|
||
resourceList.data,
|
||
resourceTotal.value
|
||
)
|
||
}
|
||
})
|
||
}
|
||
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
|
||
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()
|
||
// listKey.value++
|
||
})
|
||
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
|
||
getAppResources()
|
||
}
|
||
const findZywMessage = () => {
|
||
zywMessage().then((res) => {
|
||
console.log('findMessage============>', res)
|
||
const { data } = res.data
|
||
shujuziyuanqingkuang.value[0].value = data.sxmlcount
|
||
shujuziyuanqingkuang.value[1].value = data.yfbfwcount
|
||
shujuziyuanqingkuang.value[2].value = data.yfbjk
|
||
shujuziyuanqingkuang.value[3].value = new Date().toLocaleString()
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
listKey2.value++
|
||
console.log('45345345', Cardsname.value, tecHnosphere, appLiCation)
|
||
getNewList()
|
||
findZywMessage()
|
||
// onSearch()
|
||
if (!tecHnosphere && !appLiCation) {
|
||
getAppResources()
|
||
} else {
|
||
// getNewList()
|
||
}
|
||
})
|
||
// 分页
|
||
const onShowSizeChange = (current, pageSize) => {
|
||
currentPage.value = current
|
||
currentPageSize.value = pageSize
|
||
paramsGetResources.pageNum = current
|
||
paramsGetResources.pageSize = pageSize
|
||
getAppResources()
|
||
console.log(current, pageSize)
|
||
}
|
||
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
|
||
// debugger
|
||
let newQuery = JSON.parse(
|
||
JSON.stringify(router.currentRoute.value.query)
|
||
)
|
||
if (Cardsname.value == name) {
|
||
Cardsname.value = ''
|
||
} else {
|
||
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
|
||
)
|
||
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,
|
||
}
|
||
},
|
||
components: {
|
||
HomeHeader,
|
||
HomeFooter,
|
||
detailsPageconetentTree,
|
||
searchResultList,
|
||
UpOutlined,
|
||
DownOutlined,
|
||
KnowledgeBase,
|
||
// VideoCameraOutlined,
|
||
VideoSurveillance,
|
||
DetailsPageResource,
|
||
},
|
||
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-left: 0.2rem;
|
||
padding-top: 0.2rem;
|
||
.resultListSearchInput-son {
|
||
background: #fff;
|
||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||
margin-right: 0.2rem;
|
||
.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;
|
||
// flex-direction: column;
|
||
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: 10.87rem;
|
||
display: flex;
|
||
padding-top: 0.2rem;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
font-size: 0.16rem;
|
||
justify-content: left;
|
||
margin-left: 2.5rem;
|
||
.pagination {
|
||
background: #f3f5f9;
|
||
padding-bottom: 0.6rem;
|
||
}
|
||
.jichusheshi {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: center;
|
||
// padding-top: .4rem;
|
||
height: 4.45rem;
|
||
// overflow: hidden;
|
||
.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 {
|
||
// width: .89rem;
|
||
// height: .74rem;
|
||
// background: url('~@/assets/home/yunziyuan.png');
|
||
}
|
||
.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 {
|
||
// width: .56rem;
|
||
// height: .5rem;
|
||
// background: url('~@/assets/home/shipin.png');
|
||
}
|
||
.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 {
|
||
// background: #eaf4ff;
|
||
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 {
|
||
// width: .51rem;
|
||
// height: .5rem;
|
||
// background: url('~@/assets/home/shujuziyuan.png');
|
||
}
|
||
.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: 10.87rem;
|
||
padding-left: 0.2rem;
|
||
// margin-bottom: .2rem;
|
||
background: #f3f5f9;
|
||
.top-content-son {
|
||
background: #fff;
|
||
margin: 0rem 0.2rem 0.2rem 0rem;
|
||
padding-top: 0.2rem;
|
||
padding-bottom: 0.2rem;
|
||
}
|
||
.top-content {
|
||
display: flex;
|
||
margin-top: 0rem;
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
position: relative;
|
||
// width: .7rem;
|
||
line-height: 0.3614rem;
|
||
white-space: normal;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
// .top-content-title {
|
||
// top: -0.2rem;
|
||
// }
|
||
.leixingsumfather {
|
||
width: 8.1rem;
|
||
display: inline-block;
|
||
height: 0.3014rem;
|
||
overflow: hidden;
|
||
// width: 7.18rem;
|
||
}
|
||
.leixingsumfather2 {
|
||
width: 9.2rem;
|
||
}
|
||
.leixingsum {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 0.05rem;
|
||
// margin-bottom: .1rem;
|
||
.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) {
|
||
// 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: 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>
|