优化首页和大屏样式

src/views/bigScreen/index.vue

@@ -251,8 +251,8 @@ const leftBar1Option = ref({
     offset: '7',
     axisLabel: {
       textStyle: {
-        color: 'rgba(255,255,255,.6)',
-        fontSize: '14',
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     },
     data: []
@@ -267,8 +267,8 @@ const leftBar1Option = ref({
         show: true,
         position: 'right',
         textStyle: {
-          color: 'rgba(255,255,255,.8)',
-          fontSize: '12',
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
         }
       }
     },
@@ -316,7 +316,8 @@ const leftBar2Option = ref({
     right: 'center',
     top: 0,
     textStyle: {
-      color: "#fff"
+      color: 'rgba(255,255,255,.7)',
+      fontSize: '0.2rem',
     },
     itemWidth: 12,
     itemHeight: 10,
@@ -335,18 +336,18 @@ const leftBar2Option = ref({
     axisLine: {
       lineStyle: {
         color: 'white'
-
       }
     },
     axisLabel: {
       //rotate:-90,
       formatter: function (value: any) { return value.split("").join("\n"); },
       textStyle: {
-        color: "rgba(255,255,255,.6)",
-        fontSize: 14,
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       },
       lineStyle: {
-        color: 'rgba(255,255,255,0.3)'
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     }
   },
@@ -356,15 +357,16 @@ const leftBar2Option = ref({
     splitNumber: 4,
     axisTick: { show: false },
     splitLine: {
-      show: true,
+      show: false,
       lineStyle: {
-        color: 'rgba(255,255,255,0.1)'
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     },
     axisLabel: {
       textStyle: {
-        color: "rgba(255,255,255,.6)",
-        fontSize: 14,
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     },
     axisLine: { show: false },
@@ -398,7 +400,7 @@ const centerBar1Option = ref({
   grid: {
     top: "20%",
     right: "50",
-    bottom: "20",
+    bottom: "30",
     left: "30",
   },
   legend: {
@@ -406,7 +408,8 @@ const centerBar1Option = ref({
     right: 'center',
     width: '100%',
     textStyle: {
-      color: "#fff"
+      color: 'rgba(255,255,255,.7)',
+      fontSize: '0.2rem',
     },
     itemWidth: 12,
     itemHeight: 10,
@@ -415,9 +418,17 @@ const centerBar1Option = ref({
     {
       type: "category",
       data: [],
-      axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },
       axisLabel: {
-        textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
+        textStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        },
       },
     },
   ],
@@ -428,17 +439,19 @@ const centerBar1Option = ref({
       axisTick: { show: false },
       splitLine: {
         show: false,
-
       },
       "axisLabel": {
         "show": true,
-        fontSize: 14,
-        color: "rgba(255,255,255,.6)"
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
 
       },
       axisLine: {
         min: 0,
-        lineStyle: { color: 'rgba(255,255,255,.1)' }
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
       },//左线色
 
     },
@@ -448,12 +461,23 @@ const centerBar1Option = ref({
       "show": true,
       "axisLabel": {
         "show": true,
-        fontSize: 14,
-        color: "rgba(255,255,255,.6)"
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       },
       axisTick: { show: false },
-      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
-      splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },//右线色
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },//x轴线
     },
   ],
   "series": [
@@ -595,7 +619,7 @@ const centerLine2Option = ref({
   grid: {
     left: '0',
     top: '30',
-    right: '10',
+    right: '20',
     bottom: '20',
     containLabel: true
   },
@@ -617,14 +641,14 @@ const centerLine2Option = ref({
     axisLabel: {
       rotate: -90,
       textStyle: {
-        color: "rgba(255,255,255,.6)",
-        fontSize: 14,
-
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       },
     },
     axisLine: {
       lineStyle: {
-        color: 'rgba(255,255,255,.1)'
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
 
     },
@@ -644,20 +668,22 @@ const centerLine2Option = ref({
     // splitNumber: 6,
     axisLine: {
       lineStyle: {
-        color: 'rgba(255,255,255,.1)'
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     },
     axisLabel: {
       formatter: "{value}",
       textStyle: {
-        color: "rgba(255,255,255,.6)",
-        fontSize: 14,
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       },
     },
-
     splitLine: {
+      show: false,
       lineStyle: {
-        color: 'rgba(255,255,255,.1)'
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       }
     }
   }],
@@ -721,7 +747,7 @@ const rightBar1Option = ref({
   }, "grid": {
     "top": "15%",
     "right": "10%",
-    "bottom": "20",
+    "bottom": "30",
     "left": "10%",
   },
   legend: {
@@ -729,7 +755,8 @@ const rightBar1Option = ref({
     right: 'center',
     top: 0,
     textStyle: {
-      color: "#fff"
+      color: 'rgba(255,255,255,.7)',
+      fontSize: '0.2rem',
     },
     itemWidth: 12,
     itemHeight: 10,
@@ -739,9 +766,17 @@ const rightBar1Option = ref({
       "type": "category",
 
       data: [],
-      axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },
       axisLabel: {
-        textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
+        textStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        },
       },
 
     },
@@ -754,10 +789,16 @@ const rightBar1Option = ref({
       axisTick: { show: false },
       "axisLabel": {
         "show": true,
-        color: "rgba(255,255,255,.6)"
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
 
       },
-      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },//左线色
 
     },
     {
@@ -768,10 +809,22 @@ const rightBar1Option = ref({
       "axisLabel": {
         "show": true,
         formatter: "{value}",
-        color: "rgba(255,255,255,.6)"
+        color: 'rgba(255,255,255,.7)',
+        fontSize: '0.2rem',
       },
-      axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
-      splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },//右线色
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(255,255,255,.7)',
+          fontSize: '0.2rem',
+        }
+      },//x轴线
     },
   ],
   "series": [
@@ -842,13 +895,13 @@ const rightPie2Option = ref({
     x: 'center',
     y: '50%',
     textStyle: {
-      color: '#fff',
-      fontSize: 22,
+      color: 'rgba(255,255,255,.7)',
+      fontSize: '0.2rem',
       lineHeight: 10,
     },
     subtextStyle: {
-      color: '#90979c',
-      fontSize: 16,
+      color: 'rgba(255,255,255,.7)',
+      fontSize: '0.2rem',
       lineHeight: 10,
 
     },
@@ -880,13 +933,12 @@ const rightPie2Option = ref({
         rich: {
           c: {
             color: 'rgb(241,246,104)',
-            fontSize: 20,
-            fontWeight: 'bold',
+            fontSize: '0.2rem',
             lineHeight: 5
           },
           b: {
-            color: 'rgb(98,137,169)',
-            fontSize: 14,
+            color: 'rgba(255,255,255,.7)',
+            fontSize: '0.2rem',
             height: 44
           },
         },
@@ -896,6 +948,7 @@ const rightPie2Option = ref({
       normal: {
         lineStyle: {
           color: 'rgb(98,137,169)',
+          fontSize: '0.2rem',
         },
         smooth: 0.2,
         length: 10,
@@ -1034,7 +1087,7 @@ li {
     }
 
     .alltitle {
-      font-size: .25rem;
+      font-size: .225rem;
       color: #fff;
       line-height: .5rem;
       position: relative;

src/views/evaluate/evaluateList/index.vue

@@ -31,7 +31,14 @@
         <el-table-column label="场次名称" align="center" prop="sessionName" />
         <el-table-column label="量表名称 以逗号隔开" align="center" prop="scaleNames" />
 
-        <el-table-column label="班级名称/用户名称" align="center" prop="deptNames" />
+        <el-table-column label="班级名称/用户名称" align="center" prop="deptNames">
+          <template #default="scope">
+            <span>
+              {{ scope.row.deptNames.length > 0 ? scope.row.deptNames.join(',') : scope.row.userNames.join(',') }}
+            </span>
+          </template>
+        </el-table-column>
+        
         <el-table-column label="截止日期" align="center" prop="expireTime" width="180">
           <template #default="scope">
             <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>

src/views/index.vue

@@ -1,111 +1,129 @@
 <template>
   <div class="app-container">
-    <div class="item header">
-      <el-card>
-        <div class="card-header">
-          <ul>
-            <li><img :src="userStore.avatar" />{{ getGreeting() }}</li>
-            <li>
-              <el-button round>
-                <router-link target="_blank" to="/bigScreen">
-                  <el-icon>
-                    <FullScreen />
-                  </el-icon><span>可视大屏</span>
-                </router-link>
-              </el-button>
-            </li>
-          </ul>
-        </div>
-      </el-card>
-    </div>
+    <el-card>
+      <el-row justify="space-around" align="center">
+        <el-col :span="12">
+          <img class="avater" :src="userStore.avatar" />{{ getGreeting() }}
+        </el-col>
+        <el-col :span="12" class="screen">
+          <el-button round>
+            <router-link target="_blank" to="/bigScreen">
+              <el-icon>
+                <FullScreen />
+              </el-icon><span>可视大屏</span>
+            </router-link>
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <div class="item">
-      <el-card style="height: 180px;">
-        <div class="card-content">
-          <div>
-            <el-icon color="#33CABB" :size="70">
-              <Avatar />
-            </el-icon>
-          </div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card>
+          <el-row justify="space-between">
+            <el-col :span="12">
+              <el-icon :size="60" color="#40C9C6">
+                <Avatar />
+              </el-icon>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-statistic title="总用户数" :value="userNum" :value-style="{ color: '#000', fontSize: '30px' }">
+                <template #title>
+                  <div class="stats-title">
+                    总用户数
+                  </div>
+                </template>
+              </el-statistic>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
 
-          <div>
-            <ul>
-              <li class="font-txt">总用户数</li>
-              <li class="font-num">{{ userNum }}</li>
-            </ul>
-          </div>
-        </div>
-      </el-card>
-    </div>
+      <el-col :span="6">
+        <el-card>
+          <el-row justify="space-between">
+            <el-col :span="12">
+              <el-icon :size="60" color="#36A3F7">
+                <Operation />
+              </el-icon>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-statistic :value="evaluationNum" :value-style="{ color: '#000', fontSize: '30px' }">
+                <template #title>
+                  <div class="stats-title">
+                    总测评数
+                  </div>
+                </template>
+              </el-statistic>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
 
-    <div class="item">
-      <el-card style="height: 180px;">
-        <div class="card-content">
-          <div>
-            <el-icon color="#15C377" :size="70">
-              <EditPen />
-            </el-icon>
-          </div>
+      <el-col :span="6">
+        <el-card>
+          <el-row justify="space-between">
+            <el-col :span="12">
+              <el-icon :size="60" color="#F4516C">
+                <Histogram />
+              </el-icon>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-statistic :value="warnNum" :value-style="{ color: '#000', fontSize: '30px' }">
+                <template #title>
+                  <div class="stats-title">
+                    总预警数
+                  </div>
+                </template>
+              </el-statistic>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
 
-          <div>
-            <ul>
-              <li class="font-txt">总测评数</li>
-              <li class="font-num">{{ evaluationNum }}</li>
-            </ul>
-          </div>
-        </div>
-      </el-card>
-    </div>
+      <el-col :span="6">
+        <el-card>
+          <el-row justify="space-between">
+            <el-col :span="12">
+              <el-icon :size="60" color="#34BFA3">
+                <HelpFilled />
+              </el-icon>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-statistic :value="interveneNum" :value-style="{ color: '#000', fontSize: '30px' }">
+                <template #title>
+                  <div class="stats-title">
+                    总干预数
+                  </div>
+                </template>
+              </el-statistic>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
 
-    <div class="item">
-      <el-card style="height: 180px;">
-        <div class="card-content">
-          <div>
-            <el-icon color="#F96868" :size="70">
-              <WarnTriangleFilled />
-            </el-icon>
-          </div>
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-card>
+          <v-chart style="height: 300px;" :option="leftPieOption" autoresize />
+        </el-card>
 
-          <div>
-            <ul>
-              <li class="font-txt">总预警数</li>
-              <li class="font-num">{{ warnNum }}</li>
-            </ul>
-          </div>
-        </div>
-      </el-card>
-    </div>
+      </el-col>
+      <el-col :span="14">
+        <el-card>
+          <v-chart style="height: 300px;" :option="centerBarOption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
 
-    <div class="item">
-      <el-card style="height: 180px;">
-        <div class="card-content">
-          <div>
-            <el-icon color="#926DDE" :size="70">
-              <Collection />
-            </el-icon>
-          </div>
-
-          <div>
-            <ul>
-              <li class="font-txt">总干预数</li>
-              <li class="font-num">{{ interveneNum }}</li>
-            </ul>
-          </div>
-        </div>
-      </el-card>
-    </div>
-
-    <div class="item item-chart">
-      <div>
-        <v-chart :option="leftPieOption" autoresize />
-      </div>
-      <div>
-        <v-chart :option="centerBarOption" autoresize />
-      </div>
-      <div>
-        <v-chart :option="rightBarOption" autoresize />
-      </div>
-    </div>
+    <el-row>
+      <el-col :span="24">
+        <el-card>
+          <v-chart style="height: 350px;" :option="rightBarOption" autoresize />
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -300,7 +318,7 @@ const centerBarOption = ref({
     splitNumber: 4,
     axisTick: { show: false },
     splitLine: {
-      show: true,
+      show: false,
       lineStyle: {
         color: '#95989D'
       }
@@ -365,7 +383,13 @@ const rightBarOption = ref({
   },
   yAxis: {
     type: 'category',
-    data: []
+    data: [],
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: '#95989D'
+      }
+    },
   },
   series: [
 
@@ -431,103 +455,32 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-/* 声明字体*/
-@font-face {
-  font-family: electronicFont;
-  src: url('@/assets/font/DS-DIGIT.TTF');
-}
-
-.font-txt {
-  color: #95989D;
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.font-num {
-  font-size: 70px;
-  color: #FF9C57;
-  text-align: center;
-  font-family: 'electronicFont';
-}
-
 .app-container {
-  width: 100%;
-  height: calc(100vh - 85px);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-rows: 150px 180px 400px;
-  gap: 5px;
-  background-color: #F3F3F3;
+  padding: 10px;
 
-  ul {
-    list-style-type: none;
+  .el-card {
+    margin-bottom: 5px;
   }
 
-  .header {
-    grid-column: 1 / 5;
-
-    .card-header {
-      ul {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        img {
-          height: 80px;
-          border-radius: 50%;
-          margin-right: 20px;
-          vertical-align: middle;
-        }
-      }
-    }
+  .avater {
+    height: 80px;
+    border-radius: 50%;
+    margin-right: 20px;
+    vertical-align: middle;
   }
 
-  .item-chart {
-    margin-top: 6px;
-    grid-column: 1 / 5;
-    display: flex;
-    justify-content: space-between;
-
-    div {
-      flex: 0 1 33%;
-      background-color: #fff;
-      padding: 20px 0;
-    }
+  .screen {
+    line-height: 80px;
+    text-align: right;
   }
 
-  .item {
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: #95989D;
-      font-size: 16px;
-      font-weight: bold;
-    }
-
-    .card-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .card-item-1 {
-      display: flex;
-      justify-content: space-between;
-      font-size: 20px;
-      padding: 20px 0;
-    }
-
-    .card-item-2 {
-      display: flex;
-      justify-content: space-between;
-      font-size: 18px;
-      color: #95989D;
-      padding: 10px 0;
-      margin-left: -10px;
-    }
+  .stats-title {
+    font-size: 18px;
+    padding-bottom: 10px;
+  }
 
+  .right {
+    text-align: right;
   }
 }
 </style>