流程运行状态

src/components/e-charts/line_chart.vue

@@ -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

@@ -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>