修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

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

@@ -2,25 +2,59 @@
  <div class="tools">
    <div class="tools-left">
      <div
        :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
        @click="togglePreference()"
        :class="['tools-icon', 'tools-show-desktop', { clicked: this.$store.state.desktop.preferenceVisiable }]"
        @click.stop="togglePreference"
      >
        <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
      </div>

      <div class="fast-path" :class="showFastPath ? 'fast-path-show' : ''" @click.stop>
        <div class="top">
          <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)">
            {{ x.name }}
          </div>
        </div>
        <div class="bot">
          <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>退出</span>
          </div>
        </div>
      </div>
      <div class="tools-icon no-hover-style">
        <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt />
        <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI-新.png`" alt />
      </div>
    </div>
    <div class="tools-middle">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}" >
      <div
        v-for="dock in $store.state.desktop.minDocks"
        :key="dock.id"
        class="dock-item-wrap"
        :class="{ actived: dock.highlight }"
      >
        <a @click="dockClick(dock)">
          <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot"/>
          <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot" />
          <!-- <iframe class="dock-shot" :src="dock.url"  ></iframe> -->
        </a>
      </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" v-show="wifiList.length">
        <span class="icon iconfont">&#xe6e5;</span>
      </div>
      <div class="tools-icon">
        <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
      </div>
@@ -36,145 +70,403 @@
            <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown" style='top: 44px;'>
            <el-dropdown-item @click.native='toLogout'>
              退出登录
          <el-dropdown-menu slot="dropdown" style="top: 44px">
            <el-dropdown-item style="text-align: left">
              <b>Hi {{ userInfo && userInfo.username }}</b>
            </el-dropdown-item>
            <el-dropdown-item @click.native="showPasswdForm = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="toLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
      </div>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="showPasswdForm"
      :append-to-body="true"
      width="500px"
      @close="cancelPasswordChange"
    >
      <el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPwd">
          <el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="cancelPasswordChange">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
      </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="showWifiList ? '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} from "@/api/login";
import { logout, updatePwd } from "@/api/login"

import {
  getUpgradeNotice,
  delayUpgradeNotice,
  getAppUpgradeNotice,
  upgradeNewVersion,
  delayAppNotice,
  getWifi
} from "@/api/system"
export default {
  name: "Tools",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else {
        if (this.passwdForm.checkPwd !== "") {
          this.$refs.ruleForm.validateField("checkPwd")
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.passwdForm.newPwd) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: ''
    };
      userInfo: {},
      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,
      showWifiList: false,
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPwd: [{ required: true, validator: validatePass2, trigger: "blur" }]
      },
      showFastPath: false,
      showSysRemind: false,
      showAppRemind: false,
      sysTimeout: 60 * 60 * 1000,
      sysTimer: null,
      appTimeout: 60 * 60 * 1000,
      upgrading: false,
      isOpenWifi: false,
      passwdForm: {
        oldPwd: "",
        newPwd: "",
        checkPwd: ""
      }
    }
  },
  created() {
    let _that = this;
    let _that = this
    this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"))
    if (window.toolIntervalArr) {
      window.toolIntervalArr.forEach(item => clearInterval(item));
      window.toolIntervalArr.forEach((item) => clearInterval(item))
    }
    window.toolIntervalArr = [
      setInterval(function () {
        _that.notificationCenterMessageCount += 1;
      setInterval(function() {
        _that.notificationCenterMessageCount += 1
      }, 600)
    ];
    ]
  },
  // watch:{
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         ;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
  //           }
  //         });
  //       }
  //     },
  //     deep: true
  //   }
  // },

  
  beforeDestroy() {
    clearTimeout(this.sysTimer)
    this.sysTimer = null
  },
  mounted() {
    document.addEventListener("click", (e) => {
      if (this.showFastPath || this.showWifiList) {
        this.showFastPath = false
        this.showWifiList = false
      }
    })
    this.askSysUpdate()
    this.askAppUpdate()
    this.askWifiConfig()
  },
  methods: {
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
      this.$store.commit(
        "desktop/changeNotificationCenterVisible",
        this.notificationCenterVisible
      );
    askWifiConfig() {
      getWifi().then((res) => {
        this.wifiList = []
        if (res && res.data) {
          this.wifiList = res.data
        }
      })
    },
    notificationCenterNoMessage: function () {
      return this.$store.state.desktop.messageNotices.length === 0;
    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()
            }
          }
        }
      })
    },
    notificationCenterMessageFlicker: function () {
      return (
        this.notificationCenterMessageCount % 2 === 0 &&
        !this.notificationCenterNoMessage()
      );
    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.notificationCenterVisible = false
      this.showWifiList = !this.showWifiList
      this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let json = {
            oldPwd: this.passwdForm.oldPwd,
            newPwd: this.passwdForm.checkPwd
          }
          updatePwd(json)
            .then((res) => {
              this.$notify({
                type: res.success ? "success" : "error",
                message: res.msg
              })
              if (res.success) {
                this.cancelPasswordChange()
              }
            })
            .catch((err) => {
              this.$notify({
                type: "error",
                message: err.msg
              })
            })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    notificationCenterClick: function() {
      this.notificationCenterVisible = !this.notificationCenterVisible
      this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
    },
    notificationCenterNoMessage: function() {
      return this.$store.state.desktop.messageNotices.length === 0
    },
    notificationCenterMessageFlicker: function() {
      return this.notificationCenterMessageCount % 2 === 0 && !this.notificationCenterNoMessage()
    },

    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      ;
      this.$store.state.desktop.frames.forEach(frame => {
        this.$store.commit('desktop/addMinDock', {
      this.showFastPath = !this.showFastPath
      this.$store.state.desktop.frames.forEach((frame) => {
        this.$store.commit("desktop/addMinDock", {
          id: frame.id,
          src: frame.icon,
          alt: frame.title,
          type: "3",
          screenshot: ''
        });
          screenshot: ""
        })
      })
    },
    dockClick(dock) {
      
      if (dock.type === "1") {
        window.open(dock.url);
        window.open(dock.url)
      } else if (dock.type === "2") {
        this.$store.dispatch("desktop/addFrame", {
          id: dock.id,
          icon: dock.src,
          title: dock.name,
          url: dock.url
        });
        })
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        this.$store.commit("desktop/resetMinFrame", dock.id)
        //点击的iframe置顶并高亮
        this.$store.commit("desktop/refreshFrame", dock);
        this.$store.commit("desktop/refreshFrame", dock)
      }
    },
    toolHover(dock){
      //this.$parent.screenShot(dock)
    clickFastPath(name) {
      this.$emit("jumpToDock", name)
    },

    toLogout(){
      this.$confirm("提示：确定退出吗？", {
        center: true,
    toLogout() {
      let _this = this
      this.$confirm("确定退出登录吗？", "提示", {
        type: "warning",
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      }).then(_ => {
        logout().then(res => {
          if (res === "退出成功") {
            sessionStorage.removeItem("userInfo");
            location.assign('/view/index');
            this.$notify({
              title: "提示",
              type: "success",
              message: "退出成功！"
            });
          } else {
            this.$notify({
              title: "提示",
              type: "success",
              message: "退出失败!"
            });
          }
        });
      }).catch(_ => {
        console.log("退出失败");
      });
      })
        .then((_) => {
          logout().then((res) => {
            if (res.success) {
              this.$notify.success(res.msg)
              location.assign("/view/index")
              sessionStorage.removeItem("userInfo")
              // 手动退出, 取消自动登录
              sessionStorage.removeItem("autoLogin")
              _this.userInfo = {}
            } else {
              this.$notify({
                title: "提示",
                type: "success",
                message: "退出失败!"
              })
            }
          })
        })
        .catch((_) => {
          console.log("退出失败")
        })
    },
    cancelPasswordChange() {
      this.showPasswdForm = false
      this.passwdForm = {
        oldPwd: "",
        newPwd: "",
        checkPwd: ""
      }
    }
  }
};
}
</script>

<style scoped>
<style scoped lang="scss">
.tools {
  width: 100%;
  position: fixed;
@@ -192,7 +484,7 @@
  margin: auto;
}
.tools .tools-left {
  width: 200px;
  width: 275px;
  height: 100%;
  float: left;
  margin-left: 14px;
@@ -220,11 +512,11 @@
  border-bottom: 2px solid transparent;
  position: relative;
}
.tools .tools-middle .dock-item-wrap:hover{
.tools .tools-middle .dock-item-wrap:hover {
  color: white;
  background-color: #98aabe;
}
.tools-middle .dock-item-wrap.actived{
.tools-middle .dock-item-wrap.actived {
  border-color: #40c3ff;
  background-color: #98aabe;
}
@@ -237,7 +529,6 @@
}
.dock-item-wrap .dock-shot {
  visibility: hidden;
  /* transform: scale(0.5); */
  width: 100px;
  height: 46px;
  position: absolute;
@@ -252,12 +543,126 @@
  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;
  }
}
.tools-icon img{
@keyframes move {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fast-path {
  height: 310px;
  position: absolute;
  width: 200px;
  top: 55px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  transition: 0.2s;
  display: none;
  padding-top: 5px;
  box-sizing: border-box;
  .top {
    display: flex;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    padding: 0 30px;
    img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
    .username {
      width: fit-content;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      margin-left: 15px;
    }
  }
  .link-list {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .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);
    }
  }
  .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;
    }
  }
}

.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;
  }
}

.tools-icon img {
  -webkit-user-drag: none;
}
.tools .tools-icon:not(.no-hover-style):hover,
@@ -267,12 +672,104 @@
  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 0.2s 1;
  display: block;
}

.tools .tools-right {
  float: right;
  height: 100%;
  margin-right: 14px;
}
.el-dropdown-menu{

.smart-ai {
  height: 65%;
}

.el-dropdown-menu {
  top: 40px !important;
}
</style>
</style>