From df4c5ac38a1f287b7d0f48a558630cae70f6a690 Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期二, 07 五月 2024 21:09:17 +0800
Subject: [PATCH] 1
---
src/views/console/soam/oss-system.vue | 521 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 488 insertions(+), 33 deletions(-)
diff --git a/src/views/console/soam/oss-system.vue b/src/views/console/soam/oss-system.vue
index 0c597e7..98c0e7a 100644
--- a/src/views/console/soam/oss-system.vue
+++ b/src/views/console/soam/oss-system.vue
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-03-26 10:28:33
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-03-29 18:27:53
+ * @LastEditTime: 2024-05-07 21:09:02
* @FilePath: /smart-web/src/views/master/person/main/index.vue
* @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -11,21 +11,21 @@
<el-tabs tab-position="left" style="height: 800px" class="demo-tabs">
<el-tab-pane label="鏂囦欢瀛樺偍">
<div class="tabTitle">鏂囦欢瀛樺偍</div>
- <el-form :model="ossForm" ref="ossForm" label-width="120px">
+ <el-form :model="ossForm" label-width="120px">
<el-row>
<el-col :span="24">
- <el-form-item label="endpoint" prop="endpoint">
+ <el-form-item label="endpoint">
<el-input v-model="ossForm.endpoint" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
- <el-form-item label="acceskey" prop="acceskey">
- <el-input v-model="ossForm.acceskey" clearable></el-input>
+ <el-form-item label="acceskey">
+ <el-input v-model="ossForm.accessKey" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
- <el-form-item label="secretkey" prop="secretkey">
- <el-input v-model="ossForm.secretkey" clearable></el-input>
+ <el-form-item label="secretkey">
+ <el-input v-model="ossForm.secretKey" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
@@ -36,11 +36,29 @@
</el-row>
</el-form>
</el-tab-pane>
+ <el-tab-pane label="浼佷笟LOGO">
+ <div class="tabTitle">浼佷笟LOGO</div>
+ <span class="logotitle">涓婁紶logo</span>
+ <div class="logo1">
+ <el-upload class="avatar-uploader" :headers="authorization" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
+ <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+ </el-upload>
+ <span>寤鸿鏃犲簳鑹层�佸ぇ灏�180*40px</span>
+ </div>
+ <div class="logo2">
+ <el-upload class="avatar-uploader" :headers="authorization" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
+ <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+ </el-upload>
+ <span>寤鸿鏃犲簳鑹层�佸ぇ灏�180*40px</span>
+ </div>
+ </el-tab-pane>
<el-tab-pane label="搴旂敤璁剧疆">
<div class="tabTitle">搴旂敤璁剧疆</div>
<ul class="show-list">
- <li class="active">
- <div class="edit">缂栬緫</div>
+ <li :class="{active: active.isA}" @click="changeLi('isA')">
+ <div class="edit" @click="editBtn('isA')">缂栬緫</div>
<div class="logo">
<img src="http://116.63.155.153:83/api/static/images/cps.png">
</div>
@@ -49,8 +67,8 @@
<div class="domain">http://192.168.1.199</div>
</div>
</li>
- <li>
- <div class="edit">缂栬緫</div>
+ <li :class="{active: active.isB}" @click="changeLi('isB')">
+ <div class="edit" @click="editBtn('isB')">缂栬緫</div>
<div class="logo">
<img src="http://116.63.155.153:83/api/static/images/vision.png">
</div>
@@ -59,8 +77,8 @@
<div class="domain">http://192.168.1.199:31005</div>
</div>
</li>
- <li>
- <div class="edit">缂栬緫</div>
+ <li :class="{active: active.isC}" @click="changeLi('isC')">
+ <div class="edit" @click="editBtn('isC')">缂栬緫</div>
<div class="logo">
<img src="http://116.63.155.153:83/api/static/images/hmi.png">
</div>
@@ -73,61 +91,346 @@
<el-card class="system-content">
<template #header>
<div class="card-header">
- <span>搴旂敤璇︽儏</span>
+ <span v-if="!isEdit">搴旂敤璇︽儏</span>
+ <span v-if="isEdit">缂栬緫搴旂敤</span>
+ <div v-if="isEdit">
+ <el-button @click="cencelBtn" >鍙� 娑�</el-button>
+ <el-button type="primary" :loading="isSaveing" @click="sysSubmit">淇� 瀛�</el-button>
+ </div>
</div>
</template>
<el-form :model="searchData" abel-width="120px">
- <el-form-item label="绯荤粺灞曠ず">
- <el-switch v-model="searchData.value1" />
+ <el-form-item label="绯荤粺灞曠ず" v-if="!isEdit">
+ <el-switch v-model="searchData.isShow" disabled/>
</el-form-item>
- <el-form-item label="搴旂敤鍚嶇О">
- <div>{{searchData.value2}}</div>
+ <el-form-item label="绯荤粺灞曠ず" v-if="isEdit">
+ <el-switch v-model="searchData.isShow"/>
+ </el-form-item>
+ <el-form-item label="搴旂敤鍚嶇О" v-if="!isEdit">
+ <div>{{searchData.name}}</div>
+ </el-form-item>
+ <el-form-item label="搴旂敤鍚嶇О" v-if="isEdit">
+ <el-input v-model="searchData.name" placeholder="搴旂敤鍚嶇О" clearable></el-input>
</el-form-item>
<el-form-item label="搴旂敤鏍囪瘑">
- <div>{{searchData.value2}}</div>
+ <div>{{searchData.code}}</div>
</el-form-item>
- <el-form-item label="缃戦〉鍦板潃">
- <div>{{searchData.value2}}</div>
+ <el-form-item label="缃戦〉鍦板潃" v-if="!isEdit">
+ <div>{{searchData.domain}}</div>
+ </el-form-item>
+ <el-form-item label="缃戦〉鍦板潃" v-if="isEdit">
+ <el-input v-model="searchData.domain" placeholder="缃戦〉鍦板潃" clearable></el-input>
</el-form-item>
<el-form-item label="涓婁紶鍥炬爣">
<div>
- <img src="http://116.63.155.153:83/api/static/images/hmi.png" style="width:66px;height:66px;">
+ <img :src="searchData.logo" style="width:66px;height:66px;">
</div>
</el-form-item>
</el-form>
</el-card>
</el-tab-pane>
+ <el-tab-pane label="鎺堟潈">
+ <div class="tabTitle">鎺堟潈</div>
+ <div class="license-detail">
+ <div><span class="left">鎺堜簣锛� </span>{{licenseDetail.account}}</div>
+ <div><span class="left">鎺堟潈鏂瑰紡锛�</span>姘镐箙鎺堟潈</div>
+ <div><span class="left">鎺堟潈鏃ユ湡锛�</span>{{licenseDetail.applyDate}}~{{licenseDetail.expireDate}}</div>
+ <div><span class="left">宸叉巿鏉冩ā鍧楋細</span>{{licenseDetail.moduleNames.VISION}}|{{licenseDetail.moduleNames.CPS}}</div>
+ <div><span class="left">璁惧鏍囪瘑锛�</span><span class="licenseCopy" @click="licenseCopy">澶嶅埗</span></div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="鏈嶅姟闆嗘垚">
+ <div class="tabTitle">鏈嶅姟闆嗘垚</div>
+ <div class="card">
+ <div class="top">
+ <div class="title">
+ <img src="./logo.png" />
+ <span>浼佷笟寰俊</span>
+ <span class="taginfo" v-if="appType==1">宸插叧鑱�</span>
+ <div class="desc">CPS涓庝紒涓氬井淇″叧鑱旓紝鍗忎綔涓庢矡閫氭洿鍔犻珮鏁堛�傜粦瀹氬悗灏嗗悓姝ヤ紒涓氬井淇＄殑浜哄憳鍚嶅崟鍜岀粍缁囨灦鏋勶紝骞跺厑璁告垚鍛樹娇鐢ㄤ紒涓氬井淇¤处鍙风櫥褰�</div>
+ </div>
+ <el-button class="btn" @click="addOss(1)" v-if="appType!=1" :disabled="appType != 1">鍏宠仈</el-button>
+ <el-button class="btn" @click="addOss(2)" v-if="appType==1" :disabled="appType != 1" type="danger" plain>瑙ｇ粦</el-button>
+ </div>
+ </div>
+ <div class="card">
+ <div class="top">
+ <div class="title">
+ <img src="./logo.png"/>
+ <span >閽夐拤</span>
+ <span class="taginfo" v-if="appType==2">宸插叧鑱�</span>
+ <div class="desc">CPS涓庨拤閽夊叧鑱旓紝鍗忎綔涓庢矡閫氭洿鍔犻珮鏁堛�傜粦瀹氬悗灏嗗悓姝ラ拤閽夌殑浜哄憳鍚嶅崟鍜岀粍缁囨灦鏋勶紝骞跺厑璁告垚鍛樹娇鐢ㄩ拤閽夎处鍙风櫥褰�</div>
+ </div>
+ <el-button class="btn" @click="addOss(2)" v-if="appType!=2" :disabled="appType != 2">鍏宠仈</el-button>
+ <el-button class="btn" @click="addOss(2)" v-if="appType==2" :disabled="appType != 2" type="danger" plain>瑙ｇ粦</el-button>
+ </div>
+ <div class="bottom">
+ <div class="info">
+ <div class="img">
+ <el-icon><Monitor /></el-icon>
+ </div>
+ <div class="info-right">
+ <div class="tag">
+ <div> 缁勭粐鏋舵瀯鍚屾</div>
+ <span>绔嬪嵆鍚屾</span>
+ </div>
+ <div class="time">涓婃鍚屾鏃堕棿锛�-</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
</el-tabs>
+ <save-dialog v-if="dialog.save" ref="saveDialog" @success="addOssSuccess" @closed="dialog.save=false"></save-dialog>
</div>
</template>
<script>
+ import saveDialog from './addOss'
+ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+ let icons = []
+ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ icons.push(key)
+ }
export default {
name: "oss-main",
data(){
return {
+ appType: "",
+ dialog: {
+ save: false
+ },
+ copyStr: "",
+ licenseDetail: {
+ account: "",
+ applyDate: "",
+ expireDate: "",
+ moduleNames: {
+ VISION: "",
+ CPS: ""
+ }
+ },
+ uploadData: {},
+ logoType: "0",
+ authorization: {Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"},
+ imageUrl1: "",
+ imageUrl2: "",
+ isSaveing: false,
+ isEdit: false,
+ active: {
+ isA: true,
+ isB: false,
+ isC: false
+ },
searchData: {
- value1: false,
- value2: "HMI"
+ isShow: true,
+ name: "",
+ code: "",
+ domain: "",
+ logo: "",
+ backgroundUrl: ""
},
ossForm: {
endpoint: "",
- acceskey: "",
- secretkey: ""
- }
+ accessKey: "",
+ secretKey: ""
+ },
+ temData: []
}
},
- components: {},
+ components: {...ElementPlusIconsVue,saveDialog},
created(){
},
mounted(){
-
+ this.getOssUpdata(); //鏂囦欢瀛樺偍
+ this.setting(); //搴旂敤璁剧疆
+ this.getFile(); //浼佷笟logo
+ this.license(); //鎺堟潈
+ this.outer(); //鏈嶅姟闆嗘垚
},
methods: {
- ossUpdata(){
-
- }
+ outer() {
+ this.$HTTP.get("/api/blade-sync/outer-app-config/list").then(res=> {
+ if(res.code == 200) {
+ this.appType = res.data[0].appType;
+ }
+ })
+ },
+ addOss(type) {
+ this.dialog.save = true
+ this.$nextTick(() => {
+ this.$refs.saveDialog.open(type);
+ })
+ },
+ addOssSuccess() {
+
+ },
+ licenseCopy() {
+ // 澶嶅埗鍒板壀璐存澘
+ navigator.clipboard.writeText(this.copyStr).then(() => {
+ console.log('鎷疯礉瀹屾垚');
+ }).catch(err => {
+ console.error('Failed to copy text: ', err);
+ });
+ },
+ license() {
+ this.$HTTP.get("/api/blade-cps/init/license-detail").then(res=> {
+ if(res.code == 200) {
+ res.data.moduleNames.VISION = JSON.stringify(res.data.moduleNames.VISION);
+ res.data.moduleNames.CPS = JSON.stringify(res.data.moduleNames.CPS);
+ this.licenseDetail = res.data;
+ }
+ })
+ this.$HTTP.get("/api/blade-cps/init/license-device").then(res=> { //璁惧鏍囪瘑
+ if(res.code == 200) {
+ this.copyStr = res.data;
+ }
+ })
+ },
+ getFile() {
+ this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
+ if(res.code == 200) {
+ this.uploadData = res.data;
+ this.imageUrl1 = res.data.list[0].link;
+ this.imageUrl2 = res.data.list[1].link;
+ }
+ })
+ },
+ handleAvatarSuccess1(resp, file) {
+ this.logoType = "0";
+ if(this.imageUrl1) {
+ resp.uploadMethod = "edit";
+ }else {
+ resp.uploadMethod = "add";
+ }
+ this.handleAvatarSuccess(resp);
+ },
+ handleAvatarSuccess2(resp, file) {
+ this.logoType = "1";
+ if(this.imageUrl2) {
+ resp.uploadMethod = "edit";
+ }else {
+ resp.uploadMethod = "add";
+ }
+ this.handleAvatarSuccess(resp);
+ },
+ handleAvatarSuccess(resp) {
+ var that = this;
+ this.$HTTP.get("/api/blade-cps/enterprise/get").then(res=> {
+ if(res.code == 200) {
+ // 鍏堣祴鍊�
+ if(res.data.list.length == 0) res.data.list = [{},{}];
+ that.uploadData = res.data;
+ that.imageUrl1 = res.data.list[0].link;
+ that.imageUrl2 = res.data.list[1].link;
+ //娣诲姞鎺ュ彛
+ var url = "/api/blade-cps/enterprise/add";
+ if(that.logoType == "0") {
+ var upData = Object.assign({},res.data.list[0]);
+ obj.type = "0";
+ }
+ if(that.logoType == "1") {
+ obj.type = "1";
+ var upData = Object.assign({},res.data.list[1]);
+ }
+ if(resp.uploadMethod == "edit") {
+ url = "/api/blade-cps/enterprise/edit";
+ }
+ that.$HTTP.post(url,upData).then(resJ=> {
+ if(resJ.code == 200) {
+ that.$message.success("鎿嶄綔鎴愬姛");
+ }else {
+ that.$alert(resJ.message, "鎻愮ず", {type: 'error'});
+ }
+ })
+ }
+ })
+ },
+ beforeAvatarUpload(file) {
+ var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
+ if (!isJPG) {
+ this.$message.error('鏍煎紡閿欒锛岃閲嶆柊涓婁紶锛�');
+ }
+ return isJPG;
+ },
+ cencelBtn() {
+ this.isEdit=false;
+ this.isSaveing = false;
+ },
+ sysSubmit() {
+ this.isSaveing = true;
+ var obj = {...this.searchData};
+ if(obj.isShow == true) {
+ obj.isShow = "1";
+ }else {
+ obj.isShow = "0";
+ }
+ this.$HTTP.put("/api/blade-system/application/update",obj).then(res=> {
+ if(res.code == 200) {
+ this.$message({
+ message: "鎿嶄綔鎴愬姛",
+ type: "success"
+ })
+ this.cencelBtn();
+ }
+ })
+ },
+ editBtn(name) {
+ this.isEdit = true;
+ },
+ setting() {
+ this.$HTTP.get("/api/blade-system/application/list").then(res=> {
+ if(res.code == 200) {
+ res.data.forEach(item=> {
+ if(item.isShow == "1") {
+ item.isShow = true;
+ }else {
+ item.isShow = false;
+ }
+ })
+ this.temData = res.data;
+ this.searchData = this.temData[0];
+ }
+ })
+ },
+ changeLi(name) {
+ for(var key in this.active) {
+ if(key === name) {
+ this.active[name] = true;
+ }else {
+ this.active[key] = false;
+ }
+ switch(name) {
+ case "isA":
+ this.searchData = this.temData[0];
+ break;
+ case "isB":
+ this.searchData = this.temData[1];
+ break;
+ case "isC":
+ this.searchData = this.temData[2];
+ break;
+ }
+ }
+ },
+ ossUpdata() {
+ this.$HTTP.post("/api/blade-resource/oss/update",this.ossForm).then(res=> {
+ if(res.code == 200) {
+ this.$message({
+ message: "鏇存柊鎴愬姛",
+ type: "success"
+ })
+ }
+ })
+ },
+ getOssUpdata(){
+ this.$HTTP.get("/api/blade-resource/oss/detail").then(res=> {
+ if(res.code == 200) {
+ this.ossForm = res.data;
+ }
+ })
+ }
}
}
</script>
@@ -208,10 +511,162 @@
}
.system-content .card-header{
border-bottom: 1px solid #ebeef5;
- padding: 6px 18px!important;
+ padding: 12px 18px!important;
+ position: relative;
}
.system-content .card-header span{
font-size:13px;
font-weight: 400px;
}
+.system-content .card-header > div {
+ position: absolute;
+ top: 6px;
+ right: 22px;
+}
+.logotitle {
+ font-weight: 400;
+ font-size: 16px;
+ width: 140px;
+ text-align: center;
+ display: inline-block;
+ vertical-align: top;
+}
+.logo1,.logo2 {
+ display: inline-block;
+ margin-right: 20px;
+}
+.avatar-uploader /deep/ .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.avatar-uploader /deep/ .el-upload:hover {
+ border-color: #409EFF;
+}
+.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ text-align: center;
+}
+.logo1 /deep/ .avatar-uploader-icon {
+ width: 178px;
+ height: 178px;
+ line-height: 178px;
+}
+.logo2 /deep/ .avatar-uploader-icon {
+ width: 92px;
+ height: 92px;
+ line-height: 92px;
+}
+.logo1 .avatar {
+ width: 178px;
+ height: 178px;
+ display: block;
+}
+.logo2 .avatar {
+ width: 92px;
+ height: 92px;
+ display: block;
+}
+.license-detail {
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ font-size: 14px;
+ padding-left: 70px;
+}
+.license-detail .left {
+ width: 100px;
+ display: inline-block;
+ text-align: right;
+ font-weight: 700;
+}
+.licenseCopy {
+ color: #62a5a5;
+ cursor: pointer;
+}
+.card {
+ margin-bottom: 20px;
+ padding: 20px;
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+ margin-left: 12px;
+ margin-right: 12px;
+}
+.card .top {
+ margin-bottom: 20px;
+ position: relative;
+}
+.card .top .title img {
+ width: 42px;
+ height: 42px;
+ vertical-align: middle;
+}
+.card .top .title .desc {
+ color: #bbb;
+ font-size: 14px;
+ margin: 20px 0;
+}
+.card .top .btn {
+ position: absolute;
+ right: 30px;
+ top: 20px;
+}
+.card .top .title .taginfo {
+ color: #3b8e8e;
+ border: 1px solid #3b8e8e;
+ border-radius: 4px;
+ font-size: 14px;
+ margin-left: 10px;
+ padding: 2px 8px;
+}
+.card .bottom {
+ padding-top: 20px;
+ border-top: 1px solid #ebebeb;
+}
+.card .bottom .info {
+ border: 1px solid #ebebeb;
+ width: 378px;
+ display: flex;
+ padding: 20px;
+}
+.card .bottom .info .img {
+ background-color: #3b8e8e;
+ border-radius: 6px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.card .bottom .info .img, .card .bottom .info img {
+ width: 46px;
+ height: 46px;
+}
+.card .bottom .info .img i {
+ font-size: 28px;
+ color: #fff;
+}
+.card .bottom .info .info-right {
+ flex: 1;
+ display: inline-block;
+ margin-left: 20px;
+}
+.card .bottom .info .info-right .tag {
+ display: flex;
+}
+.card .bottom .info .info-right .tag div {
+ flex: 1;
+ font-size: 14px;
+}
+.card .bottom .info .info-right .tag span{
+ color: #3b8e8e;
+ cursor: pointer;
+ padding: 0 !important;
+ min-height: 14px !important;
+}
+.card .bottom .info .info-right .time {
+ margin-top: 10px;
+ color: #bbb;
+ font-size: 14px;
+}
</style>
--
Gitblit v1.9.3