王子文 2022年4月2日 16点50分 电厂大屏第三页

ui/src/views/monitor/elec/analysisTopCenter.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <analysisChartTopCenter :xDataTopCenter="xDataTopCenter" :yDataTopCenter="yDataTopCenter"></analysisChartTopCenter>
+  </div>
+</template>
+
+<script>
+import analysisChartTopCenter from './echart/analysisChart/analysisChartTopCenter';
+export default {
+  props:['xDataTopCenter','yDataTopCenter'],
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopCenter
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/analysisTopLeft.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <analysisChartTopLeft :xDataTopLeft="xDataTopLeft" :yDataTopLeft="yDataTopLeft"></analysisChartTopLeft>
+  </div>
+</template>
+
+<script>
+import analysisChartTopLeft from './echart/analysisChart/analysisChartTopLeft';
+export default {
+  props:['xDataTopLeft','yDataTopLeft'],
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopLeft
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/analysisTopRight.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <analysisChartTopRight :xDataTopRight="xDataTopRight" :yDataTopRight="yDataTopRight"></analysisChartTopRight>
+  </div>
+</template>
+
+<script>
+import analysisChartTopRight from './echart/analysisChart/analysisChartTopRight';
+export default {
+  props:['xDataTopRight','yDataTopRight'],
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopRight
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/echart/analysisChart/analysisChartBottomRight1.vue

@@ -0,0 +1,56 @@
+<template>
+  
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props:['xDataTopCenter','yDataTopCenter'],
+    data() {
+        return {
+        chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"));
+            let option = {
+        tooltip: {
+            formatter: '{a} <br/>{b} : {c}%'
+        },
+        series: [
+            {
+                name: 'Pressure',
+                type: 'gauge',
+                progress: {
+                    show: true
+                },
+                detail: {
+                    valueAnimation: true,
+                    formatter: '{value}'
+                },
+                data: [
+                    {
+                        value: 50,
+                        name: 'SCORE'
+                    }
+                ]
+            }
+        ]
+    };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopCenter.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div id="analysisChartTopCenter" style="width:6rem;height:4rem;margin:35px auto;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props:['xDataTopCenter','yDataTopCenter'],
+    data() {
+        return {
+        chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"));
+            let option = {
+                title: {
+                    text: '设备 1',
+                    fontSize: 20,
+                    textStyle: {
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    },
+                    x: 'center'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                            color: '#DCDCDC'
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: this.yDataTopCenter,
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: this.xDataTopCenter,
+                        
+                    }
+                ]
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopLeft.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div id="analysisChartTopLeft" style="width:6rem;height:4rem;margin:35px auto;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props:['xDataTopLeft','yDataTopLeft'],
+    data() {
+        return {
+        chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"));
+            let option = {
+                title: {
+                    text: '设备 1',
+                    fontSize: 20,
+                    textStyle: {
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    },
+                    x: 'center'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                            color: '#DCDCDC'
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: this.yDataTopLeft,
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: this.xDataTopLeft,
+                        
+                    }
+                ]
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopRight.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div id="analysisChartTopRight" style="width:6rem;height:4rem;margin:35px auto;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props:['xDataTopRight','yDataTopRight'],
+    data() {
+        return {
+        chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"));
+            let option = {
+                title: {
+                    text: '设备 1',
+                    fontSize: 20,
+                    textStyle: {
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    },
+                    x: 'center'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                            color: '#DCDCDC'
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: this.yDataTopRight,
+                    axisLabel: {
+                        fontSize: 14,
+                        textStyle: {
+                            fontWeight: 'bold',
+                            color: '#DCDCDC'
+                        }
+                    },
+                    nameTextStyle: {
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#DCDCDC'
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: this.xDataTopRight,
+                        
+                    }
+                ]
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elec/frontElecThree.vue

@@ -1,554 +1,102 @@
 <template>
-  <div id="frontTwo">
-    <div class="bg-color-black">
-      <div class="content-box" style="display:flex;flex-direction:row">
-         <div style="width:500px; flex:0.9;margin-right: 20px;">
-           <el-table
-                ref="table"
-                max-height="1000px"
-                :data="tableData"
-                :span-method="objectSpanMethod"
-                border
-                style="  margin-top: 20px">
-                <el-table-column
-                  label="#1GTG"
-                  align="center"
-                >
-                <el-table-column
-                  prop="name"
-                  label="名称"
-                  >
-                </el-table-column>
-                <el-table-column
-                  prop="tNo"
-                  width="120"
-                  label="编号">
-                </el-table-column>
-                <el-table-column
-                  prop="value"
-                  width="120"
-                  label="数值">
-                </el-table-column>
-                </el-table-column>
-              </el-table>
-         </div>
-         <div style="width:500px;  flex:0.9;margin-right: 20px;">
-              <el-table
-                ref="table1"
-                max-height="1000px"
-                :data="tableData1"
-                :span-method="objectSpanMethod1"
-                border
-                style=" margin-top: 20px">
-                <el-table-column
-                  label="BP"
-                  align="center"
-                >
-                  <el-table-column
-                    prop="name"
-                    label="名称"
-                    >
-                  </el-table-column>
-                  <el-table-column
-                    prop="tNo"
-                    width="120"
-                    label="编号">
-                  </el-table-column>
-                  <el-table-column
-                    prop="value"
-                    width="120"
-                    label="数值">
-                  </el-table-column>
-                </el-table-column>
-              </el-table>
-            </div>
-         <div style="width:500px;  flex:0.9;">
-            <el-table
-              ref="table2"
-              max-height="1000px"
-              :data="tableData2"
-              :span-method="objectSpanMethod2"
-              border
-              style=" margin-top: 20px">
-              <el-table-column
-                label="HRSG"
-                align="center"
-              >
-                <el-table-column
-                  prop="group"
-                  label="组"
-                  width="50"
-                >
-                </el-table-column>
-                <el-table-column
-                  prop="name"
-                  label="名称"
-                  >
-                </el-table-column>
-                <el-table-column
-                  prop="tNo"
-                  width="120"
-                  label="编号">
-                </el-table-column>
-                <el-table-column
-                  prop="value"
-                  width="120"
-                  label="数值">
-                </el-table-column>
-              </el-table-column>
-            </el-table>
-          </div>
-        </div>
-      </div>
-    </div>
+  <!-- 电厂大屏第三页：全厂在线分析仪表 -->
+  <div id="frontThree">
+      <!-- 第一排开始 -->
+      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+        <analysisTopLeft :xDataTopLeft="xDataTopLeft" :yDataTopLeft="yDataTopLeft" style="margin-left:0px;margin-top:0px;"></analysisTopLeft>
+      </dv-border-box-10>
+      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+        <analysisTopCenter :xDataTopCenter="xDataTopCenter" :yDataTopCenter="yDataTopCenter" style="margin-left:0px;margin-top:0px;"></analysisTopCenter>
+      </dv-border-box-10>
+      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+        <analysisTopRight :xDataTopRight="xDataTopRight" :yDataTopRight="yDataTopRight" style="margin-left:0px;margin-top:0px;"></analysisTopRight>
+      </dv-border-box-10>
+      <!-- 第一排结束 -->
+      <!-- 第二排开始 -->
+      <dv-border-box-12 style="height:45%;width:50%;display:inline-block;">
+
+      </dv-border-box-12>
+      <dv-border-box-12 style="height:45%;width:50%;display:inline-block;top:-28px;">
+        <h1 style="text-align:center;margin:30px 0px 20px 0px;">预警信息</h1>
+        <dv-scroll-board :config="config" style="width:800px;height:300px;margin-left:15px;"/>
+      </dv-border-box-12>
+      <!-- 第二排结束 -->
+  </div>
 </template>
 
 <script>
+  import analysisTopLeft from './analysisTopLeft.vue';
+  import analysisTopCenter from './analysisTopCenter.vue';
+  import analysisTopRight from './analysisTopRight.vue';
   export default {
+    name: "materialBalance",
+    components: { analysisTopLeft, analysisTopCenter, analysisTopRight },
     data() {
       return {
-        spanArr: [], //声明一个数组
-        spanArr1:[],
-        spanArr2:[],
-        tableData: [{
-          name: '1GTG Gas Detector for  Accessory',
-          tNo: '45HA1',
-          value:'123'
-          },{
-            name: '1GTG Gas Detector for  Accessory',
-            tNo: '45HA2',
-            value:'1423'
-          },{
-            name: '1GTG Gas Detector for  Accessory',
-            tNo: '45HA3',
-            value:'234'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA5',
-            value:'123'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA6',
-            value:'75'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA7',
-            value:'123423'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA8',
-            value:'123423'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA9',
-            value:'2431'
-          },{
-            name: '1GTG Gas Detector for  Accessory',
-            tNo: '45HA1',
-            value:'123'
-          },{
-            name: '1GTG Gas Detector for  Accessory',
-            tNo: '45HA2',
-            value:'1423'
-          },{
-            name: '1GTG Gas Detector for  Accessory',
-            tNo: '45HA3',
-            value:'234'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA5',
-            value:'123'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA6',
-            value:'75'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA7',
-            value:'123423'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA8',
-            value:'123423'
-          },{
-            name: '1GTG Gas Detector for  DLN',
-            tNo: '45HA9',
-            value:'2431'
-          },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA7',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA8',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA9',
-          value:'2431'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA7',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA8',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA9',
-          value:'2431'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA7',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA8',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA9',
-          value:'2431'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA7',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA8',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA9',
-          value:'2431'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA7',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA8',
-          value:'123423'
-        },{
-          name: '1GTG Gas Detector for  DLN',
-          tNo: '45HA9',
-          value:'2431'
-        },
+        // 第一排左上角柱状图横纵轴数据
+        xDataTopLeft: [
+          { value: 523, itemStyle: { color: '#6BE5EA' } },
+          { value: 239, itemStyle: { color: '#4A7CF9' } },
+          { value: 424, itemStyle: { color: '#8378EA' } }
         ],
-        tableData1: [{
-            name: 'CW-H2',
-            tNo: 'QT61001',
-            value:'456'
-            },{
-            name: 'CW-H2',
-            tNo: 'QT61002',
-            value:'4'
-          },{
-          name: 'CW-H2',
-          tNo: 'QT61003',
-          value:'456'
-        },{
-          name: 'CW-H2',
-          tNo: 'QT61004',
-          value:'63'
-        },{
-          name: 'CW-H2',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'CO2 Detector at CCR',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'HVAC Air Intake LEL Monitoring',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: ' CO leakage #1HRSG offgas system',
-          tNo: 'QT61005',
-          value:'234'
-        },{
-          name: 'NH3 leakage from YPC',
-          tNo: 'QT61005',
-          value:'234'
-        }],
-        tableData2: [{
-          group: '#1',
-          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
-          tNo: 'AI82201',
-          value:'234'
-        },{
-          group: '#1',
-          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
-          tNo: 'AI82201',
-          value:'234'
-        },{
-          group: '#1',
-          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
-          tNo: 'AI82201',
-          value:'234'
-        },{
-          group: '#1',
-          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
-          tNo: 'AI82201',
-          value:'234'
-        }],
-
+        yDataTopLeft: ['指标 1', '指标 2', '指标 3'],
+        // 第一排中间柱状图横纵轴数据
+        xDataTopCenter: [
+          { value: 523, itemStyle: { color: '#6BE5EA' } },
+          { value: 239, itemStyle: { color: '#4A7CF9' } },
+          { value: 424, itemStyle: { color: '#8378EA' } }
+        ],
+        yDataTopCenter: ['指标 1', '指标 2', '指标 3'],
+        // 第一排右上角柱状图横纵轴数据
+        xDataTopRight: [
+          { value: 523, itemStyle: { color: '#6BE5EA' } },
+          { value: 239, itemStyle: { color: '#4A7CF9' } },
+          { value: 424, itemStyle: { color: '#8378EA' } }
+        ],
+        yDataTopRight: ['指标 1', '指标 2', '指标 3'],
+        // 第二排右下角轮播表表头、表数据、表配置
+        tableHeader: ['时间', '预警信息', '字段', '值'],
+        tableData: [
+          ['<span class="span-rw">2022-4-2 13:43</span>', '预警信息......', '字段1', '值1'],
+          ['2022-4-2 13:43', '预警信息......', '字段2', '值3'],
+          ['2022-4-2 13:43', '预警信息......', '<span>字段3<i class="icon icon-shang"></i></span>', '值3'],
+          ['2022-4-2 13:43','预警信息......', '字段4', '值4', ],
+          ['2022-4-2 13:43','预警信息......', '字段5', '值5', ],
+          ['2022-4-2 13:43','预警信息......', '字段6', '值6', ],
+          ['2022-4-2 13:43','预警信息......', '字段7', '值7', ],
+          ['2022-4-2 13:43','预警信息......', '字段8', '值8', ],
+          ['2022-4-2 13:43','预警信息......', '字段9', '值9', ],
+          ['2022-4-2 13:43', '预警信息......', '字段10', '值10']
+        ],
+        config: {},
       };
     },
-    name: "materialBalance",
-    components: {
-    },
-    mounted: function() {
-      this.tableDatas();  //加载数据就调用该方法
-      this.tableDatas1();  //加载数据就调用该方法
-      this.tableDatas2();  //加载数据就调用该方法
-      this.tableAuto();
-      this.tableAuto1();
-      this.tableAuto2();
-    },
     methods: {
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {   //合并第一列
-          const _row = this.spanArr[rowIndex];
-          const _col = _row > 0 ? 1 : 0;
-          return {
-            rowspan: _row,
-            colspan: _col
-          };
-        }
-      },
-      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {   //合并第一列
-          const _row = this.spanArr1[rowIndex];
-          const _col = _row > 0 ? 1 : 0;
-          return {
-            rowspan: _row,
-            colspan: _col
-          };
+      /**
+       * 第二排右下角轮播表配置初始化
+       */
+      initCarousel() {
+        this.config = {
+          data: this.tableData,
+          header: this.tableHeader,
+          rowNum: 6,
+          headerBGC: '#00BAFF',
+          oddRowBGC: '#003B51',
+          evenRowBGC: '#0A2732',
+          waitTime: 1000,
+          align: 'center',
+          headerHeight: 50
         }
-      },
-      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {   //合并第一列
-          const _row = this.spanArr2[rowIndex];
-          const _col = _row > 0 ? 1 : 0;
-          return {
-            rowspan: _row,
-            colspan: _col
-          };
-        }
-      },
-      tableDatas() {
-        let contactDot = 0;
-        this.tableData.forEach((item, index) => {
-          item.index = index;
-          if (index === 0) {
-            this.spanArr.push(1);
-          } else {
-            if (item.name === this.tableData[index - 1].name) {
-              this.spanArr[contactDot] += 1;
-              this.spanArr.push(0);
-            } else {
-              this.spanArr.push(1);
-              contactDot = index;
-            }
-          }
-        });
-      },
-      tableDatas1() {
-        let contactDot = 0;
-        this.tableData1.forEach((item, index) => {
-          item.index = index;
-          if (index === 0) {
-            this.spanArr1.push(1);
-          } else {
-            if (item.name === this.tableData1[index - 1].name) {
-              this.spanArr1[contactDot] += 1;
-              this.spanArr1.push(0);
-            } else {
-              this.spanArr1.push(1);
-              contactDot = index;
-            }
-          }
-        });
-      },
-      tableDatas2() {
-        let contactDot = 0;
-        this.tableData2.forEach((item, index) => {
-          item.index = index;
-          if (index === 0) {
-            this.spanArr2.push(1);
-          } else {
-            if (item.group === this.tableData2[index - 1].group) {
-              this.spanArr2[contactDot] += 1;
-              this.spanArr2.push(0);
-            } else {
-              this.spanArr2.push(1);
-              contactDot = index;
-            }
-          }
-        });
-      },
-      //滚动table
-      tableAuto(){
-        // 拿到表格挂载后的真实DOM
-        const table = this.$refs.table
-        // 拿到表格中承载数据的div元素
-        const divData = table.bodyWrapper
-        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
-        setInterval(() => {
-          // 元素自增距离顶部1像素
-          divData.scrollTop += 1
-          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
-          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
-            // 重置table距离顶部距离
-            divData.scrollTop = 0
-          }
-        }, 100)
-      },
-      //滚动table1
-      tableAuto1(){
-        // 拿到表格挂载后的真实DOM
-        const table = this.$refs.table1
-        // 拿到表格中承载数据的div元素
-        const divData = table.bodyWrapper
-        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
-        setInterval(() => {
-          // 元素自增距离顶部1像素
-          divData.scrollTop += 1
-          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
-          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
-            // 重置table距离顶部距离
-            divData.scrollTop = 0
-            // setInterval(() => {
-            //   divData.scrollTop = 0
-            // },3000)
-          }
-        }, 100)
-      },
-      //滚动table1
-      tableAuto2(){
-        // 拿到表格挂载后的真实DOM
-        const table = this.$refs.table2
-        // 拿到表格中承载数据的div元素
-        const divData = table.bodyWrapper
-        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
-        setInterval(() => {
-          // 元素自增距离顶部1像素
-          divData.scrollTop += 1
-          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
-          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
-            // 重置table距离顶部距离
-            divData.scrollTop = 0
-            // setInterval(() => {
-            //   divData.scrollTop = 0
-            // },3000)
-          }
-        }, 100)
       }
+    },
+    mounted () {
+      this.initCarousel();
     }
   }
 </script>
 
 <style lang="scss">
-  #frontTwo {
+  #frontThree {
     padding: 0.2rem;
     height: 11.7rem;
     min-width: 3.75rem;
@@ -568,7 +116,6 @@
         padding-top: 0.125rem;
       }
     }
-
     .bottom-data {
       .item-box {
         float: right;