usky-web-mobile/src/pages/face/index.vue

<template>
  <web-view v-show="!modal.show" ref="faceView" id="faceView" class="faceView" src="/static/face/index.html" bindmessage="receiveMessage" :webview-styles="webviewStyles" @message="onMessage">
  </web-view>

  <u-modal
    :show="modal.show"
    title="配置服务器"
    :cancelText="'退出应用'"
    :zoom="false"
    :showConfirmButton="true"
    :showCancelButton="true"
    :closeOnClickOverlay="true"
    @confirm="modalConfirm"
    @cancel="modalCancel"
    @close="modal.show = false"
  >
    <view class="slot-content">
      <view>
        <view class="mb10 required">服务器地址</view>
        <view class="mb20">
          <u-input v-model="form.linkUrl" placeholder="服务器地址（必填）" border="bottom" style="padding: 6px 0px" />
        </view>
      </view>
      <view>
        <view class="mb10">服务器端口</view>
        <view class="mb20">
          <u-input v-model="form.port" placeholder="服务器端口（非必填）" border="bottom" style="padding: 6px 0px" />
        </view>
      </view>
      <view v-if="meetingRoomList.length > 0">
        <view class="mb10 required">绑定会议室</view>
        <view>
          <u-input
            v-model="form.meetingName"
            placeholder="会议室（必选）"
            suffixIcon="arrow-right"
            suffixIconStyle="color: #909399"
            border="none"
            disabledColor="transparent"
            disabled
            @click="handlePicker('绑定会议室')"
          />
        </view>
      </view>
    </view>
  </u-modal>

  <u-picker
    :show="picker.show"
    :columns="picker.list"
    :title="'请选择' + picker.title"
    keyName="name"
    visibleItemCount="6"
    :defaultIndex="[picker.defaultIndex]"
    :closeOnClickOverlay="true"
    @close="picker.show = false"
    @cancel="picker.show = false"
    @confirm="pickerConfirm"
  ></u-picker>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import config from "@/config";
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, nextTick, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { meetingApi, faceApi, signOnOut, control } from "./api.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------公共变量-----------------------------------*/
const state = reactive({
  webviewStyles: {
    width: "100%",
    height: "100%",
  },
  meetingRoomList: [],
  meetingTimeList: [],
  meetingReservaList: {
    dataAll: {},
    thisVenueData: [],
    thisVenueTime: {},
    nextSceneData: [],
    nextSceneTime: {},
    timeList: [],
  },
  modal: {
    show: false,
  },
  picker: {
    show: false,
    title: "",
    list: [[]],
    defaultIndex: 0,
  },
  form: {
    linkUrl: "",
    port: "",
    domain: undefined,
    meetingId: undefined,
    meetingName: undefined,
  },
  inter: {
    interMeeting: null,
  },
});
const { webviewStyles, meetingRoomList, modal, picker, form, inter } = toRefs(state);

// 初始化
function init() {
  uni.chooseImage({
    sourceType: ["camera"],
    success(res) {
      console.log(res);
    },
  });

  var storage = uni.getStorageSync("storage_face");
  if (storage) {
    state.form.domain = storage.domain;
    state.form.linkUrl = storage.linkUrl.indexOf(":") != -1 ? storage.linkUrl.split(":")[0] : storage.linkUrl;
    state.form.port = storage.port ? storage.port : "";
    state.form.meetingId = storage.meetingId || undefined;
    state.form.meetingName = storage.meetingName || undefined;
  }

  getMeetingRoomList();
  getMeetingRoomReservationList();
  inter.interMeeting = setInterval(() => {
    getMeetingRoomReservationList();
  }, 1000 * 5);
}

/**
 * @会议室下拉列表
 */
function getMeetingRoomList() {
  meetingApi()
    .GetMeetingRoomList({
      domain: state.form.domain,
    })
    .then((requset) => {
      if (requset.data.length > 0) {
        requset.data.forEach((e) => {
          state.meetingRoomList.push({
            value: e.roomId,
            name: e.roomName,
          });
        });
      }
    });
}

/**
 * @会议室详情列表
 */
function getMeetingRoomReservationList() {
  state.meetingTimeList = [];
  state.meetingReservaList.thisVenueData = [];
  state.meetingReservaList.thisVenueTime = {};
  state.meetingReservaList.nextSceneData = [];
  state.meetingReservaList.nextSceneTime = {};

  for (let i = 0; i <= 23.5; i += 0.5) {
    var time = "";
    if (i % 1 === 0.5) {
      if (i < 10) {
        time = "0" + (i - 0.5) + ":30";
      } else {
        time = i - 0.5 + ":30";
      }
    } else {
      if (i < 10) {
        time = "0" + i + ":00";
      } else {
        time = i + ":00";
      }
    }

    state.meetingTimeList.push({
      startTime: time,
      endTime: time,
      isEnd: 0,
      isHave: 0,
      isReservation: 0,
    });
  }

  meetingApi()
    .GetMeetingRoomReservationList({
      domain: state.form.domain,
      meetingRoomId: state.form.meetingId,
      date: proxy.$dayjs().format("YYYY-MM-DD") + " 00:00:00",
    })
    .then((requset) => {
      if (requset.data.length > 0) {
        state.meetingReservaList.dataAll = requset.data[0];
        state.meetingReservaList.dataAll.dmMeetingList.forEach((e, index) => {
          //判断开始时间和结束时间是否包含当前时间
          if (proxy.$dayjs().isBetween(e.startDate, e.endDate, null, "[]")) {
            state.meetingReservaList.thisVenueData.push(e);
            state.meetingReservaList.thisVenueTime = proxy.$time.timeRestructuring(state.meetingReservaList.dataAll.meetingRoomUsage[index]);
          }
          //判断当前时间是否相同或在其之前
          if (proxy.$dayjs().isSameOrBefore(e.startDate) && state.meetingReservaList.nextSceneData.length < 1) {
            state.meetingReservaList.nextSceneData.push(e);
            state.meetingReservaList.nextSceneTime = proxy.$time.timeRestructuring(state.meetingReservaList.dataAll.meetingRoomUsage[index]);
          }
        });

        state.meetingReservaList.timeList = showTimeSegments(state.meetingTimeList);
        handleChildren({
          funcName: "初始化数据",
          data: JSON.stringify(state.meetingReservaList),
        });
      } else {
        state.meetingReservaList.timeList = state.meetingTimeList;
        handleChildren({
          funcName: "初始化数据",
          data: JSON.stringify(state.meetingReservaList),
        });
      }
    })
    .catch((err) => {});
}

// 显示时间段的函数
function showTimeSegments(times) {
  const timesXleList = JSON.parse(JSON.stringify(times));

  for (var i = 0; i < timesXleList.length; i++) {
    const timeValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timesXleList[i].startTime}`);

    state.meetingReservaList.dataAll.meetingRoomUsage.forEach((item) => {
      const timeList = proxy.$time.timeRestructuring(item);
      const startValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.startTime}`);
      const endValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.endTime}`);

      if (timeValue.getTime() >= startValue.getTime() && timeValue.getTime() < endValue.getTime()) {
        timesXleList.splice(i--, 1);
      }
    });
  }

  state.meetingReservaList.dataAll.meetingRoomUsage.forEach((item) => {
    const timeList = proxy.$time.timeRestructuring(item);
    const startValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.startTime}`);
    const endValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.endTime}`);

    if (proxy.$dayjs().isBetween(startValue, endValue, null, "[]")) {
      timesXleList.push({
        ...timeList,
        isEnd: 0,
        isHave: 1,
        isReservation: 0,
      });
    } else {
      if (proxy.$dayjs().isSameOrAfter(startValue)) {
        timesXleList.push({
          ...timeList,
          isEnd: 1,
          isHave: 0,
          isReservation: 0,
        });
      }
      if (proxy.$dayjs().isSameOrBefore(startValue)) {
        timesXleList.push({
          ...timeList,
          isEnd: 0,
          isHave: 0,
          isReservation: 1,
        });
      }
    }
  });

  var newTimesXleList = proxy.$common
    .uniq(timesXleList, "startTime")
    .sort((a, b) => new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${a.startTime}`) - new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${b.startTime}`));
  return newTimesXleList;
}

/**
 * @人脸验证
 */
function faceVerify(imageBase) {
  faceApi()
    .faceVef({
      domain: state.form.domain,
      imageBase: imageBase,
    })
    .then((item) => {
      if (item.data.code === 200 || item.data.code === 201) {
        proxy.$modal.msg(item.data.msg);

        if (state.meetingReservaList.thisVenueData.length > 0) {
          meetingVerify(item);
        } else {
          openDoor();
        }
      } else {
        proxy.$modal.msg(item.data.msg);
      }
    })
    .catch((err) => {});
}

/**
 * @会议验证
 */
function meetingVerify(item) {
  meetingApi()
    .Attendee({
      domain: state.form.domain,
      meetingId: state.meetingReservaList.thisVenueData[0].meetingId,
      userId: item.data.userId,
      userName: item.data.faceName,
    })
    .then((item1) => {
      if (item1.data.status == "1") {
        proxy.$modal.msg(item1.data.msg);
        state.msg = `[${item.data.faceName}] ${item1.data.msg}`;

        openDoor();

        signOnOut({
          domain: state.form.domain,
          meetingId: state.meetingReservaList.thisVenueData[0].meetingId,
          userId: item.data.userId, //参会人Id
          mothodType: 0, //签到签退类别(0.签到 1.签退)
          signType: 1, //签到签退方式(0.人工 1.人脸)
        }).then((item2) => {});
      } else {
        proxy.$modal.msg(item1.data.msg);
      }
    });
}

/**
 * @门禁开门
 */
function openDoor() {
  control({
    domain: state.form.domain,
    commandStr: JSON.stringify({ method: "control", params: { device_id: "223212768", command: 2 } }),
  })
    .then((item2) => {
      proxy.$modal.msg("开门成功");
    })
    .catch((err) => {
      console.log(err);
    });
}

/**
 * @弹窗确定按钮事件
 */
function modalConfirm() {
  if (!state.form.linkUrl) {
    proxy.$modal.msg("请输入链接地址");
    return;
  }

  if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
    proxy.$modal.msg("请输入正确的链接地址");
    return;
  }

  if (!state.form.meetingName) {
    proxy.$modal.msg("请选择绑定会议室");
    return;
  }

  uni.setStorageSync("storage_face", state.form);
  state.modal.show = false;
  getMeetingRoomReservationList();
}

/**
 * @action弹出框点击事件
 */
function handlePicker(value, index, ind) {
  if (value == "绑定会议室") {
    state.picker.title = "绑定会议室";
    state.picker.list = [state.meetingRoomList];
    state.picker.defaultIndex = 0;
  }
  state.picker.show = true;
}

/**
 * @action弹出框选择事件
 */
function pickerConfirm(e) {
  if (state.picker.title == "绑定会议室") {
    state.form.meetingId = e.value[0].value;
    state.form.meetingName = e.value[0].name;
  }
  state.picker.show = false;
}

/**
 * @弹窗退出按钮事件
 */
function modalCancel() {
  state.modal.show = false;
  //#ifdef APP-PLUS
  proxy.$keyListen.quitApp();
  //#endif
}

/**
 * @解析父页面传回的数据
 */
function analysisData(event) {
  if ("funcName" in event) {
    console.log(event.funcName);
    if (event.funcName == "打开配置") {
      state.modal.show = true;
    } else if (event.funcName == "人脸识别") {
      faceVerify(event.data.imageBase);
    }
  }
}

/**
 * @向子页面发送数据
 */
function handleChildren(data) {
  // #ifdef APP-PLUS
  var pages = getCurrentPages();
  var currentWebview = pages[pages.length - 1].$getAppWebview();
  var wv = currentWebview.children()[0];
  wv.evalJS(`receiveData(${JSON.stringify(data)})`);
  // #endif

  // #ifdef H5
  var iframe = document.getElementById("faceView");
  iframe.contentWindow.postMessage(data, "*");
  // #endif
}

/**
 * @接收子页面传过来的值
 */
function onMessage(e) {
  analysisData(e.detail.data[0]);
}
// #ifdef H5
window.onmessage = function (event) {
  analysisData(event.data);
};
// #endif

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

onUnload(() => {
  clearInterval(inter.interMeeting); //销毁之前定时器
});

watch(
  () => [state.form.linkUrl, state.form.port],
  (val) => {
    state.meetingRoomList = [];

    if (!state.form.linkUrl) {
      return;
    }

    if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
      return;
    }

    var domain = "";
    if (state.form.linkUrl) {
      domain = state.form.linkUrl;
      if (state.form.port) {
        domain += ":" + state.form.port;
      }
    }
    state.form.domain = domain;
    config.baseUrl = "http://" + state.form.domain + "/prod-api";
    getMeetingRoomList();
  }
);
</script>
<style>
.faceView {
  width: 100% !important;
  height: 100% !important;
}

iframe {
  width: 100% !important;
  height: 100% !important;
  border-width: 0;
}
</style>
<style lang="scss" scoped>
:deep() {
  .u-modal {
    width: 30rem !important;

    &__title {
      font-size: 18px !important;
    }
    .slot-content {
      font-size: 16px;
      width: 100%;
    }
  }
}
</style>