JCSS / yl_miniapp

Blame view

subPackages/treePage/treeLog.vue 2.67 KB
Edit Raw Normal View History
b951d827   刘淇   树木详情 
1
2
 
  <template>
    <view class="container">
6cba22de   刘淇   图片上传 
3
b951d827   刘淇   树木详情 
4
5
6
7
8
9
10
11
12
13
14
 
      <!--    <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>-->
      <view class="record-wrap">
        <view class="record-list-wrap cad-box-shadow fs-bg__white" v-for="i in rows" @click="todetailPage(i)">
          <view style="display: flex">
            <view class="record-list-left" :style="`background-image: url(${i.treephotoone});`"></view>
            <view class="record-list-right">
              <view class="record-list-right-title">
                <view class="fs-ellipsis">{{ i.treetype }}</view>
                <view style="min-width: 100px">{{ i.updatetime.substring(0, 10) }}</view>
              </view>
              <view class="fs-mt8 fs-align__center">
137be4e2   刘淇   树木历史 
15
 
                <img src="/static/images/tree/tree-high.png" style="width: 16px;height: 16px;margin-right: 6px;"
b951d827   刘淇   树木详情 
16
17
18
 
                     alt=""> 高度：{{ i.treeheight }} 米
              </view>
              <view class="fs-mt8 fs-align__center">
137be4e2   刘淇   树木历史 
19
 
                <img src="/static/images/tree/treearound.png" style="width: 16px;height: 16px;margin-right: 6px;"
b951d827   刘淇   树木详情 
20
21
22
23
24
25
26
27
28
 
                     alt="">胸径：{{ i.dbh }} 厘米
              </view>
            </view>
          </view>
          <view class="fs-mt8 fs-ellipsis treenumber-no">
            树木编号：{{ i.treenumber }}
          </view>
        </view>
      </view>
6cba22de   刘淇   图片上传 
29
b951d827   刘淇   树木详情 
30
31
32
33
34
35
 
    </view>
  
  </template>
  
  <script>
  import { treeLogReq } from "@/api/tree";
6cba22de   刘淇   图片上传 
36
37
38
39
40
41
42
43
44
 
  export default {
    name: "treeLog",
    props: {
      logId: {
        type: String,
        required: true
      }
    },
    data() {
b951d827   刘淇   树木详情 
45
46
47
48
 
      return {
        rows: [],
        roadId: ''
      }
6cba22de   刘淇   图片上传 
49
50
51
52
53
54
 
    },
    watch: {
      logId: {
        immediate: true,
        handler(newVal, oldVal) {
          if (newVal !== oldVal) {
b951d827   刘淇   树木详情 
55
 
            this.initLogQuery(newVal)
6cba22de   刘淇   图片上传 
56
57
58
59
60
 
          }
        }
      }
    },
    methods: {
b951d827   刘淇   树木详情 
61
62
63
64
65
66
67
68
69
70
71
72
 
      initLogQuery(val) {
        let obj = {
          treeid: val,
          pageNum: 1,
          pageSize: 10000
        }
        treeLogReq({data: {...obj}}).then(res => {
          console.log(res)
          this.rows = res.rows
        })
      },
      todetailPage(i) {
137be4e2   刘淇   树木历史 
73
74
 
       console.log(i)
        console.log(i)
b951d827   刘淇   树木详情 
75
76
77
78
79
80
 
        uni.navigateTo({
          url: `/subPackages/treePage/treeInfo`,
          success: function(res) {
            res.eventChannel.emit('pageDataTreeInfo',i)
          }
        })
6cba22de   刘淇   图片上传 
81
82
83
84
85
 
      }
    }
  }
  </script>
6cba22de   刘淇   图片上传 
86
87
 
  
  <style scoped>
b951d827   刘淇   树木详情 
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
  .record-list-wrap {
    margin: 20rpx 20rpx 0 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }
  
  .record-list-left {
    height: 70px;
    width: 70px;
    background-size: 100% 100%;
  }
  
  .record-list-right {
    margin-left: 20px;
    flex: 1;
    overflow: hidden;
  
  }
  
  .record-list-right-title {
    display: flex;
    justify-content: space-between;
  }
  
  .treenumber-no {
    padding: 3px 10px;
    background: #bdefd0;
    font-size: 12px;
  }
6cba22de   刘淇   图片上传 
117
118
 
  
  </style>