地块边界文件展示位置增加地块信息展示

src/components/customComponent/CdUpload.vue

@@ -50,7 +50,63 @@
     </template>
     <template #JUploadBjMap="{}">
       <div class="flex">
-        <Mapbj :data="MapbjInfo" v-if="mapShow" style="height:400px;"/>
+        <div class="dkInfo" v-if="mapShow">
+          <div class="header">
+            <div class="infoList">
+              <div class="name">字段名称</div>
+              <div class="infoString">字段代码</div>
+              <div class="infoVal">字段值</div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="infoList">
+              <div class="name">地块名称</div>
+              <div class="infoString">WRDKMC</div>
+              <div class="infoVal">{{dkxx?.wrdkmc}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">地块代码</div>
+              <div class="infoString">WRDKBM</div>
+              <div class="infoVal">{{dkxx?.wrdkbm}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">行政区代码</div>
+              <div class="infoString">COUNTRYCODE</div>
+              <div class="infoVal">{{dkxx?.countryCode}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">地块地址</div>
+              <div class="infoString">WRDKDZ</div>
+              <div class="infoVal">{{dkxx?.wrdkdz}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">地块面积</div>
+              <div class="infoString">ZDMJ</div>
+              <div class="infoVal">{{dkxx?.zdmj}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">所处阶段编码</div>
+              <div class="infoString">SCJDBM</div>
+              <div class="infoVal">{{dkxx?.scjdbm}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">生产日期</div>
+              <div class="infoString">TSANP</div>
+              <div class="infoVal">{{dkxx?.tsamp}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">生产单位</div>
+              <div class="infoString">SYQDWMC</div>
+              <div class="infoVal">{{dkxx?.syqdwmc}}</div>
+            </div>
+            <div class="infoList">
+              <div class="name">备注</div>
+              <div class="infoString">BZ</div>
+              <div class="infoVal">{{dkxx?.bz}}</div>
+            </div>
+          </div>
+        </div>
+        <Mapbj :data="MapbjInfo" v-if="mapShow" style="height:500px;"/>
       </div>
     </template>
   </BasicForm>
@@ -950,3 +1006,41 @@
     width: 100%;
   }
 </style>
+
+<style lang="less" scoped>
+.dkInfo {
+  position: absolute;
+  right: 4px;
+  top: 6px;
+  width: 700px;
+  height: 342px;
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 1);
+  border: 1px solid #333333;
+  .header, .content {
+    .infoList {
+      display: flex;
+      align-items: center;
+      line-height: 32px;
+      font-size: 16px;
+      border-bottom: 2px solid #333333;
+      .name,.infoString {
+        width: 120px;
+        border-right: 2px solid #333333;
+        padding-left: 4px;
+      }
+      .infoVal {
+        flex: 1;
+        width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-left: 4px;
+      }
+    }
+  }
+  .header {
+    background-color: #438eb9 ;
+  }
+}
+</style>