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 class="yuan_name">科技学院</span>
            <span class="yuan_num">总人数</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>
          <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 in tableData" :key="item.id">
                <div class="detail">{{ item.planName }}</div>
                <div class="detail">{{ item.createDate }}</div>
                <div
                  class="detail"
                  :style="{
                    color:
                      item.planStatus == '1'
                        ? '#EE6060'
                        : item.planStatus == '2'
                        ? '#073CFF'
                        : '#5ADE6C',
                    fontWeight: '700',
                  }"
                >
                  {{ planStatusFun(item) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="recently">
      <div class="recently_bottom">
        <div class="recently_bottom_font">最近测试结果</div>
        <div class="block">
          <div class="block_left">
            <div>
              <div class="block_table">
                <div class="block_detail">计划名称</div>
                <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; flex: 1"
                >
                  <div class="block_detail" v-for="(item, key) in planData" :key="key">
                    {{ item }}
                  </div>
                </div>
                <div v-else style="width: 100%; text-align: center; margin-top: 10px">
                  <div>暂无数据</div>
                </div>
                <!-- <div class="block_detail">测试专业</div>
                <div class="block_detail">测试人数</div>
                <div class="block_detail">测试时间</div> -->
              </div>
              <div v-if="planData.hasOwnProperty('planName')" class="profession">
                {{ planData["planName"] }}计划总分等级人数
              </div>
              <div v-else class="profession">计划总分等级人数</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>
      </div>
    </div>
  </div>
</template>
<script>
import { oSessionStorage } from "../../utils/utils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      userInfo: {},
      echarts_zhu: "",
      option: {},

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

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

      professionOptions: [],

      //各个维度平均分的数组
      avgData: [],
    };
  },
  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: {
        type: "value",
        boundaryGap: [0, 0.01],
        minInterval: 1,
      },
      series: [
        {
          type: "bar",
          data: [],
          barWidth: '15',//修改柱状图的宽度
          itemStyle: {
            color: "#CCFFD7",
            borderWidth: 2,
            borderColor: "#2EE053",
            barBorderRadius:[10,10,0,0] //修改柱状图圆角
          },
        },
      ],
    };
    // 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: {
    //根据组织编号查询总人数
    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;
          //   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) {
          console.log("最新结束数计划");
          console.log(res.data);

          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 == "createDate" ||
                key == "userNum"
              );
            });
            let list2 = Object.fromEntries(list1);
            console.log(JSON.stringify(list2));
            this.planData = list2;

            //调用各个专业不同总分人数
            this.isScore();
          }
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    //各个专业不同总分人数
    isScore() {
      let url = `/plan/countTotalNumber?planId=${this.planId}`;
      this.$http.get(url, {}, (res) => {
        console.log("isScore");
        console.log(res);
        if (res.code == 200) {
          console.log(res.data);
          let nameList = [];
          let scoreList = [];
          for (const item in res.data) {
            //
            nameList.push(item);
            scoreList.push(res.data[item]);
          }
          // nameList= ["中等", "高等", "低等", "多喝", "大"]
          console.log("namelist");
          //   console.log(nameList)
          this.echarts_zhu = this.$refs.echarts_zhu;
          this.option.xAxis.data = nameList;
          this.option.series[0].data = scoreList;
          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) {
          console.log("获取子组织");
          console.log(res.data);
          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) => {
        console.log("isScore");
        console.log(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) {
      console.log(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: #40a0ff49;
  border-radius: 10px;
}
.table_a::-webkit-scrollbar-thumb:hover {
  background: #40a0ff;
}
.pp {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  //   background-color: aqua;
  .general_situation {
    height: 260px;
    width: 100%;
    display: flex;
    min-width: 980px;
    .number_people {
      border-radius: 20px;
      flex: 6;
      background-color: #48d68e;
      display: flex;
      flex-direction: column;
      .number_people_top {
        margin-top: 20px;
        margin-left: 20px;
        color: #ffffff;
        margin-bottom: 20px;
        font-weight: 700;
      }
      .number_people_yuan {
        display: flex;
        color: #ffffff;
        .out {
          width: 150px;
          height: 150px;
          border-radius: 20px;
          margin-left: 20px;
          background-color: #7fe2b0;
          display: flex;
          flex-direction: column;
          .yuan_name {
            margin-left: 20px;
            margin-top: 20px;
            color: #000000;
            font-size: 20px;
          }
          .yuan_num {
            margin-left: 20px;
            margin-top: 20px;
            color: #000000;
            font-size: 14px;
          }
          .yuan_people {
            margin-left: 20px;
            margin-top: 20px;
            color: #ffffff;
            font-size: 30px;
          }
        }
        .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: 4;

      .plan_inner {
        padding: 20px;
        border-radius: 20px;
        margin-left: 20px;
        background-color: #f7f7f7;
        display: flex;
        width: 100%;
        flex-direction: column;
        .plan_top {
          font-weight: 700;
          color: #000000;
          margin-bottom: 20px;
        }
        //表头
        .table_header {
          display: flex;
          // justify-content: space-around;
          background-color: #ffffff;
          line-height: 40px;
          font-weight: 700;
          .detail {
            flex: 1;
            text-align: center;
          }
        }
        .table_a {
          overflow-y: auto;
          .table_body {
            display: flex;
            // justify-content: space-around;
            line-height: 30px;
            .detail {
              flex: 1;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .recently {
    width: 100%;
    // height: 100%;
    // overflow: auto;
    height: calc(100% - 260px);
    // background-color: #000000;
    .recently_bottom {
      height: calc(100% - 20px);
      margin-top: 20px;
      // margin-bottom:20px;
      background-color: #f7f7f7;
      width: 100%;
      border-radius: 20px;
      display: flex;
      flex-direction: column;

      .recently_bottom_font {
        padding: 10px;
        font-weight: 700;
      }
      .block {
        width: 100%;
        height: 100%;
        display: flex;
        .block_left {
          display: flex;
          padding-left: 10px;
          flex-direction: column;
          // padding: 10px;
          flex: 6;
          //   background-color: #000000;
          height: 100%;
          .block_table {
            display: flex;
            background-color: #ffffff;
            .block_detail {
              font-weight: 700;
              padding: 10px;
              flex: 1;
              display: flex;
              justify-content: center;
            }
          }
          .block_body {
            display: flex;
            .block_detail {
              justify-content: center;
              padding: 10px;
              flex: 1;
              display: flex;
            }
          }
          .profession {
            font-weight: 700;
          }
          .echarts_style {
            width: 100%;
            flex: 1;
            // background-color: #000000;
          }
        }
        .block_right {
          flex: 4;
          // background-color: #d32d2d;
          height: 100%;
          display: flex;
          flex-direction: column;
          .block_avg {
            margin-left: 20px;
            font-weight: 700;
          }
          .block_lei {
            flex: 1;
            // background-color: #000000;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>