usky-web-mobile/src/pages/business/mhxf/xunJian/plan/components/report.vue

<template>
  <scroll-view scroll-y>
    <view class="whiteBackgroundColor" style="display: flex; padding: 15px 0px 15px 15px; margin-bottom: 15px" v-for="cu in currentDateList" :key="cu">
      <view class="reportLeft" @click="pulicClick(cu)">
        <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>

        <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/NFC.png" v-if="cu.siteType == 2" shape="circle"></u-image>
      </view>
      <view class="reportCenter" @click="pulicClick(cu)">
        <view class="centerSiteName">
          {{ cu.siteName }}
          <view
            :style="{
              margin: 'auto auto auto 15px',
              fontSize: '5px',
              backgroundColor: cu.inspectionStatus == 1 ? '#ffbebb' : '#ABE399',
              color: cu.inspectionStatus == 1 ? '#FF3128' : '#189400',
              borderRadius: '10px',
              padding: '0px 5px',
            }"
          >
            {{ cu.inspectionStatus == 1 ? "未巡检" : "已巡检" }}
          </view>

          <!-- "inspectionStatus": 2 //巡检状态（1 未巡检，2 已巡检） -->
        </view>
        <view style="font-size: 13px; color: #a1a1a1; margin-bottom: 5px"> 描述：{{ cu.siteDescribe == "" || cu.siteDescribe == null ? "无" : cu.siteDescribe }} </view>
        <view style="font-size: 13px; color: #a1a1a1">
          完成时间：
          {{ cu.inspectionTime == "" || cu.inspectionTime == null ? "无" : cu.inspectionTime }}
        </view>
      </view>
      <view style="margin: auto" @click="pulicClick(cu)"></view>
      <view class="reportRight">
        <view
          class="rightChild"
          :style="{
            color: cu.siteStatus == null || cu.siteStatus == 0 ? '#a0a0a0' : '#1989fa',
          }"
        >
          <text class="iconfont ucicon-map" style="font-size: 22px"></text>
          <view>定位</view>
        </view>
        <view
          class="rightChild"
          :style="{
            color: cu.siteStatus == null || cu.siteStatus == 0 ? '#a0a0a0' : '#1989fa',
          }"
        >
          <text class="iconfont ucicon-appstore" style="font-size: 22px"></text>

          <view>状态</view>
        </view>
      </view>
    </view>

    <view style="position: fixed; right: 0; bottom: 50px">
      <u-image width="67" height="67" src="@/static/images/xunjian/plan-scan.png" shape="circle" @click="scanClick()"></u-image>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef } from "vue";
import useXunJianStore from "@/store/modules/xunJian";

import { recordList, recordOption, siteDetails, planSonSiteDetails } from "@/api/business/mhxf/xunJian/plan.js";

const settingsStore = useXunJianStore(); //全局变量值Store

function pulicClick(obj) {
  if (obj.inspectionStatus == 2) {
    recordList({
      siteId: obj.id,
      planSonId: settingsStore.planSonId,
    }).then((res) => {
      if (res.status == "SUCCESS") {
        if (res.data.length > 0) {
          recordOption({
            siteId: res.data[0].siteId,
            recordId: res.data[0].id,
          }).then((res1) => {
            res.data[0].inspectionStatus = 2;
            res.data[0].pictureUrl = obj.pictureUrl;

            settingsStore.contentArray = {
              contentList: [res1.data.contentList],
              siteList: res.data[0],
            };
            settingsStore.siteId = undefined;
            settingsStore.siteNubmber = undefined;
          });
        }
      } else {
      }
    });
  } else {
    settingsStore.contentArray = {};
    settingsStore.siteId = obj.id;
    settingsStore.siteNubmber = undefined;
  }

  uni.navigateTo({
    url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
  });
}

/**
 * @扫一扫
 * @点击事件
 */
const scanArray = ref([]);
const scanBool = ref(false);
async function scanClick() {
  uni.scanCode({
    success: async (e) => {
      uni.showToast({
        title: "扫码成功",
        icon: "none",
      });

      settingsStore.contentArray = {};
      settingsStore.siteId = undefined;
      settingsStore.siteNubmber = e.result;

      siteDetails({
        siteId: settingsStore.siteId,
        siteNubmber: settingsStore.siteNubmber,
        planSonId: settingsStore.planSonId,
      }).then((res) => {
        if (res.status == "SUCCESS") {
          currentDateList.value.forEach((e) => {
            if (e.id == res.data.siteList[0].id) {
              uni.navigateTo({
                url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
              });
            }
          });
        } else {
        }
      });
    },
    fail: (err) => {
      uni.showToast({
        title: "扫码失败",
        icon: "none",
      });
      console.log("扫码失败", err);
    },
    complete: () => {
      console.log("扫码结束");
    },
  });
}

/**
 * @地点列表
 * @api接口请求
 */
const currentDateList = ref([]); //地点列表list数据存储
function currentApi() {
  planSonSiteDetails({
    planSonId: settingsStore.planSonId,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      currentDateList.value = res.data;

      currentDateList.value.forEach((e) => {
        if (e.inspectionTime) {
          e.inspectionTime = e.inspectionTime.replace("T", " ");
        }
      });
    } else {
    }
  });
}

onLoad((options) => {
  currentApi();
});

onMounted(() => {});
</script>

<style lang="scss">
.is-selected {
  color: #1989fa;
}
</style>

<style scoped>
.reportLeft {
  margin-right: 15px;
  display: flex;
}

.reportCenter {
}

.reportCenter .centerSiteName {
  font-size: 15px;
  margin-bottom: 5px;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.reportRight {
  display: flex;
  background-color: rgba(238, 238, 238, 0.3);
  margin: -15px 0;
}

.reportRight .rightChild {
  margin: auto;
  text-align: center;
  padding: 10px;
}

.reportRight .rightChild .el-icon {
  font-size: 20px;
  margin: auto;
  font-weight: 600;
}

.reportRight .rightChild view {
  font-size: 12px;
  margin: auto;
  font-weight: 600;
}
</style>