feat:新增智能预警页面

src/views/index.vue

@@ -14,7 +14,7 @@
           <SafetyInspectionRight v-if="mainMenu === '安全巡查'"></SafetyInspectionRight>
           <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
           <HydrologicInfo v-if="mainMenu === '水文信息'"></HydrologicInfo>
-
+          <SmartEarlyWarning v-if="mainMenu === '智能预警'"/>
           <WaterStationPopup />
         </div>
       </el-main>
@@ -34,6 +34,7 @@ import SafetyInspectionRight from './safety-inspection/right.vue'
 import ComprehensiveOverview from '@/views/comprehensive-overview/index'
 import HydrologicInfo from '@/views/hydrologic-info/index'
 import WaterStationPopup from '@/views/water-station-popup'
+import SmartEarlyWarning from '@/views/smart-early-warning/index'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -47,7 +48,8 @@ export default {
     ComprehensiveOverview,
     SafetyInspectionRight,
     HydrologicInfo,
-    WaterStationPopup
+    WaterStationPopup,
+    SmartEarlyWarning
   },
   computed: {
     ...mapState({

src/views/smart-early-warning/carousel.vue

@@ -0,0 +1,202 @@
+
+<template>
+  <div class="carousel-container">
+    <!-- 主轮播区 -->
+    <div class="main-carousel-wrapper">
+      <el-carousel 
+        ref="mainCarousel"
+        :interval="2000"
+        :autoplay="true"
+        height="1.89rem"
+        indicator-position="none"
+        arrow="never"
+        @change="handleMainChange"
+      >
+        <el-carousel-item v-for="(item, index) in items" :key="index">
+          <div class="image-wrapper">
+            <el-image 
+              :src="item.image" 
+              :preview-src-list="previewList"
+              fit="cover"
+              class="main-image"
+            />
+            <div class="fullscreen-btn" @click="openFullscreen(index)">
+              <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="">
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <!-- 缩略图导航区 -->
+    <div class="thumbnail-container">
+      <div class="nav-btn prev-btn" @click="prevSlide">
+        <img src="@/assets/image/smart-early-warning/leftBtn.png" alt="">
+      </div>
+      <div class="thumbnail-list">
+        <div 
+          v-for="(item, index) in items" 
+          :key="index"
+          :class="['thumbnail-item', { active: currentIndex === index }]"
+          @click="switchToSlide(index)"
+        >
+          <img :src="item.thumbnail" class="thumbnail-image">
+        </div>
+      </div>
+      <div class="nav-btn next-btn" @click="nextSlide">
+        <img src="@/assets/image/smart-early-warning/rightBtn.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props:{ 
+        items:Array
+    },
+  data() {
+    return {
+      currentIndex: 0
+    }
+  },
+  computed: {
+    previewList() {
+      return this.items.map(item => item.image);
+    }
+  },
+  methods: {
+    handleMainChange(index) {
+      this.currentIndex = index;
+    },
+    switchToSlide(index) {
+      this.currentIndex = index;
+      this.$refs.mainCarousel.setActiveItem(index);
+    },
+    prevSlide() {
+      this.$refs.mainCarousel.prev();
+    },
+    nextSlide() {
+      this.$refs.mainCarousel.next();
+    },
+    openFullscreen(index) {
+        console.info(index)
+        console.info('vv')
+      this.$refs.mainCarousel.setActiveItem(index);
+      const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img');
+      
+      console.info(img)
+      img.click(); // 触发图片预览
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.carousel-container {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.main-carousel-wrapper {
+  position: relative;
+  margin-bottom: px-to-rem(10);
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.main-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.main-image:hover {
+  transform: scale(1.02);
+}
+
+.fullscreen-btn {
+  position: absolute;
+  bottom: px-to-rem(10);
+  right:  px-to-rem(10);
+  width: px-to-rem(40);
+  height: px-to-rem(40);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.3s;
+}
+
+.fullscreen-btn:hover {
+  transform: scale(1.1);
+}
+
+.thumbnail-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: px-to-rem(5);
+  padding-bottom: px-to-rem(10);
+  border-bottom: px-to-rem(1) solid #59799F;
+  margin-bottom: px-to-rem(10);
+}
+
+.thumbnail-list {
+  display: flex;
+  gap: px-to-rem(5);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.thumbnail-list::-webkit-scrollbar {
+  display: none;
+}
+
+.thumbnail-item {
+  width: px-to-rem(60);
+  height: px-to-rem(30);
+  border: px-to-rem(1) solid transparent;
+  border-radius: px-to-rem(4);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+  flex-shrink: 0;
+}
+
+.thumbnail-item:hover {
+  border-color: #4F9FFF;
+}
+
+.thumbnail-item.active {
+  border-color: #4F9FFF;
+}
+
+.thumbnail-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.nav-btn {
+  width: px-to-rem(12);
+  height: px-to-rem(30);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.nav-btn:hover {
+  background: #409EFF;
+  color: white;
+}
+</style>

src/views/smart-early-warning/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    <Left></Left>
+    <Right></Right>
+  </div>
+</template>
+
+<script>
+import Left from './left.vue'
+import Right from './right.vue'
+export default {
+    components:{
+        Left,Right
+    }
+}
+</script>
+
+<style>
+
+</style>

src/views/smart-early-warning/left.vue

@@ -0,0 +1,234 @@
+<template>
+  <BasePanelLeft>
+    <div class="warning-container">
+      <BaseMain title="预警列表">
+        <template v-slot:mainArea>
+          <div class="list-container">
+            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal"> </el-input>
+            <div class="list-content">
+              <div class="item" v-for="(item, index) in listItem" :key="index">
+                <div class="left">
+                  <img :src="item.img" alt="" />
+                </div>
+                <div class="right">
+                  <div class="title">{{ item.title }}</div>
+                  <div class="txt">{{ item.address }}</div>
+                  <div class="txt">{{ item.date }}</div>
+                  <div class="jzDate">{{ item.deadline }}</div>
+                </div>
+              </div>
+            </div>
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page.sync="currentPage"
+              :page-size="pageSize"
+              layout="total, prev, pager, next"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
+        </template>
+      </BaseMain>
+    </div>
+  </BasePanelLeft>
+</template>
+
+<script>
+import BasePanelLeft from '@/components/base-panel/base-panel-left'
+import BaseMain from '@/components/base-main/base-main.vue'
+import ImgUrl from '@/assets/image/smart-early-warning/img1.png'
+export default {
+  data() {
+    return {
+      searchVal: '',
+      currentPage: 1,
+      pageSize: 6,
+      total: 0,
+      listItem: [
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        },
+        {
+          img: ImgUrl,
+          title: '乱建预警',
+          address: '咸阳兴平仪空村',
+          date: '2025-01-15 14:00:00',
+          deadline: '剩余0天 00:28:12'
+        }
+      ]
+    }
+  },
+  components: {
+    BasePanelLeft,
+    BaseMain
+  },
+  created() {
+    this.total = this.listItem.length
+  },
+  methods: {
+    handleSizeChange() {},
+    handleCurrentChange() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.warning-container {
+  position: absolute;
+  top: px-to-rem(66);
+  z-index: 1;
+  left: px-to-rem(-4);
+  height: calc(100% - px-to-rem(75));
+  :deep(.baseMainContainer) {
+    height: inherit;
+    .content-area {
+      height: 100%;
+    }
+  }
+  .list-container {
+    padding: px-to-rem(11);
+    height: 100%;
+    :deep(.el-input__inner) {
+      background: linear-gradient(0deg, #4586de 0%, #1a2d46 100%);
+      border-radius: px-to-rem(6);
+      border: px-to-rem(2) solid #94c0f7;
+      font-weight: 400;
+      font-size: px-to-rem(14);
+      color: #f5f5f5;
+    }
+    .list-content {
+      margin-top: px-to-rem(10);
+      height: 87%;
+      overflow: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      .item {
+        display: flex;
+        justify-content: flex-start;
+        gap: px-to-rem(10);
+        background: rgba(79, 159, 255, 0.2);
+        border-radius: px-to-rem(4);
+        border: px-to-rem(1) solid #4f9fff;
+        padding: px-to-rem(7);
+        margin-bottom: px-to-rem(9);
+        .left {
+          img {
+            width: px-to-rem(130);
+            height: 100%;
+          }
+        }
+        .right {
+          .title {
+            font-weight: bold;
+            font-size: px-to-rem(14);
+            color: #ffffff;
+          }
+          .txt {
+            font-weight: 400;
+            font-size: px-to-rem(14);
+            color: #ffffff;
+          }
+          .jzDate {
+            width: px-to-rem(112);
+            height: px-to-rem(18);
+            background: rgba(61, 116, 232, 0.3);
+            border-radius: px-to-rem(9);
+            font-weight: 400;
+            font-size: px-to-rem(12);
+            color: #4f9fff;
+          }
+        }
+      }
+    }
+    :deep(.el-pagination) {
+      margin-top: px-to-rem(22);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .el-pagination__total {
+        font-weight: 500;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+      }
+      button,
+      .el-pager li {
+         color: #fff;
+        background-color: transparent;
+        border-radius: px-to-rem(2);
+        width: px-to-rem(24);
+        height: px-to-rem(24);
+        padding: 0;
+        min-width: auto;
+        line-height: px-to-rem(24);
+        font-size: px-to-rem(14);
+      }
+      .el-pager li.active {
+        background: #3d74e8;
+
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/smart-early-warning/right.vue

@@ -0,0 +1,227 @@
+<template>
+  <BasePanelRight>
+    <div class="warning-container">
+      <BaseMain title="预警详情">
+        <template v-slot:mainArea>
+          <div class="detail-container">
+            <Carousel :items="items" />
+            <el-collapse v-model="activeNames" @change="handleChange" class="v-collapse">
+              <el-collapse-item title="预警来源" name="1">
+                <div class="form-content">
+                  <div class="form-item">
+                    <div class="label">摄像机编号：</div>
+                    <div class="value">{{ sourceObj.params1 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">摄像机名称：</div>
+                    <div class="value">{{ sourceObj.params2 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">通道名称：</div>
+                    <div class="value">{{ sourceObj.params3 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">摄像机厂家：</div>
+                    <div class="value">{{ sourceObj.params4 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">摄像机挂高：</div>
+                    <div class="value">{{ sourceObj.params5 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">摄像机经纬度：</div>
+                    <div class="value">{{ sourceObj.params6 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">摄像机地址：</div>
+                    <div class="value">{{ sourceObj.params7 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">置信度：</div>
+                    <div class="value">{{ sourceObj.params8 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">水平方位角：</div>
+                    <div class="value">{{ sourceObj.params9 }}</div>
+                  </div>
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="事件信息" name="2">
+                <div class="form-content">
+                  <div class="form-item">
+                    <div class="label">事件编号：</div>
+                    <div class="value">{{ eventInfo.params1 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">事件标题：</div>
+                    <div class="value">{{ eventInfo.params2 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">预警来源：</div>
+                    <div class="value">{{ eventInfo.params3 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">预警类型：</div>
+                    <div class="value">{{ eventInfo.params4 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">预警原因：</div>
+                    <div class="value">{{ eventInfo.params5 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">重要等级：</div>
+                    <div class="value">{{ eventInfo.params6 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">预警时间：</div>
+                    <div class="value">{{ eventInfo.params7 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">所属网格：</div>
+                    <div class="value">{{ eventInfo.params8 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">所属网格员：</div>
+                    <div class="value">{{ eventInfo.params9 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">事发地点：</div>
+                    <div class="value">{{ eventInfo.params10 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">经纬度：</div>
+                    <div class="value">{{ eventInfo.params11 }}</div>
+                  </div>
+                  <div class="form-item">
+                    <div class="label">事件描述：</div>
+                    <div class="value">{{ eventInfo.params12 }}</div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </template>
+      </BaseMain>
+    </div>
+  </BasePanelRight>
+</template>
+
+<script>
+import BasePanelRight from '@/components/base-panel/base-panel-right'
+import BaseMain from '@/components/base-main/base-main.vue'
+import Carousel from './carousel.vue'
+import ImgUrl from '@/assets/image/smart-early-warning/banner.png'
+export default {
+  data() {
+    return {
+      items: [
+        {
+          image: ImgUrl,
+          thumbnail: ImgUrl
+        },
+        {
+          image: 'https://picsum.photos/1200/800?city=1',
+          thumbnail: 'https://picsum.photos/200/150?city=1'
+        },
+        {
+          image: 'https://picsum.photos/1200/800?animal=1',
+          thumbnail: 'https://picsum.photos/200/150?animal=1'
+        }
+      ],
+      sourceObj: {
+        params1: '43030400831327000100',
+        params2: '咸宁阳兴平仪空村综合机房',
+        params3: '咸宁阳兴平仪空村综合机房梯次LY',
+        params4: '大华',
+        params5: '35.0米',
+        params6: '112.985866,27.814898',
+        params7: '咸宁阳兴平仪空村综合机房',
+        params8: '0.80615',
+        params9: 'N8.37°E'
+      },
+      eventInfo: {
+        params1: '202508251210241338766566',
+        params2: '流域乱建预警',
+        params3: 'AI预警',
+        params4: '四乱预警',
+        params5: '暂无',
+        params6: '一级',
+        params7: '2025-08-25 09:36:31',
+        params8: '双马街道',
+        params9: '戴永强',
+        params10: '咸宁阳兴平仪空村综合机房',
+        params11: '112.986374,27.817957',
+        params12: '暂无'
+      },
+      activeNames: ['1']
+    }
+  },
+  components: {
+    BasePanelRight,
+    BaseMain,
+    Carousel
+  },
+  methods: {
+    handleChange() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.warning-container {
+  position: absolute;
+  top: px-to-rem(66);
+  z-index: 1;
+  left: px-to-rem(-4);
+  height: calc(100% - px-to-rem(75));
+  :deep(.baseMainContainer) {
+    height: inherit;
+    .content-area {
+      height: 100%;
+    }
+  }
+  .detail-container {
+    padding: px-to-rem(10) px-to-rem(8);
+    .form-content {
+      .form-item {
+        display: flex;
+        justify-content: flex-end;
+        gap:px-to-rem(11);
+         .label {
+          width: 35%;
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #abb4c1;
+          text-align: right;
+        }
+        .value {
+          width: 65%;
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .v-collapse {
+    :deep(.el-collapse-item__header) {
+      background: #26344b;
+      font-weight: 500;
+      font-size: px-to-rem(14);
+      color: #ffffff;
+      padding: px-to-rem(5) px-to-rem(11);
+      height: auto;
+      line-height: initial;
+      border-bottom: 0;
+      border-left: px-to-rem(1) solid #4f9fff;
+    }
+    :deep(.el-collapse-item__wrap) {
+      background-color: transparent;
+      border-bottom: 0;
+    }
+    :deep(.el-collapse-item__content){
+        padding:px-to-rem(8) px-to-rem(0)
+    }
+  }
+}
+</style>