Commit b951d82752f7b24f3923308fa01ba430deb10c12
1 parent
f2ecd120
树木详情
Showing
13 changed files
with
674 additions
and
195 deletions
App.vue
api/tree.js
... | ... | @@ -14,6 +14,9 @@ export const treeDetailReq = (params) => request.get('/business/tree/'+params ) |
14 | 14 | // 修改树 |
15 | 15 | export const updateTree = (params) => request.put('/business/tree/',params ) |
16 | 16 | |
17 | +// 树更变记录 | |
18 | +export const treeLogReq = (params) => request.get('/gardentree/logs/list/',params ) | |
19 | + | |
17 | 20 | // 归属公司 |
18 | 21 | export const belongCompanyreq = (params) => request.get('/system/dict/data/type/belongCompanyId', params) |
19 | 22 | ... | ... |
components/thorui/fui-css/firstui.css
pages.json
... | ... | @@ -298,18 +298,19 @@ |
298 | 298 | } |
299 | 299 | }, |
300 | 300 | { |
301 | - "path": "treePage/editTree", | |
301 | + "path": "treePage/treeInfo", | |
302 | 302 | "style": { |
303 | - "navigationBarTitleText": "修改树木" | |
303 | + "navigationBarTitleText": "树木详情" | |
304 | 304 | } |
305 | 305 | }, |
306 | 306 | { |
307 | - "path": "treePage/treeDeatil", | |
307 | + "path": "treePage/editTree", | |
308 | 308 | "style": { |
309 | - "navigationBarTitleText": "树木详情" | |
309 | + "navigationBarTitleText": "修改树木" | |
310 | 310 | } |
311 | 311 | } |
312 | 312 | |
313 | + | |
313 | 314 | ] |
314 | 315 | } |
315 | 316 | ], |
... | ... | @@ -340,9 +341,10 @@ |
340 | 341 | ] |
341 | 342 | }, |
342 | 343 | "globalStyle": { |
343 | - "navigationBarTextStyle": "white", | |
344 | + "navigationBarTextStyle": "black", | |
344 | 345 | "navigationBarTitleText": "园林养护", |
345 | - "navigationBarBackgroundColor": "#577EE3" | |
346 | + "navigationBarBackgroundColor": "#F8F8F8", | |
347 | + "backgroundColor": "#F8F8F8" | |
346 | 348 | }, |
347 | 349 | "easycom": { |
348 | 350 | "autoscan": true, | ... | ... |
static/images/tree/tree-high.png
0 → 100644
1003 Bytes
static/images/tree/treearound.png
0 → 100644
927 Bytes
subPackages/treePage/addTree.vue
1 | 1 | <template> |
2 | 2 | <view class="container"> |
3 | - <tui-form ref="form" :show-message="false" :model="formData"> | |
3 | + <tui-form ref="form" :show-message="false" :model="formData"> | |
4 | 4 | <tui-form-item asterisk label="名称" prop="treetype"> |
5 | 5 | <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30" |
6 | 6 | v-model="formData.treetype"></tui-input> |
... | ... | @@ -44,22 +44,22 @@ |
44 | 44 | |
45 | 45 | <tui-col :span="12"> |
46 | 46 | <tui-form-item |
47 | - | |
48 | - label="纬度" | |
47 | + label="经度" | |
49 | 48 | class="location-form-item" |
50 | - | |
51 | 49 | prop="latitude" |
52 | 50 | > |
53 | - {{ formData.latitude }} | |
51 | + {{ formData.longitude }} | |
54 | 52 | </tui-form-item> |
55 | 53 | </tui-col> |
56 | 54 | <tui-col :span="12"> |
57 | 55 | <tui-form-item |
58 | - label="经度" | |
56 | + | |
57 | + label="纬度" | |
59 | 58 | class="location-form-item" |
59 | + | |
60 | 60 | prop="latitude" |
61 | 61 | > |
62 | - {{ formData.longitude }} | |
62 | + {{ formData.latitude }} | |
63 | 63 | </tui-form-item> |
64 | 64 | </tui-col> |
65 | 65 | |
... | ... | @@ -72,9 +72,9 @@ |
72 | 72 | <!-- <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled--> |
73 | 73 | <!-- backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>--> |
74 | 74 | </tui-form-item> |
75 | - <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow"> | |
75 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText" @click="pickerShow"> | |
76 | 76 | <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled |
77 | - backgroundColor="transparent" v-model="formData.oldtreeownership"></tui-input> | |
77 | + backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input> | |
78 | 78 | </tui-form-item> |
79 | 79 | |
80 | 80 | <tui-form-item label="图片信息" asterisk prop="treeImgList"> |
... | ... | @@ -93,19 +93,8 @@ |
93 | 93 | <!-- 自定义上传按钮 --> |
94 | 94 | <view class="upload-btn"> |
95 | 95 | <tui-icon name="plus" size="32" color="#999"></tui-icon> |
96 | - | |
97 | 96 | </view> |
98 | - <!-- 提示信息 --> | |
99 | - <!-- <view class="upload-tips">--> | |
100 | - <!-- 最多上传3张图片,单张不超过5MB--> | |
101 | - <!-- </view>--> | |
102 | - | |
103 | - | |
104 | 97 | </tui-upload> |
105 | - <!-- 提示信息 --> | |
106 | - <!-- <view class="upload-tips">--> | |
107 | - <!-- 最多上传3张图片,单张不超过5MB--> | |
108 | - <!-- </view>--> | |
109 | 98 | </tui-form-item> |
110 | 99 | |
111 | 100 | <!-- 动画区域(初始隐藏) --> |
... | ... | @@ -126,9 +115,9 @@ |
126 | 115 | </tui-form-item> |
127 | 116 | </tui-col> |
128 | 117 | <tui-col :span="12"> |
129 | - <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerLevelShow"> | |
118 | + <tui-form-item label="级别" arrow highlight prop="treeleveltext" @click="pickerLevelShow"> | |
130 | 119 | <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled |
131 | - backgroundColor="transparent" v-model="formData.treelevel"></tui-input> | |
120 | + backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input> | |
132 | 121 | </tui-form-item> |
133 | 122 | </tui-col> |
134 | 123 | </tui-row> |
... | ... | @@ -195,12 +184,13 @@ |
195 | 184 | > |
196 | 185 | {{ isShow ? '- 隐藏区域' : '+ 显示区域' }} |
197 | 186 | </tui-button> |
187 | + </tui-form> | |
198 | 188 | |
189 | + <view style="height: 60px;width: 100%"></view> | |
199 | 190 | |
200 | - <view class="tui-btn__box"> | |
201 | - <tui-button bold @click="submit">提交</tui-button> | |
202 | - </view> | |
203 | - </tui-form> | |
191 | + <view class="tui-btn__box"> | |
192 | + <tui-button bold @click="submit">提交</tui-button> | |
193 | + </view> | |
204 | 194 | <tui-picker :show="show" :pickerData="treeOwnershipData" textField="dictLabel" valueField="dictValue" |
205 | 195 | @hide="pickerHide" @change="pickerChange"> |
206 | 196 | </tui-picker> |
... | ... | @@ -212,7 +202,7 @@ |
212 | 202 | </template> |
213 | 203 | |
214 | 204 | <script> |
215 | -import { uploadURL,OSSURL} from '@/config/app' | |
205 | +import { uploadURL, OSSURL } from '@/config/app' | |
216 | 206 | import { treeOwnership, addTree, treeLevelReq } from "@/api/tree"; |
217 | 207 | const rules = [{ |
218 | 208 | name: "treetype", |
... | ... | @@ -254,7 +244,7 @@ const rules = [{ |
254 | 244 | rule: ["required"], |
255 | 245 | msg: ["请选择权属单位"] |
256 | 246 | }, { |
257 | - name: "oldtreeownership", | |
247 | + name: "oldtreeownershipText", | |
258 | 248 | rule: ["required"], |
259 | 249 | msg: ["请选择权属分类"] |
260 | 250 | }, { |
... | ... | @@ -293,10 +283,12 @@ export default { |
293 | 283 | dbh: '', |
294 | 284 | //级别 |
295 | 285 | treelevel: '', |
286 | + treeleveltext:'', | |
296 | 287 | //权属单位 |
297 | 288 | managedutyunit: '', |
298 | 289 | //权属分类 |
299 | 290 | oldtreeownership: '', |
291 | + oldtreeownershipText:'', | |
300 | 292 | latinname: '', // 拉丁名 |
301 | 293 | estimationtreeage: '', // 估测树龄 |
302 | 294 | canopysouthnorth: '', // 冠幅南北 |
... | ... | @@ -313,8 +305,7 @@ export default { |
313 | 305 | }, |
314 | 306 | } |
315 | 307 | }, |
316 | - watch: { | |
317 | - }, | |
308 | + watch: {}, | |
318 | 309 | onReady() { |
319 | 310 | //开启即时校验,开启后输入即校验【参数必传】,第一参数:是否开启;第二参数:校验规则 |
320 | 311 | // 开启即时校验,参数:是否开启、校验规则 |
... | ... | @@ -329,7 +320,7 @@ export default { |
329 | 320 | this.treeOwnership() |
330 | 321 | }, |
331 | 322 | methods: { |
332 | - // 权属分类 | |
323 | + // 权属分类 | |
333 | 324 | treeOwnership() { |
334 | 325 | treeOwnership().then(res => { |
335 | 326 | console.log(res) |
... | ... | @@ -347,12 +338,11 @@ export default { |
347 | 338 | // this.formData.treeImgList.push(e.imgArr); |
348 | 339 | console.log(e.imgArr[0]) |
349 | 340 | this.formData.treeImgListFile = e.imgArr |
350 | - this.formData.treeImgList = e.imgArr.map(item=>OSSURL+item); | |
341 | + this.formData.treeImgList = e.imgArr.map(item => OSSURL + item); | |
351 | 342 | console.log(this.formData.treeImgList) |
352 | 343 | // baseURL |
353 | 344 | // 手动触发treeImgList字段的校验 |
354 | 345 | this.$refs.form.validateField("treeImgList"); |
355 | - | |
356 | 346 | } |
357 | 347 | // this.formData.treeImgList = e.imgArr; |
358 | 348 | // 根据实际接口返回格式调整 |
... | ... | @@ -364,7 +354,6 @@ export default { |
364 | 354 | this.formData.treeImgList.splice(index, 1); |
365 | 355 | this.formData.treeImgListFile.splice(index, 1); |
366 | 356 | console.log(this.formData.treeImgList.length) |
367 | - | |
368 | 357 | }, |
369 | 358 | pickerShow() { |
370 | 359 | this.show = true |
... | ... | @@ -374,7 +363,8 @@ export default { |
374 | 363 | }, |
375 | 364 | pickerChange(e) { |
376 | 365 | console.log(e) |
377 | - this.formData.oldtreeownership = e.dictLabel | |
366 | + this.formData.oldtreeownership = e.dictValue | |
367 | + this.formData.oldtreeownershipText = e.dictLabel | |
378 | 368 | }, |
379 | 369 | pickerLevelShow() { |
380 | 370 | this.levelshow = true |
... | ... | @@ -384,7 +374,9 @@ export default { |
384 | 374 | }, |
385 | 375 | pickerLevelChange(e) { |
386 | 376 | console.log(e) |
387 | - this.formData.treelevel = e.dictLabel | |
377 | + this.formData.treelevel = e.dictValue | |
378 | + this.formData.treeleveltext = e.dictLabel | |
379 | + | |
388 | 380 | }, |
389 | 381 | submit() { |
390 | 382 | // 3. 打印提交时的数据 | ... | ... |
subPackages/treePage/editTreeIfo.vue
... | ... | @@ -72,9 +72,9 @@ |
72 | 72 | <!-- <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled--> |
73 | 73 | <!-- backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>--> |
74 | 74 | </tui-form-item> |
75 | - <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow"> | |
75 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText" @click="pickerShow"> | |
76 | 76 | <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled |
77 | - backgroundColor="transparent" v-model="formData.oldtreeownership"></tui-input> | |
77 | + backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input> | |
78 | 78 | </tui-form-item> |
79 | 79 | |
80 | 80 | <tui-form-item label="图片信息" asterisk prop="treeImgList"> |
... | ... | @@ -126,9 +126,9 @@ |
126 | 126 | </tui-form-item> |
127 | 127 | </tui-col> |
128 | 128 | <tui-col :span="12"> |
129 | - <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerLevelShow"> | |
129 | + <tui-form-item label="级别" arrow highlight prop="treeleveltext" @click="pickerLevelShow"> | |
130 | 130 | <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled |
131 | - backgroundColor="transparent" v-model="formData.treelevel"></tui-input> | |
131 | + backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input> | |
132 | 132 | </tui-form-item> |
133 | 133 | </tui-col> |
134 | 134 | </tui-row> |
... | ... | @@ -195,12 +195,11 @@ |
195 | 195 | > |
196 | 196 | {{ isShow ? '- 隐藏区域' : '+ 显示区域' }} |
197 | 197 | </tui-button> |
198 | - | |
199 | - | |
200 | - <view class="tui-btn__box"> | |
201 | - <tui-button bold @click="submit">提交</tui-button> | |
202 | - </view> | |
203 | 198 | </tui-form> |
199 | + <view style="height: 60px;width: 100%"></view> | |
200 | + <view class="tui-btn__box"> | |
201 | + <tui-button bold @click="submit">提交</tui-button> | |
202 | + </view> | |
204 | 203 | <tui-picker :show="show" :pickerData="treeOwnershipData" textField="dictLabel" valueField="dictValue" |
205 | 204 | @hide="pickerHide" @change="pickerChange"> |
206 | 205 | </tui-picker> |
... | ... | @@ -212,7 +211,7 @@ |
212 | 211 | </template> |
213 | 212 | |
214 | 213 | <script> |
215 | -import { uploadURL,OSSURL} from '@/config/app' | |
214 | +import { uploadURL, OSSURL } from '@/config/app' | |
216 | 215 | import { treeOwnership, addTree, treeLevelReq, treeDetailReq, updateTree } from "@/api/tree"; |
217 | 216 | const rules = [{ |
218 | 217 | name: "treetype", |
... | ... | @@ -254,7 +253,7 @@ const rules = [{ |
254 | 253 | rule: ["required"], |
255 | 254 | msg: ["请选择权属单位"] |
256 | 255 | }, { |
257 | - name: "oldtreeownership", | |
256 | + name: "oldtreeownershipText", | |
258 | 257 | rule: ["required"], |
259 | 258 | msg: ["请选择权属分类"] |
260 | 259 | }, { |
... | ... | @@ -273,7 +272,6 @@ export default { |
273 | 272 | required: true |
274 | 273 | } |
275 | 274 | }, |
276 | - | |
277 | 275 | data() { |
278 | 276 | return { |
279 | 277 | isShow: false, // 控制区域显示/隐藏 |
... | ... | @@ -293,10 +291,12 @@ export default { |
293 | 291 | dbh: '', |
294 | 292 | //级别 |
295 | 293 | treelevel: '', |
294 | + treeleveltext: '', | |
296 | 295 | //权属单位 |
297 | 296 | managedutyunit: '', |
298 | 297 | //权属分类 |
299 | 298 | oldtreeownership: '', |
299 | + oldtreeownershipText: '', | |
300 | 300 | latinname: '', // 拉丁名 |
301 | 301 | estimationtreeage: '', // 估测树龄 |
302 | 302 | canopysouthnorth: '', // 冠幅南北 |
... | ... | @@ -315,14 +315,15 @@ export default { |
315 | 315 | }, |
316 | 316 | watch: { |
317 | 317 | treeId: { |
318 | - // immediate: true, | |
318 | + immediate: true, | |
319 | 319 | handler(newVal, oldVal) { |
320 | 320 | if (newVal !== oldVal) { |
321 | 321 | treeLevelReq().then(res => { |
322 | 322 | this.treeLevelData = res.data |
323 | 323 | }) |
324 | - // this.formData.road = options.roadId | |
325 | - this.treeOwnership() | |
324 | + treeOwnership().then(res => { | |
325 | + this.treeOwnershipData = res.data | |
326 | + }) | |
326 | 327 | this.treeDetailQuery(newVal) |
327 | 328 | } |
328 | 329 | } |
... | ... | @@ -335,34 +336,28 @@ export default { |
335 | 336 | // this.$refs.form && this.$refs.form.immediateValidate(true, rules) |
336 | 337 | }, |
337 | 338 | onLoad(options) { |
338 | - | |
339 | - | |
340 | 339 | }, |
341 | 340 | methods: { |
342 | - treeDetailQuery(newVal){ | |
343 | - | |
344 | - treeDetailReq(newVal).then(res=>{ | |
341 | + treeDetailQuery(newVal) { | |
342 | + treeDetailReq(newVal).then(res => { | |
345 | 343 | this.formData = res.data |
346 | - | |
344 | + const option = this.treeOwnershipData.find(item => item.dictValue === this.formData.oldtreeownership); | |
345 | + const optiontreelevel = this.treeLevelData.find(item => item.dictValue === this.formData.treelevel); | |
346 | + if (option) { | |
347 | + this.formData.oldtreeownership = option.dictValue; | |
348 | + this.formData.oldtreeownershipText = option.dictLabel; | |
349 | + } | |
350 | + if (optiontreelevel) { | |
351 | + this.formData.treelevel = optiontreelevel.dictValue; | |
352 | + this.formData.treeleveltext = optiontreelevel.dictLabel; | |
353 | + } | |
347 | 354 | this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => { |
348 | 355 | return imgUrl.startsWith(OSSURL) |
349 | 356 | ? imgUrl.slice(OSSURL.length) |
350 | 357 | : imgUrl; |
351 | 358 | }); |
352 | - | |
353 | - | |
354 | - // this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => { | |
355 | - // // 强制确保 imgUrl 是字符串类型 | |
356 | - // const urlStr = typeof imgUrl === 'string' ? imgUrl : ''; | |
357 | - // return { | |
358 | - // url: urlStr // 必须是字符串,不能是对象 | |
359 | - // }; | |
360 | - // }); | |
361 | - console.log('123'+newVal) | |
362 | - console.log( this.formData.treeImgListFile) | |
363 | 359 | }) |
364 | 360 | }, |
365 | - | |
366 | 361 | treeOwnership() { |
367 | 362 | treeOwnership().then(res => { |
368 | 363 | console.log(res) |
... | ... | @@ -377,19 +372,14 @@ export default { |
377 | 372 | handleComplete(e) { |
378 | 373 | if (e.status == 1) { |
379 | 374 | console.log(e) |
380 | - // this.formData.treeImgList.push(e.imgArr); | |
381 | - console.log(e.imgArr[0]) | |
375 | + | |
382 | 376 | this.formData.treeImgListFile = e.imgArr |
383 | - this.formData.treeImgList = e.imgArr.map(item=>OSSURL+item); | |
377 | + this.formData.treeImgList = e.imgArr.map(item => OSSURL + item); | |
384 | 378 | console.log(this.formData.treeImgList) |
385 | 379 | // baseURL |
386 | 380 | // 手动触发treeImgList字段的校验 |
387 | 381 | this.$refs.form.validateField("treeImgList"); |
388 | - | |
389 | 382 | } |
390 | - // this.formData.treeImgList = e.imgArr; | |
391 | - // 根据实际接口返回格式调整 | |
392 | - // this.currentFiles.push(e.data); | |
393 | 383 | }, |
394 | 384 | // 删除图片回调 |
395 | 385 | handleRemove(index) { |
... | ... | @@ -397,7 +387,6 @@ export default { |
397 | 387 | this.formData.treeImgList.splice(index, 1); |
398 | 388 | this.formData.treeImgListFile.splice(index, 1); |
399 | 389 | console.log(this.formData.treeImgList.length) |
400 | - | |
401 | 390 | }, |
402 | 391 | pickerShow() { |
403 | 392 | this.show = true |
... | ... | @@ -407,7 +396,8 @@ export default { |
407 | 396 | }, |
408 | 397 | pickerChange(e) { |
409 | 398 | console.log(e) |
410 | - this.formData.oldtreeownership = e.dictLabel | |
399 | + this.formData.oldtreeownership = e.dictValue | |
400 | + this.formData.oldtreeownershipText = e.dictLabel | |
411 | 401 | }, |
412 | 402 | pickerLevelShow() { |
413 | 403 | this.levelshow = true |
... | ... | @@ -417,7 +407,8 @@ export default { |
417 | 407 | }, |
418 | 408 | pickerLevelChange(e) { |
419 | 409 | console.log(e) |
420 | - this.formData.treelevel = e.dictLabel | |
410 | + this.formData.treelevel = e.dictValue | |
411 | + this.formData.treeleveltext = e.dictLabel | |
421 | 412 | }, |
422 | 413 | submit() { |
423 | 414 | // 3. 打印提交时的数据 | ... | ... |
subPackages/treePage/treeDetail.vue
1 | -<script lang="ts"> | |
2 | -import {defineComponent} from 'vue' | |
1 | +<template> | |
2 | + <view class="container"> | |
3 | 3 | |
4 | -export default defineComponent({ | |
5 | - name: "treeDetail" | |
6 | -}) | |
7 | -</script> | |
4 | + <!-- <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>--> | |
5 | + <view>123</view> | |
8 | 6 | |
9 | -<template> | |
10 | - <template> | |
11 | - | |
12 | - <view class="container"> | |
13 | - <tui-tab :tabs="tabs" scroll @change="tabChange"></tui-tab> | |
14 | - | |
15 | - | |
16 | - <view class="content-container"> | |
17 | - <view v-if="currentName === '基本信息'">xiugai基本信息</view> | |
18 | - | |
19 | - <treeLog v-if="currentName === '变更日志'" :logId="id" /> | |
20 | - </view> | |
21 | - </view> | |
22 | - | |
23 | - </template> | |
24 | - <script > | |
25 | - import treeLog from "./treeLog.vue"; | |
26 | - export default { | |
27 | - components:{treeLog}, | |
28 | - name: "editTree", | |
29 | - data(){ | |
30 | - return{ | |
31 | - tabs:['基本信息','变更日志',], | |
32 | - currentName:'基本信息', | |
33 | - id:'' | |
34 | - } | |
35 | - }, | |
36 | - onLoad(options){ | |
37 | - this.id = options.id | |
38 | - }, | |
39 | - methods:{ | |
40 | - tabChange(i){ | |
41 | - console.log(i.item.name) | |
42 | - this.currentName = i.item.name | |
43 | - } | |
44 | - } | |
45 | - } | |
46 | - </script> | |
7 | + </view> | |
47 | 8 | |
9 | +</template> | |
48 | 10 | |
11 | +<script> | |
12 | +export default { | |
49 | 13 | |
50 | - <style scoped> | |
51 | - .content-container{ | |
52 | - padding-top: 20rpx; | |
14 | + data() { | |
15 | + return { | |
16 | + rows: [], | |
17 | + roadId: '' | |
53 | 18 | } |
19 | + }, | |
20 | + onLoad(options) { | |
21 | + let dataString = decodeURIComponent(options.data); | |
22 | + let data = JSON.parse(dataString); | |
23 | + console.log(data); // { key: 'value', otherKey: 123 } | |
24 | + }, | |
25 | + methods: { | |
54 | 26 | |
55 | - </style> | |
27 | + } | |
28 | +} | |
29 | +</script> | |
56 | 30 | |
57 | -</template> | |
58 | 31 | |
59 | 32 | <style scoped> |
60 | 33 | |
34 | + | |
61 | 35 | </style> |
62 | 36 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeFiles.vue
... | ... | @@ -38,22 +38,20 @@ |
38 | 38 | <!-- <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>--> |
39 | 39 | </view> |
40 | 40 | <view v-else> |
41 | - <view v-for="i in roads" class="card-wrap" @click="toNewPage(i.roadId)"> | |
41 | + <view v-for="i in roads" class="card-wrap cad-box-shadow" @click="toNewPage(i.roadId)"> | |
42 | 42 | |
43 | 43 | <p class="fs-flex__between"> |
44 | - <span>{{ i.roadName }}</span> | |
45 | - <span>{{ i.treeCount }}颗</span> | |
44 | + <span class="fs-ellipsis">{{ i.roadName }}</span> | |
45 | + <span class="treeCount ">{{ i.treeCount }}颗</span> | |
46 | 46 | </p> |
47 | 47 | |
48 | - <p>已录入行道树:{{ i.recordedCount }}颗</p> | |
49 | - | |
50 | - <p>起点:{{ i.startRemark }}</p> | |
51 | - <p>终点:{{ i.endRemark }}</p> | |
48 | + <p class="fs-ellipsis fs-my8">已录入行道树:{{ i.recordedCount }}颗</p> | |
49 | + <p class="fs-ellipsis fs-my8" style="color: #999">起点:{{ i.startRemark }}</p> | |
50 | + <p class="fs-ellipsis " style="color: #999">终点:{{ i.endRemark }}</p> | |
52 | 51 | |
53 | 52 | </view> |
54 | 53 | </view> |
55 | - | |
56 | - | |
54 | + | |
57 | 55 | </view> |
58 | 56 | </view> |
59 | 57 | |
... | ... | @@ -110,10 +108,9 @@ export default { |
110 | 108 | }) |
111 | 109 | }, |
112 | 110 | methods: { |
113 | - toNewPage(params){ | |
111 | + toNewPage(params) { | |
114 | 112 | console.log('123312') |
115 | 113 | uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${params}`) |
116 | - | |
117 | 114 | }, |
118 | 115 | searchChange() { |
119 | 116 | this.deptListQuery() |
... | ... | @@ -189,6 +186,7 @@ export default { |
189 | 186 | height: 100%; |
190 | 187 | background: #fff; |
191 | 188 | padding-top: 20rpx; |
189 | + overflow: hidden; | |
192 | 190 | } |
193 | 191 | |
194 | 192 | .teamsItem { |
... | ... | @@ -199,10 +197,10 @@ export default { |
199 | 197 | } |
200 | 198 | |
201 | 199 | .card-wrap { |
202 | - height: 200rpx; | |
200 | + //height: 200rpx; | |
203 | 201 | margin: 0 20rpx 20rpx 20rpx; |
204 | 202 | padding: 20rpx; |
205 | - box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | |
203 | + | |
206 | 204 | border-radius: 10rpx; |
207 | 205 | } |
208 | 206 | |
... | ... | @@ -217,6 +215,12 @@ export default { |
217 | 215 | } |
218 | 216 | } |
219 | 217 | |
218 | +.treeCount { | |
219 | + color: #5f5fe2; | |
220 | + min-width: 70px; | |
221 | + text-align: right; | |
222 | +} | |
223 | + | |
220 | 224 | </style> |
221 | 225 | |
222 | 226 | <style> | ... | ... |
subPackages/treePage/treeInfo.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="treetype"> | |
5 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30" :disabled="true" | |
6 | + v-model="formData.treetype"></tui-input> | |
7 | + </tui-form-item> | |
8 | + | |
9 | + <tui-row> | |
10 | + <tui-col :span="12"> | |
11 | + <tui-form-item label="高度" asterisk prop="treeheight" :position="3"> | |
12 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
13 | + v-model="formData.treeheight"></tui-input> | |
14 | + <template v-slot:right> | |
15 | + <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text> | |
16 | + </template> | |
17 | + </tui-form-item> | |
18 | + </tui-col> | |
19 | + <tui-col :span="12"> | |
20 | + <tui-form-item label="胸径" asterisk prop="dbh" :position="3"> | |
21 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
22 | + v-model="formData.dbh"></tui-input> | |
23 | + <template v-slot:right> | |
24 | + <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</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 | + prop="growlocation" | |
36 | + > | |
37 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true" | |
38 | + v-model="formData.growlocation"></tui-input> | |
39 | + <template v-slot:right> | |
40 | + <tui-icon name="gps" :size="20"></tui-icon> | |
41 | + </template> | |
42 | + </tui-form-item> | |
43 | + | |
44 | + <tui-col :span="12"> | |
45 | + <tui-form-item | |
46 | + | |
47 | + label="纬度" | |
48 | + class="location-form-item" | |
49 | + | |
50 | + prop="latitude" | |
51 | + > | |
52 | + {{ formData.latitude }} | |
53 | + </tui-form-item> | |
54 | + </tui-col> | |
55 | + <tui-col :span="12"> | |
56 | + <tui-form-item | |
57 | + label="经度" | |
58 | + class="location-form-item" | |
59 | + prop="latitude" | |
60 | + > | |
61 | + {{ formData.longitude }} | |
62 | + </tui-form-item> | |
63 | + </tui-col> | |
64 | + | |
65 | + | |
66 | + <tui-form-item asterisk label="管护单位" prop="managedutyunit"> | |
67 | + | |
68 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" :disabled="true" | |
69 | + v-model="formData.managedutyunit"></tui-input> | |
70 | + | |
71 | + <!-- <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled--> | |
72 | + <!-- backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>--> | |
73 | + </tui-form-item> | |
74 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText"> | |
75 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true" | |
76 | + backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input> | |
77 | + </tui-form-item> | |
78 | + | |
79 | + <tui-form-item label="图片信息" asterisk prop="treeImgList"> | |
80 | + | |
81 | + <!-- <tui-image-group :imageList="formData.treeImgList" radius="0"></tui-image-group>--> | |
82 | + | |
83 | + <!-- 图片组组件 --> | |
84 | + <tui-image-group | |
85 | + :imageList="formData.treeImgList" | |
86 | + radius="0" | |
87 | + @click="handleImageClick" | |
88 | + > | |
89 | + </tui-image-group> | |
90 | + | |
91 | + <!-- 使用ThorUI的tui-upload组件 --> | |
92 | + <!-- @remove="handleRemove" :multiple="true" :value="formData.treeImgList"--> | |
93 | + <!-- <tui-upload :disabled="true"--> | |
94 | + <!-- :height="140"--> | |
95 | + <!-- :width="140"--> | |
96 | + <!-- :value="formData.treeImgListFile"--> | |
97 | + <!-- :serverUrl="serverURL" :header="{'Authorization': userToken}"--> | |
98 | + <!-- @complete="handleComplete"--> | |
99 | + <!-- @remove="handleRemove"--> | |
100 | + <!-- :limit="3"--> | |
101 | + <!-- accept="image/*"--> | |
102 | + <!-- >--> | |
103 | + <!-- <!– 自定义上传按钮 –>--> | |
104 | + <!-- <view class="upload-btn">--> | |
105 | + <!-- <tui-icon name="plus" size="32" color="#999"></tui-icon>--> | |
106 | + | |
107 | + <!-- </view>--> | |
108 | + <!-- <!– 提示信息 –>--> | |
109 | + <!-- <!– <view class="upload-tips">–>--> | |
110 | + <!-- <!– 最多上传3张图片,单张不超过5MB–>--> | |
111 | + <!-- <!– </view>–>--> | |
112 | + | |
113 | + | |
114 | + <!-- </tui-upload>--> | |
115 | + <!-- 提示信息 --> | |
116 | + <!-- <view class="upload-tips">--> | |
117 | + <!-- 最多上传3张图片,单张不超过5MB--> | |
118 | + <!-- </view>--> | |
119 | + </tui-form-item> | |
120 | + | |
121 | + | |
122 | + <tui-row> | |
123 | + <tui-col :span="12"> | |
124 | + <tui-form-item label="拉丁文" prop="latinname"> | |
125 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" :disabled="true" | |
126 | + v-model="formData.latinname"></tui-input> | |
127 | + </tui-form-item> | |
128 | + </tui-col> | |
129 | + <tui-col :span="12"> | |
130 | + <tui-form-item label="级别" arrow highlight prop="treeleveltext"> | |
131 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" :disabled="true" | |
132 | + backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input> | |
133 | + </tui-form-item> | |
134 | + </tui-col> | |
135 | + </tui-row> | |
136 | + | |
137 | + <tui-form-item label="生长环境" prop="growthenvironment"> | |
138 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50" :disabled="true" | |
139 | + v-model="formData.growthenvironment"></tui-input> | |
140 | + </tui-form-item> | |
141 | + | |
142 | + | |
143 | + <tui-row> | |
144 | + <tui-col :span="12"> | |
145 | + <tui-form-item label="预估树龄" prop="estimationtreeage" :position="3"> | |
146 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
147 | + v-model="formData.estimationtreeage"></tui-input> | |
148 | + <template v-slot:right> | |
149 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</text> | |
150 | + </template> | |
151 | + </tui-form-item> | |
152 | + </tui-col> | |
153 | + <tui-col :span="12"> | |
154 | + <tui-form-item label="干周" prop="weekday" :position="3"> | |
155 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
156 | + v-model="formData.weekday"></tui-input> | |
157 | + <template v-slot:right> | |
158 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text> | |
159 | + </template> | |
160 | + </tui-form-item> | |
161 | + </tui-col> | |
162 | + </tui-row> | |
163 | + | |
164 | + | |
165 | + <tui-row> | |
166 | + <tui-col :span="12"> | |
167 | + <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="3"> | |
168 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
169 | + v-model="formData.canopyeastwest"></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-col :span="12"> | |
176 | + <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="3"> | |
177 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" :disabled="true" | |
178 | + v-model="formData.canopysouthnorth"></tui-input> | |
179 | + <template v-slot:right> | |
180 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text> | |
181 | + </template> | |
182 | + </tui-form-item> | |
183 | + </tui-col> | |
184 | + </tui-row> | |
185 | + | |
186 | + </tui-form> | |
187 | + <tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery> | |
188 | + </view> | |
189 | +</template> | |
190 | + | |
191 | +<script> | |
192 | +import { uploadURL, OSSURL } from '@/config/app' | |
193 | +import { treeOwnership, treeLevelReq } from "@/api/tree"; | |
194 | +const rules = [{ | |
195 | + name: "treetype", | |
196 | + rule: ["required"], | |
197 | + msg: ["请输入名称"] | |
198 | +}, { | |
199 | + name: "treeheight", | |
200 | + rule: ["required", "maxLength:10", "isAmount"], | |
201 | + msg: ["请输入数高", "数高不能超过10个字符", "请输入正确"] | |
202 | +}, { | |
203 | + name: "dbh", | |
204 | + rule: ["required", "maxLength:10", "isAmount"], | |
205 | + msg: ["请输入胸径", "胸径不能超过10个字符", "请输入正确"] | |
206 | +}, { | |
207 | + name: "estimationtreeage", | |
208 | + rule: ["maxLength:10", "isAmount"], | |
209 | + msg: ["胸径不能超过10个字符", "请输入正确"] | |
210 | +}, | |
211 | + { | |
212 | + name: "weekday", | |
213 | + rule: ["maxLength:10", "isAmount"], | |
214 | + msg: ["胸径不能超过10个字符", "请输入正确"] | |
215 | + }, | |
216 | + { | |
217 | + name: "canopyeastwest", | |
218 | + rule: ["maxLength:10", "isAmount"], | |
219 | + msg: ["胸径不能超过10个字符", "请输入正确"] | |
220 | + }, | |
221 | + { | |
222 | + name: "canopysouthnorth", | |
223 | + rule: ["maxLength:10", "isAmount"], | |
224 | + msg: ["胸径不能超过10个字符", "请输入正确"] | |
225 | + }, { | |
226 | + name: "growlocation", | |
227 | + rule: ["required"], | |
228 | + msg: ["请地图选择位置"] | |
229 | + }, { | |
230 | + name: "managedutyunit", | |
231 | + rule: ["required"], | |
232 | + msg: ["请选择权属单位"] | |
233 | + }, { | |
234 | + name: "oldtreeownershipText", | |
235 | + rule: ["required"], | |
236 | + msg: ["请选择权属分类"] | |
237 | + }, { | |
238 | + name: "treeImgListFile", | |
239 | + rule: ["required", "custom"], // 增加required强制必选 | |
240 | + msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示 | |
241 | + custom: function (value) { | |
242 | + // 即使required通过,再校验数组长度 | |
243 | + return value.length > 0; | |
244 | + } | |
245 | + }]; | |
246 | +export default { | |
247 | + data() { | |
248 | + return { | |
249 | +// 当前预览索引 | |
250 | + currentIndex: 0, | |
251 | + // 是否显示预览弹窗 | |
252 | + show: false, | |
253 | + urls: [], | |
254 | + treeOwnershipData: [], | |
255 | + treeLevelData: [], // 级别 | |
256 | + //仅对部分数据进行收集演示 | |
257 | + formData: { | |
258 | + //数名 | |
259 | + treetype: '', | |
260 | + //树高 | |
261 | + treeheight: '', | |
262 | + //胸径 | |
263 | + dbh: '', | |
264 | + //级别 | |
265 | + treelevel: '', | |
266 | + treeleveltext: '', | |
267 | + //权属单位 | |
268 | + managedutyunit: '', | |
269 | + //权属分类 | |
270 | + oldtreeownership: '', | |
271 | + oldtreeownershipText: '', | |
272 | + latinname: '', // 拉丁名 | |
273 | + estimationtreeage: '', // 估测树龄 | |
274 | + canopysouthnorth: '', // 冠幅南北 | |
275 | + canopyeastwest: '', // 冠幅东西 | |
276 | + weekday: '', // 干周 | |
277 | + growlocation: '', // 位置 | |
278 | + growthenvironment: '', // 生长环境 | |
279 | + treeImgList: [], // 图片信息 | |
280 | + treeImgListFile: [], // 图片信息 | |
281 | + address: '', // 位置名称 | |
282 | + latitude: '', // 纬度 | |
283 | + longitude: '', // 经度 | |
284 | + road: '' | |
285 | + }, | |
286 | + } | |
287 | + }, | |
288 | + onReady() { | |
289 | + //开启即时校验,开启后输入即校验【参数必传】,第一参数:是否开启;第二参数:校验规则 | |
290 | + // 开启即时校验,参数:是否开启、校验规则 | |
291 | + this.$refs.form && this.$refs.form.immediateValidate(true, rules); | |
292 | + }, | |
293 | + onLoad(options) { | |
294 | + // const eventChannel = this.getOpenerEventChannel(); | |
295 | + // // eventChannel.on监听,获取上一页面通过eventChannel事件传送的数据 | |
296 | + // eventChannel.on('pageDataTreeInfo', data=> { | |
297 | + // console.log(data) // {data: 123, title: "A页面",source: 1, content: "点个赞点个赞,求求了"} | |
298 | + // console.log('4123') | |
299 | + // this.formData =data | |
300 | + // }) | |
301 | + this.formData = { | |
302 | + "searchEntities": null, | |
303 | + "createBy": null, | |
304 | + "createTime": null, | |
305 | + "updateBy": null, | |
306 | + "updateTime": null, | |
307 | + "remark": null, | |
308 | + "beginTime": null, | |
309 | + "endTime": null, | |
310 | + "exportType": null, | |
311 | + "params": {}, | |
312 | + "id": 22, | |
313 | + "treeid": 28, | |
314 | + "treenumber": "daf23b62-d295-4131-b15d-fca6259d251f", | |
315 | + "latinname": "3", | |
316 | + "treetype": "312名称", | |
317 | + "treeheight": "31", | |
318 | + "canopy": null, | |
319 | + "dbh": "312", | |
320 | + "growthvigor": null, | |
321 | + "treelevel": "treeLevel-2", | |
322 | + "longitude": "116.422014", | |
323 | + "latitude": "39.901119", | |
324 | + "location": null, | |
325 | + "maintainunit": null, | |
326 | + "managedutyunit": "单位12321", | |
327 | + "street": null, | |
328 | + "oldtreeownership": "oldTreeOwnership-6", | |
329 | + "datastate": null, | |
330 | + "estimationtreeage": "12", | |
331 | + "canopyeastwest": "4", | |
332 | + "canopysouthnorth": "11", | |
333 | + "weekday": "55", | |
334 | + "growlocation": "北京市东城区崇文门东大街北京明城墙遗址公园内(西侧)", | |
335 | + "growthenvironment": "123", | |
336 | + "treephotoone": "https://test.jichengshanshui.com.cn:28310/yuanlin/alioss/yl/images/2025/08/27/0564bc2272e08f791946b2eab1f5c9e0.jpeg", | |
337 | + "treephototwo": null, | |
338 | + "treephotothree": null, | |
339 | + "treephotofour": null, | |
340 | + "treephotofive": null, | |
341 | + "treeImgList": ["https://test.jichengshanshui.com.cn:28310/yuanlin/alioss/yl/images/2025/08/27/0564bc2272e08f791946b2eab1f5c9e0.jpeg"], | |
342 | + "deleted": 0, | |
343 | + "createby": "严家齐", | |
344 | + "updateby": "严家齐", | |
345 | + "createtime": "2025-08-27 15:01:48", | |
346 | + "updatetime": "2025-08-27 15:01:48" | |
347 | + } | |
348 | + treeLevelReq().then(res => { | |
349 | + this.treeLevelData = res.data | |
350 | + const optiontreelevel = this.treeLevelData.find(item => item.dictValue === this.formData.treelevel); | |
351 | + if (optiontreelevel) { | |
352 | + this.formData.treelevel = optiontreelevel.dictValue; | |
353 | + this.formData.treeleveltext = optiontreelevel.dictLabel; | |
354 | + } | |
355 | + }) | |
356 | + treeOwnership().then(res => { | |
357 | + this.treeOwnershipData = res.data | |
358 | + const option = this.treeOwnershipData.find(item => item.dictValue === this.formData.oldtreeownership); | |
359 | + if (option) { | |
360 | + this.formData.oldtreeownership = option.dictValue; | |
361 | + this.formData.oldtreeownershipText = option.dictLabel; | |
362 | + } | |
363 | + }) | |
364 | + this.urls = this.formData.treeImgList.map((item, index) => { | |
365 | + return { | |
366 | + src: item | |
367 | + } | |
368 | + }); | |
369 | + this.formData.treeImgList = this.formData.treeImgList.map((item, index) => { | |
370 | + return { | |
371 | + id: index, | |
372 | + src: item | |
373 | + } | |
374 | + }); | |
375 | + }, | |
376 | + methods: { | |
377 | +// 图片点击事件 | |
378 | + handleImageClick(e) { | |
379 | + console.log(e.id) | |
380 | + // 如果组件自带预览功能,可能不需要手动控制显示 | |
381 | + // 否则手动显示预览弹窗 | |
382 | + this.show = true; | |
383 | + }, | |
384 | + hide(){ | |
385 | + this.show = false | |
386 | + } | |
387 | + } | |
388 | +} | |
389 | +</script> | |
390 | + | |
391 | +<style> | |
392 | +.tui-title { | |
393 | + width: 100%; | |
394 | + font-size: 28rpx; | |
395 | + color: #888; | |
396 | + padding: 30rpx; | |
397 | + box-sizing: border-box; | |
398 | +} | |
399 | + | |
400 | +.tui-btn__box { | |
401 | + width: 100%; | |
402 | + position: fixed; | |
403 | + bottom: 0; | |
404 | +} | |
405 | + | |
406 | +.location-content { | |
407 | + font-size: 14px; | |
408 | +} | |
409 | + | |
410 | +/* 动画区域样式 */ | |
411 | +.animated-area { | |
412 | + height: 200rpx; | |
413 | + transition: all 0.3s ease-out; /* 动画过渡效果 */ | |
414 | +} | |
415 | +</style> | |
0 | 416 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeLog.vue
1 | -<script> | |
1 | +<template> | |
2 | + <view class="container"> | |
2 | 3 | |
4 | + <!-- <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>--> | |
5 | + <view class="record-wrap"> | |
6 | + <view class="record-list-wrap cad-box-shadow fs-bg__white" v-for="i in rows" @click="todetailPage(i)"> | |
7 | + <view style="display: flex"> | |
8 | + <view class="record-list-left" :style="`background-image: url(${i.treephotoone});`"></view> | |
9 | + <view class="record-list-right"> | |
10 | + <view class="record-list-right-title"> | |
11 | + <view class="fs-ellipsis">{{ i.treetype }}</view> | |
12 | + <view style="min-width: 100px">{{ i.updatetime.substring(0, 10) }}</view> | |
13 | + </view> | |
14 | + <view class="fs-mt8 fs-align__center"> | |
15 | + <img src="../../static/images/tree/tree-high.png" style="width: 16px;height: 16px;margin-right: 6px;" | |
16 | + alt=""> 高度:{{ i.treeheight }} 米 | |
17 | + </view> | |
18 | + <view class="fs-mt8 fs-align__center"> | |
19 | + <img src="../../static/images/tree/treearound.png" style="width: 16px;height: 16px;margin-right: 6px;" | |
20 | + alt="">胸径:{{ i.dbh }} 厘米 | |
21 | + </view> | |
22 | + </view> | |
23 | + </view> | |
24 | + <view class="fs-mt8 fs-ellipsis treenumber-no"> | |
25 | + 树木编号:{{ i.treenumber }} | |
26 | + </view> | |
27 | + </view> | |
28 | + </view> | |
3 | 29 | |
30 | + </view> | |
31 | + | |
32 | +</template> | |
33 | + | |
34 | +<script> | |
35 | +import { treeLogReq } from "@/api/tree"; | |
4 | 36 | export default { |
5 | 37 | name: "treeLog", |
6 | 38 | props: { |
... | ... | @@ -10,30 +42,83 @@ export default { |
10 | 42 | } |
11 | 43 | }, |
12 | 44 | data() { |
13 | - return {} | |
45 | + return { | |
46 | + rows: [], | |
47 | + roadId: '' | |
48 | + } | |
14 | 49 | }, |
15 | 50 | watch: { |
16 | 51 | logId: { |
17 | 52 | immediate: true, |
18 | 53 | handler(newVal, oldVal) { |
19 | 54 | if (newVal !== oldVal) { |
20 | - this.initLog() | |
55 | + this.initLogQuery(newVal) | |
21 | 56 | } |
22 | 57 | } |
23 | 58 | } |
24 | 59 | }, |
25 | 60 | methods: { |
26 | - async initLog() { | |
61 | + initLogQuery(val) { | |
62 | + let obj = { | |
63 | + treeid: val, | |
64 | + pageNum: 1, | |
65 | + pageSize: 10000 | |
66 | + } | |
67 | + treeLogReq({data: {...obj}}).then(res => { | |
68 | + console.log(res) | |
69 | + this.rows = res.rows | |
70 | + }) | |
71 | + }, | |
72 | + todetailPage(i) { | |
73 | + let dataString = JSON.stringify(i) | |
74 | + // uni.navigateTo({ | |
75 | + // url: 'subPackages/treePage/treeDetail?data=' + encodeURIComponent(dataString) | |
76 | + // }) | |
77 | + | |
78 | + | |
79 | + // uni.$tui.href(`/subPackages/treePage/treeInfo?data=${dataString}`) | |
80 | + | |
81 | + uni.navigateTo({ | |
82 | + url: `/subPackages/treePage/treeInfo`, | |
83 | + success: function(res) { | |
84 | + res.eventChannel.emit('pageDataTreeInfo',i) | |
85 | + } | |
86 | + }) | |
27 | 87 | } |
28 | 88 | } |
29 | 89 | } |
30 | 90 | </script> |
31 | 91 | |
32 | -<template> | |
33 | - <view>log</view> | |
34 | - | |
35 | -</template> | |
36 | 92 | |
37 | 93 | <style scoped> |
94 | +.record-list-wrap { | |
95 | + margin: 20rpx 20rpx 0 20rpx; | |
96 | + padding: 20rpx; | |
97 | + border-radius: 10rpx; | |
98 | +} | |
99 | + | |
100 | +.record-list-left { | |
101 | + height: 70px; | |
102 | + width: 70px; | |
103 | + background-size: 100% 100%; | |
104 | +} | |
105 | + | |
106 | +.record-list-right { | |
107 | + margin-left: 20px; | |
108 | + flex: 1; | |
109 | + overflow: hidden; | |
110 | + | |
111 | +} | |
112 | + | |
113 | +.record-list-right-title { | |
114 | + display: flex; | |
115 | + justify-content: space-between; | |
116 | +} | |
117 | + | |
118 | +.treenumber-no { | |
119 | + padding: 3px 10px; | |
120 | + background: #bdefd0; | |
121 | + font-size: 12px; | |
122 | +} | |
38 | 123 | |
39 | 124 | </style> |
40 | 125 | \ No newline at end of file | ... | ... |
subPackages/treePage/treeRecord.vue
... | ... | @@ -3,23 +3,25 @@ |
3 | 3 | |
4 | 4 | <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data> |
5 | 5 | <view class="record-wrap" v-else> |
6 | - <view class="record-list-wrap" v-for="i in rows" @click="toEditPage(i.id)"> | |
7 | - <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view> | |
8 | - <view class="record-list-right"> | |
9 | - <view class="record-list-right-title"> | |
10 | - <view>{{i.treetype}}</view> | |
11 | - <view>{{i.updatetime.substring(0,10)}}</view> | |
12 | - </view> | |
13 | - <view class="fs-mt8"> | |
14 | - 高度:{{i.treeheight}} | |
15 | - </view> | |
16 | - <view class="fs-mt8"> | |
17 | - 胸径:{{i.dbh}} | |
18 | - </view> | |
19 | - <view class="fs-mt8"> | |
20 | - 树木编号:{{i.treenumber}} | |
6 | + <view class="record-list-wrap cad-box-shadow fs-bg__white" v-for="i in rows" @click="toEditPage(i.id)"> | |
7 | + <view style="display: flex"> | |
8 | + <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view> | |
9 | + <view class="record-list-right"> | |
10 | + <view class="record-list-right-title"> | |
11 | + <view class="fs-ellipsis">{{ i.treetype }}</view> | |
12 | + <view style="min-width: 100px">{{ i.updatetime.substring(0, 10) }}</view> | |
13 | + </view> | |
14 | + <view class="fs-mt8 fs-align__center"> | |
15 | + <img src="../../static/images/tree/tree-high.png" style="width: 16px;height: 16px;margin-right: 6px;" alt=""> 高度:{{ i.treeheight }} 米 | |
16 | + </view> | |
17 | + <view class="fs-mt8 fs-align__center"> | |
18 | + <img src="../../static/images/tree/treearound.png" style="width: 16px;height: 16px;margin-right: 6px;" alt="">胸径:{{ i.dbh }} 厘米 | |
19 | + </view> | |
21 | 20 | </view> |
22 | 21 | </view> |
22 | + <view class="fs-mt8 fs-ellipsis treenumber-no"> | |
23 | + 树木编号:{{ i.treenumber }} | |
24 | + </view> | |
23 | 25 | </view> |
24 | 26 | </view> |
25 | 27 | |
... | ... | @@ -33,26 +35,26 @@ |
33 | 35 | import { treeRoadReq } from "@/api/tree"; |
34 | 36 | export default { |
35 | 37 | name: "treeRecord", |
36 | - data(){ | |
37 | - return{ | |
38 | - rows:[], | |
39 | - roadId:'' | |
38 | + data() { | |
39 | + return { | |
40 | + rows: [], | |
41 | + roadId: '' | |
40 | 42 | } |
41 | 43 | }, |
42 | - onLoad(options){ | |
44 | + onLoad(options) { | |
43 | 45 | this.roadId = options.roadId |
44 | 46 | this.treeRoadQuery() |
45 | 47 | }, |
46 | - methods:{ | |
47 | - toEditPage(id){ // 前往修改页面 | |
48 | + methods: { | |
49 | + toEditPage(id) { // 前往修改页面 | |
48 | 50 | uni.$tui.href(`/subPackages/treePage/editTree?id=${id}`) |
49 | 51 | }, |
50 | - toAddTreePage(){ | |
52 | + toAddTreePage() { | |
51 | 53 | uni.$tui.href(`/subPackages/treePage/addTree?roadId=${this.roadId}`) |
52 | 54 | }, |
53 | 55 | // 记录列表 |
54 | - treeRoadQuery(){ | |
55 | - treeRoadReq({data:{road: this.roadId}}).then(res=>{ | |
56 | + treeRoadQuery() { | |
57 | + treeRoadReq({data: {road: this.roadId}}).then(res => { | |
56 | 58 | console.log(res) |
57 | 59 | this.rows = res.rows |
58 | 60 | }) |
... | ... | @@ -62,32 +64,37 @@ export default { |
62 | 64 | </script> |
63 | 65 | |
64 | 66 | <style scoped> |
65 | -.record-wrap{ | |
66 | - padding-bottom: 120rpx; | |
67 | -} | |
68 | -.record-list-wrap{ | |
69 | - height: 130px; | |
67 | +.record-list-wrap { | |
70 | 68 | margin: 20rpx 20rpx 0 20rpx; |
71 | 69 | padding: 20rpx; |
72 | - box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3); | |
73 | 70 | border-radius: 10rpx; |
74 | - display: flex; | |
75 | 71 | } |
76 | -.record-list-left{ | |
77 | - height: 100px; | |
78 | - width: 100px; | |
72 | + | |
73 | +.record-list-left { | |
74 | + height: 70px; | |
75 | + width: 70px; | |
79 | 76 | background-size: 100% 100%; |
80 | 77 | } |
81 | -.record-list-right{ | |
82 | - height: 140px; | |
78 | + | |
79 | +.record-list-right { | |
83 | 80 | margin-left: 20px; |
84 | - flex:1 | |
81 | + flex: 1; | |
82 | + overflow: hidden; | |
83 | + | |
85 | 84 | } |
86 | -.record-list-right-title{ | |
85 | + | |
86 | +.record-list-right-title { | |
87 | 87 | display: flex; |
88 | 88 | justify-content: space-between; |
89 | 89 | } |
90 | -.addTree{ | |
90 | + | |
91 | +.treenumber-no{ | |
92 | + padding: 3px 10px; | |
93 | + background: #bdefd0; | |
94 | + font-size: 12px; | |
95 | +} | |
96 | + | |
97 | +.addTree { | |
91 | 98 | width: 100%; |
92 | 99 | position: fixed; |
93 | 100 | bottom: 0; | ... | ... |