dt-admin-pc-v2/src/views/military/modules/dutyManage/duty/Duty.vue

<!-- 
  今日值班人员

  目录位置：执勤管理 -> 今日值班人员
  功能概述：查看当日值班人员信息
 -->
<template>
  <div class="dutyBox" id="dutyBox">
    <div class="title">
      当日值班人员
      <div class="fullscreenBox" @click="screen">
        <a-icon :type="isFullScren ? 'fullscreen-exit' : 'fullscreen'" />
      </div>
    </div>
    <div style="height: 380px; margin-top: 230px" v-show="!dataList.length">
      <a-empty />
    </div>
    <a-carousel arrows>
      <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px; zindex: 1">
        <a-icon type="left-circle" />
      </div>
      <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
        <a-icon type="right-circle" />
      </div>
      <div class="listBox" v-for="item in dataList">
        <div class="time">
          {{ item.beginTime }}~{{ item.endTime.split(' ')[1] }}
          <div class="theLine">【{{ item.lineName }}】</div>
        </div>
        <div class="picBox">
          <div class="picTitle">
            <strong>带班领导</strong>
          </div>
          <div class="picList">
            <div class="picItem" v-for="leader in getLeaderList(item.msDutyUserInfoList)">
              <!--          <img :src="getImgView(item.img)">-->
              <img :src="getImg(leader.avatar)" />
              <div class="name">{{ leader.dutyStaffName }}</div>
              <div class="name">联系方式:{{ leader.phone }}</div>
            </div>
          </div>
        </div>
        <div class="picBox">
          <div class="picTitle">
            <strong>执勤人员</strong>
          </div>
          <div class="picList">
            <div class="picItem" v-for="staff in getStaffList(item.msDutyUserInfoList)">
              <!--                    <img :src="getImgView(item.img)">-->
              <img :src="getImg(staff.avatar)" />
              <div class="name">{{ staff.dutyStaffName }}</div>
              <div class="name">联系方式:{{ staff.phone }}</div>
            </div>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  export default defineComponent({
    name: 'Duty',
    props: {},
    setup(props, ctx) {
      const dataList: any = ref([]);
      const url = ref('/military/msDutyTask/qryPersonOnDutyByDate');
      const isFullScren = ref(false);
      const getTime = computed(() => {
        var timeData = new Date();
        let year = timeData.getFullYear();
        let month = timeData.getMonth() + 1;
        let date = timeData.getDate();
        var time = year + '年' + month + '月' + date + '日';
        return time;
      });
      onMounted(() => {
        getPersonList();
        {
          //由于vue全屏时监听不到esc事件，所以页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发
          document.addEventListener('fullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('mozfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('webkitfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
          document.addEventListener('msfullscreenchange', () => {
            isFullScren.value = !isFullScren.value;
          });
        }
      });

      function screen() {
        let element: any = document.getElementById('dutyBox');
        if (this.isFullScren) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
      }
      function getPersonList() {
        // let Gurl = url.value
        let time = new Date();
        let year = time.getFullYear();
        let month: any = time.getMonth() + 1;
        let date: any = time.getDate();
        if (month < 10) {
          month = '0' + month;
        }
        if (date < 10) {
          date = '0' + date;
        }
        let today = year + '-' + month + '-' + date;
        defHttp
          .get(
            {
              url: url.value,
              params: { date: today },
            },
            { isTransformResponse: false }
          )
          // getAction(Gurl, {
          //     'date': today
          // })
          .then((res) => {
            if (res.success) {
              dataList.value = res.result;
            }
          });
      }
      function getStaffList(arr) {
        let list: any = [];
        for (const item of arr) {
          if (item.dutyStaffType == 2) {
            list.push(item);
          }
        }
        return list;
      }
      function getLeaderList(arr) {
        let list: any = [];
        for (const item of arr) {
          if (item.dutyStaffType == 1) {
            list.push(item);
          }
        }
        return list;
      }
      function getImg(a) {
        let adivce;
        adivce = window._CONFIG['staticDomainURL'] + '/' + a;
        return adivce;
      }

      return {
        dataList,
        url,
        isFullScren,
        getTime,
        screen,
        getPersonList,
        getStaffList,
        getLeaderList,
        getImg,
      };
    },
  });
</script>

<style scoped>
  .dutyBox {
    background: #fff;
  }

  .title {
    position: relative;
    height: 105px;
    line-height: 105px;
    font-size: 46px;
    color: #fff;
    background: #22f;
    text-align: center;
  }

  .fullscreenBox {
    height: 30px;
    width: 30px;
    line-height: 27px;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    cursor: pointer;
  }

  .fullscreenBox:hover {
    border: 1px rgb(255, 255, 255) solid;
  }

  .time {
    position: relative;
    font-size: 35px;
    text-align: center;
    color: #00db00;
  }

  .theLine {
    position: absolute;
    left: 15px;
    top: 0;
  }

  .picTitle {
    text-align: center;
  }

  .picTitle strong {
    font-size: 45px;
    color: #000;
  }

  .picList {
    text-align: center;
  }

  .picItem {
    display: inline-block;
    padding: 0 35px 15px;
  }

  .picItem img {
    margin: 0 auto;
    width: 100px;
    height: 140px;
  }

  .name {
    padding: 3px 0;
    font-size: 25px;
  }

  .ant-carousel >>> .slick-slide {
    text-align: center;
    overflow: hidden;
  }

  .ant-carousel >>> .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #999;
    opacity: 0.3;
  }

  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }

  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>