wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

门户首页-能力汇聚：基础设施，保留视频资源，单兵，无人机

This commit is contained in:
guoyue 2022-09-21 22:26:56 +08:00
parent 8f56c1680d
commit 495ed477f8
1 changed files with 264 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
front/src/views/newHome/components/CapabilityConvergence.vue
View File

@ -8,65 +8,40 @@
<div class="bottom"> <div class="bottom">
<div class="item"> <div class="item">
<div class="zj">组件服务</div> <div class="zj">组件服务</div>
<div <div class="name" v-for="(item, index) in zjList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
class="name" @click="selectOne(item.id)">
v-for="(item, index) in zjList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne(item.id)"
>
{{ index + 1 }}-{{ item.name }} {{ index + 1 }}-{{ item.name }}
</div> </div>
<div class="btn" @click="jumpPage('组件服务')">查看更多</div> <div class="btn" @click="jumpPage('组件服务')">查看更多</div>
</div> </div>
<div class="item"> <div class="item">
<div class="yy">应用资源</div> <div class="yy">应用资源</div>
<div <div class="name" v-for="(item, index) in yyList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
class="name" @click="selectOne(item.id)">
v-for="(item, index) in yyList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne(item.id)"
>
{{ index + 1 }}-{{ item.name }} {{ index + 1 }}-{{ item.name }}
</div> </div>
<div class="btn" @click="jumpPage('应用资源')">查看更多</div> <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
</div> </div>
<div class="item"> <div class="item">
<div class="jc">基础设施</div> <div class="jc">基础设施</div>
<div <div class="name" v-for="(item, index) in jcList" :key="item.name" :class="index == 2 ? 'name-last' : ''"
class="name" @click="selectOne2(item.name)">
v-for="(item, index) in jcList"
:key="item.name"
:class="index == 2 ? 'name-last' : ''"
@click="selectOne2(item.name)"
>
{{ item.name + '-' + item.num + '项' }} {{ item.name + '-' + item.num + '项' }}
</div> </div>
<div class="btn" @click="jumpPage('基础设施')">查看更多</div> <div class="btn" @click="jumpPage('基础设施')">查看更多</div>
</div> </div>
<div class="item"> <div class="item">
<div class="sj">数据资源</div> <div class="sj">数据资源</div>
<div <div class="name" v-for="(item, index) in sjList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
class="name" @click="selectOne3(item.name)">
v-for="(item, index) in sjList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="selectOne3(item.name)"
>
{{ index + 1 }}-{{ item.name }} {{ index + 1 }}-{{ item.name }}
</div> </div>
<div class="btn" @click="jumpPage('数据资源')">查看更多</div> <div class="btn" @click="jumpPage('数据资源')">查看更多</div>
</div> </div>
<div class="item"> <div class="item">
<div class="zs">知识库</div> <div class="zs">知识库</div>
<div <div class="name" v-for="(item, index) in zsList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
class="name" @click="openHref(item)">
v-for="(item, index) in zsList"
:key="item.id"
:class="index == 4 ? 'name-last' : ''"
@click="openHref(item)"
>
{{ index + 1 }}-{{ item.name }} {{ index + 1 }}-{{ item.name }}
</div> </div>
<div class="btn" @click="jumpPage('知识库')">查看更多</div> <div class="btn" @click="jumpPage('知识库')">查看更多</div>
@ -76,26 +51,27 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
pageWithAttrs, pageWithAttrs,
getDataResource, getDataResource,
selectInfrastructureList, selectInfrastructureList,
} from '@/api/home.js' } from '@/api/home.js'
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { updateVisits, browsingInsert } from '@/api/home' import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
import mybus from '@/myplugins/mybus' import { message, Upload } from 'ant-design-vue'
const store = useStore() import mybus from '@/myplugins/mybus'
const router = useRouter() const store = useStore()
const zjList = ref([]) const router = useRouter()
const jcList = ref([]) const zjList = ref([])
const sjList = ref([]) const jcList = ref([])
const yyList = ref([]) const sjList = ref([])
// 知识库模块数据 const yyList = ref([])
const zsList = ref([]) // 知识库模块数据
// const jcList = ref([]) const zsList = ref([])
const paramsGetResources = { // const jcList = ref([])
const paramsGetResources = {
districtId: '', districtId: '',
pageNum: 1, pageNum: 1,
pageSize: 5, pageSize: 5,
@ -104,19 +80,19 @@
infoList: [], infoList: [],
orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量 orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
orderType: 'DESC', // ASC 升序 DESC 降序 orderType: 'DESC', // ASC 升序 DESC 降序
} }
console.log('dataShowdev==========================>', whoShow) console.log('dataShowdev==========================>', whoShow)
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const whoShow1 = ref(whoShow) const whoShow1 = ref(whoShow)
const interfaceSuccess = ref(0) const interfaceSuccess = ref(0)
const object = reactive({ const object = reactive({
yyNum: '', yyNum: '',
zjNum: '', zjNum: '',
jcNum: '', jcNum: '',
sjNum: '', sjNum: '',
zsNum: '', zsNum: '',
}) })
const getAppResources = (type, obj) => { const getAppResources = (type, obj) => {
paramsGetResources.type = type paramsGetResources.type = type
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) { if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
getDataResource({ getDataResource({
@ -164,22 +140,39 @@
} else { } else {
let type = paramsGetResources.type let type = paramsGetResources.type
if (type == '基础设施') { if (type == '基础设施') {
jcList.value = []
selectInfrastructureList().then((res) => { selectInfrastructureList().then((res) => {
console.log('基础设施==========>', res.data.data) console.log('基础设施==========>', res.data.data)
for (const key in res.data.data) { for (const key in res.data.data) {
if (whoShow1.value.itShowXiHaiAn) {
if (key === '视频资源') {
jcList.value.push({ jcList.value.push({
name: key, name: key,
num: res.data.data[key], num: res.data.data[key],
}) })
} }
if (uavAndIndividualSoldier.num) { } 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({ jcList.value.push({
name: '无人机', name: '无人机',
num: uavAndIndividualSoldier.uavList.length, num: total,
}) })
})
getSoldierData('单兵设备').then(res => {
let { total = 0 } = res.data.data;
jcList.value.push({ jcList.value.push({
name: '单兵设备', name: '单兵设备',
num: uavAndIndividualSoldier.individualSoldier.length, num: total,
})
}) })
} }
}) })
@ -204,9 +197,32 @@
}) })
} }
} }
}
// 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)
} }
const openHref = (item) => { console.log('total------------>', total);
}).catch(err => {
reject(err)
message.error(err)
})
})
}
const openHref = (item) => {
console.log(item.id, 'wowowo') console.log(item.id, 'wowowo')
console.log(item.visits, 'wowowo') console.log(item.visits, 'wowowo')
browsingInsert({ resourceId: item.id }).then((res) => { browsingInsert({ resourceId: item.id }).then((res) => {
@ -229,22 +245,22 @@
// 'hisense_office/onlinePreview?url=' + // 'hisense_office/onlinePreview?url=' +
// btoa(encodeURI(item.fileHref)) // btoa(encodeURI(item.fileHref))
// ) // )
} }
const assignmentMethod = (type, res) => { const assignmentMethod = (type, res) => {
object[type] = res.data.data.total object[type] = res.data.data.total
// interfaceSuccess.value++ // interfaceSuccess.value++
// console.log('object个数======>', object, interfaceSuccess.value, type) // console.log('object个数======>', object, interfaceSuccess.value, type)
// if (interfaceSuccess.value >= 4) { // if (interfaceSuccess.value >= 4) {
// mybus.emit('chagneNum', object) // mybus.emit('chagneNum', object)
// } // }
} }
getAppResources('组件服务', zjList) getAppResources('组件服务', zjList)
getAppResources('应用资源', yyList) getAppResources('应用资源', yyList)
getAppResources('基础设施', jcList) getAppResources('基础设施', jcList)
getAppResources('数据资源', sjList) getAppResources('数据资源', sjList)
getAppResources('知识库', zsList) getAppResources('知识库', zsList)
function jumpPage(type) { function jumpPage(type) {
// 点击内存入store // 点击内存入store
store.commit('home/selectCardsData', { store.commit('home/selectCardsData', {
selectCardsnum: type, selectCardsnum: type,
@ -260,8 +276,8 @@
select: type, select: type,
}, },
}) })
} }
const selectOne = (id) => { const selectOne = (id) => {
console.log('点击===============》', id) console.log('点击===============》', id)
router.push({ router.push({
path: '/details', path: '/details',
@ -269,8 +285,8 @@
id: id, id: id,
}, },
}) })
} }
const selectOne2 = (name) => { const selectOne2 = (name) => {
console.log('点击===============》', name) console.log('点击===============》', name)
router.push({ router.push({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
@ -279,8 +295,8 @@
select: '基础设施', select: '基础设施',
}, },
}) })
} }
const selectOne3 = (name) => { const selectOne3 = (name) => {
console.log('点击===============》', name) console.log('点击===============》', name)
router.push({ router.push({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
@ -289,7 +305,7 @@
select: '数据资源', select: '数据资源',
}, },
}) })
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.capability-convergence { .capability-convergence {
@ -298,12 +314,14 @@
background-size: 100%; background-size: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.main { .main {
width: 13rem; width: 13rem;
margin-top: 1.8rem; margin-top: 1.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.top { .top {
font-size: 0.3rem; font-size: 0.3rem;
color: #212121; color: #212121;
@ -313,6 +331,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.line { .line {
width: 0.34rem; width: 0.34rem;
height: 0.03rem; height: 0.03rem;
@ -320,10 +339,12 @@
margin-top: 0.08rem; margin-top: 0.08rem;
} }
} }
.bottom { .bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 0.4rem; margin-top: 0.4rem;
.item { .item {
width: 2.44rem; width: 2.44rem;
height: 3.91rem; height: 3.91rem;
@ -332,6 +353,7 @@
border-radius: 0.02rem; border-radius: 0.02rem;
box-shadow: 0 0.05rem 0.2rem #ccc; box-shadow: 0 0.05rem 0.2rem #ccc;
position: relative; position: relative;
div:nth-of-type(1) { div:nth-of-type(1) {
height: 1.02rem; height: 1.02rem;
line-height: 1.02rem; line-height: 1.02rem;
@ -340,21 +362,27 @@
padding-left: 0.15rem; padding-left: 0.15rem;
background-size: 100%; background-size: 100%;
} }
.jc { .jc {
background: url('~@/assets/newHome/Convergence-jc.png') no-repeat; background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
} }
.sj { .sj {
background: url('~@/assets/newHome/Convergence-sj.png') no-repeat; background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
} }
.zj { .zj {
background: url('~@/assets/newHome/Convergence-zj.png') no-repeat; background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
} }
.yy { .yy {
background: url('~@/assets/newHome/Convergence-yy.png') no-repeat; background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
} }
.zs { .zs {
background: url('~@/assets/newHome/Convergence-zs.png') no-repeat; background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
} }
.name { .name {
height: 0.47rem; height: 0.47rem;
line-height: 0.47rem; line-height: 0.47rem;
@ -367,13 +395,16 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all; word-break: break-all;
} }
.name:hover { .name:hover {
color: #0058e1; color: #0058e1;
cursor: pointer; cursor: pointer;
} }
.name-last { .name-last {
border-bottom: none; border-bottom: none;
} }
.btn { .btn {
cursor: pointer; cursor: pointer;
width: 0.8rem; width: 0.8rem;
@ -388,11 +419,13 @@
position: absolute; position: absolute;
bottom: 0.2rem; bottom: 0.2rem;
} }
.btn:hover { .btn:hover {
background: rgba(0, 88, 225, 0.3); background: rgba(0, 88, 225, 0.3);
color: #000; color: #000;
} }
} }
.item:hover { .item:hover {
border-radius: 0.02rem; border-radius: 0.02rem;
border: 0.01rem solid #0058e1; border: 0.01rem solid #0058e1;