@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/ApiDoc.vue

@@ -0,0 +1,293 @@
+<template>
+	<div>
+		<el-row :gutter="18">
+			<el-col :span="4">
+				<el-card shadow="always">
+					<span style="font-size: 18pt; font-weight: bold;">接口文档</span>
+					<el-tree :data="apiTreeData" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" style="margin-top: 20px;">
+						<span slot-scope="{ node, data }">
+							<span style="font-size: 10pt;">{{ node.label }}</span>
+							<span>
+							  <el-button size="mini" circle icon="el-icon-edit" title="编辑"
+							  style="border: 0px; margin-left: 0px; font-size: 10pt; padding: 2px;"
+							  @click="() => handleNodeEdit(data)" :disabled="handleType=='edit' && id != data.id" ></el-button>
+							  <el-button v-show="isNotGroups(node.data.code)" size="mini" circle icon="el-icon-view"
+							  title="详情" style="border: 0px; margin-left: 0px; font-size: 10pt; padding: 2px;"
+							  @click="() => handleNodeView(data)"></el-button>
+							</span>
+						</span>
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="20">
+				<!-- 说明 -->
+				<el-card shadow="always">
+					<div class="clearfix">
+						<i class="el-icon-monitor"></i>
+						<span style="font-weight: bold;">{{infoForm.name}}</span>
+						<span v-show="infoForm.isItem" style="margin-left: 50px;">
+							<i class="el-icon-position"></i>
+							<span style="font-size: 11pt;">
+								<el-tag size="mini" style="font-weight: bold;">{{infoForm.id}}</el-tag>
+							</span>
+						</span>
+						<span v-show="infoForm.isItem" style="margin-left: 30px;">
+							<i class="el-icon-link"></i>
+							<span style="font-size: 11pt;">
+								<el-tag size="mini" type="success" style="font-weight: bold;">{{infoForm.path}}</el-tag>
+							</span>
+						</span>
+						<span v-show="infoForm.isItem" style="margin-left: 30px;">
+							<i class="el-icon-connection"></i>
+							<span style="font-size: 11pt;">
+								<el-tag size="mini" type="success" style="font-weight: bold;">{{infoForm.uri}}</el-tag>
+							</span>
+						</span>
+					</div>
+				</el-card>
+				<!-- 在线markdown编辑器 https://gitee.com/wCHCw/mavonEditor -->
+				<span v-show="handleType=='edit'">
+					<mavon-editor v-show="handleType=='edit'" v-model="content" :toolbars="toolbars" @save="handleSave" style="height: 700px; margin-top: 18px;" />
+					<!-- 提交 -->
+					<el-button v-show="handleType=='edit'" type="primary" style="margin-left: 47%; margin-top: 20px;" @click="handleSave">保存</el-button>
+				</span>
+
+				<span v-show="handleType==''">
+					<mavon-editor v-show="handleType==''" v-model="content" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false"
+					:editable="false" :scrollStyle="true" :ishljs="true" style="margin-top: 18px; " />
+				</span>
+			</el-col>
+		</el-row>
+
+		<el-drawer v-model="drawer" :direction="direction" :before-close="handleClose" :with-header="false" size="24%">
+			<!-- 父组件传参与子组件方法监听 -->
+			<routeInfoComponent ref="routeInfo" :infoForm="infoForm"></routeInfoComponent>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+
+import {apiDocList,saveApiDoc,findByApiDoc} from '../api/apidoc_api.js'
+import routeInfoComponent from '../component/RouteInfo.vue'
+
+export default {
+	data() {
+		return {
+			id:'',
+			handleType: '',
+			isEdit: false,
+			drawer: false,
+			direction: 'rtl',
+			infoForm:{
+				name:'API接口'
+			},
+			tableData: [],
+			content: '', //输入的数据
+			toolbars: {
+				bold: true, // 粗体
+				italic: true, // 斜体
+				header: true, // 标题
+				underline: true, // 下划线
+				mark: true, // 标记
+				superscript: true, // 上角标
+				quote: true, // 引用
+				ol: true, // 有序列表
+				link: true, // 链接
+				imagelink: true, // 图片链接
+				help: true, // 帮助
+				code: true, // code
+				table: true, // 表格
+				subfield: true, // 是否需要分栏
+				fullscreen: true, // 全屏编辑
+				readmodel: true, // 沉浸式阅读
+				/* 1.3.5 */
+				undo: true, // 上一步
+				trash: true, // 清空
+				save: true, // 保存（触发events中的save事件）
+				/* 1.4.2 */
+				navigation: true ,// 导航目录
+				editable: true,
+				preview: true, // 预览
+				defaultOpen: 'preview' //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
+			},
+			apiTreeData: [],
+			defaultProps: {
+			  children: 'children',
+			  label: 'label'
+			}
+		};
+	},
+	created: function() {
+		this.id = '';
+		this.handleType = '';
+		this.init();
+	},
+	components:{
+		routeInfoComponent
+	},
+	mounted: function() {},
+	beforeDestroy: function() {},
+	methods: {
+		init() {
+			this.list();
+		},
+		list(){
+			let _this = this;
+			apiDocList().then(function(result){//获取tree数据
+				let data = result.data;
+				_this.tableData = data;
+				if (data){
+					let treeData = []
+					let i = 1;
+					_this.GLOBAL_VAR.groups.forEach((row,index)=>{
+						treeData.push({id:'' + i, code:row.value, pcode:'', name: row.label});
+						i ++;
+					})
+					data.forEach((row,index)=>{
+						treeData.push({id:row.id, code:row.id, pcode:row.groupCode, name: row.name});
+					})
+					_this.apiTreeData = _this.GLOBAL_FUN.initTree(treeData);
+				}
+			});
+		},
+		isNotGroups(groupCode){//过滤父级接口的编辑和查看按钮
+			let groups = this.GLOBAL_VAR.groups;
+			let length = groups.length;
+			for (var i=0;i<length;i++){
+				let itme = groups[i];
+				if (itme.value === groupCode){
+					return false;
+				}
+			}
+			return true;
+		},
+		handleNodeClick(data){//点击节点，判断是否在编辑
+			let oldhandleType = this.handleType;
+			if (this.isEdit === true){
+				this.handleType = 'edit';
+			}
+			if (this.handleType === 'edit'){
+				if (oldhandleType === 'edit'){
+					if (this.id == data.id){
+						return true;
+					}
+					let _this = this;
+					this.$confirm('当前正在编辑文档内容，如未保存将会丢失已编辑内容，请确认是否切换？').then(_ => {
+						if (this.isEdit != true){
+							_this.handleType = '';
+						}
+						_this.info(data);
+					}).catch(_ => {});
+				}else {
+					this.info(data);
+				}
+			}else {
+				if (this.id == data.id){
+					return true;
+				}
+				this.handleType = '';
+				this.info(data);
+			}
+			this.isEdit = false;
+		},
+		info(data){//点击tree节点，获取节点信息
+			if (this.isNotGroups(data.code)){
+				this.infoForm = this.getTableDataItem(data.id);
+				this.infoForm.isItem = true;
+			} else {
+				this.infoForm = {
+					id: data.id,
+					name:data.label,
+					isItem:false
+				}
+			}
+			this.getApiDoc(data.id);
+		},
+		handleNodeEdit(data){//编辑
+			this.isEdit = true;
+		},
+		handleNodeView(data){//查看接口详情
+		    this.drawer = true;
+		    this.infoForm = this.getTableDataItem(data.id);
+		},
+		handleClose(done) {//关闭详情
+			// this.$confirm('确认关闭？').then(_ => {
+				done();
+			// }).catch(_ => {});
+		},
+		handleSave(){
+			let isSubmit = true;
+			if (this.content == null || this.content == undefined || this.content == '' || this.content.length <= 0){
+				isSubmit = false;
+				this.$confirm('文档内空是空的，请确认是否提交？').then(_ => {
+					this.save()
+				}).catch(_ => {});
+			}else {
+				this.save()
+			}
+		},
+		getTableDataItem(id){//获取数组中的指定ID对象
+			let routeData = {};
+			let length = this.tableData.length;
+			for (var i=0;i<length;i++){
+				let item = this.tableData[i];
+				if (id === item.id){
+					routeData = item;
+					break;
+				}
+			}
+			return routeData;
+		},
+		save(){//保存文档
+			let _this = this;
+			saveApiDoc({id:this.infoForm.id, content: this.content}).then(function(result){
+				console.log(result);
+				_this.handleType = '';
+				_this.GLOBAL_FUN.successMsg();
+			});
+		},
+		getApiDoc(id){//获取文档
+			this.content = '';
+			this.id = id;
+			let _this = this;
+			findByApiDoc({id:id}).then(function(result){
+				if (result.data){
+					_this.content = result.data.content;
+				}
+
+			});
+		}
+	}
+};
+</script>
+
+<style>
+	.el-drawer__header {
+	    -ms-flex-align: center;
+	    align-items: center;
+	    color: #72767b;
+	    display: -ms-flexbox;
+	    display: flex;
+	    margin-bottom: 2px;
+	    padding: 10px 20px 0;
+	}
+	.input-with-select .el-input-group__prepend {
+	    background-color: #fff;
+	 }
+	 .gateway-info-label{
+		 text-align: right;
+		 font-size: 14px;
+		 padding: 8px 0;
+		 color: #606266;
+		 vertical-align: middle;
+	 }
+	 .gateway-info-value{
+		 font-size: 14px;
+		 padding: 8px 0px ;
+		 line-height: 20px;
+	 }
+	 .v-show-content {
+		 background-color: white !important;
+	 }
+</style>

package/src/views/ApiMonitor.vue

@@ -0,0 +1,292 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+    	<div class="box-flex-between" style="padding:20px">
+				<el-radio-group v-model="status" size="mini" @change="search">
+				  <el-radio-button label=""><i class="el-icon-menu" style="font-weight: bold;"></i>&nbsp;所有</el-radio-button>
+				  <el-radio-button label="0"><i class="el-icon-loading" style="font-weight: bold;"></i>&nbsp;运行</el-radio-button>
+				  <el-radio-button label="1"><i class="el-icon-circle-close" style="font-weight: bold;"></i>&nbsp;停止</el-radio-button>						  
+				  <el-radio-button label="2"><i class="el-icon-bell" style="font-weight: bold;"></i>&nbsp;告警</el-radio-button>
+				</el-radio-group>
+			</div>
+
+    	<div :key="index" v-for="(item, index) in taskList">
+				<div :class="taskTopic.class[item.status]" :title="item.name + taskTopic.title[item.status]" @click="handleClickMonitorInfo(item)">
+					<i :class="taskTopic.icon[item.status]" style="font-weight: bold;"></i>&nbsp;<span>{{taskTopic.des[item.status]}}</span>
+					<div>
+						<span>{{item.id}}</span>
+					</div>
+					<div class="item-name-style">
+						<span>{{item.name}}</span>
+					</div>					
+				</div>
+			</div>
+		</div>
+
+
+		<el-dialog title="监控告警信息" v-model="dialogFormVisible" width="25%" :close-on-click-modal="false">
+			<el-form :model="infoForm" ref="infoForm" :label-width="formLabelWidth">
+				<el-form-item label="服务ID：" size="mini">
+					<el-tag size="small">{{infoForm.id}}</el-tag>
+				</el-form-item>
+				<el-form-item label="服务ID：" size="mini">
+					<el-tag size="small">{{infoForm.name}}</el-tag>
+				</el-form-item>
+				<el-form-item label="服务地址：" size="mini">
+					<el-tag size="small" type="success">{{infoForm.uri}}</el-tag>
+				</el-form-item>
+				<el-form-item label="断言路径：" size="mini">
+					<el-tag size="small" type="success">{{infoForm.path}}</el-tag>
+				</el-form-item>
+				<el-form-item v-show="infoForm.method != ''" label="请求模式：" size="mini">
+					<el-tag size="small" type="success">{{infoForm.method}}</el-tag>
+				</el-form-item>
+				<el-form-item label="告警状态：" size="mini">
+					<el-tag v-show="infoForm.status != '2'" size="small" type="" effect="dark">正常</el-tag>
+					<el-tag v-show="infoForm.status == '2'" size="small" type="danger" effect="dark">告警</el-tag>
+				</el-form-item>
+				<el-form-item v-show="infoForm.status == '2'" label="告警时间：" size="mini">
+					<el-tag size="small" type="danger" effect="dark">{{infoForm.alarmTime}}</el-tag>
+				</el-form-item>
+				<el-form-item label="告警重试：" size="mini">
+					<el-tag v-show="infoForm.recover == '0'" size="small" type="" effect="dark">启用</el-tag>
+					<el-tag v-show="infoForm.recover == '1'" size="small" type="danger" effect="dark">禁止</el-tag>
+				</el-form-item>
+				<el-form-item label="通知频率：" size="mini">
+					<el-tag v-for="item in monitorOptions" :key="item.value" v-show="infoForm.frequency == item.value" size="small" type="" effect="dark">{{item.label}}</el-tag>
+				</el-form-item>
+				<el-form-item v-show="infoForm.emails != null && infoForm.emails != ''" label="通知邮箱：" size="mini">
+					<el-tag size="small" type="" effect="dark">{{infoForm.emails}}</el-tag>
+				</el-form-item>
+				<el-form-item v-show="infoForm.sendTime != null && infoForm.sendTime != ''" label="通知时间：" size="mini">
+					<el-tag size="small" type="" effect="dark">{{infoForm.sendTime}}</el-tag>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button icon="el-icon-document-delete" v-show="infoForm.status == '2'" size="mini" type="success" @click="close">关闭本次告警</el-button>
+					<el-button icon="el-icon-document-delete" size="mini" type="warning" @click="dialogFormVisible = false">关 闭</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import {monitorList, closeMonitor} from '../api/monitor_api.js'
+	
+	export default {
+		data() {
+			return {
+				infoForm: {},
+				dialogFormVisible: false,
+				formLabelWidth: '100px',
+                status: '',
+				taskList: [],
+				taskTopic: {
+					icon: {
+						'0':'el-icon-loading',
+						'1':'el-icon-circle-close',
+						'2':'el-icon-bell'
+					},
+					class:{
+						'0':'breathe-run breathe-style breathe-keyframes-run breathe-div-border',
+						'1':'breathe-stop breathe-style breathe-div-border',						
+						'2':'breathe-urgent breathe-style breathe-keyframes-urgent breathe-div-border'
+					},
+					title:{						
+						'0':'，服务正常运行',						
+						'1':'，服务已停止',
+						'2':'，30分钟内发生告警'
+					},
+					des:{						
+						'0':'服务运行中...',
+						'1':'服务已停止...',	
+						'2':'服务告警...'
+					},
+				},
+				monitorOptions: [
+					{value: '30m',label: '30分钟一次'},
+					{value: '1h', label: '1小时一次'},
+					{value: '5h',label: '5小时一次'}, 
+					{value: '12h',label: '12小时一次'},
+					{value: '24h',label: '24小时一次'}
+				]
+			};
+		},
+		created: function() {
+			this.search();			
+		},
+		mounted: function() {
+			
+		},
+		beforeDestroy: function() {
+		},
+		methods:{
+			search(){
+				let _this = this;
+				let _status = this.status === ''? null : this.status;
+				monitorList({status: _status}).then(function(result){
+					if (result.data){
+						_this.taskList = result.data;
+					}
+				});
+			},
+			close() {
+				if (this.infoForm.status == '0'){
+					return false;
+				}
+				let _this = this;
+				closeMonitor({id: this.infoForm.id}).then(function(result) {
+					_this.infoForm.status = '0';
+					_this.GLOBAL_FUN.successMsg();
+					_this.setTableMonitorStatus();
+				});
+			},
+			handleClickMonitorInfo(row){
+				console.log(row);
+				this.dialogFormVisible = true;
+				this.infoForm = {
+					id: row.id,
+					name: row.name,
+					uri: row.uri,
+					path: row.path,
+					method: row.method,
+					status: row.status,
+					alarmTime: row.monitor.alarmTime,
+					recover: row.monitor.recover,
+					frequency: row.monitor.frequency,
+					sendTime: row.monitor.sendTime,
+					emails: row.monitor.emails
+				}
+			},
+			setTableMonitorStatus(){
+				let length = this.taskList.length;
+				for (var i=0;i<length;i++){
+					if (this.taskList[i].id == this.infoForm.id){
+						this.taskList[i].status = this.infoForm.status;
+						break;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+.span_1{
+    font-size: 18pt;
+    font-weight: bold; 
+    margin-bottom: 9px;	
+}
+    
+.breathe-run {
+	border: 1px solid #2b92d4;
+}
+
+.breathe-stop {
+	border: 1px solid #333;
+	opacity: 1;
+}
+
+.breathe-urgent {
+	border: 1px solid #F0565A;
+}
+
+.breathe-style {
+	float: left;
+    border-radius: 5px;
+	position: relative;
+	width: 150px;
+	height: 80px;
+	margin: 10px 10px;
+	padding-left: 10px;
+	padding-top: 6px;
+	line-height: 22px;
+	/* color: #fff; */
+	font-size: 8pt;
+	text-align: left;
+	cursor: pointer;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+	overflow: hidden;
+}
+
+.breathe-keyframes-run:hover {
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-name: breathe-run;
+	-webkit-animation-duration: 500ms;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+}
+
+.breathe-keyframes-urgent {
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-name: breathe-urgent;
+	-webkit-animation-duration: 700ms;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+}
+
+.item-name-style{
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;	
+}
+
+/* vue中@-webkit-keyframes改成@keyframes */
+@keyframes breathe-run {
+	0% {
+		opacity: 0.75;
+		box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3);
+	}
+	30% {
+		opacity: 0.85;
+		box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3);
+	}
+	66% {
+		opacity: 0.95;
+		box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3);
+	}
+	100% {
+		opacity: 1;
+		border: 1px solid rgba(24, 144, 255, 1);
+		box-shadow: 0 1px 20px rgba(24, 144, 255, 1);
+	}
+}
+
+@keyframes breathe-urgent {
+	0% {
+		opacity: 0.6;
+		box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
+	}
+	100% {
+		opacity: 1;
+		border: 1px solid rgba(240, 86, 90, 1);
+		box-shadow: 0 1px 20px rgba(240, 86, 90, 1);
+	}
+}
+
+.breathe-div-border:before,.breathe-div-border:after {
+	content:'';
+	position:absolute;
+	top:0;
+	right:0;
+	height:2px;
+	width:0;
+	background:#727CF5;
+	transition:400ms ease all;
+}
+
+.breathe-div-border:after {
+	right:inherit;
+	top:inherit;
+	left:0;
+	bottom:0;
+}
+
+.breathe-div-border:hover:before,.breathe-div-border:hover:after {
+	width:100%;
+	transition:555ms ease all;
+}
+</style>