1

src/components/pages/components/actLineChat.vue

@@ -0,0 +1,83 @@
+<template>
+  <div style="width: 95%; height: 100%; margin: 0 auto">
+    <div class="actLineChatBox">
+      <div>活跃度：</div>
+      <div ref="chart" style="width: 410px; height: 300px"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LineChart",
+  mounted() {
+    this.renderChart();
+  },
+  methods: {
+    renderChart() {
+      const chartDom = this.$refs.chart;
+      const myChart = this.$echarts.init(chartDom);
+      const option = {
+        // title: {
+        //   text: "折线图",
+        // },
+        tooltip: {},
+        xAxis: {
+          type: "category",
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+          axisLabel: {
+            interval: 0, //全部显示x轴
+          },
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [100, 148, 230, 100, 140, 150, 210, 210, 210, 200, 150, 170],
+            type: "line",
+          },
+          {
+            data: [150, 100, 200, 140, 100, 110, 170, 140, 120, 150, 150, 210],
+            type: "line",
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.actLineChatBox {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  width: 410px;
+  border: 1px solid #e6e6e6;
+  box-shadow: 0px 0px 5px 0px #e6e6e6;
+  border-radius: 10px;
+  padding: 15px 10px;
+  margin-top: 20px;
+}
+.actLineChatBox > div:first-child {
+  color: #3050c2;
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>

src/components/pages/components/actTypeTable.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-table :data="tableData" border style="width: 100%">
+      <!-- :cell-class-name="tableCellClassName" -->
+      <el-table-column align="center" prop="name" min-width="180">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="nameNum"
+        label="次数"
+        min-width="180"
+      >
+      </el-table-column>
+    </el-table>
+    <div class="tableContent">
+      <div>总结：</div>
+      <div>
+        本月活动内容主要集中在会议、公开课筹备。
+        在研修、培训等活动内容还需要加强。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "公开课",
+          nameNum: "23",
+        },
+        {
+          name: "研修",
+          nameNum: "21",
+        },
+        {
+          name: "讲座",
+          nameNum: "10",
+        },
+        {
+          name: "培训",
+          nameNum: "9",
+        },
+      ],
+    };
+  },
+  //   methods:{
+  //     tableCellClassName({ column, columnIndex }) {
+  //       if (columnIndex) {
+  //         return "even_row";
+  //       } else {
+  //         return "";
+  //       }
+  //     },
+  //   },
+};
+</script>
+
+<style scoped>
+.el-table{
+    margin: 20px 0;
+}
+.el-table >>> .has-gutter tr th,
+.el-table >>> .el-table__row > td:first-child {
+  background: #f2f2f2;
+  color: #000;
+}
+</style>

src/components/pages/components/studioEvaBasicData.vue

@@ -0,0 +1,60 @@
+<template>
+  <div style="width: 95%; height: 100%; margin: 0 auto">
+    <div class="basicDataCss">
+      <div>基础信息</div>
+      <div>
+        <div>工作室人数：14人</div>
+        <div>男：5人</div>
+        <div>女：9人</div>
+      </div>
+      <div>
+        <div>管理员：2人</div>
+        <div>成员：2人</div>
+        <div>学员：2人</div>
+      </div>
+      <div>人均月活动次数：6人</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.basicDataCss {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 410px;
+  border: 1px solid #e6e6e6;
+  box-shadow: 0px 0px 5px 0px #e6e6e6;
+  border-radius: 10px;
+  padding: 15px 10px;
+}
+.basicDataCss > div:not(:last-child) {
+  padding-bottom: 15px;
+}
+.basicDataCss > div:nth-child(1) {
+  color: #3050c2;
+  font-size: 18px;
+  font-weight: bold;
+}
+.basicDataCss > div:nth-child(2),
+.basicDataCss > div:nth-child(3) {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+.basicDataCss > div:nth-child(2) > div,
+.basicDataCss > div:nth-child(3) > div {
+  width: 80px;
+  padding-right: 15px;
+}
+.basicDataCss > div:nth-child(2) > div:first-child,
+.basicDataCss > div:nth-child(3) > div:first-child {
+  min-width: 140px;
+}
+</style>

src/components/pages/studio/studioEvaluate.vue

@@ -1,18 +1,59 @@
 <template>
-  <div>
-
+  <div class="studioBox">
+    <div class="studioBoxTop">
+      <div class="studioBoxTLeft">
+        <StudioEvaBasicData></StudioEvaBasicData>
+        <ActLineChat></ActLineChat>
+      </div>
+      <div class="tudioBoxTRight">
+        <div>活动类型统计</div>
+        <div>
+          <ActTypeTable></ActTypeTable>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import StudioEvaBasicData from "../components/studioEvaBasicData.vue";
+import ActLineChat from "../components/actLineChat.vue";
+import ActTypeTable from '../components/actTypeTable.vue';
 export default {
-data() {
-    return {
-    }
-},
-}
+  components: {
+    StudioEvaBasicData,
+    ActLineChat,
+    ActTypeTable,
+  },
+  data() {
+    return {};
+  },
+};
 </script>
 
-<style>
-
+<style scoped>
+.studioBox {
+  width: 100%;
+  background: #fff;
+  height: 100%;
+}
+.studioBoxTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.tudioBoxTRight {
+  width: 410px;
+  border: 1px solid #e6e6e6;
+  box-shadow: 0px 0px 5px 0px #e6e6e6;
+  border-radius: 10px;
+  padding: 15px 10px;
+  margin: 0 0 0 30px;
+}
+.tudioBoxTRight > div:first-child {
+  color: #3050c2;
+  font-size: 18px;
+  font-weight: bold;
+}
 </style>

src/router/index.js

@@ -66,6 +66,10 @@ import tcNotice from '@/components/pages/tencent/notice'
 import studioCourse from '@/components/pages/studio/course'
 import studioAddCourse from '@/components/pages/studio/addCourse'
 import studioCourseProgress from '@/components/pages/studio/courseProgress'
+import studioEvaluate from '@/components/pages/studio/studioEvaluate'
+import studioEvaBasicData from '@/components/pages/components/studioEvaBasicData'
+import actLineChat from '@/components/pages/components/actLineChat'
+import actTypeTable from '@/components/pages/components/actTypeTable'
 
 Vue.use(Router).use(ElementUI)
 
@@ -562,5 +566,37 @@ export default new Router({
                 requireAuth: '' // 不需要鉴权
             }
         },
+        {
+            path: '/studioEvaluate',
+            name: 'studioEvaluate',
+            component: studioEvaluate,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/studioEvaBasicData',
+            name: 'studioEvaBasicData',
+            component: studioEvaBasicData,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/actLineChat',
+            name: 'actLineChat',
+            component: actLineChat,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/actTypeTable',
+            name: 'actTypeTable',
+            component: actTypeTable,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
     ]
 })