Skip to content

A
apaas-ui
Commit 92e28cc9 authored by 张俊's avatar 张俊
Browse files
Options

流程运行状态

parent 50031e21
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 9 deletions
src/components/e-charts/line_chart.vue
View file @ 92e28cc9
......@@ -28,7 +28,11 @@ export default {
targetValue: {
type: Number,
default: () => 0
}
},
area_flag:{
type: Boolean,
default: true
},
},
components: {},
data() {
......@@ -87,7 +91,7 @@ export default {
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
color:this.area_flag? new echarts.graphic.LinearGradient(
0,
0,
0,
......@@ -103,7 +107,7 @@ export default {
}
],
false
),
):'rgba(0,0,0,0)',
shadowColor: hexToRgba(color[idx], 0.1),
shadowBlur: 10
}
......@@ -118,10 +122,10 @@ export default {
});
var option = {
backgroundColor: bgColor,
// backgroundColor: bgColor,
color: color,
legend: {
// show:false,//是否显示图例
show:yarr.length>=2,//是否显示图例
right: "center",
bottom: 0,
itemWidth: 10,
......@@ -144,7 +148,7 @@ export default {
left: 15,
right: 30,
bottom: 30,
containLabel: true
containLabel: true,
},
xAxis: [
{
......@@ -161,7 +165,7 @@ export default {
}
},
splitArea: {
show: true,
show: this.area_flag,
areaStyle: {
color: ["#fff", "#f8f9fd"],
opacity: 0.5
......
src/pages/workbench/component-center/process-management/designer/detail.vue
View file @ 92e28cc9
......@@ -11,7 +11,53 @@
<info-list :list_arr="now_service==0?list_arr:servicead_arr">
<table-um style="width:700px;" v-if="zd_table_arr.length" height='250px' :stripe="true" :headers="header_arr" :datas="zd_table_arr" slot="fw_table"></table-um>
<div slot="process">流程</div>
<div slot="count">流程</div>
<div slot="count">
<div class="charts">
<div class="charts_box">
<div class="charts_box_detail" style="width:233px;">
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/shop_ic_jierujg.png" alt="">
<div style="float:right;">
<p>流程实例总数</p>
<p><span>2,980</span><span>万</span></p>
</div>
</div>
</div>
<div class="charts_box">
<div class="charts_box_detail" style="width:245px;">
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
<div style="float:right;margin-right:40px;">
<p>流程平均耗时</p>
<p style="right:-38px;"><span>35</span><span>min</span></p>
</div>
</div>
</div>
<div class="charts_box">
<div class="charts_box_detail" style="width:245px;">
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
<div style="float:right;">
<p>流程超时率</p>
<p><span>5</span><span>%</span></p>
</div>
</div>
</div>
</div>
<div class="data_charts">
<div class="data_charts_box">
<block-radius
class="block"
:show_header="true"
title="流程实例趋势分析"
:buttons_arr="['近7天', '近6个月']"
@changeButton="changeday"
>
<line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
</block-radius>
</div>
<div class="data_charts_box"></div>
<div class="data_charts_box"></div>
</div>
</div>
<div slot="suvice">流程</div>
</info-list>
</div>
......@@ -25,11 +71,15 @@
import serviceHeader from '@/components/service-header'
import infoList from '@/components/infoList'
import tableUm from '@/components/table/table-um'
import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart";
export default {
components: {
serviceHeader,
infoList,
tableUm
tableUm,
BlockRadius,
lineChart
},
data(){
return{
......@@ -50,6 +100,15 @@ export default {
state:1,
now_service:0,
service_arr:[],
line_data:{
xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
seriesData: [
{
name: "趋势",
data: [100,200,500,1000,1800,500]
}
]
},
list_arr:[
{
title:'流程描述：',
......@@ -114,6 +173,9 @@ export default {
this.getbaseinfo()
},
methods:{
changeday(){
},
get_header(){
this.$set(this.service_header_arr,'name','长兴综治事故申报处理流程')
let state = this.state
......@@ -275,4 +337,76 @@ export default {
padding: 30px 10px 10px 10px;
width: 100%;
}
.charts{
width: 100%;
height: 128px;
background-color: #fbfcfe;
border-radius: 12px;
overflow: hidden;
}
.charts_box{
float: left;
width: calc((100% - 4px)/3);
height: 65px;
box-sizing: content-box;
border-right: 2px solid #e6ebfe;
margin-top: 30px;
}
.charts .charts_box:nth-last-of-type(1){
border: 0;
}
.charts_box_detail{
margin: 0 auto;
overflow: hidden;
}
.charts_box_detail div{
position: relative;
margin-right: 30px;
}
.charts_box_detail div p{
font-size: 16px;
color: #58617a;
}
.charts_box_detail div p:nth-last-of-type(1){
position: absolute;
right: -28px;
}
.charts_box_detail div p span:nth-of-type(1){
font-size: 24px;
font-weight: 600;
color: #242c43;
margin-right: 10px;
}
.charts_box_detail div p span:nth-of-type(2){
font-size: 16px;
color: #242c43;
}
.data_charts{
width: 100%;
height: 300px;
overflow: hidden;
}
.data_charts_box{
width: calc((100% - 40px)/3);
float: left;
height: 300px;
box-sizing: border-box;
background-color: #fbfcfe;
border-radius: 12px;
margin-right: 20px;
margin-top: 26px;
}
.data_charts .data_charts_box:nth-last-of-type(1){
margin-right: 0px;
}
.data_charts_box >>> .block_radius{
background-color: #fbfcfe;
height: 100%;
}
.block-radius-content {
width: 100%;
background-color: #fbfcfe;
height: calc(100% - 36px);
margin-top: 15px;
}
</style>
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