|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <van-nav-bar title="巡检打卡" safe-area-inset-top>
|
|
|
+ <template #left>
|
|
|
+ <van-icon
|
|
|
+ :name="require('@/assets/arrow-left.svg')"
|
|
|
+ size="24"
|
|
|
+ @click="backPath"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="page_info">
|
|
|
+ <div class="info_pannel">
|
|
|
+ <van-image
|
|
|
+ width="48"
|
|
|
+ height="48"
|
|
|
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
|
+ />
|
|
|
+ <div class="pannel_info">
|
|
|
+ <van-row align="center" style="margin-bottom: 10px">
|
|
|
+ <van-col class="info_name">{{ userInfo.userName }}</van-col>
|
|
|
+ <van-image
|
|
|
+ width="14"
|
|
|
+ height="14"
|
|
|
+ :src="require('@/assets/tel.svg')"
|
|
|
+ style="margin: 0 6px 0 16px"
|
|
|
+ />
|
|
|
+ <van-col class="info_tel">{{ userInfo.mobile }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row>
|
|
|
+ <van-col class="info_type">{{
|
|
|
+ `${
|
|
|
+ dict_filter(userInfo.circuitType, "reviewTypeList")["dictLabel"]
|
|
|
+ }`
|
|
|
+ }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info_clock">
|
|
|
+ <van-row justify="center" class="time">
|
|
|
+ <van-col style="margin-left: 12px">当前时间:{{ timeStr }}</van-col>
|
|
|
+ <van-col
|
|
|
+ ><van-icon name="location" color="#6DD400"></van-icon>当前打卡位置:{{
|
|
|
+ circuitPosition || "--"
|
|
|
+ }}</van-col
|
|
|
+ >
|
|
|
+ </van-row>
|
|
|
+ <van-row class="circle" @click="scanCode">
|
|
|
+ <van-col>扫码打卡</van-col>
|
|
|
+ <van-icon name="enlarge"></van-icon>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <van-row class="sub_title">
|
|
|
+ <van-col>今日打卡记录</van-col>
|
|
|
+ </van-row>
|
|
|
+ <div class="info_list">
|
|
|
+ <template v-if="!loading">
|
|
|
+ <template v-if="dataList.length > 0">
|
|
|
+ <div class="list_item" v-for="item in dataList" :key="item.id">
|
|
|
+ <van-row class="row_title">
|
|
|
+ <van-col>{{ item.circuitPosition }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row class="row_info">
|
|
|
+ <van-col>巡检时间:{{ item.circuitTime }}</van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <van-empty image-size="60" description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-if="loading">
|
|
|
+ <van-loading size="24px">加载中...</van-loading>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Api from "@/utils/api";
|
|
|
+import { isEmpty, getDictDataList } from "@/utils/index";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ IntervalTime: null,
|
|
|
+ timeStr: "",
|
|
|
+ circuitPosition: "",
|
|
|
+ dataForm: {
|
|
|
+ page: 1,
|
|
|
+ limit: 99999,
|
|
|
+ circuitType: "",
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ buildingId: "",
|
|
|
+ storeyId: "",
|
|
|
+ circuitPersonId: "",
|
|
|
+ },
|
|
|
+ reviewTypeList: [],
|
|
|
+ dataList: [],
|
|
|
+ loading: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ userInfo: "getUserInfo" }),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ var date = new Date();
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth() + 1;
|
|
|
+ var day = date.getDate();
|
|
|
+ this.circuitPosition = this.$route.query.circuitPosition;
|
|
|
+ this.dataForm.startDate = `${year}-${month}-${day}` + " 00:00:00";
|
|
|
+ this.dataForm.endDate = `${year}-${month}-${day}` + " 23:59:59";
|
|
|
+ this.dataForm.circuitPersonId = this.userInfo.id;
|
|
|
+ this.dataForm.circuitType = this.userInfo.circuitType;
|
|
|
+ this.getReviewTypeList();
|
|
|
+ this.getDataList();
|
|
|
+ this.cutDown();
|
|
|
+ this.IntervalTime = setInterval(this.cutDown, 1000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getReviewTypeList() {
|
|
|
+ this.reviewTypeList = getDictDataList("ReviewType");
|
|
|
+ },
|
|
|
+ dict_filter(val, list) {
|
|
|
+ if (isEmpty(val)) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ return this[list].find((item) => item.dictValue == val);
|
|
|
+ },
|
|
|
+ // 获取列表数据方法
|
|
|
+ getDataList() {
|
|
|
+ Api.reviewList(this.dataForm).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data) {
|
|
|
+ this.dataList = res.data.list;
|
|
|
+ } else {
|
|
|
+ // 判断获取数据条数若等于0
|
|
|
+ this.dataList = []; // 清空数组
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ scanCode() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/scanCode",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ backPath() {
|
|
|
+ clearInterval(this.IntervalTime);
|
|
|
+ this.$router.push({ path: "/review/list" });
|
|
|
+ },
|
|
|
+ cutDown() {
|
|
|
+ var date = new Date();
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth() + 1;
|
|
|
+ var day = date.getDate();
|
|
|
+ var hours = date.getHours();
|
|
|
+ var minutes = date.getMinutes();
|
|
|
+ var seconds =
|
|
|
+ date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
|
+ this.timeStr =
|
|
|
+ year +
|
|
|
+ "-" +
|
|
|
+ month +
|
|
|
+ "-" +
|
|
|
+ day +
|
|
|
+ " " +
|
|
|
+ hours +
|
|
|
+ ":" +
|
|
|
+ minutes +
|
|
|
+ ":" +
|
|
|
+ seconds;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page_info {
|
|
|
+ padding: 16px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .info_pannel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
|
|
|
+ border-radius: 4px;
|
|
|
+ .pannel_info {
|
|
|
+ margin-left: 12px;
|
|
|
+ .info_name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .info_tel {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .info_type {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info_clock {
|
|
|
+ height: 380px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 16px;
|
|
|
+ .time {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: baseline;
|
|
|
+ .van-col {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .van-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #5c8fff;
|
|
|
+ color: #ffffff;
|
|
|
+ .van-col {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .van-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sub_title {
|
|
|
+ margin: 16px 0;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .info_list {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .list_item {
|
|
|
+ padding: 12px 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .row_title {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #313836;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .row_info {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|