完成第一版本搭建

src/components/Footer.vue

@@ -41,7 +41,7 @@ export default {
 }
 
 .footer .record li {
-  line-height: 60px;
+  line-height: 36px;
   margin: 0 35px;
 }
 

src/components/echarts/IndexBar.vue

@@ -0,0 +1,230 @@
+<template>
+  <div id="myCharBartId" class="index-bar"></div>
+</template>
+<script>
+import * as echarts from "echarts"
+
+let myChart
+let time = null
+export default {
+  name: "IndexSmoothLine",
+  props: {
+    color: {
+      type: String,
+      default: '#00ff74'
+    },
+    transparentColor: {
+      type: String,
+      default: 'rgba(0, 255, 116, 0)'
+    },
+    xData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    yData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    yData(newVal) {
+      if(newVal && newVal.length > 0) {
+        this.drawLinesP()
+      }
+    }
+  },
+  mounted() {
+    this.drawLinesP()
+    window.addEventListener("resize", function () {
+       if (time !== null) {
+        clearTimeout(time)
+      }
+      time = setTimeout(() => {
+        myChart.resize();
+        //这里的this指向的是input
+      }, 500)
+    })
+  },
+  methods: {
+    drawLinesP() {
+      myChart = echarts.init(document.getElementById("myCharBartId"))
+      myChart.setOption({
+        xAxis: {
+          type: 'category',
+          data: this.xData,
+          axisLine: {
+            lineStyle: {
+              color: '#999999'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#999999'
+            }
+          }
+        },
+        grid: {
+          top: '15%', // 生成的echarts图片和顶部的距离
+          bottom: '6%', // echarts图片和底部的距离
+          left: '6%', // echarts图片和左边的距离
+          right: '5%', // echarts图片和右边的间距,
+          containLabel: true //当containLabel:为ture时，以上设置生效
+        },
+        series: [{
+          data: this.yData,
+          type: 'custom',
+          barWidth: 50, // 柱子宽度核心代码
+          renderItem: (params, api) => {
+            return this.getRenderItem(params, api)
+          },
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          }
+        }]
+      })
+    },
+
+    getRenderItem(params, api) {
+      // 主子索引值
+      const { seriesIndex } = params;
+      // 基础坐标
+      const basicsCoord = api.coord([api.value(seriesIndex), api.value(1)]);
+      // 顶部基础y轴
+      const topBasicsYAxis = basicsCoord[1];
+      // 基础x轴
+      const basicsXAxis = basicsCoord[0];
+      // 底部基础y轴
+      const bottomYAxis = api.coord([api.value(seriesIndex), 0])[1];
+      this.setThreeShaps();
+      return {
+        type: 'group',
+        children: [
+          {
+            type: 'leftShape',
+            shape: {
+              topBasicsYAxis,
+              basicsXAxis,
+              bottomYAxis,
+            },
+            style: {
+              ...api.style(),
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 0, color: 'rgba(0, 255, 166, 1)'},
+                {offset: 0.86, color: 'rgba(0, 255, 166, 0)'},
+                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+              ]), // 覆盖基础样式
+            }
+          },
+          {
+            type: 'rightShape',
+            shape: {
+              topBasicsYAxis,
+              basicsXAxis,
+              bottomYAxis,
+            },
+            style: {
+              ...api.style(),
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 0, color: 'rgba(0, 255, 166, 1)'},
+                {offset: 0.86, color: 'rgba(0, 255, 166, 0)'},
+                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+              ]), // 覆盖基础样式
+            },
+          },
+          {
+            type: 'topShape',
+            shape: {
+              topBasicsYAxis,
+              basicsXAxis,
+              bottomYAxis,
+            },
+            style: {
+              ...api.style(),
+              fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {offset: 0, color: 'rgba(72,251,193,0.8)'},
+                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+              ]), // 覆盖基础样式
+            },
+          }
+        ]
+      };
+    },
+
+    setThreeShaps() { // 绘制柱状体三个面的图形并注册
+      const leftShape = echarts.graphic.extendShape({
+        buildPath(ctx, shape) {
+          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
+          // 侧面宽度
+          const WIDTH = 45;
+          // 斜角高度
+          const OBLIQUE_ANGLE_HEIGHT = 8;
+          const p1 = [basicsXAxis - WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
+          const p2 = [basicsXAxis - WIDTH, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
+          const p3 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
+          const p4 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右上角坐标
+          ctx.moveTo(p1[0], p1[1]);
+          ctx.lineTo(p2[0], p2[1]);
+          ctx.lineTo(p3[0], p3[1]);
+          ctx.lineTo(p4[0], p4[1]);
+        },
+      });
+      const rightShape = echarts.graphic.extendShape({
+        buildPath(ctx, shape) {
+          const { topBasicsYAxis, bottomYAxis, basicsXAxis} = shape;
+          // 侧面宽度
+          const WIDTH = 16;
+          // 斜角高度
+          const OBLIQUE_ANGLE_HEIGHT = 8;
+          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左上角坐标
+          const p2 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
+          const p3 = [basicsXAxis + WIDTH, bottomYAxis]; // 右下角坐标
+          const p4 = [basicsXAxis + WIDTH, topBasicsYAxis]; // 右上角坐标
+          ctx.moveTo(p1[0], p1[1]);
+          ctx.lineTo(p2[0], p2[1]);
+          ctx.lineTo(p3[0], p3[1]);
+          ctx.lineTo(p4[0], p4[1]);
+        },
+      });
+      const topShape = echarts.graphic.extendShape({
+        buildPath(ctx, shape) {
+          const { topBasicsYAxis, basicsXAxis } = shape;
+          // 侧面宽度
+          const LEFT_WIDTH = 45;
+          const RIGHT_WIDTH = 16;
+          // 斜角高度
+          const OBLIQUE_ANGLE_HEIGHT = 8
+          const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 右下角坐标
+          const p2 = [basicsXAxis + RIGHT_WIDTH, topBasicsYAxis]; // 右上角坐标
+          const p3 = [basicsXAxis + RIGHT_WIDTH - LEFT_WIDTH, topBasicsYAxis]; // 左上角坐标
+          const p4 = [basicsXAxis - LEFT_WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT]; // 左下角坐标
+          ctx.moveTo(p1[0], p1[1]);
+          ctx.lineTo(p2[0], p2[1]);
+          ctx.lineTo(p3[0], p3[1]);
+          ctx.lineTo(p4[0], p4[1]);
+        },
+      });
+      echarts.graphic.registerShape('leftShape', leftShape);
+      echarts.graphic.registerShape('rightShape', rightShape);
+      echarts.graphic.registerShape('topShape', topShape);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.index-bar {
+  width: 100%;
+  height: 145px;
+}
+</style>

src/components/echarts/IndexSmallPie.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="myChart9" class="echartsView"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "indexRight",
+  props: ["legendData"],
+  data() {
+    return {}
+  },
+  watch: {
+    legendData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.drawLineTs()
+        })
+      }
+    }
+  },
+  mounted() {
+    this.drawLineTs()
+  },
+  methods: {
+    drawLineTs() {
+      let _this = this;
+      console.log("---_this-2--饼图", _this.showPie)
+
+      // this.$nextTick(function () {
+      let myChart = echarts.init(document.getElementById("myChart9"))
+      myChart.setOption(
+        {
+          title: {
+            text: "",
+            subtext: "",
+            left: "center"
+          },
+          tooltip: {
+            trigger: "item"
+          },
+          legend: { orient: 'vertical', // 设置图例的排列方向为垂直
+            right: 0, // 设置图例在图表的右侧
+            top: 'center', // 设置图例在图表中垂直居中
+          },
+          series: [
+            {
+              name: "",
+              type: "pie",
+              left: "-40%",
+              top: '-6%',
+              radius: "50%",
+              center: ["52%", "50%"],
+              data: this.legendData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+              }
+            }
+          ]
+        }
+      )
+      window.onresize = function () {
+        myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echartsView {
+  width: 100%;
+  height: 140px;
+}
+</style>

src/components/echarts/IndexSmoothLine.vue

@@ -0,0 +1,139 @@
+<template>
+  <div :id="`myChartId-${id}`" class="smooth-line"></div>
+</template>
+<script>
+import * as echarts from "echarts"
+
+let myChart
+let time = null
+export default {
+  name: "IndexSmoothLine",
+  props: {
+    id: {
+      type: String,
+      default: '0'
+    },
+    color: {
+      type: String,
+      default: '#00FF74'
+    },
+    transparentColor: {
+      type: String,
+      default: 'rgba(0, 255, 116, 0)'
+    },
+    xData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    yData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.drawLinesP()
+    window.addEventListener("resize", function () {
+       if (time !== null) {
+        clearTimeout(time)
+      }
+      time = setTimeout(() => {
+        myChart.resize();
+        //这里的this指向的是input
+      }, 500)
+    })
+  },
+  methods: {
+    drawLinesP() {
+      myChart = echarts.init(document.getElementById(`myChartId-${this.id}`))
+      myChart.setOption({
+        xAxis: {
+          type: 'category',
+          data: this.xData,
+          axisLine: {
+            lineStyle: {
+              color: '#999999'
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#999999'
+            }
+          }
+        },
+        grid: {
+          top: '15%', // 生成的echarts图片和顶部的距离
+          bottom: '6%', // echarts图片和底部的距离
+          left: '6%', // echarts图片和左边的距离
+          right: '5%', // echarts图片和右边的间距,
+          containLabel: true //当containLabel:为ture时，以上设置生效
+        },
+        series: [
+          {
+            data: this.yData,
+            type: 'line',
+            smooth: true,
+            symbol: 'circle', // 拐点的形状
+            symbolSize: 16, // 拐点大小
+            itemStyle: {
+              color: this.color
+            },
+            lineStyle: {
+              normal: {
+                width: 8,
+                color: this.color,
+
+                // 线条加阴影
+                // 设置阴影颜色
+                shadowColor: 'rgba(120, 120, 120, 0.93)',
+                // 设置阴影沿x轴偏移量为10
+                shadowOffsetX: 0,
+                // 设置阴影沿y轴偏移量为10
+                shadowOffsetY: 6,
+                // 设置阴影的模糊大小
+                shadowBlur: 8
+              }
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: this.color
+                  },
+                  {
+                    offset: 1,
+                    color: this.transparentColor
+                  },
+                ],
+                global: false
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.smooth-line {
+  width: 100%;
+  height: 245px;
+}
+</style>

src/components/manage/ContainerSys.vue

@@ -648,7 +648,7 @@ computed: {
 ::v-deep .el-container {
 
   &.main-container {
-    height: calc(100vh - 120px);
+    height: calc(100vh - 96px);
     overflow: hidden;
   }
 
@@ -662,10 +662,7 @@ computed: {
 
   .el-main {
     &.el-mains {
-      background-image: url('/static/assets/bg-index-pic.png');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-      background-position: center; /* 可选，让图片居中对齐 */
+      position: relative;
     }
   }
 }
@@ -726,7 +723,7 @@ computed: {
 }
 
 .aside-menu {
-  height: calc(100vh - 120px);
+  height: calc(100vh - 96px);
   text-align: left;
 }
 .aside-menu .el-menu-item.is-active {

src/components/manage/IndexProgressBar/index.vue

@@ -0,0 +1,54 @@
+<script>
+export default {
+  name: "IndexProgressBar ",
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    percentage: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="progress-outline">
+    <div class="text">{{ text }}</div>
+    <el-progress :stroke-width="18" :percentage="percentage"></el-progress>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress-outline {
+  width: 100%;
+  height: 24px;
+  font-size: 18px;
+  margin: 10px 0;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  ::v-deep .el-progress {
+    flex: 1;
+    margin-left: 12px;
+
+    .el-progress-bar__outer {
+      background-color: #6e6e6e !important;
+
+      .el-progress-bar__inner {
+        background-image: linear-gradient(to right, #00D9DA, #00FF73);
+      }
+    }
+
+    .el-progress__text {
+      color: #00FF73 !important;
+      font-size: 20px !important;
+    }
+  }
+}
+</style>

src/components/manage/IndexSmallTitle/index.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+  name: "IndexSmallTitle",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="title-line">
+    <div class="left"></div>
+    <span>{{ title }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title-line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 20px;
+  color: #333333;
+  font-weight: 600;
+
+  .left {
+    width: 8px;
+    height: 24px;
+    background: #00CDDD;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+}
+</style>

src/components/manage/main/AdminHome.vue

@@ -1,13 +1,442 @@
 <template>
+  <div class="app-container">
+    <div class="top-header">
+    </div>
+    <div class="main-content">
+      <div class="main-content-item">
+        <div class="text-item orange bor-8">
+          <div class="top-line-text">测评总次数</div>
+          <div class="middle-line-text">{{ allTestNum }}</div>
+        </div>
 
+        <div class="bor-8 text-bg">
+          <IndexSmallTitle title="筛查进度"/>
+          <template v-if="userType === '4'">
+            <IndexProgressBar
+              v-for="(item, index) in screeningProgress"
+              :key="index"
+              :text="item.name"
+              :percentage="item.value"
+            />
+          </template>
+          <IndexSmallTitle title="年龄占比"/>
+          <IndexSmallPie :legend-data="groupEvaluationRatioData" />
+        </div>
+        <div class="bor-8 text-bg end">
+          <IndexSmallTitle title="近段时间主要使用的："/>
+          <el-tabs>
+            <el-tab-pane label="量表">
+              <el-table :data="scaleList" border size="small" style="width: 100%" :height="tableHeight">
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="count" label="次数"></el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="认知任务">
+              <el-table :data="cognitiveTaskList" border size="small" style="width: 100%" :height="tableHeight">
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="count" label="次数"></el-table-column>
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="main-content-item">
+        <div class="text-item blue bor-8">
+          <div class="top-line-text">参与测评总人数</div>
+          <div class="middle-line-text">{{ allUserNum }}</div>
+        </div>
+        <div class="bor-8 text-bg">
+          <IndexSmallTitle title="动态数据"/>
+          <IndexSmoothLine id="1" />
+        </div>
+        <div class="bor-8 text-bg end">
+          <IndexSmallTitle title="实时预警"/>
+          <el-tabs>
+            <el-tab-pane label="学生个体">
+              <el-table :data="attentionUserList" border size="small" style="width: 100%" :height="tableHeight">
+<!--                <el-table-column prop="name" label="名称"></el-table-column>-->
+<!--                <el-table-column prop="count" label="次数"></el-table-column>-->
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="群体">
+              <el-table :data="attentionGroupList" border size="small" style="width: 100%" :height="tableHeight">
+<!--                <el-table-column prop="name" label="名称"></el-table-column>-->
+<!--                <el-table-column prop="count" label="次数"></el-table-column>-->
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="main-content-item">
+        <div class="map-item">
+          <div v-for="(item, index) in mapData" :key="index" class="map-item-unit">
+            <div class="point"></div>
+            <div class="text">
+              {{ item.institution_name }}：
+              {{ item.warnNum }}个
+            </div>
+          </div>
+        </div>
+        <div class="bor-8 text-bg">
+          <IndexSmallTitle title="测评结果风险等级"/>
+          <IndexBar :x-data="riskLevelData.xData" :y-data="riskLevelData.yData" />
+        </div>
+        <div class="bor-8 text-bg">
+          <IndexSmallTitle title="风险变化趋势"/>
+          <IndexSmoothLine id="2" color="#2AE3FF" transparent-color="rgba(42, 227, 255, 0)" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import IndexSmallTitle  from "../IndexSmallTitle/index.vue"
+import IndexProgressBar from "../IndexProgressBar/index.vue"
+import IndexSmallPie from "../../echarts/IndexSmallPie.vue"
+import IndexSmoothLine  from "../../echarts/IndexSmoothLine.vue"
+import IndexBar from "../../echarts/IndexBar.vue"
+import { roundToFixed } from "../../../utils/utils"
+
 export default {
-  name: "AdminHome"
+  name: "AdminHome",
+  components: {
+    IndexSmallTitle,
+    IndexProgressBar,
+    IndexSmallPie,
+    IndexSmoothLine,
+    IndexBar
+  },
+  data() {
+    return {
+      userType: '',
+
+      allTestNum: 0,
+      allUserNum: 0,
+      screeningProgress: [
+        { name: '学生', value: 0 }
+      ],
+
+      groupEvaluationRatioData: [],
+
+      dynamicData: {
+        xData: [],
+        yData: []
+      },
+
+      riskLevelData: {
+        xData: ['高风险', '无风险'],
+        yData: [0, 0]
+      },
+
+      tableHeight: 254, // table高度
+      scaleList: [],
+      cognitiveTaskList: [],
+      attentionUserList: [],
+      attentionGroupList: [],
+
+      mapData: []
+    }
+  },
+  created() {
+    this.userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528")
+  },
+  async mounted() {
+    this.allTestNum = await this.getAllTestNum()
+    this.allUserNum = await this.getAllUserNum()
+
+    this.screeningProgress[0].value = await this.finishUserNum()
+    if (this.userType === '4') {
+      let tempProgressArr = await this.finishInstitutionNum()
+      this.screeningProgress = [...this.screeningProgress, ...tempProgressArr]
+    }
+
+    this.groupEvaluationRatioData = await this.groupEvaluationRatio()
+    this.groupEvaluationRatioData = [
+      { name: '一年级', value: 10 },
+      { name: '二年级', value: 10 },
+      { name: '三年级', value: 10 },
+      { name: '四年级', value: 10 },
+      { name: '五年级', value: 10 },
+      { name: '六年级', value: 10 }
+    ]
+
+    await this.recentDetail()
+    this.scaleList = await this.recentSubjectDetail()
+
+    this.cognitiveTaskList = await this.recentTaskDetail()
+    this.riskLevelData.yData = await this.resultRiskLevel()
+
+    this.attentionUserList = await this.urgentAttentionUser()
+    this.attentionGroupList = await this.urgentAttentionGroup()
+
+    await this.riskChangeChart()
+    this.mapData = await this.psychologicalRiskMap()
+  },
+  methods: {
+    // 查询测评总次数
+    getAllTestNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/allTestNum`, {}, (res) => {
+          resolve(res.data.allTestNum)
+        })
+      })
+    },
+
+    // 查询测评总人数
+    getAllUserNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/allUserNum`, {}, (res) => {
+          resolve(res.data.allUserNum)
+        })
+      })
+    },
+
+    // 查询学生完成进度
+    finishUserNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/finishUserNum`, {}, (res) => {
+          resolve(roundToFixed(res.data.finishNum / res.data.allNum, 2))
+        })
+      })
+    },
+
+    // 查询学校完成进度
+    finishInstitutionNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/finishInstitutionNum`, {}, (res) => {
+          resolve(res.data.map((item) => {
+            return {
+              name: item.institution_name,
+              value: roundToFixed(item.finishNum / item.allNum, 2)
+            }
+          }))
+        })
+      })
+    },
+
+    // 各个年龄段（年级）学生参与测评的比例
+    groupEvaluationRatio() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/groupEvaluationRatio`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 动态数据图表(近段时间测评活动情况)
+    recentDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentDetail`, {}, (res) => {
+          resolve()
+        })
+      })
+    },
+
+    // 近段时间主要使用量表：index/recentSubjectDetail
+    recentSubjectDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentSubjectDetail`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 近段时间主要使用认知任务：index/recentTaskDetail
+    recentTaskDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentTaskDetail`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 紧急关注的学生个体：index/urgentAttentionUser
+    urgentAttentionUser() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/urgentAttentionUser`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 紧急关注的群体信息：index/urgentAttentionGroup
+    urgentAttentionGroup() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/urgentAttentionGroup`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 测评结果风险等级柱状图：index/resultRiskLevel
+    resultRiskLevel() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/resultRiskLevel`, {}, (res) => {
+          resolve([res.data.warnNum, res.data.unWarnNum])
+        })
+      })
+    },
+
+
+    // 风险变化趋势折线图：index/riskChangeChart
+    riskChangeChart() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/riskChangeChart`, {}, (res) => {
+          resolve()
+        })
+      })
+    },
+
+    // 心理风险地图：index/psychologicalRiskMap
+    psychologicalRiskMap() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/psychologicalRiskMap`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.app-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-image: url('/static/assets/index/bg-pic.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center; /* 可选，让图片居中对齐 */
+
+  .top-header {
+    width: 100%;
+    height: 65px;
+    background-image: url('/static/assets/index/bg-header.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center; /* 可选，让图片居中对齐 */
+  }
+
+  .main-content {
+    width: 100%;
+    height: calc(100% - 65px);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .main-content-item {
+      flex: 1;
+      height: calc(100% - 18px);
+      margin: 6px 12px 12px 0;
+      display: flex;
+      flex-direction: column;
+
+      &:first-child {
+        margin-left: 12px;
+      }
+
+      .bor-8 {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .text-bg {
+        width: calc(100% - 24px);
+        background-color: white;
+        padding: 12px;
+        margin-top: 16px;
+
+        &.end {
+          flex: 1;
+        }
+
+        ::v-deep .el-tabs {
+          height: calc(100% - 26px);
+
+          .el-tabs__header {
+            padding-top: 3px !important;
+            margin-bottom: 6px;
+          }
 
+          .el-tabs__content {
+            height: calc(100% - 52px);
+
+            .el-tab-pane {
+              height: 100%;
+            }
+          }
+        }
+      }
+
+      .text-item {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center; /* 可选，让图片居中对齐 */
+        color: white;
+        height: 130px;
+
+        &.blue {
+          background-image: url('/static/assets/index/bg-item-blue.png');
+        }
+
+        &.orange {
+          background-image: url('/static/assets/index/bg-item-orange.png');
+        }
+
+        .top-line-text {
+          margin: 12px 35px 8px;
+          line-height: 24px;
+          font-size: 22px;
+        }
+
+        .middle-line-text {
+          width: 100%;
+          text-align: center;
+          font-size: 56px;
+        }
+      }
+
+      .map-item {
+        width: calc(100% - 16px);
+        height: 284px;
+        margin: 0 8px 20px;
+        background-image: url('/static/assets/index/bg-map.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center; /* 可选，让图片居中对齐 */
+        position: relative;
+
+        .map-item-unit {
+          width: 180px;
+          height: 100px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: absolute;
+          top: 50%;
+          left: 60%;
+          transform: translate(-50%, -50%);
+          font-size: 15px;
+          z-index: 29;
+
+          .point {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #f68181;
+          }
+
+          .text {
+            margin: 4px 0 0;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/utils/http.js

@@ -77,11 +77,23 @@ const http = {
     });
   },
   get: (url, data, sCallBack) => {
+    if (process.env.VUE_APP_MODE === 'dev') {
+      console.info('========================================================================================')
+      console.info(url, ' 的请求参数是：', data)
+      console.info('========================================================================================')
+      console.info('')
+    }
     if (data) {
       data = Encrypt(JSON.stringify(data));
     }
     axios.get(url, { params: data }).then((res) => {
       res.data = JSON.parse(Decrypt(res.data));
+      if (process.env.VUE_APP_MODE === 'dev') {
+        console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+        console.log(url, ' 的 返回的结果 是：', res.data)
+        console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+        console.info('')
+      }
       if (sCallBack) {
         sCallBack(res.data);
       }
@@ -89,12 +101,24 @@ const http = {
   },
 
   post: (url, data, sucessCallBack, errCallBack) => {
+    if (process.env.VUE_APP_MODE === 'dev') {
+      console.info('========================================================================================')
+      console.info(url, ' 的 请求参数 是：', data)
+      console.info('========================================================================================')
+      console.info('')
+    }
     if (data) {
       data = Encrypt(JSON.stringify(data));
     }
     axios.post(url, { data: data }).then((res) => {
       if (res) {
         res = JSON.parse(Decrypt(res.data));
+        if (process.env.VUE_APP_MODE === 'dev') {
+          console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+          console.log(url, ' 的 返回的结果 是：', res.data)
+          console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+          console.info('')
+        }
       }
 
       if (res.code == 200 ) {
@@ -167,12 +191,24 @@ const http = {
 
   },
   delete(url, data, sucessCallBack, errCallBack) {
+    if (process.env.VUE_APP_MODE === 'dev') {
+      console.info('========================================================================================')
+      console.info(url, ' 的请求参数是：', data)
+      console.info('========================================================================================')
+      console.info('')
+    }
     if (data) {
       data = Encrypt(JSON.stringify(data));
     }
     axios.delete(url, { data: data }).then((res) => {
       if (res) {
         res = JSON.parse(Decrypt(res.data));
+        if (process.env.VUE_APP_MODE === 'dev') {
+          console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+          console.log(url, ' 的 返回的结果 是：', res.data)
+          console.log('^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^')
+          console.info('')
+        }
       }
 
       if (res.code == 200) {

src/utils/utils.js

@@ -106,4 +106,19 @@ let getPetName = function (str) {
     return a[0];
 }
 
-export { splitCheckItems, dateFormat, Decrypt, Encrypt, preloader, preloader2, oSessionStorage, getPetName };
+/**
+ *  四舍五入
+ * @param num
+ * @param decimalPlaces
+ * @returns {number}
+ */
+function roundToFixed(num, decimalPlaces) {
+    if (num === 0) {
+        return 0
+    } else {
+        const factor = Math.pow(10, decimalPlaces)
+        return Number((Math.round(num * factor) / factor).toFixed(decimalPlaces))
+    }
+}
+
+export { splitCheckItems, dateFormat, Decrypt, Encrypt, preloader, preloader2, oSessionStorage, getPetName, roundToFixed };