Skip to content

A
apaas-ui
Commit 5347c7a4 authored by 张俊's avatar 张俊
Browse files
Options

部署应用详情

parent 14de8ffc
Hide whitespace changes
Inline Side-by-side
Showing with 973 additions and 4 deletions
src/components/infoList.vue
View file @ 5347c7a4
......@@ -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
View file @ 5347c7a4
......@@ -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
View file @ 5347c7a4
......@@ -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 class="appcode" v-html="appcode" slot="app_code"></div>
</info-list>
<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
View file @ 5347c7a4
......@@ -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"),
},
],
}, // 工作台 - 应用管理模块
......
static/approvalappdetail.json 0 → 100644
View file @ 5347c7a4
{
"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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment