feat:添加农场确权页面

src/components/fnHeader.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   showDate:{
     type:Boolean,
     defalut:false
-  }
+  },
 })
 </script>
 

src/styles/common.scss

@@ -257,13 +257,12 @@ div{
 ::-webkit-scrollbar {
     display: block !important;
     /* 滚动条整体样式 */
-    height: 10px;
-    width: 10px;
-
+    height: 4px;
+    width: 4px;
 }
 ::-webkit-scrollbar-thumb {
     /* 滚动条里面小方块 */
-    background: #689D9B;
+    background: #444444;
     border-radius: 6px;
 }
 

src/views/authentic/authenticMap.js

@@ -0,0 +1,28 @@
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import * as util from "@/common/ol_common.js";
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature";
+import VectorLayer from "ol/layer/Vector.js";
+import WKT from "ol/format/WKT.js";
+import ScaleLine from "ol/control/ScaleLine";
+import { useRouter } from "vue-router";
+
+/**
+ * @description 地图层对象
+ */
+class AuthenticMap {
+  constructor() {
+    let that = this;
+    let vectorStyle = new KMap.VectorStyle();
+    this.vectorStyle = vectorStyle;
+  }
+
+  initMap(location, target) {
+    let level = 16;
+    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
+  }
+}
+
+export default AuthenticMap;

src/views/authentic/index.vue

@@ -1,13 +1,382 @@
 <template>
-    <div>
-1111
+  <div class="base-container">
+    <fnHeader></fnHeader>
+    <div class="top-bg"></div>
+    <div class="top">
+      <div class="back btn" @click="goBack">
+        <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
+        <span>返回</span>
+      </div>
+      <div class="search">
+        <el-input
+          class="v-input"
+          v-model="input"
+          placeholder="搜索地区"
+          clearable
+        >
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <div class="upload btn">
+          <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
+          <span>导出</span>
+        </div>
+      </div>
     </div>
+    <div class="content">
+      <div class="box">
+        <div class="map-box">
+          <div ref="mapRef" class="map"></div>
+        </div>
+        <div class="tool-group">
+          <div class="btn">
+            <img
+              class="icon"
+              src="@/assets/images/common/back-black-icon.png"
+              alt=""
+            />
+            <span>撤销</span>
+          </div>
+          <div class="btn">
+            <el-icon size="15"><CloseBold /></el-icon>
+            <span>删除点</span>
+          </div>
+          <div class="btn delete">
+            <el-icon size="15" color="#fff"><CloseBold /></el-icon>
+            <span>删除地块</span>
+          </div>
+        </div>
+        <div class="edit-popup">
+          <div class="edit-title">
+            <img src="@/assets/images/common/chart-icon.png" alt="" />
+            <span>地块属性</span>
+          </div>
+          <div class="edit-cont">
+            <el-form
+              :inline="true"
+              :model="formInline"
+              label-position="top"
+              class="form-inline"
+            >
+              <el-form-item label="农场地址">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="请输入农场地址"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="农场名称">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="请输入农场名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <el-input v-model="formInline.user" placeholder="" clearable />
+              </el-form-item>
+              <el-form-item label="农场面积">
+                <el-input v-model="formInline.user" placeholder="" clearable />
+              </el-form-item>
+              <el-form-item label="作物物种">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="请输入作物物种"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="客户姓名">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="请输入姓名"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="联系电话">
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="请输入联系电话"
+                  clearable
+                />
+              </el-form-item>
+            </el-form>
+            <div class="list-box">
+              <span>边界点经纬度</span>
+              <div class="list-cont">
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+                <div class="list-item">
+                  <span>A1</span>
+                  <div class="item-box">北纬23.039，东经113.388</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="edit-footer">
+            <div @click="onCancel" class="btn cancel">取消</div>
+            <div @click="onSubmit" class="btn save">保存</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { onMounted, ref, reactive } from "vue";
+import fnHeader from "@/components/fnHeader.vue";
+import AuthenticMap from "./authenticMap";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+let authenticMap = new AuthenticMap();
+const mapRef = ref();
+onMounted(() => {
+  let location = "POINT (113.78049350268851 23.419886891845312)";
+  authenticMap.initMap(location, mapRef.value);
+});
+
+const input = ref("");
 
+const formInline = reactive({
+  user: "",
+  region: "",
+  date: "",
+});
+
+const onSubmit = () => {
+  console.log("submit!");
+};
+
+const goBack = () => {
+  router.go(-1);
+};
 </script>
 
 <style lang="scss" scoped>
+.base-container {
+  width: 100%;
+  height: 100vh;
+  color: #fff;
+  box-sizing: border-box;
+  z-index: 1;
+  position: relative;
+  .top-bg {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 74px;
+    background: #101010;
+    z-index: -1;
+  }
+  .btn {
+    display: flex;
+    align-items: center;
+    padding: 6px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    .icon {
+      width: 13px;
+      height: 13px;
+    }
+    span {
+      margin-left: 10px;
+    }
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    background: #101010;
+    padding: 17px 20px 0 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .back {
+      border: 1px solid rgba(255, 255, 255, 0.4);
+    }
+    .search {
+      display: flex;
+      .v-input {
+        width: 300px;
+        ::v-deep {
+          .el-input__wrapper {
+            background: #101010;
+            box-shadow: none;
+            border: 1px solid rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+      .upload {
+        background: #2199f8;
+        margin-left: 25px;
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 74px - 40px);
+    box-sizing: border-box;
+    background: #101010;
+    padding: 13px 20px 20px 20px;
+    .box {
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      border-radius: 8px;
+      padding: 20px;
+      box-sizing: border-box;
+      background: #232323;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .map-box {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        .map {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .tool-group {
+        position: absolute;
+        display: flex;
+        right: calc(500px + 36px);
+        top: 42px;
+        .btn {
+          background: #fff;
+          color: #000;
+          margin-right: 10px;
+        }
+        .delete {
+          background: #e45c5c;
+          color: #fff;
+        }
+      }
+      .edit-popup {
+        width: 500px;
+        height: calc(100% - 53px - 20px);
+        position: absolute;
+        top: 36px;
+        right: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        border-radius: 8px;
+        background: #232323;
+        .edit-title {
+          padding: 12px 10px;
+          background: rgba(68, 68, 68, 0.4);
+          border-bottom: 1px solid rgba(68, 68, 68, 0.4);
+          display: flex;
+          align-items: center;
+          span {
+            margin-left: 8px;
+            font-size: 18px;
+            font-family: "SOURCEHANTIFINE";
+          }
+        }
+        .edit-cont {
+          padding: 16px;
+          width: calc(100% - 32px);
+          height: calc(100% - 64px - 84px);
+          .form-inline {
+            ::v-deep {
+              .el-input {
+                width: 200px;
+                --el-input-placeholder-color: #666666;
+              }
+              .el-form-item__label {
+                color: #bbbbbb;
+              }
+              .el-input__wrapper {
+                background: #232323;
+                border: 1px solid #444444;
+                box-shadow: none;
+                .el-input__inner {
+                  color: #fff;
+                }
+              }
+            }
+          }
+          .list-box {
+            width: 100%;
+            span {
+              color: #bbbbbb;
+            }
+            .list-cont {
+              width: 100%;
+              height: 234px;
+              border-radius: 4px;
+              margin-top: 5px;
+              background: rgba(68, 68, 68, 0.4);
+              display: flex;
+              flex-wrap: wrap;
+              align-content: flex-start;
+              justify-content: space-between;
+              padding: 12px 16px;
+              box-sizing: border-box;
+              overflow-y: auto;
 
-</style>
+              .list-item {
+                width: 47.5%;
+                margin-bottom: 12px;
+                .item-box {
+                  padding: 8px;
+                  border: 1px solid #444444;
+                  border-radius: 4px;
+                  margin-top: 5px;
+                }
+              }
+            }
+          }
+        }
+        .edit-footer {
+          width: 100%;
+          height: 64px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          box-sizing: border-box;
+          padding: 12px 16px;
+          border-top: 1px solid rgba(68, 68, 68, 0.4);
+          background: rgba(68, 68, 68, 0.4);
+          .btn {
+            padding: 10px 35px;
+          }
+          .cancel {
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            margin-right: 16px;
+          }
+          .save {
+            background: #2199f8;
+          }
+        }
+      }
+    }
+  }
+}
+</style>