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

合dev

parents b9635c01 fea2f4bf
[v-cloak]{ [v-cloak] {
display: none display: none;
} }
/* 新增按钮颜色 */ /* 新增按钮颜色 */
.form-group .el-button--primary{ .form-group .el-button--primary {
background-color: #264dd9!important; background-color: #264dd9 !important;
border-color: #264dd9!important; border-color: #264dd9 !important;
} }
/* 返回按钮颜色 */ /* 返回按钮颜色 */
.from_return>.el-button--primary{ .from_return > .el-button--primary {
background-color: #edf0ff!important; background-color: #edf0ff !important;
border-color: #edf0ff!important; border-color: #edf0ff !important;
color:#264dd9!important; color: #264dd9 !important;
} }
/* 取消按钮颜色 */ /* 取消按钮颜色 */
.form_c{ .form_c {
background-color: #dde4ff!important; background-color: #dde4ff !important;
border-color: #dde4ff!important; border-color: #dde4ff !important;
color:#264dd9!important ; color: #264dd9 !important ;
} }
/* 确定按钮颜色 */ /* 确定按钮颜色 */
.form_t{ .form_t {
background-color: #264dd9!important; background-color: #264dd9 !important;
border-color: #264dd9!important; border-color: #264dd9 !important;
color:#f4f7fc!important ; color: #f4f7fc !important ;
} }
/* 搜索框颜色 */ /* 搜索框颜色 */
.form-group .el-input__inner{ .form-group .el-input__inner {
border-radius: 28px!important; border-radius: 28px !important;
border: 1px solid #bcc1d0!important; border: 1px solid #bcc1d0 !important;
background: #f4f7fc!important; background: #f4f7fc !important;
color: #8890a7!important; color: #8890a7 !important;
} }
.drawer_return .el-input__inner{ .drawer_return .el-input__inner {
border-radius: 28px!important; border-radius: 28px !important;
border: 1px solid #bcc1d0!important; border: 1px solid #bcc1d0 !important;
background: #f4f7fc!important; background: #f4f7fc !important;
color: #8890a7!important; color: #8890a7 !important;
} }
/* 多行文本框样式 */ /* 多行文本框样式 */
.jbxx_desc textarea{ .jbxx_desc textarea {
height: 150px!important; height: 150px !important;
border-radius: 8px!important; border-radius: 8px !important;
border-color: #bcc1d0!important; border-color: #bcc1d0 !important;
outline: none!important; outline: none !important;
resize: none!important; resize: none !important;
} }
/* 面包屑文字大小 */ /* 面包屑文字大小 */
.el-breadcrumb{ .el-breadcrumb {
font-size: 14px; font-size: 14px;
color: #898d9e; color: #898d9e;
} }
/* 编辑颜色*/ /* 编辑颜色*/
.primary-edit{ .primary-edit {
color: #264dd9; color: #264dd9;
cursor: pointer; cursor: pointer;
} }
/* 删除颜色 */ /* 删除颜色 */
.primary-del{ .primary-del {
color: #264dd9; color: #264dd9;
cursor: pointer; cursor: pointer;
} }
.space_bet{} .space_bet {
}
/* reset */ /* reset */
html { html {
} }
body { body {
margin: 0; margin: 0;
...@@ -87,7 +87,7 @@ h5 { ...@@ -87,7 +87,7 @@ h5 {
font-weight: normal; font-weight: normal;
} }
div{ div {
box-sizing: border-box; box-sizing: border-box;
} }
/* reset end */ /* reset end */
...@@ -141,7 +141,7 @@ div{ ...@@ -141,7 +141,7 @@ div{
} }
.ss_card > .sc_right_container > .sc_info { .ss_card > .sc_right_container > .sc_info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.form-group { .form-group {
padding: 20px 20px 15px; padding: 20px 20px 15px;
...@@ -152,56 +152,66 @@ div{ ...@@ -152,56 +152,66 @@ div{
padding: 0 20px; padding: 0 20px;
} }
/* 设置抽屉的样式 */ /* 设置抽屉的样式 */
.el-drawer__header{ .el-drawer__header {
display: none; display: none;
} }
.from_return{ .from_return {
text-align: center; text-align: center;
padding: 18px 20px 10px; padding: 18px 20px 10px;
border-bottom: 1px solid #edf0ff; border-bottom: 1px solid #edf0ff;
position: relative; position: relative;
} }
.from_return>.el-button--primary{ .from_return > .el-button--primary {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 20px; left: 20px;
} }
.from_return>span{ .from_return > span {
color:#1a2236; color: #1a2236;
font-size: 16px; font-size: 16px;
} }
.demo-drawer__content .el-form-item__label{ .demo-drawer__content .el-form-item__label {
color: #242c43; color: #242c43;
} }
.demo-drawer__content .el-input__inner{ .demo-drawer__content .el-input__inner {
border: 1px solid #bcc1d0; border: 1px solid #bcc1d0;
border-radius: 17px; border-radius: 17px;
color: #58617a; color: #58617a;
background: #fff; background: #fff;
} }
.demo-drawer__footer{ .demo-drawer__footer {
text-align: right; text-align: right;
padding-right: 40px; padding-right: 40px;
margin-top: 40px; margin-top: 40px;
} }
.el-form-item__error{ .el-form-item__error {
font-size:11px; font-size: 11px;
} }
/* 设置提示弹窗的样式 */ /* 设置提示弹窗的样式 */
.el-dialog{ .el-dialog {
border-radius: 10px; border-radius: 10px;
} }
.el-dialog__header { .el-dialog__header {
border-bottom: 1px solid #edf0ff; border-bottom: 1px solid #edf0ff;
} }
.el-dialog__title{ .el-dialog__title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1d1e20; color: #1d1e20;
border-left: 4px solid #0367f6;
padding-left: 8px; 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; font-size: 18px;
color: #242c43; color: #242c43;
text-align: center; text-align: center;
...@@ -213,23 +223,22 @@ div{ ...@@ -213,23 +223,22 @@ div{
.el-tabs__item { .el-tabs__item {
font-size: 16px; font-size: 16px;
color: #8890a7; color: #8890a7;
line-height: 24px!important; line-height: 24px !important;
} }
.el-tabs__nav-scroll .el-tabs__item { .el-tabs__nav-scroll .el-tabs__item {
line-height: 40px!important; line-height: 40px !important;
} }
.el-tabs__item:hover { .el-tabs__item:hover {
color: #687087; color: #687087;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #e56600 !important; color: #e56600 !important;
} }
.el-tabs__active-bar{ .el-tabs__active-bar {
height: 3px; height: 3px;
background-color:#e56600 !important; background-color: #e56600 !important;
} }
.el-tabs__nav-wrap::after{ .el-tabs__nav-wrap::after {
height: 1px; height: 1px;
background-color: #edf0ff; background-color: #edf0ff;
} }
...@@ -277,51 +286,54 @@ border-radius:8px; ...@@ -277,51 +286,54 @@ border-radius:8px;
} */ } */
/* 左右布局 */ /* 左右布局 */
.flex { .flex {
height: 100%; height: 100%;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */ display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */ display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */ display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
} }
.flex-left { .flex-left {
width: 178px; width: 178px;
background-color: #1a2236; background-color: #1a2236;
height: 100%; height: 100%;
} }
.flex-right { .flex-right {
padding: 0 20px 20px; padding: 0 20px 20px;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: auto; -webkit-box-flex: auto;
-ms-flex: auto; -ms-flex: auto;
-webkit-flex: auto; -webkit-flex: auto;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.flex-right-box{ .flex-right-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.ces-main{ .ces-main {
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
.v-modal{ .v-modal {
background: #000a2b!important; background: #000a2b !important;
} }
.drawer600{ .drawer600 {
width: 600px!important; width: 600px !important;
} }
.drawer620{ .drawer620 {
width: 620px!important; width: 620px !important;
} }
.drawer1202{ .drawer1202 {
width: 1202px!important; 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{ .el-form-item.is-required:not(.is-no-asterisk)
content:"" .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的样式 */ /* 设置switch的样式 */
.switchStyle1 .el-switch__label { .switchStyle1 .el-switch__label {
...@@ -338,7 +350,7 @@ width: 620px!important; ...@@ -338,7 +350,7 @@ width: 620px!important;
/*关闭时文字位置设置*/ /*关闭时文字位置设置*/
.switchStyle1 .el-switch__label--left { .switchStyle1 .el-switch__label--left {
z-index: 1; z-index: 1;
left: 28px; left: 28px;
top: 1px; top: 1px;
} }
.switchStyle1 .el-switch__label.is-active { .switchStyle1 .el-switch__label.is-active {
...@@ -347,8 +359,8 @@ width: 620px!important; ...@@ -347,8 +359,8 @@ width: 620px!important;
.switchStyle1.el-switch .el-switch__core, .switchStyle1.el-switch .el-switch__core,
.switchStyle1.el-switch .el-switch__label { .switchStyle1.el-switch .el-switch__label {
width: 62px !important; width: 62px !important;
height: 28px!important; height: 28px !important;
border-radius: 28px!important; border-radius: 28px !important;
} }
.switchStyle1 .el-switch__core { .switchStyle1 .el-switch__core {
background: #f8f9fd !important; background: #f8f9fd !important;
...@@ -372,7 +384,7 @@ width: 620px!important; ...@@ -372,7 +384,7 @@ width: 620px!important;
right: 0; right: 0;
top: 2.1px; top: 2.1px;
} }
.switchStyle1.el-switch.is-checked .el-switch__core::after{ .switchStyle1.el-switch.is-checked .el-switch__core::after {
margin-left: -25px; margin-left: -25px;
} }
.switchStyle1 .el-switch__label * { .switchStyle1 .el-switch__label * {
...@@ -412,7 +424,8 @@ width: 620px!important; ...@@ -412,7 +424,8 @@ width: 620px!important;
.el-input__inner { .el-input__inner {
border-radius: 8px; border-radius: 8px;
} }
.el-input-group__append, .el-input-group__prepend { .el-input-group__append,
.el-input-group__prepend {
border-radius: 8px; border-radius: 8px;
} }
.el-button { .el-button {
...@@ -454,10 +467,10 @@ width: 620px!important; ...@@ -454,10 +467,10 @@ width: 620px!important;
.el-scrollbar { .el-scrollbar {
border-radius: 8px; border-radius: 8px;
} }
.el-popper[x-placement^=bottom] .popper__arrow::after { .el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.el-popper[x-placement^=top] .popper__arrow::after { .el-popper[x-placement^="top"] .popper__arrow::after {
border-top-color: transparent; border-top-color: transparent;
} }
/* 单选激活样式 */ /* 单选激活样式 */
...@@ -465,13 +478,13 @@ width: 620px!important; ...@@ -465,13 +478,13 @@ width: 620px!important;
border-color: #838383; border-color: #838383;
background-color: #fff; background-color: #fff;
} }
.el-radio__input.is-checked+.el-radio__label { .el-radio__input.is-checked + .el-radio__label {
color: #1a2236; color: #1a2236;
font-weight: 700; font-weight: 700;
} }
.el-radio__inner::after { .el-radio__inner::after {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
.el-radio__input.is-checked .el-radio__inner::after { .el-radio__input.is-checked .el-radio__inner::after {
background-color: #e56600; background-color: #e56600;
...@@ -508,7 +521,6 @@ width: 620px!important; ...@@ -508,7 +521,6 @@ width: 620px!important;
margin: 0 auto; margin: 0 auto;
} }
/* common */ /* common */
.apass_breadcrumb > .el-breadcrumb { .apass_breadcrumb > .el-breadcrumb {
padding: 15px 0; padding: 15px 0;
...@@ -519,7 +531,10 @@ width: 620px!important; ...@@ -519,7 +531,10 @@ width: 620px!important;
color: #898d9e; color: #898d9e;
line-height: 23px; 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; color: #242c43;
font-weight: normal; font-weight: normal;
} }
...@@ -527,7 +542,7 @@ width: 620px!important; ...@@ -527,7 +542,7 @@ width: 620px!important;
min-width: 90px; min-width: 90px;
color: #0f2683; color: #0f2683;
} }
.apaas_button .el-button--mini, .apaas_button .el-button--mini,
.apaas_button .el-button--mini.is-round { .apaas_button .el-button--mini.is-round {
padding: 10px 15px; padding: 10px 15px;
} }
...@@ -546,8 +561,8 @@ width: 620px!important; ...@@ -546,8 +561,8 @@ width: 620px!important;
background-color: #e15260; background-color: #e15260;
border-color: #e15260; border-color: #e15260;
} }
.apaas_button .el-button.is-disabled, .apaas_button .el-button.is-disabled,
.apaas_button .el-button.is-disabled:focus, .apaas_button .el-button.is-disabled:focus,
.apaas_button .el-button.is-disabled:hover { .apaas_button .el-button.is-disabled:hover {
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -564,11 +579,11 @@ width: 620px!important; ...@@ -564,11 +579,11 @@ width: 620px!important;
.apaas_button .el-button.is-disabled, .apaas_button .el-button.is-disabled,
.apaas_button .el-button.is-disabled:focus, .apaas_button .el-button.is-disabled:focus,
.apaas_button .el-button.is-disabled:hover { .apaas_button .el-button.is-disabled:hover {
color: #C0C4CC; color: #c0c4cc;
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
background-color: #FFF; background-color: #fff;
border-color: #EBEEF5; border-color: #ebeef5;
} }
.apass_table .el-table th > .cell { .apass_table .el-table th > .cell {
...@@ -831,4 +846,10 @@ width: 620px!important; ...@@ -831,4 +846,10 @@ width: 620px!important;
.meassage_detail_dialog .detail_item .full_content .item_content { .meassage_detail_dialog .detail_item .full_content .item_content {
margin: 0; margin: 0;
} }
/* 详情页公共样式 by xuyiming ~~~end */ .no_wrap .apass_table td .cell {
\ No newline at end of file overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
/* 详情页公共样式 by xuyiming ~~~end */
...@@ -22,9 +22,9 @@ export const lang = { ...@@ -22,9 +22,9 @@ export const lang = {
cloud_resources_detail: "云资源详情", cloud_resources_detail: "云资源详情",
// data analysis // data analysis
data_analysis: "数据分析中心", data_analysis: "运营管控中心",
my_service_data_analysis: "我的服务数据分析", my_service_data_analysis: "服务分析",
my_application_data_analysis: "我的应用数据分析", my_application_data_analysis: "应用分析",
// message // message
message: "消息与推送管理", message: "消息与推送管理",
...@@ -33,4 +33,13 @@ export const lang = { ...@@ -33,4 +33,13 @@ export const lang = {
message_alert: "消息提醒管理", message_alert: "消息提醒管理",
banner: "banner管理", banner: "banner管理",
message_template: "消息模板管理", 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 { ...@@ -338,16 +338,24 @@ export default {
_self.moreActionList = []; _self.moreActionList = [];
_self.showMoreActionList = true; _self.showMoreActionList = true;
_self.moreActionList = moreActionList.map((item) => ({ _self.moreActionList = moreActionList
id: row.id, .filter((item) => {
label: item.label, if (item.showRule) {
callback() { return item.showRule(row);
_self.showMoreActionList = false; } else {
_self.moreActionList = []; 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(() => { _self.$nextTick(() => {
let targetInfo = $event.target.getBoundingClientRect(); let targetInfo = $event.target.getBoundingClientRect();
...@@ -499,10 +507,11 @@ export default { ...@@ -499,10 +507,11 @@ export default {
.more_action_list > li:first-child::before { .more_action_list > li:first-child::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -14px; top: -20px;
right: calc(50% - 14px); right: calc(50% - 20px);
width: 28px; width: 40px;
height: 14px; height: 20px;
/* background-color: red; */
} }
.more_action_list > li:first-child::after { .more_action_list > li:first-child::after {
content: ""; content: "";
......
...@@ -20,6 +20,10 @@ export default { ...@@ -20,6 +20,10 @@ export default {
type: String, type: String,
default: () => "", default: () => "",
}, },
stepTitle: {
type: String,
default: "",
},
}, },
data: () => ({}), data: () => ({}),
computed: { computed: {
......
...@@ -25,7 +25,12 @@ ...@@ -25,7 +25,12 @@
</div> </div>
<div class="step_icon" v-else></div> <div class="step_icon" v-else></div>
<div class="step_info"> <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 v-if="item.step < activeStep || done">
已完成 已完成
</span> </span>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:key="'comment_' + index" :key="'comment_' + index"
> >
<div class="comment-left"> <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>
<div class="comment-right"> <div class="comment-right">
<p class="comment-user_name" v-text="item.user_name"></p> <p class="comment-user_name" v-text="item.user_name"></p>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<ul class="comments_list apaas_scroll"> <ul class="comments_list apaas_scroll">
<li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index"> <li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index">
<div class="comment-left"> <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>
<div class="comment-right"> <div class="comment-right">
<p class="comment-base"> <p class="comment-base">
......
...@@ -59,11 +59,21 @@ export default { ...@@ -59,11 +59,21 @@ export default {
{ {
type: "category", type: "category",
axisLabel: { axisLabel: {
interval: 0,
textStyle: { textStyle: {
color: "#0d1847", color: "#0d1847",
fontSize: 12, fontSize: 12,
lineHeight: 20, lineHeight: 20,
}, },
formatter(value) {
let valueTxt = "";
if (value.length > 7) {
valueTxt = value.substring(0, 7 - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
},
}, },
axisTick: { axisTick: {
show: false, show: false,
......
...@@ -32,6 +32,10 @@ export default { ...@@ -32,6 +32,10 @@ export default {
isPercent: { isPercent: {
type: Boolean, type: Boolean,
default: true default: true
},
color: {
type: Array,
default: null
} }
}, },
components: {}, 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"; ...@@ -17,7 +17,7 @@ import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
export default { export default {
props: ["url","datas"], props: ["url","datas",'readOnly'],
data() { data() {
return { return {
aceEditor: null, aceEditor: null,
...@@ -34,7 +34,8 @@ export default { ...@@ -34,7 +34,8 @@ export default {
mode: this.acemodePath, mode: this.acemodePath,
wrap: this.wrap, wrap: this.wrap,
tabSize: 4, tabSize: 4,
highlightActiveLine: false highlightActiveLine: false,
readOnly:this.readOnly?this.readOnly:false
}); });
if (this.url) { if (this.url) {
this.getValue(); 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 @@ ...@@ -24,6 +24,7 @@
:readOnly="readOnly" :readOnly="readOnly"
:data="anotherData" :data="anotherData"
:drag="drag" :drag="drag"
:disabled="disabled"
> >
<div v-if="drag"> <div v-if="drag">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
...@@ -92,6 +93,10 @@ export default { ...@@ -92,6 +93,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
disabled: {
type: Boolean,
default: false,
},
}, },
watch: { watch: {
list(value) { list(value) {
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
</template> </template>
<script> <script>
import helper from "@/services/helper.js";
import screenType from "@/components/recommen/screen-type"; import screenType from "@/components/recommen/screen-type";
import recommenBox from "@/components/recommen/recommen-box"; import recommenBox from "@/components/recommen/recommen-box";
...@@ -119,7 +120,14 @@ export default { ...@@ -119,7 +120,14 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
if (data.success == 1) { 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 { ...@@ -336,6 +336,10 @@ export default {
this.keyword = ""; this.keyword = "";
this.updateTime = ""; this.updateTime = "";
if (this.tpl_types.length > 0) {
this.type = this.tpl_types[0].value;
}
this.getTemplateList(); this.getTemplateList();
}, },
selectTemplate(item) { selectTemplate(item) {
......
...@@ -10,14 +10,12 @@ ...@@ -10,14 +10,12 @@
</el-tabs> </el-tabs>
<div class="list_options"> <div class="list_options">
<div class="button_group"> <div class="button_group">
<el-button <span
size="mini"
v-for="(item, index) in buttonList" v-for="(item, index) in buttonList"
:key="'btn' + index" :key="'btn' + index"
:class="item.state ? 'btn_actice':''" :class="item.state ? 'btn_default btn_actice':'btn_default'"
round
@click="btnClick(index)" @click="btnClick(index)"
>{{ item.name }}</el-button> >{{ item.name }}</span>
</div> </div>
<div class="input_right"> <div class="input_right">
<el-input <el-input
...@@ -224,6 +222,22 @@ export default { ...@@ -224,6 +222,22 @@ export default {
.button_group { .button_group {
padding: 17px 10px; 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 { .btn_actice {
background-color: #515fe7; background-color: #515fe7;
color: #fff; color: #fff;
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<span <span
class="info_fix" class="info_fix"
v-if="data.fixed_process" v-if="data.fixed_process"
@click="goto_page(data.fixedurl)" @click="goto_page(data.fixed_url)"
> >
我要编辑 我要编辑
</span> </span>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
> >
我要修改 我要修改
</span> </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>
<span class="right undersell1" v-if="data.undeploy" @click="subevent(9)"> <span class="right undersell1" v-if="data.undeploy" @click="subevent(9)">
...@@ -168,6 +168,14 @@ export default { ...@@ -168,6 +168,14 @@ export default {
this.$emit("debuggerfunc"); this.$emit("debuggerfunc");
} else if (val == 6) { } else if (val == 6) {
this.$emit("applymy"); 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) { goto_page(url) {
...@@ -276,6 +284,9 @@ export default { ...@@ -276,6 +284,9 @@ export default {
background-color: #e6ebfe; background-color: #e6ebfe;
margin-left: 10px; margin-left: 10px;
} }
.undersell2{
margin-left: 10px;
}
.undermy { .undermy {
background-color: #515fe7; background-color: #515fe7;
color: #e6ebfe; color: #e6ebfe;
......
...@@ -170,6 +170,7 @@ export default { ...@@ -170,6 +170,7 @@ export default {
background-color: #f9fafc; background-color: #f9fafc;
padding: 18px; padding: 18px;
margin-top: 15px; margin-top: 15px;
border-radius: 8px;
} }
.application_base_info:not(:last-child) { .application_base_info:not(:last-child) {
margin-right: 50px; margin-right: 50px;
...@@ -222,17 +223,12 @@ export default { ...@@ -222,17 +223,12 @@ export default {
width: 220px; width: 220px;
margin-left: 20px; margin-left: 20px;
} }
.application_info .el-button--primary { </style>
<style>
.application_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7; background-color: #515fe7;
border-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> </style>
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<img :src="data.cover" width="100%" /> <img :src="data.cover" width="100%" />
<map-view <map-view
v-if="data.type === 'Map Service'" v-if="data.type === 'Map Service'"
:id="data.portal_id" :id="data.portal_id"
></map-view> ></map-view>
</div> </div>
<div class="main_container-right"> <div class="main_container-right">
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
></el-input-number> ></el-input-number>
</div> </div>
</div> </div>
<div class="apaas_button commodity_action"> <div class=" commodity_action">
<el-button <el-button
type="warning" type="warning"
plain plain
...@@ -339,12 +339,13 @@ export default { ...@@ -339,12 +339,13 @@ export default {
vertical-align: middle; vertical-align: middle;
} }
.service_title > .service_access_info > img { .service_title > .service_access_info > img {
width: 15px; width: 19px;
margin-right: 5px; margin-right: 5px;
} }
.service_base_info { .service_base_info {
padding: 18px; padding: 18px;
background-color: #f9fafc; background-color: #f9fafc;
border-radius: 8px;
} }
.service_base_info > li, .service_base_info > li,
.commodity_information { .commodity_information {
...@@ -398,3 +399,11 @@ export default { ...@@ -398,3 +399,11 @@ export default {
margin-left: 20px; margin-left: 20px;
} }
</style> </style>
<style>
.service_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7;
border-color: #515fe7;
}
</style>
...@@ -329,7 +329,6 @@ export default { ...@@ -329,7 +329,6 @@ export default {
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
this.filterLists[i + 1].name = val[i]; this.filterLists[i + 1].name = val[i];
} }
console.log(this.filterLists);
}, },
}, },
}, },
......
...@@ -5,10 +5,7 @@ ...@@ -5,10 +5,7 @@
v-for="(item, index) in data" v-for="(item, index) in data"
:key="'detail_' + index" :key="'detail_' + index"
> >
<h3 <h3 class="detail-title" v-text="item.name + ':'"></h3>
class="detail-title"
v-text="item.name + ':'"
></h3>
<service-steps <service-steps
v-if="item.type == 'step'" v-if="item.type == 'step'"
...@@ -24,6 +21,10 @@ ...@@ -24,6 +21,10 @@
class="detail-code" class="detail-code"
v-html="item.value" v-html="item.value"
></div> ></div>
<workflows-view
v-else-if="item.type == 'workflows'"
:id="item.value"
></workflows-view>
<el-table <el-table
v-else-if="item.type == 'table'" v-else-if="item.type == 'table'"
class="detail-table" class="detail-table"
...@@ -66,10 +67,12 @@ ...@@ -66,10 +67,12 @@
<script> <script>
import serviceSteps from "@/components/service-tabs/service-steps"; import serviceSteps from "@/components/service-tabs/service-steps";
import workflowsView from "@/components/work-flow/workflows-view";
export default { export default {
components: { components: {
serviceSteps, serviceSteps,
workflowsView,
}, },
props: { props: {
data: { data: {
......
...@@ -160,6 +160,7 @@ export default { ...@@ -160,6 +160,7 @@ export default {
} }
.service_info_tab .el-table { .service_info_tab .el-table {
width: 100%; width: 100%;
text-align: left;
} }
.service_info_tab .el-table__row:nth-child(odd) td { .service_info_tab .el-table__row:nth-child(odd) td {
background-color: #f8f9fd; background-color: #f8f9fd;
......
...@@ -137,6 +137,11 @@ export default { ...@@ -137,6 +137,11 @@ export default {
}; };
</script> </script>
<style>
.outborder .system .el-input__prefix,.outborder .system .el-input__suffix{
left: auto;
}
</style>
<style scoped> <style scoped>
.outborder { .outborder {
border-bottom: 2px solid rgba(244, 247, 252, 1); border-bottom: 2px solid rgba(244, 247, 252, 1);
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<div class="shopping_cell_specification_edit"> <div class="shopping_cell_specification_edit">
<el-popover <el-popover
placement="right-start" placement="right-start"
width="280" width="300"
v-model="visible" v-model="visible"
@show="setSpecificationPop" @show="setSpecificationPop"
> >
...@@ -70,7 +70,14 @@ ...@@ -70,7 +70,14 @@
:class="specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'" :class="specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size="mini" size="mini"
@click="changeSpecification(item.id)" @click="changeSpecification(item.id)"
>{{ index + 1 + ". " + item.des }}</el-button> >
{{ index + 1 + ". " + "访问次数:" +
item.pv +
"/日," +
"访问量:" +
item.count +
"/日" }}
</el-button>
</div> </div>
<div class="no_option" v-else>暂无规格</div> <div class="no_option" v-else>暂无规格</div>
</div> </div>
...@@ -151,25 +158,26 @@ export default { ...@@ -151,25 +158,26 @@ export default {
cellIndex: { type: Number, default: null }, cellIndex: { type: Number, default: null },
cellCheck: { cellCheck: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
readOnly: { readOnly: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
cellIsService: { cellIsService: {
type: Boolean type: Boolean,
} },
}, },
watch: { watch: {
cellCheck: function(val) { cellCheck: function (val) {
this.checkedItem = val; this.checkedItem = val;
}, },
cellItem: { cellItem: {
immediate: true, // 这句重要 immediate: true, // 这句重要
handler(val) { handler(val) {
this.cellItems = 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.cellIsService) {
if (this.cellItems.service.buy_method == 1) { if (this.cellItems.service.buy_method == 1) {
this.specificationApplicationBtns = [{ id: 1, value: "按月" }]; this.specificationApplicationBtns = [{ id: 1, value: "按月" }];
...@@ -178,12 +186,12 @@ export default { ...@@ -178,12 +186,12 @@ export default {
} else { } else {
this.specificationApplicationBtns = [ this.specificationApplicationBtns = [
{ id: 1, value: "按月" }, { id: 1, value: "按月" },
{ id: 2, value: "按年" } { id: 2, value: "按年" },
]; ];
} }
} }
} },
} },
}, },
data: () => ({ data: () => ({
cellItems: {}, cellItems: {},
...@@ -195,12 +203,12 @@ export default { ...@@ -195,12 +203,12 @@ export default {
specificationApplicationPop: 1, specificationApplicationPop: 1,
appSpecificationBtns: [ appSpecificationBtns: [
{ id: 1, value: "部署" }, { id: 1, value: "部署" },
{ id: 2, value: "开发" } { id: 2, value: "开发" },
], ],
specificationApplicationBtns: [ specificationApplicationBtns: [
{ id: 1, value: "按月" }, { id: 1, value: "按月" },
{ id: 2, value: "按年" } { id: 2, value: "按年" },
] ],
}), }),
computed: { computed: {
getSpecification() { getSpecification() {
...@@ -211,14 +219,20 @@ export default { ...@@ -211,14 +219,20 @@ export default {
this.cellItems.service.request_spcs_info.length != 0 this.cellItems.service.request_spcs_info.length != 0
) { ) {
let requestArr = this.cellItems.service.request_spcs_info; let requestArr = this.cellItems.service.request_spcs_info;
requestArr.forEach(item => { requestArr.forEach((item) => {
arr.push(item.id); arr.push(item.id);
}); });
} }
let num = arr.indexOf(this.cellItems.spec_id); let num = arr.indexOf(this.cellItems.spec_id);
let specification = ""; let specification = "";
if (num != -1) { 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; return specification;
} else { } else {
...@@ -228,7 +242,7 @@ export default { ...@@ -228,7 +242,7 @@ export default {
return "开发"; return "开发";
} }
} }
} },
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -263,23 +277,23 @@ export default { ...@@ -263,23 +277,23 @@ export default {
changeCellItem() { changeCellItem() {
this.$emit("changeCellMsg", { this.$emit("changeCellMsg", {
index: this.cellIndex, index: this.cellIndex,
data: this.cellItems data: this.cellItems,
}); });
}, },
delCellItem() { delCellItem() {
this.$api.serviceShop this.$api.serviceShop
.delShoppingCart([this.cellItems.id]) .delShoppingCart([this.cellItems.id])
.then(response => { .then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
this.$message({ this.$message({
message: this.cellIsService ? "删除该服务成功" : "删除该应用成功", message: this.cellIsService ? "删除该服务成功" : "删除该应用成功",
type: "success" type: "success",
}); });
this.$emit("updateList"); this.$emit("updateList");
} else { } else {
this.$message({ this.$message({
message: this.cellIsService ? "删除该服务失败" : "删除该应用失败", message: this.cellIsService ? "删除该服务失败" : "删除该应用失败",
type: "error" type: "error",
}); });
} }
}); });
...@@ -290,16 +304,16 @@ export default { ...@@ -290,16 +304,16 @@ export default {
duration: this.cellItems.duration, duration: this.cellItems.duration,
spec_id: this.cellItems.spec_id, spec_id: this.cellItems.spec_id,
duration_method: this.cellItems.duration_method, 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) { if (response.data.success == 1) {
} else { } else {
console.log(response.data.errMsg); console.log(response.data.errMsg);
} }
}); });
} },
} },
}; };
</script> </script>
...@@ -437,6 +451,14 @@ export default { ...@@ -437,6 +451,14 @@ export default {
} }
.shopping_cell_specification_btn { .shopping_cell_specification_btn {
margin: 0 10px 10px; 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 { .shopping_cell_specification_btn.active {
background-color: #515fe7; background-color: #515fe7;
......
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
{{ scope.row[item.prop] }} {{ scope.row[item.prop] }}
</span> </span>
<!-- others --> <!-- others -->
<span v-else-if="item.type === 'click'" style="cursor: pointer;" @click="gotopage(item.url,scope.row[item.prop][item.id])">{{ scope.row[item.prop] }}</span> <span v-else-if="item.type === 'click'" style="cursor: pointer;color: #274fee;" @click="gotopage(item.url,scope.row[item.id])">{{ scope.row[item.prop] }}</span>
<span v-else>{{ scope.row[item.prop] }}</span> <span v-else>{{ scope.row[item.prop] }}</span>
</template> </template>
</el-table-column> </el-table-column>
...@@ -460,7 +460,11 @@ export default { ...@@ -460,7 +460,11 @@ export default {
}); });
}, },
gotopage(url,id){ 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) { deleteLocal(val) {
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<div class="legend_title">拓扑图图例</div> <div class="legend_title">拓扑图图例</div>
<div class="legend_inner"> <div class="legend_inner">
<div class="legend_in_tit">服务类型</div> <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 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> </div>
</div> </div>
...@@ -22,11 +22,18 @@ export default { ...@@ -22,11 +22,18 @@ export default {
default: () => { default: () => {
return { return {
nodes: [], nodes: [],
edges: [] edges: [],
}; };
} },
}, },
namespace: String namespace: String,
},
data: () => {
return {
graph: null,
legendNodes: null,
legendEdges: null,
};
}, },
mounted() {}, mounted() {},
watch: { watch: {
...@@ -34,13 +41,13 @@ export default { ...@@ -34,13 +41,13 @@ export default {
this.getCavData(); this.getCavData();
this.getLegendNodes(); this.getLegendNodes();
this.getLegendEdges(); this.getLegendEdges();
} },
}, },
methods: { methods: {
// shu ju chu li // shu ju chu li
getCavData() { getCavData() {
let self = this; let self = this;
self.datas.nodes.map(node => { self.datas.nodes.map((node) => {
node.id = node.data.id; node.id = node.data.id;
switch (node.data.svcType) { switch (node.data.svcType) {
case "数据服务": case "数据服务":
...@@ -87,12 +94,12 @@ export default { ...@@ -87,12 +94,12 @@ export default {
fontSize: 12, fontSize: 12,
stroke: "#fffef9", stroke: "#fffef9",
lineWidth: 4, 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.id = edge.data.id;
edge.source = edge.data.source; edge.source = edge.data.source;
edge.target = edge.data.target; edge.target = edge.data.target;
...@@ -107,10 +114,10 @@ export default { ...@@ -107,10 +114,10 @@ export default {
lineAppendWidth: 5, lineAppendWidth: 5,
endArrow: { endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径 path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量 d: -2, // 偏移量
}, },
strokeOpacity: 1, strokeOpacity: 1,
cursor: "pointer" cursor: "pointer",
}; };
if (edge.data.traffic.protocol == "tcp") { if (edge.data.traffic.protocol == "tcp") {
// tcp // tcp
...@@ -151,11 +158,12 @@ export default { ...@@ -151,11 +158,12 @@ export default {
self.getCav(); self.getCav();
}, },
getCav() { getCav() {
if (this.graph) this.graph.destroy();
const width = this.$refs.conCav.scrollWidth; const width = this.$refs.conCav.scrollWidth;
const height = this.$refs.conCav.scrollHeight || 500; const height = this.$refs.conCav.scrollHeight || 500;
let self = this; let self = this;
// console.log(self.datas); // console.log(self.datas);
const graph = new G6.Graph({ this.graph = new G6.Graph({
container: "container", container: "container",
width, width,
height, height,
...@@ -165,78 +173,79 @@ export default { ...@@ -165,78 +173,79 @@ export default {
// 流程图布局 // 流程图布局
type: "dagre", type: "dagre",
rankdir: "LR", rankdir: "LR",
nodesep: 12 nodesep: 12,
}, },
modes: { modes: {
default: ["zoom-canvas", "drag-canvas", "drag-node"] default: ["zoom-canvas", "drag-canvas", "drag-node"],
}, },
defaultNode: { defaultNode: {
color: "#5B8FF9", color: "#5B8FF9",
style: { style: {
lineWidth: 2, lineWidth: 2,
fill: "#C6E5FF", fill: "#C6E5FF",
cursor: "pointer" cursor: "pointer",
}, },
labelCfg: { labelCfg: {
style: { style: {
fill: "#f36c21", fill: "#f36c21",
fontSize: 10 fontSize: 10,
}, },
position: "bottom" position: "bottom",
} },
}, },
defaultEdge: { defaultEdge: {
style: { style: {
stroke: "#e2e2e2", stroke: "#e2e2e2",
lineWidth: 1, lineWidth: 1,
lineAppendWidth: 6, lineAppendWidth: 6,
opacity: 1 opacity: 1,
}, },
labelCfg: { labelCfg: {
style: { style: {
fontSize: 10, fontSize: 10,
stroke: "#fffef9", stroke: "#fffef9",
fill: "#595959", fill: "#595959",
lineWidth: 4 lineWidth: 4,
} },
} },
}, },
nodeStateStyles: { nodeStateStyles: {
highlight: { highlight: {
opacity: 1 opacity: 1,
}, },
dark: { dark: {
opacity: 0.2 opacity: 0.2,
} },
}, },
edgeStateStyles: { edgeStateStyles: {
highlight: { highlight: {
opacity: 1 opacity: 1,
}, },
dark: { dark: {
opacity: 0.2 opacity: 0.2,
}, },
click: { 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) {}); this.graph.on("edge:click", function (e) {});
graph.on("node:dblclick", function(e) {}); this.graph.on("node:dblclick", function (e) {});
// 点击画布 // 点击画布
graph.on("canvas:click", function(e) {}); this.graph.on("canvas:click", function (e) {});
graph.data(self.datas); this.graph.data(self.datas);
graph.render(); this.graph.render();
}, },
getLegendNodes() { getLegendNodes() {
if (this.legendNodes) this.legendNodes.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension // legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedNodes.scrollWidth; const width = this.$refs.legendNodes.scrollWidth;
const height = this.$refs.lengedNodes.scrollHeight; const height = this.$refs.legendNodes.scrollHeight;
const legendGraph = new G6.Graph({ this.legendNodes = new G6.Graph({
container: "nodes", container: "nodes",
width: width, width: width,
height: height, height: height,
...@@ -244,16 +253,16 @@ export default { ...@@ -244,16 +253,16 @@ export default {
style: { style: {
fill: "transparent", // 节点填充色 fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色 stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细 lineWidth: 1, // 节点描边粗细
}, },
labelCfg: { labelCfg: {
position: "right", position: "right",
offset: 10, offset: 10,
style: { style: {
fill: "#333" fill: "#333",
} },
} },
} },
}); });
const legendX = 20; const legendX = 20;
const legendBeginY = 20; const legendBeginY = 20;
...@@ -268,7 +277,7 @@ export default { ...@@ -268,7 +277,7 @@ export default {
type: "image", type: "image",
img: require("@/assets/svg/topology_ic_shujufw.svg"), img: require("@/assets/svg/topology_ic_shujufw.svg"),
size: [15, 15], size: [15, 15],
label: "数据服务" label: "数据服务",
}, },
{ {
id: "level2", id: "level2",
...@@ -277,7 +286,7 @@ export default { ...@@ -277,7 +286,7 @@ export default {
type: "image", type: "image",
img: require("@/assets/svg/topology_ic_shikongfw.svg"), img: require("@/assets/svg/topology_ic_shikongfw.svg"),
size: [15, 15], size: [15, 15],
label: "时空服务" label: "时空服务",
}, },
{ {
id: "level3", id: "level3",
...@@ -286,7 +295,7 @@ export default { ...@@ -286,7 +295,7 @@ export default {
type: "image", type: "image",
img: require("@/assets/svg/topology_ic_shipinfw.svg"), img: require("@/assets/svg/topology_ic_shipinfw.svg"),
size: [15, 15], size: [15, 15],
label: "视频服务" label: "视频服务",
}, },
{ {
id: "level4", id: "level4",
...@@ -295,7 +304,7 @@ export default { ...@@ -295,7 +304,7 @@ export default {
type: "image", type: "image",
img: require("@/assets/svg/topology_ic_ganzhifw.svg"), img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
size: [15, 15], size: [15, 15],
label: "感知服务" label: "感知服务",
}, },
{ {
id: "level5", id: "level5",
...@@ -304,18 +313,19 @@ export default { ...@@ -304,18 +313,19 @@ export default {
type: "image", type: "image",
img: require("@/assets/svg/topology_ic_zonghefw.svg"), img: require("@/assets/svg/topology_ic_zonghefw.svg"),
size: [15, 15], size: [15, 15],
label: "综合应用" label: "综合应用",
} },
] ],
}; };
legendGraph.data(legendData); this.legendNodes.data(legendData);
legendGraph.render(); this.legendNodes.render();
}, },
getLegendEdges() { getLegendEdges() {
if (this.legendEdges) this.legendEdges.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension // legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedEdges.scrollWidth; const width = this.$refs.legendEdges.scrollWidth;
const height = this.$refs.lengedEdges.scrollHeight; const height = this.$refs.legendEdges.scrollHeight;
const legendGraph = new G6.Graph({ this.legendEdges = new G6.Graph({
container: "edges", container: "edges",
width: width, width: width,
height: height, height: height,
...@@ -323,16 +333,16 @@ export default { ...@@ -323,16 +333,16 @@ export default {
style: { style: {
fill: "transparent", // 节点填充色 fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色 stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细 lineWidth: 1, // 节点描边粗细
}, },
labelCfg: { labelCfg: {
position: "right", position: "right",
offset: 10, offset: 10,
style: { style: {
fill: "#333" fill: "#333",
} },
} },
} },
}); });
const legendX = 10; const legendX = 10;
const legendBeginY = 20; const legendBeginY = 20;
...@@ -345,7 +355,7 @@ export default { ...@@ -345,7 +355,7 @@ export default {
x: legendX, x: legendX,
y: legendBeginY, y: legendBeginY,
type: "circle", type: "circle",
size: 1 size: 1,
}, },
// line1 point 1 // line1 point 1
{ {
...@@ -354,7 +364,7 @@ export default { ...@@ -354,7 +364,7 @@ export default {
y: legendBeginY, y: legendBeginY,
label: "正常", label: "正常",
type: "circle", type: "circle",
size: 1 size: 1,
}, },
// line2 point 0 // line2 point 0
{ {
...@@ -362,7 +372,7 @@ export default { ...@@ -362,7 +372,7 @@ export default {
x: legendX, x: legendX,
y: legendBeginY + legendYPadding, y: legendBeginY + legendYPadding,
type: "circle", type: "circle",
size: 1 size: 1,
}, },
// line2 point 1 // line2 point 1
{ {
...@@ -371,8 +381,8 @@ export default { ...@@ -371,8 +381,8 @@ export default {
y: legendBeginY + legendYPadding, y: legendBeginY + legendYPadding,
label: "错误", label: "错误",
type: "circle", type: "circle",
size: 1 size: 1,
} },
], ],
edges: [ edges: [
{ {
...@@ -385,10 +395,10 @@ export default { ...@@ -385,10 +395,10 @@ export default {
lineAppendWidth: 5, lineAppendWidth: 5,
endArrow: { endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径 path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量 d: -2, // 偏移量
}, },
cursor: "pointer" cursor: "pointer",
} },
}, },
{ {
id: "line1", id: "line1",
...@@ -400,17 +410,17 @@ export default { ...@@ -400,17 +410,17 @@ export default {
lineAppendWidth: 5, lineAppendWidth: 5,
endArrow: { endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径 path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量 d: -2, // 偏移量
}, },
cursor: "pointer" cursor: "pointer",
} },
} },
] ],
}; };
legendGraph.data(legendData); this.legendEdges.data(legendData);
legendGraph.render(); this.legendEdges.render();
} },
} },
}; };
</script> </script>
......
<template> <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"> <div class="node-container">
<p class="label_head">节点类型</p> <p class="label_head">节点类型</p>
<p class="label_explanation">请拖拽添加到流程中</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> <div
<span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span> 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>
<div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer"> </div>
<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"> <el-dialog
<template v-slot:node="{meta}"> :visible.sync="dialog_general"
<div :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id"> top="25vh"
<div @click="clickItem(meta)"> width="420px"
{{meta.name}} :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>
</div> </div>
</template> </div>
</super-flow> </div>
<div class="dia_footer">
<el-button class="cancel" @click="interfaceCancel">取消</el-button>
<el-button class="submit" @click="interfaceSubmit">确定</el-button>
</div>
</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> </div>
</template> </template>
<script> <script>
import CesTable from "@/components/table/table-um";
import Codes from "@/components/general/codes";
const drawerType = { const drawerType = {
node: 0, node: 0,
link: 1 link: 1,
}; };
export default { 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() { data() {
return { return {
scale_num: 100, scale_num: 100,
...@@ -68,14 +446,14 @@ export default { ...@@ -68,14 +446,14 @@ export default {
} else { } else {
this.$refs.linkSetting.clearValidate(); this.$refs.linkSetting.clearValidate();
} }
} },
}, },
linkSetting: { linkSetting: {
desc: "" desc: "",
}, },
nodeSetting: { nodeSetting: {
name: "", name: "",
desc: "" desc: "",
}, },
dragConf: { dragConf: {
isDown: false, isDown: false,
...@@ -85,76 +463,161 @@ export default { ...@@ -85,76 +463,161 @@ export default {
clientX: 0, clientX: 0,
clientY: 0, clientY: 0,
ele: null, ele: null,
info: null info: null,
}, },
nodeItemList: [ nodeItemList: [
{ {
label: "开始", label: "普通节点",
value: { value: {
width: 120, width: 120,
height: 40, height: 48,
meta: { meta: {
label: "开始开始开始开始开始", label: "普通节点",
name: "开始开始开始开始开始", name: "普通节点",
type: 0 type: 3,
} },
} },
}, },
{ {
label: "结束", label: "开始",
value: { value: {
width: 120, width: 120,
height: 40, height: 48,
meta: { meta: {
label: "结束", label: "开始",
name: "结束", name: "开始",
type: 1 type: 1,
} },
} },
}, },
{ {
label: "普通节点", label: "结束",
value: { value: {
width: 120, width: 120,
height: 40, height: 48,
meta: { meta: {
label: "普通节点", label: "结束",
name: "普通节点", name: "结束",
type: 2 type: 2,
} },
} },
} },
], ],
nodeParamsList: [],
linkMenu: [ linkMenu: [
[ [
{ {
label: "删除", label: "删除",
selected: link => { selected: (link) => {
console.log(link); console.log(link);
link.remove(); link.remove();
} },
}, },
{ ],
label: "编辑",
selected: link => {
this.drawerConf.open(drawerType.link, link);
}
}
]
], ],
linkBaseStyle: { dialog_general: false,
color: "#666666", // line 颜色 nodeItem: {
hover: "#FF0000", // line hover 的颜色 id: "",
textColor: "#666666", // line 描述文字颜色 name: "",
textHover: "#FF0000", // line 描述文字 hover 颜色 },
font: "14px Arial", // line 描述文字 字体设置 参考 canvas font node_name: "",
dotted: false, // 是否是虚线 show_options_pop: false,
lineDash: [4, 4], // 虚线时生效 dialog_interface: false,
background: "rgba(255,255,255,0.6)" // 描述文字背景色 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() { mounted() {
this.getProcessServiceList();
document.addEventListener("mousemove", this.docMousemove); document.addEventListener("mousemove", this.docMousemove);
document.addEventListener("mouseup", this.docMouseup); document.addEventListener("mouseup", this.docMouseup);
this.$once("hook:beforeDestroy", () => { this.$once("hook:beforeDestroy", () => {
...@@ -164,12 +627,7 @@ export default { ...@@ -164,12 +627,7 @@ export default {
}, },
methods: { methods: {
linkStyle(link) { linkStyle(link) {
return { return {};
// hover: '#FF00FF'
};
},
linkDesc(link) {
return link.meta ? link.meta.desc : "";
}, },
docMousemove({ clientX, clientY }) { docMousemove({ clientX, clientY }) {
const conf = this.dragConf; const conf = this.dragConf;
...@@ -191,7 +649,7 @@ export default { ...@@ -191,7 +649,7 @@ export default {
top, top,
right, right,
bottom, bottom,
left left,
} = this.$refs.flowContainer.getBoundingClientRect(); } = this.$refs.flowContainer.getBoundingClientRect();
// 判断鼠标是否进入 flow container // 判断鼠标是否进入 flow container
if ( if (
...@@ -215,10 +673,51 @@ export default { ...@@ -215,10 +673,51 @@ export default {
clientY - conf.offsetTop 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({ this.$refs.superFlow.addNode({
coordinate, 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; conf.isMove = false;
} }
if (conf.ele) { if (conf.ele) {
...@@ -227,7 +726,6 @@ export default { ...@@ -227,7 +726,6 @@ export default {
} }
}, },
nodeItemMouseDown(evt, info) { nodeItemMouseDown(evt, info) {
info.meta.id = parseInt(Math.random() * 1000 * 1000);
const { clientX, clientY, currentTarget } = evt; const { clientX, clientY, currentTarget } = evt;
const { top, left } = evt.currentTarget.getBoundingClientRect(); const { top, left } = evt.currentTarget.getBoundingClientRect();
const conf = this.dragConf; const conf = this.dragConf;
...@@ -239,7 +737,7 @@ export default { ...@@ -239,7 +737,7 @@ export default {
clientY: clientY, clientY: clientY,
info, info,
ele, ele,
isDown: true isDown: true,
}); });
ele.style.position = "fixed"; ele.style.position = "fixed";
ele.style.margin = "0"; ele.style.margin = "0";
...@@ -247,18 +745,378 @@ export default { ...@@ -247,18 +745,378 @@ export default {
ele.style.left = clientX - conf.offsetLeft + "px"; ele.style.left = clientX - conf.offsetLeft + "px";
this.$el.appendChild(this.dragConf.ele); this.$el.appendChild(this.dragConf.ele);
}, },
clickItem(item) { clickItem(index) {
let item = this.nodeParams(index);
this.nodeItem = item;
console.log(item); console.log(item);
}, },
blurItem() {
this.nodeItem = {
id: "",
};
console.log(this.nodeItem);
},
getData() { 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> </script>
<style lang="less"> <style lang="less" scoped>
.link-base-style-form { .link-base-style-form {
.el-form-item { .el-form-item {
margin-bottom: 12px; margin-bottom: 12px;
...@@ -269,117 +1127,514 @@ export default { ...@@ -269,117 +1127,514 @@ export default {
.super-flow-demo1 { .super-flow-demo1 {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
height: 800px; height: 100%;
background-color: #f5f5f5; background-color: #fff;
@list-width: 200px; @list-width: 160px;
position: relative; position: relative;
> .node-container { > .flow-container {
width: @list-width; width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
.flow_options {
width: 84px;
padding-bottom: 30px;
background-color: #f8f9fd;
border-radius: 42px;
position: absolute; position: absolute;
z-index: 2; top: 10px;
left: 0; right: 0;
height: 400px; 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; text-align: center;
background-color: #ffffff; background-color: #f8f9fd;
border-radius: 8px;
margin-top: 20px;
.label_head { .label_head {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 14px;
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0 15px;
color: #242c43;
} }
.label_explanation { .label_explanation {
font-size: 16px; font-size: 14px;
text-align: center; text-align: center;
padding-bottom: 5px; color: #8890a7;
} }
} }
> .flow-container { }
width: 100%; .general_settings {
float: left; font-size: 14px;
height: 100%; text-align: left;
overflow: hidden; .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 { .super-flow__node {
box-shadow: none;
border: none; border: none;
background-color: transparent; background-color: transparent;
border-radius: 8px; border-radius: 8px;
&:focus { font-size: 16px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8); /deep/ .node_span {
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.flow-node-begin { .flow-node-begin {
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 36px; line-height: 42px;
padding: 0 6px; padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px; border-radius: 8px;
border: 2px solid #444; border: solid 3px #109e93;
background-color: #25bdb1;
color: #ffffff;
} }
.flow-node-end { .flow-node-end {
width: 100%; width: 100%;
line-height: 36px; height: 100%;
line-height: 42px;
padding: 0 6px; padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px; border-radius: 8px;
border: 2px solid #f80; background-color: #f78181;
border: solid 3px #e86262;
color: #ffffff;
} }
.flow-node-default { .flow-node-default {
width: 100%; 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; padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px; 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 { .super-flow__menu-container .super-flow__menu {
@node-item-height: 30px;
font-size: 14px;
display: inline-block;
height: @node-item-height;
width: 120px; 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> .super-flow-demo1 .el-dialog__wrapper {
padding-left: 180px;
<style scoped>
.scale60 {
transform: scale(0.6, 0.6);
} }
.scale70 { .super-flow-demo1 .el-dialog__body {
transform: scale(0.7, 0.7); padding: 20px;
} }
.scale80 { .super-flow-demo1 >  .v-modal {
transform: scale(0.8, 0.8); position: absolute;
border-radius: 8px;
width: calc(100% + 40px);
height: calc(100% + 230px);
top: -160px;
left: -20px;
} }
.scale90 { .fwcs_fwdz_inner .el-select .el-input {
transform: scale(0.9, 0.9); width: 130px;
background-color: #0f2683;
color: #ffffff;
border-radius: 8px 0px 0px 8px;
} }
.scale100 { .interface_plugin .el-tabs__header .el-tabs__item:hover {
transform: scale(1, 1); 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> </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 { ...@@ -143,7 +143,7 @@ export default {
rules: { rules: {
menu_name: [ menu_name: [
{ required: true, message: "请填写菜单名称", trigger: "blur" }, { required: true, message: "请填写菜单名称", trigger: "blur" },
{ min: 0, max: 8, message: "菜单名称不超过8", trigger: "blur" } { min: 0, max: 16, message: "菜单名称不超过16", trigger: "blur" }
], ],
visit_url: [ visit_url: [
{ required: true, message: "请填写菜单访问地址", trigger: "blur" }, { required: true, message: "请填写菜单访问地址", trigger: "blur" },
......
...@@ -206,12 +206,12 @@ export default { ...@@ -206,12 +206,12 @@ export default {
}, 1000); }, 1000);
}; };
var user_name_pass = (rule, value, callback) => { var user_name_pass = (rule, value, callback) => {
var reg = /^[a-z0-9]+$/; var reg = /^[a-zA-Z0-9|\-|_|\.]+$/;
setTimeout(() => { setTimeout(() => {
if (reg.test(value)) { if (reg.test(value)) {
callback(); callback();
} else { } else {
callback(new Error("只支持小写字母、数字")); callback(new Error("只支持字母、数字、-、_、."));
} }
}, 100); }, 100);
}; };
......
<template> <template>
<div class="fwgl_container"> <div class="fwgl_container">
<side-nav-bar <sideNavBar
title="数据分析中心" v-if="is_admin == 3 || is_admin == 4 || is_admin == 1"
title="运营管控中心"
imgSrc="tool_fuwu" imgSrc="tool_fuwu"
:nav-list="navList" :nav-list="navList"
:title-path="navList[0] && navList[0].path" :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"> <div class="main_container">
<router-view :key="'type_' + $route.params.type"></router-view> <router-view :key="'type_' + $route.params.type"></router-view>
</div> </div>
...@@ -14,53 +22,88 @@ ...@@ -14,53 +22,88 @@
<script> <script>
import sideNavBar from "@/components/side-nav-bar"; import sideNavBar from "@/components/side-nav-bar";
import sideNavBarClass from "@/components/general/side-nav-bar-class";
export default { export default {
components: { components: {
sideNavBar sideNavBar,
sideNavBarClass,
}, },
data: () => ({ data: () => ({
userNav: [ userNav: [
{ {
name: "我的服务数据分析", name: "服务分析",
path: `/data_analysis/my_service` path: `/data_analysis/my_service`,
}, },
{ {
name: "我的应用数据分析", name: "应用分析",
path: `/data_analysis/my_application` path: `/data_analysis/my_application`,
}, },
],
userNav1: [
{ {
name: "组织服务数据分析", name: "运营分析",
path: `/data_analysis/org_service` path: `/data_analysis/org_service`,
child: [
{
name: "服务分析",
path: `/data_analysis/org_service`,
},
{
name: "应用分析",
path: `/data_analysis/org_application`,
},
],
}, },
{ {
name: "组织应用数据分析", name: "运行管控",
path: `/data_analysis/org_application` path: `/data_analysis/operation_overview`,
child: [
{
name: "运行概况",
path: `/data_analysis/operation_overview`,
},
{
name: "服务管控",
path: `/data_analysis/service_control`,
},
],
}, },
],
userNav2: [
{ {
name: "运行概况-组织", name: "服务分析",
path: `/data_analysis/operation_overview` path: `/data_analysis/super_service`,
}, },
{ {
name: "服务管控-组织", name: "应用分析",
path: `/data_analysis/service_control` path: `/data_analysis/super_application`,
} },
], ],
navList: [] navList: [],
is_admin: 0,
}), }),
watch: { watch: {
"$route.fullPath"(path) { // "$route.fullPath"(path) {
this.initNavList(); // this.initNavList();
} // },
}, },
methods: { methods: {
initNavList() { 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() { mounted() {
this.initNavList(); this.initNavList();
} },
}; };
</script> </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 { ...@@ -16,7 +16,8 @@ export default {
'/intelligent_drawing', '/intelligent_drawing',
'/intelligent_details', '/intelligent_details',
'/intelligent_appbuilder', '/intelligent_appbuilder',
'/search_engine' '/search_engine',
'/technical_support'
] ]
}), }),
created(){ created(){
......
...@@ -93,6 +93,7 @@ ...@@ -93,6 +93,7 @@
@getNewList="getNewList" @getNewList="getNewList"
ref="servicepic" ref="servicepic"
directory="manage" directory="manage"
:disabled="disabled"
></upload-file> ></upload-file>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -129,13 +130,43 @@ var user_name_pass = (rule, value, callback) => { ...@@ -129,13 +130,43 @@ var user_name_pass = (rule, value, callback) => {
} }
}, 100); }, 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 helper from "@/services/helper.js";
import uploadFile from "@/components/general/upload_file"; import uploadFile from "@/components/general/upload_file";
export default { export default {
components: { components: {
uploadFile, 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:详情 pageType: 0, // 0:新增,1:编辑,2:详情
detail: { detail: {
name: "", name: "",
...@@ -176,6 +207,10 @@ export default { ...@@ -176,6 +207,10 @@ export default {
message: "请输入排序", message: "请输入排序",
trigger: "blur", trigger: "blur",
}, },
{
validator: rank_rule,
trigger: 'blur'
}
], ],
up_time: [ up_time: [
{ {
...@@ -183,6 +218,10 @@ export default { ...@@ -183,6 +218,10 @@ export default {
message: "请选择上架时间", message: "请选择上架时间",
trigger: "change", trigger: "change",
}, },
{
validator:validateup,
trigger: "change",
},
], ],
fileList: [ fileList: [
{ {
...@@ -197,6 +236,10 @@ export default { ...@@ -197,6 +236,10 @@ export default {
message: "请选择下架时间", message: "请选择下架时间",
trigger: "change", trigger: "change",
}, },
{
validator:validatedown,
trigger: "change",
},
], ],
url: [], url: [],
}, },
...@@ -211,7 +254,8 @@ export default { ...@@ -211,7 +254,8 @@ export default {
}, },
], ],
submitLoading: false, submitLoading: false,
}), }
},
computed: { computed: {
pageName() { pageName() {
return ["新增", "编辑", "详情"][this.pageType]; return ["新增", "编辑", "详情"][this.pageType];
...@@ -241,6 +285,7 @@ export default { ...@@ -241,6 +285,7 @@ export default {
this.detail.fileList = val[0].url; this.detail.fileList = val[0].url;
this.detail.size = val[0].size; this.detail.size = val[0].size;
console.log(this.detail.fileList); console.log(this.detail.fileList);
this.$refs.detail_form.validateField('fileList')
}, },
getDetail() { getDetail() {
this.$http this.$http
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="list_container"> <div class="list_container">
<apass-list <apass-list
ref="list" ref="list"
class="no_wrap"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-total="listTotal" :list-total="listTotal"
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="list_container"> <div class="list_container">
<apass-list <apass-list
ref="list" ref="list"
class="no_wrap"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-total="listTotal" :list-total="listTotal"
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="list_container"> <div class="list_container">
<apass-list <apass-list
ref="list" ref="list"
class="no_wrap"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-total="listTotal" :list-total="listTotal"
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="list_container"> <div class="list_container">
<apass-list <apass-list
ref="list" ref="list"
class="no_wrap"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-total="listTotal" :list-total="listTotal"
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="list_container"> <div class="list_container">
<apass-list <apass-list
ref="list" ref="list"
class="no_wrap"
:list-header="listHeader" :list-header="listHeader"
:list-data="listData" :list-data="listData"
:list-total="listTotal" :list-total="listTotal"
......
...@@ -5,7 +5,32 @@ ...@@ -5,7 +5,32 @@
<service-shop-menu></service-shop-menu> <service-shop-menu></service-shop-menu>
</el-aside> </el-aside>
<el-main> <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-main>
</el-container> </el-container>
</div> </div>
...@@ -14,16 +39,18 @@ ...@@ -14,16 +39,18 @@
<script> <script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu"; import ServiceShopMenu from "@/components/service-list/service_shop_menu";
import ServiceList from "@/components/service-list/service_list"; import ServiceList from "@/components/service-list/service_list";
import BlockRadius from "@/components/general/block-radius";
export default { export default {
components: { components: {
ServiceShopMenu, ServiceShopMenu,
ServiceList ServiceList,
BlockRadius,
}, },
data: () => ({ data: () => ({
urlFilter: "", urlFilter: "",
url: "", url: "",
name: "", name: "",
filterNames: [] filterNames: [],
}), }),
mounted() { mounted() {
this.getVal(this.$route.path); this.getVal(this.$route.path);
...@@ -58,7 +85,7 @@ export default { ...@@ -58,7 +85,7 @@ export default {
this.filterNames = []; this.filterNames = [];
break; break;
case "comprehensive_app_list": case "comprehensive_app_list":
this.name = "综合应用"; this.name = "融合服务";
this.urlFilter = "21"; this.urlFilter = "21";
this.url = "/shop/zhfwDetail"; this.url = "/shop/zhfwDetail";
this.filterNames = ["服务类型", "服务领域", "服务来源组织"]; this.filterNames = ["服务类型", "服务领域", "服务来源组织"];
...@@ -76,16 +103,39 @@ export default { ...@@ -76,16 +103,39 @@ export default {
this.filterNames = []; this.filterNames = [];
break; break;
} }
} },
}, },
watch: { watch: {
"$route.path": { "$route.path": {
handler(val) { handler(val) {
this.getVal(val); this.getVal(val);
} },
} },
} },
}; };
</script> </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> </style>
\ No newline at end of file
...@@ -120,7 +120,6 @@ export default { ...@@ -120,7 +120,6 @@ export default {
{ {
prop: "name", prop: "name",
label: "字段编码", label: "字段编码",
align: "center",
width: 240, width: 240,
}, },
{ {
...@@ -163,7 +162,6 @@ export default { ...@@ -163,7 +162,6 @@ export default {
{ {
prop: "name", prop: "name",
label: "字段编码", label: "字段编码",
align: "center",
width: 240, width: 240,
}, },
{ {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item> <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/comprehensive_app_list/11"> <el-breadcrumb-item to="/shop/comprehensive_app_list/11">
综合应用 融合服务
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item> <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -38,11 +38,6 @@ export default { ...@@ -38,11 +38,6 @@ export default {
providerData: null, providerData: null,
commentsData: null, commentsData: null,
}), }),
computed: {
id() {
return this.$route.params.id;
},
},
computed: { computed: {
id() { id() {
return this.$route.params.id; return this.$route.params.id;
...@@ -93,7 +88,6 @@ export default { ...@@ -93,7 +88,6 @@ export default {
descript: datas.descript, descript: datas.descript,
serviceRequestSpcs: specificationData, serviceRequestSpcs: specificationData,
}; };
this.detailData = [ this.detailData = [
{ {
name: "获取流程", name: "获取流程",
...@@ -136,6 +130,13 @@ export default { ...@@ -136,6 +130,13 @@ export default {
}, },
}, */ }, */
]; ];
if (datas.workflows_id) {
this.detailData.push({
name: "流程详情",
type: "workflows",
value: datas.workflows_id,
});
}
this.specificationData = specificationData; this.specificationData = specificationData;
this.providerData = { this.providerData = {
organization_name: datas.organization_name, organization_name: datas.organization_name,
...@@ -150,7 +151,7 @@ export default { ...@@ -150,7 +151,7 @@ export default {
}); });
}, },
}, },
mounted() { created() {
this.init(); 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 { ...@@ -533,6 +533,10 @@ export default {
this.step2Loading = false; this.step2Loading = false;
}, },
step2Action() { step2Action() {
if (this.step2Loading) {
return;
}
this.$refs.deploy_info_form.validate((valid) => { this.$refs.deploy_info_form.validate((valid) => {
if (valid) { if (valid) {
this.step2Loading = true; this.step2Loading = true;
...@@ -612,6 +616,10 @@ export default { ...@@ -612,6 +616,10 @@ export default {
this.image_info.file = ""; this.image_info.file = "";
}, },
addImage() { addImage() {
if (this.addImageLoading) {
return;
}
this.$refs.image_info_form.validate((valid) => { this.$refs.image_info_form.validate((valid) => {
if (valid) { if (valid) {
this.addImageLoading = true; this.addImageLoading = true;
......
...@@ -39,7 +39,12 @@ export default { ...@@ -39,7 +39,12 @@ export default {
}, },
}, },
mounted() { mounted() {
window.addEventListener('message',event =>{ this.$nextTick(() => {
window.addEventListener('message',this.postmassageevt);
})
},
methods: {
postmassageevt(event){
let data = event.data; let data = event.data;
// App Builder发布服务 // App Builder发布服务
if (data.cmd == 'appbuildermsg'){ if (data.cmd == 'appbuildermsg'){
...@@ -47,9 +52,11 @@ export default { ...@@ -47,9 +52,11 @@ export default {
this.$store.commit("setAppBuilderParams", data.params); this.$store.commit("setAppBuilderParams", data.params);
this.$router.push(`/fwzc/fwcs?map=4`); this.$router.push(`/fwzc/fwcs?map=4`);
} }
}) }
}, },
methods: {}, destroyed () {
window.removeEventListener('message',this.postmassageevt);
}
}; };
</script> </script>
......
...@@ -32,19 +32,37 @@ export default { ...@@ -32,19 +32,37 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener('message',event =>{ window.addEventListener('message',this.postmassageevt)
let data = event.data;
if (data.cmd == 'mapdetailtoview'){
console.log(data);
this.$store.commit("setZnztDetailsParams", data.params);
this.$router.push('/intelligent_drawing')
}
})
}) })
}, },
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 () { destroyed () {
// window.removeEventListener('message') window.removeEventListener('message',this.postmassageevt)
} }
}; };
......
...@@ -2,15 +2,16 @@ ...@@ -2,15 +2,16 @@
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title">在线组件工具 / 流程设计 / 流程管理 / <span>详情</span></p> <p class="now_page_title">在线组件工具 / 流程设计 / 流程管理 / <span>详情</span></p>
<div class="info_contain"> <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_box">
<div class="type_title"> <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 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>
<div class="type_box_select"> <div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:servicead_arr"> <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> <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> <!-- <div slot="process">流程</div> -->
<workflows-view slot="process" :id="workflows_id" :hide-detail="true"></workflows-view>
<div slot="count"> <div slot="count">
<div class="charts"> <div class="charts">
<div class="charts_box"> <div class="charts_box">
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/shop_ic_jierujg.png" alt=""> <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/shop_ic_jierujg.png" alt="">
<div style="float:right;"> <div style="float:right;">
<p>流程实例总数</p> <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> </div>
</div> </div>
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt=""> <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
<div style="float:right;margin-right:40px;"> <div style="float:right;margin-right:40px;">
<p>流程平均耗时</p> <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> </div>
</div> </div>
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
<img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt=""> <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
<div style="float:right;"> <div style="float:right;">
<p>流程超时率</p> <p>流程超时率</p>
<p><span>5</span><span>%</span></p> <p><span>{{all_count.timeout_rate}}</span><span>%</span></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -64,6 +65,7 @@ ...@@ -64,6 +65,7 @@
class="block-radius-content" class="block-radius-content"
:options="toplistData" :options="toplistData"
:target-value="toplistTargetValue" :target-value="toplistTargetValue"
unit="min"
></toplist> ></toplist>
</block-radius> </block-radius>
</div> </div>
...@@ -74,11 +76,21 @@ ...@@ -74,11 +76,21 @@
</div> </div>
</div> </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> </info-list>
</div> </div>
</div> </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> </div>
</template> </template>
...@@ -89,8 +101,10 @@ import infoList from '@/components/infoList' ...@@ -89,8 +101,10 @@ import infoList from '@/components/infoList'
import tableUm from '@/components/table/table-um' import tableUm from '@/components/table/table-um'
import BlockRadius from "@/components/general/block-radius"; import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart"; 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 BarChart from "@/components/e-charts/bar-chart";
import workflowsView from "@/components/work-flow/workflows-view";
import apassDialog from "@/components/apass-dialog";
export default { export default {
components: { components: {
serviceHeader, serviceHeader,
...@@ -99,7 +113,9 @@ export default { ...@@ -99,7 +113,9 @@ export default {
BlockRadius, BlockRadius,
lineChart, lineChart,
Toplist, Toplist,
BarChart BarChart,
workflowsView,
apassDialog
}, },
data(){ data(){
return{ return{
...@@ -114,21 +130,39 @@ export default { ...@@ -114,21 +130,39 @@ export default {
unpublic:false, unpublic:false,
undeploy:false, undeploy:false,
deploy:false, deploy:false,
fixed_url:'/', fixed_url:'/progress/designer/design_edit/',
url:'' url:''
}, },
workflows_id:'',
all_count: {
        "total_instances": 0, //流程实例总数
        "timeout_rate": 0,//流程超时率
        "avg_time": 0 // 流程平均耗时
    },
dialogInfo: {
title: "",
msg: "",
cancelText: "",
submit: null,
sunbmitText: "",
},
toplistData:[], toplistData:[],
toplistTargetValue:0, toplistTargetValue:0,
bar_data_org: {}, bar_data_org: {
legendData: [],
seriesData: [
]
},
state:1, state:1,
now_service:0, now_service:0,
service_arr:[], service_arr:[],
line_data:{ line_data:{
xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'], xAxisData: [],
seriesData: [ seriesData: [
{ {
name: "趋势", name: "趋势",
data: [100,200,500,1000,1800,500] data: []
} }
] ]
}, },
...@@ -151,12 +185,6 @@ export default { ...@@ -151,12 +185,6 @@ export default {
type:'solt', type:'solt',
solt_name:'fw_table' solt_name:'fw_table'
}, },
{
title:'流程概览:',
info:'',
type:'solt',
solt_name:'process'
},
], ],
servicead_arr:[ servicead_arr:[
{ {
...@@ -188,19 +216,166 @@ export default { ...@@ -188,19 +216,166 @@ export default {
align:'center', align:'center',
}, },
], ],
zd_table_arr:[] zd_table_arr:[],
chart_data:'',
} }
}, },
created(){ created(){
this.get_header() this.get_process_detail()
this.getbaseinfo() this.get_table_service()
this.workflows_id = parseInt(this.$route.params.id)
}, },
methods:{ 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(){ get_node_timeout(){
this.$set(this.service_header_arr,'name','长兴综治事故申报处理流程') 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 let state = this.state
//未部署 //未部署
if(state==0){ if(state==0){
...@@ -208,7 +383,7 @@ export default { ...@@ -208,7 +383,7 @@ export default {
this.$set(this.service_header_arr,'second',[]) this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'工作区域', name:'工作区域',
text:'1111' text:data.workarea_name
}) })
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'流程状态', name:'流程状态',
...@@ -216,21 +391,22 @@ export default { ...@@ -216,21 +391,22 @@ export default {
}) })
this.service_header_arr.second.push({ this.service_header_arr.second.push({
name:'修改时间', 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_arr = ['流程基本信息']
this.service_header_arr.fixed_process=true 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.unpublic=false
this.service_header_arr.undeploy=false this.service_header_arr.undeploy=false
this.service_header_arr.deploy=true 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){ }else if(state == 1){
this.$set(this.service_header_arr,'first',[]) this.$set(this.service_header_arr,'first',[])
this.$set(this.service_header_arr,'second',[]) this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'工作区域', name:'工作区域',
text:'1111' text:data.workarea_name
}) })
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'流程状态', name:'流程状态',
...@@ -238,11 +414,11 @@ export default { ...@@ -238,11 +414,11 @@ export default {
}) })
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'部署时间', 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({ this.service_header_arr.second.push({
name:'服务接口地址', name:'服务接口地址',
text:'http://localhost:1z/zdrylx?code=430100000000' text:data.api_url
}) })
this.service_arr = ['流程基本信息','流程运行状态'] this.service_arr = ['流程基本信息','流程运行状态']
this.service_header_arr.fixed_process=true this.service_header_arr.fixed_process=true
...@@ -250,13 +426,14 @@ export default { ...@@ -250,13 +426,14 @@ export default {
this.service_header_arr.unpublic=false this.service_header_arr.unpublic=false
this.service_header_arr.undeploy=true this.service_header_arr.undeploy=true
this.service_header_arr.deploy=false this.service_header_arr.deploy=false
this.service_header_arr.fixed_url=this.service_header_arr.fixed_url+this.$route.params.id
//已发布 //已发布
}else{ }else{
this.$set(this.service_header_arr,'first',[]) this.$set(this.service_header_arr,'first',[])
this.$set(this.service_header_arr,'second',[]) this.$set(this.service_header_arr,'second',[])
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'工作区域', name:'工作区域',
text:'1111' text:data.workarea_name
}) })
this.service_header_arr.first.push({ this.service_header_arr.first.push({
name:'流程状态', name:'流程状态',
...@@ -268,7 +445,7 @@ export default { ...@@ -268,7 +445,7 @@ export default {
}) })
this.service_header_arr.second.push({ this.service_header_arr.second.push({
name:'服务接口地址', name:'服务接口地址',
text:'http://localhost:1z/zdrylx?code=430100000000' text:data.api_url
}) })
this.service_arr = ['流程基本信息','流程运行状态'] this.service_arr = ['流程基本信息','流程运行状态']
this.service_header_arr.fixed_process=true this.service_header_arr.fixed_process=true
...@@ -276,43 +453,90 @@ export default { ...@@ -276,43 +453,90 @@ export default {
this.service_header_arr.unpublic=true this.service_header_arr.unpublic=true
this.service_header_arr.undeploy=false this.service_header_arr.undeploy=false
this.service_header_arr.deploy=false this.service_header_arr.deploy=false
this.service_header_arr.fixed_url=this.service_header_arr.fixed_url+this.$route.params.id
} }
}, },
getbaseinfo(){ getbaseinfo(data){
this.$set(this.list_arr[0],'info','浙江省长兴县综合治理平台事故申报处理流程服务,仅供长兴县使用') this.$set(this.list_arr[0],'info',data.describe)
this.$set(this.list_arr[1],'info','北京比格大数据有限公司') this.$set(this.list_arr[1],'info',data.org_name)
this.$set(this.list_arr[2],'info','2019-02-17 21:09:23') this.$set(this.list_arr[2],'info',data.create_time.split('+')[0].replace('T',' '))
this.zd_table_arr=[ },
{ unpublic(item){
fwmc:'身份验证服务', this.dialogInfo.title = "提示";
time:'2020-11-15 15:20:30' this.dialogInfo.msg = `取消发布后,该流程服务将从服务超市下架,仅部署在工作区域${item.first[0].text}中,是否取消发布流程服务“${item.name}”?`;
}, this.dialogInfo.cancelText = "暂不";
{ this.dialogInfo.sunbmitText = "取消发布";
fwmc:'身份验证服务', this.dialogInfo.submit = () => {
time:'2020-11-15 15:20:30' console.log(`取消发布`);
}, this.$http
{ .delete('/apaas/serviceapp/v3/workflows/cancelPublish?id='+this.$route.params.id)
fwmc:'身份验证服务', .then(response => {
time:'2020-11-15 15:20:30' if(response.data.success){
}, this.$message.success('取消发布成功')
{ this.get_process_detail()
fwmc:'身份验证服务', this.get_table_service()
time:'2020-11-15 15:20:30' }
},
{ })
fwmc:'身份验证服务', };
time:'2020-11-15 15:20:30' this.showDialog();
}, },
{ public1(item){
fwmc:'身份验证服务', this.dialogInfo.title = "提示";
time:'2020-11-15 15:20:30' this.dialogInfo.msg = `发布后流程后,流程将部署到工作区域并上架到服务超市,是否发布该流程?`;
}, this.dialogInfo.cancelText = "取消";
{ this.dialogInfo.sunbmitText = "发布";
fwmc:'身份验证服务', this.dialogInfo.submit = () => {
time:'2020-11-15 15:20:30' 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 @@ ...@@ -31,8 +31,38 @@
ref="dialog" ref="dialog"
:title="dialogInfo.title" :title="dialogInfo.title"
:msg="dialogInfo.msg" :msg="dialogInfo.msg"
:cancel-text="dialogInfo.cancelText"
:submit="dialogInfo.submit" :submit="dialogInfo.submit"
:sunbmit-text="dialogInfo.sunbmitText"
></apass-dialog> ></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> </div>
</template> </template>
...@@ -50,91 +80,92 @@ export default { ...@@ -50,91 +80,92 @@ export default {
filterList: [ filterList: [
{ {
name: "服务领域", name: "服务领域",
prop: "service_domains",
data: [],
}, },
{ {
name: "工作区域", name: "工作区域",
prop: "workareas",
data: [],
}, },
{ {
name: "流程状态", name: "流程状态",
prop: "states",
data: [],
}, },
], ],
listHeader: [], listHeader: [],
listData: [], listData: [],
listTotal: 0, listTotal: 0,
dialogInfo: { dialogInfo: {
title: "",
msg: "", msg: "",
cancelText: "",
submit: null, submit: null,
sunbmitText: "",
}, },
tempFilter: null, tempFilter: null,
copyTempItem: null,
copyTempItem_rules: {
newName: [
{ required: true, message: "请输入流程名称", trigger: "blur" },
{ max: 16, message: "不能超过16个字符", trigger: "blur" },
],
},
}), }),
methods: { methods: {
init(filter) { 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.tempFilter = filter;
this.listTotal = 3; this.$http
this.listData = [ .get("/apaas/serviceapp/v3/workflows/list", { params })
{ .then(({ data }) => {
id: "WF00000001", if (data.success === 1) {
name: "保安资格申请流程", this.listTotal = data.total;
sectors_name: "经济建设", this.listData = data.data;
create_time: "2021-01-01T00:00:00Z", }
state: "0", })
}, .catch((error) => {
{ console.log(error);
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",
},
];
}, },
initFilter() { initFilter() {
Promise.all([ this.$http
this.$http.get("/apaas/service/v3/service/manager/servtype"), .get("/apaas/serviceapp/v3/workflows/searchConditions")
this.$http.get("/apaas/service/v3/service/manager/servarea"), .then(({ data }) => {
]) if (data.success === 1) {
.then((response) => { let datas = data.data;
let filterList = response.map((item) => { this.filterList.forEach((item) => {
return { let filter = datas[item.prop] || [];
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.filterList = [ this.$set(
...filterList, item,
{ "data",
name: "流程状态", filter.map((item) => ({
prop: "state", name: item.name,
data: [ value: item.id,
{ }))
name: "已发布", );
value: 2, });
}, }
{
name: "已部署",
value: 1,
},
{
name: "未部署",
value: 0,
},
],
},
];
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
...@@ -144,7 +175,7 @@ export default { ...@@ -144,7 +175,7 @@ export default {
this.listHeader = [ this.listHeader = [
{ {
label: "流程编号", label: "流程编号",
prop: "id", prop: "workflows_code",
width: 180, width: 180,
}, },
{ {
...@@ -155,7 +186,7 @@ export default { ...@@ -155,7 +186,7 @@ export default {
}, },
{ {
label: "服务领域", label: "服务领域",
prop: "sectors_name", prop: "sector_name",
align: "center", align: "center",
width: 240, width: 240,
}, },
...@@ -177,6 +208,12 @@ export default { ...@@ -177,6 +208,12 @@ export default {
align: "center", align: "center",
width: 180, width: 180,
}, },
{
label: "工作区域",
prop: "workarea_name",
align: "center",
width: 180,
},
{ {
label: "操作", label: "操作",
type: "buttons", type: "buttons",
...@@ -197,45 +234,220 @@ export default { ...@@ -197,45 +234,220 @@ export default {
}, },
], ],
moreActionList: [ moreActionList: [
{
label: "取消发布",
callback: this.cancelPublishItem,
showRule(item) {
return item.state === 2;
},
},
{
label: "部署",
callback: this.deployItem,
showRule(item) {
return item.state === 0;
},
},
{ {
label: "取消部署", label: "取消部署",
callback: this.canceldeployItem, callback: this.cancelDeployItem,
showRule(item) {
return item.state === 1;
},
}, },
{ {
label: "复制", label: "复制",
callback: this.copyItem, callback: this.copyItem,
showRule(item) {
return true;
},
}, },
{ {
label: "删除", label: "删除",
callback: this.deleteItem, callback: this.deleteItem,
showRule(item) {
return item.state !== 2;
},
}, },
], ],
}, },
]; ];
}, },
refresh() { refreshPage() {
this.init(this.tempFilter); this.init(this.tempFilter);
}, },
showDialog() {
this.$refs.dialog.show();
},
copyProcessShow() {
this.$refs.copyProcess.show();
},
copyProcessHide() {
this.$refs.copyProcess.hide();
this.copyTempItem = null;
},
addNewProcess() { addNewProcess() {
console.log("addNewProcess"); this.$router.push("/progress/designer/design");
},
editItem(item) {
this.$router.push(`/progress/designer/design_edit/${item.workflows_id}`);
}, },
detailItem(item) { detailItem(item) {
this.$router.push(`/progress/designer/detail/${item.id}`); this.$router.push(`/progress/designer/detail/${item.workflows_id}`);
}, },
publishItem(item) { 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) { cancelPublishItem(item) {
console.log(`edit ${item.name}`); 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) { deployItem(item) {
console.log(`cancel deploy ${item.name}`); 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) { 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) { 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() { created() {
...@@ -249,4 +461,11 @@ export default { ...@@ -249,4 +461,11 @@ export default {
.process-designer-container { .process-designer-container {
height: 100%; height: 100%;
} }
.apaas_detail_form {
text-align: left;
margin-top: 20px;
}
.apaas_detail_form .el-form-item {
margin: 0;
}
</style> </style>
...@@ -29,10 +29,6 @@ export default { ...@@ -29,10 +29,6 @@ export default {
name: "流程监控", name: "流程监控",
path: `/progress/monitoring`, path: `/progress/monitoring`,
}, },
{
name: "流程设计",
path: `/progress/designs`,
}
], ],
navList: [], navList: [],
}), }),
......
<template> <template>
<div> <div class="detail_contain">
大屏监控 <p class="now_page_title">在线组件工具 / 流程设计 / <span>流程监控</span></p>
<el-row class="in_analysis">
<!-- 可横向铺满 -->
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="流程总体概况" class="block">
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_liucheng.gif')" class="left_1_img" />
<p><span>流程总数</span> 35</p>
<p><span>流程实例总数</span> 2,380</p>
</div>
<single-circle ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></single-circle>
</div>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程实例数趋势分析"
:buttons_arr="['近7天', '近6个月']"
@changeButton="changeServiceCellBtn"
class="block"
>
<line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="12" class="in_center">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程平均耗时排行"
class="block"
>
<table-um
:headers="tableheaders"
:stripe="true"
:height="220"
:datas="tableRank">
</table-um>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="实时流程实例分析"
class="block"
>
<BarChart
:data="bar_data_area"
:colors="['#1034eb', '#4274f8']"
:bar_border_radius="[20, 20, 0, 0]"
:bar_width="26"
:show_split="true"
/>
</block-radius>
</el-col>
</el-row>
</el-col>
<el-col :span="6" class="in_right">
<el-row>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程超时率分析"
class="block"
>
<BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius
:show_header="true"
title="流程实例平均耗时分析"
class="block"
>
<multiple-circle class="block-radius-content" :show_center_data="false" :color="color_arr" :data="mult_data" :text="''"></multiple-circle>
</block-radius>
</el-col>
</el-row>
</el-col>
<!-- 不可横向铺满,一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="流程使用率分析" class="block" :buttons_arr="['最多', '最少']" @changeButton="changeAppInfoBtn">
<toplist
class="block-radius-content"
:options="toplistData"
:target-value="toplistTargetValue"
></toplist>
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
</block-radius>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script>
import BlockRadius from "@/components/general/block-radius";
import singleCircle from "@/components/e-charts/single_circle";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/process-top-list";
import tableUm from '@/components/table/table-um'
import BarChart from "@/components/e-charts/bar-chart";
import multipleCircle from "@/components/e-charts/multiple_circle";
export default {
components:{
BlockRadius,
singleCircle,
lineChart,
Toplist,
tableUm,
BarChart,
multipleCircle
},
data(){
return{
das_data: {
num: 80,
color: "#e56600",
text: "总超时率"
},
line_data:{
xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
seriesData: [
{
name: "趋势",
data: [100,200,500,1000,1800,500]
}
],
},
toplistData:[
{
service_name:'保安资格申请',
request_count: 50,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'保安考试流程',
request_count: 10,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'外国人永久居留资格申请',
request_count: 25,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'大型焰火燃放资格申请',
request_count: 30,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
{
service_name:'保安培训机构许可证申请流程',
request_count: 70,
cover:1,
service_id:{
id:1,
source:1
},
data_service_type1:124
},
],
toplistTargetValue: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> <template>
<div class="design_contain"> <div class="design_contain">
<el-button @click="getData">获取参数</el-button> <el-breadcrumb separator="/" class="bread_crumb1">
<WorkFlow ref="workFlow" /> <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> </div>
</template> </template>
<script> <script>
import WorkFlow from "@/components/work-flow/super-flow"; 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 { export default {
components: { 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: { methods: {
getData() { verification() {
let self = this; let self = this;
let data = self.$refs.workFlow.getData(); let data = { ...self.$refs.workFlow.getData() };
console.log(data);
let start_num = 0; let start_num = 0;
let end_num = 0; let end_num = 0;
let start_id = ""; let start_id = "";
let end_id = ""; let end_id = "";
let start_before = 0; let start_before = 0;
let end_after = 0; let end_after = 0;
data.nodeList.forEach(item => { let in_edge = 0;
if (item.meta.type == 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_num++;
start_id = item.id; start_id = item.id;
} }
if (item.meta.type == 1) { if (item.meta.type == 2) {
end_num++; end_num++;
end_id = item.id; 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) { if (start_id == item.endId) {
start_before++; start_before++;
} }
if (end_id == item.startId) { if (end_id == item.startId) {
end_after++; end_after++;
} }
}); });
if (start_num != 1 || end_num != 1) { if (start_num != 1 || end_num != 1) {
this.$message({ this.$message({
message: "开始节点与结束节点均应有且只有一个", message: "开始节点与结束节点均应有且只有一个",
type: "warning" type: "warning",
}); });
return false;
} else if (start_before != 0) { } else if (start_before != 0) {
this.$message({ this.$message({
message: "开始节点前面不应连接其它节点", message: "开始节点前面不应连接其它节点",
type: "warning" type: "warning",
}); });
return false;
} else if (end_after != 0) { } else if (end_after != 0) {
this.$message({ this.$message({
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> </script>
<style scoped> <style scoped>
.design_contain { .design_contain {
width: 100%; width: 100%;
height: calc(100% - 20px);
padding: 0 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> </style>
<template> <template>
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p> <p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
<div class="info_contain"> <div class="info_contain">
<service-header :data="service_header_arr"></service-header> <service-header :data="service_header_arr"></service-header>
<div class="type_box"> <div class="type_box">
<div class="type_title"> <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> v-for="(item, index) in service_arr"
<div class="type_box_select"> :key="index + 1000"
<info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr"> class="type_select"
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="zd_table"></table-um> @click="now_service = index"
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="apply_table"></table-um> :style="
<process-card :data="use_approval_arr" slot="approval"></process-card> now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
</info-list> "
</div> >
</div> {{ item }}
</div>
</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>
</div>
</template> </template>
<script> <script>
import serviceHeader from '@/components/service-header' import serviceHeader from "@/components/service-header";
import infoList from '@/components/infoList' import infoList from "@/components/infoList";
import tableUm from '@/components/table/table-um' import tableUm from "@/components/table/table-um";
import processCard from '@/components/process-card' import processCard from "@/components/process-card";
export default { export default {
props: { props: {},
components: {
}, serviceHeader,
components: { infoList,
serviceHeader, tableUm,
infoList, processCard,
tableUm, },
processCard data() {
}, return {
data() { use_approval_arr: [],
return { approval_arr: [
use_approval_arr:[], {
approval_arr:[ title: "一级审批",
{ result: "审批通过",
title:'一级审批', arr: [
result:'审批通过', {
arr:[ title: "审批时间:",
{ info: "2020-02-28 15:23:45",
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,
}, },
now_service:0, {
list_arr:[ title: "审批单位:",
{ info: "某某某城管局",
title:'服务描述:', },
info:'' {
}, title: "审批人:",
{ info: "张先生",
title:'服务领域:', },
info:'' {
}, title: "审批意见:",
{ info: "同意",
title:'发布人:', },
info:'' ],
}, },
{ {
title:'联系方式:', title: "二级审批",
info:'' result: "审批通过",
}, arr: [
{ {
title:'所属组织:', title: "审批时间:",
info:'' info: "2020-02-28 15:23:45",
}, },
{ {
title:'开放程度:', title: "审批单位:",
info:'' info: "某某某城管局",
}, },
{ {
title:'接口编码:', title: "审批人:",
info:'' info: "张先生",
}, },
{ {
title:'注册发布时间:', title: "审批意见:",
info:'' info: "同意",
}, },
], ],
servicead_arr:[ },
{ {
title:'请求方式:', title: "三级审批",
info:'' result: "审批中",
}, },
{ ],
title:'请求参数:', approval_arr1: [
info:'' {
}, title: "一级审批",
{ result: "审批通过",
title:'请求示例:', arr: [
info:'' {
}, title: "审批时间:",
{ info: "2020-02-28 15:23:45",
title:'编码格式:', },
info:'' {
}, title: "审批单位:",
{ info: "某某某城管局",
title:'响应参数:', },
info:'', {
type:'solt', title: "审批人:",
solt_name:'zd_table' info: "张先生",
}, },
], {
apply_arr:[ title: "审批意见:",
{ info: "同意",
title:'申请信息', },
prop:'title' ],
}, },
{ {
title:'场景描述:', title: "二级审批",
info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。' result: "审批通过",
}, arr: [
{ {
title:'调用业务系统:', title: "审批时间:",
info:'决策指挥系统' info: "2020-02-28 15:23:45",
}, },
{ {
title:'业务系统域名:', title: "审批单位:",
info:'https://apaas.wodcloud.com/' info: "某某某城管局",
}, },
{ {
title:'申请文件:', title: "审批人:",
info:'mapvideos申请书.docx', info: "张先生",
type:'down' },
}, {
{ title: "审批意见:",
title:'申请内容:', info: "同意",
info:'', },
type:'solt', ],
solt_name:'apply_table' },
}, {
{ title: "三级审批",
title:'申请规格:', result: "审批未通过",
info:'' arr: [
}, {
{ title: "审批时间:",
title:'申请时长:', info: "2020-02-28 15:23:45",
info:'' },
}, {
{ title: "审批单位:",
title:'申请时间:', info: "某某某城管局",
info:'' },
}, {
{ title: "审批人:",
title:'审批信息', info: "张先生",
prop:'title', },
type:'solt', {
solt_name:'approval' title: "审批意见:",
}, info: "不同意,驳回。",
], },
request_arr:['','GET','POST','PUT','DELETE'], ],
res_data:[], },
zd_table_arr:[], ],
}; service_arr: ["服务基本信息", "接口详细信息", "申请审批信息"],
}, service_header_arr: {
watch: { id: "",
isMap: false,
}, name: "",
computed: { first: [
{
}, name: "服务类型",
created() { text: "",
this.get_service_info() },
}, {
mounted() { name: "审批状态",
text: "",
}, color: "#515fe7",
methods: { },
get_service_info(){ {
this.$http name: "服务到期时间",
.get(`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`) text: "",
.then((response) => { },
if(!response.data.success){ ],
this.$message.error(response.data.errMsg) second: [
return {
} name: "服务接口地址",
let data = response.data.data; text: "",
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); fixed: false,
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?'审批通过':'审批未通过'); now_service: 0,
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'); list_arr: [
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); title: "服务描述:",
this.$set(this.service_header_arr, "url", data.cover); info: "",
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); title: "服务领域:",
this.$set(this.list_arr[3], "info", data.service_apply_info.apply_user_info.phone); info: "",
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); title: "发布人:",
this.$set(this.list_arr[7], "info", data.create_time=='0001-01-01T00:00:00Z'?'-':data.create_time.replace('T'," ").split('+')[0]); info: "",
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); title: "联系方式:",
this.$set(this.servicead_arr[3], "info", data.encode_method); info: "",
// 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); title: "所属组织:",
this.$set(this.apply_arr[3], "info", data.service_apply_info.business_url); info: "",
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+'/日'); title: "开放程度:",
this.$set(this.apply_arr[7], "info", data.service_apply_info.duration + (data.service_apply_info.duration_unit==1?'':'')); info: "",
this.$set(this.apply_arr[8], "info", data.service_apply_info.apply_time.replace('T'," ").split('+')[0]); },
this.zd_table_arr = [ {
{ title: "接口编码:",
wfwmc:data.name, info: "",
jkzt:data.health_state, },
jklj:data.req_url, {
wfwms:data.descript title: "注册发布时间:",
} info: "",
] },
console.log(this.zd_table_arr); ],
if(data.service_apply_info.approval_process){ servicead_arr: [
data.service_apply_info.approval_process.forEach(e => { {
this.use_approval_arr.push( title: "请求方式:",
{ info: "",
title:e.level==1?'一级审批':'二级审批', },
result:e.status==-1?'审批未通过':e.status==0?'审批中':'审批通过', {
} title: "请求参数:",
) info: "",
},
if(e.status!==0){ {
this.use_approval_arr[this.use_approval_arr.length - 1]['arr']=[ title: "请求示例:",
{ info: "",
title:'审批时间:', },
info:e.approval_time.split('+')[0].replace("T",' ') {
}, title: "编码格式:",
{ info: "",
title:'审批单位:', },
info:e.user_info.department_name {
}, title: "响应参数:",
{ info: "",
title:'审批人:', type: "solt",
info:e.user_info.user_name solt_name: "res_table",
}, },
{ ],
title:'审批意见:', apply_arr: [
info:e.comments {
}, title: "申请信息",
] prop: "title",
},
} {
}); title: "场景描述:",
}else{ info: "申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
this.use_approval_arr.push( },
{ {
title:'一级审批', title: "调用业务系统:",
result:'待审批', info: "决策指挥系统",
} },
) {
} title: "业务系统域名:",
this.res_data = JSON.parse(data.res_fields) info: "https://apaas.wodcloud.com/",
}) },
.catch(function(response) { {
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> </script>
<style scoped> <style scoped>
.detail_contain{ .detail_contain {
width: 100%; width: 100%;
padding: 0 20px; padding: 0 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.info_contain{ .info_contain {
padding: 25px 20px; padding: 25px 20px;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
box-shadow: 0px 3px 6px 0px box-shadow: 0px 3px 6px 0px #f4f7fc;
#f4f7fc; border-radius: 12px;
border-radius: 12px;
} }
.now_page_title{ .now_page_title {
margin: 15px 0; margin: 15px 0;
color: #898d9e; color: #898d9e;
} }
.now_page_title span{ .now_page_title span {
color: #242c43; color: #242c43;
} }
.type_box{ .type_box {
width: 100%; width: 100%;
} }
.type_title{ .type_title {
width: 100%; width: 100%;
height: 65px; height: 65px;
line-height: 65px; line-height: 65px;
border-bottom: 2px solid #f4f7fc; border-bottom: 2px solid #f4f7fc;
} }
.type_select{ .type_select {
float: left; float: left;
width: auto; width: auto;
margin-right: 40px; margin-right: 40px;
height: 65px; height: 65px;
cursor: pointer; cursor: pointer;
} }
.type_box_select{ .type_box_select {
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
width: 100%; width: 100%;
} }
</style> </style>
...@@ -231,15 +231,15 @@ export default { ...@@ -231,15 +231,15 @@ export default {
info: "" info: ""
}, },
{ {
title: "场景描述", title: "业务系统名称",
info: "" info: ""
}, },
{ {
title: "调用业务系统", title: "业务系统访问地址",
info: "" info: ""
}, },
{ {
title: "业务系统域名", title: "场景描述",
info: "" info: ""
}, },
{ {
...@@ -354,13 +354,13 @@ export default { ...@@ -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[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[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[2], "info", data.service_apply_info.apply_user_info.phone);
this.$set(this.list_arr[3], "info", data.descript); 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_name); this.$set(this.list_arr[4], "info", data.service_apply_info.business_url);
this.$set(this.list_arr[5], "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], "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[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[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 this.id = data.service_apply_info.id
if(data.service_apply_info.approval_status!==0){ if(data.service_apply_info.approval_status!==0){
this.servicead_arr[this.now_user].splice(1,1) this.servicead_arr[this.now_user].splice(1,1)
...@@ -384,7 +384,7 @@ export default { ...@@ -384,7 +384,7 @@ export default {
}, },
{ {
title:'审批单位:', title:'审批单位:',
info:e.user_info.department_name info:e.user_info.department_name?e.user_info.department_name:''
}, },
{ {
title:'审批人:', title:'审批人:',
......
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
:title="dialogInfo.title" :title="dialogInfo.title"
:msg="dialogInfo.msg" :msg="dialogInfo.msg"
:submit="dialogInfo.submit" :submit="dialogInfo.submit"
:sunbmitText="dialogInfo.sunbmitText" :sunbmit-text="dialogInfo.sunbmitText"
></apass-dialog> ></apass-dialog>
<allot-info-confirm <allot-info-confirm
...@@ -148,6 +148,7 @@ export default { ...@@ -148,6 +148,7 @@ export default {
title: "", title: "",
msg: "", msg: "",
submit: null, submit: null,
sunbmitText: "",
}, },
listUrl: "", listUrl: "",
deleteUrl: "", deleteUrl: "",
...@@ -1064,8 +1065,7 @@ export default { ...@@ -1064,8 +1065,7 @@ export default {
callback(item) { callback(item) {
if (item.state == 0) { if (item.state == 0) {
return null; // 已下架,上架的操作需要普通用户申请 return null; // 已下架,上架的操作需要普通用户申请
} else } else if (item.state == 1) {
if (item.state == 1) {
return _self.soldOutItem(item); // 已上架,超管用户可以直接下架 return _self.soldOutItem(item); // 已上架,超管用户可以直接下架
} else if (item.state == 2) { } else if (item.state == 2) {
return _self.soldUpItem(item); // 上架审核中,超管用户可以直接上架 return _self.soldUpItem(item); // 上架审核中,超管用户可以直接上架
...@@ -1398,7 +1398,6 @@ export default { ...@@ -1398,7 +1398,6 @@ export default {
applyForSoldUpItem(item) { applyForSoldUpItem(item) {
this.dialogInfo.title = "提示"; this.dialogInfo.title = "提示";
this.dialogInfo.msg = "确认申请上架此服务吗?"; this.dialogInfo.msg = "确认申请上架此服务吗?";
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发送通知"; this.dialogInfo.sunbmitText = "发送通知";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
this.$http this.$http
...@@ -1433,7 +1432,6 @@ export default { ...@@ -1433,7 +1432,6 @@ export default {
this.dialogInfo.title = "是否确定下架服务"; this.dialogInfo.title = "是否确定下架服务";
this.dialogInfo.msg = this.dialogInfo.msg =
"下架此服务会导致用户被迫暂停对服务的调用,下架前需向超级管理员发送通知,超级管理员通过后此服务将会从服务超市中下架。"; "下架此服务会导致用户被迫暂停对服务的调用,下架前需向超级管理员发送通知,超级管理员通过后此服务将会从服务超市中下架。";
this.dialogInfo.cancelText = "取消";
this.dialogInfo.sunbmitText = "发送通知"; this.dialogInfo.sunbmitText = "发送通知";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
this.$http this.$http
...@@ -1467,7 +1465,6 @@ export default { ...@@ -1467,7 +1465,6 @@ export default {
soldUpItem(item) { soldUpItem(item) {
this.dialogInfo.title = "提示"; this.dialogInfo.title = "提示";
this.dialogInfo.msg = "确认上架此服务吗?"; this.dialogInfo.msg = "确认上架此服务吗?";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "确定"; this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
this.$http this.$http
...@@ -1501,7 +1498,6 @@ export default { ...@@ -1501,7 +1498,6 @@ export default {
this.dialogInfo.title = "提示"; this.dialogInfo.title = "提示";
this.dialogInfo.msg = this.dialogInfo.msg =
"下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用"; "下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = "确定"; this.dialogInfo.sunbmitText = "确定";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
this.$http this.$http
...@@ -1534,7 +1530,6 @@ export default { ...@@ -1534,7 +1530,6 @@ export default {
deleteItem(item) { deleteItem(item) {
this.dialogInfo.title = ""; this.dialogInfo.title = "";
this.dialogInfo.msg = "是否删除该条服务?"; this.dialogInfo.msg = "是否删除该条服务?";
this.dialogInfo.cancelText = "";
this.dialogInfo.sunbmitText = ""; this.dialogInfo.sunbmitText = "";
this.dialogInfo.submit = () => { this.dialogInfo.submit = () => {
this.$http this.$http
......
<template> <template>
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title"> <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> <span>服务详情</span>
</p> </p>
<div class="info_contain"> <div class="info_contain">
...@@ -16,28 +24,48 @@ ...@@ -16,28 +24,48 @@
:style=" :style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {} now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
" "
>{{ item }}</div> >
{{ item }}
</div>
</div> </div>
<div class="type_box_select"> <div class="type_box_select">
<info-list <info-list
:list_arr="now_service == 0 ? list_arr : servicead_arr" :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> <table-um
<v-apaas-code :datas="code_arr" slot="zd_code"></v-apaas-code> :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> </info-list>
<p v-if="now_service == 1&&workflows_id">
流程服务接口说明见文档中心流程服务接口文档
</p>
<div v-show="now_service == 2"> <div v-show="now_service == 2">
<p class="service_title"> <p class="service_title"><span></span>服务运行概况</p>
<span></span>服务运行概况
</p>
<div class="service_title_card"> <div class="service_title_card">
<nor-card title="服务状态" class="service_card"> <nor-card title="服务状态" class="service_card">
<template> <template>
<div style="height:115px;padding-top:10px;"> <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 <p
style="color: #58617a;font-size: 16px;text-align:center;" style="color: #58617a;font-size: 16px;text-align:center;"
>{{ yx_state.state }}</p> >
{{ yx_state.state }}
</p>
</div> </div>
</template> </template>
</nor-card> </nor-card>
...@@ -59,7 +87,10 @@ ...@@ -59,7 +87,10 @@
</nor-card> </nor-card>
<nor-card title="资源使用" class="service_card"> <nor-card title="资源使用" class="service_card">
<template> <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> <p>{{ yx_state.memory }}</p>
</div> </div>
</template> </template>
...@@ -68,10 +99,11 @@ ...@@ -68,10 +99,11 @@
<nor-card title="服务调用拓扑图" class="service_card_charts"> <nor-card title="服务调用拓扑图" class="service_card_charts">
<Topology :datas="datas" /> <Topology :datas="datas" />
</nor-card> </nor-card>
<p class="service_title"> <p class="service_title"><span></span>服务调用列表</p>
<span></span>服务调用列表 <table-um
</p> :headers="header_use_arr"
<table-um :headers="header_use_arr" :datas="service_use_arr"></table-um> :datas="service_use_arr"
></table-um>
<list-pagination <list-pagination
:total="listTotal" :total="listTotal"
:page-sizes="pageSizes" :page-sizes="pageSizes"
...@@ -83,19 +115,34 @@ ...@@ -83,19 +115,34 @@
</div> </div>
<div v-show="now_service == 3"> <div v-show="now_service == 3">
<p style="color: #8890a7;">服务规格:</p> <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: #8890a7;">购买方式:</p>
<p style="color: #242c43;margin:10px 0px;"> <p style="color: #242c43;margin:10px 0px;">
{{ {{
buy_type == 1 buy_type == 1
? "按月购买" ? "按月购买"
: buy_type == 2 : buy_type == 2
? "按年购买" ? "按年购买"
: "按月购买&按年购买" : "按月购买&按年购买"
}} }}
</p> </p>
<div class="editbtn" v-if="now_user == 1" @click="sizeset_flag = true">编辑</div> <div
<p v-if="now_user == 1 && sizeset_flag" style="color: #8890a7;margin-bottom:10px;">规格设置:</p> 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 <table-um
v-if="now_user == 1 && sizeset_flag" v-if="now_user == 1 && sizeset_flag"
:headers="edit_size_arr" :headers="edit_size_arr"
...@@ -108,17 +155,24 @@ ...@@ -108,17 +155,24 @@
:datas="service_size_data" :datas="service_size_data"
@changeTable="now_size_data" @changeTable="now_size_data"
></table-um> ></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 <el-button
v-if="now_user == 1 && sizeset_flag" v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(1) !== -1 ? 'primary' : ''" :type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
@click="change_buy(1)" @click="change_buy(1)"
>按月购买</el-button> >按月购买</el-button
>
<el-button <el-button
v-if="now_user == 1 && sizeset_flag" v-if="now_user == 1 && sizeset_flag"
:type="buy_style.indexOf(2) !== -1 ? 'primary' : ''" :type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
@click="change_buy(2)" @click="change_buy(2)"
>按年购买</el-button> >按年购买</el-button
>
<div class="savebtn" v-if="now_user == 1 && sizeset_flag"> <div class="savebtn" v-if="now_user == 1 && sizeset_flag">
<el-button @click="change_service_size">保存</el-button> <el-button @click="change_service_size">保存</el-button>
<el-button @click="sizeset_flag = false">取消</el-button> <el-button @click="sizeset_flag = false">取消</el-button>
...@@ -153,7 +207,7 @@ export default { ...@@ -153,7 +207,7 @@ export default {
Topology, Topology,
serviceHeader, serviceHeader,
dialogAction, dialogAction,
ListPagination ListPagination,
}, },
data() { data() {
return { return {
...@@ -171,17 +225,86 @@ export default { ...@@ -171,17 +225,86 @@ export default {
maxTime: "", maxTime: "",
averageTraffic: "", averageTraffic: "",
maxTraffic: "", maxTraffic: "",
memory: "" memory: "",
}, },
service_use_arr: [], 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: "", buy_type: "",
workflows_id:'',//判断是否是流程服务
sizeset_flag: false, //规格设置是否显示 sizeset_flag: false, //规格设置是否显示
code_arr: "",
service_arr: [ service_arr: [
["服务基本信息", "接口详细信息", "服务运行状态"], ["服务基本信息", "接口详细信息", "服务运行状态"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"], ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"] ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
], ],
service_size_data: [], //服务规格数组 service_size_data: [], //服务规格数组
service_header_arr: { service_header_arr: {
...@@ -192,121 +315,101 @@ export default { ...@@ -192,121 +315,101 @@ export default {
first: [ first: [
{ {
name: "服务类型", name: "服务类型",
text: "" text: "",
}, },
{ {
name: "申请次数", name: "申请次数",
text: "" text: "",
}, },
{ {
name: "调用次数", name: "调用次数",
text: "" text: "",
}, },
{ {
name: "服务状态", name: "服务状态",
text: "" text: "",
} },
], ],
second: [ second: [
{ {
name: "服务接口地址", name: "服务接口地址",
text: "" text: "",
} },
], ],
fixed: true, fixed: true,
fixedurl: this.$route.path.replace("servicedetail", "serviceedit") fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
}, },
now_service: 0, now_service: 0,
datas: {}, 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: [ header_use_arr: [
{ {
prop: "dydw", prop: "dydw",
label: "调用单位", label: "调用单位",
minWidth: "20%", minWidth: "20%",
align: "left" align: "left",
}, },
{ {
prop: "dyr", prop: "dyr",
label: "调用人", label: "调用人",
width: "100px", width: "100px",
align: "center" align: "center",
}, },
{ {
prop: "dyyw", prop: "dyyw",
label: "调用业务系统", label: "调用业务系统",
minWidth: "20%", minWidth: "20%",
align: "left" align: "left",
}, },
{ {
prop: "ywxt", prop: "ywxt",
label: "业务系统网址", label: "业务系统网址",
minWidth: "20%", minWidth: "20%",
align: "left" align: "left",
}, },
{ {
prop: "cjms", prop: "cjms",
label: "场景描述", label: "场景描述",
minWidth: "40%", minWidth: "40%",
align: "left" align: "left",
},
{
prop: "sqgg",
label: "申请规格",
minWidth: "40%",
align: "center",
},
{
prop: "sqsc",
label: "申请时长",
minWidth: "40%",
align: "center",
}, },
{ {
prop: "sqsj", prop: "sqsj",
label: "申请调用时间", label: "申请调用时间",
width: "160px", width: "160px",
align: "right" align: "right",
} },
], ],
service_size_arr: [ service_size_arr: [
{ {
prop: "count", prop: "count",
label: "访问次数(次/日)", label: "访问次数(次/日)",
minWidth: "33.33%", minWidth: "33.33%",
align: "center" align: "center",
}, },
{ {
prop: "pv", prop: "pv",
label: "访问量(PV/日)", label: "访问量(PV/日)",
minWidth: "33.33%", minWidth: "33.33%",
align: "center" align: "center",
}, },
{ {
prop: "des", prop: "des",
label: "规格说明", label: "规格说明",
minWidth: "33.33%", minWidth: "33.33%",
align: "left" align: "left",
} },
], ],
edit_size_arr: [ edit_size_arr: [
{ {
...@@ -314,21 +417,21 @@ export default { ...@@ -314,21 +417,21 @@ export default {
label: "访问次数(次/日)", label: "访问次数(次/日)",
minWidth: "33.33%", minWidth: "33.33%",
align: "center", align: "center",
type: "inputNumber" type: "inputNumber",
}, },
{ {
prop: "pv", prop: "pv",
label: "访问量(PV/日)", label: "访问量(PV/日)",
minWidth: "33.33%", minWidth: "33.33%",
align: "center", align: "center",
type: "inputNumber" type: "inputNumber",
}, },
{ {
prop: "des", prop: "des",
label: "规格说明", label: "规格说明",
minWidth: "33.33%", minWidth: "33.33%",
align: "left", align: "left",
type: "input" type: "input",
}, },
{ {
label: "操作", label: "操作",
...@@ -339,48 +442,52 @@ export default { ...@@ -339,48 +442,52 @@ export default {
{ {
type: "action-delete", type: "action-delete",
label: "删除", label: "删除",
local: true local: true,
} },
] ],
} },
], ],
size_arr_down: [], size_arr_down: [],
servicead_arr: [ servicead_arr: [
{ {
title: "请求方式:", title: "请求方式:",
info: "" info: "",
}, },
{ {
title: "请求参数:", title: "请求参数:",
info: "" info: "",
type: "solt",
solt_name: "req_table",
}, },
{ {
title: "请求示例:", title: "请求示例:",
info: "" info: "",
type: "solt",
solt_name: "req_code",
}, },
{ {
title: "编码格式:", title: "编码格式:",
info: "" info: "",
}, },
{ {
title: "响应参数:", title: "响应参数:",
info: "", info: "",
type: "solt", type: "solt",
solt_name: "zd_table" solt_name: "res_table",
}, },
{ {
title: "响应示例:", title: "响应示例:",
info: "", info: "",
type: "solt", type: "solt",
solt_name: "zd_code" solt_name: "res_code",
} },
], ],
service_type_arr: [ service_type_arr: [
"数据服务", "数据服务",
"时空服务", "时空服务",
"视频服务", "视频服务",
"感知服务", "感知服务",
"综合应用" "综合应用",
], ],
scrvice_area_arr: [ scrvice_area_arr: [
"经济建设", "经济建设",
...@@ -392,49 +499,49 @@ export default { ...@@ -392,49 +499,49 @@ export default {
"文化休闲", "文化休闲",
"社会团体", "社会团体",
"教育机构", "教育机构",
"其他" "其他",
], ],
open_arr: ["共享", "受限", "敏感"], open_arr: ["共享", "受限", "敏感"],
service_state_arr: ["已下架", "已上架", "审核中","审核中"], service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
request_arr: ["GET", "POST", "PUT", "DELETE"], request_arr: ["GET", "POST", "PUT", "DELETE"],
list_arr: [ list_arr: [
{ {
title: "服务描述:", title: "服务描述:",
info: "" info: "",
}, },
{ {
title: "服务领域:", title: "服务领域:",
info: "" info: "",
}, },
{ {
title: "所属组织:", title: "所属组织:",
info: "" info: "",
}, },
{ {
title: "开放程度:", title: "开放程度:",
info: "" info: "",
}, },
{ {
title: "接口编码:", title: "接口编码:",
info: "" info: "",
}, },
{ {
title: "注册发布时间:", title: "注册发布时间:",
info: "" info: "",
} },
] ],
}; };
}, },
computed: { computed: {
...mapGetters(["level"]), ...mapGetters(["level"]),
...mapState(["userInfo"]) ...mapState(["userInfo"]),
}, },
watch: { watch: {
now_service(n, o) { now_service(n, o) {
if (n == 2) { if (n == 2) {
this.getData(); this.getData();
} }
} },
}, },
created() { created() {
if (this.userInfo) { if (this.userInfo) {
...@@ -463,18 +570,24 @@ export default { ...@@ -463,18 +570,24 @@ export default {
.get( .get(
`/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}` `/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); console.log(response);
if (response.data.success) { if (response.data.success) {
this.listTotal = response.data.data.total; 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({ this.service_use_arr.push({
dydw: e.apply_org_name, dydw: e.apply_org_name,
dyr: e.apply_user_info.user_name, dyr: e.apply_user_info.user_name,
dyyw: e.business_name, dyyw: e.business_name,
ywxt: e.business_url, ywxt: e.business_url,
cjms: e.scene, 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 { ...@@ -503,7 +616,7 @@ export default {
}); });
}, },
getData() { getData() {
this.$api.workbench.getServiceTopology().then(response => { this.$api.workbench.getServiceTopology().then((response) => {
this.datas = response.data.elements; this.datas = response.data.elements;
}); });
}, },
...@@ -513,11 +626,18 @@ export default { ...@@ -513,11 +626,18 @@ export default {
"/apaas/service/v3/service/manager?service_id=" + "/apaas/service/v3/service/manager?service_id=" +
this.$route.params.id this.$route.params.id
) )
.then(response => { .then((response) => {
if (response.data.success === 1) { if (response.data.success === 1) {
let data = response.data.data; 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, "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, "name", data.name);
this.$set( this.$set(
this.service_header_arr["first"][0], this.service_header_arr["first"][0],
...@@ -545,12 +665,8 @@ export default { ...@@ -545,12 +665,8 @@ export default {
data.req_url data.req_url
); );
this.$set(this.service_header_arr, "url", data.cover); this.$set(this.service_header_arr, "url", data.cover);
if(this.now_user==1){ if (this.now_user == 1) {
this.$set( this.$set(this.service_header_arr, "fixed", false);
this.service_header_arr,
"fixed",
false
);
} }
this.$set( this.$set(
this.service_header_arr, this.service_header_arr,
...@@ -567,20 +683,39 @@ export default { ...@@ -567,20 +683,39 @@ export default {
"info", "info",
data.create_time.replace("T", " ").split("+")[0] data.create_time.replace("T", " ").split("+")[0]
); );
// 接口详情信息
this.$set( this.$set(
this.servicead_arr[0], this.servicead_arr[0],
"info", "info",
this.request_arr[data.req_type - 1] this.request_arr[data.req_type - 1]
); ); // 请求方式
this.$set( this.req_data = JSON.parse(
this.servicead_arr[1], data.req_fields || data.req_query || "[]"
"info", ); // 请求参数
data.req_query ? data.req_query : "" if (this.req_data.length === 0) {
); this.$set(this.servicead_arr[1], "type", "");
this.$set(this.servicead_arr[2], "info", data.req_fields); this.$set(this.servicead_arr[1], "info", "无请求参数");
this.$set(this.servicead_arr[3], "info", data.encode_method); }
this.code_arr = data.res_fields_example; this.req_code_arr =
this.res_data = JSON.parse(data.res_fields); 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.service_size_data = data.request_spcs_info;
this.size_arr_down = data.request_spcs_info; this.size_arr_down = data.request_spcs_info;
this.buy_type = data.request_spcs_info[0].type; this.buy_type = data.request_spcs_info[0].type;
...@@ -592,7 +727,7 @@ export default { ...@@ -592,7 +727,7 @@ export default {
} else { } else {
this.$message({ this.$message({
message: response.data.errMsg, message: response.data.errMsg,
type: "warning" type: "warning",
}); });
} }
}) })
...@@ -608,7 +743,7 @@ export default { ...@@ -608,7 +743,7 @@ export default {
"/apaas/service/v3/service/manager/request/spcs/list?service_id=" + "/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
this.$route.params.id this.$route.params.id
) )
.then(response => { .then((response) => {
let data = response.data.data; let data = response.data.data;
console.log(data); console.log(data);
this.service_size_data = data.data; this.service_size_data = data.data;
...@@ -623,7 +758,7 @@ export default { ...@@ -623,7 +758,7 @@ export default {
}, },
change_service_size() { change_service_size() {
let temp = []; let temp = [];
this.size_arr_down.forEach(e => { this.size_arr_down.forEach((e) => {
if (e.pv && e.count) { if (e.pv && e.count) {
if (e.flag) { if (e.flag) {
e.id = 0; e.id = 0;
...@@ -646,9 +781,9 @@ export default { ...@@ -646,9 +781,9 @@ export default {
this.$http this.$http
.post("/apaas/service/v3/service/manager/request/spcs/save", { .post("/apaas/service/v3/service/manager/request/spcs/save", {
service_id: parseInt(this.$route.params.id), service_id: parseInt(this.$route.params.id),
data: temp data: temp,
}) })
.then(response => { .then((response) => {
console.log(response); console.log(response);
if (response.data.success) { if (response.data.success) {
this.$message.success("保存成功"); this.$message.success("保存成功");
...@@ -665,7 +800,7 @@ export default { ...@@ -665,7 +800,7 @@ export default {
.get( .get(
`/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}` `/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
) )
.then(response => { .then((response) => {
if (response.data.success) { if (response.data.success) {
let data = response.data.data; let data = response.data.data;
this.yx_state = { this.yx_state = {
...@@ -674,22 +809,22 @@ export default { ...@@ -674,22 +809,22 @@ export default {
maxTime: data.respTime.max + "ms", maxTime: data.respTime.max + "ms",
averageTraffic: data.throughput.avg + "dps", averageTraffic: data.throughput.avg + "dps",
maxTraffic: data.throughput.max + "dps", maxTraffic: data.throughput.max + "dps",
memory: data.resource.memory + "MB" memory: data.resource.memory + "MB",
}; };
} }
}) })
.catch(response => { .catch((response) => {
this.yx_state = { this.yx_state = {
state: "停止", state: "停止",
averageTime: "0ms", averageTime: "0ms",
maxTime: "0ms", maxTime: "0ms",
averageTraffic: "0dps", averageTraffic: "0dps",
maxTraffic: "0dps", maxTraffic: "0dps",
memory: "0MB" memory: "0MB",
}; };
}); });
} },
} },
}; };
</script> </script>
...@@ -750,8 +885,8 @@ export default { ...@@ -750,8 +885,8 @@ export default {
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
width: 100%; width: 100%;
} }
.type_box_select >>> .outlist .list p{ .type_box_select >>> .outlist .list p {
word-wrap:break-word; word-wrap: break-word;
} }
.service_title { .service_title {
font-size: 16px; font-size: 16px;
...@@ -801,6 +936,7 @@ export default { ...@@ -801,6 +936,7 @@ export default {
.service_card_charts { .service_card_charts {
width: 100%; width: 100%;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px;
} }
.editbtn { .editbtn {
width: 124px; width: 124px;
......
...@@ -311,7 +311,7 @@ export default { ...@@ -311,7 +311,7 @@ export default {
if(reg.test(this.maxline)){ if(reg.test(this.maxline)){
}else{ }else{
this.$message.error('请输入长度小于6的正整数') this.$message.error('请输入6位内的正整数')
return return
} }
}else{ }else{
...@@ -327,7 +327,7 @@ export default { ...@@ -327,7 +327,7 @@ export default {
if(reg.test(this.maxline1)){ if(reg.test(this.maxline1)){
}else{ }else{
this.$message.error('请输入长度小于6的正整数') this.$message.error('请输入6位内的正整数')
return return
} }
} }
...@@ -338,7 +338,7 @@ export default { ...@@ -338,7 +338,7 @@ export default {
if(reg.test(this.maxline1)){ if(reg.test(this.maxline1)){
}else{ }else{
this.$message.error('请输入长度小于6的正整数') this.$message.error('请输入6位内的正整数')
return return
} }
} }
......
...@@ -5,6 +5,11 @@ ...@@ -5,6 +5,11 @@
<el-breadcrumb-item :to="{ path: '/intelligent_drawing' }">智能制图</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/intelligent_drawing' }">智能制图</el-breadcrumb-item>
<el-breadcrumb-item>发布信息填写</el-breadcrumb-item> <el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
</el-breadcrumb> </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 v-else separator="/" class="bread_crumb">
<el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
<el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item> <el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item>
...@@ -355,10 +360,7 @@ ...@@ -355,10 +360,7 @@
</block-radius> </block-radius>
</div> </div>
<div style="display: none"> <div style="display: none">
<iframe <iframe id="listener" :src="addPortalItemUrl"></iframe>
id="listener"
:src="addPortalItemUrl"
></iframe>
</div> </div>
<apass-dialog <apass-dialog
ref="alertChange" ref="alertChange"
...@@ -388,7 +390,8 @@ export default { ...@@ -388,7 +390,8 @@ export default {
}, },
data() { data() {
return { return {
addPortalItemUrl: gisServiceUrl + '/portal/apaasplat/viewer/addPortalItem.html', addPortalItemUrl:
gisServiceUrl + "/portal/apaasplat/viewer/addPortalItem.html",
btnList: [], btnList: [],
activeBtn: null, activeBtn: null,
serviceUrl: "", serviceUrl: "",
...@@ -543,6 +546,7 @@ export default { ...@@ -543,6 +546,7 @@ export default {
requestRules: 0, requestRules: 0,
responseRules: 0, responseRules: 0,
is_map: 0, is_map: 0,
process_id: "",
param_fields: [], param_fields: [],
body_fields: [], body_fields: [],
dialogInfo: { dialogInfo: {
...@@ -552,6 +556,7 @@ export default { ...@@ -552,6 +556,7 @@ export default {
}, },
is_portal: false, is_portal: false,
portal_id: "", portal_id: "",
dataType: "",
}; };
}, },
computed: {}, computed: {},
...@@ -687,12 +692,14 @@ export default { ...@@ -687,12 +692,14 @@ export default {
this.$api.workbench.fwzcFwcs(query).then((response) => { this.$api.workbench.fwzcFwcs(query).then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let data = response.data.data; 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) { if (data.body_fields && data.body_fields.length != 0) {
this.datasQqcs = data.body_fields; this.datasQqcs = data.body_fields;
this.param_fields = data.param_fields; this.dataType = "body";
} else { } else {
this.datasQqcs = data.param_fields; this.datasQqcs = data.param_fields;
this.body_fields = []; this.dataType = "param";
} }
this.datasFhcs = data.response_fields; this.datasFhcs = data.response_fields;
this.resSuccess = true; this.resSuccess = true;
...@@ -886,9 +893,13 @@ export default { ...@@ -886,9 +893,13 @@ export default {
method: this.select, method: this.select,
url: this.serviceUrl, url: this.serviceUrl,
request_fields: request_fields:
this.body_fields.length == 0 ? [] : this.request_fields, this.dataType == "body"
? this.request_fields
: this.body_fields,
request_query_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, response_fields: this.response_fields,
content_type: contentType, content_type: contentType,
portal_id: this.portal_id, portal_id: this.portal_id,
...@@ -998,6 +1009,11 @@ export default { ...@@ -998,6 +1009,11 @@ export default {
self.is_portal = true; self.is_portal = true;
} }
this.getOrganization(); this.getOrganization();
} else if (self.$route.query.process) {
self.process_id = self.$route.query.process;
self.jcxxtx = true;
this.getProcessDetail
this.getOrganization();
} else { } else {
self.is_map = 0; self.is_map = 0;
self.getServiceType1(); self.getServiceType1();
...@@ -1040,7 +1056,6 @@ export default { ...@@ -1040,7 +1056,6 @@ export default {
); );
}, },
listeners(event) { listeners(event) {
console.log(event);
let self = this; let self = this;
if (event && event.origin == gisServiceUrl && event.data) { if (event && event.origin == gisServiceUrl && event.data) {
if (event.data.cmd == "getPortalItemInfo") { if (event.data.cmd == "getPortalItemInfo") {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="person_info"> <div class="person_info">
<div class="preson"> <div class="preson">
<div class="person_text"> <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> <span>你好,{{ person }}{{login_time?'最近登录 ':''}}{{ login_time }}</span>
</div> </div>
<div class="person_menu"> <div class="person_menu">
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
:key="index + 100" :key="index + 100"
> >
<img :src="item.pic" alt /> <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>{{ item.text }}</p>
<p <p
:style="{ color: item.color }" :style="{ color: item.color }"
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;" style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
> >
<span> <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> <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span> </span>
</p> </p>
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;" style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
> >
<span> <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> <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span> </span>
</p> </p>
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;" style="margin-top:15px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;"
> >
<span> <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> <div class="enter_btn" @click="$router.push('/data_analysis')"></div>
</span> </span>
</p> </p>
...@@ -217,13 +217,13 @@ ...@@ -217,13 +217,13 @@
<p> <p>
<span></span> 服务类型分析 <span></span> 服务类型分析
</p> </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>
<div class="data_charts_left" style="width:285px;"> <div class="data_charts_left" style="width:285px;">
<p> <p>
<span></span> 应用类型分析 <span></span> 应用类型分析
</p> </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> </div>
</div> </div>
...@@ -890,7 +890,7 @@ export default { ...@@ -890,7 +890,7 @@ export default {
{ {
text: "收益总额", text: "收益总额",
pic: require("@/assets/imgs/ic_shouyize.png"), pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6", bg: "rgb(255,242,226)",
color: "#ea7d19", color: "#ea7d19",
type: "earnings_money", type: "earnings_money",
num: "" num: ""
...@@ -924,7 +924,7 @@ export default { ...@@ -924,7 +924,7 @@ export default {
{ {
text: "交易总额", text: "交易总额",
pic: require("@/assets/imgs/ic_shouyize.png"), pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6", bg: "rgb(255,242,226)",
color: "#ea7d19", color: "#ea7d19",
type: "trade_money", type: "trade_money",
num: "" num: ""
...@@ -958,7 +958,7 @@ export default { ...@@ -958,7 +958,7 @@ export default {
{ {
text: "交易总额", text: "交易总额",
pic: require("@/assets/imgs/ic_shouyize.png"), pic: require("@/assets/imgs/ic_shouyize.png"),
bg: "#fcefd6", bg: "rgb(255,242,226)",
color: "#ea7d19", color: "#ea7d19",
type: "trade_money", type: "trade_money",
num: "" num: ""
...@@ -998,7 +998,7 @@ export default { ...@@ -998,7 +998,7 @@ export default {
pic: require("@/assets/imgs/home_tool_ic_kshbb.png"), pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
bg: "#fff2e2", bg: "#fff2e2",
color: "#ea7d19", color: "#ea7d19",
url: "/bi", url: "/apaas/hubApi/bi/token",
target: 1 target: 1
}, },
{ {
...@@ -1066,17 +1066,19 @@ export default { ...@@ -1066,17 +1066,19 @@ export default {
text: "权限管理", text: "权限管理",
role: 2, role: 2,
url: "/authority/organization" url: "/authority/organization"
} },
// { {
// pic: require("@/assets/imgs/home_tool_ic_quanxian.png"), pic: require("@/assets/imgs/home_tool_ic_shuju.png"),
// text: "容器管理", text: "数据管控",
// role: 2, role: 2,
// }, url: "/data_analysis/my_service"
// { },
// pic: require("@/assets/imgs/home_tool_ic_quanxian.png"), {
// text: "数据管控", pic: require("@/assets/imgs/home_tool_ic_message.png"),
// role: 2, text: "消息与推送管理",
// }, role: 2,
url: "/message/recommended"
},
] ]
}; };
}, },
...@@ -1215,7 +1217,7 @@ export default { ...@@ -1215,7 +1217,7 @@ export default {
this.service_data = data.data; this.service_data = data.data;
this.service_data.forEach(e => { this.service_data.forEach(e => {
if (e.create_time) { 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) { if (e.service_apply_info && e.service_apply_info.approval_time) {
...@@ -1676,8 +1678,9 @@ export default { ...@@ -1676,8 +1678,9 @@ export default {
name: "", name: "",
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [51, 55], radius: [52, 54],
center: ["51%", "45%"], center: ["51%", "45%"],
z:5,
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -1703,7 +1706,48 @@ export default { ...@@ -1703,7 +1706,48 @@ export default {
} }
}, },
data: data 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 = { var options = {
...@@ -1711,15 +1755,16 @@ export default { ...@@ -1711,15 +1755,16 @@ export default {
tooltip: { tooltip: {
show: false show: false
}, },
legend: { // legend: {
bottom: -5, // bottom: -5,
left: "center", // left: "center",
itemWidth: 10, // itemWidth: 10,
itemHeight: 10, // itemHeight: 10,
orient: "horizontal", // orient: "horizontal",
data: legendarr, // data: legendarr,
backgroundColor: "#f4f7fc" // backgroundColor: "#f4f7fc",
}, // borderRadius:8
// },
toolbox: { toolbox: {
show: false show: false
}, },
...@@ -1749,7 +1794,8 @@ export default { ...@@ -1749,7 +1794,8 @@ export default {
bottom: 0, bottom: 0,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
backgroundColor: "#f4f7fc" backgroundColor: "#f4f7fc",
borderRadius:8
}, },
xAxis: [ xAxis: [
{ {
...@@ -1867,7 +1913,9 @@ export default { ...@@ -1867,7 +1913,9 @@ export default {
data: [dataname[n]], data: [dataname[n]],
itemWidth: 14, itemWidth: 14,
itemHeight: 10, itemHeight: 10,
bottom: 0 bottom: 0,
backgroundColor: "#f4f7fc",
borderRadius:8
}, },
grid: { grid: {
borderColor: "#f2f2f2", borderColor: "#f2f2f2",
...@@ -1912,11 +1960,11 @@ export default { ...@@ -1912,11 +1960,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#0a92c4" color: "rgba(10,146,196,0.3)"
}, },
{ {
offset: 1, offset: 1,
color: "#ffe" color: 'rgba(255,255,255,0.3)'
} }
]) ])
} }
...@@ -1939,12 +1987,14 @@ export default { ...@@ -1939,12 +1987,14 @@ export default {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
font-size: 12px; font-size: 12px;
border-radius: 4px;
} }
.data_charts_left .cloud_asy .el-input__inner { .data_charts_left .cloud_asy .el-input__inner {
width: 150px; width: 150px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
font-size: 12px; font-size: 12px;
border-radius: 4px;
} }
.data_charts_left .el-input__icon { .data_charts_left .el-input__icon {
line-height: 28px; line-height: 28px;
...@@ -2143,9 +2193,9 @@ export default { ...@@ -2143,9 +2193,9 @@ export default {
color: #0d1847; color: #0d1847;
} }
.yy_asy { .yy_asy {
width: 400px; width: 420px;
height: 200px; height: 200px;
margin: 0px 0 0 0px; margin: 20px 0 0 0px;
} }
.fwyy { .fwyy {
width: 420px; width: 420px;
...@@ -2288,7 +2338,7 @@ export default { ...@@ -2288,7 +2338,7 @@ export default {
} }
.manage_box { .manage_box {
width: 145px; width: 155px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
background-color: #0d1847; background-color: #0d1847;
......
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
<div class="tips"> <div class="tips">
<i class="el-icon-warning-outline"></i><span>此操作相当于:kubectl apply -f {{'<'+'spec.yaml'+'>'}}</span> <i class="el-icon-warning-outline"></i><span>此操作相当于:kubectl apply -f {{'<'+'spec.yaml'+'>'}}</span>
</div> </div>
<v-apaas-code :datas="code_arr" v-show="now_yaml==1"></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" v-show="now_yaml==0"></v-apaas-code> <v-apaas-code :datas="yaml_arr" :readOnly='true' v-show="now_yaml==0"></v-apaas-code>
</div> </div>
</div> </div>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
:list_arr="list_arr" :list_arr="list_arr"
v-if="service_arr[now_user][now_service] == '基本信息'" v-if="service_arr[now_user][now_service] == '基本信息'"
> >
<mavon-editor <!-- <mavon-editor
slot="app_code" slot="app_code"
v-model="appcode" v-model="appcode"
:boxShadow="false" :boxShadow="false"
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
:subfield="subfield" :subfield="subfield"
:defaultOpen="preview" :defaultOpen="preview"
:editable="false" :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> </info-list>
<div <div
...@@ -161,6 +162,7 @@ ...@@ -161,6 +162,7 @@
:auto-upload="false" :auto-upload="false"
:on-success="upload_success" :on-success="upload_success"
:on-error="upload_error" :on-error="upload_error"
:on-change="change_file_state"
:data="anotherData1" :data="anotherData1"
:multiple="false" :multiple="false"
> >
...@@ -493,10 +495,17 @@ export default { ...@@ -493,10 +495,17 @@ export default {
this.now_page = 1; this.now_page = 1;
this.image_arr = []; this.image_arr = [];
this.get_image_list(); this.get_image_list();
this.get_file_name();
} else { } else {
this.$message.error(response.errMsg); this.$message.error(response.errMsg);
} }
}, },
change_file_state(file,fileList){
console.log(file,fileList);
if(fileList.length>=2){
this.fileList = [file]
}
},
upload_error() { upload_error() {
this.$message.error("上传失败"); this.$message.error("上传失败");
}, },
......
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
option:[ option:[
{ required: true, message: '请输入意见', trigger: 'blur' }, { 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 { ...@@ -1341,7 +1341,7 @@ export default {
this.showDialog(); this.showDialog();
}, },
editItem(item) { 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) { onLine(item) {
this.dialogInfo.title = "提示"; this.dialogInfo.title = "提示";
......
...@@ -57,6 +57,27 @@ const workbench = { ...@@ -57,6 +57,27 @@ const workbench = {
getServiceTopology() { getServiceTopology() {
return axios.get(`/apaas/istio/v3/api/namespaces/graph`) 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; export default workbench;
...@@ -143,6 +143,12 @@ export default new Router({ ...@@ -143,6 +143,12 @@ export default new Router({
}, },
], ],
}, // 工作台 - 应用管理模块 }, // 工作台 - 应用管理模块
{
path: "/technical_support", // 技术支持
name: "technicalSupport",
component: () => import("@/pages/technical-support/index"),
},
{ {
path: "/shop", // 服务超市 path: "/shop", // 服务超市
name: "shop", name: "shop",
...@@ -274,10 +280,15 @@ export default new Router({ ...@@ -274,10 +280,15 @@ export default new Router({
component: () => import("@/pages/workbench/component-center/process-management/monitoring/index"), component: () => import("@/pages/workbench/component-center/process-management/monitoring/index"),
}, // 流程监控 }, // 流程监控
{ {
path: "/progress/designs", path: "/progress/designer/design",
name: "process_designs", name: "process_design",
component: () => import("@/pages/workbench/component-center/process-management/process-design/index"), 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({ ...@@ -439,6 +450,16 @@ export default new Router({
name: "serviceControl", name: "serviceControl",
component: () => import("@/pages/data-analysis/service-control"), 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