完善 事件详情 弹窗

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "flv.js": "^1.6.2"
+    "flv.js": "^1.6.2",
+    "vue-slick-carousel": "^1.0.6"
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Carousel/images/arrow.svg

@@ -0,0 +1,36 @@
+<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814550">
+<g id="Group 1142814473">
+<g id="Polygon 87">
+<path d="M6.16667 1.3635L12 7.49987L6.16667 13.6362" stroke="white" stroke-linecap="round"/>
+<path d="M6.16667 1.3635L12 7.49987L6.16667 13.6362" stroke="url(#paint0_linear_308_1272)" stroke-linecap="round"/>
+</g>
+<path id="Polygon 88" d="M5 -3.57639e-07L12 7.5L5 15L5 -3.57639e-07Z" fill="url(#paint1_linear_308_1272)"/>
+</g>
+<g id="Group 1142814478">
+<g id="Polygon 87_2">
+<path d="M1.16667 1.3635L7 7.49987L1.16667 13.6362" stroke="white" stroke-linecap="round"/>
+<path d="M1.16667 1.3635L7 7.49987L1.16667 13.6362" stroke="url(#paint2_linear_308_1272)" stroke-linecap="round"/>
+</g>
+<path id="Polygon 88_2" d="M1.0378e-06 -3.57639e-07L7 7.5L4.76837e-07 15L1.0378e-06 -3.57639e-07Z" fill="url(#paint3_linear_308_1272)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_308_1272" x1="10.8868" y1="7.72029" x2="6.30026" y2="7.72029" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39D5BF"/>
+<stop offset="1" stop-color="#1FAED6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_308_1272" x1="12" y1="7.5" x2="5" y2="7.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AD6C0"/>
+<stop offset="1" stop-color="#20AFD7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_308_1272" x1="5.88677" y1="7.72029" x2="1.30026" y2="7.72029" gradientUnits="userSpaceOnUse">
+<stop stop-color="#39D5BF"/>
+<stop offset="1" stop-color="#1FAED6"/>
+</linearGradient>
+<linearGradient id="paint3_linear_308_1272" x1="7" y1="7.5" x2="7.57319e-07" y2="7.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AD6C0"/>
+<stop offset="1" stop-color="#20AFD7" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="Carousel">
+    <img src="./images/arrow.svg" @click="prevSlide" class="arrow" />
+
+    <VueSlickCarousel v-bind="settings" ref="CarouselRef" class="vueSlickCarousel">
+      <div v-for="(item, index) in carouselItems" :key="index" class="item">
+        <img :src="require(`@screen/images/${item.imageURL}`)" style="height: 100%">
+      </div>
+    </VueSlickCarousel>
+
+    <img src="./images/arrow.svg" @click="nextSlide" class="arrow" />
+  </div>
+</template>
+
+<script>
+
+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'
+
+export default {
+  name: "Carousel",
+  components: { VueSlickCarousel },
+  data() {
+    return {
+      carouselItems: [
+        {
+          "imageURL": "shareWith/message-active.svg"
+        },
+        {
+          "imageURL": "shareWith/message.svg"
+        },
+        {
+          "imageURL": "shareWith/phone-active.svg"
+        },
+        {
+          "imageURL": "shareWith/phone.svg"
+        },
+        {
+          "imageURL": "shareWith/website-active.svg"
+        },
+        {
+          "imageURL": "shareWith/website.svg"
+        },
+        {
+          "imageURL": "shareWith/weChat-active.svg"
+        },
+        {
+          "imageURL": "shareWith/weChat-active.svg"
+        }
+      ],
+      settings: {
+        infinite: true,
+        arrows: false,
+        speed: 600,
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 1800,
+      },
+    }
+  },
+  methods: {
+    prevSlide() {
+      this.$refs.CarouselRef.prev()
+    },
+    nextSlide() {
+      this.$refs.CarouselRef.next()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Carousel {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  gap: 9px;
+
+  .vueSlickCarousel {
+    flex: 1;
+    overflow: hidden;
+
+    ::v-deep {
+      .slick-list {
+        height: 100%;
+
+        div {
+          height: 100%;
+        }
+      }
+    }
+
+    .item {
+      img {
+        height: 100%;
+      }
+    }
+  }
+
+  .arrow {
+    cursor: pointer;
+    width: 15px;
+
+    &:first-child {
+      transform: rotate(-180deg)
+    }
+  }
+}
+</style>

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

@@ -3,6 +3,12 @@
     <div class="EventDetail">
       <Form :formList="formList" />
 
+      <div class="video-pic">
+        <Video />
+
+        <Carousel style="flex: 1" />
+      </div>
+
       <TimeLine1 :data="timeLine1List" />
       <TimeLine2 :data="timeLine2List" style="flex: 1;" />
     </div>
@@ -16,6 +22,8 @@ import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 import Form from '@screen/components/FormConfig';
 import { formList, timeLine1List } from "./data"
 import { timeLine2List } from "@screen/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js"
+import Video from "@screen/components/Video";
+import Carousel from "./Carousel/index.vue"
 
 export default {
   name: 'EventDetail',
@@ -23,7 +31,9 @@ export default {
     Dialog,
     Form,
     TimeLine1,
-    TimeLine2
+    TimeLine2,
+    Video,
+    Carousel
   },
   model: {
     prop: 'visible',
@@ -60,15 +70,10 @@ export default {
   height: 768px;
   flex-direction: column;
 
-  .left {
+  .video-pic {
-    flex: 1;
-  }
-
-  .right {
     display: flex;
-    flex-direction: column;
+    height: 150px;
-    gap: 9px;
+    gap: 15px
-    cursor: pointer;
   }
 }
 </style>