JCSS / jcss-miniprogram

<template>
  <view class="container">
    <!-- 顶部固定吸顶Tabs区域 -->
    <up-sticky bg-color="#ffffff">
      <view class="header-wrap">
        <up-tabs
            v-model="activeTab"
            :list="tabList"
            active-color="#1989fa"
            inactive-color="#666"
            font-size="30rpx"
            @click="handleTabChange"
            :scrollable="false"
        />
      </view>
    </up-sticky>

    <!-- Tab0 基本信息页面 -->
    <view v-show="activeTab === 0" class="base-info-wrap">
      <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
        <up-form-item label="名称" prop="treetype" required>
          <up-input v-model.trim="formData.treetype" placeholder="请输入名称" maxlength="30" border="none"/>
        </up-form-item>

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="胸径" prop="dbh" required>
                <up-input v-model.trim="formData.dbh" placeholder="请输入" maxlength="10" border="none"
                          input-align="left"/>
                <template #right>
                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
                </template>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="高度" prop="treeheight">
                <up-input v-model.trim="formData.treeheight" placeholder="请输入" maxlength="10" border="none"
                          input-align="left"/>
                <template #right>
                  <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>

        <up-form-item label="位置" prop="growlocation" required class="location-form-item" @click="openMap">
          <up-input v-model="formData.growlocation" placeholder="请选择" readonly border="none"/>
          <template #right>
            <up-icon name="map" size="22"></up-icon>
          </template>
        </up-form-item>

        <up-row gutter="10">
          <up-col span="6">
            <up-form-item label="经度" :borderBottom="false">
              <up-input v-model="formData.longitude" placeholder="" readonly border="none"/>
            </up-form-item>
          </up-col>
          <up-col span="6">
            <up-form-item label="纬度" :borderBottom="false">
              <up-input v-model="formData.latitude" placeholder="" readonly border="none"/>
            </up-form-item>
          </up-col>
        </up-row>

        <up-form-item label="管护单位" prop="managedutyunit" required>
          <up-input v-model.trim="formData.managedutyunit" placeholder="请输入" maxlength="30" border="none"/>
        </up-form-item>

        <up-form-item label="权属分类" prop="oldtreeownershipText" required arrow
                      @click="handleActionSheetOpen('ownership')">
          <up-input v-model.trim="formData.oldtreeownershipText" placeholder="请选择" readonly border="none"
                    bg-color="transparent"/>
        </up-form-item>

        <up-form-item label="图片信息" prop="treeImgList" required>
          <up-upload
              name="treeImgList"
              :file-list="treeImgList.imgList.value"
              @after-read="treeImgList.uploadImgs"
              @delete="treeImgList.deleteImg"
              multiple
              :width="70"
              :height="70"
              :max-count="treeImgList.uploadConfig.maxCount"
              :upload-text="treeImgList.uploadConfig.uploadText"
              :size-type="treeImgList.uploadConfig.sizeType"
          ></up-upload>
        </up-form-item>

        <view
            class="animated-area"
            :style="{
            height: isShow ? contentHeight + 'px' : '0',
            opacity: isShow ? 1 : 0,
            overflow: 'hidden'
          }"
        >
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="拉丁文" prop="latinname">
                <up-input v-model.trim="formData.latinname" placeholder="请输入" maxlength="30" border="none"/>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="级别" arrow @click="handleActionSheetOpen('level')">
                <up-input v-model.trim="formData.treeleveltext" placeholder="请选择" readonly border="none"
                          bg-color="transparent"/>
              </up-form-item>
            </up-col>
          </up-row>

          <up-form-item label="生长环境" prop="growthenvironment">
            <up-input v-model.trim="formData.growthenvironment" placeholder="请输入" maxlength="50" border="none"/>
          </up-form-item>

          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <!-- 改成栽种年月+年月选择器 -->
                <up-form-item label="栽种年月" arrow @click="openPlantDatePicker">
                  <up-input v-model.trim="formData.plantingDate" placeholder="请选择栽种年月" readonly border="none" bg-color="transparent"/>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="干周" prop="weekday">
                  <up-input v-model.trim="formData.weekday" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">厘米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>

          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="东西冠幅" prop="canopyeastwest">
                  <up-input v-model.trim="formData.canopyeastwest" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="南北冠幅" prop="canopysouthnorth">
                  <up-input v-model.trim="formData.canopysouthnorth" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
        </view>

        <up-button
            @click="toggleArea"
            type="primary"
            plain
            size="large"
            style="margin-top:20rpx"
        >
          {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
        </up-button>
      </up-form>
    </view>

    <!-- Tab1 巡检记录页面 -->
    <view v-show="activeTab === 1" class="inspect-wrap">
      <up-empty v-if="inspectRows.length === 0" marginTop="100" text="暂无巡检记录"></up-empty>
      <view class="record-wrap" v-else>
        <up-card
            v-for="item in inspectRows"
            :key="item.id"
            :border="false"
            :show-head="false"
            class="tree-card"
            :foot-border-top="false"
            @click="toInspectDetailPage(item)"
        >
          <template #body>
            <view class="inspect-item">
              <view class="inspect-row">巡检时间：{{ item.inspectionTime || '' }}</view>
              <view class="inspect-row">巡检人：{{ item.inspectorName || '' }}</view>
              <view class="inspect-row up-flex up-flex-between up-flex-items-center">
                <text>风险评估结果：{{ item.result.normalResult.level || '无风险' }}</text>
                <text class="detail-text">详情</text>
              </view>
            </view>
          </template>
        </up-card>
      </view>
    </view>

    <!-- Tab2 变更日志页面 -->
    <view v-show="activeTab === 2" class="log-wrap">
      <up-empty v-if="logRows.length === 0" marginTop="100" text="暂无变更日志"></up-empty>
      <view class="record-wrap" v-else>
        <up-card
            v-for="item in logRows"
            :key="item.id"
            :border="false"
            :show-head="false"
            class="tree-card"
            :foot-border-top="false"
            @click="toLogDetailPage(item)"
        >
          <template #body>
            <view class="card-body-inner">
              <view class="record-list-left" :style="`background-image: url(${item.treephotoone});`"></view>
              <view class="record-list-right">
                <view class="up-flex up-flex-items-center up-flex-between">
                  <view class="u-line-1 treetypeName">{{ item.treetype }}</view>
                  <view style="text-align: right">{{ timeFormat(item.updatetime) }}</view>
                </view>
                <view class=" fs-align__center" style="margin: 8px 0">
                  <img src="../../../static/imgs/tree/tree-high.png" style="width:12px;height:12px;margin-right:6px;"
                       alt=""> 高度：{{ item.treeheight }} 米
                </view>
                <view class=" fs-align__center">
                  <img src="../../../static/imgs/tree/treearound.png" style="width:12px;height:12px;margin-right:6px;"
                       alt="">胸径：{{ item.dbh }} 厘米
                </view>
              </view>
            </view>
            <view class="treenumber-no">
              树木编号：{{ item.treenumber }}
            </view>
          </template>
        </up-card>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <!-- 基本信息Tab：修改按钮 -->
    <view class="fixed-bottom-btn-wrap" v-show="activeTab === 0">
      <up-button type="primary" @click="submit" :loading="loadingFlag" size="large" >修改树木信息</up-button>
    </view>

    <!-- 巡检记录Tab：新增巡检按钮 -->
    <view class="fixed-bottom-btn-wrap" v-show="activeTab === 1">
      <up-button type="primary" size="large" @click="toAddInspect">新增巡检记录</up-button>
    </view>

    <!-- 字典选择弹窗 -->
    <up-action-sheet
        :show="showActionSheet"
        :actions="currentActionSheetData.list"
        :title="currentActionSheetData.title"
        @close="handleActionSheetClose"
        @select="handleActionSheetSelect"
    ></up-action-sheet>

    <!-- 栽种年月选择弹窗 -->
    <up-datetime-picker
        v-model="plantingDate"
        :show="showDatePicker"
        :closeOnClickOverlay="true"
        mode="year-month"
        minDate="1000"
        @confirm="onSelectPlantDate"
        @cancel="showDatePicker=false"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';

import { treeRoadReq, treeLogReq, treeDetailReq, updateTree, inspectionLogReq }
from "@/api/tree-archive/tree-archive.js";
// 引入巡检列表接口
// import { getInspectListReq } from "@/api/tree-archive/tree-archive.js";

import { timeFormat } from '@/uni_modules/uview-plus';
import { useUploadImgs } from '@/common/utils/useUploadImgs'
import { useUserStore } from '@/pinia/user';

// ========== 常量配置区
const CONST = {
  UPLOAD_CONFIG: { maxCount: 3, uploadText: '选择图片', sizeType: ['compressed'] }
}

// ========== 页面关闭统一跳转 ==========
onUnload(() => {
  uni.reLaunch({url: '/pages-sub/data/tree-archive/index'})
})

// ========== 基础变量 ==========
const rows = ref([])
const roadId = ref('')
const count = ref(0)
const treeId = ref('')
const loadingFlag = ref(false)
const isInit = ref(false)
// 年月选择器开关
const showDatePicker = ref(false)
const plantingDate = ref(Date.now())
// ========== Tab切换变量（顺序：基本信息、巡检记录、变更日志） ==========
const activeTab = ref(0);
const tabList = ref([
  {name: '基本信息'},
  {name: '巡检记录'},
  {name: '变更日志'}
]);

// ========== 数据变量 ==========
const logRows = ref([])
const inspectRows = ref([]) // 巡检记录列表
const userStore = useUserStore();
const formRef = ref(null)
const isShow = ref(false)
const contentHeight = ref(200)
const treeOwnershipData = ref([])
const treeLevelData = ref([])
const showActionSheet = ref(false);
const currentActionSheetData = reactive({type: '', list: [], title: ''});

// ========== 图片上传配置  ==========
const treeImgList = useUploadImgs({
  ...CONST.UPLOAD_CONFIG,
  formRef: formRef,
  fieldName: 'treeImgList'
})
treeImgList.imgList.value = []
treeImgList.rawImgList.value = []

// ========== 表单数据 移除estimationtreeage，替换为plantingDate ==========
const formData = reactive({
  id: '',
  treetype: '',
  treeheight: '',
  dbh: '',
  treelevel: '',
  treeleveltext: '',
  managedutyunit: '',
  oldtreeownership: '',
  oldtreeownershipText: '',
  latinname: '',
  plantingDate: '', //栽种年月 yyyy-MM
  canopysouthnorth: '',
  canopyeastwest: '',
  weekday: '',
  growlocation: '',
  growthenvironment: '',
  treeImgList: [],
  address: '',
  latitude: '',
  longitude: '',
  road: '',
  maintainunit: '',
  treephotoone: '',
  treephototwo: '',
  treephotothree: '',
  treephotofour: '',
  treephotofive: ''
})

// ========== 表单校验规则 ==========
const isPureZero = (val) => {
  if (!val) return false;
  const pureZeroReg = /^0+$/;
  return pureZeroReg.test(val.trim());
};
const trimFormData = (obj) => {
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] === 'string') {
      obj[key] = obj[key].trim();
    }
  }
};
const emojiReg = /[\uD83C\uD83D\uD83E][\uDC00-\uDFFF]+|[\u2702\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299\ufe0f\u200d]+/g;
const filterEmoji = (val) => typeof val === 'string' ? val.replace(emojiReg, '') : val;
const hasEmoji = (val) => val && emojiReg.test(val);
const rules = reactive({
  treetype: [
    {
      validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
      trigger: ['blur', 'change', 'input'],
      priority: 10
    },
    {required: true, message: '请输入名称', trigger: ['blur', 'change', 'input']},
    {max: 30, message: '名称最多输入30个字符', trigger: ['blur', 'change', 'input']}
  ],
  treeheight: [
    {max: 10, message: '树高不能超过10个字符', trigger: ['blur', 'change', 'input']},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
    {
      validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
      trigger: ['blur', 'change', 'input']
    }
  ],
  dbh: [
    {
      validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
      trigger: ['blur', 'change', 'input'],
      priority: 10
    },
    {required: true, message: '请输入胸径', trigger: ['blur', 'change', 'input']},
    {max: 10, message: '胸径不能超过10个字符', trigger: ['blur', 'change', 'input']},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
    {
      validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
      trigger: ['blur', 'change', 'input']
    }
  ],
  weekday: [
    {max: 10, message: '干周不能超过10个字符', trigger: ['blur', 'change', 'input']},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
    {
      validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
      trigger: ['blur', 'change', 'input']
    }
  ],
  canopyeastwest: [
    {max: 10, message: '东西冠幅不能超过10个字符', trigger: ['blur', 'change', 'input']},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
    {
      validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
      trigger: ['blur', 'change', 'input']
    }
  ],
  canopysouthnorth: [
    {max: 10, message: '南北冠幅不能超过10个字符', trigger: ['blur', 'change', 'input']},
    {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
    {
      validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
      trigger: ['blur', 'change', 'input']
    }
  ],
  growlocation: [{required: true, message: '请选择地图位置', trigger: ['blur', 'change', 'manual']}],
  managedutyunit: [
    {
      validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
      trigger: ['blur', 'change', 'input'],
      priority: 10
    },
    {required: true, message: '请输入管护单位', trigger: ['blur', 'change', 'input']},
    {max: 30, message: '管护单位最多输入30个字符', trigger: ['blur', 'change', 'input']}
  ],
  oldtreeownershipText: [{required: true, message: '请选择权属分类', trigger: ['blur', 'change']}],
  latinname: [
    {
      validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
      trigger: ['blur', 'change', 'input'],
      priority: 10
    },
    {max: 30, message: '拉丁文最多输入30个字符', trigger: ['blur', 'change', 'input']}
  ],
  growthenvironment: [
    {
      validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
      trigger: ['blur', 'change', 'input'],
      priority: 10
    },
    {max: 50, message: '生长环境最多输入50个字符', trigger: ['blur', 'change', 'input']}
  ],
  treeImgList: [treeImgList.imgValidateRule]
})

// ========== 生命周期 ==========
onLoad((options) => {
  console.log('编辑页入参', options)
  roadId.value = options.roadId || ''
  count.value = options.count || 0
  treeId.value = options.id || ''
  formData.id = treeId.value
  formData.road = roadId.value
  isInit.value = false
});

onShow(async () => {
  treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level'))
  treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership'))
  if (activeTab.value === 0 && treeId.value && !isInit.value) {
    await getTreeDetail()
    isInit.value = true
  }
  if(treeId.value){
    getTreeLogList()
    getInspectList()
  }
})

onReady(() => {
  nextTick(() => formRef.value?.setRules(rules));
});

// ========== Tab切换事件 ==========
const handleTabChange = async (item) => {
  activeTab.value = item.index
  // 切换Tab自动加载对应数据
  if (activeTab.value === 1) {
    getInspectList()
  } else if (activeTab.value === 2) {
    getTreeLogList()
  }
}

// ========== 接口请求 ==========
const treeRoadQuery = async () => {
  const res = await treeRoadReq({road: roadId.value})
  rows.value = res.list
}

// 获取树木详情
const getTreeDetail = async () => {
  const res = await treeDetailReq({id: treeId.value})
  Object.assign(formData, res)
  formData.oldtreeownershipText = uni.$dict.getDictLabel('tree_ownership', res.oldtreeownership)
  formData.treeleveltext = uni.$dict.getDictLabel('tree_level', formData.treelevel)

  treeImgList.imgList.value = []
  treeImgList.rawImgList.value = []
  formData.treephotoone = ''
  formData.treephototwo = ''
  formData.treephotothree = ''
  formData.treephotofour = ''
  formData.treephotofive = ''

  if (Array.isArray(res.treeImgList) && res.treeImgList.length > 0) {
    const imgList = res.treeImgList.map((url, idx) => ({
      url,
      name: `renew_img_${idx}`,
      status: 'success'
    }));
    treeImgList.imgList.value = imgList
    treeImgList.rawImgList.value = imgList
  }
}

// 获取变更日志
const getTreeLogList = async () => {
  const res = await treeLogReq({treeid: treeId.value})
  logRows.value = res.list
}

// 获取巡检记录列表
const getInspectList = async () => {
  // 正式环境启用下面接口
  const res = await inspectionLogReq({treeId: treeId.value,pageNo:1,pageSize:100})
  console.log(res)
  inspectRows.value = res.list || []
}

// ========== 年月选择方法 ==========
const openPlantDatePicker = () => {
  showDatePicker.value = true
}
const onSelectPlantDate = (date) => {
  // date自动 yyyy-MM
  console.log(plantingDate.value)
  console.log(timeFormat(plantingDate.value, 'yyyy-mm'))
  // date格式：yyyy-MM
  formData.plantingDate =  timeFormat(plantingDate.value, 'yyyy-mm')
  showDatePicker.value = false
}

// ========== 表单相关方法 ==========
const toggleArea = () => isShow.value = !isShow.value

const handleActionSheetOpen = (type) => {
  const configMap = {
    ownership: {title: '请选择权属分类', list: treeOwnershipData.value},
    level: {title: '请选择树木级别', list: treeLevelData.value}
  };
  Object.assign(currentActionSheetData, configMap[type], {type});
  showActionSheet.value = true;
};

const handleActionSheetClose = () => {
  showActionSheet.value = false;
  Object.assign(currentActionSheetData, {type: '', list: [], title: ''});
};

const handleActionSheetSelect = (e) => {
  const {type} = currentActionSheetData;
  if (type === 'ownership') {
    formData.oldtreeownership = e.value
    formData.oldtreeownershipText = e.name
    formRef.value?.validateField('oldtreeownershipText');
  } else if (type === 'level') {
    formData.treelevel = e.value
    formData.treeleveltext = e.name
  }
  handleActionSheetClose();
};

// 地图选址
const openMap = () => {
  uni.chooseLocation({
    success: async (res) => {
      formData.growlocation = res.address
      formData.latitude = res.latitude
      formData.longitude = res.longitude
      await nextTick()
      formRef.value?.validateField('growlocation');
    },
    fail: (err) => {
      console.error('地图选择失败', err);
      err.errMsg.includes('auth deny') && uni.showToast({title: '请授权位置权限', icon: 'none'});
    }
  });
}

// 表单提交
const submit = async () => {
  if (loadingFlag.value) return
  for (const key in formData) {
    if (typeof formData[key] === 'string') {
      formData[key] = filterEmoji(formData[key]).trim();
    }
  }
  const valid = await formRef.value.validate()
  if (!valid) return
  const uploadImgUrls = treeImgList.getSuccessImgUrls()
  formData.maintainunit = userStore.userInfo.user.companyId
  formData.treeImgList = uploadImgUrls
  loadingFlag.value = true
  try {
    await updateTree(formData)
    uni.showToast({title: "修改成功", icon: "success"});
    uni.redirectTo({url: '/pages-sub/data/tree-archive/index'});
  } catch (err) {
    uni.showToast({title: "修改失败，请重试", icon: "none"});
    console.error(err)
  } finally {
    loadingFlag.value = false
  }
}

// ========== 页面跳转 ==========
// 变更日志详情
const toLogDetailPage = (i) => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/logDetail`,
    success: (res) => {
      res.eventChannel.emit('logData', i);
    }
  })
}

// 巡检详情页跳转
const toInspectDetailPage = (item) => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/addInspect?id=${item.id}&type=detail`
  })
}

// 跳转到新增巡检页面
const toAddInspect = () => {
  const firstItem = inspectRows.value.length > 0 ? inspectRows.value[0] : null
  // 存入本地缓存
  if (firstItem) {
    uni.setStorageSync('temp_inspect_fill_data', JSON.stringify(firstItem))
  } else {
    // 没有数据先清空残留缓存
    uni.removeStorageSync('temp_inspect_fill_data')
  }
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/addInspect?treeId=${treeId.value}`
  })
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.header-wrap {
  background-color: #fff;
  padding: 10rpx 0;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.03);
}

.base-info-wrap {
  padding: 15px 15px;
  background: #fff;
}

.log-wrap, .inspect-wrap {
  min-height: calc(100vh - 120rpx);
}

.record-wrap {
  padding-bottom: 20px;
}

.treetypeName {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.record-list-left {
  height: 70px;
  width: 70px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.record-list-right {
  margin-left: 20px;
  flex: 1;
  overflow: hidden;
}

.treenumber-no {
  padding: 3px 10px;
  background: #bdefd0;
  font-size: 12px;
  margin-top: 8px;
}

.card-body-inner {
  display: flex;
  font-size: 12px;
}

.fs-align__center {
  display: flex;
  align-items: center;
}

.animated-area {
  transition: all 0.3s ease-out;
  margin-top: 10rpx;
}

.location-form-item {
  padding-right: 10rpx;
}

.form-row-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;

  :deep(.u-form-item) {
    position: relative;
    margin-bottom: 0 !important;
  }

  :deep(.u-form-item__body__right__message ) {
    position: absolute;
    left: 0;
    bottom: -20rpx;
    line-height: 20rpx;
    font-size: 22rpx;
    color: #f56c6c;
    width: 100%;
    box-sizing: border-box;
  }
}

.form-row-wrap + .u-form-item {
  margin-top: 25rpx !important;
}

/* 底部固定按钮 */
.fixed-bottom-btn-wrap {
  // position: fixed;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // padding: 15rpx 30rpx;
  // background: #fff;
  // box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

/* 巡检记录样式 */
.inspect-row {
  font-size: 14px;
  line-height: 2.2;
}
.detail-text {
  color: #1989fa;
  font-size: 14px;
}
</style>