首页大屏开发

src/components/echarts/IndexBarA.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: '#FFC12E'
+    },
+    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: 80, // 柱子宽度核心代码
+          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: 175px;
+}
+</style>

src/components/echarts/IndexBarS.vue

@@ -0,0 +1,403 @@
+<template>
+  <div id="myCharBartIds" 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 []
+    //   }
+    // },
+    riskLevelDataS: {
+      type: Number,
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    riskLevelDataS(newVal) {
+      // if (newVal && newVal.length > 0) {
+        this.drawLinesP()
+      // }
+    }
+  },
+  mounted() {
+    console.log(this.riskLevelDataS);
+
+    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("myCharBartIds"))
+      let option = {
+        title: {
+          text: this.riskLevelDataS + '%',
+          textStyle: {
+            color: '#01c4a3',
+            fontSize: 40
+          },
+          // subtext: '总分：100分',
+          subtextStyle: {
+            color: '#909090',
+          },
+          itemGap: -10, // 主副标题距离
+          left: 'center',
+          top: 'center'
+        },
+        angleAxis: {
+          max: 100, // 满分
+          clockwise: false, // 逆时针
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        radiusAxis: {
+          type: 'category',
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        polar: {
+          center: ['50%', '50%'],
+          radius: '140%' //图形大小
+        },
+        series: [
+          {
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: '#e2e2e2'
+            },
+            data: [
+              {
+                name: '',
+                value: this.riskLevelDataS,
+                itemStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                      {
+                        offset: 0,
+                        color: '#aaf14f'
+                      },
+                      {
+                        offset: 1,
+                        color: '#0acfa1'
+                      }
+                    ])
+                  }
+                }
+              }
+            ],
+            coordinateSystem: 'polar',
+            roundCap: true,
+            barWidth: 25
+          }
+        ]
+
+        // series: [{
+        //   type: 'bar',
+        //   data: [{
+        //     name: '作文得分',
+        //     value: this.riskLevelDataS,
+        //     itemStyle: {
+        //       normal: {
+        //         color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+        //           offset: 0,
+        //           color: '#aaf14f'
+        //         }, {
+        //           offset: 1,
+        //           color: '#0acfa1'
+        //         }])
+        //       }
+        //     },
+        //   }],
+        //   coordinateSystem: 'polar',
+        //   roundCap: true,
+        //   barWidth: 25,
+        //   barGap: '-100%', // 两环重叠
+        //   z: 2,
+        // }, { // 灰色环
+        //   type: 'bar',
+        //   data: [{
+        //     value: 100,
+        //     itemStyle: {
+        //       color: '#e2e2e2',
+        //       shadowColor: 'rgba(0, 0, 0, 0.2)',
+        //       shadowBlur: 5,
+        //       shadowOffsetY: 2
+        //     }
+        //   }],
+        //   coordinateSystem: 'polar',
+        //   roundCap: true,
+        //   barWidth: 25,
+        //   barGap: '-100%', // 两环重叠
+        //   z: 1
+        // }]
+      }
+      // let option = {
+      //   title: [//标题组件，数组里的一个对象表示一个标题组件
+      //     { text: '', left: 'center', bottom: '5%', textStyle: { color: "#fff" } }
+      //   ],
+      //   series: [//系列
+      //     {
+      //       name: '',
+      //       type: 'pie',//pie类型的图实现环形图
+      //       radius: ['70%', '90%'],//数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
+      //       center: ['50%', '50%'],//圆心坐标
+      //       avoidLabelOverlap: false,//是否启用防止标签重叠策略
+      //       startAngle: 270,//第一个数据开始绘制的角度，以正交直角坐标系为标准
+      //       label: {//每个数据的标签
+      //         show: true,//设置为true则显示第一个数据
+      //         position: 'center',//位置居中
+      //         formatter: '{d}%',//{d}表示数据在总数据中的百分比
+      //         fontSize: 20,
+      //         fontWeight: 'bold'
+      //       },
+      //       color: ['#00FF74', '#EAE9EB'],//系列的颜色
+      //       startAngle: 0,
+      //       roundCap: true,
+      //       borderWidth: 1,
+      //       emphasis: {//高亮，即鼠标经过时的样式
+      //         scale: false//表示不放大item
+      //       },
+      //       labelLine: {
+      //         show: true
+      //       },
+      //       data: [
+      //         { value: this.riskLevelDataS, name: '' },
+      //         {
+      //           value: 100-this.riskLevelDataS, name: '', emphasis: {
+      //             label: {
+      //               show: false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+      //             }
+      //           }
+      //         }
+      //       ]
+      //     }
+      //   ]
+      // };
+      myChart.setOption(option)
+      // 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: 245px;
+}
+</style>

src/components/echarts/IndexSmallPieS.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="myChart9" class="echartsView"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "IndexSmallPie",
+  props: {
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    legendData(newVal) {
+      if (newVal && newVal.length > 0) {
+        this.drawLineTs()
+      }
+    }
+  },
+  mounted() {
+    this.drawLineTs()
+  },
+  methods: {
+    drawLineTs() {
+      console.log(this.legendData, 'this.legendData');
+      if (this.legendData.length === 0) {
+        return
+      }
+      let myChart = echarts.init(document.getElementById("myChart9"))
+      var optionCake;
+      console.log(this.legendData, 'this.legendData');
+
+      var dataCake = this.legendData
+      optionCake = {
+        title: {
+          text: '',
+          subtext: '',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b} : {c} 人"   //鼠标放上去 展示内容
+        },
+        legend: {
+          orient: 'vertical',
+          left: '52%',  //图例距离左的距离
+          top: '15%',
+          // y: 'center',  //图例上下居中
+          itemGap: 10,
+          formatter: function (name) {
+            let target, percentage;
+            for (let i = 0; i < dataCake.length; i++) {
+              if (dataCake[i].name === name) {
+                target = Math.round(dataCake[i].value)
+                // percentage = dataCake[i].percentage
+              }
+            }
+            let arr = [name + ' ', " " + target + "%",]
+            return arr.join(" ")
+
+          },
+        },
+        color: ['#8680D8', '#E86C60', '#EFD358', '#DAD5B5', '#A0DC2C', '#FFA8A8', '#E19348', '#65cf9b', '#4DA6FF', '#626681', '#E96D71', '#5961F9', '#626681'],//多个颜色
+        series: [
+          {
+            name: '年级分布',
+            type: 'pie',
+            radius: '55%',
+            center: ['35%', '55%'], //性设置图的上下左右的位置
+            data: dataCake,
+            // 设置值域的标签
+            label: {
+              normal: {
+                position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
+                // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
+                // {a}指series.name  {b}指series.data的name
+                // {c}指series.data的value  {d}%指这一部分占总数的百分比
+                // formatter: '{b}'
+                formatter: ''
+              }
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      myChart.setOption(optionCake)
+      // 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 {
+  /* position: absolute; */
+  /* left: -105px; */
+  width: 100%;
+  height: 210px;
+}
+</style>

src/components/echarts/IndexSmoothLineS.vue

@@ -0,0 +1,300 @@
+<template>
+  <div :id="`myChartIds-${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 []
+      }
+    },
+    names: {
+      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() {
+      console.log(this.xData, this.yData, this.names,'=======>yData')
+      myChart = echarts.init(document.getElementById(`myChartIds-${this.id}`))
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          icon: "rect",
+          data: this.names
+        },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '参与人数',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle', // 拐点的形状
+            symbolSize: 16, // 拐点大小
+            itemStyle: {
+              color: '#2AE3FF'
+            },
+            lineStyle: {
+              normal: {
+                width: 8,
+                color: '#2AE3FF',
+                // 线条加阴影
+                // 设置阴影颜色
+                shadowColor: 'rgba(120, 120, 120, 0.93)',
+                // 设置阴影沿x轴偏移量为10
+                shadowOffsetX: 0,
+                // 设置阴影沿y轴偏移量为10
+                shadowOffsetY: 6,
+                // 设置阴影的模糊大小
+                shadowBlur: 8
+              }
+            },
+            // stack: 'Total',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [  // 渐变颜色
+                  {
+                    offset: 0,
+                    color: '#2AE3FF'
+                  },
+                  {
+                    offset: 1,
+                    color: this.transparentColor
+                  },
+                ],
+                global: false
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: this.yData[0]
+          },
+          {
+            name: '测评次数',
+            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
+              }
+            },
+            // stack: 'Total',
+            phasis: {
+              //   focus: 'series'
+              // },
+            },
+            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
+              }
+            },
+            data: this.yData[1]
+          }
+        ]
+      };
+      myChart.setOption(option)
+      // myChart.setOption({
+      //   xAxis: {
+      //     type: 'category',
+      //     data: this.xData,
+      //     axisLine: {
+      //       lineStyle: {
+      //         color: '#999999'
+      //       }
+      //     }
+      //   },
+      //   yAxis: {
+      //     type: 'value',
+      //     axisLine: {
+      //       lineStyle: {
+      //         color: '#999999'
+      //       }
+      //     }
+      //   },
+      //   legend: {
+      //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+      //   },
+      //   grid: {
+      //     top: '15%', // 生成的echarts图片和顶部的距离
+      //     bottom: '8', // echarts图片和底部的距离
+      //     left: '6%', // echarts图片和左边的距离
+      //     right: '5%', // echarts图片和右边的间距,
+      //     containLabel: true //当containLabel:为ture时，以上设置生效
+      //   },
+      //   series: this.yData.map((item, index) => {
+      //     return {
+      //       data: item,
+      //       name: this.names[index],
+      //       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: 280px;
+  // margin-top: 4px;
+}
+</style>

src/components/manage/ContainerSys.vue

@@ -331,7 +331,8 @@ computed: {
            id: 0,
            name: "首页",
            icon: "el-icon-s-home",
-           path: "/ContainerSys/AdminHome",
+          //  path: "/ContainerSys/AdminHome",
+           path: ['2', '3'].includes(this.userType) ? "/ContainerSys/AdminHomeS" :"/ContainerSys/AdminHome",
            showItem: true,
            child: [],
          },

src/components/manage/main/AdminHomeS.vue

@@ -0,0 +1,659 @@
+<template>
+  <div class="app-container">
+    <div class="top-header">
+    </div>
+    <div class="main-content">
+      <div class="Evaluation">
+        <div class="Evaluation1">
+          <div>
+            <div style="padding: 10px;">
+              <IndexSmallTitle title="测评完成进度" />
+            </div>
+            <div class="IndexBarSty">
+              <IndexBarS :riskLevelDataS="riskLevelDataS" />
+            </div>
+          </div>
+        </div>
+        <div class="Evaluation2">
+          <div>
+            <div style="padding: 10px;">
+              <IndexSmallTitle title="近期测评活动情况" />
+            </div>
+            <IndexSmoothLineS id="1" :x-data="dynamicData.xData" :y-data="dynamicData.yData"
+              :names="dynamicData.names" />
+          </div>
+        </div>
+      </div>
+      <div class="EvaluationR">
+        <div class="EvaluationR1">
+          <div class="EvaluationR11">
+            <div style="margin-top: -20px;margin-left: -10px;">
+              <IndexSmallTitle title="综合数据" />
+            </div>
+            <p class="a">总测评次数</p>
+            <p class="b">{{ allTestNum }}</p>
+          </div>
+          <div class="EvaluationR12">
+            <p class="a">今日测评次数</p>
+            <p class="b">{{ TodayUserNum }}</p>
+          </div>
+          <div class="EvaluationR13">
+            <p class="a">总参与人数</p>
+            <p class="b">{{ allUserNum }}</p>
+          </div>
+        </div>
+        <div class="EvaluationR2">
+          <div class="EvaluationR21">
+            <div style="padding: 10px;">
+              <IndexSmallTitle title="各年级参与测评比例" />
+            </div>
+            <div class="IndexSmallPieSty">
+              <IndexSmallPieS ref="indexSmallPieRef" :legend-data="groupEvaluationRatioData" />
+            </div>
+          </div>
+          <div class="EvaluationR22">
+            <div>
+              <div style="padding: 10px;">
+                <IndexSmallTitle title="测评结果风险等级" />
+              </div>
+              <div class="IndexBarAst">
+                <IndexBarA :x-data="riskLevelData.xData" :y-data="riskLevelData.yData" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="EvaluationR3">
+          <div class="EvaluationR31" id="bottomTableOutline">
+            <div>
+              <div style="padding: 10px;">
+                <IndexSmallTitle title="测评量表和任务" />
+              </div>
+              <el-table :data="scaleListasks" size="small" style="width: 100%" :height="tableHeight">
+                <el-table-column align="center" prop="name" label="测试名称">
+                </el-table-column>
+                <!-- <el-table-column align="center" prop="name" label="测试时间">
+                </el-table-column> -->
+                <el-table-column align="center" prop="count" label="测试人数">
+                </el-table-column>
+              </el-table>
+              <el-pagination :current-page.sync="currentPage1" :page-size="10"
+                @current-change="handleCurrentChange(currentPage1, '1')"
+                style="position: absolute;left: 48%;transform: translate(-50%, -50%);margin-top: 2vh;" background small
+                layout="prev, pager, next" :total="total1">
+              </el-pagination>
+            </div>
+          </div>
+          <div class="EvaluationR32" id="bottomTableOutline">
+            <div class="bor-8 text-bg half-middle">
+              <div style="padding: 10px;">
+                <IndexSmallTitle title="实时预警" />
+              </div>
+              <el-table :data="attentionUserList" size="small" style="width: 100%" :height="tableHeight">
+                <el-table-column prop="pet_name" label="学生名称" min-width="2"></el-table-column>
+                <el-table-column prop="institution_name" label="学校班级" min-width="3">
+                  <template slot-scope="scope">
+                    {{ scope.row.institution_name }}
+                    {{ scope.row.group_name }}
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-pagination :current-page.sync="currentPage2" :page-size="10"
+                @current-change="handleCurrentChange(currentPage2, '2')"
+                style="position: absolute;left: 82%;transform: translate(-50%, -50%);margin-top: 2vh;" background small
+                layout="prev, pager, next" :total="total2">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import IndexSmallTitle from "../IndexSmallTitle/index.vue"
+import IndexProgressBar from "../IndexProgressBar/index.vue"
+import IndexSmallPie from "../../echarts/IndexSmallPieS.vue"
+import IndexSmoothLine from "../../echarts/IndexSmoothLineS.vue"
+import IndexSmallPieS from "../../echarts/IndexSmallPieS.vue"
+import IndexSmoothLineS from "../../echarts/IndexSmoothLineS.vue"
+import IndexBar from "../../echarts/IndexBar.vue"
+import IndexBarA from "../../echarts/IndexBarA.vue"
+import IndexBarS from "../../echarts/IndexBarS.vue"
+import { roundToFixed } from "../../../utils/utils"
+
+export default {
+  name: "AdminHome",
+  components: {
+    IndexSmallTitle,
+    IndexProgressBar,
+    IndexSmallPie,
+    IndexSmoothLine,
+    IndexSmallPieS,
+    IndexSmoothLineS,
+    IndexBar,
+    IndexBarA,
+    IndexBarS
+  },
+  data() {
+    return {
+      userType: '',
+      institutionNo: '', // 学校编号
+      tableHeight: 0, // table高度
+      currentPage1: 1, // 量表任务分页
+      total1: 1, // 量表任务分页
+      currentPage2: 1, // 实时预警分页
+      total2: 1, // 实时预警分页
+      allTestNum: 0, // 测评总次数
+      allUserNum: 0, // 参与测评总人数
+      TodayUserNum: 0, // 今日测评人数
+      screeningProgress: [ // 筛查进度
+        { name: '家长', value: 0 },
+        { name: '学生', value: 0 }
+      ],
+
+      groupEvaluationRatioData: [], // 年级占比
+
+      dynamicData: { // 动态数据
+        xData: ['1'],
+        yData: ['1'],
+        names: ['1']
+      },
+
+      riskChangeData: { // 风险变化趋势数据
+        xData: ['六月', '七月'],
+        yData: ['79', '90', '99'],
+        names: ['参与人数', '测评次数']
+      },
+
+      riskLevelData: { // 测评结果风险等级
+        xData: ['高风险', '无风险'],
+        yData: [100, 10]
+      },
+      riskLevelDataS: 65,
+      scaleList: [], // 量表
+      scaleListasks: [], // 量表和认知任务
+      cognitiveTaskList: [], // 认知任务
+      attentionUserList: [], // 预警学生个体
+      attentionGroupList: [], // 预警群体
+
+      mapData: [] // 地图数据
+    }
+  },
+  created() {
+    this.userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528")
+  },
+  async mounted() {
+    let tempDom = document.querySelector('#bottomTableOutline')
+    this.$nextTick(() => {
+      this.tableHeight = tempDom.offsetHeight - 82
+      this.$forceUpdate()
+    })
+
+    this.institutionNo = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9527")
+    this.institutionNo = this.institutionNo && this.institutionNo !== 'null' ? this.institutionNo : ''
+
+    // this.allTestNum = await this.getAllTestNum()
+    // this.allUserNum = await this.getAllUserNum()
+    this.TodayUserNum = await this.getTodayUserNum()
+
+
+    this.screeningProgress[0].value = await this.finishUserNum()
+    if (this.userType === '4') {
+      let tempProgressArr = await this.finishInstitutionNum()
+
+      this.screeningProgress = [...this.screeningProgress, ...tempProgressArr]
+    }
+    let riskLevelDataSList = await this.finishInstitutionNum()
+    console.log(riskLevelDataSList, '========================>riskLevelDataSList');
+    this.riskLevelDataS = riskLevelDataSList[0].value
+    // this.riskLevelDataS = 66
+    console.log(this.riskLevelDataS, '============>this.riskLevelDataS');
+
+    this.groupEvaluationRatioData = await this.groupEvaluationRatio()
+    // this.groupEvaluationRatioData = [{ name: '二年级', value: 34 }, { name: '三年级', value: 34 }, { name: '四年级', value: 34 }, { name: '五年级', value: 34 }, { name: '六年级', value: 34 }, { name: '七年级', value: 34 }, { name: '八年级', value: 34 }, { name: '九年级', value: 34 }, { name: '高一年级', value: 34 }]
+    console.log(this.groupEvaluationRatioData, '=========>this.groupEvaluationRatioData');
+
+
+    // let { xData, yData } = await this.recentDetail()
+    let xydata = await this.getrecentDetail()
+    // let xydata = [{ testCount: 2, test_date: '2024年09月', userCount: 1 }, { testCount: 6, test_date: '2024年10月', userCount: 9 }, { testCount: 5, test_date: '2024年11月', userCount: 6 }]
+    let xData = []
+    let testCount = []
+    let userCount = []
+    for (let i = 0; i < xydata.length; i++) {
+      const element = xydata[i];
+      xData.push(element.test_date)
+      testCount.push(element.testCount)
+      userCount.push(element.userCount)
+    }
+    this.dynamicData = {
+      xData: xData,
+      yData: [userCount,testCount],
+      names: ['参与人数','测评次数']
+    }
+    this.scaleListasks = await this.Scalesandtasks()
+
+
+    this.cognitiveTaskList = await this.recentTaskDetail()
+    this.riskLevelData.yData = await this.resultRiskLevel()
+
+    this.attentionUserList = await this.urgentAttentionUser()
+    console.log(this.attentionUserList, '========>this.attentionUserList');
+
+    this.attentionGroupList = await this.urgentAttentionGroup()
+
+    // this.riskChangeData = await this.riskChangeChart()
+    this.mapData = await this.psychologicalRiskMap()
+  },
+  methods: {
+    // 查询分页数据方法
+    handleCurrentChange(current, falg) {
+      console.log(current, falg, '查询');
+      switch (falg) {
+        case '1':
+          console.log('量表');
+          break;
+        case '2':
+          console.log('实时');
+          break;
+        default:
+          break;
+      }
+    },
+    // 查询测评总次数
+    getAllTestNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/allTestNum?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data.allTestNum)
+        })
+      })
+    },
+
+    // 查询测评总人数
+    getAllUserNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/allUserNum?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data.allUserNum)
+        })
+      })
+    },
+    // 今日测评总人数
+    getTodayUserNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/todayCount?institutionNo=${this.institutionNo}`, {}, (res) => {
+          console.log(res.data, 'klllllllllll========================>hjhjhjhjhjhjhjhjhjhjhjk');
+          resolve(res.data.count)
+        })
+      })
+    },
+
+    // 查询学生完成进度
+    finishUserNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/finishUserNum?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(roundToFixed(res.data.finishNum / res.data.allNum, 2))
+        })
+      })
+    },
+
+    // 查询学校完成进度
+    finishInstitutionNum() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/finishInstitutionNum?institutionNo=${this.institutionNo}`, {}, (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?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data.map((item) => {
+            return {
+              name: item.group_name,
+              value: item.count
+            }
+          }))
+        })
+      })
+    },
+
+    // 动态数据图表(近段时间测评活动情况)
+    recentDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+    // 近段时间测评活动情况
+    getrecentDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentTestDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
+          console.log(res, '=============>hkdhkvvvvvvvvvvvvvvvvvv');
+
+          resolve(res.data)
+        })
+      })
+    },
+
+
+    // 近段时间主要使用量表：index/recentSubjectDetail
+    recentSubjectDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentSubjectDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+    // 量表和任务
+    Scalesandtasks() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/subjectAndTaskDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
+          console.log(res, '===============================--------------------->');
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 近段时间主要使用认知任务：index/recentTaskDetail
+    recentTaskDetail() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/recentTaskDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 紧急关注的学生个体：index/urgentAttentionUser
+    urgentAttentionUser() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/urgentAttentionUser?institutionNo=${this.institutionNo}`, {}, (res) => {
+          console.log(res.data, '=================================>关注学生个体');
+
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 紧急关注的群体信息：index/urgentAttentionGroup
+    urgentAttentionGroup() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/urgentAttentionGroup?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 测评结果风险等级柱状图：index/resultRiskLevel
+    resultRiskLevel() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/resultRiskLevel?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve([res.data.warnNum, res.data.unWarnNum])
+        })
+      })
+    },
+
+
+    // 风险变化趋势折线图：index/riskChangeChart
+    riskChangeChart() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/riskChangeChart?institutionNo=${this.institutionNo}`, {}, (res) => {
+          resolve(res.data)
+        })
+      })
+    },
+
+    // 心理风险地图：index/psychologicalRiskMap
+    psychologicalRiskMap() {
+      return new Promise((resolve, reject) => {
+        this.$http.get(`/index/psychologicalRiskMap?institutionNo=${this.institutionNo}`, {}, (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-pic1.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  /* 可选，让图片居中对齐 */
+
+  .top-header {
+    width: 100%;
+    height: 56px;
+    background-image: url('/static/assets/index/bg-header1.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    /* 可选，让图片居中对齐 */
+  }
+
+  .main-content {
+    width: 100%;
+    height: calc(100% - 56px);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    padding-bottom: 2px;
+
+    // @media screen and (min-width:1920px){
+    .Evaluation {
+      width: 500px;
+      height: calc(100% - 56px);
+      flex-direction: column;
+      // padding: 10px 1px 30px 25px;
+      // margin-top: 10px;
+      margin-left: 10px;
+
+      .Evaluation1 {
+        margin-top: 10px;
+        width: 100%;
+        height: calc(49% + 20px);
+        // padding: 10px 0 0 10px;
+        background: #FFFFFF;
+        border-radius: 8px;
+
+        .IndexBarSty {
+          margin-top: 20px;
+          margin-left: -2px;
+        }
+      }
+
+      .Evaluation2 {
+        margin-top: 12px;
+        width: 100%;
+        // padding: 10px 0 0 10px;
+        height: calc(49% + 17px);
+        background: #FFFFFF;
+        border-radius: 8px;
+
+      }
+    }
+
+    .EvaluationR {
+      // width: calc(66%);
+      height: calc(100% - 56px);
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      // padding: 10px 21px 30px 40px;
+      // margin-top: 10px;
+      // margin-left: 10px;
+
+      .EvaluationR1 {
+        margin-top: 10px;
+        margin-left: 10px;
+        width: calc(100% - 21px);
+        height: 25%;
+        // padding: 10px 0 0 10px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+
+        .EvaluationR11 {
+          width: 30%;
+          height: calc(100% - 21px);
+          // margin-left: -135px;
+          margin-top: 27px;
+          background-image: url('/static/assets/index/bg-cp1.png');
+          background-size: 100% 75%;
+          background-repeat: no-repeat;
+          background-position: center;
+
+          .a {
+            margin-top: 20px;
+            margin-left: 21px;
+            font-size: 20px;
+          }
+
+          .b {
+            margin-top: 5px;
+            padding-bottom: 10px;
+            margin-left: 21px;
+            font-size: 55px;
+            font-weight: 700;
+            color: #3068FF;
+          }
+        }
+
+        .EvaluationR12 {
+          width: 30%;
+          height: calc(100% - 21px);
+          margin-top: 27px;
+          background-image: url('/static/assets/index/bg-cp2.png');
+          background-size: 100% 75%;
+          background-repeat: no-repeat;
+          background-position: center;
+
+          .a {
+            margin-top: 30px;
+            margin-left: 21px;
+            font-size: 20px;
+          }
+
+          .b {
+            padding-bottom: 10px;
+            margin-top: 5px;
+            margin-left: 21px;
+            font-size: 55px;
+            font-weight: 700;
+            color: #FEAD00;
+          }
+        }
+
+        .EvaluationR13 {
+          width: 30%;
+          margin-top: 27px;
+          height: calc(100% - 21px);
+          background-image: url('/static/assets/index/bg-cp3.png');
+          background-size: 100% 75%;
+          background-repeat: no-repeat;
+          background-position: center;
+
+          .a {
+            margin-top: 30px;
+            margin-left: 21px;
+            font-size: 20px;
+          }
+
+          .b {
+            margin-top: 5px;
+            padding-bottom: 10px;
+            margin-left: 21px;
+            font-size: 55px;
+            font-weight: 700;
+            color: #FD0567;
+          }
+        }
+      }
+
+      .EvaluationR2 {
+        width: calc(100% - 10px);
+        margin-top: 10px;
+        margin-left: 5px;
+        height: 38%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+
+        .EvaluationR21 {
+          width: calc(48% + 10px);
+          height: calc(100%);
+          // padding: 10px 0 0 10px;
+          background: #FFFFFF;
+          border-radius: 8px;
+
+          .IndexSmallPieSty {
+            margin-left: -110px;
+            margin-top: -16px
+          }
+        }
+
+        .EvaluationR22 {
+          width: calc(48% + 10px);
+          height: calc(100%);
+          // padding: 10px 0 0 10px;
+          background: #FFFFFF;
+          border-radius: 8px;
+
+          .IndexBarAst {
+            width: 100%;
+            height: 100%;
+            margin-left: -11px;
+            margin-top: 16px
+          }
+        }
+
+      }
+
+      .EvaluationR3 {
+        width: calc(100% - 20px);
+        height: calc(35%);
+        margin-top: 10px;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+
+        .EvaluationR31 {
+          width: calc(48% + 15px);
+          height: calc(100% + 44px);
+          // padding: 10px 0 0 10px;
+          background: #FFFFFF;
+          border-radius: 8px;
+        }
+
+        .EvaluationR32 {
+          width: calc(48% + 15px);
+          height: calc(100% + 44px);
+          // padding: 10px 0 0 10px;
+          background: #FFFFFF;
+          border-radius: 8px;
+        }
+      }
+
+    }
+  }
+}
+</style>

src/router/index.js

@@ -68,6 +68,7 @@ import TestResultNew from "@/views/testResult_new";
 import MountainHua from "@/views/CognitiveAbilityTask/mountainHua";
 
 import AdminHome from "@/components/manage/main/AdminHome";
+import AdminHomeS from "@/components/manage/main/AdminHomeS";
 import UserManage from "@/components/manage/main/UserManage.vue";
 import UserRecords from "@/components/manage/main/UserRecords.vue";
 import AdminManage from "@/components/manage/main/AdminManage";
@@ -162,6 +163,11 @@ const routes = [
         name: "首页",
         component: AdminHome,
       },
+      {
+        path: "AdminHomeS",
+        name: "首页",
+        component: AdminHomeS,
+      },
       {
         path: "OperationLog",
         name: "操作日志管理",