Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
a0049873
commit
6e0b7d3e88
|
|
@ -4,31 +4,697 @@
|
|||
<span class='page-introduction'>发布情况统计</span>
|
||||
<div class='container-body'>
|
||||
<div class='container-body1'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
|
||||
<div id="main1" style="width: 400px;height:230px;"></div>
|
||||
</div>
|
||||
<div class='container-body2'>
|
||||
<span style='font-size:18px;color;#000000;'>发布量情况分布</span>
|
||||
<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>
|
||||
<span style='font-size:18px;color;#000000;'>贡献组件被应用使用数量分布</span>
|
||||
<div id="main3" style="width: 400px;height:230px;"></div>
|
||||
</div>
|
||||
<div class='container-body4'>
|
||||
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||
<span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
|
||||
<div id="main4" style="width: 650px;height:230px;"></div>
|
||||
</div>
|
||||
<div class='container-body5'>
|
||||
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||||
<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.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='container-body6'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
<span style='font-size:18px;color;#000000;'>评分分布情况</span>
|
||||
<div id="main6" style="width: 400px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body7'>
|
||||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||
<span style='font-size:18px;color;#000000;'>发布端应用分布情况</span>
|
||||
<div id="main7" style="width: 300px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body8'>
|
||||
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
|
||||
<div id="main8" style="width: 300px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body9'>
|
||||
<span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
|
||||
<div id="main9" style="width: 250px;height:200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
this.myEcharts3()
|
||||
this.myEcharts4()
|
||||
this.myEcharts6()
|
||||
this.myEcharts7()
|
||||
this.myEcharts8()
|
||||
this.myEcharts9()
|
||||
},
|
||||
methods:{
|
||||
myEcharts1(){
|
||||
var chartDom = document.getElementById('main1');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['算法', '图层', '开发', '业务'],
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
color:['#f5f5f5']
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:'次数',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
interval:20, //控制y轴的刻度
|
||||
type: 'value',
|
||||
axisTick:{ //控制y轴的刻度
|
||||
show:false
|
||||
},
|
||||
nameTextStyle:{
|
||||
color:"#999999"
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0.8)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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'
|
||||
},
|
||||
// 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');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
grid: {
|
||||
bottom: '23%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['算法', '图层', '开发', '业务'],
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
color:['#f5f5f5']
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//x轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:'应用数',
|
||||
nameTextStyle:{
|
||||
color:"#999999"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
interval:20, //控制y轴的刻度
|
||||
type: 'value',
|
||||
axisTick:{ //控制y轴的刻度
|
||||
show:false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0.8)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts4(){
|
||||
var chartDom = document.getElementById('main4');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
grid: {
|
||||
right:'15%',
|
||||
bottom: '23%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
color:['#f5f5f5']
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:'数量',
|
||||
nameTextStyle:{
|
||||
color:"#999999"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
interval:20, //控制y轴的刻度
|
||||
type: 'value',
|
||||
axisTick:{ //控制y轴的刻度
|
||||
show:false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#999999",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [60, 90, 50, 80, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0.8)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts6(){
|
||||
var chartDom = document.getElementById('main6');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '55%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
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);
|
||||
},
|
||||
myEcharts7(){
|
||||
var chartDom = document.getElementById('main7');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,0,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用名称1' },
|
||||
{ value: 735, name: '应用名称2' },
|
||||
{ value: 580, name: '应用名称3' },
|
||||
{ value: 484, name: '应用名称4' },
|
||||
{ value: 300, name: '应用名称5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts8(){
|
||||
var chartDom = document.getElementById('main8');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '40%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['19%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用领域1' },
|
||||
{ value: 735, name: '应用领域2' },
|
||||
{ value: 580, name: '应用领域3' },
|
||||
{ value: 484, name: '应用领域4' },
|
||||
{ value: 300, name: '应用领域5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
myEcharts9(){
|
||||
var chartDom = document.getElementById('main9');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: '',
|
||||
top: '14%',
|
||||
left: '47%',
|
||||
width:"auto",
|
||||
height:"auto",
|
||||
orient: "vertical",
|
||||
itemGap: 15,
|
||||
itemWidth: 14,
|
||||
// 使用回调函数
|
||||
formatter: function(name) {
|
||||
var data = option.series[0].data;
|
||||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
return `${name} ${p}%`;
|
||||
},
|
||||
itemStyle:{},
|
||||
textStyle: {
|
||||
color: "#666666",
|
||||
fontSize:12,
|
||||
padding:[0,8,0,10]
|
||||
},
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['30%', '45%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '应用状态1' },
|
||||
{ value: 735, name: '应用状态2' },
|
||||
{ value: 580, name: '应用状态3' },
|
||||
{ value: 484, name: '应用状态4' },
|
||||
{ value: 300, name: '应用状态5' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
|
|
@ -100,11 +766,53 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
.container-body7{
|
||||
width:860px;
|
||||
width:287px;
|
||||
height:250px;
|
||||
background-color: #ffffff;
|
||||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container-body8{
|
||||
width:287px;
|
||||
height:250px;
|
||||
background-color: #ffffff;
|
||||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.container-body9{
|
||||
width:286px;
|
||||
height:250px;
|
||||
background-color: #ffffff;
|
||||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.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>
|
||||
|
|
@ -16,13 +16,35 @@
|
|||
<div id="main3" 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.count}}</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.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='footer'>
|
||||
<div class='footer-left' ></div>
|
||||
|
|
@ -35,6 +57,15 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||||
widthList:['90px','80px','70px','60px','50px'],
|
||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||||
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
|
||||
applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.myEcharts1()
|
||||
this.myEcharts2()
|
||||
|
|
@ -95,13 +126,13 @@ export default {
|
|||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -173,13 +204,13 @@ export default {
|
|||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -250,13 +281,13 @@ export default {
|
|||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -355,4 +386,30 @@ export default {
|
|||
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>
|
||||
|
|
@ -0,0 +1,417 @@
|
|||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
|
||||
<!-- 申请人详情 -->
|
||||
<div>
|
||||
<h3>申请人信息</h3>
|
||||
<div class="big-BOX">
|
||||
<p>
|
||||
<span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
|
||||
<span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
|
||||
<span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
|
||||
<span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
|
||||
<span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请能力 -->
|
||||
<div class="AbilityApply">
|
||||
<h3>申请能力</h3>
|
||||
<ul v-for="item in dataList" :key="item.id">
|
||||
<li class="title">{{item.address}}</li>
|
||||
<li class="clearfix">
|
||||
<img
|
||||
src="~@/assets/img/imgLeft.png"
|
||||
/>
|
||||
<div>
|
||||
<h2>{{item.name}}<span>{{item.type}}</span></h2>
|
||||
<p>{{item.describe}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 流程综合组件 -->
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple> -->
|
||||
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr">
|
||||
<h3>审批</h3>
|
||||
<div>
|
||||
<el-radio-group v-model="agreeOrList" style="width:230px;">
|
||||
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意内容"></el-input>
|
||||
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回内容"></el-input>
|
||||
<el-button class="inputBule" @click="agreeOrNot">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail-import></ren-process-detail-import>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: true,
|
||||
// 表单属性是否可编辑
|
||||
// fieldDisabled: false,
|
||||
// dataForm: {
|
||||
// id: '',
|
||||
// user: '',
|
||||
// phone: '',
|
||||
// unit: '',
|
||||
// area: '',
|
||||
// system: '',
|
||||
// scene: '',
|
||||
// basis: ''
|
||||
// }
|
||||
dataForm: {
|
||||
id: '',
|
||||
content: []
|
||||
},
|
||||
dataList: [
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
}
|
||||
],
|
||||
inputAgree: '',
|
||||
inputNo: '',
|
||||
agreeOrList: '同意'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
this.dataForm.id = this.$route.params.businessKey
|
||||
console.log(this.dataForm, 'ela')
|
||||
this.init()
|
||||
// 流程回调
|
||||
var callbacks = {
|
||||
startProcessSuccessCallback: this.closeCurrentTab,
|
||||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||||
formSaveSuccessCallback: null,
|
||||
formSaveErrorCallback: null
|
||||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
// dataRule () {
|
||||
// return {
|
||||
// inputAgree: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ],
|
||||
// inputNo: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
RenProcessDetailImport
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
// this.visible = true
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.dataForm.resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
// this.fieldDisabled = true
|
||||
this.getInfo()
|
||||
console.log(this.dataForm, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取信息
|
||||
getInfo () {
|
||||
this.$http
|
||||
.get(`/demanData/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data)
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log(res.data, 'elas')
|
||||
this.dataForm.content = res.data
|
||||
console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 申请能力
|
||||
applyData () {
|
||||
this.$http
|
||||
.get(`/resource/select/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data, 'wh')
|
||||
// return this.$message.error(res.msg)
|
||||
}
|
||||
// console.log(res.data, 'elas')
|
||||
// this.dataForm.content = res.data
|
||||
// console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
// 同意与退回
|
||||
agreeOrNot () {
|
||||
if (this.agreeOrList === '同意') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputAgree
|
||||
})
|
||||
console.log(params)
|
||||
this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res)
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}).catch(() => {})
|
||||
} else if (this.agreeOrList === '退回') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputNo
|
||||
})
|
||||
this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {}
|
||||
},
|
||||
mounted () {
|
||||
this.applyData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .big-BOX{
|
||||
background:rgba(244,245,248,0.8);
|
||||
padding:24px;
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121
|
||||
}
|
||||
p{
|
||||
width:78%;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
color:#212121;
|
||||
font-size:14px;
|
||||
span{
|
||||
display:inline-block;
|
||||
margin-left:8px;
|
||||
line-height:32px;
|
||||
span{
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
p:last-of-type{
|
||||
margin-top:16px;
|
||||
width:100%;
|
||||
span{
|
||||
display:flex;
|
||||
span{
|
||||
padding-left:12px;
|
||||
height:32px;
|
||||
background:rgba(232,234,239,1);
|
||||
border-radius:2px;
|
||||
button{
|
||||
background:unset;
|
||||
border:0;
|
||||
color:#0558e1;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AbilityApply{
|
||||
margin-top:32px;
|
||||
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121;
|
||||
border-bottom:1px solid #dddee1;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
ul{
|
||||
padding-left: 0px;
|
||||
li{
|
||||
list-style:none;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display:flex;
|
||||
img{
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
div{
|
||||
margin-left:16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2{
|
||||
margin-bottom:20px;
|
||||
font-size:20px;
|
||||
color:#000;
|
||||
display:flex;
|
||||
span{
|
||||
display:block;
|
||||
font-size:14px;
|
||||
color:#ffffff;
|
||||
margin-left:8px;
|
||||
background:rgba(0,184,230,0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
.title{
|
||||
color:#0558e1;
|
||||
font-size:18px;
|
||||
padding-bottom:0;
|
||||
border-bottom: 0;
|
||||
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr>div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.el-input{
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
::v-deep .agreeOr>div:last-of-type{
|
||||
margin-top:15px;
|
||||
}
|
||||
.blueAll{
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
}
|
||||
.inputBule{
|
||||
width:55px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
::v-deep .is-active{
|
||||
background:#ffffff;
|
||||
color:#0558e1;
|
||||
}
|
||||
.redAll{
|
||||
margin-left:10px;
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
border:1px solid #e83a48;
|
||||
background:#ffffff;
|
||||
color:#e83a48;
|
||||
margin-left:10px;
|
||||
}
|
||||
:v-deep .el-radio-button__inner{
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
.blueInput{
|
||||
width:55px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,134 +1,106 @@
|
|||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
|
||||
<!-- 申请人详情 -->
|
||||
<div>
|
||||
<h3>申请人信息</h3>
|
||||
<div class="big-BOX">
|
||||
<p>
|
||||
<span>申请人：<span> {{dataForm.content.applyUserName || '--'}}</span></span>
|
||||
<span>电话：<span>{{dataForm.content.applyUserPhone || '--'}}</span></span>
|
||||
<span>单位：<span>{{dataForm.content.applyUserDeptName || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>应用领域：<span>{{dataForm.content.detailsField || '--'}}</span></span>
|
||||
<span> 需求类型：<span> {{dataForm.content.detailsType || '--'}}</span></span>
|
||||
<span> 需求标题： <span> {{dataForm.content.demandSubject || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span> 需求描述：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请能力 -->
|
||||
<div class="AbilityApply">
|
||||
<h3>申请能力</h3>
|
||||
<ul v-for="item in dataList" :key="item.id">
|
||||
<li class="title">{{item.address}}</li>
|
||||
<li class="clearfix">
|
||||
<img
|
||||
src="~@/assets/img/imgLeft.png"
|
||||
/>
|
||||
<div>
|
||||
<h2>{{item.name}}<span>{{item.type}}</span></h2>
|
||||
<p>{{item.describe}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
|
||||
>
|
||||
<el-form-item label="申请人" prop="user">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请电话" prop="phone">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserPhone"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请人电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请单位" prop="unit">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserDeptName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请单位"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求标题" prop="area">
|
||||
<el-input
|
||||
v-model="dataForm.demandSubject"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求类型" prop="system">
|
||||
<el-input
|
||||
v-model="dataForm.detailsType"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求类型"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用领域" prop="scene">
|
||||
<el-input
|
||||
v-model="dataForm.detailsField"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="应用领域"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求描述" prop="basis">
|
||||
<el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
|
||||
<el-input
|
||||
v-model="dataForm.demandDetails"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求描述"
|
||||
></el-input>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
|
||||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 流程综合组件 -->
|
||||
<!-- <ren-process-multiple
|
||||
<ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple> -->
|
||||
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr">
|
||||
<h3>审批</h3>
|
||||
<div>
|
||||
<el-radio-group v-model="agreeOrList" style="width:230px;">
|
||||
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意内容"></el-input>
|
||||
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回内容"></el-input>
|
||||
<el-button class="inputBule" @click="agreeOrNot">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail-import></ren-process-detail-import>
|
||||
></ren-process-multiple>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: true,
|
||||
visible: false,
|
||||
// 表单属性是否可编辑
|
||||
// fieldDisabled: false,
|
||||
// dataForm: {
|
||||
// id: '',
|
||||
// user: '',
|
||||
// phone: '',
|
||||
// unit: '',
|
||||
// area: '',
|
||||
// system: '',
|
||||
// scene: '',
|
||||
// basis: ''
|
||||
// }
|
||||
fieldDisabled: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
content: []
|
||||
},
|
||||
dataList: [
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
user: '',
|
||||
phone: '',
|
||||
unit: '',
|
||||
area: '',
|
||||
system: '',
|
||||
scene: '',
|
||||
basis: ''
|
||||
}
|
||||
],
|
||||
inputAgree: '',
|
||||
inputNo: '',
|
||||
agreeOrList: '同意'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
this.dataForm.id = this.$route.params.businessKey
|
||||
console.log(this.dataForm, 'ela')
|
||||
console.log(this.$route.params)
|
||||
this.init()
|
||||
// 流程回调
|
||||
var callbacks = {
|
||||
|
|
@ -143,30 +115,37 @@ export default {
|
|||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
// dataRule () {
|
||||
// return {
|
||||
// inputAgree: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ],
|
||||
// inputNo: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
RenProcessDetailImport
|
||||
dataRule () {
|
||||
return {
|
||||
user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入申请人电话', trigger: 'blur' },
|
||||
{
|
||||
type: 'string',
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
|
||||
system: [
|
||||
{ required: true, message: '请输入申请应用', trigger: 'blur' }
|
||||
],
|
||||
scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
|
||||
basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
// this.visible = true
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.dataForm.resetFields()
|
||||
this.$refs.dataForm.resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
// this.fieldDisabled = true
|
||||
this.fieldDisabled = true
|
||||
this.getInfo()
|
||||
console.log(this.dataForm, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -176,242 +155,21 @@ export default {
|
|||
.get(`/demanData/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data)
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
console.log(res.data, 'elas')
|
||||
this.dataForm.content = res.data
|
||||
console.log(this.dataForm, 'ela')
|
||||
this.dataForm = {
|
||||
...this.dataForm,
|
||||
...res.data
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 申请能力
|
||||
applyData () {
|
||||
this.$http
|
||||
.get(`/resource/select/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data, 'wh')
|
||||
// return this.$message.error(res.msg)
|
||||
}
|
||||
// console.log(res.data, 'elas')
|
||||
// this.dataForm.content = res.data
|
||||
// console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
// 同意与退回
|
||||
agreeOrNot () {
|
||||
if (this.agreeOrList === '同意') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputAgree
|
||||
})
|
||||
console.log(params)
|
||||
this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res)
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}).catch(() => {})
|
||||
} else if (this.agreeOrList === '退回') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputNo
|
||||
})
|
||||
this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {}
|
||||
},
|
||||
mounted () {
|
||||
this.applyData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .big-BOX{
|
||||
background:rgba(244,245,248,0.8);
|
||||
padding:24px;
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121
|
||||
}
|
||||
p{
|
||||
width:78%;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
color:#212121;
|
||||
font-size:14px;
|
||||
span{
|
||||
display:inline-block;
|
||||
margin-left:8px;
|
||||
line-height:32px;
|
||||
span{
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
p:last-of-type{
|
||||
margin-top:16px;
|
||||
width:100%;
|
||||
span{
|
||||
display:flex;
|
||||
span{
|
||||
padding-left:12px;
|
||||
height:32px;
|
||||
background:rgba(232,234,239,1);
|
||||
border-radius:2px;
|
||||
button{
|
||||
background:unset;
|
||||
border:0;
|
||||
color:#0558e1;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AbilityApply{
|
||||
margin-top:32px;
|
||||
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121;
|
||||
border-bottom:1px solid #dddee1;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
ul{
|
||||
padding-left: 0px;
|
||||
li{
|
||||
list-style:none;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display:flex;
|
||||
img{
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
div{
|
||||
margin-left:16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2{
|
||||
margin-bottom:20px;
|
||||
font-size:20px;
|
||||
color:#000;
|
||||
display:flex;
|
||||
span{
|
||||
display:block;
|
||||
font-size:14px;
|
||||
color:#ffffff;
|
||||
margin-left:8px;
|
||||
background:rgba(0,184,230,0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
.title{
|
||||
color:#0558e1;
|
||||
font-size:18px;
|
||||
padding-bottom:0;
|
||||
border-bottom: 0;
|
||||
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr>div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.el-input{
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
::v-deep .agreeOr>div:last-of-type{
|
||||
margin-top:15px;
|
||||
}
|
||||
.blueAll{
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
}
|
||||
.inputBule{
|
||||
width:55px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
::v-deep .is-active{
|
||||
background:#ffffff;
|
||||
color:#0558e1;
|
||||
}
|
||||
.redAll{
|
||||
margin-left:10px;
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
border:1px solid #e83a48;
|
||||
background:#ffffff;
|
||||
color:#e83a48;
|
||||
margin-left:10px;
|
||||
}
|
||||
:v-deep .el-radio-button__inner{
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
.blueInput{
|
||||
width:55px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,175 +0,0 @@
|
|||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmitHandle()"
|
||||
:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
|
||||
>
|
||||
<el-form-item label="申请人" prop="user">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请电话" prop="phone">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserPhone"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请人电话"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请单位" prop="unit">
|
||||
<el-input
|
||||
v-model="dataForm.applyUserDeptName"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="请输入申请单位"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求标题" prop="area">
|
||||
<el-input
|
||||
v-model="dataForm.demandSubject"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求标题"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求类型" prop="system">
|
||||
<el-input
|
||||
v-model="dataForm.detailsType"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求类型"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用领域" prop="scene">
|
||||
<el-input
|
||||
v-model="dataForm.detailsField"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="应用领域"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="需求描述" prop="basis">
|
||||
<el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
|
||||
<el-input
|
||||
v-model="dataForm.demandDetails"
|
||||
:disabled="fieldDisabled"
|
||||
placeholder="需求描述"
|
||||
></el-input>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
|
||||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 流程综合组件 -->
|
||||
<ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
user: '',
|
||||
phone: '',
|
||||
unit: '',
|
||||
area: '',
|
||||
system: '',
|
||||
scene: '',
|
||||
basis: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
this.dataForm.id = this.$route.params.businessKey
|
||||
console.log(this.$route.params)
|
||||
this.init()
|
||||
// 流程回调
|
||||
var callbacks = {
|
||||
startProcessSuccessCallback: this.closeCurrentTab,
|
||||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||||
formSaveSuccessCallback: null,
|
||||
formSaveErrorCallback: null
|
||||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
dataRule () {
|
||||
return {
|
||||
user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入申请人电话', trigger: 'blur' },
|
||||
{
|
||||
type: 'string',
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
|
||||
system: [
|
||||
{ required: true, message: '请输入申请应用', trigger: 'blur' }
|
||||
],
|
||||
scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
|
||||
basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm.resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
this.fieldDisabled = true
|
||||
this.getInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取信息
|
||||
getInfo () {
|
||||
this.$http
|
||||
.get(`/demanData/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = {
|
||||
...this.dataForm,
|
||||
...res.data
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
|
||||
<el-form-item label="申请人" prop="user">
|
||||
<el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请电话" prop="phone">
|
||||
<el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请单位" prop="unit">
|
||||
<el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所在地区" prop="area">
|
||||
<el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="申请应用" prop="system">
|
||||
<el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用场景" prop="scene">
|
||||
<el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请依据" prop="basis">
|
||||
<el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
|
||||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 流程综合组件 -->
|
||||
<ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
user: '',
|
||||
phone: '',
|
||||
unit: '',
|
||||
area: '',
|
||||
system: '',
|
||||
scene: '',
|
||||
basis: '',
|
||||
enclosure: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
this.dataForm.id = this.$route.params.businessKey
|
||||
this.init()
|
||||
// 流程回调
|
||||
var callbacks = {
|
||||
startProcessSuccessCallback: this.closeCurrentTab,
|
||||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||||
formSaveSuccessCallback: null,
|
||||
formSaveErrorCallback: null
|
||||
}
|
||||
// 初始化综合组件
|
||||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
dataRule () {
|
||||
return {
|
||||
user: [
|
||||
{ required: true, message: '请输入申请人', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入申请人电话', trigger: 'blur' },
|
||||
{ type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: '请输入申请单位', trigger: 'blur' }
|
||||
],
|
||||
// area: [
|
||||
// { required: true, message: '请输入所在地区', trigger: 'blur' }
|
||||
// ],
|
||||
system: [
|
||||
{ required: true, message: '请输入申请应用', trigger: 'blur' }
|
||||
],
|
||||
scene: [
|
||||
{ required: true, message: '请输入应用场景', trigger: 'blur' }
|
||||
],
|
||||
basis: [
|
||||
{ required: true, message: '请输入申请依据', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm.resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
this.fieldDisabled = true
|
||||
this.getInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取信息
|
||||
getInfo () {
|
||||
this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = {
|
||||
...this.dataForm,
|
||||
...res.data
|
||||
}
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,64 +1,134 @@
|
|||
<!-- 流程业务表单 -->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
|
||||
<el-form-item label="申请人" prop="user">
|
||||
<el-input v-model="dataForm.user" :disabled="fieldDisabled" placeholder="请输入申请人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请电话" prop="phone">
|
||||
<el-input v-model="dataForm.phone" :disabled="fieldDisabled" placeholder="请输入申请人电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请单位" prop="unit">
|
||||
<el-input v-model="dataForm.unit" :disabled="fieldDisabled" placeholder="请输入申请单位"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所在地区" prop="area">
|
||||
<el-input v-model="dataForm.area" :disabled="fieldDisabled" placeholder="请输入所在地区"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="申请应用" prop="system">
|
||||
<el-input v-model="dataForm.system" :disabled="fieldDisabled" placeholder="请输入申请应用"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用场景" prop="scene">
|
||||
<el-input v-model="dataForm.scene" :disabled="fieldDisabled" placeholder="请输入应用场景"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请依据" prop="basis">
|
||||
<el-input v-model="dataForm.basis" :disabled="fieldDisabled" placeholder="请输入申请依据"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
|
||||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 申请人详情 -->
|
||||
<div>
|
||||
<h3>申请人信息</h3>
|
||||
<div class="big-BOX">
|
||||
<p>
|
||||
<span>申请人：<span> {{dataForm.content.user || '--'}}</span></span>
|
||||
<span>电话：<span>{{dataForm.content.phone || '--'}}</span></span>
|
||||
<span>单位：<span>{{dataForm.content.unit || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>申请应用：<span>{{dataForm.content.system || '--'}}</span></span>
|
||||
<span> 应用场景：<span> {{dataForm.content.scene || '--'}}</span></span>
|
||||
<span> 申请依据： <span> {{dataForm.content.basis || '--'}}</span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span> 能力应用期望效果：<span> {{dataForm.content.demandDetails|| '--'}}</span></span>
|
||||
</p>
|
||||
<p v-if="dataForm.content.enclosure">
|
||||
<span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button @click="downloadFile(dataForm.content.enclosure)">下载</button></span></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请能力 -->
|
||||
<div class="AbilityApply">
|
||||
<h3>申请能力</h3>
|
||||
<ul v-for="item in dataList" :key="item.id">
|
||||
<li class="title">{{item.address}}</li>
|
||||
<li class="clearfix">
|
||||
<img
|
||||
src="~@/assets/img/imgLeft.png"
|
||||
/>
|
||||
<div>
|
||||
<h2>{{item.name}}<span>{{item.type}}</span></h2>
|
||||
<p>{{item.describe}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 流程综合组件 -->
|
||||
<ren-process-multiple v-if="processVisible" updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId" saveFormUrl="/processForm/tabilityapplication" dataFormName="dataForm" ref="renProcessMultiple" ></ren-process-multiple>
|
||||
<!-- <ren-process-multiple
|
||||
v-if="processVisible"
|
||||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||||
saveFormUrl="/processForm/tabilityapplication"
|
||||
dataFormName="dataForm"
|
||||
ref="renProcessMultiple"
|
||||
></ren-process-multiple> -->
|
||||
|
||||
<!-- 审批 -->
|
||||
<div class="agreeOr">
|
||||
<h3>审批</h3>
|
||||
<div>
|
||||
<el-radio-group v-model="agreeOrList" style="width:230px;">
|
||||
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
|
||||
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
|
||||
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
|
||||
<el-button class="inputBule" @click="agreeOrNot">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流程详情 -->
|
||||
<ren-process-detail-import></ren-process-detail-import>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入工作流公共方法
|
||||
import processModule from '@/mixins/process-module'
|
||||
import qs from 'qs'
|
||||
import RenProcessDetailImport from '@/components/ren-process-detail/src/ren-process-detail-import'
|
||||
export default {
|
||||
// 注入公共方法
|
||||
mixins: [processModule],
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
visible: true,
|
||||
// 表单属性是否可编辑
|
||||
fieldDisabled: false,
|
||||
// fieldDisabled: false,
|
||||
// dataForm: {
|
||||
// id: '',
|
||||
// user: '',
|
||||
// phone: '',
|
||||
// unit: '',
|
||||
// area: '',
|
||||
// system: '',
|
||||
// scene: '',
|
||||
// basis: ''
|
||||
// }
|
||||
dataForm: {
|
||||
id: '',
|
||||
user: '',
|
||||
phone: '',
|
||||
unit: '',
|
||||
area: '',
|
||||
system: '',
|
||||
scene: '',
|
||||
basis: '',
|
||||
enclosure: ''
|
||||
content: []
|
||||
},
|
||||
dataList: [
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
},
|
||||
{
|
||||
// img: '~@/assets/img/imgLeft.png',
|
||||
address: '青岛市应急管理局',
|
||||
name: '组件名称',
|
||||
type: '组件服务',
|
||||
describe: '资源描述资源描述资源描述资源描述资源描述资源描述'
|
||||
}
|
||||
],
|
||||
inputAgree: '',
|
||||
inputNo: '',
|
||||
agreeOrList: '同意'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 将业务KEY赋值给表单
|
||||
this.dataForm.id = this.$route.params.businessKey
|
||||
console.log(this.dataForm, 'ela')
|
||||
this.init()
|
||||
// 流程回调
|
||||
var callbacks = {
|
||||
|
|
@ -73,64 +143,278 @@ export default {
|
|||
this.initProcessMultiple(callbacks)
|
||||
},
|
||||
computed: {
|
||||
dataRule () {
|
||||
return {
|
||||
user: [
|
||||
{ required: true, message: '请输入申请人', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入申请人电话', trigger: 'blur' },
|
||||
{ type: 'string', pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: '请输入申请单位', trigger: 'blur' }
|
||||
],
|
||||
// area: [
|
||||
// { required: true, message: '请输入所在地区', trigger: 'blur' }
|
||||
// dataRule () {
|
||||
// return {
|
||||
// inputAgree: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ],
|
||||
system: [
|
||||
{ required: true, message: '请输入申请应用', trigger: 'blur' }
|
||||
],
|
||||
scene: [
|
||||
{ required: true, message: '请输入应用场景', trigger: 'blur' }
|
||||
],
|
||||
basis: [
|
||||
{ required: true, message: '请输入申请依据', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
// inputNo: [
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
},
|
||||
components: {
|
||||
RenProcessDetailImport
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.visible = true
|
||||
// this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm.resetFields()
|
||||
// this.$refs.dataForm.resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如业务KEY已存在，不允许编辑
|
||||
this.fieldDisabled = true
|
||||
// this.fieldDisabled = true
|
||||
this.getInfo()
|
||||
console.log(this.dataForm, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取信息
|
||||
getInfo () {
|
||||
this.$http.get(`/processForm/tabilityapplication/${this.dataForm.id}`).then(({ data: res }) => {
|
||||
this.$http
|
||||
.get(`/processForm/tabilityapplication/${this.dataForm.id}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data)
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataForm = {
|
||||
...this.dataForm,
|
||||
...res.data
|
||||
console.log(res.data, 'elas')
|
||||
this.dataForm.content = res.data
|
||||
console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
// 申请能力
|
||||
applyData () {
|
||||
this.$http
|
||||
.get(`/resource/select/${this.dataForm.instanceId}`)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res.data, 'hhhhh')
|
||||
// return this.$message.error(res.msg)
|
||||
}
|
||||
// console.log(res.data, 'elas')
|
||||
// this.dataForm.content = res.data
|
||||
// console.log(this.dataForm, 'ela')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
// 同意与退回
|
||||
agreeOrNot () {
|
||||
if (this.agreeOrList === '同意') {
|
||||
console.log('this.dataForm', this.dataForm)
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputAgree
|
||||
})
|
||||
console.log(params)
|
||||
this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
console.log(res)
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}).catch(() => {})
|
||||
} else if (this.agreeOrList === '退回') {
|
||||
const params = qs.stringify({
|
||||
taskId: this.dataForm.content.instanceId,
|
||||
comment: this.inputNo
|
||||
})
|
||||
this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 启动流程出错回调
|
||||
startProcessErrorCallback (data) {
|
||||
console.log(data)
|
||||
},
|
||||
// 任务处理出错回调
|
||||
taskHandleErrorCallback (data) {
|
||||
}
|
||||
taskHandleErrorCallback (data) {}
|
||||
},
|
||||
mounted () {
|
||||
this.applyData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .big-BOX{
|
||||
background:rgba(244,245,248,0.8);
|
||||
padding:24px;
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121
|
||||
}
|
||||
p{
|
||||
width:78%;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
color:#212121;
|
||||
font-size:14px;
|
||||
span{
|
||||
display:inline-block;
|
||||
margin-left:8px;
|
||||
line-height:32px;
|
||||
span{
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
p:last-of-type{
|
||||
margin-top:16px;
|
||||
width:100%;
|
||||
span{
|
||||
display:flex;
|
||||
span{
|
||||
padding:0 12px;
|
||||
height:32px;
|
||||
background:rgba(232,234,239,1);
|
||||
border-radius:2px;
|
||||
button{
|
||||
background:unset;
|
||||
border:0;
|
||||
color:#0558e1;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .AbilityApply{
|
||||
margin-top:32px;
|
||||
|
||||
h3{
|
||||
font-size:16px;
|
||||
color:#212121;
|
||||
border-bottom:1px solid #dddee1;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
ul{
|
||||
padding-left: 0px;
|
||||
li{
|
||||
list-style:none;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display:flex;
|
||||
img{
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
div{
|
||||
margin-left:16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h2{
|
||||
margin-bottom:20px;
|
||||
font-size:20px;
|
||||
color:#000;
|
||||
display:flex;
|
||||
span{
|
||||
display:block;
|
||||
font-size:14px;
|
||||
color:#ffffff;
|
||||
margin-left:8px;
|
||||
background:rgba(0,184,230,0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix:after{
|
||||
display:block;
|
||||
content:"";
|
||||
clear:both;
|
||||
}
|
||||
.title{
|
||||
color:#0558e1;
|
||||
font-size:18px;
|
||||
padding-bottom:0;
|
||||
border-bottom: 0;
|
||||
|
||||
}
|
||||
.title:before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: #0558e1;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
::v-deep .agreeOr>div{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
.el-input{
|
||||
margin-right: 10px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
::v-deep .agreeOr>div:last-of-type{
|
||||
margin-top:15px;
|
||||
}
|
||||
.blueAll{
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#ffffff;
|
||||
color:#0558e1;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
box-shadow: unset !important;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
.inputBule{
|
||||
width:55px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
background:#0558e1;
|
||||
color:#ffffff;
|
||||
border:1px solid #0558e1;
|
||||
}
|
||||
.redAll{
|
||||
margin-left:10px;
|
||||
::v-deep .el-radio-button__inner{
|
||||
width:80px;
|
||||
height:32px;
|
||||
line-height:32px;
|
||||
padding:0;
|
||||
border-radius:2px;
|
||||
border:1px solid #e83a48;
|
||||
background:#ffffff;
|
||||
color:#e83a48;
|
||||
margin-left:10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
box-shadow: unset !important;
|
||||
color:#ffffff;
|
||||
background: #e83a48;
|
||||
}
|
||||
}
|
||||
.blueInput{
|
||||
width:55px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,9 @@
|
|||
<el-table-column prop="abilityName" label="贡献能力名称" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="abilityType" label="能力类型" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="applyTime" label="上架时间" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="applyNum" label="申请次数" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="browseNum" label="浏览次数" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="applyNum" label="申请次数" header-align="center" align="center"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
|
|
|
|||
|
|
@ -67,12 +67,6 @@ export default {
|
|||
respDep: '',
|
||||
applyTime:'',
|
||||
},
|
||||
noDataForm: {
|
||||
projectName: '',
|
||||
applyDep: '',
|
||||
respDep: '',
|
||||
applyTime:'',
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -81,7 +75,12 @@ export default {
|
|||
methods: {
|
||||
//重置
|
||||
resetDataList(){
|
||||
this.dataForm=this.noDataForm;
|
||||
this.dataForm={
|
||||
projectName: '',
|
||||
applyDep: '',
|
||||
respDep: '',
|
||||
applyTime:'',
|
||||
};
|
||||
this.page=1; // 当前页码
|
||||
this.query();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@
|
|||
|
||||
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
||||
<home-header></home-header>
|
||||
<div class="details-pageconetent-left">
|
||||
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
|
||||
<detailsPageconetentTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库'">
|
||||
<div class="details-pageconetent-left" v-else>
|
||||
<detailsPageInfrastructureTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
|
|
@ -144,6 +147,28 @@
|
|||
<a-empty />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else-if="Cardsname === '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
:key="item.name"
|
||||
:class="item.name === Cardsname ? 'sel' : ''"
|
||||
@click="changeCards(item.name)"
|
||||
>
|
||||
<span
|
||||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<infrastructure-page></infrastructure-page>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else>
|
||||
<div class="top-title">
|
||||
<div
|
||||
|
|
@ -657,6 +682,9 @@
|
|||
// import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
// 数据资源引用
|
||||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||||
// 基础设施引用
|
||||
import InfrastructurePage from './infrastructurePage.vue'
|
||||
import detailsPageInfrastructureTree from './detailsPageInfrastructureTree.vue'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// const store = useStore()
|
||||
|
|
@ -1294,6 +1322,8 @@
|
|||
// VideoCameraOutlined,
|
||||
// VideoSurveillance,
|
||||
DetailsPageResource,
|
||||
InfrastructurePage,
|
||||
detailsPageInfrastructureTree,
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('selectCardsitem')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,518 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="wrapper-title-left-tree" :key="showKey">
|
||||
<div v-for="item in treeData" :key="item.key" class="primaryNode">
|
||||
<!-- <div v-if="!item.children || item.children.length == 0">
|
||||
{{ item.title }}
|
||||
</div> -->
|
||||
<div
|
||||
class="top"
|
||||
@click="showBottom(item)"
|
||||
:class="item.show ? 'topSelect' : ''"
|
||||
>
|
||||
{{ item.title }}
|
||||
<DownOutlined v-show="!item.show" />
|
||||
<UpOutlined v-show="item.show" />
|
||||
</div>
|
||||
<div class="bottom" v-show="item.show">
|
||||
<div v-for="val in item.children" :key="val.key" class="item">
|
||||
<div
|
||||
class="up"
|
||||
:class="selectId == val.key ? 'select' : ''"
|
||||
@click="showDown(item, val), onSelect(item, val)"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
t="1654068878091"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2156"
|
||||
width="0.25rem"
|
||||
height="0.25rem"
|
||||
v-show="selectId == val.key"
|
||||
>
|
||||
<path
|
||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||
p-id="2157"
|
||||
fill="#0058e1"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="name">
|
||||
{{ val.title }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="item.title !== '区级'">{{ val.total }}</span>
|
||||
<span v-else>
|
||||
<down-outlined v-show="!val.show" />
|
||||
<up-outlined v-show="val.show" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="down" v-show="val.show">
|
||||
<div
|
||||
v-for="child in val.children"
|
||||
:key="child.key"
|
||||
class="child"
|
||||
:class="selectId == child.key ? 'select2' : ''"
|
||||
@click="onSelect(item, val, child)"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
t="1654068878091"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2156"
|
||||
width="0.25rem"
|
||||
height="0.25rem"
|
||||
v-show="selectId == child.key"
|
||||
>
|
||||
<path
|
||||
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||
p-id="2157"
|
||||
fill="#0058e1"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="name">
|
||||
{{ child.title }}
|
||||
</span>
|
||||
</div>
|
||||
<span>{{ child.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a-directory-tree
|
||||
class="draggable-tree"
|
||||
block-node
|
||||
:tree-data="treeData"
|
||||
@select="onSelect"
|
||||
></a-directory-tree> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, watch } from 'vue'
|
||||
import { selectDeptList } from '@/api/home.js'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const selectedKeys = ref([])
|
||||
const checkedKeys = ref([])
|
||||
const router = useRouter()
|
||||
const fieldNames = {
|
||||
children: 'children',
|
||||
title: 'name',
|
||||
}
|
||||
const showKey = ref(0)
|
||||
const treeData = ref([])
|
||||
const init = () => {
|
||||
treeData.value = []
|
||||
console.log(
|
||||
'router.currentRoute.value.query.select',
|
||||
router.currentRoute.value.query.select
|
||||
)
|
||||
let select = router.currentRoute.value.query.select
|
||||
if (select === '123') {
|
||||
select = ''
|
||||
}
|
||||
// debugger
|
||||
console.log(
|
||||
'获取url中的select=====================>',
|
||||
router.currentRoute.value.query.select
|
||||
)
|
||||
if (
|
||||
// select !== '基础设施' &&
|
||||
select !== '数据资源' &&
|
||||
select !== '知识库'
|
||||
) {
|
||||
selectDeptList({ type: select }).then((res) => {
|
||||
// console.log('区划数据=========================>', res.data.data)
|
||||
res.data.data.forEach((val) => {
|
||||
if (val.type !== '全部能力目录') {
|
||||
let obj = {
|
||||
title: val.type,
|
||||
total: val.total,
|
||||
show: val.type === '市级' ? true : false,
|
||||
select: false,
|
||||
key: val.type,
|
||||
children: [],
|
||||
}
|
||||
switch (val.type) {
|
||||
case '市级':
|
||||
case '其他':
|
||||
generateChildren(val, obj)
|
||||
break
|
||||
case '区级':
|
||||
generateChildren2(val, obj)
|
||||
break
|
||||
}
|
||||
treeData.value.push(obj)
|
||||
}
|
||||
})
|
||||
// 排序
|
||||
const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
|
||||
treeData.value.sort((a, b) => {
|
||||
return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
|
||||
})
|
||||
console.log('左侧树结构数据======================>', treeData.value)
|
||||
showKey.value++
|
||||
})
|
||||
}
|
||||
}
|
||||
mybus.on('getDeptList', () => {
|
||||
init()
|
||||
})
|
||||
// 生成children
|
||||
const generateChildren = (val, obj) => {
|
||||
if (val.dataList.length > 0) {
|
||||
val.dataList.forEach((child) => {
|
||||
let children = {
|
||||
title: child.deptName,
|
||||
show: false,
|
||||
select: false,
|
||||
total: child.deptCount,
|
||||
key: child.deptId,
|
||||
}
|
||||
obj.children.push(children)
|
||||
})
|
||||
}
|
||||
}
|
||||
// 区级特殊处理
|
||||
const generateChildren2 = (val, obj) => {
|
||||
if (val.dataList.length > 0) {
|
||||
val.dataList.forEach((dis) => {
|
||||
let children = {
|
||||
title: dis.type,
|
||||
total: dis.total,
|
||||
show: false,
|
||||
select: false,
|
||||
key: dis.dataList[0].districtId,
|
||||
children: [],
|
||||
}
|
||||
if (dis.dataList.length > 0) {
|
||||
dis.dataList.forEach((child) => {
|
||||
let children2 = {
|
||||
title: child.deptName,
|
||||
total: child.deptCount,
|
||||
show: false,
|
||||
select: false,
|
||||
key: child.deptId,
|
||||
}
|
||||
children.children.push(children2)
|
||||
})
|
||||
}
|
||||
obj.children.push(children)
|
||||
})
|
||||
}
|
||||
}
|
||||
// const onSelect = (event, node, dragNode, dragNodesKeys) => {
|
||||
// console.log(event[0], node.node.children, dragNode, dragNodesKeys)
|
||||
// if (!node.node.children) {
|
||||
// mybus.emit('paramsGetResources', [event[0]])
|
||||
// } else {
|
||||
// let arr = []
|
||||
// switch (event[0]) {
|
||||
// case '全部能力目录':
|
||||
// mybus.emit('paramsGetResources', [])
|
||||
// break
|
||||
// case '区级':
|
||||
// node.node.children.forEach((dis) => {
|
||||
// dis.children.forEach((val) => {
|
||||
// arr.push(val.key)
|
||||
// })
|
||||
// })
|
||||
// mybus.emit('paramsGetResources', arr)
|
||||
// break
|
||||
// default:
|
||||
// node.node.children.forEach((val) => {
|
||||
// arr.push(val.key)
|
||||
// })
|
||||
// mybus.emit('paramsGetResources', arr)
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
const selectId = ref('')
|
||||
const onSelect = (item, val, child) => {
|
||||
if (item.title === '区级') {
|
||||
if (child) {
|
||||
if (selectId.value !== child.key) {
|
||||
mybus.emit('paramsGetResources', [child.key])
|
||||
selectId.value = child.key
|
||||
} else {
|
||||
mybus.emit('paramsGetResources', [])
|
||||
selectId.value = ''
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (selectId.value !== val.key) {
|
||||
mybus.emit('paramsGetResources', [val.key])
|
||||
selectId.value = val.key
|
||||
} else {
|
||||
mybus.emit('paramsGetResources', [])
|
||||
selectId.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(selectedKeys, () => {
|
||||
console.log('selectedKeys', selectedKeys)
|
||||
})
|
||||
watch(checkedKeys, (val) => {
|
||||
if (val.checked.length > 1) {
|
||||
val.checked.halfChecked = val.checked.shift()
|
||||
}
|
||||
console.log('onCheck', val)
|
||||
})
|
||||
const value = ref('')
|
||||
const onSearch = (searchValue) => {
|
||||
console.log('use value', searchValue)
|
||||
console.log('or use this.value', value.value.child)
|
||||
}
|
||||
// checkedKeys, checkedNodes, node, event
|
||||
function xuanzeshijian(checkedKeys) {
|
||||
checkedKeys.value.checked = []
|
||||
checkedKeys.value.checked[0] =
|
||||
checkedKeys.checked[checkedKeys.checked.length - 1]
|
||||
// console.log('checkedKeys1', checkedNodes)
|
||||
console.log('checkedKeys', checkedKeys)
|
||||
}
|
||||
let quxiaoshijian = ''
|
||||
function dianjisousuo(selectedKeys, selectedNodes, node, event) {
|
||||
if (quxiaoshijian == selectedNodes.node.id) {
|
||||
quxiaoshijian = ''
|
||||
mybus.emit('paramsGetResources', quxiaoshijian)
|
||||
} else {
|
||||
quxiaoshijian = selectedNodes.node.id
|
||||
mybus.emit('paramsGetResources', selectedNodes.node.id.trim())
|
||||
}
|
||||
console.log(
|
||||
'dianjisousuo',
|
||||
selectedKeys,
|
||||
'dianjisousuo',
|
||||
selectedNodes,
|
||||
'dianjisousuo',
|
||||
node,
|
||||
'dianjisousuo',
|
||||
event
|
||||
)
|
||||
}
|
||||
const showBottom = (item) => {
|
||||
item.show = !item.show
|
||||
}
|
||||
const showDown = (item, val) => {
|
||||
console.log('showDown', val)
|
||||
if (item.title === '区级') {
|
||||
val.show = !val.show
|
||||
}
|
||||
}
|
||||
return {
|
||||
value,
|
||||
onSearch,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
fieldNames,
|
||||
treeData,
|
||||
dianjisousuo,
|
||||
quxiaoshijian,
|
||||
xuanzeshijian,
|
||||
showKey,
|
||||
onSelect,
|
||||
showBottom,
|
||||
showDown,
|
||||
selectId,
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('getDeptList')
|
||||
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
|
||||
},
|
||||
components: {
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// .wrapper {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// padding: .2rem;
|
||||
// .wrapper-title {
|
||||
// height: .28rem;
|
||||
// width: 100%;
|
||||
// margin-bottom: .25rem;
|
||||
// .wrapper-title-name {
|
||||
// width: 100%;
|
||||
// height: .17rem;
|
||||
// font-size: .18rem;
|
||||
// font-family: 'AlibabaPuHuiTiR';
|
||||
// font-weight: 400;
|
||||
// color: #0058e1;
|
||||
// line-height: .34rem;
|
||||
// }
|
||||
// .wrapper-title-yangshi {
|
||||
// width: .4rem;
|
||||
// height: .03rem;
|
||||
// background: #0058e1;
|
||||
// border-radius: .02rem;
|
||||
// margin-top: .2rem;
|
||||
// margin-left: .15rem;
|
||||
// }
|
||||
// }
|
||||
// .wrapper-title-left-tree {
|
||||
// overflow-y: auto;
|
||||
// height: 80%;
|
||||
// width: 2.1rem;
|
||||
// }
|
||||
// .wrapper-title-left-tree::-webkit-scrollbar {
|
||||
// width: .05rem;
|
||||
// height: .05rem;
|
||||
// }
|
||||
// .wrapper-title-left-tree::-webkit-scrollbar-thumb {
|
||||
// border-radius: .05rem;
|
||||
// background-color: #0058e1;
|
||||
// }
|
||||
// .wrapper-title-left-tree::-webkit-scrollbar-track {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// :deep(.ant-tree-treenode) {
|
||||
// margin-top: .1rem;
|
||||
// height: .23rem;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 1;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
// }
|
||||
.primaryNode {
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
background: rgba(0, 135, 225, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.1rem;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
.top:hover {
|
||||
cursor: pointer;
|
||||
// 0058e1 透明度 0.5
|
||||
background: rgba(0, 88, 225, 0.8);
|
||||
color: white;
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.topSelect {
|
||||
background: #0058e1;
|
||||
color: white;
|
||||
:deep(.anticon) {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
background: rgba(244, 245, 248, 0.8);
|
||||
padding: 0 0.1rem;
|
||||
// margin-bottom: .08rem;
|
||||
.up {
|
||||
cursor: pointer;
|
||||
height: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 0.01rem solid #ccc;
|
||||
padding: 0 0.1rem;
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.up:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
padding: 0 0.1rem 0 0;
|
||||
.name {
|
||||
width: 1.7rem;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) .up {
|
||||
border-top: none;
|
||||
}
|
||||
.down {
|
||||
width: 100%;
|
||||
.child {
|
||||
cursor: pointer;
|
||||
height: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.1rem;
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.child:hover {
|
||||
.name {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.select2 {
|
||||
.name {
|
||||
width: 1.7rem;
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
color: #0058e1;
|
||||
font-weight: 600;
|
||||
}
|
||||
padding: 0 0.1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>1234567890</div>
|
||||
</template>
|
||||
<script></script>
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue