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

<template> 
  <div class="about">
    <div 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>
    </div>
  </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 {
    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>