Skip to content

A
apaas-ui
Commit 9a1ad0cb authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'dev' into ldx

parents 5061a3db 9676b341
Show whitespace changes
Inline Side-by-side
Showing with 2208 additions and 306 deletions
src/components/app-build-step.vue 0 → 100644
View file @ 9a1ad0cb
<template>
<div class="app_build_step" v-show="isActive">
<slot></slot>
</div>
</template>
<script>
export default {
name: "appBuildStep",
props: {
title: {
type: String,
required: true,
},
step: {
type: Number,
required: true,
},
activeIcon: {
type: String,
default: () => "",
},
},
data: () => ({}),
computed: {
isActive() {
return this.$parent.activeStep === this.step;
},
},
mounted() {
console.log();
},
};
</script>
src/components/app-build-steps.vue 0 → 100644
View file @ 9a1ad0cb
<template>
<div class="app_build_steps">
<ul class="steps_header">
<template v-for="(item, index) in steps">
<li
class="step_line left"
:class="{
active: item.step <= activeStep,
}"
v-if="item.step > 0"
:key="'line_left_' + index"
></li>
<li
class="step_item"
:class="{
active: item.step <= activeStep,
current: item.step === activeStep,
}"
:key="'step_' + index"
>
<div class="step_icon_active" v-if="item.step <= activeStep">
<div class="icon_container">
<img :src="item.activeIcon" />
</div>
</div>
<div class="step_icon" v-else></div>
<div class="step_info">
<p class="step_state">
<span v-show="item.step > activeStep">
待进行
</span>
<span v-show="item.step === activeStep">
进行中
</span>
<span v-show="item.step < activeStep">
已完成
</span>
</p>
<p class="step_name" v-text="item.title"></p>
</div>
</li>
<li
class="step_line right"
:class="{
active: item.step <= activeStep,
}"
v-if="item.step < steps.length - 1"
:key="'line_right_' + index"
></li>
</template>
</ul>
<div class="steps_container">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "appBuildSteps",
props: {
activeStep: {
type: Number,
default: () => "",
},
},
data: () => ({
steps: [],
}),
computed: {},
methods: {
getSteps() {
this.steps = this.$slots.default
.filter(
(vnode) =>
vnode.tag &&
vnode.componentOptions &&
vnode.componentOptions.Ctor.options.name === "appBuildStep"
)
.map((vnode) => vnode.componentInstance);
},
},
mounted() {
this.getSteps();
},
};
</script>
<style scoped>
.steps_header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.steps_header > .step_line {
flex-grow: 1;
height: 4px;
background-color: #e3e5ef;
}
.steps_header > .step_line.right {
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
.steps_header > .step_line.active {
background-color: #515fe7;
}
.steps_header > .step_item {
display: inline-flex;
justify-content: flex-start;
align-items: center;
color: #bcc1d0;
}
.steps_header > .step_item > .step_icon {
width: 30px;
height: 30px;
background-color: #bcc1d0;
border: 7px solid #e3e5ef;
border-radius: 50%;
box-sizing: border-box;
}
.steps_header > .step_item > .step_icon_active {
padding: 10px;
background-color: #515fe7;
border-radius: 50%;
}
.steps_header > .step_item > .step_icon_active > .icon_container {
width: 60px;
height: 60px;
border: 3px solid #8390ee;
box-sizing: border-box;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.steps_header > .step_item > .step_info {
margin: 0 15px;
}
.steps_header > .step_item .step_state {
font-size: 18px;
line-height: 34px;
}
.steps_header > .step_item .step_name {
font-size: 14px;
line-height: 24px;
}
.steps_header > .step_item.active .step_state {
color: #242c43;
}
.steps_header > .step_item.active .step_name {
color: #8890a7;
}
.steps_container {
border-top: 2px solid #f4f7fc;
margin-top: 20px;
}
</style>
src/components/infoList.vue
View file @ 9a1ad0cb
...@@ -6,8 +6,11 @@ ...@@ -6,8 +6,11 @@
{{ item.title }} {{ item.title }}
</p> </p>
<p v-if="!(item.prop && item.prop == 'title')"> <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;"
<span v-if="item.type && item.type == 'down'" class="filebtn" >访问地址: <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" @click="download(item.url)"
>下载文件</span >下载文件</span
> >
</p> </p>
...@@ -25,12 +28,20 @@ export default { ...@@ -25,12 +28,20 @@ export default {
}, },
props: ["list_arr"], props: ["list_arr"],
mounted() { mounted() {
console.log(this.$solts); console.log(this.$slots);
}, },
methods:{
download(val){
this.$emit('download',val)
}
}
}; };
</script> </script>
<style scoped> <style scoped>
a {
text-decoration: none;
}
.list p { .list p {
line-height: 32px; line-height: 32px;
color: #8890a7; color: #8890a7;
...@@ -44,13 +55,13 @@ export default { ...@@ -44,13 +55,13 @@ export default {
.outlist .list:nth-last-of-type(1) { .outlist .list:nth-last-of-type(1) {
margin: 0; margin: 0;
} }
.service_title { .list .service_title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #58617a; color: #58617a;
text-align: left; text-align: left;
height: 40px; height: 40px;
line-height: 40px; line-height: 34px;
margin-top: -10px; margin-top: -10px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: -10px; margin-left: -10px;
......
src/components/service-header.vue
View file @ 9a1ad0cb
...@@ -4,11 +4,12 @@ ...@@ -4,11 +4,12 @@
<div class="info"> <div class="info">
<p class="info_title"> <p class="info_title">
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
<span class="bs" v-if="data.yydetail" @click="subevent(0)">一键部署</span> <span class="bs" v-if="data.aqdetail" @click="subevent(0)">一键部署</span>
<span class="info_fix" v-if="data.yydetail" @click="subevent(1)">我要编辑</span> <span class="info_fix" v-if="data.yydetail" @click="subevent(1)">我要编辑</span>
<span class="right gap" v-if="data.yydetail">|</span> <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 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" 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> <span class="info_fix" v-if="data.fixed">我要修改</span>
</p> </p>
<div class="info_detail"> <div class="info_detail">
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
:href="item.text" :href="item.text"
>{{ item.text }}</a >{{ item.text }}</a
> >
<span v-else>{{ item.text }}</span> <span v-else :style="item.color ? { color: item.color } : {}">{{ item.text }}</span>
</label> </label>
</p> </p>
</div> </div>
...@@ -52,13 +53,15 @@ export default { ...@@ -52,13 +53,15 @@ export default {
methods: { methods: {
subevent(val){ subevent(val){
if(val == 0){ if(val == 0){
this.$emit('deploy') this.$emit('deploy',this.data)
}else if(val == 1){ }else if(val == 1){
this.$emit('editapp') this.$emit('editapp')
}else if(val == 2){ }else if(val == 2){
this.$emit('unline',0) this.$emit('unline',0)
}else if(val == 3){ }else if(val == 3){
this.$emit('unsell',1) this.$emit('unsell',1)
}else if(val == 4){
this.$emit('applymy',1)
} }
} }
}, },
...@@ -148,6 +151,10 @@ export default { ...@@ -148,6 +151,10 @@ export default {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.undermy{
background-color: #515fe7;
color: #e6ebfe;
}
.info_detail { .info_detail {
width: 100%; width: 100%;
height: 96px; height: 96px;
......
src/components/table-um.vue
View file @ 9a1ad0cb
...@@ -176,6 +176,18 @@ ...@@ -176,6 +176,18 @@
> >
<div slot="reference" class="overlit">{{ scope.row[item.prop] }}</div> <div slot="reference" class="overlit">{{ scope.row[item.prop] }}</div>
</el-popover> </el-popover>
<!-- 排名图标替换 -->
<span v-else-if="item.type === 'rank'">
<img src="../assets/imgs/list_ic_topone.png" alt="" v-if="scope.row[item.prop]==1">
<img src="../assets/imgs/list_ic_toptwo.png" alt="" v-if="scope.row[item.prop]==2">
<img src="../assets/imgs/list_ic_topthree.png" alt="" v-if="scope.row[item.prop]==3">
{{ [1,2,3].indexOf(scope.row[item.prop])!==-1?'':scope.row[item.prop] }}
</span>
<!-- 服务添加图标 -->
<span v-else-if="item.type === 'hot'" :style="scope.row['hot']?{marginLeft:'-12px'}:{}">
<img src="../assets/imgs/list_ic_hot.png" alt="" v-if="scope.row['hot']">
{{ scope.row[item.prop] }}
</span>
<!-- others --> <!-- others -->
<span v-else>{{ scope.row[item.prop] }}</span> <span v-else>{{ scope.row[item.prop] }}</span>
</template> </template>
......
src/pages/app_build.vue 0 → 100644
View file @ 9a1ad0cb
<template>
<div class="app_build-container">
<div class="sevice_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
<el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
</el-breadcrumb>
</div>
<app-build-steps :active-step="step">
<app-build-step
title="上传应用镜像"
:step="0"
:active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
>
<h3 style="margin: 30px 0;">上传应用镜像</h3>
<div class="step_action">
<el-button type="primary" @click="nextStep">
下一步
</el-button>
</div>
</app-build-step>
<app-build-step
title="上传部署文件"
:step="1"
:active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
>
<h3 style="margin: 30px 0;">上传部署文件</h3>
<div class="step_action">
<el-button type="primary" plain @click="preStep">
上一步
</el-button>
<el-button type="primary" @click="nextStep">
下一步
</el-button>
</div>
</app-build-step>
<app-build-step
title="应用基础信息填写"
:step="2"
:active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
>
<h3 style="margin: 30px 0;">用基础信息填写</h3>
<div class="step_action">
<el-button type="primary" plain @click="preStep">
上一步
</el-button>
<el-button type="primary" @click="sunbmitAction">
提交
</el-button>
</div>
</app-build-step>
</app-build-steps>
</div>
</template>
<script>
import appBuildSteps from "@/components/app-build-steps";
import appBuildStep from "@/components/app-build-step";
export default {
components: {
appBuildSteps,
appBuildStep,
},
data: () => ({
step: 0,
}),
methods: {
preStep() {
this.step--;
},
nextStep() {
this.step++;
},
sunbmitAction() {
console.log("submit action");
},
},
};
</script>
<style scoped>
.app_build-container {
max-width: 1200px;
margin: -157px auto 20px;
}
.app_build-container > .app_build_steps {
border-radius: 12px;
background-color: #fff;
padding: 30px;
}
.step_action {
text-align: right;
}
.step_action > .el-button {
min-width: 124px;
height: 44px;
margin-right: 30px;
}
.step_action > .el-button--primary {
color: #fff;
background-color: #0f2683;
border-color: #0f2683;
}
.step_action > .el-button--primary.is-plain {
color: #0f2683;
background-color: #e1e4fb;
border-color: #e1e4fb;
}
</style>
<style>
.app_build-container .sevice_breadcrumb {
padding: 0 20px;
}
.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
color: #626de9;
}
.app_build-container
.sevice_breadcrumb
> .el-breadcrumb
.el-breadcrumb__item:last-child
.el-breadcrumb__inner {
color: #b4c0f5;
}
</style>
src/pages/app_detail.vue
View file @ 9a1ad0cb
...@@ -149,6 +149,7 @@ export default { ...@@ -149,6 +149,7 @@ export default {
first: [], first: [],
second: [], second: [],
yydetail: true, yydetail: true,
aqdetail: true,
}, },
now_service: 0, now_service: 0,
header_arr: [ header_arr: [
......
src/pages/apply_app_detail.vue 0 → 100644
View file @ 9a1ad0cb
<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"
@deploy="deploy"
></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr"
: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="
now_service == 0
? list_arr
: servicead_arr
"
>
<div class="appcode" v-html="appcode" slot="app_code"></div>
<process-card :data="approval_arr3" slot="approval"></process-card>
</info-list>
</div>
</div>
</div>
</div>
</template>
<script>
import serviceHeader from "../components/service-header";
import infoList from "../components/infoList";
import tableUm from "../components/table-um";
import processCard from "../components/process-card";
import { getRole } from "../utils/common";
export default {
props: {},
components: {
serviceHeader,
infoList,
tableUm,
processCard,
},
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
approval_arr: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
],
approval_arr1: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批未通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "不同意，驳回。",
},
],
},
],
approval_arr2: [
{
title: "一级审批",
result: "审批未通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "不同意，驳回。",
},
],
},
],
approval_arr3:[
{
title: "一级审批",
result: "审批中",
},
],
service_arr: ["基本信息", "申请审批信息"],
service_header_arr: {
id:"",
name: "",
first: [],
second: [],
aqdetail: true,
},
now_service: 0,
list_arr: [
{
title: "应用简介：",
info: "",
},
{
title: "功能简介：",
info: "",
},
{
title: "应用场景：",
info: "",
},
{
title: "应用参数：",
info: "",
type: "solt",
solt_name: "app_code",
},
{
title: "联系人：",
info: "",
},
{
title: "联系电话：",
info: "",
},
],
servicead_arr: [
{
title: "申请信息",
prop:"title",
},
{
title: "应用场景：",
info: "",
},
{
title: "申请文件：",
info: "",
url:"",
type:"down"
},
{
title: "申请规格：",
info: "",
},
{
title: "审批信息",
prop:"title",
},
{
title: "",
type: "solt",
solt_name: "approval",
},
],
appcode:"",
};
},
watch: {},
computed: {},
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.getServiceapplyInfo();
});
},
mounted() {},
methods: {
getServiceapplyInfo() {
this.$http
.get("/static/applyappdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.servicead_arr[1], "info", data.appapplyinfo.scene);
this.$set(this.servicead_arr[2], "info", data.appapplyinfo.filename);
this.$set(this.servicead_arr[2], "url", data.appapplyinfo.fileurl);
this.$set(this.servicead_arr[3], "info", data.appapplyinfo.size);
})
.catch(function(response) {});
},
getServiceBaseInfo() {
this.$http
.get("/static/applyappdetail.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], "info", data.appbaseinfo.person);
this.$set(this.list_arr[5], "info", data.appbaseinfo.phone);
this.appcode = data.appbaseinfo.appcode;
})
.catch(function(response) {});
},
deploy(val){
console.log(val);
},
getServiceInfo() {
this.$http
.get("/static/applyappdetail.json")
.then((response) => {
let data = response.data.data;
this.$set(this.service_header_arr, "id", data.appInfo.id);
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) {
});
},
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();
},
},
};
</script>
<style scoped>
.detail_contain {
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
}
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
}
.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%;
}
.appcode {
white-space: pre-wrap;
width: 100%;
background-color: #f8f9fd;
border-radius: 8px;
padding: 24px;
color: #58617a;
}
</style>
src/pages/approval_app_detail.vue
View file @ 9a1ad0cb
<template> <template>
<div class="detail_contain"> <div class="detail_contain">
<p class="now_page_title">我的应用 / 应用仓库 / <span>应用详情</span></p> <p class="now_page_title">
应用管理 / 应用审批管理 /
<span>应用审批</span>
</p>
<div class="info_contain"> <div class="info_contain">
<service-header <service-header :data="service_header_arr"></service-header>
:data="service_header_arr"
@deploy="deploy"
@editapp="editapp"
@unline="unline"
@unsell="unsell"
></service-header>
<div class="type_box"> <div class="type_box">
<div class="type_title"> <div class="type_title">
<div <div
v-for="(item, index) in service_arr[now_user]" v-for="(item,index) in service_arr"
:key="index + 1000" :key="index+1000"
class="type_select" class="type_select"
@click="now_service = index" @click="now_service=index"
:style=" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}"
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {} >{{item}}</div>
"
>
{{ item }}
</div>
</div> </div>
<div class="type_box_select"> <div class="type_box_select">
<info-list :list_arr="list_arr" v-if="now_service == 0"> <info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
<div class="appcode" v-html="appcode" slot="app_code"></div> <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
<process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
<div class="info_contain1" slot="sp_result">
<el-form ref="form" :rules="rules" :model="form" label-width="0px">
<el-form-item prop="result">
<p class="formname">审批结果：</p>
<el-select v-model="form.result" placeholder="请选择">
<el-option
v-for="item in resultoptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="option">
<p class="formname">审批意见：</p>
<el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
</el-form-item>
<el-form-item class="btnsty">
<el-button @click="onSubmit('form')" class="right">提交</el-button>
<el-button class="right">取消</el-button>
</el-form-item>
</el-form>
</div>
</info-list> </info-list>
</div> </div>
</div> </div>
</div> </div>
<dialog-action
ref="myConfirm"
:confirmOptions="tipsOptions"
></dialog-action>
</div> </div>
</template> </template>
<script> <script>
import serviceHeader from "../components/service-header";
import infoList from "../components/infoList"; import infoList from "../components/infoList";
import tableUm from "../components/table-um"; import tableUm from "../components/table-um";
import serviceHeader from "../components/service-header"; import processCard from "../components/process-card";
import dialogAction from "@/components/dialog-action"; import {getRole} from "../utils/common"
import uploadFile from "@/components/upload_file";
import { getRole } from "../utils/common";
export default { export default {
props: {},
components: { components: {
serviceHeader,
infoList, infoList,
tableUm, tableUm,
serviceHeader, processCard
dialogAction,
uploadFile,
}, },
data() { data() {
return { return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员 form:{
buy_style: 0, result:'',
oldpag_name: "镜像文件002.rar", option:''
imgList: [], },
imgList1: [], now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
form: { rules:{
name: "", result:[
fileList: "", { required: true, message: '请选择意见', trigger: 'change' },
taps: "", ],
option:[
{ required: true, message: '请输入意见', trigger: 'blur' },
{
min: 10, message: '长度大于10个字符', trigger: 'blur'
}
]
},
resultvalue: "",
resultoptions: [
{
label: "通过",
value: 1
}, },
fileList: "", {
rules: { label: "不通过",
name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }], value: 0
taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }], }
],
approval_arr:[
[],
[],
[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
}, },
tipsOptions: { {
title: "", title:'审批单位：',
message: "", info:'某某某城管局'
btnSubmitText: "", },
btnCancelText: "", {
position: "", title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
}, },
service_arr: [
["基本信息", "运行状态"],
["基本信息", "运行状态"],
["基本信息", "运行状态","服务访问排名"],
], ],
],
header_arr: [
{
prop: "zdmc",
label: "字段名称",
minWidth: "20%",
align: "left"
},
{
prop: "zdbm",
label: "字段编码",
width: "100px",
align: "center"
},
{
prop: "zdlx",
label: "字段类型",
width: "100px",
align: "center"
},
{
prop: "zdsm",
label: "字段说明",
minWidth: "30%",
align: "left"
},
{
prop: "zdsl",
label: "字段示例数值",
width: "120px",
align: "left"
}
],
service_header_arr: { service_header_arr: {
name: "", name: "",
pic:"",
first: [], first: [],
second: [], second: [],
bsdetail: true,
}, },
service_arr: ["应用申请信息", "应用审批"],
now_service: 0, now_service: 0,
header_arr: [ servicead_arr: [
[],
[
{ {
prop: "jxmc", title: "一级审批：",
label: "镜像名称", prop: "title",
minWidth: "33.33%", type: "solt",
align: "center", solt_name: "sp_result"
}, },
],
[
{ {
prop: "bbh", title: "审批信息：",
label: "版本号", prop: "title",
minWidth: "33.33%", type: "solt",
align: "center", solt_name: "sp_card"
}, },
{ {
label: "操作", title: "二级审批：",
type: "Button", prop: "title",
align: "center", type: "solt",
minWidth: "33.33%", solt_name: "sp_result"
btnList: [
{
type: "actiondelete",
label: "删除",
}, },
], ],
},
], ],
list_arr: [ list_arr: [
{ {
title: "应用简介：", title: "申请单位：",
info: "", info: ""
}, },
{ {
title: "功能简介：", title: "申请人：",
info: "", info: ""
}, },
{ {
title: "应用场景：", title: "申请人联系电话：",
info: "", info: ""
},
{
title: "场景描述：",
info: ""
}, },
{ {
title: "应用参数：", title: "申请文件：",
info: "", info: "",
type: "solt", url:"",
solt_name: "app_code", type: "down"
}, },
], {
appcode: "", title: "申请时间：",
addImageFlag: false, info: ""
}
]
}; };
}, },
watch: {}, watch: {},
computed: {},
created() { created() {
this.now_user = this.$store.state.role; this.now_user = this.$store.state.role;
getRole().then((data) => { getRole().then((data) => {
this.now_user = data; this.now_user = data;
console.log(data);
this.$store.commit("rolefun", data); this.$store.commit("rolefun", data);
this.getServiceInfo(); this.getheaderinfo();
this.getServiceBaseInfo(); this.getapplyinfo();
}); });
}, },
mounted() {}, mounted() {},
methods: { methods: {
getNewList(val) { getapplyinfo(){
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 this.$http
.get("/static/appdetail.json") .get("/static/approvalappdetail.json")
.then((response) => { .then((response) => {
let data = response.data.data; let data = response.data.data;
this.$set(this.service_header_arr, "name", data.appInfo.name); this.$set(this.list_arr[0], "info", data.appbaseinfo.company);
this.$set(this.service_header_arr, "first", data.appInfo.first); this.$set(this.list_arr[1], "info", data.appbaseinfo.person);
this.$set(this.service_header_arr, "second", data.appInfo.second); this.$set(this.list_arr[2], "info", data.appbaseinfo.phone);
this.$set(this.list_arr[3], "info", data.appbaseinfo.desc);
this.$set(this.list_arr[4], "info", data.appbaseinfo.filename);
this.$set(this.list_arr[4], "url", data.appbaseinfo.fileurl);
this.$set(this.list_arr[5], "info", data.appbaseinfo.time);
}) })
.catch(function(response) {}); .catch(function(response) {});
}, },
getheaderinfo(){
getServiceBaseInfo() {
this.$http this.$http
.get("/static/appdetail.json") .get("/static/approvalappdetail.json")
.then((response) => { .then((response) => {
let data = response.data.data; let data = response.data.data;
this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce); this.$set(this.service_header_arr, "name", data.appInfo.name);
this.$set(this.list_arr[1], "info", data.appbaseinfo.action); this.$set(this.service_header_arr, "first", data.appInfo.first);
this.$set(this.list_arr[2], "info", data.appbaseinfo.use); this.$set(this.service_header_arr, "second", data.appInfo.second);
this.appcode = data.appbaseinfo.appcode;
}) })
.catch(function(response) {}); .catch(function(response) {});
}, },
}, onSubmit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}; };
</script> </script>
<style> <style>
.savebtn .el-button { .type_box_select .el-form {
float: right; width: 1022px;
margin-left: 20px;
letter-spacing: 2px;
} }
.savebtn .el-button:nth-of-type(1) { .info_contain1 .el-input__inner{
background-color: #0f2683; background-color: #f7f8f9;
color: #f8f9fd; width: 1022px;
}
.info_contain1 .el-input{
width: 1022px;
} }
.savebtn .el-button:nth-of-type(2) {
.btnsty .el-button{
background-color: #c3caf8; background-color: #c3caf8;
color: #0f2683; color: #0f2683;
} }
.btnsty .el-button:nth-of-type(1){
background-color: #0f2683;
color: #f8f9fd;
}
</style> </style>
<style scoped> <style scoped>
.detail_contain { .detail_contain {
width: 100%; width: 100%;
padding: 0 20px;
height: calc(100% - 55px); height: calc(100% - 55px);
padding: 0 20px;
} }
.info_contain { .info_contain {
padding: 25px 20px; padding: 25px 20px;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
min-height: calc(100% - 20px);
box-shadow: 0px 3px 6px 0px #f4f7fc; box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px; border-radius: 12px;
min-height: calc(100% - 20px);
margin-bottom: 20px; margin-bottom: 20px;
position: relative;
} }
.now_page_title { .now_page_title {
margin: 15px 0; margin: 15px 0;
...@@ -317,31 +337,19 @@ export default { ...@@ -317,31 +337,19 @@ export default {
padding: 30px 10px 10px 10px; padding: 30px 10px 10px 10px;
width: 100%; width: 100%;
} }
.formname{
.savebtn {
margin-top: 50px;
overflow: hidden;
}
.appcode {
white-space: pre-wrap;
width: 100%;
background-color: #f8f9fd;
border-radius: 8px;
padding: 24px;
color: #58617a; color: #58617a;
} }
.addimage { .right{
display: inline-block; float: right;
color: #f8f9fd; margin-left: 20px;
font-size: 16px; }
width: 124px; .btnsty{
height: 44px; position: absolute;
line-height: 44px; bottom: 20px;
text-align: center; right: 20px;
background-color: #0f2683; }
border-radius: 8px; .info_contain1{
margin-top: 20px; margin-bottom: 70px;
cursor: pointer;
} }
</style> </style>
src/pages/approval_service_detail.vue
View file @ 9a1ad0cb
...@@ -17,12 +17,12 @@ ...@@ -17,12 +17,12 @@
>{{item}}</div> >{{item}}</div>
</div> </div>
<div class="type_box_select"> <div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:servicead_arr[now_user]"> <info-list @download="download" :list_arr="now_service==0?list_arr:servicead_arr[now_user]">
<table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um> <table-um :headers="header_arr" url="params_arr" slot="zd_table"></table-um>
<process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card> <process-card type="approval" :data="approval_arr[now_user]" slot="sp_card"></process-card>
<div class="info_contain1" slot="sp_result"> <div class="info_contain1" slot="sp_result">
<el-form ref="form" :rules="rules" :model="form" label-width="0px"> <el-form ref="form" :rules="rules" :model="form" label-width="0px">
<el-form-item> <el-form-item prop="result">
<p class="formname">审批结果：</p> <p class="formname">审批结果：</p>
<el-select v-model="form.result" placeholder="请选择"> <el-select v-model="form.result" placeholder="请选择">
<el-option <el-option
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input> <el-input v-model="form.option" placeholder="请输入审批意见，不少于10个字"></el-input>
</el-form-item> </el-form-item>
<el-form-item class="btnsty"> <el-form-item class="btnsty">
<el-button @click="onSubmit" class="right">提交</el-button> <el-button @click="onSubmit('form')" class="right">提交</el-button>
<el-button class="right">取消</el-button> <el-button class="right">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -72,7 +72,11 @@ export default { ...@@ -72,7 +72,11 @@ export default {
}, },
now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员 now_user: 1, //0：普通用户，1：组织管理员，2：超级管理员
rules:{ rules:{
result:[
{ required: true, message: '请选择意见', trigger: 'change' },
],
option:[ option:[
{ required: true, message: '请输入意见', trigger: 'blur' },
{ {
min: 10, message: '长度大于10个字符', trigger: 'blur' min: 10, message: '长度大于10个字符', trigger: 'blur'
} }
...@@ -90,6 +94,7 @@ export default { ...@@ -90,6 +94,7 @@ export default {
} }
], ],
approval_arr:[ approval_arr:[
[],
[], [],
[ [
{ {
...@@ -114,53 +119,7 @@ export default { ...@@ -114,53 +119,7 @@ export default {
}, },
] ]
}, },
],
[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
},
{
title:'二级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
] ]
},
],
], ],
header_arr: [ header_arr: [
{ {
...@@ -223,6 +182,7 @@ export default { ...@@ -223,6 +182,7 @@ export default {
service_arr: ["服务申请信息", "服务审批"], service_arr: ["服务申请信息", "服务审批"],
now_service: 0, now_service: 0,
servicead_arr: [ servicead_arr: [
[],
[ [
{ {
title: "一级审批：", title: "一级审批：",
...@@ -239,26 +199,12 @@ export default { ...@@ -239,26 +199,12 @@ export default {
solt_name: "sp_card" solt_name: "sp_card"
}, },
{ {
title: "一级审批：", title: "二级审批：",
prop: "title",
type: "solt",
solt_name: "sp_result"
},
],
[
{
title: "审批信息：",
prop: "title",
type: "solt",
solt_name: "sp_card"
},
{
title: "三级审批：",
prop: "title", prop: "title",
type: "solt", type: "solt",
solt_name: "sp_result" solt_name: "sp_result"
}, },
], ]
], ],
list_arr: [ list_arr: [
{ {
...@@ -288,6 +234,7 @@ export default { ...@@ -288,6 +234,7 @@ export default {
{ {
title: "申请文件：", title: "申请文件：",
info: "xxxx文件名称.txt", info: "xxxx文件名称.txt",
url:'www.baidu.com',
type: "down" type: "down"
}, },
{ {
...@@ -312,8 +259,18 @@ export default { ...@@ -312,8 +259,18 @@ export default {
created() {}, created() {},
mounted() {}, mounted() {},
methods: { methods: {
onSubmit(){ onSubmit(formName){
console.log('1111'); this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
download(val){
console.log(val);
} }
} }
}; };
......
src/pages/deploy_app_detail.vue 0 → 100644
View file @ 9a1ad0cb
<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||now_service==2" class="info_contain2">
<info-list :list_arr="now_service == 0?list_arr:fwfw_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>
<table-um
slot="fw_table"
:headers="header_fw_arr"
url="fw_rank_arr"
:stripe="true"
:paginationShow="true"
@detail="detail"
></table-um>
</info-list>
<div
@click="public_form = true"
v-if="public&&now_service == 0"
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: "下线",
},
],
},
],
header_fw_arr:[
{
prop:'rank',
label:'服务排名',
width: "150px",
align: "center",
type:'rank',
},
{
prop:'name',
label:'服务名称',
minWidth: "40%",
align: "left",
type:'hot',
},
{
prop:'address',
label:'服务地址',
minWidth: "60%",
align: "left",
},
{
prop:'times',
label:'外部调用次数(次)',
width: "250px",
align: "center",
},
{
prop:'time',
label:'平均调用时长(h)',
width: "250px",
align: "center",
},
{
label: "操作",
type: "Button",
width: "250px",
align: "center",
btnList: [
{
type: "detail",
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",
},
],
fwfw_arr:[
{
title: "访问排名",
info: "",
prop:"title",
type: "solt",
solt_name: "fw_table",
},
],
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: {
detail(val){
console.log(val);
},
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/deployappdetail.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");
},
getServiceInfo() {
this.$http
.get("/static/deployappdetail.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/deployappdetail.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>
src/pages/index.vue
View file @ 9a1ad0cb
<template> <template>
<div class="index_container"> <div class="index_container">
<div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs'"></div> <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs' || $route.fullPath == '/app_build'"></div>
<router-view/> <router-view/>
</div> </div>
</template> </template>
......
src/router/index.js
View file @ 9a1ad0cb
...@@ -92,7 +92,17 @@ export default new Router({ ...@@ -92,7 +92,17 @@ export default new Router({
component: () => import("@/pages/app_edit"), component: () => import("@/pages/app_edit"),
}, },
{ {
path: "/yygl/:level/:type/approvaldetail/:id", // 我部署的应用详情 path: "/yygl/:level/:type/deploydetail/:id", // 我部署的应用详情
name: "deploy_app_detail",
component: () => import("@/pages/deploy_app_detail"),
},
{
path: "/yygl/:level/:type/applydetail/:id", // 我申请的应用详情
name: "apply_app_detail",
component: () => import("@/pages/apply_app_detail"),
},
{
path: "/yygl/:level/:type/approvaldetail/:id", // 我申请的应用详情
name: "approval_app_detail", name: "approval_app_detail",
component: () => import("@/pages/approval_app_detail"), component: () => import("@/pages/approval_app_detail"),
}, },
...@@ -181,6 +191,11 @@ export default new Router({ ...@@ -181,6 +191,11 @@ export default new Router({
name: "services_shop", name: "services_shop",
component: () => import("@/pages/services_shop"), component: () => import("@/pages/services_shop"),
}, // 主页 - 服务超市 }, // 主页 - 服务超市
{
path: "/app_build",
name: "app_build",
component: () => import("@/pages/app_build"),
}, // 应用构建（镜像形式）
{ {
path: "/user", // 个人中心 path: "/user", // 个人中心
name: "user", name: "user",
......
src/utils/common.js
View file @ 9a1ad0cb
function getRole(){ function getRole(){
return new Promise((resolve,reject)=>{ return new Promise((resolve,reject)=>{
if(true){ if(true){
resolve(0) resolve(2)
}else{ }else{
reject('error') reject('error')
} }
......
static/applyappdetail.json 0 → 100644
View file @ 9a1ad0cb
{
"data": {
"appInfo": {
"id":"321321qeqweds",
"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": "应急领域"
},
{
"name": "在线区域",
"text": "平台应用"
}
],
"second": [
{
"name": "审批状态",
"text": "审批通过",
"color":"#515fe7"
},
{
"name": "所属组织",
"text": "北京比格大数据有限公司"
},
{
"name": "申请时间",
"text": "2020-02-28 17:59:30"
}
]
},
"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>",
"person":"张三丰",
"phone":13255668899
},
"appapplyinfo":{
"scene":"申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
"filename":"mapvideos申请书.docx",
"fileurl":"http://www.baidu.com",
"size":"申请获取应用镜像部署权限"
}
}
}
static/approvalappdetail.json 0 → 100644
View file @ 9a1ad0cb
{
"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": "应急领域"
},
{
"name": "审批状态",
"text": "待审批",
"color":"#ef9433"
}
],
"second": [
{
"name": "在线区域",
"text": "平台应用"
},
{
"name": "申请类型",
"text": "申请开发"
},
{
"name":"所属组织",
"text":"北京比格大数据"
}
]
},
"appbaseinfo":{
"company":"北京比格大数据有限公司",
"person":"李子维",
"phone":13566445588,
"desc":"<p>申请贵州省行政区划地图服务用于贵州省疫情监控决策指挥系统。</p>",
"filename":"xxxx文件名称.txt",
"fileurl":"http://www.baidu.com",
"time":"2020-02-25 12:23:25"
},
"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
static/data.json
View file @ 9a1ad0cb
...@@ -536,6 +536,44 @@ ...@@ -536,6 +536,44 @@
"bbh":"1.0.2" "bbh":"1.0.2"
} }
], ],
"fw_rank_arr":[
{
"id":1,
"rank":1,
"name":"map",
"address":"http://www.baidu.com",
"times":45,
"time":0.5,
"hot":true
},
{
"id":2,
"rank":2,
"name":"map",
"address":"http://www.baidu.com",
"times":45,
"time":0.5,
"hot":true
},
{
"id":3,
"rank":3,
"name":"map",
"address":"http://www.baidu.com",
"times":45,
"time":0.5,
"hot":false
},
{
"id":4,
"rank":4,
"name":"map",
"address":"http://www.baidu.com",
"times":45,
"time":0.5,
"hot":false
}
],
"fhcstx": [ "fhcstx": [
{ {
"id": 1, "id": 1,
......
static/deployappdetail.json 0 → 100644
View file @ 9a1ad0cb
{
"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