实时数据新增跑马灯

src/components/DataModal/common/RealtimeLine.vue

@@ -1,6 +1,27 @@
 <template>
   <div class="realtime-line">
-    <div
+    <div style="width: 100%;height: 100%;">
+      <el-carousel indicator-position="outside" :interval="30000" height="95%" arrow="never">
+        <el-carousel-item v-for="(item, index) in Math.ceil(Object.keys(workshopList).length / (x * y))" :key="index">
+          <div style="display: flex;flex-wrap: wrap;height: 100%">
+            <div
+              v-loading="chartLoading"
+              class="chart-box"
+              :class="indexkey % x === 0 ? 'row-first-chart' : ''"
+              v-for="(key, indexkey) in Object.keys(workshopList).slice(index * x * y , (index + 1) * x * y)"
+              :key="key"
+              :style="chartBoxStyle"
+            >
+              <div class="chart-box-title">{{ workshopList[key].workshopName }}</div>
+              <div class="chart-box-content">
+                <div :id="key" style="height: 100%;"/>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <!--<div
       v-loading="chartLoading"
       class="chart-box"
       :class="index % x === 0 ? 'row-first-chart' : ''"
@@ -12,16 +33,16 @@
       <div class="chart-box-content">
         <div :id="key" style="height: 100%"/>
       </div>
-    </div>
+    </div>-->
   </div>
 </template>
 
 <script>
-import {historyChartAllData} from '@/api/HistoryData'
-import {findByAcquisitionStationId} from '@/api/Workshop'
-import {findYMax} from '@/api/DashboardLayout'
+import { historyChartAllData } from '@/api/HistoryData'
+import { findByAcquisitionStationId } from '@/api/Workshop'
+import { findYMax } from '@/api/DashboardLayout'
 import moment from 'moment'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   name: 'RealtimeLine',
@@ -214,6 +235,9 @@ export default {
       }
     },
   },
+  /*mounted () {
+    console.log('======================' + Object.keys(this.workshopList).length)
+  },*/
   methods: {
     async initData() {
       this.initCompleted = false
@@ -338,7 +362,10 @@ export default {
     /*justify-content: flex-start;*/
     align-items: center;
 
-
+    .chart-row {
+      display: flex; /* 使用 flex 布局 */
+      height: 100%;
+    }
     .chart-box {
       display: flex;
       flex-direction: column;
@@ -357,4 +384,7 @@ export default {
       /*margin-left: 0 !important;*/
     }
   }
+  .el-carousel {
+    height: 100%;
+  }
 </style>

src/main.js

@@ -8,9 +8,12 @@ import './plugins/element.js'
 import './plugins/use.js'
 import { VueAxios } from './utils/request'
 import echarts from '@/plugins/echarts'
+import { Carousel, CarouselItem } from 'element-ui'
 
 Vue.config.productionTip = false
 
+Vue.use(Carousel)
+Vue.use(CarouselItem)
 Vue.use(VueAxios)
 
 Vue.prototype.$echarts = echarts