ll

liukangdong

2024-11-30 f956955c38a67f968977b7d784ff016ab5b17223

 h5/pages/polling/detail.vue

@@ -1,59 +1,124 @@
<template>

   <view class="main_app">

      <view class="head_bg"></view>

      <view class="info">
         <image v-if="true" class="icon" src="@/static/side/ic_dabiaoed.png" mode=""></image>
         <image v-else class="icon" src="@/static/side/ic_dabiao.png" mode=""></image>

      <view v-if="info.status || info.status == 0" class="head_bg" :style="{
         background: `linear-gradient(180deg, ${statusM[info.status].color} 0%, rgba(247, 247, 247, 0) 100%)`
      }"></view>

      <view class="info">

         <image v-if="info.status == 2" class="icon" src="@/static/side/ic_dabiaoed.png" mode=""></image>

         <image v-if="info.status == 3" class="icon" src="@/static/side/ic_dabiao.png" mode=""></image>

         <view class="head">

            <view class="name">巡检计划</view>

            <view class="status">待开始</view>

            <view class="name">{{ info.title }}</view>

            <view class="status" v-if="info.status || info.status == 0" :style="{color: statusM[info.status].color}">{{statusM[info.status].name}}</view>

         </view>

         <view class="line">

            <view class="la">任务日期：</view>

            <view class="val">2023-23-23</view>

            <view class="val" v-if="info.startDate && info.endDate">{{ info.startDate.slice(0, 11) }} 至

               {{ info.endDate.slice(0, 11) }}</view>

         </view>

         <view class="line">

            <view class="la">执行时间：</view>

            <view class="val">2023-23-23</view>

            <view class="val" v-if="info.startDate && info.endDate">{{ info.startDate.slice(11,16) }} 至

               {{ info.endDate.slice(11, 16) }}</view>

         </view>

         <view class="line">

            <view class="la">完成情况：</view>

            <view class="val">2023-23-23</view>

            <view class="val">{{info.finishNum}}/{{info.patrolNum}}</view>

         </view>

      </view>

      <view class="title">巡检点列表(1)</view>

      <view class="title">巡检点列表({{list.length}})</view>

      <view class="list">

         <view class="item" v-for="i in 10" @click="itemClick()">

         <view class="item" v-for="item in list" @click="itemClick(item)">

            <view class="icon"></view>

            <view class="content">

               <view class="head">

                  <view>巡检点10</view>

                  <view class="status">待巡检</view>

                  <view>{{item.pointName}}</view>

                  <view class="status" :class="{ gray: item.status == 1 }">{{ item.status == 1 ? '已巡检' : '待巡检' }}</view>

               </view>

               <view class="desc">巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略巡检内容最多展示两行，多的省略

               </view>

               <template v-if="item.status == 1">

                  <view class="line">

                     <view class="la">巡检结果：</view>

                     <view class="val" :class="{ red: item.dealStatus == 1 }">{{ item.dealStatus == 0 ? '正常' : '异常' }}</view>

                  </view>

                  <view class="line">

                     <view class="la">巡检时间：</view>

                     <view class="val">{{item.dealDate}}</view>

                  </view>

               </template>

               <view class="desc" v-else>{{item.content}}</view>

            </view>

         </view>

      </view>

      <view class="footer">
         <view class="sub_btn">扫码巡检</view>
      <view class="footer">

         <view class="sub_btn">扫码巡检</view>

      </view>

   </view>

</template>



<script>

   import {

      ywPatrolDetail,

      ywPatrolTaskRecord

   } from '@/api'

   export default {

      data() {

         return {



            id: '',

            info: {},

            list: [],
            statusM: [
               { color: '#4593f7', name: '待开始' },
               { color: '#73e09a', name: '进行中' },
               { color: '#f1a93f', name: '已超期' },
               { color: '#b9b9b9', name: '已处理' },
            ]

         };

      },

      onLoad(option) {

         this.id = option.id

         this.getDetail()

      },
      methods: {
         itemClick() {
            uni.navigateTo({
               url: '/pages/polling/point'
            })
         }
      onShow() {
         this.getDetail()
      },

      methods: {

         itemClick(item) {

            uni.navigateTo({

               url: '/pages/polling/point?id=' + item.id

            })

         },

         getDetail() {

            const {

               id

            } = this

            ywPatrolDetail(id).then(res => {

               this.info = res.data

            })

            ywPatrolTaskRecord({

               capacity: 999,

               page: 1,

               model: {

                  taskId: id

               }

            }).then(res => {

               this.list = res.data.records

            })

         },

         async startScan() {
               try {
                 const video = document.getElementById('video');
                 const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
                 video.srcObject = stream;
			
                 // 使用 QrScanner 解析
                 const qrScanner = new QrScanner(video, result => {
                   alert(`扫描结果: ${result}`);
                   qrScanner.stop(); // 停止扫码
                 });
                 qrScanner.start();
               } catch (err) {
                 console.error('打开摄像头失败:', err);
               }
             }
      }

   }

</script>

@@ -67,7 +132,7 @@
      padding: 30rpx;



      .head_bg {

         background: linear-gradient(180deg, #008BFF 0%, rgba(247, 247, 247, 0) 100%);

         // background: linear-gradient(180deg, #008BFF 0%, rgba(247, 247, 247, 0) 100%);

         height: 240rpx;

         width: 750rpx;

         position: absolute;

@@ -83,14 +148,16 @@
         padding: 30rpx 30rpx 10rpx;

         margin-bottom: 40rpx;

         background: linear-gradient(#FFFFFF 0%, #FFFFFF 48%, #F0F5FF 100%);

         position: relative;
         .icon{
            position: absolute;
            right: 30rpx;
            bottom: 30rpx;
            width: 160rpx;
            height: 122rpx;
         position: relative;



         .icon {

            position: absolute;

            right: 30rpx;

            bottom: 30rpx;

            width: 160rpx;

            height: 122rpx;

         }



         .head {

            display: flex;

            justify-content: space-between;

@@ -103,17 +170,12 @@


            .status {

               color: $primaryColor;

            }
            .gray{
               color: gray;
            }

         }



         .line {

            display: flex;

            margin-bottom: 20rpx;



            .la {

               color: #666666;

            }

         }

      }



      .title {

@@ -123,9 +185,19 @@
         margin-bottom: 30rpx;

      }



      .list {
         height: calc( 100vh - 720rpx ) ;
      .line {

         display: flex;

         margin-bottom: 20rpx;



         .la {

            color: #666666;

         }

      }



      .list {

         height: calc(100vh - 720rpx);

         overflow: auto;



         .item {

            width: 690rpx;

            height: 188rpx;

@@ -136,7 +208,9 @@
            display: flex;

            padding: 20rpx 30rpx 0 16rpx;

            margin-bottom: 20rpx;



            .line{
               margin-bottom: 10rpx;
            }

            .icon {

               width: 10rpx;

               height: 148rpx;

@@ -160,6 +234,9 @@
                     offset-anchor: 28rpx;

                     color: $primaryColor;

                     font-weight: 400;

                  }
                  .gray{
                     color: #999999;
                  }

               }



@@ -176,29 +253,31 @@
            }

         }

      }

      .footer{
         position: fixed;
         bottom: 0rpx;
         left: 0rpx;
         width: 750rpx;
         height: 172rpx;
         background-color: #fff;
         padding: 20rpx 40rpx;
         .sub_btn {
				
            width: 670rpx;
            height: 88rpx;
            background: $primaryColor;
            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
         }


      .footer {

         position: fixed;

         bottom: 0rpx;

         left: 0rpx;

         width: 750rpx;

         height: 172rpx;

         background-color: #fff;

         padding: 20rpx 40rpx;



         .sub_btn {



            width: 670rpx;

            height: 88rpx;

            background: $primaryColor;

            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);

            border-radius: 44rpx;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 500;

            font-size: 32rpx;

            color: #FFFFFF;

         }

      }

		


   }

</style>