数据大屏

package.json

@@ -59,6 +59,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/api/bigscreen/index.js

@@ -9,6 +9,15 @@ export function getWeather(params) {
     params
   })
 }
+
+// 边坡
+export function huanjingList() {
+  return request({
+    url: '/system/enviData/getByType',
+    method: 'get',
+  })
+}
+
 // 边坡
 export function bpdev() {
   return request({

src/views/bigscreen/index.vue

@@ -142,21 +142,35 @@
     <!-- <div class="c_0" :class="{ actv: navActv === 0 }">
       <div class="c-1"></div>
     </div> -->
-    <el-dialog
-      title="企业介绍视频"
+    <!-- <el-dialog
+      title="环境监测气象站"
       :visible.sync="comIntroShow"
       :before-close="handleClose1"
       width="70%"
     >
       <video style="width: 100%" controls :src="playUrl"></video>
-    </el-dialog>
+    </el-dialog> -->
     <div class="d_ d_0 first" :class="{ actv: navActv === 0 }">
       <div class="d0 d-1">
         <div class="layerWd1">
           <div class="in-box">
             <div class="tit-bg"></div>
-            <h3 class="el-icon-s-unfold">企业介绍</h3>
-            <div class="cpintro" @click="comIntVideo"></div>
+            <h3 class="el-icon-s-unfold">环境监测气象站</h3>
+            <div class="cpintro1" >
+            </div>
+              <div class="km-thead col02d upop scrollListTitle">
+                  <div>设备名称</div>
+                  <div>报警时间</div>
+                  <div>报警级别</div>
+                </div>
+              <vue-seamless-scroll :data="listData" class="warp">
+                <ul class="item">
+                  <li v-for="(item, index) in listData" :key="index">
+                    <span class="title" v-text="item.title"></span>
+                    <span class="date" v-text="item.date"></span>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
           </div>
         </div>
       </div>
@@ -940,12 +954,16 @@ import {
   indexReserves,
   isNewAlarm,
   newAlarmList,
+  huanjingList
 } from "@/api/bigscreen/index.js";
 import { getComVideo } from "@/api/company.js";
 import "echarts-liquidfill"; // 引入水球图的组件
 import "echarts-gl";
 import { getPie3D, getParametricEquation } from "@/views/bigscreen/chart.js";
 import { listMiddle } from "@/api/reSave/middle";
+
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
 export default {
   // components: { cesium },
   components: {
@@ -955,11 +973,43 @@ export default {
     bpdevicestutas,
     bpwyxyz,
     proddev,
+    vueSeamlessScroll
     // enviLeft,
     // videobig,
   },
   data() {
     return {
+      // 2024-5-25 dabao
+      listData: [{
+          'title': '无缝滚动第一行无缝滚动第一行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第二行无缝滚动第二行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第三行无缝滚动第三行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第四行无缝滚动第四行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第五行无缝滚动第五行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第六行无缝滚动第六行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第七行无缝滚动第七行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第八行无缝滚动第八行',
+          'date': '2017-12-16'
+        }, {
+          'title': '无缝滚动第九行无缝滚动第九行',
+          'date': '2017-12-16'
+        }],
+
+
       playUrl: "",
       comIntroShow: false,
       newAlarmListData: [],
@@ -1332,6 +1382,8 @@ export default {
       this.initLiquidEchart2();
       this.nowWaterData();
       this.indexCl();
+
+      this.getHuanjingList()
     });
 
     this.chartConfig = {
@@ -1370,6 +1422,16 @@ export default {
     },
   },
   methods: {
+    getHuanjingList(){
+      debugger
+      huanjingList()
+        .then((res) => {
+          console.log(res, "环境监测");
+          if (res.code === 200) {
+          }
+        })
+    },
+
     //首页企业介绍视频
     handleClose1() {
       this.comIntroShow = false;
@@ -1564,6 +1626,13 @@ export default {
       alarmNowData(param).then((res) => {
         // console.log(res, "首页报警列表");
         this.indexAlarmData = res;
+        for (let index = 0; index < 20; index++) {
+          this.indexAlarmData.push({
+            equipname: '设备'+index,
+            time: '2024-5-25 '+index
+          })
+          
+        }
       });
     },
     handleClose() {
@@ -5970,4 +6039,37 @@ body .el-dialog__body {
 .activ {
   display: block;
 }
+
+/**
+  2024-5-25 dabao
+*/
+.scrollListTitle {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 40px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+.warp {
+    height: 270px;
+    width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,
+      a {
+        display: block;
+        height: 30px;
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 15px;
+        color: #bff7ff;
+      }
+    }
+  }
 </style>