From d8badb35af7c5bf443c0eff93675c7ee29dca7bc Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 23 Oct 2024 11:35:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=E7=AD=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/workPlan/custody/index.vue | 242 ++++++++++++++++++++++++++++++-
 1 file changed, 239 insertions(+), 3 deletions(-)

diff --git a/pages/workPlan/custody/index.vue b/pages/workPlan/custody/index.vue
index 6a6bdd0..e02e498 100644
--- a/pages/workPlan/custody/index.vue
+++ b/pages/workPlan/custody/index.vue
@@ -1,9 +1,245 @@
 <template>
-  <view>现场监护</view>
+  <view>
+    <u-navbar
+      class="u-navbar"
+      title="现场监护"
+      placeholder
+      @leftClick="leftClick"
+      leftIconColor="#fff"
+      bgColor="#00337A"
+      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
+    />
+
+    <view class="custody-container">
+      <view class="header-btn">
+        <view :class="{ active: current === 0 }" @tap="onCheckTap(0)">新增数据</view>
+        <view :class="{ active: current === 1 }" @tap="onCheckTap(1)">我的数据</view>
+      </view>
+
+      <view style="width: 100%">
+        <swiper style="width: 100%" :current="current" @change="onSwiperChange" :style="{ height: navHeight + 'px' }">
+          <swiper-item class="swiper-item-content" :style="{ height: navHeight + 'px' }">
+            <scroll-view scroll-y="true" class="scroll-view-y" :style="{ height: navHeight + 'px' }">
+              <view class="risk-header">
+                <view class="risk-left">
+                  <view>今日</view>
+                  <view>风险</view>
+                </view>
+                <view class="risk-right">
+                  <view style="margin-top: 16rpx">
+                    <text>我的项目</text>
+                    <text style="color: #ca6d58">高风险 0</text>
+                    <text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
+                    <text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
+                  </view>
+                  <view>
+                    <text>全部项目</text>
+                    <text style="color: #ca6d58">高风险 0</text>
+                    <text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
+                    <text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
+                  </view>
+                </view>
+              </view>
+
+              <!-- 选择今日 日计划风险 -->
+              <view class="change-today">
+                <view class="today-title">
+                  <view class="title-bold">选择今日 日计划风险</view>
+                  <view>去选择风险点</view>
+                </view>
+
+                <uni-forms label-position="top" label-width="200">
+                  <uni-forms-item label="作业风险内容" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                  <uni-forms-item label="风险等级" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                  <uni-forms-item label="工程名称" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                </uni-forms>
+              </view>
+
+              <!-- 现场监护 -->
+
+              <view class="scene-container">
+                <view class="title-bold">现场监护</view>
+                <uni-forms label-position="top" label-width="200">
+                  <uni-forms-item label="当前位置" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                  <uni-forms-item label="附件上传(1-6张照片)" required>
+                    <view class="example-body">
+                      <uni-file-picker limit="6" title="最多选择6张图片"></uni-file-picker>
+                    </view>
+                  </uni-forms-item>
+                  <uni-forms-item label="电子签名" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                  <uni-forms-item label="备注" required>
+                    <uni-easyinput type="text" placeholder="请填写" />
+                  </uni-forms-item>
+                  <button>提交</button>
+                </uni-forms>
+              </view>
+            </scroll-view>
+          </swiper-item>
+          <swiper-item></swiper-item>
+        </swiper>
+      </view>
+    </view>
+
+    <m-tabbar fixed fill :current="0" :tabbar="tabbar" class="bottom-tab"></m-tabbar>
+  </view>
 </template>
 
 <script>
-export default {}
+import TabbarConfig from '../util/tabbar'
+export default {
+  data() {
+    return {
+      current: 0,
+      tabbar: TabbarConfig,
+      navHeight: 100,
+      pH: 0 //窗口高度
+    }
+  },
+  methods: {
+    leftClick() {
+      uni.navigateBack()
+    },
+    onCheckTap(type) {
+      this.current = type
+    },
+    onSwiperChange(e) {
+      console.log('轮播图change事件', e)
+      this.current = e.target.current
+    }
+  },
+  onReady() {
+    let that = this
+    uni.getSystemInfo({
+      //调用uni-app接口获取屏幕高度
+      success(res) {
+        //成功回调函数
+        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
+        console.log('res.windowHeight窗口高度', res.windowHeight)
+        let titleH = uni.createSelectorQuery().select('.scroll-view-y') //想要获取高度的元素名（class/id）
+        // let bottomBox = uni.createSelectorQuery().select('.bottom-tab')
+        // let bottomHeight = 0
+        // bottomBox
+        //   .boundingClientRect(data => {
+        //     console.log('data----', data)
+        //     bottomHeight = data.height
+        //   })
+        //   .exec()
+        titleH
+          .boundingClientRect(data => {
+            let pH = that._data.pH
+            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
+
+            console.log('that._data.navHeight', that._data.navHeight)
+          })
+          .exec()
+      }
+    })
+  }
+}
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.custody-container {
+  //   background-color: #ccc;
+
+  .header-btn {
+    display: flex;
+    background-color: #fff;
+
+    view {
+      flex: 1;
+      padding: 30rpx 0;
+      color: #a8a8ad;
+      font-size: 36rpx;
+      text-align: center;
+      transition: all 0.3s ease;
+    }
+
+    .active {
+      color: #043372;
+      border-bottom: 2px solid #043372;
+    }
+  }
+
+  .swiper-item-content {
+    background-color: #efefef;
+  }
+
+  .scroll-view-y {
+    width: 100%;
+    background-color: #efefef;
+
+    .title-bold {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+    .risk-header {
+      width: 94%;
+      margin: 16rpx auto;
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      padding: 2rpx 14rpx;
+      border: 1px solid #ccc;
+      border-radius: 6rpx;
+
+      .risk-left {
+        padding: 10rpx;
+        border-radius: 10rpx;
+        background-color: #da0019;
+        color: #fff;
+      }
+
+      .risk-right {
+        margin-left: 6rpx;
+      }
+    }
+
+    .change-today {
+      width: 94%;
+      margin: 16rpx auto;
+      padding: 26rpx;
+      border: 1px solid #ccc;
+      background-color: #fff;
+      border-radius: 6rpx;
+
+      .today-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .today-title view:last-child {
+        padding: 26rpx 6rpx;
+        background-color: #d6001a;
+        border-radius: 20rpx;
+        color: #fff;
+      }
+
+      ::v-deep .uni-forms-item__label {
+        font-weight: bold;
+        color: #000;
+        font-size: 26rpx;
+      }
+    }
+    .scene-container {
+      width: 94%;
+      margin: 16rpx auto;
+      padding: 26rpx;
+      border: 1px solid #ccc;
+      background-color: #fff;
+      border-radius: 6rpx;
+    }
+  }
+}
+</style>