From 6b467188a7175e0f5bdb4bb25da5a8ee064d2b4c Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期四, 10 十月 2024 12:44:33 +0800 Subject: [PATCH] 1 --- src/views/console/soam/oss-system.vue | 560 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 546 insertions(+), 14 deletions(-) diff --git a/src/views/console/soam/oss-system.vue b/src/views/console/soam/oss-system.vue index 47b1265..deb4a79 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-04-03 14:46:31 + * @LastEditTime: 2024-09-30 10:10:59 * @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 --> @@ -36,13 +36,31 @@ </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: 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 class="logo" style="background-color: seagreen;"> + CPS </div> <div class="content"> <div class="name">CPS</div> @@ -51,8 +69,8 @@ </li> <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 class="logo" style="background-color: dodgerblue;"> + 澶у睆 </div> <div class="content"> <div class="name">澶у睆</div> @@ -61,8 +79,8 @@ </li> <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 class="logo" style="background-color: darkgoldenrod;"> + HMI </div> <div class="content"> <div class="name">HMI</div> @@ -110,16 +128,194 @@ </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="outerData[0].status == 1">宸插叧鑱�</span> + <div class="desc">CPS涓庝紒涓氬井淇″叧鑱旓紝鍗忎綔涓庢矡閫氭洿鍔犻珮鏁堛�傜粦瀹氬悗灏嗗悓姝ヤ紒涓氬井淇$殑浜哄憳鍚嶅崟鍜岀粍缁囨灦鏋勶紝骞跺厑璁告垚鍛樹娇鐢ㄤ紒涓氬井淇¤处鍙风櫥褰�</div> + </div> + <el-button class="btn" @click="addOss(1)" v-if="outerData[0].status == 0" :disabled="outerData[1].status == 1">鍏宠仈</el-button> + <el-button class="btn" @click="relieve(1)" v-if="outerData[0].status == 1" type="danger" plain>瑙g粦</el-button> + </div> + <div class="bottom" v-if="outerData[0].status == 1"> + <div class="info"> + <div class="img"> + <el-icon><Monitor /></el-icon> + </div> + <div class="info-right"> + <div class="tag"> + <div> 缁勭粐鏋舵瀯鍚屾</div> + <span @click="updataOss(1)">绔嬪嵆鍚屾</span> + </div> + <div class="time">涓婃鍚屾鏃堕棿锛歿{licenseDetail.lastSyncTime || '-'}}</div> + </div> + </div> + </div> + </div> + <div class="card"> + <div class="top"> + <div class="title"> + <img src="./logo.png"/> + <span >閽夐拤</span> + <span class="taginfo" v-if="outerData[1].status == 1">宸插叧鑱�</span> + <div class="desc">CPS涓庨拤閽夊叧鑱旓紝鍗忎綔涓庢矡閫氭洿鍔犻珮鏁堛�傜粦瀹氬悗灏嗗悓姝ラ拤閽夌殑浜哄憳鍚嶅崟鍜岀粍缁囨灦鏋勶紝骞跺厑璁告垚鍛樹娇鐢ㄩ拤閽夎处鍙风櫥褰�</div> + </div> + <el-button class="btn" @click="addOss(2)" v-if="outerData[1].status == 0" :disabled="outerData[0].status == 1">鍏宠仈</el-button> + <el-button class="btn" @click="relieve(2)" type="danger" plain v-if="outerData[1].status == 1">瑙g粦</el-button> + </div> + <div class="bottom" v-if="outerData[1].status == 1"> + <div class="info"> + <div class="img"> + <el-icon><Monitor /></el-icon> + </div> + <div class="info-right"> + <div class="tag"> + <div> 缁勭粐鏋舵瀯鍚屾</div> + <span @click="updataOss(2)">绔嬪嵆鍚屾</span> + </div> + <div class="time">涓婃鍚屾鏃堕棿锛歿{licenseDetail.lastSyncTime || '-'}}</div> + </div> + </div> + </div> + </div> + </el-tab-pane> --> + <!-- <el-tab-pane label="DMP鏃ュ織"> + <div class="tabTitle">DMP鏃ュ織</div> + <el-form :inline="true" :model="DMPsearchData" label-width="80px"> + <el-row> + <el-col :span="6"> + <el-form-item label="璁惧"> + <el-select v-model="DMPsearchData.machineCode" style="width: 100%" @change="DMPsearchChange"> + <el-option v-for="item in machineCodeList" :key="item.id" :label="item.machineName" :value="item.id"/> + </el-select> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="閲囬泦椤�"> + <el-select v-model="DMPsearchData.affectedVariable" style="width: 100%" @change="DMPsearchChange"> + <el-option v-for="item in affectedVariableList" :key="item.code" :label="item.code" :value="item.code"/> + </el-select> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="閲囬泦鍊�"> + <el-input v-model="DMPsearchData.variableValue" placeholder="閲囬泦鍊�" clearable style="width: 100%" @change="DMPsearchChange"></el-input> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="鏃堕棿鑼冨洿"> + <el-date-picker v-model="DMPsearchData.selectDate" type="datetimerange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" align="right" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" style="vertical-align: middle;width: 100%;"></el-date-picker> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div> + <div class="dict-table"> + <el-table ref="multipleTableRef" :data="DMPtableData" border style="width: 100%" class="multipleTableRef"> + <el-table-column prop="test" label="璁惧鍚嶇О"></el-table-column> + <el-table-column prop="test" label="璁惧缂栧彿"></el-table-column> + <el-table-column prop="test" label="閲囬泦椤�"></el-table-column> + <el-table-column prop="test" label="閲囬泦鍊�"></el-table-column> + <el-table-column prop="test" label="閲囬泦鐘舵��"></el-table-column> + <el-table-column prop="test" label="閲囬泦鏃堕棿"></el-table-column> + <el-table-column prop="test" label="绫诲瀷"></el-table-column> + <el-table-column fixed="right" label="鎿嶄綔"> + <template #default="scope"> + <el-button text type="primary" size="small" @click="showDrawer(scope.row, scope.$index)">锛燂紵</el-button> + </template> + </el-table-column> + </el-table> + </div> + </div> + <el-pagination + style="margin-top: 12px;" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :page-sizes="[15, 50, 100]" + :page-size="15" + layout="total, sizes, prev, pager, next, jumper" + :total="DMPsearchData.total"> + </el-pagination> + </el-tab-pane> --> </el-tabs> + <save-dialog v-if="dialog.save" ref="saveDialog" @success="addOssSuccess" @closed="dialog.save=false"></save-dialog> + <!-- 瑙g粦 --> + <el-dialog v-model="relieveModel" :width="500"> + <el-icon class="relieveModelIcon"><Warning /></el-icon> + <div class="relieveModelTip"> + <p>瑙i櫎缁戝畾鍚庯紝鎮ㄥ皢涓嶈兘閫氳繃閽夐拤缁存姢鏁版嵁銆�</p> + <p>濡傛灉纭畾瑙g粦璇风偣鍑烩�滅珛鍗宠В缁戔�濓紝鍚﹀垯璇风偣鍑烩�滃彇娑堚�濄��</p> + </div> + <template #footer> + <el-button @click="relieveModel=false" >鍙栨秷</el-button> + <el-button :loading="relieveModelSaveing" type="danger" plain @click="relieveModelSave">绔嬪嵆瑙g粦</el-button> + </template> + </el-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 { + DMPtableData: [], + relieveType: "", + outerData: [{status: 0},{status: 0}], //鏈嶅姟闆嗘垚 + relieveModelSaveing: false, + relieveModel: false, + dialog: { + save: false + }, + copyStr: "", + licenseDetail: { + account: "", + applyDate: "", + expireDate: "", + moduleNames: { + VISION: "", + CPS: "" + } + }, + DMPsearchData: { + machineCode: "", + affectedVariable: "", + variableValue: "", + startTime: "", + endTime: "", + current: 1, + size: 15, + total: 0, + selectDate: [] + }, + machineCodeList: [], + affectedVariableList: [], + uploadData: {}, + logoType: "0", + authorization: {Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0"}, + imageUrl1: "", + imageUrl2: "", isSaveing: false, isEdit: false, active: { @@ -143,15 +339,182 @@ temData: [] } }, - components: {}, + components: {...ElementPlusIconsVue,saveDialog}, created(){ }, mounted(){ this.getOssUpdata(); //鏂囦欢瀛樺偍 this.setting(); //搴旂敤璁剧疆 + this.getFile(); //浼佷笟logo + this.license(); //鎺堟潈 + this.outer(); //鏈嶅姟闆嗘垚 + this.getlog(); //DMP鏃ュ織 + this.getMachineCodeList(); //DMP鏃ュ織 }, methods: { + getMachineCodeList() { + this.$HTTP.get(`/api/blade-cps/machine/list`).then(res=> { + if(res.code == 200) { + this.machineCodeList = res.data; + this.outer(); //鏈嶅姟闆嗘垚 + } + }) + }, + dateChange(val) { + this.DMPsearchData.startTime = val[0]; + this.DMPsearchData.endTime = val[1]; + this.getlog(); + }, + DMPsearchChange() { + this.getlog(); + }, + getlog() { + var obj = Object.assign({},this.DMPsearchData); + this.$HTTP.post(`/api/blade-dmp-log/log/page?current=${this.DMPsearchData.current}&size=${this.DMPsearchData.size}`,obj).then(res=> { + if(res.code == 200) { + this.DMPtableData = res.data.records; + this.DMPsearchData.total = res.data.total; + } + }) + }, + relieveModelSave(type) { //瑙g粦 + this.$HTTP.get(`/api/blade-sync/outer-app-config/unbind/${this.relieveType}`).then(res=> { + if(res.code == 200) { + this.$message.success("鎿嶄綔鎴愬姛"); + this.relieveModel = false; + this.outer(); //鏈嶅姟闆嗘垚 + } + }) + }, + relieve(type) { //瑙g粦 + this.relieveModel = true; + this.relieveType = type; + }, + updataOss(type) { + if(type == 1) { + var url = "/api/blade-sync/wechat/sync"; + var methods = "post"; + } + if(type == 2) { + var url = "/api/blade-sync/ding-sync/sync-immediately"; + var methods = "get"; + } + this.$HTTP[methods](url).then(res=> { + if(res.code == 200) { + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open(type,res.data,'updata'); + }) + } + }) + }, + outer() { + this.$HTTP.get("/api/blade-sync/outer-app-config/list").then(res=> { + if(res.code == 200) { + res.data.forEach(item=> { + this.outerData[item.appType - 1] = item; + }) + } + }) + }, + addOss(type) { + this.dialog.save = true + this.$nextTick(() => { + this.$refs.saveDialog.open(type,this.outerData,'add'); + }) + }, + addOssSuccess() { + this.outer(); //鏈嶅姟闆嗘垚 + }, + 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; @@ -228,7 +591,18 @@ this.ossForm = res.data; } }) - } + }, + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); + this.DMPsearchData.current = "1"; + this.DMPsearchData.size = val; + this.getlog(); + }, + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); + this.DMPsearchData.current = val; + this.getlog(); + } } } </script> @@ -273,16 +647,18 @@ top: 18px; right: 16px; font-size: 14px; - color: #3b8e8e; + color: #409eff; } .show-list li .logo { width: 66px; height: 66px; margin-right: 14px; -} -.show-list li .logo img{ - width: 66px; - height: 66px; + color: #fff; + font-size: 18px; + text-align: center; + line-height: 66px; + border-radius: 6px; + font-weight: 800; } .show-list li .lcontent .name{ font-weight: 700; @@ -321,4 +697,160 @@ 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: #409eff; + border: 1px solid #409eff; + 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: #409eff; + 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: #409eff; + cursor: pointer; + padding: 0 !important; + min-height: 14px !important; +} +.card .bottom .info .info-right .time { + margin-top: 10px; + color: #bbb; + font-size: 14px; +} +.relieveModelIcon { + color: red; + font-size: 16px; + margin-right: 8px; + vertical-align: -3px; + vertical-align: top; +} +.relieveModelTip { + display: inline-block; +} </style> -- Gitblit v1.9.3