正射图管理

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@antv/g2": "^3.5.11",
     "element-ui": "^2.13.0",
+    "tiff.js": "^1.0.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.2"

src/api/file/inspectfile.js

@@ -119,7 +119,7 @@ export default {
 
   editPhoto(params) {
     return axios({
-      method: "GET",
+      method: "POST",
       url: '/api/admin/photo/edit',
       data: params
     })

src/views/file/photo/index.vue

@@ -80,10 +80,8 @@
         label="巡检日期"
         align="center"
       />
-      <el-table-column show-overflow-tooltip label="正射图" align="center" min-width="80">
-        <template slot-scope="{row}">
-          <img v-if="row.photoUrl" style="width:20px;height:20px" :src="row.photoUrl" />
-        </template>
+      <el-table-column show-overflow-tooltip prop="photoName" label="正射图" align="center" min-width="80">
+        
       </el-table-column>
       <el-table-column
         min-width="80"
@@ -131,20 +129,27 @@
         @current-change="handleCurrentChange"
       />
     </div>
-    <photoForm @handleClose="visible=false" v-if="visible" :visible="visible" />
+    <photoForm
+      :data="dataChild"
+      @successSubmit="visible=false;getAllList()"
+      @handleClose="visible=false"
+      v-if="visible"
+      :visible="visible"
+    />
   </div>
 </template>
 
 <script>
 import api from "@/api/file/inspectfile";
 import driverAreaSelect from "@/components/driverAreaSelect";
-import photoForm from './photoForm'
+import photoForm from "./photoForm";
 import { mapGetters } from "vuex";
 
 export default {
   name: "photo-list",
   data() {
     return {
+      dataChild: {},
       visible: false,
       dataList: [],
       currentPage: 1,
@@ -157,25 +162,22 @@ export default {
         driverName: "",
         driverArea: "",
         time: ""
-      },
-      driverAreaTypeList: {
-        1: "区划所有",
-        2: "本级河湖"
       }
     };
   },
   computed: {
     ...mapGetters(["btnRule", "isAdmin"])
   },
-  components: { driverAreaSelect,photoForm },
+  components: { driverAreaSelect, photoForm },
   created() {},
   mounted() {
     this.tableLoading = true;
     this.getAllList();
   },
   methods: {
-    uploadItem(){
-        this.visible=true
+    uploadItem(row) {
+      this.dataChild = row;
+      this.visible = true;
     },
     indexMethod(index) {
       return index + 1 + (this.currentPage - 1) * this.pageSize;
@@ -186,20 +188,27 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.delLoading = true;
-        inspectfileApi
-          .drop({ id: row.id })
+        this.tableLoading = true;
+        let param = {
+          id: row.id,
+          photoUrl: "",
+          photoName:'',
+          leftLatitude: "",
+          leftLongitude: "",
+          rightLatitude: "",
+          rightLongitude: ""
+        };
+        api
+          .editPhoto(param)
           .then(res => {
-            this.delLoading = false;
             this.$message({
               type: "success",
-              message: "删除成功！"
+              message: "操作成功"
             });
-            this.tableLoading = true;
             this.getAllList();
           })
           .catch(e => {
-            this.delLoading = false;
+            this.tableLoading = false;
           });
       });
     },

src/views/file/photo/photoForm.vue

@@ -7,17 +7,29 @@
     :before-close="handleClose"
   >
     <div class="photo-form">
-      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="180px">
+      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="100px">
         <el-form-item label="正射图" prop="photoUrl">
-          <uploadImage
-            :isCompress="false"
-            ref="uploadImage"
-            v-model="ruleForm.photoUrl"
-            :img="ruleForm.photoUrl"
-            v-on:addImage="addImage"
-            :limit="1"
-            v-on:removeImage="removeImage"
-          ></uploadImage>
+          <el-button
+            :loading="uploadLoading"
+            @click="uploadFile()"
+            size="small"
+            type="primary"
+            icon="el-icon-upload2"
+          >上传</el-button>
+          <span>{{ruleForm.photoName}}</span>
+        </el-form-item>
+        <el-form-item label="左下经度" prop="leftLongitude">
+          <el-input clearable v-model="ruleForm.leftLongitude" size="small" placeholder="请输入河湖名称" />
+        </el-form-item>
+
+        <el-form-item label="左下纬度" prop="leftLatitude">
+          <el-input clearable v-model="ruleForm.leftLatitude" size="small" placeholder="请输入河湖名称" />
+        </el-form-item>
+        <el-form-item label="右上经度" prop="rightLongitude">
+          <el-input clearable v-model="ruleForm.rightLongitude" size="small" placeholder="请输入河湖名称" />
+        </el-form-item>
+        <el-form-item label="右上纬度" prop="rightLatitude">
+          <el-input clearable v-model="ruleForm.rightLatitude" size="small" placeholder="请输入河湖名称" />
         </el-form-item>
       </el-form>
       <div style="text-align: center">
@@ -31,134 +43,96 @@
         >提交</el-button>
         <el-button
           icon="el-icon-back"
-          v-if="ruleForm.id"
           style="margin-left: 15px"
           size="medium"
           @click="handleClose"
         >返回</el-button>
       </div>
     </div>
+    <input id="upload" type="file" name="file" @change="uploadClick" style="display: none;" />
   </el-drawer>
 </template>
 
 <script>
-import driverApi from "@/api/basicData/driver";
-import uploadImage from "@/components/uploadImage";
+import api from "@/api/user/user";
+import inspectApi  from "@/api/file/inspectfile"
+import $ from "jquery";
 
 export default {
   name: "photorForm",
   data() {
-    var patrn = /^\d+(\.\d+)?$/;
-    var lengthP = /^(\d+)(.\d{0,4})?$/;
-    var validateNum = (rule, value, callback) => {
-      if (!value) {
-        callback();
-      } else {
-        if (rule.field == "length") {
-          if (!lengthP.test(value)) {
-            callback(new Error("小数点最多4位"));
-          } else if (parseInt(value) > 9999) {
-            callback(new Error("最大10000"));
-          } else {
-            callback();
-          }
-        } else {
-          if (!patrn.test(value)) {
-            callback(new Error("请输入数字"));
-          } else {
-            callback();
-          }
-        }
-      }
-    };
     return {
       ruleForm: {},
-      validateNum: validateNum,
-      addBtnLoading: false,
-      categoryList: [
-        { id: "categoryOne", name: "Ⅰ类" },
-        { id: "categoryTwo", name: "Ⅱ类" },
-        { id: "categoryThree", name: "Ⅲ类" },
-        { id: "categoryFour", name: "Ⅳ类" },
-        { id: "categoryFive", name: "Ⅴ类" }
-      ]
+      uploadLoading: false,
+      addBtnLoading: false
     };
   },
   props: {
     visible: {
       type: Boolean,
       default() {
-        false;
-      }
-    },
-    userList: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    typeList: {
-      type: Object,
-      default() {
-        return {};
+        return false;
       }
     },
-    levelList: {
+    data: {
       type: Object,
       default() {
         return {};
       }
     }
   },
-  components: {uploadImage },
-  created() {},
+  components: {},
+  created() {
+    this.ruleForm = JSON.parse(JSON.stringify(this.data));
+  },
   mounted() {},
   methods: {
-    handleClose(){
-      this.$emit('handleClose')
-    },
-    removeImage() {
-      this.ruleForm.photoUrl = "";
+    uploadFile() {
+      $("#upload").click();
     },
-    addImage(...data) {
-      this.ruleForm.photoUrl = data[0];
+    uploadClick(event) {
+      let file = event.target.files[0];
+      let formdata = new window.FormData();
+      formdata.append("file", file);
+      this.uploadLoading = true;
+      api.upload(formdata).then(
+        rs => {
+          this.$message({
+            type: "success",
+            message: "上传成功"
+          });
+          this.ruleForm.photoUrl = rs.data.url;
+          this.ruleForm.photoName = rs.data.fileName;
+          this.uploadLoading = false;
+        },
+        error => {
+          this.uploadLoading = false;
+        }
+      );
+      event.target.value = "";
     },
-    clearValidate() {
-      this.$refs.ruleForm.clearValidate("driverArea");
+    handleClose() {
+      this.$emit("handleClose");
     },
     submitForm(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          let method = "addDriver";
-          if (this.ruleForm.id) {
-            method = "editDriver";
-          }
           let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
           this.addBtnLoading = true;
-          driverApi[method](ruleForm)
+          inspectApi.editPhoto(ruleForm)
             .then(res => {
               this.addBtnLoading = false;
-              this.$refs[formName].resetFields();
               this.$message({
                 type: "success",
-                message: this.ruleForm.id ? "修改成功" : "添加成功"
+                message:"操作成功"
               });
-              if (this.ruleForm.id) {
-                this.$emit("submit", 2);
-                this.$emit("onBack");
-              } else {
-                this.$emit("submit", 1);
-              }
+             this.$emit('successSubmit')
             })
             .catch(e => {
               this.addBtnLoading = false;
             });
         }
       });
-    },
-    onBack() {
-      this.$refs["ruleForm"].resetFields();
-      this.$emit("onBack");
     }
   }
 };

src/views/main/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-index" style="position: relative">
-    <img style="cursor: auto" src="http://imagesnanjing.taauav.net/temp/2020/5/21/26c2b41f66.tiff">
+    <img style="cursor: auto" src="../../assets/img/home.jpg">
   </div>
 </template>
 

yarn.lock

@@ -6375,6 +6375,10 @@ thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/thunky/download/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
 
+tiff.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/tiff.js/download/tiff.js-1.0.0.tgz#31696dd884d911ed9a4191e78bd90fb33af948bb"
+
 time-stamp@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npm.taobao.org/time-stamp/download/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"