Commit d00e6dd9 authored by 张慧龙's avatar 张慧龙

合dev

parents b9635c01 fea2f4bf
[v-cloak]{
display: none
}
[v-cloak] {
display: none;
}
/* 新增按钮颜色 */
.form-group .el-button--primary{
background-color: #264dd9!important;
border-color: #264dd9!important;
.form-group .el-button--primary {
background-color: #264dd9 !important;
border-color: #264dd9 !important;
}
/* 返回按钮颜色 */
.from_return>.el-button--primary{
background-color: #edf0ff!important;
border-color: #edf0ff!important;
color:#264dd9!important;
.from_return > .el-button--primary {
background-color: #edf0ff !important;
border-color: #edf0ff !important;
color: #264dd9 !important;
}
/* 取消按钮颜色 */
.form_c{
background-color: #dde4ff!important;
border-color: #dde4ff!important;
color:#264dd9!important ;
.form_c {
background-color: #dde4ff !important;
border-color: #dde4ff !important;
color: #264dd9 !important ;
}
/* 确定按钮颜色 */
.form_t{
background-color: #264dd9!important;
border-color: #264dd9!important;
color:#f4f7fc!important ;
.form_t {
background-color: #264dd9 !important;
border-color: #264dd9 !important;
color: #f4f7fc !important ;
}
/* 搜索框颜色 */
.form-group .el-input__inner{
border-radius: 28px!important;
border: 1px solid #bcc1d0!important;
background: #f4f7fc!important;
color: #8890a7!important;
}
.drawer_return .el-input__inner{
border-radius: 28px!important;
border: 1px solid #bcc1d0!important;
background: #f4f7fc!important;
color: #8890a7!important;
.form-group .el-input__inner {
border-radius: 28px !important;
border: 1px solid #bcc1d0 !important;
background: #f4f7fc !important;
color: #8890a7 !important;
}
.drawer_return .el-input__inner {
border-radius: 28px !important;
border: 1px solid #bcc1d0 !important;
background: #f4f7fc !important;
color: #8890a7 !important;
}
/* 多行文本框样式 */
.jbxx_desc textarea{
height: 150px!important;
border-radius: 8px!important;
border-color: #bcc1d0!important;
outline: none!important;
resize: none!important;
.jbxx_desc textarea {
height: 150px !important;
border-radius: 8px !important;
border-color: #bcc1d0 !important;
outline: none !important;
resize: none !important;
}
/* 面包屑文字大小 */
.el-breadcrumb{
.el-breadcrumb {
font-size: 14px;
color: #898d9e;
}
/* 编辑颜色*/
.primary-edit{
.primary-edit {
color: #264dd9;
cursor: pointer;
}
/* 删除颜色 */
.primary-del{
.primary-del {
color: #264dd9;
cursor: pointer;
}
.space_bet{}
.space_bet {
}
/* reset */
html {
}
body {
margin: 0;
......@@ -87,7 +87,7 @@ h5 {
font-weight: normal;
}
div{
div {
box-sizing: border-box;
}
/* reset end */
......@@ -141,7 +141,7 @@ div{
}
.ss_card > .sc_right_container > .sc_info {
display: flex;
justify-content: space-between;
justify-content: space-between;
}
.form-group {
padding: 20px 20px 15px;
......@@ -152,56 +152,66 @@ div{
padding: 0 20px;
}
/* 设置抽屉的样式 */
.el-drawer__header{
display: none;
.el-drawer__header {
display: none;
}
.from_return{
text-align: center;
padding: 18px 20px 10px;
border-bottom: 1px solid #edf0ff;
position: relative;
.from_return {
text-align: center;
padding: 18px 20px 10px;
border-bottom: 1px solid #edf0ff;
position: relative;
}
.from_return>.el-button--primary{
.from_return > .el-button--primary {
position: absolute;
top: 15px;
left: 20px;
}
.from_return>span{
color:#1a2236;
.from_return > span {
color: #1a2236;
font-size: 16px;
}
.demo-drawer__content .el-form-item__label{
.demo-drawer__content .el-form-item__label {
color: #242c43;
}
.demo-drawer__content .el-input__inner{
.demo-drawer__content .el-input__inner {
border: 1px solid #bcc1d0;
border-radius: 17px;
color: #58617a;
background: #fff;
}
.demo-drawer__footer{
.demo-drawer__footer {
text-align: right;
padding-right: 40px;
margin-top: 40px;
}
.el-form-item__error{
font-size:11px;
.el-form-item__error {
font-size: 11px;
}
/* 设置提示弹窗的样式 */
.el-dialog{
.el-dialog {
border-radius: 10px;
}
.el-dialog__header {
border-bottom: 1px solid #edf0ff;
}
.el-dialog__title{
.el-dialog__title {
font-size: 16px;
font-weight: 700;
color: #1d1e20;
border-left: 4px solid #0367f6;
padding-left: 8px;
position: relative;
}
.el-dialog__body{
.el-dialog__title::before {
content: "";
position: absolute;
width: 4px;
height: 16px;
border-radius: 2px;
background-color: #515fe7;
left: 0;
top: 2px;
}
.el-dialog__body {
font-size: 18px;
color: #242c43;
text-align: center;
......@@ -213,23 +223,22 @@ div{
.el-tabs__item {
font-size: 16px;
color: #8890a7;
line-height: 24px!important;
line-height: 24px !important;
}
.el-tabs__nav-scroll .el-tabs__item {
line-height: 40px!important;
line-height: 40px !important;
}
.el-tabs__item:hover {
color: #687087;
}
.el-tabs__item.is-active {
color: #e56600 !important;
}
.el-tabs__active-bar{
.el-tabs__active-bar {
height: 3px;
background-color:#e56600 !important;
background-color: #e56600 !important;
}
.el-tabs__nav-wrap::after{
.el-tabs__nav-wrap::after {
height: 1px;
background-color: #edf0ff;
}
......@@ -277,51 +286,54 @@ border-radius:8px;
} */
/* 左右布局 */
.flex {
height: 100%;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
height: 100%;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
.flex-left {
width: 178px;
background-color: #1a2236;
height: 100%;
width: 178px;
background-color: #1a2236;
height: 100%;
}
.flex-right {
padding: 0 20px 20px;
box-sizing: border-box;
-webkit-box-flex: auto;
-ms-flex: auto;
-webkit-flex: auto;
flex: 1;
overflow-y: auto;
padding: 0 20px 20px;
box-sizing: border-box;
-webkit-box-flex: auto;
-ms-flex: auto;
-webkit-flex: auto;
flex: 1;
overflow-y: auto;
}
.flex-right-box{
width: 100%;
height: 100%;
position: relative;
.flex-right-box {
width: 100%;
height: 100%;
position: relative;
}
.ces-main{
position: absolute;
width: 100%;
.ces-main {
position: absolute;
width: 100%;
}
.v-modal{
background: #000a2b!important;
.v-modal {
background: #000a2b !important;
}
.drawer600{
width: 600px!important;
.drawer600 {
width: 600px !important;
}
.drawer620{
width: 620px!important;
.drawer620 {
width: 620px !important;
}
.drawer1202{
width: 1202px!important;
.drawer1202 {
width: 1202px !important;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
content:""
.el-form-item.is-required:not(.is-no-asterisk)
.el-form-item__label-wrap
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
content: "";
}
/* 设置switch的样式 */
.switchStyle1 .el-switch__label {
......@@ -338,7 +350,7 @@ width: 620px!important;
/*关闭时文字位置设置*/
.switchStyle1 .el-switch__label--left {
z-index: 1;
left: 28px;
left: 28px;
top: 1px;
}
.switchStyle1 .el-switch__label.is-active {
......@@ -347,8 +359,8 @@ width: 620px!important;
.switchStyle1.el-switch .el-switch__core,
.switchStyle1.el-switch .el-switch__label {
width: 62px !important;
height: 28px!important;
border-radius: 28px!important;
height: 28px !important;
border-radius: 28px !important;
}
.switchStyle1 .el-switch__core {
background: #f8f9fd !important;
......@@ -372,7 +384,7 @@ width: 620px!important;
right: 0;
top: 2.1px;
}
.switchStyle1.el-switch.is-checked .el-switch__core::after{
.switchStyle1.el-switch.is-checked .el-switch__core::after {
margin-left: -25px;
}
.switchStyle1 .el-switch__label * {
......@@ -412,7 +424,8 @@ width: 620px!important;
.el-input__inner {
border-radius: 8px;
}
.el-input-group__append, .el-input-group__prepend {
.el-input-group__append,
.el-input-group__prepend {
border-radius: 8px;
}
.el-button {
......@@ -454,10 +467,10 @@ width: 620px!important;
.el-scrollbar {
border-radius: 8px;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
.el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: transparent;
}
.el-popper[x-placement^=top] .popper__arrow::after {
.el-popper[x-placement^="top"] .popper__arrow::after {
border-top-color: transparent;
}
/* 单选激活样式 */
......@@ -465,13 +478,13 @@ width: 620px!important;
border-color: #838383;
background-color: #fff;
}
.el-radio__input.is-checked+.el-radio__label {
.el-radio__input.is-checked + .el-radio__label {
color: #1a2236;
font-weight: 700;
}
.el-radio__inner::after {
width: 8px;
height: 8px;
height: 8px;
}
.el-radio__input.is-checked .el-radio__inner::after {
background-color: #e56600;
......@@ -508,7 +521,6 @@ width: 620px!important;
margin: 0 auto;
}
/* common */
.apass_breadcrumb > .el-breadcrumb {
padding: 15px 0;
......@@ -519,7 +531,10 @@ width: 620px!important;
color: #898d9e;
line-height: 23px;
}
.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
.apass_breadcrumb
> .el-breadcrumb
.el-breadcrumb__item:last-child
.el-breadcrumb__inner {
color: #242c43;
font-weight: normal;
}
......@@ -527,7 +542,7 @@ width: 620px!important;
min-width: 90px;
color: #0f2683;
}
.apaas_button .el-button--mini,
.apaas_button .el-button--mini,
.apaas_button .el-button--mini.is-round {
padding: 10px 15px;
}
......@@ -546,8 +561,8 @@ width: 620px!important;
background-color: #e15260;
border-color: #e15260;
}
.apaas_button .el-button.is-disabled,
.apaas_button .el-button.is-disabled:focus,
.apaas_button .el-button.is-disabled,
.apaas_button .el-button.is-disabled:focus,
.apaas_button .el-button.is-disabled:hover {
cursor: not-allowed;
}
......@@ -564,11 +579,11 @@ width: 620px!important;
.apaas_button .el-button.is-disabled,
.apaas_button .el-button.is-disabled:focus,
.apaas_button .el-button.is-disabled:hover {
color: #C0C4CC;
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #FFF;
border-color: #EBEEF5;
background-color: #fff;
border-color: #ebeef5;
}
.apass_table .el-table th > .cell {
......@@ -831,4 +846,10 @@ width: 620px!important;
.meassage_detail_dialog .detail_item .full_content .item_content {
margin: 0;
}
/* 详情页公共样式 by xuyiming ~~~end */
\ No newline at end of file
.no_wrap .apass_table td .cell {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
/* 详情页公共样式 by xuyiming ~~~end */
......@@ -22,9 +22,9 @@ export const lang = {
cloud_resources_detail: "云资源详情",
// data analysis
data_analysis: "数据分析中心",
my_service_data_analysis: "我的服务数据分析",
my_application_data_analysis: "我的应用数据分析",
data_analysis: "运营管控中心",
my_service_data_analysis: "服务分析",
my_application_data_analysis: "应用分析",
// message
message: "消息与推送管理",
......@@ -33,4 +33,13 @@ export const lang = {
message_alert: "消息提醒管理",
banner: "banner管理",
message_template: "消息模板管理",
//online component tool
online_component_tool: "在线组件中心",
process_design: "流程设计",
process_management: "流程管理",
new: "新建",
// technical-support
technical_support: "技术支持"
}
\ No newline at end of file
src/assets/imgs/img_head.png

1.63 KB | W: | H:

src/assets/imgs/img_head.png

2.15 KB | W: | H:

src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -338,16 +338,24 @@ export default {
_self.moreActionList = [];
_self.showMoreActionList = true;
_self.moreActionList = moreActionList.map((item) => ({
id: row.id,
label: item.label,
callback() {
_self.showMoreActionList = false;
_self.moreActionList = [];
_self.moreActionList = moreActionList
.filter((item) => {
if (item.showRule) {
return item.showRule(row);
} else {
return true;
}
})
.map((item) => ({
id: row.id,
label: item.label,
callback() {
_self.showMoreActionList = false;
_self.moreActionList = [];
item.callback && item.callback(row);
},
}));
item.callback && item.callback(row);
},
}));
_self.$nextTick(() => {
let targetInfo = $event.target.getBoundingClientRect();
......@@ -499,10 +507,11 @@ export default {
.more_action_list > li:first-child::before {
content: "";
position: absolute;
top: -14px;
right: calc(50% - 14px);
width: 28px;
height: 14px;
top: -20px;
right: calc(50% - 20px);
width: 40px;
height: 20px;
/* background-color: red; */
}
.more_action_list > li:first-child::after {
content: "";
......
......@@ -20,6 +20,10 @@ export default {
type: String,
default: () => "",
},
stepTitle: {
type: String,
default: "",
},
},
data: () => ({}),
computed: {
......
......@@ -25,7 +25,12 @@
</div>
<div class="step_icon" v-else></div>
<div class="step_info">
<p class="step_state">
<p v-if="item.stepTitle != ''" class="step_state">
<span>
{{ item.stepTitle }}
</span>
</p>
<p v-else class="step_state">
<span v-if="item.step < activeStep || done">
已完成
</span>
......
......@@ -6,7 +6,7 @@
:key="'comment_' + index"
>
<div class="comment-left">
<el-avatar :size="60" fit="cover" :src="item.picture_path" />
<el-avatar :size="60" fit="cover" :src="item.picture_path || require('../assets/imgs/img_head.png')" />
</div>
<div class="comment-right">
<p class="comment-user_name" v-text="item.user_name"></p>
......
......@@ -2,7 +2,7 @@
<ul class="comments_list apaas_scroll">
<li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index">
<div class="comment-left">
<el-avatar :size="45" fit="cover" :src="item.picture_path" />
<el-avatar :size="45" fit="cover" :src="item.picture_path || require('../../assets/imgs/img_head.png')" />
</div>
<div class="comment-right">
<p class="comment-base">
......
......@@ -59,11 +59,21 @@ export default {
{
type: "category",
axisLabel: {
interval: 0,
textStyle: {
color: "#0d1847",
fontSize: 12,
lineHeight: 20,
},
formatter(value) {
let valueTxt = "";
if (value.length > 7) {
valueTxt = value.substring(0, 7 - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
},
},
axisTick: {
show: false,
......
......@@ -32,6 +32,10 @@ export default {
isPercent: {
type: Boolean,
default: true
},
color: {
type: Array,
default: null
}
},
components: {},
......
<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 ? '万'+unit : unit)"
></span>
</div>
</li>
</ul>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
options: {
type: Array,
default: () => []
},
targetValue: {
type: Number,
default: () => 0
},
unit: {
type: String,
default: () => ''
},
},
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>
......@@ -17,7 +17,7 @@ import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
export default {
props: ["url","datas"],
props: ["url","datas",'readOnly'],
data() {
return {
aceEditor: null,
......@@ -34,7 +34,8 @@ export default {
mode: this.acemodePath,
wrap: this.wrap,
tabSize: 4,
highlightActiveLine: false
highlightActiveLine: false,
readOnly:this.readOnly?this.readOnly:false
});
if (this.url) {
this.getValue();
......
<template>
<div class="side_nav_bar">
<h3 class="side_nav_bar_title" @click="titleAction">
<img :src="titleIcon" width="20" style="margin-right: 10px;" />
<span v-text="title"></span>
</h3>
<div v-for="(nav, index) in navList" :key="'nav' + index">
<div class="side_nav_bar_first_title">{{ nav.name }}</div>
<ul class="side_nav_bar_list">
<router-link
tag="li"
v-for="(item, indexs) in nav.child"
:class="{ current: $route.path.indexOf(item.path) > -1 }"
:key="index + 'a' + indexs"
:to="item.path"
>
<span v-text="item.name"></span>
</router-link>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "sideNavBar",
props: {
title: {
type: String,
default: () => "我的服务",
},
titleIcon: {
type: String,
default: () => require("@/assets/imgs/tool_fuwu.png"),
},
titlePath: {
type: String,
default: () => "",
},
navList: {
type: Array,
default: () => [],
},
imgSrc: {
type: String,
default: "tool_fuwu",
},
},
methods: {
titleAction() {
if (this.titlePath) {
this.$router.push(this.titlePath);
}
},
},
};
</script>
<style scoped>
.side_nav_bar {
background-color: #0d1847;
}
.side_nav_bar_title {
height: 40px;
background-color: #182665;
border-radius: 10px;
overflow: hidden;
margin: 20px 15px 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.side_nav_bar_title > span {
font-size: 16px;
color: #c3caf8;
}
.side_nav_bar_first_title {
color: #c3caf8;
font-size: 14px;
padding: 10px 0 10px 34px;
position: relative;
}
.side_nav_bar_first_title::before {
content: "";
position: absolute;
left: 22px;
top: 12px;
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
}
.side_nav_bar_list > li {
padding: 12px 10px 12px 42px;
border-left: 5px solid #0d1847;
font-size: 14px;
line-height: 24px;
color: #e6ebfe;
cursor: pointer;
}
.side_nav_bar_list > li:hover,
.side_nav_bar_list > li.current {
border-left: 5px solid #e56600;
background-color: #182665;
color: #e6ebfe;
}
</style>
......@@ -24,6 +24,7 @@
:readOnly="readOnly"
:data="anotherData"
:drag="drag"
:disabled="disabled"
>
<div v-if="drag">
<i class="el-icon-upload"></i>
......@@ -92,6 +93,10 @@ export default {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
},
watch: {
list(value) {
......
......@@ -22,6 +22,7 @@
</template>
<script>
import helper from "@/services/helper.js";
import screenType from "@/components/recommen/screen-type";
import recommenBox from "@/components/recommen/recommen-box";
......@@ -119,7 +120,14 @@ export default {
})
.then(({ data }) => {
if (data.success == 1) {
this.serviceList = data.data || [];
let datas = data.data || [];
datas.forEach((item) => {
let update_date = item.update_date || "";
item.update_date = helper.dateStringTransform(update_date);
});
this.serviceList = datas;
}
});
},
......
......@@ -336,6 +336,10 @@ export default {
this.keyword = "";
this.updateTime = "";
if (this.tpl_types.length > 0) {
this.type = this.tpl_types[0].value;
}
this.getTemplateList();
},
selectTemplate(item) {
......
......@@ -10,14 +10,12 @@
</el-tabs>
<div class="list_options">
<div class="button_group">
<el-button
size="mini"
<span
v-for="(item, index) in buttonList"
:key="'btn' + index"
:class="item.state ? 'btn_actice':''"
round
:class="item.state ? 'btn_default btn_actice':'btn_default'"
@click="btnClick(index)"
>{{ item.name }}</el-button>
>{{ item.name }}</span>
</div>
<div class="input_right">
<el-input
......@@ -224,6 +222,22 @@ export default {
.button_group {
padding: 17px 10px;
}
.btn_default {
display: inline-block;
padding: 6px 15px;
border-radius: 14px;
font-size: 12px;
margin-right: 6px;
cursor: pointer;
}
.btn_default:hover {
background-color: #515fe7;
color: #fff;
}
.btn_default:focus {
background-color: #fff;
color: #606266;
}
.btn_actice {
background-color: #515fe7;
color: #fff;
......
......@@ -10,7 +10,7 @@
<span
class="info_fix"
v-if="data.fixed_process"
@click="goto_page(data.fixedurl)"
@click="goto_page(data.fixed_url)"
>
我要编辑
</span>
......@@ -72,7 +72,7 @@
>
我要修改
</span>
<span class="right undersell" v-if="data.deploy" @click="subevent(10)">
<span class="right undersell undersell2" v-if="data.deploy" @click="subevent(10)">
部署
</span>
<span class="right undersell1" v-if="data.undeploy" @click="subevent(9)">
......@@ -168,6 +168,14 @@ export default {
this.$emit("debuggerfunc");
} else if (val == 6) {
this.$emit("applymy");
} else if (val == 7) {
this.$emit("unpublic", this.data);
} else if (val == 8) {
this.$emit("public1", this.data);
} else if (val == 9) {
this.$emit("undeploy", this.data);
} else if (val == 10) {
this.$emit("deploy", this.data);
}
},
goto_page(url) {
......@@ -276,6 +284,9 @@ export default {
background-color: #e6ebfe;
margin-left: 10px;
}
.undersell2{
margin-left: 10px;
}
.undermy {
background-color: #515fe7;
color: #e6ebfe;
......
......@@ -170,6 +170,7 @@ export default {
background-color: #f9fafc;
padding: 18px;
margin-top: 15px;
border-radius: 8px;
}
.application_base_info:not(:last-child) {
margin-right: 50px;
......@@ -222,17 +223,12 @@ export default {
width: 220px;
margin-left: 20px;
}
.application_info .el-button--primary {
</style>
<style>
.application_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7;
border-color: #515fe7;
}
.application_info .el-button--warning.is-plain {
background-color: #fcefd6;
border-color: #fac266;
color: #e56600;
}
.application_info .el-button--warning {
background-color: #e56600;
border-color: #e56600;
}
</style>
......@@ -21,7 +21,7 @@
<img :src="data.cover" width="100%" />
<map-view
v-if="data.type === 'Map Service'"
:id="data.portal_id"
:id="data.portal_id"
></map-view>
</div>
<div class="main_container-right">
......@@ -98,7 +98,7 @@
></el-input-number>
</div>
</div>
<div class="apaas_button commodity_action">
<div class=" commodity_action">
<el-button
type="warning"
plain
......@@ -339,12 +339,13 @@ export default {
vertical-align: middle;
}
.service_title > .service_access_info > img {
width: 15px;
width: 19px;
margin-right: 5px;
}
.service_base_info {
padding: 18px;
background-color: #f9fafc;
border-radius: 8px;
}
.service_base_info > li,
.commodity_information {
......@@ -398,3 +399,11 @@ export default {
margin-left: 20px;
}
</style>
<style>
.service_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7;
border-color: #515fe7;
}
</style>
......@@ -329,7 +329,6 @@ export default {
for (let i = 0; i < val.length; i++) {
this.filterLists[i + 1].name = val[i];
}
console.log(this.filterLists);
},
},
},
......
......@@ -5,10 +5,7 @@
v-for="(item, index) in data"
:key="'detail_' + index"
>
<h3
class="detail-title"
v-text="item.name + ':'"
></h3>
<h3 class="detail-title" v-text="item.name + ':'"></h3>
<service-steps
v-if="item.type == 'step'"
......@@ -24,6 +21,10 @@
class="detail-code"
v-html="item.value"
></div>
<workflows-view
v-else-if="item.type == 'workflows'"
:id="item.value"
></workflows-view>
<el-table
v-else-if="item.type == 'table'"
class="detail-table"
......@@ -66,10 +67,12 @@
<script>
import serviceSteps from "@/components/service-tabs/service-steps";
import workflowsView from "@/components/work-flow/workflows-view";
export default {
components: {
serviceSteps,
workflowsView,
},
props: {
data: {
......
......@@ -160,6 +160,7 @@ export default {
}
.service_info_tab .el-table {
width: 100%;
text-align: left;
}
.service_info_tab .el-table__row:nth-child(odd) td {
background-color: #f8f9fd;
......
......@@ -137,6 +137,11 @@ export default {
};
</script>
<style>
.outborder .system .el-input__prefix,.outborder .system .el-input__suffix{
left: auto;
}
</style>
<style scoped>
.outborder {
border-bottom: 2px solid rgba(244, 247, 252, 1);
......
......@@ -54,7 +54,7 @@
<div class="shopping_cell_specification_edit">
<el-popover
placement="right-start"
width="280"
width="300"
v-model="visible"
@show="setSpecificationPop"
>
......@@ -70,7 +70,14 @@
:class="specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size="mini"
@click="changeSpecification(item.id)"
>{{ index + 1 + ". " + item.des }}</el-button>
>
{{ index + 1 + ". " + "访问次数:" +
item.pv +
"/日," +
"访问量:" +
item.count +
"/日" }}
</el-button>
</div>
<div class="no_option" v-else>暂无规格</div>
</div>
......@@ -151,25 +158,26 @@ export default {
cellIndex: { type: Number, default: null },
cellCheck: {
type: Boolean,
default: false
default: false,
},
readOnly: {
type: Boolean,
default: false
default: false,
},
cellIsService: {
type: Boolean
}
type: Boolean,
},
},
watch: {
cellCheck: function(val) {
cellCheck: function (val) {
this.checkedItem = val;
},
cellItem: {
immediate: true, // 这句重要
handler(val) {
this.cellItems = val;
this.cellItems.is_subscribe = this.cellItems.is_subscribe == 1 ? true : false;
this.cellItems.is_subscribe =
this.cellItems.is_subscribe == 1 ? true : false;
if (this.cellIsService) {
if (this.cellItems.service.buy_method == 1) {
this.specificationApplicationBtns = [{ id: 1, value: "按月" }];
......@@ -178,12 +186,12 @@ export default {
} else {
this.specificationApplicationBtns = [
{ id: 1, value: "按月" },
{ id: 2, value: "按年" }
{ id: 2, value: "按年" },
];
}
}
}
}
},
},
},
data: () => ({
cellItems: {},
......@@ -195,12 +203,12 @@ export default {
specificationApplicationPop: 1,
appSpecificationBtns: [
{ id: 1, value: "部署" },
{ id: 2, value: "开发" }
{ id: 2, value: "开发" },
],
specificationApplicationBtns: [
{ id: 1, value: "按月" },
{ id: 2, value: "按年" }
]
{ id: 2, value: "按年" },
],
}),
computed: {
getSpecification() {
......@@ -211,14 +219,20 @@ export default {
this.cellItems.service.request_spcs_info.length != 0
) {
let requestArr = this.cellItems.service.request_spcs_info;
requestArr.forEach(item => {
requestArr.forEach((item) => {
arr.push(item.id);
});
}
let num = arr.indexOf(this.cellItems.spec_id);
let specification = "";
if (num != -1) {
specification = this.cellItems.service.request_spcs_info[num].des;
specification =
"访问次数:" +
this.cellItems.service.request_spcs_info[num].pv +
"/日," +
"访问量:" +
this.cellItems.service.request_spcs_info[num].count +
"/日";
}
return specification;
} else {
......@@ -228,7 +242,7 @@ export default {
return "开发";
}
}
}
},
},
mounted() {},
methods: {
......@@ -263,23 +277,23 @@ export default {
changeCellItem() {
this.$emit("changeCellMsg", {
index: this.cellIndex,
data: this.cellItems
data: this.cellItems,
});
},
delCellItem() {
this.$api.serviceShop
.delShoppingCart([this.cellItems.id])
.then(response => {
.then((response) => {
if (response.data.success == 1) {
this.$message({
message: this.cellIsService ? "删除该服务成功" : "删除该应用成功",
type: "success"
type: "success",
});
this.$emit("updateList");
} else {
this.$message({
message: this.cellIsService ? "删除该服务失败" : "删除该应用失败",
type: "error"
type: "error",
});
}
});
......@@ -290,16 +304,16 @@ export default {
duration: this.cellItems.duration,
spec_id: this.cellItems.spec_id,
duration_method: this.cellItems.duration_method,
is_subscribe: Number(this.cellItems.is_subscribe)
is_subscribe: Number(this.cellItems.is_subscribe),
};
this.$api.serviceShop.updateShoppingCart(query).then(response => {
this.$api.serviceShop.updateShoppingCart(query).then((response) => {
if (response.data.success == 1) {
} else {
console.log(response.data.errMsg);
}
});
}
}
},
},
};
</script>
......@@ -437,6 +451,14 @@ export default {
}
.shopping_cell_specification_btn {
margin: 0 10px 10px;
max-width: calc(100% - 20px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.shopping_cell_specification_btn:hover {
background-color: #b2baf5;
color: #f4f7fc;
}
.shopping_cell_specification_btn.active {
background-color: #515fe7;
......
......@@ -200,7 +200,7 @@
{{ scope.row[item.prop] }}
</span>
<!-- 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>
</template>
</el-table-column>
......@@ -460,7 +460,11 @@ export default {
});
},
gotopage(url,id){
this.$router.push(`/fwgl/0/0/servicedetail/${id}`)
if(url=='/'){
this.$router.push(`/fwgl/0/0/servicedetail/${id}`)
}else{
this.$router.push(`${url}${id}`)
}
},
//本地删除
deleteLocal(val) {
......
......@@ -5,9 +5,9 @@
<div class="legend_title">拓扑图图例</div>
<div class="legend_inner">
<div class="legend_in_tit">服务类型</div>
<div id="nodes" ref="lengedNodes" class="legend_nodes"></div>
<div id="nodes" ref="legendNodes" class="legend_nodes"></div>
<div class="legend_in_tit">调用状态</div>
<div id="edges" ref="lengedEdges" class="legend_edges"></div>
<div id="edges" ref="legendEdges" class="legend_edges"></div>
</div>
</div>
</div>
......@@ -22,11 +22,18 @@ export default {
default: () => {
return {
nodes: [],
edges: []
edges: [],
};
}
},
},
namespace: String
namespace: String,
},
data: () => {
return {
graph: null,
legendNodes: null,
legendEdges: null,
};
},
mounted() {},
watch: {
......@@ -34,13 +41,13 @@ export default {
this.getCavData();
this.getLegendNodes();
this.getLegendEdges();
}
},
},
methods: {
// shu ju chu li
getCavData() {
let self = this;
self.datas.nodes.map(node => {
self.datas.nodes.map((node) => {
node.id = node.data.id;
switch (node.data.svcType) {
case "数据服务":
......@@ -87,12 +94,12 @@ export default {
fontSize: 12,
stroke: "#fffef9",
lineWidth: 4,
cursor: "pointer"
cursor: "pointer",
},
position: "bottom"
position: "bottom",
};
});
self.datas.edges.map(edge => {
self.datas.edges.map((edge) => {
edge.id = edge.data.id;
edge.source = edge.data.source;
edge.target = edge.data.target;
......@@ -107,10 +114,10 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
strokeOpacity: 1,
cursor: "pointer"
cursor: "pointer",
};
if (edge.data.traffic.protocol == "tcp") {
// tcp
......@@ -151,11 +158,12 @@ export default {
self.getCav();
},
getCav() {
if (this.graph) this.graph.destroy();
const width = this.$refs.conCav.scrollWidth;
const height = this.$refs.conCav.scrollHeight || 500;
let self = this;
// console.log(self.datas);
const graph = new G6.Graph({
this.graph = new G6.Graph({
container: "container",
width,
height,
......@@ -165,78 +173,79 @@ export default {
// 流程图布局
type: "dagre",
rankdir: "LR",
nodesep: 12
nodesep: 12,
},
modes: {
default: ["zoom-canvas", "drag-canvas", "drag-node"]
default: ["zoom-canvas", "drag-canvas", "drag-node"],
},
defaultNode: {
color: "#5B8FF9",
style: {
lineWidth: 2,
fill: "#C6E5FF",
cursor: "pointer"
cursor: "pointer",
},
labelCfg: {
style: {
fill: "#f36c21",
fontSize: 10
fontSize: 10,
},
position: "bottom"
}
position: "bottom",
},
},
defaultEdge: {
style: {
stroke: "#e2e2e2",
lineWidth: 1,
lineAppendWidth: 6,
opacity: 1
opacity: 1,
},
labelCfg: {
style: {
fontSize: 10,
stroke: "#fffef9",
fill: "#595959",
lineWidth: 4
}
}
lineWidth: 4,
},
},
},
nodeStateStyles: {
highlight: {
opacity: 1
opacity: 1,
},
dark: {
opacity: 0.2
}
opacity: 0.2,
},
},
edgeStateStyles: {
highlight: {
opacity: 1
opacity: 1,
},
dark: {
opacity: 0.2
opacity: 0.2,
},
click: {
lineWidth: 3
}
lineWidth: 3,
},
},
plugins: []
plugins: [],
});
// 节点点击
graph.on("node:click", function(e) {});
this.graph.on("node:click", function (e) {});
// 路径点击
graph.on("edge:click", function(e) {});
graph.on("node:dblclick", function(e) {});
this.graph.on("edge:click", function (e) {});
this.graph.on("node:dblclick", function (e) {});
// 点击画布
graph.on("canvas:click", function(e) {});
graph.data(self.datas);
graph.render();
this.graph.on("canvas:click", function (e) {});
this.graph.data(self.datas);
this.graph.render();
},
getLegendNodes() {
if (this.legendNodes) this.legendNodes.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedNodes.scrollWidth;
const height = this.$refs.lengedNodes.scrollHeight;
const legendGraph = new G6.Graph({
const width = this.$refs.legendNodes.scrollWidth;
const height = this.$refs.legendNodes.scrollHeight;
this.legendNodes = new G6.Graph({
container: "nodes",
width: width,
height: height,
......@@ -244,16 +253,16 @@ export default {
style: {
fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细
lineWidth: 1, // 节点描边粗细
},
labelCfg: {
position: "right",
offset: 10,
style: {
fill: "#333"
}
}
}
fill: "#333",
},
},
},
});
const legendX = 20;
const legendBeginY = 20;
......@@ -268,7 +277,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shujufw.svg"),
size: [15, 15],
label: "数据服务"
label: "数据服务",
},
{
id: "level2",
......@@ -277,7 +286,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shikongfw.svg"),
size: [15, 15],
label: "时空服务"
label: "时空服务",
},
{
id: "level3",
......@@ -286,7 +295,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shipinfw.svg"),
size: [15, 15],
label: "视频服务"
label: "视频服务",
},
{
id: "level4",
......@@ -295,7 +304,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
size: [15, 15],
label: "感知服务"
label: "感知服务",
},
{
id: "level5",
......@@ -304,18 +313,19 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_zonghefw.svg"),
size: [15, 15],
label: "综合应用"
}
]
label: "综合应用",
},
],
};
legendGraph.data(legendData);
legendGraph.render();
this.legendNodes.data(legendData);
this.legendNodes.render();
},
getLegendEdges() {
if (this.legendEdges) this.legendEdges.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedEdges.scrollWidth;
const height = this.$refs.lengedEdges.scrollHeight;
const legendGraph = new G6.Graph({
const width = this.$refs.legendEdges.scrollWidth;
const height = this.$refs.legendEdges.scrollHeight;
this.legendEdges = new G6.Graph({
container: "edges",
width: width,
height: height,
......@@ -323,16 +333,16 @@ export default {
style: {
fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细
lineWidth: 1, // 节点描边粗细
},
labelCfg: {
position: "right",
offset: 10,
style: {
fill: "#333"
}
}
}
fill: "#333",
},
},
},
});
const legendX = 10;
const legendBeginY = 20;
......@@ -345,7 +355,7 @@ export default {
x: legendX,
y: legendBeginY,
type: "circle",
size: 1
size: 1,
},
// line1 point 1
{
......@@ -354,7 +364,7 @@ export default {
y: legendBeginY,
label: "正常",
type: "circle",
size: 1
size: 1,
},
// line2 point 0
{
......@@ -362,7 +372,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding,
type: "circle",
size: 1
size: 1,
},
// line2 point 1
{
......@@ -371,8 +381,8 @@ export default {
y: legendBeginY + legendYPadding,
label: "错误",
type: "circle",
size: 1
}
size: 1,
},
],
edges: [
{
......@@ -385,10 +395,10 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
cursor: "pointer"
}
cursor: "pointer",
},
},
{
id: "line1",
......@@ -400,17 +410,17 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
cursor: "pointer"
}
}
]
cursor: "pointer",
},
},
],
};
legendGraph.data(legendData);
legendGraph.render();
}
}
this.legendEdges.data(legendData);
this.legendEdges.render();
},
},
};
</script>
......
<template>
<div>
<div class="super-flow-demo1">
<div class="super-flow-demo1">
<div class="scale_block">
<div class="scale_control">
<div class="less">
<i class="el-icon-minus"></i>
</div>
<div class="num">{{ scale_num }}%</div>
<div class="add">
<i class="el-icon-plus"></i>
</div>
</div>
<div class="node-container">
<p class="label_head">节点类型</p>
<p class="label_explanation">请拖拽添加到流程中</p>
<el-input-number v-model="scale_num" @change="handleChange" :step="10" :step-strictly="true" :min="50" :max="150" label="描述文字"></el-input-number>
<span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span>
<div
class="node-item"
:class="{'node-item-begin': item.value.meta.type == 1, 'node-item-end': item.value.meta.type == 2, 'node-item-default': item.value.meta.type == 3}"
v-for="(item, index) in nodeItemList"
:key="index"
@mousedown="evt => nodeItemMouseDown(evt, item.value)"
>
<span>{{item.label}}</span>
</div>
</div>
</div>
<div class="flow-container" ref="flowContainer">
<super-flow
ref="superFlow"
:node-list="nodeList"
:link-list="linkList"
:link-menu="linkMenu"
line-color="#c4d8f8"
onLineColor="#94a8c8"
:origin="origin"
>
<template v-slot:node="{meta}">
<div
:class="{'flow-node-begin': nodeParams(meta.id).type == 1, 'flow-node-end': nodeParams(meta.id).type == 2, 'flow-node-default': nodeParams(meta.id).type == 3 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 3 && meta.id == nodeItem.id }"
:id="meta.id"
>
<div
class="node_span"
@click="clickItem(meta.id)"
@blur="blurItem"
>{{nodeParams(meta.id).name}}</div>
</div>
</template>
</super-flow>
</div>
<div class="flow_options">
<p class="options_head">操作</p>
<div class="options_item" @click="showGeneralSettings">
<img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" />
<p class="options_text">常规设置</p>
</div>
<div class="options_item_1">
<img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" />
<p class="options_text">插件设置</p>
<div class="options_pop">
<div class="options_pop_item" @click="showInterfacePlugin">
<img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="options_item_img" />
<p class="options_item_text">接口插件</p>
</div>
<div class="options_pop_item" @click="showProcessService">
<img :src="require('@/assets/imgs/lcsj_ic_liucheng.png')" class="options_item_img" />
<p class="options_item_text">流程服务</p>
</div>
<div class="options_pop_item" @click="showTimeoutManagement">
<img :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')" class="options_item_img" />
<p class="options_item_text">超时管理</p>
</div>
</div>
</div>
<div v-if="nodeParams(nodeItem.id).plugins && nodeParams(nodeItem.id).plugins.length > 0">
<div class="checked_line"></div>
<p class="options_head_1">已选插件</p>
<div
class="checked_item"
v-for="(item, index) in nodeParams(nodeItem.id).plugins"
:key="'checked' + index"
>
<div v-if="item.plugin_type == 1">
<img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="checked_item_img" />
<img
:src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(1)"
class="checked_item_del"
/>
<p class="checked_item_text">接口插件</p>
</div>
<div v-else-if="item.plugin_type == 2">
<img :src="require('@/assets/imgs/lcsj_ic_liucheng.png')" class="checked_item_img" />
<img
:src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(2)"
class="checked_item_del"
/>
<p class="checked_item_text">流程服务</p>
</div>
<div v-else-if="item.plugin_type == 3">
<img :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')" class="checked_item_img" />
<img
:src="require('@/assets/imgs/lcsj_btn_delete.png')"
@click="delItem(3)"
class="checked_item_del"
/>
<p class="checked_item_text">超时管理</p>
</div>
</div>
</div>
<div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer">
<super-flow ref="superFlow" :node-list="nodeList" :link-list="linkList" :link-menu="linkMenu" :link-base-style="linkBaseStyle" :link-style="linkStyle" :link-desc="linkDesc" :origin="origin">
<template v-slot:node="{meta}">
<div :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id">
<div @click="clickItem(meta)">
{{meta.name}}
</div>
<el-dialog
:visible.sync="dialog_general"
top="25vh"
width="420px"
:modal-append-to-body="false"
title="常规设置"
:close-on-click-modal="false"
>
<div class="general_settings">
<p class="general_title">节点编号:</p>
<p
class="general_val"
>{{ nodeParams(nodeItem.id).node_code == "暂无(保存后将自动生成节点编号)" ? "" : nodeParams(nodeItem.id).node_code }}</p>
<p class="general_title">节点名称:</p>
<p class="general_input">
<el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
</p>
<div class="dia_footer">
<el-button class="cancel" @click="generalCancel">取消</el-button>
<el-button class="submit" @click="generalSubmit">确定</el-button>
</div>
</div>
</el-dialog>
<el-dialog
:visible.sync="dialog_interface"
top="25vh"
width="80vw"
:modal-append-to-body="false"
title="接口插件"
:close-on-click-modal="false"
>
<div class="interface_plugin">
<div class="interface_msg">
<i class="el-icon-warning-outline"></i>
<span>接口插件设置后,流程服务在节点完成时自动调取该接口,同步节点业务数据,保存到流程服务中。</span>
</div>
<div class="interface_plugin_item">
<div class="fwcs_fwdz">服务地址:</div>
<div class="fwcs_fwdz_inner">
<el-input
placeholder="请输入内容"
@input="getUrl"
v-model="serviceUrl"
class="input-with-select"
>
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option
v-for="item in optionType"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-input>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs">连接测试</el-button>
</div>
<el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
<el-tab-pane label="请求参数" name="0">
<CesTable
ref="fwcs_sjfw_qq"
size="mini"
:border="true"
:headers="sjfwQqcs"
url
:datas="datasSj"
:searchShow="false"
:addRowBtn="false"
:autoAdd="true"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
@changeTable="changeTable"
></CesTable>
</el-tab-pane>
<el-tab-pane label="请求体" name="1">
<div class="sjfw_qqt">
<el-radio-group v-model="sjfwQqt">
<el-radio label="JSON">JSON</el-radio>
</el-radio-group>
</div>
<Codes ref="jsonCodes"></Codes>
</el-tab-pane>
<el-tab-pane label="授权信息" name="2">
<el-row class="sqxx_row">
<el-col :span="6">
<div class="sqxx_title">授权方式:</div>
<el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
<el-option
v-for="item in optionsSq"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
<el-col :span="2" class="center_line_c">
<div class="center_line"></div>
</el-col>
<el-col :span="16">
<div class="sqxx_title">Token:</div>
<el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
<div v-show="resultShow && resSuccess" class="add_params">
<div class="split_line"></div>
<div class="sjfw_qqcstx">请求参数信息填写:</div>
<CesTable
ref="fwcs_sjfw_qqcs"
size="mini"
:border="true"
:headers="sjfwQqcstx"
url
:datas="datasQqcs"
:searchShow="false"
:addRowBtn="false"
:autoAdd="false"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></CesTable>
<div class="sjfw_fhcstx">返回参数信息填写:</div>
<CesTable
ref="fwcs_sjfw_fhcs"
size="mini"
:border="true"
:headers="sjfwFhcstx"
url
:datas="datasFhcs"
:searchShow="false"
:addRowBtn="false"
:autoAdd="false"
:isDialog="false"
:isSelection="false"
:isIndex="true"
:radius="true"
:emptyText="emptyText"
:stripe="false"
:paginationShow="false"
:pageSizeShow="false"
headerCellClassName="th_pink"
></CesTable>
</div>
<div v-show="resultShow && !resSuccess">
<div class="skfw_csfwxx">测试服务信息:</div>
<div class="test_succ">
<div class="skcs_jg">
<img src="@/assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
</div>
</div>
</template>
</super-flow>
</div>
</div>
<div class="dia_footer">
<el-button class="cancel" @click="interfaceCancel">取消</el-button>
<el-button class="submit" @click="interfaceSubmit">确定</el-button>
</div>
</div>
</div>
</el-dialog>
<el-dialog
:visible.sync="dialog_process"
top="25vh"
width="600px"
:modal-append-to-body="false"
title="流程服务"
:close-on-click-modal="false"
>
<div class="process_service">
<div class="process_msg">
<i class="el-icon-warning-outline"></i>
<span>配置流程服务插件后,该节点可调用流程服务,并在此节点触发该流程。</span>
</div>
<p class="process_title">我的服务:</p>
<p class="process_input">
<el-select v-model="service" placeholder="请选择服务">
<el-option
v-for="item in my_service_list"
:label="item.name"
:value="item.workflows_id"
:key="item.workflows_id"
></el-option>
</el-select>
</p>
<div class="dia_footer">
<el-button class="cancel" @click="processCancel">取消</el-button>
<el-button class="submit" @click="processSubmit">添加</el-button>
</div>
</div>
</el-dialog>
<el-dialog
:visible.sync="dialog_timeout"
top="25vh"
width="600px"
:modal-append-to-body="false"
title="超时管理"
:close-on-click-modal="false"
>
<div class="timeout_service">
<div class="timeout_msg">
<i class="el-icon-warning-outline"></i>
<span>添加超时管理插件后,根据配置该节点超时后会发送消息给请求方。</span>
</div>
<p class="timeout_title">超时设置:</p>
<div class="timeout_input">
<div class="timeout_row">
<div class="timeout_input_group">
<div class="input_left">最大时长</div>
<el-input-number v-model="max_time_0" controls-position="right" :min="0"></el-input-number>
<el-select v-model="max_time_type_0" class="input_right_select" placeholder="请输入">
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="timeout_check">
<el-checkbox v-model="max_time_check_0">超时提醒</el-checkbox>
</div>
</div>
</div>
<div class="timeout_input margin_high">
<div class="timeout_row">
<div class="timeout_input_group">
<div class="input_left">最大时长</div>
<el-input-number v-model="max_time_1" controls-position="right" :min="0"></el-input-number>
<el-select v-model="max_time_type_1" class="input_right_select" placeholder="请输入">
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="timeout_check">
<el-checkbox v-model="max_time_check_1">超时终止流程</el-checkbox>
</div>
</div>
</div>
<div class="dia_footer">
<el-button class="cancel" @click="timeoutCancel">取消</el-button>
<el-button class="submit" @click="timeoutSubmit">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import CesTable from "@/components/table/table-um";
import Codes from "@/components/general/codes";
const drawerType = {
node: 0,
link: 1
link: 1,
};
export default {
components: {
CesTable,
Codes,
},
props: {
node_list: {
type: Array,
default: () => [],
},
link_list: {
type: Array,
default: () => [],
},
node_params_list: {
type: Array,
default: () => [],
},
},
watch: {
node_list: {
handler(val) {
this.setVal();
},
deep: true,
},
},
data() {
return {
scale_num: 100,
......@@ -68,14 +446,14 @@ export default {
} else {
this.$refs.linkSetting.clearValidate();
}
}
},
},
linkSetting: {
desc: ""
desc: "",
},
nodeSetting: {
name: "",
desc: ""
desc: "",
},
dragConf: {
isDown: false,
......@@ -85,76 +463,161 @@ export default {
clientX: 0,
clientY: 0,
ele: null,
info: null
info: null,
},
nodeItemList: [
{
label: "开始",
label: "普通节点",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "开始开始开始开始开始",
name: "开始开始开始开始开始",
type: 0
}
}
label: "普通节点",
name: "普通节点",
type: 3,
},
},
},
{
label: "结束",
label: "开始",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "结束",
name: "结束",
type: 1
}
}
label: "开始",
name: "开始",
type: 1,
},
},
},
{
label: "普通节点",
label: "结束",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "普通节点",
name: "普通节点",
type: 2
}
}
}
label: "结束",
name: "结束",
type: 2,
},
},
},
],
nodeParamsList: [],
linkMenu: [
[
{
label: "删除",
selected: link => {
selected: (link) => {
console.log(link);
link.remove();
}
},
},
{
label: "编辑",
selected: link => {
this.drawerConf.open(drawerType.link, link);
}
}
]
],
],
linkBaseStyle: {
color: "#666666", // line 颜色
hover: "#FF0000", // line hover 的颜色
textColor: "#666666", // line 描述文字颜色
textHover: "#FF0000", // line 描述文字 hover 颜色
font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
dotted: false, // 是否是虚线
lineDash: [4, 4], // 虚线时生效
background: "rgba(255,255,255,0.6)" // 描述文字背景色
}
dialog_general: false,
nodeItem: {
id: "",
name: "",
},
node_name: "",
show_options_pop: false,
dialog_interface: false,
optionType: [
{ label: "GET", value: 1 },
{ label: "POST", value: 2 },
{ label: "PUT", value: 3 },
{ label: "DELETE", value: 4 },
],
select: 1,
serviceUrl: "",
activeName: "0",
sjfwQqt: "JSON",
emptyText: "暂无数据",
sqfsVal: "",
sjfwQqcs: [
{
label: "请求字段编码",
prop: "requestEncoding",
type: "input",
align: "left",
},
{ label: "请求值", prop: "requestValue", type: "input", align: "left" },
],
datasSj: [],
optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
tokenVal: "",
noSearchUrl: "",
sjfwQqcstx: [
{ label: "字段编码", prop: "name", type: "", align: "left" },
{ label: "示例值", prop: "example", type: "input", align: "left" },
{
label: "字段类型",
prop: "show_type",
type: "",
align: "left",
width: "140",
},
{
label: "字段名称*",
prop: "label",
type: "input",
align: "left",
},
{
label: "是否必须*",
prop: "is_must",
type: "select",
align: "left",
width: 100,
selectArr: [
{ label: "", value: 1 },
{ label: "", value: 0 },
],
hasDefault: true,
},
{ label: "字段说明", prop: "descript", type: "input", align: "left" },
],
sjfwFhcstx: [
{ label: "字段编码", prop: "name", type: "", align: "left" },
{ label: "示例值", prop: "example", type: "input", align: "left" },
{ label: "字段类型", prop: "show_type", type: "", align: "left" },
{
label: "字段名称*",
prop: "label",
type: "input",
align: "left",
},
{ label: "字段说明", prop: "descript", type: "input", align: "left" },
],
datasQqcs: [],
datasFhcs: [],
resSuccess: false,
resultShow: false,
dataType: "",
body_fields: [],
param_fields: [],
request_fields: [],
response_fields: [],
dialog_process: false,
my_service_list: [],
service: "",
dialog_timeout: false,
durationOptions: [
{ value: 1, label: "分钟" },
{ value: 2, label: "小时" },
{ value: 3, label: "" },
],
max_time_0: undefined,
max_time_1: undefined,
max_time_type_0: 1,
max_time_type_1: 1,
max_time_check_0: false,
max_time_check_1: false,
};
},
mounted() {
this.getProcessServiceList();
document.addEventListener("mousemove", this.docMousemove);
document.addEventListener("mouseup", this.docMouseup);
this.$once("hook:beforeDestroy", () => {
......@@ -164,12 +627,7 @@ export default {
},
methods: {
linkStyle(link) {
return {
// hover: '#FF00FF'
};
},
linkDesc(link) {
return link.meta ? link.meta.desc : "";
return {};
},
docMousemove({ clientX, clientY }) {
const conf = this.dragConf;
......@@ -191,7 +649,7 @@ export default {
top,
right,
bottom,
left
left,
} = this.$refs.flowContainer.getBoundingClientRect();
// 判断鼠标是否进入 flow container
if (
......@@ -215,10 +673,51 @@ export default {
clientY - conf.offsetTop
);
// 添加节点
let query = { width: 120, height: 48, meta: {} };
query.meta.type = conf.info.meta.type;
if (!conf.info.meta.id) {
query.meta.id =
parseInt(Math.random() * 1000 * 1000) +
"a" +
parseInt(Math.random() * 1000 * 1000);
}
console.log(query);
this.$refs.superFlow.addNode({
coordinate,
...conf.info
...query,
});
if (
this.nodeParamsList.findIndex((item) => {
return item.id == query.meta.id;
}) == -1
) {
let obj = {};
if (conf.info.meta.type == 1) {
obj = {
label: "开始",
name: "开始",
type: 1,
id: query.meta.id,
};
} else if (conf.info.meta.type == 2) {
obj = {
label: "结束",
name: "结束",
type: 2,
id: query.meta.id,
};
} else if (conf.info.meta.type == 3) {
obj = {
label: "普通节点",
name: "普通节点",
type: 3,
id: query.meta.id,
plugins: [],
};
}
this.nodeParamsList.push(obj);
console.log(this.nodeParamsList);
}
conf.isMove = false;
}
if (conf.ele) {
......@@ -227,7 +726,6 @@ export default {
}
},
nodeItemMouseDown(evt, info) {
info.meta.id = parseInt(Math.random() * 1000 * 1000);
const { clientX, clientY, currentTarget } = evt;
const { top, left } = evt.currentTarget.getBoundingClientRect();
const conf = this.dragConf;
......@@ -239,7 +737,7 @@ export default {
clientY: clientY,
info,
ele,
isDown: true
isDown: true,
});
ele.style.position = "fixed";
ele.style.margin = "0";
......@@ -247,18 +745,378 @@ export default {
ele.style.left = clientX - conf.offsetLeft + "px";
this.$el.appendChild(this.dragConf.ele);
},
clickItem(item) {
clickItem(index) {
let item = this.nodeParams(index);
this.nodeItem = item;
console.log(item);
},
blurItem() {
this.nodeItem = {
id: "",
};
console.log(this.nodeItem);
},
getData() {
return this.$refs.superFlow.toJSON();
return {
obj: this.$refs.superFlow.toJSON(),
params: this.nodeParamsList,
};
},
handleChange() {}
}
handleChange() {},
checkNodeCouldEdit() {
let self = this;
if (self.nodeItem.id && self.nodeItem.id != "") {
if (self.nodeItem.type == 3) {
return true;
} else {
self.$message({
message: "开始和结束节点不可被编辑",
type: "warning",
});
return false;
}
} else {
self.$message({
message: "请选择节点",
type: "warning",
});
return false;
}
},
showGeneralSettings() {
if (this.checkNodeCouldEdit()) {
let self = this;
self.node_name = self.nodeParamsList.find((item) => {
return item.id == self.nodeItem.id;
}).name;
self.dialog_general = true;
}
},
showInterfacePlugin(query) {
if (this.checkNodeCouldEdit()) {
this.dialog_interface = true;
}
},
nodeParams(id) {
let index = this.nodeParamsList.findIndex((item) => {
return item.id == id;
});
if (index != -1) {
return this.nodeParamsList[index];
} else {
return {};
}
},
generalCancel() {
this.dialog_general = false;
},
generalSubmit() {
let self = this;
if (self.nodeItem.type == 3) {
let index = self.nodeParamsList.findIndex((item) => {
return item.id == self.nodeItem.id;
});
if (index != -1) {
self.nodeParamsList[index].name = self.node_name;
} else {
self.$message({
message: "修改失败",
type: "error",
});
}
}
self.dialog_general = false;
},
clickTab() {},
getUrl(enUrl) {
let url = decodeURI(enUrl);
let arr = [];
if (url.indexOf("?") != -1) {
this.noSearchUrl = url.substring(0, url.indexOf("?"));
let search = url.substring(url.indexOf("?") + 1);
let vars = search.split("&");
for (let i = 0; i < vars.length; i++) {
if (vars[i] != "") {
let pair = vars[i].split("=");
arr[i] = {};
arr[i].requestEncoding = pair[0] ? pair[0] : "";
arr[i].requestValue = pair[1] ? pair[1] : "";
}
}
} else {
this.noSearchUrl = enUrl;
}
this.serviceUrl = url;
this.datasSj = arr;
},
changeTable() {},
clickFwcs() {
let headers = {};
let requestData = {};
if (this.sqfsVal != "") {
headers.Authorization = [];
headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
}
let request = this.$refs.fwcs_sjfw_qq.getTableData();
for (let i = 0; i < request.length; i++) {
if (
request[i] &&
request[i].requestEncoding &&
request[i].requestValue &&
request[i].requestEncoding != "" &&
request[i].requestValue != ""
) {
if (
Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
) {
requestData[request[i].requestEncoding] = [];
requestData[request[i].requestEncoding][0] =
request[i].requestValue;
} else {
requestData[request[i].requestEncoding].push(
request[i].requestValue
);
}
}
}
let bodys = this.$refs.jsonCodes
? this.$refs.jsonCodes.getCodesVal()
: "";
let contentType = this.sjfwQqt;
let method = "";
switch (this.select) {
case 1:
method = "GET";
break;
case 2:
method = "POST";
break;
case 3:
method = "PUT";
break;
case 4:
method = "DELETE";
break;
default:
break;
}
let query = {
method: method,
url: this.serviceUrl,
headers: headers,
params: requestData,
body: bodys,
content_type: contentType,
data_service_type1: 5,
data_service_type2: 12,
};
this.$api.workbench.fwzcFwcs(query).then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.body_fields = data.body_fields;
this.param_fields = data.param_fields;
if (data.body_fields && data.body_fields.length != 0) {
this.datasQqcs = data.body_fields;
this.dataType = "body";
} else {
this.datasQqcs = data.param_fields;
this.dataType = "param";
}
this.datasFhcs = data.response_fields;
this.resSuccess = true;
this.resultShow = true;
} else {
this.resSuccess = false;
this.resultShow = true;
console.log(response.data.errMsg);
}
});
},
interfaceCancel() {
this.serviceUrl = "";
this.activeName = "0";
this.sqfsVal = "";
this.datasSj = [];
this.tokenVal = "";
this.noSearchUrl = "";
this.datasQqcs = [];
this.datasFhcs = [];
this.resSuccess = false;
this.resultShow = false;
this.dataType = "";
this.body_fields = [];
this.param_fields = [];
this.request_fields = [];
this.response_fields = [];
this.dialog_interface = false;
},
interfaceSubmit() {
if (this.resSuccess) {
let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
this.requestRules = 0;
this.responseRules = 0;
this.checkTable(requestData, 0);
this.checkTable(responseData, 1);
if (this.requestRules == 0 && this.responseRules == 0) {
let self = this;
self.request_fields = requestData;
self.response_fields = responseData;
let index = self.nodeParamsList.findIndex((item) => {
return item.id == self.nodeItem.id;
});
console.log(self.nodeParamsList[index]);
let plugin_index = self.nodeParamsList[index].plugins.findIndex(
(item) => {
return item.plugin_type == 1;
}
);
if (plugin_index == -1) {
self.nodeParamsList[index].plugins.push({
plugin_type: 1,
url: self.serviceUrl,
req_type: Number(self.select),
auth_method: self.sqfsVal,
auth_token: self.tokenVal,
query_fields: JSON.stringify(
self.dataType == "body" ? self.request_fields : self.body_fields
),
body_fields: JSON.stringify(
self.dataType == "param"
? self.request_fields
: self.param_fields
),
response_fields: JSON.stringify(self.response_fields),
});
} else {
self.nodeParamsList[index].plugins[plugin_index] = {
plugin_type: 1,
url: self.serviceUrl,
req_type: Number(self.select),
auth_method: self.sqfsVal,
auth_token: self.tokenVal,
query_fields: JSON.stringify(
self.dataType == "body" ? self.request_fields : self.body_fields
),
body_fields: JSON.stringify(
self.dataType == "param"
? self.request_fields
: self.param_fields
),
response_fields: JSON.stringify(self.response_fields),
};
}
console.log(self.nodeParamsList);
self.interfaceCancel();
} else if (this.requestRules != 0) {
this.$message.error("请完善请求参数信息中的字段名称");
} else if (this.responseRules != 0) {
this.$message.error("请完善返回参数信息中的字段名称");
}
} else {
this.$message.error("请保证接口有效");
}
},
checkTable(arr, rule) {
let self = this;
for (let i = 0; i < arr.length; i++) {
if (arr[i].name && arr[i].name != "") {
if (!arr[i].label || arr[i].label == "") {
if (rule == 0) {
this.requestRules = 1;
} else if (rule == 1) {
this.responseRules = 1;
}
return false;
}
}
if (arr[i].children && arr[i].children.length != 0) {
self.checkTable(arr[i].children, rule);
}
}
},
showProcessService() {
if (this.checkNodeCouldEdit()) {
this.dialog_process = true;
}
},
processCancel() {
this.service = "";
this.dialog_process = false;
},
processSubmit() {
let self = this;
if (self.service != "") {
let index = self.nodeParamsList.findIndex((item) => {
return item.id == self.nodeItem.id;
});
self.nodeParamsList[index].plugins.push({
plugin_type: 2,
ref_workflows_id: self.service,
});
this.processCancel();
} else {
this.$message.error("请选择流程服务");
}
},
showTimeoutManagement() {
if (this.checkNodeCouldEdit()) {
this.dialog_timeout = true;
}
},
timeoutCancel() {
this.max_time_0 = undefined;
this.max_time_1 = undefined;
this.max_time_type_0 = 1;
this.max_time_type_1 = 1;
this.max_time_check_0 = false;
this.max_time_check_1 = false;
this.dialog_timeout = false;
},
timeoutSubmit() {
let self = this;
let index = self.nodeParamsList.findIndex((item) => {
return item.id == self.nodeItem.id;
});
self.nodeParamsList[index].plugins.push({
plugin_type: 3,
timeout_notify: self.max_time_check_0, //超时提醒
timeout_stop: self.max_time_check_1, //超时终止
notice_max_time: self.max_time_0, // 超时最大时间
notice_time_unit: self.max_time_type_0, // 超时最大时间
stop_max_time: self.max_time_1, //停止最大时间单位,1:分钟,2:小时,3:天
stop_time_unit: self.max_time_type_1,
});
this.timeoutCancel();
},
setVal() {
this.nodeList = [...this.node_list];
this.linkList = [...this.link_list];
this.nodeParamsList = [...this.node_params_list];
},
getProcessServiceList() {
this.$api.workbench.getProcessServiceList().then((response) => {
if (response.data.success == 1) {
this.my_service_list = response.data.data;
}
});
},
delItem(type) {
let arr = this.nodeParams(this.nodeItem.id).plugins;
let plugin_index = arr.findIndex((item) => {
return item.plugin_type == type;
});
let index = this.nodeParamsList.findIndex((item) => {
return item.id == this.nodeItem.id;
});
this.nodeParamsList[index].plugins.split(plugin_index, 1);
},
},
};
</script>
<style lang="less">
<style lang="less" scoped>
.link-base-style-form {
.el-form-item {
margin-bottom: 12px;
......@@ -269,117 +1127,514 @@ export default {
.super-flow-demo1 {
margin-top: 20px;
width: 100%;
height: 800px;
background-color: #f5f5f5;
@list-width: 200px;
height: 100%;
background-color: #fff;
@list-width: 160px;
position: relative;
> .node-container {
width: @list-width;
> .flow-container {
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
.flow_options {
width: 84px;
padding-bottom: 30px;
background-color: #f8f9fd;
border-radius: 42px;
position: absolute;
z-index: 2;
left: 0;
height: 400px;
top: 10px;
right: 0;
text-align: center;
.options_head {
color: #242c43;
font-size: 14px;
font-weight: bold;
margin-top: 30px;
}
.options_item {
margin-top: 20px;
cursor: pointer;
color: #242c43;
&:hover {
color: #515fe7;
}
.options_img {
width: 40px;
height: 40px;
}
}
.options_item_1 {
margin-top: 20px;
cursor: pointer;
color: #242c43;
position: relative;
.options_img {
width: 40px;
height: 40px;
}
.options_pop {
display: none;
}
&:hover .options_pop {
position: absolute;
width: 250px;
height: 82px;
background-color: #0d1847;
border-radius: 10px;
z-index: 2;
top: 0;
right: 0;
animation: myfirst 0.5s;
display: flex;
overflow: hidden;
justify-content: space-around;
color: #ffffff;
font-size: 12px;
.options_pop_item {
padding-top: 10px;
.options_item_img {
width: 40px;
height: 40px;
}
.options_item_text {
white-space: nowrap;
}
}
}
@keyframes myfirst {
from {
width: 0;
}
to {
width: 250px;
}
}
}
.checked_line {
width: 64px;
height: 1px;
background-color: #e5e8f5;
margin: 20px auto;
}
.options_head_1 {
color: #242c43;
font-size: 14px;
font-weight: bold;
margin-top: 20px;
}
.checked_item {
margin-top: 20px;
cursor: pointer;
position: relative;
&:hover {
color: #515fe7;
}
.checked_item_img {
width: 40px;
height: 40px;
}
.checked_item_del {
position: absolute;
width: 12px;
height: 12px;
top: -4px;
right: 16px;
}
.checked_item_text {
white-space: nowrap;
}
}
}
}
.node-item {
@node-item-height: 42px;
font-size: 16px;
display: inline-block;
height: @node-item-height + 6;
width: 120px;
margin-top: 18px;
background-color: #ffffff;
border-radius: 10px;
line-height: @node-item-height;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
user-select: none;
text-align: center;
z-index: 6;
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
&.node-item-begin {
border: solid 3px #25bdb1;
}
&.node-item-end {
border: solid 3px #f78181;
}
&.node-item-default {
border: solid 3px #b4c6f5;
}
}
.scale_block {
position: absolute;
left: 0;
z-index: 2;
top: 5px;
width: 160px;
.scale_control {
width: 130px;
display: flex;
justify-content: space-around;
border-radius: 8px;
border: solid 2px #e3e5ef;
height: 40px;
font-size: 16px;
line-height: 36px;
margin: 0 auto;
color: #8390ee;
.less {
padding: 0 10px;
border-right: solid 2px #e3e5ef;
}
.add {
padding: 0 10px;
border-left: solid 2px #e3e5ef;
}
.num {
color: #58617a;
}
}
.node-container {
width: 160px;
height: 300px;
text-align: center;
background-color: #ffffff;
background-color: #f8f9fd;
border-radius: 8px;
margin-top: 20px;
.label_head {
font-weight: bold;
font-size: 18px;
font-size: 14px;
text-align: center;
padding: 20px 0;
padding: 20px 0 15px;
color: #242c43;
}
.label_explanation {
font-size: 16px;
font-size: 14px;
text-align: center;
padding-bottom: 5px;
color: #8890a7;
}
}
> .flow-container {
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
.general_settings {
font-size: 14px;
text-align: left;
.general_title {
margin-bottom: 20px;
padding-left: 10px;
}
.general_val {
margin-bottom: 30px;
padding-left: 10px;
}
.general_input {
margin-bottom: 50px;
}
}
.interface_plugin {
.interface_msg {
font-size: 12px;
color: #58617a;
width: 570px;
margin: 0 auto;
padding: 10px 0;
background-color: #f4f7fc;
border-radius: 8px;
}
.interface_plugin_item {
text-align: left;
.fwcs_fwdz {
color: #58617a;
margin: 20px 15px 15px;
font-size: 14px;
}
.fwcs_fwdz_inner {
margin-bottom: 20px;
}
.input-with-select {
width: 70%;
}
.fwcs_btn_fwcs {
background-color: #0f2683;
color: #ffffff;
margin-left: 10px;
}
.fwcs_tabs {
.sqxx_row {
padding: 0 20px;
.sqxx_title {
color: #58617a;
font-size: 14px;
margin: 10px 15px;
}
.sqxx_select {
width: 100%;
}
.center_line_c {
margin: 0 auto;
.center_line {
background-color: #f4f7fc;
width: 2px;
height: 400px;
position: relative;
left: 50%;
}
}
}
}
.split_line {
width: 100%;
height: 1px;
background-color: #f4f7fc;
margin: 30px 0;
}
.sjfw_qqcstx {
color: #58617a;
margin: 10px 15px;
font-size: 14px;
}
.sjfw_fhcstx {
color: #58617a;
margin: 30px 15px 10px;
font-size: 14px;
}
.skcs_jg {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: #0f2683;
font-size: 20px;
.skcs_jg_img {
position: relative;
top: 3px;
}
}
}
}
.process_service {
font-size: 14px;
text-align: left;
.process_msg {
font-size: 12px;
color: #58617a;
width: 430px;
margin: 0 auto;
padding: 10px 0;
background-color: #f4f7fc;
border-radius: 8px;
text-align: center;
}
.process_title {
margin: 20px 0 10px;
padding-left: 10px;
}
.process_val {
margin-bottom: 30px;
padding-left: 10px;
}
.process_input {
margin-bottom: 50px;
}
}
.timeout_service {
font-size: 14px;
text-align: left;
.timeout_msg {
font-size: 12px;
color: #58617a;
width: 430px;
margin: 0 auto;
padding: 10px 0;
background-color: #f4f7fc;
border-radius: 8px;
text-align: center;
}
.timeout_title {
margin: 20px 0 10px;
padding-left: 10px;
}
.timeout_val {
margin-bottom: 30px;
padding-left: 10px;
}
.timeout_input {
margin-bottom: 20px;
}
.margin_high {
margin-bottom: 50px;
}
}
.dia_footer {
font-size: 14px;
text-align: center;
display: flex;
justify-content: flex-end;
margin-top: 20px;
.cancel {
background-color: #c3caf8;
color: #0f2683;
width: 90px;
height: 34px;
padding: 0 20px;
}
.submit {
background-color: #0f2683;
color: #f8f9fd;
width: 90px;
height: 34px;
padding: 0 20px;
}
}
</style>
<style lang="less">
.super-flow {
.super-flow__node {
box-shadow: none;
border: none;
background-color: transparent;
border-radius: 8px;
&:focus {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
font-size: 16px;
/deep/ .node_span {
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flow-node-begin {
width: 100%;
height: 100%;
line-height: 36px;
line-height: 42px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #444;
border: solid 3px #109e93;
background-color: #25bdb1;
color: #ffffff;
}
.flow-node-end {
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #f80;
background-color: #f78181;
border: solid 3px #e86262;
color: #ffffff;
}
.flow-node-default {
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
border-radius: 8px;
background-color: #fff;
border: solid 3px #b4c6f5;
}
.flow-node-default-active {
width: 100%;
height: 100%;
line-height: 42px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #3a9;
border: solid 3px #b4c6f5;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
background-color: #515fe7;
color: #fff;
}
}
}
.node-item {
@node-item-height: 30px;
font-size: 14px;
display: inline-block;
height: @node-item-height;
.super-flow__menu-container .super-flow__menu {
width: 120px;
margin-top: 20px;
background-color: #ffffff;
line-height: @node-item-height;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
user-select: none;
text-align: center;
z-index: 6;
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
}
</style>
<style scoped>
.scale60 {
transform: scale(0.6, 0.6);
.super-flow-demo1 .el-dialog__wrapper {
padding-left: 180px;
}
.scale70 {
transform: scale(0.7, 0.7);
.super-flow-demo1 .el-dialog__body {
padding: 20px;
}
.scale80 {
transform: scale(0.8, 0.8);
.super-flow-demo1 >  .v-modal {
position: absolute;
border-radius: 8px;
width: calc(100% + 40px);
height: calc(100% + 230px);
top: -160px;
left: -20px;
}
.scale90 {
transform: scale(0.9, 0.9);
.fwcs_fwdz_inner .el-select .el-input {
width: 130px;
background-color: #0f2683;
color: #ffffff;
border-radius: 8px 0px 0px 8px;
}
.scale100 {
transform: scale(1, 1);
.interface_plugin .el-tabs__header .el-tabs__item:hover {
color: #e56600;
}
.timeout_input {
.timeout_row {
display: flex;
.timeout_input_group {
width: 400px;
display: flex;
.input_left {
display: inline-block;
width: 90px;
height: 40px;
padding: 0 0 0 15px;
background-color: #edeef4;
border: 1px #e3e5ef solid;
color: #8890a7;
border-radius: 8px 0 0 8px;
line-height: 40px;
font-size: 14px;
}
.el-input-number {
flex: 1;
.el-input__inner {
border-radius: 0;
color: #242c43;
}
.el-input-number__decrease {
display: none;
}
.el-input-number__increase {
display: none;
}
&.is-controls-right {
.el-input__inner {
padding-left: 15px;
padding-right: 15px;
text-align: left;
}
}
}
.input_right_select.el-select {
width: 80px;
}
.input_right_select.el-select .el-input {
width: 80px;
background-color: #0f2683;
color: #ffffff;
border-radius: 0 8px 8px 0;
}
.input_right_select .el-input .el-input__inner {
background-color: #0f2683;
color: #ffffff;
border: none;
}
}
.timeout_check {
margin-left: 20px;
line-height: 40px;
font-size: 16px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="workflows-view">
<super-flow
ref="superFlow"
:node-list="nodeList"
:link-list="linkList"
:origin="origin"
line-color="#c4d8f8"
on-line-color="#94a8c8"
:draggable="false"
:linkAddable="false"
>
<template v-slot:node="{ meta }">
<div
v-if="meta.type === 1 || meta.type === 2"
class="flow-node"
:class="`flow-node-${meta.type}`"
>
<span v-text="meta.name"></span>
</div>
<div v-else-if="hideDetail" class="flow-node">
<span v-text="meta.name"></span>
</div>
<el-tooltip v-else effect="dark" placement="right-start">
<div class="node-detail" slot="content">
<p>当前实例数:{{ meta.running_nodes || 0 }}</p>
<p>当前超时比率:{{ (meta.cur_timeout_rate || 0) * 100 }}%</p>
<p>总超时比率:{{ (meta.total_timeout_rate || 0) * 100 }}%</p>
<p>节点平均耗时:{{ meta.avg_elapsed_time || 0 }}分钟</p>
<p>节点最大耗时:{{ meta.max_elapsed_time || 0 }}分钟</p>
<p>节点插件:</p>
<div class="plug-in-list">
<span v-for="(plugin, index) in meta.plugins" :key="index">
{{
["-", "接口插件", "流程插件", "超时插件"][
plugin.plugin_type || 0
]
}}
</span>
</div>
</div>
<div class="flow-node">
<span v-text="meta.name"></span>
<span class="example-count" v-text="meta.running_nodes || 0"></span>
</div>
</el-tooltip>
</template>
</super-flow>
</div>
</template>
<script>
export default {
props: {
id: {
type: Number,
required: true,
},
hideDetail: {
type: Boolean,
default: false,
},
},
data() {
return {
origin: [0, 0],
nodeList: [],
linkList: [],
};
},
methods: {
init() {
Promise.all([
this.$http.get("/apaas/serviceapp/v3/workflows/detail", {
params: {
id: this.id,
},
}),
this.$http.get(
"/apaas/serviceapp/v3/workflows/detail/nodeInstanceStat",
{
params: {
id: this.id,
},
}
),
])
.then((response) => {
let data = response[0].data.data;
let nodeList = data.nodeList;
let linkList = data.linkList;
let nodes = response[1].data.data;
nodes.forEach((node) => {
let targetNode = nodeList.find((v) => v.node_id === node.id);
if (targetNode) {
targetNode.meta = {
...targetNode.meta,
...node,
};
}
});
this.nodeList = nodeList;
this.linkList = linkList;
})
.catch(function (error) {
console.log(error);
});
},
},
created() {
this.init();
},
};
</script>
<style>
.workflows-view .super-flow__node {
background-color: transparent;
border: none;
box-shadow: unset;
}
</style>
<style scoped>
.workflows-view {
width: 100%;
height: 830px;
background-color: #fbfcfe;
border-radius: 10px;
margin-top: 10px;
}
.flow-node {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border: solid 3px #b4c6f5;
background-color: #fff;
border-radius: 8px;
padding: 5px;
font-size: 16px;
color: #0f2683;
}
.flow-node-1 {
border-color: #109e93;
background-color: #25bdb1;
color: #fff;
}
.flow-node-2 {
border-color: #e86262;
background-color: #f78181;
color: #fff;
}
.example-count {
position: absolute;
right: -14px;
bottom: -14px;
height: 28px;
padding: 0 14px;
border-radius: 14px;
background-color: #f5ab4c;
line-height: 28px;
color: #fff;
}
.node-detail {
font-size: 12px;
line-height: 20px;
}
.plug-in-list {
margin-top: 5px;
width: 150px;
}
.plug-in-list > span {
display: inline-block;
vertical-align: middle;
min-width: calc(50% - 15px);
padding: 0 9px;
border: 1px solid #617ef0;
box-sizing: border-box;
border-radius: 3px;
background-color: #274fee;
margin: 0 10px 10px 0;
line-height: 18px;
text-align: center;
}
</style>
......@@ -143,7 +143,7 @@ export default {
rules: {
menu_name: [
{ required: true, message: "请填写菜单名称", trigger: "blur" },
{ min: 0, max: 8, message: "菜单名称不超过8", trigger: "blur" }
{ min: 0, max: 16, message: "菜单名称不超过16", trigger: "blur" }
],
visit_url: [
{ required: true, message: "请填写菜单访问地址", trigger: "blur" },
......
......@@ -206,12 +206,12 @@ export default {
}, 1000);
};
var user_name_pass = (rule, value, callback) => {
var reg = /^[a-z0-9]+$/;
var reg = /^[a-zA-Z0-9|\-|_|\.]+$/;
setTimeout(() => {
if (reg.test(value)) {
callback();
} else {
callback(new Error("只支持小写字母、数字"));
callback(new Error("只支持字母、数字、-、_、."));
}
}, 100);
};
......
<template>
<div class="fwgl_container">
<side-nav-bar
title="数据分析中心"
<sideNavBar
v-if="is_admin == 3 || is_admin == 4 || is_admin == 1"
title="运营管控中心"
imgSrc="tool_fuwu"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
></side-nav-bar>
></sideNavBar>
<sideNavBarClass
v-else-if="is_admin == 2"
title="运营管控中心"
imgSrc="tool_fuwu"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
></sideNavBarClass>
<div class="main_container">
<router-view :key="'type_' + $route.params.type"></router-view>
</div>
......@@ -14,53 +22,88 @@
<script>
import sideNavBar from "@/components/side-nav-bar";
import sideNavBarClass from "@/components/general/side-nav-bar-class";
export default {
components: {
sideNavBar
sideNavBar,
sideNavBarClass,
},
data: () => ({
userNav: [
{
name: "我的服务数据分析",
path: `/data_analysis/my_service`
name: "服务分析",
path: `/data_analysis/my_service`,
},
{
name: "我的应用数据分析",
path: `/data_analysis/my_application`
name: "应用分析",
path: `/data_analysis/my_application`,
},
],
userNav1: [
{
name: "组织服务数据分析",
path: `/data_analysis/org_service`
name: "运营分析",
path: `/data_analysis/org_service`,
child: [
{
name: "服务分析",
path: `/data_analysis/org_service`,
},
{
name: "应用分析",
path: `/data_analysis/org_application`,
},
],
},
{
name: "组织应用数据分析",
path: `/data_analysis/org_application`
name: "运行管控",
path: `/data_analysis/operation_overview`,
child: [
{
name: "运行概况",
path: `/data_analysis/operation_overview`,
},
{
name: "服务管控",
path: `/data_analysis/service_control`,
},
],
},
],
userNav2: [
{
name: "运行概况-组织",
path: `/data_analysis/operation_overview`
name: "服务分析",
path: `/data_analysis/super_service`,
},
{
name: "服务管控-组织",
path: `/data_analysis/service_control`
}
name: "应用分析",
path: `/data_analysis/super_application`,
},
],
navList: []
navList: [],
is_admin: 0,
}),
watch: {
"$route.fullPath"(path) {
this.initNavList();
}
// "$route.fullPath"(path) {
// this.initNavList();
// },
},
methods: {
initNavList() {
this.navList = this.userNav;
}
this.is_admin = this.$store.state.userInfo.is_admin;
if (this.is_admin == 3 || this.is_admin == 4) {
this.navList = this.userNav;
} else if (this.is_admin == 2) {
this.navList = this.userNav1;
this.$router.push({ name: "orgServiceDataAnalysis" });
} else if (this.is_admin == 1) {
this.navList = this.userNav2;
this.$router.push({ name: "superServiceDataAnalysis" });
}
},
},
mounted() {
this.initNavList();
}
},
};
</script>
......
<template>
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.data_analysis") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.my_application_data_analysis") }}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="default">
<div class="default_img">
<h1 class="default_title">开发中,敬请期待!</h1>
<h3 class="default_msg">
如需技术支持
<br />请联系管理员
</h3>
</div>
</BlockRadius>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
export default {
methods: {
getData() {},
},
components: {
BlockRadius,
},
};
</script>
<style lang="less" scoped>
.default {
height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
.default_img {
width: 1282px;
height: 629px;
background-image: url("~@/assets/imgs/img_default_jszc.png");
.default_title {
color: #264dd9;
font-size: 44px;
font-weight: bold;
margin-bottom: 40px;
}
.default_msg {
color: #58617a;
font-size: 24px;
line-height: 44px;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.data_analysis")
}}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.my_service_data_analysis")
}}
</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="default">
<div class="default_img">
<h1 class="default_title">开发中,敬请期待!</h1>
<h3 class="default_msg">
如需技术支持
<br />请联系管理员
</h3>
</div>
</BlockRadius>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
export default {
methods: {
getData() {},
},
components: {
BlockRadius,
},
};
</script>
<style lang="less" scoped>
.default {
height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
.default_img {
width: 1282px;
height: 629px;
background-image: url("~@/assets/imgs/img_default_jszc.png");
.default_title {
color: #264dd9;
font-size: 44px;
font-weight: bold;
margin-bottom: 40px;
}
.default_msg {
color: #58617a;
font-size: 24px;
line-height: 44px;
}
}
}
</style>
\ No newline at end of file
......@@ -16,7 +16,8 @@ export default {
'/intelligent_drawing',
'/intelligent_details',
'/intelligent_appbuilder',
'/search_engine'
'/search_engine',
'/technical_support'
]
}),
created(){
......
......@@ -93,6 +93,7 @@
@getNewList="getNewList"
ref="servicepic"
directory="manage"
:disabled="disabled"
></upload-file>
</el-form-item>
</el-form>
......@@ -129,13 +130,43 @@ var user_name_pass = (rule, value, callback) => {
}
}, 100);
};
var rank_rule = (rule, value, callback)=>{
var reg = /^[1-9][0-9]{0,1}$/;
setTimeout(() => {
if (reg.test(value)) {
callback();
} else {
callback(new Error("请输入2位内正整数"));
}
}, 100);
}
import helper from "@/services/helper.js";
import uploadFile from "@/components/general/upload_file";
export default {
components: {
uploadFile,
},
data: () => ({
data(){
var validateup = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择上架时间'));
} else {
if (this.detail.down_time !== '') {
this.$refs.detail_form.validateField('down_time');
}
callback();
}
};
var validatedown = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择下架时间'));
} else if (value.getTime() <= this.detail.up_time.getTime()) {
callback(new Error('下架时间应在上架时间之后'));
} else {
callback();
}
};
return{
pageType: 0, // 0:新增,1:编辑,2:详情
detail: {
name: "",
......@@ -176,6 +207,10 @@ export default {
message: "请输入排序",
trigger: "blur",
},
{
validator: rank_rule,
trigger: 'blur'
}
],
up_time: [
{
......@@ -183,6 +218,10 @@ export default {
message: "请选择上架时间",
trigger: "change",
},
{
validator:validateup,
trigger: "change",
},
],
fileList: [
{
......@@ -197,6 +236,10 @@ export default {
message: "请选择下架时间",
trigger: "change",
},
{
validator:validatedown,
trigger: "change",
},
],
url: [],
},
......@@ -211,7 +254,8 @@ export default {
},
],
submitLoading: false,
}),
}
},
computed: {
pageName() {
return ["新增", "编辑", "详情"][this.pageType];
......@@ -241,6 +285,7 @@ export default {
this.detail.fileList = val[0].url;
this.detail.size = val[0].size;
console.log(this.detail.fileList);
this.$refs.detail_form.validateField('fileList')
},
getDetail() {
this.$http
......
......@@ -2,6 +2,7 @@
<div class="list_container">
<apass-list
ref="list"
class="no_wrap"
:list-header="listHeader"
:list-data="listData"
:list-total="listTotal"
......
......@@ -2,6 +2,7 @@
<div class="list_container">
<apass-list
ref="list"
class="no_wrap"
:list-header="listHeader"
:list-data="listData"
:list-total="listTotal"
......
......@@ -2,6 +2,7 @@
<div class="list_container">
<apass-list
ref="list"
class="no_wrap"
:list-header="listHeader"
:list-data="listData"
:list-total="listTotal"
......
......@@ -2,6 +2,7 @@
<div class="list_container">
<apass-list
ref="list"
class="no_wrap"
:list-header="listHeader"
:list-data="listData"
:list-total="listTotal"
......
......@@ -2,6 +2,7 @@
<div class="list_container">
<apass-list
ref="list"
class="no_wrap"
:list-header="listHeader"
:list-data="listData"
:list-total="listTotal"
......
......@@ -5,7 +5,32 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list :filterNames="filterNames" :name="name" :url="url" :urlFilter="urlFilter"></service-list>
<service-list
v-show="urlFilter != '7' && urlFilter != '10'"
:filterNames="filterNames"
:name="name"
:url="url"
:urlFilter="urlFilter"
></service-list>
<div v-show="urlFilter == '7' || urlFilter == '10'">
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item :to="{ path: '/shop' }">
{{
$t("lang.service_shop")
}}
</el-breadcrumb-item>
<el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="default">
<div class="default_img">
<h1 class="default_title">开发中,敬请期待!</h1>
<h3 class="default_msg">
如需技术支持
<br />请联系管理员
</h3>
</div>
</BlockRadius>
</div>
</el-main>
</el-container>
</div>
......@@ -14,16 +39,18 @@
<script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu";
import ServiceList from "@/components/service-list/service_list";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
ServiceShopMenu,
ServiceList
ServiceList,
BlockRadius,
},
data: () => ({
urlFilter: "",
url: "",
name: "",
filterNames: []
filterNames: [],
}),
mounted() {
this.getVal(this.$route.path);
......@@ -58,7 +85,7 @@ export default {
this.filterNames = [];
break;
case "comprehensive_app_list":
this.name = "综合应用";
this.name = "融合服务";
this.urlFilter = "21";
this.url = "/shop/zhfwDetail";
this.filterNames = ["服务类型", "服务领域", "服务来源组织"];
......@@ -76,16 +103,39 @@ export default {
this.filterNames = [];
break;
}
}
},
},
watch: {
"$route.path": {
handler(val) {
this.getVal(val);
}
}
}
},
},
},
};
</script>
<style scoped>
<style lang="less" scoped>
.default {
height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
.default_img {
width: 1282px;
height: 629px;
background-image: url("~@/assets/imgs/img_default_jszc.png");
.default_title {
color: #264dd9;
font-size: 44px;
font-weight: bold;
margin-bottom: 40px;
}
.default_msg {
color: #58617a;
font-size: 24px;
line-height: 44px;
}
}
}
</style>
\ No newline at end of file
......@@ -120,7 +120,6 @@ export default {
{
prop: "name",
label: "字段编码",
align: "center",
width: 240,
},
{
......@@ -163,7 +162,6 @@ export default {
{
prop: "name",
label: "字段编码",
align: "center",
width: 240,
},
{
......
......@@ -4,7 +4,7 @@
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/comprehensive_app_list/11">
综合应用
融合服务
</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb>
......@@ -38,11 +38,6 @@ export default {
providerData: null,
commentsData: null,
}),
computed: {
id() {
return this.$route.params.id;
},
},
computed: {
id() {
return this.$route.params.id;
......@@ -93,7 +88,6 @@ export default {
descript: datas.descript,
serviceRequestSpcs: specificationData,
};
this.detailData = [
{
name: "获取流程",
......@@ -136,6 +130,13 @@ export default {
},
}, */
];
if (datas.workflows_id) {
this.detailData.push({
name: "流程详情",
type: "workflows",
value: datas.workflows_id,
});
}
this.specificationData = specificationData;
this.providerData = {
organization_name: datas.organization_name,
......@@ -150,7 +151,7 @@ export default {
});
},
},
mounted() {
created() {
this.init();
},
};
......
<template>
<div class="contain">
<div class="technical_head">{{ $t("lang.technical_support") }}</div>
<BlockRadius class="default">
<div class="default_img">
<h1 class="default_title">开发中,敬请期待!</h1>
<h3 class="default_msg">
如需技术支持
<br />请联系管理员
</h3>
</div>
</BlockRadius>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
export default {
data() {
return {};
},
components: {
BlockRadius,
},
computed: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
.contain {
width: calc(100% - 80px);
margin: 0 auto;
margin-top: -157px;
margin-bottom: 20px;
.technical_head {
color: #626de9;
font-size: 14px;
padding: 20px;
}
.default {
height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
.default_img {
width: 1282px;
height: 629px;
background-image: url("~@/assets/imgs/img_default_jszc.png");
.default_title {
color: #264dd9;
font-size: 44px;
font-weight: bold;
margin-bottom: 40px;
}
.default_msg {
color: #58617a;
font-size: 24px;
line-height: 44px;
}
}
}
}
</style>
......@@ -533,6 +533,10 @@ export default {
this.step2Loading = false;
},
step2Action() {
if (this.step2Loading) {
return;
}
this.$refs.deploy_info_form.validate((valid) => {
if (valid) {
this.step2Loading = true;
......@@ -612,6 +616,10 @@ export default {
this.image_info.file = "";
},
addImage() {
if (this.addImageLoading) {
return;
}
this.$refs.image_info_form.validate((valid) => {
if (valid) {
this.addImageLoading = true;
......
......@@ -39,7 +39,12 @@ export default {
},
},
mounted() {
window.addEventListener('message',event =>{
this.$nextTick(() => {
window.addEventListener('message',this.postmassageevt);
})
},
methods: {
postmassageevt(event){
let data = event.data;
// App Builder发布服务
if (data.cmd == 'appbuildermsg'){
......@@ -47,9 +52,11 @@ export default {
this.$store.commit("setAppBuilderParams", data.params);
this.$router.push(`/fwzc/fwcs?map=4`);
}
})
}
},
methods: {},
destroyed () {
window.removeEventListener('message',this.postmassageevt);
}
};
</script>
......
......@@ -32,19 +32,37 @@ export default {
},
mounted() {
this.$nextTick(() => {
window.addEventListener('message',event =>{
let data = event.data;
if (data.cmd == 'mapdetailtoview'){
console.log(data);
this.$store.commit("setZnztDetailsParams", data.params);
this.$router.push('/intelligent_drawing')
}
})
window.addEventListener('message',this.postmassageevt)
})
},
methods: {},
methods: {
postmassageevt(event){
let data = event.data;
// App Builder页面 -- 新窗口打开
if (data.cmd == 'mapviewtoapp'){
let params = {
title: data.params.title,
tags: data.params.tags,
sharewithwebmap:data.params.shareWithWebMap,
webmap:data.params.id,
summary: data.params.summary,
};
let routeData = this.$router.resolve({
name: "intelligent_appbuilder",
query: params,
});
window.open(routeData.href, '_blank');
// this.$store.commit("setAppBuilderParams", data.params);
};
if (data.cmd == 'mapdetailtoview'){
console.log(data);
this.$store.commit("setZnztDetailsParams", data.params);
this.$router.push('/intelligent_drawing')
}
}
},
destroyed () {
// window.removeEventListener('message')
window.removeEventListener('message',this.postmassageevt)
}
};
......
......@@ -2,15 +2,16 @@
<div class="detail_contain">
<p class="now_page_title">在线组件工具 / 流程设计 / 流程管理 / <span>详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<service-header :data="service_header_arr" @unpublic="unpublic" @public1="public1" @undeploy="undeploy" @deploy="deploy"></service-header>
<div class="type_box">
<div class="type_title">
<div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c',color: '#e56600'}:{}">{{item}}</div>
</div>
<div class="type_box_select">
<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>
<table-um style="width:700px;" height='250px' :stripe="true" :headers="header_arr" :datas="zd_table_arr" slot="fw_table"></table-um>
<!-- <div slot="process">流程</div> -->
<workflows-view slot="process" :id="workflows_id" :hide-detail="true"></workflows-view>
<div slot="count">
<div class="charts">
<div class="charts_box">
......@@ -18,7 +19,7 @@
<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>
<p><span>{{all_count.total_instances>=10000?all_count.total_instances/10000:all_count.total_instances}}</span><span :style="all_count.total_instances>=10000?'':{opacity:0}">万</span></p>
</div>
</div>
</div>
......@@ -27,7 +28,7 @@
<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>
<p style="right:-38px;"><span>{{all_count.avg_time}}</span><span>min</span></p>
</div>
</div>
</div>
......@@ -36,7 +37,7 @@
<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>
<p><span>{{all_count.timeout_rate}}</span><span>%</span></p>
</div>
</div>
</div>
......@@ -64,6 +65,7 @@
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
unit="min"
></toplist>
</block-radius>
</div>
......@@ -74,11 +76,21 @@
</div>
</div>
</div>
<div slot="suvice">流程</div>
<!-- <div slot="suvice">流程</div> -->
<workflows-view slot="suvice" :id="workflows_id" :hide-detail="false"></workflows-view>
</info-list>
</div>
</div>
</div>
<apass-dialog
ref="dialog"
:title="dialogInfo.title"
:msg="dialogInfo.msg"
:cancel-text="dialogInfo.cancelText"
:submit="dialogInfo.submit"
:sunbmit-text="dialogInfo.sunbmitText"
></apass-dialog>
</div>
</template>
......@@ -89,8 +101,10 @@ 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";
import Toplist from "@/components/e-charts/toplist";
import Toplist from "@/components/e-charts/process-top-list";
import BarChart from "@/components/e-charts/bar-chart";
import workflowsView from "@/components/work-flow/workflows-view";
import apassDialog from "@/components/apass-dialog";
export default {
components: {
serviceHeader,
......@@ -99,7 +113,9 @@ export default {
BlockRadius,
lineChart,
Toplist,
BarChart
BarChart,
workflowsView,
apassDialog
},
data(){
return{
......@@ -114,21 +130,39 @@ export default {
unpublic:false,
undeploy:false,
deploy:false,
fixed_url:'/',
fixed_url:'/progress/designer/design_edit/',
url:''
},
workflows_id:'',
all_count: {
        "total_instances": 0, //流程实例总数
        "timeout_rate": 0,//流程超时率
        "avg_time": 0 // 流程平均耗时
    },
dialogInfo: {
title: "",
msg: "",
cancelText: "",
submit: null,
sunbmitText: "",
},
toplistData:[],
toplistTargetValue:0,
bar_data_org: {},
bar_data_org: {
legendData: [],
seriesData: [
]
},
state:1,
now_service:0,
service_arr:[],
line_data:{
xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
xAxisData: [],
seriesData: [
{
name: "趋势",
data: [100,200,500,1000,1800,500]
data: []
}
]
},
......@@ -151,12 +185,6 @@ export default {
type:'solt',
solt_name:'fw_table'
},
{
title:'流程概览:',
info:'',
type:'solt',
solt_name:'process'
},
],
servicead_arr:[
{
......@@ -188,19 +216,166 @@ export default {
align:'center',
},
],
zd_table_arr:[]
zd_table_arr:[],
chart_data:'',
}
},
created(){
this.get_header()
this.getbaseinfo()
this.get_process_detail()
this.get_table_service()
this.workflows_id = parseInt(this.$route.params.id)
},
methods:{
changeday(){
get_process_detail(){
this.$http
.get('/apaas/serviceapp/v3/workflows/briefDetail?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
console.log(data);
this.state = data.state
this.get_header(data)
this.getbaseinfo(data)
if(this.state!==0){
this.get_all_count()
this.get_process_num()
this.get_node_time()
this.get_node_timeout()
}else{
this.list_arr.push(
{
title:'流程概览:',
info:'',
type:'solt',
solt_name:'process'
})
}
})
.catch(function(response) {
});
},
changeday(index){
if(index==0){
this.deal_charts_data(this.chart_data.day)
}else{
this.deal_charts_data(this.chart_data.month)
}
},
get_node_time(){
this.$http
.get('/apaas/serviceapp/v3/workflows/detail/nodeElapsedTimeStat?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
this.toplistData = []
var temp = []
if(data){
data.forEach(e => {
this.toplistData.push({
service_name:e.node_name,
request_count:e.elapsed_time
})
temp.push(e.elapsed_time)
});
if(Math.max(...temp)>=1){
this.toplistTargetValue = Math.max(...temp)
}else{
this.toplistTargetValue = 1
}
}
})
.catch(function(response) {
});
},
get_header(){
this.$set(this.service_header_arr,'name','长兴综治事故申报处理流程')
get_node_timeout(){
this.$http
.get('/apaas/serviceapp/v3/workflows/detail/nodeTimeoutRate?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
if(data){
var tempx = []
var tempy = []
data.forEach(e => {
tempx.push(e.node_name)
tempy.push(e.timeout_rate*100)
});
this.bar_data_org= {
legendData: tempx,
seriesData: tempy
}
}
})
.catch(function(response) {
});
},
get_process_num(){
this.$http
.get('/apaas/serviceapp/v3/workflows/detail/statInstance?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
if(data){
this.chart_data = data
this.deal_charts_data(this.chart_data.day)
}
})
.catch(function(response) {
});
},
deal_charts_data(arr){
var tempx = []
var tempy = []
arr.forEach(e => {
tempx.push(e.date)
tempy.push(e.wf_instances)
});
this.line_data={
xAxisData: tempx,
seriesData: [
{
name: "趋势",
data: tempy
}
]
}
},
get_all_count(){
this.$http
.get('/apaas/serviceapp/v3/workflows/detail/summary?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
if(data){
this.all_count = data
}
})
.catch(function(response) {
});
},
get_table_service(){
this.$http
.get('/apaas/serviceapp/v3/workflows/mountServices?id='+this.$route.params.id)
.then(response => {
let data = response.data.data
this.zd_table_arr = []
if(data&&data.length){
data.forEach(e => {
this.zd_table_arr.push({
fwmc:e.name,
id:e.service_id,
time:e.service_end_time
})
});
}
})
.catch(function(response) {
});
},
get_header(data){
this.$set(this.service_header_arr,'name',data.name)
let state = this.state
//未部署
if(state==0){
......@@ -208,7 +383,7 @@ export default {
this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({
name:'工作区域',
text:'1111'
text:data.workarea_name
})
this.service_header_arr.first.push({
name:'流程状态',
......@@ -216,21 +391,22 @@ export default {
})
this.service_header_arr.second.push({
name:'修改时间',
text:'2020-04-11'
text:data.update_time=='0001-01-01T00:00:00Z'?'-':data.update_time.split("+")[0].replace('T',' ')
})
this.service_arr = ['流程基本信息']
this.service_header_arr.fixed_process=true
this.service_header_arr.public=false
this.service_header_arr.public=true
this.service_header_arr.unpublic=false
this.service_header_arr.undeploy=false
this.service_header_arr.deploy=true
this.service_header_arr.fixed_url=this.service_header_arr.fixed_url+this.$route.params.id
//已部署
}else if(state == 1){
this.$set(this.service_header_arr,'first',[])
this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({
name:'工作区域',
text:'1111'
text:data.workarea_name
})
this.service_header_arr.first.push({
name:'流程状态',
......@@ -238,11 +414,11 @@ export default {
})
this.service_header_arr.first.push({
name:'部署时间',
text:'2020-04-11'
text:data.deployment_time=='0001-01-01T00:00:00Z'?'-':data.deployment_time.split("+")[0].replace('T',' ')
})
this.service_header_arr.second.push({
name:'服务接口地址',
text:'http://localhost:1z/zdrylx?code=430100000000'
text:data.api_url
})
this.service_arr = ['流程基本信息','流程运行状态']
this.service_header_arr.fixed_process=true
......@@ -250,13 +426,14 @@ export default {
this.service_header_arr.unpublic=false
this.service_header_arr.undeploy=true
this.service_header_arr.deploy=false
this.service_header_arr.fixed_url=this.service_header_arr.fixed_url+this.$route.params.id
//已发布
}else{
this.$set(this.service_header_arr,'first',[])
this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({
name:'工作区域',
text:'1111'
text:data.workarea_name
})
this.service_header_arr.first.push({
name:'流程状态',
......@@ -268,7 +445,7 @@ export default {
})
this.service_header_arr.second.push({
name:'服务接口地址',
text:'http://localhost:1z/zdrylx?code=430100000000'
text:data.api_url
})
this.service_arr = ['流程基本信息','流程运行状态']
this.service_header_arr.fixed_process=true
......@@ -276,43 +453,90 @@ export default {
this.service_header_arr.unpublic=true
this.service_header_arr.undeploy=false
this.service_header_arr.deploy=false
this.service_header_arr.fixed_url=this.service_header_arr.fixed_url+this.$route.params.id
}
},
getbaseinfo(){
this.$set(this.list_arr[0],'info','浙江省长兴县综合治理平台事故申报处理流程服务,仅供长兴县使用')
this.$set(this.list_arr[1],'info','北京比格大数据有限公司')
this.$set(this.list_arr[2],'info','2019-02-17 21:09:23')
this.zd_table_arr=[
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
{
fwmc:'身份验证服务',
time:'2020-11-15 15:20:30'
},
]
}
getbaseinfo(data){
this.$set(this.list_arr[0],'info',data.describe)
this.$set(this.list_arr[1],'info',data.org_name)
this.$set(this.list_arr[2],'info',data.create_time.split('+')[0].replace('T',' '))
},
unpublic(item){
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `取消发布后,该流程服务将从服务超市下架,仅部署在工作区域${item.first[0].text}中,是否取消发布流程服务“${item.name}”?`;
this.dialogInfo.cancelText = "暂不";
this.dialogInfo.sunbmitText = "取消发布";
this.dialogInfo.submit = () => {
console.log(`取消发布`);
this.$http
.delete('/apaas/serviceapp/v3/workflows/cancelPublish?id='+this.$route.params.id)
.then(response => {
if(response.data.success){
this.$message.success('取消发布成功')
this.get_process_detail()
this.get_table_service()
}
})
};
this.showDialog();
},
public1(item){
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `发布后流程后,流程将部署到工作区域并上架到服务超市,是否发布该流程?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发布";
this.dialogInfo.submit = () => {
this.$router.push('/fwzc/fwcs?process='+this.$route.params.id)
};
this.showDialog();
},
undeploy(item){
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `取消部署后,该流程服务不能通过链接访问,是否取消部署流程服务“${item.name}”?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "取消部署";
this.dialogInfo.submit = () => {
console.log(`取消部署${item.name}`);
this.$http
.delete('/apaas/serviceapp/v3/workflows/cancelDeploy?id='+this.$route.params.id)
.then(response => {
if(response.data.success){
this.$message.success('取消部署成功')
this.get_process_detail()
this.get_table_service()
}
})
};
this.showDialog();
},
deploy(item){
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `部署流程后,流程将部署到工作区域,但不会上架到服务超市,是否部署该流程?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "部署";
this.dialogInfo.submit = () => {
console.log(`部署`);
let form = new FormData()
form.append('id',this.$route.params.id)
this.$http
.post('/apaas/serviceapp/v3/workflows/deploy',form)
.then(response => {
if(response.data.success){
this.$message.success('部署成功')
this.get_process_detail()
this.get_table_service()
}
})
};
this.showDialog();
},
showDialog() {
this.$refs.dialog.show();
},
}
}
......
......@@ -31,8 +31,38 @@
ref="dialog"
:title="dialogInfo.title"
:msg="dialogInfo.msg"
:cancel-text="dialogInfo.cancelText"
:submit="dialogInfo.submit"
:sunbmit-text="dialogInfo.sunbmitText"
></apass-dialog>
<apass-dialog ref="copyProcess" title="复制流程">
<template slot="content">
<el-form
v-if="copyTempItem"
ref="detail_form"
class="apaas_detail_form"
label-position="top"
:model="copyTempItem"
:rules="copyTempItem_rules"
>
<el-form-item label="流程名称:" prop="newName">
<el-input
v-model="copyTempItem.newName"
placeholder="请输入流程名称"
></el-input>
</el-form-item>
</el-form>
</template>
<template slot="action">
<el-button type="defalut" size="mini" @click="cancelCopyProcess">
取消
</el-button>
<el-button type="primary" size="mini" @click="submitCopyProcess">
保存
</el-button>
</template>
</apass-dialog>
</div>
</template>
......@@ -50,91 +80,92 @@ export default {
filterList: [
{
name: "服务领域",
prop: "service_domains",
data: [],
},
{
name: "工作区域",
prop: "workareas",
data: [],
},
{
name: "流程状态",
prop: "states",
data: [],
},
],
listHeader: [],
listData: [],
listTotal: 0,
dialogInfo: {
title: "",
msg: "",
cancelText: "",
submit: null,
sunbmitText: "",
},
tempFilter: null,
copyTempItem: null,
copyTempItem_rules: {
newName: [
{ required: true, message: "请输入流程名称", trigger: "blur" },
{ max: 16, message: "不能超过16个字符", trigger: "blur" },
],
},
}),
methods: {
init(filter) {
console.log(filter);
let params = {
sectors:
(filter.service_domains &&
filter.service_domains.map((item) => item.value).join(",")) ||
"",
workareas:
(filter.workareas &&
filter.workareas.map((item) => item.value).join(",")) ||
"",
states:
(filter.states &&
filter.states.map((item) => item.value).join(",")) ||
"",
filter_by: filter.keyword,
page: filter.page,
page_size: filter.size,
};
this.tempFilter = filter;
this.listTotal = 3;
this.listData = [
{
id: "WF00000001",
name: "保安资格申请流程",
sectors_name: "经济建设",
create_time: "2021-01-01T00:00:00Z",
state: "0",
},
{
id: "WF00000002",
name: "保安考试流程",
sectors_name: "经济建设",
create_time: "2021-01-01T00:00:00Z",
state: "1",
},
{
id: "WF00000003",
name: "申请材料审核流程",
sectors_name: "经济建设",
create_time: "2021-01-01T00:00:00Z",
state: "2",
},
];
this.$http
.get("/apaas/serviceapp/v3/workflows/list", { params })
.then(({ data }) => {
if (data.success === 1) {
this.listTotal = data.total;
this.listData = data.data;
}
})
.catch((error) => {
console.log(error);
});
},
initFilter() {
Promise.all([
this.$http.get("/apaas/service/v3/service/manager/servtype"),
this.$http.get("/apaas/service/v3/service/manager/servarea"),
])
.then((response) => {
let filterList = response.map((item) => {
return {
name: item.body.data[0].type_name,
prop: item.body.data[0].type_code,
data: item.body.data.map((v) => ({
name: v.name,
value: v.id,
})),
};
});
this.$http
.get("/apaas/serviceapp/v3/workflows/searchConditions")
.then(({ data }) => {
if (data.success === 1) {
let datas = data.data;
this.filterList.forEach((item) => {
let filter = datas[item.prop] || [];
this.filterList = [
...filterList,
{
name: "流程状态",
prop: "state",
data: [
{
name: "已发布",
value: 2,
},
{
name: "已部署",
value: 1,
},
{
name: "未部署",
value: 0,
},
],
},
];
this.$set(
item,
"data",
filter.map((item) => ({
name: item.name,
value: item.id,
}))
);
});
}
})
.catch((error) => {
console.log(error);
......@@ -144,7 +175,7 @@ export default {
this.listHeader = [
{
label: "流程编号",
prop: "id",
prop: "workflows_code",
width: 180,
},
{
......@@ -155,7 +186,7 @@ export default {
},
{
label: "服务领域",
prop: "sectors_name",
prop: "sector_name",
align: "center",
width: 240,
},
......@@ -177,6 +208,12 @@ export default {
align: "center",
width: 180,
},
{
label: "工作区域",
prop: "workarea_name",
align: "center",
width: 180,
},
{
label: "操作",
type: "buttons",
......@@ -197,45 +234,220 @@ export default {
},
],
moreActionList: [
{
label: "取消发布",
callback: this.cancelPublishItem,
showRule(item) {
return item.state === 2;
},
},
{
label: "部署",
callback: this.deployItem,
showRule(item) {
return item.state === 0;
},
},
{
label: "取消部署",
callback: this.canceldeployItem,
callback: this.cancelDeployItem,
showRule(item) {
return item.state === 1;
},
},
{
label: "复制",
callback: this.copyItem,
showRule(item) {
return true;
},
},
{
label: "删除",
callback: this.deleteItem,
showRule(item) {
return item.state !== 2;
},
},
],
},
];
},
refresh() {
refreshPage() {
this.init(this.tempFilter);
},
showDialog() {
this.$refs.dialog.show();
},
copyProcessShow() {
this.$refs.copyProcess.show();
},
copyProcessHide() {
this.$refs.copyProcess.hide();
this.copyTempItem = null;
},
addNewProcess() {
console.log("addNewProcess");
this.$router.push("/progress/designer/design");
},
editItem(item) {
this.$router.push(`/progress/designer/design_edit/${item.workflows_id}`);
},
detailItem(item) {
this.$router.push(`/progress/designer/detail/${item.id}`);
this.$router.push(`/progress/designer/detail/${item.workflows_id}`);
},
publishItem(item) {
console.log(`publish ${item.name}`);
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `发布后流程后,流程将部署到工作区域并上架到服务超市,是否发布该流程?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发布";
this.dialogInfo.submit = () => {
this.$router.push(`/fwzc/fwcs?process=${item.workflows_id}`);
};
this.showDialog();
},
editItem(item) {
console.log(`edit ${item.name}`);
cancelPublishItem(item) {
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `取消发布后,该流程服务将从服务超市下架,仅部署在工作区域${item.workarea_name}中,是否取消发布流程服务“${item.name}”?`;
this.dialogInfo.cancelText = "暂不";
this.dialogInfo.sunbmitText = "取消发布";
this.dialogInfo.submit = () => {
this.$http
.delete("/apaas/serviceapp/v3/workflows/cancelPublish", {
params: {
id: item.workflows_id,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success(data.errMsg || "取消发布成功");
this.refreshPage();
} else {
this.$message.error(data.errMsg || "取消发布失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("取消发布失败");
});
};
this.showDialog();
},
canceldeployItem(item) {
console.log(`cancel deploy ${item.name}`);
deployItem(item) {
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `部署流程后,流程将部署到工作区域,但不会上架到服务超市,是否部署该流程?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "部署";
this.dialogInfo.submit = () => {
let form = new FormData();
form.append("id", item.workflows_id);
this.$http
.post("/apaas/serviceapp/v3/workflows/deploy", form)
.then(({ data }) => {
if (data.success === 1) {
this.$message.success(data.errMsg || "部署成功");
this.refreshPage();
} else {
this.$message.error(data.errMsg || "部署失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("部署失败");
});
};
this.showDialog();
},
cancelDeployItem(item) {
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `取消部署后,该流程服务不能通过链接访问,是否取消部署流程服务“${item.name}”?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "取消部署";
this.dialogInfo.submit = () => {
this.$http
.delete("/apaas/serviceapp/v3/workflows/cancelDeploy", {
params: {
id: item.workflows_id,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success(data.errMsg || "取消部署成功");
this.refreshPage();
} else {
this.$message.error(data.errMsg || "取消部署失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("取消部署失败");
});
};
this.showDialog();
},
copyItem(item) {
console.log(`copy ${item.name}`);
this.copyTempItem = {
...item,
newName: "",
};
this.copyProcessShow();
},
cancelCopyProcess() {
this.copyProcessHide();
},
submitCopyProcess() {
this.$refs.detail_form.validate((valid) => {
if (valid) {
let form = new FormData();
form.append("id", this.copyTempItem.workflows_id);
form.append("name", this.copyTempItem.newName);
this.$http
.post("/apaas/serviceapp/v3/workflows/copy", form)
.then(({ data }) => {
if (data.success === 1) {
this.$message.success(data.errMsg || "复制成功");
this.copyProcessHide();
this.refreshPage();
} else {
this.$message.error(data.errMsg || "复制失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("复制失败");
});
} else {
return false;
}
});
},
deleteItem(item) {
console.log(`delete ${item.name}`);
this.dialogInfo.title = "提示";
this.dialogInfo.msg = `您确定要删除流程服务“${item.name}”吗?`;
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.submit = () => {
this.$http
.delete("/apaas/serviceapp/v3/workflows/del", {
params: {
id: item.workflows_id,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success(data.errMsg || "删除成功");
this.refreshPage();
} else {
this.$message.error(data.errMsg || "删除失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("删除失败");
});
};
this.showDialog();
},
},
created() {
......@@ -249,4 +461,11 @@ export default {
.process-designer-container {
height: 100%;
}
.apaas_detail_form {
text-align: left;
margin-top: 20px;
}
.apaas_detail_form .el-form-item {
margin: 0;
}
</style>
......@@ -29,10 +29,6 @@ export default {
name: "流程监控",
path: `/progress/monitoring`,
},
{
name: "流程设计",
path: `/progress/designs`,
}
],
navList: [],
}),
......
<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>
</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:70,
tableheaders:[
{
label: "排名",
prop: "index",
align: "center",
width: "80px"
},
{
label: "流程名称",
prop: "name",
align: "left",
minWidtn:'40%',
type:'click',
url:'/progress/designer/detail/',
id:'id',
},
{
label: "耗时(分钟)",
prop: "time",
align: "center",
minWidtn:'30%'
},
{
label: "超时率",
prop: "val",
align: "center",
minWidtn:'30%'
},
],
tableRank:[
{
index:1,
id:1,
name:'保安许可资格申请',
time:18,
val:'10%'
},
{
index:1,
name:'保安考试流程',
id:3,
time:10,
val:'15%'
},
{
index:1,
name:'外国人永久居留资格申请',
id:4,
time:20,
val:'30%'
},
{
index:1,
name:'大型焰火燃放资格申请',
id:5,
time:35,
val:'20%'
},
{
index:1,
id:6,
name:'保安培训机构许可证申请流程',
time:40,
val:'10%'
},
],
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:15,
},
{
name:'1天内',
value:20,
},
{
name:'7天内',
value:8,
},
{
name:'30天内',
value:2,
},
{
name:'30天以上',
value:1,
},
]
}
},
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>
<template>
<div class="design_contain">
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/workplace' }">{{ $t("lang.online_component_tool") }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_design") }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_management") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.new") }}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="block_item">
<steps
:active-step="step"
:done="done"
:show-done="true"
done-title="保存成功"
done-sub-title="可返回流程管理列表查看该流程,并进行流程的部署和发布。"
class="apaas_steps"
>
<step
title="基本信息"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
class="apaas_step"
>
<div class="step_in">
<el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left">
<el-form-item prop="name">
<p class="formname">流程名称:</p>
<el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
</el-form-item>
<el-form-item prop="workplace">
<p class="formname">工作区域:</p>
<el-select
v-model="basic_form.workplace"
@change="changeWorkPlace"
placeholder="请选择工作区域"
>
<el-option
v-for="(item, index) in workplace_list"
:label="item.name"
:value="item.id"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="desc">
<p class="formname">流程描述:</p>
<el-input
type="textarea"
:autosize="{ minRows: 6, maxRows: 10}"
v-model="basic_form.desc"
placeholder="请输入流程描述"
></el-input>
</el-form-item>
</el-form>
<div class="btn_footer">
<el-button class="cancel" @click="cancel">取消</el-button>
<el-button class="next" @click="next">下一步</el-button>
</div>
</div>
</step>
<step
title="流程设计"
:step="1"
:active-icon="require('@/assets/imgs/progress_ic_liucheng.png')"
class="apaas_step"
>
<div class="step_in">
<WorkFlow
ref="workFlow"
:node_list="node_list"
:link_list="link_list"
:node_params_list="node_params_list"
class="work_flow"
/>
<div class="btn_footer">
<el-button class="cancel" @click="cancel">取消</el-button>
<div>
<el-button class="cancel" @click="back">上一步</el-button>
<el-button class="next" @click="complete">完成</el-button>
</div>
</div>
</div>
</step>
<step
title
step-title="完成"
:step="2"
:active-icon="require('@/assets/imgs/progress_ic_wancheng.png')"
class="apaas_step"
></step>
<template slot="action">
<el-button type="primary" @click="backToList">返回列表</el-button>
</template>
</steps>
</BlockRadius>
</div>
</template>
<script>
import WorkFlow from "@/components/work-flow/super-flow";
import BlockRadius from "@/components/general/block-radius";
import Steps from "@/components/app-build-steps/app-build-steps";
import Step from "@/components/app-build-steps/app-build-step";
export default {
components: {
WorkFlow,
BlockRadius,
Steps,
Step,
},
data: () => {
return {
step: 0,
done: false,
basic_form: {
name: "",
workplace: "",
desc: "",
},
node_list: [],
link_list: [],
node_params_list: [],
rules: {
name: [
{ required: true, message: "请输入流程名称", trigger: "blur" },
{ max: 16, message: "不能超过16个字符", trigger: "blur" },
],
workplace: [
{ required: true, message: "请选择工作区域", trigger: "blur" },
],
desc: [
{ required: true, message: "请输入流程描述", trigger: "blur" },
{ max: 400, message: "不能超过400个字符", trigger: "blur" },
],
},
workplace_list: [],
};
},
methods: {
verification() {
let self = this;
let data = {...self.$refs.workFlow.getData()};
console.log(JSON.stringify(data));
let start_num = 0;
let end_num = 0;
let start_id = "";
let end_id = "";
let start_before = 0;
let end_after = 0;
let in_edge = 0;
let out_edge = 0;
let datas = { ...data.obj };
console.log(data);
datas.nodeList.forEach((item) => {
let da = data.params.find((nodep) => {
return nodep.id == item.meta.id;
});
item.meta = da;
if (item.meta.type == 1) {
start_num++;
start_id = item.id;
}
if (item.meta.type == 2) {
end_num++;
end_id = item.id;
}
if (
datas.linkList.findIndex((el) => {
return el.startId == item.id;
}) == -1 &&
item.id != end_id
) {
in_edge++;
} else if (
datas.linkList.findIndex((el) => {
return el.endId == item.id;
}) == -1 &&
item.id != start_id
) {
out_edge++;
}
});
datas.linkList.forEach((item) => {
if (start_id == item.endId) {
start_before++;
}
if (end_id == item.startId) {
end_after++;
}
});
if (start_num != 1 || end_num != 1) {
this.$message({
message: "开始节点与结束节点均应有且只有一个",
type: "warning",
});
return false;
} else if (start_before != 0) {
this.$message({
message: "开始节点前面不应连接其它节点",
type: "warning",
});
return false;
} else if (end_after != 0) {
this.$message({
message: "结束节点后面不应连接其它节点",
type: "warning",
});
return false;
} else if (in_edge != 0 || out_edge != 0) {
this.$message({
message: "请保证每个节点都被连接",
type: "warning",
});
return false;
} else {
return datas;
}
},
backToList() {
this.$router.push("/message/directed_push");
},
changeWorkPlace() {},
cancel() {
this.$router.go(-1);
},
next() {
this.$refs["basicInformation"].validate((valid) => {
if (valid) {
this.step++;
} else {
}
});
},
back() {
this.step--;
},
complete() {
let self = this;
let res = self.verification();
if (res) {
let query = {
name: self.basic_form.name,
workarea: self.basic_form.workplace,
describe: self.basic_form.desc,
...res,
};
this.$api.workbench.addProcess(query).then((response) => {
if (response.data.success == 1) {
}
});
}
},
getNameSpaceList() {
this.$api.workbench.getProcessNamespaceList().then((response) => {
if (response.data.success == 1) {
this.workplace_list = response.data.data.workareas;
}
});
},
getProcessDetail() {
this.$api.workbench
.getProcessDetail({ id: this.$route.params.id })
.then((response) => {
if (response.data.success == 1) {
this.node_list = [];
this.link_list = [];
this.node_params_list = [];
this.node_list.forEach((item) => {
item.meta.id =
parseInt(Math.random() * 1000 * 1000) +
"a" +
parseInt(Math.random() * 1000 * 1000);
this.node_params_list.push(item.meta);
});
}
});
},
},
mounted() {
this.getNameSpaceList();
this.getProcessDetail();
},
};
</script>
<style scoped>
.design_contain {
width: 100%;
height: calc(100% - 20px);
padding: 0 20px;
}
.block_item {
height: calc(100% - 56px);
}
.step_in {
height: 100%;
}
.form_left {
width: 55%;
height: calc(100% - 70px);
}
.btn_footer {
width: calc(100% - 20px);
height: 40px;
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.cancel {
background-color: #e3e5ef;
color: #0f2683;
}
.next {
background-color: #0f2683;
color: #f8f9fd;
}
.work_flow {
height: calc(100% - 70px);
}
</style>
<style>
.block_item .el-textarea__inner {
border-radius: 8px;
background-color: #f7f8f9;
border: solid 1px #e3e5ef;
}
.block_item .el-input__inner {
background-color: #f7f8f9;
border: solid 1px #e3e5ef;
}
.block_item .el-select {
width: 100%;
}
</style>
<template>
<div class="design_contain">
<el-button @click="getData">获取参数</el-button>
<WorkFlow ref="workFlow" />
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/workplace' }">{{ $t("lang.online_component_tool") }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_design") }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">{{ $t("lang.process_management") }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ $t("lang.new") }}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="block_item">
<steps
:active-step="step"
:show-done="true"
class="apaas_steps"
>
<step
title="基本信息"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
class="apaas_step"
>
<div class="step_in">
<el-form :model="basic_form" :rules="rules" ref="basicInformation" class="form_left">
<el-form-item prop="name">
<p class="formname">流程名称:</p>
<el-input v-model="basic_form.name" placeholder="请输入流程名称"></el-input>
</el-form-item>
<el-form-item prop="workplace">
<p class="formname">工作区域:</p>
<el-select
v-model="basic_form.workplace"
@change="changeWorkPlace"
placeholder="请选择工作区域"
>
<el-option
v-for="(item, index) in workplace_list"
:label="item.name"
:value="item.id"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="desc">
<p class="formname">流程描述:</p>
<el-input
type="textarea"
:autosize="{ minRows: 6, maxRows: 10}"
v-model="basic_form.desc"
placeholder="请输入流程描述"
></el-input>
</el-form-item>
</el-form>
<div class="btn_footer">
<el-button class="cancel" @click="cancel">取消</el-button>
<el-button class="next" @click="next">下一步</el-button>
</div>
</div>
</step>
<step
title="流程设计"
:step="1"
:active-icon="require('@/assets/imgs/progress_ic_liucheng.png')"
class="apaas_step"
>
<div class="step_in">
<WorkFlow ref="workFlow" class="work_flow" />
<div class="btn_footer">
<el-button class="cancel" @click="cancel">取消</el-button>
<div>
<el-button class="cancel" @click="back">上一步</el-button>
<el-button class="next" @click="complete">完成</el-button>
</div>
</div>
</div>
</step>
<step
title
step-title="完成"
:step="2"
:active-icon="require('@/assets/imgs/progress_ic_wancheng.png')"
class="apaas_step"
>
<div class="steps_container steps_done">
<div class="steps_done_info">
<div class="left_container">
<img :src="require('@/assets/imgs/steps_done.png')" width="100%" />
</div>
<div class="right_container">
<p>保存成功</p>
<p>可返回流程管理列表查看该流程,并进行流程的部署和发布。</p>
</div>
</div>
<div class="done_action apaas_button">
<slot name="action"></slot>
</div>
<div class="btn_footer_1">
<div>
<el-button class="next" @click="backToList">返回列表</el-button>
</div>
</div>
</div>
</step>
</steps>
</BlockRadius>
</div>
</template>
<script>
import WorkFlow from "@/components/work-flow/super-flow";
import BlockRadius from "@/components/general/block-radius";
import Steps from "@/components/app-build-steps/app-build-steps";
import Step from "@/components/app-build-steps/app-build-step";
export default {
components: {
WorkFlow
WorkFlow,
BlockRadius,
Steps,
Step,
},
data: () => {
return {
step: 0,
basic_form: {
name: "",
workplace: "",
desc: "",
},
rules: {
name: [
{ required: true, message: "请输入流程名称", trigger: "blur" },
{ max: 16, message: "不能超过16个字符", trigger: "blur" },
],
workplace: [
{ required: true, message: "请选择工作区域", trigger: "blur" },
],
desc: [
{ required: true, message: "请输入流程描述", trigger: "blur" },
{ max: 400, message: "不能超过400个字符", trigger: "blur" },
],
},
workplace_list: [],
};
},
methods: {
getData() {
verification() {
let self = this;
let data = self.$refs.workFlow.getData();
console.log(data);
let data = { ...self.$refs.workFlow.getData() };
let start_num = 0;
let end_num = 0;
let start_id = "";
let end_id = "";
let start_before = 0;
let end_after = 0;
data.nodeList.forEach(item => {
if (item.meta.type == 0) {
let in_edge = 0;
let out_edge = 0;
let datas = { ...data.obj };
datas.nodeList.forEach((item) => {
let da = data.params.find((nodep) => {
return nodep.id == item.meta.id;
});
item.meta = da;
if (item.meta.type == 1) {
start_num++;
start_id = item.id;
}
if (item.meta.type == 1) {
if (item.meta.type == 2) {
end_num++;
end_id = item.id;
}
if (
datas.linkList.findIndex((el) => {
return el.startId == item.id;
}) == -1 &&
item.id != end_id
) {
in_edge++;
} else if (
datas.linkList.findIndex((el) => {
return el.endId == item.id;
}) == -1 &&
item.id != start_id
) {
out_edge++;
}
});
data.linkList.forEach(item => {
datas.linkList.forEach((item) => {
if (start_id == item.endId) {
start_before++;
}
if (end_id == item.startId) {
end_after++;
}
});
if (start_num != 1 || end_num != 1) {
this.$message({
message: "开始节点与结束节点均应有且只有一个",
type: "warning"
type: "warning",
});
return false;
} else if (start_before != 0) {
this.$message({
message: "开始节点前面不应连接其它节点",
type: "warning"
type: "warning",
});
return false;
} else if (end_after != 0) {
this.$message({
message: "结束节点后面不应连接其它节点",
type: "warning"
type: "warning",
});
return false;
} else if (in_edge != 0 || out_edge != 0) {
this.$message({
message: "请保证每个节点都被连接",
type: "warning",
});
return false;
} else {
return datas;
}
}
}
},
backToList() {
this.$router.push("/progress/designer");
},
changeWorkPlace() {},
cancel() {
this.$router.go(-1);
},
next() {
this.$refs["basicInformation"].validate((valid) => {
if (valid) {
this.step++;
} else {
}
});
},
back() {
this.step--;
},
complete() {
let self = this;
let res = self.verification();
if (res) {
let query = {
name: self.basic_form.name,
workarea: self.basic_form.workplace,
describe: self.basic_form.desc,
...res,
};
this.$api.workbench.addProcess(query).then((response) => {
if (response.data.success == 1) {
this.step = 2;
} else {
this.$message.error(response.data.errMsg);
}
});
}
},
getNameSpaceList() {
this.$api.workbench.getProcessNamespaceList().then((response) => {
if (response.data.success == 1) {
this.workplace_list = response.data.data.workareas;
}
});
},
},
mounted() {
this.getNameSpaceList();
},
};
</script>
<style scoped>
.design_contain {
width: 100%;
height: calc(100% - 20px);
padding: 0 20px;
margin-bottom: 20px;
}
.block_item {
height: calc(100% - 56px);
}
.step_in {
height: 100%;
}
.form_left {
width: 55%;
height: calc(100% - 70px);
}
.btn_footer {
width: calc(100% - 20px);
height: 40px;
padding: 0 10px;
display: flex;
justify-content: space-between;
}
.cancel {
background-color: #e3e5ef;
color: #0f2683;
}
.next {
background-color: #0f2683;
color: #f8f9fd;
}
.work_flow {
height: calc(100% - 70px);
}
.steps_container {
flex-grow: 1;
}
.steps_done {
position: relative;
height: 100%;
}
.steps_done_info {
position: absolute;
top: calc(50% - 40px);
left: 50%;
transform: translate(-50%, -50%);
}
.steps_done_info > * {
display: inline-block;
vertical-align: middle;
}
.steps_done_info > .left_container {
width: 70px;
font-size: 0;
margin-right: 10px;
}
.steps_done_info > .right_container > p:nth-child(1) {
font-size: 18px;
font-weight: 700;
line-height: 24px;
color: #242c43;
}
.steps_done_info > .right_container > p:nth-child(2) {
font-size: 14px;
line-height: 20px;
color: #8890a7;
margin-top: 5px;
}
.btn_footer_1 {
position: absolute;
bottom: 0;
padding: 15px;
width: 100%;
text-align: right;
}
</style>
<style>
.block_item .el-textarea__inner {
border-radius: 8px;
background-color: #f7f8f9;
border: solid 1px #e3e5ef;
}
.block_item .el-input__inner {
background-color: #f7f8f9;
border: solid 1px #e3e5ef;
}
.block_item .el-select {
width: 100%;
}
</style>
<template>
<div class="detail_contain">
<p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
</div>
<div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr">
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="zd_table"></table-um>
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="apply_table"></table-um>
<process-card :data="use_approval_arr" slot="approval"></process-card>
</info-list>
</div>
</div>
<div class="detail_contain">
<p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr"
:key="index + 1000"
class="type_select"
@click="now_service = index"
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list
:list_arr="
now_service == 0
? list_arr
: now_service == 1
? servicead_arr
: apply_arr
"
>
<table-um
v-if="res_table_arr.length"
:headers="res_header_arr"
:datas="res_table_arr"
slot="res_table"
></table-um>
<table-um
v-if="res_table_arr.length"
:headers="res_header_arr"
:datas="res_table_arr"
slot="apply_table"
></table-um>
<process-card
:data="use_approval_arr"
slot="approval"
></process-card>
</info-list>
</div>
</div>
</div>
</div>
</template>
<script>
import serviceHeader from '@/components/service-header'
import infoList from '@/components/infoList'
import tableUm from '@/components/table/table-um'
import processCard from '@/components/process-card'
import serviceHeader from "@/components/service-header";
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import processCard from "@/components/process-card";
export default {
props: {
},
components: {
serviceHeader,
infoList,
tableUm,
processCard
},
data() {
return {
use_approval_arr:[],
approval_arr:[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间:',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位:',
info:'某某某城管局'
},
{
title:'审批人:',
info:'张先生'
},
{
title:'审批意见:',
info:'同意'
},
]
},
{
title:'二级审批',
result:'审批通过',
arr:[
{
title:'审批时间:',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位:',
info:'某某某城管局'
},
{
title:'审批人:',
info:'张先生'
},
{
title:'审批意见:',
info:'同意'
},
]
},
{
title:'三级审批',
result:'审批中',
},
],
approval_arr1:[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间:',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位:',
info:'某某某城管局'
},
{
title:'审批人:',
info:'张先生'
},
{
title:'审批意见:',
info:'同意'
},
]
},
{
title:'二级审批',
result:'审批通过',
arr:[
{
title:'审批时间:',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位:',
info:'某某某城管局'
},
{
title:'审批人:',
info:'张先生'
},
{
title:'审批意见:',
info:'同意'
},
]
},
{
title:'三级审批',
result:'审批未通过',
arr:[
{
title:'审批时间:',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位:',
info:'某某某城管局'
},
{
title:'审批人:',
info:'张先生'
},
{
title:'审批意见:',
info:'不同意,驳回。'
},
]
},
],
header_arr:[
{
prop:'wfwmc',
label:'微服务名称',
minWidth:'20%',
align:'left',
},
{
prop:'jkzt',
label:'健康状态',
width:'120px',
align:'center',
},
{
prop:'jklj',
label:'接口链接',
minWidth:'40%',
align:'center',
},
{
prop:'wfwms',
label:'微服务描述',
minWidth:'40%',
align:'left',
},
],
service_arr:['服务基本信息','接口详细信息','申请审批信息'],
service_header_arr:{
id: "",
isMap: false,
name:'',
first:[
{
name:'服务类型',
text:'',
},
{
name:'审批状态',
text:'',
color:'#515fe7',
},
{
name:'服务到期时间',
text:'',
},
],
second:[
{
name:'服务接口地址',
text:'',
},
],
fixed:false,
props: {},
components: {
serviceHeader,
infoList,
tableUm,
processCard,
},
data() {
return {
use_approval_arr: [],
approval_arr: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间:",
info: "2020-02-28 15:23:45",
},
now_service:0,
list_arr:[
{
title:'服务描述:',
info:''
},
{
title:'服务领域:',
info:''
},
{
title:'发布人:',
info:''
},
{
title:'联系方式:',
info:''
},
{
title:'所属组织:',
info:''
},
{
title:'开放程度:',
info:''
},
{
title:'接口编码:',
info:''
},
{
title:'注册发布时间:',
info:''
},
],
servicead_arr:[
{
title:'请求方式:',
info:''
},
{
title:'请求参数:',
info:''
},
{
title:'请求示例:',
info:''
},
{
title:'编码格式:',
info:''
},
{
title:'响应参数:',
info:'',
type:'solt',
solt_name:'zd_table'
},
],
apply_arr:[
{
title:'申请信息',
prop:'title'
},
{
title:'场景描述:',
info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。'
},
{
title:'调用业务系统:',
info:'决策指挥系统'
},
{
title:'业务系统域名:',
info:'https://apaas.wodcloud.com/'
},
{
title:'申请文件:',
info:'mapvideos申请书.docx',
type:'down'
},
{
title:'申请内容:',
info:'',
type:'solt',
solt_name:'apply_table'
},
{
title:'申请规格:',
info:''
},
{
title:'申请时长:',
info:''
},
{
title:'申请时间:',
info:''
},
{
title:'审批信息',
prop:'title',
type:'solt',
solt_name:'approval'
},
],
request_arr:['','GET','POST','PUT','DELETE'],
res_data:[],
zd_table_arr:[],
};
},
watch: {
},
computed: {
},
created() {
this.get_service_info()
},
mounted() {
},
methods: {
get_service_info(){
this.$http
.get(`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`)
.then((response) => {
if(!response.data.success){
this.$message.error(response.data.errMsg)
return
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
this.$set(this.service_header_arr, "name", data.name);
this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
this.$set(this.service_header_arr['first'][1], 'text', data.service_apply_info.approval_status==1?'待审批':data.service_apply_info.approval_status==2?'审批中':data.service_apply_info.approval_status==3?'审批通过':'审批未通过');
this.$set(this.service_header_arr['first'][1], 'color', data.service_apply_info.approval_status==1?'#ef9433':data.service_apply_info.approval_status==2?'#ef9433':data.service_apply_info.approval_status==3?'#515fe7':'#e15260');
this.$set(this.service_header_arr['first'][2], 'text', data.service_apply_info.service_end_time=='0001-01-01T00:00:00Z'?'-':data.service_apply_info.service_end_time.replace('T'," ").split('+')[0]);
this.$set(this.service_header_arr['second'][0], "text", data.req_url);
this.$set(this.service_header_arr, "url", data.cover);
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
this.$set(this.list_arr[2], "info", data.service_apply_info.apply_user_info.user_name);
this.$set(this.list_arr[3], "info", data.service_apply_info.apply_user_info.phone);
this.$set(this.list_arr[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_name);
this.$set(this.list_arr[6], "info", data.encode_method);
this.$set(this.list_arr[7], "info", data.create_time=='0001-01-01T00:00:00Z'?'-':data.create_time.replace('T'," ").split('+')[0]);
this.$set(this.servicead_arr[0], "info", this.request_arr[data.req_type]);
this.$set(this.servicead_arr[1], "info", data.req_query?data.req_query:'');
this.$set(this.servicead_arr[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method);
// this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
this.$set(this.apply_arr[1], "info", data.descript);
this.$set(this.apply_arr[2], "info", data.service_apply_info.business_name);
this.$set(this.apply_arr[3], "info", data.service_apply_info.business_url);
this.$set(this.apply_arr[4], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]);
this.$set(this.apply_arr[4], "url", data.service_apply_info.apply_file);
this.$set(this.apply_arr[6], "info", '访问次数:'+data.service_apply_info.request_spcs.pv+'/日,'+'访问量:'+data.service_apply_info.request_spcs.count+'/日');
this.$set(this.apply_arr[7], "info", data.service_apply_info.duration + (data.service_apply_info.duration_unit==1?'':''));
this.$set(this.apply_arr[8], "info", data.service_apply_info.apply_time.replace('T'," ").split('+')[0]);
this.zd_table_arr = [
{
wfwmc:data.name,
jkzt:data.health_state,
jklj:data.req_url,
wfwms:data.descript
}
]
console.log(this.zd_table_arr);
if(data.service_apply_info.approval_process){
data.service_apply_info.approval_process.forEach(e => {
this.use_approval_arr.push(
{
title:e.level==1?'一级审批':'二级审批',
result:e.status==-1?'审批未通过':e.status==0?'审批中':'审批通过',
}
)
if(e.status!==0){
this.use_approval_arr[this.use_approval_arr.length - 1]['arr']=[
{
title:'审批时间:',
info:e.approval_time.split('+')[0].replace("T",' ')
},
{
title:'审批单位:',
info:e.user_info.department_name
},
{
title:'审批人:',
info:e.user_info.user_name
},
{
title:'审批意见:',
info:e.comments
},
]
}
});
}else{
this.use_approval_arr.push(
{
title:'一级审批',
result:'待审批',
}
)
}
this.res_data = JSON.parse(data.res_fields)
})
.catch(function(response) {
{
title: "审批单位:",
info: "某某某城管局",
},
{
title: "审批人:",
info: "张先生",
},
{
title: "审批意见:",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批通过",
arr: [
{
title: "审批时间:",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位:",
info: "某某某城管局",
},
{
title: "审批人:",
info: "张先生",
},
{
title: "审批意见:",
info: "同意",
},
],
},
{
title: "三级审批",
result: "审批中",
},
],
approval_arr1: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间:",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位:",
info: "某某某城管局",
},
{
title: "审批人:",
info: "张先生",
},
{
title: "审批意见:",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批通过",
arr: [
{
title: "审批时间:",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位:",
info: "某某某城管局",
},
{
title: "审批人:",
info: "张先生",
},
{
title: "审批意见:",
info: "同意",
},
],
},
{
title: "三级审批",
result: "审批未通过",
arr: [
{
title: "审批时间:",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位:",
info: "某某某城管局",
},
{
title: "审批人:",
info: "张先生",
},
{
title: "审批意见:",
info: "不同意,驳回。",
},
],
},
],
service_arr: ["服务基本信息", "接口详细信息", "申请审批信息"],
service_header_arr: {
id: "",
isMap: false,
name: "",
first: [
{
name: "服务类型",
text: "",
},
{
name: "审批状态",
text: "",
color: "#515fe7",
},
{
name: "服务到期时间",
text: "",
},
],
second: [
{
name: "服务接口地址",
text: "",
},
],
fixed: false,
},
now_service: 0,
list_arr: [
{
title: "服务描述:",
info: "",
},
{
title: "服务领域:",
info: "",
},
{
title: "发布人:",
info: "",
},
{
title: "联系方式:",
info: "",
},
{
title: "所属组织:",
info: "",
},
{
title: "开放程度:",
info: "",
},
{
title: "接口编码:",
info: "",
},
{
title: "注册发布时间:",
info: "",
},
],
servicead_arr: [
{
title: "请求方式:",
info: "",
},
{
title: "请求参数:",
info: "",
},
{
title: "请求示例:",
info: "",
},
{
title: "编码格式:",
info: "",
},
{
title: "响应参数:",
info: "",
type: "solt",
solt_name: "res_table",
},
],
apply_arr: [
{
title: "申请信息",
prop: "title",
},
{
title: "场景描述:",
info: "申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
},
{
title: "调用业务系统:",
info: "决策指挥系统",
},
{
title: "业务系统域名:",
info: "https://apaas.wodcloud.com/",
},
{
title: "申请文件:",
info: "mapvideos申请书.docx",
type: "down",
},
{
title: "申请内容:",
info: "",
type: "solt",
solt_name: "apply_table",
},
{
title: "申请规格:",
info: "",
},
{
title: "申请时长:",
info: "",
},
{
title: "申请时间:",
info: "",
},
{
title: "审批信息",
prop: "title",
type: "solt",
solt_name: "approval",
},
],
request_arr: ["", "GET", "POST", "PUT", "DELETE"],
res_data: [],
res_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 响应参数-header
res_table_arr: [], // 响应参数
};
},
watch: {},
computed: {},
created() {
this.get_service_info();
},
mounted() {},
methods: {
get_service_info() {
this.$http
.get(
`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`
)
.then((response) => {
if (!response.data.success) {
this.$message.error(response.data.errMsg);
return;
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
"text",
data.data_service_type1_name
);
this.$set(
this.service_header_arr["first"][1],
"text",
data.service_apply_info.approval_status == 1
? "待审批"
: data.service_apply_info.approval_status == 2
? "审批中"
: data.service_apply_info.approval_status == 3
? "审批通过"
: "审批未通过"
);
this.$set(
this.service_header_arr["first"][1],
"color",
data.service_apply_info.approval_status == 1
? "#ef9433"
: data.service_apply_info.approval_status == 2
? "#ef9433"
: data.service_apply_info.approval_status == 3
? "#515fe7"
: "#e15260"
);
this.$set(
this.service_header_arr["first"][2],
"text",
data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
? "-"
: data.service_apply_info.service_end_time
.replace("T", " ")
.split("+")[0]
);
this.$set(this.service_header_arr["second"][0], "text", data.req_url);
this.$set(this.service_header_arr, "url", data.cover);
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
this.$set(
this.list_arr[2],
"info",
data.service_apply_info.apply_user_info.user_name
);
this.$set(
this.list_arr[3],
"info",
data.service_apply_info.apply_user_info.phone
);
this.$set(this.list_arr[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_name);
this.$set(this.list_arr[6], "info", data.encode_method);
this.$set(
this.list_arr[7],
"info",
data.create_time == "0001-01-01T00:00:00Z"
? "-"
: data.create_time.replace("T", " ").split("+")[0]
);
this.$set(
this.servicead_arr[0],
"info",
this.request_arr[data.req_type]
);
this.$set(
this.servicead_arr[1],
"info",
data.req_query ? data.req_query : ""
);
this.$set(this.servicead_arr[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method);
// this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
this.$set(this.apply_arr[1], "info", data.descript);
this.$set(
this.apply_arr[2],
"info",
data.service_apply_info.business_name
);
this.$set(
this.apply_arr[3],
"info",
data.service_apply_info.business_url
);
this.$set(
this.apply_arr[4],
"info",
data.service_apply_info.apply_file.split("/")[
data.service_apply_info.apply_file.split("/").length - 1
]
);
this.$set(
this.apply_arr[4],
"url",
data.service_apply_info.apply_file
);
this.$set(
this.apply_arr[6],
"info",
"访问次数:" +
data.service_apply_info.request_spcs.pv +
"/日," +
"访问量:" +
data.service_apply_info.request_spcs.count +
"/日"
);
this.$set(
this.apply_arr[7],
"info",
data.service_apply_info.duration +
(data.service_apply_info.duration_unit == 1 ? "" : "")
);
this.$set(
this.apply_arr[8],
"info",
data.service_apply_info.apply_time.replace("T", " ").split("+")[0]
);
this.res_table_arr = JSON.parse(
data.service_apply_info.res_fields || "[]"
);
if (this.res_table_arr.length === 0) {
this.$set(this.servicead_arr[4], "info", "无响应参数");
}
console.log(this.res_table_arr);
if (data.service_apply_info.approval_process) {
data.service_apply_info.approval_process.forEach((e) => {
this.use_approval_arr.push({
title: e.level == 1 ? "一级审批" : "二级审批",
result:
e.status == -1
? "审批未通过"
: e.status == 0
? "审批中"
: "审批通过",
});
if (e.status !== 0) {
this.use_approval_arr[this.use_approval_arr.length - 1][
"arr"
] = [
{
title: "审批时间:",
info: e.approval_time.split("+")[0].replace("T", " "),
},
{
title: "审批单位:",
info: e.user_info.department_name,
},
{
title: "审批人:",
info: e.user_info.user_name,
},
{
title: "审批意见:",
info: e.comments,
},
];
}
});
},
} else {
this.use_approval_arr.push({
title: "一级审批",
result: "待审批",
});
}
this.res_data = JSON.parse(data.res_fields);
})
.catch(function(response) {});
},
},
};
</script>
<style scoped>
.detail_contain{
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
.detail_contain {
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
}
.info_contain{
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
}
.now_page_title{
margin: 15px 0;
color: #898d9e;
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span{
color: #242c43;
.now_page_title span {
color: #242c43;
}
.type_box{
width: 100%;
.type_box {
width: 100%;
}
.type_title{
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
.type_title {
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.type_select{
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
.type_select {
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.type_box_select{
padding: 30px 10px 10px 10px;
width: 100%;
.type_box_select {
padding: 30px 10px 10px 10px;
width: 100%;
}
</style>
......@@ -231,15 +231,15 @@ export default {
info: ""
},
{
title: "场景描述",
title: "业务系统名称",
info: ""
},
{
title: "调用业务系统",
title: "业务系统访问地址",
info: ""
},
{
title: "业务系统域名",
title: "场景描述",
info: ""
},
{
......@@ -354,13 +354,13 @@ export default {
this.$set(this.list_arr[0], "info", data.service_apply_info.apply_user_info.department_name);
this.$set(this.list_arr[1], "info", data.service_apply_info.apply_user_info.user_name);
this.$set(this.list_arr[2], "info", data.service_apply_info.apply_user_info.phone);
this.$set(this.list_arr[3], "info", data.descript);
this.$set(this.list_arr[4], "info", data.service_apply_info.business_name);
this.$set(this.list_arr[5], "info", data.service_apply_info.business_url);
this.$set(this.list_arr[3], "info", data.service_apply_info.business_name);
this.$set(this.list_arr[4], "info", data.service_apply_info.business_url);
this.$set(this.list_arr[5], "info", data.descript);
this.$set(this.list_arr[6], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]);
this.$set(this.list_arr[6], "url", data.service_apply_info.apply_file);
this.$set(this.list_arr[8], "info", data.service_apply_info.duration+(data.service_apply_info.duration_unit==1?'':''));
this.$set(this.list_arr[9], "info", "访问次数:"+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.pv||'-')+"/日 访问量:"+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.count||'-')+"/日");
this.$set(this.list_arr[9], "info", "访问次数:"+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.pv||'-')+"次/日 访问量:"+(data.service_apply_info.request_spcs&&data.service_apply_info.request_spcs.count||'-')+"/日");
this.id = data.service_apply_info.id
if(data.service_apply_info.approval_status!==0){
this.servicead_arr[this.now_user].splice(1,1)
......@@ -384,7 +384,7 @@ export default {
},
{
title:'审批单位:',
info:e.user_info.department_name
info:e.user_info.department_name?e.user_info.department_name:''
},
{
title:'审批人:',
......
......@@ -106,7 +106,7 @@
:title="dialogInfo.title"
:msg="dialogInfo.msg"
:submit="dialogInfo.submit"
:sunbmitText="dialogInfo.sunbmitText"
:sunbmit-text="dialogInfo.sunbmitText"
></apass-dialog>
<allot-info-confirm
......@@ -148,6 +148,7 @@ export default {
title: "",
msg: "",
submit: null,
sunbmitText: "",
},
listUrl: "",
deleteUrl: "",
......@@ -1064,8 +1065,7 @@ export default {
callback(item) {
if (item.state == 0) {
return null; // 已下架,上架的操作需要普通用户申请
} else
if (item.state == 1) {
} else if (item.state == 1) {
return _self.soldOutItem(item); // 已上架,超管用户可以直接下架
} else if (item.state == 2) {
return _self.soldUpItem(item); // 上架审核中,超管用户可以直接上架
......@@ -1398,7 +1398,6 @@ export default {
applyForSoldUpItem(item) {
this.dialogInfo.title = "提示";
this.dialogInfo.msg = "确认申请上架此服务吗?";
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发送通知";
this.dialogInfo.submit = () => {
this.$http
......@@ -1433,7 +1432,6 @@ export default {
this.dialogInfo.title = "是否确定下架服务";
this.dialogInfo.msg =
"下架此服务会导致用户被迫暂停对服务的调用,下架前需向超级管理员发送通知,超级管理员通过后此服务将会从服务超市中下架。";
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发送通知";
this.dialogInfo.submit = () => {
this.$http
......@@ -1467,7 +1465,6 @@ export default {
soldUpItem(item) {
this.dialogInfo.title = "提示";
this.dialogInfo.msg = "确认上架此服务吗?";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.submit = () => {
this.$http
......@@ -1501,7 +1498,6 @@ export default {
this.dialogInfo.title = "提示";
this.dialogInfo.msg =
"下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.submit = () => {
this.$http
......@@ -1534,7 +1530,6 @@ export default {
deleteItem(item) {
this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该条服务?";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "";
this.dialogInfo.submit = () => {
this.$http
......
<template>
<div class="detail_contain">
<p class="now_page_title">
我的服务 / {{now_user==0||now_user==4?'注册发布的服务':now_user==1?'组织服务管理':'平台服务管理'}} /
我的服务 /
{{
now_user == 0 || now_user == 4
? "注册发布的服务"
: now_user == 1
? "组织服务管理"
: "平台服务管理"
}}
/
<span>服务详情</span>
</p>
<div class="info_contain">
......@@ -16,28 +24,48 @@
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>{{ item }}</div>
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list
:list_arr="now_service == 0 ? list_arr : servicead_arr"
v-if="now_service == 0 || now_service == 1"
v-if="now_service == 0 || (now_service == 1&&!workflows_id)"
>
<table-um :headers="header_arr" :datas="res_data" :stripe="true" slot="zd_table"></table-um>
<v-apaas-code :datas="code_arr" slot="zd_code"></v-apaas-code>
<table-um
:headers="req_header_arr"
:datas="req_data"
:stripe="true"
slot="req_table"
></table-um>
<v-apaas-code :datas="req_code_arr" slot="req_code"></v-apaas-code>
<table-um
:headers="res_header_arr"
:datas="res_data"
:stripe="true"
slot="res_table"
></table-um>
<v-apaas-code :datas="res_code_arr" slot="res_code"></v-apaas-code>
</info-list>
<p v-if="now_service == 1&&workflows_id">
流程服务接口说明见文档中心流程服务接口文档
</p>
<div v-show="now_service == 2">
<p class="service_title">
<span></span>服务运行概况
</p>
<p class="service_title"><span></span>服务运行概况</p>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card">
<template>
<div style="height:115px;padding-top:10px;">
<waveIcon :state="yx_state.state" style="margin:10px auto;"></waveIcon>
<waveIcon
:state="yx_state.state"
style="margin:10px auto;"
></waveIcon>
<p
style="color: #58617a;font-size: 16px;text-align:center;"
>{{ yx_state.state }}</p>
>
{{ yx_state.state }}
</p>
</div>
</template>
</nor-card>
......@@ -59,7 +87,10 @@
</nor-card>
<nor-card title="资源使用" class="service_card">
<template>
<div style="height:115px;padding-top:30px;" class="service_num">
<div
style="height:115px;padding-top:30px;"
class="service_num"
>
<p>{{ yx_state.memory }}</p>
</div>
</template>
......@@ -68,10 +99,11 @@
<nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" />
</nor-card>
<p class="service_title">
<span></span>服务调用列表
</p>
<table-um :headers="header_use_arr" :datas="service_use_arr"></table-um>
<p class="service_title"><span></span>服务调用列表</p>
<table-um
:headers="header_use_arr"
:datas="service_use_arr"
></table-um>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
......@@ -83,19 +115,34 @@
</div>
<div v-show="now_service == 3">
<p style="color: #8890a7;">服务规格:</p>
<table-um :stripe="true" :headers="service_size_arr" :datas="service_size_data"></table-um>
<table-um
:stripe="true"
:headers="service_size_arr"
:datas="service_size_data"
></table-um>
<p style="color: #8890a7;">购买方式:</p>
<p style="color: #242c43;margin:10px 0px;">
{{
buy_type == 1
? "按月购买"
: buy_type == 2
? "按年购买"
: "按月购买&按年购买"
buy_type == 1
? "按月购买"
: buy_type == 2
? "按年购买"
: "按月购买&按年购买"
}}
</p>
<div class="editbtn" v-if="now_user == 1" @click="sizeset_flag = true">编辑</div>
<p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin-bottom:10px;">规格设置:</p>
<div
class="editbtn"
v-if="now_user == 1"
@click="sizeset_flag = true"
>
编辑
</div>
<p
v-if="now_user == 1 && sizeset_flag"
style="color: #8890a7;margin-bottom:10px;"
>
规格设置:
</p>
<table-um
v-if="now_user == 1 && sizeset_flag"
:headers="edit_size_arr"
......@@ -108,17 +155,24 @@
:datas="service_size_data"
@changeTable="now_size_data"
></table-um>
<p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin:10px 0;">购买方式:</p>
<p
v-if="now_user == 1 && sizeset_flag"
style="color: #8890a7;margin:10px 0;"
>
购买方式:
</p>
<el-button
v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
@click="change_buy(1)"
>按月购买</el-button>
>按月购买</el-button
>
<el-button
v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
@click="change_buy(2)"
>按年购买</el-button>
>按年购买</el-button
>
<div class="savebtn" v-if="now_user == 1 && sizeset_flag">
<el-button @click="change_service_size">保存</el-button>
<el-button @click="sizeset_flag = false">取消</el-button>
......@@ -153,7 +207,7 @@ export default {
Topology,
serviceHeader,
dialogAction,
ListPagination
ListPagination,
},
data() {
return {
......@@ -171,17 +225,86 @@ export default {
maxTime: "",
averageTraffic: "",
maxTraffic: "",
memory: ""
memory: "",
},
service_use_arr: [],
res_data: [], //响应参数
req_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
width: 240,
},
], // 请求参数-header
req_data: [], // 请求参数
req_code_arr: "", // 请求示例
res_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
minWidth: "20%",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
width: "100px",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
minWidth: "30%",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
width: "120px",
align: "center",
width: 240,
},
], // 响应参数-header
res_data: [], // 响应参数
res_code_arr: "", // 响应示例
buy_type: "",
workflows_id:'',//判断是否是流程服务
sizeset_flag: false, //规格设置是否显示
code_arr: "",
service_arr: [
["服务基本信息", "接口详细信息", "服务运行状态"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"]
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
],
service_size_data: [], //服务规格数组
service_header_arr: {
......@@ -192,121 +315,101 @@ export default {
first: [
{
name: "服务类型",
text: ""
text: "",
},
{
name: "申请次数",
text: ""
text: "",
},
{
name: "调用次数",
text: ""
text: "",
},
{
name: "服务状态",
text: ""
}
text: "",
},
],
second: [
{
name: "服务接口地址",
text: ""
}
text: "",
},
],
fixed: true,
fixedurl: this.$route.path.replace("servicedetail", "serviceedit")
fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
},
now_service: 0,
datas: {},
header_arr: [
{
prop: "name",
label: "字段编码",
minWidth: "20%",
align: "left"
},
{
prop: "label",
label: "字段名称",
minWidth: "20%",
align: "center"
},
{
prop: "show_type",
label: "字段类型",
width: "100px",
align: "center"
},
{
prop: "descript",
label: "字段说明",
minWidth: "30%",
align: "left"
},
{
prop: "example",
label: "字段示例数值",
width: "120px",
align: "left"
}
],
header_use_arr: [
{
prop: "dydw",
label: "调用单位",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "dyr",
label: "调用人",
width: "100px",
align: "center"
align: "center",
},
{
prop: "dyyw",
label: "调用业务系统",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "ywxt",
label: "业务系统网址",
minWidth: "20%",
align: "left"
align: "left",
},
{
prop: "cjms",
label: "场景描述",
minWidth: "40%",
align: "left"
align: "left",
},
{
prop: "sqgg",
label: "申请规格",
minWidth: "40%",
align: "center",
},
{
prop: "sqsc",
label: "申请时长",
minWidth: "40%",
align: "center",
},
{
prop: "sqsj",
label: "申请调用时间",
width: "160px",
align: "right"
}
align: "right",
},
],
service_size_arr: [
{
prop: "count",
label: "访问次数(次/日)",
minWidth: "33.33%",
align: "center"
align: "center",
},
{
prop: "pv",
label: "访问量(PV/日)",
minWidth: "33.33%",
align: "center"
align: "center",
},
{
prop: "des",
label: "规格说明",
minWidth: "33.33%",
align: "left"
}
align: "left",
},
],
edit_size_arr: [
{
......@@ -314,21 +417,21 @@ export default {
label: "访问次数(次/日)",
minWidth: "33.33%",
align: "center",
type: "inputNumber"
type: "inputNumber",
},
{
prop: "pv",
label: "访问量(PV/日)",
minWidth: "33.33%",
align: "center",
type: "inputNumber"
type: "inputNumber",
},
{
prop: "des",
label: "规格说明",
minWidth: "33.33%",
align: "left",
type: "input"
type: "input",
},
{
label: "操作",
......@@ -339,48 +442,52 @@ export default {
{
type: "action-delete",
label: "删除",
local: true
}
]
}
local: true,
},
],
},
],
size_arr_down: [],
servicead_arr: [
{
title: "请求方式:",
info: ""
info: "",
},
{
title: "请求参数:",
info: ""
info: "",
type: "solt",
solt_name: "req_table",
},
{
title: "请求示例:",
info: ""
info: "",
type: "solt",
solt_name: "req_code",
},
{
title: "编码格式:",
info: ""
info: "",
},
{
title: "响应参数:",
info: "",
type: "solt",
solt_name: "zd_table"
solt_name: "res_table",
},
{
title: "响应示例:",
info: "",
type: "solt",
solt_name: "zd_code"
}
solt_name: "res_code",
},
],
service_type_arr: [
"数据服务",
"时空服务",
"视频服务",
"感知服务",
"综合应用"
"综合应用",
],
scrvice_area_arr: [
"经济建设",
......@@ -392,49 +499,49 @@ export default {
"文化休闲",
"社会团体",
"教育机构",
"其他"
"其他",
],
open_arr: ["共享", "受限", "敏感"],
service_state_arr: ["已下架", "已上架", "审核中","审核中"],
service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
request_arr: ["GET", "POST", "PUT", "DELETE"],
list_arr: [
{
title: "服务描述:",
info: ""
info: "",
},
{
title: "服务领域:",
info: ""
info: "",
},
{
title: "所属组织:",
info: ""
info: "",
},
{
title: "开放程度:",
info: ""
info: "",
},
{
title: "接口编码:",
info: ""
info: "",
},
{
title: "注册发布时间:",
info: ""
}
]
info: "",
},
],
};
},
computed: {
...mapGetters(["level"]),
...mapState(["userInfo"])
...mapState(["userInfo"]),
},
watch: {
now_service(n, o) {
if (n == 2) {
this.getData();
}
}
},
},
created() {
if (this.userInfo) {
......@@ -463,18 +570,24 @@ export default {
.get(
`/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
)
.then(response => {
.then((response) => {
console.log(response);
if (response.data.success) {
this.listTotal = response.data.data.total;
response.data.data.data.forEach(e => {
let data = response.data.data.data || [];
data.forEach((e) => {
this.service_use_arr.push({
dydw: e.apply_org_name,
dyr: e.apply_user_info.user_name,
dyyw: e.business_name,
ywxt: e.business_url,
cjms: e.scene,
sqsj: e.apply_time.split('+')[0].replace('T',' ')
sqsj: e.apply_time.split("+")[0].replace("T", " "),
sqgg: e.request_spcs
? `访问次数:${e.request_spcs.count}/日 访问量:${e.request_spcs.pv}/日`
: "",
sqsc: e.duration + ["", "个月", ""][e.duration_unit || 0],
});
});
}
......@@ -503,7 +616,7 @@ export default {
});
},
getData() {
this.$api.workbench.getServiceTopology().then(response => {
this.$api.workbench.getServiceTopology().then((response) => {
this.datas = response.data.elements;
});
},
......@@ -513,11 +626,18 @@ export default {
"/apaas/service/v3/service/manager?service_id=" +
this.$route.params.id
)
.then(response => {
.then((response) => {
if (response.data.success === 1) {
let data = response.data.data;
if(data.workflows_id){
this.workflows_id = data.workflows_id
}
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
......@@ -545,12 +665,8 @@ export default {
data.req_url
);
this.$set(this.service_header_arr, "url", data.cover);
if(this.now_user==1){
this.$set(
this.service_header_arr,
"fixed",
false
);
if (this.now_user == 1) {
this.$set(this.service_header_arr, "fixed", false);
}
this.$set(
this.service_header_arr,
......@@ -567,20 +683,39 @@ export default {
"info",
data.create_time.replace("T", " ").split("+")[0]
);
// 接口详情信息
this.$set(
this.servicead_arr[0],
"info",
this.request_arr[data.req_type - 1]
);
this.$set(
this.servicead_arr[1],
"info",
data.req_query ? data.req_query : ""
);
this.$set(this.servicead_arr[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method);
this.code_arr = data.res_fields_example;
this.res_data = JSON.parse(data.res_fields);
); // 请求方式
this.req_data = JSON.parse(
data.req_fields || data.req_query || "[]"
); // 请求参数
if (this.req_data.length === 0) {
this.$set(this.servicead_arr[1], "type", "");
this.$set(this.servicead_arr[1], "info", "无请求参数");
}
this.req_code_arr =
data.req_fields_example || data.req_query_example || ""; // 请求示例
if (!this.req_code_arr) {
this.$set(this.servicead_arr[2], "type", "");
this.$set(this.servicead_arr[2], "info", "无请求示例");
}
this.$set(this.servicead_arr[3], "info", data.encode_method); // 编码格式
this.res_data = JSON.parse(data.res_fields || "[]"); // 响应参数
if (this.res_data.length === 0) {
this.$set(this.servicead_arr[4], "type", "");
this.$set(this.servicead_arr[4], "info", "无响应参数");
}
this.res_code_arr = data.res_fields_example || ""; // 响应示例
if (!this.res_code_arr) {
this.$set(this.servicead_arr[5], "type", "");
this.$set(this.servicead_arr[5], "info", "无响应示例");
}
// 接口详情信息 end
this.service_size_data = data.request_spcs_info;
this.size_arr_down = data.request_spcs_info;
this.buy_type = data.request_spcs_info[0].type;
......@@ -592,7 +727,7 @@ export default {
} else {
this.$message({
message: response.data.errMsg,
type: "warning"
type: "warning",
});
}
})
......@@ -608,7 +743,7 @@ export default {
"/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
this.$route.params.id
)
.then(response => {
.then((response) => {
let data = response.data.data;
console.log(data);
this.service_size_data = data.data;
......@@ -623,7 +758,7 @@ export default {
},
change_service_size() {
let temp = [];
this.size_arr_down.forEach(e => {
this.size_arr_down.forEach((e) => {
if (e.pv && e.count) {
if (e.flag) {
e.id = 0;
......@@ -646,9 +781,9 @@ export default {
this.$http
.post("/apaas/service/v3/service/manager/request/spcs/save", {
service_id: parseInt(this.$route.params.id),
data: temp
data: temp,
})
.then(response => {
.then((response) => {
console.log(response);
if (response.data.success) {
this.$message.success("保存成功");
......@@ -665,7 +800,7 @@ export default {
.get(
`/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
)
.then(response => {
.then((response) => {
if (response.data.success) {
let data = response.data.data;
this.yx_state = {
......@@ -674,22 +809,22 @@ export default {
maxTime: data.respTime.max + "ms",
averageTraffic: data.throughput.avg + "dps",
maxTraffic: data.throughput.max + "dps",
memory: data.resource.memory + "MB"
memory: data.resource.memory + "MB",
};
}
})
.catch(response => {
.catch((response) => {
this.yx_state = {
state: "停止",
averageTime: "0ms",
maxTime: "0ms",
averageTraffic: "0dps",
maxTraffic: "0dps",
memory: "0MB"
memory: "0MB",
};
});
}
}
},
},
};
</script>
......@@ -750,8 +885,8 @@ export default {
padding: 30px 10px 10px 10px;
width: 100%;
}
.type_box_select >>> .outlist .list p{
word-wrap:break-word;
.type_box_select >>> .outlist .list p {
word-wrap: break-word;
}
.service_title {
font-size: 16px;
......@@ -801,6 +936,7 @@ export default {
.service_card_charts {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
.editbtn {
width: 124px;
......
......@@ -311,7 +311,7 @@ export default {
if(reg.test(this.maxline)){
}else{
this.$message.error('请输入长度小于6的正整数')
this.$message.error('请输入6位内的正整数')
return
}
}else{
......@@ -327,7 +327,7 @@ export default {
if(reg.test(this.maxline1)){
}else{
this.$message.error('请输入长度小于6的正整数')
this.$message.error('请输入6位内的正整数')
return
}
}
......@@ -338,7 +338,7 @@ export default {
if(reg.test(this.maxline1)){
}else{
this.$message.error('请输入长度小于6的正整数')
this.$message.error('请输入6位内的正整数')
return
}
}
......
......@@ -5,6 +5,11 @@
<el-breadcrumb-item :to="{ path: '/intelligent_drawing' }">智能制图</el-breadcrumb-item>
<el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb v-else-if="process_id != ''" separator="/" class="bread_crumb">
<el-breadcrumb-item :to="{ path: '/workplace' }">在线组件工具</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">流程设计</el-breadcrumb-item>
<el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb v-else separator="/" class="bread_crumb">
<el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
<el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item>
......@@ -355,10 +360,7 @@
</block-radius>
</div>
<div style="display: none">
<iframe
id="listener"
:src="addPortalItemUrl"
></iframe>
<iframe id="listener" :src="addPortalItemUrl"></iframe>
</div>
<apass-dialog
ref="alertChange"
......@@ -388,7 +390,8 @@ export default {
},
data() {
return {
addPortalItemUrl: gisServiceUrl + '/portal/apaasplat/viewer/addPortalItem.html',
addPortalItemUrl:
gisServiceUrl + "/portal/apaasplat/viewer/addPortalItem.html",
btnList: [],
activeBtn: null,
serviceUrl: "",
......@@ -543,6 +546,7 @@ export default {
requestRules: 0,
responseRules: 0,
is_map: 0,
process_id: "",
param_fields: [],
body_fields: [],
dialogInfo: {
......@@ -552,6 +556,7 @@ export default {
},
is_portal: false,
portal_id: "",
dataType: "",
};
},
computed: {},
......@@ -687,12 +692,14 @@ export default {
this.$api.workbench.fwzcFwcs(query).then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.body_fields = data.body_fields;
this.param_fields = data.param_fields;
if (data.body_fields && data.body_fields.length != 0) {
this.datasQqcs = data.body_fields;
this.param_fields = data.param_fields;
this.dataType = "body";
} else {
this.datasQqcs = data.param_fields;
this.body_fields = [];
this.dataType = "param";
}
this.datasFhcs = data.response_fields;
this.resSuccess = true;
......@@ -886,9 +893,13 @@ export default {
method: this.select,
url: this.serviceUrl,
request_fields:
this.body_fields.length == 0 ? [] : this.request_fields,
this.dataType == "body"
? this.request_fields
: this.body_fields,
request_query_fields:
this.param_fields.length == 0 ? [] : this.request_fields,
this.dataType == "param"
? this.request_fields
: this.param_fields,
response_fields: this.response_fields,
content_type: contentType,
portal_id: this.portal_id,
......@@ -998,6 +1009,11 @@ export default {
self.is_portal = true;
}
this.getOrganization();
} else if (self.$route.query.process) {
self.process_id = self.$route.query.process;
self.jcxxtx = true;
this.getProcessDetail
this.getOrganization();
} else {
self.is_map = 0;
self.getServiceType1();
......@@ -1040,7 +1056,6 @@ export default {
);
},
listeners(event) {
console.log(event);
let self = this;
if (event && event.origin == gisServiceUrl && event.data) {
if (event.data.cmd == "getPortalItemInfo") {
......
......@@ -3,7 +3,7 @@
<div class="person_info">
<div class="preson">
<div class="person_text">
<img style="width:40px;" :src="picture_path" alt />
<img style="width:40px;" :src="picture_path?picture_path:require('../../assets/imgs/img_head.png')" alt />
<span>你好,{{ person }}{{login_time?'最近登录 ':''}}{{ login_time }}</span>
</div>
<div class="person_menu">
......@@ -38,7 +38,7 @@
:key="index + 100"
>
<img :src="item.pic" alt />
<div class="menu_text">
<div class="menu_text" :style="now_user == 1||now_user == 2?{marginRight:'30px'}:''">
<p>{{ item.text }}</p>
<p
:style="{ color: item.color }"
......@@ -58,7 +58,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span>
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
<div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span>
</p>
......@@ -159,7 +159,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span>
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
<div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span>
</p>
......@@ -202,7 +202,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
>
<span>
<span style="display: inline-block;vertical-align:middle;">数据分析中心</span>
<span style="display: inline-block;vertical-align:middle;">运营管控中心</span>
<div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span>
</p>
......@@ -217,13 +217,13 @@
<p>
<span></span> 服务类型分析
</p>
<div :id="fwlx_asy" class="health" style="width:265px;"></div>
<div :id="fwlx_asy" class="health" style="width:265px;margin-top:20px;"></div>
</div>
<div class="data_charts_left" style="width:285px;">
<p>
<span></span> 应用类型分析
</p>
<div :id="yylx_asy" class="health" style="width:265px;"></div>
<div :id="yylx_asy" class="health" style="width:265px;margin-top:20px;"></div>
</div>
</div>
</div>
......@@ -890,7 +890,7 @@ export default {
{
text: "收益总额",
pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
bg: "rgb(255,242,226)",
color: "#ea7d19",
type: "earnings_money",
num: ""
......@@ -924,7 +924,7 @@ export default {
{
text: "交易总额",
pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
bg: "rgb(255,242,226)",
color: "#ea7d19",
type: "trade_money",
num: ""
......@@ -958,7 +958,7 @@ export default {
{
text: "交易总额",
pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6",
bg: "rgb(255,242,226)",
color: "#ea7d19",
type: "trade_money",
num: ""
......@@ -998,7 +998,7 @@ export default {
pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
bg: "#fff2e2",
color: "#ea7d19",
url: "/bi",
url: "/apaas/hubApi/bi/token",
target: 1
},
{
......@@ -1066,17 +1066,19 @@ export default {
text: "权限管理",
role: 2,
url: "/authority/organization"
}
// {
// pic: require("@/assets/imgs/home_tool_ic_quanxian.png"),
// text: "容器管理",
// role: 2,
// },
// {
// pic: require("@/assets/imgs/home_tool_ic_quanxian.png"),
// text: "数据管控",
// role: 2,
// },
},
{
pic: require("@/assets/imgs/home_tool_ic_shuju.png"),
text: "数据管控",
role: 2,
url: "/data_analysis/my_service"
},
{
pic: require("@/assets/imgs/home_tool_ic_message.png"),
text: "消息与推送管理",
role: 2,
url: "/message/recommended"
},
]
};
},
......@@ -1215,7 +1217,7 @@ export default {
this.service_data = data.data;
this.service_data.forEach(e => {
if (e.create_time) {
e.create_time = e.create_time.split("+")[0].replace("T", " ");
e.create_time = helper.dateStringTransform(e.create_time)
}
if (e.service_apply_info && e.service_apply_info.approval_time) {
......@@ -1676,8 +1678,9 @@ export default {
name: "",
type: "pie",
clockWise: false,
radius: [51, 55],
radius: [52, 54],
center: ["51%", "45%"],
z:5,
hoverAnimation: false,
itemStyle: {
normal: {
......@@ -1703,7 +1706,48 @@ export default {
}
},
data: data
}
},
{
type:'pie',
z:4,
center:['51%','45%'],
radius:['43%','63%'],
hoverAnimation:false,
avoidLabelOverlap: false,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
tooltip: {
show: false
},
itemStyle: {
normal: {
color:'#f6f7fc'
}
},
emphasis:{
show:false,
itemStyle:{
color:'#f6f7fc'
}
},
data: [{
value: 1,
}],
}
];
var options = {
......@@ -1711,15 +1755,16 @@ export default {
tooltip: {
show: false
},
legend: {
bottom: -5,
left: "center",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
data: legendarr,
backgroundColor: "#f4f7fc"
},
// legend: {
// bottom: -5,
// left: "center",
// itemWidth: 10,
// itemHeight: 10,
// orient: "horizontal",
// data: legendarr,
// backgroundColor: "#f4f7fc",
// borderRadius:8
// },
toolbox: {
show: false
},
......@@ -1749,7 +1794,8 @@ export default {
bottom: 0,
itemWidth: 10,
itemHeight: 10,
backgroundColor: "#f4f7fc"
backgroundColor: "#f4f7fc",
borderRadius:8
},
xAxis: [
{
......@@ -1867,7 +1913,9 @@ export default {
data: [dataname[n]],
itemWidth: 14,
itemHeight: 10,
bottom: 0
bottom: 0,
backgroundColor: "#f4f7fc",
borderRadius:8
},
grid: {
borderColor: "#f2f2f2",
......@@ -1912,11 +1960,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0a92c4"
color: "rgba(10,146,196,0.3)"
},
{
offset: 1,
color: "#ffe"
color: 'rgba(255,255,255,0.3)'
}
])
}
......@@ -1939,12 +1987,14 @@ export default {
height: 28px;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
}
.data_charts_left .cloud_asy .el-input__inner {
width: 150px;
height: 28px;
line-height: 28px;
font-size: 12px;
border-radius: 4px;
}
.data_charts_left .el-input__icon {
line-height: 28px;
......@@ -2143,9 +2193,9 @@ export default {
color: #0d1847;
}
.yy_asy {
width: 400px;
width: 420px;
height: 200px;
margin: 0px 0 0 0px;
margin: 20px 0 0 0px;
}
.fwyy {
width: 420px;
......@@ -2288,7 +2338,7 @@ export default {
}
.manage_box {
width: 145px;
width: 155px;
height: 50px;
line-height: 50px;
background-color: #0d1847;
......
......@@ -53,8 +53,8 @@
<div class="tips">
<i class="el-icon-warning-outline"></i><span>此操作相当于:kubectl apply -f {{'<'+'spec.yaml'+'>'}}</span>
</div>
<v-apaas-code :datas="code_arr" v-show="now_yaml==1"></v-apaas-code>
<v-apaas-code :datas="yaml_arr" v-show="now_yaml==0"></v-apaas-code>
<v-apaas-code :datas="code_arr" :readOnly='true' v-show="now_yaml==1"></v-apaas-code>
<v-apaas-code :datas="yaml_arr" :readOnly='true' v-show="now_yaml==0"></v-apaas-code>
</div>
</div>
......
......@@ -29,7 +29,7 @@
:list_arr="list_arr"
v-if="service_arr[now_user][now_service] == '基本信息'"
>
<mavon-editor
<!-- <mavon-editor
slot="app_code"
v-model="appcode"
:boxShadow="false"
......@@ -37,7 +37,8 @@
:subfield="subfield"
:defaultOpen="preview"
:editable="false"
/>
/> -->
<div slot="app_code" style="white-space: pre-wrap;background-color:rgb(251,251,251);padding:15px;border-radius:5px;">{{appcode}}</div>
</info-list>
<div
......@@ -161,6 +162,7 @@
:auto-upload="false"
:on-success="upload_success"
:on-error="upload_error"
:on-change="change_file_state"
:data="anotherData1"
:multiple="false"
>
......@@ -493,10 +495,17 @@ export default {
this.now_page = 1;
this.image_arr = [];
this.get_image_list();
this.get_file_name();
} else {
this.$message.error(response.errMsg);
}
},
change_file_state(file,fileList){
console.log(file,fileList);
if(fileList.length>=2){
this.fileList = [file]
}
},
upload_error() {
this.$message.error("上传失败");
},
......
......@@ -80,7 +80,7 @@ export default {
option:[
{ required: true, message: '请输入意见', trigger: 'blur' },
{
min: 10, message: '长度应大于10个字符', trigger: 'blur'
min: 10,max:200, message: '长度应大于10个小于200个字符', trigger: 'blur'
}
]
},
......
......@@ -1341,7 +1341,7 @@ export default {
this.showDialog();
},
editItem(item) {
this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}`);
this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.app_id}`);
},
onLine(item) {
this.dialogInfo.title = "提示";
......
......@@ -57,6 +57,27 @@ const workbench = {
getServiceTopology() {
return axios.get(`/apaas/istio/v3/api/namespaces/graph`)
},
// add process
addProcess(params) {
return axios.post(`/apaas/serviceapp/v3/workflows/add`, params)
},
// edit process
editProcess(params) {
return axios.post(`/apaas/serviceapp/v3/workflows/update`, params)
},
// get process detail
getProcessDetail(params) {
return axios.get(`/apaas/serviceapp/v3/workflows/detail?id=${params.id}`)
},
// get process namespace list
getProcessNamespaceList() {
return axios.get(`/apaas/serviceapp/v3/workflows/searchConditions`)
},
// get process service list
getProcessServiceList() {
return axios.get(`/apaas/serviceapp/v3/workflows/wfServices`)
},
}
export default workbench;
......@@ -143,6 +143,12 @@ export default new Router({
},
],
}, // 工作台 - 应用管理模块
{
path: "/technical_support", // 技术支持
name: "technicalSupport",
component: () => import("@/pages/technical-support/index"),
},
{
path: "/shop", // 服务超市
name: "shop",
......@@ -274,10 +280,15 @@ export default new Router({
component: () => import("@/pages/workbench/component-center/process-management/monitoring/index"),
}, // 流程监控
{
path: "/progress/designs",
name: "process_designs",
path: "/progress/designer/design",
name: "process_design",
component: () => import("@/pages/workbench/component-center/process-management/process-design/index"),
}, // 流程设计
{
path: "/progress/designer/design_edit/:id",
name: "process_design_edit",
component: () => import("@/pages/workbench/component-center/process-management/process-design/edit"),
}, // 流程编辑
],
}, // 流程设计
{
......@@ -439,6 +450,16 @@ export default new Router({
name: "serviceControl",
component: () => import("@/pages/data-analysis/service-control"),
},
{
path: "/data_analysis/super_service", // 数据分析中心服务-组织
name: "superServiceDataAnalysis",
component: () => import("@/pages/data-analysis/super-service"),
},
{
path: "/data_analysis/super_application", // 数据分析中心应用-组织
name: "superApplicationDataAnalysis",
component: () => import("@/pages/data-analysis/super-application"),
},
],
},
{
......
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