From 5347c7a466521d88834f4984bbcb3fbaadaf321e Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Wed, 20 May 2020 16:29:20 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E7=BD=B2=E5=BA=94=E7=94=A8=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/infoList.vue       |   8 +-
 src/components/service-header.vue |   7 +
 src/pages/approval_app_detail.vue | 347 -------------
 src/pages/deploy_app_detail.vue   | 834 ++++++++++++++++++++++++++++++
 src/router/index.js               |   6 +-
 static/approvalappdetail.json     | 122 +++++
 6 files changed, 973 insertions(+), 351 deletions(-)
 delete mode 100644 src/pages/approval_app_detail.vue
 create mode 100644 src/pages/deploy_app_detail.vue
 create mode 100644 static/approvalappdetail.json

diff --git a/src/components/infoList.vue b/src/components/infoList.vue
index e943ea6..8abb778 100644
--- a/src/components/infoList.vue
+++ b/src/components/infoList.vue
@@ -6,7 +6,10 @@
         {{ item.title }}
       </p>
       <p v-if="!(item.prop && item.prop == 'title')">
-        <span v-html="item.info" style="white-space:pre-wrap;"></span>
+        <span v-if="item.type == 'url'" style="white-space:pre-wrap;"
+          >访问地址: <a :href="item.info" target="_blank">{{ item.info }}</a></span
+        >
+        <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
         <span v-if="item.type && item.type == 'down'" class="filebtn"
           >下载文件</span
         >
@@ -31,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+a {
+  text-decoration: none;
+}
 .list p {
   line-height: 32px;
   color: #8890a7;
diff --git a/src/components/service-header.vue b/src/components/service-header.vue
index e7dd52e..bce30ce 100644
--- a/src/components/service-header.vue
+++ b/src/components/service-header.vue
@@ -9,6 +9,7 @@
         <span class="right gap" v-if="data.yydetail">|</span>
         <span class="right underline" v-if="data.yydetail" @click="subevent(2)" title="申请下线至开发者应用">申请下线</span>
         <span class="right undersell" v-if="data.yydetail" @click="subevent(3)">申请下架</span>
+        <span class="right undersell undermy" v-if="data.bsdetail" @click="subevent(4)">申请密钥</span>
         <span class="info_fix" v-if="data.fixed">我要修改</span>
       </p>
       <div class="info_detail">
@@ -59,6 +60,8 @@ export default {
               this.$emit('unline',0)
           }else if(val == 3){
               this.$emit('unsell',1)
+          }else if(val == 4){
+              this.$emit('applymy',1)
           }
       }
   },
@@ -148,6 +151,10 @@ export default {
     cursor: pointer;
     text-align: center;
 }
+.undermy{
+    background-color: #515fe7;
+    color: #e6ebfe;
+}
 .info_detail {
   width: 100%;
   height: 96px;
diff --git a/src/pages/approval_app_detail.vue b/src/pages/approval_app_detail.vue
deleted file mode 100644
index dc9c8c8..0000000
--- a/src/pages/approval_app_detail.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<template>
-  <div class="detail_contain">
-    <p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
-    <div class="info_contain">
-      <service-header
-        :data="service_header_arr"
-        @deploy="deploy"
-        @editapp="editapp"
-        @unline="unline"
-        @unsell="unsell"
-      ></service-header>
-      <div class="type_box">
-        <div class="type_title">
-          <div
-            v-for="(item, index) in service_arr[now_user]"
-            :key="index + 1000"
-            class="type_select"
-            @click="now_service = index"
-            :style="
-              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
-            "
-          >
-            {{ item }}
-          </div>
-        </div>
-        <div class="type_box_select">
-          <info-list :list_arr="list_arr" v-if="now_service == 0">
-            <div class="appcode" v-html="appcode" slot="app_code"></div>
-          </info-list>
-        </div>
-      </div>
-    </div>
-    <dialog-action
-      ref="myConfirm"
-      :confirmOptions="tipsOptions"
-    ></dialog-action>
-  </div>
-</template>
-
-<script>
-import infoList from "../components/infoList";
-import tableUm from "../components/table-um";
-import serviceHeader from "../components/service-header";
-import dialogAction from "@/components/dialog-action";
-import uploadFile from "@/components/upload_file";
-import { getRole } from "../utils/common";
-export default {
-  components: {
-    infoList,
-    tableUm,
-    serviceHeader,
-    dialogAction,
-    uploadFile,
-  },
-  data() {
-    return {
-      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
-      buy_style: 0,
-      oldpag_name: "镜像文件002.rar",
-      imgList: [],
-      imgList1: [],
-      form: {
-        name: "",
-        fileList: "",
-        taps: "",
-      },
-      fileList: "",
-      rules: {
-        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
-        taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
-      },
-      tipsOptions: {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      },
-      service_arr: [
-        ["基本信息", "运行状态"],
-        ["基本信息", "运行状态"],
-        ["基本信息", "运行状态","服务访问排名"],
-      ],
-      service_header_arr: {
-        name: "",
-        first: [],
-        second: [],
-        bsdetail: true,
-      },
-      now_service: 0,
-      header_arr: [
-        {
-          prop: "jxmc",
-          label: "镜像名称",
-          minWidth: "33.33%",
-          align: "center",
-        },
-        {
-          prop: "bbh",
-          label: "版本号",
-          minWidth: "33.33%",
-          align: "center",
-        },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          minWidth: "33.33%",
-          btnList: [
-            {
-              type: "actiondelete",
-              label: "删除",
-            },
-          ],
-        },
-      ],
-
-      list_arr: [
-        {
-          title: "应用简介：",
-          info: "",
-        },
-        {
-          title: "功能简介：",
-          info: "",
-        },
-        {
-          title: "应用场景：",
-          info: "",
-        },
-        {
-          title: "应用参数：",
-          info: "",
-          type: "solt",
-          solt_name: "app_code",
-        },
-      ],
-      appcode: "",
-      addImageFlag: false,
-    };
-  },
-  watch: {},
-  created() {
-    this.now_user = this.$store.state.role;
-    getRole().then((data) => {
-      this.now_user = data;
-      this.$store.commit("rolefun", data);
-      this.getServiceInfo();
-      this.getServiceBaseInfo();
-    });
-  },
-  mounted() {},
-  methods: {
-    getNewList(val) {
-      console.log(val);
-      this.form.fileList = "";
-      this.form.fileList = url
-        .map((v, k) => {
-          return v.url;
-        })
-        .join(";");
-      console.log(this.form.fileList);
-    },
-    getNewList1(val) {
-      console.log(val);
-      this.fileList = "";
-      this.fileList = url
-        .map((v, k) => {
-          return v.url;
-        })
-        .join(";");
-      console.log(this.fileList);
-    },
-    addImage() {
-      this.addImageFlag = true;
-    },
-    actiondelete() {
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message = "是否删除该数据";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    deploy() {
-      console.log("0000");
-    },
-    editapp() {
-      console.log("11111");
-    },
-    unline(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.position = "left";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    unsell(val) {
-      console.log(val);
-      this.tipsOptions = {
-        title: "",
-        message: "",
-        btnSubmitText: "",
-        btnCancelText: "",
-        position: "",
-      };
-      this.tipsOptions.message =
-        "申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。";
-      this.tipsOptions.btnSubmitText = "发送通知";
-      this.tipsOptions.confirmSubmit = () => {
-        console.log("deleteItem - ");
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
-    },
-    getServiceInfo() {
-      this.$http
-        .get("/static/appdetail.json")
-        .then((response) => {
-          let data = response.data.data;
-          this.$set(this.service_header_arr, "name", data.appInfo.name);
-          this.$set(this.service_header_arr, "first", data.appInfo.first);
-          this.$set(this.service_header_arr, "second", data.appInfo.second);
-        })
-        .catch(function(response) {});
-    },
-
-    getServiceBaseInfo() {
-      this.$http
-        .get("/static/appdetail.json")
-        .then((response) => {
-          let data = response.data.data;
-          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
-          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
-          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
-          this.appcode = data.appbaseinfo.appcode;
-        })
-        .catch(function(response) {});
-    },
-  },
-};
-</script>
-
-<style>
-.savebtn .el-button {
-  float: right;
-  margin-left: 20px;
-  letter-spacing: 2px;
-}
-.savebtn .el-button:nth-of-type(1) {
-  background-color: #0f2683;
-  color: #f8f9fd;
-}
-.savebtn .el-button:nth-of-type(2) {
-  background-color: #c3caf8;
-  color: #0f2683;
-}
-</style>
-<style scoped>
-.detail_contain {
-  width: 100%;
-  padding: 0 20px;
-  height: calc(100% - 55px);
-}
-.info_contain {
-  padding: 25px 20px;
-  background-color: #fff;
-  width: 100%;
-  box-shadow: 0px 3px 6px 0px #f4f7fc;
-  border-radius: 12px;
-  min-height: calc(100% - 20px);
-  margin-bottom: 20px;
-}
-.now_page_title {
-  margin: 15px 0;
-  color: #898d9e;
-}
-.now_page_title span {
-  color: #242c43;
-}
-.type_box {
-  width: 100%;
-}
-.type_title {
-  width: 100%;
-  height: 65px;
-  line-height: 65px;
-  border-bottom: 2px solid #f4f7fc;
-}
-.type_select {
-  float: left;
-  width: auto;
-  margin-right: 40px;
-  height: 65px;
-  cursor: pointer;
-}
-.type_box_select {
-  padding: 30px 10px 10px 10px;
-  width: 100%;
-}
-
-.savebtn {
-  margin-top: 50px;
-  overflow: hidden;
-}
-.appcode {
-  white-space: pre-wrap;
-  width: 100%;
-  background-color: #f8f9fd;
-  border-radius: 8px;
-  padding: 24px;
-  color: #58617a;
-}
-.addimage {
-  display: inline-block;
-  color: #f8f9fd;
-  font-size: 16px;
-  width: 124px;
-  height: 44px;
-  line-height: 44px;
-  text-align: center;
-  background-color: #0f2683;
-  border-radius: 8px;
-  margin-top: 20px;
-  cursor: pointer;
-}
-
-</style>
diff --git a/src/pages/deploy_app_detail.vue b/src/pages/deploy_app_detail.vue
new file mode 100644
index 0000000..2376416
--- /dev/null
+++ b/src/pages/deploy_app_detail.vue
@@ -0,0 +1,834 @@
+<template>
+  <div class="detail_contain">
+    <p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p>
+    <div class="info_contain">
+      <service-header
+        :data="service_header_arr"
+        @applymy="applymy"
+      ></service-header>
+      <div class="type_box">
+        <div class="type_title">
+          <div
+            v-for="(item, index) in service_arr[now_user]"
+            :key="index + 1000"
+            class="type_select"
+            @click="now_service = index"
+            :style="
+              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
+            "
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="type_box_select">
+          <div v-if="now_service == 0" class="info_contain2">
+            <info-list :list_arr="list_arr">
+              <div class="appcode" v-html="appcode" slot="app_code"></div>
+              <div slot="use_know0">
+                访问地址:
+                <a :href="list_arr[4].url" target="_blank">{{
+                  list_arr[4].url
+                }}</a>
+              </div>
+              <div slot="use_know1" class="use_know">
+                <p>
+                  <span>主机名或IP地址</span
+                  ><span>{{ list_arr[4].url.ip }}</span>
+                </p>
+                <p>
+                  <span>端口</span><span>{{ list_arr[4].url.port }}</span>
+                </p>
+                <p>
+                  <span>用户名</span><span>{{ list_arr[4].url.user }}</span>
+                </p>
+                <p>
+                  <span>密码</span
+                  ><span>{{
+                    showPass ? list_arr[4].url.password : this.list_arr[4].url1
+                  }}</span>
+                  <i @click="showpass" class="el-icon-view"></i>
+                </p>
+              </div>
+              <div slot="use_know2" class="use_know2">
+                <p>
+                  {{ list_arr[4].url.text }}
+                  <span @click="gotoview(list_arr[4].url.url)">浏览文件</span>
+                </p>
+              </div>
+            </info-list>
+
+            <div
+              @click="public_form = true"
+              v-if="public"
+              class="addimage"
+              title="将该应用以服务的形式发布至服务超市"
+            >
+              服务发布
+            </div>
+            <el-form
+              :model="formInline"
+              label-width="0px"
+              :rules="rules1"
+              ref="ruleForm"
+              v-if="public_form"
+            >
+              <el-form-item prop="area">
+                <p class="formname">服务领域：</p>
+                <el-select v-model="formInline.area" placeholder="请选择">
+                  <el-option
+                    v-for="item in area_arr"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="resource">
+                <p class="formname">开放程度：</p>
+                <el-radio-group v-model="formInline.resource">
+                  <el-radio label="共享"></el-radio>
+                  <el-radio label="受限"></el-radio>
+                  <el-radio label="敏感"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <div class="savebtn">
+                  <div class="btnsty" @click="public_form = false">取消</div>
+                  <div class="btnsty" @click="saveInfo('ruleForm')">保存</div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div v-if="now_service == 1&&image_arr.length">
+            <p class="service_title"><span></span>应用概况</p>
+            <div class="service_title_card">
+              <nor-card title="应用状态" class="service_card">
+                <template>
+                  <div style="height:115px;padding-top:10px;">
+                    <example-icon style="margin:10px auto;"></example-icon>
+                    <p
+                      style="color: #58617a;font-size: 16px;text-align:center;"
+                    >
+                      {{ yx_state.state }}
+                    </p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="平均响应时间" class="service_card">
+                <template>
+                  <div style="height:115px;" class="service_num">
+                    <p>{{ yx_state.averageTime }}</p>
+                    <p>最大响应时间：{{ yx_state.maxTime }}</p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="吞吐率" class="service_card">
+                <template>
+                  <div style="height:115px;" class="service_num">
+                    <p>{{ yx_state.averageTraffic }}</p>
+                    <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
+                  </div>
+                </template>
+              </nor-card>
+              <nor-card title="资源使用" class="service_card">
+                <template>
+                  <div
+                    style="height:115px;padding-top:30px;"
+                    class="service_num"
+                  >
+                    <p>{{ yx_state.memory }}</p>
+                  </div>
+                </template>
+              </nor-card>
+            </div>
+            <p class="service_title" style="margin-top:20px;">
+              <span></span>应用设置
+            </p>
+            <div class="addimage">多版本回滚</div>
+            <p class="imagebox" >
+              <span
+                @click="image_select = index"
+                :style="
+                  image_select == index
+                    ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
+                    : {}
+                "
+                v-for="(item, index) in image_arr"
+                :key="index + 6000"
+                >{{ item.name }}</span
+              >
+            </p>
+            <table-um
+            v-for="(item, index) in image_arr"
+            :key="index+7000"
+            v-show="image_select == index"
+              :headers="header_image_arr"
+              :datas="image_arr[index].data"
+              :stripe="true"
+              :paginationShow="true"
+              @update="update"
+              @rollback="rollback"
+              @grouppublic="grouppublic"
+              @online="online"
+            ></table-um>
+          </div>
+        </div>
+      </div>
+    </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirmOptions="tipsOptions"
+    ></dialog-action>
+  </div>
+</template>
+
+<script>
+import infoList from "../components/infoList";
+import tableUm from "../components/table-um";
+import serviceHeader from "../components/service-header";
+import dialogAction from "@/components/dialog-action";
+import uploadFile from "@/components/upload_file";
+import norCard from "@/components/card";
+import exampleIcon from "@/pages/example_icon";
+import Topology from "@/components/topology.vue";
+import { getRole } from "../utils/common";
+export default {
+  components: {
+    infoList,
+    tableUm,
+    serviceHeader,
+    dialogAction,
+    uploadFile,
+    norCard,
+    Topology,
+    exampleIcon,
+  },
+  data() {
+    return {
+      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
+      buy_style: 0,
+      image_select: 0,
+      oldpag_name: "镜像文件002.rar",
+      imgList: [],
+      imgList1: [],
+      yx_state: {
+        state: "",
+        averageTime: "",
+        maxTime: "",
+        averageTraffic: "",
+        maxTraffic: "",
+        memory: "",
+      },
+      image_arr: [],
+      area_arr: [
+        {
+          label: "经济建设",
+          value: 0,
+        },
+        {
+          label: "城市管理",
+          value: 1,
+        },
+        {
+          label: "城市建设",
+          value: 2,
+        },
+        {
+          label: "道路交通",
+          value: 3,
+        },
+        {
+          label: "环境资源",
+          value: 4,
+        },
+        {
+          label: "民生服务",
+          value: 5,
+        },
+        {
+          label: "空间地理",
+          value: 6,
+        },
+        {
+          label: "文化休闲",
+          value: 7,
+        },
+        {
+          label: "社会团体",
+          value: 8,
+        },
+        {
+          label: "教育机构",
+          value: 9,
+        },
+        {
+          label: "其他",
+          value: 10,
+        },
+      ],
+      form: {
+        name: "",
+        fileList: "",
+        taps: "",
+      },
+      formInline: {
+        area: "",
+        resource: "",
+      },
+      fileList: "",
+      rules: {
+        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
+        taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }],
+      },
+      rules1: {
+        area: [
+          { required: true, message: "请选择服务领域", trigger: "change" },
+        ],
+        resource: [
+          { required: true, message: "请选择开放程度", trigger: "change" },
+        ],
+      },
+      header_image_arr:[
+          {
+              prop:'vision',
+              label:'版本号',
+              minWidth: "20%",
+              align: "center",
+          },
+          {
+              prop:'state',
+              label:'状态',
+              minWidth: "20%",
+              align: "center",
+          },
+          {
+              prop:'date',
+              label:'在线日期',
+              minWidth: "30%",
+              align: "center",
+          },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            minWidth: "30%",
+            btnList: [
+                {
+                    type: "update",
+                    label: "升级",
+                },
+                {
+                    type: "rollback",
+                    label: "回退",
+                },
+                {
+                    type: "grouppublic",
+                    label: "蓝绿发布",
+                },
+                {
+                    type: "online",
+                    label: "下线",
+                },
+            ],
+        },
+      ],
+      tipsOptions: {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      },
+      service_arr: [
+        ["基本信息", "运行状态"],
+        ["基本信息", "运行状态"],
+        ["基本信息", "运行状态", "服务访问排名"],
+      ],
+      service_header_arr: {
+        name: "",
+        first: [],
+        second: [],
+        bsdetail: true,
+      },
+      now_service: 0,
+      header_arr: [
+        {
+          prop: "jxmc",
+          label: "镜像名称",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          prop: "bbh",
+          label: "版本号",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          minWidth: "33.33%",
+          btnList: [
+            {
+              type: "actiondelete",
+              label: "删除",
+            },
+          ],
+        },
+      ],
+
+      list_arr: [
+        {
+          title: "应用简介：",
+          info: "",
+        },
+        {
+          title: "功能简介：",
+          info: "",
+        },
+        {
+          title: "应用场景：",
+          info: "",
+        },
+        {
+          title: "应用参数：",
+          info: "",
+          type: "solt",
+          solt_name: "app_code",
+        },
+        {
+          title: "使用说明：",
+          url: "",
+          url1: "",
+          type: "solt",
+          solt_name: "use_know",
+        },
+      ],
+      appcode: "",
+      showPass: false,
+      public: false,
+      public_form: false,
+    };
+  },
+  watch: {},
+  created() {
+    this.now_user = this.$store.state.role;
+    getRole().then((data) => {
+      this.now_user = data;
+      this.$store.commit("rolefun", data);
+      this.getServiceInfo();
+      this.getServiceBaseInfo();
+      this.getServiceyxztInfo();
+      this.getImageInfo();
+    });
+  },
+  mounted() {},
+  methods: {
+      update(val){
+          console.log(val);
+      },
+      rollback(val){
+          console.log(val);
+      },
+      grouppublic(val){
+          console.log(val);
+      },
+      online(val){
+          console.log(val);
+      },
+    getImageInfo() {
+      this.$http
+        .get("/static/approvalappdetail.json")
+        .then((response) => {
+          console.log(response);
+          let data = response.data.data;
+          this.image_arr = data.imagearr;
+        })
+        .catch(function(response) {});
+    },
+    getServiceyxztInfo() {
+      this.$http
+        .get("/static/servicedetail1.json")
+        .then((response) => {
+          console.log(response);
+          let data = response.data.data;
+          this.yx_state = data.serviceyxzt;
+        })
+        .catch(function(response) {});
+    },
+    saveInfo(name) {
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    gotoview(url) {
+      console.log(url);
+    },
+    showpass() {
+      this.showPass = !this.showPass;
+    },
+    applymy(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    getNewList(val) {
+      console.log(val);
+      this.form.fileList = "";
+      this.form.fileList = url
+        .map((v, k) => {
+          return v.url;
+        })
+        .join(";");
+      console.log(this.form.fileList);
+    },
+    getNewList1(val) {
+      console.log(val);
+      this.fileList = "";
+      this.fileList = url
+        .map((v, k) => {
+          return v.url;
+        })
+        .join(";");
+      console.log(this.fileList);
+    },
+    actiondelete() {
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message = "是否删除该数据";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    deploy() {
+      console.log("0000");
+    },
+    editapp() {
+      console.log("11111");
+    },
+    unline(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "该操作会将该应用从应用商店的平台应用区域下线至开发者应用区域，下线前需向超级管理员发送通知，超级管理员通过后此应用将下线至开发者应用区域。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.position = "left";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    unsell(val) {
+      console.log(val);
+      this.tipsOptions = {
+        title: "",
+        message: "",
+        btnSubmitText: "",
+        btnCancelText: "",
+        position: "",
+      };
+      this.tipsOptions.message =
+        "申请下架应用需要向组织管理员发送通知，组织管理员通过下架请求后该应用将从应用商店下架。";
+      this.tipsOptions.btnSubmitText = "发送通知";
+      this.tipsOptions.confirmSubmit = () => {
+        console.log("deleteItem - ");
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    getServiceInfo() {
+      this.$http
+        .get("/static/approvalappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.service_header_arr, "name", data.appInfo.name);
+          this.$set(this.service_header_arr, "first", data.appInfo.first);
+          this.$set(this.service_header_arr, "second", data.appInfo.second);
+        })
+        .catch(function(response) {});
+    },
+
+    getServiceBaseInfo() {
+      this.$http
+        .get("/static/approvalappdetail.json")
+        .then((response) => {
+          let data = response.data.data;
+          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
+          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
+          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
+          this.$set(
+            this.list_arr[4],
+            "solt_name",
+            "use_know" + data.appbaseinfo.state
+          );
+          if (data.appbaseinfo.state == 0) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url);
+          } else if (data.appbaseinfo.state == 1) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url1);
+            var temp = "";
+            data.appbaseinfo.url1.password.split("").forEach((e) => {
+              temp = temp + "*";
+            });
+            this.$set(this.list_arr[4], "url1", temp);
+          } else if (data.appbaseinfo.state == 2) {
+            this.$set(this.list_arr[4], "url", data.appbaseinfo.url2);
+            this.public = data.appbaseinfo.public;
+          }
+          this.appcode = data.appbaseinfo.appcode;
+        })
+        .catch(function(response) {});
+    },
+  },
+};
+</script>
+
+<style>
+.savebtn .el-button {
+  float: right;
+  margin-left: 20px;
+  letter-spacing: 2px;
+}
+.savebtn .el-button:nth-of-type(1) {
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.savebtn .el-button:nth-of-type(2) {
+  background-color: #c3caf8;
+  color: #0f2683;
+}
+.info_contain2 .el-input__inner {
+  background-color: #f7f8f9;
+  width: 1022px;
+}
+</style>
+<style scoped>
+.detail_contain {
+  width: 100%;
+  padding: 0 20px;
+  height: calc(100% - 55px);
+}
+.info_contain {
+  padding: 25px 20px;
+  background-color: #fff;
+  width: 100%;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  min-height: calc(100% - 20px);
+  margin-bottom: 20px;
+}
+.now_page_title {
+  margin: 15px 0;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.type_box {
+  width: 100%;
+}
+.type_title {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.type_select {
+  float: left;
+  width: auto;
+  margin-right: 40px;
+  height: 65px;
+  cursor: pointer;
+}
+.type_box_select {
+  padding: 30px 10px 10px 10px;
+  width: 100%;
+}
+
+.savebtn {
+  margin-top: 50px;
+  overflow: hidden;
+  float: right;
+}
+.savebtn div {
+  float: left;
+  width: 124px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  margin-left: 20px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.savebtn div:nth-of-type(1) {
+  background-color: #e1e4fb;
+  color: #0f2683;
+}
+.savebtn div:nth-of-type(2) {
+  background-color: #0f2683;
+  color: #f8f9fd;
+}
+.appcode {
+  white-space: pre-wrap;
+  width: 100%;
+  background-color: #f8f9fd;
+  border-radius: 8px;
+  padding: 24px;
+  color: #58617a;
+}
+.addimage {
+  display: inline-block;
+  color: #f8f9fd;
+  font-size: 16px;
+  width: 124px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  background-color: #0f2683;
+  border-radius: 8px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  cursor: pointer;
+}
+.use_know p {
+  height: 44px;
+  line-height: 44px;
+  color: #1a2236;
+}
+.use_know p:nth-of-type(2n) {
+  background-color: #f8f9fd;
+}
+.use_know p span {
+  display: inline-block;
+}
+.use_know p span:nth-of-type(1) {
+  width: 150px;
+  font-weight: 600;
+}
+.use_know p span:nth-of-type(2) {
+  width: 250px;
+  color: #58617a;
+}
+.el-icon-view {
+  cursor: pointer;
+}
+.use_know2 p {
+  color: #242c43;
+}
+.use_know2 p span {
+  width: 76px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: #515fe7;
+  border-radius: 8px;
+  display: inline-block;
+  color: #e6ebfe;
+  cursor: pointer;
+}
+.formname {
+  color: #8890a7;
+}
+.service_title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #58617a;
+  text-align: left;
+  height: 40px;
+  line-height: 40px;
+  margin-top: -10px;
+  margin-bottom: 20px;
+}
+.service_title span {
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  float: left;
+  margin-top: 13px;
+  margin-right: 15px;
+}
+.service_title_card {
+  width: 100%;
+  overflow: hidden;
+}
+.service_card {
+  width: calc((100% - 120px) / 4);
+  margin-right: 40px;
+  float: left;
+}
+.service_title_card .service_card:nth-last-of-type(1) {
+  margin-right: 0px;
+}
+.service_num {
+  text-align: center;
+  padding-top: 10px;
+}
+.service_num p:nth-of-type(1) {
+  font-size: 36px;
+  color: #3f4f9c;
+  margin-bottom: 10px;
+}
+.service_num p:nth-of-type(2) {
+  font-size: 16px;
+  color: #58617a;
+}
+.imagebox {
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.imagebox span {
+  width: 165px;
+  height: 34px;
+  padding: 0 10px;
+  line-height: 34px;
+  text-align: center;
+  margin-right: 10px;
+  background-color: #f7f8f9;
+  border-radius: 6px;
+  color: #6573ae;
+  cursor: pointer;
+  float: left;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /*设置p元素最大4行，父元素需填写宽度才明显*/
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 008d604..62f8826 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -92,9 +92,9 @@ export default new Router({
               component: () => import("@/pages/app_edit"),
             },
             {
-              path: "/yyglapprovaldetail/:level/1", // 应用仓库编辑
-              name: "approval_app_detail",
-              component: () => import("@/pages/approval_app_detail"),
+              path: "/yygldeploydetail/:level/1", // 部署仓库编辑
+              name: "deploy_app_detail",
+              component: () => import("@/pages/deploy_app_detail"),
             },
           ],
         }, // 工作台 - 应用管理模块
diff --git a/static/approvalappdetail.json b/static/approvalappdetail.json
new file mode 100644
index 0000000..8f1d704
--- /dev/null
+++ b/static/approvalappdetail.json
@@ -0,0 +1,122 @@
+{
+    "data":{
+        "appInfo":{
+            "name":"Mapvideos",
+            "pic":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589794724576&di=d0bff81ff3bb08f3120b3eb2bac58024&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F21%2F20151121171107_zMZcy.thumb.700_0.jpeg",
+            "first": [
+                {
+                    "name": "业务类型",
+                    "text": "业务应用"
+                },
+                {
+                    "name": "业务领域",
+                    "text": "应急领域"
+                }
+            ],
+            "second": [
+                {
+                    "name": "上架区域",
+                    "text": "应用商店"
+                },
+                {
+                    "name": "部署区域",
+                    "text": "apaas"
+                },
+                {
+                    "name":"部署时间",
+                    "text":"2019-11-28"
+                }
+            ]
+        },
+        "appbaseinfo":{
+            "intorduce":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "action":"<p>1、在地图上查找视频设备\n 2、在地图上定位视频设备位置；\n3、调用多路视频的实时视频数据；\n4、操作球机视频设备</p>",
+            "use":"本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作，包括实时视频流数据的调用和对视频设备的操作，",
+            "appcode":"<p>repository: 'hub.wodcloud.com/apaas/apaas-mapvideos'\ntag: '1.0.0'\n\nhost: 'mapvideo.wodcloud.local'</p>",
+            "url":"http://www.baidu.com",
+            "url1":{
+                "ip":"localhost",
+                "port":1122,
+                "user":"root",
+                "password":"1231231"
+            },
+            "url2":{
+                "text":"xxxx使用说明.doc",
+                "url":"http://www.baidu.com"
+            },
+            "state":2,
+            "public":true
+        },
+        "imagearr":[
+            {
+                "name":"apaas-mapvideos镜像1123123123123",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像2",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.1",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            },
+            {
+                "name":"apaas-mapvideos镜像3",
+                "data":[
+                    {
+                        "id":1,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":2,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    },
+                    {
+                        "id":3,
+                        "vision":"V1.0.2",
+                        "state":"运行中",
+                        "date":"2020-05-07 09:10:47"
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
-- 
2.26.0