Merge branch 'develop3.0-tmd' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop3.0-tmd

TEAMModelOS/ClientApp/src/view/homepage/AcCountPie.vue

@@ -2,97 +2,111 @@
     <div id="ac-type-count"></div>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                index:0,
-                typeCountPie: undefined,
-                option: {
-                    backgroundColor:"#27262b",
-                    legend: {
-                        data: ['评量测验', '自主学习', '作业活动', '投票活动', '问卷调查'],
-                        textStyle: {
-                            color: '#DDDDDD',
-                            padding:[5,0,5,0]
-                        },
-                        icon: 'circle',
-                        bottom: 10,
-                        width: 240
+import elementResizeDetectorMaker from "element-resize-detector"
+export default {
+    data() {
+        return {
+            index: 0,
+            typeCountPie: undefined,
+            option: {
+                backgroundColor: "#27262b",
+                legend: {
+                    data: ['评量测验', '自主学习', '作业活动', '投票活动', '问卷调查'],
+                    textStyle: {
+                        color: '#DDDDDD',
+                        padding: [5, 0, 5, 0]
                     },
-                    series: [
-                        {
+                    icon: 'circle',
+                    bottom: 10
+                },
+                grid: {
+                    left: '20px',
+                    right: '20px',
+                    top:'20px',
+                    bottom:'20px',
+                    containLabel: true
+                },
+                series: [
+                    {
 
-                            name: '数量',
-                            type: 'pie',
-                            top: -60,
-                            radius: [95, 120],
-                            avoidLabelOverlap: false,
-                            legendHoverLink: false,
+                        name: '数量',
+                        type: 'pie',
+                        top: -60,
+                        radius: [95, 120],
+                        avoidLabelOverlap: false,
+                        legendHoverLink: false,
+                        label: {
+                            show: false,
+                            position: 'center',
+                            formatter: function (data) { // 设置圆饼图中间文字排版
+                                return data.value + "\n" + data.name
+                            }
+                        },
+                        emphasis: {
                             label: {
-                                show: false,
-                                position: 'center',
-                                formatter: function (data) { // 设置圆饼图中间文字排版
-                                    return data.value + "\n" + data.name
-                                }
-                            },
-                            emphasis: {
-                                label: {
-                                    show: true,
-                                    fontSize: '24',
-                                    fontWeight: 'bold'
-                                },
+                                show: true,
+                                fontSize: '24',
+                                fontWeight: 'bold'
                             },
-                            labelLine: {
-                                show: false
-                            },
-                            data: [
-                                { value: 335, name: '评量测验',itemStyle:{color:"#00f492"} },
-                                { value: 310, name: '自主学习',itemStyle:{color:"#fa8d38"} },
-                                { value: 234, name: '作业活动',itemStyle:{color:"#f862bb"} },
-                                { value: 135, name: '投票活动',itemStyle:{color:"#65dcda"} },
-                                { value: 1548, name: '问卷调查',itemStyle:{color:"#d6b8ff"} }
-                            ],
-                            itemStyle: {
-                                borderWidth: 5,
-                                borderColor:'#2b2a2f'
-                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [
+                            { value: 335, name: '评量测验', itemStyle: { color: "#00f492" } },
+                            { value: 310, name: '自主学习', itemStyle: { color: "#fa8d38" } },
+                            { value: 234, name: '作业活动', itemStyle: { color: "#f862bb" } },
+                            { value: 135, name: '投票活动', itemStyle: { color: "#65dcda" } },
+                            { value: 1548, name: '问卷调查', itemStyle: { color: "#d6b8ff" } }
+                        ],
+                        itemStyle: {
+                            borderWidth: 5,
+                            borderColor: '#2b2a2f'
                         }
-                    ]
-                }
+                    }
+                ]
             }
-        },
-        created() {
-
-        },
-        mounted() {
-            this.typeCountPie = this.$echarts.init(document.getElementById('ac-type-count'))
-            this.typeCountPie.setOption(this.option)
-            this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
-            this.typeCountPie.on('mouseover', (e)=> {
-                this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 })
-                if (e.dataIndex != this.index) {
-                    this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.index })
-                }
-                if (e.dataIndex == 0) {
-                    this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex })
-                }
-            })
+        }
+    },
+    created() {
 
-            //当鼠标离开时，把当前项置为选中 
-            this.typeCountPie.on('mouseout', (e) => {
-                this.index = e.dataIndex
+    },
+    mounted() {
+        this.typeCountPie = this.$echarts.init(document.getElementById('ac-type-count'))
+        this.typeCountPie.setOption(this.option)
+        this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
+        this.typeCountPie.on('mouseover', (e) => {
+            this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 })
+            if (e.dataIndex != this.index) {
+                this.typeCountPie.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: this.index })
+            }
+            if (e.dataIndex == 0) {
                 this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex })
+            }
+        })
+
+        //当鼠标离开时，把当前项置为选中 
+        this.typeCountPie.on('mouseout', (e) => {
+            this.index = e.dataIndex
+            this.typeCountPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex })
+        })
+        this.erd = elementResizeDetectorMaker()
+        this.erd.listenTo(document.getElementById("ac-type-count"), () => {
+            this.$nextTick(() => {
+                //监听到事件后执行的业务逻辑
+                this.typeCountPie.resize()
             })
-        }
+        })
     }
+}
 </script>
 <style scoped lang="less">
-    #ac-type-count {
-        width: 100%;
-        height: 380px;
-        display: flex;
-        justify-content: center;
-    }
+#ac-type-count {
+    width: 100%;
+    height: 360px;
+    display: flex;
+    justify-content: center;
+}
 </style>
 <style>
 </style>

TEAMModelOS/ClientApp/src/view/homepage/HomePage.less

@@ -1,7 +1,7 @@
-@main-bgColor: rgb(40,40,40); //主背景颜色
-@borderColor: #424242; //边框颜色
-@primary-textColor: #fff; //文本主颜色
-@second-textColor: #a5a5a5; //文本副级颜色
+@main-bgColor: rgb(40,40,40); //锟斤拷锟斤拷锟斤拷锟斤拷色
+@borderColor: #424242; //锟竭匡拷锟斤拷色
+@primary-textColor: #fff; //锟侥憋拷锟斤拷锟斤拷色
+@second-textColor: #a5a5a5; //锟侥憋拷锟斤拷锟斤拷锟斤拷色
 @nothing-textColor: #5f5f5f;
 @primary-fontSize: 14px;
 @second-fontSize: 16px;
@@ -123,7 +123,7 @@
         }
 
         .ac-info-box {
-            width: ~"calc(100% - 170px)";
+            width: ~"calc(100% - 150px)";
 
             p {
                 text-overflow: ellipsis;
@@ -156,7 +156,7 @@
         }
 
         .ac-pro-box {
-            width: 100px;
+            width: 80px;
             text-align: center;
             color: #1cc1f1;
             font-size: 30px;

TEAMModelOS/ClientApp/src/view/homepage/HomePage.vue

@@ -27,19 +27,19 @@
                 </vuescroll>
             </div>
         </div>
-        <div class="class-data-area">
+        <div class="class-data-area" style="display:flex;flex-direction:column;">
             <div class="calss-chart-box box-item">
                 <p class="chart-title">
                     课堂数据
                 </p>
-                <i-circle :percent="80" style="margin:auto;display:block;" trail-color="#242328" :stroke-color="['#1E82E0','#1CC0F3','#1C9AE7']" :trail-width="9" :stroke-width="9" :size="240">
-                    <p class="demo-Circle-inner" style="font-size:100px;font-weight:bold;color:white;">80</p>
+                <!-- <i-circle :percent="80" style="margin:auto;display:block;" trail-color="#242328" :stroke-color="['#1E82E0','#1CC0F3','#1C9AE7']" :trail-width="9" :stroke-width="9" :size="180">
+                    <p class="demo-Circle-inner" style="font-size:50px;font-weight:bold;color:white;">80</p>
                     <span class="demo-Circle-inner" style="font-size:14px;color:#1cc0f3;">平均互动指数</span>
-                    <span class="circle-tag"></span>
-                </i-circle>
+                </i-circle> -->
+                <TechScore></TechScore>
                 <TeachScore></TeachScore>
             </div>
-            <div class="upload-record-box box-item">
+            <div class="upload-record-box box-item" style="flex:1;">
                 <p class="list-title">
                     近期课堂记录
                 </p>
@@ -55,20 +55,19 @@
                                 </p>
                             </div>
                         </div>
-
                     </vuescroll>
                 </div>
             </div>
 
         </div>
-        <div class="activity-area">
+        <div class="activity-area" style="display:flex;flex-direction:column;">
             <div class="ac-count-box box-item">
                 <p class="chart-title">
                     活动概览
                 </p>
                 <AcCountPie style="margin-top:-20px;"></AcCountPie>
             </div>
-            <div class="ac-list-box box-item">
+            <div class="ac-list-box box-item" style="flex:1;">
                 <p class="list-title">
                     进行中活动列表
                 </p>
@@ -351,6 +350,6 @@
     }
 
     .home-page-container .__panel {
-        padding-right: 17px;
+        /* padding-right: 17px; */
     }
 </style>

TEAMModelOS/ClientApp/src/view/homepage/TeachScore.vue

@@ -2,123 +2,133 @@
     <div id="teach-method"></div>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                teachMethod: undefined,
-                option: {
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow'
-                        }
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '3%',
-                        containLabel: true
+import elementResizeDetectorMaker from "element-resize-detector"
+export default {
+    data() {
+        return {
+            teachMethod: undefined,
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '3%',
+                    top:'20px',
+                    bottom:'20px',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        color: 'white',
+                        show: false,
                     },
-                    xAxis: {
-                        type: 'value',
-                        boundaryGap: [0, 0.01],
-                        axisLabel: {
-                            color: 'white',
-                            show: false,
-                        },
-                        axisLine: {
-                            lineStyle: {
-                                color:'#403f44'
-                            }
-                        },
-                        splitLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#403f44'
-                            },
-                            interval: 2
+                    axisLine: {
+                        lineStyle: {
+                            color: '#403f44'
                         }
                     },
-                    yAxis: {
-                        splitArea: {
-                            show: false,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#403f44'
                         },
-                        splitLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#403f44'
-                            },
-                            interval: 0
-                        },
-                        type: 'category',
-                        data: ['小组学习', '多元评价', '个人学习', '生本决策','全班互动','全班测验'],
-                        axisLabel: {
-                            color:'#DDDDDD'
+                        interval: 2
+                    }
+                },
+                yAxis: {
+                    splitArea: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#403f44'
                         },
-                        axisLine: {
-                            lineStyle: {
-                                color:'#403f44'
-                            }
-                        }
+                        interval: 0
                     },
-                    series: [
-                        {
-                            type: 'bar',
-                            barWidth: 15,
-                            data: [
-                                {
-                                    value: 20,
-                                    itemStyle: {
-                                        color: '#daba63'
-                                    },
+                    type: 'category',
+                    data: ['小组学习', '多元评价', '个人学习', '生本决策', '全班互动', '全班测验'],
+                    axisLabel: {
+                        color: '#DDDDDD'
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#403f44'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: 15,
+                        data: [
+                            {
+                                value: 20,
+                                itemStyle: {
+                                    color: '#daba63'
                                 },
-                                {
-                                    value: 18,
-                                    itemStyle: {
-                                        color: '#b8a0dc'
-                                    }
+                            },
+                            {
+                                value: 18,
+                                itemStyle: {
+                                    color: '#b8a0dc'
+                                }
+                            },
+                            {
+                                value: 5,
+                                itemStyle: {
+                                    color: '#65dcda'
                                 },
-                                {
-                                    value: 5,
-                                    itemStyle: {
-                                        color: '#65dcda'
-                                    },
+                            },
+                            {
+                                value: 1,
+                                itemStyle: {
+                                    color: '#d658a2'
                                 },
-                                {
-                                    value: 1,
-                                    itemStyle: {
-                                        color: '#d658a2'
-                                    },
+                            },
+                            {
+                                value: 1,
+                                itemStyle: {
+                                    color: '#d77c35'
                                 },
-                                {
-                                    value: 1,
-                                    itemStyle: {
-                                        color: '#d77c35'
-                                    },
+                            },
+                            {
+                                value: 1,
+                                itemStyle: {
+                                    color: '#07d280'
                                 },
-                                {
-                                    value: 1,
-                                    itemStyle: {
-                                        color: '#07d280'
-                                    },
-                                }]
-                        }
-                    ]
-                }
+                            }]
+                    }
+                ]
             }
-        },
-        mounted() {
-            this.typeCountPie = this.$echarts.init(document.getElementById('teach-method'))
-            this.typeCountPie.setOption(this.option)
         }
+    },
+    mounted() {
+        this.typeCountPie = this.$echarts.init(document.getElementById('teach-method'))
+        this.typeCountPie.setOption(this.option)
+        this.erd = elementResizeDetectorMaker()
+        this.erd.listenTo(document.getElementById("teach-method"), () => {
+            this.$nextTick(() => {
+                //监听到事件后执行的业务逻辑
+                this.typeCountPie.resize()
+            })
+        })
     }
+}
 </script>
 <style lang="less" scoped>
 </style>
 <style lang="less">
-    #teach-method {
-        width: 100%;
-        height: 280px;
-        display: flex;
-        justify-content: center;
-    }
+#teach-method {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+}
 </style>

TEAMModelOS/ClientApp/src/view/homepage/TechScore.vue

@@ -2,92 +2,102 @@
     <div id="tech-score"></div>
 </template>
 <script>
-    export default {
-        data() {
-            return {
-                techScoreGau: undefined,
-                option: {
-                    title: {
-                        text: 78,
-                        x: 'center',
-                        y: 'center',
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#fff',
-                            fontSize: '80'
-                        }
+import elementResizeDetectorMaker from "element-resize-detector"
+export default {
+    data() {
+        return {
+            techScoreGau: undefined,
+            option: {
+                title: [{
+                    text: '82',
+                    x: '50%',
+                    y: '30%',
+                    textAlign: 'center',
+                    textStyle: {
+                        fontSize: '76',
+                        fontWeight: '600',
+                        color: '#ffffff',
+                        textAlign: 'center',
+                    },
+                }, {
+                    text: '平均互动指数',
+                    left: '50%',
+                    top: '65%',
+                    textAlign: 'center',
+                    textStyle: {
+                        fontSize: '14',
+                        fontWeight: '400',
+                        color: '#0FF',
+                        textAlign: 'center',
                     },
-                    color: ['#242328'],
-                    legend: {
+                }],
+                polar: {
+                    radius: ['90%', '75%'],
+                    center: ['50%', '50%'],
+                },
+                angleAxis: {
+                    max: 100,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: 'category',
+                    show: true,
+                    axisLabel: {
                         show: false,
-                        data: []
                     },
+                    axisLine: {
+                        show: false,
 
-                    series: [{
-                        name: 'Line 1',
-                        type: 'pie',
-                        clockWise: true,
-                        radius: ['75%', '90%'],
-                        itemStyle: {
-                            normal: {
-                                label: {
-                                    show: false
-                                },
-                                labelLine: {
-                                    show: false
-                                }
-                            }
-                        },
-                        hoverAnimation: false,
-                        data: [{
-                            value: 78,
-                            name: '',
-                            itemStyle: {
-                                normal: {
-                                    borderWidth: 10,
-                                    color: { // 完成的圆环的颜色
-                                        colorStops: [{
-                                            offset: 0,
-                                            color: '#1CC0F3' // 0% 处的颜色
-                                        }, {
-                                            offset: 1,
-                                            color: '#1E82E0' // 100% 处的颜色
-                                        }]
-                                    },
-                                    label: {
-                                        show: false
-                                    },
-                                    labelLine: {
-                                        show: false
-                                    },
-                                    borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                        offset: 0,
-                                        color: '#1CC0F3',
-                                    }, {
-                                        offset: 1,
-                                        color: '#1E82E0'
-                                    }])
-                                }
-                            }
-                        }, {
-                            name: '',
-                            value: 22
-                        }]
-                    }]
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                },
+                series: [{
+                    name: '',
+                    type: 'bar',
+                    roundCap: true,
+                    barWidth: 60,
+                    showBackground: true,
+                    backgroundStyle: {
+                        color: '#2e2856',
+                    },
+                    data: [80],
+                    coordinateSystem: 'polar',
+                    itemStyle: {
+                        normal: {
+                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                offset: 0,
+                                color: '#585fe1'
+                            }, {
+                                offset: 1,
+                                color: '#0ff'
+                            }]),
+                        }
+                    }
                 }
+                ]
             }
-        },
-        mounted() {
-            this.techScoreGau = this.$echarts.init(document.getElementById('tech-score'))
-            this.techScoreGau.setOption(this.option)
         }
+    },
+    mounted() {
+        this.techScoreGau = this.$echarts.init(document.getElementById('tech-score'))
+        this.techScoreGau.setOption(this.option)
+        this.erd = elementResizeDetectorMaker()
+        this.erd.listenTo(document.getElementById("tech-score"), () => {
+            this.$nextTick(() => {
+                //监听到事件后执行的业务逻辑
+                this.techScoreGau.resize()
+            })
+        })
     }
+}
 </script>
 <style lang="less" scoped>
-    #tech-score {
-        width:100%;
-        height:260px;
-    }
+#tech-score {
+    width: 100%;
+    height: 240px;
+}
 </style>
 <style>
 </style>