lcw

2025-07-21 17:47:27 +08:00
parent 1b567a8e75
commit 30d5a663ef
111 changed files with 1663 additions and 393 deletions
--- a/src/views/StationLevel/layout/BeOnDuty.vue
+++ b/src/views/StationLevel/layout/BeOnDuty.vue
@ -87,12 +87,16 @@
 </template>

 <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import Empty from "@/components/MyComponents/Empty/index.vue";
 import { jczqueryById } from "@/api/mosty-jcz";
 import emitter from "@/utils/eventBus.js";
-const warningList = ref({ qxList: [], ryList: [], clList: [] ,sbList:[]});
-
+let warningList = ref({ qxList: [], ryList: [], clList: [] ,sbList:[]});
+onMounted(() => {
+  emitter.on("getjczqueryById", (res) => {
+    warningListValue(res)
+  })
+});
 const show = ref(1);
 const props = defineProps({
  jczId: {
@ -107,19 +111,23 @@ const showchenge = (val) => {

 const getjczqueryById = () => {
  jczqueryById({ jczid: props.jczId }).then((res) => {
-    if (res) {
-      emitter.emit("chengZ", res);
-      warningList.value.qxList = res.qxList
+    warningListValue(res)
+  });
+};
+const warningListValue = (res) => {
+  if (res) {
+    warningList.value={}
+      warningList.value.qxList =res.qxList&&res.qxList.length>0
        ? res.qxList.filter((item) => item.qxsl > 0)
        : [];
-      warningList.value.ryList = res.ryList ? res.ryList : [];
-      warningList.value.clList = res.clList ? res.clList : [];
-     warningList.value.sbList = [...res.tcList,...res.zdList]
+      warningList.value.ryList = res.ryList.length>0 ? res.ryList : [];
+      warningList.value.clList = res.clList.length>0 ? res.clList : [];
+      warningList.value.sbList = [...res.tcList, ...res.zdList]
+     emitter.emit("chengZ", res);
    } else {
      warningList.value = res;
    }
-  });
-};
+}
 getjczqueryById();
 </script>

@ -240,4 +248,5 @@ getjczqueryById();
  font-size: 12px;
  margin-left: 10px;
 }
+
 </style>
--- a/src/views/StationLevel/layout/VideoFoot.vue
+++ b/src/views/StationLevel/layout/VideoFoot.vue
@ -1,49 +1,64 @@
 <template>
  <div class="image-carousel">
-    <div class="control-button prev" @click="prevImage">
-        <img src="@/assets/images/icon_08.png" alt="">
-      </div>
-    <div class="carousel-container">
-      <div class="hh100" :style="{transform: `translateX(-${currentIndex * 100}%)`}">
-        <ul class="image-wrapper" style="margin-bottom:1%;">
-          <li v-for="(image, index) in images" :key="index" class="image-item">
-            <img :src="image" alt="carousel image">
-          </li>
-        </ul>
-        <ul class="image-wrapper">
-          <li v-for="(image, index) in images" :key="index" class="image-item">
-            <img :src="image" alt="carousel image">
-          </li>
-        </ul>
-      </div>
-      <div class="control-button next" @click="nextImage">
-        <img src="@/assets/images/icon_07.png" alt="">
-      </div>
-    </div>
+    <el-carousel style="height: 100%;" motion-blur indicator-position="none" @change="handleCarouselChange"
+      :autoplay="false">
+      <el-carousel-item v-for="(item, index) in listSxt" :key="index">
+        <div class="video-grid" v-if="activeIndex == index">
+          <div v-for="(items,indexs) in item" :key="indexs" class="video-cell">
+            <div class="iconFont" @click.stop="showchenge(items)">
+              <el-icon :size="20"><UploadFilled /></el-icon>
+            </div>
+            <WsIframe :sbbh="items.sbbh"  />
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
  </div>
 </template>

-<script>
-export default {
-  data() {
-    return {
-      currentIndex: 0,
-      images: [
-        require('@/assets/images/person.png'),
-        require('@/assets/images/person.png'),
-        require('@/assets/images/person.png'),
-        require('@/assets/images/person.png')
-      ]
-    }
-  },
-  methods: {
-    prevImage() {
-      this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.images.length - 1
-    },
-    nextImage() {
-      this.currentIndex = this.currentIndex < this.images.length - 1 ? this.currentIndex + 1 : 0
-    }
+<script setup>
+import { ref, watch, computed, onMounted, onUnmounted, reactive,nextTick } from 'vue'
+import WsIframe from '@/components/wsIframe/index.vue'
+import { useRoute } from "vue-router"
+import { sxtGetList } from '@/api/mosty-jcz.js'
+import emitter from "@/utils/eventBus.js";
+const activeIndex = ref(0)
+const cdList=ref([])
+const listSxt=ref([1])
+const handleCarouselChange = (index) => {
+  activeIndex.value = index
+}
+
+const getSxtGetList = (id) => {
+  const jczid = {
+    jczid: id
  }
+  sxtGetList(jczid).then(res => {
+   listSxt.value= Array.from({ length:Math.ceil(res.length / 12)==0?1:Math.ceil(res.length / 12) }, (_, row) => {
+   return res.slice(row * 12, row * 12 + 12)
+    }
+    );
+     cdList.value = listSxt.value[0].length < 4 ? listSxt.value[0]: listSxt.value[0].slice(0,4)
+    emitter.emit("getSxtGetList", cdList.value )
+  }).finally(()=>{
+  })
+}
+const route = useRoute()
+onMounted(() => {
+  const id = route.query.id
+  getSxtGetList(id)
+})
+const showchenge = (item) => {
+  const index = cdList.value.indexOf(item);
+if (index !== -1) {
+  // 如果数字已存在，先移除它
+  cdList.value.splice(index, 1);
+}
+// 添加到最前面
+  cdList.value.unshift(item);
+
+  emitter.emit("getSxtGetList", cdList.value )
 }
 </script>

@ -54,6 +69,7 @@ export default {
  position: relative;
  padding: 30px 20px;
  box-sizing: border-box;
+
  .carousel-container {
    width: 100%;
    height: 100%;
@ -71,6 +87,7 @@ export default {
    width: 24%;
    margin: 0 1%;
    height: 100%;
+
    img {
      width: 100%;
      height: 100%;
@ -86,12 +103,58 @@ export default {
    transition: all 0.3s;
    color: #fff;
    z-index: 1;
+
    &.prev {
      left: 0;
    }
+
    &.next {
      right: 0;
    }
  }
 }
-</style>
+
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  /* 6列 */
+  grid-template-rows: repeat(2, auto);
+  /* 2行 */
+  gap: 10px;
+  height: 100%;
+  overflow: auto;
+}
+
+::v-deep .el-carousel__container {
+  height: 100% !important;
+}
+
+::v-deep .image-carousel {
+  // padding: 0 !important;;
+}
+
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 0.5em;
+  height: 0.5em;
+}
+
+::-webkit-scrollbar-track {
+  background: #000000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #021b31;
+  border-radius: 0.25em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #011733cd;
+}
+.video-cell{
+  position: relative;
+}
+.iconFont{
+  position: absolute; top: 10px; text-align: right;  width: 100%;
+}
+</style>
--- a/src/views/StationLevel/layout/VideoMore.vue
+++ b/src/views/StationLevel/layout/VideoMore.vue
@ -1,53 +1,35 @@
 <template>
  <div class="video-more-container">
-    <div class="switch-btn prev" @click="handlePrev">
-        <img src="@/assets/images/icon_08.png" alt="">
-    </div>
-    <div class="video-grid">
-      <div v-for="index in 4" :key="index" class="video-cell">
-        <div class="video-wrapper">
-          <video class="video-player" controls>
-            <source src="" type="video/mp4">
-          </video>
-          <div class="video-controls">
-            <div class="time-display">01:32</div>
-            <div class="control-buttons">
-              <i class="el-icon-video-play"></i>
-              <i class="el-icon-refresh-right"></i>
-              <i class="el-icon-full-screen"></i>
-            </div>
+    <el-carousel style="height: 100%;" motion-blur indicator-position="none" :autoplay="false"
+    @change="handleCarouselChange">
+      <el-carousel-item v-for="(item,index) in sbList" :key="index"   >
+        <div class="video-grid" v-if="activeIndex==index">
+          <div v-for="(items,indexs) in item" :key="indexs" class="video-cell">
+            <WsIframe :sbbh="items.sbbh" />
          </div>
        </div>
-      </div>
-    </div>
-    <div class="switch-btn next" @click="handleNext">
-        <img src="@/assets/images/icon_07.png" alt="">
-    </div>
+      </el-carousel-item>
+    </el-carousel>
  </div>
 </template>

-<script>
-export default {
-  name: 'VideoMore',
-  data() {
-    return {
-      currentPage: 1,
-      totalPages: 3
-    }
-  },
-  methods: {
-    handlePrev() {
-      if (this.currentPage > 1) {
-        this.currentPage--
-      }
-    },
-    handleNext() {
-      if (this.currentPage < this.totalPages) {
-        this.currentPage++
-      }
-    }
-  }
+<script setup>
+import { ref ,onMounted} from 'vue'
+import WsIframe from '@/components/wsIframe/index.vue'
+import emitter from "@/utils/eventBus.js";
+const activeIndex = ref(0)
+const handleCarouselChange = (index) => {
+  activeIndex.value=index
 }
+const sbList = ref([1])
+onMounted(()=>{
+  emitter.on("getSxtGetList", (res) => {
+    sbList.value=   Array.from({ length:Math.ceil(res.length / 4)==0?1:Math.ceil(res.length / 4) }, (_, row) => {
+   return res.slice(row * 4, row * 4 + 4)
+    }
+    );
+})
+})
 </script>

 <style lang="scss" scoped>
@ -79,14 +61,16 @@ export default {
  }

  .video-grid {
+    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
-    gap: 20px;
+    gap: 10px;
    height: 100%;
  }

  .video-cell {
+
    position: relative;
    background: url('~@/assets/images/bg13.png') no-repeat;
    background-size: 100% 100%;
@ -128,14 +112,19 @@ export default {
  .control-buttons {
    display: flex;
    gap: 15px;
-    
+
    i {
      cursor: pointer;
      font-size: 20px;
+
      &:hover {
        color: #409EFF;
      }
    }
  }
 }
-</style>
+
+::v-deep .el-carousel__container {
+  height: 100% !important;
+}
+</style>