1855 lines
54 KiB
Vue
1855 lines
54 KiB
Vue
<template>
|
||
<div class="details-pageconetent">
|
||
<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>
|
||
<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 { getVideoList } from '@/api/file.js'
|
||
import { getSgcList } from '@/api/personalCenter'
|
||
import { getRecord } from '@/api/file'
|
||
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'
|
||
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 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 resourceData = ref({
|
||
status: true,
|
||
message: '查询成功！',
|
||
data: {
|
||
total: 77,
|
||
records: [
|
||
{
|
||
serviceId: '516224376401072128',
|
||
name: '电子警察数据',
|
||
description: '电子警察数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T06:45:42.000+0000',
|
||
requestNum: 1540003,
|
||
requestQuantity: 154060,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '553628641336680448',
|
||
name: '婚姻信息',
|
||
description: null,
|
||
type: 'data',
|
||
createDate: '2021-02-01T06:44:56.270+0000',
|
||
requestNum: 389562,
|
||
requestQuantity: 107211740,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '553628691060154368',
|
||
name: '联系信息',
|
||
description: null,
|
||
type: 'data',
|
||
createDate: '2021-02-01T06:44:53.368+0000',
|
||
requestNum: 365069,
|
||
requestQuantity: 68082160,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '515975914317189120',
|
||
name: '成都出租车GPS数据开放服务',
|
||
description: '成都出租车GPS数据开放服务',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:16.000+0000',
|
||
requestNum: 300044,
|
||
requestQuantity: 57500,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '516224453593042944',
|
||
name: '设施数据',
|
||
description: '设施数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T03:43:18.000+0000',
|
||
requestNum: 200000,
|
||
requestQuantity: 2000000,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '516224413768126464',
|
||
name: '车道数据',
|
||
description: '车道数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T03:43:26.000+0000',
|
||
requestNum: 195007,
|
||
requestQuantity: 1950140,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474782668898304',
|
||
name: '共享库数据',
|
||
description: '共享库数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:02.000+0000',
|
||
requestNum: 154048,
|
||
requestQuantity: 1578100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474693493800960',
|
||
name: '出租车GPS数据',
|
||
description: '出租车GPS数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:14.000+0000',
|
||
requestNum: 154044,
|
||
requestQuantity: 1574100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514475042631860224',
|
||
name: '出租车运营数据',
|
||
description: '出租车运营数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:11.000+0000',
|
||
requestNum: 154042,
|
||
requestQuantity: 1572100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474984528166912',
|
||
name: '环保数据',
|
||
description: '环保数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:23:59.000+0000',
|
||
requestNum: 154038,
|
||
requestQuantity: 1568100,
|
||
starNum: 5,
|
||
},
|
||
],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
size: 10,
|
||
startRow: 1,
|
||
endRow: 10,
|
||
pages: 8,
|
||
prePage: 0,
|
||
nextPage: 2,
|
||
isFirstPage: true,
|
||
isLastPage: false,
|
||
hasPreviousPage: false,
|
||
hasNextPage: true,
|
||
navigatePages: 8,
|
||
navigatepageNums: [1, 2, 3, 4, 5, 6, 7, 8],
|
||
navigateFirstPage: 1,
|
||
navigateLastPage: 8,
|
||
},
|
||
})
|
||
// 基础设施数据
|
||
const infrastructure = ref({
|
||
status: true,
|
||
message: '查询成功！',
|
||
data: {
|
||
total: 77,
|
||
records: [
|
||
{
|
||
serviceId: '516224376401072128',
|
||
name: '电子警察数据',
|
||
description: '电子警察数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T06:45:42.000+0000',
|
||
requestNum: 1540003,
|
||
requestQuantity: 154060,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '553628641336680448',
|
||
name: '婚姻信息',
|
||
description: null,
|
||
type: 'data',
|
||
createDate: '2021-02-01T06:44:56.270+0000',
|
||
requestNum: 389562,
|
||
requestQuantity: 107211740,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '553628691060154368',
|
||
name: '联系信息',
|
||
description: null,
|
||
type: 'data',
|
||
createDate: '2021-02-01T06:44:53.368+0000',
|
||
requestNum: 365069,
|
||
requestQuantity: 68082160,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '515975914317189120',
|
||
name: '成都出租车GPS数据开放服务',
|
||
description: '成都出租车GPS数据开放服务',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:16.000+0000',
|
||
requestNum: 300044,
|
||
requestQuantity: 57500,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '516224453593042944',
|
||
name: '设施数据',
|
||
description: '设施数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T03:43:18.000+0000',
|
||
requestNum: 200000,
|
||
requestQuantity: 2000000,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '516224413768126464',
|
||
name: '车道数据',
|
||
description: '车道数据',
|
||
type: 'data',
|
||
createDate: '2020-10-26T03:43:26.000+0000',
|
||
requestNum: 195007,
|
||
requestQuantity: 1950140,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474782668898304',
|
||
name: '共享库数据',
|
||
description: '共享库数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:02.000+0000',
|
||
requestNum: 154048,
|
||
requestQuantity: 1578100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474693493800960',
|
||
name: '出租车GPS数据',
|
||
description: '出租车GPS数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:14.000+0000',
|
||
requestNum: 154044,
|
||
requestQuantity: 1574100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514475042631860224',
|
||
name: '出租车运营数据',
|
||
description: '出租车运营数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:24:11.000+0000',
|
||
requestNum: 154042,
|
||
requestQuantity: 1572100,
|
||
starNum: 5,
|
||
},
|
||
{
|
||
serviceId: '514474984528166912',
|
||
name: '环保数据',
|
||
description: '环保数据',
|
||
type: 'data',
|
||
createDate: '2020-10-22T03:23:59.000+0000',
|
||
requestNum: 154038,
|
||
requestQuantity: 1568100,
|
||
starNum: 5,
|
||
},
|
||
],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
size: 10,
|
||
startRow: 1,
|
||
endRow: 10,
|
||
pages: 8,
|
||
prePage: 0,
|
||
nextPage: 2,
|
||
isFirstPage: true,
|
||
isLastPage: false,
|
||
hasPreviousPage: false,
|
||
hasNextPage: true,
|
||
navigatePages: 8,
|
||
navigatepageNums: [1, 2, 3, 4, 5, 6, 7, 8],
|
||
navigateFirstPage: 1,
|
||
navigateLastPage: 8,
|
||
},
|
||
})
|
||
const getAppResources = () => {
|
||
paramsGetResources.name = searchValue.value
|
||
paramsGetResources.type = Cardsname.value
|
||
if(paramsGetResources.type=='组件服务' || paramsGetResources.type=='应用资源'){
|
||
pageWithAttrs(paramsGetResources).then((res) => {
|
||
console.log('查询列表============>', resourceList, res.data.data)
|
||
resourceList.data = []
|
||
videoList.data = []
|
||
// resourceList.data = res.data.data.records || []
|
||
resourceTotal.value = res.data.data.total || ''
|
||
getShoppingCartList(res.data.data.records)
|
||
console.log(
|
||
'其他~~~~~~~~~~~',
|
||
resourceList.data,
|
||
resourceTotal.value
|
||
)
|
||
})
|
||
}else if(paramsGetResources.type=='基础设施'){
|
||
// videoList.data = res.data.data.records || []
|
||
// resourceTotal.value = infrastructure.value.data.total || ''
|
||
// getShoppingCartList(infrastructure.value.data.records)
|
||
// console.log(
|
||
// '基础设施~~~~~~~~~~~',
|
||
// resourceTotal.value,
|
||
// resourceList.data
|
||
// )
|
||
const params = {
|
||
name: searchValue.value,
|
||
pageNo: paramsGetResources.pageNum,
|
||
pageSize: paramsGetResources.pageSize
|
||
}
|
||
getVideoList(params).then((res) => {
|
||
// 赋值
|
||
res.data.data.list.forEach(val =>{
|
||
val.name = val.serviceName
|
||
val.createDate = val.updateTime
|
||
val.id = val.serviceId
|
||
})
|
||
resourceTotal.value = res.data.data.total
|
||
resourceList.data = res.data.data.list
|
||
})
|
||
}else if(paramsGetResources.type=='数据资源'){
|
||
const obj ={
|
||
serviceName:searchValue.value,
|
||
orderField:'updateTime',
|
||
orderType:'desc',
|
||
pageNum:paramsGetResources.pageNum,
|
||
pageSize:paramsGetResources.pageSize,
|
||
serviceType:'data',
|
||
// rq=1655196484308.0234
|
||
}
|
||
getRecord(obj).then(res => {
|
||
if(res.data.data){
|
||
res.data.data.list.forEach(val =>{
|
||
val.name = val.serviceName
|
||
val.createDate = val.updateTime
|
||
val.id = val.serviceId
|
||
// "requestNum": 0,
|
||
// "requestQuantity": 0,
|
||
// "starNum": 4,
|
||
// "shareStatus": "2"
|
||
})
|
||
resourceList.data = res.data.data.list || []
|
||
resourceTotal.value = resourceData.value.data.total || ''
|
||
// getShoppingCartList(resourceData.value.data.records)
|
||
console.log(
|
||
'数据资源~~~~~~~~~~~',
|
||
resourceTotal.value,
|
||
resourceList.data
|
||
)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
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 pageChangeOther = (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)
|
||
}
|
||
const onShowSizeChangeOther = (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,
|
||
// 数据资源
|
||
resourceData,
|
||
// 基础设施
|
||
infrastructure,
|
||
// 数据资源、基础设施分页
|
||
pageChangeOther,
|
||
onShowSizeChangeOther,
|
||
}
|
||
},
|
||
components: {
|
||
HomeHeader,
|
||
HomeFooter,
|
||
detailsPageconetentTree,
|
||
searchResultList,
|
||
UpOutlined,
|
||
DownOutlined,
|
||
KnowledgeBase,
|
||
// VideoCameraOutlined,
|
||
// VideoSurveillance,
|
||
},
|
||
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: 20px;
|
||
padding-top: 20px;
|
||
|
||
.resultListSearchInput-son {
|
||
background: #fff;
|
||
padding: 20px 20px 0px 30px;
|
||
margin-right: 20px;
|
||
|
||
.hengxian {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: rgba(150, 144, 144, 0.3);
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.resultListSearchInput {
|
||
margin-left: 10px;
|
||
|
||
:deep(.ant-input) {
|
||
width: 400px;
|
||
height: 36px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
:deep(.ant-input-search-button) {
|
||
width: 80px;
|
||
height: 36px;
|
||
background: #0087ff;
|
||
border-radius: 4px !important;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
line-height: 34px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
:deep(.ant-input-group-addon) {
|
||
left: 0 !important;
|
||
}
|
||
}
|
||
|
||
.button-reset {
|
||
border: 0;
|
||
outline: none;
|
||
width: 80px;
|
||
height: 36px;
|
||
background: #e1edfa;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #0087ff;
|
||
line-height: 34px;
|
||
margin-left: 250px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.details-pageconetent {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 67px;
|
||
position: relative;
|
||
background: rgba(245, 243, 243, 0.3);
|
||
|
||
.details-pageconetent-left {
|
||
max-height: 790px;
|
||
position: absolute;
|
||
width: 250px;
|
||
top: 17px;
|
||
left: 250px;
|
||
margin-right: 17px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.top {
|
||
min-height: 720px;
|
||
position: relative;
|
||
width: 1087px;
|
||
display: flex;
|
||
padding-top: 20px;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
font-size: 16px;
|
||
justify-content: left;
|
||
margin-left: 250px;
|
||
|
||
.pagination {
|
||
background: #f3f5f9;
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
.jichusheshi {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: center;
|
||
// padding-top: 40px;
|
||
// height: 445px;
|
||
// overflow: hidden;
|
||
.yunziyuan {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.shuoming {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.yunziyuan-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tupian {
|
||
// width: 89px;
|
||
// height: 74px;
|
||
// background: url('~@/assets/home/yunziyuan.png');
|
||
}
|
||
|
||
.title {
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
margin-right: 30px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.keyongziyuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 30px;
|
||
margin-right: 30px;
|
||
|
||
div {
|
||
display: flex;
|
||
|
||
div:last-child {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.yunziyuan > div {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.shipin {
|
||
width: 100%;
|
||
|
||
.shipin-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tupian {
|
||
// width: 56px;
|
||
// height: 50px;
|
||
// background: url('~@/assets/home/shipin.png');
|
||
}
|
||
|
||
.title {
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
|
||
div {
|
||
margin-right: 60px;
|
||
}
|
||
|
||
.shuzi {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shipin > div {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.jichusheshi > div {
|
||
// background: #eaf4ff;
|
||
padding-top: 10px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.shujuziyuan {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-top: 40px;
|
||
|
||
.yunziyuan {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.shuoming {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.yunziyuan-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20px;
|
||
|
||
.tupian {
|
||
// width: 51px;
|
||
// height: 50px;
|
||
// background: url('~@/assets/home/shujuziyuan.png');
|
||
}
|
||
|
||
.title {
|
||
margin-left: 10px;
|
||
font-weight: 600;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.fenlei {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
margin-right: 30px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.keyongziyuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 30px;
|
||
margin-right: 30px;
|
||
|
||
div {
|
||
display: flex;
|
||
|
||
div:last-child {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.yunziyuan > div {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.shujuziyuan > div {
|
||
background: #eaf4ff;
|
||
padding-top: 10px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.top-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
color: #000000;
|
||
line-height: 34px;
|
||
|
||
.photo {
|
||
display: inline-block;
|
||
height: 44px;
|
||
width: 44px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
div {
|
||
margin: 0 20px;
|
||
padding: 0 10px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
div:hover {
|
||
color: #0087ff;
|
||
}
|
||
|
||
.sel {
|
||
font-weight: 600;
|
||
color: #0087ff;
|
||
border-bottom: 2px solid #0087ff;
|
||
}
|
||
}
|
||
|
||
.top-content-father {
|
||
width: 1087px;
|
||
padding-left: 20px;
|
||
// margin-bottom: 20px;
|
||
background: #f3f5f9;
|
||
|
||
.top-content-son {
|
||
background: #fff;
|
||
margin: 0px 20px 20px 0px;
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.top-content {
|
||
display: flex;
|
||
margin-top: 0px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
position: relative;
|
||
// width: 70px;
|
||
line-height: 36.14px;
|
||
white-space: normal;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
// .top-content-title {
|
||
// top: -20px;
|
||
// }
|
||
.leixingsumfather {
|
||
width: 810px;
|
||
display: inline-block;
|
||
height: 30.14px;
|
||
overflow: hidden;
|
||
// width: 718px;
|
||
}
|
||
|
||
.leixingsumfather2 {
|
||
width: 920px;
|
||
}
|
||
|
||
.leixingsum {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 5px;
|
||
|
||
// margin-bottom: 10px;
|
||
.ant-tag-checkable {
|
||
width: 83px;
|
||
height: 25px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
float: left;
|
||
margin: 0 15px;
|
||
font-family: 'AlibabaPuHuiTiR';
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 14px;
|
||
}
|
||
|
||
:deep(.ant-tag-checkable-checked) {
|
||
// width: 67px;
|
||
margin-left: 15px;
|
||
margin-right: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.ant-tag-checkable:active,
|
||
.ant-tag-checkable-checked {
|
||
width: 85px;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.top-content:nth-child(1) {
|
||
margin-top: 0px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shrinkTag {
|
||
width: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
margin-bottom: 5px;
|
||
|
||
span {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.shrink {
|
||
height: unset !important;
|
||
overflow: unset !important;
|
||
}
|
||
|
||
.talk-monitor {
|
||
position: fixed;
|
||
bottom: 50px;
|
||
right: 10px;
|
||
z-index: 9999;
|
||
cursor: pointer;
|
||
|
||
i {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: inline-block;
|
||
background: url('~@/assets/home/icon-talk.png');
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.top-content-father {
|
||
width: 1087px;
|
||
padding-left: 20px;
|
||
|
||
// margin-bottom: 20px;
|
||
.top-content {
|
||
display: flex;
|
||
margin-top: 23px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 68px;
|
||
font-weight: 600;
|
||
white-space: normal;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 16px;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
// .top-content-title {
|
||
// top: -20px;
|
||
// }
|
||
.leixingsumfather {
|
||
width: 770px;
|
||
display: inline-block;
|
||
height: 30.14px;
|
||
overflow: hidden;
|
||
// width: 718px;
|
||
}
|
||
|
||
.leixingsum {
|
||
width: 93px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
margin-top: 5px;
|
||
|
||
// margin-bottom: 10px;
|
||
.ant-tag-checkable {
|
||
width: 85px;
|
||
height: 25px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
float: left;
|
||
margin: 0 15px;
|
||
font-family: 'AlibabaPuHuiTiR';
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 14px;
|
||
}
|
||
|
||
:deep(.ant-tag-checkable-checked) {
|
||
// width: 67px;
|
||
margin-left: 15px;
|
||
margin-right: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.ant-tag-checkable:active,
|
||
.ant-tag-checkable-checked {
|
||
width: 85px;
|
||
font-family: 'Alibaba PuHuiTi';
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
font-family: Alibaba PuHuiTi;
|
||
font-weight: 500;
|
||
background-color: #0087ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.top-content:nth-child(1) {
|
||
margin-top: 41px !important;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-card-grid) {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
</style>
|