From c7744156ac152b5988c4778f3d987e6b1bd6c336 Mon Sep 17 00:00:00 2001
From: liugongyu <290219706@qq.com>
Date: Sat, 2 Aug 2025 17:03:16 +0800
Subject: [PATCH] 录入树木

---
 components/thorui/tui-upload/tui-upload.vue |   2 +-
 config/app.js                               |   4 ++--
 pages.json                                  |  12 ++++++++++++
 subPackages/treePage/addTree.vue            | 395 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 subPackages/treePage/treeFiles.vue          | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 subPackages/treePage/treeRecord.vue         |  38 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 626 insertions(+), 9 deletions(-)
 create mode 100644 subPackages/treePage/addTree.vue
 create mode 100644 subPackages/treePage/treeRecord.vue

diff --git a/components/thorui/tui-upload/tui-upload.vue b/components/thorui/tui-upload/tui-upload.vue
index 02396dd..4566033 100644
--- a/components/thorui/tui-upload/tui-upload.vue
+++ b/components/thorui/tui-upload/tui-upload.vue
@@ -141,7 +141,7 @@
 			//单张图片大小限制 MB 
 			size: {
 				type: Number,
-				default: 4
+				default: 20
 			},
 			//文件对应的key，默认为 file
 			fileKeyName: {
diff --git a/config/app.js b/config/app.js
index 92c0aa3..6ce8946 100644
--- a/config/app.js
+++ b/config/app.js
@@ -26,6 +26,6 @@ export const baseURL = SWITCH_DEVELOPMENT ? baseURLMap['development'] : baseURLM
 export const version = '1.0.6'
 
 // export const uploadURL = baseURL + '/ylapi/yuanl/common/upload'
-export const uploadURL = baseURL + '/yuanl/yuanl/common/upload'
+export const uploadURL = baseURL + '/ylapi/yuanl/common/upload'
 // export const OSSURL = baseURL + '/yuanlin/'
-export const OSSURL = 'https://dev-rnt.oss-cn-zhangjiakou.aliyuncs.com/'
\ No newline at end of file
+export const OSSURL = 'https://test.jichengshanshui.com.cn:28310/yuanlin/'
\ No newline at end of file
diff --git a/pages.json b/pages.json
index a7f176c..6c50d40 100644
--- a/pages.json
+++ b/pages.json
@@ -284,6 +284,18 @@
 					"style": {
 						"navigationBarTitleText": "一树一档案"
 					}
+				},
+				{
+					"path": "treePage/treeRecord",
+					"style": {
+						"navigationBarTitleText": "记录"
+					}
+				},
+				{
+					"path": "treePage/addTree",
+					"style": {
+						"navigationBarTitleText": "录入树木"
+					}
 				}
 			]
 		}
diff --git a/subPackages/treePage/addTree.vue b/subPackages/treePage/addTree.vue
new file mode 100644
index 0000000..23adbcf
--- /dev/null
+++ b/subPackages/treePage/addTree.vue
@@ -0,0 +1,395 @@
+<template>
+  <view class="container">
+    <tui-form ref="form" :show-message="false" :model="formData">
+      <tui-form-item asterisk label="名称" prop="name">
+        <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"
+                   v-model="formData.name"></tui-input>
+      </tui-form-item>
+
+      <tui-row>
+        <tui-col span="12">
+          <tui-form-item label="高度" asterisk prop="height" :position="3">
+            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
+                       v-model="formData.height"></tui-input>
+            <template v-slot:right>
+              <text style="padding-left: 12rpx;color:#aaa">米</text>
+            </template>
+          </tui-form-item>
+        </tui-col>
+        <tui-col span="12">
+          <tui-form-item label="胸径" asterisk prop="height" :position="3">
+            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                       v-model="formData.height"></tui-input>
+            <template v-slot:right>
+              <text style="padding-left: 12rpx;color:#aaa">厘米</text>
+            </template>
+          </tui-form-item>
+        </tui-col>
+      </tui-row>
+
+
+      <tui-form-item
+          asterisk
+          label="位置"
+          class="location-form-item"
+          @click="openMap"
+      >
+        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
+                   v-model="formData.address"></tui-input>
+        <template v-slot:right>
+          <tui-icon name="gps" :size="20"></tui-icon>
+        </template>
+        <!--        &lt;!&ndash; 位置显示区域 &ndash;&gt;-->
+        <!--        <view class="location-content">-->
+        <!--          <text v-if="formData.address">{{ formData.address }}</text>-->
+        <!--          <text v-else class="placeholder">请选择位置</text>-->
+        <!--          &lt;!&ndash; 定位图标 &ndash;&gt;-->
+        <!--          <tui-icon-->
+        <!--              name="map"-->
+        <!--              size="24"-->
+        <!--              color="#666"-->
+        <!--              class="location-icon"-->
+        <!--          ></tui-icon>-->
+        <!--        </view>-->
+      </tui-form-item>
+
+      <tui-form-item asterisk label="管护单位" arrow highlight prop="area" @click="pickerShow">
+        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
+                   backgroundColor="transparent" v-model="formData.area"></tui-input>
+      </tui-form-item>
+      <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow">
+        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
+                   backgroundColor="transparent" v-model="formData.area"></tui-input>
+      </tui-form-item>
+      <!--      <tui-form-item asterisk label="验证码" prop="code">-->
+      <!--        <tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"-->
+      <!--                   v-model="formData.code"></tui-input>-->
+      <!--        <template v-slot:right>-->
+      <!--          <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"-->
+      <!--                           bold radius="12rpx">获取验证码</tui-form-button>-->
+      <!--        </template>-->
+      <!--      </tui-form-item>-->
+
+      <tui-form-item label="图片信息" asterisk>
+        <!-- 使用ThorUI的tui-upload组件 -->
+        <tui-upload
+            :height="140"
+            :width="140"
+            :value="value"
+            :serverUrl="serverURL" :header="{'Authorization': userToken}"
+            @complete="handleComplete"
+            @remove="handleRemove"
+            :limit="3"
+            :multiple="true"
+            accept="image/*"
+            :maxSize="5242880"
+            name="file"
+            :autoUpload="true"
+        >
+          <!-- 自定义上传按钮 -->
+          <view class="upload-btn">
+            <tui-icon name="plus" size="32" color="#999"></tui-icon>
+
+          </view>
+        </tui-upload>
+
+        <!-- 提示信息 -->
+        <!--        <view class="upload-tips">-->
+        <!--          最多上传3张图片，单张不超过5MB-->
+        <!--        </view>-->
+      </tui-form-item>
+
+
+      <!-- 动画区域（初始隐藏） -->
+      <view
+          class="animated-area"
+          :style="{
+        height: isShow ? contentHeight + 'px' : '0',
+        opacity: isShow ? 1 : 0,
+        overflow: 'hidden'
+      }"
+      >
+
+        <tui-row>
+          <tui-col span="12">
+            <tui-form-item  label="拉丁文" prop="name">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
+                         v-model="formData.name"></tui-input>
+            </tui-form-item>
+          </tui-col>
+          <tui-col span="12">
+              <tui-form-item  label="级别" arrow highlight prop="area" @click="pickerShow">
+                <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
+                           backgroundColor="transparent" v-model="formData.area"></tui-input>
+              </tui-form-item>
+          </tui-col>
+        </tui-row>
+
+        <tui-form-item  label="生长环境" prop="name">
+          <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"
+                     v-model="formData.name"></tui-input>
+        </tui-form-item>
+
+
+        <tui-row>
+          <tui-col span="12">
+            <tui-form-item label="预估树龄"  prop="height" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
+                         v-model="formData.height"></tui-input>
+              <template v-slot:right>
+                <text style="padding-left: 12rpx;color:#aaa">年</text>
+              </template>
+            </tui-form-item>
+          </tui-col>
+          <tui-col span="12">
+            <tui-form-item label="干周"  prop="height" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
+                         v-model="formData.height"></tui-input>
+              <template v-slot:right>
+                <text style="padding-left: 12rpx;color:#aaa">厘米</text>
+              </template>
+            </tui-form-item>
+          </tui-col>
+        </tui-row>
+
+
+        <tui-row>
+          <tui-col span="12">
+            <tui-form-item label="东西冠幅"  prop="height" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
+                         v-model="formData.height"></tui-input>
+              <template v-slot:right>
+                <text style="padding-left: 12rpx;color:#aaa">米</text>
+              </template>
+            </tui-form-item>
+          </tui-col>
+          <tui-col span="12">
+            <tui-form-item label="南北冠幅"  prop="height" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
+                         v-model="formData.height"></tui-input>
+              <template v-slot:right>
+                <text style="padding-left: 12rpx;color:#aaa">米</text>
+              </template>
+            </tui-form-item>
+          </tui-col>
+        </tui-row>
+
+
+
+
+      </view>
+
+      <!-- 触发按钮 -->
+      <tui-button
+          @click="toggleArea"
+          type="primary"
+          :loading="false"
+          height="80rpx"
+          plain
+      >
+        {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
+      </tui-button>
+
+
+      <view class="tui-btn__box">
+        <tui-button bold @click="submit">提交</tui-button>
+      </view>
+    </tui-form>
+    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
+    </tui-picker>
+  </view>
+</template>
+
+<script>
+import { uploadURL } from '@/config/app'
+const rules = [{
+  name: "score",
+  rule: ["range:[0.5,5]"],
+  msg: ["请选择评分"]
+}, {
+  name: "name",
+  rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
+  msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
+}, {
+  name: "area",
+  rule: ["required"],
+  msg: ["请选择地区"]
+}, {
+  name: "code",
+  rule: ["required", "minLength:4"],
+  msg: ["请输入验证码", "验证码不少于4位"]
+}, {
+  name: "height",
+  rule: ["required", "isNum"],
+  msg: ["请输入身高", "身高只能填数字"]
+}, {
+  name: "remark",
+  rule: ["required"],
+  msg: ["请输入备注"]
+}, {
+  name: "content",
+  rule: ["required"],
+  msg: ["请输入详细内容"]
+}];
+export default {
+  props: {
+    // 外部传入的已上传图片列表
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isShow: false,       // 控制区域显示/隐藏
+      contentHeight: 200,    // 内容区域高度
+      serverURL: uploadURL,
+      areaData: [{
+        text: "中国",
+        value: "1001"
+      }, {
+        text: "美国",
+        value: "1002"
+      }, {
+        text: "俄罗斯",
+        value: "1003"
+      }],
+      show: false,
+      //仅对部分数据进行收集演示
+      formData: {
+        //评分
+        score: 0,
+        //姓名
+        name: '',
+        //地区
+        area: '',
+        //验证码
+        code: '',
+        //身高
+        height: '',
+        address: '',      // 位置名称
+        latitude: '',     // 纬度
+        longitude: ''     // 经度
+      },
+      currentFiles: [...this.value], // 当前已上传文件列表
+      value: []
+    }
+  },
+  watch: {
+    // 监听外部传入的value变化
+    value(newVal) {
+      this.currentFiles = [...newVal];
+    }
+  },
+  onReady() {
+    //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
+    // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
+  },
+  methods: {
+    // 切换显示/隐藏状态
+    toggleArea() {
+      this.isShow = !this.isShow;
+    },
+    // 上传完成回调
+    handleComplete(e) {
+      console.log(e)
+      this.value = e.imgArr;
+      // 根据实际接口返回格式调整
+      // this.currentFiles.push(e.data);
+    },
+    // 删除图片回调
+    handleRemove(index) {
+      // 从列表中移除
+      this.currentFiles.splice(index, 1);
+      // // 通知父组件更新
+      // this.$emit('input', this.currentFiles);
+      // this.$emit('remove', index);
+    },
+    change(e) {
+      console.log(e)
+      this.formData.score = e.score
+    },
+    pickerShow() {
+      this.show = true
+    },
+    pickerHide() {
+      this.show = false
+    },
+    pickerChange(e) {
+      console.log(e)
+      this.formData.area = e.text
+    },
+    submit() {
+      //注：结合FormItem校验，validate方法第三个参数必须传true
+      this.$refs.form.validate(this.formData, rules, true).then(res => {
+        if (res.isPass) {
+          console.log(this.formData)
+          console.log('校验通过！')
+        } else {
+          console.log(res)
+        }
+      }).catch(errors => {
+        console.log(errors)
+      })
+    },
+    // 打开地图选择
+    openMap() {
+      // 如果已有位置信息，默认显示该位置，否则使用当前位置
+      const options = {
+        latitude: this.formData.latitude ? Number(this.formData.latitude) : '',
+        longitude: this.formData.longitude ? Number(this.formData.longitude) : '',
+        scale: 16,        // 地图缩放级别
+        name: this.formData.address || '',  // 位置名称
+        address: this.formData.address || '' // 详细地址
+      };
+      // 调用微信小程序地图选择API
+      uni.chooseLocation({
+        ...options,
+        success: (res) => {
+          // 选择成功后更新位置信息
+          this.formData = {
+            address: res.name || res.address,
+            latitude: res.latitude,
+            longitude: res.longitude
+          };
+        },
+        fail: (err) => {
+          console.error('地图选择失败', err);
+          if (err.errMsg.includes('auth deny')) {
+            uni.showToast({
+              title: '请授权位置权限',
+              icon: 'none'
+            });
+          }
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style>
+.tui-title {
+  width: 100%;
+  font-size: 28rpx;
+  color: #888;
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+
+.tui-btn__box {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+.location-content {
+  font-size: 14px;
+}
+
+/* 动画区域样式 */
+.animated-area {
+  height: 200rpx;
+  transition: all 0.3s ease-out; /* 动画过渡效果 */
+}
+</style>
\ No newline at end of file
diff --git a/subPackages/treePage/treeFiles.vue b/subPackages/treePage/treeFiles.vue
index ff1205d..dd0e0f5 100644
--- a/subPackages/treePage/treeFiles.vue
+++ b/subPackages/treePage/treeFiles.vue
@@ -1,14 +1,186 @@
-<script>
+<template>
+  <view class="container">
+    <tui-form ref="form" :show-message="false" :model="formData" style="border-bottom: 1px solid #f5f4f4">
+      <tui-form-item arrow highlight prop="area" @click="pickerShow">
+        <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled
+                   backgroundColor="transparent" v-model="formData.area"></tui-input>
+      </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>
+      </tui-form-item>
+    </tui-form>
+
+    <!--    <tui-row marginTop="10px" :gutter="5" class="full-height-row">-->
+    <!--      <tui-col :span="8" class="left-con full-height-col" >-->
+    <!--        <view class="full-height-col left-con">1</view>-->
+    <!--      </tui-col>-->
+    <!--      <tui-col :span="16" class="right-con full-height-col" >-->
+    <!--        <view class="full-height-col">2</view>-->
+    <!--      </tui-col>-->
+    <!--    </tui-row>-->
+
+    <view class="full-height-row">
+      <view class="full-height-col left-con">
+        <view v-for="(i,index) in 7" class="teamsItem" :key="index"
+              @click="teamsChange(i)"
+              :class="{teamsActive:index==currentIndex}"
+        >{{ i }}
+        </view>
+      </view>
+      <view class="full-height-col right-con">
+        <view class="nodata-wrap">
+          <img src="/static/images/nodata.png" alt="">
+          <view style="color: #aaa">暂无数据</view>
+
+<!--          <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>-->
+        </view>
+        <view v-for="i in 6" class="card-wrap">
+
+          <p class="fs-flex__between">
+            <span>白菜湾四街</span>
+            <span>154颗</span>
+          </p>
+
+          <p>已录入行道树：3颗</p>
+
+          <p>起点。。。。。</p>
+        </view>
+
+      </view>
+    </view>
 
+    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
+    </tui-picker>
+
+  </view>
+</template>
+
+
+<script>
 export default {
-  name: "treeFiles"
+  name: "treeFiles",
+  data() {
+    return {
+      cardList:[],
+      areaData: [{
+        text: "中国",
+        value: "1001"
+      }, {
+        text: "美国",
+        value: "1002"
+      }, {
+        text: "俄罗斯",
+        value: "1003"
+      }],
+      show: false,
+      currentIndex: 0,
+      formData: {
+        //道路
+        name: '',
+        //归属单位
+        area: '',
+      },
+      card: {
+        title: {
+          text: '白菜湾四街'
+        },
+        tag: {
+          text: '153颗'
+        },
+        header: {
+          bgcolor: '#F7F7F7',
+          line: true
+        }
+      }
+    }
+  },
+  methods: {
+    teamsChange(i) {
+      console.log(i)
+      this.currentIndex = i
+    },
+    pickerShow() {
+      this.show = true
+    },
+    pickerHide() {
+      this.show = false
+    },
+    pickerChange(e) {
+      console.log(e)
+      this.formData.area = e.text
+    },
+  }
 }
 </script>
 
-<template>
-<view>treeFiles</view>
-</template>
 
-<style scoped>
+<style scoped lang="scss">
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* tui-row 设置100%高度 */
+.full-height-row {
+  /* 确保row使用flex布局 */
+  display: flex;
+  flex: 1
+}
+
+/* tui-col 设置100%高度 */
+.full-height-col {
+  height: 100%;
+  background-color: #f0f0f0;
+}
+
+
+.left-con {
+  width: 220rpx;
+  height: 100%;
+  background: #f3f3f3;
+}
+
+.right-con {
+  flex: 1;
+  height: 100%;
+  background: #fff;
+  padding-top: 20rpx;
+}
+
+.teamsItem {
+  padding: 10rpx 10rpx 0;
+}
+
+.teamsActive {
+  background: #fff;
+}
+
+.card-wrap {
+  height: 200rpx;
+  margin: 0 20rpx 20rpx 20rpx;
+  padding: 20rpx;
+  box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3);
+  border-radius: 10rpx;
+}
 
+.nodata-wrap{
+  margin: 20px auto;
+  text-align: center;
+  image{
+    width: 160rpx ;
+    height: 160rpx;
+    margin-bottom: 20rpx;
+  }
+}
+
+</style>
+
+<style>
+/* 单独写一个不带 scoped 的 style 来设置 page */
+page {
+  height: 100%;
+  background: #fff;
+}
 </style>
\ No newline at end of file
diff --git a/subPackages/treePage/treeRecord.vue b/subPackages/treePage/treeRecord.vue
new file mode 100644
index 0000000..e378e06
--- /dev/null
+++ b/subPackages/treePage/treeRecord.vue
@@ -0,0 +1,38 @@
+<template>
+  <view class="container">
+    <view class="record-wrap">
+      <view class="record-list-wrap" v-for="i in 10">1</view>
+    </view>
+
+
+    <tui-button class="addTree">新增树木录入</tui-button>
+  </view>
+
+</template>
+
+<script>
+
+export default {
+  name: "treeRecord"
+}
+</script>
+
+<style scoped>
+.record-wrap{
+  padding-bottom: 120rpx;
+}
+.record-list-wrap{
+  height: 200rpx;
+  margin: 20rpx 20rpx 0 20rpx;
+  padding: 20rpx;
+  box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3);
+  border-radius: 10rpx;
+}
+
+.addTree{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+
+</style>
\ No newline at end of file
--
libgit2 0.21.4