后端没修改的情况下添加默认背景图

heyujie

2021-11-16 6a5962fe9544005dba620b00fb36c25fe2da4e76

 src/pages/vindicate/views/sysInfo.vue

@@ -4,35 +4,45 @@
      <div class="sys-right">

        <div class="auto">

          <div class="title-bg">

            <div class="title">SmartAIOS</div>

            <div class="title">Smart AIOS</div>

            <div class="desc">Copyright © 贝思科技术有限公司</div>

          </div>

          <div class="bar">

          <div class="bar" style="background-color: #F2F2F7;">

            <div class="name">版本：</div>

            <div class="desc">{{ verText }}</div>

            <div class="desc">

              {{

                serializedNumber == "" ? "SmartAIOS试用版" : "SmartAIOS正式版"

              }}

            </div>

          </div>

          <div class="bar">

            <div class="name">激活：</div>

            <div class="right-zone">

              <el-button type="primary" size="small" @click="confirmAgain"

              <el-button

                type="primary"

                size="small"

                @click="confirmAgain"

                v-if="serializedNumber != ''"

                >导出产品密钥</el-button

              >

              <div class="desc" style="color: rgba(71, 153, 247, 1)">

                {{ sn == "" ? "未激活" : "已激活" }}

              <div class="desc activation">

                {{ serializedNumber == "" ? "未激活" : "已激活" }}

              </div>

            </div>

          </div>

          <div class="bar">

            <div class="name">请求码：</div>

            <div class="desc" style="font-size: 12px">{{ q }}</div>

            <div class="name" style="min-width: 65px;">请求码：</div>

            <div class="desc code" style="font-size: 12px">{{ q }}</div>

          </div>

          <div class="bar">

            <div class="name">产品密钥：</div>

            <div class="desc" style="font-size: 12px">{{ authorization }}</div>

            <div class="desc" >

              {{ authorization || "-" }}

            </div>

          </div>

          <div class="bar">

            <div class="name">到期时间：</div>

            <div class="desc">{{ expireTime }}</div>

            <div class="desc" style="font-size: 16px">{{ expireTime }}</div>

          </div>

        </div>

      </div>

@@ -43,7 +53,6 @@
        <span class="icon iconfont" style="color: orangered">&#xe6e6;</span>

        产品密钥导出后，系统大部分功能将无法使用，请确认是否继续？

      </div>



      <div class="info">

        如需继续，请输入管理员密码，并导入你想要激活的设备请求码，然后点击“确认”。

        <span style="color: #8f949a; font-size: 14px"

@@ -56,7 +65,7 @@
          size="small"

          placeholder="请输入管理员密码"

          v-model="password"

          style="padding-left: 50px; width: 360px"

          style="padding-left: 50px; width: 460px"

        ></el-input>

      </div>

      <div class="validate">

@@ -64,23 +73,21 @@
          <el-input

            type="textarea"

            autosize

            style="width: 360px"

            placeholder="将产品密钥粘贴在此处"

            style="width: 460px"

            placeholder="将你想要激活的设备请求码粘贴在此处"

            v-model="secrectKey"

          >

          </el-input>

        </form>



        <!-- <el-upload

          class="upload-demo"

          action

          :http-request="uploadKey"

          :limit="1"

          :show-file-list="false"

        <el-button size="small" @click="txtbtn" type="primary"

          >导入文件</el-button

        >

        </el-upload> -->

          <el-button size="small" @click="txtbtn" type="primary">导入文件</el-button>

        <input type="file" @change="loadTextFromFile" id="txt" style="display:none"/>

        <input

          type="file"

          @change="loadTextFromFile"

          id="txt"

          style="display: none"

        />

      </div>



      <span slot="footer" class="dialog-footer">

@@ -95,52 +102,45 @@
import { getSN, cancelAuthorization } from "@/api/system";

export default {

  mounted() {

    getSN().then((res) => {

      if (res.code == 200) {

        this.authorization = res.data.authorization;

        this.expireTime = res.data.expireTime;

        this.sn = res.data.sn;

        this.q = res.data.q;

      }

    });

    this.refreshSn();

  },

  data() {

    return {

      authorization: "",

      expireTime: "",

      sn: "",

      serializedNumber: "",

      secrectKey: "",

      q: "",

      verText: "SmartAIOS正式版",

      // verText: "SmartAIOS正式版",

      activeState: "已激活",

      password: "",

      dialogVisible: false,

    };

  },

  methods: {

    refreshSn() {

      getSN().then((res) => {

        if (res.code == 200) {

          this.authorization = res.data.authorization;

          this.expireTime = res.data.expireTime;

          this.serializedNumber = res.data.sn;

          this.q = res.data.q;

          debugger

        }

      });

    },

    confirmAgain() {

      // this.$confirm("您是否确认立即备份所有应用的配置数据？", "立即备份", {

      //   confirmButtonText: "确定",

      //   cancelButtonText: "取消",

      // }).then(() => {

      //   this.$message({

      //     type: "success",

      //     message: "备份成功",

      //   });

      // });

      this.dialogVisible = true;

    },

     txtbtn() {

    txtbtn() {

      document.getElementById("txt").click();

    },

    loadTextFromFile(e) {

      const file = e.target.files[0];

      var reader = new FileReader(); //new一个FileReader实例

      let that = this

      let that = this;

      reader.onload = function () {

        debugger

        that.secrectKey = this.result.trim()

        console.log(this.result);

        that.secrectKey = this.result.trim();

      };

      reader.readAsText(file);

    },

@@ -156,25 +156,44 @@
        passwd: this.password,

        down: 1,

      }).then((res) => {

        debugger;

        if (res.type=="application/json") {

          var reader = new FileReader();

          reader.readAsText(res,"utf-8");

          let that = this

          reader.onload = function () {

            var receive_data = JSON.parse(this.result); //这个就是解析出来的数据

            that.$notify.error(receive_data.msg);

          };

          return;

        }

        let url = window.URL.createObjectURL(

          new Blob([res], {

            type: "text/plain",

          })

          new Blob([res], { type: "text/plain" })

        );

        let a = document.createElement("a");

        a.href = url;

        a.download = "key.txt";

        a.click();

        window.URL.revokeObjectURL(url);

          debugger

        this.refreshSn();

        window.parent.postMessage({ msg: "checkSN" }, "*");

        this.$notify.success("导出成功");

        this.dialogVisible = false;

      });

    },

  },

};

</script>

<style lang="scss">

div{

  color: #333;

}



.v-sys-info {

  width: 100%;

  background-color: #FBFAFF;

  border-top: 4px solid #f2f2f7;

  border-left: 4px solid #f2f2f7;

  .el-dialog__header {

    padding: 15px 20px 10px;

    text-align: left;

@@ -243,7 +262,7 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

    padding: 10px 15px 0 10px;

    .el-form-item.is-required:not(.is-no-asterisk)

      > .el-form-item__label:before,

    .el-form-item.is-required:not(.is-no-asterisk)

@@ -277,28 +296,30 @@
    }

    .auto {

      .title-bg {

        background-color: #f8f8f8;

        height: 150px;

        border-radius: 12px;

        margin-bottom: 20px;

        background-color: #fff;

        height: 110px;

        border-radius: 8px;

        margin-bottom: 10px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        .title {

          font-size: 34px;

          font-weight: 600;

          line-height: 50px;

          font-size: 24px;

          font-weight: 700;

          line-height: 33.6px;

        }

        .desc {

          font-size: 16px;

          line-height: 30px;

          margin-top:10px ;

          font-size: 12px;

          line-height: 16.8px;

          font-weight: 700;

        }

      }

      .bar {

        display: flex;

        align-items: center;

        padding: 12px 25px;

        background-color: #f8f8f8;

        padding: 12px 40px;

        background-color: #fff;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 10px;

@@ -307,14 +328,16 @@
          align-items: center;

        }

        .name {

          font-size: 15px;

          font-size: 16px;

          font-weight: 700;

          text-align: left;

          min-width: 180px;

        }

        .desc {

          font-size: 15px;

          margin-left: 20px;

          max-width: 600px;

          font-size: 16px;

          font-weight: 700;

          margin-left: 30px;

          max-width: 568px;

          /* overflow: hidden; */

          /* text-overflow: ellipsis; */

          /* white-space: nowrap; */

@@ -322,6 +345,17 @@
          word-wrap: break-word;

          text-align: left;

        }

        .activation{

          width: 90px;

          height: 28px;

          background: rgba(78,148,255,0.1);

          border: 1px solid #4E94FF;

          border-radius:20px ;

          text-align: center;

          line-height: 28px;

          color: #333;

          font-size: 14px;

        }

        .el-input {

          width: 100%;

          .el-input {