<template>
|
<div class="new" v-show="projectWindowShow">
|
<el-header style="height:20px"><div class="title">新增应用</div></el-header>
|
<el-main>
|
<div class="elgroup">
|
<el-radio-group v-model="radio">
|
<el-radio-button label="交通应用" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="城管城市安全" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="规建审批" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="园区应用" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="应急城市级消防" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="智慧工地" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="智慧房管" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="文物保护文旅应用" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="能源应用" class="radioLabel" type="text"></el-radio-button>
|
<el-radio-button label="水务水利应用" class="radioLabel" type="text"></el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="peizhi">
|
<div class="peizhiLine">
|
<span class="titleBlock">应用名称:</span><span class="content" style="width: 320px;display: inline-block;"><el-input v-model="applyName"></el-input></span>
|
</div>
|
<div class="peizhiLine">
|
<span class="titleBlock">应用类型:</span><span class="content">{{ radio }}</span>
|
</div>
|
<div class="peizhiLine">
|
<span class="titleBlock">数据配置:</span><span class="content">
|
已选{{checkedKeys.length}}个
|
<el-button type="primary" plain @click="treeDirectory = !treeDirectory">点我进行配置</el-button>
|
|
</span>
|
</div>
|
<div class="peizhiLine">
|
<span class="titleBlock">应用状态:</span><span class="content">
|
<el-radio-group v-model="status">
|
<el-radio label="公开">公开</el-radio>
|
<el-radio label="私有">私有</el-radio>
|
</el-radio-group></span>
|
</div>
|
<div class="peizhiLine">
|
<span class="titleBlock">服务配置:</span>
|
<span class="content">
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox label="BIM指标审查服务包"></el-checkbox>
|
<el-checkbox label="CIM指标技术审查服务包"></el-checkbox>
|
<el-checkbox label="项目管理服务包"></el-checkbox>
|
<el-checkbox label="辅助分析服务包" ></el-checkbox>
|
<el-checkbox label="规则库管理服务包" ></el-checkbox>
|
</el-checkbox-group>
|
</span>
|
</div>
|
<div class="peizhiLine">
|
<span class="titleBlock" style="display: inline-block;">应用配图:</span>
|
<span class="content" style="position: absolute;">
|
<el-upload class="avatar-uploader" action="/dataapi/file/upload"
|
:show-file-list="false" :on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload" :headers="headers">
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</span>
|
</div>
|
</div>
|
</el-main>
|
<el-footer>
|
<el-button @click="close()">取 消</el-button>
|
<el-button type="primary" @click="upload()">确 定</el-button>
|
</el-footer>
|
<div class="treeDirectory" v-show="treeDirectory">
|
<el-header style="height:20px"><div class="title">数据源</div></el-header>
|
<el-main>
|
<el-tree :data="treeData" :props="defaultProps" show-checkbox class="treeDirectoryTree"
|
ref="treeDirectoryTree" node-key="id" @check-change="getCheckId"></el-tree>
|
</el-main>
|
<el-main>
|
</el-main>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {supplementFile,saveData,getResourceCatalogs} from "@/api/usercenter.js"
|
import { getToken } from "@/utils/auth";
|
export default {
|
data() {
|
return {
|
radio:"交通应用",
|
status:"公开",
|
applyName:"",
|
checkList:[],
|
configuration: '',
|
imageUrl:"",
|
headers: { Authorization: "Bearer " + getToken() },
|
projectWindowShow:false,
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
treeData:[],
|
treeDirectory:false,
|
checkedKeys:[],
|
loading:""
|
}
|
},
|
methods: {
|
getCheckId(){
|
this.checkedKeys = this.$refs.treeDirectoryTree.getCheckedKeys(true)
|
},
|
upload(){
|
let option ={
|
"appType": "",
|
"createBy": this.$store.state.username,
|
"dataId": this.$refs.treeDirectoryTree.getCheckedKeys(true),
|
"name": this.applyName,
|
"picUrl": this.imageUrl,
|
"serverId": [
|
0
|
],
|
"status": this.status == "公开"? 1:2
|
}
|
let appType = ""
|
switch (this.radio) {
|
case "交通应用": appType = 1;break;
|
case "城管城市安全": appType = 2;break;
|
case "规建审批": appType = 3;break;
|
case "园区应用": appType = 4;break;
|
case "应急城市级消防": appType = 5;break;
|
case "智慧工地": appType = 6;break;
|
case "智慧房管": appType = 7;break;
|
case "文物保护文旅应用": appType = 8;break;
|
case "能源应用": appType = 9;break;
|
case "水务水利应用": appType = 10;break;
|
};
|
option.appType = appType
|
let serverId = []
|
this.checkList.forEach((item)=>{
|
switch (item) {
|
case "BIM指标审查服务包":serverId.push(1);break;
|
case "CIM指标技术审查服务包":serverId.push(2);break;
|
case "项目管理服务包":serverId.push(3);break;
|
case "辅助分析服务包":serverId.push(4);break;
|
case "规则库管理服务包":serverId.push(5);break;
|
}
|
})
|
option.serverId = serverId
|
saveData(option).then((res)=>{
|
console.log(res)
|
if(res.code == 200 ){
|
{this.$message.success("上传成功");this.close()}
|
}else this.$message.error("上传失败")
|
})
|
},
|
handleAvatarSuccess(res, file) {
|
console.log("console",res)
|
setTimeout(() => {
|
this.loading.close();
|
}, 500);
|
if(res.code == 200){
|
this.imageUrl = res.data.url
|
}
|
},
|
beforeAvatarUpload(file) {
|
const isJPG = file.type === 'image/jpeg' || 'image/png';
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
if (!isJPG) {
|
this.$message.error('上传头像图片只能是 JPG,png 格式!');
|
}
|
if (!isLt2M) {
|
this.$message.error('上传头像图片大小不能超过 10MB!');
|
}
|
|
supplementFile()
|
this.loading = this.$loading({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
return isJPG && isLt2M;
|
},
|
close(){
|
this.projectWindowShow = false
|
}
|
},
|
mounted() {
|
getResourceCatalogs().then((res)=>{
|
if(res.code == 200){
|
res.data.forEach((item)=>{
|
let node = {label:item.name,children:[],id:item.id}
|
if(item.resourceDataChildren.length>0)
|
{
|
item.resourceDataChildren.forEach((data)=>{
|
node.children.push({label:data.name,id:data.id,data:data})
|
})
|
}
|
this.treeData.push(node)
|
})
|
}else this.$message.error("数据源加载失败")
|
})
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.new{
|
width: 500px;
|
height: 720px;
|
background-color: #3c6187;
|
position: absolute;
|
z-index: 12;
|
right: 40px;
|
top: 30px;
|
border-radius: 10px;
|
color: #fff;
|
.elgroup{
|
width: 100%;
|
margin-bottom:15px;
|
/deep/ .el-radio-button__inner {
|
border: 1px solid #ffffff !important;
|
background-color: #3a789d !important;
|
border-radius: 5px !important;
|
color: #fff !important;
|
}
|
}
|
.title{
|
margin:10px 10px;
|
margin-top:15px;
|
font-size: 20px;
|
}
|
.radioLabel{
|
margin-top:10px;
|
margin-right:5px;
|
}
|
.peizhi{
|
width: 450px;
|
height:420px;
|
// background-color: #fff;
|
border-radius: 12px;
|
// margin:auto;
|
border: 1px rgb(255, 255, 255) solid;
|
.peizhiLine{
|
margin-left: 20px;
|
margin-top:10px;
|
.titleBlock{
|
font-size: 16px;
|
}
|
.content{
|
margin-left:10px;
|
font-size: 16px;
|
}
|
.el-checkbox-group {
|
margin-left: 80px;
|
margin-top: -20px;
|
}
|
/deep/ .el-radio__label {
|
color: #fff !important;
|
}
|
/deep/ .el-checkbox {
|
color: #ffffff !important;
|
display: inherit !important;
|
}
|
/deep/ .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
|
background: #3a6fa5;
|
color: #fff;
|
border-color: #3381d4;
|
}
|
/deep/ .el-button--primary.is-plain {
|
color: #fff;
|
background: #43668f;
|
border-color: #4778ac;
|
}
|
/deep/ .el-input__inner {
|
background-color: #427ea1 !important;
|
color:#fff !important;
|
border:1px solid #fff !important;
|
|
}
|
/deep/ .avatar-uploader .el-upload {
|
border: 1px dashed #ffffff !important;
|
border-radius: 6px !important;
|
cursor: pointer !important;
|
position: relative !important;
|
overflow: hidden !important;
|
}
|
/deep/ .avatar-uploader .el-upload:hover {
|
border-color: #409EFF !important;
|
}
|
/deep/ .avatar-uploader-icon {
|
font-size: 28px !important;
|
color: #ffffff !important;
|
width: 130px !important;
|
height: 130px !important;
|
line-height: 130px !important;
|
text-align: center !important;
|
}
|
.avatar {
|
width: 130px;
|
height: 130px;
|
display: block;
|
}
|
}
|
|
}
|
.treeDirectory {
|
position: absolute;
|
right: 510px;
|
width: 300px;
|
height: 670px;
|
top: 0px;
|
border-radius: 10px;
|
background-color: #3c6187;
|
color: #fff;
|
.treeDirectoryTree{
|
margin-top:25px;
|
color: #fff;
|
background-color:#3c6187 ;
|
/deep/ .el-tree-node__content:hover{
|
background-color:rgba(0, 166, 226, 0.6) !important
|
}
|
}
|
}
|
}
|
</style>
|
