cpdm_manage/src/views/manage/generalSituation.vue

<template>
  <div class="pp">
    <!-- <div class="parent">
      <div class="sub1">
         1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class="sub2">2</div>
    </div>
    <div class="parent"  style="display: flex; margin-top: 80px">
      <div class="sub3">
         <div style="flex:1;overflow:hidden">
          1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa11111111111111111111111111aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
         </div>
      </div>
      <div class="sub2">2</div>
    </div> -->

    <!-- <img style="width:90%;" src="../../assets/report/home2.png" /> -->
    <div class="general_situation">
      <div class="number_people">
        <img
          style="width: 80px; position: absolute; right: 20px; top: 20px"
          src="../../assets/img/home/bg_p.png"
          alt=""
        />
        <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 :title="userInfo.orgName" class="yuan_name"
              >都开始了获得了大厦及伦敦峰会就是咯啊支持下自行车踩踩踩踩踩踩踩踩踩踩踩踩啊</span
            > -->
            <!-- <div style="display: flex;width:100%">
              <div :title="userInfo.orgName" class="yuan_name"
              >1211232312321321321321321111111111111111111111111111111111111111111111111111111111111111111111113</div
            >
            </div> -->

            <span class="yuan_people">
              <span class="people_t">小计:</span>
              <span class="people_n">{{ peopleData["总人数"] }}</span
              ><span class="people_r">人</span></span
            >
          </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 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: #00955e">已完成</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 class="detail">
                  <!-- {{ planStatusFun(item) }} -->
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 100%;
                    "
                    v-if="item.enable == '1'"
                  >
                    <!-- <img src="../../assets/img/home/isA.png" /> -->
                    <div
                      style="
                        color: #00955e;
                        border: 1px solid #577bff;
                        line-height: 24px;
                        padding: 0px 15px;
                        border-radius: 20px;
                        background: #f0f6fe;
                        color: #3061ff;
                      "
                    >
                      已授权
                    </div>
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 100%;
                    "
                    v-if="item.enable == '0'"
                  >
                    <div
                      style="
                        color: #00955e;
                        border: 1px solid #fdb1b1;
                        line-height: 24px;
                        padding: 0px 15px;
                        border-radius: 20px;
                        background: #fef0f0;
                        color: #e14545;
                      "
                    >
                      未授权
                    </div>
                    <!-- <img src="../../assets/img/home/isA.png" style="width: 80px;"/> -->
                    <!-- <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" v-show="planData.hasOwnProperty('planName')">
            <img
              @click="queryDetail"
              style="width: 80px; 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="right_zu">
          <div class="cpqs">
            测评趋势<span style="font-size: 16px; margin-left: 10px"
              >(近期10次测试趋势图)</span
            >
          </div>

          <div
            v-if="planData.hasOwnProperty('planName')"
            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>
    <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",
          // shadowStyle:{
          // color:'rgba(0,0,0,0.5)',
          // shadowBlur: 10,
          // shadowOffsetX:0,
          // shadowOffsetY:'0'
          // }
        },
        formatter: function (params) {
          var relVal = "";
          let na = params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal += params[i].marker + na + " : " + params[i].value + "%";
          }
          return relVal;
        },
        // formatter: "{b} : {c} % ",

        // formatter: function (params,trigger) {

        //   return '{a} <br/>{b} : {c} <br/>百分比 : {d}%'
        // },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          interval: 0,
        },
        // axisLabel: {
        //   width: 40, //设置内容宽度
        // //   overflow:'break',
        //   overflow: "truncate",
        // },
        // axisLabel: {
        //   formatter: function (params) {
        //     return "中等分值";
        //   },
        // },
      },
      // dataZoom: {
      //   type: "inside", //放大缩小x轴数值
      // },
      yAxis: {
        // max: 100,
        name: "占比（%）",
        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 = {
      title: {
        text: "",
      },
      // tooltip: {
      //   trigger: "axis",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        // formatter: '{b} : {c} % '
        // formatter: function (params,trigger) {
        formatter: function (params) {
          var relVal = params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
            relVal +=
              "<br/>" +
              params[i].marker +
              params[i].seriesName +
              " : " +
              params[i].value +
              "%";
          }
          return relVal;
        },
        //   return '{a} <br/>{b} : {c} <br/>百分比 : {d}%'
        // },
      },
      legend: {
        data: ["焦虑", "抑郁", "压力", "视觉整合能力", "心理健康"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          // saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLabel: {
          interval: 0,
          // rotate:'-90',
          formatter: function (value) {
            // return ''
            // return value
            return value.substring(0, 4) + "...";
          },
        },
      },
      yAxis: {
        max: 100,
        type: "value",
        name: "占比（%）",
      },
      series: [
        {
          name: "焦虑",
          type: "line",

          data: [],
        },
        {
          name: "抑郁",
          type: "line",

          data: [],
        },
        {
          name: "压力",
          type: "line",

          data: [],
        },
        {
          name: "精神障碍",
          type: "line",

          data: [],
        },
        {
          name: "心理健康",
          type: "line",

          data: [],
        },
      ],
    };

    this.queryDetailScore();

    //当屏幕变化自适应大小
    window.addEventListener("resize", this.echartsAllSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.echartsAllSize);
  },
  methods: {
    //设置图标自适应
    echartsAllSize() {
      let flag = false;
      setTimeout(() => {
        flag = true;
        if (flag) {
          //设置变化的大小
          console.log("大小变化了---------------------");
          let myChart = this.$echarts.init(this.$refs.echarts_zhu);
          myChart.resize();

          let myChart1 = this.$echarts.init(this.$refs.echarts_lei);
          myChart1.resize();
        }
      }, 1000);
    },
    queryDetail() {
      console.log(this.planData);
      debugger;
      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;
          //   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" ||
                key == "planType"
              );
            });
            let list2 = Object.fromEntries(list1);
            debugger;
            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(
            this.completeNum == 0
              ? 0
              : (
                  ((this.completeNum - this.abnormalNum) / this.completeNum) *
                  100
                ).toFixed(2)
          );
          scoreList.push(
            this.completeNum == 0
              ? 0
              : ((dimensionList[1]["抑郁"] / this.completeNum) * 100).toFixed(2)
          );
          scoreList.push(
            this.completeNum == 0
              ? 0
              : ((dimensionList[2]["压力"] / this.completeNum) * 100).toFixed(2)
          );
          scoreList.push(
            this.completeNum == 0
              ? 0
              : ((dimensionList[0]["焦虑"] / this.completeNum) * 100).toFixed(2)
          );
          scoreList.push(
            this.completeNum == 0
              ? 0
              : ((dimensionList[3]["视觉整合能力"] / this.completeNum) * 100).toFixed(2)
          );
          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);
        }
      );
    },
    //各个专业不同总分人数
    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;
          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() {
      let url = `/plan/countRecentPlanDetails`;
      this.$http.get(url, {}, (res) => {
        if (res.code == 200) {
          this.avgData = res.data;

          let scoreList = [
            {
              name: "焦虑",
              type: "line",
              stack: "Total",
              data: [],
              symbolSize: 6,
              lineStyle: {
                // type: "dashed",
                width: 3,
              },
            },
            {
              name: "抑郁",
              type: "line",

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

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

              data: [],
              symbolSize: 6,
              lineStyle: {
                type: "dashed",
                width: 3,
              },
            },
            {
              name: "心理健康",
              type: "line",

              data: [],
              symbolSize: 6,
              lineStyle: {
                type: "dashed",
                width: 3,
              },
            },
          ];

          let nameList = [];

          if (res.data.length > 0) {
            //
            for (let i = 0; i < res.data.length; i++) {
              let k = Object.keys(res.data[i])[0];
              nameList.push(k);

              let subList = res.data[i][k];
              for (let j = 0; j < subList.length; j++) {
                //当前对象 例如 //{"焦虑":"1"}
                let currentObj = subList[j];
                //修改焦虑
                if (currentObj.hasOwnProperty("焦虑")) {
                  //
                  scoreList[0].data.push(currentObj["焦虑"]);
                }
                //修改抑郁
                if (currentObj.hasOwnProperty("抑郁")) {
                  //
                  scoreList[1].data.push(currentObj["抑郁"]);
                }
                //压力
                if (currentObj.hasOwnProperty("压力")) {
                  //
                  scoreList[2].data.push(currentObj["压力"]);
                }
                //精神障碍
                if (currentObj.hasOwnProperty("视觉整合能力")) {
                  //
                  scoreList[3].data.push(currentObj["视觉整合能力"]);
                }
                //心理健康
                if (currentObj.hasOwnProperty("心理健康")) {
                  //
                  scoreList[4].data.push(currentObj["心理健康"]);
                }
              }
            }
          }
          //设置总共维度

          //测试计划---
          //修改option
          this.echarts_lei = this.$refs.echarts_lei;
          this.option_lei.xAxis.data = nameList;
          this.option_lei.series = 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>
@font-face {
  font-family: "Electronic";
  src: url("../../assets/font/sjxk.ttf") format("truetype");
}

.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 {
      position: relative;
      background: url(../../assets/img/home/bg.png) no-repeat;
      background-size: cover;
      border-radius: 20px;
      flex: 5;
      overflow: hidden;
      // background-color: #48d68e;
      display: flex;
      flex-direction: column;
      .number_people_top {
        margin-top: 20px;
        margin-left: 20px;
        color: #ffffff;
        font-size: 20px;
        letter-spacing: 3px;
        margin-bottom: 20px;
        // font-weight: 700;
      }
      .number_people_yuan {
        flex: 1;
        // display: flex;
        color: #113a27;
        .out {
          border-radius: 20px;
          margin-left: 20px;
          // background-color: #7fe2b0;
          display: flex;
          flex-direction: column;
          height: 100%;
          .yuan_name {
            // text-decoration: underline;
            // text-decoration-color: #113a27;
            // height: 80px;
            // flex: 1;
            margin-right: 100px;
            // flex: 1;
            // background-color: #0d3bb1;
            // margin-left: 20px;
            margin-top: 10px;
            color: #113a27;
            letter-spacing: 3px;
            font-size: 34px;
            font-family: Electronic;

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

            // word-wrap: break-word;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // /* autoprefixer: off */
            // -webkit-box-orient: vertical;
            // /* autoprefixer: on */
            // -webkit-line-clamp: 2;
          }
          .yuan_people {
            text-align: right;
            margin-bottom: 16px;
            margin-right: 20px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: end;
            padding-bottom: 12px;

            // color: #ffffff;
            // font-size: 60px;
            // letter-spacing: 3px;
            // text-decoration:underline;
            .people_t {
              color: #ffffff;
              font-size: 20px;
              letter-spacing: 3px;
            }
            .people_n {
              background-image: linear-gradient(0deg, #0d3bb1 0%, #00c0ff 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #ffffff;
              font-size: 36px;
              letter-spacing: 3px;
              text-decoration: underline;
              text-decoration-color: #ffffff;
              // text-decoration-style: dotted;
              text-decoration-thickness: from-font;
              // text-decoration-thickness: 0.5px;
            }
            .people_r {
              color: #ffffff;
              font-size: 20px;
              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: 20px;
          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: 42px;
            .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: 20px;
        }
        .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;
        min-width: 0;

        .block_detail {
          background-color: #ffffff;
          text-align: center;
          line-height: 36px;
          display: flex;
          flex: 1;
          min-width: 0;
          overflow: hidden;
          .plan_dp {
            display: flex;
            width: 100%;
            // justify-content: center;
            text-align: center;
            // flex: 1;

            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
      .profession {
        font-weight: 700;
      }
      .echarts_style {
        width: 100%;
        flex: 1;
        // background-color: #000000;
      }
    }
    .block_right {
      // box-sizing: border-box;
      // background-color: #00bf78;
      flex: 10;
      // background-color: #d32d2d;
      height: 100%;
      display: flex;
      flex-direction: column;
      // background-color: #f7f7f7;
      .right_zu {
        border-radius: 20px;
        margin-left: 20px;
        background-color: #ffffff;
        flex: 10;
        // background-color: #d32d2d;
        height: 100%;
        display: flex;
        flex-direction: column;
        .cpqs {
          margin-top: 10px;
          margin-left: 20px;
          font-size: 20px;
          letter-spacing: 3px;
          font-weight: 700;
        }
        .block_lei {
          flex: 1;
          // background-color: #000000;
          margin-left: 20px;
        }
      }
      .block_avg {
        margin-left: 20px;
        font-weight: 700;
      }
    }
  }
}
</style>