Parcourir la source

style:内容管理模块-页面数据统计显示优化

lihao16 il y a 2 mois
Parent
commit
643decf093

+ 21 - 0
smsb-plus-ui/src/views/smsb/itemPlayLine/index.vue

@@ -102,6 +102,12 @@
                         <VideoPlay/>
                       </el-icon>
                     </div>
+                    <div v-else-if="scope.row.type === 4">
+                      <!-- PPT类型 -->
+                      <el-icon :size="40" @click="downloadFile(scope.row.fileUrl)" style="cursor: pointer;">
+                        <Document />
+                      </el-icon>
+                    </div>
                   </template>
                 </el-table-column>
               </el-table>
@@ -221,7 +227,22 @@ const handlePlayLine = async (row: DeviceVO) => {
 const handleDateRangeChange = () => {
   getPlayLineData();
 }
+const downloadFile = (fileUrl) => {
+  if (fileUrl) {
+    // 创建一个隐藏的a标签来触发下载
+    const link = document.createElement('a');
+    link.href = fileUrl;
+    link.download = ''; // 浏览器会自动使用URL中的文件名
+    link.target = '_blank';
+    link.style.display = 'none';
 
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } else {
+    proxy?.$modal.msgError('文件地址不存在,无法下载');
+  }
+};
 const getPlayLineData = async () => {
   sourceList.value = [];
   // 初始化 sourceListQuery 或创建一个新的对象

+ 148 - 20
smsb-plus-ui/src/views/smsb/itemPush/index.vue

@@ -3,37 +3,69 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover" :style="{ height: '70px' }">
-          <el-row :gutter="20" align="middle">
-            <!-- 节目总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="totalNum">
+        <el-card shadow="hover" class="statistic-card">
+          <el-row :gutter="20" justify="space-between">
+            <!-- 总发布数 -->
+            <el-col :span="6">
+              <el-statistic :value="totalNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">总发布数</div>
+                  <div class="statistic-title">
+                    <el-icon><Collection /></el-icon>
+                    <span>总发布数</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon total-icon">
+                    <el-icon><Promotion /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
-            <!-- 轮播总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="lbNum">
+            <!-- 轮播组发布 -->
+            <el-col :span="6">
+              <el-statistic :value="lbNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">轮播组发布</div>
+                  <div class="statistic-title">
+                    <el-icon><RefreshRight /></el-icon>
+                    <span>轮播组发布</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon carousel-icon">
+                    <el-icon><Refresh /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
-            <!-- 节目总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="jmNum">
+            <!-- 分屏组发布 -->
+            <el-col :span="6">
+              <el-statistic :value="jmNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">分屏组发布</div>
+                  <div class="statistic-title">
+                    <el-icon><Grid /></el-icon>
+                    <span>分屏组发布</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon split-icon">
+                    <el-icon><Menu /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
-            <!-- 素材总数 -->
-            <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
-              <el-statistic :value="scNum">
+            <!-- 素材发布 -->
+            <el-col :span="6">
+              <el-statistic :value="scNum" class="statistic-item">
                 <template #title>
-                  <div style="display: inline-flex; align-items: center">素材发布</div>
+                  <div class="statistic-title">
+                    <el-icon><Files /></el-icon>
+                    <span>素材发布</span>
+                  </div>
+                </template>
+                <template #prefix>
+                  <div class="statistic-icon material-icon">
+                    <el-icon><Document /></el-icon>
+                  </div>
                 </template>
               </el-statistic>
             </el-col>
@@ -585,7 +617,7 @@ const handleQuery = () => {
 const handleDevice = async (row?: ItemPushVO) => {
   removeItemTag.value = false;
   const pushId = row.id;
-  deviceDialog.title = '发详情';
+  deviceDialog.title = '发详情';
   deviceDialog.visible = true;
   dialogQueryParams.value.pushId = pushId;
   // dialogQueryParams.value.pageSize = 1000;
@@ -600,7 +632,7 @@ const handleRemoveItem = async (row?: ItemPushVO) => {
   removeButtonTag.value = true;
   removeIds.value = [];
   const pushId = row.id;
-  deviceDialog.title = '内容下架';
+  deviceDialog.title = '下架';
   deviceDialog.visible = true;
   dialogQueryParams.value.pushId = pushId;
   removePushId.value = pushId;
@@ -805,4 +837,100 @@ onMounted(() => {
 .dialog-footer {
   text-align: right;
 }
+.statistic-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebeef5;
+  padding: 15px 0;
+  height: 120px;
+}
+
+.statistic-item {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.statistic-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.statistic-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  color: white;
+  font-size: 18px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.total-icon {
+  background: linear-gradient(135deg, #409eff, #2282ff);
+}
+
+.carousel-icon {
+  background: linear-gradient(135deg, #e6a23c, #d48c1f);
+}
+
+.split-icon {
+  background: linear-gradient(135deg, #67c23a, #48ab1f);
+}
+
+.material-icon {
+  background: linear-gradient(135deg, #909399, #73767a);
+}
+
+:deep(.statistic-item .el-statistic__content) {
+  font-size: 24px;
+  font-weight: 700;
+  color: #303133;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  :deep(.el-col) {
+    flex: 0 0 50%;
+    max-width: 50%;
+    margin-bottom: 10px;
+  }
+
+  :deep(.el-row) {
+    flex-wrap: wrap;
+  }
+
+  .statistic-card {
+    padding: 10px 0;
+  }
+}
+
+@media (max-width: 768px) {
+  :deep(.el-col) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .statistic-title {
+    font-size: 13px;
+  }
+
+  .statistic-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  :deep(.statistic-item .el-statistic__content) {
+    font-size: 20px;
+  }
+}
 </style>

+ 2 - 2
smsb-plus-ui/src/views/smsb/itemReview/index.vue

@@ -31,7 +31,7 @@
       <el-tabs type="border-card" v-model="activeName" @tab-click="handleClickTab">
         <el-tab-pane label="内容审核" name="need">
 
-          <el-table v-loading="loading" :data="itemPushList">
+          <el-table v-loading="loading" :data="itemPushList" style="height: 71vh">
             <el-table-column label="ID" align="left" prop="id" width="200"/>
             <el-table-column label="名称" align="left" prop="name" width="700"/>
             <el-table-column label="优先级" align="center" width="100" prop="level">
@@ -65,7 +65,7 @@
                       v-model:limit="queryParams.pageSize" @pagination="getList" />
         </el-tab-pane>
         <el-tab-pane label="我的已办" name="finish">
-          <el-table v-loading="loading" :data="itemPushList">
+          <el-table v-loading="loading" :data="itemPushList" style="height: 71vh">
             <el-table-column label="ID" align="left" prop="id" width="200"/>
             <el-table-column label="名称" align="left" prop="name" width="700"/>
             <el-table-column label="优先级" align="center" width="100" prop="level">