fix: 对接后台首页

src/components/Echarts/CountBox.vue

@@ -9,8 +9,8 @@
                     </div>
 
                     <div class="top_content_left_title_text_box">
-                        <div class="top_content_left_title_text_sub_title">{{props.text}}</div>
+                        <div class="top_content_left_title_text_sub_title">{{ props.text }}</div>
-                        <div class="top_content_left_title_text_title">{{props.count}}</div>
+                        <div class="top_content_left_title_text_title">{{ props.count }}</div>
                     </div>
                 </div>
             </div>
@@ -19,7 +19,7 @@
                 <div class="top_content_right_num_box">
                     <img v-if="props.percentage > 0" src="/img/home/上升.png" alt="">
                     <img v-if="props.percentage < 0" src="/img/home/下降.png" alt="">
-                    <div class="top_content_right_num">{{props.percentage}}%</div>
+                    <div class="top_content_right_num">{{ props.percentage }}%</div>
                 </div>
                 <div class="top_content_right_price">同昨日对比</div>
             </div>
@@ -38,66 +38,165 @@ import * as echarts from 'echarts';
 
 
 const props = defineProps({
-  // 数据
+    // 数据
-  option: {
+    data: {
-    type: Object,
+        type: Array,
-    default: null,
+        default: [
-  },
+            ['1', 500],
-  img: {
+            ['2', 900],
-    type: String,
+            ['3', 460],
-    default: null,
+            ['4', 1150],
-  },
+            ['5', 300],
-  text: {
+            ['6', 1000],
-    type: String,
+            ['7', 400],
-    default: null,
+        ],
-  },
+    },
-  count: {
+    img: {
-    type: Number,
+        type: String,
-    default: 0,
+        default: null,
-  },
+    },
-  percentage: {
+    text: {
-    type: Number,
+        type: String,
-    default: 0,
+        default: null,
-  },
+    },
-  idx: {
+    count: {
-    type: Number,
+        type: Number,
-    default: 0,
+        default: 0,
-  },
+    },
+    percentage: {
+        type: Number,
+        default: 0,
+    },
+    idx: {
+        type: Number,
+        default: 0,
+    },
 })
 
-
+console.log(props.data,'this is data');
 
 
 onMounted(async () => {
-  await echartsInit()
+    await echartsInit()
 })
 
 onBeforeUnmount(() => {
-  echarts.dispose(document.getElementById('mainBox' + props.idx));
+    echarts.dispose(document.getElementById('mainBox' + props.idx));
 });
 
+// 数据预览 echarts 参数
+let options = ref({
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: false,
+        axisTick: {
+            show: false // 不显示坐标轴刻度线
+        },
+        axisLine: {
+            show: false, // 不显示坐标轴线
+        },
+        axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+        },
+        splitLine: {
+            show: false // 不显示网格线
+        },
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '30%'],
+        show: false,
+    },
+    visualMap: {
+        type: 'piecewise',
+        show: false,
+        // 淡化效果
+        dimension: 0.1,
+        // 最小值
+        min: 0,
+        seriesIndex: 1,
+        pieces: [
+            {
+                gt: 1,
+                lt: 3,
+                color: 'rgba(0, 0, 180, 0.4)'
+            },
+            {
+                gt: 5,
+                lt: 7,
+                color: 'rgba(0, 0, 180, 0.4)'
+            }
+        ]
+    },
+    series: [
+        {
+            type: 'line',
+            smooth: 0.6,
+            symbol: 'none',
+            showSymbol: true,
+
+            lineStyle: {
+                color: {
+                    type: 'linear', // 线性渐变
+                    x: 0.7,
+                    y: 0,
+                    x2: 0,
+                    y2: 0,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#a5b9fe' // 0%处的颜色为淡橙色
+                    }, {
+                        offset: 1,
+                        color: '#4e70df' // 100%处的颜色为橙色
+                    }]
+                },
+                width: 3,
+            },
+            itemStyle: {
+                color: {
+                    type: 'linear', // 线性渐变
+                    x: 0,
+                    y: 0.8,
+                    x2: 0,
+                    y2: 0.4,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#ffffff' // 0%处的颜色为淡橙色
+                    }, {
+                        offset: 1,
+                        color: '#e7f1ff' // 100%处的颜色为橙色
+                    }]
+                }
+            },
+            areaStyle: {},
+            data: props.data
+        }
+    ]
+})
+
+
 
 // 顶部第一个盒子
 async function echartsInit() {
-    console.log(document.getElementById('mainBox' + props.idx));
+    let myChart = echarts.getInstanceByDom(document.getElementById('mainBox' + props.idx)); //有的话就获取已有echarts实例的DOM节点。
-  let myChart = echarts.getInstanceByDom(document.getElementById('mainBox' + props.idx)); //有的话就获取已有echarts实例的DOM节点。
-  
-  if (myChart == null) { // 如果不存在，就进行初始化。
-    myChart = echarts.init(document.getElementById('mainBox' + props.idx));
-  }
 
-  props.option && myChart.setOption(props.option);
+    if (myChart == null) { // 如果不存在，就进行初始化。
+        myChart = echarts.init(document.getElementById('mainBox' + props.idx));
+    }
+
+    options.value && myChart.setOption(options.value);
 }
 </script>
 
 
 <style lang="less" scoped>
 .mainBox {
-  width: 450px;
+    width: 450px;
-  margin-top: -139px;
+    margin-top: -139px;
-  margin-left: -45px;
+    margin-left: -45px;
-  margin-top: -70px;
+    margin-top: -70px;
-  height: 300px;
+    height: 300px;
 }
 
 .top_box_pos {

src/pages/index/index.vue

@@ -62,127 +62,6 @@
   justify-content: space-around;
 }
 
-// 顶部盒子左边
-.top_content_left_box {
-  width: 45%;
-  height: 100%;
-  // background-color: aquamarine;
-}
-
-.top_content_left_title_box {
-  width: 100%;
-  height: 100%;
-  padding: 20px 0 0 5px;
-  display: flex;
-  // justify-content: space-between;
-  overflow: hidden;
-  position: relative;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.top_content_left_title_img_box {
-  width: 40%;
-  height: 60%;
-  overflow: hidden;
-  margin-right: 10px;
-  // border: 5px solid red;
-}
-
-.top_content_left_title_img_box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.top_content_left_title_text_box {
-  margin-top: 5px;
-}
-
-.top_content_left_title_text_title {
-  font-weight: bold;
-  font-size: 20px;
-}
-
-.top_content_left_title_text_sub_title {
-  font-size: 14px;
-  margin-top: 5px;
-  font-weight: bold;
-  color: #9aa4ba;
-}
-
-.top_content_right_box {
-  width: 45%;
-  height: 100%;
-  // background-color: aquamarine;
-  padding: 23px 20px 0 0;
-}
-
-
-.top_content_right_price {
-  display: flex;
-  justify-content: end;
-  margin-right: -10px;
-  margin-bottom: 3px;
-  font-size: 13px;
-
-  font-weight: bold;
-  color: #9ca1bb;
-}
-
-.Top_content_right_price {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 3px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #9ca1bb;
-
-}
-
-.top_content_right_num_box {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  font-size: 18px;
-}
-
-.top_content_right_num_box img {
-  width: 15px;
-  height: 15px;
-  object-fit: contain;
-  margin-right: 5px;
-}
-
-
-.top_line_box {
-  width: 100%;
-  height: 60%;
-  // background-color: orange;
-}
-
-.user {
-  margin-top: -40px;
-  margin-bottom: 30px;
-  // font-family: 楷体;
-}
-
-#main {
-  width: 450px;
-  margin-top: -139px;
-  margin-left: -45px;
-  margin-top: -70px;
-  height: 300px;
-}
-
-#main2 {
-  width: 450px;
-  margin-top: -130px;
-  margin-left: -45px;
-  margin-top: -70px;
-  height: 300px;
-}
 
 #main3 {
   width: 1850px;
@@ -191,38 +70,6 @@
   margin-left: -7%;
 }
 
-#main7 {
-  width: 450px;
-  margin-top: -139px;
-  margin-left: -45px;
-  margin-top: -70px;
-  height: 300px;
-}
-
-#main8 {
-  width: 450px;
-  margin-top: -139px;
-  margin-left: -45px;
-  margin-top: -70px;
-  height: 300px;
-}
-
-#main9 {
-  width: 450px;
-  margin-top: -139px;
-  margin-left: -45px;
-  margin-top: -70px;
-  height: 300px;
-}
-
-.Bottom_pie_chart {
-  width: 100%;
-  height: 400px;
-  margin-top: 50px;
-  display: flex;
-  justify-content: space-around;
-}
-
 // 柱状图
 .Wave_pattern {
   width: 95%;
@@ -241,52 +88,8 @@
   margin-top: 40px;
   font-family: 幼圆;
 }
-
-.Wave_pattern_box {
-  width: 10px;
-  height: 10px;
-  background-color: #1b5afa;
-}
-
-.middle_show_box {
-  width: 100%;
-  background-color: #f9f9f9;
-  // padding: 1rem 2rem;
-}
-
-.middle_pos_box {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.8rem 2rem;
-}
-
-.middle_title_box {
-  // margin-top: 3rem;
-  // margin-left: 5rem;
-  display: flex;
-  align-items: center;
-}
-
-.year_select_box {
-  display: flex;
-}
-
-.year_text {
-  margin-right: 1.5rem;
-  font-weight: bold;
-  transition: .4s;
-  cursor: pointer;
-}
-
-.year_text_actice {
-  color: #8dbffb !important;
-}
-
-.year_text:hover {
-  color: #8dbffb;
-}
 </style>
+
 <template>
   <!-- 顶部的所有盒子 -->
   <div class="top_title_box">
@@ -297,20 +100,20 @@
   <div class="total">
     <div class="top_content_box">
 
-      <CountBox :option="options" :idx="1" :text="'教师总数'" :img="'/img/home/分组 1 (10).png'" :count="'4,423'"
+      <CountBox :data="teacherEchartsData" :idx="1" :text="'教师总数'" :img="'/img/home/分组 1 (10).png'"
-        :percentage="'0'">
+        :count="teacherData.count" :percentage="teacherData.percentage">
       </CountBox>
 
-      <CountBox :option="options" :idx="2" :text="'文章总数'" :img="'/img/home/分组 1 (11).png'" :count="'2,153'"
+      <CountBox :data="infoArticleEchartsData" :idx="2" :text="'文章总数'" :img="'/img/home/分组 1 (11).png'"
-        :percentage="'28'">
+        :count="infoArticleData.count" :percentage="infoArticleData.percentage">
       </CountBox>
 
-      <CountBox :option="options" :idx="3" :text="'访客总数'" :img="'/img/home/分组 1 (12).png'" :count="'3,25'"
+      <CountBox :data="flowEchartsData" :idx="3" :text="'访客总数'" :img="'/img/home/分组 1 (12).png'" :count="flowData.count"
-        :percentage="'28'">
+        :percentage="flowData.percentage">
       </CountBox>
 
-      <CountBox :option="options" :idx="4" :text="'作品总数'" :img="'/img/home/分组 1 (13).png'" :count="'14,423'"
+      <CountBox :data="worksEchartsData" :idx="4" :text="'作品总数'" :img="'/img/home/分组 1 (13).png'" :count="worksData.count"
-        :percentage="'28'">
+        :percentage="worksData.percentage">
       </CountBox>
 
     </div>
@@ -348,10 +151,58 @@
 <script setup>
 import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
-
 import CountBox from "~/components/Echarts/CountBox.vue"
+import { getHomeData } from '~/service/home';
+
+// Echarts数据
+let teacherEchartsData = [
+  ['1', 500],
+  ['2', 900],
+  ['3', 460],
+  ['4', 1150],
+  ['5', 300],
+  ['6', 1000],
+  ['7', 400],
+]
+
+let infoArticleEchartsData = [
+  ['1', 500],
+  ['2', 900],
+  ['3', 460],
+  ['4', 1150],
+  ['5', 300],
+  ['6', 1000],
+  ['7', 400],
+]
+
+let flowEchartsData = [
+  ['1', 500],
+  ['2', 900],
+  ['3', 460],
+  ['4', 1150],
+  ['5', 300],
+  ['6', 1000],
+  ['7', 400],
+]
+
+let worksEchartsData = [
+  ['1', 500],
+  ['2', 900],
+  ['3', 460],
+  ['4', 1150],
+  ['5', 300],
+  ['6', 1000],
+  ['7', 400],
+]
+
+let teacherData = ref({})
+let infoArticleData = ref({})
+let flowData = ref({})
+let worksData = ref({})
+let enrolData = ref({})
 
 onMounted(async () => {
+  await getHome()
   await echartsInit3()
 })
 
@@ -359,105 +210,21 @@ onBeforeUnmount(() => {
   echarts.dispose(document.getElementById('main3'));
 });
 
-// 数据预览 echarts 参数
-let options = ref({
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    show: false,
-    axisTick: {
-      show: false // 不显示坐标轴刻度线
-    },
-    axisLine: {
-      show: false, // 不显示坐标轴线
-    },
-    axisLabel: {
-      show: false, // 不显示坐标轴上的文字
-    },
-    splitLine: {
-      show: false // 不显示网格线
-    },
-  },
-  yAxis: {
-    type: 'value',
-    boundaryGap: [0, '30%'],
-    show: false,
-  },
-  visualMap: {
-    type: 'piecewise',
-    show: false,
-    // 淡化效果
-    dimension: 0.1,
-    // 最小值
-    min: 0,
-    seriesIndex: 1,
-    pieces: [
-      {
-        gt: 1,
-        lt: 3,
-        color: 'rgba(0, 0, 180, 0.4)'
-      },
-      {
-        gt: 5,
-        lt: 7,
-        color: 'rgba(0, 0, 180, 0.4)'
-      }
-    ]
-  },
-  series: [
-    {
-      type: 'line',
-      smooth: 0.6,
-      symbol: 'none',
-      showSymbol: true,
 
-      lineStyle: {
+// 获取接口数据
-        color: {
+async function getHome() {
-          type: 'linear', // 线性渐变
+  const { code, data } = await getHomeData();
-          x: 0.7,
+  if (code == 0) {
-          y: 0,
+    teacherData.value = data.data_preview.teacher
-          x2: 0,
+    infoArticleData.value = data.data_preview.info_article
-          y2: 0,
+    flowData.value = data.data_preview.flow
-          colorStops: [{
+    worksData.value = data.data_preview.works
-            offset: 0,
+
-            color: '#a5b9fe' // 0%处的颜色为淡橙色
+    enrolData.value = data.statistics
-          }, {
+    console.log(data, "首页");
-            offset: 1,
+  }
-            color: '#4e70df' // 100%处的颜色为橙色
+}
-          }]
-        },
-        width: 3,
-      },
-      itemStyle: {
-        color: {
-          type: 'linear', // 线性渐变
-          x: 0,
-          y: 0.8,
-          x2: 0,
-          y2: 0.4,
-          colorStops: [{
-            offset: 0,
-            color: '#ffffff' // 0%处的颜色为淡橙色
-          }, {
-            offset: 1,
-            color: '#e7f1ff' // 100%处的颜色为橙色
-          }]
-        }
-      },
-      areaStyle: {},
 
-      data: [
-        ['1', 500],
-        ['2', 900],
-        ['3', 460],
-        ['4', 1150],
-        ['5', 300],
-        ['6', 1000],
-        ['7', 400],
-      ],
-    }
-  ]
-})
 
 
 // 柱形图
@@ -542,9 +309,10 @@ async function echartsInit3() {
             barBorderRadius: 3,
           },
         },
-        data: [
+        // data: [
-          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        //   2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-        ],
+        // ],
+        data: enrolData.value.signup
       },
       {
         name: '留言人数',
@@ -556,9 +324,7 @@ async function echartsInit3() {
             barBorderRadius: 3,
           },
         },
-        data: [
+        data: enrolData.value.leave_message
-          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-        ],
       }
     ]
   }

src/service/home.js

@@ -0,0 +1,15 @@
+import {
+  api,
+  downloadFile,
+  createApiUrl
+} from '~/utils/axios';
+
+
+/**
+ * 获取后台首页数据
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function getHomeData(data) {
+  return api.post('Home.Home/getHomeData', data);
+}