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

heyujie

2021-11-16 6a5962fe9544005dba620b00fb36c25fe2da4e76

 src/pages/desktop/index/components/Tools.vue

@@ -15,23 +15,37 @@
        />
      </div>

      <div class="fast-path" :class="showFastPath?'fast-path-show':''" @click.stop>
      <div
        class="fast-path"
        :class="showFastPath ? 'fast-path-show' : ''"
        @click.stop
      >
        <div class="top">
          <img src="" alt="" />
          <span class="username">{{userInfo.username}}</span>
          <img
            v-if="userInfo"
            :src="`data:image/png;base64,${userInfo.headpic}`"
            alt=""
          />

          <span class="username">{{ userInfo && userInfo.username }}</span>
        </div>
        <div class="link-list">
          <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
          <div
            class="list-item"
            v-for="(x, i) in linkList"
            :key="i"
            @click="clickFastPath(x.name)"
          >
            {{ x.name }}
          </div>
        </div>
        <div class="bot">
          <div class="set" @click="gotoSet">
            <span class="icon iconfont">{{"\ue60f"}}</span>
          <div class="set" @click="clickFastPath('系统设置')">
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>设置</span>
          </div>
          <div class="exit" @click="toLogout">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span class="icon iconfont">{{ "\ue60f" }}</span>
            <span>退出</span>
          </div>
        </div>
@@ -39,7 +53,7 @@
      <div class="tools-icon no-hover-style">
        <img
          class="smart-ai"
          :src="`${publicPath}images/desktop/header-icon/SmartAI.png`"
          :src="`${publicPath}images/desktop/header-icon/SmartAI-新.png`"
          alt
        />
      </div>
@@ -63,6 +77,12 @@
      </div>
    </div>
    <div class="tools-right">
      <div class="tools-icon my-tools-icon" @click="goToWireSet">
        <span class="icon iconfont">&#xe6dd;</span>
      </div>
      <div class="tools-icon my-tools-icon" @click.stop="toggleShowWifi">
        <span class="icon iconfont">&#xe6e5;</span>
      </div>
      <div class="tools-icon">
        <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
      </div>
@@ -83,7 +103,7 @@
          </span>
          <el-dropdown-menu slot="dropdown" style="top: 44px">
            <el-dropdown-item style="text-align: left">
              <b>Hi {{ userInfo.username }}</b>
              <b>Hi {{ userInfo && userInfo.username }}</b>
            </el-dropdown-item>
            <el-dropdown-item @click.native="showPasswdForm = true"
              >修改密码</el-dropdown-item
@@ -141,12 +161,106 @@
        >
      </div>
    </el-dialog>

    <div class="sys-remind" v-if="showSysRemind">
      <!--  -->
      <div class="remind-title">系统更新提醒</div>

      <div class="remind-content">
        已做好<b>系统更新</b>的准备，<span style="color: red"
          >更新预计需要一定的时间</span
        >，如果您未准备好，我们将在一小时后再次向您确认。
      </div>

      <div class="btns">
        <el-button size="mini" type="primary" @click="delaySysRemind(3600 * 24)"
          >关闭此次提醒</el-button
        >
        <el-button size="mini" type="primary" @click="delaySysRemind(60 * 60)"
          >1小时后提醒</el-button
        >
        <el-button
          :loading="upgrading"
          size="mini"
          type="primary"
          @click="updateSysNow"
        >
          {{ upgrading ? "更新中" : "立即更新" }}</el-button
        >
      </div>
    </div>

    <div class="sys-remind" v-if="showAppRemind">
      <!--  -->
      <div class="remind-title">算法/应用更新提醒</div>

      <div class="remind-content">
        发现 <b>算法/应用 </b>更新，<span style="color: red"
          >请前往查看更新</span
        >。如果您未准备好，我们将在一小时后再次向您确认。
      </div>

      <div class="btns">
        <el-button size="mini" type="primary" @click="delayAppRemind(3600 * 24)"
          >关闭此次提醒</el-button
        >
        <el-button size="mini" type="primary" @click="delayAppRemind(60 * 60)"
          >1小时后提醒</el-button
        >
        <el-button
          :loading="upgrading"
          size="mini"
          type="primary"
          @click="goToUpdate"
        >
          前往更新</el-button
        >
      </div>
    </div>

    <div class="wifi-pop" :class="showWifi ? 'wifi-pop-show' : ''">
      <div class="top-title">
        <div class="text">无线网络</div>
        <el-switch v-model="isOpenWifi" active-color="rgba(61, 104, 225, 1)">
        </el-switch>
      </div>

      <div class="wifi-list">
        <div
          class="item"
          :class="i == activeWifi ? 'item-active' : ''"
          v-for="(x, i) in wifiList"
          :key="i"
          @click="pickWifi(x, i)"
        >
          <!--  -->
          <div class="top">
            <span class="icon iconfont">&#xe6e5;</span>
            <div class="name">
              <span style="font-size: 14px">{{ x.name }}</span>
              <span>安全</span>
            </div>
          </div>
          <div class="bot" v-if="x.showBottom">
            <el-checkbox v-model="x.checked">自动连接</el-checkbox>
            <el-button size="mini">连接</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { logout, updatePwd } from "@/api/login";

import {
  getUpgradeNotice,
  delayUpgradeNotice,
  getAppUpgradeNotice,
  upgradeNewVersion,
  delayAppNotice,
} from "@/api/system";
export default {
  name: "Tools",
  data() {
@@ -174,8 +288,19 @@
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      userInfo: {},
      linkList: [{name: "文档中心"}, {name: "系统监控器"}, { name: "日志管理" }],
      activeWifi: null,
      wifiList: [
        { name: "网络1", connected: false, showBottom: false, checked: false },
        { name: "网络2", connected: false, showBottom: false, checked: false },
        { name: "网络3", connected: true, showBottom: false, checked: false },
      ],
      linkList: [
        { name: "文档中心" },
        { name: "系统监控器" },
        { name: "日志管理" },
      ],
      showPasswdForm: false,
      showWifi: false,
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
@@ -183,7 +308,14 @@
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      showFastPath:false,
      showFastPath: false,
      showSysRemind: false,
      showAppRemind: false,
      sysTimeout: 60 * 60 * 1000,
      sysTimer: null,
      appTimeout: 60 * 60 * 1000,
      upgrading: false,
      isOpenWifi: false,
      passwdForm: {
        oldPwd: "",
        newPwd: "",
@@ -196,7 +328,6 @@
    this.userInfo =
      sessionStorage.getItem("userInfo") &&
      JSON.parse(sessionStorage.getItem("userInfo"));
    console.log(this.userInfo);
    if (window.toolIntervalArr) {
      window.toolIntervalArr.forEach((item) => clearInterval(item));
    }
@@ -206,16 +337,109 @@
      }, 600),
    ];
  },
  beforeDestroy() {
    clearTimeout(this.sysTimer);
    this.sysTimer = null;
  },
  mounted() {
    document.addEventListener("click",(e) => {
      // debugger
      // this.showFastPath=false
      if (this.showFastPath) {
        this.showFastPath=false
    document.addEventListener("click", (e) => {
      if (this.showFastPath||this.showWifi) {
        this.showFastPath = false;
        this.showWifi = false;
      }
    })
    });
    this.askSysUpdate();
    this.askAppUpdate();

    
  },
  methods: {
    askAppUpdate() {
      getAppUpgradeNotice().then((res) => {
        if (res.code == 200) {
          if (res.data.NeedUpdate && res.data.NoticeStatus) {
            if (res.data.LastNoticeTime == 0) {
              this.showAppRemind = true;
            } else {
              this.appTimeout = res.data.LastNoticeTime * 1000;
              this.delayAppAsk();
            }
          }
        }
      });
    },
    pickWifi(x, i) {
      this.wifiList.forEach((x) => {
        x.showBottom = false;
      });
      x.showBottom = !x.showBottom;
      this.activeWifi = i;
    },
    goToUpdate() {
      this.showAppRemind = false;
      window.parent.postMessage({ msg: `toAI?activeName=更新` }, "*");
    },
    goToWireSet() {
      window.parent.postMessage(
        { msg: `toSetting?menu=网络设置&subMenu=有线网络` },
        "*"
      );
    },
    updateSysNow() {
      window.parent.postMessage(
        { msg: `toVindicate?autoUpdate=1` },
        "*"
      );
    },
    delaySysRemind(sec) {
      delayUpgradeNotice({
        delaySecond: sec,
      }).then((res) => {
        if (res.code == 200) {
          this.$notify.success("设置成功");
          this.showSysRemind = false;
          this.sysTimeout = res.data.LastNoticeTime * 1000;
          this.delaySysAsk();
        }
      });
    },
    delayAppRemind(sec) {
      delayAppNotice({
        delay: sec,
      }).then((res) => {
        if (res.code == 200) {
          this.$notify.success("设置成功");
          this.showAppRemind = false;
          this.appTimeout = res.data.LastNoticeTime * 1000;
          this.delayAppAsk();
        }
      });
    },
    delaySysAsk() {
      this.sysTimer = setTimeout(() => {
        this.askSysUpdate();
      }, this.sysTimeout);
    },
    delayAppAsk() {
      this.appTimer = setTimeout(() => {
        this.askAppUpdate();
      }, this.appTimeout);
    },
    askSysUpdate() {
      getUpgradeNotice().then((res) => {
        if (res.data.HaveNewVersion > 0 && res.data.NoticeStatus) {
          if (res.data.LastNoticeTime == 0) {
            this.showSysRemind = true;
          } else {
            this.sysTimeout = res.data.LastNoticeTime * 1000;
            this.delaySysAsk();
          }
        }
      });
    },
    toggleShowWifi() {
      this.showWifi = !this.showWifi;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
@@ -224,16 +448,12 @@
            newPwd: this.passwdForm.checkPwd,
          };
          updatePwd(json).then((res) => {
            console.log(res, "修改密码");
            this.$notify({
              type: res.success ? "success" : "error",
              message: res.msg,
            });
            if (res.success) {
              this.showPasswdForm = false;
              // this.$nextTick(_=>{
              //   this.toLogout('修改密码成功，请重新登录！')
              // })
            }
          });
        } else {
@@ -260,7 +480,7 @@
    },

    togglePreference() {
      this.showFastPath = !this.showFastPath
      this.showFastPath = !this.showFastPath;
      this.$store.state.desktop.frames.forEach((frame) => {
        this.$store.commit("desktop/addMinDock", {
          id: frame.id,
@@ -287,23 +507,13 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    clickFastPath(name){
      debugger
      this.$emit("jumpToDock", name)

    },
    gotoSet(){
      this.$emit("jumpToDock", "系统设置")

    },
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    clickFastPath(name) {
      this.$emit("jumpToDock", name);
    },
    toLogout() {
      let _this = this;
      this.$confirm("确定退出登录吗？","提示", {
        // center: true,
        type:"warning",
      this.$confirm("确定退出登录吗？", "提示", {
        type: "warning",
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      })
@@ -351,7 +561,7 @@
  margin: auto;
}
.tools .tools-left {
  width: 200px;
  width: 275px;
  height: 100%;
  float: left;
  margin-left: 14px;
@@ -410,10 +620,16 @@
  text-align: center;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  vertical-align: bottom;

  line-height: 56px;
  padding: 0 15px;
  position: relative;
  .iconfont {
    display: block;
    line-height: 42px;
    font-size: 25px;
  }
}
@keyframes move {
  0% {
@@ -430,74 +646,96 @@
  top: 55px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  transition: .2s;
  transition: 0.2s;
  display: none;
  .top{
        display: -webkit-box;
    display: -ms-flexbox;
  padding-top: 5px;
  box-sizing: border-box;
  .top {
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    /* justify-content: space-evenly; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    padding: 0 30px;
    img{
              height: 50px;
        width: 50px;
background-color: bisque;
        border-radius: 50%;
    img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    .username{
    width: fit-content;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-left: 10px;
    .username {
      width: fit-content;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      margin-left: 15px;
    }
  }
  .link-list{
        height: 180px;
  .link-list {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-item{
          display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 25px;
    height: 25px;cursor: pointer;
    margin: 5px;
    .list-item {
      display: flex;
      width: 90%;
      box-sizing: border-box;
      padding: 0 20px;
      border-radius: 5px;
      font-size: 14px;
      line-height: 25px;
      height: 25px;
      cursor: pointer;
      margin: 5px;
    }
    .list-item:hover{
    background-color: rgba(231, 231, 231, 1);
    .list-item:hover {
      background-color: rgba(231, 231, 231, 1);
    }
  }
  .bot{
        position: absolute;
  .bot {
    position: absolute;
    bottom: 0;
    height: 60px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    .set,.exit{
          display: flex;
    align-items: center;
    width: 28%;
    justify-content: space-evenly;
    font-size: 14px;
    cursor: pointer;
    .set,
    .exit {
      display: flex;
      align-items: center;
      width: 28%;
      justify-content: space-evenly;
      font-size: 14px;
      cursor: pointer;
    }
  }
}

.sys-remind {
  background-color: white;
  width: 400px;
  position: absolute;
  right: 5px;
  top: 45px;
  border-radius: 5px;
  .remind-title {
    box-sizing: border-box;
    text-align: left;
    padding: 0 20px;
    border-bottom: 1px solid lightgray;
    font-size: 16px;
    line-height: 35px;
  }
  .remind-content {
    text-align: left;
    line-height: 20px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px;
  }
  .btns {
    padding: 0px 12px 8px 12px;
    /* background-color: antiquewhite; */
    text-align: right;
  }
}

@@ -511,8 +749,90 @@
  cursor: pointer;
}

.wifi-pop {
  position: absolute;
  width: 210px;
  top: 55px;
  height: 400px;
  border-radius: 6px;
  background-color: white;
  transition: 0.2s;
  display: none;
  box-sizing: border-box;
  right: 100px;
  .top-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 14px;
    border-bottom: 1px solid lightgray;
  }
  .wifi-list {
    overflow: auto;
    height: 340px;
    .item-active {
      background-color: rgba(66, 102, 153, 1);
      color: white;
    }
    .item {
      box-sizing: border-box;
      cursor: pointer;
      /* background-color: aqua; */
      padding: 10px 20px;
      .top {
        display: flex;
        .icon {
          font-size: 20px;
          margin-right: 10px;
        }
        .name {
          display: flex;
          flex-direction: column;
          line-height: 20px;
          text-align: left;
        }
      }
      .bot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-checkbox {
          color: white;
          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: white;
          }
          .el-checkbox__label {
            padding-left: 5px;
            font-size: 12px;
          }
          .el-checkbox__inner {
            width: 12px;
            height: 12px;

            .el-checkbox__inner::after {
              height: 6px;
              left: 3px;
            }
          }
        }

        .el-button--mini,
        .el-button--mini.is-round {
          padding: 5px 10px;
        }
      }
    }
  }
}
.wifi-pop-show {
  animation: move linear 0.2s 1;
  display: block;
}

.fast-path-show {
  animation: move linear .2s 1;
  animation: move linear 0.2s 1;
  display: block;
}

@@ -521,6 +841,11 @@
  height: 100%;
  margin-right: 14px;
}

.smart-ai {
  height: 65%;
}

.el-dropdown-menu {
  top: 40px !important;
}