合并

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;

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;

src/pages/approval_app_detail.vue → src/pages/deploy_app_detail.vue

@@ -4,10 +4,7 @@
     <div class="info_contain">
       <service-header
         :data="service_header_arr"
-        @deploy="deploy"
-        @editapp="editapp"
-        @unline="unline"
-        @unsell="unsell"
+        @applymy="applymy"
       ></service-header>
       <div class="type_box">
         <div class="type_title">
@@ -24,9 +21,159 @@
           </div>
         </div>
         <div class="type_box_select">
-          <info-list :list_arr="list_arr" v-if="now_service == 0">
+          <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>
@@ -43,6 +190,9 @@ 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: {
@@ -51,24 +201,139 @@ export default {
     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: "",
@@ -79,7 +344,7 @@ export default {
       service_arr: [
         ["基本信息", "运行状态"],
         ["基本信息", "运行状态"],
-        ["基本信息", "运行状态","服务访问排名"],
+        ["基本信息", "运行状态", "服务访问排名"],
       ],
       service_header_arr: {
         name: "",
@@ -134,9 +399,18 @@ export default {
           type: "solt",
           solt_name: "app_code",
         },
+        {
+          title: "使用说明：",
+          url: "",
+          url1: "",
+          type: "solt",
+          solt_name: "use_know",
+        },
       ],
       appcode: "",
-      addImageFlag: false,
+      showPass: false,
+      public: false,
+      public_form: false,
     };
   },
   watch: {},
@@ -147,10 +421,78 @@ export default {
       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 = "";
@@ -171,9 +513,6 @@ export default {
         .join(";");
       console.log(this.fileList);
     },
-    addImage() {
-      this.addImageFlag = true;
-    },
     actiondelete() {
       this.tipsOptions = {
         title: "",
@@ -234,7 +573,7 @@ export default {
     },
     getServiceInfo() {
       this.$http
-        .get("/static/appdetail.json")
+        .get("/static/approvalappdetail.json")
         .then((response) => {
           let data = response.data.data;
           this.$set(this.service_header_arr, "name", data.appInfo.name);
@@ -246,12 +585,30 @@ export default {
 
     getServiceBaseInfo() {
       this.$http
-        .get("/static/appdetail.json")
+        .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) {});
@@ -274,6 +631,10 @@ export default {
   background-color: #c3caf8;
   color: #0f2683;
 }
+.info_contain2 .el-input__inner {
+  background-color: #f7f8f9;
+  width: 1022px;
+}
 </style>
 <style scoped>
 .detail_contain {
@@ -321,6 +682,25 @@ export default {
 .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;
@@ -341,7 +721,114 @@ export default {
   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>

src/router/index.js

@@ -92,9 +92,9 @@ export default new Router({
               component: () => import("@/pages/app_edit"),
             },
             {
-              path: "/yygl/:level/:type/approvaldetail/:id", // 我部署的应用详情
-              name: "approval_app_detail",
-              component: () => import("@/pages/approval_app_detail"),
+              path: "/yygl/:level/:type/deploydetail/:id", // 我部署的应用详情
+              name: "deploy_app_detail",
+              component: () => import("@/pages/deploy_app_detail"),
             },
           ],
         }, // 工作台 - 应用管理模块

static/approvalappdetail.json

+{
+    "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