Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
02639e6696
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<span class='title-style'>应用资源</span>
|
<div>
|
||||||
<span class='page-introduction'>发布情况统计</span>
|
<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-body'>
|
||||||
<div class='container-body1'>
|
<div class='container-body1'>
|
||||||
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
|
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
|
||||||
|
|
@ -57,31 +61,215 @@
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props:{
|
||||||
|
tableId:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
fatherId:{
|
||||||
|
type:Number,
|
||||||
|
default:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
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)',],
|
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'],
|
widthList:['90px','80px','70px','60px','50px'],
|
||||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
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(){
|
mounted(){
|
||||||
|
|
||||||
this.myEcharts1()
|
this.myEcharts1()
|
||||||
this.myEcharts2()
|
// this.myEcharts2()
|
||||||
this.myEcharts3()
|
// this.myEcharts3()
|
||||||
this.myEcharts4()
|
// this.myEcharts4()
|
||||||
this.myEcharts6()
|
// this.myEcharts6()
|
||||||
this.myEcharts7()
|
// this.myEcharts7()
|
||||||
this.myEcharts8()
|
// this.myEcharts8()
|
||||||
this.myEcharts9()
|
// this.myEcharts9()
|
||||||
},
|
},
|
||||||
methods:{
|
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(){
|
myEcharts1(){
|
||||||
var chartDom = document.getElementById('main1');
|
var chartDom = document.getElementById('main1');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
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: {
|
grid: {
|
||||||
bottom: '23%',
|
bottom: '23%',
|
||||||
},
|
},
|
||||||
|
|
@ -231,12 +419,7 @@ export default {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data:this.data2
|
||||||
{ value: 1048, name: '算法' },
|
|
||||||
{ value: 735, name: '图层' },
|
|
||||||
{ value: 580, name: '开发' },
|
|
||||||
{ value: 484, name: '业务' },
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
@ -248,12 +431,29 @@ export default {
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
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: {
|
grid: {
|
||||||
bottom: '23%',
|
bottom: '23%',
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['算法', '图层', '开发', '业务'],
|
data:this.data3,
|
||||||
|
fontSize:12,
|
||||||
color:['#f5f5f5'],
|
color:['#f5f5f5'],
|
||||||
axisTick:{
|
axisTick:{
|
||||||
show:false,//不显示坐标轴刻度线
|
show:false,//不显示坐标轴刻度线
|
||||||
|
|
@ -268,8 +468,17 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {//x轴文字的配置
|
axisLabel: {//x轴文字的配置
|
||||||
|
formatter: val => {
|
||||||
|
let txt = val
|
||||||
|
if (val.length > 3) {
|
||||||
|
txt = val.substr(0, 3) + '...'
|
||||||
|
}
|
||||||
|
return txt
|
||||||
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#999999",//x轴内容文字颜色
|
color: "#999999",//x轴内容文字颜色
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -300,7 +509,7 @@ export default {
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [5, 5, 5, 5],
|
data: [1, 1, 1, 1, 1, 1],
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
stack: '1',
|
stack: '1',
|
||||||
|
|
@ -314,7 +523,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [60, 90, 50, 80],
|
data: this.data4,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
stack: '1',
|
stack: '1',
|
||||||
|
|
@ -343,7 +552,7 @@ export default {
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
|
data:this.data6,
|
||||||
color:['#f5f5f5'],
|
color:['#f5f5f5'],
|
||||||
axisTick: { // 坐标轴 刻度
|
axisTick: { // 坐标轴 刻度
|
||||||
show: false, // 是否显示
|
show: false, // 是否显示
|
||||||
|
|
@ -404,7 +613,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: [60, 90, 50, 80, 50, 80],
|
data:this.data5,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
stack: '1',
|
stack: '1',
|
||||||
|
|
@ -486,13 +695,7 @@ export default {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data:this.data8
|
||||||
{ value: 1048, name: '1分' },
|
|
||||||
{ value: 735, name: '2分' },
|
|
||||||
{ value: 580, name: '3分' },
|
|
||||||
{ value: 484, name: '4分' },
|
|
||||||
{ value: 300, name: '5分' }
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
@ -564,175 +767,197 @@ export default {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data:this.data7
|
||||||
{ value: 1048, name: '应用名称1' },
|
// [
|
||||||
{ value: 735, name: '应用名称2' },
|
// { value: 1048, name: '应用名称1' },
|
||||||
{ value: 580, name: '应用名称3' },
|
// { value: 735, name: '应用名称2' },
|
||||||
{ value: 484, name: '应用名称4' },
|
// { value: 580, name: '应用名称3' },
|
||||||
{ value: 300, name: '应用名称5' }
|
// { value: 484, name: '应用名称4' },
|
||||||
]
|
// { value: 300, name: '应用名称5' }
|
||||||
|
// ]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
myEcharts8(){
|
myEcharts8(){
|
||||||
var chartDom = document.getElementById('main8');
|
var chartDom = document.getElementById('main8');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
option = {
|
option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: '',
|
orient: "vertical", type: 'scroll',
|
||||||
top: '14%',
|
top: '14%',
|
||||||
left: '40%',
|
left: '40%',
|
||||||
width:"auto",
|
width:"auto",
|
||||||
height:"auto",
|
height:"auto",
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
itemGap: 15,
|
itemGap: 15,
|
||||||
itemWidth: 14,
|
itemWidth: 14,
|
||||||
// 使用回调函数
|
// 使用回调函数
|
||||||
formatter: function(name) {
|
formatter: function(name) {
|
||||||
var data = option.series[0].data;
|
var data = option.series[0].data;
|
||||||
var total = 0;
|
var total = 0;
|
||||||
var tarValue;
|
var tarValue;
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
total += data[i].value;
|
total += data[i].value;
|
||||||
if (data[i].name == name) {
|
if (data[i].name == name) {
|
||||||
tarValue = data[i].value;
|
tarValue = data[i].value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var v = tarValue;
|
var v = tarValue;
|
||||||
var p = Math.round(((tarValue / total) * 100));
|
var p = Math.round(((tarValue / total) * 100));
|
||||||
return `${name} ${p}%`;
|
return `{a|${name}} {b|${p}%}`;
|
||||||
},
|
},
|
||||||
itemStyle:{},
|
itemStyle:{},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#666666",
|
color: "#666666",
|
||||||
fontSize:12,
|
fontSize:12,
|
||||||
padding:[0,8,0,10]
|
rich: {
|
||||||
},
|
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||||
},
|
a: {
|
||||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
// 设置文字、数学、英语这一列的样式
|
||||||
series: [
|
width: 80,
|
||||||
{
|
color: "#000000",
|
||||||
type: 'pie',
|
fontSize: 12,
|
||||||
radius: ['30%', '45%'],
|
fontWeight: "bolder",
|
||||||
center:['19%', '50%'],
|
},
|
||||||
avoidLabelOverlap: false,
|
b: {
|
||||||
itemStyle: {
|
// 设置10分、20分、30分这一列的样式
|
||||||
borderRadius: 10,
|
width: 35,
|
||||||
borderColor: '#fff',
|
color: "#333",
|
||||||
borderWidth: 2
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
label: {
|
},
|
||||||
show: false,
|
padding:[0,8,0,10]
|
||||||
position: 'center'
|
},
|
||||||
},
|
},
|
||||||
// emphasis: {
|
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||||
// label: {
|
series: [
|
||||||
// show: true,
|
{
|
||||||
// fontSize: '40',
|
type: 'pie',
|
||||||
// fontWeight: 'bold'
|
radius: ['30%', '45%'],
|
||||||
// }
|
center:['19%', '50%'],
|
||||||
// },
|
avoidLabelOverlap: false,
|
||||||
labelLine: {
|
itemStyle: {
|
||||||
show: false
|
borderRadius: 10,
|
||||||
},
|
borderColor: '#fff',
|
||||||
data: [
|
borderWidth: 2
|
||||||
{ value: 1048, name: '应用领域1' },
|
},
|
||||||
{ value: 735, name: '应用领域2' },
|
label: {
|
||||||
{ value: 580, name: '应用领域3' },
|
show: false,
|
||||||
{ value: 484, name: '应用领域4' },
|
position: 'center'
|
||||||
{ value: 300, name: '应用领域5' }
|
},
|
||||||
]
|
// 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);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
myEcharts9(){
|
myEcharts9(){
|
||||||
var chartDom = document.getElementById('main9');
|
var chartDom = document.getElementById('main9');
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
option = {
|
option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: '',
|
orient: '',
|
||||||
top: '14%',
|
top: '14%',
|
||||||
left: '47%',
|
left: '47%',
|
||||||
width:"auto",
|
width:"auto",
|
||||||
height:"auto",
|
height:"auto",
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
itemGap: 15,
|
itemGap: 15,
|
||||||
itemWidth: 14,
|
itemWidth: 14,
|
||||||
// 使用回调函数
|
// 使用回调函数
|
||||||
formatter: function(name) {
|
formatter: function(name) {
|
||||||
var data = option.series[0].data;
|
var data = option.series[0].data;
|
||||||
var total = 0;
|
var total = 0;
|
||||||
var tarValue;
|
var tarValue;
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
total += data[i].value;
|
total += data[i].value;
|
||||||
if (data[i].name == name) {
|
if (data[i].name == name) {
|
||||||
tarValue = data[i].value;
|
tarValue = data[i].value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var v = tarValue;
|
var v = tarValue;
|
||||||
var p = Math.round(((tarValue / total) * 100));
|
var p = Math.round(((tarValue / total) * 100));
|
||||||
return `${name} ${p}%`;
|
return `${name} ${p}%`;
|
||||||
},
|
},
|
||||||
itemStyle:{},
|
itemStyle:{},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#666666",
|
color: "#666666",
|
||||||
fontSize:12,
|
fontSize:12,
|
||||||
padding:[0,8,0,10]
|
padding:[0,8,0,10]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['30%', '45%'],
|
radius: ['30%', '45%'],
|
||||||
center:['22%', '50%'],
|
center:['22%', '50%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
borderColor: '#fff',
|
borderColor: '#fff',
|
||||||
borderWidth: 2
|
borderWidth: 2
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: 'center'
|
||||||
},
|
},
|
||||||
// emphasis: {
|
// emphasis: {
|
||||||
// label: {
|
// label: {
|
||||||
// show: true,
|
// show: true,
|
||||||
// fontSize: '40',
|
// fontSize: '40',
|
||||||
// fontWeight: 'bold'
|
// fontWeight: 'bold'
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data:this.data10
|
||||||
{ value: 1048, name: '应用状态1' },
|
// [
|
||||||
{ value: 735, name: '应用状态2' },
|
// { value: 1048, name: '应用状态1' },
|
||||||
{ value: 580, name: '应用状态3' },
|
// { value: 735, name: '应用状态2' },
|
||||||
{ value: 484, name: '应用状态4' },
|
// { value: 580, name: '应用状态3' },
|
||||||
{ value: 300, name: '应用状态5' }
|
// { value: 484, name: '应用状态4' },
|
||||||
]
|
// { value: 300, name: '应用状态5' }
|
||||||
}
|
// ]
|
||||||
]
|
}
|
||||||
};
|
]
|
||||||
|
};
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option);
|
||||||
},
|
},
|
||||||
|
backBtn(){
|
||||||
|
this.$emit('closeApplication')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -740,6 +965,8 @@ export default {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.container{
|
.container{
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.title-style{
|
.title-style{
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
@ -750,6 +977,13 @@ export default {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color:#666666;
|
color:#666666;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.back-btn{
|
||||||
|
background: #3e8ef7;
|
||||||
|
border-color: rgba(101, 165, 249,0);
|
||||||
|
color: #FFF;
|
||||||
|
margin-left:1030px;
|
||||||
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
.container-body{
|
.container-body{
|
||||||
width:1300px;
|
width:1300px;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<span class='title-style'>组件服务</span>
|
<div>
|
||||||
<span class='page-introduction'>发布情况统计</span>
|
<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-body'>
|
||||||
<div class='container-body1'>
|
<div class='container-body1'>
|
||||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
<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>
|
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class='num-style'>{{item.name}}</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,7 +45,7 @@
|
||||||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class='num-style'>{{item.name}}</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,258 +61,383 @@
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props:{
|
||||||
|
tableId:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
fatherId:{
|
||||||
|
type:Number,
|
||||||
|
default:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
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)',],
|
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'],
|
widthList:['90px','80px','70px','60px','50px'],
|
||||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||||
usedList:[{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:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count: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(){
|
mounted(){
|
||||||
this.myEcharts1()
|
|
||||||
this.myEcharts2()
|
|
||||||
this.myEcharts3()
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
myEcharts1(){
|
// 评分发布情况
|
||||||
var chartDom = document.getElementById('main1');
|
getScoreList () {
|
||||||
var myChart = echarts.init(chartDom);
|
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
|
||||||
var option;
|
params : {
|
||||||
option = {
|
id:this.tableId,
|
||||||
tooltip: {
|
resourceType:"应用资源"
|
||||||
trigger: 'item'
|
// pageNo: pageNo || 1,
|
||||||
},
|
// pageSize: 20
|
||||||
legend: {
|
}
|
||||||
orient: '',
|
}).then(res => {
|
||||||
top: '14%',
|
let arry=[]
|
||||||
left: '55%',
|
arry=res.data.data
|
||||||
width:"auto",
|
arry.forEach((item)=>{
|
||||||
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
|
|
||||||
},
|
|
||||||
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);
|
const single={
|
||||||
},
|
value:item.scoreNum,
|
||||||
myEcharts2(){
|
name:item.score
|
||||||
var chartDom = document.getElementById('main2');
|
}
|
||||||
var myChart = echarts.init(chartDom);
|
// const newList=[]
|
||||||
var option;
|
this.data1.push(single)
|
||||||
option = {
|
// this.data2=newList
|
||||||
tooltip: {
|
this.myEcharts1()
|
||||||
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
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
// emphasis: {
|
|
||||||
// label: {
|
|
||||||
// show: true,
|
|
||||||
// fontSize: '40',
|
|
||||||
// fontWeight: 'bold'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 1048, name: '算法' },
|
|
||||||
{ value: 735, name: '图层' },
|
|
||||||
{ value: 580, name: '开发' },
|
|
||||||
{ value: 484, name: '业务' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
},
|
},
|
||||||
myEcharts3(){
|
// 算法图层开发业务
|
||||||
var chartDom = document.getElementById('main3');
|
getAlgorithm () {
|
||||||
var myChart = echarts.init(chartDom);
|
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
|
||||||
var option;
|
params : {
|
||||||
option = {
|
id:this.tableId,
|
||||||
tooltip: {
|
resourceType:"组件服务"
|
||||||
trigger: 'item'
|
// pageNo: pageNo || 1,
|
||||||
},
|
// pageSize: 20
|
||||||
legend: {
|
}
|
||||||
orient: '',
|
}).then(res => {
|
||||||
top: '22%',
|
let arry=[]
|
||||||
left: '50%',
|
arry=res.data.data
|
||||||
width:"auto",
|
arry.forEach((item)=>{
|
||||||
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
|
|
||||||
},
|
|
||||||
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' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
const single={
|
||||||
}
|
value:item.nums,
|
||||||
|
name:item.attr_value
|
||||||
|
}
|
||||||
|
// const newList=[]
|
||||||
|
this.data2.push(single)
|
||||||
|
// this.data2=newList
|
||||||
|
this.myEcharts2()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 应用领域分布
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 被调用组件及数量
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: this.data2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
myEcharts3(){
|
||||||
|
var chartDom = document.getElementById('main3');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
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]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
backBtn(){
|
||||||
|
this.$emit('closeChild')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.container{
|
.container{
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.title-style{
|
.title-style{
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|
@ -320,6 +449,13 @@ export default {
|
||||||
color:#666666;
|
color:#666666;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
.back-btn{
|
||||||
|
background: #3e8ef7;
|
||||||
|
border-color: rgba(101, 165, 249,0);
|
||||||
|
color: #FFF;
|
||||||
|
margin-left:1030px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
.container-body{
|
.container-body{
|
||||||
width:1300px;
|
width:1300px;
|
||||||
margin-top:30px;
|
margin-top:30px;
|
||||||
|
|
@ -358,7 +494,9 @@ export default {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-right: 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{
|
.container-body5{
|
||||||
width:640px;
|
width:640px;
|
||||||
|
|
@ -367,6 +505,9 @@ export default {
|
||||||
padding-top:20px;
|
padding-top:20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.footer{
|
.footer{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,557 @@
|
||||||
|
<template>
|
||||||
|
<div class='container'>
|
||||||
|
<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>
|
||||||
|
<div id="main1" style="width: 400px;height:200px;"></div>
|
||||||
|
</div> -->
|
||||||
|
<div class='container-body2'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>使用组件数量分布</span>
|
||||||
|
<div id="main2" style="width: 400px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body3'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
|
||||||
|
<div id="main8" style="width: 400px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body4'>
|
||||||
|
<div style='margin-bottom:30px'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item,index) in usedList" :key='index' >
|
||||||
|
<div style='display:flex'>
|
||||||
|
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||||||
|
<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.resourceCarNum}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body5'>
|
||||||
|
<div style='margin-bottom:30px'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item,index) in applicationList" :key='index' >
|
||||||
|
<div style='display:flex'>
|
||||||
|
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||||||
|
<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.resourceCarNum}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='footer'>
|
||||||
|
<div class='footer-left' ></div>
|
||||||
|
<span style='color:#b7c2d1;font-size:16px'>到底啦</span>
|
||||||
|
<div class='footer-right'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
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:'组件名称一',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(){
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 评分发布情况
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 算法图层开发业务
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 应用领域分布
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 被调用组件及数量
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: this.data2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
},
|
||||||
|
myEcharts3(){
|
||||||
|
var chartDom = document.getElementById('main3');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option;
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
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]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
backBtn(){
|
||||||
|
this.$emit('closeChild')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container{
|
||||||
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.title-style{
|
||||||
|
font-size: 24px;
|
||||||
|
color:#000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.page-introduction{
|
||||||
|
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;
|
||||||
|
margin-top:30px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap
|
||||||
|
}
|
||||||
|
.container-body1{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container-body2{
|
||||||
|
width:640px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body3{
|
||||||
|
width:640px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body4{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.container-body5{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
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;
|
||||||
|
margin-top:50px;
|
||||||
|
margin-left:365px;
|
||||||
|
}
|
||||||
|
.footer-left{
|
||||||
|
width:250px;
|
||||||
|
height:1px;
|
||||||
|
background-color:#e0eaf8;
|
||||||
|
margin-right:10px;
|
||||||
|
margin-top:8px
|
||||||
|
}
|
||||||
|
.footer-right{
|
||||||
|
width:250px;
|
||||||
|
height:1px;
|
||||||
|
background-color:#e0eaf8;
|
||||||
|
margin-left:10px;
|
||||||
|
margin-top:8px
|
||||||
|
}
|
||||||
|
.ranking-img{
|
||||||
|
width:60px;
|
||||||
|
height:26px;
|
||||||
|
display: flex;
|
||||||
|
line-height: 26px;
|
||||||
|
margin-bottom:15px;
|
||||||
|
margin-right:10px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
.num-style{
|
||||||
|
position:absolute;
|
||||||
|
display: flex;
|
||||||
|
margin-left:90px;
|
||||||
|
margin-top:5px;
|
||||||
|
color:#333333;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.count-style{
|
||||||
|
position:absolute;
|
||||||
|
display: flex;
|
||||||
|
margin-left:400px;
|
||||||
|
margin-top:5px;
|
||||||
|
color:#333333;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class='container'>
|
<div >
|
||||||
<div class='container-left'>
|
<div class='container'>
|
||||||
|
<!-- <div class='container-left' v-if='homeIsShow'>
|
||||||
<div class='left-search'>
|
<div class='left-search'>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
|
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
|
||||||
|
|
@ -20,7 +21,7 @@
|
||||||
{{ node.label }}
|
{{ node.label }}
|
||||||
</span>
|
</span>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</div>
|
</div> -->
|
||||||
<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'>
|
||||||
|
|
@ -35,57 +36,57 @@
|
||||||
<span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
|
<span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
|
||||||
部门发布情况
|
部门发布情况
|
||||||
</span>
|
</span>
|
||||||
<span :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
<span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
||||||
部门使用情况
|
部门使用情况
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='line-style'></div>
|
<div class='line-style'></div>
|
||||||
<el-table
|
<el-table
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
border
|
border
|
||||||
style="width: 100%">
|
style="width: 100%">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="name"
|
prop="deptName"
|
||||||
label="部门名称"
|
label="部门名称"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="releaseNum"
|
prop="resourceNum"
|
||||||
label="发布总数"
|
label="发布总数"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column v-if="this.choseId===0"
|
||||||
prop="applyNum"
|
prop="resourceCarNum"
|
||||||
label="被申请总数"
|
label="被申请总数"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="browseNmu"
|
prop="resourceBrowseNum"
|
||||||
label="浏览总量"
|
label="浏览总量"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="collectNum"
|
prop="resourceCollectionNum"
|
||||||
label="收藏量"
|
label="收藏量"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column v-if="this.choseId===0"
|
||||||
prop="transferNum"
|
prop="resourceVisits"
|
||||||
label="被调用总数"
|
label="被调用总数"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column v-if="this.choseId===0"
|
||||||
prop="applicationNum"
|
prop="resourceRelNum"
|
||||||
label="被应用总数"
|
label="被应用总数"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column v-if="this.choseId===0"
|
||||||
prop="needApplicationNum"
|
prop="resourceShareNum"
|
||||||
label="需申请数量"
|
label="需申请数量"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column v-if="this.choseId===0"
|
||||||
prop="reductionNum"
|
prop="resourceShareNonNum"
|
||||||
label="免批数量"
|
label="免批数量"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
@ -99,28 +100,34 @@
|
||||||
</el-table>
|
</el-table>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
||||||
@current-change="getALLTree"
|
|
||||||
:current-page="currentPage4"
|
|
||||||
:page-sizes="[10, 20, 30, 40]"
|
|
||||||
layout="total, prev, pager, next, jumper"
|
layout="total, prev, pager, next, jumper"
|
||||||
:total="50">
|
:total="total"
|
||||||
|
:page-size="5"
|
||||||
|
:current-page="currentPage"
|
||||||
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<component-services v-if='servicesIsShow' ></component-services>
|
</div>
|
||||||
<application-resources v-if='resourcesIsShow'></application-resources>
|
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import componentServices from './componentServices.vue'
|
import componentServices from './componentServices.vue'
|
||||||
|
import componentUsed from './componentUsed.vue'
|
||||||
import applicationResources from './applicationResources.vue'
|
import applicationResources from './applicationResources.vue'
|
||||||
|
import ComponentUsed from './componentUsed.vue'
|
||||||
export default {
|
export default {
|
||||||
components:{componentServices,applicationResources},
|
components:{componentServices,applicationResources, ComponentUsed},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
inputTxt:'',
|
inputTxt:'',
|
||||||
|
tableId:'',
|
||||||
|
fatherId:'',
|
||||||
treeData: [{
|
treeData: [{
|
||||||
label: '一级 1',
|
label: '一级 1',
|
||||||
children: [{
|
children: [{
|
||||||
|
|
@ -156,79 +163,49 @@ export default {
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
}],
|
}],
|
||||||
|
total:null,
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name'
|
label: 'name'
|
||||||
},
|
},
|
||||||
choseId:null,
|
choseId:0,
|
||||||
departmentId:1,
|
departmentId:1,
|
||||||
currentPage4: 4,
|
currentPage: 1,
|
||||||
homeIsShow:true,
|
homeIsShow:true,
|
||||||
servicesIsShow:false,
|
servicesIsShow:false,
|
||||||
resourcesIsShow:false,
|
resourcesIsShow: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: [{
|
tableData: [{deptName:'部门',resourceNum:222}]
|
||||||
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,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
this.getALLTree()
|
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getFirstTree()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//搜索框
|
//搜索框
|
||||||
searchBtn(){
|
// searchBtn(){
|
||||||
this.getALLTree()
|
// this.getALLTree()
|
||||||
},
|
// },
|
||||||
//树
|
// //树
|
||||||
handleNodeClick(data) {
|
// handleNodeClick(data) {
|
||||||
console.log(data.name);
|
// console.log(data.name);
|
||||||
this.getTreeName(data)
|
// this.getTreeName(data)
|
||||||
},
|
// },
|
||||||
|
//翻页
|
||||||
handleCurrentChange(val){
|
handleCurrentChange(val){
|
||||||
this.getALLTree(val)
|
if(this.choseId===0){
|
||||||
|
this.getFirstTree(val)
|
||||||
|
}
|
||||||
|
else if(this.choseId===1){
|
||||||
|
this.getReleaseTree(val)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getTreeName (data) {
|
getTreeName (data) {
|
||||||
this.$http.get('/census/center/v3/treeList/' ,{
|
this.$http.get('/census/center/v3/treeList/' ,{
|
||||||
|
|
@ -239,81 +216,148 @@ export default {
|
||||||
// pageSize: 20
|
// pageSize: 20
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.tableData =res.data.data
|
// this.tableData =res.data.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取部门列表
|
// // 获取部门列表
|
||||||
getALLTree () {
|
// getALLTree () {
|
||||||
this.$http.get('/census/center/v3/treeList/' ,{
|
// this.$http.get('/census/center/v3/treeList/' ,{
|
||||||
params : {
|
// params : {
|
||||||
keywords:this.inputTxt,
|
// keywords:this.inputTxt,
|
||||||
deptId:'1067246875800000066',
|
// deptId:'1067246875800000066',
|
||||||
// pageNo: pageNo || 1,
|
// // pageNo: pageNo || 1,
|
||||||
// pageSize: 20
|
// // pageSize: 20
|
||||||
}
|
// }
|
||||||
}).then(res => {
|
// }).then(res => {
|
||||||
this.treeData =res.data.data
|
// this.treeData =res.data.data
|
||||||
this.tableData =res.data.data
|
// // this.tableData =res.data.data
|
||||||
})
|
// })
|
||||||
},
|
// },
|
||||||
// 获取部门发布情况列表
|
|
||||||
getFirstTree () {
|
// 组件服务部门发布情况
|
||||||
|
getFirstTree (page) {
|
||||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||||
params : {
|
params : {
|
||||||
limit:100,
|
page:page||1,
|
||||||
page:1,
|
limit:5,
|
||||||
id:null,
|
// id:'1067246875800000066',
|
||||||
resourceType:'资源类型'
|
resourceType:'组件服务'
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.tableData =res.data.data
|
// this.tableData =res.data.data.list
|
||||||
|
this.total = res.data.data.total
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获取部门使用情况列表
|
// 组件服务部门使用情况列表
|
||||||
getSecondTree () {
|
getSecondTree () {
|
||||||
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
|
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
|
||||||
params : {
|
params : {
|
||||||
keywords:'',
|
limit:5,
|
||||||
deptId:'1067246875800000066',
|
page:1,
|
||||||
|
// id:'1067246875800000064',
|
||||||
|
resourceType:'组件服务'
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
this.tableData =res.data.data
|
// this.tableData =res.data.data.list
|
||||||
console.log('2222',this.tableData)
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 应用资源部门发布情况列表
|
||||||
|
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) {
|
handleClick(row) {
|
||||||
console.log(row);
|
if(this.choseId===0){
|
||||||
|
if(this.departmentId===1){
|
||||||
|
this.homeIsShow=false
|
||||||
|
this.servicesIsShow=true
|
||||||
|
this.tableId=row.deptId
|
||||||
|
this.fatherId=1
|
||||||
|
}else if(this.departmentId===2){
|
||||||
|
this.homeIsShow=false
|
||||||
|
this.UsedIsShow=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){
|
choseBtn(index){
|
||||||
this.choseId=index
|
this.choseId=index
|
||||||
if (index===0){
|
this.handleChose(1)
|
||||||
this.homeIsShow=false
|
|
||||||
this.servicesIsShow=true
|
|
||||||
} else if(index===1){
|
|
||||||
this.homeIsShow=false
|
|
||||||
this.servicesIsShow=false
|
|
||||||
this.resourcesIsShow=true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
// 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使用表格
|
//选择发布or使用表格
|
||||||
handleChose(index){
|
handleChose(index){
|
||||||
this.departmentId=index
|
this.departmentId=index
|
||||||
if(index===1){
|
if(index===1){
|
||||||
this.getFirstTree()
|
if(this.choseId===0){
|
||||||
}
|
this.getFirstTree()
|
||||||
else{
|
}else if(this.choseId===1){
|
||||||
this.getSecondTree()
|
this.getReleaseTree()
|
||||||
|
}
|
||||||
|
}else if(index===2){
|
||||||
|
if(this.choseId===0){
|
||||||
|
this.getSecondTree()
|
||||||
|
}else{
|
||||||
|
this.getUsedTree()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//翻页
|
//翻页
|
||||||
handleSizeChange(val) {
|
handleSizeChange(val) {
|
||||||
console.log(`每页 ${val} 条`);
|
console.log(`每页 ${val} 条`);
|
||||||
},
|
},
|
||||||
handleCurrentChange(val) {
|
closeChild(){
|
||||||
console.log(`当前页: ${val}`);
|
this.homeIsShow=true
|
||||||
|
this.servicesIsShow=false
|
||||||
|
},
|
||||||
|
closeApplication(){
|
||||||
|
this.homeIsShow=true
|
||||||
|
this.resourcesIsShow=false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -322,10 +366,12 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container{
|
.container{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
}
|
}
|
||||||
.container-left{
|
.container-left{
|
||||||
width:250px;
|
width:250px;
|
||||||
height:1000px;
|
height:1000px;
|
||||||
|
display: inline-block;
|
||||||
// background-color: #ffffff;
|
// background-color: #ffffff;
|
||||||
margin-right:10px
|
margin-right:10px
|
||||||
}
|
}
|
||||||
|
|
@ -371,7 +417,9 @@ input::placeholder {
|
||||||
|
|
||||||
.top-box{
|
.top-box{
|
||||||
height:80px;
|
height:80px;
|
||||||
|
width:100%;
|
||||||
background-color: #fafafc;
|
background-color: #fafafc;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -66,21 +66,35 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!shifoushizujian">
|
<div v-if="!shifoushizujian">
|
||||||
<el-form-item label="组件名称">
|
<el-form-item label="组件名称" v-if="algorithmShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.name"
|
v-model="dataForm.name"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
placeholder="组件名称"
|
placeholder="组件名称"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="应用描述">
|
<el-form-item label="算法名称" v-if="nameNotShow">
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.name"
|
||||||
|
:disabled="fieldDisabled"
|
||||||
|
placeholder="算法名称"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="应用描述" v-if="algorithmShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.description"
|
v-model="dataForm.description"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
placeholder="应用描述"
|
placeholder="应用描述"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="部门联系人">
|
<el-form-item label="算法描述" v-if="nameNotShow">
|
||||||
|
<el-input
|
||||||
|
v-model="dataForm.description"
|
||||||
|
:disabled="fieldDisabled"
|
||||||
|
placeholder="算法描述"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门联系人" v-if="algorithmShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.deptContacts"
|
v-model="dataForm.deptContacts"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
|
|
@ -94,7 +108,7 @@
|
||||||
placeholder="共享类型"
|
placeholder="共享类型"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="共享方式">
|
<el-form-item label="共享方式" v-if="coverageNotShow && algorithmShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.shareMode"
|
v-model="dataForm.shareMode"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
|
|
@ -108,14 +122,14 @@
|
||||||
placeholder="共享方条件"
|
placeholder="共享方条件"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="服务接口">
|
<el-form-item label="服务接口" v-if="coverageNotShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.apiUrl"
|
v-model="dataForm.apiUrl"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
placeholder="服务接口"
|
placeholder="服务接口"
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="接口请求方式">
|
<el-form-item label="接口请求方式" v-if="coverageNotShow">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.applyCount"
|
v-model="dataForm.applyCount"
|
||||||
:disabled="fieldDisabled"
|
:disabled="fieldDisabled"
|
||||||
|
|
@ -179,7 +193,10 @@ export default {
|
||||||
fieldDisabled: false,
|
fieldDisabled: false,
|
||||||
dataForm: [],
|
dataForm: [],
|
||||||
id: '',
|
id: '',
|
||||||
shifoushizujian: true
|
shifoushizujian: true,
|
||||||
|
coverageNotShow: true,
|
||||||
|
nameNotShow: false,
|
||||||
|
algorithmShow: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
|
|
@ -209,6 +226,15 @@ export default {
|
||||||
this.dataForm = res.data.resourceDTO
|
this.dataForm = res.data.resourceDTO
|
||||||
if (this.dataForm.type != '应用资源') {
|
if (this.dataForm.type != '应用资源') {
|
||||||
this.shifoushizujian = false
|
this.shifoushizujian = false
|
||||||
|
this.dataForm.infoList.forEach((val) => {
|
||||||
|
if (val.attrValue === '图层服务') {
|
||||||
|
this.coverageNotShow = false
|
||||||
|
} else if (val.attrValue === '智能算法') {
|
||||||
|
this.nameNotShow = true
|
||||||
|
this.algorithmShow = false
|
||||||
|
console.log(this.nameNotShow, 'wowowo')
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
this.shifoushizujian = true
|
this.shifoushizujian = true
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -578,7 +578,7 @@ export default {
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2
|
const isLt2M = file.size / 1024 / 1024 < 2
|
||||||
|
|
||||||
if (!isImage) {
|
if (!isImage) {
|
||||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
}
|
}
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||||
|
|
@ -601,7 +601,7 @@ export default {
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2
|
const isLt2M = file.size / 1024 / 1024 < 2
|
||||||
|
|
||||||
if (!isImage) {
|
if (!isImage) {
|
||||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
this.$message.error('上传头像图片只能是 jpg/png 格式!')
|
||||||
}
|
}
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-29 15:59:51
|
* @Date: 2022-06-29 15:59:51
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.liangjunhua
|
||||||
* @LastEditTime: 2022-06-29 18:17:07
|
* @LastEditTime: 2022-07-01 09:29:57
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<!-- 流程业务表单 -->
|
<!-- 流程业务表单 -->
|
||||||
|
|
@ -183,16 +183,30 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
|
this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
|
||||||
|
const obj = {
|
||||||
|
name: '申请摄像头列表',
|
||||||
|
type: '基础设施',
|
||||||
|
describe: ''
|
||||||
|
}
|
||||||
|
let flag = false
|
||||||
res.data.tAbilityApplicationDTOList.map(val => {
|
res.data.tAbilityApplicationDTOList.map(val => {
|
||||||
this.$http.get('/resource/' + val.resourceId).then(res1 => {
|
if (val.cameraList) {
|
||||||
console.log(res1.data.data, '1111111111111111111111111111111111')
|
flag = true
|
||||||
this.dataList.push({
|
obj.describe += val.system
|
||||||
name: res1.data.data.name,
|
} else {
|
||||||
type: res1.data.data.type,
|
this.$http.get('/resource/' + val.resourceId).then(res1 => {
|
||||||
describe: res1.data.data.description
|
// console.log(res1.data.data, '1111111111111111111111111111111111')
|
||||||
|
this.dataList.push({
|
||||||
|
name: res1.data.data.name,
|
||||||
|
type: res1.data.data.type,
|
||||||
|
describe: res1.data.data.description
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
}
|
||||||
})
|
})
|
||||||
|
if (flag) {
|
||||||
|
this.dataList.push(obj)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -91,16 +91,23 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
|
import * as moment from 'moment'
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
props: {},
|
props: {
|
||||||
|
callTheTrendData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
endAndstartTime: {},
|
||||||
requestOverviewData: [
|
requestOverviewData: [
|
||||||
{ name: '请求次数', tatol: '99999' },
|
{ name: '请求次数', tatol: '99999' },
|
||||||
{ name: '请求成功次数', tatol: '99999' },
|
{ name: '请求成功次数', tatol: '99999' },
|
||||||
{ name: '请求失败次数', tatol: '99999' },
|
{ name: '请求失败次数', tatol: '99999' },
|
||||||
{ name: '平均时延', tatol: '99999' }
|
{ name: '平均时延', tatol: '0' }
|
||||||
], // 请求概况初始化数据
|
], // 请求概况初始化数据
|
||||||
requestOverviewBg: [
|
requestOverviewBg: [
|
||||||
{
|
{
|
||||||
|
|
@ -134,6 +141,14 @@ export default {
|
||||||
labalColor: '#1182fb'
|
labalColor: '#1182fb'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
qingQiuQuShiTime: [],
|
||||||
|
qingQiuQuShiValue: [],
|
||||||
|
qingQiuQuShiValue2: [],
|
||||||
|
shuJuLiuLiang: {
|
||||||
|
time: [],
|
||||||
|
chuvalue: [],
|
||||||
|
ruvalue: []
|
||||||
|
},
|
||||||
abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
|
abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
|
||||||
newTab: '请求次数',
|
newTab: '请求次数',
|
||||||
abilityListData: [
|
abilityListData: [
|
||||||
|
|
@ -180,7 +195,235 @@ export default {
|
||||||
] // 能力排行数据初始化
|
] // 能力排行数据初始化
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {
|
||||||
|
callTheTrendData: {
|
||||||
|
deep: true,
|
||||||
|
handler () {
|
||||||
|
this.endAndstartTime = this.callTheTrendData
|
||||||
|
if (this.endAndstartTime.end != this.endAndstartTime.start) {
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query?' +
|
||||||
|
'query=sum(increase(apigateway_http_status[1d]))&start=' +
|
||||||
|
this.endAndstartTime.start +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
')'
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
this.requestOverviewData[0].tatol = parseInt(
|
||||||
|
res.data.data.result[0].value[1]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^4..|^5.."} offset ' +
|
||||||
|
this.endAndstartTime.start +
|
||||||
|
' - apigateway_http_status{code=~"^4..|^5.."} offset ' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
')&time=' +
|
||||||
|
this.endAndstartTime.end
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data) {
|
||||||
|
this.requestOverviewData[1].tatol = parseInt(
|
||||||
|
res.data.data.result[0].value[1]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[1].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
|
||||||
|
this.endAndstartTime.end
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
this.requestOverviewData[0].tatol = parseInt(
|
||||||
|
res.data.data.result[0].value[1]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 请求成功
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query?query=sum(apigateway_http_status%7Bcode%3D~%22%5E2..%22%7D)&time=' +
|
||||||
|
this.endAndstartTime.end
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result.length != 0) {
|
||||||
|
this.requestOverviewData[1].tatol = parseInt(
|
||||||
|
res.data.data.result[0].value[1]
|
||||||
|
)
|
||||||
|
this.requestOverviewData[2].tatol =
|
||||||
|
this.requestOverviewData[0].tatol -
|
||||||
|
this.requestOverviewData[1].tatol
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[1].tatol = 0
|
||||||
|
this.requestOverviewData[2].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 平均时延
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%5B1d%5D))%20by%20(le))&time=' +
|
||||||
|
this.endAndstartTime.end -
|
||||||
|
24 * 60 * 60
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
debugger
|
||||||
|
this.requestOverviewData[3].tatol = parseInt(
|
||||||
|
res.data.data.result[0].value[1]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[3].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 趋势接口
|
||||||
|
const starttime = parseInt(
|
||||||
|
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
|
||||||
|
)
|
||||||
|
// 失败
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%7Bcode%3D~%22%5E4..%7C%5E5..%22%7D%5B1d%5D))&start=' +
|
||||||
|
starttime +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=86400'
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
res.data.data.result[0].values.map((item) => {
|
||||||
|
this.qingQiuQuShiValue2.push(parseInt(item[1]))
|
||||||
|
console.log(this.qingQiuQuShiTime)
|
||||||
|
})
|
||||||
|
this.myCharts1()
|
||||||
|
this.myCharts3()
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 成功
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' +
|
||||||
|
starttime +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=' +
|
||||||
|
86400
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
this.qingQiuQuShiTime = []
|
||||||
|
res.data.data.result[0].values.map((item, index) => {
|
||||||
|
this.qingQiuQuShiTime.push(
|
||||||
|
moment(item[0] * 1000).format('MM-DD')
|
||||||
|
)
|
||||||
|
this.qingQiuQuShiValue.push(
|
||||||
|
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||||
|
)
|
||||||
|
console.log(this.qingQiuQuShiTime)
|
||||||
|
})
|
||||||
|
this.myCharts1()
|
||||||
|
this.myCharts3()
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 数据流量出口
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22egress%22%7D%5B1d%5D))&start=' +
|
||||||
|
starttime +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=' +
|
||||||
|
86400
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
this.shuJuLiuLiang.chuvalue = []
|
||||||
|
this.shuJuLiuLiang.time = []
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
res.data.data.result[0].values.map((item, index) => {
|
||||||
|
this.shuJuLiuLiang.time.push(
|
||||||
|
moment(item[0] * 1000).format('MM-DD')
|
||||||
|
)
|
||||||
|
this.shuJuLiuLiang.chuvalue.push(
|
||||||
|
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||||
|
)
|
||||||
|
console.log(this.qingQiuQuShiTime)
|
||||||
|
})
|
||||||
|
this.myCharts2()
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 数据流量入口
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22ingress%22%7D%5B1d%5D))&start=' +
|
||||||
|
starttime +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=' +
|
||||||
|
86400
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
this.shuJuLiuLiang.ruvalue = []
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
res.data.data.result[0].values.map((item, index) => {
|
||||||
|
this.shuJuLiuLiang.ruvalue.push(
|
||||||
|
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||||
|
)
|
||||||
|
console.log(this.qingQiuQuShiTime)
|
||||||
|
})
|
||||||
|
this.myCharts2()
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 时延
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
'/metrics/api/v1/query_range?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%7Btype%3D%22request%22%7D%5B1d%5D)) by (le))&start=' +
|
||||||
|
starttime +
|
||||||
|
'&end=' +
|
||||||
|
this.endAndstartTime.end +
|
||||||
|
'&step=' +
|
||||||
|
86400
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
debugger
|
||||||
|
if (res.data.data.result[0]) {
|
||||||
|
res.data.data.result[0].values.map((item, index) => {
|
||||||
|
this.shuJuLiuLiang.ruvalue.push(
|
||||||
|
parseInt(item[1]) - this.qingQiuQuShiValue2[index]
|
||||||
|
)
|
||||||
|
console.log(this.qingQiuQuShiTime)
|
||||||
|
})
|
||||||
|
this.myCharts2()
|
||||||
|
} else {
|
||||||
|
this.requestOverviewData[0].tatol = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log('this.endAndstartTime', this.endAndstartTime)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
// echarts通用方法
|
// echarts通用方法
|
||||||
|
|
@ -236,7 +479,7 @@ export default {
|
||||||
color: '#ebebeb'
|
color: '#ebebeb'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
data: this.qingQiuQuShiTime
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -313,7 +556,7 @@ export default {
|
||||||
borderWidth: 12
|
borderWidth: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [20, 82, 91, 34, 50, 20, 10, 25]
|
data: this.qingQiuQuShiValue
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '失败次数',
|
name: '失败次数',
|
||||||
|
|
@ -357,7 +600,7 @@ export default {
|
||||||
borderWidth: 12
|
borderWidth: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
data: this.qingQiuQuShiValue2
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -415,7 +658,7 @@ export default {
|
||||||
color: '#ebebeb'
|
color: '#ebebeb'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
data: this.shuJuLiuLiang.time
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -492,7 +735,7 @@ export default {
|
||||||
borderWidth: 12
|
borderWidth: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [20, 82, 91, 34, 50, 20, 10, 25]
|
data: this.shuJuLiuLiang.chuvalue
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '入口流量',
|
name: '入口流量',
|
||||||
|
|
@ -536,7 +779,7 @@ export default {
|
||||||
borderWidth: 12
|
borderWidth: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
data: this.shuJuLiuLiang.ruvalue
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -594,7 +837,7 @@ export default {
|
||||||
color: '#ebebeb'
|
color: '#ebebeb'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: ['1', '2', '3', '4', '5', '6', '7', '8']
|
data: this.qingQiuQuShiTime
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -671,7 +914,7 @@ export default {
|
||||||
borderWidth: 12
|
borderWidth: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: [20, 10, 25, 45, 22, 65, 22, 20]
|
data: this.qingQiuQuShiValue2
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,40 @@
|
||||||
<h1 class="topTitle">能力运行平台</h1>
|
<h1 class="topTitle">能力运行平台</h1>
|
||||||
<div class="topNav">
|
<div class="topNav">
|
||||||
<div class="topTab">
|
<div class="topTab">
|
||||||
<div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
|
<div
|
||||||
<div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
|
@click="timeSwitch('日')"
|
||||||
<div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
|
:class="timeSwitchindex == '日' ? 'timeDown' : ''"
|
||||||
|
>
|
||||||
|
当天
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click="timeSwitch('周')"
|
||||||
|
:class="timeSwitchindex == '周' ? 'timeDown' : ''"
|
||||||
|
>
|
||||||
|
最近一周
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
@click="timeSwitch('月')"
|
||||||
|
:class="timeSwitchindex == '月' ? 'timeDown' : ''"
|
||||||
|
>
|
||||||
|
最近一月
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="topTimme">
|
<div class="topTimme">
|
||||||
<span>选择时间段</span>
|
<span>选择时间段</span>
|
||||||
<el-date-picker v-model="timeStart" type="date" placeholder="请选择起始时间" :picker-options="pickerOptions0">
|
<el-date-picker
|
||||||
|
v-model="timeStart"
|
||||||
|
type="date"
|
||||||
|
placeholder="请选择起始时间"
|
||||||
|
:picker-options="pickerOptions0"
|
||||||
|
>
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
<el-date-picker v-model="timeEnd" type="date" placeholder="请选择结束时间" :picker-options="pickerOptions1">
|
<el-date-picker
|
||||||
|
v-model="timeEnd"
|
||||||
|
type="date"
|
||||||
|
placeholder="请选择结束时间"
|
||||||
|
:picker-options="pickerOptions1"
|
||||||
|
>
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
<el-button type="primary" round>确定</el-button>
|
<el-button type="primary" round>确定</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,7 +48,9 @@
|
||||||
<abnormal-situation></abnormal-situation>
|
<abnormal-situation></abnormal-situation>
|
||||||
</div>
|
</div>
|
||||||
<div class="capability-operation-monitoring-bottom">
|
<div class="capability-operation-monitoring-bottom">
|
||||||
<analysis-of-the-request></analysis-of-the-request>
|
<analysis-of-the-request
|
||||||
|
:callTheTrendData="callTheTrendData"
|
||||||
|
></analysis-of-the-request>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -31,7 +58,6 @@
|
||||||
<script>
|
<script>
|
||||||
import AbnormalSituation from './components/AbnormalSituation.vue'
|
import AbnormalSituation from './components/AbnormalSituation.vue'
|
||||||
import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
|
import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
|
||||||
import * as moment from 'moment'
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
AbnormalSituation,
|
AbnormalSituation,
|
||||||
|
|
@ -55,7 +81,10 @@ export default {
|
||||||
return time.getTime() < this.timeStart
|
return time.getTime() < this.timeStart
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
callTheTrendData: []
|
callTheTrendData: {
|
||||||
|
start: '',
|
||||||
|
end: ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
|
|
@ -63,31 +92,31 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
timeSwitch (name) {
|
timeSwitch (name) {
|
||||||
this.timeSwitchindex = name
|
this.timeSwitchindex = name
|
||||||
this.callTheTrendData = []
|
|
||||||
if (name == '周') {
|
if (name == '周') {
|
||||||
for (let i = 0; i < 7; i++) {
|
const start = parseInt(
|
||||||
const time = moment()
|
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
|
||||||
.subtract('days', 6 - i)
|
)
|
||||||
.format('MM-DD')
|
this.callTheTrendData.start = start
|
||||||
this.callTheTrendData.push(time)
|
console.log(
|
||||||
} console.log('time', this.callTheTrendData, name)
|
'this.callTheTrendData',
|
||||||
// callTheTrend(callTheTrendData.value)
|
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
|
||||||
|
)
|
||||||
} else if (name == '月') {
|
} else if (name == '月') {
|
||||||
for (let i = 0; i < 31; i++) {
|
const start = parseInt(
|
||||||
const time = moment()
|
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
|
||||||
.subtract('days', 30 - i)
|
)
|
||||||
.format('MM-DD')
|
this.callTheTrendData.start = start
|
||||||
this.callTheTrendData.push(time)
|
console.log(
|
||||||
} console.log('time', this.callTheTrendData, name)
|
'this.callTheTrendData',
|
||||||
// callTheTrend(callTheTrendData.value)
|
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
const time = moment().startOf('day').format('YYYY-MM-DD 23:59:59')
|
this.callTheTrendData.start = Date.parse(new Date()) / 1000
|
||||||
this.callTheTrendData.push(time)
|
this.callTheTrendData.end = Date.parse(new Date()) / 1000
|
||||||
console.log(time, this.callTheTrendData)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () { },
|
created () {},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.timeSwitch('日')
|
this.timeSwitch('日')
|
||||||
}
|
}
|
||||||
|
|
@ -161,7 +190,6 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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:获取当前登录用户所在部门发布的资源
|
// /resource/getByDept:获取当前登录用户所在部门发布的资源
|
||||||
|
|
@ -125,9 +139,9 @@ export const getApplyByDept = (data, success, fail) => {
|
||||||
}
|
}
|
||||||
// 部门发布能力被调用趋势
|
// 部门发布能力被调用趋势
|
||||||
export const getByDept = (data, success, fail) => {
|
export const getByDept = (data, success, fail) => {
|
||||||
Request({
|
RequestPost({
|
||||||
methods: 'get',
|
methods: 'post',
|
||||||
url: '/resource/getByDept',
|
url: '/resource/trafficDeptResource',
|
||||||
data
|
data
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
success && success(res)
|
success && success(res)
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export const trendLineChart = (id, chartData, _option) => {
|
||||||
},
|
},
|
||||||
}],
|
}],
|
||||||
series: [{
|
series: [{
|
||||||
name: '合格数据百分比',
|
name: '使用量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
showAllSymbol: true,
|
showAllSymbol: true,
|
||||||
symbolSize: 0,
|
symbolSize: 0,
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,14 @@ export default {
|
||||||
return {
|
return {
|
||||||
titles: ["近七日", "月度"],
|
titles: ["近七日", "月度"],
|
||||||
selectedTitle: 0,
|
selectedTitle: 0,
|
||||||
trendChartData:{}
|
trendChartData: {},
|
||||||
|
startDate: "",
|
||||||
|
endDate:
|
||||||
|
new Date().getFullYear() +
|
||||||
|
"-" +
|
||||||
|
(new Date().getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
new Date().getDate()
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -32,25 +39,38 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initChart();
|
this.initChart();
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
selectedTitle: {
|
||||||
|
handler: function(newVal, oldVal) {
|
||||||
|
this.startDate = this.getData(newVal == 0 ? 7 : 30);
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//发布动态
|
//发布动态
|
||||||
initChart() {
|
initChart() {
|
||||||
let data = {
|
|
||||||
limit: 10,
|
|
||||||
page: 1
|
|
||||||
};
|
|
||||||
Apis.getByDept(
|
Apis.getByDept(
|
||||||
data,
|
{
|
||||||
|
startDate: this.startDate,
|
||||||
|
endDate: this.endDate
|
||||||
|
},
|
||||||
res => {
|
res => {
|
||||||
if (res.data.code !== 0) {
|
if (res.data.code !== 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.data = res.data.data.records || [];
|
this.data = res.data.data.browseDayList || [];
|
||||||
let xaxis=[],ydata=[]
|
let xaxis = [],
|
||||||
this.data.forEach(v=>{
|
ydata = [];
|
||||||
xaxis.push(v.createDate)
|
this.data.forEach(v => {
|
||||||
ydata.push(v.visits)
|
Object.keys(v).map((key, value) => {
|
||||||
})
|
xaxis.push(key);
|
||||||
|
ydata.push(value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
console.log(xaxis)
|
||||||
|
console.log(ydata)
|
||||||
this.trendChartData = {
|
this.trendChartData = {
|
||||||
xaxis: xaxis,
|
xaxis: xaxis,
|
||||||
ydata: ydata
|
ydata: ydata
|
||||||
|
|
@ -66,7 +86,27 @@ export default {
|
||||||
},
|
},
|
||||||
handleTitleSwitch(idx) {
|
handleTitleSwitch(idx) {
|
||||||
this.selectedTitle = idx;
|
this.selectedTitle = idx;
|
||||||
|
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
|
||||||
|
console.log(this.startDate);
|
||||||
this.initChart();
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2022-03-29 16:45:25
|
* @Date: 2022-03-29 16:45:25
|
||||||
* @LastEditors: hisense.wuhongjian
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-29 19:38:31
|
* @LastEditTime: 2022-06-30 21:21:10
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
/*
|
/*
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2022-04-01 19:19:40
|
* @Date: 2022-04-01 19:19:40
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-29 14:34:24
|
* @LastEditTime: 2022-06-30 19:36:48
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
@ -314,3 +314,18 @@ export function queryPartAppByKeyId2(params) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//首页 基础设施
|
||||||
|
export function selectInfrastructureList(params) {
|
||||||
|
return request({
|
||||||
|
url: 'resource/selectInfrastructureList',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 根据instanceId获取摄像头列表
|
||||||
|
export function getApplyCameraList(id) {
|
||||||
|
return request({
|
||||||
|
url: '/resource/getApplyCameraList/' + id,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -121,6 +121,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, ref } from 'vue'
|
import { nextTick, ref } from 'vue'
|
||||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||||
import {
|
import {
|
||||||
capabilityShareCapabilitySet,
|
capabilityShareCapabilitySet,
|
||||||
selectResourceListByDept,
|
selectResourceListByDept,
|
||||||
|
|
@ -317,23 +318,20 @@
|
||||||
// 右侧列表
|
// 右侧列表
|
||||||
const dataList = ref([])
|
const dataList = ref([])
|
||||||
// 所有领域类型
|
// 所有领域类型
|
||||||
const allType = ref([
|
const allType = ref([])
|
||||||
'社会治安',
|
getCategoryTreePage({
|
||||||
'城市管理',
|
page: 1,
|
||||||
'疫情防控',
|
limit: 99,
|
||||||
'危化品管理',
|
dictTypeId: '1513712507692818433',
|
||||||
'交通运输',
|
}).then((res) => {
|
||||||
'森林防火',
|
// console.log('kasdjflkajsdlkf ', res.data.data)
|
||||||
'防汛抗旱',
|
allType.value = []
|
||||||
'文化旅游',
|
res.data.data.list.map((val) => {
|
||||||
'非煤矿山',
|
if (val.dictLabel !== '其他') {
|
||||||
'医疗卫生',
|
allType.value.push(val.dictLabel)
|
||||||
'安全生产',
|
}
|
||||||
'生态环境',
|
})
|
||||||
'农业农村',
|
})
|
||||||
'市场监管',
|
|
||||||
'政务服务',
|
|
||||||
])
|
|
||||||
const flag = ref('')
|
const flag = ref('')
|
||||||
const nowShow = ref(false)
|
const nowShow = ref(false)
|
||||||
const showDetails = (item) => {
|
const showDetails = (item) => {
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
<div class="left" id="left"></div>
|
<div class="left" id="left"></div>
|
||||||
<div class="center"></div>
|
<div class="center"></div>
|
||||||
<div class="right" id="right"></div>
|
<div class="right" id="right"></div>
|
||||||
<div class="right-son1">汇聚量</div>
|
<!-- <div class="right-son1">汇聚量</div> -->
|
||||||
<div class="right-son2">部门数</div>
|
<div class="right-son2">部门数</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -287,6 +287,12 @@
|
||||||
}
|
}
|
||||||
//来源部门漏斗图
|
//来源部门漏斗图
|
||||||
const funnelPlot = (dataList) => {
|
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()
|
echarts.init(document.getElementById('right')).dispose()
|
||||||
let chartDom = document.getElementById('right')
|
let chartDom = document.getElementById('right')
|
||||||
let myChart = echarts.init(chartDom)
|
let myChart = echarts.init(chartDom)
|
||||||
|
|
@ -318,6 +324,7 @@
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
show: false,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 20,
|
max: 20,
|
||||||
|
|
|
||||||
|
|
@ -30,10 +30,10 @@
|
||||||
<span
|
<span
|
||||||
v-for="(item, index) in tabClickData"
|
v-for="(item, index) in tabClickData"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="listBg == item.name ? 'down' : ''"
|
:class="listBg == item.dictLabel ? 'down' : ''"
|
||||||
@click="switchList(item.name)"
|
@click="switchList(item.dictLabel)"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.dictLabel }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<a class="more" @click="lookmore(hidetext)">
|
<a class="more" @click="lookmore(hidetext)">
|
||||||
|
|
@ -82,6 +82,7 @@
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
// import { useStore } from 'vuex'
|
// import { useStore } from 'vuex'
|
||||||
import { pageWithAttrs } from '@/api/home.js'
|
import { pageWithAttrs } from '@/api/home.js'
|
||||||
|
import { getCategoryTreePage } from '@/api/personalCenter.js'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
// import { pinyin } from 'pinyin-pro'
|
// import { pinyin } from 'pinyin-pro'
|
||||||
// import { Empty } from 'ant-design-vue'
|
// import { Empty } from 'ant-design-vue'
|
||||||
|
|
@ -159,6 +160,17 @@
|
||||||
name: '其他',
|
name: '其他',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
//赋能案例tab页接口
|
||||||
|
const tabChaXun = () => {
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
limit: 99,
|
||||||
|
dictTypeId: '1513712507692818433',
|
||||||
|
}
|
||||||
|
getCategoryTreePage(params).then(({ data: res }) => {
|
||||||
|
tabClickData.value = res.data.list
|
||||||
|
})
|
||||||
|
}
|
||||||
const tabClickShow = ref(false)
|
const tabClickShow = ref(false)
|
||||||
const number = ref(0)
|
const number = ref(0)
|
||||||
const changeCards = (val) => {
|
const changeCards = (val) => {
|
||||||
|
|
@ -195,6 +207,7 @@
|
||||||
}
|
}
|
||||||
//查询分页接口
|
//查询分页接口
|
||||||
const init = (list) => {
|
const init = (list) => {
|
||||||
|
tabChaXun()
|
||||||
let params = {
|
let params = {
|
||||||
deptIds: [],
|
deptIds: [],
|
||||||
districtId: '',
|
districtId: '',
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!--
|
<!--
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-08 11:32:22
|
* @Date: 2022-06-08 11:32:22
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-20 18:58:46
|
* @LastEditTime: 2022-06-30 17:06:56
|
||||||
* @Description: 算法详情页
|
* @Description: 算法详情页
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
></algorithm-display>
|
></algorithm-display>
|
||||||
<!-- 关联能力 -->
|
<!-- 关联能力 -->
|
||||||
<algorithm-associated-ability
|
<algorithm-associated-ability
|
||||||
|
v-if="!loading"
|
||||||
:associatedComponents="associatedComponents"
|
:associatedComponents="associatedComponents"
|
||||||
id="algorithm-associated-ability"
|
id="algorithm-associated-ability"
|
||||||
class="scrollBox"
|
class="scrollBox"
|
||||||
|
|
@ -93,6 +94,7 @@
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const scrollTop = ref(0)
|
const scrollTop = ref(0)
|
||||||
const domArr = ref([])
|
const domArr = ref([])
|
||||||
|
const loading = ref(true)
|
||||||
const selectNow = ref('')
|
const selectNow = ref('')
|
||||||
const dataList = reactive({ data: {} })
|
const dataList = reactive({ data: {} })
|
||||||
const id = router.currentRoute.value.query.id
|
const id = router.currentRoute.value.query.id
|
||||||
|
|
@ -136,6 +138,7 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
const init = (id) => {
|
const init = (id) => {
|
||||||
|
console.log(id, '-------------------------------------------------')
|
||||||
if (id) {
|
if (id) {
|
||||||
selectOne(id).then((res) => {
|
selectOne(id).then((res) => {
|
||||||
// console.clear()
|
// console.clear()
|
||||||
|
|
@ -162,6 +165,7 @@
|
||||||
}
|
}
|
||||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||||
associatedComponents.value[index].dataList = res.data.data
|
associatedComponents.value[index].dataList = res.data.data
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else if (obj) {
|
} else if (obj) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="application-associated-ability" v-if="flag">
|
<div class="application-associated-ability" v-if="flag">
|
||||||
<detals-title title="关联能力" type="RELEVANCE"></detals-title>
|
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
|
||||||
<div class="application-associated-ability-main">
|
<div class="application-associated-ability-main">
|
||||||
<div
|
<div
|
||||||
class="associated-ability-card"
|
class="associated-ability-card"
|
||||||
|
|
@ -34,14 +34,18 @@
|
||||||
const oldid = router.currentRoute.value.query.id
|
const oldid = router.currentRoute.value.query.id
|
||||||
//点击查看详情
|
//点击查看详情
|
||||||
const switchFunction = (id) => {
|
const switchFunction = (id) => {
|
||||||
router.push({
|
// router.push({
|
||||||
path: '/details',
|
// path: '/details',
|
||||||
query: {
|
// query: {
|
||||||
id: id,
|
// id: id,
|
||||||
},
|
// },
|
||||||
})
|
// })
|
||||||
|
window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id)
|
||||||
|
// alert(id)
|
||||||
}
|
}
|
||||||
if (props.associatedComponents) {
|
console.log('这个是空值', props.associatedComponents[0])
|
||||||
|
if (props.associatedComponents[0].dataList.length > 0) {
|
||||||
|
console.log('这个是空值', props.associatedComponents)
|
||||||
flag.value = true
|
flag.value = true
|
||||||
dataFrom.value = props.associatedComponents
|
dataFrom.value = props.associatedComponents
|
||||||
console.log('dataFrom.value', dataFrom.value)
|
console.log('dataFrom.value', dataFrom.value)
|
||||||
|
|
@ -82,7 +86,7 @@
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
width: 13.3rem;
|
width: 13.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
.associated-ability-card {
|
.associated-ability-card {
|
||||||
width: 3.2rem;
|
width: 3.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -106,6 +110,7 @@
|
||||||
color: #999;
|
color: #999;
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,12 +39,45 @@
|
||||||
obj.attrValue = JSON.parse(obj.attrValue)
|
obj.attrValue = JSON.parse(obj.attrValue)
|
||||||
// dataFrom.value = obj
|
// dataFrom.value = obj
|
||||||
obj.attrValue.map((item) => {
|
obj.attrValue.map((item) => {
|
||||||
let params = {
|
let params = {}
|
||||||
title: item.type,
|
switch (item.type) {
|
||||||
content: item.desc,
|
case '一次性买断':
|
||||||
value: item.price,
|
params = {
|
||||||
time: '/年起',
|
title: item.type,
|
||||||
unit: '￥',
|
content: item.desc,
|
||||||
|
value: item.price,
|
||||||
|
time: '',
|
||||||
|
unit: '￥',
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case '按调用次数':
|
||||||
|
params = {
|
||||||
|
title: item.type,
|
||||||
|
content: item.desc,
|
||||||
|
value: item.price,
|
||||||
|
time: '/次',
|
||||||
|
unit: '￥',
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
case '按并发路数':
|
||||||
|
params = {
|
||||||
|
title: item.type,
|
||||||
|
content: item.desc,
|
||||||
|
value: item.price,
|
||||||
|
time: '/路',
|
||||||
|
unit: '￥',
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case '按年计费':
|
||||||
|
params = {
|
||||||
|
title: item.type,
|
||||||
|
content: item.desc,
|
||||||
|
value: item.price,
|
||||||
|
time: '/年',
|
||||||
|
unit: '￥',
|
||||||
|
}
|
||||||
|
break
|
||||||
}
|
}
|
||||||
dataFrom.value.push(params)
|
dataFrom.value.push(params)
|
||||||
})
|
})
|
||||||
|
|
@ -70,7 +103,7 @@
|
||||||
title: item.type,
|
title: item.type,
|
||||||
content: item.desc,
|
content: item.desc,
|
||||||
value: item.price,
|
value: item.price,
|
||||||
time: '/元',
|
time: '',
|
||||||
unit: '￥',
|
unit: '￥',
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!--
|
<!--
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-08 14:54:01
|
* @Date: 2022-06-08 14:54:01
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-15 18:32:23
|
* @LastEditTime: 2022-06-30 17:09:40
|
||||||
* @Description: 算法详情页导航
|
* @Description: 算法详情页导航
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -21,8 +21,14 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps, watch } from 'vue'
|
import { ref, defineProps, watch, getCurrentInstance } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
|
import { queryPartAppByKeyId2 } from '@/api/home'
|
||||||
|
// 获取当前路由地址
|
||||||
|
const router = useRouter();
|
||||||
|
const keyId = router.currentRoute.value.query.id;
|
||||||
|
console.log('123', keyId)
|
||||||
const navList = ref([
|
const navList = ref([
|
||||||
{
|
{
|
||||||
name: '算法展示',
|
name: '算法展示',
|
||||||
|
|
@ -32,10 +38,6 @@
|
||||||
name: '算法优势',
|
name: '算法优势',
|
||||||
key: 'algorithm-advantage',
|
key: 'algorithm-advantage',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '关联能力',
|
|
||||||
key: 'algorithm-associated-ability',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: '应用场景',
|
name: '应用场景',
|
||||||
key: 'application-scenarios',
|
key: 'application-scenarios',
|
||||||
|
|
@ -61,12 +63,30 @@
|
||||||
key: 'common-problem',
|
key: 'common-problem',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
const list = ref([])
|
||||||
|
// 根据能力id查询是否存在关联应用
|
||||||
|
queryPartAppByKeyId2({keyId: keyId}).then(
|
||||||
|
res=>{
|
||||||
|
console.log('ressssssss', res)
|
||||||
|
if (res.data.data.length > 0) {
|
||||||
|
// 存在关联应用时在导航栏加入关联应用
|
||||||
|
navList.value.unshift({
|
||||||
|
name: '关联应用',
|
||||||
|
key: 'algorithm-associated-ability',
|
||||||
|
show: true
|
||||||
|
})
|
||||||
|
// list.value.push('关联应用')
|
||||||
|
console.log('navList', navList)
|
||||||
|
}
|
||||||
|
})
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
selectNow: { type: String, default: '' },
|
selectNow: { type: String, default: '' },
|
||||||
dataList: { type: Object, default: null },
|
dataList: { type: Object, default: null },
|
||||||
})
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const select = ref('algorithm-display')
|
const select = ref('algorithm-display')
|
||||||
const list = ref([])
|
|
||||||
const selectNav = (key) => {
|
const selectNav = (key) => {
|
||||||
select.value = key
|
select.value = key
|
||||||
mybus.emit('flyToView', select.value)
|
mybus.emit('flyToView', select.value)
|
||||||
|
|
@ -91,7 +111,6 @@
|
||||||
list.value.push('使用方式')
|
list.value.push('使用方式')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
list.value.push('关联能力')
|
|
||||||
navList.value.forEach((item) => {
|
navList.value.forEach((item) => {
|
||||||
console.log(item)
|
console.log(item)
|
||||||
if (list.value.indexOf(item.name) > -1) {
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
|
@ -136,7 +155,7 @@
|
||||||
list.value.push('使用方式')
|
list.value.push('使用方式')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
list.value.push('关联能力')
|
list.value.push('关联应用')
|
||||||
navList.value.forEach((item) => {
|
navList.value.forEach((item) => {
|
||||||
console.log(item)
|
console.log(item)
|
||||||
if (list.value.indexOf(item.name) > -1) {
|
if (list.value.indexOf(item.name) > -1) {
|
||||||
|
|
|
||||||
|
|
@ -28,10 +28,16 @@
|
||||||
<!-- <span class="label">免费</span> -->
|
<!-- <span class="label">免费</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div>应用领域：{{ applicationArea }}</div>
|
<a-tooltip placement="top">
|
||||||
<div>
|
<template #title>应用领域：{{ applicationArea }}</template>
|
||||||
{{ props.dataList.description }}
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
</div>
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>{{ props.dataList.description }}</template>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-if="props.dataList.id">
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
<a-button type="primary" @click="toView()">
|
<a-button type="primary" @click="toView()">
|
||||||
|
|
@ -162,8 +168,8 @@
|
||||||
}
|
}
|
||||||
.lable-father {
|
.lable-father {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 2.5rem;
|
min-width: 3.5rem;
|
||||||
right: -2.5rem;
|
right: -3.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div @click="technical()">技术文档</div>
|
<div @click="technical()">技术文档</div>
|
||||||
<div>新手指引</div>
|
<!-- <div>新手指引</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
|
|
@ -73,13 +73,13 @@
|
||||||
titleSon: '调用接口',
|
titleSon: '调用接口',
|
||||||
link: {
|
link: {
|
||||||
name: '接口地址：',
|
name: '接口地址：',
|
||||||
value: 'http://localhost:9999/#/details?id=1532278256619307010',
|
value: '',
|
||||||
},
|
},
|
||||||
postMethod: {
|
postMethod: {
|
||||||
name: '请求方式：',
|
name: '请求方式：',
|
||||||
value: 'POST',
|
value: '',
|
||||||
},
|
},
|
||||||
contact: '联系厂商：',
|
contact: '联系厂商',
|
||||||
facilitator: { name: '服务商：', value: '科大讯飞' },
|
facilitator: { name: '服务商：', value: '科大讯飞' },
|
||||||
people: { name: '联系人：', value: '李四' },
|
people: { name: '联系人：', value: '李四' },
|
||||||
phone: {
|
phone: {
|
||||||
|
|
@ -116,8 +116,12 @@
|
||||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||||
} else if (item.attrType === '服务商联系电话') {
|
} else if (item.attrType === '服务商联系电话') {
|
||||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||||
} else if (item.attrType === '技术文档') {
|
}
|
||||||
dataFrom.value.link = item.attrValue || '--'
|
// } else if (item.attrType === '技术文档') {
|
||||||
|
// dataFrom.value.link = item.attrValue || '--'
|
||||||
|
// }
|
||||||
|
else if (item.attrType === '服务接口') {
|
||||||
|
dataFrom.value.content[0].link.value = item.attrValue || '--'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -143,8 +147,12 @@
|
||||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||||
} else if (item.attrType === '服务商联系电话') {
|
} else if (item.attrType === '服务商联系电话') {
|
||||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||||
} else if (item.attrType === '技术文档') {
|
}
|
||||||
dataFrom.value.link = item.attrValue || '--'
|
// else if (item.attrType === '技术文档') {
|
||||||
|
// dataFrom.value.link = item.attrValue || '--'
|
||||||
|
// }
|
||||||
|
else if (item.attrType === '服务接口') {
|
||||||
|
dataFrom.value.content[0].link.value = item.attrValue || '--'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -152,7 +160,6 @@
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
function technical() {
|
function technical() {
|
||||||
|
|
||||||
// 拼接路径
|
// 拼接路径
|
||||||
const type = pinyin(props.dataList.type, {
|
const type = pinyin(props.dataList.type, {
|
||||||
pattern: 'initial',
|
pattern: 'initial',
|
||||||
|
|
|
||||||
|
|
@ -26,10 +26,16 @@
|
||||||
<!-- <span class="label">免费</span> -->
|
<!-- <span class="label">免费</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div>应用领域：{{ applicationArea }}</div>
|
<a-tooltip placement="top">
|
||||||
<div>
|
<template #title>应用领域：{{ applicationArea }}</template>
|
||||||
{{ props.dataList.description }}
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
</div>
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>{{ props.dataList.description }}</template>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-if="props.dataList.id">
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
<!-- <a-button type="primary" @click="toView()">
|
<!-- <a-button type="primary" @click="toView()">
|
||||||
|
|
@ -148,8 +154,8 @@
|
||||||
}
|
}
|
||||||
.lable-father {
|
.lable-father {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 2.5rem;
|
min-width: 3.5rem;
|
||||||
right: -2.5rem;
|
right: -3.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,16 @@
|
||||||
<!-- <span class="label">免费</span> -->
|
<!-- <span class="label">免费</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div>应用领域：{{ businessArea }}</div>
|
<a-tooltip placement="top">
|
||||||
<!-- 应用描述 -->
|
<template #title>应用领域：{{ applicationArea }}</template>
|
||||||
<div>
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
{{ props.dataList.description }}
|
</a-tooltip>
|
||||||
</div>
|
<a-tooltip placement="top">
|
||||||
|
<template #title>{{ props.dataList.description }}</template>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-if="props.dataList.id">
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
<!-- <a-button type="primary" @click="toView()">
|
<!-- <a-button type="primary" @click="toView()">
|
||||||
|
|
@ -162,8 +167,8 @@
|
||||||
}
|
}
|
||||||
.lable-father {
|
.lable-father {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 2.5rem;
|
min-width: 3.5rem;
|
||||||
right: -2.5rem;
|
right: -3.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="content-right-left">
|
<div class="content-right-left">
|
||||||
<div class="content-right-title">{{ item.contact }}</div>
|
<!-- <div class="content-right-title">{{ item.contact }}</div> -->
|
||||||
<div class="content-right-content">
|
<div class="content-right-content">
|
||||||
|
<p>
|
||||||
|
<span>{{ item.contact }}</span>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.facilitator.value }}</template>
|
||||||
|
<span>{{ item.facilitator.value }}</span>
|
||||||
|
</a-tooltip>
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<span>{{ item.people.name }}</span>
|
<span>{{ item.people.name }}</span>
|
||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
|
|
@ -46,8 +53,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right-right">
|
<div class="content-right-right">
|
||||||
<div class="content-right-title">{{ item.contact2 }}</div>
|
<!-- <div class="content-right-title">{{ item.contact2 }}</div> -->
|
||||||
<div class="content-right-content">
|
<div class="content-right-content">
|
||||||
|
<p>
|
||||||
|
<span>{{ item.contact2 }}</span>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.facilitator2.value }}</template>
|
||||||
|
<span>{{ item.facilitator2.value }}</span>
|
||||||
|
</a-tooltip>
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<span>{{ item.people2.name }}</span>
|
<span>{{ item.people2.name }}</span>
|
||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
|
|
@ -83,19 +97,19 @@
|
||||||
name: '接口地址：',
|
name: '接口地址：',
|
||||||
},
|
},
|
||||||
linkValue: '',
|
linkValue: '',
|
||||||
contact: '归属部门',
|
contact: '归属部门：',
|
||||||
facilitator: { name: '归属部门：', value: '讯飞科大' },
|
facilitator: { name: '归属部门：', value: '' },
|
||||||
people: { name: '部门联系人：', value: '李四' },
|
people: { name: '部门联系人：', value: '' },
|
||||||
phone: {
|
phone: {
|
||||||
name: '联系人电话：',
|
name: '联系人电话：',
|
||||||
value: '12345678901',
|
value: '',
|
||||||
},
|
},
|
||||||
contact2: '服务商',
|
contact2: '服务商：',
|
||||||
facilitator2: { name: '服务商：', value: '科大讯飞' },
|
facilitator2: { name: '服务商：', value: '' },
|
||||||
people2: { name: '服务商联系人：', value: '李四' },
|
people2: { name: '服务商联系人：', value: '' },
|
||||||
phone2: {
|
phone2: {
|
||||||
name: '联系人电话：',
|
name: '联系人电话：',
|
||||||
value: '1234567890',
|
value: '',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -114,7 +128,7 @@
|
||||||
} else {
|
} else {
|
||||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||||
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
||||||
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
|
dataFrom.value.content[0].facilitator.value = props.dataList.deptName
|
||||||
dataFrom.value.content[0].people.value = props.dataList.deptContacts
|
dataFrom.value.content[0].people.value = props.dataList.deptContacts
|
||||||
dataFrom.value.content[0].phone.value = props.dataList.deptPhone
|
dataFrom.value.content[0].phone.value = props.dataList.deptPhone
|
||||||
console.log('dataList', props.dataList)
|
console.log('dataList', props.dataList)
|
||||||
|
|
@ -140,7 +154,7 @@
|
||||||
flag.value = false
|
flag.value = false
|
||||||
} else {
|
} else {
|
||||||
dataFrom.value.content[0].link.value = val.apiUrl
|
dataFrom.value.content[0].link.value = val.apiUrl
|
||||||
dataFrom.value.content[0].facilitator.value = val.deptContacts
|
dataFrom.value.content[0].facilitator.value = val.deptName
|
||||||
dataFrom.value.content[0].people.value = val.deptContacts
|
dataFrom.value.content[0].people.value = val.deptContacts
|
||||||
dataFrom.value.content[0].phone.value = val.deptPhone
|
dataFrom.value.content[0].phone.value = val.deptPhone
|
||||||
console.log('dataList', val)
|
console.log('dataList', val)
|
||||||
|
|
@ -183,11 +197,14 @@
|
||||||
// // 打开文档
|
// // 打开文档
|
||||||
// const id = props.dataList.id
|
// const id = props.dataList.id
|
||||||
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
// 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.open(
|
||||||
window.SITE_CONFIG.previewUrl +
|
window.SITE_CONFIG.previewUrl +
|
||||||
'hisense_office/onlinePreview?url=' +
|
'hisense_office/onlinePreview?url=' +
|
||||||
btoa(encodeURI(dataFrom.value.link))
|
btoa(encodeURI(obj.attrValue))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -28,10 +28,16 @@
|
||||||
<!-- <span class="label">免费</span> -->
|
<!-- <span class="label">免费</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div>应用领域：{{ applicationArea }}</div>
|
<a-tooltip placement="top">
|
||||||
<div>
|
<template #title>应用领域：{{ applicationArea }}</template>
|
||||||
{{ props.dataList.description }}
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
</div>
|
</a-tooltip>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>{{ props.dataList.description }}</template>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-if="props.dataList.id">
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
<a-button type="primary" @click="toView()">
|
<a-button type="primary" @click="toView()">
|
||||||
|
|
@ -161,8 +167,8 @@
|
||||||
}
|
}
|
||||||
.lable-father {
|
.lable-father {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 2.5rem;
|
min-width: 3.5rem;
|
||||||
right: -2.5rem;
|
right: -3.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,16 @@
|
||||||
oInput.remove() // 执行浏览器复制命令
|
oInput.remove() // 执行浏览器复制命令
|
||||||
message.success(name + '成功')
|
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(
|
watch(
|
||||||
() => props.dataList,
|
() => props.dataList,
|
||||||
(val) => {
|
(val) => {
|
||||||
|
|
@ -157,3 +167,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.custom-class {
|
||||||
|
/* top: 100px; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,21 +11,30 @@
|
||||||
<li v-for="(item, index) in dataFromLeft.content" :key="index">
|
<li v-for="(item, index) in dataFromLeft.content" :key="index">
|
||||||
<img :src="iconImg" />
|
<img :src="iconImg" />
|
||||||
<span>{{ item.type }}</span>
|
<span>{{ item.type }}</span>
|
||||||
<p>{{ item.values }}</p>
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.values }}</template>
|
||||||
|
<p>{{ item.values }}</p>
|
||||||
|
</a-tooltip>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in dataFromCenter.content" :key="index">
|
<li v-for="(item, index) in dataFromCenter.content" :key="index">
|
||||||
<img :src="iconImg" />
|
<img :src="iconImg" />
|
||||||
<span>{{ item.type }}</span>
|
<span>{{ item.type }}</span>
|
||||||
<p>{{ item.values }}</p>
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.values }}</template>
|
||||||
|
<p>{{ item.values }}</p>
|
||||||
|
</a-tooltip>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in dataFromRight.content" :key="index">
|
<li v-for="(item, index) in dataFromRight.content" :key="index">
|
||||||
<img :src="iconImg" />
|
<img :src="iconImg" />
|
||||||
<span>{{ item.type }}</span>
|
<span>{{ item.type }}</span>
|
||||||
<p>{{ item.values }}</p>
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.values }}</template>
|
||||||
|
<p>{{ item.values }}</p>
|
||||||
|
</a-tooltip>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -129,7 +129,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
select.value = navList.value.filter(
|
select.value = navList.value.filter(
|
||||||
(item) => item.name === list.value[0]
|
(item) => item.name === '图层展示'
|
||||||
)[0].key
|
)[0].key
|
||||||
console.log('11111111111111111111111111', list.value, navList.value)
|
console.log('11111111111111111111111111', list.value, navList.value)
|
||||||
}
|
}
|
||||||
|
|
@ -205,7 +205,7 @@
|
||||||
})
|
})
|
||||||
if (list.value.length > 0) {
|
if (list.value.length > 0) {
|
||||||
select.value = navList.value.filter(
|
select.value = navList.value.filter(
|
||||||
(item) => item.name === list.value[0]
|
(item) => item.name === '图层展示'
|
||||||
)[0].key
|
)[0].key
|
||||||
}
|
}
|
||||||
console.log('11111111111111111111111111', list.value, navList.value)
|
console.log('11111111111111111111111111', list.value, navList.value)
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,16 @@
|
||||||
<!-- <span class="label">免费</span> -->
|
<!-- <span class="label">免费</span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div>应用领域：{{ businessArea }}</div>
|
<a-tooltip placement="top">
|
||||||
<!-- 应用描述 -->
|
<template #title>应用领域：{{ applicationArea }}</template>
|
||||||
<div>
|
<div>应用领域：{{ applicationArea }}</div>
|
||||||
{{ props.dataList.description }}
|
</a-tooltip>
|
||||||
</div>
|
<a-tooltip placement="top">
|
||||||
|
<template #title>{{ props.dataList.description }}</template>
|
||||||
|
<div>
|
||||||
|
{{ props.dataList.description }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-if="props.dataList.id">
|
<div class="bottom" v-if="props.dataList.id">
|
||||||
<a-button type="primary" @click="toView()">
|
<a-button type="primary" @click="toView()">
|
||||||
|
|
@ -162,8 +167,8 @@
|
||||||
}
|
}
|
||||||
.lable-father {
|
.lable-father {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 2.5rem;
|
min-width: 3.5rem;
|
||||||
right: -2.8rem;
|
right: -3.5rem;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="content-right-title">
|
<div class="content-right-title">
|
||||||
{{ item.contact }}：{{ item.facilitator.values }}
|
<!-- ：{{ item.facilitator.values }} -->
|
||||||
|
{{ item.contact }}
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right-content">
|
<div class="content-right-content">
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
import { ref, defineProps } from 'vue'
|
import { ref, defineProps } from 'vue'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -58,7 +59,11 @@
|
||||||
//移除方法
|
//移除方法
|
||||||
const removeFunction = (data) => {
|
const removeFunction = (data) => {
|
||||||
dataForm.value.map((val) => {
|
dataForm.value.map((val) => {
|
||||||
val.arr = val.arr.filter((item) => item.id !== data.id)
|
if (val.arr.length > 1) {
|
||||||
|
val.arr = val.arr.filter((item) => item.id !== data.id)
|
||||||
|
} else {
|
||||||
|
message.error('至少需要提交一条能力申请！')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
|
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1152,7 +1152,8 @@
|
||||||
})
|
})
|
||||||
mybus.on('changePage', (page) => {
|
mybus.on('changePage', (page) => {
|
||||||
paramsGetResources.pageNum = page
|
paramsGetResources.pageNum = page
|
||||||
getAppResources()
|
console.log('changePage', paramsGetResources.pageNum)
|
||||||
|
getAppResources('分页查询')
|
||||||
console.log('paramsGetResources', paramsGetResources)
|
console.log('paramsGetResources', paramsGetResources)
|
||||||
})
|
})
|
||||||
mybus.on('changeSelcted', () => {
|
mybus.on('changeSelcted', () => {
|
||||||
|
|
@ -1246,11 +1247,11 @@
|
||||||
let newQuery = JSON.parse(
|
let newQuery = JSON.parse(
|
||||||
JSON.stringify(router.currentRoute.value.query)
|
JSON.stringify(router.currentRoute.value.query)
|
||||||
)
|
)
|
||||||
if (Cardsname.value == name) {
|
// if (Cardsname.value == name) {
|
||||||
Cardsname.value = ''
|
// Cardsname.value = ''
|
||||||
} else {
|
// } else {
|
||||||
Cardsname.value = name
|
Cardsname.value = name
|
||||||
}
|
// }
|
||||||
console.log(
|
console.log(
|
||||||
'更改前url中的select=====================>',
|
'更改前url中的select=====================>',
|
||||||
router.currentRoute.value.query.select
|
router.currentRoute.value.query.select
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="formName.applicationSystem"
|
v-model:value="formName.applicationSystem"
|
||||||
show-search
|
show-search
|
||||||
placeholder="请选择应用系统"
|
placeholder="请输入关键字"
|
||||||
style="width: 200px"
|
style="width: 200px"
|
||||||
:options="systemOptions"
|
:options="systemOptions"
|
||||||
@focus="handleFocus"
|
@focus="handleFocus"
|
||||||
|
|
|
||||||
|
|
@ -172,7 +172,7 @@
|
||||||
router.push({
|
router.push({
|
||||||
path: '/DetailsPageconetent',
|
path: '/DetailsPageconetent',
|
||||||
query: {
|
query: {
|
||||||
select: '',
|
select: '组件服务',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
|
|
@ -197,7 +197,7 @@
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
case '后台管理':
|
case '后台管理':
|
||||||
window.open(window.SITE_CONFIG.backUrl + '/#/bscatalogue-bscatalogue')
|
window.open(window.SITE_CONFIG.backUrl + '/#/login')
|
||||||
window.reload('http://15.2.21.238:9797')
|
window.reload('http://15.2.21.238:9797')
|
||||||
break
|
break
|
||||||
case '赋能案例':
|
case '赋能案例':
|
||||||
|
|
|
||||||
|
|
@ -157,15 +157,6 @@
|
||||||
v-if="item.isCollect == 'true'"
|
v-if="item.isCollect == 'true'"
|
||||||
@click="addCollect(item)"
|
@click="addCollect(item)"
|
||||||
></span>
|
></span>
|
||||||
<a-button
|
|
||||||
style="margin-left: 10px"
|
|
||||||
v-show="
|
|
||||||
cardType == '组件服务' &&
|
|
||||||
findComponentName(item, '智能算法')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
免费试用
|
|
||||||
</a-button>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="shopping pk"
|
class="shopping pk"
|
||||||
|
|
@ -183,15 +174,29 @@
|
||||||
>
|
>
|
||||||
查看详情
|
查看详情
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<!-- <a-button
|
||||||
|
style="margin-left: 10px"
|
||||||
|
v-show="
|
||||||
|
cardType == '组件服务' && findComponentName(item, '智能算法')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
免费试用
|
||||||
|
</a-button> -->
|
||||||
|
<!-- <a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="toView('apply', item)"
|
@click="toView('apply', item)"
|
||||||
v-show="cardType !== '数据资源'"
|
v-show="
|
||||||
|
cardType !== '数据资源' &&
|
||||||
|
!(
|
||||||
|
cardType == '组件服务' &&
|
||||||
|
findComponentName(item, '智能算法')
|
||||||
|
)
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
|
item.shareCondition == '免批申请' ? '免批申请' : '立即申请'
|
||||||
}}
|
}}
|
||||||
</a-button>
|
</a-button> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="right" v-else>
|
<div class="right" v-else>
|
||||||
<a-button type="primary" @click="openVideo(item)">
|
<a-button type="primary" @click="openVideo(item)">
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<span>{{ pagination.total }}</span>
|
<span>{{ pagination.total }}</span>
|
||||||
个
|
个
|
||||||
</p>
|
</p>
|
||||||
<i class="boundary"></i>
|
<!-- <i class="boundary"></i> -->
|
||||||
<p>
|
<p>
|
||||||
已选
|
已选
|
||||||
<span>{{ selectedRowKeys.length }}</span>
|
<span>{{ selectedRowKeys.length }}</span>
|
||||||
|
|
@ -156,6 +156,7 @@
|
||||||
], //显示所有按钮,
|
], //显示所有按钮,
|
||||||
})
|
})
|
||||||
let visible = ref(false)
|
let visible = ref(false)
|
||||||
|
const jjssType = ref(router.currentRoute.value.query.type)
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
total: 0,
|
total: 0,
|
||||||
current: 1,
|
current: 1,
|
||||||
|
|
@ -177,7 +178,12 @@
|
||||||
})
|
})
|
||||||
const showMap = ref(true)
|
const showMap = ref(true)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tabClick(0, '视频资源')
|
if (jjssType.value) {
|
||||||
|
tabClick(0, jjssType.value)
|
||||||
|
} else {
|
||||||
|
tabClick(0, '视频资源')
|
||||||
|
}
|
||||||
|
|
||||||
getCamera()
|
getCamera()
|
||||||
mybus.off('getListByParentId')
|
mybus.off('getListByParentId')
|
||||||
mybus.on('getListByParentId', (parentId) => {
|
mybus.on('getListByParentId', (parentId) => {
|
||||||
|
|
@ -295,7 +301,7 @@
|
||||||
showMap.value = true
|
showMap.value = true
|
||||||
clickList.value[1].content = []
|
clickList.value[1].content = []
|
||||||
clickList.value[indexFather].content[0] = name
|
clickList.value[indexFather].content[0] = name
|
||||||
tabList.value[1].content = ['333333', '213124']
|
tabList.value[1].content = []
|
||||||
} else {
|
} else {
|
||||||
clickList.value[indexFather].content.push(name)
|
clickList.value[indexFather].content.push(name)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-21 11:55:07
|
* @Date: 2022-06-21 11:55:07
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.liangjunhua
|
||||||
* @LastEditTime: 2022-06-22 12:20:59
|
* @LastEditTime: 2022-06-30 18:18:57
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-list-item-meta description="">
|
<a-list-item-meta description="">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="left">
|
<div class="left" @click="read(item)">
|
||||||
{{ item.content }}
|
{{ item.content }}
|
||||||
</div>
|
</div>
|
||||||
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
||||||
|
|
@ -209,28 +209,44 @@
|
||||||
path: url,
|
path: url,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const read = () => {
|
const read = (item) => {
|
||||||
|
// console.log(item)
|
||||||
if (selectData.value.length === 0) {
|
if (selectData.value.length === 0) {
|
||||||
message.error('未选择消息！')
|
message.error('未选择消息！')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
console.log(selectData.value)
|
console.log(selectData.value)
|
||||||
let str = ''
|
// let str = ''
|
||||||
selectData.value.forEach((val, index) => {
|
// selectData.value.forEach((val, index) => {
|
||||||
str += val
|
// str += val
|
||||||
if (index < selectData.value.length - 1) {
|
// if (index < selectData.value.length - 1) {
|
||||||
str += ';'
|
// str += ';'
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
mynoticeRead(str).then((res) => {
|
if (item) {
|
||||||
if (res.data.code == 0) {
|
mynoticeRead(item.id).then((res) => {
|
||||||
message.success('操作成功！')
|
if (res.data.code == 0) {
|
||||||
mybus.emit('getMynotice')
|
message.success('操作成功！')
|
||||||
init()
|
mybus.emit('getMynotice')
|
||||||
} else {
|
init()
|
||||||
message.error('操作失败！')
|
} 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 = () => {
|
const init = () => {
|
||||||
// from 通知 评论 readStatus 0 未读 1 已读
|
// from 通知 评论 readStatus 0 未读 1 已读
|
||||||
|
|
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
<div
|
<div
|
||||||
class="name"
|
class="name"
|
||||||
v-for="(item, index) in jcList"
|
v-for="(item, index) in jcList"
|
||||||
:key="item.id"
|
:key="item.name"
|
||||||
:class="index == 4 ? 'name-last' : ''"
|
:class="index == 2 ? 'name-last' : ''"
|
||||||
@click="selectOne(item.id)"
|
@click="selectOne2(item.name)"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}-{{ item.name }}
|
{{ item.name + '-' + item.num + '项' }}
|
||||||
</div>
|
</div>
|
||||||
<div class="btn" @click="jumpPage('基础设施')">查看更多</div>
|
<div class="btn" @click="jumpPage('基础设施')">查看更多</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -76,7 +76,11 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { pageWithAttrs, getDataResource } from '@/api/home.js'
|
import {
|
||||||
|
pageWithAttrs,
|
||||||
|
getDataResource,
|
||||||
|
selectInfrastructureList,
|
||||||
|
} 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'
|
||||||
|
|
@ -157,24 +161,36 @@
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
let type = paramsGetResources.type
|
let type = paramsGetResources.type
|
||||||
pageWithAttrs(paramsGetResources).then((res) => {
|
if (type == '基础设施') {
|
||||||
console.log('object个数======>', type)
|
selectInfrastructureList().then((res) => {
|
||||||
obj.value = res.data.data.records
|
console.log('基础设施==========>', res.data.data)
|
||||||
switch (type) {
|
for (const key in res.data.data) {
|
||||||
case '组件服务':
|
jcList.value.push({
|
||||||
assignmentMethod('zjNum', res)
|
name: key,
|
||||||
break
|
num: res.data.data[key],
|
||||||
case '应用资源':
|
})
|
||||||
assignmentMethod('yyNum', res)
|
}
|
||||||
break
|
})
|
||||||
case '基础设施':
|
} else {
|
||||||
assignmentMethod('jcNum', res)
|
pageWithAttrs(paramsGetResources).then((res) => {
|
||||||
break
|
console.log('object个数======>', type)
|
||||||
case '知识库':
|
obj.value = res.data.data.records
|
||||||
assignmentMethod('zsNum', res)
|
switch (type) {
|
||||||
break
|
case '组件服务':
|
||||||
}
|
assignmentMethod('zjNum', res)
|
||||||
})
|
break
|
||||||
|
case '应用资源':
|
||||||
|
assignmentMethod('yyNum', res)
|
||||||
|
break
|
||||||
|
case '基础设施':
|
||||||
|
assignmentMethod('jcNum', res)
|
||||||
|
break
|
||||||
|
case '知识库':
|
||||||
|
assignmentMethod('zsNum', res)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const assignmentMethod = (type, res) => {
|
const assignmentMethod = (type, res) => {
|
||||||
|
|
@ -217,6 +233,16 @@
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const selectOne2 = (name) => {
|
||||||
|
console.log('点击===============》', name)
|
||||||
|
router.push({
|
||||||
|
path: '/DetailsPageconetent',
|
||||||
|
query: {
|
||||||
|
type: name,
|
||||||
|
select: '基础设施',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.capability-convergence {
|
.capability-convergence {
|
||||||
|
|
|
||||||
|
|
@ -157,7 +157,7 @@
|
||||||
'数据资源',
|
'数据资源',
|
||||||
'知识库',
|
'知识库',
|
||||||
])
|
])
|
||||||
const select = ref('')
|
const select = ref('组件服务')
|
||||||
let applicationDataList = ref([])
|
let applicationDataList = ref([])
|
||||||
let technosphereDataList = ref([])
|
let technosphereDataList = ref([])
|
||||||
const fabubumen = ref([
|
const fabubumen = ref([
|
||||||
|
|
@ -219,11 +219,11 @@
|
||||||
appLiCation: '',
|
appLiCation: '',
|
||||||
})
|
})
|
||||||
const changeCard = (name) => {
|
const changeCard = (name) => {
|
||||||
if (select.value == name) {
|
// if (select.value == name) {
|
||||||
select.value = ''
|
// select.value = ''
|
||||||
} else {
|
// } else {
|
||||||
select.value = name
|
select.value = name
|
||||||
}
|
// }
|
||||||
snum.value.select = select.value
|
snum.value.select = select.value
|
||||||
}
|
}
|
||||||
function selectCard(value) {
|
function selectCard(value) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="navigation2">
|
<div class="navigation2">
|
||||||
<div class="item">
|
<div class="item" @click="jumpPage('组件服务')">
|
||||||
<div class="img zj"></div>
|
<div class="img zj"></div>
|
||||||
<div class="name">组件服务</div>
|
<div class="name">组件服务</div>
|
||||||
<div class="sl">
|
<div class="sl">
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
个
|
个
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item" @click="jumpPage('应用资源')">
|
||||||
<div class="img yy"></div>
|
<div class="img yy"></div>
|
||||||
<div class="name">应用资源</div>
|
<div class="name">应用资源</div>
|
||||||
<div class="sl">
|
<div class="sl">
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
个
|
个
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item" @click="jumpPage('基础设施')">
|
||||||
<div class="img jc"></div>
|
<div class="img jc"></div>
|
||||||
<div class="name">基础设施</div>
|
<div class="name">基础设施</div>
|
||||||
<div class="sl">
|
<div class="sl">
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
个
|
个
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item" @click="jumpPage('数据资源')">
|
||||||
<div class="img sj"></div>
|
<div class="img sj"></div>
|
||||||
<div class="name">数据资源</div>
|
<div class="name">数据资源</div>
|
||||||
<div class="sl">
|
<div class="sl">
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
项
|
项
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item" @click="jumpPage('知识库')">
|
||||||
<div class="img zs"></div>
|
<div class="img zs"></div>
|
||||||
<div class="name">知识库</div>
|
<div class="name">知识库</div>
|
||||||
<div class="sl">
|
<div class="sl">
|
||||||
|
|
@ -45,6 +45,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { selectTotal } from '@/api/home'
|
import { selectTotal } from '@/api/home'
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useStore } from 'vuex'
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useStore()
|
||||||
// import mybus from '@/myplugins/mybus'
|
// import mybus from '@/myplugins/mybus'
|
||||||
const yyNum = ref('')
|
const yyNum = ref('')
|
||||||
const zjNum = ref('')
|
const zjNum = ref('')
|
||||||
|
|
@ -81,6 +85,23 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
function jumpPage(type) {
|
||||||
|
// 点击内存入store
|
||||||
|
store.commit('home/selectCardsData', {
|
||||||
|
selectCardsnum: type,
|
||||||
|
})
|
||||||
|
console.log(
|
||||||
|
'选中===================>',
|
||||||
|
store.getters['home/selectCardsnum']
|
||||||
|
)
|
||||||
|
// router.push({ path: '/DetailsPageconetent' })
|
||||||
|
router.push({
|
||||||
|
path: '/DetailsPageconetent',
|
||||||
|
query: {
|
||||||
|
select: type,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
// const findZywMessage = () => {
|
// const findZywMessage = () => {
|
||||||
// zywMessage().then((res) => {
|
// zywMessage().then((res) => {
|
||||||
// // console.log('findMessage============>', res)
|
// // console.log('findMessage============>', res)
|
||||||
|
|
@ -149,5 +170,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.item:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
.img {
|
||||||
|
animation: turn 5s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes turn {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: rotateY(90deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: rotateY(270deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotateY(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="img"
|
class="img"
|
||||||
:class="sel == '访问量' ? 'fwl' : sel == '申购量' ? 'sgl' : 'scl'"
|
:class="sel == '浏览量' ? 'fwl' : sel == '申购量' ? 'sgl' : 'scl'"
|
||||||
></span>
|
></span>
|
||||||
<span class="text">{{ sel }}</span>
|
<span class="text">{{ sel }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<div class="img" :class="item.imgType"></div>
|
<div class="img" :class="item.imgType"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="fw" v-if="select == '访问量'">
|
<div class="fw" v-if="select == '浏览量'">
|
||||||
{{ select }}:{{ item.visits }}
|
{{ select }}:{{ item.visits }}
|
||||||
</div>
|
</div>
|
||||||
<div class="fw" v-if="select == '申购量'">
|
<div class="fw" v-if="select == '申购量'">
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const select = ref('访问量')
|
const select = ref('浏览量')
|
||||||
const selList = ref(['访问量', '申购量', '收藏量'])
|
const selList = ref(['浏览量', '申购量', '收藏量'])
|
||||||
const list = ref([])
|
const list = ref([])
|
||||||
|
|
||||||
const paramsGetResources = {
|
const paramsGetResources = {
|
||||||
|
|
@ -74,13 +74,13 @@
|
||||||
type: '',
|
type: '',
|
||||||
name: '',
|
name: '',
|
||||||
infoList: [],
|
infoList: [],
|
||||||
orderField: 'visits', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
orderField: 'visits', // total 综合 visits 浏览量 applyCount 申请量 score 评分 collectCount 收藏量
|
||||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
orderType: 'DESC', // ASC 升序 DESC 降序
|
||||||
}
|
}
|
||||||
const selectChange = (sel) => {
|
const selectChange = (sel) => {
|
||||||
select.value = sel
|
select.value = sel
|
||||||
switch (select.value) {
|
switch (select.value) {
|
||||||
case '访问量':
|
case '浏览量':
|
||||||
paramsGetResources.orderField = 'visits'
|
paramsGetResources.orderField = 'visits'
|
||||||
break
|
break
|
||||||
case '申购量':
|
case '申购量':
|
||||||
|
|
|
||||||
|
|
@ -146,9 +146,9 @@
|
||||||
'智能算法',
|
'智能算法',
|
||||||
'图层服务',
|
'图层服务',
|
||||||
'开发组件',
|
'开发组件',
|
||||||
'办公组件',
|
// '办公组件',
|
||||||
'业务组件',
|
'业务组件',
|
||||||
'其他',
|
// '其他',
|
||||||
])
|
])
|
||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
const showModal = () => {
|
const showModal = () => {
|
||||||
|
|
|
||||||
|
|
@ -367,20 +367,34 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!shifoushizujian">
|
<div v-if="!shifoushizujian">
|
||||||
<a-form-item label="组件名称">
|
<a-form-item label="组件名称" v-if="algorithmShow">
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="dataForm.data.name"
|
v-model:value="dataForm.data.name"
|
||||||
disabled="true"
|
disabled="true"
|
||||||
placeholder="组件名称"
|
placeholder="组件名称"
|
||||||
></a-input>
|
></a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="应用描述">
|
<a-form-item label="算法名称" v-if="nameNotShow">
|
||||||
|
<a-input
|
||||||
|
v-model:value="dataForm.data.name"
|
||||||
|
disabled="true"
|
||||||
|
placeholder="算法名称"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="应用描述" v-if="algorithmShow">
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="dataForm.data.description"
|
v-model:value="dataForm.data.description"
|
||||||
disabled="true"
|
disabled="true"
|
||||||
placeholder="应用描述"
|
placeholder="应用描述"
|
||||||
></a-input>
|
></a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
<a-form-item label="算法描述" v-if="nameNotShow">
|
||||||
|
<a-input
|
||||||
|
v-model:value="dataForm.data.description"
|
||||||
|
disabled="true"
|
||||||
|
placeholder="算法描述"
|
||||||
|
></a-input>
|
||||||
|
</a-form-item>
|
||||||
<a-form-item label="部门联系人">
|
<a-form-item label="部门联系人">
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="dataForm.data.deptContacts"
|
v-model:value="dataForm.data.deptContacts"
|
||||||
|
|
@ -551,6 +565,8 @@
|
||||||
id: '',
|
id: '',
|
||||||
})
|
})
|
||||||
let shifoushizujian = ref('')
|
let shifoushizujian = ref('')
|
||||||
|
let nameNotShow = ref('')
|
||||||
|
let algorithmShow = ref('')
|
||||||
const dataForm = reactive({ data: {} })
|
const dataForm = reactive({ data: {} })
|
||||||
//流转详情
|
//流转详情
|
||||||
const dataSource = reactive({ data: [] })
|
const dataSource = reactive({ data: [] })
|
||||||
|
|
@ -637,6 +653,17 @@
|
||||||
shifoushizujian.value = true
|
shifoushizujian.value = true
|
||||||
} else {
|
} else {
|
||||||
shifoushizujian.value = false
|
shifoushizujian.value = false
|
||||||
|
console.log(res.data.data.resourceDTO)
|
||||||
|
debugger
|
||||||
|
res.data.data.resourceDTO.infoList.forEach((val) => {
|
||||||
|
console.log(val, '111111111111111111111111')
|
||||||
|
if (val.attrValue === '智能算法') {
|
||||||
|
nameNotShow.value = true
|
||||||
|
algorithmShow.value = false
|
||||||
|
console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
|
||||||
|
debugger
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
console.log('222222222222', dataForm.data)
|
console.log('222222222222', dataForm.data)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,8 @@
|
||||||
<a-tooltip>
|
<a-tooltip>
|
||||||
<template #title>{{ item.name }}</template>
|
<template #title>{{ item.name }}</template>
|
||||||
<div class="content-body-title">
|
<div class="content-body-title">
|
||||||
名称：{{ item.name }}
|
<span v-if="item.name ==='申请摄像头列表'" @click="showVideoList(item)"> 名称：{{ item.name }} </span>
|
||||||
|
<span v-else> 名称：{{ item.name }} </span>
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
|
|
@ -71,7 +72,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<p class="content-body-content-son">
|
<p class="content-body-content-son">
|
||||||
申请结果：{{ item.comment || '暂无' }}
|
<span v-if="item.name ==='申请摄像头列表'">申请结果：{{ '列表地址：' + backUrl + 'resource/getApplyCameraList/' + item.processInstanceId+';'+ '视频流地址：'+backUrl + '/resource/hls/getHls/?channelId='}}</span>
|
||||||
|
<span v-else>申请结果：{{ item.comment || '暂无' }}</span>
|
||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
|
|
@ -220,6 +222,19 @@
|
||||||
>
|
>
|
||||||
<a-input v-model:value="reason" placeholder="请输入下架原因" />
|
<a-input v-model:value="reason" placeholder="请输入下架原因" />
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="videoVisible"
|
||||||
|
title="已申请摄像头列表"
|
||||||
|
@ok="videoVisible=false"
|
||||||
|
>
|
||||||
|
<a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{defaultPageSize: 6}">
|
||||||
|
<template #bodyCell="{ column, text }">
|
||||||
|
<!-- <template>
|
||||||
|
<a>{{ text }}</a>
|
||||||
|
</template> -->
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -231,7 +246,7 @@
|
||||||
getTaskHandleDetailInfo,
|
getTaskHandleDetailInfo,
|
||||||
// getProcDefBizRoute,
|
// getProcDefBizRoute,
|
||||||
} from '@/api/personalCenter'
|
} from '@/api/personalCenter'
|
||||||
import { updateRes, relaunch, selectOne } from '@/api/home'
|
import { updateRes, relaunch, selectOne,getApplyCameraList } from '@/api/home'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
|
import ApplyDetails from '@/views/personalCenter/components/ApplyDetails'
|
||||||
|
|
@ -241,6 +256,40 @@
|
||||||
// const contentListClone = reactive({ data: [] })
|
// const contentListClone = reactive({ data: [] })
|
||||||
// let contentListLength = contentList.length
|
// let contentListLength = contentList.length
|
||||||
let tabIndex = ref(0)
|
let tabIndex = ref(0)
|
||||||
|
const videoVisible = ref(false)
|
||||||
|
const columns = ref([{
|
||||||
|
title: '摄像头名称',
|
||||||
|
dataIndex: 'name'
|
||||||
|
}])
|
||||||
|
const xVideoList = ref([{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},{
|
||||||
|
name: '111'
|
||||||
|
}, {
|
||||||
|
name: '222'
|
||||||
|
},])
|
||||||
function tabqiehuan(item, index) {
|
function tabqiehuan(item, index) {
|
||||||
// debugger
|
// debugger
|
||||||
tabIndex.value = index
|
tabIndex.value = index
|
||||||
|
|
@ -272,6 +321,7 @@
|
||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
const delObj = ref({})
|
const delObj = ref({})
|
||||||
const taskId = ref('')
|
const taskId = ref('')
|
||||||
|
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
|
||||||
const showDetail = (item) => {
|
const showDetail = (item) => {
|
||||||
console.log('showDetail', item)
|
console.log('showDetail', item)
|
||||||
// getProcDefBizRoute(item.processDefinitionId)
|
// getProcDefBizRoute(item.processDefinitionId)
|
||||||
|
|
@ -281,6 +331,12 @@
|
||||||
processInstanceId.value = item.processInstanceId
|
processInstanceId.value = item.processInstanceId
|
||||||
resourceId.value = item.resourceId
|
resourceId.value = item.resourceId
|
||||||
}
|
}
|
||||||
|
const showVideoList = (item) => {
|
||||||
|
// getApplyCameraList(item.processInstanceId).then(res=>{
|
||||||
|
// console.log('res', res)
|
||||||
|
// })
|
||||||
|
videoVisible.value = true
|
||||||
|
}
|
||||||
const copyComment = (data) => {
|
const copyComment = (data) => {
|
||||||
let url = data
|
let url = data
|
||||||
let oInput = document.createElement('input')
|
let oInput = document.createElement('input')
|
||||||
|
|
|
||||||
|
|
@ -318,9 +318,9 @@
|
||||||
'智能算法',
|
'智能算法',
|
||||||
'图层服务',
|
'图层服务',
|
||||||
'开发组件',
|
'开发组件',
|
||||||
'办公组件',
|
// '办公组件',
|
||||||
'业务组件',
|
'业务组件',
|
||||||
'其他',
|
// '其他',
|
||||||
])
|
])
|
||||||
let tabname = ref('组件服务')
|
let tabname = ref('组件服务')
|
||||||
function tabqiehuan(item, index) {
|
function tabqiehuan(item, index) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue