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

页面设计优化：首页5个统计展示模块要让用户能明显的清楚可“点击进入”（比如字下面加下划线或者鼠标移入时“小手“图标要明显等）

This commit is contained in:
851673013@qq.com 2022-09-29 11:37:08 +08:00
parent 3f4e27177c
commit 7918e07b6c
4 changed files with 966 additions and 847 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

667
back/src/views/modules/abilityStatistics/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div > <div>
<div class='container'> <div class="container">
<!-- <div class='container-left' v-if='homeIsShow'> <!-- <div class='container-left' v-if='homeIsShow'>
<div class='left-search'> <div class='left-search'>
<div> <div>
@ -31,8 +31,8 @@
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
format='yyyy-MM-dd HH:mm:ss' format="yyyy-MM-dd HH:mm:ss"
value-format='yyyy-MM-dd HH:mm:ss' value-format="yyyy-MM-dd HH:mm:ss"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
@ -43,14 +43,8 @@
placeholder="请选审核状态" placeholder="请选审核状态"
clearable clearable
> >
<el-option <el-option label="审核完成" value="1"></el-option>
label="审核完成" <el-option label="审核中" value="0"></el-option>
value="1"
></el-option>
<el-option
label="审核中"
value="0"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -62,19 +56,25 @@
clearable clearable
> >
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option v-for="item in departmentSelects" :key="item.label" v-bind="item"></el-option> <el-option
v-for="item in departmentSelects"
:key="item.label"
v-bind="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--类型--> <!--类型-->
<el-form-item> <el-form-item>
<el-select <el-select v-model="abilityType" placeholder="请选择类型" clearable>
v-model="abilityType"
placeholder="请选择类型"
clearable
>
<el-option label="全部" value=""></el-option> <el-option label="全部" value=""></el-option>
<el-option v-for="item in typeOptions" :key="item.name" :label="item.name" :value="item.name" v-bind="item"></el-option> <el-option
v-for="item in typeOptions"
:key="item.name"
:label="item.name"
:value="item.name"
v-bind="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -84,10 +84,12 @@
</el-form-item> </el-form-item>
<!--操作按钮重置--> <!--操作按钮重置-->
<el-form-item> <el-form-item>
<el-button type="primary" @click="resetDataList()">{{ $t('reset') }}</el-button> <el-button type="primary" @click="resetDataList()">{{
$t('reset')
}}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'> <el-card shadow="never" class="aui-card--fill" v-if="homeIsShow">
<div class="mod-demand__bsdemand"> <div class="mod-demand__bsdemand">
<!-- <div class='top-box'> <!-- <div class='top-box'>
<span class='title'>能力统计</span> <span class='title'>能力统计</span>
@ -98,11 +100,26 @@
</div> </div>
</div> --> </div> -->
<div class='second-title'> <div class="second-title">
<span style='margin-right:30px' :class="[(departmentId===1 || departmentId===3)?'departmentStyle':'']" @click="handleChose(1)"> <span
style="margin-right: 30px"
:class="[
departmentId === 1 || departmentId === 3
? 'departmentStyle'
: ''
]"
@click="handleChose(1)"
>
能力上架统计 能力上架统计
</span> </span>
<span :class="[(departmentId===2 || departmentId===4)?'departmentStyle':'']" @click="handleChose(2)"> <span
:class="[
departmentId === 2 || departmentId === 4
? 'departmentStyle'
: ''
]"
@click="handleChose(2)"
>
能力使用统计 能力使用统计
</span> </span>
<!-- <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']" @click="handleChose(3)"> <!-- <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']" @click="handleChose(3)">
@ -114,54 +131,41 @@
<span v-if="detailFlag" class="detail-button" @click="goToDetail()"> <span v-if="detailFlag" class="detail-button" @click="goToDetail()">
明细 明细
</span> </span>
<span v-else class="detail-button" @click="goToBack()"> <span v-else class="detail-button" @click="goToBack()"> 返回 </span>
返回
</span>
</div> </div>
<div class='line-style'></div> <div class="line-style"></div>
<!--统计表--> <!--统计表-->
<el-table <el-table
:data="tableData" :data="tableData"
:header-cell-style="{textAlign:'center'}" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{textAlign:'center'}" :cell-style="{ textAlign: 'center' }"
border border
style="width: 100%" v-show='this.departmentId===1 ||this.departmentId===2'> style="width: 100%"
<el-table-column v-show="this.departmentId === 1 || this.departmentId === 2"
prop="name" >
label="部门名称" <el-table-column prop="name" label="部门名称" min-width="100%">
min-width="100%">
</el-table-column> </el-table-column>
<el-table-column label="组件"> <el-table-column label="组件">
<el-table-column <el-table-column prop="znsf" label="智能算法" min-width="100%">
prop="znsf"
label="智能算法"
min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="tcfw" label="图层服务" min-width="100%">
prop="tcfw"
label="图层服务"
min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="kfzj" prop="kfzj"
label="通用开发组件" label="通用开发组件"
min-width="100%"> min-width="100%"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="ywzj" prop="ywzj"
label="业务能力组件" label="业务能力组件"
min-width="100%"> min-width="100%"
>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="yyzy" label="应用资源" min-width="100%">
prop="yyzy"
label="应用资源"
min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="zj" label="总计" min-width="100%">
prop="zj"
label="总计"
min-width="100%">
</el-table-column> </el-table-column>
</el-table> </el-table>
<!--明细表--> <!--明细表-->
@ -169,29 +173,15 @@
<el-table <el-table
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%"
v-show='this.departmentId===3 ||this.departmentId===4' v-show="this.departmentId === 3 || this.departmentId === 4"
> >
<el-table-column <el-table-column prop="deptName" label="部门" width="180">
prop="deptName"
label="部门"
width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="resourceName" label="资源名称" width="180">
prop="resourceName"
label="资源名称"
width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="type" label="类型"> </el-table-column>
prop="type" <el-table-column prop="createDate" label="日期"> </el-table-column>
label="类型"> <el-table-column prop="approveStatus" label="状态">
</el-table-column>
<el-table-column
prop="createDate"
label="日期">
</el-table-column>
<el-table-column
prop="approveStatus"
label="状态">
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block"> <div class="block">
@ -207,10 +197,25 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used> <component-used
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services> v-if="UsedIsShow"
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources> :tableId="tableId"
</div> :fatherId="fatherId"
@closeChild2="closeChild2"
></component-used>
<component-services
v-if="servicesIsShow"
:tableId="tableId"
:fatherId="fatherId"
@closeChild="closeChild"
></component-services>
<application-resources
v-if="resourcesIsShow"
:tableId="tableId"
:fatherId="fatherId"
@closeApplication="closeApplication"
></application-resources>
</div>
</template> </template>
<script> <script>
import componentServices from './componentServices.vue' import componentServices from './componentServices.vue'
@ -224,41 +229,63 @@ export default {
inputTxt: '', inputTxt: '',
tableId: '', tableId: '',
fatherId: '', fatherId: '',
treeData: [{ treeData: [
{
label: '一级 1', label: '一级 1',
children: [{ children: [
{
label: '二级 1-1', label: '二级 1-1',
children: [{ children: [
{
label: '三级 1-1-1' label: '三级 1-1-1'
}] }
}] ]
}, { }
]
},
{
label: '一级 2', label: '一级 2',
children: [{ children: [
{
label: '二级 2-1', label: '二级 2-1',
children: [{ children: [
{
label: '三级 2-1-1' label: '三级 2-1-1'
}] }
}, { ]
},
{
label: '二级 2-2', label: '二级 2-2',
children: [{ children: [
{
label: '三级 2-2-1' label: '三级 2-2-1'
}] }
}] ]
}, { }
]
},
{
label: '一级 3', label: '一级 3',
children: [{ children: [
{
label: '二级 3-1', label: '二级 3-1',
children: [{ children: [
{
label: '三级 3-1-1' label: '三级 3-1-1'
}] }
}, { ]
},
{
label: '二级 3-2', label: '二级 3-2',
children: [{ children: [
{
label: '三级 3-2-1' label: '三级 3-2-1'
}] }
}] ]
}], }
]
}
],
total: null, total: null,
defaultProps: { defaultProps: {
children: 'children', children: 'children',
@ -272,39 +299,52 @@ export default {
resourcesIsShow: false, resourcesIsShow: false,
UsedIsShow: false, UsedIsShow: false,
titleList: [ titleList: [
{ name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 } { name: '组件服务', key: 1 },
{ name: '应用资源', key: 2 },
{ name: '基础设施', key: 3 },
{ name: '数据资源', key: 3 },
{ name: '知识库', key: 3 }
], ],
tableData: [{ deptName: '部门', resourceNum: 222 }], tableData: [{ deptName: '部门', resourceNum: 222 }],
tableData2: [{ approveStatus: '', createDate: '' ,deptName:'',resourceName:'',type:''}], tableData2: [
examineStatus: '0',//审核状态 {
value1:[],//起始时间 approveStatus: '',
abilityDepartment:"",//部门 createDate: '',
abilityType:"",//能力 deptName: '',
beginTime: '',//开始时间 resourceName: '',
endTime: '',//结束时间 type: ''
typeOptions:[ }
],
examineStatus: '0', // 审核状态
value1: [], // 起始时间
abilityDepartment: '', // 部门
abilityType: '', // 能力
beginTime: '', // 开始时间
endTime: '', // 结束时间
typeOptions: [
{ name: '智能算法', value: 1 }, { name: '智能算法', value: 1 },
{ name: '图层服务', value: 2 }, { name: '图层服务', value: 2 },
{ name: '通用开发组件', value: 3 }, { name: '通用开发组件', value: 3 },
{ name: '页面开发组件', value: 4 }, { name: '页面开发组件', value: 4 },
{ name: '应用资源', value: 5 }],//类型备选列表 { name: '应用资源', value: 5 }
detailFlag:true,//明细返回按钮显示标志位 ], // 类型备选列表
startDate:"",//开始时间 detailFlag: true, // 明细返回按钮显示标志位
endDate:"" // 结束时间 startDate: '', // 开始时间
endDate: '' // 结束时间
} }
}, },
created () { created () {
//当前设定的日期时间 // 当前设定的日期时间
let d = new Date const d = new Date()
let year1,month1,day1; let year1, month1, day1
[year1,month1,day1] = [d.getFullYear(),d.getMonth(),d.getDate()] ;[year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()]
let date1 = new Date(year1, month1, day1,7) const date1 = new Date(year1, month1, day1, 7)
this.value1.push(date1) this.value1.push(date1)
//前一天设定的日期时间 // 前一天设定的日期时间
let year2,month2,day2 let year2, month2, day2
d.setTime(d.getTime()-24*60*60*1000); d.setTime(d.getTime() - 24 * 60 * 60 * 1000)
[year2,month2,day2] = [d.getFullYear(),d.getMonth(),d.getDate()] ;[year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()]
let date2 = new Date(year2,month2,day2,7) const date2 = new Date(year2, month2, day2, 7)
this.value1.unshift(date2) this.value1.unshift(date2)
}, },
mounted () { mounted () {
@ -332,14 +372,16 @@ export default {
} }
}, },
getTreeName (data) { getTreeName (data) {
this.$http.get('/census/center/v3/treeList/', { this.$http
.get('/census/center/v3/treeList/', {
params: { params: {
keywords: data.name, keywords: data.name,
deptId: '1067246875800000066' deptId: '1067246875800000066'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { })
.then((res) => {
this.tableData = res.data.data this.tableData = res.data.data
}) })
}, },
@ -360,35 +402,42 @@ export default {
// 组件服务部门发布情况--改为能力上架统计 // 组件服务部门发布情况--改为能力上架统计
getFirstTree (page) { getFirstTree (page) {
this.$http.get('/census/center/selectDeptDetailTypeCountList/', { this.$http
.get('/census/center/selectDeptDetailTypeCountList/', {
params: { params: {
page: page || 1, page: page || 1,
limit: 5, limit: 5,
approveStatus: this.examineStatus, approveStatus: this.examineStatus,
deptId: this.abilityDepartment, deptId: this.abilityDepartment,
params: '', params: '',
startDate:this.startDate, startDate: this.startDate,
endDate:this.endDate endDate: this.endDate
} }
}).then(res => { })
let result= res.data.data .then((res) => {
for(let i=0;i<result.length;i++){ const result = res.data.data
if(!result[i].hasOwnProperty('yyzy') ){ for (let i = 0; i < result.length; i++) {
result[i].yyzy= 0 if (!result[i].hasOwnProperty('yyzy')) {
result[i].yyzy = 0
} }
if(!result[i].hasOwnProperty('kfzj') ){ if (!result[i].hasOwnProperty('kfzj')) {
result[i].kfzj= 0 result[i].kfzj = 0
} }
if(!result[i].hasOwnProperty('znsf') ){ if (!result[i].hasOwnProperty('znsf')) {
result[i].znsf= 0 result[i].znsf = 0
} }
if(!result[i].hasOwnProperty('tcfw') ){ if (!result[i].hasOwnProperty('tcfw')) {
result[i].tcfw= 0 result[i].tcfw = 0
} }
if(!result[i].hasOwnProperty('ywzj') ){ if (!result[i].hasOwnProperty('ywzj')) {
result[i].ywzj= 0 result[i].ywzj = 0
} }
result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw) result[i].zj =
parseInt(result[i].yyzy) +
parseInt(result[i].kfzj) +
parseInt(result[i].znsf) +
parseInt(result[i].ywzj) +
parseInt(result[i].tcfw)
} }
this.tableData = res.data.data this.tableData = res.data.data
this.total = res.data.data.total this.total = res.data.data.total
@ -396,35 +445,42 @@ export default {
}, },
// 组件服务部门使用情况列表-改为能力使用统计 // 组件服务部门使用情况列表-改为能力使用统计
getSecondTree () { getSecondTree () {
this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', { this.$http
.get('/census/center/selectApplyDeptDetailTypeCountList', {
params: { params: {
// page: page || 1, // page: page || 1,
limit: 5, // limit: 5,
approveStatus:this.examineStatus, approveStatus: this.examineStatus,
deptId: this.abilityDepartment, deptId: this.abilityDepartment,
params: '', params: '',
startDate:this.startDate, startDate: this.startDate,
endDate:this.endDate endDate: this.endDate
} }
}).then(res => { })
let result= res.data.data .then((res) => {
for(let i=0;i<result.length;i++){ const result = res.data.data
if(!result[i].hasOwnProperty('yyzy') ){ for (let i = 0; i < result.length; i++) {
result[i].yyzy= 0 if (!result[i].hasOwnProperty('yyzy')) {
result[i].yyzy = 0
} }
if(!result[i].hasOwnProperty('kfzj') ){ if (!result[i].hasOwnProperty('kfzj')) {
result[i].kfzj= 0 result[i].kfzj = 0
} }
if(!result[i].hasOwnProperty('znsf') ){ if (!result[i].hasOwnProperty('znsf')) {
result[i].znsf= 0 result[i].znsf = 0
} }
if(!result[i].hasOwnProperty('tcfw') ){ if (!result[i].hasOwnProperty('tcfw')) {
result[i].tcfw= 0 result[i].tcfw = 0
} }
if(!result[i].hasOwnProperty('ywzj') ){ if (!result[i].hasOwnProperty('ywzj')) {
result[i].ywzj= 0 result[i].ywzj = 0
} }
result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw) result[i].zj =
parseInt(result[i].yyzy) +
parseInt(result[i].kfzj) +
parseInt(result[i].znsf) +
parseInt(result[i].ywzj) +
parseInt(result[i].tcfw)
} }
this.tableData = res.data.data this.tableData = res.data.data
this.total = res.data.data.total this.total = res.data.data.total
@ -432,41 +488,58 @@ export default {
}, },
// 能力上架明细 // 能力上架明细
getOneDetail (page) { getOneDetail (page) {
this.$http.get('/census/center/selectCensusResourceTable/', { var passAndReview = '' // 转变"审核完成"字段为通过
params: { if (this.examineStatus === '审核完成') {
limit: 5, passAndReview = '通过'
// page: page || 1, } else {
approveStatus: this.examineStatus, passAndReview = this.examineStatus
deptId: this.abilityDepartment,
params: '',
startDate:this.startDate,
endDate:this.endDate
} }
}).then(res => { this.$http
console.log('111111',this.tableData,res.data.data) .get('/census/center/selectCensusResourceTable', {
params: {
// limit: 5,
// page: page || 1,
approveStatus: passAndReview,
deptId: this.abilityDepartment,
type: '',
startDate: this.startDate,
endDate: this.endDate
}
})
.then((res) => {
console.log('111111', this.tableData, res.data.data)
this.tableData = res.data.data this.tableData = res.data.data
this.total = res.data.data.total this.total = res.data.data.total
}) })
}, },
// 能力使用明细 // 能力使用明细
getTwoDetail (page) { getTwoDetail (page) {
this.$http.get('/census/center/selectCensusApplyTable/', { var passAndReview = '' // 转变"审核完成"字段为通过
if (this.examineStatus === '审核完成') {
passAndReview = '通过'
} else {
passAndReview = this.examineStatus
}
this.$http
.get('/census/center/selectCensusApplyTable', {
params: { params: {
limit: 5, // limit: 5,
// page: page || 1, // page: page || 1,
approveStatus: this.examineStatus, approveStatus: this.examineStatus,
deptId: this.abilityDepartment, deptId: this.abilityDepartment,
params: '', type: '',
startDate:this.startDate, startDate: this.startDate,
endDate:this.endDate endDate: this.endDate
} }
}).then(res => { })
.then((res) => {
this.tableData = res.data.data this.tableData = res.data.data
this.total = res.data.data.total this.total = res.data.data.total
}) })
}, },
getReleaseTree (page) { getReleaseTree (page) {
this.$http.get('/census/center/selectApplyDeptDetailTypeCountList/', { this.$http
.get('/census/center/selectApplyDeptDetailTypeCountList/', {
params: { params: {
limit: 5, limit: 5,
// page: page || 1, // page: page || 1,
@ -475,25 +548,31 @@ export default {
params: '', params: '',
startDate: '' startDate: ''
} }
}).then(res => { })
let result= res.data.data .then((res) => {
for(let i=0;i<result.length;i++){ const result = res.data.data
if(!result[i].hasOwnProperty('yyzy') ){ for (let i = 0; i < result.length; i++) {
result[i].yyzy= 0 if (!result[i].hasOwnProperty('yyzy')) {
result[i].yyzy = 0
} }
if(!result[i].hasOwnProperty('kfzj') ){ if (!result[i].hasOwnProperty('kfzj')) {
result[i].kfzj= 0 result[i].kfzj = 0
} }
if(!result[i].hasOwnProperty('znsf') ){ if (!result[i].hasOwnProperty('znsf')) {
result[i].znsf= 0 result[i].znsf = 0
} }
if(!result[i].hasOwnProperty('tcfw') ){ if (!result[i].hasOwnProperty('tcfw')) {
result[i].tcfw= 0 result[i].tcfw = 0
} }
if(!result[i].hasOwnProperty('ywzj') ){ if (!result[i].hasOwnProperty('ywzj')) {
result[i].ywzj= 0 result[i].ywzj = 0
} }
result[i].zj=parseInt(result[i].yyzy)+ parseInt(result[i].kfzj)+parseInt(result[i].znsf)+parseInt(result[i].ywzj)+parseInt(result[i].tcfw) result[i].zj =
parseInt(result[i].yyzy) +
parseInt(result[i].kfzj) +
parseInt(result[i].znsf) +
parseInt(result[i].ywzj) +
parseInt(result[i].tcfw)
} }
this.tableData = res.data.data this.tableData = res.data.data
this.total = res.data.data.total this.total = res.data.data.total
@ -501,14 +580,16 @@ export default {
}, },
// 应用资源部门使用情况列表 // 应用资源部门使用情况列表
getUsedTree () { getUsedTree () {
this.$http.get('/census/center/v3/resourceReleaseDetails/', { this.$http
.get('/census/center/v3/resourceReleaseDetails/', {
params: { params: {
limit: 5, limit: 5,
page: 1, page: 1,
// id:'1067246875800000066', // id:'1067246875800000066',
resourceType: '应用资源' resourceType: '应用资源'
} }
}).then(res => { })
.then((res) => {
this.tableData = res.data.data.list this.tableData = res.data.data.list
}) })
}, },
@ -553,28 +634,27 @@ export default {
this.departmentId = index this.departmentId = index
if (index === 1) { if (index === 1) {
if (this.choseId === 0) { if (this.choseId === 0) {
if(!this.detailFlag){ if (!this.detailFlag) {
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
} }
this.getFirstTree() this.getFirstTree()
} else if (this.choseId === 1) { } else if (this.choseId === 1) {
//this.getReleaseTree() // this.getReleaseTree()
} }
} else if (index === 2) { } else if (index === 2) {
if (this.choseId === 0) { if (this.choseId === 0) {
if(!this.detailFlag){ if (!this.detailFlag) {
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
} }
this.getSecondTree() this.getSecondTree()
} else { } else {
//this.getUsedTree() // this.getUsedTree()
} }
} } else if (index === 3) {
else if (index === 3) {
if (this.choseId === 0) { if (this.choseId === 0) {
this.getOneDetail() this.getOneDetail()
} else { } else {
//this.getUsedTree() // this.getUsedTree()
} }
} else if (index === 4) { } else if (index === 4) {
if (this.choseId === 0) { if (this.choseId === 0) {
@ -603,115 +683,111 @@ export default {
this.resourcesIsShow = false this.resourcesIsShow = false
this.handleCurrentChange(1) this.handleCurrentChange(1)
}, },
//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数 // 明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数
goToDetail(){ goToDetail () {
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
if(this.departmentId===1){ if (this.departmentId === 1) {
this.handleChose(3); this.handleChose(3)
//this.departmentId = 1; // this.departmentId = 1;
}else if(this.departmentId===2){ } else if (this.departmentId === 2) {
this.handleChose(4); this.handleChose(4)
//this.departmentId = 2; // this.departmentId = 2;
}else{ } else {
} }
}, },
//返回按钮 // 返回按钮
goToBack(){ goToBack () {
//departmentId 1，3 2，4 两个值共同判断 // departmentId 1，3 2，4 两个值共同判断
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
if(this.departmentId===3){ if (this.departmentId === 3) {
this.handleChose(1); this.handleChose(1)
//this.departmentId = 1; // this.departmentId = 1;
}else if(this.departmentId===4){ } else if (this.departmentId === 4) {
this.handleChose(2); this.handleChose(2)
//this.departmentId = 2; // this.departmentId = 2;
}else{ } else {
} }
}, },
//点击查询按钮查询数据 // 点击查询按钮查询数据
getDataList(){ getDataList () {
if(this.value1.length >0){ if (this.value1.length > 0) {
this.startDate = this.handleTime(this.value1[0], 'yyyy-MM-dd HH:mm:ss'); this.startDate = this.handleTime(this.value1[0], 'yyyy-MM-dd HH:mm:ss')
this.endDate = this.handleTime(this.value1[1], 'yyyy-MM-dd HH:mm:ss'); this.endDate = this.handleTime(this.value1[1], 'yyyy-MM-dd HH:mm:ss')
} }
if(this.examineStatus == 0){ if (this.examineStatus == 0) {
this.examineStatus = "审核中"; this.examineStatus = '审核中'
}else{ } else {
this.examineStatus = "审核完成"; this.examineStatus = '审核完成'
} }
if( this.abilityDepartment){ if (this.abilityDepartment) {
this.abilityDepartment = this.abilityDepartment this.abilityDepartment = this.abilityDepartment
} else { } else {
this.abilityDepartment = "全部"; this.abilityDepartment = ''
} }
if(this.abilityType){ if (this.abilityType) {
this.abilityType = this.abilityType; this.abilityType = this.abilityType
} else { } else {
this.abilityType = "全部"; this.abilityType = ''
} }
console.log('查询参数开始时间1',this.startDate); console.log('查询参数开始时间1', this.startDate)
console.log('查询参数结束时间2',this.endDate); console.log('查询参数结束时间2', this.endDate)
console.log('查询参数审核状态',this.examineStatus); console.log('查询参数审核状态', this.examineStatus)
console.log('查询参数部门',this.abilityDepartment); console.log('查询参数部门', this.abilityDepartment)
console.log('查询参数类型',this.abilityType); console.log('查询参数类型', this.abilityType)
if(this.departmentId===1){ if (this.departmentId === 1) {
if(this.detailFlag){ if (this.detailFlag) {
this.handleChose(3); this.handleChose(3)
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
}else {
this.handleChose(1);
this.detailFlag = !this.detailFlag;
}
//this.departmentId = 1;
}else if(this.departmentId===2){
if(this.detailFlag){
this.handleChose(4);
this.detailFlag = !this.detailFlag;
}else {
this.handleChose(2);
this.detailFlag = !this.detailFlag;
}
} else if(this.departmentId===3){
this.handleChose(3);
} else { } else {
this.handleChose(4); this.handleChose(1)
this.detailFlag = !this.detailFlag
}
// this.departmentId = 1;
} else if (this.departmentId === 2) {
if (this.detailFlag) {
this.handleChose(4)
this.detailFlag = !this.detailFlag
} else {
this.handleChose(2)
this.detailFlag = !this.detailFlag
}
} else if (this.departmentId === 3) {
this.handleChose(3)
} else {
this.handleChose(4)
} }
}, },
//重置按钮查询数据 // 重置按钮查询数据
resetDataList(){ resetDataList () {
this.startDate = ""; this.startDate = ''
this.endDate=""; this.endDate = ''
this.examineStatus = "审核中"; this.examineStatus = '审核中'
this.abilityDepartment = "全部"; this.abilityDepartment = ''
this.abilityType ="全部"; this.abilityType = ''
if(this.departmentId===1){ if (this.departmentId === 1) {
if(this.detailFlag){ if (this.detailFlag) {
this.handleChose(3); this.handleChose(3)
this.detailFlag = !this.detailFlag; this.detailFlag = !this.detailFlag
}else {
this.handleChose(1);
this.detailFlag = !this.detailFlag;
}
//this.departmentId = 1;
}else if(this.departmentId===2){
if(this.detailFlag){
this.handleChose(4);
this.detailFlag = !this.detailFlag;
}else {
this.handleChose(2);
this.detailFlag = !this.detailFlag;
}
}else if(this.departmentId===3){
this.handleChose(3);
} else { } else {
this.handleChose(4); this.handleChose(1)
this.detailFlag = !this.detailFlag
}
// this.departmentId = 1;
} else if (this.departmentId === 2) {
if (this.detailFlag) {
this.handleChose(4)
this.detailFlag = !this.detailFlag
} else {
this.handleChose(2)
this.detailFlag = !this.detailFlag
}
} else if (this.departmentId === 3) {
this.handleChose(3)
} else {
this.handleChose(4)
} }
}, },
// 定义格式化函数： // 定义格式化函数：
handleTime (time, format) { handleTime (time, format) {
@ -746,7 +822,6 @@ export default {
}) })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -843,7 +918,7 @@ input::placeholder {
font-size: 14px; font-size: 14px;
color: #979eb9; color: #979eb9;
cursor: pointer; cursor: pointer;
.detail-button{ .detail-button {
width: 60px; width: 60px;
height: 30px; height: 30px;
right: 60px; right: 60px;

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

@ -2,46 +2,71 @@
<div class="capability-convergence"> <div class="capability-convergence">
<div class="main"> <div class="main">
<div class="top"> <div class="top">
能力汇聚 能力分类
<span class="line"></span> <span class="line"></span>
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="item"> <div class="item">
<div class="zj">组件服务</div> <div class="zj">组件服务</div>
<div class="name" v-for="(item, index) in zjList" :key="item.id" :class="index == 4 ? 'name-last' : ''" <div
@click="selectOne(item.id)"> class="name"
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 class="name" v-for="(item, index) in yyList" :key="item.id" :class="index == 4 ? 'name-last' : ''" <div
@click="selectOne(item.id)"> class="name"
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 class="name" v-for="(item, index) in jcList" :key="item.name" :class="index == 2 ? 'name-last' : ''" <div
@click="selectOne2(item.name)"> class="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 class="name" v-for="(item, index) in sjList" :key="item.id" :class="index == 4 ? 'name-last' : ''" <div
@click="selectOne3(item.name)"> class="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 class="name" v-for="(item, index) in zsList" :key="item.id" :class="index == 4 ? 'name-last' : ''" <div
@click="openHref(item)"> class="name"
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>
@ -51,27 +76,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, getSoldierList } from '@/api/home' import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
import { message, Upload } from 'ant-design-vue' import { message, Upload } from 'ant-design-vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const store = useStore() const store = useStore()
const router = useRouter() const router = useRouter()
const zjList = ref([]) const zjList = ref([])
const jcList = ref([]) const jcList = ref([])
const sjList = ref([]) const sjList = ref([])
const yyList = ref([]) const yyList = ref([])
// 知识库模块数据 // 知识库模块数据
const zsList = ref([]) const zsList = ref([])
// const jcList = ref([]) // const jcList = ref([])
const paramsGetResources = { const paramsGetResources = {
districtId: '', districtId: '',
pageNum: 1, pageNum: 1,
pageSize: 5, pageSize: 5,
@ -80,19 +105,19 @@ const paramsGetResources = {
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({
@ -160,25 +185,27 @@ const getAppResources = (type, obj) => {
} }
// 西海岸-单兵设备、无人机 获取数量 // 西海岸-单兵设备、无人机 获取数量
if (whoShow1.value.itShowXiHaiAn) { if (whoShow1.value.itShowXiHaiAn) {
getSoldierData('无人机').then(res => { getSoldierData('无人机')
let { total = 0 } = res.data.data; .then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({ jcList.value.push({
name: '无人机', name: '无人机',
num: total, num: total,
}) })
}).catch(err => {
console.log('err--无人机---------->', err);
}) })
getSoldierData('单兵设备').then(res => { .catch((err) => {
let { total = 0 } = res.data.data; console.log('err--无人机---------->', err)
})
getSoldierData('单兵设备')
.then((res) => {
let { total = 0 } = res.data.data
jcList.value.push({ jcList.value.push({
name: '单兵设备', name: '单兵设备',
num: total, num: total,
}) })
}).catch(err => { })
console.log('err--单兵设备---------->', err); .catch((err) => {
console.log('err--单兵设备---------->', err)
}) })
} }
}) })
@ -203,29 +230,31 @@ const getAppResources = (type, obj) => {
}) })
} }
} }
} }
// todo 获取无人机、单兵设备 // todo 获取无人机、单兵设备
const getSoldierData = (name) => { const getSoldierData = (name) => {
let _params = { let _params = {
type: name, type: name,
page: 1, page: 1,
limit: 10, limit: 10,
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getSoldierList(_params).then(res => { getSoldierList(_params)
.then((res) => {
resolve(res) resolve(res)
console.log('res---获取无人机、单兵设备--------->', res); console.log('res---获取无人机、单兵设备--------->', res)
if (res.data.code !== 0) { if (res.data.code !== 0) {
return message.error(res.data.msg) return message.error(res.data.msg)
} }
}).catch(err => { })
.catch((err) => {
reject(err) reject(err)
}) })
}) })
} }
const openHref = (item) => { 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) => {
@ -248,22 +277,22 @@ const openHref = (item) => {
// '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,
@ -279,8 +308,8 @@ function jumpPage(type) {
select: type, select: type,
}, },
}) })
} }
const selectOne = (id) => { const selectOne = (id) => {
console.log('点击===============》', id) console.log('点击===============》', id)
router.push({ router.push({
path: '/details', path: '/details',
@ -288,8 +317,8 @@ const selectOne = (id) => {
id: id, id: id,
}, },
}) })
} }
const selectOne2 = (name) => { const selectOne2 = (name) => {
console.log('点击===============》', name) console.log('点击===============》', name)
router.push({ router.push({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
@ -298,8 +327,8 @@ const selectOne2 = (name) => {
select: '基础设施', select: '基础设施',
}, },
}) })
} }
const selectOne3 = (name) => { const selectOne3 = (name) => {
console.log('点击===============》', name) console.log('点击===============》', name)
router.push({ router.push({
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
@ -308,10 +337,10 @@ const selectOne3 = (name) => {
select: '数据资源', select: '数据资源',
}, },
}) })
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.capability-convergence { .capability-convergence {
height: 7.2rem; height: 7.2rem;
background: url('~@/assets/newHome/Convergence-bg.png') no-repeat; background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
background-size: 100%; background-size: 100%;
@ -436,5 +465,5 @@ const selectOne3 = (name) => {
} }
} }
} }
} }
</style> </style>

15
front/src/views/newHome/components/Navigation2.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div class="navigation2"> <div class="navigation2">
<a-tooltip>
<template #title>点击进入组件服务</template>
<div class="item" @click="jumpPage('组件服务')"> <div class="item" @click="jumpPage('组件服务')">
<div class="img zj"></div> <div class="img zj"></div>
<div class="name">组件服务</div> <div class="name">组件服务</div>
@ -8,6 +10,9 @@
个 个
</div> </div>
</div> </div>
</a-tooltip>
<a-tooltip>
<template #title>点击进入应用资源</template>
<div class="item" @click="jumpPage('应用资源')"> <div class="item" @click="jumpPage('应用资源')">
<div class="img yy"></div> <div class="img yy"></div>
<div class="name">应用资源</div> <div class="name">应用资源</div>
@ -16,6 +21,9 @@
个 个
</div> </div>
</div> </div>
</a-tooltip>
<a-tooltip>
<template #title>点击进入基础设施</template>
<div class="item" @click="jumpPage('基础设施')"> <div class="item" @click="jumpPage('基础设施')">
<div class="img jc"></div> <div class="img jc"></div>
<div class="name">基础设施</div> <div class="name">基础设施</div>
@ -24,6 +32,9 @@
个 个
</div> </div>
</div> </div>
</a-tooltip>
<a-tooltip>
<template #title>点击进入数据资源</template>
<div class="item" @click="jumpPage('数据资源')"> <div class="item" @click="jumpPage('数据资源')">
<div class="img sj"></div> <div class="img sj"></div>
<div class="name">数据资源</div> <div class="name">数据资源</div>
@ -32,6 +43,9 @@
项 项
</div> </div>
</div> </div>
</a-tooltip>
<a-tooltip>
<template #title>点击进入知识库</template>
<div class="item" @click="jumpPage('知识库')"> <div class="item" @click="jumpPage('知识库')">
<div class="img zs"></div> <div class="img zs"></div>
<div class="name">知识库</div> <div class="name">知识库</div>
@ -40,6 +54,7 @@
个 个
</div> </div>
</div> </div>
</a-tooltip>
</div> </div>
</template> </template>
<script setup> <script setup>

2
front/src/views/newHome/index.vue
View File

@ -15,7 +15,7 @@
<latest-capabilities></latest-capabilities> <latest-capabilities></latest-capabilities>
<resource-aggregation></resource-aggregation> <resource-aggregation></resource-aggregation>
<recommendation-ability></recommendation-ability> <recommendation-ability></recommendation-ability>
<work-dynamics></work-dynamics> <!-- <work-dynamics></work-dynamics> -->
<home-footer></home-footer> <home-footer></home-footer>
</div> </div>
</template> </template>