cpdm_manage/src/views/manage/individualTendency.vue

<template>
  <div class="record-warp">
    <div class="record-main">
      <!-- <img src="../../../assets/report/lv.png" alt=""> -->
      <el-row>
        <el-col :span="24">
          <div class="search-head">
            <el-select
              :clearable="true"
              v-model="year"
              placeholder="请选择年份"
              @clear="yearChange"
              @change="yearChange"
            >
              <el-option
                v-for="item in optionsYear"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-button v-show="isJump" @click="backParent" style="border-radius: 20px;margin-left:20px"> 返回</el-button>
          </div>
        </el-col>
      </el-row>
      <div v-show="!isUser">
        <div
          style="
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
            margin-top: 10px;
          "
        >
          {{ userInfoLin.userName
          }}<span v-show="year != ''">{{ year }}年</span>近10次趋势统计
        </div>
        <div style="width: 100%; height: 70vh" class="block_lei">
          <PerQSChart
            :options="qsOptionzz1"
            name=""
            refCurrent="qsOptionzz1"
            v-show="hasData"
          />
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            v-show="!hasData"
          >
            <div style="line-height: 100%">暂无数据</div>
          </div>
        </div>
        <!-- 时间选择框 -->
        <!-- 选择时间
          <el-date-picker
          style='margin-top:80px'
            v-model="year"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          >
          </el-date-picker> -->

        <!-- <div
            style="
              text-align: center;
              font-size: 16px;
              font-weight: 700;
              margin-bottom: 20px;
            "
          >
            趋势统计
          </div>
          <div style="width: 100%; height: 70vh" class="block_lei">
            <QSChart :options="qsOptionzz2" name="" refCurrent="qsOptionzz2" />
          </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import PerQSChart from "../../components/PerQSChart.vue";
import { oSessionStorage } from "../../utils/utils";
import { basePath } from "../../utils/http";
import userImgActive from "../../assets/report/lv.png";
import userImgDefault from "../../assets/report/white.png";
import * as echarts from "echarts";
export default {
  name: "individualTendency",
  components: { PerQSChart: PerQSChart },
  data() {
    return {
      //是否是其他页面跳转过来的
      isJump: false,
      //判断是用户还是计划对比
      isUser: false,
      //用户背景图
      userImg: userImgActive,
      //计划背景图
      planImg: userImgDefault,

      basePath: basePath,
      //上传文件的弹出款的标志
      fileVisible: false,
      //判断点击的是重置密码还是点击删除
      isDelete: false,
      //重置密码需要调用个userId
      userId: "",
      //充值密码使用userName
      userName: "",
      //重置密码弹出框
      resetVisible: false,
      //根据名称搜索
      planName: "",
      name: "",
      //搜索的用户编号
      studentNumber: "",
      //搜索的组织架构
      // 搜索需要的性别
      sex: "",

      group: "",
      ppData: [],
      groupData: [],
      options: [
        {
          value: "1",
          label: "选项1",
          children: [
            {
              value: "11",
              label: "选项11",
              children: [{ value: "111", label: "选项111" }],
            },
          ],
        },
      ],
      centerDialogVisible: false,
      editUserFlag: false,
      startTime: "",
      endTime: "",
      value1: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: "",
      tableData: [],
      userInfo: {}, //用户信息

      invitationCode: "",
      roleType: "0",
      type: 0,
      view: {
        name: "",
        studentNumber: "",
        sex: "",
        orgName: "",
      },
      channel: "",
      channelList: [{ name: "渠道天成", id: "1" }],
      choosePlanVisible: false,
      currentPlanId: "",
      comparePlanList: [],
      chooseComparePlanList: [],
      formInline: {},
      option_zhu: {},
      echarts_zhu: "",
      echarts_zhu_time: "",
      //选项
      qsOptionzz1: { nameList: [], scoreList: [] },
      qsOptionzz2: { nameList: [], scoreList: [] },
      qsOptiongr1: { nameList: [], scoreList: [] },
      qsOptiongr2: { nameList: [], scoreList: [] },
      year: "",
      optionsYear: [
        {
          label: "2021年",
          value: 2021,
        },
        {
          label: "2022年",
          value: 2022,
        },
        {
          label: "2023年",
          value: 2023,
        },
      ],
      hasData: false,
      userInfoLin: {},
    };
  },
  created() {},
  async mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));

    //根据用户ID查询用户信息

    if (!this.userInfo) {
      //如果用户信息不存在跳转登陆页
      this.$router.push({ path: "/" });
    }

    //判断当页面是 isUser为false时需要调用判断方法
    if (!this.isUser) {
      let obj = await this.queryUserDetail();
      if (obj) {
        this.userInfoLin = obj;
      }
      this.initGroup();
    }
  },
  methods: {
    //返回父级
    backParent() {
      let user = JSON.parse(sessionStorage.getItem("individualTendency"));
      user.isBack = true;
      sessionStorage.setItem("individualTendency", JSON.stringify(user));
      if (user.rouName == "planReport") {
        let url = "/manage/planReport";
        this.bus.$emit("menuStatusUpdate", url);
        this.$router.push({
          path: "/manage/planReport",
        });
      }
      //generalSituation
      if(user.rouName == "generalSituation"){
        //
        let url = "/manage/generalSituation";
        this.bus.$emit("menuStatusUpdate", url);
        this.$router.push({
          path: "/manage/generalSituation",
        });
      }
    },
    queryUserDetail() {
      //调用接口访问-----
      //根据userNo 查询
      // this.userInfoLin
      let user = JSON.parse(sessionStorage.getItem("individualTendency"));
      // debugger;
      //判断有没有属性isBack  如果有的话需要
      //就是从其他页面回来的
      if (user.hasOwnProperty("isBack")) {
        //
        this.isJump = true;
      }

      //判断是哪个页面过来的，到时候还需要返回回去
      return new Promise((solve, reject) => {
        let url = `/user/findUserByUserNo?userNo=${user.userNo}`;
        this.$http.get(url, {}, (res) => {
          if (res.code == 200) {
            //设置变量
            solve(res.data);
          } else {
            reject(0);
          }
        });
      });
    },
    yearChange(val) {
      this.query4Score();
    },
    //查询4个维度的值
    async query4Score() {
      let list = ["抑郁", "焦虑", "压力", "视觉整合能力"];
      //抑郁集合
      let listDepressed = [];
      //焦虑组合
      let listAnxiety = [];
      //压力集合
      let listStress = [];
      //视觉整合能力
      let listSj = [];
      for (let i = 0; i < list.length; i++) {
        //抑郁集合
        if (list[i] == "抑郁") {
          listDepressed = await this.queryDetailScore(list[i]);
        }
        //焦虑集合
        if (list[i] == "焦虑") {
          listAnxiety = await this.queryDetailScore(list[i]);
        }
        //压力集合
        if (list[i] == "压力") {
          listStress = await this.queryDetailScore(list[i]);
        }
        //视觉能力集合
        if (list[i] == "视觉整合能力") {
          listSj = await this.queryDetailScore(list[i]);
        }
      }
      //判断抑郁长度为0是，需要提示暂无数据
      //焦虑
      // console.log(listAnxiety);
      // //抑郁
      // console.log(listDepressed);
      // //压力
      // console.log(listStress);
      // //视觉整合能力
      // console.log(listSj);
      //将4个数组转化为 需要渲染的格式
      //判断现在没数据的话
      //当返回数据为空数组时--显示暂无数据字样
      if (listAnxiety.length == 0) {
        //显示暂无数据字样
        //显示暂无数据模样
        this.hasData = false;
      } else {
        this.hasData = true;
        let nameList = [];
        let scoreList = [];

        // listAnxiety
        //焦虑数据重组
        let listAnxietyTmp = [];
        for (let i = 0; i < listAnxiety.length; i++) {
          listAnxietyTmp.push(listAnxiety[i].dimScore);
          nameList.push(listAnxiety[i].name);
        }
        //抑郁数据重组
        let listDepressedTmp = [];
        for (let i = 0; i < listDepressed.length; i++) {
          listDepressedTmp.push(listDepressed[i].dimScore);
        }
        //压力数据重组
        let listStressTmp = [];
        for (let i = 0; i < listStress.length; i++) {
          listStressTmp.push(listStress[i].dimScore);
        }
        //视觉整合能力数据重组
        let listSjTmp = [];
        for (let i = 0; i < listSj.length; i++) {
          listSjTmp.push(listSj[i].dimScore);
        }
        scoreList = [
          {
            name: "焦虑",
            type: "line",
            stack: "Total",
            data: listAnxietyTmp,
            symbolSize: 6,
            lineStyle: {
              // type: "dashed",
              width: 3,
            },
          },
          {
            name: "抑郁",
            type: "line",

            data: listDepressedTmp,
            symbolSize: 6,
            lineStyle: {
              // type: "dashed",
              width: 3,
            },
          },
          {
            name: "压力",
            type: "line",

            data: listStressTmp,
            symbolSize: 6,
            lineStyle: {
              // type: "dashed",
              width: 3,
            },
          },
          {
            name: "视觉整合能力",
            type: "line",

            data: listSjTmp,
            symbolSize: 6,
            lineStyle: {
              type: "dashed",
              width: 3,
            },
          },
        ];
        //----------------在这里设置显示echarts 图
        //在这里改变数组状态
        // this.echarts_zhu = this.$refs.echarts_zhu;
        // this.option_zhu.xAxis.data = nameList;
        // this.option_zhu.series = scoreList;
        // echarts.init(this.echarts_zhu).setOption(this.option_zhu);
        this.qsOptionzz1 = { nameList: nameList, scoreList: scoreList };
        //根据时间选择
        this.qsOptionzz2 = { nameList: nameList, scoreList: scoreList };
        // this.echarts_zhu_time = this.$refs.echarts_zhu_time;
        // this.option_zhu.xAxis.data = nameList;
        // this.option_zhu.series = scoreList;
        // echarts.init(this.echarts_zhu_time).setOption(this.option_zhu);
      }
    },
    // 查询当前组织的届数----现在只是这个班应该是只有一个级数
    //拿到这个班的级数
    //当你查人的时候---你这个级数是固定的--相当于还有还是只有一个
    //
    queryDetailScore(val) {
      // this.group[this.group.length - 1]
      return new Promise((solve, reject) => {
        let url = `/userRecordScore/countUserTrend?dimName=${val}&userNo=${
          this.userInfoLin.userNo
        }${this.year != "" ? `&year=${this.year}` : ""}`;
        this.$http.get(url, {}, (res) => {
          if (res.code == 200) {
            solve(res.data);
          } else {
            reject([]);
          }
        });
      });
    },
    groupCompare(val) {
      //打开群体报告统计页面
      this.$refs.groupUser.open(val);
    },
    titleFormatter(val) {
      if (val.planStatus == "1") {
        return "计划未开始";
      } else if (val.planStatus == "2") {
        return "计划进行中";
      }

      if (val.enable == "0") {
        return "当前计划未授权";
      }
    },
    isClikcObj(val) {
      this.isUser = val;
      //
      if (val) {
        this.userImg = userImgActive;
        this.planImg = userImgDefault;
      } else {
        this.planImg = userImgActive;
        this.userImg = userImgDefault;
      }
      if (this.isUser) {
        this.group = [];
        this.searchTarget();
      } else {
        //组织
        //默认选择第一个

        this.initGroup();
        // this.queryDetailScore();
      }
    },
    initGroup() {
      // 最新的级数
      let ji = parseInt(this.userInfoLin.grade);
      //获取当前年
      let currentYear = new Date().getFullYear();

      if (ji == -1) {
        //则显示近10年
        let list = [];
        for (let i = currentYear - 5; i <= currentYear; i++) {
          let obj = {
            label: `${i}年`,
            value: i,
          };
          list.push(obj);
        }
        this.optionsYear = list;
      } else {
        if (currentYear == ji) {
          this.optionsYear = [
            {
              label: `${currentYear}年`,
              value: ji,
            },
          ];
        } else {
          let list = [];
          for (let i = ji; i <= currentYear; i++) {
            let obj = {
              label: `${i}年`,
              value: i,
            };
            list.push(obj);
          }
          this.optionsYear = list;
          // this.year = list[0].value;
        }
      }

      //判断级数是和当前年相同吗

      this.query4Score();
    },
    planReport(val) {
      this.$refs.planProfession.open(val);
    },
    forMaPlan(val) {
      if (val.planStatus == "1") {
        return "未开始";
        //
      } else if (val.planStatus == "2") {
        //
        return "进行中";
      } else if (val.planStatus == "3") {
        //
        return "已完成";
      }
    },
    //文件上传成功
    fileSuccess(res) {
      if (res.code == 200) {
        this.searchTarget();
        this.$message({
          message: res.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      //查询列表
    },
    //文件上传失败
    fileError() {
      this.$message({
        message: "上传失败",
        type: "error",
      });
    },
    cancle() {
      this.resetVisible = false;
    },
    //提交文本
    submitCom() {
      //判断当前是否是
      if (this.isDelete) {
        this.deleteUser();
        //调用删除方法
      } else {
        this.resetFun();
        // 调用重置密码方法
      }
    },
    //性别---
    genderFun(val) {
      let sex = val.gender;
      if (sex == "1") {
        return "男";
      } else if (sex == "0") {
        return "女";
      } else {
        return sex;
      }
    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchTarget();

      //将首页重置为1时---且总条数变化
      //设置为当前总条数
    },
    //获取组织架构方法--------------------开始-----------------------
    //z增加
    addPro(val) {
      let data = JSON.parse(JSON.stringify(val));
      for (let i = 0; i < val.length; i++) {
        data[i].value = val[i].orgNo;
        data[i].label = val[i].orgName;
      }
      return data;
    },
    //非递归方式：将平铺数据转换为树形结构数据
    arrToTree(arr) {
      let data = arr.filter((item) => {
        item.children = arr.filter((e) => {
          return item.orgNo === e.parentOrgNo;
        });
        return this.userInfo.orgNo == item.orgNo;
        // return !item.parentOrgNo;
      });
      return data;
    },
    //去除转换树形结构数据后存在的空children
    deleteChildren(arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children);
          } else {
            delete childs[i].children;
          }
        }
      }
      return arr;
    },
    //获取组织架构方法--------------------结束-----------------------
    formatterDelete(row) {
      if (row.state == 0) {
        return "已删除";
      } else {
        return "正常";
      }
    },
    resetUser(flag, val) {
      this.resetVisible = true;
      this.isDelete = flag;
      this.userId = val.id;
      this.userName = val.userName;
      //当前用户id

      //重置密码
    },
    editUser(row) {
      this.editRegisterUser(row);
    },
    viewUser(row) {
      this.view.name = row.userName;
      this.view.studentNumber = row.userNo;
      this.view.sex = row.gender == "0" ? "女" : "男";
      this.view.orgName = row.orgName;
      this.centerDialogVisible = true;
    },
    planUser(val) {
      if (this.userInfo.roleType != "5") {
        if (val.enable == "0") {
          this.$message({
            type: "error",
            message: "暂未授权",
          });
          return;
        }
      }
      this.$refs.planUser.open(val);
    },
    addUser(val) {
      this.addRegisterUser(val);
    },
    clearSearch() {
      this.name = "";
      //搜索的用户编号
      this.studentNumber = "";
      //搜索的组织架构
      // 搜索需要的性别
      this.planName = "";
      this.group = "";
      this.searchTarget();
    },

    addRegisterUser(val) {
      this.$refs.register.open(val);
    },
    editRegisterUser(val) {
      this.$refs.register.edit(val);
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //根据现有情况进行搜索
    searchList() {
      let url;
      if (this.isUser) {
        url = `/user/findUserListByPage?pageSize=${this.pageSize}&pageNum=${
          this.pageNum
        }&roleType=1${
          this.group.length == 0
            ? `&orgNo=${this.userInfo.orgNo}`
            : `&orgNo=${this.group[this.group.length - 1]}`
        }${this.name == "" ? "" : `&userName=${this.name}`}${
          this.studentNumber == "" ? "" : `&userNo=${this.studentNumber}`
        }`;
      } else {
        url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}${
          this.planName == "" ? "" : `&planName=${this.planName}`
        }${
          this.group.length == 0
            ? `&orgNo=${this.userInfo.orgNo}`
            : `&orgNo=${this.group[this.group.length - 1]}`
        }`;
      }
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    searchTarget() {
      // this.group
      //判断是趋势用户
      if (this.isUser) {
        this.pageNum = 1;
        this.searchList();
      } else {
        // this.queryDetailScore("压力");
        this.query4Score();
      }
    },
    //跳转首页
    goHome() {
      this.$router.push({ path: "/home" });
    },
    //跳转记录页
    goRecord() {
      this.$router.push({ path: "/record" });
    },
    //退出登陆
    logout() {
      oSessionStorage.removeItem("userInfo");
      oSessionStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },

    //点击获取月出勤次数
    getTimes(param) {
      this.monthTimes = param;
    },

    // 专业报告对比
    compareReport(val) {
      //查看当前用户---角色
      //如果当前角色运维管理员
      if (this.userInfo.roleType != "5") {
        if (val.enable == "0") {
          this.$message({
            type: "error",
            message: "暂未授权",
          });
          return;
        }
      }
      // if(val.enable=='0'){
      //   this.$message({
      //     type:'error',
      //     message:'暂未授权'
      //   })
      //   return
      // }
      //查看传输参数

      sessionStorage.setItem("comparePlanInfo", JSON.stringify(val));
      this.$router.push("/manage/comparePlanProfession");
    },

    // 筛选已完成计划
    filterComplete() {
      this.comparePlanList = this.tableData.filter((item) => {
        return item.planStatus == 3 && item.id != this.currentPlanId;
      });
    },
    selectHandle(selection, row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
      this.chooseComparePlanList[1] = row;
    },
    chooseEnsure() {
      this.choosePlanVisible = false;
      this.$refs.planProfession.open(this.chooseComparePlanList);
    },
    chooseCancel() {
      this.choosePlanVisible = false;
      this.chooseComparePlanList = [];
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../styles/theme.less";

.pag_class {
  text-align: end;
}

.pag_class /deep/.el-input__inner {
  width: 100% !important;
}

.pag_class /deep/.el-pagination--small span:not([class*="suffix"]) {
  height: 22px;
  line-height: 28px !important;
}

.record-warp {
  position: relative;
  width: 100%;
  height: 80vh;

  .compare_out {
    line-height: 40px;
    position: absolute;

    top: -42px;
    display: flex;

    // background-color: #00bf78;
    .user {
      cursor: pointer;
      position: relative;

      span {
        top: -5px;
        left: 19px;
        font-weight: 700;
      }

      // background-image: image("../.");
      // background-color: #00bf78;
      // background-image: url("../../../assets/report/lv.png");
      // background-size: cover;
      // background-repeat: no-repeat;
    }
  }

  .record-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .search-head {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .zc-title {
        color: #606266;
        font-size: 14px;
      }
    }

    .table-content {
      margin: 10px 0;
      flex: 1;
      overflow-y: auto;
    }
  }
}

.add_user_class {
  margin-top: 10px;
}

.user_out {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #eeeeef;
  line-height: 50px;
  margin-top: 10px;
}

.user_out_sub {
  flex: 1;
  background-color: #fafafa;
  text-align: center;
  // color:#ffffff
}

.user_out_subNext {
  padding-left: 10px;
  flex: 3;
}

.detail_button_out {
  flex: 1;
  display: flex;
  // justify-content: space-around;
  justify-content: flex-start;

  .detail_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    letter-spacing: 2px;

    img {
      width: 15px;
      margin-right: 5px;
    }

    span {
      color: #00bf78;
      // font-weight: 600;
    }
  }
}

.detail_button_out_dis {
  flex: 1;
  display: flex;
  // justify-content: space-around;
  justify-content: flex-start;

  .detail_button_dis {
    display: flex;
    align-items: center;
    cursor: not-allowed;
    letter-spacing: 2px;

    img {
      width: 15px;
      margin-right: 5px;
    }

    span {
      color: #d1d1d1;
      // font-weight: 600;
    }
  }
}

//弹出框样式

.dig_update /deep/.el-cascader {
  position: relative;
  font-size: 14px;
  line-height: 40px;
  width: 100%;
}

.dig_update /deep/.el-dialog {
  box-shadow: none !important;
  background: transparent !important;
}

.demo-ruleForm /deep/ .el-form-item {
  margin-right: 10px;
  vertical-align: top;
  display: flex !important;
  flex-direction: column;
}

.demo-ruleForm /deep/.el-dialog__header {
  background-color: #ffffff;
  padding-left: 140px !important;
}

.demo-ruleForm /deep/.el-form-item__label {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.demo-ruleForm /deep/.el-input {
  width: 100% !important;
}

.demo-ruleForm /deep/.el-input__inner {
  width: 100% !important;
  background-color: #f7f7f7;
  border: 0px;
}

.dig_button {
  margin-top: 40px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.demo-ruleForm {
  background-color: #ffffff;
  // border-radius: 20px;
  margin-right: -10px;
  margin-top: -10px;
  padding-right: 100px;
  padding-left: 100px;
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 20px;

  .dig_title {
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700;
  }
}

.btn_area {
  padding: 36px 0 0;
  text-align: center;
}
</style>