src/assets/css/main.css

@@ -1696,6 +1696,51 @@
   cursor: pointer;
 }
 
+.dataModel .view-new {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 50px 30px 0;
+}
+
+.dataModel .view-new .list-view {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+.dataModel .view-new .list-view img {
+  width: 60px;
+  height: 60px;
+}
+
+.dataModel .view-new .list-view .text {
+  text-align: center;
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.dataModel .view-new .list-view .number {
+  width: 80px;
+  height: 30px;
+  background: url(../image/real-time-text.png) no-repeat center;
+  background-size: 100% 100%;
+  font-size: 16px;
+  font-family: Arial;
+  font-weight: bold;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dataModel .view-new .list-view .number.red {
+  color: #fc7d6a;
+}
+
 .realTime {
   width: 100%;
   height: 100%;

src/assets/css/main.scss

@@ -1781,6 +1781,51 @@
     }
 }
 
+.dataModel{
+    .view-new{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 50px 30px 0;
+        .list-view{
+            flex-shrink: 0;
+            display: flex;
+            // flex-direction: column;
+            align-items: center;
+            margin-right: 20px;
+            margin-bottom: 20px;
+            img {
+                width: 60px;
+                height: 60px;
+
+            }
+
+            .text {
+                text-align: center;
+                margin: 5px 0;
+                font-size: 14px;
+            }
+
+            .number {
+                width: 80px;
+                height: 30px;
+                background: url(../image/real-time-text.png) no-repeat center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-family: Arial;
+                font-weight: bold;
+                color: #FFFFFF;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                &.red{
+                    color: rgba(252, 125, 106, 1);
+                }
+            }
+        }
+    }
+}
 .realTime {
     width: 100%;
     height: 100%;

src/views/page/realTime.vue

@@ -57,9 +57,9 @@
             </div>
             <div class="flex-view border-none warning-btn">
                 <div class="input-btn ">
-                    <!-- <div class="btn blue">
+                    <div class="btn blue" @click='openDataModel'>
-            <img src="../../assets/image/real-time-icon1.png" alt="" />3D动态水肥监控
+            查看全部实时数据
-        </div> -->
+        </div>
                     <div class="btn green" @click="openWarn">
                         <img src="../../assets/image/real-time-icon2.png" alt="" />短信报警
                     </div>
@@ -286,6 +286,23 @@
                 </div>
             </div>
         </div>
+        
+        <el-dialog title="实时数据" class="vrcode-model" :append-to-body="true" :visible.sync="dataModel" width="70%">
+                 <el-button class="model-return-btn" type="primary" @click="dataModel=false">返 回</el-button>
+            <div class="vrcode-model-title vrcode-model-title-282">实时数据</div>
+             <div class="dataModel">
+                <div class="view-new">
+                    <div class="list-view" v-for="item, index in list " :key="index">
+                        <img :src="item.img" alt="">
+                        <div>
+                            <div class="text">{{ item.name }}</div>
+                            <div class="number" :class="item.num == '故障' ? 'red' : ''"> {{ getControlData(item) }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+      
+        </el-dialog>
 
         <el-dialog title="请选择要显示的设备" :append-to-body="true" :visible.sync="addModel" width="70%">
             <div class="model-title">请选择要显示的设备</div>
@@ -442,6 +459,7 @@ export default {
             sunrise: "00:00",
             sunset: "00:00",
             statusList: [],
+            dataModel:false,//全部实时数据弹窗
 
             time: null,//右上角时间
             list: [],
@@ -540,6 +558,9 @@ export default {
         this.$bus.$off('refreshTime')
     },
     methods: {
+        openDataModel(){
+            this.dataModel=true
+        },
         tableRowClassName({ row, rowIndex }) {
             if (rowIndex % 2 == 1) {
                 return 'warning-row';