cpdm_manage/src/views/manage/generalSituation.vue

<template>
  <div class="pp">
    <!-- <img style="width:90%;" src="../../assets/report/home2.png" /> -->
    <div class="general_situation">
      <div class="number_people">
        <div class="number_people_top">人数统计</div>
        <div class="number_people_yuan">
          <div class="out">
            <span :title="userInfo.orgName" class="yuan_name">{{
              userInfo.orgName
            }}</span>

            <span class="yuan_people">{{ peopleData["总人数"] }}人</span>
          </div>
          <!-- <div class="computer">
            <div v-for="(item, key) in peopleData" :key="key">
              <div class="computer_detail" v-if="key != '总人数'">
                {{ key }}：{{ item }}人
              </div>
            </div>
          </div> -->
        </div>
      </div>
      <div class="plan">
        <div class="plan_inner">
          <span class="plan_top">近期测试</span>
          <div class="table_header">
            <div class="detail">计划名称</div>
            <div class="detail">创建时间</div>
            <div class="detail">结束时间</div>
            <div class="detail">状态</div>
          </div>
          <div class="table_a">
            <div v-if="tableData.length == 0">
              <div style="text-align: center; margin-top: 10px">暂无数据</div>
            </div>
            <div v-else>
              <div
                class="table_body"
                v-for="(item, index) in tableData"
                :key="item.id"
                :style="{ backgroundColor: index % 2 == 0 ? '#ffffff' : '#F8F8F8' }"
              >
                <!-- <div :style="{backgroundColor:index ==0?'':'s'}">
                
                </div> -->
                <div class="detail" :title="item.planName">{{ item.planName }}</div>
                <div class="detail">{{ item.createTime }}</div>
                <div class="detail">{{ item.planEndTime }}</div>
                <!-- item.planStatus -->
                <div class="detail">
                  <!-- {{ planStatusFun(item) }} -->
                  <div
                    style="display: flex; justify-content: center; align-items: center"
                    v-if="item.planStatus == '3'"
                  >
                    <img
                      style="width: 16px"
                      src="../../assets/img/home/isCom.png"
                      alt=""
                    />&nbsp;&nbsp;
                    <div style="color: #333333">已完成</div>
                  </div>
                  <div
                    style="display: flex; justify-content: center; align-items: center"
                    v-if="item.planStatus == '2'"
                  >
                    <img
                      style="width: 16px"
                      src="../../assets/img/home/isRun.png"
                      alt=""
                    />&nbsp;&nbsp;
                    <div style="color: #f6cb00">进行中</div>
                  </div>
                  <div
                    style="display: flex; justify-content: center; align-items: center"
                    v-if="item.planStatus == '1'"
                  >
                    <img
                      style="width: 16px"
                      src="../../assets/img/home/isNo.png"
                      alt=""
                    />&nbsp;&nbsp;
                    <div style="color: #d52121">未开始</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recently">
      <!-- <div class="recently_bottom_font">
          最近测试结果: {{ planData.planName }} &nbsp;&nbsp;&nbsp;&nbsp;<span
            style="cursor: pointer; color: #00bf78"
            @click="queryDetail"
            >查看详情</span
          >
        </div> -->

      <div class="block_left">
        <div class="block_ren">
          <div class="re">最近测评结果</div>
          <div class="detail">
            <img
              @click="queryDetail"
              style="width: 120px; cursor: pointer"
              src="../../assets//img/home/detail.png"
              alt=""
            />
          </div>
        </div>
        <div style="width: 100%">
          <div class="block_table">
            <div class="block_detail">计划名称</div>
            <div class="block_detail">测试人数</div>
            <div class="block_detail">测试时间</div>
          </div>
          <div class="block_body">
            <div
              v-if="planData.hasOwnProperty('planName')"
              style="display: flex; padding-left: 20px; padding-right: 20px;flex:1"
            >
              <!-- <div style='width:20px'></div> -->
              <div class="block_detail" >
                <!-- {{ planData.planName }} -->
                <span class="plan_dp" :title="planData.planName"> {{ planData.planName }}</span>
              </div>
              <div class="block_detail" >
            
                <span  class="plan_dp" :title="planData.userNum"> {{ planData.userNum }}</span>
              </div>
              <div class="block_detail" >
                <span class="plan_dp" :title="planData.createTime"> {{ planData.createTime }}</span>
              </div>
            </div>
            <div v-else style="width: 100%; text-align: center; margin-top: 10px">
              <div>暂无数据</div>
            </div>
          </div>
        </div>

        <div
          v-if="planData.hasOwnProperty('planName')"
          class="echarts_style"
          ref="echarts_zhu"
        ></div>
        <div
          v-else
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          "
        >
          <span style="text-align: center">暂无数据</span>
        </div>
      </div>
      <div class="block_right">
        <div class="block_avg">
          各个专业维度平均分
          <el-select v-model="profession" placeholder="请选择" @change="professionChange">
            <el-option
              v-for="item in professionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div v-if="profession != ''" class="block_lei" ref="echarts_lei"></div>
        <div
          v-else
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
          "
        >
          暂无数据
        </div>
      </div>
    </div>
    <PlanReport ref="register" />
  </div>
</template>
<script>
import { oSessionStorage } from "../../utils/utils";
import * as echarts from "echarts";
import PieChart from "@/components/PieChart";
import PlanReport from "@/components/PlanReport";
export default {
  components: {
    PieChart,
    PlanReport,
  },
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      userInfo: {},
      echarts_zhu: "",
      option: {},

      echarts_lei: "",
      option_lei: {},
      //获取总人数字段
      //返回的总人数字段
      peopleData: {},
      //返回的最新的计划字段
      planData: {},
      planId: "",

      //组织下已选的专业
      profession: "",
      //组织下专业

      professionOptions: [],

      //各个维度平均分的数组
      avgData: [],
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      options5: [],
      options6: [],

      abnormalNum: 0,
    };
  },
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
    //查询最新人数统计
    this.queryAllPeople();
    //查询最新计划
    this.findNewPlan();
    //查询最近计划
    this.searchList();

    this.option = {
      title: {
        text: "",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        // formatter: function (arg) {
        //   console.log("arg");
        //   console.log(arg);
        //   return "我就是提示的内容";
        // },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        // axisLabel: {
        //   width: 40, //设置内容宽度
        // //   overflow:'break',
        //   overflow: "truncate",
        // },
        // axisLabel: {
        //   formatter: function (params) {
        //     return "中等分值";
        //   },
        // },
      },
      dataZoom: {
        type: "inside", //放大缩小x轴数值
      },
      yAxis: {
        max: 100,
        type: "value",
        boundaryGap: [0, 0.01],
        minInterval: 1,
      },
      series: [
        {
          type: "bar",
          data: [],
          barWidth: "15", //修改柱状图的宽度
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
              //通过修改前4个参数，可以实现不同的渐变方向
              /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
              0,
              0,
              0,
              1,
              [
                {
                  //代表渐变色从正上方开始
                  offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                  color: "#644BFD",
                }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: "#00F6E3",
                },
              ]
            ),
            borderWidth: 2,
            // borderColor: "#2EE053",
            barBorderRadius: [10, 10, 10, 10], //修改柱状图圆角
          },
          label: {
            show: true,
            position: "top",
            color: "#006FFF",
            formatter: function (params) {
              return params.value + "%";
            },
          },
        },
      ],
    };
    // echarts.init(this.echarts_zhu).setOption(this.option);

    this.option_lei = {
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "Sales", max: 100 },
          { name: "Administration", max: 100 },
          { name: "Information Technology", max: 100 },
          { name: "Customer Support", max: 100 },
          { name: "Development", max: 100 },
          { name: "Marketing", max: 100 },
        ],
      },
      //   label:{
      //     show:true,
      //     textStyle:{
      //         color:'#000000'
      //     }
      //   },
      name: {
        //修改indicator文字的颜色
        textStyle: {
          color: "#000000",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#000000",
        },
      },
      series: [
        {
          name: "",
          type: "radar",
          data: [
            {
              value: [20, 30, 40, 50, 60, 70],
              name: "",
              itemStyle: {
                //该数值区域样式设置
                //边框及原点颜色
                normal: {
                  color: "#FF1E00", //背景颜色，还需设置areaStyle
                  lineStyle: {
                    color: "rgba(255,225,0,.3)", //边框颜色
                  },
                },
              },
              //   label: {
              //     //显示value中具体的数值
              //     normal: {
              //       show: true,
              //       textStyle: {
              //         //更改数值样式
              //         color: "orange",
              //       },
              //     },
              //   },
              areaStyle: {
                //设置区域背景颜色透明度
                normal: {
                  width: 1,
                  opacity: 0.3,
                },
              },
            },
          ],
        },
      ],
    };

    // this.getOrg();
  },
  methods: {
    queryDetail() {
      console.log(this.planData);
      this.$refs.register.open(this.planData);
    },
    //根据组织编号查询总人数
    queryAllPeople() {
      let url = `/user/countUserByOrgNo?orgNo=${this.userInfo.orgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.peopleData = res.data;
          //   this.tableData = res.data.content;
          //   this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    searchList() {
      let url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&orgNo=${this.userInfo.orgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          this.tableData = res.data.content;
          debugger;
          //   this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //查询最新结束的计划
    findNewPlan() {
      let url = `/plan/findNewCompletedPlan?orgNo=${this.userInfo.orgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          if (res.data != null) {
            this.planId = res.data.id;
            let list = Object.entries(res.data);
            //开始过滤
            let list1 = list.filter(([key, val]) => {
              return (
                key == "planName" ||
                key == "planOrgName" ||
                key == "createTime" ||
                key == "userNum" ||
                key == "id"
              );
            });
            let list2 = Object.fromEntries(list1);
            this.planData = list2;
            //调用各个专业不同总分人数
            // this.isScore();
            // this.getPlanDimNun();
            this.isFin();
          }
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //查询统计端的--心理健康异常的人员
    isAbnormal() {
      //调用接口返回信息
      let url = `/planUser/countCompletedUserHighRisk?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          // this.unComplete = res.data[0];
          // this.completeNum = res.data[1];
          this.abnormalNum = res.data;
          this.getPlanDimNun();
        }
      });
    },
    //管理端统计完成情况
    isFin() {
      //调用接口返回信息
      let url = `/plan/countComplete?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          this.unComplete = res.data[0];
          this.completeNum = res.data[1];
          this.isAbnormal();
        }
      });
    },
    //查询各个维度占比
    getPlanDimNun() {
      this.$http.get(
        `userRecordScore/countNumByPlanDim?planId=${this.planId}`,
        {},
        (res) => {
          let dimensionList = res.data;

          let nameList = [];
          nameList.push("心理健康");
          nameList.push("抑郁");
          nameList.push("压力");
          nameList.push("焦虑");
          nameList.push("精神障碍");
          let scoreList = [];
          scoreList.push(
            parseInt(((this.completeNum - this.abnormalNum) / this.completeNum) * 100)
          );
          scoreList.push((parseInt(dimensionList[1]["抑郁"]) / this.completeNum) * 100);
          scoreList.push((parseInt(dimensionList[2]["压力"]) / this.completeNum) * 100);
          scoreList.push((parseInt(dimensionList[0]["焦虑"]) / this.completeNum) * 100);
          scoreList.push(
            (parseInt(dimensionList[3]["精神障碍"]) / this.completeNum) * 100
          );
          this.echarts_zhu = this.$refs.echarts_zhu;
          this.option.xAxis.data = nameList;
          this.option.series[0].data = scoreList;
          debugger;
          let myChart1 = echarts.init(this.echarts_zhu);
          myChart1.setOption(this.option);
        }
      );
    },
    //各个专业不同总分人数
    isScore() {
      let url = `/plan/countTotalNumber?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          let nameList = [];
          let scoreList = [];
          for (const item in res.data) {
            //
            nameList.push(item);
            scoreList.push(res.data[item]);
          }
          // nameList= ["中等", "高等", "低等", "多喝", "大"]
          //   console.log(nameList)
          this.echarts_zhu = this.$refs.echarts_zhu;
          this.option.xAxis.data = nameList;
          this.option.series[0].data = scoreList;
          debugger;
          let myChart1 = echarts.init(this.echarts_zhu);
          myChart1.setOption(this.option);
        }
      });
    },
    //获取子组织
    getOrg() {
      let url = `/org/findChildOrg?orgNo=${this.userInfo.orgNo}`;
      this.$http.get(url, {}, (res) => {
        if (res && res.code == 200) {
          if (res.data.length > 0) {
            let list = [];
            for (let i = 0; i < res.data.length; i++) {
              let obj = { value: "", label: "" };
              obj.value = res.data[i].orgNo;
              obj.label = res.data[i].orgName;
              list.push(obj);
            }
            this.professionOptions = list;
            this.profession = list[0].value;
            //然后根据选择的这个选项、、查询具体数据
            this.queryDetailScore(list[0].value);
          }
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //查看各个组织下各个维度的平均得分
    queryDetailScore(val) {
      let url = `/userRecordScore/findAvgScoreByOrgNo?orgNo=${val}`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          this.avgData = res.data;
          let nameList = [];
          let scoreList = [];
          //设置总共维度
          for (let i = 0; i < res.data.length; i++) {
            let obj = { name: res.data[i].name, max: 100, color: "#000000" };
            nameList.push(obj);
            scoreList.push(res.data[i].score);
          }
          //测试计划---
          //修改option
          this.echarts_lei = this.$refs.echarts_lei;
          this.option_lei.radar.indicator = nameList;
          this.option_lei.series[0].data[0].value = scoreList;

          echarts.init(this.echarts_lei).setOption(this.option_lei);
        }
      });
    },
    //选择的专业改变后接着调用
    professionChange(val) {
      this.queryDetailScore(val);
    },
    //状态---
    planStatusFun(val) {
      let planStatus = val.planStatus;
      if (planStatus == "1") {
        return "未开始";
      } else if (planStatus == "2") {
        return "进行中";
      } else if (planStatus == "3") {
        return "已完成";
      } else {
        return val.planStatus;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.computer::-webkit-scrollbar {
  width: 6px;
}
.computer::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.computer::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}
.computer::-webkit-scrollbar-thumb:hover {
  background: #40a0ff;
}

.table_a::-webkit-scrollbar {
  width: 6px;
}
.table_a::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.table_a::-webkit-scrollbar-thumb {
  background: #afafaf49;
  border-radius: 10px;
}
.table_a::-webkit-scrollbar-thumb:hover {
  background: #b6b6b6;
}
.pp {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
  //   background-color: aqua;
  .general_situation {
    height: 260px;
    width: 100%;
    display: flex;
    min-width: 980px;
    .number_people {
      background: url(../../assets/img/home/bg.png) no-repeat;
      background-size: cover;
      border-radius: 20px;
      flex: 5;
      // background-color: #48d68e;
      display: flex;
      flex-direction: column;
      .number_people_top {
        margin-top: 20px;
        margin-left: 20px;
        color: #ffffff;
        font-size: 24px;
        letter-spacing: 3px;
        margin-bottom: 20px;
        font-weight: 700;
      }
      .number_people_yuan {
        display: flex;
        color: #ffffff;
        .out {
          border-radius: 20px;
          margin-left: 20px;
          // background-color: #7fe2b0;
          display: flex;
          flex-direction: column;
          .yuan_name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 20px;
            margin-top: 20px;
            color: #ffffff;
            letter-spacing: 3px;
            font-size: 32px;
          }
          .yuan_people {
            margin-left: 20px;
            margin-top: 20px;
            color: #ffffff;
            font-size: 60px;
            letter-spacing: 3px;
          }
        }
        .computer {
          max-height: 140px;
          //   height: 140px;
          overflow-y: auto;
          flex: 1;
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          justify-content: start;
          .computer_detail {
            width: 140px;
            // height: 20px;
            padding: 10px;
          }
        }
      }
    }
    .plan {
      display: flex;
      // height:30%;
      flex: 10;

      .plan_inner {
        padding: 20px;
        border-radius: 20px;
        margin-left: 20px;
        background-color: #ffffff;
        display: flex;
        width: 100%;
        flex-direction: column;
        .plan_top {
          font-size: 24px;
          letter-spacing: 3px;
          font-weight: 700;
          color: #000000;
          margin-bottom: 20px;
        }
        //表头
        .table_header {
          display: flex;
          // justify-content: space-around;
          background-color: #00bf78;
          border-radius: 20px;
          line-height: 40px;
          font-weight: 700;
          font-size: 18px;
          letter-spacing: 3px;
          color: #ffffff;
          .detail {
            flex: 1;
            text-align: center;
          }
        }
        .table_a {
          overflow-y: auto;
          .table_body {
            display: flex;
            // justify-content: space-around;
            line-height: 40px;
            .detail {
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              flex: 1;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .recently {
    width: 100%;
    background-color: #f7f7f7;
    height: calc(100% - 260px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;

    .block_left {
      // box-sizing: border-box;
      // padding:10px;
      border-radius: 20px;

      display: flex;
      // padding-left: 10px;
      flex-direction: column;
      // padding: 10px;
      flex: 5;
      background-color: #ffffff;
      height: 100%;
      width: 100%;
      align-items: center;
      // background-color: #ffffff;
      .block_ren {
        padding-top: 10px;

        // padding-right: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .re {
          letter-spacing: 3px;
          padding: 0 20px;
          color: #222222;
          font-weight: 700;
          font-size: 24px;
        }
        .detail {
          padding: 0 20px;
        }
      }
      .chart_wrap {
        flex: 1;
        // height: 450px;
      }
      .block_table {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: #f8f8f8;
        border-radius: 20px;

        display: flex;

        .block_detail {
          font-weight: 700;
          padding: 10px;
          flex: 1;
          display: flex;
          justify-content: center;
        }
      }
      .block_body {
        width: 100%;
        display: flex;

        .block_detail {
          background-color: #ffffff;
          text-align: center;
          line-height: 36px;
          display: flex;
          flex: 1;
          width: 100%;
          overflow: hidden;
      
          .plan_dp{
            text-align: center;
            // flex: 1;
            display: inline-block;
            white-space: nowrap;
            // width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .profession {
        font-weight: 700;
      }
      .echarts_style {
        width: 100%;
        flex: 1;
        // background-color: #000000;
      }
    }
    .block_right {
      box-sizing: border-box;

      flex: 10;
      // background-color: #d32d2d;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #f7f7f7;
      .block_avg {
        margin-left: 20px;
        font-weight: 700;
      }
      .block_lei {
        flex: 1;
        // background-color: #000000;
        margin-left: 20px;
      }
    }
  }
}
</style>