20251128修改前端界面

src/components/DataManagement/DataManagement.vue

@@ -26,12 +26,11 @@
           </div>
         </div>
         <div id="leftPanelScroll">
-          <div class="left-content">
-            <el-tabs v-model="activeName">
+          <el-tabs v-model="activeName">
               <el-tab-pane label="数据查看" name="second">
                 <div>
-                  <p id="mylabel">
-                    任务：
+                  <p class="mylabel">
+                    <span class="label-text">任务：</span>
                     <el-select
                       v-model="task"
                       size="small"
@@ -50,8 +49,8 @@
                       ></el-option>
                     </el-select>
                   </p>
-                  <p id="mylabel">
-                    表：
+                  <p class="mylabel">
+                    <span class="label-text">表：</span>
                     <el-select
                       id="sTable"
                       v-model="table"
@@ -70,8 +69,8 @@
                       ></el-option>
                     </el-select>
                   </p>
-                  <p id="mylabel">
-                    人员：
+                  <p class="mylabel">
+                    <span class="label-text">人员：</span>
                     <el-select
                       id="sUser"
                       v-model="userId"
@@ -100,10 +99,13 @@
                   >确定
                   </el-button
                   >
+                  <!-- 显示要素信息：属性、照片和视频 
+                  <div v-if="Info && Object.keys(Info).length > 0" style="margin-top: 20px">
+                    <featureInfo :data="Info" style="margin: 0 auto"/>
+                  </div>-->
                 </div>
               </el-tab-pane>
             </el-tabs>
-            <el-divider></el-divider>
             <div id="editionContainer">
               <el-tabs v-model="activeName1">
                 <el-tab-pane label="版本回退" name="first1">
@@ -235,7 +237,6 @@
                 </el-tab-pane>
               </el-tabs>
             </div>
-          </div>
         </div>
       </div>
     </transition>
@@ -870,10 +871,8 @@ export default {
             }
           }
 
-          // 确保在子表模式下也获取并显示要素属性
-          if (that.ifsub && that.activeName1 === 'first1') {
-            that.getFeatureData()
-          }
+          // 获取并显示要素属性（无论哪个标签页都获取）
+          that.getFeatureData()
         }
       })
       this.map.addInteraction(this.selectclick)
@@ -1160,19 +1159,28 @@ export default {
             var jsondata = response.data.data
             var imagedata = []
             var videodata = []
-            for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
-              if (
-                jsondata.mediaFileURLs[i].substring(
-                  jsondata.mediaFileURLs[i].length - 3
-                ) === 'jpg'
-              ) {
-                imagedata.push(jsondata.mediaFileURLs[i])
-              } else if (
-                jsondata.mediaFileURLs[i].substring(
-                  jsondata.mediaFileURLs[i].length - 3
-                ) === 'avi'
-              ) {
-                videodata.push(jsondata.mediaFileURLs[i])
+            // 处理媒体文件URL
+            if (jsondata.mediaFileURLs && Array.isArray(jsondata.mediaFileURLs)) {
+              for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
+                var url = jsondata.mediaFileURLs[i]
+                if (!url) continue
+                
+                // 获取文件扩展名（支持多种格式）
+                var urlLower = url.toLowerCase()
+                var ext = ''
+                var lastDot = urlLower.lastIndexOf('.')
+                if (lastDot > 0) {
+                  ext = urlLower.substring(lastDot + 1)
+                }
+                
+                // 图片格式：jpg, jpeg, png, gif, bmp, webp
+                if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
+                  imagedata.push(url)
+                }
+                // 视频格式：avi, mp4, mov, wmv, flv, mkv, webm
+                else if (['avi', 'mp4', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext)) {
+                  videodata.push(url)
+                }
               }
             }
             jsondata.imagedata = imagedata
@@ -1740,6 +1748,10 @@ export default {
         if (this.pageLayer && this.activeName1 === 'second1') {
           this.setCurrentStyle1(1)
         }
+        // 在"数据查看"标签页中，当选择要素时获取要素数据
+        if (this.activeName === 'second' && this.currentFeatureId && this.task && this.table) {
+          this.getFeatureData()
+        }
       }
     },
     vectorSource: {
@@ -1890,9 +1902,33 @@ export default {
 }
 
 .mylabel {
-  font-family: PingFangSC-Medium;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0 0 8px 0;
+  padding: 4px 14px;
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
   font-size: 14px;
-  color: #264672;
+  font-weight: 600;
+  color: #1B5E20;
+  background: rgba(232, 245, 233, 0.85);
+  border: 1px solid rgba(129, 199, 132, 0.4);
+  border-radius: 12px;
+  letter-spacing: 0.5px;
+  line-height: 1.4;
+}
+
+.mylabel .label-text {
+  display: inline-block;
+  min-width: 60px;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.mylabel ::v-deep .el-select,
+.mylabel ::v-deep .el-input {
+  flex: 1;
+  min-width: 220px;
 }
 
 .el-icon-circle-close {