定制桌面.

zhangzengfei

2023-09-06 c0c034b3ef0fdf0fd9c802d5984dbd717db6817a

 src/pages/vindicate/views/updateSettings.vue

@@ -1,6 +1,6 @@
<template>

  <div class="all">

    <div class="cluster-content">

    <div class="update-set-content">

      <div class="cluster-center" ref="left">

        <div

          class="menu-item"

@@ -17,62 +17,135 @@
      </div>

      <div class="cluster-right">

        <div class="net-set" v-if="activePage == 0">

          <el-radio-group v-model="radio2" size="medium">

          <!-- <el-radio-group

            v-model="radio2"

            size="medium"

            fill="rgba(61, 104, 225, 1)"

          >

            <el-radio-button label="检查更新"></el-radio-button>

            <el-radio-button label="上传更新"></el-radio-button>

          </el-radio-group>

          </el-radio-group> -->



          <div

            class="update-center"

            v-if="radio2 == '检查更新'"

            v-loading="upgrading"

            element-loading-text="更新中，请稍后"

            element-loading-spinner="el-icon-loading"

          >

            <span class="icon iconfont spin-bg">&#xe6ee;</span>

            <div class="desc" v-if="hasNewVersion">

              检查到最新版本：{{ newVersionName }}

          <div class="button-group">

            <div class="bottom">

              <div class="top" :class="{ toggle: radio2 !== '检查更新' }"></div>

              <div

                class="label-left"

                :class="{ toggle: radio2 == '检查更新' }"

                @click="radio2 = '检查更新'"

              >

                检查更新

              </div>

              <div

                class="label-right"

                :class="{ toggle: radio2 !== '检查更新' }"

                @click="radio2 = '上传更新'"

              >

                上传更新

              </div>

            </div>

            <div class="desc desc-suc" v-else>已是最新版本</div>

          </div>



          <div class="update-center" v-if="radio2 == '检查更新'">

            <img

              v-if="(!upgrading && hasNewVersion) || checking"

              class="spin-bg"

              src="/images/vindicate/检测加载.png"

              :class="upgrading || checking ? 'spin-bg-rot' : ''"

            />

            <img

              v-if="upgrading && hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/加载.png"

            />

            <img

              v-if="!checking && !hasNewVersion"

              class="spin-bg"

              src="/images/vindicate/已是最新版本.png"

            />

            <div class="desc" v-if="checking && !upgrading">

              正在检测版本更新……

            </div>

            <div class="desc" v-if="!checking && hasNewVersion">

              {{ upgrading ? "正在升级至" : "检查到" }}最新版本：{{

                newVersionName

              }}

            </div>

            <div class="desc desc-suc" v-if="!checking && !hasNewVersion">

              当前已经是最新版本

            </div>



            <div

              class="text-desc"

              v-if="hasNewVersion && !checking && !upgrading"

            >

              {{ verText }}

            </div>



            <el-button

              v-if="hasNewVersion"

              v-if="hasNewVersion && !checking && !upgrading"

              :loading="upgrading"

              type="primary"

              style="width: 150px"

              size="small"

              @click="upgradeNewVersion"

              >更新</el-button

            >

          </div>



          <div class="upload-center" v-if="radio2 == '上传更新'">

            <div class="upload-info">

              <img src="/images/vindicate/链接 1.png" style="width: 14px" />

              上传安装软件

            </div>

            <div class="upload-top">

              <!-- <div class="up-text">上传更新文件，只能上传文件</div> -->

              <el-upload

                class="upload-demo"

                drag

                action

                :http-request="uploadPkg"

                :limit="1"

              >

                <i class="el-icon-upload"></i>

                <div

                  class="el-upload__text"

                  v-loading="upgrading"

                  element-loading-text="上传中，请稍后"

                  element-loading-spinner="el-icon-loading"

                >

                  将 .zip 更新文件拖到此处，或 <em> 点击上传 </em>

              <div class="upload-container">

                <div class="upload-fail" v-if="upStatus === 0">

                  <i class="icon iconfont upload-icon"> &#xe71c; </i>

                  <p>上传失败，请重新上传。</p>

                </div>

                <div class="el-upload__tip" slot="tip"></div>

              </el-upload>

              <!-- <fileUploader

                single

                url="/version/upload"

                @complete="onFileUpload"

                @file-added="onFileAdded"

              /> -->



                <div class="upload-success" v-if="upStatus === 1">

                  <i class="icon iconfont upload-icon"> &#xe71d; </i>

                  <p>上传成功，请点击更新按钮开始更新。</p>

                </div>



                <el-upload

                  ref="myUpload"

                  class="upload-demo"

                  drag

                  action

                  v-show="!shengjiing && upStatus === ''"

                  :http-request="uploadPkg"

                  :limit="1"

                  accept=".zip,.tar,.gz,.tar.gz"

                >

                  <i class="el-icon-upload"></i>

                  <div

                    class="el-upload__text"

                    v-loading="upgrading"

                    element-loading-text="上传中，请稍后"

                    element-loading-spinner="el-icon-loading"

                  >

                    将 .zip 更新文件拖到此处，或 <em> 点击上传 </em>

                  </div>

                  <div class="el-upload__tip" slot="tip"></div>

                </el-upload>

              </div>



              <span

                class="icon iconfont spin-bg"

                :class="shengjiing ? 'spin-bg-rot' : ''"

                v-if="shengjiing"

                >&#xe6fb;</span

              >

              <div class="desc" v-if="shengjiing">正在进行更新……</div>

              <el-button

                v-if="!upgrading"

                type="primary"

                style="width: 150px"

                style="width: 150px; font-size: 15px"

                @click="upgrade"

                size="small"

                class="uploader-btn"

                :loading="shengjiing"

                >{{ shengjiing ? "更新中" : "更新" }}</el-button

@@ -82,7 +155,6 @@


          <div class="cur-version">当前版本：{{ curVersionName }}</div>

        </div>



        <div class="wifi" v-if="activePage == 1">

          <div class="content">

            <div class="title">系统更新设置</div>

@@ -106,6 +178,8 @@
              <div class="name">{{ item.title }}</div>

              <el-switch

                v-model="item.val"

                active-value="1"

                inactive-value="0"

                active-color="rgba(61, 104, 225, 1)"

                @change="switchChange(item)"

              >

@@ -121,8 +195,6 @@
<script>

import {

  getDevInfo,

  fileUpload,

  doUpgrade,

  checkNewVersion,

  upgradeNewVersion,

  uploadUpgradePkg,

@@ -130,19 +202,8 @@
  getSettings,

  updateSettings,

} from "@/api/system";

import { getUrlKey } from "@/api/utils";

export default {

  filters: {

    nameFilter(v) {

      switch (v) {

        case value:

          break;



        default:

          break;

      }

      return;

    },

  },

  data() {

    return {

      radio2: "检查更新",

@@ -150,13 +211,16 @@
      patchUpdateStatus: "",

      probeSum: 0,

      timer: null,

      verText: "",

      patchFile: {},

      fileAdded: false,

      curVersionName: "",

      shengjiing: false,

      upgrading: false,

      checking: true,

      newVersionName: "",

      hasNewVersion: true,

      hasNewVersion: false,

      upStatus: "",

      sysSetList: [

        { title: "自动清理软件包缓存", val: false, name: "sys_auto_clean" },

        { title: "更新提醒", val: false, name: "sys_update_notice" },

@@ -169,13 +233,19 @@
      ],

      pkgID: "",

      tabList: [

        { name: "系统更新", icon: "\ue6f2" },

        { name: "更新设置", icon: "\ue6db" },

        { name: "系统更新", icon: "\ue735" },

        { name: "更新设置", icon: "\ue733" },

      ],

    };

  },

  mounted() {

    this.fetchUpgradInfo();

    const isAutoUpdate = getUrlKey("autoUpdate");

    if (isAutoUpdate == 1) {

      this.checking = false;

      this.upgradeNewVersion();

    } else {

      this.fetchUpgradInfo();

    }

    this.fetchSettings();

  },

  methods: {

@@ -196,17 +266,25 @@
      });

    },

    fetchUpgradInfo() {

      this.checking = true;

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

        setTimeout(() => {

          this.checking = false;

        }, 800);

        this.newVersionName = res.data.newVersion;

        this.curVersionName = res.data.curVersion;

        this.hasNewVersion = res.data.hasNewVersion;

        this.verText = res.data.newVersionInfo;



        if (!this.hasNewVersion) {

          this.upgrading = false;

        }

      });

    },

    upgradeNewVersion() {

      this.upgrading = true;

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

        this.upgrading = false;

        this.$message.success("更新版本成功");

        this.$notify.success("更新版本成功");

        this.fetchUpgradInfo();

      });

    },

@@ -222,18 +300,38 @@
      let param = new FormData();

      param.append("archive", params.file);

      this.upgrading = true;

      uploadUpgradePkg(param).then((res) => {

        this.upgrading = false;

        this.pkgID = res.data.id;

      });

      uploadUpgradePkg(param)

        .then((res) => {

          this.upgrading = false;

          this.pkgID = res.data.id;

          this.upStatus = 1;

          setTimeout(() => {

            this.upStatus = "";

          }, 2000);

        })

        .catch(() => {

          this.upgrading = false;

          this.$refs.myUpload.clearFiles();

          this.upStatus = 0;

          setTimeout(() => {

            this.upStatus = "";

          }, 2000);

        });

    },

    upgrade() {

      if (!this.pkgID) {

        this.$notify.error({

          title: "失败",

          message: "请先上传更新包",

        });

        return;

      }

      this.shengjiing = true;

      upgradePkg({

        id: this.pkgID,

      }).then((res) => {

        this.shengjiing = false;

        this.$message.success("更新版本成功");

        this.$notify.success("更新版本成功");

        this.pkgID = "";

      });

    },

@@ -279,13 +377,12 @@
      this.activePage = typ;

    },

    switchChange(item) {

      let data = {

      updateSettings({

        name: item.name,

        value: item.val,

      };

      updateSettings(data).then((res) => {

      }).then((res) => {

        if (res.code == 200) {

          this.$message.success("更新成功");

          this.$notify.success("配置成功");

        }

      });

    },

@@ -295,52 +392,61 @@
<style lang="scss">

.all {

  width: 100%;

  background-color: #fbfaff;

}



.cluster-content {

.update-set-content {

  height: 100%;

  display: flex;

  flex-direction: row;

  flex: 1;

  flex-basis: auto;

  box-sizing: border-box;

  border-top: 4px solid rgb(242, 242, 247);

  border-left: 4px solid rgb(242, 242, 247);

  .cluster-center {

    height: 100%;

    width: 280px;

    width: 300px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    padding: 9px 10px 0 10px;

    border-right: 4px solid rgb(242, 242, 247);

    .menu-item {

      background-color: #f8f8f8;

      height: 50px;

      margin-bottom: 10px;

      height: 56px;

      margin-bottom: 4px;

      border-radius: 8px;

      line-height: 50px;

      line-height: 56px;

      box-sizing: border-box;

      font-size: 14px;

      cursor: pointer;

      padding: 0 20px;

      padding: 0 15px;

      display: flex;

      justify-content: space-between;

      .con {

        .iconfont {

          font-size: 20px;

          line-height: 32px;

          width: 32px;

          height: 26px;

          margin-right: 10px;

          color: #333;

        }

        .menu-text {

          font-size: 15px;

          font-size: 16px;

          font-weight: 700;

        }

      }

    }

    .menu-item-active {

      color: #fff;

      background-color: rgba(61, 104, 225, 1);

      background-color: var(--colorCard) !important;

      .iconfont {

        color: #fff !important;

      }

      .menu-text {

        color: #fff;

      }

    }

    .menu-item:hover {

      color: #fff;

      background-color: rgba(61, 104, 225, 1);

      background-color: #f2f2f7;

    }

  }

  .cluster-right {

@@ -349,7 +455,6 @@
    overflow: auto;

    box-sizing: border-box;

    position: relative;

    padding: 20px 40px;

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

      > .el-form-item__label:before,

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

@@ -384,37 +489,195 @@
    .net-set {

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      justify-content: start;

      height: 95%;

      padding: 0 30px;

      /* .el-radio-group {

        margin-top:33px ;

        .el-radio-button__inner {

          font-size: 14px;

          width: 84px;

          height: 28px;

          padding: 0;

          border-radius: 20px;

          text-align: center;

          line-height: 28px;

          background: #F2F2F7 !important;

          border: none !important;

          box-shadow:none !important;

          &:hover {

            color: var(--colorCard) !important;

          }

          
        }

        & label.is-active   .el-radio-button__inner {

            background: var(--colorCard) !important;

            border: none !important;

             &:hover {

            color: white !important;

          }

          }

      } */

      .button-group {

        margin: 0 auto;

        margin-top: 30px;

        width: 168px;

        height: 28px;

        .bottom {

          position: relative;

          height: 100%;

          background: #f2f2f7;

          border-radius: 20px;

          cursor: pointer;

          .top {

            position: absolute;

            top: 0;

            left: 0;

            width: 84px;

            height: 28px;

            background: var(--colorCard);

            border-radius: 20px;

            transition: all 0.2s linear;

            &.toggle {

              left: 84px;

            }

          }

          .label-left {

            position: absolute;

            width: 84px;

            height: 28px;

            top: 0;

            left: 0;

            z-index: 1;

            font-size: 14px;

            line-height: 28px;

            font-weight: 700;

            color: #333333;

            &.toggle {

              color: #fff;

            }

          }

          .label-right {

            position: absolute;

            width: 84px;

            height: 28px;

            top: 0;

            right: 0;

            z-index: 1;

            font-size: 14px;

            line-height: 28px;

            font-weight: 700;

            color: #333333;

            &.toggle {

              color: #fff;

            }

          }

        }

      }

      @keyframes spin {

        from {

          transform: rotate(0deg);

        }

        to {

          transform: rotate(360deg);

        }

      }



      .spin-bg {

        width: 60px;

        margin-top: 60px;

        margin-bottom: 15px;

      }

      .spin-bg-rot {

        animation: spin 0.8s linear infinite;

      }

      .desc {

        font-weight: bold;

        font-size: 16px;

        color: #333333;

      }

      .update-center {

        display: flex;

        flex-direction: column;

        align-items: center;



        .spin-bg {

          color: rgb(206, 205, 205);

          font-size: 110px;

          margin-bottom: 5px;

        }



        .desc {

          height: 20px;

          line-height: 20px;

          font-size: 15px;

          color: rgb(231, 121, 58);

          margin-bottom: 20px;

          font-weight: 600;

        }

        .desc-suc {

          color: rgb(58, 231, 58);

          color: #333;

          border-radius: 8px;

        }

        .el-button {

          width: 100px;

          margin-top: 48px;

          width: 150px;

          height: 40px;

          border-radius: 25px;

          font-size: 15px;

          background: var(--colorCard) !important;

          border: none !important;

          &:hover {

            color: white !important;

          }

        }

        .text-desc {

          width: 90%;

          height: 150px;

          margin-top: 20px;

          background-color: #f2f2f7;

          padding: 20px 30px;

          color: #333;

          text-align: left;

          font-size: 12px;

          border-radius: 8px;

        }

      }

      .upload-center {

        margin-top: 44px;

        .upload-info {

          margin-bottom: 20px;

          text-align: left;

          font-weight: bold;

          font-size: 14px;

          color: #333333;

        }

        .upload-container {

          position: relative;

          width: 412px;

          height: 174px;

          background-color: #fff;

          border-radius: 8px;



          .upload-fail .iconfont {

            color: rgb(254, 109, 104);

          }



          .upload-success .iconfont {

            color: rgb(78, 148, 255);

          }



          .upload-success,

          .upload-fail {

            position: absolute;

            z-index: 1;

            width: 100%;

            height: 174px;

            top: 0;

            left: 0;

            background-color: #fff;

            font-weight: bold;

            font-size: 10px;



            transition: all 1000ms linear 0;

            -o-transition: all 1000ms linear 0; /*兼容parsto内核*/

            -moz-transition: all 1000ms linear 0; /*兼容gecko内核*/

            -webkit-transition: all 1000ms linear 0; /*兼容webkit内核*/

          }

          .upload-icon {

            display: block;

            margin-top: 32px;

            margin-bottom: 42px;

            font-size: 50px;

          }

        }



        .update-center {

          height: 160px;



@@ -433,7 +696,13 @@
            margin-bottom: 10px;

          }

          .el-button {

            width: 120px;

            width: 150px;

            height: 40px;

            background: var(--colorCard) !important;

            border: none !important;

            &:hover {

              color: white !important;

            }

          }

          .el-button--small {

            font-size: 14px;

@@ -446,8 +715,47 @@
          box-sizing: border-box;

          flex-direction: column;



          .el-upload {

            width: 340px !important;

            height: 117.87px !important;

            margin: 28px auto;

            .el-upload-dragger {

              width: 100% !important;

              height: 100% !important;

              i {

                display: none !important;

              }

              .el-upload__text {

                color: #828282 !important;

                margin-top: 52px !important;

                font-size: 14px !important;

              }

              .el-loading-text {

                font-size: 14px !important;

                color: #333333 !important;

              }

            }

          }



          .el-upload.el-upload--text .el-upload-dragger:hover {

            border-color: var(--colorCard) !important;

          }



          em {

            color: var(--colorCard) !important;

          }



          .uploader-btn {

            margin-top: 15px;

            width: 150px;

            height: 40px;

            margin-top: 158px;

            margin-bottom: 25px;

            background: var(--colorCard) !important;

            border: none !important;

            border-radius: 25px !important;

            &:hover {

              color: white !important;

            }

          }

        }

        .up-text {

@@ -464,35 +772,63 @@
        }

      }

      .cur-version {

        position: absolute;

        bottom: 50px;

        left: 50%;

        transform: translateX(-50%);

        font-size: 14px;

      }

    }

    .wifi {

      .content {

        margin-bottom: 20px;

      }

      padding: 10px 10px 0 10px;

      .bar {

        display: flex;

        align-items: center;

        height: 50px;

        padding: 0 25px;

        background-color: #f8f8f8;

        background-color: #f2f2f7;

        justify-content: space-between;

        border-radius: 12px;

        margin-bottom: 10px;

        margin-bottom: 4px;

        padding-left: 20px;

        .name {

          font-size: 15px;

          font-size: 14px;

          font-weight: 700;

        }

      }

      .title {

        text-align: left;

        padding: 10px;

        padding: 17px 0 17px 25px;

        font-size: 16px;

        color: #333;

        font-weight: 700;

      }

      .el-switch {

        width: 40px;

        height: 14px;

        margin-right: 17px;

      }



      .el-switch__core {

        width: 30px !important;

        height: 14px !important;

        &::after {

          top: 0px !important;

          left: 0px !important;

          width: 12px !important;

          height: 12px !important;

        }

      }



      .is-checked .el-switch__core {

        background-color: var(--colorCard) !important;

        border: 1px solid var(--colorCard) !important;

        &::after {

          margin-left: 16px;

        }

      }

    }



    .save-btn {

      background-color: #3d68e1;

      width: 240px;

      height: 40px;

      margin: 0 auto;

@@ -501,6 +837,11 @@
      line-height: 40px;

      font-size: 14px;

      margin-top: 20px;

      background: var(--colorCard) !important;

      border: none !important;

      &:hover {

        color: white !important;

      }

    }

  }

}