树新增

刘淇
1 parent 6cba22de
Showing 8 changed files with 318 additions and 103 deletions
App.vue
api/tree.js
config/app.js
manifest.json
subPackages/treePage/addTree.vue
subPackages/treePage/editTree.vue
subPackages/treePage/treeFiles.vue
subPackages/treePage/treeRecord.vue
@@ -17,7 +17,7 @@ export default {
 <style lang="scss">
 page {
 	background-color: #F4F4F4;
-  color: #333;
+  color: #666;
 }
 @import './components/thorui/fui-css/firstui.scss';
 </style>
+
+
+import request from '@/utils/request'
+
+// 权属分类
+export const treeOwnership = (params) => request.get('/system/dict/data/type/tree_ownership', params)
+
+// 新增树
+export const addTree = (params) => request.post('/business/tree', params)
+
+// 树基本详情
+export const treeDetailReq = (params) => request.get('/business/tree/'+params )
+
+
+// 归属公司
+export const belongCompanyreq = (params) => request.get('/system/dict/data/type/belongCompanyId', params)
+
+
+// 班组集合
+export const deptListReq = (params) => request.get('/business/tree/dept/list', params)
+
+// 道路树木列表
+export const treeRoadReq = (params) => request.get('/business/tree/road/list', params)
+
+// 分类
+export const treeLevelReq = (params) => request.get('/system/dict/data/type/tree_level', params)
+
+
+
+// 获取道路数据列表（根据街道id）
+export const apiRoadListByStreetId = (params) => request.get('/road/manager/queryRoadListByStreetId', params)
@@ -17,7 +17,9 @@ const baseURLMap = {
 	// 开发环境
 	development: 'https://test.jichengshanshui.com.cn:28303',
 	// 生产环境
-	production: IS_H5 ? location.origin : 'http://125.35.93.94:8986'
+	// production: IS_H5 ? location.origin : 'http://125.35.93.94:8986'
+	// 生产环境
+	production: IS_H5 ? location.origin : 'https://test.jichengshanshui.com.cn:28303'
 }
 /** E API BaseURL **/
@@ -112,7 +112,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx64368a9b9e799172",
+        "appid" : "wxcb4cd34066b97d82",
         "setting" : {
             "urlCheck" : false
         },
@@ -42,9 +42,35 @@
         </template>
       </tui-form-item>
-      <tui-form-item asterisk label="管护单位" arrow highlight prop="managedutyunit" @click="pickerShow">
-        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
-                   backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>
+      <tui-col :span="12">
+        <tui-form-item
+
+            label="纬度"
+            class="location-form-item"
+
+            prop="latitude"
+        >
+          {{ formData.latitude }}
+        </tui-form-item>
+      </tui-col>
+      <tui-col :span="12">
+        <tui-form-item
+            label="经度"
+            class="location-form-item"
+            prop="latitude"
+        >
+          {{ formData.longitude }}
+        </tui-form-item>
+      </tui-col>
+
+
+      <tui-form-item asterisk label="管护单位" prop="managedutyunit">
+
+        <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
+                   v-model="formData.managedutyunit"></tui-input>
+
+        <!--        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled-->
+        <!--                   backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>-->
       </tui-form-item>
       <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow">
         <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
@@ -53,23 +79,21 @@
       <tui-form-item label="图片信息" asterisk prop="treeImgList">
         <!-- 使用ThorUI的tui-upload组件 -->
-<!--           @remove="handleRemove"   :multiple="true"    :value="formData.treeImgList"-->
+        <!--           @remove="handleRemove"   :multiple="true"    :value="formData.treeImgList"-->
         <tui-upload
             :height="140"
             :width="140"
-            :value="formData.treeImgList"
+            :value="formData.treeImgListFile"
             :serverUrl="serverURL" :header="{'Authorization': userToken}"
             @complete="handleComplete"
-
             :limit="3"
-
             accept="image/*"
-          >
-            <!-- 自定义上传按钮 -->
-            <view class="upload-btn">
-              <tui-icon name="plus" size="32" color="#999"></tui-icon>
+        >
+          <!-- 自定义上传按钮 -->
+          <view class="upload-btn">
+            <tui-icon name="plus" size="32" color="#999"></tui-icon>
-            </view>
+          </view>
           <!-- 提示信息 -->
           <!--        <view class="upload-tips">-->
           <!--          最多上传3张图片，单张不超过5MB-->
@@ -101,7 +125,7 @@
             </tui-form-item>
           </tui-col>
           <tui-col :span="12">
-            <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerShow">
+            <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerLevelShow">
               <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                          backgroundColor="transparent" v-model="formData.treelevel"></tui-input>
             </tui-form-item>
@@ -176,46 +200,71 @@
         <tui-button bold @click="submit">提交</tui-button>
       </view>
     </tui-form>
-    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
+    <tui-picker :show="show" :pickerData="treeOwnershipData" textField="dictLabel" valueField="dictValue"
+                @hide="pickerHide" @change="pickerChange">
+    </tui-picker>
+
+    <tui-picker :show="levelshow" :pickerData="treeLevelData" textField="dictLabel" valueField="dictValue"
+                @hide="pickerLevelHide" @change="pickerLevelChange">
     </tui-picker>
   </view>
 </template>
 <script>
-import { uploadURL } from '@/config/app'
+import { uploadURL,OSSURL} from '@/config/app'
+import { treeOwnership, addTree, treeLevelReq } from "@/api/tree";
 const rules = [{
   name: "treetype",
   rule: ["required"],
   msg: ["请输入名称"]
 }, {
   name: "treeheight",
-  rule: ["required", "maxLength:10"],
-  msg: ["请输入数高", "数高不能超过10个字符"]
+  rule: ["required", "maxLength:10", "isAmount"],
+  msg: ["请输入数高", "数高不能超过10个字符", "请输入正确"]
 }, {
   name: "dbh",
-  rule: ["required", "maxLength:10"],
-  msg: ["请输入胸径", "胸径不能超过10个字符"]
-}, {
-  name: "growlocation",
-  rule: ["required"],
-  msg: ["请地图选择位置"]
+  rule: ["required", "maxLength:10", "isAmount"],
+  msg: ["请输入胸径", "胸径不能超过10个字符", "请输入正确"]
 }, {
-  name: "managedutyunit",
-  rule: ["required"],
-  msg: ["请选择权属单位"]
-}, {
-  name: "oldtreeownership",
-  rule: ["required"],
-  msg: ["请选择权属分类"]
-},{
-  name: "treeImgList",
-  rule: ["required", "custom"], // 增加required强制必选
-  msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示
-  custom: function(value) {
-    // 即使required通过，再校验数组长度
-    return value.length > 0;
-  }
-}];
+  name: "estimationtreeage",
+  rule: ["maxLength:10", "isAmount"],
+  msg: ["胸径不能超过10个字符", "请输入正确"]
+},
+  {
+    name: "weekday",
+    rule: ["maxLength:10", "isAmount"],
+    msg: ["胸径不能超过10个字符", "请输入正确"]
+  },
+  {
+    name: "canopyeastwest",
+    rule: ["maxLength:10", "isAmount"],
+    msg: ["胸径不能超过10个字符", "请输入正确"]
+  },
+  {
+    name: "canopysouthnorth",
+    rule: ["maxLength:10", "isAmount"],
+    msg: ["胸径不能超过10个字符", "请输入正确"]
+  }, {
+    name: "growlocation",
+    rule: ["required"],
+    msg: ["请地图选择位置"]
+  }, {
+    name: "managedutyunit",
+    rule: ["required"],
+    msg: ["请选择权属单位"]
+  }, {
+    name: "oldtreeownership",
+    rule: ["required"],
+    msg: ["请选择权属分类"]
+  }, {
+    name: "treeImgListFile",
+    rule: ["required", "custom"], // 增加required强制必选
+    msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示
+    custom: function (value) {
+      // 即使required通过，再校验数组长度
+      return value.length > 0;
+    }
+  }];
 export default {
   props: {
     // 外部传入的已上传图片列表
@@ -229,17 +278,10 @@ export default {
       isShow: false,       // 控制区域显示/隐藏
       contentHeight: 200,    // 内容区域高度
       serverURL: uploadURL,
-      areaData: [{
-        text: "中国",
-        value: "1001"
-      }, {
-        text: "美国",
-        value: "1002"
-      }, {
-        text: "俄罗斯",
-        value: "1003"
-      }],
+      treeOwnershipData: [],
+      treeLevelData: [], // 级别
       show: false,
+      levelshow: false,
       //仅对部分数据进行收集演示
       formData: {
         //数名
@@ -256,15 +298,17 @@ export default {
         oldtreeownership: '',
         latinname: '', // 拉丁名
         estimationtreeage: '', // 估测树龄
-        canopysouthnorth:'', // 冠幅南北
+        canopysouthnorth: '', // 冠幅南北
         canopyeastwest: '', // 冠幅东西
         weekday: '', // 干周
-        growlocation:'', // 位置
+        growlocation: '', // 位置
         growthenvironment: '', // 生长环境
-        treeImgList:[], // 图片信息
+        treeImgList: [], // 图片信息
+        treeImgListFile: [], // 图片信息
         address: '',      // 位置名称
         latitude: '',     // 纬度
-        longitude: ''     // 经度
+        longitude: '',     // 经度
+        road: ''
       },
       // currentFiles: [...this.value], // 当前已上传文件列表
       // value: []
@@ -282,25 +326,41 @@ export default {
     this.$refs.form && this.$refs.form.immediateValidate(true, rules);
     // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
   },
+  onLoad(options) {
+    treeLevelReq().then(res => {
+      this.treeLevelData = res.data
+    })
+    this.formData.road = options.roadId
+    this.treeOwnership()
+  },
   methods: {
+    handleInput() {
+      this.formData.treeheight = this.formData.treeheight.replace(/^(\d*\.\d{0,2}).*/, '$1');
+    },
+    treeOwnership() {
+      treeOwnership().then(res => {
+        console.log(res)
+        this.treeOwnershipData = res.data
+      })
+    },
     // 切换显示/隐藏状态
     toggleArea() {
       this.isShow = !this.isShow;
     },
     // 上传完成回调
     handleComplete(e) {
-
-      if (e.status == 1){
+      if (e.status == 1) {
         console.log(e)
         // this.formData.treeImgList.push(e.imgArr);
-
-        this.formData.treeImgList = e.imgArr;
+        console.log(e.imgArr[0])
+        this.formData.treeImgListFile = e.imgArr
+        this.formData.treeImgList = e.imgArr.map(item=>OSSURL+item);
+        console.log(this.formData.treeImgList)
+        // baseURL
         // 手动触发treeImgList字段的校验
         this.$refs.form.validateField("treeImgList");
-        console.log(this.formData.treeImgList)
-        console.log(this.formData.treeImgList.length)
-      }
+      }
       // this.formData.treeImgList = e.imgArr;
       // 根据实际接口返回格式调整
       // this.currentFiles.push(e.data);
@@ -314,7 +374,6 @@ export default {
       // this.$emit('input', this.currentFiles);
       // this.$emit('remove', index);
     },
-
     pickerShow() {
       this.show = true
     },
@@ -323,16 +382,24 @@ export default {
     },
     pickerChange(e) {
       console.log(e)
-      this.formData.oldtreeownership  = e.text
-      this.formData.managedutyunit  = e.text
-
+      this.formData.oldtreeownership = e.dictLabel
+    },
+    pickerLevelShow() {
+      this.levelshow = true
+    },
+    pickerLevelHide() {
+      this.levelshow = false
+    },
+    pickerLevelChange(e) {
+      console.log(e)
+      this.formData.treelevel = e.dictLabel
     },
     submit() {
       // 3. 打印提交时的数据
       console.log("提交时treeImgList：", this.formData.treeImgList);
       // 手动校验图片
       if (!this.formData.treeImgList || this.formData.treeImgList.length === 0) {
-        uni.showToast({ title: "请上传图片", icon: "none" });
+        uni.showToast({title: "请上传图片", icon: "none"});
         return; // 阻止提交
       }
       //注：结合FormItem校验，validate方法第三个参数必须传true
@@ -340,6 +407,14 @@ export default {
         if (res.isPass) {
           console.log(this.formData)
           console.log('校验通过！')
+          // addTree()
+          addTree({data: {...this.formData}}).then(res => {
+            console.log(res)
+            if (res.code == '200') {
+              uni.showToast({title: "新增成功", icon: "none"});
+              uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${this.formData.road}`)
+            }
+          })
         } else {
           console.log(res)
         }
@@ -14,6 +14,8 @@
 </template>
 <script >
+import { treeDetailReq } from "@/api/tree";
+
 import treeLog from "./treeLog.vue";
 export default {
   components:{treeLog},
@@ -27,8 +29,14 @@ export default {
   },
   onLoad(options){
     this.id = options.id
+    this.treeDetailQuery()
   },
   methods:{
+    treeDetailQuery(){
+      treeDetailReq(this.id).then(res=>{
+        console.log(res)
+      })
+    },
     tabChange(i){
       console.log(i.item.name)
       this.currentName = i.item.name
@@ -7,7 +7,7 @@
       </tui-form-item>
       <tui-form-item prop="name" :bottom-border="false">
         <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"
-                   v-model="formData.name"></tui-input>
+                   v-model="formData.roadName" @confirm="searchChange"></tui-input>
       </tui-form-item>
     </tui-form>
@@ -22,37 +22,43 @@
     <view class="full-height-row">
       <view class="full-height-col left-con">
-        <view v-for="(i,index) in 7" class="teamsItem" :key="index"
+        <view v-for="(i,index) in depts" class="teamsItem" :key="index"
               @click="teamsChange(i)"
               :class="{teamsActive:index==currentIndex}"
         >
-          <view class="fs-ellipsis fs-pt16 fs-pb16  fs-pl8 fs-pr8">归属班组归属班组归属班组</view>
+          <view class="fs-ellipsis fs-pt16 fs-pb16  fs-pl8 fs-pr8">{{ i.deptName }}</view>
         </view>
       </view>
       <view class="full-height-col right-con">
-        <view class="nodata-wrap">
+        <view class="nodata-wrap" v-if="roads.length==0">
           <img src="/static/images/nodata.png" alt="">
           <view style="color: #aaa">暂无数据</view>
-<!--          <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>-->
+          <!--          <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>-->
         </view>
-        <view v-for="i in 6" class="card-wrap">
+        <view v-else>
+          <view v-for="i in roads" class="card-wrap" @click="toNewPage(i.roadId)">
-          <p class="fs-flex__between">
-            <span>白菜湾四街</span>
-            <span>154颗</span>
-          </p>
+            <p class="fs-flex__between">
+              <span>{{ i.roadName }}</span>
+              <span>{{ i.treeCount }}颗</span>
+            </p>
-          <p>已录入行道树：3颗</p>
+            <p>已录入行道树：{{ i.recordedCount }}颗</p>
-          <p>起点。。。。。</p>
+            <p>起点：{{ i.startRemark }}</p>
+            <p>终点：{{ i.endRemark }}</p>
+
+          </view>
         </view>
+
       </view>
     </view>
-    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
+    <tui-picker :show="show" :pickerData="belongCompanyData" textField="dictLabel" valueField="dictValue"
+                @hide="pickerHide" @change="pickerChange">
     </tui-picker>
   </view>
@@ -60,29 +66,24 @@
 <script>
+import { belongCompanyreq, deptListReq, treeRoadReq } from "@/api/tree";
 export default {
   name: "treeFiles",
   data() {
     return {
-      cardList:[],
-      areaData: [{
-        text: "中国",
-        value: "1001"
-      }, {
-        text: "美国",
-        value: "1002"
-      }, {
-        text: "俄罗斯",
-        value: "1003"
-      }],
+      cardList: [],
+      belongCompanyData: [],
       show: false,
       currentIndex: 0,
       formData: {
         //道路
-        name: '',
+        roadName: '',
         //归属单位
         area: '',
       },
+      companyId: '',// 归属公司
+      depts: [],// 归属班组
+      roads: [], // 道路树
       card: {
         title: {
           text: '白菜湾四街'
@@ -97,7 +98,46 @@ export default {
       }
     }
   },
+  onLoad() {
+    // 归属公司
+    belongCompanyreq().then(res => {
+      this.belongCompanyData = res.data
+      if (this.belongCompanyData.length > 0) {
+        this.formData.area = this.belongCompanyData[0].dictLabel
+        this.companyId = (this.belongCompanyData[0].dictValue).toString()
+        this.deptListQuery()
+      }
+    })
+  },
   methods: {
+    toNewPage(params){
+      console.log('123312')
+      uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${params}`)
+
+    },
+    searchChange() {
+      this.deptListQuery()
+    },
+    // 归属班组
+    deptListQuery() {
+      deptListReq({data: {companyId: this.companyId, roadName: this.formData.roadName}}).then(res => {
+        if (res.data.length == 0) {
+          this.depts = []
+          this.roads = []
+        } else {
+          this.depts = res.data[0].depts
+          this.roads = this.depts[0].roads
+        }
+        // this.treeRoadQuery()
+      })
+    },
+    // 树列表
+    treeRoadQuery() {
+      treeRoadReq({data: {road: ''}}).then(res => {
+        console.log(res)
+      })
+    },
+    // 归属公司
     teamsChange(i) {
       console.log(i)
       this.currentIndex = i
@@ -166,11 +206,12 @@ export default {
   border-radius: 10rpx;
 }
-.nodata-wrap{
+.nodata-wrap {
   margin: 20px auto;
   text-align: center;
-  image{
-    width: 160rpx ;
+
+  image {
+    width: 160rpx;
     height: 160rpx;
     margin-bottom: 20rpx;
   }
 <template>
   <view class="container">
-    <view class="record-wrap">
-      <view class="record-list-wrap" v-for="i in 10">1</view>
+
+    <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>
+    <view class="record-wrap" v-else>
+      <view class="record-list-wrap" v-for="i in rows" @click="toEditPage(i.id)">
+        <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view>
+        <view class="record-list-right">
+          <view class="record-list-right-title">
+            <view>{{i.treetype}}</view>
+            <view>{{i.updatetime.substring(0,10)}}</view>
+          </view>
+          <view class="fs-mt8">
+            高度：{{i.treeheight}}
+          </view>
+          <view class="fs-mt8">
+            胸径：{{i.dbh}}
+          </view>
+          <view class="fs-mt8">
+            树木编号：{{i.treenumber}}
+          </view>
+        </view>
+      </view>
     </view>
-    <tui-button class="addTree">新增树木录入</tui-button>
+    <tui-button class="addTree" @click="toAddTreePage">新增树木录入</tui-button>
   </view>
 </template>
 <script>
-
+import { treeRoadReq } from "@/api/tree";
 export default {
-  name: "treeRecord"
+  name: "treeRecord",
+  data(){
+    return{
+      rows:[],
+      roadId:''
+    }
+  },
+  onLoad(options){
+    this.roadId = options.roadId
+    this.treeRoadQuery()
+  },
+  methods:{
+    toEditPage(id){  // 前往修改页面
+      uni.$tui.href(`/subPackages/treePage/editTree?id=${id}`)
+    },
+    toAddTreePage(){
+      uni.$tui.href(`/subPackages/treePage/addTree?roadId=${this.roadId}`)
+    },
+    // 记录列表
+    treeRoadQuery(){
+      treeRoadReq({data:{road: this.roadId}}).then(res=>{
+        console.log(res)
+        this.rows = res.rows
+      })
+    },
+  }
 }
 </script>
@@ -22,13 +66,27 @@ export default {
   padding-bottom: 120rpx;
 }
 .record-list-wrap{
-  height: 200rpx;
+  height: 130px;
   margin: 20rpx 20rpx 0 20rpx;
   padding: 20rpx;
   box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3);
   border-radius: 10rpx;
+  display: flex;
+}
+.record-list-left{
+  height: 100px;
+  width: 100px;
+  background-size: 100% 100%;
+}
+.record-list-right{
+  height: 140px;
+  margin-left: 20px;
+  flex:1
+}
+.record-list-right-title{
+  display: flex;
+  justify-content: space-between;
 }
-
 .addTree{
   width: 100%;
   position: fixed;