From 4f55a1ffe44993154d572f310192c0f3c4474372 Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Sun, 29 Sep 2024 14:47:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E4=BA=BA=E5=91=98=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/mapjson/Chaangshazhen/line.geojson |   1 +
 .../components/tabFour/index.vue              |  10 -
 .../components/tabThree/index.vue             | 104 ++++--
 .../components/tabTwo/index.vue               | 341 +++++++++++++++++-
 .../Xinxiguanli/zhongdianxiangqing/index.vue  |   3 +
 5 files changed, 396 insertions(+), 63 deletions(-)
 create mode 100644 src/assets/mapjson/Chaangshazhen/line.geojson

diff --git a/src/assets/mapjson/Chaangshazhen/line.geojson b/src/assets/mapjson/Chaangshazhen/line.geojson
new file mode 100644
index 0000000..c080c6b
--- /dev/null
+++ b/src/assets/mapjson/Chaangshazhen/line.geojson
@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","id":46014,"properties":{"_draw_type":"line"},"geometry":{"type":"LineString","coordinates":[[121.2120415,32.45580964],[121.27267832,32.43245699],[121.29243324,32.40518198]]},"bbox":[121.2120415,32.40518198,121.29243324,32.45580964]}]}
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
index 80976e0..9759ed6 100644
--- a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabFour/index.vue
@@ -76,16 +76,6 @@ export default {
         this.loading = false;
       })
     },
-    formatDate(dateString,id) {
-      const year = dateString.slice(0, 4);
-      const month = dateString.slice(4, 6);
-      const day = dateString.slice(6, 8);
-      if(id == 1) {
-        return `${year}年${month}月${day}日`;
-      } else {
-        return `${year}-${month}-${day}`;
-      }
-    }
   },
 }
 </script>
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
index e7d622b..b468f33 100644
--- a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
@@ -49,20 +49,28 @@
     <el-row style="margin-top: 20px;">
       <div style="display: flex;">
         <div>轨迹地图：</div>
-        <div id="gjMap"></div>
+        <div id="gjMap">
+          <el-amap
+            ref="map"
+            map-style="amap://styles/normal"
+            :center="center"
+            :zoom="zoom"
+            :zooms="zooms"
+            v-loading="mapLoading"
+            @init="init"
+            :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
+            class="amap-demo"
+          ></el-amap>
+        </div>
       </div>
     </el-row>
   </div>
 </template>
 <script>
+import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
+import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
 export default {
   name:"tabThree",
-  props:{
-    id:{
-      type:Number,
-      default:null,
-    }
-  },
   data() {
     return {
       activities: [],
@@ -71,47 +79,72 @@ export default {
         fromTime:"",
         toTime:""
       },
+      zoom: 12,
+      zooms:[10,16],
+      center: [121.298563, 32.451807],
+      mapLoading:false,
+      map:null,
+      layers:{
+        layer:null,
+      },
     }
   },
   mounted(){
   },
   methods:{
+    // 查询
     searchList() {
+      console.log(this.queryTime);
     },
     // 重置
     resetTwo() {
+      this.queryTime = {
+        fromTime:"",
+        toTime:""
+      }
     },
-    // 获取备忘录列表
     getList() {
-      this.loading = true;
-      jProjectFund(this.id).then(res=>{
-        let arr = [];
-        res.data.forEach(element => {
-          let obj = {};
-          obj.size = 'large';
-          obj.icon = 'icon iconfont icon-jc-kong-yuan';
-          obj.fundAmount = element.fundAmount;
-          obj.appropriationTime = element.appropriationTime;
-          arr.push(obj);
-        });
-        this.activities = arr;
-        this.loading = false;
-      }).catch((err)=>{
-        // console.log(err);
-        this.activities = [];
-        this.loading = false;
+    },
+    // 地图初始化
+    init(map){
+      // console.log(map);
+      this.map = map;
+      map.setMapStyle("amap://styles/normal");
+      this.layers.layer = new AMap.OverlayGroup();
+      this.$nextTick(() => {
+        var geojson1 = new AMap.Polygon({
+          path:changshazhen.features[0].geometry.coordinates[0][0],
+          strokeColor: '#F44444', 
+          fillColor: '#F44444',
+          fillOpacity: 0.2,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var geojson2 = new AMap.Polygon({
+          path:changshazhen.features[1].geometry.coordinates[0][0],
+          strokeColor: '#F44444', 
+          fillColor: '#F44444',
+          fillOpacity: 0.2,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var showLine = new AMap.Polyline({
+          path: line.features[0].geometry.coordinates,
+          strokeWeight: 6,
+          strokeColor: '#F44444',
+          strokeOpacity: 1,
+          // 开启箭头
+          // showDir: true,
+        })
+        this.layers.layer.addOverlay(geojson1);
+        this.layers.layer.addOverlay(geojson2);
+        this.layers.layer.addOverlay(showLine);
+        this.map.add(this.layers.layer);
+        map.setFitView();
       })
     },
-    formatDate(dateString,id) {
-      const year = dateString.slice(0, 4);
-      const month = dateString.slice(4, 6);
-      const day = dateString.slice(6, 8);
-      if(id == 1) {
-        return `${year}年${month}月${day}日`;
-      } else {
-        return `${year}-${month}-${day}`;
-      }
-    }
   },
 }
 </script>
@@ -209,6 +242,5 @@ export default {
 #gjMap {
   width: 700px;
   height: 400px;
-  background-color: red;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue
index 9dca777..d24bc1e 100644
--- a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabTwo/index.vue
@@ -1,36 +1,171 @@
 <template>
   <div class="L-unitInfo">
-    <el-row>
+    <el-row style="height: 100%;">
       <el-col :span="12" class="left-img-box">
         <div class="img-top-box">
           <div class="enterprise-header">
             <span class="dataCloudMap-birght"></span>
             <div class="enterprise-header-title">正面照</div>
           </div>
+          <div class="upload-img-box">
+            <el-upload
+              :action="uploadImgUrl"
+              :headers="headers"
+              list-type="picture-card"
+              class="up-load-el"
+              :file-list="fileListOne"
+              :on-success="handleUploadSuccess"
+              :before-upload="handleBeforeUpload"
+            >
+              <i slot="default" class="el-icon-plus"></i>
+              <span>上传图片</span>
+              <div slot="file" slot-scope="{file}">
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="VUE_APP_BASE_API + file.url" alt=""
+                >
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <!-- <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleDownload(file)"
+                  >
+                    <i class="el-icon-download"></i>
+                  </span> -->
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemoveOne(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>
+              </div>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible" width="30%">
+              <img width="100%" height="auto" :src="dialogImageUrl" alt="">
+            </el-dialog>
+          </div>
         </div>
         <div class="img-bottom-box">
           <div class="enterprise-header">
             <span class="dataCloudMap-birght"></span>
             <div class="enterprise-header-title">其他照片</div>
           </div>
+          <div class="upload-img-box">
+            <el-upload
+              :action="uploadImgUrl"
+              :headers="headers"
+              list-type="picture-card"
+              class="up-load-el"
+              :file-list="fileListTwo"
+              :on-success="handleUploadSuccessTwo"
+              :before-upload="handleBeforeUpload"
+            >
+              <i slot="default" class="el-icon-plus"></i>
+              <span>上传图片</span>
+              <div slot="file" slot-scope="{file}">
+                <img
+                  class="el-upload-list__item-thumbnail"
+                  :src="VUE_APP_BASE_API + file.url" alt=""
+                >
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemoveTwo(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>
+              </div>
+            </el-upload>
+            <el-dialog :visible.sync="dialogVisible" width="30%">
+              <img width="100%" height="auto" :src="dialogImageUrl" alt="">
+            </el-dialog>
+          </div>
         </div>
       </el-col>
       <el-col :span="12" class="right-img-box">
-        <div class="enterprise-header">
-          <span class="dataCloudMap-birght"></span>
-          <div class="enterprise-header-title">身份证照片</div>
+        <div style="flex: 1;">
+          <div class="enterprise-header">
+            <span class="dataCloudMap-birght"></span>
+            <div class="enterprise-header-title">身份证照片</div>
+          </div>
+          <div class="built_in_box">
+            <!-- 身份证正面 -->
+            <el-upload
+              class="up-load-el-two up-load-el-three"
+              :action="uploadImgUrl"
+              :headers="headers"
+              :limit="1" 
+              :show-file-list="false"
+              :on-success="handleAvatarSuccessOne"
+              :before-upload="handleBeforeUpload">
+              <img v-if="imageUrlOne" :src="VUE_APP_BASE_API + imageUrlOne" class="avatar">
+              <div class="avatar-box" v-else>
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+                <span>请上传国徽侧照片</span>
+              </div>
+            </el-upload>
+            <!-- 身份证反面 -->
+            <el-upload
+              class="up-load-el-two"
+              :action="uploadImgUrl"
+              :headers="headers"
+              :limit="1" 
+              :show-file-list="false"
+              :on-success="handleAvatarSuccessTwo"
+              :before-upload="handleBeforeUpload">
+              <img v-if="imageUrlTwo" :src="VUE_APP_BASE_API + imageUrlTwo" class="avatar">
+              <div class="avatar-box" v-else>
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+                <span>请上传头像侧照片</span>
+              </div>
+            </el-upload>
+          </div>
+        </div>
+        <div class="right-btn-box">
+          <el-button type="primary" @click="save">保存</el-button>
         </div>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import { getToken } from "@/utils/auth";
 export default {
   name:"tabTwo",
   data() {
     return {
-      // 判断登陆用户是何身份⌈ 01 ： 企业  02 ： 政务 ⌋
-      userType: this.$store.state.user.userType,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      dialogVisible: false,
+      dialogImageUrl: '',
+      disabled: false,
+      // 正面照
+      fileListOne:[],
+      // 其他照片
+      fileListTwo:[],
+      // 身份证正面
+      imageUrlOne: "",
+      // 身份证反面
+      imageUrlTwo: "",
     }
   },
   props:{
@@ -42,18 +177,104 @@ export default {
     }
   },
   methods:{
-    goEnterprice(creditCode){
-      // console.log(creditCode);
-      if(this.userType == '01') {
-        this.$router.push({
-          name: 'EenterInfo',
-          query: { userId: this.info.id, creditCode: creditCode }
-        })
+    // 放大当前图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 正面照的删除
+    handleRemoveOne() {
+      const findex = this.fileListOne.map(f => f.name).indexOf(file.name);
+      if (findex > -1) {
+        this.fileListOne.splice(findex, 1);
+      }
+    },
+    // 其他照片的删除
+    handleRemoveTwo(file) {
+      const findex = this.fileListTwo.map(f => f.name).indexOf(file.name);
+      if (findex > -1) {
+        this.fileListTwo.splice(findex, 1);
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      let fileExtension = "";
+      if (file.name.lastIndexOf(".") > -1) {
+        fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+      }
+      isImg = ["png", "jpg", "jpeg"].some(type => {
+        if (file.type.indexOf(type) > -1) return true;
+        if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+        return false;
+      });
+
+      if (!isImg) {
+        this.$modal.msgError(`文件格式不正确, 请上传${["png", "jpg", "jpeg"].join("/")}图片格式文件!`);
+        return false;
+      }
+      const isLt = file.size / 1024 / 1024 < 5;
+      if (!isLt) {
+        this.$modal.msgError(`上传图片大小不能超过 ${5} MB!`);
+        return false;
+      }
+      this.$modal.loading("正在上传图片，请稍候...");
+    },
+    // 正面照上传成功钩子
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.fileListOne.push({ name: res.fileName, url: res.fileName });
+        this.$modal.closeLoading();
+      }
+    },
+    // 其他照片上传成功钩子
+    handleUploadSuccessTwo(res, file) {
+      if (res.code === 200) {
+        this.fileListTwo.push({ name: res.fileName, url: res.fileName });
+        this.$modal.closeLoading();
+      }
+    },
+    // 身份证国徽侧上传成功钩子
+    handleAvatarSuccessOne(res,file){
+      if (res.code === 200) {
+        this.imageUrlOne = res.fileName;
+        this.$modal.closeLoading();
+      }
+    },
+    // 身份证头像侧上传成功钩子
+    handleAvatarSuccessTwo(res,file){
+      if (res.code === 200) {
+        this.imageUrlTwo = res.fileName;
+        this.$modal.closeLoading();
+      }
+    },
+    // 保存按钮
+    save(){
+      if(this.imageUrlOne && this.imageUrlTwo && this.fileListOne.length) {
+        let imgArrOne = [];
+        let imgArrTwo = [];
+        if(this.fileListOne.length > 0) {
+          this.fileListOne.forEach(item=>{
+            imgArrOne.push(item.url);
+          })
+        }
+        if(this.fileListTwo.length > 0) {
+          this.fileListTwo.forEach(item=>{
+            imgArrTwo.push(item.url);
+          })
+        }
+        console.log("正面照",imgArrOne.join(','));
+        console.log("其他照片",imgArrTwo.join(','));
+        console.log("国徽侧照片",this.imageUrlOne);
+        console.log("头像侧照片",this.imageUrlTwo);
       } else {
-        this.$router.push({
-          name: 'enterpriselibraryInfo',
-          query: { userId: this.info.id, creditCode: creditCode }
-        })
+        if(!this.imageUrlOne) {
+          this.$modal.msgError(`请上传国徽侧照片`);
+        } else if(!this.imageUrlTwo) {
+          this.$modal.msgError(`请上传头像侧照片`);
+        } else if(!this.fileListOne.length) {
+          this.$modal.msgError(`请上传正面照`);
+        }
       }
     },
   },
@@ -62,6 +283,7 @@ export default {
 <style lang="scss" scoped>
 .L-unitInfo {
   padding: 10px;
+  height: 100%;
   .enterprise-header {
     display: flex;
     align-items: center;
@@ -81,9 +303,94 @@ export default {
       color: #333333;
     }
   }
+  .upload-img-box {
+    margin: 10px 0;
+    height: 170px;
+    display: flex;
+    align-items: flex-end;
+    ::v-deep .up-load-el {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      // 列表
+      .el-upload-list--picture-card {
+        margin-right: 10px;
+        max-width: calc(100% - 120px);
+        overflow-x: auto; /* 开启 X 轴滚动 */
+        white-space: nowrap; /* 防止换行 */
+      }
+       // 选择框
+      .el-upload--picture-card {
+        width: 100px;
+        height: 100px;
+        margin-bottom: 5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        line-height: 25px;
+      }
+      li {
+        margin-bottom: 0;
+      }
+    }
+  }
+  // 身份证照片
+  .built_in_box {
+    display: flex;
+    align-items: center;
+
+    ::v-deep .up-load-el-two {
+      width: 400px;
+      height: 240px;
+      
+      .el-upload {
+        width: 100%;
+        height: 100%;
+        
+        .avatar {
+          width: 100%;
+          height: 100%;
+          border-radius: 5px;
+        }
+        .avatar-box {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          border: 1px dashed #ccc;
+          border-radius: 5px;
+        }
+      }
+    }
+    ::v-deep .up-load-el-three {
+      margin-right: 40px;
+    }
+  }
+ 
   .left-img-box {
     display: flex;
     flex-direction: column;
+    .img-top-box {
+      
+    }
+    .img-bottom-box {
+    }
+  }
+  .right-img-box {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .right-btn-box {
+      display: flex;
+      justify-content: center;
+      .el-button {
+        // width: 80%;
+        width: 100px;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
index a4a9b67..0046c32 100644
--- a/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
+++ b/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
@@ -175,6 +175,9 @@ export default {
         text-align: center;
       }
     }
+    .bottom-box-component {
+      height: calc(100% - 65px);
+    }
   }
 }
 </style>