Skip to content

A
apaas-ui
Commit f598819c authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents 3b4d27bc aa349cdd
Show whitespace changes
Inline Side-by-side
Showing with 573 additions and 4 deletions
src/components/e-charts/multiple_circle.vue
View file @ f598819c
...@@ -24,6 +24,10 @@ export default { ...@@ -24,6 +24,10 @@ export default {
bar_width: { bar_width: {
type: Number, type: Number,
default: 5 default: 5
},
color:{
type:Array,
default:null
} }
}, },
components: {}, components: {},
...@@ -76,7 +80,7 @@ export default { ...@@ -76,7 +80,7 @@ export default {
}; };
var data = []; var data = [];
var total = 0; var total = 0;
var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"]; var color = this.color?this.color:["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
var legendarr = []; var legendarr = [];
var temp2_data = 0; var temp2_data = 0;
data_val.forEach(e => { data_val.forEach(e => {
......
src/components/e-charts/process-top-list.vue 0 → 100644
View file @ f598819c
<template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
<ul>
<li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_detail">
<p class="item_info">
<span
class="text_clip is_link"
@click="getDetail(option.service_id, option.data_service_type1)"
>
{{ option.service_name }}
</span>
</p>
<el-progress
class="item_progress"
:percentage="getPercent(option.request_count)"
:show-text="false"
color="#e56600"
></el-progress>
<span
style="float:right;"
v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
></span>
</div>
</li>
</ul>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
options: {
type: Array,
default: () => []
},
targetValue: {
type: Number,
default: () => 0
}
},
data() {
return {
timer: null,
helper
};
},
watch: {
text() {
this.autoScroll();
}
},
methods: {
getPercent(value) {
if (value == 0) {
return 0;
} else {
return Math.min((value / this.targetValue) * 100, 100);
}
},
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
getDetail(id, type) {
}
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
}
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
.item_list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 18px;
}
.item_index {
width: 35px;
flex-shrink: 0;
margin-right: 10px;
font-size: 12px;
color: #58617a;
}
.item_logo {
margin-right: 10px;
flex-shrink: 0;
font-size: 0;
border: 2px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
}
.item_info {
flex-grow: 1;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 20px;
color: #58617a;
}
.item_detail {
flex-grow: 1;
}
.item_info > span:first-child {
width: 100px;
flex-grow: 1;
margin-right: 10px;
color:#58617a;
font-size: 14px;
}
.item_info > span:first-child > i {
font-weight: bold;
font-size: 12px;
color: #8e96ab;
}
.item_info > span:nth-child(2) {
flex-shrink: 0;
white-space: nowrap;
color: #0d1847;
}
.item_progress {
margin-top: 6px;
width: calc(100% - 60px);
float: left;
}
.is_link {
cursor: pointer;
}
</style>
src/components/table/table-um.vue
View file @ f598819c
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
{{ scope.row[item.prop] }} {{ scope.row[item.prop] }}
</span> </span>
<!-- others --> <!-- others -->
<span v-else-if="item.type === 'click'" style="cursor: pointer;" @click="gotopage(item.url,scope.row[item.prop][item.id])">{{ scope.row[item.prop] }}</span> <span v-else-if="item.type === 'click'" style="cursor: pointer;color: #274fee;" @click="gotopage(item.url,scope.row[item.id])">{{ scope.row[item.prop] }}</span>
<span v-else>{{ scope.row[item.prop] }}</span> <span v-else>{{ scope.row[item.prop] }}</span>
</template> </template>
</el-table-column> </el-table-column>
......
src/pages/workbench/component-center/process-management/monitoring/index.vue
View file @ f598819c
<template> <template>
<div> <div class="detail_contain">
大屏监控 <p class="now_page_title">在线组件工具 / 流程设计 / <span>流程监控</span></p>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="流程总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_liucheng.gif')" class="left_1_img" />
<p><span>流程总数</span> 35</p>
<p><span>流程实例总数</span> 2,380</p>
</div>
<single-circle ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></single-circle>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程实例数趋势分析"
:buttons_arr="['近7天', '近6个月']"
@changeButton="changeServiceCellBtn"
class="block"
>
<line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程平均耗时排行"
class="block"
>
<table-um
:headers="tableheaders"
:stripe="true"
:height="220"
:datas="tableRank">
</table-um>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="实时流程实例分析"
class="block"
>
<BarChart
:data="bar_data_area"
:colors="['#1034eb', '#4274f8']"
:bar_border_radius="[20, 20, 0, 0]"
:bar_width="26"
:show_split="true"
/>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程超时率分析"
class="block"
>
<BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程实例平均耗时分析"
class="block"
>
<multiple-circle class="block-radius-content" :show_center_data="false" :color="color_arr" :data="mult_data" :text="''"></multiple-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="流程使用率分析" class="block" :buttons_arr="['最多', '最少']" @changeButton="changeAppInfoBtn">
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script>
import BlockRadius from "@/components/general/block-radius";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/process-top-list";
import tableUm from '@/components/table/table-um'
import BarChart from "@/components/e-charts/bar-chart";
import multipleCircle from "@/components/e-charts/multiple_circle";
export default {
components:{
BlockRadius,
singleCircle,
lineChart,
Toplist,
tableUm,
BarChart,
multipleCircle
},
data(){
return{
das_data: {
num: 80,
color: "#e56600",
text: "总超时率"
},
line_data:{
xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
seriesData: [
{
name: "趋势",
data: [100,200,500,1000,1800,500]
}
],
},
toplistData:[
{
service_name:'保安资格申请',
request_count: 50,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'保安考试流程',
request_count: 10,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'外国人永久居留资格申请',
request_count: 25,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'大型焰火燃放资格申请',
request_count: 30,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'保安培训机构许可证申请流程',
request_count: 70,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
],
toplistTargetValue:100,
tableheaders:[
{
label: "排名",
prop: "index",
align: "center",
width: "80px"
},
{
label: "流程名称",
prop: "name",
align: "left",
minWidtn:'40%',
type:'click',
url:'/',
id:'id',
},
{
label: "耗时（分钟）",
prop: "time",
align: "center",
minWidtn:'30%'
},
{
label: "超时率",
prop: "val",
align: "center",
minWidtn:'30%'
},
],
tableRank:[
{
index:1,
id:1,
name:'保安许可资格申请',
time:180,
val:'40%'
},
{
index:1,
name:'保安考试流程',
id:3,
time:180,
val:'40%'
},
{
index:1,
name:'外国人永久居留资格申请',
id:4,
time:180,
val:'40%'
},
{
index:1,
name:'大型焰火燃放资格申请',
id:5,
time:180,
val:'40%'
},
{
index:1,
id:6,
name:'保安培训机构许可证申请流程',
time:180,
val:'40%'
},
],
bar_data_area:{
legendData: ['保安资格','保安资格','保安资格','保安资格'],
seriesData: [
55,44,33,22
]
},
bar_data_org:{
legendData: ['保安资格','保安资格','保安资格','保安资格'],
seriesData: [
55,44,33,22
]
},
color_arr:["#274fee",'#36a5ec', "#25bdb1", "#ffc95c", "#e56600", "#e15260"],
mult_data:[
{
name:'5分钟内',
value:10,
},
{
name:'1小时内',
value:10,
},
{
name:'1天内',
value:10,
},
{
name:'7天内',
value:10,
},
{
name:'30天内',
value:10,
},
{
name:'30天以上',
value:10,
},
]
}
},
methods:{
changeServiceCellBtn(index){
console.log(index);
},
changeAppInfoBtn(index){
console.log(index);
},
}
}
</script>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 10px;
height: calc(100% - 55px);
}
.now_page_title {
margin: 15px 0;
margin-left: 10px;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
}
.in_analysis {
height: 100%;
width: 100%;
min-width: 1700px;
}
.in_block {
height: 300px;
padding: 10px;
}
.block {
width: 100%;
height: 100%;
}
.left_1 {
height: 100%;
display: flex;
justify-content: space-around;
}
.left_block {
width: 280px;
height: 100%;
padding: 10px 0 0 0;
}
.left_1_l {
padding-top: 20px;
}
.left_1_l p{
font-size: 26px;
color: #515fe7;
}
.left_1_l p span{
font-size: 14px;
color: #242c43;
width: 100px;
display: inline-block;
}
.left_1_title {
width: 100%;
}
.left_1_num {
font-size: 32px;
color: #515fe7;
width: 100%;
}
.left_1_img {
width: 126px;
height: 138px;
display: inline-block;
}
.default {
text-align: center;
}
.default_img {
width: 330px;
height: 230px;
}
.left_1_r {
width: 50%;
height: 100%;
display: inline-block;
}
.block-radius-content {
width: 100%;
height: calc(100% - 36px);
margin-top: 15px;
}
</style>
src/pages/workbench/yygl/app_detail.vue
View file @ f598819c
...@@ -161,6 +161,7 @@ ...@@ -161,6 +161,7 @@
:auto-upload="false" :auto-upload="false"
:on-success="upload_success" :on-success="upload_success"
:on-error="upload_error" :on-error="upload_error"
:on-change="change_file_state"
:data="anotherData1" :data="anotherData1"
:multiple="false" :multiple="false"
> >
...@@ -493,10 +494,17 @@ export default { ...@@ -493,10 +494,17 @@ export default {
this.now_page = 1; this.now_page = 1;
this.image_arr = []; this.image_arr = [];
this.get_image_list(); this.get_image_list();
this.get_file_name();
} else { } else {
this.$message.error(response.errMsg); this.$message.error(response.errMsg);
} }
}, },
change_file_state(file,fileList){
console.log(file,fileList);
if(fileList.length>=2){
this.fileList = [file]
}
},
upload_error() { upload_error() {
this.$message.error("上传失败"); this.$message.error("上传失败");
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment