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

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="巡检上报" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
    <template #right>
      <view class="u-navbar__content__right__item font12">
        <span @click="endInspection">结束巡检</span>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="flex bg-white mb15 ptb15 pl15" v-for="cu in currentDateList" :key="cu">
        <view class="flex mr15" @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 == 2 ? '#ABE399' : '#ffbebb',
                color: cu.inspectionStatus == 2 ? '#189400' : '#FF3128',
                borderRadius: '10px',
                padding: '0px 5px',
              }"
            >
              {{ cu.inspectionStatus == 2 ? "已巡检" : "未巡检" }}
            </view>
          </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.replace("T", " ") : "无" }}
          </view>
        </view>
        <view class="reportRight">
          <view
            class="rightChild"
            :style="{
              color: cu.siteStatus == null || cu.siteStatus == 0 ? '#a0a0a0' : '#1989fa',
            }"
          >
            <text class="iconfont oaIcon-map" style="font-size: 18px"></text>
            <view>定位</view>
          </view>
          <view
            class="rightChild"
            :style="{
              color: cu.siteStatus == null || cu.siteStatus == 0 ? '#a0a0a0' : '#1989fa',
            }"
          >
            <text class="iconfont oaIcon-appstore" style="font-size: 18px"></text>

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

      <oaMovable :themesColor="proxy.$settingStore.themeColor.color">
        <template #content>
          <view class="iconfont oaIcon-nfc menu-item-icon" @click="nfcClick()"></view>
          <view class="iconfont oaIcon-saoyisao menu-item-icon" @click="scanClick()"></view>
        </template>
      </oaMovable>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, computed, getCurrentInstance, toRefs, inject, shallowRef } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { recordList, recordOption, siteDetails, planSonSiteDetails } from "@/api/business/zhaf/xunJian/plan.js";
import { errorApi } from "@/api/business/zhaf/xunJian/index.js";
/*----------------------------------组件引入-----------------------------------*/
import oaMovable from "@/components/oa-movable/index.vue"; // 引入组件
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/

function pulicClick(obj) {
  if (obj.inspectionStatus == 2) {
    xunJianStore.inspectionStatus = 2;
    xunJianStore.siteId = obj.id;

    uni.navigateTo({
      url: "/pages/business/zhaf/xunJian/plan/components/siteDetails",
    });
  } else {
    xunJianStore.inspectionStatus = 1;
    xunJianStore.siteId = obj.id;
    xunJianStore.siteNubmber = "";

    if (obj.siteType == 1) {
      scanClick();
    } else if (obj.siteType == 2) {
      nfcClick();
    }
  }
}

/**
 * @NFC
 */
function nfcClick() {
  // proxy.$nfc.initNFC();
  uni.navigateTo({
    url: "/pages/common/nfc/index",
  });
}

/**
 * @扫一扫
 * @点击事件
 */
const scanArray = ref([]);
const scanBool = ref(false);
async function scanClick() {
  uni.scanCode({
    autoZoom: false,
    success: async (e) => {
      proxy.$modal.msg("扫码成功");
      siteDetailsApi(e.result);
    },
    fail: (err) => {
      proxy.$modal.msg("扫码失败");
      console.log("扫码失败", err);
    },
    complete: () => {
      console.log("扫码结束");
    },
  });
}

/**
 * @点位详情查询
 * @接口请求
 */
function siteDetailsApi(value) {
  xunJianStore.contentArray = {};
  xunJianStore.siteId = "";
  xunJianStore.siteNubmber = value;

  if (!proxy.$common.isNetwork()) {
    return false;
  }

  siteDetails({
    siteId: xunJianStore.siteId,
    siteNubmber: xunJianStore.siteNubmber,
    planSonId: xunJianStore.planSonId,
  })
    .then((res) => {
      if (res.status == "SUCCESS") {
        currentDateList.value.forEach((res1) => {
          if (res1.id == res.data.siteList[0].id) {
            uni.navigateTo({
              url: "/pages/business/zhaf/xunJian/plan/components/siteDetails",
            });
          }
        });
      }
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}

/**
 * @地点列表
 * @api接口请求
 */
const currentDateList = ref([]); //地点列表list数据存储
function currentApi() {
  if (!proxy.$common.isNetwork()) {
    return false;
  }

  planSonSiteDetails({
    planSonId: xunJianStore.planSonId,
  })
    .then((res) => {
      if (res.status == "SUCCESS") {
        currentDateList.value = res.data;
      }
    })
    .catch((err) => {
      proxy.$modal.msg(err);
    });
}
/**
 * @异常上报
 */
function AbnormalReport(){
  errorApi()
  .Insert(
    {
      "eventName": "执行任务",
      "eventType": 8,
      "eventLevel": 1,
      "eventCategory": 8,
      "deviceId": proxy.$settingStore.deviceList.deviceId,
      "planId": xunJianStore.planId
    }
  )
  .catch((err) => {
    proxy.$modal.msg(err);
  });
}

/**
 * @结束巡检
 */
function endInspection() {
  errorApi()
  .Insert(
    {
      "eventName": "结束巡检",
      "eventType": 10,
      "eventLevel": 1,
      "eventCategory": 10,
      "deviceId": proxy.$settingStore.deviceList.deviceId,
      "planId": xunJianStore.planId
    }
  )
  .catch((err) => {
    proxy.$modal.msg(err);
  });
}

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

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
  uni.$on("NFC_readID", function (value) {
    siteDetailsApi(value);
  });
});

onUnload(() => {
  uni.$off("NFC_readID"); //将值删除监听器
});

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>