LinYeFangHuo/src/views/demo/meshing/inspection/PatrolTrackModel.vue

<template>
  <div class="m-4 flex">
    <div class="w-1/2 xl:w-1/2">
      <div class="search-container flex justify-end items-center form-data m-4">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['开始时间', '结束时间']"
          @change="timeChange"
          v-model:value="value1"
        />
      </div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="巡查轨迹">
          <div
            style="width: 100%; text-align: center; padding: 100px 0px"
            v-if="list.length <= 0 && activeKey == 1"
          >
            <img
              src="@/assets/images/canvas/noData.png"
              style="width: 140px; margin-bottom: 20px"
            />
            <p style="color: #cfcfcf">暂无巡查轨迹</p>
          </div>
          <div class="users-container" v-else>
            <div class="history-line" v-for="(it, idx) in list" :key="idx">
              <div class="user-item">
                <div class="user-photo">
                  <img src="@/assets/images/meshing/rangers-number.png" alt="" />
                </div>
                <div class="user-name">{{ it.name }}</div>
                <div class="user-phone">{{ it.phone }}</div>
                <a-button
                  type="primary"
                  size="mini"
                  round
                  @click="getTrajectoryData(it)"
                  style="float: right"
                  >轨迹</a-button
                >
              </div>
              {{ it.startAddress }}
              <span style="font-size: 12px">({{ it.startTime }})</span>
              <SwapRightOutlined style="font-size: 20px" />
              {{ it.endAddress }}
              <span style="font-size: 12px">({{ it.endTime }})</span>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="打卡记录" force-render>
          <div
            style="width: 100%; text-align: center; padding: 100px 0px"
            v-if="clockInList.length <= 0 && activeKey == 2"
          >
            <img
              src="@/assets/images/canvas/noData.png"
              style="width: 140px; margin-bottom: 20px"
            />
            <p style="color: #cfcfcf">暂无打卡记录</p>
          </div>
          <div class="users-container" v-else>
            <div class="clockIn-box" v-for="(item, idx) in clockInList" :key="idx">
              <p>
                <span><UserOutlined /> 打卡人员：</span>{{ item.Name }}
                <span
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<HistoryOutlined />打卡时间：</span
                >
                {{ item.clockontime }}
              </p>
              <p>
                <span><EnvironmentOutlined /> 打卡位置：</span>
                {{ parseFloat(item.lng).toFixed(6) }},{{ parseFloat(item.lat).toFixed(6) }}
              </p>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="w-1/2 xl:w-1/2" style="height: 90vh">
      <Map :name="'patrolTrackModel'" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { Map } from './index';
  import {
    SwapRightOutlined,
    UserOutlined,
    HistoryOutlined,
    EnvironmentOutlined,
  } from '@ant-design/icons-vue';
  import { getCheckInfoByUserId } from '@/api/firegrid/index';
  import { getPatrolInfoByUserId } from '@/api/firegrid/patrol';
  import moment from 'moment';

  defineOptions({ name: 'DeptModal' });
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const activeKey = ref('1');
  const list = ref([]);
  const clockInList = ref([]);
  const getTrajectoryData = (item) => {
    console.log(item);
  };
  //   查询
  interface FormState {
    begintime: string | null;
    endtime: string | null;
  }
  const formState: FormState = reactive({
    begintime: null,
    endtime: null,
  });
  const timeChange = (value: any, dateString: string) => {
    formState.begintime = dateString[0];
    formState.endtime = dateString[1];
    getCheckList();
    getPatrolList();
  };
  const getCheckList = () => {
    const params = {
      ...formState,
      id: props.data.id,
    };
    getCheckInfoByUserId(params).then((res) => {
      clockInList.value = res.items;
    });
  };
  const getPatrolList = () => {
    const params = {
      ...formState,
      id: props.data.id,
    };
    getPatrolInfoByUserId(params).then((res) => {
      list.value = res;
    });
  };
  const value1: any = ref([]);
  onMounted(() => {
    getCheckList();
    getPatrolList();
    let start = new Date();
    let end = new Date();
    const time = [
      end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() + ' 00:00:00',
      start.getFullYear() +
        '-' +
        (start.getMonth() + 1) +
        '-' +
        start.getDate() +
        ' ' +
        start.getHours() +
        ':' +
        start.getMinutes() +
        ':' +
        start.getSeconds(),
    ];
    formState.begintime = time[0];
    formState.endtime = time[1];
    value1.value = [moment(time[0], 'YYYY-MM-DD HH:mm'), moment(time[1], 'YYYY-MM-DD HH:mm')];
  });
</script>
<style lang="less" scoped>
  .users-container {
    width: 100%;
    padding-right: 15px;
    height: calc(100vh - 280px);
    overflow-y: auto;
  }
  .item-container-right div {
    float: left;
  }
  .user-item {
    width: 100%;
    padding: 0px 0px;
    height: 50px;
    line-height: 50px;
  }
  .history-line {
    width: 100%;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 0px;
    border-bottom: 1px solid @border-color-light;
    cursor: pointer;
    padding-bottom: 10px;
  }
  .user-item::after {
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
  }

  .user-photo {
    float: left;
    width: 36px;
    height: 36px;
    margin-top: 6px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    line-height: 36px;
    text-align: center;
  }
  .user-photo img {
    width: 32px;
    height: 32px;
    margin: 0px;
  }
  .user-name {
    width: 120px;
    text-align: center;
  }

  .user-phone {
    width: 100px;
    text-align: center;
  }

  .user-operation {
    float: right;
  }
  .clockIn-box {
    border-bottom: 1px solid @border-color-light;
    margin-top: 10px;
  }
</style>