slble-attend/sl.ble_sys-attend/src-js/views/about/index.vue

<template> 
  <div class="about">
    <el-card class="centerCardInner" >
      <div class="rtState">
        <data-card name="关于" style="width: 100%;">
          <div class="stateCardList">
            <table>
              <tr v-if="cfg.enableCopyright">
                <td colspan="2">
                  <span >本软件及相关设备知识产权归</span>
                </td>
              </tr>
              <tr v-if="cfg.enableCopyright">
                <td colspan="2">
                  <div class="companyCenter"><a href="https://www.scenauto.com" target="_blank"><span class="company" title="上海迅见自动化有限公司">上海迅见自动化有限公司</span></a><span style="font-size: 15px; color: black; font-weight: bold; margin-left: 22px">所有</span></div>
                </td>
              </tr>
              <tr v-if="cfg.enableCopyright">
                <td><span>软件名称</span></td>
                <td><span ><img :src="logoUrl" style="height: 25px" ></span></td>
              </tr>
              <tr v-if="cfg.enableCopyright">
                <td colspan="2">
                  <span class="foot" title="©2019 上海迅见自动化有限公司. All rights reserved. ">©2019 上海迅见自动化有限公司. All rights reserved. </span>
                </td>
              </tr>
              <tr>
                <td><span>授 权 与：</span></td>
                <td>
                  <span>{{ cfg.owner }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span>授权类型：</span>
                </td>
                <td>
                  <span v-if="licCode < 0">{{ '无授权码' }}</span>
                  <span v-else>{{ '过期时间之前可使用' }}</span>
                </td>
              </tr>
              <tr v-if="licCode >= 0">
                <td><span>过期时间：</span></td>
                <td><span>{{ pTime(licFinalTime, '{yyyy}年{mm}月{dd}日') }}</span></td>
              </tr>
              <tr>
                <td><span>请求码</span></td>
                <td><el-button size="mini" icon="el-icon-download" @click="handleDownloadReqCode">下载</el-button></td>
              </tr>
              <tr>
                <td><span>激活码</span></td>
                <td>
                  <el-upload
                    ref="upload"
                    :file-list="filesResponse"
                    :limit="2"
                    :multiple="false"
                    :auto-upload="false"
                    :on-change="handleUploadRspFilesChange"
                    class="upload-demo"
                    action="blank">
                    <el-button slot="trigger" icon="el-icon-paperclip" size="mini" >选择文件</el-button>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td><el-button style="margin-left: 10px; width: 100px" icon="el-icon-circle-check" size="mini" @click="handleActivateRspCode">激活</el-button></td>
                <td></td>
              </tr>
            </table>
          </div>
        </data-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { licModify, licReqCode } from '@/api/system'
import { parseTime } from '@/utils/time'

const vGlobal = window.vueGlobal;

export default {
  data() {
    return {
      filesResponse: [],
      // logoUrl: require('@/public/img/productname.png')
    }
  },
  computed: {
    cfg() {
      return vGlobal.sysCfg ? vGlobal.sysCfg.sysCfgView : null
    },
    licCode() {
      return vGlobal.licCode
    },
    licCodeStr() {
      if (this.licCode < 0) {
        return '未授权'
      } else {
        return '已授权'
      }
    },
    licMode() {
      return vGlobal.licMode
    },
    licFinalTime() {
      return vGlobal.licFinalTime
    },
    licFinalNotify() {
      return vGlobal.licFinalNotify
    }
  },
  mounted() {
  },
  methods: {
    handleActivateRspCode() {
      const self = this
      console.log('Rsp Code')
      if (this.filesResponse.length <= 0) {
        return
      }
      const file = this.filesResponse[0]
      console.log('file', file)
      const reader = new FileReader()
      reader.readAsText(file.raw)
      reader.onload = function(e) {
        const bin = this.result
        const data = {
          rspCode: bin
        }
        console.log('data', data)
        licModify(data).then((response) => {
          if (response.data.success) {
            self.$notify({
              title: '成功',
              message: '成功执行命令',
              type: 'success',
              duration: 2000
            })
          } else {
            self.$notify({
              title: '授权失败',
              message: response.data.error,
              type: 'failed',
              duration: 2000
            })
          }
        })
        // const content = decodeURIComponent(h[1])
      }
    },
    handleDownloadReqCode() {
      licReqCode({}).then(resp => {
        if (resp.data.success) {
          const reqCode = resp.data.str
          // import('@/vendor/Export2File').then(zip => {
          //   zip.export_to_file(reqCode, 'activation.request')
          // })
        }
      })
    },
    handleUploadRspFilesChange(file, files) {
      this.filesResponse = [file]
    },
    pTime(time, cFormat) {
      return parseTime(time, cFormat)
    }
  }
}
</script>

<style lang="scss" scoped>

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.centerCardInner {
  margin-top: 20px;
  display: flex;
  height: auto;
}

.stateCardList {
  padding-left: 10px;
  padding-top: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: 16px;
  width: 500px;
  height: auto;
  display: flex;
  position: relative; 
}

tr {
  height: 40px;
}

.companyCenter {
  align-items: center;
  text-align: center;
  .company {
    font-weight: 900;
    font-size: 24px;
    color: red;
    //text-shadow: #0e0e0e 1px 1px;

    &:before {
      content: attr(title);
      position: absolute;
      z-index: 10;
      //color:#b79d77;
      //-webkit-mask:linear-gradient(to bottom, #b79d77, transparent, #b79d77 );
    }
  }
}

.foot {
  align-items: center;
  text-align: center;
  font-weight: 900;
  color: red;
  //text-shadow: #0e0e0e 1px 1px;
  &:before {
    content: attr(title);
    position: absolute;
    z-index: 10;
    //color:#b79d77;
    //-webkit-mask:linear-gradient(to bottom, #b79d77, transparent, #b79d77 );
  }
}

</style>