From cfc6df4cbf5a8adc7d9f7ab01b56a640e58d0c2e Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 16 Jul 2020 17:37:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90sparkline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/data-analysis/my-service.vue  | 76 ++++++++++++++++++++++++-
 src/pages/workbench/yygl/app_detail.vue | 16 +++++-
 2 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index 647e517..71a8b35 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -70,12 +70,39 @@
                     <p class="hot-line-title">搜索用户数</p>
                     <div class="hot-line-chart">
                       <!-- 折线图 -->
+                      <p class="sparkline-text">
+                        <span>{{sparkline1.num}}</span>
+                        <span :style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}% <img v-if="sparkline1.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="44">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline1.arr"
+                          :limit="sparkline1.arr.length"
+                          :styles="spCurveStyles2"
+                        />
+                      </sparkline>
+                      
                     </div>
                   </div>
                   <div class="hot-line">
                     <p class="hot-line-title">搜索用户数</p>
                     <div class="hot-line-chart">
                       <!-- 折线图 -->
+                      <p class="sparkline-text sparkline-text-user">
+                        <span>{{sparkline2.num}}</span>
+                        <span :style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}">{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}% <img v-if="sparkline2.up>0" src="../../assets/imgs/icon_up.png" alt=""> <img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt=""></span>
+                      </p>
+                      <sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="44">
+                        <sparklineCurve
+                          :refLineStyles="spRefLineStyles3"
+                          :refLineType="false"
+                          :data="sparkline2.arr"
+                          :limit="sparkline2.arr.length"
+                          :styles="spCurveStyles3"
+                        />
+                      </sparkline>
                     </div>
                   </div>
                 </div>
@@ -215,6 +242,30 @@ export default {
       { name: "通用应用", value: 0 },
       { name: "业务应用", value: 2 }
     ],
+    spIndicatorStyles1: false,
+    spRefLineStyles3: {
+      stroke: "#d14",
+      strokeOpacity: 0,
+      strokeDasharray: "2, 2",
+    },
+    spCurveStyles2: {
+      stroke: "#274fee",
+      fill: "#274fee",
+    },
+    spCurveStyles3: {
+      stroke: "#e56600",
+      fill: "#e56600",
+    },
+    sparkline1:{
+      arr:[1,2,3,4,8,9,10,21],
+      num:1231,
+      up:15.3
+    },
+    sparkline2:{
+      arr:[1,2,3,4,8,9,10,21],
+      num:182,
+      up:-19.3
+    },
     text: "应用总数",
     single_data: {
       num: 12,
@@ -602,12 +653,35 @@ export default {
 }
 .hot-line-chart {
   height: calc(100% - 36px);
-  background-color: pink;
+  position: relative;
+}
+.sparkline-text{
+  width: 100%;
+}
+.sparkline-text span:nth-of-type(1){
+  font-size: 20px;
+  color: #274fee;
+}
+.sparkline-text span:nth-of-type(2){
+  font-size: 12px;
+  width: 62px;
+  float: right;
+  text-align: center;
+  line-height: 20px;
+	height: 20px;
+  border-radius: 3px;
+  margin-top: 3px;
+  margin-right: 2px;
+}
+.sparkline-text-user span:nth-of-type(1){
+  font-size: 20px;
+  color: #e56600;
 }
 .topology {
   width: 100%;
   height: calc(100% - 20px);
 }
+
 </style>
 
 <style>
diff --git a/src/pages/workbench/yygl/app_detail.vue b/src/pages/workbench/yygl/app_detail.vue
index 8e7f0da..fdbf8f6 100644
--- a/src/pages/workbench/yygl/app_detail.vue
+++ b/src/pages/workbench/yygl/app_detail.vue
@@ -224,6 +224,16 @@ export default {
     imageDetail,
   },
   data() {
+    var checkname = (rule, value, callback) => {
+      var reg = /^[a-z0-9|-]+$/
+        setTimeout(() => {
+          if (reg.test(value)) {
+            callback();
+          } else {
+            callback(new Error('只支持小写字母 数字 -'));
+          }
+        }, 100);
+      };
     return {
       now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
       buy_style: 0,
@@ -253,7 +263,9 @@ export default {
       },
       fileList: [],
       rules: {
-        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
+        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" },
+                { validator: checkname, trigger: 'blur' }
+              ],
         taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
       },
       tipsOptions: {
@@ -478,6 +490,8 @@ export default {
       if (response.success == 1) {
         this.addImageFlag = false;
         this.$message.success("上传成功");
+        this.now_page = 1;
+        this.image_arr = [];
         this.get_image_list();
       } else {
         this.$message.error(response.errMsg);
-- 
2.26.0