1

lzhe

2024-10-10 6b467188a7175e0f5bdb4bb25da5a8ee064d2b4c

 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-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
-->
@@ -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,33 +36,51 @@
               </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>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/cps.png">
               <li :class="{active: active.isA}" @click="changeLi('isA')">
                  <div class="edit" @click="editBtn('isA')">编辑</div>
                  <div class="logo" style="background-color: seagreen;">
                     CPS
                  </div>
                  <div class="content">
                     <div class="name">CPS</div>
                     <div class="domain">http://192.168.1.199</div>
                  </div>
               </li>
               <li>
                  <div class="edit">编辑</div>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/vision.png">
               <li :class="{active: active.isB}" @click="changeLi('isB')">
                  <div class="edit" @click="editBtn('isB')">编辑</div>
                  <div class="logo" style="background-color: dodgerblue;">
                     大屏
                  </div>
                  <div class="content">
                     <div class="name">大屏</div>
                     <div class="domain">http://192.168.1.199:31005</div>
                  </div>
               </li>
               <li>
                  <div class="edit">编辑</div>
                  <div class="logo">
                     <img src="http://116.63.155.153:83/api/static/images/hmi.png">
               <li :class="{active: active.isC}" @click="changeLi('isC')">
                  <div class="edit" @click="editBtn('isC')">编辑</div>
                  <div class="logo" style="background-color: darkgoldenrod;">
                     HMI
                  </div>
                  <div class="content">
                     <div class="name">HMI</div>
@@ -73,60 +91,517 @@
            <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="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>解绑</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">解绑</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>
      <!-- 解绑 -->
      <el-dialog v-model="relieveModel" :width="500">
         <el-icon class="relieveModelIcon"><Warning /></el-icon>
         <div class="relieveModelTip">
            <p>解除绑定后，您将不能通过钉钉维护数据。</p>
            <p>如果确定解绑请点击“立即解绑”，否则请点击“取消”。</p>
         </div>
         <template #footer>
            <el-button @click="relieveModel=false" >取消</el-button>
            <el-button :loading="relieveModelSaveing" type="danger" plain @click="relieveModelSave">立即解绑</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: {
               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();  //服务集成
         this.getlog();  //DMP日志
         this.getMachineCodeList(); //DMP日志
      },
      methods: {
         ossUpdata(){
				
         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) {  //解绑
            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) {  //解绑
            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;
         },
         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;
               }
            })
         },
         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();
         }
      }
   }
@@ -172,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;
@@ -208,10 +685,172 @@
}
.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: #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>