InspectionCleaning/pages/index/index.vue

<template>
  <view class="content">
  <view v-if="false" style="display:flex">
  			<u-button type="error" @click="testFn">调试录入卡片</u-button>
  </view>
    <daySelect @dateChange="onDateChange" />
    <view v-if="isToday" class="task-info">
      <view class="title">今日任务</view>
      <!-- 当日计划 点击跳转 -->
      <view class="task-list">
        <!-- <view class="task-item" >
          <view class="name-state">
            <view class="name">足球场休息室</view>
            <u-tag text="已完成" type="success" border-color="transparent" />
          </view>

          <view class="time">
            <u-tag text="9:00~12:00" type="info" border-color="transparent" />
          </view>
        </view> -->

        <view
          class="task-item"
          v-for="item in planList"
          :key="item.id"
          @click="handleTaskClick(item)"
        >
          <view class="name-state">
            <view class="name">{{ item.name }}</view>
            <u-tag
              v-if="item.isCompleted == 0"
              text="待保洁"
              type="info"
              border-color="transparent"
            />
            <u-tag
              v-else
              text="已完成"
              type="success"
              border-color="transparent"
            />
          </view>

          <view class="time">
            <u-tag
              :text="item.beginTime + '~' + item.endTime"
              type="info"
              border-color="transparent"
            />
          </view>
        </view>
      </view>
    </view>
    <view v-if="isToday" class="area-schedule">
      <view class="finish">
        <view class="point"></view>
        <view class="title">已保洁区域</view>
        <view class="count-rate">
          {{ todayCompletion.completed }}
          <view class="total">/{{ todayCompletion.total }}</view>
        </view>
        <u-line-progress
          height="10"
          class="schedule-line"
          :show-percent="false"
          active-color="#2979ff"
          :percent="(todayCompletion.completed / todayCompletion.total) * 100"
        ></u-line-progress>
      </view>
      <view class="unfinish">
        <view class="point"></view>
        <view class="title">待保洁区域</view>
        <view class="count-rate">
          {{ todayCompletion.notCompleted }}
          <view class="total">/{{ todayCompletion.total }}</view>
        </view>
        <u-line-progress
          height="10"
          class="schedule-line"
          :show-percent="false"
          active-color="#FC873D"
          :percent="
            (todayCompletion.notCompleted / todayCompletion.total) * 100
          "
        ></u-line-progress>
      </view>
    </view>

    <!-- 非当日计划 仅展示 -->
    <view v-if="!isToday" class="cleaning-plan-box">
      <!-- <view class="cleaning-plan">
        <view class="title">今日保洁计划名称</view>
        <view class="time">
          <view class="top">00:00:00</view>
          <view class="bottom">23:59:00</view>
        </view>
      </view> -->
      <view class="cleaning-plan" v-for="item in planList" :key="item.id">
        <view class="title">{{ item.name }}</view>
        <view class="time">
          <view class="top">{{ item.beginTime }}</view>
          <view class="bottom">{{ item.endTime }}</view>
        </view>
      </view>
    </view>
    <u-tabbar :list="vuex_tabbar"></u-tabbar>
  </view>
</template>
<script>
import { GetPlanByDate, TodayCompletion } from "@/api/apiList";

import { useRouter } from "@/utils/utils.js";

import daySelect from "@/components/daySelect/index.vue";
export default {
  components: {
    daySelect,
  },

  data() {
    return {
      isToday: true,
      currentDate: "",
      planList: [],
      // 今日完成情况
      todayCompletion: {
        total: 0,
        completed: 0,
        notCompleted: 0,
      },
    };
  },

  mounted() {
    console.log("%c%s", "color:red", "mounted--");
    this.getPlanByDate();
  },

  methods: {
    testFn(){
        let u = navigator.userAgent;
        let isAndroid =
          u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android
        // let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
        try {
          if (isAndroid && AndroidJs) {
            console.log("%c%s", "color:red", "安卓--调用方法");
            const reqRow = {
              name: "input",
              data: "",
            };
            AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
          } else {
            console.log("%c%s", "color:red", "苹果--调用方法");
            const reqRow = {
              name: "back-iphone",
              data: "",
            };
            window.webkit.messageHandlers.func.postMessage(
              JSON.stringify(reqRow)
            ); // 给ios 传参
          }
        } catch (e) {
          console.log(e, "e-----判断安卓苹果类型出错");
        }
    },
    onDateChange({ date, isToday }) {
      this.isToday = isToday;
      this.currentDate = date;
      this.getPlanByDate();

      if (isToday) {
        this.getTodayCompletion();
      }
    },
    handleTaskClick(item) {
      console.log(item);

      uni.navigateTo({
        url: `/pages/index/cleanPlan?id=${item.id}`,
      });
    },

    // 根据日期获取计划
    async getPlanByDate() {
      this.planList = [];
      const res = await GetPlanByDate({ Date: this.currentDate });
      if (res.succeed) {
        this.planList = res.data;
      }
    },

    // 今日完成情况
    async getTodayCompletion() {
      const res = await TodayCompletion();
      if (res.succeed) {
        this.todayCompletion = { ...res.data };
        this.todayCompletion.total = res.data.completed + res.data.notCompleted;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  // height: 100vh; // 确保容器有明确高度
  overflow: hidden;
  padding-bottom: 100rpx;
}

.task-info {
  margin: 0 32rpx;
  padding: 18rpx;
  background: #f5f6fa;
  border-radius: 24rpx;
  .title {
    font-weight: bold;
    font-size: 34rpx;
    color: #282828;
  }
  .task-list {
    margin-top: 36rpx;
    display: flex;
    flex-direction: column;
    .task-item {
      margin-bottom: 20rpx;
      padding: 44rpx 30rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .name-state {
        display: flex;
        justify-content: space-between;
        .name {
          padding-left: 6rpx;
          position: relative;
        }
        .name::before {
          content: "";
          position: absolute;
          top: 10%;
          left: -6%;
          display: inline-block;
          width: 5rpx;
          height: 30rpx;
          background: #3d6af0;
        }
      }
      .time {
        margin-top: 20rpx;
      }
    }
  }
}
.area-schedule {
  margin: 0 32rpx;
  margin-top: 26rpx;
  display: flex;
  justify-content: space-between;
  > view {
    padding: 22rpx;
    width: 48%;
    background: #f5f6fa;
    border-radius: 10rpx;
    .point {
      width: 12rpx;
      height: 12rpx;
      background: #4473fe;
      border-radius: 50%;
    }

    .title {
      margin-top: 28rpx;
      font-size: 32rpx;
      color: #292929;
    }
    .count-rate {
      margin-left: 12rpx;
      margin-top: 40rpx;
      display: flex;
      font-size: 50rpx;
      color: #4473fe;
      .total {
        font-size: 50rpx;
        color: #dbdee9;
      }
    }
    .schedule-line {
      margin-top: 32rpx;
    }
  }
  .unfinish .point {
    background: #fc873d;
  }
  .unfinish .count-rate {
    color: #fc873d;
  }
}

.cleaning-plan-box {
  .cleaning-plan {
    margin: 0 32rpx;
    margin-bottom: 36rpx;
    padding: 42rpx 52rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url("@/static/images/plan-bg.png") no-repeat 100% 100%;
    background-size: 100% 100%;
    .title {
      font-weight: 500;
      font-size: 36rpx;
      color: #334a65;
    }
    .time {
      font-weight: 500;
      font-size: 36rpx;
      color: #334a65;
    }
  }
}
</style>