libushang 6 mesiacov pred
rodič
commit
0d93f2d982

+ 28 - 0
src/types/components.d.ts

@@ -22,14 +22,23 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -39,28 +48,44 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -72,6 +97,9 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

+ 34 - 3
src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -48,6 +48,20 @@ directives: {
   print;
 }
 const route = useRoute();
+const tableHeader = reactive([
+  {
+    name: '值守单位',
+    key: 'dept_name'
+  },
+  {
+    name: '值守人员',
+    key: 'nick_name'
+  },
+  {
+    name: '联系方式',
+    key: 'phone'
+  }
+]);
 const listData = ref([]);
 let eventId = ref('');
 let qrCodeUrl = ref('');
@@ -91,8 +105,23 @@ const handleDownLoad = () => {
     document.body.removeChild(a);
   };
 };
+
+
+// 设置定时器
+const fetchInterval = process.env.NODE_ENV === 'development' ? 60000 : 1500; // 每60秒刷新一次(刷新太频繁影响调试)
+
+const nextFetchData = ()=> {
+  setTimeout(()=>{
+    getCheckinList(eventId.value).then((res) => {
+      listData.value = res.data;
+      nextFetchData();
+    });
+  }, fetchInterval)
+};
+
 onMounted(() => {
   eventId.value = route.query.event_id as string;
+  /*
   listData.value = [
     {
       dept_name: '市应急局',
@@ -131,10 +160,12 @@ onMounted(() => {
       duties: '职务'
     }
   ];
-  // getCheckinList(eventId.value).then((res) => {
-  //   listData.value = res.data;
-  // });
+  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;
+  nextFetchData();
 });
 </script>
 

+ 73 - 50
src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -1,14 +1,14 @@
 <template>
-  <Dialog custom-show type="sm" title="任务下达" height="500px" @confirm="confirmRegister" @close="closeDialog">
+  <Dialog custom-show type="sm" title="任务下达" height="630px" @confirm="confirmRegister" @close="closeDialog">
     <div class="dialog-content">
       <div class="dialog-body">
-        <el-form ref="taskFormRef" :model="newTask">
-          <el-form-item label="任务内容" label-width="60px">
-            <el-input v-model="newTask.task_description" class="custom-input2" clearable placeholder="请输入相关任务描述" />
+        <el-form ref="taskFormRef" :model="form" :rules="rules">
+          <el-form-item label="任务内容:" label-width="80px" prop="task_description">
+            <el-input v-model="form.task_description" class="custom-input2" clearable placeholder="请输入相关任务描述" />
           </el-form-item>
-          <el-form-item label="任务类型" label-width="60px">
+          <el-form-item label="任务类型:" label-width="80px" prop="task_type">
             <el-select
-              v-model="newTask.task_type"
+              v-model="form.task_type"
               placeholder="选择任务类型"
               class="custom-select"
               size="large"
@@ -17,48 +17,47 @@
               clearable
               filterable
             >
-              <el-option v-for="type in taskTypes" :key="type.id" :label="type.name" />
+              <el-option v-for="type in opt_task_type" :key="type.value" :label="type.text" />
             </el-select>
           </el-form-item>
-          <el-form-item label="执行单位" label-width="60px">
+          <el-form-item label="执行单位:" label-width="80px" prop="unit_name">
             <el-select
-              v-model="newTask.unit_name"
-              placeholder="全部"
+              v-model="form.unit_name"
+              placeholder="选择执行单位"
               class="custom-select"
               size="large"
               popper-class="custom-select-popper"
               :teleported="false"
               clearable
-              filterable
-              @input="fetchFilteredUnits"
-            >
+              filterable>
               <el-option v-for="unit in filteredUnits" :key="unit.id" :label="unit.unit_name" :value="unit.unit_name" />
             </el-select>
           </el-form-item>
-          <el-form-item label="执行人" label-width="60px">
-            <el-input v-model="newTask.registrar" class="custom-input2" type="text" readonly />
+          <el-form-item label="执行人:" label-width="80px" prop="executor">
+            <el-input v-model="form.executor" class="custom-input2" type="text" placeholder="请输入执行人"  />
           </el-form-item>
-          <el-form-item label="登记人" label-width="60px">
-            <el-input v-model="newTask.registrar" class="custom-input2" type="text" readonly />
+          <el-form-item label="登记人:" label-width="80px" prop="registrar">
+            <el-input v-model="form.registrar" class="custom-input2" type="text" readonly />
           </el-form-item>
-          <el-form-item label="联系电话" label-width="60px">
-            <el-input v-model="newTask.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
+          <el-form-item label="联系电话:" label-width="80px" prop="contact_phone">
+            <el-input v-model="form.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
           </el-form-item>
-          <el-form-item label="完成时限" label-width="60px">
+          <el-form-item label="完成时限:" label-width="80px" prop="expire_time">
             <el-date-picker
-              v-model="newTask.complete_time"
+              v-model="form.expire_time"
               type="date"
+              value-format="YYYY-MM-DD"
               class="common-date-picker"
               popper-class="common-date-popper"
-              placeholder="选择完成时"
+              placeholder="选择完成时"
               style="width: 100%"
             />
           </el-form-item>
-          <el-form-item label="上传图片" label-width="60px">
-            <FileUpload v-model="newTask.imgList" :file-type="['jpg', 'jpeg', 'png']" :limit="9" :file-size="5" class="upload-box" />
+          <el-form-item label="上传图片:" label-width="80px" prop="imgList">
+            <FileUpload v-model="form.imgList" :file-type="['jpg', 'jpeg', 'png']" :limit="9" :file-size="5" class="upload-box" />
           </el-form-item>
-          <el-form-item label="上传文件" label-width="60px">
-            <FileUpload v-model="newTask.fileList" :file-type="['mp4', 'avi', 'wmv']" :limit="6" :file-size="1024" class="upload-box" />
+          <el-form-item label="上传文件:" label-width="80px" prop="fileList">
+            <FileUpload v-model="form.fileList" :file-type="['mp4', 'avi', 'wmv']" :limit="6" :file-size="1024" class="upload-box" />
           </el-form-item>
         </el-form>
       </div>
@@ -68,21 +67,44 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
-import { addTask, getUnits, getUser } from '@/api/emergencyCommandMap/JointDuty.ts';
+import { addTask, getUnits, getUser } from '@/api/emergencyCommandMap/JointDuty';
+const proxy = getCurrentInstance()?.proxy;
 
-const taskTypes = ref([{ name: '事件处置' }, { name: '防范措施' }, { name: '险情处理' }, { name: '督办任务' }]);
-const newTask = reactive({
+const opt_task_type = [
+  { text: "事件处置", value: "0" },
+  { text: "防范措施", value: "1" },
+  { text: "险情处理", value: "2" },
+  { text: "督办任务", value: "3" }
+];
+// 表单初始数据
+const initFormData = {
   task_description: '',
   task_type: '',
   unit_name: '',
   registrar: '',
+  executor: '',
   contact_phone: '',
-  complete_time: '',
+  expire_time: '',
+  event_code: '',
   imgList: [],
   fileList: []
-});
-const units = ref([]);
+};
 
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    task_description: [{ required: true, message: '任务描述不能为空', trigger: 'blur' }],
+    task_type: [{ required: true, message: '任务类型不能为空', trigger: 'blur' }],
+    unit_name: [{ required: true, message: '执行单位不能为空', trigger: 'blur' }],
+    registrar: [{ required: true, message: '登记人不能为空', trigger: 'blur' }],
+    executor: [{ required: true, message: '执行人不能为空', trigger: 'blur' }],
+    contact_phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
+    expire_time: [{ required: true, message: '完成时限不能为空', trigger: 'blur' }],
+  }
+});
+const taskFormRef = ref();
+const filteredUnits = ref([]);
+const { form, rules } = toRefs(data);
 const props = defineProps<{
   eventId?: string;
 }>();
@@ -90,11 +112,11 @@ const props = defineProps<{
 // 获取当前登录用户信息
 const fetchUser = async () => {
   try {
-    const response = await getUser();
+    const response = await getUser({});
     if (response.code === 200) {
-      // 假设返回的用户信息中包含 username 字段
-      newTask.registrar = response.data.user.userName;
-      newTask.contact_phone = response.data.user.contactPhone;
+      form.value.registrar = response.data.user.nickName;
+      form.value.executor = response.data.user.nickName;
+      form.value.contact_phone = response.data.user.phonenumber;
     } else {
       console.error('获取用户信息失败:', response.msg);
     }
@@ -105,9 +127,9 @@ const fetchUser = async () => {
 
 const fetchUnits = async () => {
   try {
-    const response = await getUnits();
+    const response = await getUnits({});
     if (response.code === 200) {
-      units.value = response.data;
+      filteredUnits.value = response.data;
     } else {
       console.error('获取单位数据失败:', response.msg);
     }
@@ -122,19 +144,20 @@ const closeDialog = () => {
   emit('update:show', false);
 };
 
-const confirmRegister = async () => {
-  try {
-    newTask.event_code = props.eventId;
-    const response = await addTask(newTask);
-    if (response.code === 200) {
-      console.log('任务登记成功');
-      closeDialog();
-    } else {
-      console.error('任务登记失败:', response.msg);
+const confirmRegister = () => {
+  taskFormRef.value?.validate((valid) => {
+    if (valid) {
+      form.value.event_code = props.eventId;
+        addTask(form.value).then((response)=>{
+          if (response.code === 200) {
+            proxy?.$modal.msgSuccess('任务登记成功');
+            closeDialog();
+          } else {
+            console.error('任务登记失败:', response.msg);
+          }
+      });
     }
-  } catch (error) {
-    console.error('请求任务登记失败:', error);
-  }
+  });
 };
 
 onMounted(() => {

+ 59 - 50
src/views/emergencyCommandMap/RightSection/RenWuGengXin.vue

@@ -2,55 +2,67 @@
   <Dialog v-model="visible" type="sm" title="任务反馈" class="box1" height="650px" hide-footer>
     <div class="dialog-content">
       <div class="dialog-body">
-        <el-form ref="taskForm" :model="newTask">
+        <el-form ref="taskFormRef" :model="newTask" :rules="rules">
           <el-row :gutter="20">
             <el-col :span="24">
-              <el-form-item label="任务描述:">
+              <el-form-item label="任务描述:" label-width="90px" >
                 <div class="display-field">{{ newTask.task_description }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="任务类型:">
+              <el-form-item label="任务类型:" label-width="90px" >
                 <div class="display-field">{{ get_task_type_text(newTask.task_type) }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="执行人:">
+              <el-form-item label="登记人:" label-width="90px" >
                 <div class="display-field">{{ newTask.registrar }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="执行单位:">
+              <el-form-item label="执行人:" label-width="90px" >
+                <div class="display-field">{{ newTask.executor }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="执行单位:" label-width="90px" >
                 <div class="display-field">{{ newTask.unit_name }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="预估完成时间:">
-                <div class="display-field">{{ newTask.complete_time }}</div>
+              <el-form-item label="联系电话:" label-width="90px" >
+                <div class="display-field">{{ newTask.contact_phone }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="完成时限:" label-width="90px" >
+                <div class="display-field">{{ newTask.expire_time }}</div>
               </el-form-item>
             </el-col>
+            <!--
             <el-col :span="24">
-              <el-form-item label="图片:">
+              <el-form-item label="图片">
                 <div class="display-field">{{ newTask.complete_time }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="文件:">
+              <el-form-item label="文件">
                 <div class="display-field">{{ newTask.complete_time }}</div>
               </el-form-item>
             </el-col>
+            -->
             <el-col :span="24">
-              <el-form-item label="反馈人:">
+              <el-form-item label="反馈人:" label-width="90px" >
                 <div class="display-field">{{ newTask.registrar }}</div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="反馈内容:">
+              <el-form-item label="反馈内容:" label-width="90px"  prop="feedback_content">
                 <el-input v-model="newTask.feedback_content" class="custom-input2" clearable placeholder="请输入反馈内容"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="完成进度:">
+              <el-form-item label="完成进度:" label-width="90px"  prop="processing_status">
                 <el-select
                   v-model="newTask.processing_status"
                   class="custom-select"
@@ -63,26 +75,8 @@
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="上传图片:">
-                <!--                <el-upload-->
-                <!--                  v-model="newTask.attachments"-->
-                <!--                  action="/uploadAttachments"-->
-                <!--                  list-type="picture-card"-->
-                <!--                  :teleported="false"-->
-                <!--                  auto-upload="true"-->
-                <!--                  limit="9"-->
-                <!--                  :teleported="false"-->
-                <!--                  popper-class="custom-uploadper"-->
-                <!--                  class="custom-upload"-->
-                <!--                  :teleported="false"-->
-                <!--                  clearable-->
-                <!--                  filterable-->
-                <!--                >-->
-                <!--                  <el-upload-list-item v-for="file in newTask.attachments" :key="file.name">-->
-                <!--                    <el-icon name="el-icon-upload" class="upload-icon"></el-icon>-->
-                <!--                    <el-button type="danger" size="mini" @click="removeAttachment(file)">移除</el-button>-->
-                <!--                  </el-upload-list-item>-->
-                <!--                </el-upload>-->
+              <el-form-item label="上传图片:" label-width="90px" prop="attachList">
+                <FileUpload v-model="newTask.attachList" :file-type="['jpg', 'jpeg', 'png']" :limit="9" :file-size="5" class="upload-box" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -90,8 +84,9 @@
       </div>
       <div class="footer">
         <div class="flex">
-          <div class="common-btn-primary" :disabled="!isFormValid" @click="confirmRegister">确定</div>
           <div class="common-btn" @click="closeDialog">取消</div>
+          <div class="common-btn-primary" :disabled="!isFormValid" @click="confirmRegister">确定</div>
+          
         </div>
       </div>
     </div>
@@ -100,14 +95,18 @@
 
 <script lang="ts" setup>
 import { ref, reactive, defineEmits, computed, watch } from 'vue';
-import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts';
+import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty';
+const proxy = getCurrentInstance()?.proxy;
 
 const props = defineProps({
   modelValue: { type: Boolean, required: true },
-  task: { type: Object, default: () => ({ task_id: '', task_description: '', unit_name: '', registrar: '', processing_status: '' }) },
+  task: { type: Object, default: () => (
+    { task_id: '', task_description: '', unit_name: '', registrar: '', processing_status: '', feedback_content: '', attachList: [] }) 
+  },
   eventId: { type: String, required: true }
 });
 
+const taskFormRef = ref();
 const emit = defineEmits(['update:modelValue', 'update-success']);
 const newTask = reactive({ ...props.task });
 const units = ref(['待处理', '已完成']);
@@ -120,6 +119,11 @@ const opt_task_type = [
   { text: "督办任务", value: "3" }
 ];
 
+const rules = ref({
+  processing_status: [{ required: true, message: '完成进度不能为空', trigger: 'blur' }],
+  feedback_content: [{ required: true, message: '反馈内容不能为空', trigger: 'blur' }]
+});
+
 const get_task_type_text = (val) => {
   return opt_task_type.find(item => item.value == val).text
 }
@@ -138,26 +142,31 @@ const resetForm = () => {
   newTask.unit_name = '';
   newTask.registrar = '';
   newTask.processing_status = '';
+  newTask.attachList = [];
 };
 
 // 任务进度更新
-const confirmRegister = async () => {
+const confirmRegister = () => {
   console.log('任务进度更新:', newTask);
-  try {
-    const response = await updateTaskRegistration({
-      task_id: newTask.task_id,
-      processing_status: newTask.processing_status,
-      event_code: props.eventId
-    });
-    if (response.code === 200) {
-      emit('update-success', newTask);
-      closeDialog();
-    } else {
-      console.error('任务进度更新失败:', response.msg);
+  taskFormRef.value?.validate((valid) => {
+    if (valid) {
+      updateTaskRegistration({
+        task_id: newTask.task_id,
+        processing_status: newTask.processing_status,
+        feedback_content: newTask.feedback_content,
+        attachList: newTask.attachList,
+        event_code: props.eventId
+      }).then((response)=>{
+        if (response.code === 200) {
+          proxy?.$modal.msgSuccess('任务进度更新成功');
+          emit('update-success', newTask);
+          closeDialog();
+        } else {
+          console.error('任务进度更新失败:', response.msg);
+        }
+      })
     }
-  } catch (error) {
-    console.error('请求任务进度更新失败:', error);
-  }
+  });
 };
 
 const closeDialog = () => {

+ 15 - 3
src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -66,9 +66,9 @@ const activeTab = ref('任务跟踪');
 
 const setActiveTab = (id) => {
   activeTab.value = id;
-  if(id === '预案通知' && notifications.value.length === 0) {
-    fetchData();
-  }
+  //if(id === '预案通知' && notifications.value.length === 0) {
+  //  fetchData();
+  //}
 };
 
 // 定义 notifications
@@ -105,8 +105,20 @@ const updateTaskList = (tasks) => {
     content: task.yzy_content,
     receiver: task.nick_name // 假设所有的任务都有接收者
   }));
+  nextFetchData();
 };
 
+// 设置定时器
+const fetchInterval = process.env.NODE_ENV === 'development' ? 60000 : 1500; // 每60秒刷新一次(刷新太频繁影响调试)
+
+const nextFetchData = ()=> {
+  setTimeout(()=>{
+    if(notifications.value.length === 0) {
+      fetchData();
+    }
+  }, fetchInterval)
+}
+
 watch(
   () => props.eventId,
   () => {