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

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="flex margin-b-15 bg-white" style="padding: 15px 0px 15px 15px" v-for="cu in currentDateList" :key="cu">
      <view class="flex margin-r-15" @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 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 class="app-scan-fixed">
      <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, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
import { publicStores, xunJianStores } from "@/store/modules/index";

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

const xunJianStore = xunJianStores(); //全局变量值Store

const { proxy } = getCurrentInstance();

function pulicClick(obj) {
  if (obj.inspectionStatus == 2) {
    xunJianStore.contentArray = {};

    recordList({
      siteId: obj.id,
      planSonId: xunJianStore.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;

            xunJianStore.contentArray = {
              contentList: [res1.data.contentList],
              siteList: res.data[0],
            };
            xunJianStore.siteId = undefined;
            xunJianStore.siteNubmber = undefined;

            uni.navigateTo({
              url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
            });
          });
        }
      } else {
      }
    });
  } else {
    xunJianStore.contentArray = {};
    xunJianStore.siteId = obj.id;
    xunJianStore.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",
      });

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

      siteDetails({
        siteId: xunJianStore.siteId,
        siteNubmber: xunJianStore.siteNubmber,
        planSonId: xunJianStore.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: xunJianStore.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();
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

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

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

.reportCenter {
  margin-right: auto;

  .centerSiteName {
    font-size: 15px;
    margin-bottom: 5px;
    height: 20px;
    line-height: 20px;
    display: flex;
  }
}
</style>

<style scoped>
.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 view {
  font-size: 12px;
  margin: auto;
  font-weight: 600;
}
</style>