RZGY/src/renderer/components/MainTable.vue

<template>
  <div class="login_back_group_all" style="overflow-y: hidden; overflow-x: hidden">
    <TopPage></TopPage>
    <div>
      <img width="100%" style="margin-top: 10px" src="../assets/newImage/main_top.png" />
    </div>
    <div class="login_back_group" style="overflow-y: hidden; overflow-x: hidden">
      <el-row>
        <el-col :span="2"> &nbsp; </el-col>
        <el-col :span="22" style="margin-top: 10px">
          <div>
            <span class="main_top_wellcom">你好,{{ name }}!
              <span class="main_top_week">
                今天星期<span>{{ week }}</span></span></span><br />
            <span class="welcome">欢迎来到自助式心理健康评估与认知行为干预系统！</span>
            <br />
          </div>
        </el-col>
      </el-row>
      <el-row class="main_middle">
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="20">
          <el-row :span="24" v-show="userType === 2">
            <div class="main_picture">
              <div>
                <img height="300px" @click="goPage('/menu/manageUser', 'yhgl')"
                  src="../assets/newImage/main_user.png" />
              </div>
              <div>
                <img height="300px" @click="goPage('/menu/manageUserScale', 'yhlt')"
                  src="../assets/newImage/main_chart.png" />
              </div>
              <div>
                <img height="300px" @click="goPage('/menu/manageScaleUser', 'yhcp')"
                  src="../assets/newImage/main_scale.png" />
              </div>
              <div>
                <img height="300px" @click="goPage('/menu/manageElectrical', 'yhfk')"
                  src="../assets/newImage/main_game.png" />
              </div>
              <div>
                <img height="300px" @click="goPage('/menu/managePluse', 'yhgy')"
                  src="../assets/newImage/main_ganyu.png" />
              </div>
            </div>

            <!-- <div class="main-six-user">
              <div class="main-six-user-zhixin-admin">
                <div
                  class="main_middle_yhgl"
                  @click="goPage('/menu/manageUser')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">用户管理</p></span
                  >
                </div>
                <div
                  class="main_middle_lblb"
                  @click="goPage('/menu/manageUserScale')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">
                      用户测试记录
                    </p></span
                  >
                </div>
              </div>
              <div class="main-six-user-zhixin-admin">
                <div
                  class="main_middle_ndlb"
                  @click="goPage('/menu/manageElectrical')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">
                      脑电测试记录
                    </p></span
                  >
                </div>
                <div
                  class="main_middle_mblb"
                  @click="goPage('/menu/managePluse')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">
                      脉搏测试记录
                    </p></span
                  >
                </div>
              </div>
            </div> -->
          </el-row>
          <el-row :span="24" v-show="userType === 1">
            <div class="main_picture">
              <div>
                <img @click="goPage('/menu/smart1', 'rjdh')" height="300px" src="../assets/newImage/main_smart.png" />
              </div>
              <div>
                <img @click="goPage('/menu/evaluation', 'xlcp')" height="300px"
                  src="../assets/newImage/main_test.png" />
              </div>
              <div>
                <img @click="goPage('/menu/relax', 'xlfs')" height="300px" src="../assets/newImage/main_relax.png" />
              </div>
              <div>
                <img @click="goPage('/menu/intervene', 'rzgy')" height="300px"
                  src="../assets/newImage/main_ganyu.png" />
              </div>
              <div>
                <img @click="goPage('/menu/animation', 'swfk')" height="300px"
                  src="../assets/newImage/main_fankui.png" />
              </div>
            </div>
            <!-- 
            <div class="main-six-user">
              <div class="main-six-user-zhixin">
                <div
                  class="main_middle_zzdh styleMain"
                  @click="goPage('/menu/smart')"
                >
                  <span class="main_middle_zzdh_first"
                    ><div class="main_middle_zzdh_first_font">
                      智能对话
                    </div></span
                  >
                </div>
                <div
                  class="main_middle_xlfs styleMain"
                  @click="goPage('/menu/relax')"
                >
                  <span class="main_middle_zzdh_first"
                    ><div class="main_middle_zzdh_first_font">
                      心理放松
                    </div></span
                  >
                </div>
              </div>
              <div class="main-six-user-xinlin">
                <div
                  class="main_middle_xlcp styleMain"
                  @click="goPage('/menu/evaluation')"
                >
                  <span class="main_middle_zzdh_first"
                    ><div class="main_middle_zzdh_first_font">
                      心理测评
                    </div></span
                  >
                </div>
              </div>
              <div class="main-six-user-mainaosheng" style="">
                <div
                  style="width: 410px; display: inline-block"
                  class="main_middle_mbcj styleMain"
                  @click="goPage('/menu/pulse')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">脉搏采集</p></span
                  >
                </div>
                <div
                  style="width: 190px; display: inline-block"
                  class="main_middle_ndcj styleMain"
                  @click="goPage('/menu/electrical')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">脑电采集</p></span
                  >
                </div>
                <div
                  style="width: 190px; display: inline-block"
                  class="main_middle_swfkxl styleMain"
                  @click="goPage('/menu/animation')"
                >
                  <span class="main_middle_zzdh_first"
                    ><p class="main_middle_zzdh_first_font">
                      生物反馈训练
                    </p></span
                  >
                </div>
              </div>
            </div> -->
          </el-row>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
      </el-row>

      <el-footer class="buttLlo1">
        <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>
      </el-footer>
      <el-footer class="buttLlo">Copyright© 2024</el-footer>
      <!-- <el-footer class="buttLlo">Copyright© 北京决明科技有限公司</el-footer> -->
    </div>
    <!-- 先是垂直布局 -->
    <div class="box_out" v-show="centerDialogVisible">
    </div>
    <div class="tan_out" v-show="centerDialogVisible">
      <div class="tan_top">
        <div class=tan_top_one>
          <div><img width='126px' height='28px' src="../assets/tan/sence.png" /></div>
          <div class="close_main" @click="closeFun"><img width="24px" height="24px" src="../assets/tan/close.png" />
          </div>
        </div>
      </div>

      <div class="tan_center">
        <div class="tan_center_left"><img width='256px' height='256px' :src='pubImgUrl' /></div>
        <div class="tan_center_right">
          <div><img  height="35px" style="margin-left:60px;margin-bottom:5px;margin-top:20px"
              :src="pubTitleUrl" /></div>
          <div><img width="530px" height="60px" src="../assets/tan/mid_line.png" /></div>
          <div style="margin-left:40px;color:#DFDFDF;width:462px;line-height: 25px;letter-spacing:3px;height:480px;overflow:auto">
            

{{desPub}}



          </div>
        </div>
      </div>

      <div style="text-align:center"><img width="772px" height="24px" src="../assets/tan/bottom_line.png" /></div>
      <div class="tan_foot">
        <div @click="closeFun"><img class="cancle_style" width="234px" height="60px" src="../assets/tan/cancle.png" />
        </div>
        <div @click="continueFun"><img class="continue_style" width="234px" height="60px"
            src="../assets/tan/continue.png" /></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userType: 0,
      name: sessionStorage.getItem("name"),
      week: this.getWeek(new Date().getDay()),
      mainList: [
        { name: "智能对话", url: "/smart", index: 1 },
        { name: "心理测评", url: "/evaluation", index: 2 },
        { name: "心理放松", url: "/relax", index: 3 },
        { name: "脑电采集", url: "/electrical", index: 4 },
        { name: "脉搏采集", url: "/pulse", index: 5 },
        { name: "生物反馈训练", url: "/animation", index: 6 },
      ],
      centerDialogVisible: false,
      pubUrl: '',
      pubVal: '',
      pubImgUrl:'',
      pubTitleUrl:'', 
      desPub:''
    };
  },
  mounted() {
    this.$root.topPageFlag = false;
    this.userType = sessionStorage.getItem("userType");
    this.userType = parseInt(this.userType);
  },
  methods: {
    continueFun() {
      this.centerDialogVisible=false;
      sessionStorage.setItem("defaultUrl", this.pubUrl);
      this.$router.push({ path: this.pubUrl, query: { url: this.pubVal } });
    },
    closeFun() {
      this.centerDialogVisible = false;
    },
    userExit() {
      this.$router.push("/");
      // ipcRenderer.removeAllListeners();
      // Utils.$off();
      // this.desTimer();
    },
    getWeek(val) {
      let week = "";
      if (val === 0) {
        week = "日";
      }
      if (val === 1) {
        week = "一";
      }
      if (val === 2) {
        week = "二";
      }
      if (val === 3) {
        week = "三";
      }
      if (val === 4) {
        week = "四";
      }
      if (val === 5) {
        week = "五";
      }
      if (val === 6) {
        week = "六";
      }
      return week;
    },
    goPage(url, val) {
      this.pubUrl = url;
      this.pubVal = val;
      //判断如果是智能对话
      if (val == "rjdh") {
        this.pubImgUrl=require('../assets/tan/zndh.png')
        this.pubTitleUrl=require('../assets/tan/zn.png')
        this.centerDialogVisible = true;
        this.desPub =`本系统基于自然语言大模型开发(类似ChatGPT)，模型具有一定的共情对话和倾听能力。我们的目标是为用户提供隐私、温暖、安全、及时、方便的对话环境, 从而帮助用户克服各种困难和挑战, 实现自我成长和发展。
由于技术的限制，模型的输出文本具有一定的随机性。您在使用本系统时应知悉，其不能替代医生、心理医生等专业人士，不应过度依赖、服从、相信模型的输出。本系统不保证模型输出的文本完全适合于用户，用户在使用本模型时需要承担其带来的所有风险！
`
        return
      }
      if (val == "xlcp") {
        this.pubImgUrl=require('../assets/tan/xlcp.png')
        this.pubTitleUrl=require('../assets/tan/xl1.png')
        this.centerDialogVisible = true;
        this.desPub =`心理测评模块包含一些常用的心理健康评估量表，心理测评不是考试，答案没有对错之分，也没有时间限制 。为了获得准确的评估结果，使用者应充分理解题目内容并如实回答相应的问题。
`
        return
      }
      if (val == "xlfs") {
        this.pubImgUrl=require('../assets/tan/xlfs.png')
        this.pubTitleUrl=require('../assets/tan/xl2.png')
        this.centerDialogVisible = true;
        this.desPub =`心理放松模块提供音乐放松和呼吸放松两种放松方式，用户可以根据引导进行心理放松训练。音乐的节奏和旋律能够激发大脑中与情绪有关的区域，从而促进身心的放松。通过调节呼吸，我们不仅能够减轻身体的紧张感，还可以影响我们的情绪状态，帮助我们达到更深层次的心理放松。
`
        return
      }
      if (val == "rzgy") {
        this.pubImgUrl=require('../assets/tan/rzgy.png')
        this.pubTitleUrl=require('../assets/tan/rz.png')
        this.centerDialogVisible = true;
        this.desPub =`认知行为治疗 （Cognitive Behavioral Therapy，CBT） 是目前世界上应用最广泛、疗效最明确的心理治疗方法，对抑郁、焦虑、强迫、失眠、人际关系、情感问题、职业发展等多种心理问题均有系统的治疗方法和明显的治疗效果。从2004年开始，西方的CBT专家开始发展出CBT的计算机程序，代替治疗师来完成治疗，即人机对话的方式实现治疗，并取得了成功。这就是计算机化的认知行为治疗（CCBT）。
`
        return
      }
      if (val == "swfk") {
        this.pubImgUrl=require('../assets/tan/swfk.png')
        this.pubTitleUrl=require('../assets/tan/sw.png')
        this.centerDialogVisible = true;
        this.desPub =`生物反馈训练通过将用户的脑电、心电等生理过程有关的信息进行处理和呈现，使人能够直观感受到自身生理状态的变化，进而有意识的进行自身心理状态的调控，通过不断训练使用户能够逐渐有意识的来调节和控制自己的生理、心理状态。`
        return
      }

      sessionStorage.setItem("defaultUrl", url);
      this.$router.push({ path: url, query: { url: val } });
      //this.$router.push({ path: url });
    },
  },
};
</script>
<style scoped>
.mainTable-top {
  margin-top: 5%;
}

.mainTable-top-two {
  margin-top: 10%;
}

.mainTable-tab {
  cursor: pointer;
  margin-left: 50px;
  margin-right: 50px;
  border-radius: 5px;
  border: 1px solid #000000;
  text-align: center;
  height: 150px;
  margin-bottom: 100px;
}

.mainTable-tab-p {
  padding-top: 40px;
}

.login_back_group {
  width: 100vw;
  /* height: 95vh; */
  /* padding-top: 20px; */

  /* background: url(../assets/newImage/login_bg.png) no-repeat;
  background-size: cover; */
}

.login_back_group_all {
  height: 100vh;
  /* width: 100vw;
  height: 95vh; */
  /* padding-top: 20px; */

  background: url(../assets/newImage/login_bg1.png) no-repeat;
  background-size: cover;
}

.main_top_wellcom {
  font-size: 30px;
  font-family: Source Han Sans CN-Light, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 0px;
  margin-left: 100px;
}

.main_top_week {
  font-size: 16px;
  font-family: Source Han Sans CN-ExtraLight, Source Han Sans CN;
  font-weight: 200;
  color: #ffffff;
}

.main_middle {
  margin-top: 80px;
}

.main_middle_ndlb {
  background: url(../assets/newImage/lbbgck_bt.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_mblb {
  background: url(../assets/newImage/home_mbcj.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_lblb {
  background: url(../assets/newImage/xl2.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_yhgl {
  background: url(../assets/newImage/xl1.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_zzdh {
  background: url(../assets/newImage/home_zndh.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_xlfs {
  background: url(../assets/newImage/home_xlfs.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_zzdh_first {
  font-size: 20px;
  color: #ffffff;
}

.main_middle_zzdh_first_font {
  padding-top: 20px;
  margin-left: 20px;
}

.main_middle_xlcp {
  background: url(../assets/newImage/home_xlcp.png) no-repeat;
  background-size: cover;
  height: 400px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_mbcj {
  background: url(../assets/newImage/home_mbcj.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_ndcj {
  background: url(../assets/newImage/home_ndcj.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.main_middle_swfkxl {
  background: url(../assets/newImage/home_swfkxl.png) no-repeat;
  background-size: cover;
  height: 190px;
  margin-left: 10px;
  margin-right: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.class2 {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.6) 0 0 0 100vh;
}

.styleMain {
  width: 200px;
  margin-bottom: 20px;
}

.styleMainTop {
  width: 400px;
}

.main-six-user {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.main-six-user-zhixin {
  width: 200px;
  display: inline-block;
  margin-right: 40px;
}

.main-six-user-zhixin-admin {
  width: 400px;
  display: inline-block;
  /* margin-right: 40px; */
}

.main-six-user-xinlin {
  width: 200px;
  display: inline-block;
  margin-right: 40px;
}

.main-six-user-mainaosheng {
  width: 440px;
  display: inline-block;
}

.welcome {
  font-family: Source Han Sans CN-ExtraLight, Source Han Sans CN;
  font-weight: 200;
  color: #ffffff;
  line-height: 0px;
  letter-spacing: 2px;
  margin-left: 100px;
  display: flex;
  margin-top: 30px;
}

.main_picture {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.buttLlo {
  color: #ffffff;
  text-align: center;
  left: 0px;
  right: 0px;
  font-size: 14px;

  bottom: 0px;
  position: fixed;
}

.buttLlo1 {
  color: #ffffff;
  text-align: right;
  left: 0px;
  right: 40px;
  font-size: 14px;
  z-index: 1000;
  bottom: 0px;
  position: fixed;
}

.main_exit_class {
  position: fixed;
  z-index: 100;
}

.tan_out {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  width: 888px;
  height: 466px;
  background: url(../assets/tan/des_bg.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.tan_top {

  /* flex:1 */
}

.tan_top_one {
  margin-left: 18px;
  margin-right: 5px;
  margin-top: 5px;
  height: 60px;
  background: url(../assets/tan/title_bg.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  /* flex:1 */
}

.tan_center {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}

.tan_center_left {
  margin-left: 50px;
}

.tan_center_right {
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;

  height: 300px;
}

.tan_foot {
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  justify-content: space-around;
  margin-bottom: 20px;
  /* flex:1 */
}

.cancle_style {
  cursor: pointer;
}

.continue_style {
  cursor: pointer;
}

.box_out {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #254161;
  opacity: 0.6;
}

.close_main {
  position: absolute;
  right: 40px;
  cursor: pointer;
}
</style>