西海岸:修复首页--能力汇聚显示错乱bug

This commit is contained in:
guoyue 2022-10-12 11:52:32 +08:00
parent 140ff7f92c
commit edf1cb5af9
1 changed files with 402 additions and 451 deletions

View File

@ -8,65 +8,40 @@
<div class="bottom">
<div class="item">
<div class="zj">组件服务</div>
<div
class="name"
v-for="(item, index) in zjList.slice(0, 5)"
:key="item.name"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne1(item.name)"
>
<div class="name" v-for="(item, index) in zjList.slice(0, 5)" :key="item.name"
:class="index == 4 ? 'name-last' : ''" @click="selectOne1(item.name)">
{{ item.name + '-' + item.num + '项' }}
</div>
<div class="btn" @click="jumpPage('组件服务')">查看更多</div>
</div>
<div class="item">
<div class="yy">应用资源</div>
<div
class="name"
v-for="(item, index) in yyList.slice(0, 5)"
:key="item.name"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne11(item.name)"
>
<div class="name" v-for="(item, index) in yyList.slice(0, 5)" :key="item.name"
:class="index == 4 ? 'name-last' : ''" @click="selectOne11(item.name)">
{{ item.name + '-' + item.num + '项' }}
</div>
<div class="btn" @click="jumpPage('应用资源')">查看更多</div>
</div>
<div class="item">
<div class="jc">基础设施</div>
<div
class="name"
v-for="(item, index) in jcList.slice(0, 5)"
:key="item.name"
:class="index == 2 ? 'name-last' : ''"
@click="selectOne2(item.name)"
>
<div class="name" v-for="(item, index) in jcList.slice(0, 5)" :key="item.name"
:class="index == 2 ? 'name-last' : ''" @click="selectOne2(item.name)">
{{ item.name + '-' + item.num + '项' }}
</div>
<div class="btn" @click="jumpPage('基础设施')">查看更多</div>
</div>
<div class="item">
<div class="sj">数据资源</div>
<div
class="name"
v-for="(item, index) in sjList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne3(item.name)"
>
<div class="name" v-for="(item, index) in sjList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
@click="selectOne3(item.name)">
{{ index + 1 }}-{{ item.name }}
</div>
<div class="btn" @click="jumpPage('数据资源')">查看更多</div>
</div>
<div class="item">
<div class="zs">知识库</div>
<div
class="name"
v-for="(item, index) in zsList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="openHref(item)"
>
<div class="name" v-for="(item, index) in zsList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
@click="openHref(item)">
{{ index + 1 }}-{{ item.name }}
</div>
<div class="btn" @click="jumpPage('知识库')">查看更多</div>
@ -76,448 +51,424 @@
</div>
</template>
<script setup>
import {
pageWithAttrs,
getDataResource,
selectInfrastructureList,
selectCollectComponentList,
selectCollectResourceList
} from '@/api/home.js'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
import { message, Upload } from 'ant-design-vue'
import mybus from '@/myplugins/mybus'
const store = useStore()
const router = useRouter()
const zjList = ref([])
const jcList = ref([])
const sjList = ref([])
const yyList = ref([])
//
const zsList = ref([])
// const jcList = ref([])
const paramsGetResources = {
districtId: '',
pageNum: 1,
pageSize: 5,
type: '',
name: '',
infoList: [],
orderField: 'total', // total visits 访 applyCount score collectCount
orderType: 'DESC', // ASC DESC
}
console.log('dataShowdev==========================>', whoShow)
// eslint-disable-next-line no-undef
const whoShow1 = ref(whoShow)
const interfaceSuccess = ref(0)
const object = reactive({
yyNum: '',
zjNum: '',
jcNum: '',
sjNum: '',
zsNum: '',
})
const getAppResources = (type, obj) => {
paramsGetResources.type = type
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
getDataResource({
serviceName: paramsGetResources.name || '', //
orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //
orderType: paramsGetResources.orderType.toLowerCase(), //descasc
pageNum: paramsGetResources.pageNum, //
pageSize: paramsGetResources.pageSize, //
}).then((res) => {
console.log('数据资源==================>', res.data.data)
if (whoShow1.value.itShowQingDao) {
res.data.data.data.forEach((val) => {
val.id = val.guid // id
val.name = val.zyname //
val.sjlCount = val.sjcczl //
val.applyCount = val.syqk //
val.deptName = val.TGBM //
val.createDate = val.fbrq //
val.description = val.xgxt //
})
obj.value = res.data.data.data || []
object.sjNum = res.data.data.rows
} else if (whoShow1.value.itShowXiHaiAn) {
res.data.data.list.forEach((val) => {
val.id = val.serviceId // id
val.name = val.serviceName //
val.sjlCount = val.requestQuantity //
val.applyCount = val.requestCount //
val.deptName = val.departmentName //
val.createTime = val.createTime.split('.')[0]
val.createDate = val.createTime //
})
obj.value = res.data.data.list || []
object.sjNum = res.data.data.total
}
})
} else {
let type = paramsGetResources.type
if (type == '基础设施') {
jcList.value = []
selectInfrastructureList().then((res) => {
console.log('基础设施==========>', res.data.data)
for (const key in res.data.data) {
if (whoShow1.value.itShowXiHaiAn) {
if (key === '视频资源') {
jcList.value.push({
name: key,
num: res.data.data[key],
})
}
} else {
import {
pageWithAttrs,
getDataResource,
selectInfrastructureList,
selectCollectComponentList,
selectCollectResourceList
} from '@/api/home.js'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
import { message, Upload } from 'ant-design-vue'
import mybus from '@/myplugins/mybus'
const store = useStore()
const router = useRouter()
const zjList = ref([])
const jcList = ref([])
const sjList = ref([])
const yyList = ref([])
//
const zsList = ref([])
// const jcList = ref([])
const paramsGetResources = {
districtId: '',
pageNum: 1,
pageSize: 5,
type: '',
name: '',
infoList: [],
orderField: 'total', // total visits 访 applyCount score collectCount
orderType: 'DESC', // ASC DESC
}
console.log('dataShowdev==========================>', whoShow)
// eslint-disable-next-line no-undef
const whoShow1 = ref(whoShow)
const interfaceSuccess = ref(0)
const object = reactive({
yyNum: '',
zjNum: '',
jcNum: '',
sjNum: '',
zsNum: '',
})
const getAppResources = (type, obj) => {
paramsGetResources.type = type
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
getDataResource({
serviceName: paramsGetResources.name || '', //
orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //
orderType: paramsGetResources.orderType.toLowerCase(), //descasc
pageNum: paramsGetResources.pageNum, //
pageSize: paramsGetResources.pageSize, //
}).then((res) => {
console.log('数据资源==================>', res.data.data)
if (whoShow1.value.itShowQingDao) {
res.data.data.data.forEach((val) => {
val.id = val.guid // id
val.name = val.zyname //
val.sjlCount = val.sjcczl //
val.applyCount = val.syqk //
val.deptName = val.TGBM //
val.createDate = val.fbrq //
val.description = val.xgxt //
})
obj.value = res.data.data.data || []
object.sjNum = res.data.data.rows
} else if (whoShow1.value.itShowXiHaiAn) {
res.data.data.list.forEach((val) => {
val.id = val.serviceId // id
val.name = val.serviceName //
val.sjlCount = val.requestQuantity //
val.applyCount = val.requestCount //
val.deptName = val.departmentName //
val.createTime = val.createTime.split('.')[0]
val.createDate = val.createTime //
})
obj.value = res.data.data.list || []
object.sjNum = res.data.data.total
}
})
} else {
let type = paramsGetResources.type
if (type == '基础设施') {
jcList.value = []
selectInfrastructureList().then((res) => {
console.log('基础设施------res------>', res);
for (const key in res.data.data) {
if (whoShow1.value.itShowXiHaiAn) {
if (key === '视频资源') {
jcList.value.push({
name: key,
num: res.data.data[key],
})
}
} else {
jcList.value.push({
name: key,
num: res.data.data[key],
})
}
// 西-
if (whoShow1.value.itShowXiHaiAn) {
getSoldierData('无人机')
.then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({
name: '无人机',
num: total,
})
}
// 西-
if (whoShow1.value.itShowXiHaiAn) {
getSoldierData('无人机')
.then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({
name: '无人机',
num: total,
})
.catch((err) => {
console.log('err--无人机---------->', err)
})
.catch((err) => {
console.log('err--无人机---------->', err)
})
getSoldierData('单兵设备')
.then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({
name: '单兵设备',
num: total,
})
getSoldierData('单兵设备')
.then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({
name: '单兵设备',
num: total,
})
})
.catch((err) => {
console.log('err--单兵设备---------->', err)
})
}
})
}
else if (type == '组件服务') {
zjList.value = []
selectCollectComponentList().then((res) => {
for (const key in res.data.data) {
if (whoShow1.value.itShowXiHaiAn) {
if (key === '视频资源') {
zjList.value.push({
name: key,
num: res.data.data[key],
})
}
} else {
zjList.value.push({
name: key,
num: res.data.data[key],
})
}
}
})
}
else if (type == '应用资源') {
yyList.value = []
selectCollectResourceList().then((res) => {
for (const key in res.data.data) {
if (whoShow1.value.itShowXiHaiAn) {
if (key === '视频资源') {
yyList.value.push({
name: key,
num: res.data.data[key],
})
}
} else {
yyList.value.push({
name: key,
num: res.data.data[key],
})
}
}
})
}
else {
pageWithAttrs(paramsGetResources).then((res) => {
console.log('object个数======>', type)
obj.value = res.data.data.records
switch (type) {
case '组件服务':
assignmentMethod('zjNum', res)
break
case '应用资源':
assignmentMethod('yyNum', res)
break
case '基础设施':
assignmentMethod('jcNum', res)
break
case '知识库':
assignmentMethod('zsNum', res)
break
}
})
}
}
}
// todo
const getSoldierData = (name) => {
let _params = {
type: name,
page: 1,
limit: 10,
}
return new Promise((resolve, reject) => {
getSoldierList(_params)
.then((res) => {
resolve(res)
console.log('res---获取无人机、单兵设备--------->', res)
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
})
.catch((err) => {
reject(err)
})
})
}
const openHref = (item) => {
console.log(item.id, 'wowowo')
console.log(item.visits, 'wowowo')
browsingInsert({ resourceId: item.id }).then((res) => {
// console.log(res)
})
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value.indexOf(item.id) === -1) {
arrList.value.push(item.id)
updateVisits({
id: item.id,
visits: item.visits || '0',
}).then(() => {
window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
})
.catch((err) => {
console.log('err--单兵设备---------->', err)
})
}
})
}
else if (type == '组件服务') {
zjList.value = []
selectCollectComponentList().then((res) => {
console.log('组件服务----res-------->', res);
for (const key in res.data.data) {
console.log('key------------>', key);
zjList.value.push({
name: key,
num: res.data.data[key],
})
}
console.log('zjList------------>', zjList);
})
}
else if (type == '应用资源') {
yyList.value = []
selectCollectResourceList().then((res) => {
console.log('应用资源---res--------->', res);
for (const key in res.data.data) {
yyList.value.push({
name: key,
num: res.data.data[key],
})
}
})
}
else {
pageWithAttrs(paramsGetResources).then((res) => {
console.log('object个数======>', type)
obj.value = res.data.data.records
switch (type) {
case '组件服务':
assignmentMethod('zjNum', res)
break
case '应用资源':
assignmentMethod('yyNum', res)
break
case '基础设施':
assignmentMethod('jcNum', res)
break
case '知识库':
assignmentMethod('zsNum', res)
break
}
})
}
window.open(item.link)
// window.open(
// window.SITE_CONFIG.previewUrl +
// 'hisense_office/onlinePreview?url=' +
// btoa(encodeURI(item.fileHref))
// )
}
const assignmentMethod = (type, res) => {
object[type] = res.data.data.total
// interfaceSuccess.value++
// console.log('object======>', object, interfaceSuccess.value, type)
// if (interfaceSuccess.value >= 4) {
// mybus.emit('chagneNum', object)
// }
}
getAppResources('组件服务', zjList)
getAppResources('应用资源', yyList)
getAppResources('基础设施', jcList)
getAppResources('数据资源', sjList)
getAppResources('知识库', zsList)
}
function jumpPage(type) {
// store
store.commit('home/selectCardsData', {
selectCardsnum: type,
})
console.log(
'选中===================>',
store.getters['home/selectCardsnum']
)
// router.push({ path: '/DetailsPageconetent' })
router.push({
path: '/DetailsPageconetent',
query: {
select: type,
},
})
}
const selectOne = (id) => {
console.log('点击===============》', id)
router.push({
path: '/details',
query: {
id: id,
},
})
}
const selectOne1 = (name) => {
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '组件服务',
},
})
}
const selectOne11 = (name) => {
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '应用资源',
},
})
}
const selectOne2 = (name) => {
console.log('点击===============》', name)
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '基础设施',
},
})
}
const selectOne3 = (name) => {
console.log('点击===============》', name)
router.push({
path: '/DetailsPageconetent',
query: {
str: name,
select: '数据资源',
},
// todo
const getSoldierData = (name) => {
let _params = {
type: name,
page: 1,
limit: 10,
}
return new Promise((resolve, reject) => {
getSoldierList(_params)
.then((res) => {
resolve(res)
console.log('res---获取无人机、单兵设备--------->', res)
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
})
.catch((err) => {
reject(err)
})
})
}
const openHref = (item) => {
console.log(item.id, 'wowowo')
console.log(item.visits, 'wowowo')
browsingInsert({ resourceId: item.id }).then((res) => {
// console.log(res)
})
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value.indexOf(item.id) === -1) {
arrList.value.push(item.id)
updateVisits({
id: item.id,
visits: item.visits || '0',
}).then(() => {
window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
})
}
window.open(item.link)
}
const assignmentMethod = (type, res) => {
object[type] = res.data.data.total
}
getAppResources('组件服务', zjList)
getAppResources('应用资源', yyList)
getAppResources('基础设施', jcList)
getAppResources('数据资源', sjList)
getAppResources('知识库', zsList)
function jumpPage(type) {
// store
store.commit('home/selectCardsData', {
selectCardsnum: type,
})
console.log(
'选中===================>',
store.getters['home/selectCardsnum']
)
// router.push({ path: '/DetailsPageconetent' })
router.push({
path: '/DetailsPageconetent',
query: {
select: type,
},
})
}
const selectOne = (id) => {
console.log('点击===============》', id)
router.push({
path: '/details',
query: {
id: id,
},
})
}
const selectOne1 = (name) => {
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '组件服务',
},
})
}
const selectOne11 = (name) => {
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '应用资源',
},
})
}
const selectOne2 = (name) => {
console.log('点击===============》', name)
router.push({
path: '/DetailsPageconetent',
query: {
type: name,
select: '基础设施',
},
})
}
const selectOne3 = (name) => {
console.log('点击===============》', name)
router.push({
path: '/DetailsPageconetent',
query: {
str: name,
select: '数据资源',
},
})
}
</script>
<style lang="less" scoped>
.capability-convergence {
height: 7.2rem;
background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
.capability-convergence {
height: 7.2rem;
background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
.main {
width: 13rem;
margin-top: 1.8rem;
.main {
width: 13rem;
margin-top: 1.8rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
.top {
font-size: 0.3rem;
color: #212121;
text-align: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.top {
font-size: 0.3rem;
color: #212121;
text-align: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.line {
width: 0.34rem;
height: 0.03rem;
background-color: #0058e1;
margin-top: 0.08rem;
}
}
.line {
width: 0.34rem;
height: 0.03rem;
background-color: #0058e1;
margin-top: 0.08rem;
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
.item {
width: 2.44rem;
height: 3.91rem;
font-size: 0.16rem;
background-color: #fff;
border-radius: 0.02rem;
box-shadow: 0 0.05rem 0.2rem #ccc;
position: relative;
div:nth-of-type(1) {
height: 1.02rem;
line-height: 1.02rem;
font-size: 0.2rem;
color: #fff;
padding-left: 0.15rem;
background-size: 100%;
}
.jc {
background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
}
.sj {
background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
}
.zj {
background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
}
.yy {
background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
}
.zs {
background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
}
.name {
height: 0.47rem;
line-height: 0.47rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid #e9e9e9;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.name:hover {
color: #0058e1;
cursor: pointer;
}
.name-last {
border-bottom: none;
}
.btn {
cursor: pointer;
width: 0.8rem;
height: 0.24rem;
border: 0.01rem solid #0058e1;
font-size: 0.14rem;
color: #0058e1;
border-radius: 0.02rem;
text-align: center;
margin-top: 0.1rem;
margin-left: 0.85rem;
position: absolute;
bottom: 0.2rem;
}
.btn:hover {
background: rgba(0, 88, 225, 0.3);
color: #000;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
.item {
width: 2.44rem;
height: 3.91rem;
font-size: 0.16rem;
background-color: #fff;
border-radius: 0.02rem;
box-shadow: 0 0.05rem 0.2rem #ccc;
position: relative;
div:nth-of-type(1) {
height: 1.02rem;
line-height: 1.02rem;
font-size: 0.2rem;
color: #fff;
padding-left: 0.15rem;
background-size: 100%;
}
.jc {
background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
}
.sj {
background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
}
.zj {
background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
}
.yy {
background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
}
.zs {
background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
}
.name {
height: 0.47rem;
line-height: 0.47rem;
margin: 0 0.16rem;
border-bottom: 0.01rem solid #e9e9e9;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.name:hover {
color: #0058e1;
cursor: pointer;
}
.name-last {
border-bottom: none;
}
.btn {
cursor: pointer;
width: 0.8rem;
height: 0.24rem;
border: 0.01rem solid #0058e1;
font-size: 0.14rem;
color: #0058e1;
border-radius: 0.02rem;
text-align: center;
margin-top: 0.1rem;
margin-left: 0.85rem;
position: absolute;
bottom: 0.2rem;
}
.btn:hover {
background: rgba(0, 88, 225, 0.3);
color: #000;
}
}
.item:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
.item:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
}
</style>