From c4a104dcc31da24c55f8e9349a9e92b1b4749a94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BF=8A?= <zhangjun@aochuang.cn>
Date: Sat, 4 Jul 2020 21:25:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/components/apass-table.vue                |  94 +++++-
 src/components/service-header.vue             |  10 +-
 src/main.js                                   |   4 +
 src/pages/workbench/yygl/app_debugger.vue     | 299 ++++++++++++++++++
 .../workbench/yygl/deploy_app_detail.vue      |  11 +-
 src/router/index.js                           |   6 +
 7 files changed, 417 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/workbench/yygl/app_debugger.vue

diff --git a/package.json b/package.json
index bfb624e..a17acec 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "terser-webpack-plugin": "^1.2.3",
     "url-loader": "^1.1.2",
     "vue-loader": "^15.7.0",
+    "vue-sparklines": "^0.2.1",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
     "vux": "^2.9.4",
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index bfab22d..ce4dd8e 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="apass_table">
-    <el-table :data="data">
-      <el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column>
+    <el-table :data="data" :height="height">
+      <el-table-column :width="Math.max(paddingLeft - 10, 0)" v-if="icon"></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
@@ -43,6 +43,25 @@
               @click="item.callback && item.callback(scope.row)"
             ></a>
           </div>
+          <div v-else-if="item.type === 'icon'">
+            <img src="../assets/imgs/btn_off_hov.png" alt="" v-if="scope.row[item.prop]==1" style="width:100%;height:100%;">
+          </div>
+          <div v-else-if="item.type === 'tag'" class="table_tag">
+            <el-tag
+              v-for="(item,index) in scope.row[item.prop]" v-if="index<=1||tag_flag_arr[scope.$index]==1"
+              :key="index+5515">
+              {{ item }}
+            </el-tag>
+            <div class="tagclo" v-if="tag_flag_arr[scope.$index]==0&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,1)">下</div>
+            <div class="tagclo" v-if="tag_flag_arr[scope.$index]==1&&scope.row[item.prop].length>2" @click="change_tag(scope.$index,0)">上</div>
+          </div>
+          <div v-else-if="item.type === 'chart'" class="charts">
+            <sparkline :indicatorStyles="spIndicatorStyles1">
+              <sparklineCurve :refLineStyles="spRefLineStyles3" :refLineType="false" :data="scope.row[item.prop]" :limit="scope.row[item.prop].length" :styles="item.prop=='cpu'?spCurveStyles2:spCurveStyles3" />
+            </sparkline>
+            <span class="use" v-if="item.prop=='cpu'">{{scope.row['cpu_use']}}.00mm</span>
+            <span class="use" v-if="item.prop=='mermoy'">{{scope.row['memory_use']}}.00Mi</span>
+          </div>
           <span
             v-else
             v-text="
@@ -70,6 +89,77 @@ export default {
       type: [Number, String],
       default: () => 50,
     },
+    icon:{
+      type: Boolean,
+      default: true,
+    },
+    height:{
+      type: Number,
+      default: null,
+    },
+  },
+  data(){
+    return{
+      tag_flag_arr:[],
+      spCurveStyles2: {
+        stroke: '#515fe7',
+        fill: '#d2d6f8'
+      },
+      spCurveStyles3: {
+        stroke: '#37c299',
+        fill: '#c8ebe4'
+      },
+      // 指示器样式
+      spIndicatorStyles1: false,
+      spRefLineStyles3:{
+        stroke: '#d14',
+        strokeOpacity: 0,
+        strokeDasharray: '2, 2'
+      },
+    }
   },
+  mounted(){
+    this.tag_flag_arr = Array.from({length: this.data.length},(item,index)=>item = 0)
+    
+  },
+  methods:{
+    change_tag(index,val){
+      this.$set(this.tag_flag_arr,index,val)
+    }
+  }
 };
 </script>
+
+<style>
+.table_tag .el-tag{
+  background-color: #58617a;
+  color: #fff;
+  display: inline-block;
+  height: 22px;
+  padding: 0 5px;
+  line-height: 22px;
+  font-size: 12px;
+  border-radius: 4px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+}
+.tagclo{
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 22px;
+  cursor: pointer;
+}
+.charts{
+  position: relative;
+}
+.charts .use{
+  position: absolute;
+  bottom:0;
+  right: -10px;
+  font-size: 12px;
+  color: rgba(26, 34, 54, 1);
+}
+</style>
diff --git a/src/components/service-header.vue b/src/components/service-header.vue
index cc1870e..937b375 100644
--- a/src/components/service-header.vue
+++ b/src/components/service-header.vue
@@ -8,11 +8,13 @@
         <span>{{ data.name }}</span>
         <span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span>
         <span class="info_fix" v-if="data.fxdetail" @click="subevent(1)">我要编辑</span>
-        <span class="right gap" v-if="data.yydetail||data.xxdetail">|</span>
+        <span class="info_fix" v-if="data.yydebugger" @click="subevent(5)">应用调试</span>
+        <span class="right gap" v-if="data.yydetail||data.xxdetail||data.yydev">|</span>
         <span class="right underline" v-if="data.xxdetail" @click="subevent(2)" title="申请下线至开发者应用">{{data.xxdetail}}</span>
         <span class="right undersell" v-if="data.yydetail" @click="subevent(3)">{{data.yydetail}}</span>
         <span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span>
         <span class="info_fix" v-if="data.fixed" @click="goto_page(data.fixedurl)">我要修改</span>
+        <span class="info_fix" v-if="data.yydev" @click="subevent(6)">应用开发</span>
       </p>
       <div class="info_detail">
         <p>
@@ -56,6 +58,7 @@ export default {
   mounted() {},
   methods: {
       subevent(val){
+        debugger
           if(val == 0){
               // this.$emit('deploy',this.data)
               this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}`)
@@ -68,6 +71,11 @@ export default {
               this.$emit('unsell',this.data)
           }else if(val == 4){
               this.$emit('applymy')
+          }else if(val == 5){
+              // /yygl/:level/:type/appdebugger/:deploy_id
+              this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger/111`)
+          }else if(val == 6){
+              this.$emit('applymy')
           }
       },
       goto_page(url){
diff --git a/src/main.js b/src/main.js
index e6a32bf..eede66c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,10 @@ import "echarts/lib/component/title"; // 标题
 import 'echarts/lib/component/polar'; // 极坐标系
 import 'echarts/lib/chart/scatter'; // 散点图
 
+import Sparkline from 'vue-sparklines'
+
+Vue.use(Sparkline)
+
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
 
diff --git a/src/pages/workbench/yygl/app_debugger.vue b/src/pages/workbench/yygl/app_debugger.vue
new file mode 100644
index 0000000..27e7bc0
--- /dev/null
+++ b/src/pages/workbench/yygl/app_debugger.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="detail_contain">
+      <p class="now_page_title">
+      我的应用 / 部署的应用 /
+      <span>应用详情</span>
+    </p> 
+    <div class="search_header">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="工作区域">
+                <el-select v-model="formInline.area" placeholder="工作区域">
+                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in area_arr" :key="index+7800"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="应用">
+                <el-select v-model="formInline.name" placeholder="应用">
+                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in app_arr" :key="index+7800"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="float:right;">
+                <el-button type="primary" style="width:90px;backgroundColor:#495feb;color:#e6ebfe;" @click="onSubmit">查询</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+    <div class="search_list">
+        <div class="list_header">
+            <span></span>容器组
+            <el-input placeholder="请输入内容" style="float:right;" v-model="pod_name" prefix-icon="el-icon-search"></el-input>
+        </div>
+        <div style="padding:20px;padding-top:0px;">
+            <apass-table :header="header_arr" :data="tableData" :icon="false" :height="560"></apass-table>
+            <list-pagination
+                :total="listTotal"
+                :page-sizes="pageSizes"
+                :page-size="pageSize"
+                :current-page="currentPage"
+                @size-change="changePageSize"
+                @current-change="changeCurrentPage"
+            ></list-pagination>
+        </div>
+    </div>
+  </div>
+</template>
+ 
+<script>
+import apassTable from "@/components/apass-table";
+import ListPagination from "@/components/comments-pagination";
+export default {
+  components: {
+    apassTable,
+    ListPagination
+  },
+  data() {
+    return {
+        listTotal: 0,
+        currentPage: 1,
+        pageSize: 10,
+        pageSizes: [10, 50, 100],
+        formInline:{
+            area:'',
+            name:''
+        },
+        pod_name:'',
+        area_arr:[
+            {
+                value:1,
+                label:'apaas',
+            },
+            {
+                value:2,
+                label:'apaas1',
+            },
+            {
+                value:3,
+                label:'apaas2',
+            },
+        ],
+        app_arr:[
+            {
+                value:1,
+                label:'mapvideos',
+            },
+            {
+                value:2,
+                label:'mapvideos1',
+            },
+            {
+                value:3,
+                label:'mapvideos2',
+            },
+        ],
+        tableData:[
+            {
+                icon:'1',
+                name:'1',
+                tag:['1','222'],
+                node:'1',
+                state:'1',
+                times:'1',
+                cpu:[1,2,34,5],
+                cpu_use:34,
+                mermoy:[1,2,34,10],
+                memory_use:45,
+                time:'1'
+            },
+            {
+                icon:'1',
+                name:'1',
+                tag:['1','2','3'],
+                node:'1',
+                state:'1',
+                times:'1',
+                cpu:[1,2,34,5],
+                cpu_use:4,
+                mermoy:[1,2,34,50],
+                memory_use:45,
+                time:'1'
+            },
+          
+        ],
+        header_arr:[]
+    };
+  },
+  created() {
+
+  },
+  mounted() {
+      this.header_arr = [
+              {
+                prop: "icon",
+                label: "",
+                width: 40,
+                align: "left",
+                type:"icon",
+              },
+              {
+                prop: "name",
+                label: "名称",
+                minWidth: "20%",
+                align: "left",
+                type: "button",
+                callback(item) {
+                  _this.$router.push(`/authority/users/detail/${item.user_id}`);
+                },
+              },
+              {
+                prop: "tag",
+                label: "标签",
+                minWidth: "20%",
+                align: "left",
+                type: "tag",
+              },
+              {
+                prop: "node",
+                label: "节点",
+                width: 80,
+                align: "left",
+              },
+              {
+                prop: "state",
+                label: "状态",
+                width: 80,
+                align: "center",
+              },
+              {
+                prop: "times",
+                label: "重启",
+                width: 50,
+                align: "center",
+              },
+              {
+                prop: "cpu",
+                label: "cpu使用率",
+                width: 100,
+                align: "center",
+                type:"chart"
+              },
+              {
+                prop: "mermoy",
+                label: "内存使用",
+                width: 100,
+                align: "center",
+                type:"chart"
+              },
+              {
+                prop: "time",
+                label: "创建时间",
+                width: 140,
+                align: "center",
+              },
+              {
+                label: "操作",
+                type: "buttons",
+                width: "120px",
+                align: "center",
+                width: 300,
+                actionList: [
+                  {
+                    label: "日志",
+                    callback: this.adelete,
+                  },
+                  {
+                    label: "调试",
+                    callback: this.adelete,
+                  },
+                  {
+                    label: "查看",
+                    callback: this.adelete,
+                  },
+                  {
+                    label: "删除",
+                    callback: this.adelete,
+                  },
+                ],
+              },
+            ];
+  },
+  methods: {
+    get_list_app(){
+        this.$http
+        .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
+        .then(response => {
+          if(response.data.success){
+            this.service_list_arr = response.data.data
+          }
+        })
+    },
+    onSubmit(){
+
+    },
+    changePageSize(value) {
+        this.pageSize = value;
+        this.currentPage = 1;
+        
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+      
+    },
+  }
+};
+</script>
+ 
+
+<style>
+.list_header .el-input {
+  width: 228px;
+} 
+.list_header .el-input__inner {
+  background-color: #f7f8f9;
+  width: 228px;
+} 
+</style>
+<style scoped>
+.detail_contain {
+  width: 100%;
+  padding: 0 20px;
+  height: calc(100% - 55px);
+}
+.now_page_title {
+  margin: 15px 0;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.search_header{
+    width: 100%;
+	height: 80px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+    border-radius: 12px;
+    padding: 20px;
+}
+.search_list{
+    width: 100%;
+    height: calc(100% - 110px);
+    margin-top: 20px;
+    background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+}
+.list_header{
+    height: 80px;
+    border-bottom: 1px solid #e3e5ef;
+    padding: 20px;
+}
+.list_header span{
+    width: 4px;
+	height: 16px;
+	background-color: #515fe7;
+    border-radius: 2px;
+    display: inline-block;
+    margin-right: 10px;
+    margin-top: 10px;
+    vertical-align: -2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/workbench/yygl/deploy_app_detail.vue b/src/pages/workbench/yygl/deploy_app_detail.vue
index 106c4f1..b7d99b6 100644
--- a/src/pages/workbench/yygl/deploy_app_detail.vue
+++ b/src/pages/workbench/yygl/deploy_app_detail.vue
@@ -3,9 +3,9 @@
     <p class="now_page_title">
       我的应用 / 部署的应用 /
       <span>应用详情</span>
-    </p>
+    </p> 
     <div class="info_contain">
-      <service-header :data="service_header_arr" @applymy="applymy"></service-header>
+      <service-header :data="service_header_arr" ></service-header>
       <div class="type_box">
         <div class="type_title">
           <div
@@ -127,7 +127,7 @@
             <p class="service_title" style="margin-top:20px;">
               <span></span>微服务
             </p>
-            <div style="overflow:hidden;height:700px;">
+            <div style="overflow:hidden;height:700px;" class="limit-elscroll">
               <el-scrollbar class="service_list">
                 <div class="service_box" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
               </el-scrollbar>
@@ -517,7 +517,8 @@ export default {
             text: ""
           }
         ],
-        bsdetail: true,
+        yydebugger: true,
+        yydev:true,
         url: ""
       },
       now_service: 0,
@@ -799,7 +800,7 @@ export default {
 </script>
 
 <style>
-.el-scrollbar__wrap {
+.elscroll .el-scrollbar__wrap {
   overflow-x: hidden;
 }
 .savebtn .el-button {
diff --git a/src/router/index.js b/src/router/index.js
index 8e83af7..a70d2b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -97,6 +97,12 @@ export default new Router({
               component: () =>
                 import("@/pages/workbench/yygl/deploy_app_detail"),
             },
+            {
+              path: "/yygl/:level/:type/appdebugger/:deploy_id", // 我部署的应用详情-应用调试
+              name: "app_debugger",
+              component: () =>
+                import("@/pages/workbench/yygl/app_debugger"),
+            },
             {
               path: "/yygl/:level/:type/applydetail/:id/:app_id", // 我申请的应用详情
               name: "apply_app_detail",
-- 
2.26.0