@arkxos/arkos-app-gateway-manage 0.1.0

package/src/component/PanThumb/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  data(){
+	return {
+	}  
+  },
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.panThumb {
+	z-index: 100;
+	height: 60px!important;
+	width: 60px!important;
+	position: absolute!important;
+	top: -45px;
+	left: 0px;
+	border: 5px solid #ffffff;
+	background-color: #fff;
+	margin: auto;
+	box-shadow: none!important;
+	::v-deep .pan-info {
+	  box-shadow: none!important;
+	}
+}
+
+.pan-info-roles-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+}
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+  transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
+}
+</style>

package/src/component/RouteAccessChart.vue

@@ -0,0 +1,85 @@
+<template>
+	<div id="routeAccessChart" :style="{ width: '100%', height: '220px'}"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+	import {countBalancedRequest} from '../api/count_api.js'
+
+export default {
+	data() {
+		return {};
+	},
+	methods: {
+		loadAccessCard(balancedId, routeIds, dateType){
+			let _this = this;
+			console.log("balancedId", balancedId);
+			countBalancedRequest({balancedId: balancedId,routeIds: routeIds, dateType:dateType}).then(function(result){
+				if (result && result.data){
+					_this.drawLine(result.data);
+				}
+			});
+		},
+		drawLine(result) {
+			let xAxisData = result.dates;
+			let seriesData = [];
+			result.datas.forEach((row,index)=>{
+				let data = {
+				    name: row.routeId,
+				    type: 'line',
+				    stack: '总量',
+					smooth: true,
+					symbol: 'none',
+				    areaStyle: {},
+				    data: row.counts
+			    }
+				seriesData.push(data);
+			});
+			console.log("chart data", seriesData);
+			let _this = this;
+			// 基于准备好的dom，初始化echarts实例
+			let routeAccessChart = echarts.init(document.getElementById('routeAccessChart'));
+			var colors = ['#00ADD0', '#FFA12F', '#B62AFF', '#727CF5', '#1890FF', '#00f6ff', '#20C0F4', '#95F300', '#04FDB8', '#AF5AFF'];
+			var option = {
+				color: colors,
+			    tooltip: {
+			        trigger: 'axis',
+			        axisPointer: {
+			            type: 'cross',
+			            label: {
+			                backgroundColor: '#6a7985'
+			            }
+			        }
+			    },
+			    grid: {
+					top: '10%',
+			        left: '3%',
+			        right: '4%',
+			        bottom: '3%',
+			        containLabel: true
+			    },
+			    xAxis: [
+			        {
+			            type: 'category',
+			            boundaryGap: false,
+						data: xAxisData
+			        }
+			    ],
+			    yAxis: [
+			        {
+			            type: 'value',
+						boundaryGap: [0, '10%']
+			        }
+			    ],
+			    series: seriesData
+			};
+			// 绘制图表
+			routeAccessChart.setOption(option, true);
+		}
+	},
+}
+
+</script>
+
+<style>
+</style>

package/src/component/RouteInfo.vue

@@ -0,0 +1,146 @@
+<template>
+	<div>
+		<div style="height: 42px; background-color: #2A2E32;font-size: 14pt; font-weight: bold; color: #F0F0F0; padding-top: 18px; padding-left: 20px;">
+			<i class="el-icon-connection"></i>&nbsp;服务详情
+		</div>
+		<!-- <el-divider content-position="left"><span style="color: #606266; ">网关服务详情</span></el-divider> -->
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">服务ID:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small">{{infoForm. id}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">服务名称:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small">{{infoForm.name}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">服务地址:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.uri}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.method != undefined && infoForm.method != ''">
+			<el-col :span="6" class="gateway-info-label">请求模式:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.method}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">断言路径:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.path}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" v-if="infoForm.host != undefined && infoForm.host != ''" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">断言Host:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.host}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" v-if="infoForm.remoteAddr != undefined && infoForm.remoteAddr != ''" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">断言远程地址:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.remoteAddr}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" v-if="infoForm.header != undefined && infoForm.header != ''" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">断言Header:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">{{infoForm.header}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">断言截取:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="success">StripPrefix={{infoForm.stripPrefix}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">请求参数:</el-col>
+			<el-col :span="18" class="gateway-info-value" :title="infoForm.requestParameter"><el-tag size="small" type="success">RequestParameter={{infoForm.requestParameter}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" v-if="infoForm.rewritePath != undefined && infoForm.rewritePath != ''" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">重定向:</el-col>
+			<el-col :span="18" class="gateway-info-value" :title="infoForm.rewritePath"><el-tag size="small" type="success">{{infoForm.rewritePath}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.filterGatewayName != undefined && infoForm.filterGatewayName != ''">
+			<el-col :span="6" class="gateway-info-label">过滤器:</el-col>
+			<el-col :span="18" class="gateway-info-value">
+				<el-tag size="small" v-if="infoForm.filterGatewayName.indexOf('ip') != -1" type="warning">IP</el-tag>
+				<el-tag size="small" v-if="infoForm.filterGatewayName.indexOf('token') != -1" type="warning">TOKEN</el-tag>
+				<el-tag size="small" v-if="infoForm.filterGatewayName.indexOf('id') != -1" type="warning">ID</el-tag>
+			</el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.degradeRuleName != undefined && infoForm.degradeRuleName == 'default'">
+			<el-col :span="6" class="gateway-info-label">熔断器:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="warning">启用</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.flowRuleName != undefined && infoForm.flowRuleName != ''">
+			<el-col :span="6" class="gateway-info-label">限流器:</el-col>
+			<el-col :span="18" class="gateway-info-value">
+				<el-tag size="small" v-if="infoForm.flowRuleName === 'default'" type="warning">直接拒绝</el-tag>
+				<el-tag size="small" v-if="infoForm.flowRuleName === 'warmUp'" type="warning">冷启动</el-tag>
+				<el-tag size="small" v-if="infoForm.flowRuleName === 'rateLimiter'" type="warning">匀速器</el-tag>
+			</el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.filterAuthorizeName != undefined && infoForm.filterAuthorizeName != ''">
+			<el-col :span="6" class="gateway-info-label">鉴权器:</el-col>
+			<el-col :span="18" class="gateway-info-value">
+				<el-collapse accordion>
+				  <el-collapse-item v-if="infoForm.filterAuthorizeName.indexOf('header') != -1">
+					  <template slot="title">
+						  <el-tag size="small" type="warning">HEADER验证</el-tag>
+					  </template>
+					<div><el-tag size="mini" type="">{{infoForm.accessHeader}}</el-tag></div>
+				  </el-collapse-item>
+				  <el-collapse-item v-if="infoForm.filterAuthorizeName.indexOf('ip') != -1">
+					  <template slot="title">
+					  	<el-tag size="small" type="warning">IP验证</el-tag>
+					  </template>
+					<div><el-tag size="mini" type="">ip={{infoForm.accessIp}}</el-tag></div>
+				  </el-collapse-item>
+				  <el-collapse-item v-if="infoForm.filterAuthorizeName.indexOf('parm') != -1">
+					  <template slot="title">
+					  	<el-tag size="small" type="warning">参数验证</el-tag>
+					  </template>
+					<div><el-tag size="mini" type="">{{infoForm.accessParameter}}</el-tag></div>
+				  </el-collapse-item>
+				  <el-collapse-item v-if="infoForm.filterAuthorizeName.indexOf('time') != -1">
+					  <template slot="title">
+					  	<el-tag size="small" type="warning">时间验证</el-tag>
+					  </template>
+					<div><el-tag size="mini" type="">时间区间：{{infoForm.accessTime}}</el-tag></div>
+				  </el-collapse-item>
+				  <el-collapse-item v-if="infoForm.filterAuthorizeName.indexOf('cookie') != -1">
+					  <template slot="title">
+					  	<el-tag size="small" type="warning">Cookie验证</el-tag>
+					  </template>
+					<div><el-tag size="mini" type="">{{infoForm.accessCookie}}</el-tag></div>
+				  </el-collapse-item>
+				</el-collapse>
+			</el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;" v-if="infoForm.cacheTtl != undefined && infoForm.cacheTtl != ''">
+			<el-col :span="6" class="gateway-info-label">缓存时间:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="warning">{{infoForm.cacheTtl}}s</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">创建时间:</el-col>
+			<el-col :span="18" class="gateway-info-value"><el-tag size="small" type="danger">{{infoForm.createTime}}</el-tag></el-col>
+		</el-row>
+		<el-row :gutter="24" style="border: 0px solid red;">
+			<el-col :span="6" class="gateway-info-label">服务状态:</el-col>
+			<el-col :span="18" class="gateway-info-value">
+				<el-tag size="small" type="danger">{{infoForm.status === '0'?'启用':'禁用'}}</el-tag>
+			</el-col>
+		</el-row>
+		<!-- <el-divider content-position="left">服务运行状态</el-divider> -->
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				name:'routeInfo',
+			}
+		},
+		created: function() {
+			this.init();
+		},
+		props:['infoForm'],//父组件传参
+		methods:{
+			init() {
+				console.log('infoForm',this.infoForm)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

package/src/component/RouteRequestCount.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+      <el-dialog :title="dialogTitle" v-model="dialogFormVisible" width="55%" :close-on-click-modal="false">
+            <i class="iconfont icon-icon_renwujincheng" style="font-size: 16pt; color: #90A0A5;"></i>
+            <span class="span_14">7日请求总量</span>
+            <el-divider style="width: 80%;"></el-divider>
+            <div id="route7dayAccessChart" class="chart_line_2"></div>
+            <br/>
+            <i class="iconfont icon-yibiaopan" style="font-size: 16pt; color: #90A0A5;"></i>
+            <span class="span_14">24小时请求总量</span>
+            <el-divider style="width: 80%;"></el-divider>
+            <div id="route24HourAccessChart" class="chart_line_2"></div>
+            <br/>
+            <i class="iconfont icon-yibiaopan" style="font-size: 16pt; color: #90A0A5;"></i>
+            <span class="span_14">60分钟请求总量</span>
+            <el-divider style="width: 80%;"></el-divider>
+            <div id="route60MinAccessChart" class="chart_line_2"></div>
+			<div slot="footer" class="dialog-footer">
+				<el-button icon="el-icon-s-release" size="mini" type="warning" @click="dialogFormVisible = false">关 闭</el-button>
+			</div>
+		</el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {countAppRequestTotal} from '../api/count_api.js'
+export default {
+  data() {
+    return {
+      name: "routeRequestCount",
+      dialogFormVisible: false,
+      dialogTitle: '统计详情'
+    };
+  },
+  created: function () {
+  },
+  methods: {
+    count(obj){
+        this.dialogTitle = obj.name +　'统计详情';
+        let _this = this;
+        countAppRequestTotal({id:obj.id}).then(function(result){
+            console.log(result);
+            if (result.data){
+                _this.drawLine('route7dayAccessChart', result.data.dayCounts, '#37A2FF','rgba(128, 255, 165)', 'rgba(1, 191, 236)');
+                _this.drawLine('route24HourAccessChart', result.data.hourCounts, '#FFBF00','rgba(55, 162, 255)', 'rgba(116, 21, 219)');
+                _this.drawLine('route60MinAccessChart', result.data.minCounts, '#00DDFF', 'rgba(0, 221, 255)', 'rgba(77, 119, 255)');
+            }
+        });
+    },
+    drawLine(id, result, color, color0, color1) {
+        let xAxisData =  [];
+        let seriesData = [];
+        if (result != undefined && result.dates && result.counts){
+            xAxisData = result.dates;
+            seriesData = result.counts;
+        }
+        //console.log("chart data", seriesData);
+        let _this = this;
+        // 基于准备好的dom，初始化echarts实例
+        let accessChart = echarts.init(document.getElementById(id));
+        //渐变色效果
+        var option = {
+            // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#00DDFF', '#FFBF00'],
+            color: [color],
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        backgroundColor: '#6a7985'
+                    }
+                }
+            },
+            grid: {
+                top: '5%',
+                left: '1%',
+                right: '2%',
+                bottom: '1%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData
+                }
+            ],
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    type: 'line',
+                    smooth: true,
+                    showSymbol: true,
+                    areaStyle: {
+                        opacity: 0.8,
+                        color: echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0,
+                            color: color0
+                        }, {
+                            offset: 1,
+                            color: color1
+                        }])
+                    },
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    data: seriesData
+                }
+            ]
+        };
+        // 绘制图表
+        accessChart.setOption(option, true);
+    }
+  }
+};
+</script>
+
+<style>
+.chart_line_2 {
+    width: 100%;
+    height: 180px;
+}
+</style>

package/src/component/TextHoverEffect/Mallki.vue

@@ -0,0 +1,120 @@
+<template>
+  <a :class="className" class="link--mallki" href="#">
+    {{ text }}
+    <span :data-letters="text" />
+    <span :data-letters="text" />
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: 'vue-element-admin'
+    }
+  }
+}
+</script>
+
+<style>
+/* Mallki */
+.mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+	float: right;
+  }
+.link--mallki {
+  font-weight: 800;
+  color: #4dd9d5;
+  font-family: 'Dosis', sans-serif;
+  -webkit-transition: color 0.5s 0.25s;
+  transition: color 0.5s 0.25s;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  outline: none;
+  text-decoration: none;
+}
+
+.link--mallki:hover {
+  -webkit-transition: none;
+  transition: none;
+  color: transparent;
+}
+
+.link--mallki::before {
+  content: '';
+  width: 100%;
+  height: 6px;
+  margin: -3px 0 0 0;
+  background: #3888fa;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s;
+  transition: transform 0.4s;
+  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.link--mallki:hover::before {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.link--mallki span {
+  position: absolute;
+  height: 50%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.link--mallki span::before {
+  content: attr(data-letters);
+  color: red;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  color: #3888fa;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+}
+
+.link--mallki span:nth-child(2) {
+  top: 50%;
+}
+
+.link--mallki span:first-child::before {
+  top: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+}
+
+.link--mallki span:nth-child(2)::before {
+  bottom: 0;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.link--mallki:hover span::before {
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+</style>

package/src/configs/subApp.ts

@@ -0,0 +1,9 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 对应 package.json/appGroupName
+|
+|--------------------------------------------------------------------------
+*/
+
+export const LIB_NAME = '@arkxos/arkos-app-gateway-manage'

package/src/entrance/libProperties.ts

@@ -0,0 +1,30 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 这些组件暴露给使用方
+|
+|--------------------------------------------------------------------------
+*/
+// import Store from '../store/modules/index';
+import constantRoutes from '../router/constantRoutes';
+// import dynamicRoutes from '../router/dynamicRoutes';
+import loadComponent from '../router/loadComponent';
+import { RouteRecordRaw } from 'vue-router';
+// 自定义指令
+
+// 注册插件
+import plugins from '../plugins/index'; // plugins
+
+const staticRoutes: RouteRecordRaw[] = [];
+staticRoutes.push(...constantRoutes)
+// staticRoutes.push(...dynamicRoutes)
+
+export const comps = {
+  staticRoutes: staticRoutes,
+  loadComponent: loadComponent,
+  // store: Store,
+  install: plugins
+}
+export type LibProperties = typeof comps;
+
+export default comps