@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/IpList.vue

@@ -0,0 +1,218 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="box-flex-between">
+				<el-button icon="el-icon-folder-add" type="primary" style="margin-left: 5px;" @click="handleCreateIp"></el-button>
+
+				<el-input placeholder="请输入IP" v-model="ip" :maxlength="15" class="input-with-select" style="width: 520px;" clearable>
+					<template #prepend>
+						<el-select v-model="status" placeholder="请选择" style="width: 120px;">
+							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</template>
+					<template #append>
+						<el-button icon="el-icon-search" @click="search"></el-button>
+					</template>
+				</el-input>
+			</div>
+
+			<el-table size="small" :data="tableData" height="100%">
+				<el-table-column label="IP地址" prop="ip">
+					<template #default="{ row }">
+						<el-tag size="small" type="success" style="font-weight: bold;">{{row.ip}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="状态" prop="status">
+					<template #default="{ row }">
+						<el-tag effect="dark" size="small" v-if="row.status === '0'" type="">允许通行</el-tag>
+						<el-tag effect="dark" size="small" v-if="row.status === '1'" type="danger">禁止通行</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" prop="createTime"></el-table-column>
+				<el-table-column label="备注" prop="remarks"></el-table-column>
+				<el-table-column label="操作" width="160">
+					<template #default="{ row }">
+						<el-dropdown trigger="click" @command="handleCommandClient">
+						  <el-button size="small" type="warning">管理<el-icon><ArrowDown /></el-icon></el-button>
+							<template #dropdown>
+						  	<el-dropdown-menu>
+									<el-dropdown-item :command="{command:'start', row: row}" divided><el-icon color="#409EFF"><CircleCheckFilled /></el-icon>允许通行</el-dropdown-item>
+									<el-dropdown-item :command="{command:'stop', row: row}"><el-icon color="#ff0000"><CircleCloseFilled /></el-icon>禁止通行</el-dropdown-item>
+									<el-dropdown-item icon="el-icon-delete-filled" :command="{command:'delete', row: row}" divided>删除</el-dropdown-item>
+						  	</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="block">
+				<el-pagination
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+					:current-page="currentPage"
+					:page-sizes="[10, 30, 50]"
+					:page-size="pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="totalNum"
+				></el-pagination>
+			</div>
+		</div>
+
+		<el-dialog title="IP管理" v-model="dialogFormVisible" width="30%" :close-on-click-modal="false">
+			<el-form :model="form" ref="form" :label-width="formLabelWidth" :rules="rules">
+				<el-form-item label="IP" size="mini" prop="ip">
+					<el-input v-model="form.ip" autocomplete="off" :maxlength="15" style="width: 240px;"></el-input>
+				</el-form-item>
+				<el-form-item label="状态" size="mini" prop="status">
+					<el-radio v-model="form.status" label="0">允许通行</el-radio>
+					<el-radio v-model="form.status" label="1">禁止通行</el-radio>
+				</el-form-item>
+				<el-form-item label="备注" size="mini" prop="remarks">
+					<el-input type="textarea" :rows="3" v-model="form.remarks" :maxlength="200" autocomplete="off"></el-input>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button size="mini" type="success" @click="submit">提 交</el-button>
+					<el-button size="mini" type="warning" @click="dialogFormVisible = false">关 闭</el-button>
+				</div>
+			</template>
+		</el-dialog>
+
+	</div>
+</template>
+
+<script setup>
+import { CircleCheckFilled, CircleCloseFilled, ArrowDown } from '@element-plus/icons-vue'
+</script>
+
+<script>
+import { addIp, updateIp, deleteIp, ipPageList } from '../api/ip_api.js';
+
+var is_ip=function(strIP){if(!strIP && strIP!==0 && typeof strIP!=="boolean"){return false}var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g;if(re.test(strIP)){if(RegExp.$1<256&&RegExp.$2<256&&RegExp.$3<256&&RegExp.$4<256){return true}}return false};
+
+export default {
+	data() {
+		return {
+			dialogFormVisible: false,
+			formLabelWidth: '60px',
+			status: null,
+			ip: '',
+			form: {
+				ip: '',
+				status: '0',
+				remarks: ''
+			},
+			tableData: [],
+			currentPage: 1,
+			pageSize: 10,
+			totalNum: 0,
+			options: [{ value: '', label: '所有' }, { value: '0', label: '允许通行' }, { value: '1', label: '禁止通行' }],
+			rules: {
+				ip: [
+					{ required: true, message: '请输入IP地址', trigger: 'blur' },
+					{ min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' },
+				],
+				status: [
+					{ required: true, message: '请选状态', trigger: 'change' },
+				],
+				remarks: [
+					{ required: false },
+					{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' },
+				]
+			}
+		};
+	},
+	created: function() {
+		this.init();
+	},
+	mounted: function() {},
+	beforeDestroy: function() {},
+	methods: {
+		init() {
+			this.search();
+			console.log(JSON.stringify(this.tableData));
+		},
+		handleSizeChange(val) {
+			this.pageSize = val;
+		},
+		handleCurrentChange(val) {
+			this.currentPage = val;
+		},
+		handleCommandClient(obj){
+			console.log("command" , obj);
+			let _this = this;
+			if (obj.command === 'start'){
+				if (obj.row.status === '1'){
+					obj.row.status='0';
+					updateIp(obj.row).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				}
+			} else if (obj.command === 'stop'){
+				if (obj.row.status === '0'){
+					obj.row.status='1';
+					updateIp(obj.row).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				}
+			} else if (obj.command === 'delete'){
+				this.$confirm('确认删除IP:"'+obj.row.ip+'"？').then(_ => {
+					deleteIp({ip:obj.row.ip}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					})
+				}).catch(_ => {});
+			}
+		},
+		handleCreateIp() {
+			this.dialogFormVisible = true;
+			this.form = {
+				ip: '',
+				status: '0',
+				remarks: ''
+			};
+		},
+		submit() {
+			let _this = this;
+			this.$refs['form'].validate(valid => {
+				if (valid) {
+					if (!is_ip(this.form.ip)){
+						this.GLOBAL_FUN.errorMsg('IP格式错误！');
+						return false;
+					}
+					addIp(this.form).then(function(result) {
+						_this.dialogFormVisible = false;
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else {
+					return false;
+				}
+			});
+		},
+		search() {
+			let _this = this;
+			ipPageList({ ip: this.ip, status: this.status, currentPage: this.currentPage, pageSize: this.pageSize }).then(function(result) {
+				if (result.data) {
+					_this.tableData = result.data.records;
+					_this.totalNum = result.data.total;
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.box-flex-between {
+	padding-bottom: 18px;
+}
+
+.block {
+	padding: 0 20px;
+}
+</style>
+

package/src/views/LoadBalanced.vue

@@ -0,0 +1,389 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-card>
+				<div class="box-flex-between">
+					<el-button icon="el-icon-folder-add" style="margin-left:5px" type="primary" @click="handleCreateBalanced" title="创建负载服务"></el-button>
+
+					<el-input placeholder="请输入网关服务名称" v-model="form.name" class="input-with-select" style="width: 620px;" clearable>
+						<template #prepend>
+					  	<el-select v-model="form.groupCode" placeholder="请选择分组" style="width: 140px; margin-right: 10px;">
+					  		<el-option label="所有" value=""/>
+					  		<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value"/>
+					  	</el-select>
+					  	<el-popover placement="bottom" trigger="click">
+					  		<el-radio v-model="form.status" v-for="item in statusOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
+								<template #reference>
+					  			<el-button>
+					  				服务状态:{{form.status === '0' ? '启用': form.status === '1' ? '禁用' : '所有'}}<i class="el-icon-caret-bottom el-icon--right"></i>
+					  			</el-button>
+								</template>
+					  	</el-popover>
+						</template>
+						<template #append>
+					  	<el-button icon="el-icon-search" @click="search" title="查询网关服务"></el-button>
+						</template>
+					</el-input>
+				</div>
+			</el-card>
+
+			<div class="part-bottom">
+				<div class="part-one">
+					<el-card class="box-card">
+						<el-table size="small" :data="tableData" height="calc(100% - 50px)">
+							<el-table-column label="服务名称">
+								<template #default="{ row }">
+									<el-tooltip effect="dark" :content="row.name" placement="top-start">
+										<el-tag size="small" type="warning" style="font-weight: bold;">{{row.name}}</el-tag>
+									</el-tooltip>
+								</template>
+							</el-table-column>
+
+							<el-table-column label="分组" width="90">
+								<template #default="{ row }">
+									<el-tag v-for="group in groupOptions" :key="group.value" v-show="(group.value === row.groupCode)" size="small" type="">{{group.label}}</el-tag>
+								</template>
+							</el-table-column>
+							<el-table-column label="断言地址" width="180">
+								<template #default="{ row }">
+									{{parent}}{{row.loadUri}}
+  								<el-popover
+  								  placement="bottom"
+  								  :width="240"
+										trigger="click"
+  								>
+  								  <template #reference>
+											<el-icon color="#409eff"><DataAnalysis /></el-icon>
+  								  </template>
+    	  						<template #default>
+											<div style="margin-bottom: 8px;">
+												<i class="el-icon-dataAnalysis" style="font-size: 16pt; color: #90A0A5;"></i>
+												<span class="route-title">网关代理地址</span>
+											</div>
+											<div style="display:flex;align-items: center;">
+												<el-tag size="small" type="success" style="font-weight: bold;">{{GLOBAL_VAR.gatewayRoutesURL}}{{parent}}{{row.loadUri}}</el-tag>
+												<el-button  style="padding: 3px 0; " icon="el-icon-document-copy" type="text" @click="handleCopy(row.loadUri)" title="复制"></el-button>
+											</div>
+											<br/>
+											<el-button style="padding: 3px 0; " type="text" title="网关代理地址"></el-button>
+    	  						</template>
+  								</el-popover>
+								</template>
+							</el-table-column>
+							<el-table-column label="创建时间" width="135" prop="createTime"></el-table-column>
+							<el-table-column label="状态" width="65" prop="status" :formatter="formatterStatus">
+								<template #default="{ row }">
+									<el-tag effect="dark" size="small" v-if="row.status === '0'" type="">启用</el-tag>
+									<el-tag effect="dark" size="small" v-if="row.status === '1'" type="danger">禁用</el-tag>
+								</template>
+							</el-table-column>
+							<el-table-column label="操作" width="80" fixed="right">
+								<template #default="{ row }">
+									<el-dropdown trigger="click" @command="handleCommandGateway">
+									   <el-button size="small" type="warning">
+									      管理
+												<el-icon><ArrowDown /></el-icon>
+									    </el-button>
+										<template #dropdown>
+									  	<el-dropdown-menu>
+												<el-dropdown-item icon="el-icon-edit" :command="{command:'edit', row: row}">编辑</el-dropdown-item>
+												<el-dropdown-item :command="{command:'start', row: row}" divided>
+													<el-icon color="#409EFF"><CircleCheckFilled /></el-icon>启用
+												</el-dropdown-item>
+												<el-dropdown-item :command="{command:'stop', row: row}">
+													<el-icon color="#ff0000"><CircleCloseFilled /></el-icon>禁用
+												</el-dropdown-item>
+												<el-dropdown-item icon="el-icon-delete" :command="{command:'delete', row: row}" divided>删除</el-dropdown-item>
+									  	</el-dropdown-menu>
+										</template>
+									</el-dropdown>
+								</template>
+							</el-table-column>
+							<el-table-column label="查看" width="58" fixed="right">
+								<template #default="{ row }">
+									<el-button size="small" @click="handleClickBalanced(row)" :icon="selectedId === row.id ? ArrowRight : ArrowDown" circle title="请点击选中查看"
+									:class="(selectedId === row.id)?'breathe-keyframes btn-select':'btn-not-select'">
+									</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+						<div class="block" style="margin-top: 20px;">
+							<el-pagination
+								@size-change="handleSizeChange"
+								@current-change="handleCurrentChange"
+								:current-page="currentPage"
+								:page-sizes="[10,  30, 50]"
+								:page-size="pageSize"
+								layout="total, sizes, prev, pager, next, jumper"
+								:total="totalNum"
+							></el-pagination>
+						</div>
+					</el-card>
+				</div>
+
+				<div class="part-two">
+					<el-card class="box-card">
+						<div class="two-icon" style="margin-bottom: 14px;">
+							<el-icon size="20" color="#90A0A5"><Guide /></el-icon>
+							<span class="route-title">转发路由</span>
+						</div>
+						<el-collapse v-model="activeName">
+						  <el-collapse-item v-for="(item, index) in routeTable" :key="index" :name='(index + 1)'>
+						    <template #title>
+									<div>
+										<el-tag size="" type="success" style="font-weight: bold; background-color: #FFFFFF; color: #303133;">{{item.name}}
+											<i class="el-icon-circle-check" v-if="item.status === '0'" style="font-size: 12pt; font-weight: bold; color: #409EFF;" title="服务已启用"></i>
+											<i class="el-icon-circle-close" v-if="item.status === '1'" style="font-size: 12pt; font-weight: bold; color: #F56C6C;" title="服务已禁用"></i>
+										</el-tag>
+									</div>
+						    </template>
+						    <div style="line-height: 28px;color: #727CF5; font-weight: bold;"><i class="el-icon-s-promotion" style="font-size: 12pt; font-weight: bold;"></i>&nbsp;&nbsp;{{item.routeId}}</div>
+						    <div style="line-height: 28px;color: #1890FF; font-weight: bold;"><i class="el-icon-connection" style="font-size: 12pt; font-weight: bold;"></i>&nbsp;&nbsp;{{item.uri}}</div>
+						  </el-collapse-item>
+						</el-collapse>
+					</el-card>
+				</div>
+				<div class="part-three">
+					<boxCardComponent ref="boxCard" :balanced-name="balancedName" :route-table="routeTable"></boxCardComponent>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ArrowRight, ArrowDown, Guide, DataAnalysis, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
+</script>
+
+<script>
+	import boxCardComponent from '../component/BoxCard.vue'
+	import {balancedPageList,deleteBalanced,startBalanced,stopBalanced} from '../api/balanced_api.js'
+	import { loadServerRegList } from '../api/balanced_api.js'
+	import axios from "axios";
+
+	export default {
+		data() {
+			return {
+				form:{
+					name: null,
+					groupCode: null,
+					status: null
+				},
+				parent: '/parent/',
+				activeName: 1,
+				formLabelWidth: '140px',
+				gatewayServer:'',
+				tableData: [],
+				currentPage: 1,
+				pageSize: 10,
+				totalNum: 1,
+				selectedId:0,
+				pickerOptions: {
+				  disabledDate(time) {
+					return time.getTime() > Date.now();
+				  }
+				},
+				statusOptions: [
+					{value: null, label: '所有'},
+					{value: '0',label: '启用'},
+					{value: '1',label: '禁用'},
+				],
+				groupOptions: this.GLOBAL_VAR.groups,
+				balancedName: null,
+				routeTable:[]
+			};
+		},
+		components:{
+			boxCardComponent
+		},
+		created: function() {
+			this.init();
+		},
+		mounted: function() {
+		},
+		beforeDestroy: function() {
+		},
+		methods:{
+			init() {
+				this.search();
+			},
+			handleSizeChange(val) {
+				this.pageSize = val;
+				this.search();
+			},
+			handleCurrentChange(val) {
+				this.currentPage = val;
+				this.search();
+			},
+			formatterStatus(row, index){
+				return row.status === '0'?'启用':'禁用';
+			},
+			handleClickBalanced(row){
+				let _this = this;
+				this.selectedId = row.id;
+				this.balancedName = row.name;
+				loadServerRegList({balancedId: row.id}).then(function(result){
+					if (result && result.data){
+						_this.routeTable = result.data;
+						console.log(_this.$refs.boxCard);
+						_this.$refs.boxCard.loadCard(_this.selectedId, result.data);
+					}
+				});
+			},
+			handleCreateBalanced(){
+				this.$router.push({path:'/createBalanced',query:{handleType:'add'}});
+			},
+			handleCommandGateway(obj){
+				let _this = this;
+				if (obj.command === 'edit'){
+					this.$router.push({path:'/createBalanced',query:{handleType:'edit',balanced: obj.row}});
+				} else if (obj.command === 'start'){
+					startBalanced({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'stop'){
+					stopBalanced({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'delete'){
+					this.$confirm('确认删除"'+obj.row.name+'"网关路由？').then(_ => {
+						deleteBalanced({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.search();
+						})
+					}).catch(_ => {});
+				}
+			},
+			handleClose(done) {
+				// this.$confirm('确认关闭？').then(_ => {
+					done();
+				// }).catch(_ => {});
+			},
+			handleCopy(val){
+				let value = this.GLOBAL_VAR.gatewayRoutesURL + this.parent + val;
+				this.GLOBAL_FUN.copy(value);
+			},
+			search(){
+				let _this = this;
+				balancedPageList({name: this.form.name, groupCode: this.form.groupCode, status: this.form.status, currentPage: this.currentPage, pageSize: this.pageSize}).then(function(result){
+					if (result.data && result.data.records){
+						_this.tableData = result.data.records;
+						_this.totalNum = result.data.total;
+						if (_this.tableData.length > 0){
+							_this.handleClickBalanced(_this.tableData[0]);
+						}
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.breathe-keyframes {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-name: breathe;
+  -webkit-animation-duration: 700ms;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+}
+/* vue中@-webkit-keyframes改成@keyframes */
+@keyframes breathe {
+  0% {
+    margin-left: 10px;
+    opacity: 0.75;
+    /* box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3); */
+  }
+  30% {
+    margin-left: 7px;
+    opacity: 0.85;
+    /* box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3); */
+  }
+  66% {
+    margin-left: 4px;
+    opacity: 0.95;
+    /* box-shadow: 0 1px 2px rgba(24, 144, 255, 0.3); */
+  }
+  100% {
+    margin-left: 0px;
+    opacity: 1;
+    /* border: 1px solid rgba(24, 144, 255, 1); */
+    /* box-shadow: 0 1px 10px rgba(24, 144, 255, 1); */
+  }
+}
+
+.btn-select {
+  border: 1px solid rgb(64, 158, 255);
+  font-size: 12pt;
+  color: #409eff;
+  font-weight: 900;
+}
+
+.btn-not-select {
+  border: 1px solid rgb(237, 237, 237);
+  margin-left: 2px;
+  margin-left: 5px;
+  font-size: 12pt;
+  color: rgb(237, 237, 237);
+}
+.route-title {
+  font-size: 14pt;
+  color: #90a0a5;
+  font-weight: bold;
+  margin-left: 6px;
+}
+
+.loadBalanced {
+	height: calc(100% - 95px);
+}
+
+.part-bottom {
+	height: 100%;
+	display: flex;
+	justify-content: space-between;
+	margin-top: 20px;
+
+	.part-one {
+		width: 45%;
+	}
+	.part-two {
+		width: 20%;
+
+		.two-icon {
+			display: flex;
+			align-items: center;
+		}
+	}
+	.part-three {
+		width: 32%;
+	}
+
+	:deep(.el-card__body) {
+		height: 100%;
+	}
+	.box-card-component,
+	.box-card {
+		height: 100%;
+	}
+}
+</style>
+
+
+<style>
+.box-flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.el-dropdown-menu .el-dropdown-menu__item {
+  flex-direction: row !important;
+  align-items: center;
+}
+</style>