Merge branch 'develop6.0-tmd' of http://52.130.252.100:10000/TEAMMODEL/TEAMModelOS into develop6.0-tmd

TEAMModelAPI/ApiTokenAttribute.cs

@@ -66,6 +66,11 @@ namespace TEAMModelOS.Filter
         /// 接口名称
         /// </summary>
         public string Name { get; set; }
+        /// <summary>
+        /// 接口属性
+        /// </summary>
+        public string RW { get; set; }
+
         public IFilterMetadata CreateInstance(IServiceProvider services)
         {
             var option = services.GetService<IOptions<Option>>();

TEAMModelAPI/Controllers/School/SchoolController.cs

@@ -56,7 +56,7 @@ namespace TEAMModelAPI.Controllers
         /// <returns></returns>
         [ProducesDefaultResponseType]
         [HttpGet("get-school-info")]
-        [ApiToken(Auth = "1",Name = "学校基础信息", Limit=false)]
+        [ApiToken(Auth = "2",Name = "学校基础信息", RW = "R", Limit =false)]
         public async Task<IActionResult> GetSchoolInfo()
         {
             var (id, school) = HttpContext.GetApiTokenInfo();
@@ -78,7 +78,7 @@ namespace TEAMModelAPI.Controllers
         /// <returns></returns>
         [ProducesDefaultResponseType]
         [HttpGet("get-teacher-list")]
-        [ApiToken(Auth = "2", Name = "学校教师列表", Limit = false)]
+        [ApiToken(Auth = "3", Name = "学校教师列表", RW = "R", Limit = false)]
         public async Task<IActionResult> GetTeacherList()
         {
             var (id, school) = HttpContext.GetApiTokenInfo();
@@ -93,6 +93,48 @@ namespace TEAMModelAPI.Controllers
                 teachers
             });
         }
+        /// <summary>
+        /// 获取学校教师信息
+        /// </summary>
+        /// <returns></returns>
+        [ProducesDefaultResponseType]
+        [HttpPost("get-teacher-info")]
+        [ApiToken(Auth = "4", Name = "学校教师信息", RW = "R", Limit = false)]
+        public async Task<IActionResult> GetTeacherInfo(JsonElement json )
+        {
+            json.TryGetProperty("tmdid", out JsonElement _tmdid);
+            var (id, school) = HttpContext.GetApiTokenInfo();
+            Azure.Response responseSchoolTch =await _azureCosmos.GetCosmosClient().GetContainer(Constant.TEAMModelOS, "School")
+                .ReadItemStreamAsync($"{_tmdid}", new PartitionKey($"Teacher-{school}"));
+            Azure.Response responseTch = await _azureCosmos.GetCosmosClient().GetContainer(Constant.TEAMModelOS, "Teacher")
+                 .ReadItemStreamAsync($"{_tmdid}", new PartitionKey($"Base"));
+            Teacher teacher = null;
+            if (responseTch.Status == 200)
+            {
+                teacher = JsonDocument.Parse(responseTch.Content).RootElement.Deserialize<Teacher>();
+            }
+            else
+            {
+                return Ok(new { error = 3, msg = "账号未创建！" });
+            }
+            if (responseSchoolTch.Status == 200 && teacher!= null )
+            {
+                SchoolTeacher schoolTeacher= JsonDocument.Parse(responseSchoolTch.Content).RootElement.Deserialize<SchoolTeacher>();
+                if (schoolTeacher.status.Equals("join"))
+                {
+                    return Ok(new {teacher.id,teacher.name,teacher.picture,schoolTeacher.job,schoolTeacher.status,schoolTeacher.roles,schoolTeacher.subjectIds, school=teacher.schools?.Find(x=>x.schoolId.Equals(school)) } );
+                }
+                else
+                {
+                    return Ok(new { error = 2, msg = "教师未加入学校！" });
+                }
+
+            }
+            else {
+                return Ok(new { error = 1, msg = "教师未就职该学校！" });
+            }
+        }
+
         /*
             "periodId":"学段（选填）"
          */
@@ -103,7 +145,7 @@ namespace TEAMModelAPI.Controllers
         /// <returns></returns>
         [ProducesDefaultResponseType]
         [HttpPost("get-group-list")]
-        [ApiToken(Auth = "3", Name = "学校教师列表", Limit = false)]
+        [ApiToken(Auth = "5", Name = "学校教师列表", RW = "R", Limit = false)]
         public async Task<IActionResult> GetGroupList(JsonElement json)
         {
             var client = _azureCosmos.GetCosmosClient();
@@ -200,7 +242,7 @@ namespace TEAMModelAPI.Controllers
 
         [ProducesDefaultResponseType]
         [HttpPost("get-group-members")]
-        [ApiToken(Auth = "4", Name = "获取名单详细信息和成员信息", Limit = false)]
+        [ApiToken(Auth = "6", Name = "获取名单详细信息和成员信息", RW = "R", Limit = false)]
         public async Task<IActionResult> GetGroupMembers(JsonElement json)
         {
             var client = _azureCosmos.GetCosmosClient();
@@ -210,9 +252,10 @@ namespace TEAMModelAPI.Controllers
             (List<RMember> members, List<RGroupList> groups) = await GroupListService.GetStutmdidListids(client, _dingDing, listids, $"{school}");
             return Ok(new { groups = groups.Select(x => new { x.name, x.no, x.periodId, x.school, x.type, x.year, x.tcount, x.scount, x.leader, x.members, x.id }), members });
         }
+       
         [ProducesDefaultResponseType]
         [HttpPost("get-course-list")]
-        [ApiToken(Auth = "5", Name = "获取课程列表信息", Limit = false)]
+        [ApiToken(Auth = "7", Name = "获取课程列表信息",RW ="R", Limit = false)]
         public async Task<IActionResult> GetCourseList(JsonElement json) {
             var client = _azureCosmos.GetCosmosClient();
             var (id, school) = HttpContext.GetApiTokenInfo();
@@ -234,5 +277,24 @@ namespace TEAMModelAPI.Controllers
             }
             return Ok(new { courses });
         }
+        [ProducesDefaultResponseType]
+        [HttpPost("get-course-info")]
+        [ApiToken(Auth = "8", Name = "课程详细信息", RW = "R", Limit = false)]
+        public async Task<IActionResult> GetCourseInfo(JsonElement json)
+        {
+            var (id, school) = HttpContext.GetApiTokenInfo();
+            json.TryGetProperty("courseId", out JsonElement courseId);
+            Azure.Response response = await _azureCosmos.GetCosmosClient().GetContainer(Constant.TEAMModelOS, "School")
+               .ReadItemStreamAsync($"{courseId}", new PartitionKey($"Course-{school}"));
+            if (response.Status == 200)
+            {
+                JsonDocument document= JsonDocument.Parse(response.Content);
+                Course course= document.RootElement.Deserialize<Course>();
+                return Ok(new { course.name,course.id, course.subject, course .period, course .scope, course.school, course .no, course .desc, course.schedule});
+            }
+            else {
+                return Ok(new { error=1,msg="课程不存在！"});
+            }
+        }
     }
 }

TEAMModelBI/ClientApp/src/router/index.js

@@ -18,14 +18,15 @@ const routes = [{
         path: "/home",
         name: "home",
         component: () => require.ensure([], (require) => require(`@/view/home.vue`)),
-        children: [{
-                name: "首页",
-                path: "/dashboard",
-                permission: "teacher-read|teacher-upd",
-                menuName: "teachermgmt",
-                isShow: true,
-                component: () => require.ensure([], (require) => require(`@/view/index/dashboard.vue`))
-            },
+        children: [
+            // {
+            //     name: "首页",
+            //     path: "/dashboard",
+            //     permission: "teacher-read|teacher-upd",
+            //     menuName: "teachermgmt",
+            //     isShow: true,
+            //     component: () => require.ensure([], (require) => require(`@/view/index/dashboard.vue`))
+            // },
             {
                 name: "人员管理",
                 path: "teach",

TEAMModelBI/ClientApp/src/view/common/aside.vue

@@ -98,6 +98,7 @@ const schoolMenus = [
 import { Location, Document, Menu as IconMenu, Setting } from '@element-plus/icons'
 import { getCurrentInstance, ref, watch, onMounted, reactive } from 'vue'
 import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 import router from '@/router/index.js'
 export default {
     components: {
@@ -114,6 +115,8 @@ export default {
         const isCollapse = ref(true)
         const store = useStore()
         const shenfen = ref('admin')
+        //路由
+        const routers = useRouter()
         let indexMenu = ref('1-0')
         let indexsinfo = ref()
         let lockState = ref(true)
@@ -176,8 +179,9 @@ export default {
             console.log(key, keyPath)
         }
         function routerskip(val) {
+            console.log(val, '跳转的')
             console.log(proxy)
-            router.push(val)
+            routers.push(val)
         }
         function mouseOver() {
             if (lockState.value) {
@@ -232,6 +236,7 @@ export default {
             lockicon,
             locksetting,
             indexMenu,
+            routers,
         }
     },
 }

TEAMModelBI/ClientApp/src/view/common/header.vue

@@ -123,7 +123,7 @@ export default {
 .header-icon {
     width: 1.2em;
     height: 1.2em;
-    vertical-align: -0.4em;
+    vertical-align: -0.3em;
     fill: currentColor;
     overflow: hidden;
     margin-right: 5px;

TEAMModelBI/ClientApp/src/view/index/dashboard.vue

@@ -148,7 +148,8 @@ export default {
         //处理url多余的参数内容
         let headerHost = window.location.href.split('/login?code')
         let zc = window.location.href.split('state=STATE')
-        window.history.pushState('', '', headerHost[0] + '/' + zc[1])
+        console.log(headerHost, zc, '内容')
+        headerHost[0] !== zc[0] ? window.history.pushState('', '', headerHost[0] + '/' + zc[1]) : ''
         //空间各类型数据(pie)
         let spaceTypsdata = ref({})
         //获取各市学校数量数据

TEAMModelBI/ClientApp/src/view/index/operateLog.vue

@@ -277,6 +277,9 @@ export default {
 .timeSelect {
     margin-left: 3%;
 }
+.exportFile {
+    margin-right: 1%;
+}
 </style>
 <style>
 .recordbox .el-table--fit {

TEAMModelBI/ClientApp/src/view/teachermanage/school.vue

@@ -233,12 +233,13 @@ export default {
         function getAllschool() {
             proxy.$api.getSchooldata({}).then((res) => {
                 console.log(res, '获取学校列表')
+                //处理关联管家  拼内容
                 for (let i in res.schoolAssists) {
                     if (res.schoolAssists[i].assists.length) {
                         res.schoolAssists[i].assisName = ''
                         let datas = res.schoolAssists[i].assists
                         for (let y in datas) {
-                            res.schoolAssists[i].assisName = res.schoolAssists[i].assisName + datas[y].tmdId + '-' + datas[y].tmdName + ','
+                            res.schoolAssists[i].assisName = res.schoolAssists[i].assisName + datas[y].tmdName + ','
                         }
                     }
                 }

TEAMModelOS/ClientApp/public/index.html

@@ -60,6 +60,7 @@
 			LoadJS("fabric", "0-public/js/fabric.min.js");
 			LoadJS("vueRouter", "0-public/js/vue-router.min.js");
 			LoadJS("echarts","0-public/js/echarts.js");
+			LoadJS("jspdf","0-public/js/jspdf.umd.min.js");
 		</script>
 	</head>
 	<body>

TEAMModelOS/ClientApp/src/api/studentWeb.js

@@ -311,4 +311,8 @@ export default {
     getStuInfo: function(data) {
         return post("/student/student-manage", data)
     },
+
+    getClassRecord: function(data) {
+        return post("/common/lesson-record/get-lesson-record", data)
+    }
 }

TEAMModelOS/ClientApp/src/boot-app.js

@@ -20,7 +20,6 @@ import jwtDecode from 'jwt-decode'
 import FileSaver from "file-saver";
 import JSONPath from 'jsonpath'
 import GLOBAL from '@/static/Global.js'
-import BaseChangeLine from '@/components/student-analysis/total/BaseChangeLine.vue'
 // import echarts from 'echarts'
 import vuescroll from 'vuescroll/dist/vuescroll-native'
 import { Tree, Cascader } from 'element-ui' // 按需引入element Tree组件

TEAMModelOS/ClientApp/src/components/student-web/ClassRecord/ClassRecord.vue

@@ -246,39 +246,21 @@ export default {
         }
     },
     created () {
-        console.log(this.$route.query.id);
-        this.recordInfo = 
-        {
-            "id": "256246355239899136",
-            "tmdid": "教师醍摩豆id",
-            "scope": "private/school",
-            "school": "学校id",
-            "name": "语文第一节",
-            "poster": "视频封面地址",
-            "startTime": 1607435663434, //开始时间(时间戳),
-            "duration": 5612, //"上课时长",
-            "tScore": 95, //"t分，科技应用",
-            "pScore": 95, //"p分，教法应用",
-            "courseId": "关联的课程id,同时可以拿到，学段id，科目id",
-            "groupIds": ["选用了IES5固定名单的id,通过名单id也可以拿到学段，年级"],
-            "periodId": "学段id",
-            "subject": "科目id",
-            "grade": ["1，年级"],
-            "like": 10, //"点赞数",
-            "share": 10, //"分享转发数",
-            "mCount": 50, //"参加本次课堂学生人数"
-            "discuss": 100, //"议课次数，大于1则是优课",
+        this.recordInfo = this.$route.params.record
+        if(!this.recordInfo) {
+            this.$router.go(-1)
+        } else {
+            this.recordInfo.startTime = this.dateFormat(this.recordInfo.startTime)
+            let sec = this.recordInfo.duration % 60
+            let min = parseInt(this.recordInfo.duration / 60)
+            let mins = min >= 60 ? min % 60 : min
+            let hour = parseInt(min / 60)
+            this.recordInfo.time = `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
+            this.getPageList()
         }
-        this.recordInfo.startTime = this.dateFormat(this.recordInfo.startTime)
-        let sec = this.recordInfo.duration % 60
-        let min = parseInt(this.recordInfo.duration / 60)
-        let mins = min >= 60 ? min % 60 : min
-        let hour = parseInt(min / 60)
-        this.recordInfo.time = `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
     },
     mounted () {
         // this.getVideo()
-        this.getPageList()
     },
     methods: {
         getVideo() {
@@ -346,11 +328,11 @@ export default {
         async getPageList() {
             this.pageList = []
             this.markers = []
-            let sas = await this.$tools.getBlobSas("1528783259")
+            let sas = await this.$tools.getBlobSas(this.recordInfo.tmdid)
             this.recordInfo.sokrateImg = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Sokrates/SokratesResults/event.png?${sas.sas}`
             this.recordInfo.eNote = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Note.pdf?${sas.sas}`
             // 如果只会存在一个视频，文件名是否可以固定？
-            this.playerOptions.sources[0].src = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Record/Record_Core_2021-12-08_103133.mp4?${sas.sas}`
+            this.playerOptions.sources[0].src = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Record/CourseRecord.mp4?${sas.sas}`
             let url = `${sas.url}/${sas.name}/records/${this.recordInfo.id}/Sokrates/SokratesRecords.json?${sas.sas}`
             this.$tools.getFile(url).then(
                 res => {

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventContentTypeTemplate/LessonTestReport.vue

@@ -437,21 +437,23 @@
                 this.repairSource = source
             },
             showTest() {
-                this.$router.push({
-                    name: "eventView/evaluation",
-                    /* params: {
-                        papers: this.paperInfo
-                    } */
-                })
-                if (this.examInfo.subject) {
-                    if(this.testState != 1) {
-                        if(this.rightAns.wrong > 0) {
+                if(this.testState === 1 || this.rightAns.wrong) {
+                    this.$router.push({
+                        name: "eventView/evaluation",
+                        /* params: {
+                            papers: this.paperInfo
+                        } */
+                    })
+                    if (this.examInfo.subject) {
+                        if(this.testState != 1) {
+                            if(this.rightAns.wrong > 0) {
+                                this.$store.commit("ToggleLessonTestPopWithSubject", this.examInfo)
+                                localStorage.setItem("subjectNow", encodeURIComponent(JSON.stringify(this.examInfo)))
+                            }
+                        } else {
                             this.$store.commit("ToggleLessonTestPopWithSubject", this.examInfo)
                             localStorage.setItem("subjectNow", encodeURIComponent(JSON.stringify(this.examInfo)))
                         }
-                    } else {
-                        this.$store.commit("ToggleLessonTestPopWithSubject", this.examInfo)
-                        localStorage.setItem("subjectNow", encodeURIComponent(JSON.stringify(this.examInfo)))
                     }
                 }
             },

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventContentTypeTemplate/QuesNaireReportCharts/BasicInfoPieChart.vue

@@ -1,150 +1,163 @@
 <template>
+<!-- 问卷页面的基本数据 -->
     <div class="basicinfo-piechart">
-        <div class="qnum-text">有效參與人數：<span class='qnum'>{{335+310+234}} / {{335+310+234+10}}</span>人</div>
-    <PieChart :option="option" />
-    <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
-    {{this.$data.option.series[0].data[1].value}}-->
-  </div>
+        <div class="qnum-text">
+            有效參與人數：
+            <span class="qnum">{{ 335 + 310 + 234 }} / {{ 335 + 310 + 234 + 10 }}</span>
+            人
+        </div>
+        <div id="basicinfoPiechart"></div>
+        <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
+        {{this.$data.option.series[0].data[1].value}}-->
+    </div>
 </template>
 
 <script>
-import { PieChart } from "dr-vue-echarts";
 export default {
-    name:"BasicInfoPieChart",
-    components: {
-    [PieChart.name]: PieChart,
-  },
-     data() {
-    return {
-      option: {
-        label: {
-          position: "inside",
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{b} : {c} ({d}%)",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-        },
-        legend: {
-          bottom: "10px",
-
-          data: [
-            "一年級",
-            "二年級",
-            "三年級"],
-          
-          textStyle: {
-            color: "black",
-          },
-        },
-
-        series: [
-          {
-            type: "pie",
-            radius: "70%",
-            top: "10%",
-            bottom: "20%",
-            center: ["50%", "60%"],
-            itemStyle: {
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-              shadowBlur: 10,
-              shadowOffsetY: 3,
-            },
-            data: [
-              {
-                value: 335,
-                name: '一年級',
-                itemStyle: { color: "#00AD6C" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-              {
-                value: 310,
-                name: '二年級',
-                itemStyle: { color: "#006841" },
+    name: "BasicInfoPieChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setEcharts()
+    },
+    methods: {
+        setEcharts() {
+            let myPie = this.$echarts.init(document.getElementById("basicinfoPiechart"))
+            let option = {
                 label: {
-                  show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
+                    position: "inside",
                 },
-              },
-              {
-                value: 234,
-                name: '三年級',
-                itemStyle: { color: "#003E27" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b} : {c} ({d}%)",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
                 },
-                labelLine: {
-                  show: false,
+                legend: {
+                    bottom: "10px",
+                    data: ["一年級", "二年級", "三年級"],
+                    textStyle: {
+                        color: "black",
+                    },
                 },
-              },
-             
-            ],
-            emphasis: {
-              label: {
-                show: true,
-                formatter: "{b}: {d}%",
-                fontWeight: "bold",
-                color: "black",
-              },
-              labelLine: {
-                show: false,
-              },
-              itemStyle: {
-                color: "#FA6400",
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
-
+                series: [
+                    {
+                        type: "pie",
+                        radius: "70%",
+                        top: "10%",
+                        bottom: "20%",
+                        center: ["50%", "60%"],
+                        itemStyle: {
+                            shadowColor: "rgba(0, 0, 0, 0.5)",
+                            shadowBlur: 10,
+                            shadowOffsetY: 3,
+                        },
+                        data: [
+                            {
+                                value: 335,
+                                name: "一年級",
+                                itemStyle: { color: "#00AD6C" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 310,
+                                name: "二年級",
+                                itemStyle: { color: "#006841" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 234,
+                                name: "三年級",
+                                itemStyle: { color: "#003E27" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                        ],
+                        emphasis: {
+                            label: {
+                                show: true,
+                                formatter: "{b}: {d}%",
+                                fontWeight: "bold",
+                                color: "black",
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                            itemStyle: {
+                                color: "#FA6400",
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: "rgba(0, 0, 0, 0.5)",
+                            },
+                        },
+                    },
+                ],
+            }
+            myPie.setOption(option)
+        },
+    }
 }
 </script>
 
 <style scoped>
-.basicinfo-piechart{
-  width: 100%;
-    margin:auto;
-  max-width: 500px;
-  padding: 15px 40px 0px 40px;
-  margin-bottom: 50px;
-  height: 320px;
-  color: rgba(0, 0, 0, 0.726);
-  position: relative;
+.basicinfo-piechart {
+    width: 100%;
+    margin: auto;
+    max-width: 500px;
+    padding: 15px 40px 0px 40px;
+    margin-bottom: 50px;
+    height: 320px;
+    color: rgba(0, 0, 0, 0.726);
+    position: relative;
 }
-.qnum-text{
-  position: absolute;
-  font-weight: bolder;
-  right: 20px;
-  
+.qnum-text {
+    position: absolute;
+    font-weight: bolder;
+    right: 20px;
 }
 .qnum {
-  font-size: 20px;
+    font-size: 20px;
 }
 </style>

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventContentTypeTemplate/QuesNaireReportCharts/QuesPieChart.vue

@@ -1,153 +1,169 @@
 <template>
     <div class="ques-piechart">
-
-    <PieChart :option="option" />
-    <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
-    {{this.$data.option.series[0].data[1].value}}-->
-  </div>
+        <div id="quesPiechart"></div>
+        <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
+        {{this.$data.option.series[0].data[1].value}}-->
+    </div>
 </template>
 
 <script>
-import { PieChart } from "dr-vue-echarts";
 export default {
-    name:"BasicInfoPieChart",
-    components: {
-    [PieChart.name]: PieChart,
-  },
-     data() {
-    return {
-      option: {
-        label: {
-          position: "inside",
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{b} : {c} ({d}%)",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-        },
-        
-
-        series: [
-          {
-            type: "pie",
-            radius: "70%",
-            top: "10%",
-            bottom: "20%",
-            center: ["50%", "60%"],
-            itemStyle: {
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-              shadowBlur: 10,
-              shadowOffsetY: 3,
-            },
-            data: [
-              {
-                value: 335,
-                name: '幽默風趣',
-                itemStyle: { color: "#00AD6C" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-              {
-                value: 310,
-                name: '善用科技',
-                itemStyle: { color: "#006841" },
+    name: "BasicInfoPieChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setPie()
+    },
+    methods: {
+        setPie() {
+            let myPie = this.$echarts.init(document.getElementById("quesPiechart"))
+            let option = {
                 label: {
-                  show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
+                    position: "inside",
                 },
-                labelLine: {
-                  show: false,
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b} : {c} ({d}%)",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
                 },
-              },
-              {
-                value: 234,
-                name: '作業設計',
-                itemStyle: { color: "#003E27" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-              {
-                value: 238,
-                name: '課堂互動',
-                itemStyle: { color: "#24b880" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-             
-            ],
-            emphasis: {
-              label: {
-                show: true,
-                formatter: "{b}: {d}%",
-                fontWeight: "bold",
-                color: "black",
-              },
-              labelLine: {
-                show: false,
-              },
-              itemStyle: {
-                color: "#FA6400",
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
 
+                series: [
+                    {
+                        type: "pie",
+                        radius: "70%",
+                        top: "10%",
+                        bottom: "20%",
+                        center: ["50%", "60%"],
+                        itemStyle: {
+                            shadowColor: "rgba(0, 0, 0, 0.5)",
+                            shadowBlur: 10,
+                            shadowOffsetY: 3,
+                        },
+                        data: [
+                            {
+                                value: 335,
+                                name: "幽默風趣",
+                                itemStyle: { color: "#00AD6C" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 310,
+                                name: "善用科技",
+                                itemStyle: { color: "#006841" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 234,
+                                name: "作業設計",
+                                itemStyle: { color: "#003E27" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 238,
+                                name: "課堂互動",
+                                itemStyle: { color: "#24b880" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                        ],
+                        emphasis: {
+                            label: {
+                                show: true,
+                                formatter: "{b}: {d}%",
+                                fontWeight: "bold",
+                                color: "black",
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                            itemStyle: {
+                                color: "#FA6400",
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: "rgba(0, 0, 0, 0.5)",
+                            },
+                        },
+                    },
+                ],
+            }
+            myPie.setOption(option)
+        },
+    }
 }
 </script>
 
 <style scoped>
-.ques-piechart{
-  width: 100%;
-  max-width: 500px;
-  margin:auto;
-  padding: 15px 40px 0px 40px;
-  margin-bottom: 50px;
-  height: 320px;
-  color: rgba(0, 0, 0, 0.726);
-  position: relative;
+.ques-piechart {
+    width: 100%;
+    max-width: 500px;
+    margin: auto;
+    padding: 15px 40px 0px 40px;
+    margin-bottom: 50px;
+    height: 320px;
+    color: rgba(0, 0, 0, 0.726);
+    position: relative;
 }
-.qnum-text{
-  position: absolute;
-  font-weight: bolder;
-  right: 20px;
-  
+.qnum-text {
+    position: absolute;
+    font-weight: bolder;
+    right: 20px;
 }
 .qnum {
-  font-size: 20px;
+    font-size: 20px;
 }
 </style>

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventContentTypeTemplate/QuesNaireReportCharts/QueslineChart.vue

@@ -1,128 +1,136 @@
 <template>
-  <div class='ques-lineChart'>
-       <BarChart :option="option" />
-  </div>
+    <div class="ques-lineChart">
+        <div id="quesLineChart"></div>
+    </div>
 </template>
 
 <script>
-import { BarChart } from "dr-vue-echarts";
-import { Random } from "mockjs";
+import { Random } from "mockjs"
 export default {
-    name:"QueslineChart",
-    components: {
-    [BarChart.name]: BarChart
-  },
-   data() {
-    return {
-      option: {
-        title: {
-          text: ""
-        },
-        tooltip: {
-          trigger: "item",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder"
-          },
-          formatter: localStorage.getItem('lang')=='tw'?'{b0}: <span class="studyhrs">{c0}</span>人':'PR {b0}%: <span class="studyhrs">{c0} </span> students'
-        },
-        grid: {
-          top: "20%",
-          left: "6%",
-          right: "12%",
-          bottom: "18%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: ["甲等", "乙等", "丙等", "丁等", "戊等", "己等"],
-          splitLine: {
-            lineStyle: {
-              color: "transparent"
-            }
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2
+    name: "QueslineChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setBar()
+    },
+    methods: {
+        setBar() {
+            let myBar = this.$echarts.init(document.getElementById("quesLineChart"))
+            let option = {
+                title: {
+                    text: "",
+                },
+                tooltip: {
+                    trigger: "item",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                    formatter:
+                        localStorage.getItem("lang") == "tw"
+                            ? '{b0}: <span class="studyhrs">{c0}</span>人'
+                            : 'PR {b0}%: <span class="studyhrs">{c0} </span> students',
+                },
+                grid: {
+                    top: "20%",
+                    left: "6%",
+                    right: "12%",
+                    bottom: "18%",
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: "category",
+                    data: ["甲等", "乙等", "丙等", "丁等", "戊等", "己等"],
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    show: true,
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                emphasis: {
+                    itemStyle: {
+                        color: "#FA6400", //高亮
+                    },
+                },
+                barCategoryGap: "1px",
+                series: [
+                    {
+                        data: [
+                            {
+                                value: Random.natural(1, 20),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(20, 25),
+                                itemStyle: { color: "#008352" },
+                            },
+                            {
+                                value: Random.natural(20, 25),
+                                itemStyle: { color: "#008352" },
+                            },
+                            {
+                                value: Random.natural(25, 30),
+                                itemStyle: { color: "rgb(0, 62, 39)" },
+                            },
+                            {
+                                value: Random.natural(1, 20),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(1, 20),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(1, 20),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                        ],
+                        type: "bar",
+                    },
+                ],
             }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          }
-        },
-        yAxis: {
-          type: "value",
-          show: true,
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "transparent"
-            }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          }
-        },
-        emphasis: {
-          itemStyle: {
-            color: "#FA6400" //高亮
-          }
+            myBar.setOption(option)
         },
-        barCategoryGap: "1px",
-        series: [
-          {
-            data: [
-              {
-                value: Random.natural(1, 20),
-                itemStyle: { color: "#00AD6C" }
-              },
-              {
-                value: Random.natural(20, 25),
-                itemStyle: { color: "#008352" }
-              },
-              {
-                value: Random.natural(20, 25),
-                itemStyle: { color: "#008352" }
-              },
-              {
-                value: Random.natural(25, 30),
-                itemStyle: { color: "rgb(0, 62, 39)" }
-              },
-              {
-                value: Random.natural(1, 20),
-                itemStyle: { color: "#00AD6C" }
-              },
-              {
-                value: Random.natural(1, 20),
-                itemStyle: { color: "#00AD6C" }
-              },
-              {
-                value: Random.natural(1, 20),
-                itemStyle: { color: "#00AD6C" }
-              }
-            ],
-            type: "bar"
-          }
-        ]
-      }
-    };
-  }
+    }
 }
 </script>
 
 <style scoped>
-.ques-lineChart{
-      margin:auto;
+.ques-lineChart {
+    margin: auto;
     width: 100%;
     max-width: 500px;
     padding: 15px 40px 0px 40px;
-     height: 420px;
+    height: 420px;
 }
 </style>

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventOverView/EventFinishedNumChart.vue

@@ -1,136 +1,148 @@
 <template>
-  <div class="event-finished-num-chart">
-      <LineChart :option="option" />
-  </div>
+    <div class="event-finished-num-chart">
+        <div id="eventFinishedNumChart"></div>
+    </div>
 </template>
 
 <script>
-import { Random } from "mockjs";
-import { LineChart } from "dr-vue-echarts";
+import { Random } from "mockjs"
 export default {
-  name: "EventFinishedNumChart",
-  components: {
-    [LineChart.name]: LineChart
-  },
-  methods: {
-    RandomData() {
-      var thedataArray = [];
-      for (var i = 0; i <= 6; i++) {
-        thedataArray.push(Random.natural(0, 10));
-      }
-      return thedataArray;
-    }
-  },
-  data() {
-    return {
-        option: {
-        title: {
-          text: "最近七日完成活動數"
-        },
-        xAxis: {
-          type: "category",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "gray"
-            }
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2
-            }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          },
-          boundaryGap: false,
-          data: ["5/21","5/22", "5/23", "5/24", "5/25", "5/26","5/27"]
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            lineStyle: {
-              color: "gray"
+    name: "EventFinishedNumChart",
+    methods: {
+        RandomData() {
+            var thedataArray = []
+            for (var i = 0; i <= 6; i++) {
+                thedataArray.push(Random.natural(0, 10))
             }
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2
-            }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          }
-        },
-        tooltip: {
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder"
-          },
-          formatter:
-            "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> 項活動" //修改tooltip模板變量
+            return thedataArray
         },
-        series: [
-          {
-            data: this.RandomData(),
-            type: "line",
-            //處理線上的點點
-            symbol: "roundRect",
-            symbolSize: [10, 10],
-            itemStyle: {
-              color: "#29856C"
-            },
-            //處理線上的點點
-            smooth: true,
-            lineStyle: {
-              color: "#29856C"
-            },
-            areaStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#24B880" // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.6,
-                    color: "#24B880" // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "white" // 100% 处的颜色
-                  }
+    },
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setLine()
+    },
+    methods: {
+        setLine() {
+            let myLine = this.$echarts.init(document.getElementById("eventFinishedNumChart"))
+            let option = {
+                title: {
+                    text: "最近七日完成活動數",
+                },
+                xAxis: {
+                    type: "category",
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "gray",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                    boundaryGap: false,
+                    data: [
+                        "5/21",
+                        "5/22",
+                        "5/23",
+                        "5/24",
+                        "5/25",
+                        "5/26",
+                        "5/27",
+                    ],
+                },
+                yAxis: {
+                    type: "value",
+                    splitLine: {
+                        lineStyle: {
+                            color: "gray",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                tooltip: {
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                    formatter:
+                        "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> 項活動", //修改tooltip模板變量
+                },
+                series: [
+                    {
+                        data: this.RandomData(),
+                        type: "line",
+                        //處理線上的點點
+                        symbol: "roundRect",
+                        symbolSize: [10, 10],
+                        itemStyle: {
+                            color: "#29856C",
+                        },
+                        //處理線上的點點
+                        smooth: true,
+                        lineStyle: {
+                            color: "#29856C",
+                        },
+                        areaStyle: {
+                            color: {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: "#24B880", // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 0.6,
+                                        color: "#24B880", // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "white", // 100% 处的颜色
+                                    },
+                                ],
+                                global: false, // 缺省为 false
+                            },
+                        },
+                    },
                 ],
-                global: false // 缺省为 false
-              }
             }
-          }
-        ]
-      }
-    
-    };
-  }
-};
+            myLine.setOption(option)
+        },
+    }
+}
 </script>
 
 <style scoped>
-.event-finished-num-chart{
+.event-finished-num-chart {
     width: 100%;
     height: 320px;
-    margin-bottom:20px;
+    margin-bottom: 20px;
 }
 </style>

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventOverView/EventTypeNotFinishedChart.vue

@@ -1,123 +1,127 @@
 <template>
-  <div class='event-type-not-finished-chart'>
-       <BarChart :option="option" />
-  </div>
+    <div class="event-type-not-finished-chart">
+        <div id="eventTypeNotFinishedChart"></div>
+    </div>
 </template>
 
 <script>
-import { BarChart } from "dr-vue-echarts";
 export default {
-    name:'EventTypeNotFinishedChart',
-     components: {
-    [BarChart.name]: BarChart
-  },
+    name: "EventTypeNotFinishedChart",
     data() {
-    return {
-      option: {
-        title: {
-          text: "各類任務未完成數概覽"
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-          },
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder"
-          }
-        },
-        legend: {
-          z: 7,
-          bottom: "10px",
-          textStyle: {
-            color: "black"
-          }
-        },
-        grid: {
-          left: "5%",
-          right: "5%",
-          bottom: "20%",
-          containLabel: true
-        },
-        yAxis: {
-          type: "value",
-          //座標軸線的設置
-          splitLine: {
-            lineStyle: {
-              color: "transparent"
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2
-            }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          }
-        },
-        xAxis: {
-          type: "category",
-          data: ["課前預習", "評量", "作業", "投票"],
-          splitLine: {
-            lineStyle: {
-              color: "transparent"
-            }
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2
+        return {
+        }
+    },
+    mounted () {
+        this.setBar()
+    },
+    methods: {
+        setBar() {
+            let myBar = this.$echarts.init(document.getElementById("eventTypeNotFinishedChart"))
+            let option = {
+                title: {
+                    text: "各類任務未完成數概覽",
+                },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                },
+                legend: {
+                    z: 7,
+                    bottom: "10px",
+                    textStyle: {
+                        color: "black",
+                    },
+                },
+                grid: {
+                    left: "5%",
+                    right: "5%",
+                    bottom: "20%",
+                    containLabel: true,
+                },
+                yAxis: {
+                    type: "value",
+                    //座標軸線的設置
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    data: ["課前預習", "評量", "作業", "投票"],
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                series: [
+                    {
+                        name: "完成",
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                        },
+                        data: [32, 30, 42, 36],
+                        itemStyle: { color: "rgb(20, 139, 99)" },
+                    },
+                    {
+                        name: "未完成",
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                        },
+                        data: [12, 13, 10, 5],
+                        itemStyle: { color: "rgb(147, 146, 145)" },
+                    },
+                ],
             }
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black"
-          }
+            myBar.setOption(option)
         },
-        series: [
-          {
-            name: "完成",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft"
-            },
-            data: [32, 30, 42, 36],
-            itemStyle: { color: "rgb(20, 139, 99)" }
-          },
-          {
-            name: "未完成",
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft"
-            },
-            data: [12, 13, 10, 5],
-            itemStyle: { color: "rgb(147, 146, 145)" }
-          },
-         
-        ]
-      }
-    };
-  }
+    }
 }
 </script>
 
 <style scoped>
-.event-type-not-finished-chart{
+.event-type-not-finished-chart {
     width: 100%;
     height: 320px;
-    margin-bottom:20px;
+    margin-bottom: 20px;
 }
 </style>

TEAMModelOS/ClientApp/src/components/student-web/EventView/PreviewProgressPie.vue

@@ -1,105 +1,115 @@
 <template>
-  <div class="preview-progress-pie">
-    <PieChart :option="option" />
+    <div class="preview-progress-pie">
+        <div id="previewProgressPie"></div>
 
-    {{ finishedValue()}}
-  </div>
+        {{ finishedValue() }}
+    </div>
 </template>
 
 <script>
-import { PieChart } from "dr-vue-echarts";
-import { Random } from "mockjs";
+import { Random } from "mockjs"
 export default {
-  name: "PreviewProgressPie",
-  components: {
-    [PieChart.name]: PieChart,
-  },
-  props: ["itemID"],
-  mounted() {
-    this.option.series[0].data[0].value = Random.integer(60, 100);
-    this.option.series[0].data[1].value = Random.integer(60, 100);
-  },
-  methods: {
-    finishedValue() {
-      if (this.$store.getters.getItemTitle.eventID == this.itemID) {
-        if (this.$store.getters.getItemTitle.eventType == "preview") {
-          this.option.series[0].data[0].value =
-            this.$store.getters.getCurrentPassPhaseTest * 33;
-          this.option.series[0].data[1].value =
-            100 - this.$store.getters.getCurrentPassPhaseTest * 33;
-        }
-        else if(this.$store.getters.getItemTitle.eventType == "exam"){
-          console.log(this.$store.getters.getCurrentfinishedSubject.length*33)
-           this.option.series[0].data[0].value = this.$store.getters.getCurrentfinishedSubject.length*33;
-            this.option.series[0].data[1].value =
-            100 - this.$store.getters.getCurrentfinishedSubject.length*33;
-
+    name: "PreviewProgressPie",
+    props: ["itemID"],
+    mounted() {
+        this.option.series[0].data[0].value = Random.integer(60, 100)
+        this.option.series[0].data[1].value = Random.integer(60, 100)
+    },
+    data() {
+        return {
         }
-      }
     },
-  },
-  data() {
-    return {
-      option: {
-        tooltip: {
-          show: false,
-          trigger: "none",
-        },
-        legend: {
-          show: false,
-        },
-        series: [
-          {
-            //name: "访问来源",
-            type: "pie",
-            radius: ["50%", "70%"],
-            avoidLabelOverlap: false,
-            hoverAnimation: false,
-
-            labelLine: {
-              show: false,
-            },
-            data: [
-              {
-                value: 0,
-                name: "完成",
-                itemStyle: {
-                  color: "#24B880",
-                },
-                emphasis: {
-                  itemStyle: {
-                    color: "#24B880",
-                  },
-                },
-                label: {
-                  color: "#575757",
-                  position: "center",
-                  fontSize: "12",
-                  fontWeight: "bold",
-                  formatter: function (data) {
-                    return data.percent.toFixed(0) + "%";
-                  },
-                },
-              },
-              {
-                value: 0,
-                name: "未完成",
-                itemStyle: {
-                  color: "#848484",
+    mounted () {
+        this.setPie()
+    },
+    methods: {
+        setPie() {
+            let myPie = this.$echarts.init(document.getElementById("previewProgressPie"))
+            let option = {
+                tooltip: {
+                    show: false,
+                    trigger: "none",
                 },
-                emphasis: {
-                  itemStyle: {
-                    color: "#848484",
-                  },
+                legend: {
+                    show: false,
                 },
-              },
-            ],
-          },
-        ],
-      },
-    };
-  },
-};
+                series: [
+                    {
+                        //name: "访问来源",
+                        type: "pie",
+                        radius: ["50%", "70%"],
+                        avoidLabelOverlap: false,
+                        hoverAnimation: false,
+
+                        labelLine: {
+                            show: false,
+                        },
+                        data: [
+                            {
+                                value: 0,
+                                name: "完成",
+                                itemStyle: {
+                                    color: "#24B880",
+                                },
+                                emphasis: {
+                                    itemStyle: {
+                                        color: "#24B880",
+                                    },
+                                },
+                                label: {
+                                    color: "#575757",
+                                    position: "center",
+                                    fontSize: "12",
+                                    fontWeight: "bold",
+                                    formatter: function (data) {
+                                        return data.percent.toFixed(0) + "%"
+                                    },
+                                },
+                            },
+                            {
+                                value: 0,
+                                name: "未完成",
+                                itemStyle: {
+                                    color: "#848484",
+                                },
+                                emphasis: {
+                                    itemStyle: {
+                                        color: "#848484",
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            }
+            myPie.setOption(option)
+        },
+        finishedValue() {
+            if (this.$store.getters.getItemTitle.eventID == this.itemID) {
+                if (this.$store.getters.getItemTitle.eventType == "preview") {
+                    this.option.series[0].data[0].value =
+                        this.$store.getters.getCurrentPassPhaseTest * 33
+                    this.option.series[0].data[1].value =
+                        100 - this.$store.getters.getCurrentPassPhaseTest * 33
+                } else if (
+                    this.$store.getters.getItemTitle.eventType == "exam"
+                ) {
+                    console.log(
+                        this.$store.getters.getCurrentfinishedSubject.length *
+                            33
+                    )
+                    this.option.series[0].data[0].value =
+                        this.$store.getters.getCurrentfinishedSubject.length *
+                        33
+                    this.option.series[0].data[1].value =
+                        100 -
+                        this.$store.getters.getCurrentfinishedSubject.length *
+                            33
+                }
+            }
+        },
+    },
+}
 </script>
 
 <style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/ChartCarousel.vue

@@ -1,132 +1,129 @@
 <template>
-  <div class="chart-carousel">
-    <div class="chart-carousel-title">
-      <svg-icon class="titleIcon" icon-class="performance" />
-      <span class="title">{{$t(`studentWeb.chartNames[${value1}]`)}}</span>
-    </div>
-    <Carousel
-      v-model="value1"
-      :autoplay="setting.autoplay"
-      :dots="setting.dots"
-      :radius-dot="setting.radiusDot"
-      :trigger="setting.trigger"
-      :arrow="setting.arrow"
-    >
-      <CarouselItem class="demo-carousel">
-        <StudyTimeChart/>
-      </CarouselItem>
-      <CarouselItem class="demo-carousel">
-        <SplineAreaChart/>
-      </CarouselItem>
-      <CarouselItem class="demo-carousel">
-        <StackBarChart/>
-      </CarouselItem>
-      <!--CarouselItem class="demo-carousel">
+    <div class="chart-carousel">
+        <div class="chart-carousel-title">
+            <svg-icon class="titleIcon" icon-class="performance" />
+            <span class="title">{{
+                $t(`studentWeb.chartNames[${value1}]`)
+            }}</span>
+        </div>
+        <Carousel
+            v-model="value1"
+            :autoplay="setting.autoplay"
+            :dots="setting.dots"
+            :radius-dot="setting.radiusDot"
+            :trigger="setting.trigger"
+            :arrow="setting.arrow"
+        >
+            <CarouselItem class="demo-carousel">
+                <StudyTimeChart />
+            </CarouselItem>
+            <CarouselItem class="demo-carousel">
+                <SplineAreaChart />
+            </CarouselItem>
+            <CarouselItem class="demo-carousel">
+                <StackBarChart />
+            </CarouselItem>
+            <!--CarouselItem class="demo-carousel">
         <div id="chart2">
           <apexchart type="pie" :options="chartOptions" :series="series"></apexchart>
         </div>
       </CarouselItem-->
-      <CarouselItem class="demo-carousel">
-        <TwoLineChart/>
-      </CarouselItem>
-      <CarouselItem class="demo-carousel">
-        <EventPieChart/>
-      </CarouselItem>
-      <CarouselItem class="demo-carousel">
-        <StudyHeatMap/>
-      </CarouselItem>
-    </Carousel>
-  </div>
+            <CarouselItem class="demo-carousel">
+                <TwoLineChart />
+            </CarouselItem>
+            <CarouselItem class="demo-carousel">
+                <EventPieChart />
+            </CarouselItem>
+            <CarouselItem class="demo-carousel">
+                <StudyHeatMap />
+            </CarouselItem>
+        </Carousel>
+    </div>
 </template>
 
 <script>
-import StudyTimeChart from "./StudyTimeChart";
-import EventPieChart from "./EventPieChart";
-import TwoLineChart from "./TwoLineChart";
-import StackBarChart from "./StackBarChart";
-import SplineAreaChart from "./SplineAreaChart";
+import StudyTimeChart from "./StudyTimeChart"
+import EventPieChart from "./EventPieChart"
+import TwoLineChart from "./TwoLineChart"
+import StackBarChart from "./StackBarChart"
+import SplineAreaChart from "./SplineAreaChart"
 //import VueApexCharts from "vue-apexcharts";
-import { BarChart } from "dr-vue-echarts";
-import StudyHeatMap from "./StudyHeatMap";
+import StudyHeatMap from "./StudyHeatMap"
 export default {
-  name: "ChartCarousel",
-  components: {
-    [BarChart.name]: BarChart,
-    //apexchart: VueApexCharts,
-    SplineAreaChart,
-    StackBarChart,
-    TwoLineChart,
-    EventPieChart,
-    StudyHeatMap,
-    StudyTimeChart,
-  },
-  data() {
-    return {
-      value1: 0,
-      chartNames: [
-        "平均自學時間",
-        "本學期每月自學時數曲線",
-        "上月我與年級的活動參與數比較",
-        "每日平均自學時間與全年級比較圖",
-        "本月各類活動任務參與時間佔比",
-        "自學活躍度",
-      ],
-      setting: {
-        autoplay: false,
-        dots: "outside",
-        radiusDot: true,
-        trigger: "click",
-        //arrow: "always"
-      },
-      data: [
-        {
-          name: "学生人数",
-          data: [
-            {
-              label: "2018",
-              value: 45,
-            },
-            {
-              label: "2019",
-              value: 60,
+    name: "ChartCarousel",
+    components: {
+        //apexchart: VueApexCharts,
+        SplineAreaChart,
+        StackBarChart,
+        TwoLineChart,
+        EventPieChart,
+        StudyHeatMap,
+        StudyTimeChart,
+    },
+    data() {
+        return {
+            value1: 0,
+            chartNames: [
+                "平均自學時間",
+                "本學期每月自學時數曲線",
+                "上月我與年級的活動參與數比較",
+                "每日平均自學時間與全年級比較圖",
+                "本月各類活動任務參與時間佔比",
+                "自學活躍度",
+            ],
+            setting: {
+                autoplay: false,
+                dots: "outside",
+                radiusDot: true,
+                trigger: "click",
+                //arrow: "always"
             },
-          ],
-        },
-      ],
-      //VueApexCharts, BarChart
-      series: [44, 55, 13],
-      chartOptions: {
-        chart: {
-          width: 380,
-          type: "pie",
-        },
-        labels: ["Team A", "Team B", "Team C"],
-        fill: {
-          colors: ["#F44336", "#E91E63", "#9C27B0"], //https://apexcharts.com/docs/colors/
-        },
-        responsive: [
-          {
-            breakpoint: 480,
-            options: {
-              chart: {
-                width: 200,
-              },
-              legend: {
-                position: "bottom",
-              },
+            data: [
+                {
+                    name: "学生人数",
+                    data: [
+                        {
+                            label: "2018",
+                            value: 45,
+                        },
+                        {
+                            label: "2019",
+                            value: 60,
+                        },
+                    ],
+                },
+            ],
+            //VueApexCharts, BarChart
+            series: [44, 55, 13],
+            chartOptions: {
+                chart: {
+                    width: 380,
+                    type: "pie",
+                },
+                labels: ["Team A", "Team B", "Team C"],
+                fill: {
+                    colors: ["#F44336", "#E91E63", "#9C27B0"], //https://apexcharts.com/docs/colors/
+                },
+                responsive: [
+                    {
+                        breakpoint: 480,
+                        options: {
+                            chart: {
+                                width: 200,
+                            },
+                            legend: {
+                                position: "bottom",
+                            },
+                        },
+                    },
+                ],
             },
-          },
-        ],
-      },
-      //VueApexCharts, BarChart End
-    };
-  },
-};
+            //VueApexCharts, BarChart End
+        }
+    },
+}
 </script>
 
 <style scoped>
-@import '~@/assets/student-web/component_styles/home-chart.less';
-
-
-
+@import "~@/assets/student-web/component_styles/home-chart.less";
 </style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/EventPieChart.vue

@@ -1,137 +1,166 @@
 <template>
-  <div class="event-pie-chart">
-    <PieChart :option="option" />
-    <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
+    <div class="event-pie-chart">
+        <div id="eventPieChart"></div>
+        <!--{{"getDataTest:"+this.$data.option.series[0].data[0].value+","}}
     {{this.$data.option.series[0].data[1].value}}-->
-  </div>
+    </div>
 </template>
 
 <script>
-import { PieChart } from "dr-vue-echarts";
 export default {
-  name: "EventPieChart",
-  components: {
-    [PieChart.name]: PieChart,
-  },
-  data() {
-    return {
-      option: {
-        label: {
-          position: "inside",
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{b} : {c} ({d}%)",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-        },
-        legend: {
-          bottom: "10px",
-
-          data: this.$t('studentWeb.eventPieChart.partType'),
-          textStyle: {
-            color: "black",
-          },
-        },
-
-        series: [
-          {
-            type: "pie",
-            radius: "70%",
-            top: "10%",
-            bottom: "20%",
-            center: ["50%", "60%"],
-            itemStyle: {
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-              shadowBlur: 10,
-              shadowOffsetY: 3,
-            },
-            data: [
-              {
-                value: 335,
-                name: this.$t('studentWeb.eventPieChart.partType[0]'),
-                itemStyle: { color: "#00AD6C" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-              {
-                value: 310,
-                name: this.$t('studentWeb.eventPieChart.partType[1]'),
-                itemStyle: { color: "#006841" },
+    name: "EventPieChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setPie()
+    },
+    methods: {
+        setPie() {
+            let myPie = this.$echarts.init(document.getElementById("eventPieChart"))
+            let option = {
                 label: {
-                  show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
+                    position: "inside",
                 },
-                labelLine: {
-                  show: false,
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b} : {c} ({d}%)",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
                 },
-              },
-              {
-                value: 234,
-                name: this.$t('studentWeb.eventPieChart.partType[2]'),
-                itemStyle: { color: "#003E27" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
-                },
-              },
-              {
-                value: 135,
-                name: this.$t('studentWeb.eventPieChart.partType[3]'),
-                itemStyle: { color: "#94DBC1" },
-                label: {
-                   show: window.innerWidth <= 1280&&window.innerWidth>=992 ? false : true,
-                  formatter: "{b}: {d}%",
-                  fontWeight: "bold",
-                  color: "black",
-                },
-                labelLine: {
-                  show: false,
+                legend: {
+                    bottom: "10px",
+
+                    data: this.$t("studentWeb.eventPieChart.partType"),
+                    textStyle: {
+                        color: "black",
+                    },
                 },
-              },
-            ],
-            emphasis: {
-              label: {
-                show: true,
-                formatter: "{b}: {d}%",
-                fontWeight: "bold",
-                color: "black",
-              },
-              labelLine: {
-                show: false,
-              },
-              itemStyle: {
-                color: "#FA6400",
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
-};
+
+                series: [
+                    {
+                        type: "pie",
+                        radius: "70%",
+                        top: "10%",
+                        bottom: "20%",
+                        center: ["50%", "60%"],
+                        itemStyle: {
+                            shadowColor: "rgba(0, 0, 0, 0.5)",
+                            shadowBlur: 10,
+                            shadowOffsetY: 3,
+                        },
+                        data: [
+                            {
+                                value: 335,
+                                name: this.$t(
+                                    "studentWeb.eventPieChart.partType[0]"
+                                ),
+                                itemStyle: { color: "#00AD6C" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 310,
+                                name: this.$t(
+                                    "studentWeb.eventPieChart.partType[1]"
+                                ),
+                                itemStyle: { color: "#006841" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 234,
+                                name: this.$t(
+                                    "studentWeb.eventPieChart.partType[2]"
+                                ),
+                                itemStyle: { color: "#003E27" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                            {
+                                value: 135,
+                                name: this.$t(
+                                    "studentWeb.eventPieChart.partType[3]"
+                                ),
+                                itemStyle: { color: "#94DBC1" },
+                                label: {
+                                    show:
+                                        window.innerWidth <= 1280 &&
+                                        window.innerWidth >= 992
+                                            ? false
+                                            : true,
+                                    formatter: "{b}: {d}%",
+                                    fontWeight: "bold",
+                                    color: "black",
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            },
+                        ],
+                        emphasis: {
+                            label: {
+                                show: true,
+                                formatter: "{b}: {d}%",
+                                fontWeight: "bold",
+                                color: "black",
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                            itemStyle: {
+                                color: "#FA6400",
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: "rgba(0, 0, 0, 0.5)",
+                            },
+                        },
+                    },
+                ],
+            }
+            myPie.setOption(option)
+        },
+    }
+}
 </script>
 
 <style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/SplineAreaChart.vue

@@ -1,137 +1,140 @@
 <template>
-  <div class="spline-area-chart">
-   
-      <LineChart :option="option" />
-   
-  </div>
+    <div class="spline-area-chart">
+        <div id="splineAreaChart"></div>
+    </div>
 </template>
 
 <script>
-import { Random } from "mockjs";
-import { LineChart } from "dr-vue-echarts";
+import { Random } from "mockjs"
 export default {
-  name: "SplineAreaChart",
-  components: {
-    [LineChart.name]: LineChart,
-  },
-  methods: {
-    RandomData() {
-      var thedataArray = [];
-      for (var i = 0; i <= 5; i++) {
-        thedataArray.push(Random.natural(20, 160));
-      }
-      return thedataArray;
-    },
-  },
-  data() {
-    return {
-      option: {
-        xAxis: {
-          type: "category",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "gray",
-            },
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-          boundaryGap: false,
-          data: this.$t('studentWeb.splineSreaChart.xAxisData'),
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            lineStyle: {
-              color: "gray",
-            },
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-        },
-        tooltip: {
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-          formatter:localStorage.getItem('lang')=='tw'?
-            "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> 小時": "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> hrs", //修改tooltip模板變量
+    name: "SplineAreaChart",
+    methods: {
+        RandomData() {
+            var thedataArray = []
+            for (var i = 0; i <= 5; i++) {
+                thedataArray.push(Random.natural(20, 160))
+            }
+            return thedataArray
         },
-        series: [
-          {
-            data: this.RandomData(),
-            type: "line",
-            //處理線上的點點
-            symbol: "roundRect",
-            symbolSize: [10, 10],
-            itemStyle: {
-              color: "#29856C",
-            },
-            //處理線上的點點
-            smooth: true,
-            lineStyle: {
-              color: "#29856C",
-            },
-            grid: {
-              left: "10%",
-              right: "20%",
-              bottom: "20%",
-              containLabel: true,
-            },
-            areaStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#24B880", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.6,
-                    color: "#24B880", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "white", // 100% 处的颜色
-                  },
+    },
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setLine()
+    },
+    methods: {
+        setLine() {
+            let myLine = this.$echarts.init(document.getElementById("splineAreaChart"))
+            let option = {
+                xAxis: {
+                    type: "category",
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "gray",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                    boundaryGap: false,
+                    data: this.$t("studentWeb.splineSreaChart.xAxisData"),
+                },
+                yAxis: {
+                    type: "value",
+                    splitLine: {
+                        lineStyle: {
+                            color: "gray",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                tooltip: {
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                    formatter:
+                        localStorage.getItem("lang") == "tw"
+                            ? "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> 小時"
+                            : "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> hrs", //修改tooltip模板變量
+                },
+                series: [
+                    {
+                        data: this.RandomData(),
+                        type: "line",
+                        //處理線上的點點
+                        symbol: "roundRect",
+                        symbolSize: [10, 10],
+                        itemStyle: {
+                            color: "#29856C",
+                        },
+                        //處理線上的點點
+                        smooth: true,
+                        lineStyle: {
+                            color: "#29856C",
+                        },
+                        grid: {
+                            left: "10%",
+                            right: "20%",
+                            bottom: "20%",
+                            containLabel: true,
+                        },
+                        areaStyle: {
+                            color: {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: "#24B880", // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 0.6,
+                                        color: "#24B880", // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "white", // 100% 处的颜色
+                                    },
+                                ],
+                                global: false, // 缺省为 false
+                            },
+                        },
+                    },
                 ],
-                global: false, // 缺省为 false
-              },
-            },
-          },
-        ],
-      },
-    };
-  },
-};
+            }
+            myLine.setOption(option)
+        },
+    }
+}
 </script>
 
 <style>
-
-
 </style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/StackBarChart.vue

@@ -1,140 +1,147 @@
 <template>
-  <div class="stack-bar-chart">
-    <BarChart :option="option" />
-    <h1 class="chartMonth">{{$t('studentWeb.stackBarChart.chartMon')}}</h1>
-  </div>
+    <div class="stack-bar-chart">
+        <div id="stackBarChart"></div>
+        <h1 class="chartMonth">
+            {{ $t("studentWeb.stackBarChart.chartMon") }}
+        </h1>
+    </div>
 </template>
 
 <script>
-import { BarChart } from "dr-vue-echarts";
 export default {
-  name: "StackBarChart",
-  components: {
-    [BarChart.name]: BarChart,
-  },
-  data() {
-    return {
-      option: {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-          },
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
+    name: "StackBarChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setBar()
+    },
+    methods: {
+        setBar() {
+            let myBar = this.$echarts.init(document.getElementById("stackBarChart"))
+            let option = {
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                },
+                legend: {
+                    z: 7,
+                    bottom: "0%",
+                    width: "70%",
+                    textStyle: {
+                        color: "black",
+                    },
+                },
+                grid: {
+                    left: "0%",
+                    right: "10%",
+                    bottom: "20%",
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: "value",
+                    //座標軸線的設置
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                yAxis: {
+                    type: "category",
+                    data: this.$t("studentWeb.stackBarChart.yAxisData"),
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                series: [
+                    {
+                        name: this.$t(`studentWeb.stackBarChart.stackType[0]`),
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                        },
+                        data: [320, 302, 301, 334],
+                        itemStyle: { color: "#006841" },
+                    },
+                    {
+                        name: this.$t(`studentWeb.stackBarChart.stackType[1]`),
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                        },
+                        data: [120, 132, 101, 134],
+                        itemStyle: { color: "#008352" },
+                    },
+                    {
+                        name: this.$t(`studentWeb.stackBarChart.stackType[2]`),
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                        },
+                        data: [220, 182, 191, 234],
+                        itemStyle: { color: "#00AD6C" },
+                    },
+                    {
+                        name: this.$t(`studentWeb.stackBarChart.stackType[3]`),
+                        type: "bar",
+                        stack: "总量",
+                        label: {
+                            show: true,
+                            position: "insideLeft",
+                            textStyle: {
+                                color: "black",
+                            },
+                        },
+                        data: [250, 212, 201, 154],
+                        itemStyle: { color: "#94DBC1" },
+                    },
+                ],
+            }
+            myBar.setOption(option)
         },
-        legend: {
-          z: 7,
-          bottom: "0%",
-         width:'70%',
-          textStyle: {
-            color: "black",
-          },
-        },
-        grid: {
-          left: "0%",
-          right: "10%",
-          bottom: "20%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          //座標軸線的設置
-          splitLine: {
-            lineStyle: {
-              color: "transparent",
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-        },
-        yAxis: {
-          type: "category",
-          data: this.$t('studentWeb.stackBarChart.yAxisData'),
-          splitLine: {
-            lineStyle: {
-              color: "transparent",
-            },
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-        },
-        series: [
-          {
-            name: this.$t(`studentWeb.stackBarChart.stackType[0]`),
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft",
-            },
-            data: [320, 302, 301, 334],
-            itemStyle: { color: "#006841" },
-          },
-          {
-            name: this.$t(`studentWeb.stackBarChart.stackType[1]`),
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft",
-            },
-            data: [120, 132, 101, 134],
-            itemStyle: { color: "#008352" },
-          },
-          {
-            name: this.$t(`studentWeb.stackBarChart.stackType[2]`),
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft",
-            },
-            data: [220, 182, 191, 234],
-            itemStyle: { color: "#00AD6C" },
-          },
-          {
-            name: this.$t(`studentWeb.stackBarChart.stackType[3]`),
-            type: "bar",
-            stack: "总量",
-            label: {
-              show: true,
-              position: "insideLeft",
-              textStyle: {
-                color: "black",
-              },
-            },
-            data: [250, 212, 201, 154],
-            itemStyle: { color: "#94DBC1" },
-          },
-        ],
-      },
-    };
-  },
-};
+    }
+}
 </script>
 
 <style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/StudyTimeChart.vue

@@ -1,124 +1,131 @@
 <template>
-  <div class="study-time-chart">
-    <BarChart :option="option" />
+    <div class="study-time-chart">
+        <div id="studyTimeChart"></div>
 
-    <div class="averageTime">
-      <span class="timeNum">{{AverageTime}}</span>
-      {{$t('studentWeb.studyTimeChart.averageTime')}}
+        <div class="averageTime">
+            <span class="timeNum">{{ AverageTime }}</span>
+            {{ $t("studentWeb.studyTimeChart.averageTime") }}
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { Random } from "mockjs";
-import { BarChart } from "dr-vue-echarts";
+import { Random } from "mockjs"
 export default {
-  name: "StudyTimeChart",
-  components: {
-    [BarChart.name]: BarChart,
-  },
-  computed: {
-    AverageTime: function () {
-      var result = 0;
-      for (var i = 0; i < 7; i++) {
-        result += this.option.series[0]["data"][i]["value"];
-      }
-      return (result / 7).toFixed(2);
+    name: "StudyTimeChart",
+    computed: {
+        AverageTime: function () {
+            var result = 0
+            for (var i = 0; i < 7; i++) {
+                result += this.option.series[0]["data"][i]["value"]
+            }
+            return (result / 7).toFixed(2)
+        },
     },
-  },
-
 
-  data() {
-    return {
-      option: {
-        tooltip: {
-          trigger: "item",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-          formatter: localStorage.getItem('lang')=='tw'? '星期{b0}: <span class="studyhrs">{c0}</span> 分鐘':'{b0}: <span class="studyhrs">{c0}</span> min',
-        },
-        grid: {
-          top: "40%",
-          left: "6%",
-          right: "12%",
-          bottom: "0%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          data: this.$t("studentWeb.studyTimeChart.xAxisData"),
-          splitLine: {
-            lineStyle: {
-              color: "transparent",
-            },
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-        },
-        yAxis: {
-          type: "value",
-          show: false,
-        },
-        barCategoryGap: "1px",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setBar()
+    },
+    methods: {
+        setBar() {
+            let myBar = this.$echarts.init(document.getElementById("studyTimeChart"))
+            let option = {
+                tooltip: {
+                    trigger: "item",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                    formatter:
+                        localStorage.getItem("lang") == "tw"
+                            ? '星期{b0}: <span class="studyhrs">{c0}</span> 分鐘'
+                            : '{b0}: <span class="studyhrs">{c0}</span> min',
+                },
+                grid: {
+                    top: "40%",
+                    left: "6%",
+                    right: "12%",
+                    bottom: "0%",
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: "category",
+                    data: this.$t("studentWeb.studyTimeChart.xAxisData"),
+                    splitLine: {
+                        lineStyle: {
+                            color: "transparent",
+                        },
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    show: false,
+                },
+                barCategoryGap: "1px",
 
-        emphasis: {
-          itemStyle: {
-            color: "#FA6400", //高亮
-          },
+                emphasis: {
+                    itemStyle: {
+                        color: "#FA6400", //高亮
+                    },
+                },
+                series: [
+                    {
+                        data: [
+                            {
+                                value: Random.natural(10, 60),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(60, 80),
+                                itemStyle: { color: "#008352" },
+                            },
+                            {
+                                value: Random.natural(60, 80),
+                                itemStyle: { color: "#008352" },
+                            },
+                            {
+                                value: Random.natural(80, 100),
+                                itemStyle: { color: "rgb(0, 62, 39)" },
+                            },
+                            {
+                                value: Random.natural(10, 60),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(10, 60),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                            {
+                                value: Random.natural(0, 60),
+                                itemStyle: { color: "#00AD6C" },
+                            },
+                        ],
+                        type: "bar",
+                    },
+                ],
+            }
+            myBar.setOption(option)
         },
-        series: [
-          {
-            data: [
-              {
-                value: Random.natural(10, 60),
-                itemStyle: { color: "#00AD6C" },
-              },
-              {
-                value: Random.natural(60, 80),
-                itemStyle: { color: "#008352" },
-              },
-              {
-                value: Random.natural(60, 80),
-                itemStyle: { color: "#008352" },
-              },
-              {
-                value: Random.natural(80, 100),
-                itemStyle: { color: "rgb(0, 62, 39)" },
-              },
-              {
-                value: Random.natural(10, 60),
-                itemStyle: { color: "#00AD6C" },
-              },
-              {
-                value: Random.natural(10, 60),
-                itemStyle: { color: "#00AD6C" },
-              },
-              {
-                value: Random.natural(0, 60),
-                itemStyle: { color: "#00AD6C" },
-              },
-            ],
-            type: "bar",
-          },
-        ],
-      },
-    };
-  },
-};
+    }
+}
 </script>
 
 <style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/ChartCarousel/TwoLineChart.vue

@@ -1,117 +1,122 @@
 <template>
-  <div class="two-line-chart">
-    <LineChart :option="option" />
-  </div>
+    <div class="two-line-chart">
+        <div id="twoLineChart"></div>
+    </div>
 </template>
 
 <script>
-import { LineChart } from "dr-vue-echarts";
 export default {
-  name: "TwoLineChart",
-  components: {
-    [LineChart.name]: LineChart,
-  },
-  data() {
-    return {
-      option: {
-        xAxis: {
-          type: "category",
-          splitLine: {
-            show: false,
-          },
-          //座標軸線的設置
-          axisLine: {
-            lineStyle: {
-              color: "gray",
-              width: 2,
-            },
-          },
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-          boundaryGap: false,
-          data: this.$t("studentWeb.twoLineChart.xAxisData"),
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            lineStyle: {
-              color: "gray",
-            },
-          },
+    name: "TwoLineChart",
+    data() {
+        return {
+        }
+    },
+    mounted () {
+        this.setLine()
+    },
+    methods: {
+        setLine() {
+            let myLine = this.$echarts.init(document.getElementById("twoLineChart"))
+            let option = {
+                xAxis: {
+                    type: "category",
+                    splitLine: {
+                        show: false,
+                    },
+                    //座標軸線的設置
+                    axisLine: {
+                        lineStyle: {
+                            color: "gray",
+                            width: 2,
+                        },
+                    },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                    boundaryGap: false,
+                    data: this.$t("studentWeb.twoLineChart.xAxisData"),
+                },
+                yAxis: {
+                    type: "value",
+                    splitLine: {
+                        lineStyle: {
+                            color: "gray",
+                        },
+                    },
 
-          //座標軸的刻度顏色
-          axisLabel: {
-            color: "black",
-          },
-        },
-        grid: {
-          top: "25%",
-          left: "10%",
-          right: "12%",
-          bottom: "0%",
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: "axis",
-          padding: [4, 12],
-          backgroundColor: "white",
-          textStyle: {
-            color: "black",
-            fontFamily: "Ariel",
-            fontWeight: "bolder",
-          },
-          axisPointer: {
-            lineStyle: {
-              color: "black",
-              type: "dashed",
-            },
-          },
+                    //座標軸的刻度顏色
+                    axisLabel: {
+                        color: "black",
+                    },
+                },
+                grid: {
+                    top: "25%",
+                    left: "10%",
+                    right: "12%",
+                    bottom: "0%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    padding: [4, 12],
+                    backgroundColor: "white",
+                    textStyle: {
+                        color: "black",
+                        fontFamily: "Ariel",
+                        fontWeight: "bolder",
+                    },
+                    axisPointer: {
+                        lineStyle: {
+                            color: "black",
+                            type: "dashed",
+                        },
+                    },
 
-          formatter:
-            localStorage.getItem('lang') == "tw"
-              ? `星期{b0}：</br> 我：<span class='mytooltipHrsColor'>{c0}</span> 分鐘 </br>全年級：<span style='color:#fa6400;font-size:16pt'>{c1}</span>分鐘  `
-              : `{b0}：</br> Me：<span class='mytooltipHrsColor'>{c0}</span> min </br>3rd Grade： <span style='color:#fa6400;font-size:16pt'>{c1}</span> min `, //修改tooltip模板變量
+                    formatter:
+                        localStorage.getItem("lang") == "tw"
+                            ? `星期{b0}：</br> 我：<span class='mytooltipHrsColor'>{c0}</span> 分鐘 </br>全年級：<span style='color:#fa6400;font-size:16pt'>{c1}</span>分鐘  `
+                            : `{b0}：</br> Me：<span class='mytooltipHrsColor'>{c0}</span> min </br>3rd Grade： <span style='color:#fa6400;font-size:16pt'>{c1}</span> min `, //修改tooltip模板變量
+                },
+                series: [
+                    {
+                        data: [90, 70, 120, 93, 180, 133, 180],
+                        type: "line",
+                        //處理線上的點點
+                        symbol: "roundRect",
+                        symbolSize: [10, 10],
+                        itemStyle: {
+                            color: "#29856C",
+                        },
+                        //處理線上的點點
+                        smooth: true,
+                        lineStyle: {
+                            color: "#29856C",
+                            width: 3,
+                        },
+                    },
+                    {
+                        data: [70, 170, 20, 103, 80, 153, 97],
+                        type: "line",
+                        //處理線上的點點
+                        symbol: "roundRect",
+                        symbolSize: [10, 10],
+                        itemStyle: {
+                            color: "#FA6400",
+                        },
+                        //處理線上的點點
+                        smooth: true,
+                        lineStyle: {
+                            color: "#FA6400",
+                            width: 3,
+                        },
+                    },
+                ],
+            }
+            myLine.setOption(option)
         },
-        series: [
-          {
-            data: [90, 70, 120, 93, 180, 133, 180],
-            type: "line",
-            //處理線上的點點
-            symbol: "roundRect",
-            symbolSize: [10, 10],
-            itemStyle: {
-              color: "#29856C",
-            },
-            //處理線上的點點
-            smooth: true,
-            lineStyle: {
-              color: "#29856C",
-              width: 3,
-            },
-          },
-          {
-            data: [70, 170, 20, 103, 80, 153, 97],
-            type: "line",
-            //處理線上的點點
-            symbol: "roundRect",
-            symbolSize: [10, 10],
-            itemStyle: {
-              color: "#FA6400",
-            },
-            //處理線上的點點
-            smooth: true,
-            lineStyle: {
-              color: "#FA6400",
-              width: 3,
-            },
-          },
-        ],
-      },
-    };
-  },
-};
+    }
+}
 </script>
 
 <style>

TEAMModelOS/ClientApp/src/components/student-web/HomeView/CourseListView.vue

@@ -903,65 +903,42 @@ export default {
             return Y + M + D + H + Min;
         },
         getRecordList() {
-            this.recordList = [
-                {
-                    "id": "256246355239899136",
-                    "tmdid": "教师醍摩豆id",
-                    "scope": "private/school",
-                    "school": "学校id",
-                    "name": "语文第一节",
-                    "poster": "视频封面地址",
-                    "startTime": 1607435663434, //开始时间(时间戳),
-                    "duration": 5612, //"上课时长",
-                    "tScore": 95, //"t分，科技应用",
-                    "pScore": 95, //"p分，教法应用",
-                    "courseId": "关联的课程id,同时可以拿到，学段id，科目id",
-                    "groupIds": ["选用了IES5固定名单的id,通过名单id也可以拿到学段，年级"],
-                    "periodId": "学段id",
-                    "subject": "科目id",
-                    "grade": ["1，年级"],
-                    "like": 10, //"点赞数",
-                    "share": 10, //"分享转发数",
-                    "mCount": 50, //"参加本次课堂学生人数"
-                    "discuss": 100, //"议课次数，大于1则是优课",
-                },
-                {
-                    "id": "256246355239899136",
-                    "tmdid": "教师醍摩豆id",
-                    "scope": "private/school",
-                    "school": "学校id",
-                    "name": "英语听力",
-                    "poster": "视频封面地址",
-                    "startTime": 1608433140434, //开始时间(时间戳),
-                    "duration": 974, //"上课时长",
-                    "tScore": 95, //"t分，科技应用",
-                    "pScore": 95, //"p分，教法应用",
-                    "courseId": "关联的课程id,同时可以拿到，学段id，科目id",
-                    "groupIds": ["选用了IES5固定名单的id,通过名单id也可以拿到学段，年级"],
-                    "periodId": "学段id",
-                    "subject": "科目id",
-                    "grade": ["1，年级"],
-                    "like": 10, //"点赞数",
-                    "share": 10, //"分享转发数",
-                    "mCount": 50, //"参加本次课堂学生人数"
-                    "discuss": 100, //"议课次数，大于1则是优课",
-                },
-            ]
-            this.recordList.forEach(item => {
-                item.startTime = this.dateFormat(item.startTime)
-                let sec = item.duration % 60
-                let min = parseInt(item.duration / 60)
-                let mins = min >= 60 ? min % 60 : min
-                let hour = parseInt(min / 60)
-                item.time = `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
+            let param = {
+                tmdid: "",
+                scope: this.courseNow.scope, //school：传school，private：传tmdid
+                school: "",
+                category: [],
+                subjectId: [],
+                courseId: this.courseNow.id,
+                grade: [],
+                doubleGreen: false,
+                quality: false,
+                DESC: "startTime",
+                pageCount: 6, //返回六条数据(分页)
+                today: false,
+                continuationToken: null, //返回的有值的话，下次查询就要用这个值
+            }
+            param.scope === "school" ? param.school = this.userInfo.azp : param.tmdid = this.courseNow.creatorId
+            this.$api.studentWeb.getClassRecord(param).then(res => {
+                if(res.lessonRecords.length) {
+                    res.lessonRecords.forEach(item => {
+                        item.startTime = this.dateFormat(item.startTime)
+                        let sec = item.duration % 60
+                        let min = parseInt(item.duration / 60)
+                        let mins = min >= 60 ? min % 60 : min
+                        let hour = parseInt(min / 60)
+                        item.time = `${hour < 10 ? ('0' + hour) : hour}:${mins < 10 ? ('0' + mins) : mins}:${sec < 10 ? ('0' + sec) : sec}`
+                    })
+                    this.recordList = res.lessonRecords
+                }
             })
         },
         toClassRecord(item, index) {
             this.nowIndex = index
             this.$router.push({
-                path: "stuClassRec",
-                query: {
-                    id: item.id
+                name: "stuClassRec",
+                params: {
+                    record: item
                 }
             })
         },

TEAMModelOS/ClientApp/src/static/Global.js

@@ -36,6 +36,84 @@ const HOST_LIST = () => {
 	]
 }
 
+const PROD_CODE = [
+	{
+		type:'serial',
+		code:'3222NIYD',
+		name:'ezStation 2',
+	},
+	{
+		type:'serial',
+		code:'J223IZ6M',
+		name:'HiTeach STD',
+	},
+	{
+		type:'serial',
+		code:'3222C6D2',
+		name:'HiTeach TBL',
+	},
+	{
+		type:'serial',
+		code:'J223IZAM',
+		name:'HiTeach PRO',
+	},
+	{
+		type:'serial',
+		code:'J2236ZCX',
+		name:'HiTeach Lite',
+	},
+	{
+		type:'serial',
+		code:'3222DNG2',
+		name:'HiTeach Mobile',
+	},
+	{
+		type:'serial',
+		code:'3222IAVN',
+		name:'HiTeach Premium',
+	},
+	{
+		type:'serial',
+		code:'BYJ6LZ6Z',
+		name:'HiTeach5',
+	},
+	{
+		type:'service',
+		code:'YMPCVCIM',
+		name:'學情分析模組',
+	},
+	{
+		type:'service',
+		code:'IPDYZYLC',
+		name:'智慧學校管理服務',
+	},
+	{
+		type:'service',
+		code:'3CLYJ6NP',
+		name:'AClass ONE智慧學伴',
+	},
+	{
+		type:'service',
+		code:'IPALJ6NY',
+		name:'數據儲存服務空間',
+	},
+	{
+		type:'service',
+		code:'VABAJ6NV',
+		name:'卷卡合一閱卷系統',
+	},
+	{
+		type:'service',
+		code:'YMPCVCIM',
+		name:'學情分析模組',
+	},
+	{
+		type:'hardware',
+		code:'0VPBDZPG',
+		name:'Haboard醍摩豆智慧大屏',
+	}
+]
+
 
 
 //系统默认考试类型
@@ -70,7 +148,7 @@ const EV_TYPE = () => {
 	}
 	]
 }
-//系统固定评测类型
+//系统固定评测模式
 const EV_MODE = () => {
 	return [{
 		value: '0',
@@ -242,6 +320,7 @@ const GLOBAL = {
 	SCHOOL_SPACE,
 	DEFAULT_SCHOOL_CODE,
 	NotSupport,
+	PROD_CODE,
 	EXAM_TYPE,
 	EXERCISE_TYPES,
 	EXERCISE_DIFFS,

TEAMModelOS/ClientApp/src/store/index.js

@@ -1,10 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import courseMgmt from './module/courseMgmt'
 import talMgmt from './module/talMgmt'
-import authorization from './module/authorization'
 import totalAnalysis from './module/totalAnalysis'
-import schoolBaseInfo from './module/schoolBaseInfo'
 import user from './module/user'
 import config from './module/config'
 import studentWeb from './module/studentWeb'
@@ -115,10 +112,7 @@ export default new Vuex.Store({
     },
     modules: {
         talMgmt,
-        authorization,
         totalAnalysis,
-        schoolBaseInfo,
-        courseMgmt,
         user,
         config,
         studentWeb,

TEAMModelOS/ClientApp/src/store/module/authorization.js

@@ -1,13 +0,0 @@
-export default {
-    state: {
-        antRouter: ''
-    },
-    getters: {
-
-    },
-    mutations: {
-    },
-    actions: {
-
-    }
-}

TEAMModelOS/ClientApp/src/store/module/courseMgmt.js

@@ -1,68 +0,0 @@
-import apiTools from '@/api'
-import JSONPath from 'jsonpath'
-export default {
-    namespaced: true,
-    state: {
-        courseList: [],
-        currentCourseIndex: 0
-    },
-    getters: {
-        courseInfo(state) {
-            return state.courseList[state.currentCourseIndex]
-        }
-    },
-    mutations: {
-        setCurrentCourseIndex(state, index) {
-            state.currentCourseIndex = index
-        },
-        setCourseList(state, data) {
-            state.courseList = data
-        }
-    },
-    actions: {
-        getCourseList(context) {
-            return new Promise(
-                (resolve, reject) => {
-                    if (context.state.courseList.length == 0) {
-                        apiTools.courseMgmt.findCourse({
-                            scopeCode: context.rootState.userInfo.schoolCode
-                        }).then(
-                            res => {
-                                if (res.error == null) {
-                                    if (res.result.data.length > 0) {
-                                        context.commit('setCourseList', res.result.data)
-                                        resolve({
-                                            code: 1,
-                                            message: '数据请求成功'
-                                        })
-                                    } else {
-                                        resolve({
-                                            code: 2,
-                                            message: '请求成功，数据为空'
-                                        })
-                                    }
-                                } else {
-                                    reject({
-                                        code: 0,
-                                        message: '请求失败,API error!'
-                                    })
-                                }
-                            },
-                            err => {
-                                reject({
-                                    code: 0,
-                                    message: '请求失败,API error!'
-                                })
-                            }
-                        )
-                    } else {
-                        resolve({
-                            code: 3,
-                            message: '数据已请求，无需重复请求'
-                        })
-                    }
-                }
-            )
-        }
-    }
-}

TEAMModelOS/ClientApp/src/store/module/schoolBaseInfo.js

@@ -1,78 +0,0 @@
-import apiTools from '@/api'
-import JSONPath from 'jsonpath'
-export default {
-    namespaced: true,
-    state: {
-        // "sokapp":"蘇格拉底議課APP" "remotcls":"遠距教室服務" "sokdesk":"蘇格拉底桌面" "sokrpt":"蘇格拉底報告" "sokvdo":"蘇格拉底影片" "ezs":"ezStation錄播系統"
-        aprules: ["sokapp", "remotcls", "sokdesk", "sokrpt", "sokvdo", "ezs"],
-        schoolBaseInfo: {
-            period: []
-        },
-        classroomList: undefined,
-        periods: [],
-        classrooms: [],
-        grades: [],
-        students: []
-    },
-    getters: {
-        getPeriods: state => state.periods,
-        getClassrooms: state => state.classrooms,
-        getGrades: state => state.srvAdr,
-        getStudent: state => state.students,
-        getSchoolInfo: state => state.schoolBaseInfo,
-        getAprules: state => state.aprules
-    },
-    mutations: {
-        setSchoolInfo(state, data) {
-            state.schoolBaseInfo = data
-        },
-        setClassroomList(state, data) {
-            state.classroomList = data
-        },
-        setStudents(state, data) {
-            state.students = data
-        },
-        addStudents(state, data) {
-            state.students.unshift(...data)
-        },
-        uptStudents(state, data) {
-            data.forEach(function (item) {
-                let objIndex = state.students.findIndex((obj => obj.id == item.id))
-                state.students[objIndex] = item
-            })
-        },
-        delStudents(state, data) {
-            data.forEach(function (item) {
-                let objIndex = state.students.findIndex((obj => obj.id == item));
-                state.students.splice(objIndex, 1);
-            })
-        },
-        importStudents(state, data) {
-            data.forEach(function (item) {
-                let objIndex = state.students.findIndex((obj => obj.id == item.id));
-                if (objIndex >= 0) {
-                    state.students[objIndex] = item
-                } else {
-                    state.students.unshift(item)
-                }
-            })
-        }
-    },
-    actions: {
-        setStudentsToState(context, data) {
-            context.commit('setStudents', data)
-        },
-        addStudentsToState(context, data) {
-            context.commit('addStudents', data)
-        },
-        updStudentsToState(context, data) {
-            context.commit('uptStudents', data)
-        },
-        delStudentsToState(context, data) {
-            context.commit('delStudents', data)
-        },
-        importStudentsToState(context, data) {
-            context.commit('importStudents', data)
-        }
-    }
-}

TEAMModelOS/ClientApp/src/store/module/user.js

@@ -1,8 +1,7 @@
 import apiTools from '@/api'
 import jwtDecode from 'jwt-decode'
 import Vue from 'vue'
-import { CONTENT_START_X } from '../../utils/sheetConfig'
-
+import { GLOBAL } from '@/static/Global.js'
 export default {
     namespaced: true,
     state: {
@@ -40,7 +39,7 @@ export default {
         },
         authStatus: undefined, //(單數)老師權限總設定值
         authStatusMulti: undefined, //(複數)老師權限總設定值
-		curPeriod:undefined
+        curPeriod: undefined
     },
     getters: {
         getSchoolUserAll: state => {
@@ -168,34 +167,34 @@ export default {
         }
     },
     mutations: {
-		/* 设置当前学段 */
-		setCurPeriod(state,data){
-			state.curPeriod = data
-		},
+        /* 设置当前学段 */
+        setCurPeriod(state, data) {
+            state.curPeriod = data
+        },
         //更新userProfile schools
         setSchoolsInfo(state, data) {
-            console.log('111',state, data)
+            console.log('111', state, data)
             let schoolCode = data.school_base.id
             let schoolName = data.school_base.name
             let schoolPicture = data.school_base.picture
             //更新vuex
-            if(schoolCode && state.userProfile && state.userProfile.schools){
-                let schoolInfo = state.userProfile.schools.find(item=>{
+            if (schoolCode && state.userProfile && state.userProfile.schools) {
+                let schoolInfo = state.userProfile.schools.find(item => {
                     return item.schoolId == schoolCode
                 })
-                if(schoolInfo){
+                if (schoolInfo) {
                     Vue.set(schoolInfo, 'name', schoolName)
                     Vue.set(schoolInfo, 'picture', schoolPicture)
                 }
             }
             // 更新localstorage
             let local = localStorage.getItem('user_profile')
-            if(schoolCode && local){
+            if (schoolCode && local) {
                 local = JSON.parse(decodeURIComponent(local) || '{schools:[]}')
-                let schoolInfo = local.schools.find(item=>{
+                let schoolInfo = local.schools.find(item => {
                     return item.schoolId == schoolCode
                 })
-                if(schoolInfo){
+                if (schoolInfo) {
                     schoolInfo.name = schoolName
                     schoolInfo.picture = schoolPicture
                     localStorage.setItem('user_profile', encodeURIComponent(JSON.stringify(local)))
@@ -240,6 +239,8 @@ export default {
             state.schoolProfile.periods = undefined // 學制
             state.schoolProfile.grades = undefined // 年級
             state.schoolProfile.school_base = undefined // 区班校基础数据
+            state.schoolProfile.svcStatus = undefined //学校购买服务模组状态
+            state.schoolProfile.productSum = undefined //学校购买服务模组信息
         },
         setSchoolSettingAuthList(state, data) {
             state.schoolSettingAuthList = data
@@ -265,11 +266,11 @@ export default {
             state.schoolProfile.periods = data.fmtPeriods // 學制
             state.schoolProfile.grades = data.fmtGrades // 年級
             state.schoolProfile.school_base = data.school_base // 区班校基础数据
-            state.osblob_sas = data.osblob_sas // 区班校基础数据
-            state.osblob_uri = data.osblob_uri // 区班校基础数据
-			state.osblob_sas = data.osblob_sas // 区班校基础数据
-			state.osblob_uri = data.osblob_uri // 区班校基础数据
-			sessionStorage.setItem('standard',data.school_base.standard)
+            state.schoolProfile.svcStatus = data.svcStatus //学校购买服务模组状态
+            state.schoolProfile.productSum = data.productSum //学校购买服务模组信息
+            state.osblob_sas = data.osblob_sas 
+            state.osblob_uri = data.osblob_uri 
+            sessionStorage.setItem('standard', data.school_base.standard)
         },
         setStudentProfile(state, data) {
             state.studentProfile.blob_uri = data.blob_uri // 學生在學校的Blob網址
@@ -368,7 +369,7 @@ export default {
                         }).then(res => {
                             if (!res.error) {
                                 context.dispatch('setSchoolProfile', res)
-								localStorage.setItem("hpAppraise", res.school_base.hpappraise)
+                                localStorage.setItem("hpAppraise", res.school_base.hpappraise)
                                 resolve(res)
                             }
                         }).catch(err => {
@@ -709,7 +710,6 @@ export default {
             }
         },
         setSchoolProfile(context, data) {
-            console.log('重置数据')
             localStorage.setItem('school_profile', encodeURIComponent(JSON.stringify(data), "utf-8"))
             let fmtPeriods = [];
             let fmtGrades = [];
@@ -736,6 +736,18 @@ export default {
                 item.className = classInfo ? classInfo.name : undefined
             })
             console.log(data)
+            //设置学校购买了哪些服务模组
+            let svcStatus = {}
+            if (data.productSum?.service) {
+                // 所有服务模组列表
+                let svcList = GLOBAL.PROD_CODE.filter(item => item.type === 'service')
+                let buyCodes = data.productSum.service.map(item => item.prodCode)
+                svcList.forEach(item => {
+                    svcStatus[item.code] = buyCodes.includes(item.code)
+                })
+                console.log(svcStatus)
+            }
+            data.svcStatus = svcStatus
             context.commit('setSchoolProfile', data)
             // 设置学校空间
             context.commit('setSchoolSpace', data.school_base.size, { root: true })
@@ -768,7 +780,7 @@ export default {
                     if (!res.error) {
                         // 儲存大雲Token
                         localStorage.setItem("auth_token", res.auth_token)
-						localStorage.setItem("hpAppraise", res.school_base.hpappraise)
+                        localStorage.setItem("hpAppraise", res.school_base.hpappraise)
                         context.dispatch('setSchoolProfile', res)
                         result = res
                     }

TEAMModelOS/ClientApp/src/view/auth/Index.vue

@@ -18,8 +18,7 @@ export default {
     data() {
         return {
             split1: 0.75,
-            routerName: 'product',
-            spaceStatus: 1
+            routerName: 'product'
         }
     },
 

TEAMModelOS/ClientApp/src/view/auth/Product.vue

@@ -79,6 +79,7 @@ export default {
     },
     data() {
         return {
+            spaceStatus:1,
             split1: 0.75,
             productList: [
                 {

TEAMModelOS/ClientApp/src/view/teachermgmt/components/personnel/Index.vue

@@ -172,7 +172,7 @@
                             <p class="errorMsg">{{searchIdErrorMsg}}</p>
                             <Button :loading="serchTHLoading" class="searchBtn" @click="searchTeacher()">{{ $t('teachermgmt.addTeacher.btn.search') }}</Button>
                             <br />
-                            <Button class="searchBtn" @click="qrCodeJoin" style="margin-top:10px" v-show="$store.state.config.srvAdrType != 'product'">
+                            <Button class="searchBtn" @click="qrCodeJoin" style="margin-top:10px">
                                 {{$t('teachermgmt.qrcodeJoin')}}
                             </Button>
                         </div>

TEAMModelOS/ClientApp/vue.config.js

@@ -69,7 +69,8 @@ module.exports = {
 			'vue-router': 'VueRouter',
 			'view-design': 'iview',
 			'fabric': 'fabric',
-			'echarts':'echarts'
+			'echarts':'echarts',
+			'jspdf':'jspdf'
 		}
 		// 代码压缩
 		// config.plugins.push(