事件列表，视频轮播

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/index.vue

@@ -11,6 +11,12 @@
       </div>
     </VueSlickCarousel>
 
+    <VueSlickCarousel v-if="videos.length > 0" v-bind="settings" ref="CarouselRef" class="vueSlickCarousel">
+      <div v-for="(item, index) in  videos " :key="index" class="item">
+        <Video style="height: 100%;" :showHeader="false" :url="item || ''" videoType="mp4" />
+      </div>
+    </VueSlickCarousel>
+
     <img src="./images/arrow.svg" @click="nextSlide" class="arrow" />
   </div>
 </template>
@@ -21,10 +27,11 @@ import VueSlickCarousel from 'vue-slick-carousel'
 import 'vue-slick-carousel/dist/vue-slick-carousel.css'
 // optional style for arrows & dots
 import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
+import Video from "@screen/components/Video";
 
 export default {
   name: "Carousel",
-  components: { VueSlickCarousel },
+  components: { VueSlickCarousel,Video },
   props: {
     pictures: {
       type: Array,
@@ -39,6 +46,10 @@ export default {
         // "require('@screen/images/shareWith/weChat-active.svg')"
       ]
     },
+    videos: {
+      type: Array,
+      default: () => []
+    },
   },
   data() {
     return {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -1,89 +1,44 @@
 <template>
   <Dialog v-model="modelVisible" title="事件详情" width="890px" top="11%">
-    <div
-      class="EventDetail"
-      :style="{
+    <div class="EventDetail" :style="{
     height: activeName == '-1' || activeName == '0' ? '380px' : '598px',
-      }"
-    >
+  }">
       <Form :formList="formList" :dFormData="formData" label-width="100px" />
 
       <div class="video-pic">
-        <Video
-          style="height: 100%; width: 380px"
-          :showHeader="false"
-          :url="
-            formData.videoList && formData.videoList.length > 0
-              ? formData.videoList[0]
-              : ''
-          "
-          :camId="formData.upCamId"
-          :pileNum="formData.stakeMark"
-          rangeIndex="upCamera"
-          :videoType="formData.videoType"
-        />
-        <Video
-          v-if="activeName != '-1'"
-          style="height: 100%; width: 380px"
-          :showHeader="false"
-          :url="
-            formData.videoList && formData.videoList.length > 0
-              ? formData.videoList[1]
-              : ''
-          "
-          :camId="formData.downCamId"
-          :pileNum="formData.stakeMark"
-          rangeIndex="downCamera"
-          :videoType="formData.videoType"
-        />
 
-        <Carousel v-else style="flex: 1" :pictures="formData.pictures" />
+        <Video v-if="activeName != '-1'" style="height: 100%; width: 380px" :showHeader="false" :url="formData.videoList && formData.videoList.length > 0
+    ? formData.videoList[0] : ''" :camId="formData.upCamId" :pileNum="formData.stakeMark" rangeIndex="upCamera"
+          :videoType="formData.videoType" />
+
+        <Video v-if="activeName != '-1'" style="height: 100%; width: 380px" :showHeader="false" :url="formData.videoList && formData.videoList.length > 0
+    ? formData.videoList[1] : ''" :camId="formData.downCamId" :pileNum="formData.stakeMark" rangeIndex="downCamera"
+          :videoType="formData.videoType" />
+
+        <Carousel v-if="activeName == '-1'" style="flex: 1" :videos="formData.videoList" :pictures="[]"/>
+        <Carousel v-if="activeName == '-1'" style="flex: 1" :pictures="formData.pictures" :videos="[]"/>
+
       </div>
       <!-- <div>{{ formData.videoList[0] }}</div> -->
-      <TimeLine1
-        v-if="activeName == '1' || activeName == '2'"
-        :data="timeLine1List"
-      />
-      <TimeLine2
-        v-if="activeName == '1' || activeName == '2'"
-        :data="timeLine2List"
-        style="flex: 1"
-      />
+      <TimeLine1 v-if="activeName == '1' || activeName == '2'" :data="timeLine1List" />
+      <TimeLine2 v-if="activeName == '1' || activeName == '2'" :data="timeLine2List" style="flex: 1" />
     </div>
 
     <!-- 确认弹窗 -->
-    <EventPlanDialog
-      :visible="isShowDialog"
-      :info="info"
-      :eventFormData="formData"
-      :activeName="activeName"
-      @reInitData="
-        () => {
+    <EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName"
+      @reInitData="() => {
     this.$emit('update:value', false);
     this.$emit('queryData', true);
   }
-      "
-      @close="onCloseAddNew"
-    />
+    " @close="onCloseAddNew" />
 
     <template #footer>
-      <Button
-        v-if="activeName == '-1' || activeName == '0'"
-        style="padding: 0 24px"
-        @click.native="onDelete"
-        >误报</Button
-      >
-      <Button
-        :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"
-        @click.native="modelVisible = false"
-        >取消</Button
-      >
-      <Button
-        v-if="activeName == '-1' || activeName == '0'"
-        style="padding: 0 24px"
-        @click.native="onSubmit"
-        >确认</Button
-      >
+      <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px"
+        @click.native="onDelete">误报</Button>
+      <Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }"
+        @click.native="modelVisible = false">取消</Button>
+      <Button v-if="activeName == '-1' || activeName == '0'" style="padding: 0 24px"
+        @click.native="onSubmit">确认</Button>
     </template>
   </Dialog>
 </template>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -294,8 +294,9 @@ export default {
             data.visibility = otherConfig.visibility;
 
             data.pictures = otherConfig.pictures || [];
-            data.videoList = otherConfig.videoList || []
-            // data.videoList = otherConfig.videoList || ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
+            data.videoList = otherConfig.videoList || [];
+            // data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4',
+            // 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
           }
           data.videoType = "mp4";
           this.detailDialogFormData = data;