reactor:天气接口联调+周边设备接口联调

src/components/base-panel/base-panel-right.vue

@@ -25,6 +25,7 @@ export default {
   mounted(){
     this.$globalEventBus.$on('hideRightPanel',(val)=>{
       this.isHide = val
+      this.$globalEventBus.$emit('toggleRightPanel', this.isHide)
     })
   },
   watch:{

src/views/hydrologic-info/left.vue

@@ -154,7 +154,7 @@ export default {
           img: iconUrl3,
           bgColor: '##FBC5754C',
           borderColor: '#FBC575',
-          txt: 'PM值',
+          txt: '天气',
           val: '10μm'
         },
         {
@@ -192,9 +192,22 @@ export default {
   methods:{
     getAirInfo(){
        window
-        .requestSDK('/order/air/now', {adcode:'610481'}, {}, 'post')
+        .requestSDK('/order/weather/now', {adcode:'610481'}, {}, 'post')
         .then(async (res) => {
-          
+          this.qxList.forEach((item,index)=>{
+            if(index == 0){
+              item.val = res.data.dew+'℃'
+            }
+            if(index == 1){
+              item.val = res.data.feelsLike +'℃'
+            }
+            if(index == 2){
+              item.val = res.data.text 
+            }
+            if(index == 3){
+              item.val = res.data.windScale +'级'
+            }
+          })
         })
     }
   }

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

@@ -12,10 +12,10 @@
         arrow="never"
         @change="handleMainChange"
       >
-        <el-carousel-item v-for="(item, index) in items" :key="index">
+        <el-carousel-item v-for="(item, index) in previewList" :key="index">
           <div class="image-wrapper">
             <el-image 
-              :src="item.image" 
+              :src="item" 
               :preview-src-list="previewList"
               fit="cover"
               class="main-image"
@@ -35,12 +35,12 @@
       </div>
       <div class="thumbnail-list">
         <div 
-          v-for="(item, index) in items" 
+          v-for="(item, index) in previewList" 
           :key="index"
           :class="['thumbnail-item', { active: currentIndex === index }]"
           @click="switchToSlide(index)"
         >
-          <img :src="item.thumbnail" class="thumbnail-image">
+          <img :src="item" class="thumbnail-image">
         </div>
       </div>
       <div class="nav-btn next-btn" @click="nextSlide">
@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import ImgUrl from '@/assets/image/smart-early-warning/img1.png'
 export default {
     props:{ 
         items:Array
@@ -62,7 +63,11 @@ export default {
   },
   computed: {
     previewList() {
-      return this.items.map(item => item.image);
+     if(this.items.length>0){
+      return this.items
+     }else{
+      return [ImgUrl]
+     }
     }
   },
   methods: {

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

@@ -7,43 +7,56 @@
     <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>
-            <el-collapse v-model="activeNames"  class="v-collapse">
-              <template v-for="(item, index) in listItem">
-                <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.lists.length }}个</div>
-                    </div>
-                  </template>
-                  <div class="list-content">
-                    <div class="item" :class="{active:activeIndex == index+i}" v-for="(item, i) in item.lists" :key="i" @click="toLoadDetail(item,index,i)">
-                      <div class="left">
-                        <img :src="item.imgUrl" alt="" />
+          <template v-if="lists.length > 0">
+            <div class="list-container">
+              <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal"> </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
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page.sync="currentPage"
-              :page-size="pageSize"
-              layout="total, prev, pager, next"
-              :total="total"
-            >
-            </el-pagination>
-          </div>
+                  </el-collapse-item>
+                </template>
+              </el-collapse>
+              <!-- <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>
+          <template v-else>
+            <div class="noData">
+              <img src="@/assets/image/comprehensive/noData.png" alt="" />
+              <div class="txt">暂无预警</div>
+            </div>
+          </template>
         </template>
       </BaseMain>
     </div>
@@ -56,15 +69,16 @@ 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 {
-  data() {    
+  data() {
     return {
-      activeIndex:null,
+      activeIndex: null,
       searchVal: '',
       currentPage: 1,
       pageSize: 6,
       total: 0,
       activeNames: [1, 2, 3, 4],
-      listItem: []
+      lists: [],
+      defaultImg:ImgUrl
     }
   },
   components: {
@@ -72,32 +86,39 @@ export default {
     BaseMain
   },
   mounted() {
-    this.total = this.listItem.length
     this.getData()
   },
   methods: {
     getData() {
-       window
+      window
         .requestSDK(
           '/event/getEventListByType',
           {
-            alarmTimeStart: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-            alarmTimeEnd: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
-            pageNum: 1,
-            pageSize: 10,
-            pageCount: 5,
-            searchType: '0'
+            alarmTimeStart:moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+            alarmTimeEnd: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
           },
           {},
           'post'
         )
         .then(async (res) => {
-          this.listItem = res.data
+          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
+          }
         })
     },
-    toLoadDetail(data,index,i){
-      this.activeIndex = index+i;
-      this.$emit('toLoadDetail',data)
+    toLoadDetail(data, index, i) {
+      this.activeIndex = index + i
+      this.$emit('toLoadDetail', data)
     },
     handleSizeChange() {},
     handleCurrentChange() {}
@@ -185,9 +206,9 @@ export default {
         display: flex;
         justify-content: flex-start;
         gap: px-to-rem(10);
-        background: rgba(60,90,135,0.2);
+        background: rgba(60, 90, 135, 0.2);
         border-radius: px-to-rem(4);
-        border: px-to-rem(1) solid #2D4057;
+        border: px-to-rem(1) solid #2d4057;
         padding: px-to-rem(7);
         .left {
           img {
@@ -217,9 +238,9 @@ export default {
           }
         }
       }
-      .item.active{
+      .item.active {
         border: px-to-rem(1) solid #4f9fff;
-        background: rgba(79,159,255,0.2);
+        background: rgba(79, 159, 255, 0.2);
       }
     }
     :deep(.el-pagination) {
@@ -252,4 +273,17 @@ export default {
     }
   }
 }
+.noData {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  img {
+    margin-top: px-to-rem(70);
+    margin-bottom: px-to-rem(20);
+  }
+  .txt {
+    color: #fff;
+    font-size: px-to-rem(14);
+  }
+}
 </style>

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

@@ -7,8 +7,9 @@
     <div class="warning-container">
       <BaseMain title="预警详情">
         <template v-slot:mainArea>
+          <template v-if="Object.keys(info).length != 0">
           <div class="detail-container">
-            <Carousel :items="items" />
+            <Carousel :items="info.img" />
             <el-collapse v-model="activeNames" class="v-collapse">
               <el-collapse-item title="预警来源" name="1">
                 <div class="form-content">
@@ -104,6 +105,13 @@
               </el-collapse-item>
             </el-collapse>
           </div>
+          </template>
+          <template v-else>
+             <div class="noData">
+              <img src="@/assets/image/comprehensive/noData.png" alt="" />
+              <div class="txt">暂无预警详情</div>
+            </div>
+          </template>
         </template>
       </BaseMain>
     </div>
@@ -114,7 +122,6 @@
 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 {
   props:{
     info:Object
@@ -122,20 +129,6 @@ export default {
   data() {
     return {
       isHide:true,
-      items: [
-        {
-          image: ImgUrl,
-          thumbnail: ImgUrl
-        },
-        {
-          image: ImgUrl,
-          thumbnail: ImgUrl
-        },
-        {
-          image: ImgUrl,
-          thumbnail: ImgUrl
-        }
-      ],
       activeNames: ['1', '2']
     }
   },
@@ -229,4 +222,17 @@ export default {
     }
   }
 }
+.noData {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  img {
+    margin-top: px-to-rem(70);
+    margin-bottom: px-to-rem(20);
+  }
+  .txt {
+    color: #fff;
+    font-size: px-to-rem(14);
+  }
+}
 </style>

src/views/water-station-popup/index.vue

@@ -83,11 +83,23 @@
           <template v-if="monitorList.length > 0">
             <ul>
               <li v-for="(item, index) in monitorList" :key="index" :class="{ active: activeIndex == index }">
-                <span @click="toLoadVideo(item, index)">{{ item.name }}</span>
+                <span @click="toLoadVideo(item, index)">{{ item.devName }}</span>
               </li>
             </ul>
-            <div class="monitor-video">
-              <Artplayer :option="videoOption" :style="style" v-if="artShow" />
+            <div class="monitor-video" v-if="artShow">
+               <EasyPlayer
+             ref="playerRef"
+             playerName="测试"
+             :videoUrl="videoOption.url"
+             class="video-player screenshot"
+             live
+             speed
+             :easyStretch="true"
+             :muted="true"
+             :has-audio="false"
+             :reconnection="true"
+             @click.native.stop
+           />
             </div>
           </template>
           <template v-else>
@@ -105,15 +117,13 @@
 <script>
 import * as echarts from 'echarts'
 import LineChart from './line-chart'
-import Artplayer from '@/components/video-player/video-player.vue'
 import { warning } from '@/utils'
 import { getMonitoringStatistics } from '@/api/monitoringDataApi'
-import flvjs from 'flv.js'
 import moment from 'moment'
 let graphicsLayer = null
 export default {
   name: 'WaterStationPopup',
-  components: { LineChart, Artplayer },
+  components: { LineChart },
   data() {
     return {
       style: {
@@ -122,26 +132,7 @@ export default {
       },
       chartShow: false,
       artShow: false,
-      videoOption: {
-        url: '',
-        isLive: true, //使用直播模式，会隐藏进度条和播放时间
-        autoplay: true,
-        muted: true, //是否静音
-        type: 'flv',
-        autoSize: true,
-        customType: {
-          flv: (video, url, art) => {
-            if (flvjs.isSupported()) {
-              if (art.flv) art.flv.destroy()
-              const flv = flvjs.createPlayer({ type: 'flv', url })
-              flv.attachMediaElement(video)
-              flv.load()
-              art.flv = flv
-              art.on('destroy', () => flv.destroy())
-            }
-          }
-        }
-      },
+      videoOption: { url: ''},
       visible: false,
       typeVal: '1',
       radius: '',
@@ -314,7 +305,7 @@ export default {
         .requestSDK(
           '/ttvideo/video/player/getVideoRealtimeUrl',
           {
-            deviceCode: row.id,
+            deviceCode: row.deviceCode,
             channelCode: row.channelCode,
             netType: '1',
             protocolType: 5,
@@ -358,6 +349,7 @@ export default {
       this.visible = false
       this.radius = ''
       this.typeVal = '1'
+      this.monitorList = []
     }
   }
 }
@@ -440,6 +432,10 @@ export default {
       .monitor-list {
         display: flex;
         justify-content: space-between;
+        .monitor-video{
+          width: calc(100% - px-to-rem(180));
+          height: px-to-rem(230);
+        }
         ul {
           width: px-to-rem(180);
           height: px-to-rem(230);