yjhtgl-web/src/views/emergencyCommandMap/RightSection/JointDuty.vue

<template>
  <div class="duty-card">
    <div class="common-title gradient-text">联合值守</div>
    <div class="more-btn" @click="handleShowQrCode">
      <div class="code-icon"></div>
      <div class="text">签到码</div>
    </div>
    <div class="card-content">
      <div class="custom-table">
        <div class="table-header">
          <div class="td">值守单位</div>
          <div class="td">值守人员</div>
          <div class="td2">联系方式</div>
        </div>
        <div class="table-content">
          <div v-for="(item, index) in listData" :key="index" class="tr">
            <div class="td">{{ item.dept_name }}</div>
            <div class="td">
              <div>{{ item.nick_name }}（{{ item.duties }}）</div>
            </div>
            <div class="td2 text">
              <div class="phone-btn"></div>
              {{ item.phone }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Dialog v-model="showQrCode" title="签到码" type="sm" hide-footer>
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%">
      <div id="qrCodeBox" style="display: flex; flex-direction: column; justify-content: center; align-items: center">
        <div class="print-title" style="margin: 30px 0; color: #ffffff">请联合值守人员通过粤政易扫描二维码进行签到、签退</div>
        <img :src="qrCodeUrl" alt="" style="width: 800px; height: 800px" />
      </div>
      <div class="flex" style="margin-top: 20px">
        <div class="common-btn-primary" v-print="printObj">打印</div>
        <div class="common-btn-primary" @click="handleDownLoad">下载</div>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { getCheckinList } from '@/api/emergencyCommandMap/JointDuty';
import print from 'vue3-print-nb';
directives: {
  print;
}
const route = useRoute();
const listData = ref([]);
let eventId = ref('');
let qrCodeUrl = ref('');
let printObj = reactive({
  id: 'qrCodeBox', // 这里是要打印元素的ID
  popTitle: '',
  extraCss: '/print.css'
});
const showQrCode = ref(false);
const handleShowQrCode = () => {
  showQrCode.value = true;
};
const base64ToBlob = (code) => {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};
// 下载
const handleDownLoad = () => {
  let image = new Image();
  image.crossOrigin = '';
  image.src = qrCodeUrl.value;
  image.onload = () => {
    let canvas = document.createElement('canvas');
    canvas.width = 370;
    canvas.height = 370;
    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    let dataUrl = canvas.toDataURL();
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = '签到码.png';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
};
onMounted(() => {
  eventId.value = route.query.event_id as string;
  listData.value = [
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    },
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    },
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    },
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    },
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    },
    {
      dept_name: '市应急局',
      nick_name: '张平安',
      phone: '13856642378',
      duties: '职务'
    }
  ];
  // getCheckinList(eventId.value).then((res) => {
  //   listData.value = res.data;
  // });
  qrCodeUrl.value = import.meta.env.VITE_APP_BASE_API2 + 'api/event_management/checkin/qrcode?event_id=' + eventId.value;
});
</script>

<style lang="scss" scoped>
.duty-card {
  width: 529px;
  height: 223px;
  background: url('@/assets/images/emergencyCommandMap/duty/dutyBg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  color: #fff;
  animation-name: slideRight;
  animation-duration: 2s;
  .card-content {
    display: flex;
    flex-wrap: wrap;
    padding-top: 47px;
    height: 223px;
  }
}
.search-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.more-btn {
  position: absolute;
  top: 14px;
  right: 52px;
  color: #eaf3fc;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  .text {
    margin-top: -3px;
  }
  .code-icon {
    width: 35px;
    height: 35px;
    background: url('@/assets/images/emergencyCommandMap/duty/code.png') no-repeat;
    background-size: 100% 100%;
  }
}
.custom-table {
  width: 100%;
  margin-top: 10px;
  .table-header {
    display: flex;
    width: 520px;
    height: 21px;
    background: url('@/assets/images/emergencyCommandMap/duty/header.png') no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 0 13px;
    .td {
      flex: 1;
    }
    .td2 {
      width: 155px;
      text-align: center;
    }
  }
  .table-content {
    height: 130px;
    overflow-y: auto;
    .tr {
      display: flex;
      align-items: center;
      width: 520px;
      height: 21px;
      background-color: rgba(44, 129, 255, 0.1);
      //background: url('@/assets/images/emergencyCommandMap/duty/tr.png') no-repeat;
      //background-size: 100% 100%;
      font-size: 14px;
      margin-top: 12px;
      padding: 0 15px;
    }
    .td {
      flex: 1;
    }
    .td2 {
      width: 155px;
      text-align: center;
      position: relative;
      .phone-btn {
        position: absolute;
        top: -12px;
        left: 0;
        cursor: pointer;
        width: 49px;
        height: 49px;
        background: url('@/assets/images/emergencyCommandMap/duty/phone.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .text {
      color: #08d9ff;
      font-family: 'BEBAS-1';
    }
  }
}
</style>