Explorar o código

style:页面美化

lihao16 hai 2 meses
pai
achega
1808f5dba1

+ 1 - 1
smsb-plus-ui/src/views/login.vue

@@ -131,7 +131,7 @@ const handleLogin = () => {
       const [err] = await to(userStore.login(loginForm.value));
       if (!err) {
         // const redirectUrl = redirect.value || '/';
-        const redirectUrl = '/device/device';
+        const redirectUrl = '/dashboard/device';
         await router.push(redirectUrl);
         loading.value = false;
       } else {

+ 11 - 9
smsb-plus-ui/src/views/smsb/dashboard/device.vue

@@ -384,17 +384,19 @@ const alarmCountData = async () => {
         barWidth: '60%',
         itemStyle: {
           borderRadius: 4,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {offset: 0, color: '#67c23a'},
-            {offset: 1, color: '#85ce61'}
-          ])
+          color: function(params: any) {
+            // 根据索引设置不同颜色
+            const colors = ['#67c23a', '#e6a23c', '#f56c6c']; // 绿色、黄色、红色
+            return colors[params.dataIndex] || '#67c23a'; // 默认绿色
+          }
         },
         emphasis: {
           itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {offset: 0, color: '#52c41a'},
-              {offset: 1, color: '#73d13d'}
-            ])
+            color: function(params: any) {
+              // 悬停时的颜色
+              const colors = ['#52c41a', '#d48c1f', '#e34e4e']; // 深一些的颜色
+              return colors[params.dataIndex] || '#52c41a';
+            }
           }
         },
         animationDuration: 1000
@@ -709,7 +711,7 @@ onMounted(() => {
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 98%;
 }
 
 .alarm-list-card:hover {

+ 4 - 4
smsb-plus-ui/src/views/smsb/dashboard/play.vue

@@ -307,7 +307,7 @@ body,
 }
 
 .chart-placeholder {
-  height: 250px;
+  height: 230px;
 }
 
 .margin-top-20 {
@@ -316,12 +316,12 @@ body,
 
 /* Disk Usage Card */
 .disk-card {
-  height: 370px;
+  height: 300px;
 }
 
 .disk-info {
   text-align: center;
-  margin: 30px 0;
+  margin: 10px 0;
 }
 
 .disk-info p {
@@ -357,7 +357,7 @@ body,
 
 /* Top 5 Card */
 .top5-card {
-  height: 694px; /* Allow height to adjust to content */
+  height: 605px; /* Allow height to adjust to content */
 }
 .top5-header {
   margin-bottom: 20px;

+ 4 - 9
smsb-plus-ui/src/views/smsb/dashboard/play_info.vue

@@ -45,12 +45,10 @@
       </el-row>
     </el-header>
 
-    <el-main style="padding: 0 20px;">
+    <el-main style="padding: 0 20px;height: 80vh">
       <el-card shadow="hover">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-row justify="space-between" align="middle" style="width: 100%">
-            <el-col :span="20">
-              <el-space wrap>
                 <el-form-item prop="sourceName">
                   <el-input v-model="queryParams.sourceName" placeholder="请输入文件名称" @input="getRecordList" clearable />
                 </el-form-item>
@@ -73,11 +71,8 @@
                   <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
                                   end-placeholder="结束日期" :disabled="diyFlag" :clearable="false" @change="handleDateRangeChange" />
                 </el-form-item>
-              </el-space>
-            </el-col>
-            <el-col :span="4" style="text-align: right;">
-              <el-button type="warning" plain icon="Download" style="margin-bottom: 15px" @click="handleExport">报表导出</el-button>
-            </el-col>
+            <el-button type="warning" plain icon="Download" style="margin-bottom: 15px" @click="handleExport">报表导出
+            </el-button>
           </el-row>
         </el-form>
 
@@ -181,7 +176,7 @@ import {
 } from '@/api/smsb/source/play_record';
 import {SourcePlayRecordForm, SourcePlayRecordQuery, SourcePlayRecordVO} from '@/api/smsb/source/play_record_type';
 import {onUnmounted} from 'vue';
-import { Picture, VideoCameraFilled } from '@element-plus/icons-vue';
+import {Picture, VideoCameraFilled} from '@element-plus/icons-vue';
 
 const {proxy} = getCurrentInstance() as ComponentInternalInstance;
 const {smsb_source_classify, smsb_source_type, smsb_item_type} = toRefs<any>(