联合值守 对接二维码、列表接口

src/api/emergencyCommandMap/JointDuty.ts

@@ -26,3 +26,14 @@ export const getMapProduct = (data) => {
     }
   });
 };
+
+// 获取签名列表
+export function getCheckinList(eventId: string) {
+  return request({
+    url: '/api/event_management/checkin/list',
+    method: 'get',
+    params: {
+      event_id: eventId
+    }
+  });
+}

src/components/Dialog/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-if="modelValue" class="dialog-wrap">
-    <div class="overlay" @click="closeDialog"></div>
-    <div class="dialog" :style="{ height: height }">
+  <div v-if="modelValue" class="dialog-wrap" :style="{ width: width ? width : '780px', height: height ? height : '590px' }">
+    <!--    <div class="overlay" @click="closeDialog"></div>-->
+    <div class="dialog" :style="{ width: width ? width : '780px', height: height ? height : '590px' }">
       <div class="dialog-header">
         <div class="dialog-title">{{ title }}</div>
         <div class="icon-close" @click="closeDialog">
-          <el-icon size="100px"><Close /></el-icon>
+          <el-icon size="40px"><Close /></el-icon>
         </div>
       </div>
       <div class="dialog-content">
@@ -19,62 +19,56 @@
 interface Props {
   modelValue: boolean;
   title?: string;
+  width?: string;
   height?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false
 });
-const emit = defineEmits(['update:modelValue', 'closeDialog']);
+const emit = defineEmits(['update:modelValue', 'close']);
 
 // 关闭弹窗
 const closeDialog = () => {
   emit('update:modelValue', false);
-  emit('closeDialog');
+  emit('close');
 };
 </script>
 
 <style lang="scss" scoped>
 .dialog-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 2000;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
-  }
+  font-size: 16px;
   .dialog {
-    width: 5000px;
-    height: 2000px;
+    height: 590px;
     margin: 0 auto;
     background-color: #fff;
-    border-radius: 20px;
+    border-radius: 10px;
   }
 }
 .dialog {
-  padding: 0 50px;
+  padding: 0 20px;
   .dialog-header {
     width: 100%;
-    height: 150px;
+    height: 70px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    .dialog-title {
+      font-size: 36px;
+    }
     .icon-close {
       cursor: pointer;
     }
   }
+  .dialog-content {
+    padding: 10px 0;
+  }
 }
 </style>

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -9,7 +9,7 @@
           <div class="td">操作</div>
         </div>
         <div class="table-content">
-          <div v-for="(item, index) in lisdivata" :key="index" class="tr">
+          <div v-for="(item, index) in listData" :key="index" class="tr">
             <div class="td">{{ item.data1 }}</div>
             <div class="td">
               <div>{{ item.data2 }}</div>
@@ -25,16 +25,17 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showQrCode" title="签到码">
-    <div id="qrCode" ref="qrCodeDiv" style="width: 700px; height: 700px;" />
+  <Dialog v-model="showQrCode" title="签到码" width="500px" height="500px">
+    <div style="display: flex; justify-content: center; align-items:center;width: 100%;height: 100%">
+      <img :src="qrCodeUrl" alt="" style="width: 370px; height: 370px" />
+    </div>
   </Dialog>
 </template>
 
 <script lang="ts" setup>
-// import QRCode from 'qrcodejs2';
-
-import { getMapProduct } from '@/api/emergencyCommandMap/JointDuty';
+import { getCheckinList } from '@/api/emergencyCommandMap/JointDuty';
 
+const route = useRoute();
 const tableHeader = reactive([
   {
     name: '值守单位',
@@ -49,51 +50,21 @@ const tableHeader = reactive([
     key: 'data3'
   }
 ]);
-const lisdivata = ref([
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' },
-  { data1: '是迪斯科', data2: '张a', data3: '1878728783', data4: '主任' }
-]);
-
+const listData = ref([]);
+let eventId = ref('');
+let qrCodeUrl = ref('');
 const showQrCode = ref(false);
-let qrcode = ref();
 const handleShowQrCode = () => {
   showQrCode.value = true;
 };
 
-// 生成二维码
-// const creatQrcode = (item) => {
-//   if (qrcode) {
-//     qrcode.clear()
-//   }
-//
-//   qrcode.value = new QRCode('qrcode', {
-//     text:item.code, // 二维码的内容
-//     width: 128,
-//     height: 128,
-//     colorDark: 'transparent',
-//     colorLight:'#000',
-//     // 容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
-//     correctLevel: QRCode.CorrectLevel.M
-// })
-//   qrcode.value._el.title = '' // 鼠标移入二维码会展示原生title，如果不需要就可以将title置为空
-// };
-onMounted(() => [
-  getMapProduct({
-    id: '1',
-    name: '12',
-    areaCode: '12',
-    ext: '12'
-  })
-  // creatQrcode({
-  //   code: '1231231'
-  // })
-]);
+onMounted(() => {
+  eventId.value = route.query.event_id as string;
+  getCheckinList(eventId.value).then((res) => {
+    listData.value = res.data;
+  });
+  qrCodeUrl.value = import.meta.env.VITE_APP_BASE_API + '/api/event_management/checkin/qrcode?event_id=' + eventId.value;
+});
 </script>
 
 <style lang="scss" scoped>

src/views/emergencyCommandMap/RightSection/index.vue

@@ -76,7 +76,7 @@
 
 <script lang="ts" setup>
 import router from '@/router';
-import { getEmergencyVideoCata} from '@/api/routineCommandMap';
+import { getEmergencyVideoCata } from '@/api/routineCommandMap';
 import JointDuty from '@/views/emergencyCommandMap/RightSection/JointDuty.vue';
 
 const goToHome = () => {