桌面wifi功能添加后端查询功能

zhangzengfei

2022-03-23 1e38d05ea637b9d64161b99764fa967fe6c7fb66

桌面wifi功能添加后端查询功能

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

@@ -2,40 +2,20 @@
  <div class="tools">
    <div class="tools-left">
      <div
        :class="[
          'tools-icon',
          'tools-show-desktop',
          { clicked: this.$store.state.desktop.preferenceVisiable },
        ]"
        :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`"
        />
        <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="fast-path" :class="showFastPath ? 'fast-path-show' : ''" @click.stop>
        <div class="top">
          <img
            v-if="userInfo"
            :src="`data:image/png;base64,${userInfo.headpic}`"
            alt=""
          />
          <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>
@@ -51,11 +31,7 @@
        </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">
@@ -67,11 +43,7 @@
      >
        <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>
@@ -80,7 +52,7 @@
      <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">
      <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">
@@ -95,22 +67,15 @@
      <div class="tools-icon">
        <el-dropdown size="small" placement="bottom">
          <span class="el-dropdown-link">
            <img
              :src="`${publicPath}images/desktop/header-icon/user.png`"
              alt
            />
            <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 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-item @click.native="showPasswdForm = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="toLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
@@ -122,44 +87,20 @@
      width="500px"
      @close="cancelPasswordChange"
    >
      <el-form
        :model="passwdForm"
        ref="ruleForm"
        :rules="rules"
        label-width="90px"
      >
      <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-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-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-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
        >
        <el-button type="info" size="small" @click="cancelPasswordChange">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
      </div>
    </el-dialog>

@@ -168,24 +109,14 @@
      <div class="remind-title">系统更新提醒</div>

      <div class="remind-content">
        已做好<b>系统更新</b>的准备，<span style="color: red"
          >更新预计需要一定的时间</span
        已做好<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"
        >
        <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>
@@ -196,34 +127,21 @@
      <div class="remind-title">算法/应用更新提醒</div>

      <div class="remind-content">
        发现 <b>算法/应用 </b>更新，<span style="color: red"
          >请前往查看更新</span
        发现 <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
        >
        <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="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>
        <el-switch v-model="isOpenWifi" active-color="rgba(61, 104, 225, 1)"> </el-switch>
      </div>

      <div class="wifi-list">
@@ -253,7 +171,7 @@
</template>

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

import {
  getUpgradeNotice,
@@ -261,29 +179,30 @@
  getAppUpgradeNotice,
  upgradeNewVersion,
  delayAppNotice,
} from "@/api/system";
  getWifi
} from "@/api/system"
export default {
  name: "Tools",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        callback(new Error("请输入密码"))
      } else {
        if (this.passwdForm.checkPwd !== "") {
          this.$refs.ruleForm.validateField("checkPwd");
          this.$refs.ruleForm.validateField("checkPwd")
        }
        callback();
        callback()
      }
    };
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
        callback(new Error("请再次输入密码"))
      } else if (value !== this.passwdForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback();
        callback()
      }
    };
    }
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
@@ -293,21 +212,15 @@
      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 },
        { name: "网络3", connected: true, showBottom: false, checked: false }
      ],
      linkList: [
        { name: "文档中心" },
        { name: "系统监控器" },
        { name: "日志管理" },
      ],
      linkList: [{ name: "文档中心" }, { name: "系统监控器" }, { name: "日志管理" }],
      showPasswdForm: false,
      showWifi: false,
      showWifiList: false,
      rules: {
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPwd: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        checkPwd: [{ required: true, validator: validatePass2, trigger: "blur" }]
      },
      showFastPath: false,
      showSysRemind: false,
@@ -320,243 +233,238 @@
      passwdForm: {
        oldPwd: "",
        newPwd: "",
        checkPwd: "",
      },
    };
        checkPwd: ""
      }
    }
  },
  created() {
    let _that = this;
    this.userInfo =
      sessionStorage.getItem("userInfo") &&
      JSON.parse(sessionStorage.getItem("userInfo"));
    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;
      }, 600),
    ];
      setInterval(function() {
        _that.notificationCenterMessageCount += 1
      }, 600)
    ]
  },
  beforeDestroy() {
    clearTimeout(this.sysTimer);
    this.sysTimer = null;
    clearTimeout(this.sysTimer)
    this.sysTimer = null
  },
  mounted() {
    document.addEventListener("click", (e) => {
      if (this.showFastPath || this.showWifi) {
        this.showFastPath = false;
        this.showWifi = false;
      if (this.showFastPath || this.showWifiList) {
        this.showFastPath = false
        this.showWifiList = false
      }
    });
    this.askSysUpdate();
    this.askAppUpdate();
    })
    this.askSysUpdate()
    this.askAppUpdate()
    this.askWifiConfig()
  },
  methods: {
    askWifiConfig() {
      getWifi().then((res) => {
        this.wifiList = []
        if (res && res.data) {
          this.wifiList = res.data
        }
      })
    },
    askAppUpdate() {
      getAppUpgradeNotice().then((res) => {
        if (res.code == 200) {
          if (res.data.NeedUpdate && res.data.NoticeStatus) {
            if (res.data.LastNoticeTime == 0) {
              this.showAppRemind = true;
              this.showAppRemind = true
            } else {
              this.appTimeout = res.data.LastNoticeTime * 1000;
              this.delayAppAsk();
              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;
        x.showBottom = false
      })
      x.showBottom = !x.showBottom
      this.activeWifi = i
    },
    goToUpdate() {
      this.showAppRemind = false;
      window.parent.postMessage({ msg: `toAI?activeName=更新` }, "*");
      this.showAppRemind = false
      window.parent.postMessage({ msg: `toAI?activeName=更新` }, "*")
    },
    goToWireSet() {
      window.parent.postMessage(
        { msg: `toSetting?menu=网络设置&subMenu=有线网络` },
        "*"
      );
      window.parent.postMessage({ msg: `toSetting?menu=网络设置&subMenu=有线网络` }, "*")
    },
    updateSysNow() {
      window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*");
      window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*")
    },
    delaySysRemind(sec) {
      delayUpgradeNotice({
        delaySecond: sec,
        delaySecond: sec
      }).then((res) => {
        if (res.code == 200) {
          this.$notify.success("设置成功");
          this.showSysRemind = false;
          this.sysTimeout = res.data.LastNoticeTime * 1000;
          this.delaySysAsk();
          this.$notify.success("设置成功")
          this.showSysRemind = false
          this.sysTimeout = res.data.LastNoticeTime * 1000
          this.delaySysAsk()
        }
      });
      })
    },
    delayAppRemind(sec) {
      delayAppNotice({
        delay: sec,
        delay: sec
      }).then((res) => {
        if (res.code == 200) {
          this.$notify.success("设置成功");
          this.showAppRemind = false;
          this.appTimeout = res.data.LastNoticeTime * 1000;
          this.delayAppAsk();
          this.$notify.success("设置成功")
          this.showAppRemind = false
          this.appTimeout = res.data.LastNoticeTime * 1000
          this.delayAppAsk()
        }
      });
      })
    },
    delaySysAsk() {
      this.sysTimer = setTimeout(() => {
        this.askSysUpdate();
      }, this.sysTimeout);
        this.askSysUpdate()
      }, this.sysTimeout)
    },
    delayAppAsk() {
      this.appTimer = setTimeout(() => {
        this.askAppUpdate();
      }, this.appTimeout);
        this.askAppUpdate()
      }, this.appTimeout)
    },
    askSysUpdate() {
      getUpgradeNotice().then((res) => {
        if (res.data.HaveNewVersion > 0 && res.data.NoticeStatus) {
          if (res.data.LastNoticeTime == 0) {
            this.showSysRemind = true;
            this.showSysRemind = true
          } else {
            this.sysTimeout = res.data.LastNoticeTime * 1000;
            this.delaySysAsk();
            this.sysTimeout = res.data.LastNoticeTime * 1000
            this.delaySysAsk()
          }
        }
      });
      })
    },
    toggleShowWifi() {
      this.notificationCenterVisible = false;
      this.showWifi = !this.showWifi;
      this.$store.commit(
        "desktop/changeNotificationCenterVisible",
        this.notificationCenterVisible
      );
      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,
          };
            newPwd: this.passwdForm.checkPwd
          }
          updatePwd(json)
            .then((res) => {
              this.$notify({
                type: res.success ? "success" : "error",
                message: res.msg,
              });
                message: res.msg
              })
              if (res.success) {
                this.cancelPasswordChange();
                this.cancelPasswordChange()
              }
            })
            .catch((err) => {
              this.$notify({
                type: "error",
                message: err.msg,
              });
            });
                message: err.msg
              })
            })
        } else {
          console.log("error submit!!");
          return false;
          console.log("error submit!!")
          return false
        }
      });
      })
    },
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
      this.$store.commit(
        "desktop/changeNotificationCenterVisible",
        this.notificationCenterVisible
      );
    notificationCenterClick: function() {
      this.notificationCenterVisible = !this.notificationCenterVisible
      this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
    },
    notificationCenterNoMessage: function () {
      return this.$store.state.desktop.messageNotices.length === 0;
    notificationCenterNoMessage: function() {
      return this.$store.state.desktop.messageNotices.length === 0
    },
    notificationCenterMessageFlicker: function () {
      return (
        this.notificationCenterMessageCount % 2 === 0 &&
        !this.notificationCenterNoMessage()
      );
    notificationCenterMessageFlicker: function() {
      return this.notificationCenterMessageCount % 2 === 0 && !this.notificationCenterNoMessage()
    },

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

<style scoped lang="scss">
@@ -865,4 +773,4 @@
.el-dropdown-menu {
  top: 40px !important;
}
</style>
</style>