fix:摄像头接口及事件接口联调

src/views/comprehensive-overview/cameraInfo.vue

@@ -4,14 +4,14 @@
       <img src="@/assets/image/comprehensive/cameraIcon1.png" alt="" />
       <div class="info">
         <div>高杆摄像头</div>
-        <div><span class="green">10 </span> / 10</div>
+        <div><span class="green">{{info.highOnlineNum}} </span> / {{info.highNum}}</div>
       </div>
     </div>
     <div class="area">
       <img src="@/assets/image/comprehensive/cameraIcon2.png" alt="" />
       <div class="info">
         <div>中杆摄像头</div>
-        <div><span class="green">5 </span> / 5</div>
+        <div><span class="green">{{info.middleOnlineNum}} </span> / {{info.middleNum}}</div>
       </div>
     </div>
     <div class="area">
@@ -32,7 +32,23 @@
 </template>
 
 <script>
-export default {}
+export default {
+  data(){
+    return{
+      info:{
+        highNum:0,
+        highOnlineNum:0,
+        middleNum:0,
+        middleOnlineNum:0,
+      }
+    }
+  },
+  mounted(){
+      window.requestSDK('/sddnWeiHe/device/deviceStatistics', {}, {}, 'post').then((res) => {
+        this.info = res.data
+      })
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/comprehensive-overview/left.vue

@@ -6,37 +6,37 @@
           <template v-slot:mainArea>
             <div class="main-container h380">
               <template v-if="noticeList.length > 0">
-              <div class="img-txt" v-if="noticeList.length > 0" @click="toSee(noticeList[0])">
-                <template v-if="noticeList[0].images != null">
-                  <el-image class="img" :src="noticeList[0].images"></el-image>
-                </template>
-                <template v-else>
-                  <el-image class="img" :src="defaultImg" ></el-image>
-                </template>
-                <div class="txt">{{ noticeList[0].announcementName }}</div>
-              </div>
-              <div class="list" v-for="item in noticeDataList" :key="item.id">
-                <div class="left">
-                  <template v-if="item.images != null">
-                    <el-image :src="item.images" class="img"></el-image>
+                <div class="img-txt" v-if="noticeList.length > 0" @click="toSee(noticeList[0])">
+                  <template v-if="noticeList[0].images != null">
+                    <el-image class="img" :src="noticeList[0].images"></el-image>
                   </template>
                   <template v-else>
-                    <el-image :src="defaultSmallImg" class="img"></el-image>
+                    <el-image class="img" :src="defaultImg"></el-image>
                   </template>
+                  <div class="txt">{{ noticeList[0].announcementName }}</div>
                 </div>
-                <div class="right">
-                  <div class="title">{{ item.announcementName }}</div>
-                  <div class="date">{{ formatDate(item.createTime) }}</div>
-                  <div class="detailBtn" @click="toSee(item)">详情</div>
+                <div class="list" v-for="item in noticeDataList" :key="item.id">
+                  <div class="left">
+                    <template v-if="item.images != null">
+                      <el-image :src="item.images" class="img"></el-image>
+                    </template>
+                    <template v-else>
+                      <el-image :src="defaultSmallImg" class="img"></el-image>
+                    </template>
+                  </div>
+                  <div class="right">
+                    <div class="title">{{ item.announcementName }}</div>
+                    <div class="date">{{ formatDate(item.createTime) }}</div>
+                    <div class="detailBtn" @click="toSee(item)">详情</div>
+                  </div>
                 </div>
-              </div>
-               </template>
-               <template v-else>
+              </template>
+              <template v-else>
                 <div class="noData">
-                  <img src="@/assets/image/comprehensive/noData.png" alt="">
+                  <img src="@/assets/image/comprehensive/noData.png" alt="" />
                   <div class="txt">暂无公告信息</div>
                 </div>
-               </template>
+              </template>
             </div>
           </template>
         </BaseMain>
@@ -127,7 +127,7 @@
 import moment from 'moment'
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseMain from '@/components/base-main/base-main.vue'
-import {getAnnouncementList} from '@/api/announcementApi'
+import { getAnnouncementList } from '@/api/announcementApi'
 import ImgUrl from '@/assets/image/comprehensive/bg1.png'
 import ImgUrl2 from '@/assets/image/comprehensive/bg2.png'
 export default {
@@ -139,43 +139,50 @@ export default {
     return {
       noticeList: [],
       noticeDataList: [],
-      defaultImg:ImgUrl,
-      defaultSmallImg:ImgUrl2,
-      tableInfo: [
-        {
-          id: 1,
-          title: '桑镇西桥村至庄头镇蔡庄村段',
-          len: 13.146,
-          year: 30,
-          sl: 6669
-        },
-        {
-          id: 2,
-          title: '庄头镇蔡庄村至阜寨镇段家村段',
-          len: 13.146,
-          year: 30,
-          sl: 6669
-        }
-      ]
+      defaultImg: ImgUrl,
+      defaultSmallImg: ImgUrl2
     }
   },
-  mounted(){
-    this.fetchData()
+  mounted() {
+    // this.fetchData()
+    this.noticeList = [
+      {
+        id: 1,
+        images: ImgUrl,
+        announcementName: '朝元阁峻临秦岭，羯鼓楼高俯渭河',
+        createTime: '2025-05-04 10:00:00',
+        announcementContent: '朝元阁峻临秦岭，羯鼓楼高俯渭河,朝元阁峻临秦岭，羯鼓楼高俯渭河,朝元阁峻临秦岭，羯鼓楼高俯渭河'
+      },
+      {
+        id: 2,
+        images: ImgUrl2,
+        announcementName: '离亭当日唱离歌，只为柔条傍渭河',
+        createTime: '2025-05-04 10:00:00',
+        announcementContent: '离亭当日唱离歌，只为柔条傍渭河,离亭当日唱离歌，只为柔条傍渭河,离亭当日唱离歌，只为柔条傍渭河'
+      },
+      {
+        id: 3,
+        images: ImgUrl2,
+        announcementName: '离亭当日唱离歌，只为柔条傍渭河',
+        createTime: '2025-05-04 10:00:00',
+        announcementContent: '离亭当日唱离歌，只为柔条傍渭河,离亭当日唱离歌，只为柔条傍渭河,离亭当日唱离歌，只为柔条傍渭河'
+      }
+    ]
+    this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
   },
   methods: {
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss')
     },
-     fetchData() {
-      getAnnouncementList({ announcementStatus: '1',pageNum: 1,
-        pageSize: 3}).then((res) => {
+    fetchData() {
+      getAnnouncementList({ announcementStatus: '1', pageNum: 1, pageSize: 3 }).then((res) => {
         this.noticeList = res.data.records
         this.noticeDataList = this.noticeList.splice(1, this.noticeList.length)
       })
     },
-    toSee(data){
+    toSee(data) {
       console.info(data)
-      this.$globalEventBus.$emit('clickAnnouncePopup',{list:data})
+      this.$globalEventBus.$emit('clickAnnouncePopup', { list: data })
     }
   }
 }
@@ -187,20 +194,20 @@ export default {
   top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
-  .h380{
+  .h380 {
     height: px-to-rem(419);
   }
   .main-container {
     padding: px-to-rem(10);
-    .noData{
+    .noData {
       width: 100%;
       height: 100%;
       text-align: center;
-      img{
+      img {
         margin-top: px-to-rem(70);
         margin-bottom: px-to-rem(20);
       }
-      .txt{
+      .txt {
         color: #fff;
         font-size: px-to-rem(14);
       }
@@ -291,9 +298,9 @@ export default {
         }
       }
     }
-    .borderT{
-      padding-top: px-to-rem(17); 
-      border-top: px-to-rem(1) solid #5980A9;
+    .borderT {
+      padding-top: px-to-rem(17);
+      border-top: px-to-rem(1) solid #5980a9;
     }
   }
   .icon-item {
@@ -409,18 +416,18 @@ export default {
           font-weight: bold;
           font-size: px-to-rem(12);
           color: #c4c6c8;
-          span{
-            color: #F5F5F5;
+          span {
+            color: #f5f5f5;
+          }
+          .blue {
+            color: #81b1f5;
+          }
+          .green {
+            color: #80f5ff;
           }
-           .blue {
-          color: #81b1f5;
-        }
-        .green {
-          color: #80f5ff;
-        }
         }
       }
     }
   }
 }
-</style>
+</style>

src/views/comprehensive-overview/right.vue

@@ -1,302 +1,310 @@
 <template>
-    <BasePanelRight>
+  <BasePanelRight>
     <div class="comprehensive-container">
-        <div class="right">
-            <BaseMain title="水文监测">
-                <template v-slot:mainArea>
-                    <div class="sw-container">
-                        <div class="left">
-                            <img src="@/assets/image/comprehensive/swIcon.png" alt="" class="icon1">
-                            <span class="value"><span class="big">2</span> / 2</span>
-                        </div>
-                        <div class="right">
-                            <div class="icon-text">
-                                <div class="txt">水位</div>
-                                <div class="txt2">雨量</div>
-                            </div>
-                            <div class="icon-text">
-                                <div class="txt3">流速</div>
-                                <div class="txt4">流量</div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </BaseMain>
-            <BaseMain title="四乱监测">
-                <template v-slot:mainArea>
-                    <div class="sl-container">
-                        <div class="seach-btn">
-                            <el-radio-group v-model="dateVal" size="mini" class="slRadio">
-                               <el-radio-button  label="1">今日</el-radio-button>
-                               <el-radio-button  label="2">近七日</el-radio-button>
-                               <el-radio-button  label="3">近30日</el-radio-button>
-                               <el-radio-button  label="4">全部</el-radio-button>
-                           </el-radio-group>
-                        </div>
-                        <div class="dottTitle">
-                            事件总数
-                        </div>
-                        <div class="data-info">
-                            <div class="left">
-                                <div class="val">40</div>
-                                <img src="@/assets/image/comprehensive/midBg2.png"/>
-                            </div>
-                            <div class="right">
-                                <div class="em">
-                                    <div class="color1">乱建</div>
-                                    <div>10</div>
-                                </div>
-                                <div class="em">
-                                    <div class="color2">乱采</div>
-                                    <div>10</div>
-                                </div>
-                                <div class="em">
-                                    <div class="color3">乱堆</div>
-                                    <div>10</div>
-                                </div>
-                                <div class="em">
-                                    <div class="color4">乱占</div>
-                                    <div>10</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </BaseMain>
-            <BaseMain title="采砂监测">
-                <template v-slot:mainArea>
-                   <div class="card-item">
-                        <div class="warning-content">
-                        <div class="warning-title">
-                            <div class="title">预警总数</div>
-                            <div class="num">30</div>
-                            <div class="unit">条</div>
-                        </div>
-                        <PieChart style="height: 1.45rem" />
-                        </div>
-                    </div>
-                </template>
-            </BaseMain>
-        </div>
+      <div class="right">
+        <BaseMain title="水文监测">
+          <template v-slot:mainArea>
+            <div class="sw-container">
+              <div class="left">
+                <img src="@/assets/image/comprehensive/swIcon.png" alt="" class="icon1" />
+                <span class="value"><span class="big">2</span> / 2</span>
+              </div>
+              <div class="right">
+                <div class="icon-text">
+                  <div class="txt">水位</div>
+                  <div class="txt2">雨量</div>
+                </div>
+                <div class="icon-text">
+                  <div class="txt3">流速</div>
+                  <div class="txt4">流量</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </BaseMain>
+        <BaseMain title="四乱监测">
+          <template v-slot:mainArea>
+            <div class="sl-container">
+              <div class="seach-btn">
+                <el-radio-group v-model="dateVal" size="mini" class="slRadio" @input="getData">
+                  <el-radio-button label="1">今日</el-radio-button>
+                  <el-radio-button label="2">近七日</el-radio-button>
+                  <el-radio-button label="3">近30日</el-radio-button>
+                  <el-radio-button label="4">全部</el-radio-button>
+                </el-radio-group>
+              </div>
+              <div class="dottTitle">事件总数</div>
+              <div class="data-info">
+                <div class="left">
+                  <div class="val">{{eventInfo.total}}</div>
+                  <img src="@/assets/image/comprehensive/midBg2.png" />
+                </div>
+                <div class="right">
+                  <div class="em" v-for="(item,index) in eventInfo.list" :key="index">
+                    <div :class="`color${index+1}`">{{item.name}}</div>
+                    <div>{{item.num}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </BaseMain>
+        <BaseMain title="采砂监测">
+          <template v-slot:mainArea>
+            <div class="card-item">
+              <div class="warning-content">
+                <div class="warning-title">
+                  <div class="title">预警总数</div>
+                  <div class="num">30</div>
+                  <div class="unit">条</div>
+                </div>
+                <PieChart style="height: 1.45rem" />
+              </div>
+            </div>
+          </template>
+        </BaseMain>
+      </div>
     </div>
   </BasePanelRight>
 </template>
 
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
-import BaseMain from '@/components/base-main/base-main.vue';
+import BaseMain from '@/components/base-main/base-main.vue'
 import PieChart from './pie-chart/index.vue'
 export default {
-    components:{
-        BaseMain,BasePanelRight,PieChart
-    },
-    data() {
-        return {
-            dateVal:1
-        }
-    },
-    created(){
-    },
-    methods:{
-
+  components: {
+    BaseMain,
+    BasePanelRight,
+    PieChart
+  },
+  data() {
+    return {
+      dateVal: 1,
+      eventInfo:{
+        total:0,
+        list:[]
+      }
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      window
+        .requestSDK(
+          '/sddnWeiHe/event/getEventStatistics',
+          {
+            type:this.dateVal
+          },
+          {},
+          'get'
+        )
+        .then(async (res) => {
+          console.info(res)
+            this.eventInfo = res.data
+            console.info(this.eventInfo)
+        })
     }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.comprehensive-container{
-    position: absolute;
-    top: px-to-rem(30);
-    z-index: 1;
-    .sw-container{
-        padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);
+.comprehensive-container {
+  position: absolute;
+  top: px-to-rem(30);
+  z-index: 1;
+  .sw-container {
+    padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);
+    display: flex;
+    justify-content: flex-start;
+    .left {
+      position: relative;
+      margin-right: px-to-rem(24);
+      .icon1 {
+        width: px-to-rem(124);
+        height: px-to-rem(124);
+      }
+      .value {
+        position: absolute;
+        font-weight: bold;
+        font-size: px-to-rem(14);
+        color: #fff;
+        left: px-to-rem(45);
+        bottom: px-to-rem(35);
+        .big {
+          font-size: px-to-rem(18);
+          color: #91ffab;
+        }
+      }
+    }
+    .right {
+      font-weight: 500;
+      font-size: px-to-rem(14);
+      color: #ffffff;
+      width: calc(100% - px-to-rem(124));
+      .icon-text {
         display: flex;
-        justify-content: flex-start;
-        .left{
-            position: relative;
-            margin-right: px-to-rem(24);
-            .icon1{
-                width: px-to-rem(124);
-                height: px-to-rem(124);
-            }
-            .value{
-                position: absolute;
-                font-weight: bold;
-                font-size: px-to-rem(14);
-                color: #fff;
-                left: px-to-rem(45);
-                bottom:px-to-rem(35);
-                .big{
-                    font-size: px-to-rem(18);
-                    color: #91FFAB;
-                }
-            }
-        }   
-        .right{
-            font-weight: 500;
-            font-size: px-to-rem(14);
-            color: #FFFFFF;
-            width: calc(100% - px-to-rem(124));
-            .icon-text{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: px-to-rem(32);
-                .txt{
-                    background: url('@/assets/image/comprehensive/swIcon1.png') no-repeat;
-                    background-size: contain;
-                    width: px-to-rem(80);
-                    height: px-to-rem(32);
-                    line-height: px-to-rem(32);
-                    padding-left: px-to-rem(39);
-                }
-                 .txt2{
-                    background: url('@/assets/image/comprehensive/swIcon2.png') no-repeat;
-                    background-size: contain;
-                    width: px-to-rem(80);
-                    height: px-to-rem(32);
-                    line-height: px-to-rem(32);
-                    padding-left: px-to-rem(39);
-                }
-                 .txt3{
-                    background: url('@/assets/image/comprehensive/swIcon3.png') no-repeat;
-                    background-size: contain;
-                    width: px-to-rem(80);
-                    height: px-to-rem(32);
-                    line-height: px-to-rem(32);
-                    padding-left: px-to-rem(39);
-                }
-                 .txt4{
-                    background: url('@/assets/image/comprehensive/swIcon4.png') no-repeat;
-                    background-size: contain;
-                    width: px-to-rem(80);
-                    height: px-to-rem(32);
-                    line-height: px-to-rem(32);
-                    padding-left: px-to-rem(39);
-                }
-            }
-            .icon-text:first-child{
-                margin-top: px-to-rem(9);
-            }
+        justify-content: space-between;
+        margin-bottom: px-to-rem(32);
+        .txt {
+          background: url('@/assets/image/comprehensive/swIcon1.png') no-repeat;
+          background-size: contain;
+          width: px-to-rem(80);
+          height: px-to-rem(32);
+          line-height: px-to-rem(32);
+          padding-left: px-to-rem(39);
+        }
+        .txt2 {
+          background: url('@/assets/image/comprehensive/swIcon2.png') no-repeat;
+          background-size: contain;
+          width: px-to-rem(80);
+          height: px-to-rem(32);
+          line-height: px-to-rem(32);
+          padding-left: px-to-rem(39);
         }
+        .txt3 {
+          background: url('@/assets/image/comprehensive/swIcon3.png') no-repeat;
+          background-size: contain;
+          width: px-to-rem(80);
+          height: px-to-rem(32);
+          line-height: px-to-rem(32);
+          padding-left: px-to-rem(39);
+        }
+        .txt4 {
+          background: url('@/assets/image/comprehensive/swIcon4.png') no-repeat;
+          background-size: contain;
+          width: px-to-rem(80);
+          height: px-to-rem(32);
+          line-height: px-to-rem(32);
+          padding-left: px-to-rem(39);
+        }
+      }
+      .icon-text:first-child {
+        margin-top: px-to-rem(9);
+      }
     }
-    .sl-container{
-        padding: px-to-rem(16) px-to-rem(15) px-to-rem(55) px-to-rem(11);
-        height: px-to-rem(253);
-        .slRadio{
-            margin-bottom: px-to-rem(24);
-            :deep(.el-radio-button__inner) {
-                background: rgba(79,159,255,0.12);
-                color: #4F9FFF;
-                border-color: #4F9FFF;
-                font-weight: 400;
-                padding: px-to-rem(6);
-                font-size: px-to-rem(14);
-            }
-            :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
-                background-color: rgba(79,159,255,0.8);
-                color: #fff;
-            }
+  }
+  .sl-container {
+    padding: px-to-rem(16) px-to-rem(15) px-to-rem(55) px-to-rem(11);
+    height: px-to-rem(253);
+    .slRadio {
+      margin-bottom: px-to-rem(24);
+      :deep(.el-radio-button__inner) {
+        background: rgba(79, 159, 255, 0.12);
+        color: #4f9fff;
+        border-color: #4f9fff;
+        font-weight: 400;
+        padding: px-to-rem(6);
+        font-size: px-to-rem(14);
+      }
+      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+        background-color: rgba(79, 159, 255, 0.8);
+        color: #fff;
+      }
+    }
+    .dottTitle {
+      position: relative;
+      display: inline-block;
+      font-weight: bold;
+      font-size: px-to-rem(14);
+      color: #f5f5f5;
+      margin-bottom: px-to-rem(10);
+      margin-left: px-to-rem(16);
+      &::before,
+      &::after {
+        content: ' ';
+        display: inline-block;
+        width: px-to-rem(30);
+        height: px-to-rem(2);
+        background-color: #4487d8;
+        vertical-align: middle;
+        margin: 0 0.5em;
+      }
+      &::before {
+        margin-left: 0;
+      }
+      &::after {
+        margin-right: 0;
+      }
+    }
+    .data-info {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        margin-top: px-to-rem(26);
+        .val {
+          font-weight: bold;
+          font-size: px-to-rem(30);
+          color: #f5f5f5;
+          background: url('@/assets/image/comprehensive/midBg.png') no-repeat;
+          background-size: contain;
+          width: px-to-rem(86);
+          height: px-to-rem(50);
+          text-align: center;
+          margin-left: px-to-rem(50);
         }
-        .dottTitle{
-            position: relative;
-            display: inline-block;
-            font-weight: bold;
-            font-size: px-to-rem(14);
-            color: #F5F5F5;
-            margin-bottom:px-to-rem(10);
-            margin-left:px-to-rem(16);
-            &::before,
-            &::after {
-                content: " "; 
-                display: inline-block;
-                width: px-to-rem(30); 
-                height: px-to-rem(2); 
-                background-color:  #4487D8; 
-                vertical-align: middle; 
-                margin: 0 0.5em; 
-            }
-            &::before {
-                margin-left: 0; 
-            }
-            &::after {
-                margin-right: 0;
-            }
+        img {
+          width: px-to-rem(197);
+          height: px-to-rem(33);
         }
-        .data-info{
-            display: flex;
-            justify-content:space-between;
-            .left{
-                margin-top:px-to-rem(26);
-                .val{
-                    font-weight: bold;
-                    font-size: px-to-rem(30);
-                    color: #F5F5F5;
-                    background: url('@/assets/image/comprehensive/midBg.png') no-repeat;
-                    background-size: contain;
-                    width: px-to-rem(86);
-                    height: px-to-rem(50);
-                    text-align: center;
-                    margin-left: px-to-rem(50);
-                }
-                img{
-                    width: px-to-rem(197);
-                    height: px-to-rem(33);
-                }
-            }
-            .right{
-                width:30%;
-                .em{
-                    display: flex;
-                    justify-content: space-between;
-                    font-weight: 400;
-                    font-size: px-to-rem(14);
-                    color: #F5F5F5;
-                    margin-bottom:px-to-rem(12);
-                    .color1::before{
-                        content: " "; 
-                        display: inline-block;
-                        width: px-to-rem(12); 
-                        height: px-to-rem(6); 
-                        background-color:  #6BFE91; 
-                        border-radius: px-to-rem(2);
-                        vertical-align: middle; 
-                        margin-right: px-to-rem(6);
-                    }
-                    .color2::before{
-                        content: " "; 
-                        display: inline-block;
-                        width: px-to-rem(12); 
-                        height: px-to-rem(6); 
-                        background-color:  #EFD800; 
-                        border-radius: px-to-rem(2);
-                        vertical-align: middle; 
-                        margin-right: px-to-rem(6);
-                    }
-                    .color3::before{
-                        content: " "; 
-                        display: inline-block;
-                        width: px-to-rem(12); 
-                        height: px-to-rem(6); 
-                        background-color:  #F17A23; 
-                        border-radius: px-to-rem(2);
-                        vertical-align: middle; 
-                        margin-right: px-to-rem(6);
-                    }
-                    .color4::before{
-                        content: " "; 
-                        display: inline-block;
-                        width: px-to-rem(12); 
-                        height: px-to-rem(6); 
-                        background-color:  #4487D8; 
-                        border-radius: px-to-rem(2);
-                        vertical-align: middle; 
-                        margin-right: px-to-rem(6);
-                    }
-                }
-            }
+      }
+      .right {
+        width: 30%;
+        .em {
+          display: flex;
+          justify-content: space-between;
+          font-weight: 400;
+          font-size: px-to-rem(14);
+          color: #f5f5f5;
+          margin-bottom: px-to-rem(12);
+          .color1::before {
+            content: ' ';
+            display: inline-block;
+            width: px-to-rem(12);
+            height: px-to-rem(6);
+            background-color: #6bfe91;
+            border-radius: px-to-rem(2);
+            vertical-align: middle;
+            margin-right: px-to-rem(6);
+          }
+          .color2::before {
+            content: ' ';
+            display: inline-block;
+            width: px-to-rem(12);
+            height: px-to-rem(6);
+            background-color: #efd800;
+            border-radius: px-to-rem(2);
+            vertical-align: middle;
+            margin-right: px-to-rem(6);
+          }
+          .color3::before {
+            content: ' ';
+            display: inline-block;
+            width: px-to-rem(12);
+            height: px-to-rem(6);
+            background-color: #f17a23;
+            border-radius: px-to-rem(2);
+            vertical-align: middle;
+            margin-right: px-to-rem(6);
+          }
+          .color4::before {
+            content: ' ';
+            display: inline-block;
+            width: px-to-rem(12);
+            height: px-to-rem(6);
+            background-color: #4487d8;
+            border-radius: px-to-rem(2);
+            vertical-align: middle;
+            margin-right: px-to-rem(6);
+          }
         }
+      }
     }
-   .card-item {
+  }
+  .card-item {
     position: relative;
     width: 3.68rem;
     padding: px-to-rem(22) px-to-rem(16) px-to-rem(27) px-to-rem(26);
@@ -430,4 +438,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <Left @toLoadDetail="toLoadDetail"></Left>
-    <Right :info="detailInfo" ></Right>
+    <Left @toLoadDetail="toLoadDetail" :deviceInfo="deviceInfo"></Left>
+    <Right :info="detailInfo"></Right>
   </div>
 </template>
 
@@ -9,26 +9,35 @@
 import Left from './left.vue'
 import Right from './right.vue'
 export default {
-    components:{
-        Left,Right
-    },
-    data(){
-      return{
-        detailInfo:{},
+  components: {
+    Left,
+    Right
+  },
+  data() {
+    return {
+      detailInfo: {},
+      deviceInfo: {
+        channelNum:0,
+        deviceNum:0,
       }
+    }
+  },
+  mounted() {
+    this.$globalEventBus.$emit('hideRightPanel', true)
+    this.loadNum()
+  },
+  methods: {
+    toLoadDetail(data) {
+      this.detailInfo = data
+      this.$globalEventBus.$emit('hideRightPanel', false)
     },
-    mounted(){
-      this.$globalEventBus.$emit('hideRightPanel',true)
-    },
-    methods:{
-      toLoadDetail(data){
-        this.detailInfo = data
-        this.$globalEventBus.$emit('hideRightPanel',false)
-      }
+    loadNum() {
+      window.requestSDK('/sddnWeiHe/device/deviceStatistics', {}, {}, 'post').then((res) => {
+        this.deviceInfo = res.data
+      })
     }
+  }
 }
 </script>
 
-<style>
-
-</style>
+<style></style>

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

@@ -1,46 +1,47 @@
 <template>
-  <BasePanelLeft>
+  <div>
     <div class="num-area">
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/sxt.png" alt="" />摄像机数量：3258</div>
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/td.png" alt="" />通道数量：3258</div>
+      <div class="txt-num"><img src="@/assets/image/smart-early-warning/sxt.png" alt="" />摄像机数量：{{deviceInfo.deviceNum}}</div>
+      <div class="txt-num"><img src="@/assets/image/smart-early-warning/td.png" alt="" />通道数量：{{deviceInfo.channelNum}}</div>
     </div>
-    <div class="warning-container">
-      <BaseMain title="预警列表">
-        <template v-slot:mainArea>
-          <template v-if="lists.length > 0">
-            <div class="list-container">
-              <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal" @change="getData"> </el-input>
-              <el-collapse v-model="activeNames" class="v-collapse">
-                <template v-for="(item, index) in lists">
-                  <el-collapse-item :title="item.name" :name="index + 1" :key="index">
-                    <template slot="title">
-                      <div class="title-num">
-                        <div class="left">{{ item.name }}</div>
-                        <div class="right">{{ item.listItem.length }}个</div>
-                      </div>
-                    </template>
-                    <div class="list-content">
-                      <div class="item" :class="{ active: activeIndex == index + i }" v-for="(item, i) in item.listItem" :key="i" @click="toLoadDetail(item, index, i)">
-                        <div class="left">
-                          <template v-if="item.img.length == 0">
-                            <img :src="defaultImg" alt=""/>
-                          </template>
-                          <template v-else>
-                            <img :src="item.img[0]" alt="" />
-                          </template>
+    <BasePanelLeft>
+      <div class="warning-container">
+        <BaseMain title="预警列表">
+          <template v-slot:mainArea>
+            <template v-if="lists.length > 0">
+              <div class="list-container">
+                <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal" @change="getData"> </el-input>
+                <el-collapse v-model="activeNames" class="v-collapse">
+                  <template v-for="(item, index) in lists">
+                    <el-collapse-item :title="item.name" :name="index + 1" :key="index">
+                      <template slot="title">
+                        <div class="title-num">
+                          <div class="left">{{ item.name }}</div>
+                          <div class="right">{{ item.listItem.length }}个</div>
                         </div>
-                        <div class="right">
-                          <div class="title">{{ item.alarmBody }}</div>
-                          <div class="txt">{{ item.address }}</div>
-                          <div class="txt">{{ item.alarmTime }}</div>
-                          <!-- <div class="jzDate">{{ item.duration }}</div> -->
+                      </template>
+                      <div class="list-content">
+                        <div class="item" :class="{ active: activeIndex == index + i }" v-for="(item, i) in item.listItem" :key="i" @click="toLoadDetail(item, index, i)">
+                          <div class="left">
+                            <template v-if="item.img.length == 0">
+                              <img :src="defaultImg" alt="" />
+                            </template>
+                            <template v-else>
+                              <img :src="item.img[0]" alt="" />
+                            </template>
+                          </div>
+                          <div class="right">
+                            <div class="title">{{ item.alarmBody }}</div>
+                            <div class="txt">{{ item.address }}</div>
+                            <div class="txt">{{ item.alarmTime }}</div>
+                            <!-- <div class="jzDate">{{ item.duration }}</div> -->
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </el-collapse-item>
-                </template>
-              </el-collapse>
-              <!-- <el-pagination
+                    </el-collapse-item>
+                  </template>
+                </el-collapse>
+                <!-- <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page.sync="currentPage"
@@ -49,18 +50,19 @@
                 :total="total"
               >
               </el-pagination> -->
-            </div>
-          </template>
-          <template v-else>
-            <div class="noData">
-              <img src="@/assets/image/comprehensive/noData.png" alt="" />
-              <div class="txt">暂无预警</div>
-            </div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="noData">
+                <img src="@/assets/image/comprehensive/noData.png" alt="" />
+                <div class="txt">暂无预警</div>
+              </div>
+            </template>
           </template>
-        </template>
-      </BaseMain>
-    </div>
-  </BasePanelLeft>
+        </BaseMain>
+      </div>
+    </BasePanelLeft>
+  </div>
 </template>
 
 <script>
@@ -69,6 +71,9 @@ import BaseMain from '@/components/base-main/base-main.vue'
 import ImgUrl from '@/assets/image/smart-early-warning/img1.png'
 import moment from 'moment'
 export default {
+  props: {
+    deviceInfo: Object
+  },
   data() {
     return {
       activeIndex: null,
@@ -78,7 +83,7 @@ export default {
       total: 0,
       activeNames: [1, 2, 3, 4],
       lists: [],
-      defaultImg:ImgUrl
+      defaultImg: ImgUrl
     }
   },
   components: {
@@ -94,24 +99,24 @@ export default {
         .requestSDK(
           '/sddnWeiHe/event/getEventListByType',
           {
-            alarmTimeStart:moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+            alarmTimeStart: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
             alarmTimeEnd: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
-            keyword:this.searchVal
+            keyword: this.searchVal
           },
           {},
           'post'
         )
         .then(async (res) => {
-          if(res.data.length > 0){
-            res.data.forEach(category => {
-              category.listItem.forEach(item => {
-                  if (item.img) {
-                      item.img = item.img.split(',');
-                  } else {
-                      item.img = [];//设置默认图片
-                  }
-              });
-          });
+          if (res.data.length > 0) {
+            res.data.forEach((category) => {
+              category.listItem.forEach((item) => {
+                if (item.img) {
+                  item.img = item.img.split(',')
+                } else {
+                  item.img = [] //设置默认图片
+                }
+              })
+            })
             this.lists = res.data
             this.total = this.lists.length
           }
@@ -132,7 +137,7 @@ export default {
   position: absolute;
   top: px-to-rem(8);
   left: px-to-rem(130);
-  z-index: 1;
+  z-index: 999;
   display: flex;
   .txt-num {
     display: flex;

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

@@ -1,9 +1,10 @@
 <template>
+  <div>
+  <div class="num-area">
+    <div class="txt-num"><img src="@/assets/image/smart-early-warning/yjNum.png" alt="">今日预警数量：3,258</div>
+    <div class="txt-num"><img src="@/assets/image/smart-early-warning/jrDcl.png" alt="">今日待处理：3,258</div>
+  </div>
   <BasePanelRight :isHidePanel="isHide">
-    <div class="num-area">
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/yjNum.png" alt="">今日预警数量：3,258</div>
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/jrDcl.png" alt="">今日待处理：3,258</div>
-    </div>
     <div class="warning-container">
       <BaseMain title="预警详情">
         <template v-slot:mainArea>
@@ -116,6 +117,7 @@
       </BaseMain>
     </div>
   </BasePanelRight>
+  </div>
 </template>
 
 <script>
@@ -124,7 +126,8 @@ import BaseMain from '@/components/base-main/base-main.vue'
 import Carousel from './carousel.vue'
 export default {
   props:{
-    info:Object
+    info:Object,
+    deviceInfo:Object
   },
   data() {
     return {
@@ -145,7 +148,7 @@ export default {
   position: absolute;
   top: px-to-rem(8);
   right: px-to-rem(130);
-  z-index: 1;
+  z-index: 999;
   display: flex;
   .txt-num{
     display: flex;