Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
2663665321
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<span class='title-style'>应用资源</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<div>
|
||||
<span class='title-style'>应用资源</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<button class='back-btn' @click="backBtn">返回</button>
|
||||
</div>
|
||||
|
||||
<div class='container-body'>
|
||||
<div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
|
||||
|
|
@ -57,31 +61,215 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableId:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
fatherId:{
|
||||
type:Number,
|
||||
default:null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
data2:[],
|
||||
data3:[],
|
||||
data4:[],
|
||||
data5:[],
|
||||
data6:[],
|
||||
data7:[],
|
||||
data8:[],
|
||||
data9:[],
|
||||
data10:[],
|
||||
data11:[],
|
||||
colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDistributedList()
|
||||
this.getUsedList()
|
||||
this.getTopList()
|
||||
this.getApplicationDistribution()
|
||||
this.getFieldDistribution()
|
||||
this.getStatuesDistribution()
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
this.myEcharts3()
|
||||
this.myEcharts4()
|
||||
this.myEcharts6()
|
||||
this.myEcharts7()
|
||||
this.myEcharts8()
|
||||
this.myEcharts9()
|
||||
// this.myEcharts2()
|
||||
// this.myEcharts3()
|
||||
// this.myEcharts4()
|
||||
// this.myEcharts6()
|
||||
// this.myEcharts7()
|
||||
// this.myEcharts8()
|
||||
// this.myEcharts9()
|
||||
},
|
||||
methods:{
|
||||
// 应用贡献组件数量分布（算法、图层、开发、业务）
|
||||
getDistributedList () {
|
||||
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
|
||||
params : {
|
||||
keyId:'1522550195034857476'
|
||||
// this.tableId
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.attr_value
|
||||
}
|
||||
this.data2.push(single)
|
||||
this.data5.push(single.value)
|
||||
this.data6.push(single.name)
|
||||
this.myEcharts2()
|
||||
this.myEcharts4()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
// 应用贡献组件分别被多少应用使用
|
||||
getUsedList () {
|
||||
this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1522550195034857476'
|
||||
this.tableId
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.useNum,
|
||||
name:item.name
|
||||
}
|
||||
this.data3.push(single.name)
|
||||
this.data4.push(single.value)
|
||||
console.log("2222", this.data3);
|
||||
this.myEcharts3()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//评分分布12345
|
||||
getTopList () {
|
||||
this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
// '1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.scoreNum,
|
||||
name:item.score
|
||||
}
|
||||
this.data8.push(single)
|
||||
this.myEcharts6()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//发布端应用分布情况
|
||||
getApplicationDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.publisher
|
||||
}
|
||||
this.data7.push(single)
|
||||
this.myEcharts7()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//应用领域分布情况
|
||||
getFieldDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.total,
|
||||
name:item.type
|
||||
}
|
||||
this.data9.push(single)
|
||||
this.myEcharts8()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
//应用状态分布情况
|
||||
getStatuesDistribution() {
|
||||
this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
|
||||
params : {
|
||||
id:
|
||||
// '1067246875800000066',
|
||||
this.tableId,
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.num,
|
||||
name:item.state
|
||||
}
|
||||
this.data10.push(single)
|
||||
this.myEcharts9()
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(32, 33, 36,.7)',
|
||||
borderColor: 'rgba(32, 33, 36,0.20)',
|
||||
borderWidth: 1,
|
||||
textStyle: { // 文字提示样式
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
},
|
||||
axisPointer: { // 坐标轴虚线
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
|
|
@ -231,12 +419,7 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '算法' },
|
||||
{ value: 735, name: '图层' },
|
||||
{ value: 580, name: '开发' },
|
||||
{ value: 484, name: '业务' },
|
||||
]
|
||||
data:this.data2
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -248,12 +431,29 @@ export default {
|
|||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(32, 33, 36,.7)',
|
||||
borderColor: 'rgba(32, 33, 36,0.20)',
|
||||
borderWidth: 1,
|
||||
textStyle: { // 文字提示样式
|
||||
color: '#fff',
|
||||
fontSize: '12'
|
||||
},
|
||||
axisPointer: { // 坐标轴虚线
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['算法', '图层', '开发', '业务'],
|
||||
data:this.data3,
|
||||
fontSize:12,
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
|
|
@ -268,8 +468,17 @@ export default {
|
|||
}
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
formatter: val => {
|
||||
let txt = val
|
||||
if (val.length > 3) {
|
||||
txt = val.substr(0, 3) + '...'
|
||||
}
|
||||
return txt
|
||||
},
|
||||
textStyle: {
|
||||
color: "#999999",//x轴内容文字颜色
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -300,7 +509,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5],
|
||||
data: [1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
|
|
@ -314,7 +523,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
data: this.data4,
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
|
|
@ -343,7 +552,7 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
|
||||
data:this.data6,
|
||||
color:['#f5f5f5'],
|
||||
axisTick: { // 坐标轴 刻度
|
||||
show: false, // 是否显示
|
||||
|
|
@ -404,7 +613,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80, 50, 80],
|
||||
data:this.data5,
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
|
|
@ -486,13 +695,7 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '1分' },
|
||||
{ value: 735, name: '2分' },
|
||||
{ value: 580, name: '3分' },
|
||||
{ value: 484, name: '4分' },
|
||||
{ value: 300, name: '5分' }
|
||||
]
|
||||
data:this.data8
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -564,175 +767,197 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用名称1' },
|
||||
{ value: 735, name: '应用名称2' },
|
||||
{ value: 580, name: '应用名称3' },
|
||||
{ value: 484, name: '应用名称4' },
|
||||
{ value: 300, name: '应用名称5' }
|
||||
]
|
||||
data:this.data7
|
||||
// [
|
||||
// { value: 1048, name: '应用名称1' },
|
||||
// { value: 735, name: '应用名称2' },
|
||||
// { value: 580, name: '应用名称3' },
|
||||
// { value: 484, name: '应用名称4' },
|
||||
// { value: 300, name: '应用名称5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts8(){
|
||||
var chartDom = document.getElementById('main8');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用领域1' },
|
||||
{ value: 735, name: '应用领域2' },
|
||||
{ value: 580, name: '应用领域3' },
|
||||
{ value: 484, name: '应用领域4' },
|
||||
{ value: 300, name: '应用领域5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myEcharts8(){
|
||||
var chartDom = document.getElementById('main8');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical", type: 'scroll',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `{a|${name}} {b|${p}%}`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 80,
|
||||
color: "#000000",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data9
|
||||
// [
|
||||
// { value: 1048, name: '应用领域1' },
|
||||
// { value: 735, name: '应用领域2' },
|
||||
// { value: 580, name: '应用领域3' },
|
||||
// { value: 484, name: '应用领域4' },
|
||||
// { value: 300, name: '应用领域5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts9(){
|
||||
var chartDom = document.getElementById('main9');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '47%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用状态1' },
|
||||
{ value: 735, name: '应用状态2' },
|
||||
{ value: 580, name: '应用状态3' },
|
||||
{ value: 484, name: '应用状态4' },
|
||||
{ value: 300, name: '应用状态5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts9(){
|
||||
var chartDom = document.getElementById('main9');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '47%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data10
|
||||
// [
|
||||
// { value: 1048, name: '应用状态1' },
|
||||
// { value: 735, name: '应用状态2' },
|
||||
// { value: 580, name: '应用状态3' },
|
||||
// { value: 484, name: '应用状态4' },
|
||||
// { value: 300, name: '应用状态5' }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeApplication')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -740,6 +965,8 @@ export default {
|
|||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style{
|
||||
font-size: 24px;
|
||||
|
|
@ -750,6 +977,13 @@ export default {
|
|||
font-size: 18px;
|
||||
color:#666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn{
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249,0);
|
||||
color: #FFF;
|
||||
margin-left:1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.container-body{
|
||||
width:1300px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<span class='title-style'>组件服务</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<div>
|
||||
<span class='title-style'>组件服务</span>
|
||||
<span class='page-introduction'>发布情况统计</span>
|
||||
<button class='back-btn' @click="backBtn">返回</button>
|
||||
</div>
|
||||
|
||||
<div class='container-body'>
|
||||
<div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
|
|
@ -26,7 +30,7 @@
|
|||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +45,7 @@
|
|||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||
</div>
|
||||
<span class='num-style'>{{item.name}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
|
||||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,258 +61,383 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableId:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
fatherId:{
|
||||
type:Number,
|
||||
default:null,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
data1:[],
|
||||
data2: [
|
||||
// { value: 1048,name: '算法' },
|
||||
// { value: 735, name: '图层' },
|
||||
// { nums: 580, attr_value: '开发' },
|
||||
// { nums: 484, attr_value: '业务' },
|
||||
],
|
||||
data3: [
|
||||
// { value: 1048,name: '算法' },
|
||||
],
|
||||
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
|
||||
usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
|
||||
applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.fatherId===1){
|
||||
this.getBeCalled()
|
||||
this.getBeApplied()
|
||||
this.getAlgorithm()
|
||||
this.getDistributed()
|
||||
this.getScoreList()
|
||||
}else{
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
this.myEcharts3()
|
||||
|
||||
|
||||
},
|
||||
methods:{
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
// 评分发布情况
|
||||
getScoreList () {
|
||||
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
|
||||
const single={
|
||||
value:item.scoreNum,
|
||||
name:item.score
|
||||
}
|
||||
// const newList=[]
|
||||
this.data1.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts1()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
// 算法图层开发业务
|
||||
getAlgorithm () {
|
||||
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"组件服务"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
|
||||
const single={
|
||||
value:item.nums,
|
||||
name:item.attr_value
|
||||
}
|
||||
// const newList=[]
|
||||
this.data2.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts2()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
// 应用领域分布
|
||||
getDistributed () {
|
||||
this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.total,
|
||||
name:item.type
|
||||
}
|
||||
const newList=[]
|
||||
this.data3.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts3()
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '1分' },
|
||||
{ value: 735, name: '2分' },
|
||||
{ value: 580, name: '3分' },
|
||||
{ value: 484, name: '4分' },
|
||||
{ value: 300, name: '5分' }
|
||||
// 被调用组件及数量
|
||||
getBeCalled () {
|
||||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.applicationList =res.data.data
|
||||
})
|
||||
},
|
||||
// 被申请组件及数量
|
||||
getBeApplied () {
|
||||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.applicationList =res.data.data
|
||||
})
|
||||
},
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((v / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts2(){
|
||||
var chartDom = document.getElementById('main2');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
myEcharts2(){
|
||||
var chartDom = document.getElementById('main2');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '算法' },
|
||||
{ value: 735, name: '图层' },
|
||||
{ value: 580, name: '开发' },
|
||||
{ value: 484, name: '业务' },
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts3(){
|
||||
var chartDom = document.getElementById('main3');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
myEcharts3(){
|
||||
var chartDom = document.getElementById('main3');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
legend: {
|
||||
orient: "vertical", type: 'scroll',
|
||||
top: '22%',
|
||||
left: '50%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `{a|${name}} {b|${p}%}`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: "#000000",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
color: "#666666",
|
||||
backgroundColor: "transparent",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用领域' },
|
||||
{ value: 735, name: '应用领域2' },
|
||||
{ value: 580, name: '应用领域3' },
|
||||
{ value: 484, name: '应用领域4' },
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeChild')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style{
|
||||
font-size: 24px;
|
||||
|
|
@ -320,6 +449,13 @@ export default {
|
|||
color:#666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn{
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249,0);
|
||||
color: #FFF;
|
||||
margin-left:1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.container-body{
|
||||
width:1300px;
|
||||
margin-top:30px;
|
||||
|
|
@ -358,7 +494,9 @@ export default {
|
|||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
/* background-image:url("../../../assets/img/排行榜背景图.png"); */
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.container-body5{
|
||||
width:640px;
|
||||
|
|
@ -367,6 +505,9 @@ export default {
|
|||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.footer{
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class='container'>
|
||||
<div class='container-left'>
|
||||
<div >
|
||||
<div class='container'>
|
||||
<!-- <div class='container-left' v-if='homeIsShow'>
|
||||
<div class='left-search'>
|
||||
<div>
|
||||
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
{{ node.label }}
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'>
|
||||
<div class="mod-demand__bsdemand">
|
||||
<div class='top-box'>
|
||||
|
|
@ -41,51 +42,51 @@
|
|||
</div>
|
||||
<div class='line-style'></div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
prop="deptName"
|
||||
label="部门名称"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="releaseNum"
|
||||
prop="resourceNum"
|
||||
label="发布总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="applyNum"
|
||||
<el-table-column v-if="this.choseId===0"
|
||||
prop="resourceCarNum"
|
||||
label="被申请总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="browseNmu"
|
||||
prop="resourceBrowseNum"
|
||||
label="浏览总量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="collectNum"
|
||||
prop="resourceCollectionNum"
|
||||
label="收藏量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="transferNum"
|
||||
<el-table-column v-if="this.choseId===0"
|
||||
prop="resourceVisits"
|
||||
label="被调用总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="applicationNum"
|
||||
<el-table-column v-if="this.choseId===0"
|
||||
prop="resourceRelNum"
|
||||
label="被应用总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="needApplicationNum"
|
||||
<el-table-column v-if="this.choseId===0"
|
||||
prop="resourceShareNum"
|
||||
label="需申请数量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="reductionNum"
|
||||
<el-table-column v-if="this.choseId===0"
|
||||
prop="resourceShareNonNum"
|
||||
label="免批数量"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
|
|
@ -99,18 +100,19 @@
|
|||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="getALLTree"
|
||||
:current-page="currentPage4"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="50">
|
||||
:total="total"
|
||||
:page-size="5"
|
||||
:current-page="currentPage"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<component-services v-if='servicesIsShow' ></component-services>
|
||||
<application-resources v-if='resourcesIsShow'></application-resources>
|
||||
</div>
|
||||
<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>
|
||||
<script>
|
||||
|
|
@ -121,6 +123,8 @@ export default {
|
|||
data(){
|
||||
return{
|
||||
inputTxt:'',
|
||||
tableId:'',
|
||||
fatherId:'',
|
||||
treeData: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
|
|
@ -156,79 +160,48 @@ export default {
|
|||
}]
|
||||
}]
|
||||
}],
|
||||
total:null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
choseId:null,
|
||||
choseId:0,
|
||||
departmentId:1,
|
||||
currentPage4: 4,
|
||||
currentPage: 1,
|
||||
homeIsShow:true,
|
||||
servicesIsShow:false,
|
||||
resourcesIsShow:false,
|
||||
titleList:[
|
||||
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
|
||||
],
|
||||
tableData: [{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},{
|
||||
name: '部门名称一',
|
||||
releaseNum: 111,
|
||||
applyNum: 222,
|
||||
browseNmu: 333,
|
||||
collectNum:444,
|
||||
transferNum:555,
|
||||
applicationNum:666,
|
||||
needApplicationNum:777,
|
||||
reductionNum:888,
|
||||
},
|
||||
]
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getALLTree()
|
||||
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.getFirstTree()
|
||||
},
|
||||
methods: {
|
||||
//搜索框
|
||||
searchBtn(){
|
||||
this.getALLTree()
|
||||
},
|
||||
//树
|
||||
handleNodeClick(data) {
|
||||
console.log(data.name);
|
||||
this.getTreeName(data)
|
||||
},
|
||||
// searchBtn(){
|
||||
// this.getALLTree()
|
||||
// },
|
||||
// //树
|
||||
// handleNodeClick(data) {
|
||||
// console.log(data.name);
|
||||
// this.getTreeName(data)
|
||||
// },
|
||||
//翻页
|
||||
handleCurrentChange(val){
|
||||
this.getALLTree(val)
|
||||
|
||||
if(this.choseId===0){
|
||||
this.getFirstTree(val)
|
||||
}
|
||||
else if(this.choseId===1){
|
||||
this.getReleaseTree(val)
|
||||
}
|
||||
},
|
||||
getTreeName (data) {
|
||||
this.$http.get('/census/center/v3/treeList/' ,{
|
||||
|
|
@ -242,78 +215,136 @@ export default {
|
|||
this.tableData =res.data.data
|
||||
})
|
||||
},
|
||||
// 获取部门列表
|
||||
getALLTree () {
|
||||
this.$http.get('/census/center/v3/treeList/' ,{
|
||||
params : {
|
||||
keywords:this.inputTxt,
|
||||
deptId:'1067246875800000066',
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
}).then(res => {
|
||||
this.treeData =res.data.data
|
||||
this.tableData =res.data.data
|
||||
})
|
||||
},
|
||||
// 获取部门发布情况列表
|
||||
getFirstTree () {
|
||||
// // 获取部门列表
|
||||
// getALLTree () {
|
||||
// this.$http.get('/census/center/v3/treeList/' ,{
|
||||
// params : {
|
||||
// keywords:this.inputTxt,
|
||||
// deptId:'1067246875800000066',
|
||||
// // pageNo: pageNo || 1,
|
||||
// // pageSize: 20
|
||||
// }
|
||||
// }).then(res => {
|
||||
// this.treeData =res.data.data
|
||||
// // this.tableData =res.data.data
|
||||
// })
|
||||
// },
|
||||
|
||||
// 组件服务部门发布情况
|
||||
getFirstTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
limit:100,
|
||||
page:1,
|
||||
id:null,
|
||||
resourceType:'资源类型'
|
||||
page:page||1,
|
||||
limit:5,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data
|
||||
|
||||
this.tableData =res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
// 获取部门使用情况列表
|
||||
// 组件服务部门使用情况列表
|
||||
getSecondTree () {
|
||||
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
|
||||
params : {
|
||||
keywords:'',
|
||||
deptId:'1067246875800000066',
|
||||
}
|
||||
limit:5,
|
||||
page:1,
|
||||
// id:'1067246875800000064',
|
||||
resourceType:'组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data
|
||||
console.log('2222',this.tableData)
|
||||
this.tableData =res.data.data.list
|
||||
|
||||
})
|
||||
},
|
||||
// 应用资源部门发布情况列表
|
||||
getReleaseTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
limit:5,
|
||||
page:page||1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
|
||||
})
|
||||
},
|
||||
// 应用资源部门使用情况列表
|
||||
getUsedTree () {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
limit:5,
|
||||
page:1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
|
||||
})
|
||||
},
|
||||
handleClick(row) {
|
||||
console.log(row);
|
||||
if(this.choseId===0){
|
||||
this.homeIsShow=false
|
||||
this.servicesIsShow=true
|
||||
this.tableId=row.deptId
|
||||
this.fatherId=1
|
||||
}else if(this.choseId===1){
|
||||
this.homeIsShow=false
|
||||
this.resourcesIsShow=true
|
||||
this.tableId=row.deptId
|
||||
this.fatherId=2
|
||||
}
|
||||
|
||||
},
|
||||
//选择组件
|
||||
choseBtn(index){
|
||||
this.choseId=index
|
||||
if (index===0){
|
||||
this.homeIsShow=false
|
||||
this.servicesIsShow=true
|
||||
} else if(index===1){
|
||||
this.homeIsShow=false
|
||||
this.servicesIsShow=false
|
||||
this.resourcesIsShow=true
|
||||
}
|
||||
this.handleChose(1)
|
||||
},
|
||||
// choseBtn(index){
|
||||
// this.choseId=index
|
||||
// if (index===0){
|
||||
// this.homeIsShow=false
|
||||
// this.servicesIsShow=true
|
||||
// } else if(index===1){
|
||||
// this.homeIsShow=false
|
||||
// this.servicesIsShow=false
|
||||
// this.resourcesIsShow=true
|
||||
// }
|
||||
// },
|
||||
//选择发布or使用表格
|
||||
handleChose(index){
|
||||
this.departmentId=index
|
||||
if(index===1){
|
||||
this.getFirstTree()
|
||||
}
|
||||
else{
|
||||
this.getSecondTree()
|
||||
if(this.choseId===0){
|
||||
this.getFirstTree()
|
||||
}else if(this.choseId===1){
|
||||
this.getReleaseTree()
|
||||
}
|
||||
}else if(index===2){
|
||||
if(this.choseId===0){
|
||||
this.getSecondTree()
|
||||
}else{
|
||||
this.getUsedTree()
|
||||
}
|
||||
}
|
||||
},
|
||||
//翻页
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
closeChild(){
|
||||
this.homeIsShow=true
|
||||
this.servicesIsShow=false
|
||||
},
|
||||
closeApplication(){
|
||||
this.homeIsShow=true
|
||||
this.resourcesIsShow=false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -322,10 +353,12 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.container{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.container-left{
|
||||
width:250px;
|
||||
height:1000px;
|
||||
display: inline-block;
|
||||
// background-color: #ffffff;
|
||||
margin-right:10px
|
||||
}
|
||||
|
|
@ -371,7 +404,9 @@ input::placeholder {
|
|||
|
||||
.top-box{
|
||||
height:80px;
|
||||
width:100%;
|
||||
background-color: #fafafc;
|
||||
display: inline-block;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,20 @@ function Request({
|
|||
})
|
||||
})
|
||||
|
||||
}
|
||||
function RequestPost({
|
||||
methods, url, data, success, fali
|
||||
}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
http[methods](url,
|
||||
data
|
||||
).then(res => {
|
||||
resolve(res)
|
||||
}, err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// /resource/getByDept:获取当前登录用户所在部门发布的资源
|
||||
|
|
@ -125,9 +139,9 @@ export const getApplyByDept = (data, success, fail) => {
|
|||
}
|
||||
// 部门发布能力被调用趋势
|
||||
export const getByDept = (data, success, fail) => {
|
||||
Request({
|
||||
methods: 'get',
|
||||
url: '/resource/getByDept',
|
||||
RequestPost({
|
||||
methods: 'post',
|
||||
url: '/resource/trafficDeptResource',
|
||||
data
|
||||
}).then(res => {
|
||||
success && success(res)
|
||||
|
|
|
|||
|
|
@ -27,6 +27,6 @@ export default {
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -186,19 +186,19 @@ export default {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart-box {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
height: 232px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.dept-chart-view {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
height: 232px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
font-size: 18px;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
|
|
@ -206,7 +206,7 @@ export default {
|
|||
}
|
||||
|
||||
.no-data {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
height: 232px;
|
||||
line-height: 232px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '合格数据百分比',
|
||||
name: '使用量',
|
||||
type: 'line',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export default {
|
|||
}
|
||||
|
||||
.no-data {
|
||||
width: 540px;
|
||||
height: 300px;
|
||||
width: 520px;
|
||||
height: 287px;
|
||||
background: #fff;
|
||||
line-height: 232px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,14 @@ export default {
|
|||
return {
|
||||
titles: ["近七日", "月度"],
|
||||
selectedTitle: 0,
|
||||
trendChartData:{}
|
||||
trendChartData: {},
|
||||
startDate: "",
|
||||
endDate:
|
||||
new Date().getFullYear() +
|
||||
"-" +
|
||||
(new Date().getMonth() + 1) +
|
||||
"-" +
|
||||
new Date().getDate()
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -32,25 +39,38 @@ export default {
|
|||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
watch: {
|
||||
selectedTitle: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.startDate = this.getData(newVal == 0 ? 7 : 30);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//发布动态
|
||||
initChart() {
|
||||
let data = {
|
||||
limit: 10,
|
||||
page: 1
|
||||
};
|
||||
Apis.getByDept(
|
||||
data,
|
||||
{
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate
|
||||
},
|
||||
res => {
|
||||
if (res.data.code !== 0) {
|
||||
return;
|
||||
}
|
||||
this.data = res.data.data.records || [];
|
||||
let xaxis=[],ydata=[]
|
||||
this.data.forEach(v=>{
|
||||
xaxis.push(v.createDate)
|
||||
ydata.push(v.visits)
|
||||
})
|
||||
this.data = res.data.data.browseDayList || [];
|
||||
let xaxis = [],
|
||||
ydata = [];
|
||||
this.data.forEach(v => {
|
||||
Object.keys(v).map((key, value) => {
|
||||
xaxis.push(key);
|
||||
ydata.push(value);
|
||||
});
|
||||
});
|
||||
console.log(xaxis)
|
||||
console.log(ydata)
|
||||
this.trendChartData = {
|
||||
xaxis: xaxis,
|
||||
ydata: ydata
|
||||
|
|
@ -66,14 +86,34 @@ export default {
|
|||
},
|
||||
handleTitleSwitch(idx) {
|
||||
this.selectedTitle = idx;
|
||||
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
|
||||
console.log(this.startDate);
|
||||
this.initChart();
|
||||
},
|
||||
getData(aa) {
|
||||
let date1 = new Date(),
|
||||
time1 =
|
||||
date1.getFullYear() +
|
||||
"-" +
|
||||
(date1.getMonth() + 1) +
|
||||
"-" +
|
||||
date1.getDate(); //time1表示当前时间
|
||||
let date2 = new Date(date1);
|
||||
date2.setDate(date1.getDate() - aa);
|
||||
let time2 =
|
||||
date2.getFullYear() +
|
||||
"-" +
|
||||
(date2.getMonth() + 1) +
|
||||
"-" +
|
||||
date2.getDate();
|
||||
return time2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trend {
|
||||
width: 544px;
|
||||
width: 516px;
|
||||
height: 335px;
|
||||
background: #fff;
|
||||
margin-right: 4px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 16:45:25
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-30 15:30:25
|
||||
* @LastEditTime: 2022-06-30 19:06:47
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-27 14:22:56
|
||||
* @LastEditTime: 2022-06-30 11:05:52
|
||||
* @Description: 数据资源参数配置
|
||||
*/
|
||||
const newLocation = 'qingdao'
|
||||
|
|
@ -14,6 +14,8 @@ const whoShow = {}
|
|||
const launchedDataNumObject = {}
|
||||
// 导航数据
|
||||
const navListManagement = {}
|
||||
// 基础设施
|
||||
const infrastructure = {}
|
||||
// 区市站点数据
|
||||
const mapTestNum = {}
|
||||
// 底部数据
|
||||
|
|
@ -21,6 +23,8 @@ const footerDataList = {}
|
|||
// qingdao
|
||||
if (newLocation === 'qingdao') {
|
||||
whoShow.itShowQingDao = true
|
||||
infrastructure.deptName = '青岛市大数据发展管理局'
|
||||
infrastructure.deptId = '1067246875800000066'
|
||||
navListManagement.navList = [
|
||||
{ name: '共享门户', key: 'home' },
|
||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-01 19:19:40
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-29 14:34:24
|
||||
* @LastEditTime: 2022-06-30 18:03:17
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
|
@ -314,3 +314,11 @@ export function queryPartAppByKeyId2(params) {
|
|||
})
|
||||
}
|
||||
|
||||
//首页 基础设施
|
||||
export function selectInfrastructureList(params) {
|
||||
return request({
|
||||
url: 'resource/selectInfrastructureList',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<div class="left" id="left"></div>
|
||||
<div class="center"></div>
|
||||
<div class="right" id="right"></div>
|
||||
<div class="right-son1">汇聚量</div>
|
||||
<!-- <div class="right-son1">汇聚量</div> -->
|
||||
<div class="right-son2">部门数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -287,6 +287,12 @@
|
|||
}
|
||||
//来源部门漏斗图
|
||||
const funnelPlot = (dataList) => {
|
||||
// let arr = ['0-5', '5-10', '10-15', '15-20', '20以上']
|
||||
// dataList.sort((a, b) => {
|
||||
// console.log(arr.indexOf(a.fanwei), arr.indexOf(b.fanwei))
|
||||
// return arr.indexOf(b.fanwei) - arr.indexOf(a.fanwei)
|
||||
// })
|
||||
console.log('============》', dataList)
|
||||
echarts.init(document.getElementById('right')).dispose()
|
||||
let chartDom = document.getElementById('right')
|
||||
let myChart = echarts.init(chartDom)
|
||||
|
|
@ -318,6 +324,7 @@
|
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 20,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">技术文档</div>
|
||||
<div>新手指引</div>
|
||||
<!-- <div>新手指引</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
|
|
@ -152,7 +152,6 @@
|
|||
}
|
||||
)
|
||||
function technical() {
|
||||
|
||||
// 拼接路径
|
||||
const type = pinyin(props.dataList.type, {
|
||||
pattern: 'initial',
|
||||
|
|
|
|||
|
|
@ -28,18 +28,19 @@
|
|||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '关联能力',
|
||||
key: 'business-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '关联能力',
|
||||
key: 'business-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
|
|
@ -68,6 +69,7 @@
|
|||
list.value = []
|
||||
let arr = [
|
||||
'组件视频介绍',
|
||||
'关联能力',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
|
|
@ -117,6 +119,7 @@
|
|||
list.value = []
|
||||
let arr = [
|
||||
'组件视频介绍',
|
||||
'关联能力',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
|
|
|
|||
|
|
@ -115,6 +115,8 @@
|
|||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
||||
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
|
||||
dataFrom.value.content[0].people.value = props.dataList.deptContacts
|
||||
dataFrom.value.content[0].phone.value = props.dataList.deptPhone
|
||||
console.log('dataList', props.dataList)
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
|
|
@ -139,6 +141,8 @@
|
|||
} else {
|
||||
dataFrom.value.content[0].link.value = val.apiUrl
|
||||
dataFrom.value.content[0].facilitator.value = val.deptContacts
|
||||
dataFrom.value.content[0].people.value = val.deptContacts
|
||||
dataFrom.value.content[0].phone.value = val.deptPhone
|
||||
console.log('dataList', val)
|
||||
val.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
|
|
@ -179,11 +183,14 @@
|
|||
// // 打开文档
|
||||
// const id = props.dataList.id
|
||||
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||||
console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '使用手册'
|
||||
)[0]
|
||||
console.log('dataFrom.value.link', obj.attrValue)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(dataFrom.value.link))
|
||||
btoa(encodeURI(obj.attrValue))
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<!-- <a-button type="primary" @click="toView()">
|
||||
<a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button> -->
|
||||
</a-button>
|
||||
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,42 +49,42 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
// import { sgcInsert } from '@/api/home'
|
||||
// import { useRouter } from 'vue-router'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
import { sgcInsert } from '@/api/home'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
// const router = useRouter()
|
||||
const router = useRouter()
|
||||
const applicationArea = ref('')
|
||||
// // 加入申购车
|
||||
// const addShoppingCart = () => {
|
||||
// console.log('加入申购车==================>', props.dataList)
|
||||
// sgcInsert({
|
||||
// delFlag: '0',
|
||||
// resourceId: props.dataList.id,
|
||||
// // userId: userId.value,
|
||||
// }).then((res) => {
|
||||
// console.log(res)
|
||||
// message.success('添加申购车成功！')
|
||||
// mybus.emit('getSgcNum')
|
||||
// })
|
||||
// }
|
||||
// // 立即申请
|
||||
// function toView() {
|
||||
// // window.open(newpage.href, '_blank')
|
||||
// router.push({
|
||||
// path: '/apply',
|
||||
// query: {
|
||||
// name: props.dataList.name,
|
||||
// resourceId: [props.dataList.id],
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
// 加入申购车
|
||||
const addShoppingCart = () => {
|
||||
console.log('加入申购车==================>', props.dataList)
|
||||
sgcInsert({
|
||||
delFlag: '0',
|
||||
resourceId: props.dataList.id,
|
||||
// userId: userId.value,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
message.success('添加申购车成功！')
|
||||
mybus.emit('getSgcNum')
|
||||
})
|
||||
}
|
||||
// 立即申请
|
||||
function toView() {
|
||||
// window.open(newpage.href, '_blank')
|
||||
router.push({
|
||||
path: '/apply',
|
||||
query: {
|
||||
name: props.dataList.name,
|
||||
resourceId: [props.dataList.id],
|
||||
},
|
||||
})
|
||||
}
|
||||
// 收藏
|
||||
const goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
|
|
|
|||
|
|
@ -80,6 +80,16 @@
|
|||
oInput.remove() // 执行浏览器复制命令
|
||||
message.success(name + '成功')
|
||||
}
|
||||
message.config({
|
||||
top: '100px', // 距离顶部的位置
|
||||
})
|
||||
// const success = () => {
|
||||
// message.success({
|
||||
// // content: 'This is a prompt message with custom className and style',
|
||||
// className: 'custom-class',
|
||||
// style: {},
|
||||
// })
|
||||
// }
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
|
|
@ -157,3 +167,8 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.custom-class {
|
||||
/* top: 100px; */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-title">
|
||||
{{ item.contact }}：{{ item.facilitator.values }}
|
||||
<!-- ：{{ item.facilitator.values }} -->
|
||||
{{ item.contact }}
|
||||
</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,17 @@
|
|||
<span>{{ val.resourceName }}</span>
|
||||
<span>{{ val.type }}</span>
|
||||
</div>
|
||||
<div class="description">{{ val.description || '--' }}</div>
|
||||
<div class="description">
|
||||
{{
|
||||
val.description ||
|
||||
(val.note1 &&
|
||||
JSON.parse(val.note1)[0].channelName +
|
||||
'等' +
|
||||
JSON.parse(val.note1).length +
|
||||
'个摄像头') ||
|
||||
'--'
|
||||
}}
|
||||
</div>
|
||||
<div class="remove" @click="removeFunction(val)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -48,7 +58,7 @@
|
|||
//移除方法
|
||||
const removeFunction = (data) => {
|
||||
dataForm.value.map((val) => {
|
||||
val.arr = val.arr.filter((item) => item.resourceId !== data.resourceId)
|
||||
val.arr = val.arr.filter((item) => item.id !== data.id)
|
||||
})
|
||||
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1152,7 +1152,8 @@
|
|||
})
|
||||
mybus.on('changePage', (page) => {
|
||||
paramsGetResources.pageNum = page
|
||||
getAppResources()
|
||||
console.log('changePage', paramsGetResources.pageNum)
|
||||
getAppResources('分页查询')
|
||||
console.log('paramsGetResources', paramsGetResources)
|
||||
})
|
||||
mybus.on('changeSelcted', () => {
|
||||
|
|
@ -1246,11 +1247,11 @@
|
|||
let newQuery = JSON.parse(
|
||||
JSON.stringify(router.currentRoute.value.query)
|
||||
)
|
||||
if (Cardsname.value == name) {
|
||||
Cardsname.value = ''
|
||||
} else {
|
||||
Cardsname.value = name
|
||||
}
|
||||
// if (Cardsname.value == name) {
|
||||
// Cardsname.value = ''
|
||||
// } else {
|
||||
Cardsname.value = name
|
||||
// }
|
||||
console.log(
|
||||
'更改前url中的select=====================>',
|
||||
router.currentRoute.value.query.select
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
<a-select
|
||||
v-model:value="formName.applicationSystem"
|
||||
show-search
|
||||
placeholder="请选择应用系统"
|
||||
placeholder="请输入关键字"
|
||||
style="width: 200px"
|
||||
:options="systemOptions"
|
||||
@focus="handleFocus"
|
||||
|
|
@ -378,88 +378,58 @@
|
|||
}
|
||||
let ids = []
|
||||
formName.system = []
|
||||
console.log('list==================', list.value)
|
||||
list.value.map((val) => {
|
||||
val.arr.map((item) => {
|
||||
formName.system.push({
|
||||
resourceId: item.resourceId,
|
||||
resourceName: item.resourceName,
|
||||
})
|
||||
console.log(item.id)
|
||||
ids.push(item.id)
|
||||
if (item.type !== '基础设施') {
|
||||
formName.system.push({
|
||||
resourceId: item.resourceId,
|
||||
resourceName: item.resourceName,
|
||||
})
|
||||
console.log(item.id)
|
||||
ids.push(item.id)
|
||||
} else {
|
||||
let obj = {}
|
||||
Object.assign(obj, formName)
|
||||
console.log('摄像头===============>', obj, item)
|
||||
obj.system = []
|
||||
item.note1 = JSON.parse(item.note1)
|
||||
item.note1.map((sxt) => {
|
||||
obj.system.push({
|
||||
resourceId: sxt.idtCameraChannel,
|
||||
resourceName: sxt.channelName,
|
||||
cameraId: sxt.channelId,
|
||||
})
|
||||
})
|
||||
submitApply(obj).then((res) => {
|
||||
applySuccess.value = false
|
||||
console.log('摄像头申请================>', res)
|
||||
if (item.id) {
|
||||
sgcDel({ ids: [item.id] }).then((res) => {
|
||||
if (res.data.msg === 'success') {
|
||||
mybus.emit('getSgcNum')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log('提交数据==========================>', formName, ids)
|
||||
submitApply(formName).then((res) => {
|
||||
applySuccess.value = false
|
||||
message.success('操作成功！')
|
||||
console.log('能力申请================>', res)
|
||||
if (ids) {
|
||||
sgcDel({ ids: ids }).then((res) => {
|
||||
if (res.data.msg === 'success') {
|
||||
mybus.emit('getSgcNum')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// if (arr && arr.length !== 0) {
|
||||
// console.log('提交')
|
||||
// const obj = ref({})
|
||||
// for (const key in formName) {
|
||||
// if (key !== 'formNameSystem') {
|
||||
// obj.value[key] = formName[key]
|
||||
// }
|
||||
// }
|
||||
// submitApply(obj.value).then((res) => {
|
||||
// applySuccess.value = false
|
||||
// message.success('操作成功！')
|
||||
// console.log('能力申请================>', res)
|
||||
// if (ids) {
|
||||
// sgcDel({ ids: ids }).then((res) => {
|
||||
// if (res.data.msg === 'success') {
|
||||
// mybus.emit('getSgcNum')
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// lastestPage({
|
||||
// key: dataForm.processDefinitionKey,
|
||||
// })
|
||||
// .then(({ data: res }) => {
|
||||
// if (res.code !== 0) {
|
||||
// return message.error(res.msg)
|
||||
// }
|
||||
// if (!res.data.list || res.data.list.length <= 0) {
|
||||
// return message.error('没有查询到流程，请先设计流程')
|
||||
// }
|
||||
// // proxy.$http['post'](formUrl, rootObj[formName])
|
||||
// tabilityapplication(formName)
|
||||
// .then(({ data: res }) => {
|
||||
// if (res.code !== 0) {
|
||||
// message.error(res.msg)
|
||||
// if (callbacks.formSaveErrorCallback) {
|
||||
// callbacks.formSaveErrorCallback(res)
|
||||
// }
|
||||
// }
|
||||
// if (callbacks.formSaveSuccessCallback) {
|
||||
// callbacks.formSaveSuccessCallback(res)
|
||||
// }
|
||||
// if (!res.data.businessKey) {
|
||||
// return message.error('业务KEY为空，无法启动流程')
|
||||
// // startProcess(dataForm.processDefinitionKey, null, rootObj[formName])
|
||||
// } else {
|
||||
// startProcess(
|
||||
// dataForm.processDefinitionKey,
|
||||
// res.data.businessKey
|
||||
// // rootObj[formName]
|
||||
// )
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {})
|
||||
// })
|
||||
// .catch(() => {})
|
||||
// // })
|
||||
// }
|
||||
if (formName.system.length !== 0) {
|
||||
submitApply(formName).then((res) => {
|
||||
applySuccess.value = false
|
||||
message.success('操作成功！')
|
||||
console.log('能力申请================>', res)
|
||||
if (ids) {
|
||||
sgcDel({ ids: ids }).then((res) => {
|
||||
if (res.data.msg === 'success') {
|
||||
mybus.emit('getSgcNum')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@
|
|||
router.push({
|
||||
path: '/DetailsPageconetent',
|
||||
query: {
|
||||
select: '',
|
||||
select: '组件服务',
|
||||
},
|
||||
})
|
||||
break
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
})
|
||||
break
|
||||
case '后台管理':
|
||||
window.open(window.SITE_CONFIG.backUrl + '/#/bscatalogue-bscatalogue')
|
||||
window.open(window.SITE_CONFIG.backUrl + '/#/login')
|
||||
window.reload('http://15.2.21.238:9797')
|
||||
break
|
||||
case '赋能案例':
|
||||
|
|
|
|||
|
|
@ -157,15 +157,6 @@
|
|||
v-if="item.isCollect == 'true'"
|
||||
@click="addCollect(item)"
|
||||
></span>
|
||||
<a-button
|
||||
style="margin-left: 10px"
|
||||
v-show="
|
||||
cardType == '组件服务' &&
|
||||
findComponentName(item, '智能算法')
|
||||
"
|
||||
>
|
||||
免费试用
|
||||
</a-button>
|
||||
</div>
|
||||
<div
|
||||
class="shopping pk"
|
||||
|
|
@ -183,10 +174,24 @@
|
|||
>
|
||||
查看详情
|
||||
</a-button>
|
||||
<a-button
|
||||
style="margin-left: 10px"
|
||||
v-show="
|
||||
cardType == '组件服务' && findComponentName(item, '智能算法')
|
||||
"
|
||||
>
|
||||
免费试用
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="toView('apply', item)"
|
||||
v-show="cardType !== '数据资源'"
|
||||
v-show="
|
||||
cardType !== '数据资源' &&
|
||||
!(
|
||||
cardType == '组件服务' &&
|
||||
findComponentName(item, '智能算法')
|
||||
)
|
||||
"
|
||||
>
|
||||
{{
|
||||
item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<i class="boundary"></i>
|
||||
<p>
|
||||
已选
|
||||
<span>{{ allClick.length }}</span>
|
||||
<span>{{ selectedRowKeys.length }}</span>
|
||||
个
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,9 @@
|
|||
@change="handleTableChange"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
// onChange: onSelectChange,
|
||||
onSelect: onSelectChange,
|
||||
onSelectAll: onSelectAll,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
|
@ -115,6 +117,7 @@
|
|||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import {
|
||||
getCameraByParentId,
|
||||
|
|
@ -124,6 +127,7 @@
|
|||
import { sgcInsert } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const options = reactive({
|
||||
width: '700px', //播放器宽度
|
||||
height: '400px', //播放器高度
|
||||
|
|
@ -189,6 +193,7 @@
|
|||
})
|
||||
})
|
||||
const selectedList = ref([])
|
||||
const selectedRowKeys = ref([])
|
||||
const tabList = ref([
|
||||
{
|
||||
title: '设施类型',
|
||||
|
|
@ -317,8 +322,35 @@
|
|||
getCamera()
|
||||
}
|
||||
// 一键申请
|
||||
const dept = reactive({})
|
||||
// eslint-disable-next-line no-undef
|
||||
if (infrastructure) {
|
||||
// eslint-disable-next-line no-undef
|
||||
dept.deptId = infrastructure.deptId
|
||||
// eslint-disable-next-line no-undef
|
||||
dept.deptName = infrastructure.deptName
|
||||
}
|
||||
const apply = () => {
|
||||
console.log('一键申请')
|
||||
console.log('一键申请', selectedList.value)
|
||||
let arr = [
|
||||
{
|
||||
arr: [
|
||||
{
|
||||
description: '',
|
||||
note1: JSON.stringify(selectedList.value),
|
||||
resourceId: '1522550195055828996',
|
||||
resourceName: '摄像头列表',
|
||||
type: '基础设施',
|
||||
},
|
||||
],
|
||||
deptId: dept.deptId,
|
||||
deptName: dept.deptName,
|
||||
},
|
||||
]
|
||||
localStorage.setItem('applyList', JSON.stringify(arr))
|
||||
router.push({
|
||||
path: '/apply',
|
||||
})
|
||||
}
|
||||
// 添加至购物车
|
||||
const addShopCar = () => {
|
||||
|
|
@ -367,11 +399,59 @@
|
|||
},
|
||||
])
|
||||
const allClick = ref([])
|
||||
const onSelectChange = (selectedRowKeys, selectedRows) => {
|
||||
console.log('hahhahah', selectedRowKeys, selectedRows)
|
||||
selectedList.value = selectedRows
|
||||
const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
|
||||
console.log('hahhahah', record, selected, selectedRows, nativeEvent)
|
||||
if (selected) {
|
||||
if (selectedRowKeys.value.length == 10) {
|
||||
message.warning('最多只能添加10个摄像头！')
|
||||
} else {
|
||||
selectedList.value.push(record)
|
||||
selectedRowKeys.value.push(record.channelCode)
|
||||
}
|
||||
} else {
|
||||
selectedList.value = selectedList.value.filter(
|
||||
(item) => item.idtCameraChannel !== record.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(record.channelCode),
|
||||
1
|
||||
)
|
||||
}
|
||||
console.log('已选中======================>', selectedList.value)
|
||||
// selectedList.value = selectedRows
|
||||
// allClick.value = selectedRowKeys
|
||||
}
|
||||
const onSelectAll = (selected, selectedRows, changeRows) => {
|
||||
if (selected) {
|
||||
changeRows.map((val) => {
|
||||
selectedList.value.push(val)
|
||||
selectedRowKeys.value.push(val.channelCode)
|
||||
})
|
||||
if (selectedRowKeys.value.length > 10) {
|
||||
message.warning('最多只能添加10个摄像头！')
|
||||
changeRows.map((val) => {
|
||||
selectedList.value = selectedList.value.filter(
|
||||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(val.channelCode),
|
||||
1
|
||||
)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
changeRows.map((val) => {
|
||||
selectedList.value = selectedList.value.filter(
|
||||
(item) => item.idtCameraChannel !== val.idtCameraChannel
|
||||
)
|
||||
selectedRowKeys.value.splice(
|
||||
selectedRowKeys.value.indexOf(val.channelCode),
|
||||
1
|
||||
)
|
||||
})
|
||||
}
|
||||
console.log('heiheiheiehiehei', selected, selectedRows, changeRows)
|
||||
}
|
||||
const handleTableChange = (val) => {
|
||||
pagination.value.current = val.current
|
||||
pagination.value.pageSize = val.pageSize
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:55:07
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-22 12:20:59
|
||||
* @LastEditTime: 2022-06-30 18:18:57
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<template #title>
|
||||
<div class="left">
|
||||
<div class="left" @click="read(item)">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
||||
|
|
@ -209,28 +209,44 @@
|
|||
path: url,
|
||||
})
|
||||
}
|
||||
const read = () => {
|
||||
const read = (item) => {
|
||||
// console.log(item)
|
||||
if (selectData.value.length === 0) {
|
||||
message.error('未选择消息！')
|
||||
return
|
||||
}
|
||||
console.log(selectData.value)
|
||||
let str = ''
|
||||
selectData.value.forEach((val, index) => {
|
||||
str += val
|
||||
if (index < selectData.value.length - 1) {
|
||||
str += ';'
|
||||
}
|
||||
})
|
||||
mynoticeRead(str).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('操作成功！')
|
||||
mybus.emit('getMynotice')
|
||||
init()
|
||||
} else {
|
||||
message.error('操作失败！')
|
||||
}
|
||||
})
|
||||
// let str = ''
|
||||
// selectData.value.forEach((val, index) => {
|
||||
// str += val
|
||||
// if (index < selectData.value.length - 1) {
|
||||
// str += ';'
|
||||
// }
|
||||
// })
|
||||
if (item) {
|
||||
mynoticeRead(item.id).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('操作成功！')
|
||||
mybus.emit('getMynotice')
|
||||
init()
|
||||
} else {
|
||||
message.error('操作失败！')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('提交')
|
||||
selectData.value.map((val) => {
|
||||
mynoticeRead(val).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
// message.success('操作成功！')
|
||||
mybus.emit('getMynotice')
|
||||
init()
|
||||
} else {
|
||||
message.error('操作失败！')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const init = () => {
|
||||
// from 通知 评论 readStatus 0 未读 1 已读
|
||||
|
|
|
|||
|
|
@ -38,10 +38,9 @@
|
|||
class="name"
|
||||
v-for="(item, index) in jcList"
|
||||
:key="item.id"
|
||||
:class="index == 4 ? 'name-last' : ''"
|
||||
@click="selectOne(item.id)"
|
||||
:class="index == 2 ? 'name-last' : ''"
|
||||
>
|
||||
{{ index + 1 }}-{{ item.name }}
|
||||
{{ item.name + '-' + item.num + '项' }}
|
||||
</div>
|
||||
<div class="btn" @click="jumpPage('基础设施')">查看更多</div>
|
||||
</div>
|
||||
|
|
@ -76,7 +75,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { pageWithAttrs, getDataResource } from '@/api/home.js'
|
||||
import {
|
||||
pageWithAttrs,
|
||||
getDataResource,
|
||||
selectInfrastructureList,
|
||||
} from '@/api/home.js'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
|
|
@ -157,24 +160,36 @@
|
|||
})
|
||||
} else {
|
||||
let type = paramsGetResources.type
|
||||
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
|
||||
}
|
||||
})
|
||||
if (type == '基础设施') {
|
||||
selectInfrastructureList().then((res) => {
|
||||
console.log('基础设施==========>', res.data.data)
|
||||
for (const key in res.data.data) {
|
||||
jcList.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
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const assignmentMethod = (type, res) => {
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
'数据资源',
|
||||
'知识库',
|
||||
])
|
||||
const select = ref('')
|
||||
const select = ref('组件服务')
|
||||
let applicationDataList = ref([])
|
||||
let technosphereDataList = ref([])
|
||||
const fabubumen = ref([
|
||||
|
|
@ -219,11 +219,11 @@
|
|||
appLiCation: '',
|
||||
})
|
||||
const changeCard = (name) => {
|
||||
if (select.value == name) {
|
||||
select.value = ''
|
||||
} else {
|
||||
select.value = name
|
||||
}
|
||||
// if (select.value == name) {
|
||||
// select.value = ''
|
||||
// } else {
|
||||
select.value = name
|
||||
// }
|
||||
snum.value.select = select.value
|
||||
}
|
||||
function selectCard(value) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
>
|
||||
<span
|
||||
class="img"
|
||||
:class="sel == '访问量' ? 'fwl' : sel == '申购量' ? 'sgl' : 'scl'"
|
||||
:class="sel == '浏览量' ? 'fwl' : sel == '申购量' ? 'sgl' : 'scl'"
|
||||
></span>
|
||||
<span class="text">{{ sel }}</span>
|
||||
</div>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="img" :class="item.imgType"></div>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="fw" v-if="select == '访问量'">
|
||||
<div class="fw" v-if="select == '浏览量'">
|
||||
{{ select }}:{{ item.visits }}
|
||||
</div>
|
||||
<div class="fw" v-if="select == '申购量'">
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
import { useStore } from 'vuex'
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const select = ref('访问量')
|
||||
const selList = ref(['访问量', '申购量', '收藏量'])
|
||||
const select = ref('浏览量')
|
||||
const selList = ref(['浏览量', '申购量', '收藏量'])
|
||||
const list = ref([])
|
||||
|
||||
const paramsGetResources = {
|
||||
|
|
@ -74,13 +74,13 @@
|
|||
type: '',
|
||||
name: '',
|
||||
infoList: [],
|
||||
orderField: 'visits', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||
orderField: 'visits', // total 综合 visits 浏览量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||||
}
|
||||
const selectChange = (sel) => {
|
||||
select.value = sel
|
||||
switch (select.value) {
|
||||
case '访问量':
|
||||
case '浏览量':
|
||||
paramsGetResources.orderField = 'visits'
|
||||
break
|
||||
case '申购量':
|
||||
|
|
|
|||
|
|
@ -146,9 +146,9 @@
|
|||
'智能算法',
|
||||
'图层服务',
|
||||
'开发组件',
|
||||
'办公组件',
|
||||
// '办公组件',
|
||||
'业务组件',
|
||||
'其他',
|
||||
// '其他',
|
||||
])
|
||||
const visible = ref(false)
|
||||
const showModal = () => {
|
||||
|
|
|
|||
|
|
@ -318,9 +318,9 @@
|
|||
'智能算法',
|
||||
'图层服务',
|
||||
'开发组件',
|
||||
'办公组件',
|
||||
// '办公组件',
|
||||
'业务组件',
|
||||
'其他',
|
||||
// '其他',
|
||||
])
|
||||
let tabname = ref('组件服务')
|
||||
function tabqiehuan(item, index) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<div @click="reverseSelection" class="reverseSelection">反选</div>
|
||||
<!-- <div @click="reverseSelection" class="reverseSelection">反选</div> -->
|
||||
<p>
|
||||
已选：
|
||||
<span class="num">{{ checkedListAbility.length || 0 }}</span>
|
||||
|
|
@ -108,9 +108,7 @@
|
|||
>
|
||||
<template #title>
|
||||
<span
|
||||
@click="
|
||||
showItem(item.resourceId, item.type, item.delFlag)
|
||||
"
|
||||
@click="showItem(item.id, item.type, item.delFlag)"
|
||||
style="cursor: pointer"
|
||||
class="name"
|
||||
>
|
||||
|
|
@ -241,7 +239,7 @@
|
|||
list.value.forEach((val) => {
|
||||
if (checkedList.value.indexOf(val.deptId) !== -1) {
|
||||
if (val.delFlag == 0) {
|
||||
scArr.push({ resourceId: val.resourceId })
|
||||
scArr.push({ id: val.id })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -267,9 +265,9 @@
|
|||
}
|
||||
if (val.children.length > 0) {
|
||||
val.children.map((item) => {
|
||||
if (checkedListAbility.value.indexOf(item.resourceId) == -1) {
|
||||
checkedListAbility.value.push(item.resourceId)
|
||||
val.checkedList.push(item.resourceId)
|
||||
if (checkedListAbility.value.indexOf(item.id) == -1) {
|
||||
checkedListAbility.value.push(item.id)
|
||||
val.checkedList.push(item.id)
|
||||
checkNum.value++
|
||||
}
|
||||
item.checked = true
|
||||
|
|
@ -301,13 +299,13 @@
|
|||
if (val.children.length > 0) {
|
||||
val.children.map((item) => {
|
||||
// console.log('child=============>', checkedListAbility.value, item)
|
||||
if (checkedListAbility.value.indexOf(item.resourceId) > -1) {
|
||||
if (checkedListAbility.value.indexOf(item.id) > -1) {
|
||||
item.checked = false
|
||||
checkedListAbility.value.splice(
|
||||
checkedListAbility.value.indexOf(item.resourceId),
|
||||
checkedListAbility.value.indexOf(item.id),
|
||||
1
|
||||
)
|
||||
val.checkedList.splice(val.checkedList.indexOf(item.resourceId), 1)
|
||||
val.checkedList.splice(val.checkedList.indexOf(item.id), 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -347,8 +345,8 @@
|
|||
if (val.children.length > 0) {
|
||||
val.children.map((item) => {
|
||||
item.checked = true
|
||||
checkedListAbility.value.push(item.resourceId)
|
||||
val.checkedList.push(item.resourceId)
|
||||
checkedListAbility.value.push(item.id)
|
||||
val.checkedList.push(item.id)
|
||||
})
|
||||
}
|
||||
arr.push(val.deptId)
|
||||
|
|
@ -446,23 +444,23 @@
|
|||
item.checkAll == true ||
|
||||
checkedList.value.indexOf(item.deptId) > -1
|
||||
) {
|
||||
if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
|
||||
checkedListAbility.value.push(val.resourceId)
|
||||
item.checkedList.push(val.resourceId)
|
||||
if (checkedListAbility.value.indexOf(val.id) == -1) {
|
||||
checkedListAbility.value.push(val.id)
|
||||
item.checkedList.push(val.id)
|
||||
}
|
||||
val.checked = true
|
||||
checkNum.value++
|
||||
} else if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
|
||||
} else if (checkedListAbility.value.indexOf(val.id) == -1) {
|
||||
val.checked = false
|
||||
}
|
||||
} else {
|
||||
// console.log(
|
||||
// '第二次加载++++++++++++++',
|
||||
// checkedListAbility.value,
|
||||
// val.resourceId
|
||||
// val.id
|
||||
// )
|
||||
if (
|
||||
checkedListAbility.value.indexOf(val.resourceId) > -1 ||
|
||||
checkedListAbility.value.indexOf(val.id) > -1 ||
|
||||
(item.load < Number(item.pageNum) &&
|
||||
checkedListAll.value.indexOf(item.deptId) > -1)
|
||||
) {
|
||||
|
|
@ -515,9 +513,9 @@
|
|||
if (item.checked) {
|
||||
if (item.children.length > 0) {
|
||||
item.children.map((val) => {
|
||||
if (checkedListAbility.value.indexOf(val.resourceId) == -1) {
|
||||
checkedListAbility.value.push(val.resourceId)
|
||||
item.checkedList.push(val.resourceId)
|
||||
if (checkedListAbility.value.indexOf(val.id) == -1) {
|
||||
checkedListAbility.value.push(val.id)
|
||||
item.checkedList.push(val.id)
|
||||
}
|
||||
val.checked = true
|
||||
})
|
||||
|
|
@ -535,12 +533,12 @@
|
|||
} else {
|
||||
if (item.children.length > 0) {
|
||||
item.children.map((val) => {
|
||||
if (checkedListAbility.value.indexOf(val.resourceId) > -1) {
|
||||
if (checkedListAbility.value.indexOf(val.id) > -1) {
|
||||
checkedListAbility.value.splice(
|
||||
checkedListAbility.value.indexOf(val.resourceId),
|
||||
checkedListAbility.value.indexOf(val.id),
|
||||
1
|
||||
)
|
||||
item.checkedList.splice(item.checkedList.indexOf(val.resourceId), 1)
|
||||
item.checkedList.splice(item.checkedList.indexOf(val.id), 1)
|
||||
val.checked = false
|
||||
}
|
||||
})
|
||||
|
|
@ -579,7 +577,7 @@
|
|||
} else {
|
||||
let all = true
|
||||
item.children.map((child) => {
|
||||
if (checkedListAbility.value.indexOf(child.resourceId) == -1) {
|
||||
if (checkedListAbility.value.indexOf(child.id) == -1) {
|
||||
all = false
|
||||
}
|
||||
})
|
||||
|
|
@ -596,17 +594,17 @@
|
|||
item.checked = !item.checked
|
||||
if (item.checked) {
|
||||
checkNum.value++
|
||||
if (checkedListAbility.value.indexOf(item.resourceId) == -1) {
|
||||
checkedListAbility.value.push(item.resourceId)
|
||||
val.checkedList.push(item.resourceId)
|
||||
if (checkedListAbility.value.indexOf(item.id) == -1) {
|
||||
checkedListAbility.value.push(item.id)
|
||||
val.checkedList.push(item.id)
|
||||
}
|
||||
} else {
|
||||
checkNum.value--
|
||||
checkedListAbility.value.splice(
|
||||
checkedListAbility.value.indexOf(item.resourceId),
|
||||
checkedListAbility.value.indexOf(item.id),
|
||||
1
|
||||
)
|
||||
val.checkedList.splice(val.checkedList.indexOf(item.resourceId), 1)
|
||||
val.checkedList.splice(val.checkedList.indexOf(item.id), 1)
|
||||
}
|
||||
// console.log('判断是否全选===============>', val, checkedListAll.value)
|
||||
if (val.checkedList.length == val.count) {
|
||||
|
|
@ -681,7 +679,7 @@
|
|||
let arr = []
|
||||
list.value.map((val) => {
|
||||
val.arr = val.children.filter(
|
||||
(item) => checkedListAbility.value.indexOf(item.resourceId) > -1
|
||||
(item) => checkedListAbility.value.indexOf(item.id) > -1
|
||||
)
|
||||
})
|
||||
arr = list.value.filter((val) => val.arr.length !== 0)
|
||||
|
|
|
|||
Loading…
Reference in New Issue