Commit c7744156ac152b5988c4778f3d987e6b1bd6c336
1 parent
46b6767c
录入树木
Showing
6 changed files
with
626 additions
and
9 deletions
components/thorui/tui-upload/tui-upload.vue
config/app.js
| @@ -26,6 +26,6 @@ export const baseURL = SWITCH_DEVELOPMENT ? baseURLMap['development'] : baseURLM | @@ -26,6 +26,6 @@ export const baseURL = SWITCH_DEVELOPMENT ? baseURLMap['development'] : baseURLM | ||
| 26 | export const version = '1.0.6' | 26 | export const version = '1.0.6' |
| 27 | 27 | ||
| 28 | // export const uploadURL = baseURL + '/ylapi/yuanl/common/upload' | 28 | // export const uploadURL = baseURL + '/ylapi/yuanl/common/upload' |
| 29 | -export const uploadURL = baseURL + '/yuanl/yuanl/common/upload' | 29 | +export const uploadURL = baseURL + '/ylapi/yuanl/common/upload' |
| 30 | // export const OSSURL = baseURL + '/yuanlin/' | 30 | // export const OSSURL = baseURL + '/yuanlin/' |
| 31 | -export const OSSURL = 'https://dev-rnt.oss-cn-zhangjiakou.aliyuncs.com/' | ||
| 32 | \ No newline at end of file | 31 | \ No newline at end of file |
| 32 | +export const OSSURL = 'https://test.jichengshanshui.com.cn:28310/yuanlin/' | ||
| 33 | \ No newline at end of file | 33 | \ No newline at end of file |
pages.json
| @@ -284,6 +284,18 @@ | @@ -284,6 +284,18 @@ | ||
| 284 | "style": { | 284 | "style": { |
| 285 | "navigationBarTitleText": "一树一档案" | 285 | "navigationBarTitleText": "一树一档案" |
| 286 | } | 286 | } |
| 287 | + }, | ||
| 288 | + { | ||
| 289 | + "path": "treePage/treeRecord", | ||
| 290 | + "style": { | ||
| 291 | + "navigationBarTitleText": "记录" | ||
| 292 | + } | ||
| 293 | + }, | ||
| 294 | + { | ||
| 295 | + "path": "treePage/addTree", | ||
| 296 | + "style": { | ||
| 297 | + "navigationBarTitleText": "录入树木" | ||
| 298 | + } | ||
| 287 | } | 299 | } |
| 288 | ] | 300 | ] |
| 289 | } | 301 | } |
subPackages/treePage/addTree.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="container"> | ||
| 3 | + <tui-form ref="form" :show-message="false" :model="formData"> | ||
| 4 | + <tui-form-item asterisk label="名称" prop="name"> | ||
| 5 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30" | ||
| 6 | + v-model="formData.name"></tui-input> | ||
| 7 | + </tui-form-item> | ||
| 8 | + | ||
| 9 | + <tui-row> | ||
| 10 | + <tui-col span="12"> | ||
| 11 | + <tui-form-item label="高度" asterisk prop="height" :position="3"> | ||
| 12 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 13 | + v-model="formData.height"></tui-input> | ||
| 14 | + <template v-slot:right> | ||
| 15 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | ||
| 16 | + </template> | ||
| 17 | + </tui-form-item> | ||
| 18 | + </tui-col> | ||
| 19 | + <tui-col span="12"> | ||
| 20 | + <tui-form-item label="胸径" asterisk prop="height" :position="3"> | ||
| 21 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 22 | + v-model="formData.height"></tui-input> | ||
| 23 | + <template v-slot:right> | ||
| 24 | + <text style="padding-left: 12rpx;color:#aaa">厘米</text> | ||
| 25 | + </template> | ||
| 26 | + </tui-form-item> | ||
| 27 | + </tui-col> | ||
| 28 | + </tui-row> | ||
| 29 | + | ||
| 30 | + | ||
| 31 | + <tui-form-item | ||
| 32 | + asterisk | ||
| 33 | + label="位置" | ||
| 34 | + class="location-form-item" | ||
| 35 | + @click="openMap" | ||
| 36 | + > | ||
| 37 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 38 | + v-model="formData.address"></tui-input> | ||
| 39 | + <template v-slot:right> | ||
| 40 | + <tui-icon name="gps" :size="20"></tui-icon> | ||
| 41 | + </template> | ||
| 42 | + <!-- <!– 位置显示区域 –>--> | ||
| 43 | + <!-- <view class="location-content">--> | ||
| 44 | + <!-- <text v-if="formData.address">{{ formData.address }}</text>--> | ||
| 45 | + <!-- <text v-else class="placeholder">请选择位置</text>--> | ||
| 46 | + <!-- <!– 定位图标 –>--> | ||
| 47 | + <!-- <tui-icon--> | ||
| 48 | + <!-- name="map"--> | ||
| 49 | + <!-- size="24"--> | ||
| 50 | + <!-- color="#666"--> | ||
| 51 | + <!-- class="location-icon"--> | ||
| 52 | + <!-- ></tui-icon>--> | ||
| 53 | + <!-- </view>--> | ||
| 54 | + </tui-form-item> | ||
| 55 | + | ||
| 56 | + <tui-form-item asterisk label="管护单位" arrow highlight prop="area" @click="pickerShow"> | ||
| 57 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 58 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | ||
| 59 | + </tui-form-item> | ||
| 60 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow"> | ||
| 61 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 62 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | ||
| 63 | + </tui-form-item> | ||
| 64 | + <!-- <tui-form-item asterisk label="验证码" prop="code">--> | ||
| 65 | + <!-- <tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"--> | ||
| 66 | + <!-- v-model="formData.code"></tui-input>--> | ||
| 67 | + <!-- <template v-slot:right>--> | ||
| 68 | + <!-- <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"--> | ||
| 69 | + <!-- bold radius="12rpx">获取验证码</tui-form-button>--> | ||
| 70 | + <!-- </template>--> | ||
| 71 | + <!-- </tui-form-item>--> | ||
| 72 | + | ||
| 73 | + <tui-form-item label="图片信息" asterisk> | ||
| 74 | + <!-- 使用ThorUI的tui-upload组件 --> | ||
| 75 | + <tui-upload | ||
| 76 | + :height="140" | ||
| 77 | + :width="140" | ||
| 78 | + :value="value" | ||
| 79 | + :serverUrl="serverURL" :header="{'Authorization': userToken}" | ||
| 80 | + @complete="handleComplete" | ||
| 81 | + @remove="handleRemove" | ||
| 82 | + :limit="3" | ||
| 83 | + :multiple="true" | ||
| 84 | + accept="image/*" | ||
| 85 | + :maxSize="5242880" | ||
| 86 | + name="file" | ||
| 87 | + :autoUpload="true" | ||
| 88 | + > | ||
| 89 | + <!-- 自定义上传按钮 --> | ||
| 90 | + <view class="upload-btn"> | ||
| 91 | + <tui-icon name="plus" size="32" color="#999"></tui-icon> | ||
| 92 | + | ||
| 93 | + </view> | ||
| 94 | + </tui-upload> | ||
| 95 | + | ||
| 96 | + <!-- 提示信息 --> | ||
| 97 | + <!-- <view class="upload-tips">--> | ||
| 98 | + <!-- 最多上传3张图片，单张不超过5MB--> | ||
| 99 | + <!-- </view>--> | ||
| 100 | + </tui-form-item> | ||
| 101 | + | ||
| 102 | + | ||
| 103 | + <!-- 动画区域（初始隐藏） --> | ||
| 104 | + <view | ||
| 105 | + class="animated-area" | ||
| 106 | + :style="{ | ||
| 107 | + height: isShow ? contentHeight + 'px' : '0', | ||
| 108 | + opacity: isShow ? 1 : 0, | ||
| 109 | + overflow: 'hidden' | ||
| 110 | + }" | ||
| 111 | + > | ||
| 112 | + | ||
| 113 | + <tui-row> | ||
| 114 | + <tui-col span="12"> | ||
| 115 | + <tui-form-item label="拉丁文" prop="name"> | ||
| 116 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" | ||
| 117 | + v-model="formData.name"></tui-input> | ||
| 118 | + </tui-form-item> | ||
| 119 | + </tui-col> | ||
| 120 | + <tui-col span="12"> | ||
| 121 | + <tui-form-item label="级别" arrow highlight prop="area" @click="pickerShow"> | ||
| 122 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 123 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | ||
| 124 | + </tui-form-item> | ||
| 125 | + </tui-col> | ||
| 126 | + </tui-row> | ||
| 127 | + | ||
| 128 | + <tui-form-item label="生长环境" prop="name"> | ||
| 129 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50" | ||
| 130 | + v-model="formData.name"></tui-input> | ||
| 131 | + </tui-form-item> | ||
| 132 | + | ||
| 133 | + | ||
| 134 | + <tui-row> | ||
| 135 | + <tui-col span="12"> | ||
| 136 | + <tui-form-item label="预估树龄" prop="height" :position="3"> | ||
| 137 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 138 | + v-model="formData.height"></tui-input> | ||
| 139 | + <template v-slot:right> | ||
| 140 | + <text style="padding-left: 12rpx;color:#aaa">年</text> | ||
| 141 | + </template> | ||
| 142 | + </tui-form-item> | ||
| 143 | + </tui-col> | ||
| 144 | + <tui-col span="12"> | ||
| 145 | + <tui-form-item label="干周" prop="height" :position="3"> | ||
| 146 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 147 | + v-model="formData.height"></tui-input> | ||
| 148 | + <template v-slot:right> | ||
| 149 | + <text style="padding-left: 12rpx;color:#aaa">厘米</text> | ||
| 150 | + </template> | ||
| 151 | + </tui-form-item> | ||
| 152 | + </tui-col> | ||
| 153 | + </tui-row> | ||
| 154 | + | ||
| 155 | + | ||
| 156 | + <tui-row> | ||
| 157 | + <tui-col span="12"> | ||
| 158 | + <tui-form-item label="东西冠幅" prop="height" :position="3"> | ||
| 159 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 160 | + v-model="formData.height"></tui-input> | ||
| 161 | + <template v-slot:right> | ||
| 162 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | ||
| 163 | + </template> | ||
| 164 | + </tui-form-item> | ||
| 165 | + </tui-col> | ||
| 166 | + <tui-col span="12"> | ||
| 167 | + <tui-form-item label="南北冠幅" prop="height" :position="3"> | ||
| 168 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 169 | + v-model="formData.height"></tui-input> | ||
| 170 | + <template v-slot:right> | ||
| 171 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | ||
| 172 | + </template> | ||
| 173 | + </tui-form-item> | ||
| 174 | + </tui-col> | ||
| 175 | + </tui-row> | ||
| 176 | + | ||
| 177 | + | ||
| 178 | + | ||
| 179 | + | ||
| 180 | + </view> | ||
| 181 | + | ||
| 182 | + <!-- 触发按钮 --> | ||
| 183 | + <tui-button | ||
| 184 | + @click="toggleArea" | ||
| 185 | + type="primary" | ||
| 186 | + :loading="false" | ||
| 187 | + height="80rpx" | ||
| 188 | + plain | ||
| 189 | + > | ||
| 190 | + {{ isShow ? '- 隐藏区域' : '+ 显示区域' }} | ||
| 191 | + </tui-button> | ||
| 192 | + | ||
| 193 | + | ||
| 194 | + <view class="tui-btn__box"> | ||
| 195 | + <tui-button bold @click="submit">提交</tui-button> | ||
| 196 | + </view> | ||
| 197 | + </tui-form> | ||
| 198 | + <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange"> | ||
| 199 | + </tui-picker> | ||
| 200 | + </view> | ||
| 201 | +</template> | ||
| 202 | + | ||
| 203 | +<script> | ||
| 204 | +import { uploadURL } from '@/config/app' | ||
| 205 | +const rules = [{ | ||
| 206 | + name: "score", | ||
| 207 | + rule: ["range:[0.5,5]"], | ||
| 208 | + msg: ["请选择评分"] | ||
| 209 | +}, { | ||
| 210 | + name: "name", | ||
| 211 | + rule: ["required", "isChinese", "minLength:2", "maxLength:6"], | ||
| 212 | + msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"] | ||
| 213 | +}, { | ||
| 214 | + name: "area", | ||
| 215 | + rule: ["required"], | ||
| 216 | + msg: ["请选择地区"] | ||
| 217 | +}, { | ||
| 218 | + name: "code", | ||
| 219 | + rule: ["required", "minLength:4"], | ||
| 220 | + msg: ["请输入验证码", "验证码不少于4位"] | ||
| 221 | +}, { | ||
| 222 | + name: "height", | ||
| 223 | + rule: ["required", "isNum"], | ||
| 224 | + msg: ["请输入身高", "身高只能填数字"] | ||
| 225 | +}, { | ||
| 226 | + name: "remark", | ||
| 227 | + rule: ["required"], | ||
| 228 | + msg: ["请输入备注"] | ||
| 229 | +}, { | ||
| 230 | + name: "content", | ||
| 231 | + rule: ["required"], | ||
| 232 | + msg: ["请输入详细内容"] | ||
| 233 | +}]; | ||
| 234 | +export default { | ||
| 235 | + props: { | ||
| 236 | + // 外部传入的已上传图片列表 | ||
| 237 | + value: { | ||
| 238 | + type: Array, | ||
| 239 | + default: () => [] | ||
| 240 | + } | ||
| 241 | + }, | ||
| 242 | + data() { | ||
| 243 | + return { | ||
| 244 | + isShow: false, // 控制区域显示/隐藏 | ||
| 245 | + contentHeight: 200, // 内容区域高度 | ||
| 246 | + serverURL: uploadURL, | ||
| 247 | + areaData: [{ | ||
| 248 | + text: "中国", | ||
| 249 | + value: "1001" | ||
| 250 | + }, { | ||
| 251 | + text: "美国", | ||
| 252 | + value: "1002" | ||
| 253 | + }, { | ||
| 254 | + text: "俄罗斯", | ||
| 255 | + value: "1003" | ||
| 256 | + }], | ||
| 257 | + show: false, | ||
| 258 | + //仅对部分数据进行收集演示 | ||
| 259 | + formData: { | ||
| 260 | + //评分 | ||
| 261 | + score: 0, | ||
| 262 | + //姓名 | ||
| 263 | + name: '', | ||
| 264 | + //地区 | ||
| 265 | + area: '', | ||
| 266 | + //验证码 | ||
| 267 | + code: '', | ||
| 268 | + //身高 | ||
| 269 | + height: '', | ||
| 270 | + address: '', // 位置名称 | ||
| 271 | + latitude: '', // 纬度 | ||
| 272 | + longitude: '' // 经度 | ||
| 273 | + }, | ||
| 274 | + currentFiles: [...this.value], // 当前已上传文件列表 | ||
| 275 | + value: [] | ||
| 276 | + } | ||
| 277 | + }, | ||
| 278 | + watch: { | ||
| 279 | + // 监听外部传入的value变化 | ||
| 280 | + value(newVal) { | ||
| 281 | + this.currentFiles = [...newVal]; | ||
| 282 | + } | ||
| 283 | + }, | ||
| 284 | + onReady() { | ||
| 285 | + //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 | ||
| 286 | + // this.$refs.form && this.$refs.form.immediateValidate(true, rules) | ||
| 287 | + }, | ||
| 288 | + methods: { | ||
| 289 | + // 切换显示/隐藏状态 | ||
| 290 | + toggleArea() { | ||
| 291 | + this.isShow = !this.isShow; | ||
| 292 | + }, | ||
| 293 | + // 上传完成回调 | ||
| 294 | + handleComplete(e) { | ||
| 295 | + console.log(e) | ||
| 296 | + this.value = e.imgArr; | ||
| 297 | + // 根据实际接口返回格式调整 | ||
| 298 | + // this.currentFiles.push(e.data); | ||
| 299 | + }, | ||
| 300 | + // 删除图片回调 | ||
| 301 | + handleRemove(index) { | ||
| 302 | + // 从列表中移除 | ||
| 303 | + this.currentFiles.splice(index, 1); | ||
| 304 | + // // 通知父组件更新 | ||
| 305 | + // this.$emit('input', this.currentFiles); | ||
| 306 | + // this.$emit('remove', index); | ||
| 307 | + }, | ||
| 308 | + change(e) { | ||
| 309 | + console.log(e) | ||
| 310 | + this.formData.score = e.score | ||
| 311 | + }, | ||
| 312 | + pickerShow() { | ||
| 313 | + this.show = true | ||
| 314 | + }, | ||
| 315 | + pickerHide() { | ||
| 316 | + this.show = false | ||
| 317 | + }, | ||
| 318 | + pickerChange(e) { | ||
| 319 | + console.log(e) | ||
| 320 | + this.formData.area = e.text | ||
| 321 | + }, | ||
| 322 | + submit() { | ||
| 323 | + //注：结合FormItem校验，validate方法第三个参数必须传true | ||
| 324 | + this.$refs.form.validate(this.formData, rules, true).then(res => { | ||
| 325 | + if (res.isPass) { | ||
| 326 | + console.log(this.formData) | ||
| 327 | + console.log('校验通过！') | ||
| 328 | + } else { | ||
| 329 | + console.log(res) | ||
| 330 | + } | ||
| 331 | + }).catch(errors => { | ||
| 332 | + console.log(errors) | ||
| 333 | + }) | ||
| 334 | + }, | ||
| 335 | + // 打开地图选择 | ||
| 336 | + openMap() { | ||
| 337 | + // 如果已有位置信息，默认显示该位置，否则使用当前位置 | ||
| 338 | + const options = { | ||
| 339 | + latitude: this.formData.latitude ? Number(this.formData.latitude) : '', | ||
| 340 | + longitude: this.formData.longitude ? Number(this.formData.longitude) : '', | ||
| 341 | + scale: 16, // 地图缩放级别 | ||
| 342 | + name: this.formData.address || '', // 位置名称 | ||
| 343 | + address: this.formData.address || '' // 详细地址 | ||
| 344 | + }; | ||
| 345 | + // 调用微信小程序地图选择API | ||
| 346 | + uni.chooseLocation({ | ||
| 347 | + ...options, | ||
| 348 | + success: (res) => { | ||
| 349 | + // 选择成功后更新位置信息 | ||
| 350 | + this.formData = { | ||
| 351 | + address: res.name || res.address, | ||
| 352 | + latitude: res.latitude, | ||
| 353 | + longitude: res.longitude | ||
| 354 | + }; | ||
| 355 | + }, | ||
| 356 | + fail: (err) => { | ||
| 357 | + console.error('地图选择失败', err); | ||
| 358 | + if (err.errMsg.includes('auth deny')) { | ||
| 359 | + uni.showToast({ | ||
| 360 | + title: '请授权位置权限', | ||
| 361 | + icon: 'none' | ||
| 362 | + }); | ||
| 363 | + } | ||
| 364 | + } | ||
| 365 | + }); | ||
| 366 | + } | ||
| 367 | + } | ||
| 368 | +} | ||
| 369 | +</script> | ||
| 370 | + | ||
| 371 | +<style> | ||
| 372 | +.tui-title { | ||
| 373 | + width: 100%; | ||
| 374 | + font-size: 28rpx; | ||
| 375 | + color: #888; | ||
| 376 | + padding: 30rpx; | ||
| 377 | + box-sizing: border-box; | ||
| 378 | +} | ||
| 379 | + | ||
| 380 | +.tui-btn__box { | ||
| 381 | + width: 100%; | ||
| 382 | + position: fixed; | ||
| 383 | + bottom: 0; | ||
| 384 | +} | ||
| 385 | + | ||
| 386 | +.location-content { | ||
| 387 | + font-size: 14px; | ||
| 388 | +} | ||
| 389 | + | ||
| 390 | +/* 动画区域样式 */ | ||
| 391 | +.animated-area { | ||
| 392 | + height: 200rpx; | ||
| 393 | + transition: all 0.3s ease-out; /* 动画过渡效果 */ | ||
| 394 | +} | ||
| 395 | +</style> | ||
| 0 | \ No newline at end of file | 396 | \ No newline at end of file |
subPackages/treePage/treeFiles.vue
| 1 | -<script> | 1 | +<template> |
| 2 | + <view class="container"> | ||
| 3 | + <tui-form ref="form" :show-message="false" :model="formData" style="border-bottom: 1px solid #f5f4f4"> | ||
| 4 | + <tui-form-item arrow highlight prop="area" @click="pickerShow"> | ||
| 5 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled | ||
| 6 | + backgroundColor="transparent" v-model="formData.area"></tui-input> | ||
| 7 | + </tui-form-item> | ||
| 8 | + <tui-form-item prop="name" :bottom-border="false"> | ||
| 9 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20" | ||
| 10 | + v-model="formData.name"></tui-input> | ||
| 11 | + </tui-form-item> | ||
| 12 | + </tui-form> | ||
| 13 | + | ||
| 14 | + <!-- <tui-row marginTop="10px" :gutter="5" class="full-height-row">--> | ||
| 15 | + <!-- <tui-col :span="8" class="left-con full-height-col" >--> | ||
| 16 | + <!-- <view class="full-height-col left-con">1</view>--> | ||
| 17 | + <!-- </tui-col>--> | ||
| 18 | + <!-- <tui-col :span="16" class="right-con full-height-col" >--> | ||
| 19 | + <!-- <view class="full-height-col">2</view>--> | ||
| 20 | + <!-- </tui-col>--> | ||
| 21 | + <!-- </tui-row>--> | ||
| 22 | + | ||
| 23 | + <view class="full-height-row"> | ||
| 24 | + <view class="full-height-col left-con"> | ||
| 25 | + <view v-for="(i,index) in 7" class="teamsItem" :key="index" | ||
| 26 | + @click="teamsChange(i)" | ||
| 27 | + :class="{teamsActive:index==currentIndex}" | ||
| 28 | + >{{ i }} | ||
| 29 | + </view> | ||
| 30 | + </view> | ||
| 31 | + <view class="full-height-col right-con"> | ||
| 32 | + <view class="nodata-wrap"> | ||
| 33 | + <img src="/static/images/nodata.png" alt=""> | ||
| 34 | + <view style="color: #aaa">暂无数据</view> | ||
| 35 | + | ||
| 36 | +<!-- <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>--> | ||
| 37 | + </view> | ||
| 38 | + <view v-for="i in 6" class="card-wrap"> | ||
| 39 | + | ||
| 40 | + <p class="fs-flex__between"> | ||
| 41 | + <span>白菜湾四街</span> | ||
| 42 | + <span>154颗</span> | ||
| 43 | + </p> | ||
| 44 | + | ||
| 45 | + <p>已录入行道树：3颗</p> | ||
| 46 | + | ||
| 47 | + <p>起点。。。。。</p> | ||
| 48 | + </view> | ||
| 49 | + | ||
| 50 | + </view> | ||
| 51 | + </view> | ||
| 2 | 52 | ||
| 53 | + <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange"> | ||
| 54 | + </tui-picker> | ||
| 55 | + | ||
| 56 | + </view> | ||
| 57 | +</template> | ||
| 58 | + | ||
| 59 | + | ||
| 60 | +<script> | ||
| 3 | export default { | 61 | export default { |
| 4 | - name: "treeFiles" | 62 | + name: "treeFiles", |
| 63 | + data() { | ||
| 64 | + return { | ||
| 65 | + cardList:[], | ||
| 66 | + areaData: [{ | ||
| 67 | + text: "中国", | ||
| 68 | + value: "1001" | ||
| 69 | + }, { | ||
| 70 | + text: "美国", | ||
| 71 | + value: "1002" | ||
| 72 | + }, { | ||
| 73 | + text: "俄罗斯", | ||
| 74 | + value: "1003" | ||
| 75 | + }], | ||
| 76 | + show: false, | ||
| 77 | + currentIndex: 0, | ||
| 78 | + formData: { | ||
| 79 | + //道路 | ||
| 80 | + name: '', | ||
| 81 | + //归属单位 | ||
| 82 | + area: '', | ||
| 83 | + }, | ||
| 84 | + card: { | ||
| 85 | + title: { | ||
| 86 | + text: '白菜湾四街' | ||
| 87 | + }, | ||
| 88 | + tag: { | ||
| 89 | + text: '153颗' | ||
| 90 | + }, | ||
| 91 | + header: { | ||
| 92 | + bgcolor: '#F7F7F7', | ||
| 93 | + line: true | ||
| 94 | + } | ||
| 95 | + } | ||
| 96 | + } | ||
| 97 | + }, | ||
| 98 | + methods: { | ||
| 99 | + teamsChange(i) { | ||
| 100 | + console.log(i) | ||
| 101 | + this.currentIndex = i | ||
| 102 | + }, | ||
| 103 | + pickerShow() { | ||
| 104 | + this.show = true | ||
| 105 | + }, | ||
| 106 | + pickerHide() { | ||
| 107 | + this.show = false | ||
| 108 | + }, | ||
| 109 | + pickerChange(e) { | ||
| 110 | + console.log(e) | ||
| 111 | + this.formData.area = e.text | ||
| 112 | + }, | ||
| 113 | + } | ||
| 5 | } | 114 | } |
| 6 | </script> | 115 | </script> |
| 7 | 116 | ||
| 8 | -<template> | ||
| 9 | -<view>treeFiles</view> | ||
| 10 | -</template> | ||
| 11 | 117 | ||
| 12 | -<style scoped> | 118 | +<style scoped lang="scss"> |
| 119 | +.container { | ||
| 120 | + height: 100%; | ||
| 121 | + display: flex; | ||
| 122 | + flex-direction: column; | ||
| 123 | +} | ||
| 124 | + | ||
| 125 | +/* tui-row 设置100%高度 */ | ||
| 126 | +.full-height-row { | ||
| 127 | + /* 确保row使用flex布局 */ | ||
| 128 | + display: flex; | ||
| 129 | + flex: 1 | ||
| 130 | +} | ||
| 131 | + | ||
| 132 | +/* tui-col 设置100%高度 */ | ||
| 133 | +.full-height-col { | ||
| 134 | + height: 100%; | ||
| 135 | + background-color: #f0f0f0; | ||
| 136 | +} | ||
| 137 | + | ||
| 138 | + | ||
| 139 | +.left-con { | ||
| 140 | + width: 220rpx; | ||
| 141 | + height: 100%; | ||
| 142 | + background: #f3f3f3; | ||
| 143 | +} | ||
| 144 | + | ||
| 145 | +.right-con { | ||
| 146 | + flex: 1; | ||
| 147 | + height: 100%; | ||
| 148 | + background: #fff; | ||
| 149 | + padding-top: 20rpx; | ||
| 150 | +} | ||
| 151 | + | ||
| 152 | +.teamsItem { | ||
| 153 | + padding: 10rpx 10rpx 0; | ||
| 154 | +} | ||
| 155 | + | ||
| 156 | +.teamsActive { | ||
| 157 | + background: #fff; | ||
| 158 | +} | ||
| 159 | + | ||
| 160 | +.card-wrap { | ||
| 161 | + height: 200rpx; | ||
| 162 | + margin: 0 20rpx 20rpx 20rpx; | ||
| 163 | + padding: 20rpx; | ||
| 164 | + box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | ||
| 165 | + border-radius: 10rpx; | ||
| 166 | +} | ||
| 13 | 167 | ||
| 168 | +.nodata-wrap{ | ||
| 169 | + margin: 20px auto; | ||
| 170 | + text-align: center; | ||
| 171 | + image{ | ||
| 172 | + width: 160rpx ; | ||
| 173 | + height: 160rpx; | ||
| 174 | + margin-bottom: 20rpx; | ||
| 175 | + } | ||
| 176 | +} | ||
| 177 | + | ||
| 178 | +</style> | ||
| 179 | + | ||
| 180 | +<style> | ||
| 181 | +/* 单独写一个不带 scoped 的 style 来设置 page */ | ||
| 182 | +page { | ||
| 183 | + height: 100%; | ||
| 184 | + background: #fff; | ||
| 185 | +} | ||
| 14 | </style> | 186 | </style> |
| 15 | \ No newline at end of file | 187 | \ No newline at end of file |
subPackages/treePage/treeRecord.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="container"> | ||
| 3 | + <view class="record-wrap"> | ||
| 4 | + <view class="record-list-wrap" v-for="i in 10">1</view> | ||
| 5 | + </view> | ||
| 6 | + | ||
| 7 | + | ||
| 8 | + <tui-button class="addTree">新增树木录入</tui-button> | ||
| 9 | + </view> | ||
| 10 | + | ||
| 11 | +</template> | ||
| 12 | + | ||
| 13 | +<script> | ||
| 14 | + | ||
| 15 | +export default { | ||
| 16 | + name: "treeRecord" | ||
| 17 | +} | ||
| 18 | +</script> | ||
| 19 | + | ||
| 20 | +<style scoped> | ||
| 21 | +.record-wrap{ | ||
| 22 | + padding-bottom: 120rpx; | ||
| 23 | +} | ||
| 24 | +.record-list-wrap{ | ||
| 25 | + height: 200rpx; | ||
| 26 | + margin: 20rpx 20rpx 0 20rpx; | ||
| 27 | + padding: 20rpx; | ||
| 28 | + box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | ||
| 29 | + border-radius: 10rpx; | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +.addTree{ | ||
| 33 | + width: 100%; | ||
| 34 | + position: fixed; | ||
| 35 | + bottom: 0; | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +</style> | ||
| 0 | \ No newline at end of file | 39 | \ No newline at end of file |