RZGY/src/renderer/components/Menu.vue

<template>
  <div>
    <TopPage></TopPage>
    <el-row class="main_right_height">
      <el-col :span="4" class="menu_style" style="position: relative">
        <div class="menu_title_top">
          <span class="menu_title_top_des">自助式认知行为干预系统</span>
        </div>
        <div class="menu_feature">
          <div style="margin-left: 10%">
            <img
              v-show="userType === 1"
              width="60px"
              height="60px"
              src="../assets/newImage/peopleUser.png"
            />
            <img
              v-show="userType === 2"
              width="60px"
              height="60px"
              src="../assets/newImage/peopleAdmin.png"
            />
          </div>
          <div class="update_pass">
            <div style="color: #ffffff; margin-bottom: 10px">
              {{ acount }}
            </div>
            <div>
              <span
                @click="updatePass()"
                style="cursor: pointer; color: #ffffff; font-size: 12px"
                >修改密码</span
              >
            </div>
          </div>
        </div>
        <el-menu
          :default-active="defaultUrl"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#d9dbdc"
          active-text-color="#ffffff"
          :popper-append-to-body="false"
          :router="true"
        >
          <!-- <el-menu-item index="" @click="goMain" v-show="true">
            <img class="menu_icon_cla" src="../assets/menuIcon/main.png" />
            <span slot="title" class="menu_text_cla">主页</span>
          </el-menu-item>
          <el-menu-item
            index="/menu/smart1"
            v-show="userType === 1"
            @click="menuClick('rjdh')"
          >
       
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + rjdhUrl)"
            />
            <span
              slot="title"
              class="menu_text_span"
              :style="{ color: rjdh ? '#ffffff' : '#0FB577' }"
              >智能对话</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/evaluation"
            v-show="userType === 1"
            @click="menuClick('xlcp')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + xlcpUrl)"
            />
            <span
              slot="title"
              class=""
              :style="{ color: xlcp ? '#ffffff' : '#0FB577' }"
              >心理测评</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/relax"
            v-show="userType === 1"
            @click="menuClick('xlfs')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + xlfsUrl)"
            />
            <span
              slot="title"
              :style="{ color: xlfs ? '#ffffff' : '#0FB577' }"
              class="menu_text_cla"
              >心理放松</span
            >
          </el-menu-item> -->
          <el-menu-item
            index="/menu/intervene"
            v-show="userType === 1"
            @click="menuClick('rzgy')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + rzgyUrl)"
            />
            <span
              slot="title"
              :style="{ color: rzgy ? '#ffffff' : '#0FB577' }"
              class="menu_text_cla"
              >认知行为干预</span
            >
          </el-menu-item>
  
          <!-- <el-menu-item
            index="/menu/animation"
            v-show="userType === 1"
            @click="menuClick('swfk')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + swfkUrl)"
            />
            <span slot="title" :style="{ color: swfk ? '#ffffff' : '#0FB577' }"
              >生物反馈训练</span
            >
          </el-menu-item> -->

          <el-menu-item
            index="/menu/manageUser"
            v-show="userType === 2"
            @click="menuManageClick('yhgl')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhglUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhgl ? '#ffffff' : '#0FB577' }"
              >用户管理</span
            >
          </el-menu-item>
          <!-- <el-menu-item
            index="/menu/manageUserScale"
            v-show="userType === 2"
            @click="menuManageClick('yhlt')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhltUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhlt ? '#ffffff' : '#0FB577' }"
              >用户聊天记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageScaleUser"
            v-show="userType === 2"
            @click="menuManageClick('yhcp')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhcpUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhcp ? '#ffffff' : '#0FB577' }"
              >量表测评记录</span
            >
          </el-menu-item>
          <el-menu-item
            index="/menu/manageElectrical"
            v-show="userType === 2"
            @click="menuManageClick('yhfk')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhfkUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhfk ? '#ffffff' : '#0FB577' }"
              >生物反馈记录</span
            >
          </el-menu-item> -->
          <el-menu-item
            index="/menu/managePluse"
            v-show="userType === 2"
            @click="menuManageClick('yhgy')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhgyUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhgy ? '#ffffff' : '#0FB577' }"
              >认知行为干预记录</span
            >
          </el-menu-item>
          <!-- <el-menu-item
            index="/menu/manageEquipment"
            v-show="userType === 2"
            @click="menuManageClick('yhsb')"
          >
            <img
              class="menu_icon_cla"
              :src="require('@/assets/menuIcon/' + yhsbUrl)"
            />
            <span
              slot="title"
              class="menu_text_cla"
              :style="{ color: yhsb ? '#ffffff' : '#0FB577' }"
              >设备管理</span
            >
          </el-menu-item> -->
        </el-menu>
        <div class="foot_main_exit">
          <div class="menu_main_exit">
            <img
              @click="userExit"
              class="imgStyle"
              align="center"
              src="../assets/newImage/exit1.png"
            />&nbsp;&nbsp;
            <span class="exitLogin" @click="userExit" style="font-size: 14px"
              >退出登录</span
            >
          </div>
        </div>
        <!-- <div class="foot_main_menu">&nbsp;</div> -->
      </el-col>
      <el-col
        style="
          height: 100vh;
          overflow-y: no;
          overflow-x: no;
          position: relative;
        "
        :span="20"
      >
        <div class="menu_left_new">
          <router-view
            v-if="!$route.meta.keepAlive"
            class="menu_left_keep"
          ></router-view>
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" class="menu_left_keep" />
          </keep-alive>
        </div>

        <!-- <div class="foot_main">Copyright© 北京决明科技有限公司</div> -->
        <div class="foot_main">Copyright© 2023</div>
      </el-col>
    </el-row>

    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogPass"
      width="45%"
      center
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input
            type="password"
            v-model="ruleForm.oldPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogPass = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
const { ipcRenderer } = require("electron");
import Utils from "./util.js";
export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("旧密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("旧密码不能小于6位"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("新密码不能小于6位"));
      } else {
        callback();
      }
    };
    var validateCheckPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      } else if (value.length < 6) {
        return callback(new Error("新密码不能小于6位"));
      } else if (value !== this.ruleForm.pass) {
        return callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      //人机对话
      rjdhUrl: "rjdh1.png",
      rjdh: true,
      //心理测评
      xlcpUrl: "rjdh.png",
      xlcp: true,
      xlfsUrl: "xlfs.png",
      xlfs: true,
      //认知干预
      rzgyUrl: "rzgy.png",
      rzgy: true,
      //生物反馈
      swfkUrl: "swfk.png",
      swfk: true,

      //管理页面
      //用户管理
      yhglUrl: "yhgl.png",
      yhgl: true,
      //用户聊天记录
      yhltUrl: "yhlt.png",
      yhlt: true,
      //用户测评
      yhcpUrl: "yhcp.png",
      yhcp: true,
      //用户反馈
      yhfkUrl: "yhfk.png",
      yhfk: true,
      //用户干预
      yhgyUrl: "yhgy.png",
      yhgy: true,
      //设别管理
      yhsbUrl: "yhgy.png",
      yhsb: true,
      userType: 0,
      defaultUrl: "",
      acount: "",
      centerDialogPass: false,
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        oldPass: [{ validator: validateOldPass, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validateCheckPass, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.acount = sessionStorage.getItem("num");
    this.defaultUrl = sessionStorage.getItem("defaultUrl");
    //sessionStorage

    let queryUrl = this.$route.query.url;
    this.menuClick(queryUrl);
    this.menuManageClick(queryUrl);
    this.userType = sessionStorage.getItem("userType");
    this.userType = parseInt(this.userType);

    this.$root.topPageFlag = true;
  },
  methods: {
    menuManageClick(val) {
      if (val == "yhgl") {
        this.yhglUrl = "yhgl1.png";
        this.yhgl = false;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhlt") {
        this.yhltUrl = "yhlt1.png";
        this.yhlt = false;

        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhcp") {
        this.yhcpUrl = "yhcp1.png";
        this.yhcp = false;

        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhfk") {
        this.yhfkUrl = "yhfk1.png";
        this.yhfk = false;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;

        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true;
      }
      if (val == "yhgy") {
        this.yhgyUrl = "yhgy1.png";
        this.yhgy = false;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;
        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;
        this.yhsbUrl = "yhgy.png";
        this.yhsb = true; 
      }
      if (val == "yhsb") {
        this.yhsbUrl = "yhgy1.png";
        this.yhsb = false;
        this.yhgyUrl = "yhgy.png";
        this.yhgy = true;
        this.yhglUrl = "yhgl.png";
        this.yhgl = true;

        this.yhltUrl = "yhlt.png";
        this.yhlt = true;

        this.yhcpUrl = "yhcp.png";
        this.yhcp = true;
        this.yhfkUrl = "yhfk.png";
        this.yhfk = true;
      }
    },
    menuClick(val) {
      console.log(val);
      if (val == "rjdh") {
        this.rjdhUrl = "rjdh1.png";
        this.rjdh = false;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "xlcp") {
        this.xlcpUrl = "xlcp1.png";
        this.xlcp = false;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "xlfs") {
        this.xlfsUrl = "xlfs1.png";
        this.xlfs = false;

        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;

        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "rzgy") {
        this.rzgyUrl = "rzgy1.png";
        this.rzgy = false;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
        this.swfkUrl = "swfk.png";
        this.swfk = true;
      }
      if (val == "swfk") {
        this.swfkUrl = "swfk1.png";
        this.swfk = false;
        this.rzgyUrl = "rzgy.png";
        this.rzgy = true;
        this.xlfsUrl = "xlfs.png";
        this.xlfs = true;
        this.xlcpUrl = "xlcp.png";
        this.xlcp = true;
        this.rjdhUrl = "rjdh.png";
        this.rjdh = true;
      }
    },
    submitForm(formName) {
      let that = this;
      let num = sessionStorage.getItem("num");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.$http.post(
            `v1/user/change/password`,
            {
              identifier: num,
              password: that.$md5(that.ruleForm.oldPass),
              newPassword: that.$md5(that.ruleForm.pass),
            },
            (res) => {
              if (res.data.code == 200) {
                that.centerDialogPass = false;
                that.$message.success("修改成功");
                that.$router.push("/");
              } else {
                this.$message.error("访问服务器失败！");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    updatePass() {
      this.centerDialogPass = true;
    },
    //销毁所有定时器
    desTimer() {
      for (let i = 1; i < 100000; i++) {
        clearInterval(i);
      }
    },
    goMain() {
      this.$router.push("/mainTable");
      ipcRenderer.removeAllListeners();
      Utils.$off();
      this.desTimer();
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    userExit() {
      this.$router.push("/");
      ipcRenderer.removeAllListeners();
      Utils.$off();
      this.desTimer();
    },
  },
};
</script>
<style scoped>
.imgStyle {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.exitLogin {
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  display: block;
}
.el-menu-item {
  margin-left: 10px !important;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.el-menu-item:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

.el-menu-item:focus {
  color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
  /* margin-top:5px;
  margin-bottom:5px; */
}
.el-menu-item.is-active {
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
}
.el-menu-item:active {
  color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 10px;
  margin-left: 10px;
  width: 170px;
}
.el-menu-item {
  /* color: #ffffff !important;
  background-color: #ffffff !important;
  color: #04d1a7 !important;
  border-radius: 20px;
  margin-left: 10px; */
  border-radius: 10px;
  width: 170px;
}
/* .el-menu-item:active {
  color: #ffffff !important;
  background-color: #ffffff !important;
} */

li.hover {
}
ul {
  background-color: transparent !important ;

  /* background: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%)  !important */
  /* background-color: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important;  */
  /* background-color:linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important; */
  /* background-color: linear-gradient(0deg, #4ab3c6 0%, #001e78 100%) !important; */
}
.menu_style {
  background: linear-gradient(0deg, #09b3ff 0%, #04d1a7 100%) !important;
  height: 100vh;
}
.foot_main {
  width: 100%;
  position: absolute;
  bottom: 0px;
  line-height: 35px;
  display: block;
  font-size: 14px;
  background-color: transparent;
  text-align: center;
  color: #0f0f0f;
}
.foot_main_menu {
  width: 100%;
  position: absolute;
  bottom: 0px;
  line-height: 40px;
  display: block;
  font-size: 10px;
  background-color: rgb(94, 125, 221);
  text-align: center;
}
.el-menu {
  border-right: solid 0px #e6e6e6 !important;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #fff;
}
.foot_main_exit {
  line-height: 300px;
  width: 100%;
  position: absolute;
  bottom: 40px;
  left: -40px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  /* background-color: rgb(94, 125, 221); */
  /* text-align: center; */
}
/* .main_right_height {
  height: 95vh !important;
  display: block !important;
  overflow-y: auto !important;
} */
.menu_left_new {
  background: linear-gradient(0deg, #09b3ff 0%, #04d1a7 100%) !important;
  height: 100vh;
  /* background: linear-gradient(0deg,#09B3FF 0%, #04D1A7 100%) !important; */
}
.menu_left_keep {
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  /* background: #09b3ff; */

  height: 100vh;

  /* background: linear-gradient(0deg,#09B3FF 0%, #04D1A7 100%) !important; */
}
.menu_title_top {
  display: flex;
  justify-content: center;
  color: #ffffff;
  margin-top: 40px;
}
.menu_title_top_des {
  border-bottom: 1px solid #ffffff;
  padding-bottom: 10px;
  padding-left: 4px;
  padding-right: 4px;
}
.menu_feature {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.update_pass {
  margin-left: 5px;
  display: flex;
  flex-direction: column;
}
.menu_main_exit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.menu_icon_cla {
  height: 14px;
  margin-right: 4px;
}
.menu_text_cla {
  color: #ffffff;
}
</style>