diff --git a/src/assets/imgs/data_img_liucheng.gif b/src/assets/imgs/data_img_liucheng.gif new file mode 100644 index 0000000000000000000000000000000000000000..2e255becbc8eb399953800c3b354ed8a0a5b0b67 Binary files /dev/null and b/src/assets/imgs/data_img_liucheng.gif differ diff --git a/src/assets/imgs/icon_liuchengsj.png b/src/assets/imgs/icon_liuchengsj.png new file mode 100644 index 0000000000000000000000000000000000000000..28265d09936a1187456c02d0b56a8109692fd9bf Binary files /dev/null and b/src/assets/imgs/icon_liuchengsj.png differ diff --git a/src/assets/imgs/img_liuchengsheji.png b/src/assets/imgs/img_liuchengsheji.png new file mode 100644 index 0000000000000000000000000000000000000000..cdce0c882d91533ff4ed5e1978b16ed49fa046ee Binary files /dev/null and b/src/assets/imgs/img_liuchengsheji.png differ diff --git a/src/assets/imgs/lcsj_btn_delete.png b/src/assets/imgs/lcsj_btn_delete.png new file mode 100644 index 0000000000000000000000000000000000000000..4a304ca53a904c156467c116334f9870e5b6739f Binary files /dev/null and b/src/assets/imgs/lcsj_btn_delete.png differ diff --git a/src/assets/imgs/lcsj_ic_chajian.png b/src/assets/imgs/lcsj_ic_chajian.png new file mode 100644 index 0000000000000000000000000000000000000000..62380ce85c1dcc0c8b85ec83b842a7674257d630 Binary files /dev/null and b/src/assets/imgs/lcsj_ic_chajian.png differ diff --git a/src/assets/imgs/lcsj_ic_chaoshi.png b/src/assets/imgs/lcsj_ic_chaoshi.png new file mode 100644 index 0000000000000000000000000000000000000000..efe9c43cd366d002579e3083bdd9167233fa88fd Binary files /dev/null and b/src/assets/imgs/lcsj_ic_chaoshi.png differ diff --git a/src/assets/imgs/lcsj_ic_jiekou.png b/src/assets/imgs/lcsj_ic_jiekou.png new file mode 100644 index 0000000000000000000000000000000000000000..ee09572a0ea71c72ca1b485eba31fe1bed2ee65a Binary files /dev/null and b/src/assets/imgs/lcsj_ic_jiekou.png differ diff --git a/src/assets/imgs/lcsj_ic_liucheng.png b/src/assets/imgs/lcsj_ic_liucheng.png new file mode 100644 index 0000000000000000000000000000000000000000..3a58c220b4d42bba08cb9d47c3790d6860efe898 Binary files /dev/null and b/src/assets/imgs/lcsj_ic_liucheng.png differ diff --git a/src/assets/imgs/lcsj_ic_set.png b/src/assets/imgs/lcsj_ic_set.png new file mode 100644 index 0000000000000000000000000000000000000000..27545a36e76df250a2d44305cc5609c2224bb9dc Binary files /dev/null and b/src/assets/imgs/lcsj_ic_set.png differ diff --git a/src/assets/imgs/liucheng_ic_chaoshi.png b/src/assets/imgs/liucheng_ic_chaoshi.png new file mode 100644 index 0000000000000000000000000000000000000000..033c7da9d7c131d95b9899c398e519a2c3b89334 Binary files /dev/null and b/src/assets/imgs/liucheng_ic_chaoshi.png differ diff --git a/src/assets/imgs/liucheng_ic_haoshi.png b/src/assets/imgs/liucheng_ic_haoshi.png new file mode 100644 index 0000000000000000000000000000000000000000..270be30f44803528f1b0ec9da154134b8ce4075e Binary files /dev/null and b/src/assets/imgs/liucheng_ic_haoshi.png differ diff --git a/src/assets/imgs/progress_ic_liucheng.png b/src/assets/imgs/progress_ic_liucheng.png new file mode 100644 index 0000000000000000000000000000000000000000..0934d70b9dcc4f8007d0cb2618418584de5dae8b Binary files /dev/null and b/src/assets/imgs/progress_ic_liucheng.png differ diff --git a/src/assets/imgs/progress_ic_wancheng.png b/src/assets/imgs/progress_ic_wancheng.png new file mode 100644 index 0000000000000000000000000000000000000000..ace9a5ea0b67d9bd6859df8ffb05d6bd7ef9a352 Binary files /dev/null and b/src/assets/imgs/progress_ic_wancheng.png differ diff --git a/src/components/e-charts/line_chart.vue b/src/components/e-charts/line_chart.vue index 6c37c8625065eda6d1ab97fe1d371950e7a24ca4..d4ec73cc11242b368eab73f575fcee6b386d90eb 100644 --- a/src/components/e-charts/line_chart.vue +++ b/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 diff --git a/src/pages/workbench/component-center/process-management/designer/detail.vue b/src/pages/workbench/component-center/process-management/designer/detail.vue index 852a545a2822df60de484d23bcf23d2f7d0f8333..3dc6d572dd9ce29339a2d56dc40726e3543042f3 100644 --- a/src/pages/workbench/component-center/process-management/designer/detail.vue +++ b/src/pages/workbench/component-center/process-management/designer/detail.vue @@ -11,7 +11,53 @@
流程
-
流程
+
+
+
+
+ +
+

流程实例总数

+

2,980万

+
+
+
+
+
+ +
+

流程平均耗时

+

35min

+
+
+
+
+
+ +
+

流程超时率

+

5%

+
+
+
+
+ +
+
+ + + +
+
+
+
+
流程
 @@ -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; +}