修改掘进前端样式

src/components/gas/echart/bottom/bottomLeftChart/index.vue

@@ -79,7 +79,9 @@ export default {
       // 收到消息的回调
       this.websocket.onmessage = (event) => {
         // console.log("onmessage", event);
-        this.addData(JSON.parse(event.data));
+        if(JSON.parse(event.data).length) {
+          this.addData(JSON.parse(event.data));
+        }
       };
       // 连接关闭的回调
       this.websocket.onclose = () => {

src/components/gas/echart/bottom/bottomRightChart/index.vue

@@ -62,7 +62,9 @@ export default {
       // 收到消息的回调
       this.websocket.onmessage = (event) => {
         // console.log("onmessage", event);
-        this.addData(JSON.parse(event.data));
+         if(JSON.parse(event.data).length) {
+          this.addData(JSON.parse(event.data));
+        }
       };
       // 连接关闭的回调
       this.websocket.onclose = () => {

src/components/tunneling/dashBoard.vue

@@ -1,153 +1,111 @@
 <template>
-<div id="myChart" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="myChart"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-    },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('myChart'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode2')
-            this.allData = ret
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("myChart")
+      );
+    },
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
 
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            const showValue = showData[0].xitongdianya
-
-
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '系统电压:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 2500,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
+      this.chartInstance.setOption(option);
+    },
 
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/hard.vue

@@ -1,9 +1,10 @@
 <template>
-<div id="hard" :style="{width: '100%', height: '100%'}"></div>
+<div id="hard" style="width: 140px;height: 240px;"></div>
 </template>
  
 <script >
-    var showValue = new Array()
+    // var showValue = new Array()
+     var showValue =  [7,-6,7,6,7,-6,7,6,7,-6,7,6];
 const colors = ['#5470C6', '#91CC75', '#EE6666'];
     export default {
     data(){
@@ -20,18 +21,18 @@ const colors = ['#5470C6', '#91CC75', '#EE6666'];
     }, 
     mounted(){
         this.initChart() //函数调用
-        this.getData()
+        this.updateChart()
     //  对窗口大小变化的事件进行监听
         // window.addEventListener('resize', this.screenAdapter)
     },
         // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+    // destroyed () {
+    //     clearInterval(this.timerId)
+    //     // 在组件销毁的时候, 需要将监听器取消掉
+    //     // window.removeEventListener('resize', this.screenAdapter)
 
 
-    },
+    // },
     methods:{
         initChart(){
             this.chartInstance = this.$echarts.init(document.getElementById('hard'))
@@ -44,39 +45,43 @@ const colors = ['#5470C6', '#91CC75', '#EE6666'];
             })
         },
 
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode3')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+        // async getData () {
+        //     // 请求数据
+        //     const { data: ret } = await this.$http.get('hbase/getJSON')
+        //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode3')
+        //     this.allData = ret
+        //   // 对数据排序
+        //     this.allData.sort((a,b) => {{
+        //         return a.value-b.value //从小到大排序
+        //     }})
+        //     // 每1个元素显示一页
+        //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
+        //     // 获取完数据， 更新图标
+        //     this.updateChart()
 
-            // // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+        //     // // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        //     this.startInterval()
 
-        },
+        // },
         updateChart(){
             // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)    
-            const tempDate = showData[0].gejieguiji
-            showValue.push(tempDate)
-            if(showValue.length>=12){
-                for(let i=1; i<=showValue.length; i++){
-                    showValue.pop()
-                }
-            }
+            // const start = (this.currentPage - 1) * 1
+            // const end = this.currentPage * 1
+            // const showData = this.allData.slice(start, end)    
+            // const tempDate = showData[0].gejieguiji
+            // showValue.push(tempDate)
+            // if(showValue.length>=12){
+            //     for(let i=1; i<=showValue.length; i++){
+            //         showValue.pop()
+            //     }
+            // }
             // const testData = [7,-6,7,6,7,-6,7,6,7,-6,7,6]
            var option = {
+            //    title: {
+            //         text: '行走状态',
+            //         show: true
+            //     },
             color: colors,
             tooltip: {
                 trigger: 'axis',
@@ -233,22 +238,22 @@ const colors = ['#5470C6', '#91CC75', '#EE6666'];
             // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
             // this.startInterval()
         },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 //this.getData（）
-                 this.updateChart()
-            },3000)
-        }
+        // startInterval () {
+        //     // 每个3秒执行一次
+        //     setInterval(() => { 
+        //         // 保险操作
+        //         if(this.timeId){
+        //             clearInterval(this.timerId)
+        //         }
+        //          this.currentPage++
+        //         //  当页数超过总页数是， 从头开始
+        //          if(this.currentPage > this.totalPage){
+        //              this.currentPage = 1
+        //          }
+        //          //this.getData（）
+        //          this.updateChart()
+        //     },3000)
+        // }
   }
 }
 </script>

src/components/tunneling/ruler.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="rulerChart" style="width: 100%;height: 100%;"></div>
+  <div id="rulerChart" style="width: 100%;height: 140px;"></div>
 </template>
 
 <script>
@@ -8,7 +8,7 @@
     var kd2 = []
     var Gradient = [];
     var leftColor = '';
-    var showValue = '';
+    var showValue = 20;
     var boxPosition = [65, 0];
     var TP_txt = ''
     // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
@@ -49,19 +49,19 @@ data () {
     mounted () {
         this.initChart()
 
-        this.getData()
+        this.updateChart()
     //  对窗口大小变化的事件进行监听
         // window.addEventListener('resize', this.screenAdapter)
 
 
     },
-    destroyed () {
-      clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+    // destroyed () {
+    //   clearInterval(this.timerId)
+    //     // 在组件销毁的时候, 需要将监听器取消掉
+    //     // window.removeEventListener('resize', this.screenAdapter)
 
 
-    },
+    // },
     methods: {
         //初始化echarts实例对象
 
@@ -78,31 +78,31 @@ data () {
             })
         },
 
-        async getData() {
-            // 请求数据 allData
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode1')
-            this.allData = ret
-            // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
-
-            // 获取完数据， 更新图标
-            this.updateChart()
-
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
-
-        },
+        // async getData() {
+        //     // 请求数据 allData
+        //     const { data: ret } = await this.$http.get('hbase/getJSON')
+        //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode1')
+        //     this.allData = ret
+        //     // 对数据排序
+        //     this.allData.sort((a,b) => {{
+        //         return a.value-b.value //从小到大排序
+        //     }})
+        //     // 每1个元素显示一页
+        //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        //     // 获取完数据， 更新图标
+        //     this.updateChart()
+
+        //     // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        //     this.startInterval()
+
+        // },
         updateChart(){
             // 每一页显示1个数据， 获取5个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)    
-            const showValue = showData[0].xingzouzhuangtai
+            // const start = (this.currentPage - 1) * 1
+            // const end = this.currentPage * 1
+            // const showData = this.allData.slice(start, end)    
+            // const showValue = showData[0].xingzouzhuangtai
  
             const colors = ['#5470c6','#91cc75'] 
             const option = {
@@ -111,11 +111,11 @@ data () {
                     left :'20%',
                     bottom:'5%'
                 },
-                title: {
-                    text: '行走状态',
-                    color:'pink',
-                    show: true
-                },
+                // title: {
+                //     text: '行走状态',
+                //     color:'pink',
+                //     show: true
+                // },
                 yAxis: [{
                     type:'value',
                     name:'left',
@@ -174,21 +174,7 @@ data () {
                 ]}
             this.chartInstance.setOption(option)
         },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
+ 
 
 
     }

src/components/tunneling/six/five.vue

@@ -1,160 +1,111 @@
 <template>
-<div id="five" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="five"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("five")
+      );
     },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('five'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
-
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            // const showValue = this.showData.map((item) =>{
-            //     return item
-            // })
-            const showValue = showData[0].fengjidianliu
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '风机电流:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 500,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15                    
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/six/four.vue

@@ -1,160 +1,111 @@
 <template>
-<div id="four" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="four"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("four")
+      );
     },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('four'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
-
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            // const showValue = this.showData.map((item) =>{
-            //     return item
-            // })
-            const showValue = showData[0].eryundianliu
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '二运电流:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 150,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15     
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/six/one.vue

@@ -1,157 +1,111 @@
 <template>
-<div id="one" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="one"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("one")
+      );
     },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('one'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
-
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            const showValue = showData[0].youbengdianliu
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '油泵电流:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 1200,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/six/three.vue

@@ -1,160 +1,111 @@
 <template>
-<div id="three" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="three"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("three")
+      );
     },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('three'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
-
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            // const showValue = this.showData.map((item) =>{
-            //     return item
-            // })
-            const showValue = showData[0].jiegaodianliu
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '截高电流:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 1200,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15     
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/six/two.vue

@@ -1,160 +1,111 @@
 <template>
-<div id="two" :style="{width: '100%', height: '100%'}"></div>
+  <div
+    id="two"
+    :style="{width: '100%', height: '100%'}"
+  ></div>
 </template>
  
 <script type="text/ecmascript-6">
-    export default {
-    data(){
-      return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-      }
-    }, 
-    mounted(){
-        this.initChart() //函数调用
-        this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-    },
-        // Vue生命周期 - 销毁时
-    destroyed () {
-        clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+export default {
+  data() {
+    return {
+      chartInstance: null,
+      allData: null, // 服务器返回的数据
 
+    };
+  },
+  mounted() {
+    this.initChart(); //函数调用
+    // this.getData();
+    this.updateChart();
+  },
 
+  methods: {
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("two")
+      );
     },
-    methods:{
-        initChart(){
-            this.chartInstance = this.$echarts.init(document.getElementById('two'))
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
-
-        async getData () {
-            // 请求数据
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-          // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每1个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+    updateChart() {
 
+      const option = {
+        grid: {
+          height: 200,
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0,
         },
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)
-            // const showValue = this.showData.map((item) =>{
-            //     return item
-            // })
-            const showValue = showData[0].jiedidianliu
-            const option = {
-                tooltip : {
-                formatter: "{a} <br/>{c} {b}"
-                },
-                toolbox: {
-                    show: true,
-                    feature: {
-                        restore: {show: true},
-                        saveAsImage: {show: true}
-                    }
-                },
-                series : [
-                {
-                    name: '截低电流:',
-                    type: 'gauge',
-                    z: 3,
-                    min: 0,
-                    max: 1200,
-                    splitNumber: 10,
-                    radius: '100%',
-                    axisLine: {
-                        lineStyle: {
-                            width: 10,
-                            color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
-                        }
-                    },
-                    axisTick: {
-                        length: 15,
-                        lineStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    //刻度分割线样式
-                    splitLine: {
-                        length: 10,
-                        lineStyle: {
-                            color: 'white'
-                        }
-                    },
-                    //刻度数字样式
-                    axisLabel: {
-                        fontWeight:'bold',
-                        color: '#0085FF',
-                        fontSize:15 
-                    },
-                    detail : {
-                        //说明数字大小
-                        formatter: function (value) {
-                            return value;
-                        },
-                        offsetCenter:['0%','80%'],
-                        fontWeight: 'bolder',
-                        borderRadius: 3,
-                        backgroundColor: '#0085FF',
-                        fontSize:30,
-                        width: 100,
-                        color: 'white',
-                        padding:[5,15,2,15]
-                    },
-                    data:[{
-                        value:showValue
-                    }]
-                },
-            ]
-        }
-        this.chartInstance.setOption(option)
-        },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
-  }
-}
+        series: [
+          {
+            name: "仪表盘",
+            type: "gauge",
+            min: 0,
+            max: 2500,
+            splitNumber: 10,
+            // "axisLine": {
+            //   "lineStyle": {
+            //     "color": [
+            //       [
+            //         0.2,
+            //         "#5DD1FA"
+            //       ],
+            //       [
+            //         1,
+            //         "#f7f9fc"
+            //       ]
+            //     ],
+            //     "width": 10
+            //   }
+            // },
+            axisLabel: {
+              distance: -60,
+              show: true,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+            },
+            itemStyle: {
+              show: true,
+            },
+            title: {
+              color: "#7f7f7f",
+              fontSize: 16,
+              fontWeight: "bolder",
+            },
+            detail: {
+              offsetCenter: [0, 0],
+              textStyle: {
+                fontSize: "18",
+                fontWeight: "bolder",
+                color: "#000",
+              },
+            },
+            pointer: {
+              show: true,
+            },
+            data: [
+              {
+                name: "系统电压",
+                value: 2000,
+                itemStyle: { color: "#00ccee" },
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+  },
+};
 </script>
  
 <style scoped>
- 
 </style>

src/components/tunneling/temporature-two.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="tempChart2" style="width: 100%;height: 90%;"></div>
+  <div id="tempChart2" style="width: 100%;height: 150px;"></div>
 </template>
 
 <script>
@@ -7,7 +7,7 @@
     var kd = [];
     var Gradient = [];
     var leftColor = '';
-    var showValue = '';
+    var showValue = 30;
     var boxPosition = [65, 0];
     var TP_txt = ''
     // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
@@ -79,20 +79,21 @@ export default {
     },
     mounted () {
         this.initChart()
+        this.updateChart()
 
-        this.getData()
+        // this.getData()
     //  对窗口大小变化的事件进行监听
         // window.addEventListener('resize', this.screenAdapter)
 
 
     },
-    destroyed () {
-      clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+    // destroyed () {
+    //   clearInterval(this.timerId)
+    //     // 在组件销毁的时候, 需要将监听器取消掉
+    //     // window.removeEventListener('resize', this.screenAdapter)
 
 
-    },
+    // },
     methods: {
         //初始化echarts实例对象
 
@@ -100,41 +101,35 @@ export default {
         initChart () {
             this.chartInstance = this.$echarts.init(document.getElementById('tempChart2'))
     
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
+ 
         },
 
-        async getData() {
-            // 请求数据 allData
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode5')
-            this.allData = ret
-            // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每5个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+        // async getData() {
+        //     // 请求数据 allData
+        //     const { data: ret } = await this.$http.get('hbase/getJSON')
+        //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode5')
+        //     this.allData = ret
+        //     // 对数据排序
+        //     this.allData.sort((a,b) => {{
+        //         return a.value-b.value //从小到大排序
+        //     }})
+        //     // 每5个元素显示一页
+        //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-            // 获取完数据， 更新图标
-            this.updateChart()
+        //     // 获取完数据， 更新图标
+        //     this.updateChart()
 
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
+        //     // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        //     this.startInterval()
 
-        },
+        // },
         updateChart(){
-            // 每一页显示1个数据， 获取5个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)    
-            const showValue = showData[0].youwei-5
-            // const showValue = showData[0]
+            // // 每一页显示1个数据， 获取5个数据
+            // const start = (this.currentPage - 1) * 1
+            // const end = this.currentPage * 1
+            // const showData = this.allData.slice(start, end)    
+            // const showValue = showData[0].youwei-5
+            // // const showValue = showData[0]
 
             const option = {
                 grid:{
@@ -326,21 +321,21 @@ export default {
             }
             this.chartInstance.setOption(option)
         },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
+        // startInterval () {
+        //     // 每个3秒执行一次
+        //     setInterval(() => { 
+        //         // 保险操作
+        //         if(this.timeId){
+        //             clearInterval(this.timerId)
+        //         }
+        //          this.currentPage++
+        //         //  当页数超过总页数是， 从头开始
+        //          if(this.currentPage > this.totalPage){
+        //              this.currentPage = 1
+        //          }
+        //          this.updateChart()
+        //     },3000)
+        // }
 
 
     }

src/components/tunneling/temporature.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="tempChart" style="width: 100%;height: 90%;"></div>
+  <div id="tempChart" style="width: 100%;height: 150px;"></div>
 </template>
 
 <script>
@@ -7,7 +7,7 @@
     var kd = [];
     var Gradient = [];
     var leftColor = '';
-    var showValue = '';
+    var showValue = 60;
     var boxPosition = [65, 0];
     var TP_txt = ''
     // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
@@ -79,20 +79,20 @@ export default {
     },
     mounted () {
         this.initChart()
-
-        this.getData()
+        this.updateChart()
+        // this.getData()
     //  对窗口大小变化的事件进行监听
         window.addEventListener('resize', this.screenAdapter)
 
 
     },
-    destroyed () {
-      clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        window.removeEventListener('resize', this.screenAdapter)
+    // destroyed () {
+    //   clearInterval(this.timerId)
+    //     // 在组件销毁的时候, 需要将监听器取消掉
+    //     window.removeEventListener('resize', this.screenAdapter)
 
 
-    },
+    // },
     methods: {
         //初始化echarts实例对象
 
@@ -109,30 +109,13 @@ export default {
             })
         },
 
-        async getData() {
-            // 请求数据 allData
-            const { data: ret } = await this.$http.get('hbase/getJSON')
-            this.allData = ret
-            // 对数据排序
-            this.allData.sort((a,b) => {{
-                return a.value-b.value //从小到大排序
-            }})
-            // 每5个元素显示一页
-            this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
-
-            // 获取完数据， 更新图标
-            this.updateChart()
-
-            // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-            this.startInterval()
-
-        },
+     
         updateChart(){
             // 每一页显示1个数据， 获取1个数据
-            const start = (this.currentPage - 1) * 1
-            const end = this.currentPage * 1
-            const showData = this.allData.slice(start, end)    
-            const showValue = showData[0].wendu-10
+            // const start = (this.currentPage - 1) * 1
+            // const end = this.currentPage * 1
+            // const showData = this.allData.slice(start, end)    
+            // const showValue = showData[0].wendu-10
             // const arrayData = this.showData.map((item) =>{
             //     return item.value
             // }) 
@@ -317,21 +300,21 @@ export default {
             }
             this.chartInstance.setOption(option)
         },
-        startInterval () {
-            // 每个3秒执行一次
-            setInterval(() => { 
-                // 保险操作
-                if(this.timeId){
-                    clearInterval(this.timerId)
-                }
-                 this.currentPage++
-                //  当页数超过总页数是， 从头开始
-                 if(this.currentPage > this.totalPage){
-                     this.currentPage = 1
-                 }
-                 this.updateChart()
-            },3000)
-        }
+        // startInterval () {
+        //     // 每个3秒执行一次
+        //     setInterval(() => { 
+        //         // 保险操作
+        //         if(this.timeId){
+        //             clearInterval(this.timerId)
+        //         }
+        //          this.currentPage++
+        //         //  当页数超过总页数是， 从头开始
+        //          if(this.currentPage > this.totalPage){
+        //              this.currentPage = 1
+        //          }
+        //          this.updateChart()
+        //     },3000)
+        // }
 
 
     }

src/views/gas/configImg/centerLeft1.vue

@@ -142,6 +142,7 @@ export default {
           }
           let nowData=this.config
           nowData.data=arr
+          console.log("arr1",arr);
           this.config={...nowData}     
       },
       cdata2(newdata){
@@ -151,6 +152,7 @@ export default {
           }
           let nowData=this.config
           nowData.data=arr
+          console.log("arr2",arr);
           this.config={...nowData}     
       }
     }

src/views/tunnelling/zutai.vue

@@ -76,7 +76,7 @@
               </div>
               <div id="right-mid-one">
                   <!-- 时间 ************************************************-->
-                  <current_time></current_time>
+                  <!-- <current_time></current_time> -->
               </div>
               <div id="right-mid-two">
                   <!-- 远控模式 -->
@@ -182,7 +182,7 @@ h1 {
     flex-direction: column;
 }
 #left-top{
-    height: 33%;
+    height: 170px;
     display: flex;
     position: relative;
     border: 1px solid rgba(25, 186, 139, 0.17);
@@ -193,6 +193,7 @@ h1 {
     border: 1px solid rgba(25, 186, 139, 0.17);
 }
 #left-top-right{
+    margin-top: -20px;
     flex: 4;
     position: relative;
     border: 1px solid rgba(25, 186, 139, 0.17);
@@ -218,7 +219,7 @@ h1 {
     border: 1px solid rgba(25, 186, 139, 0.17);
 }
 #middle-top{
-    height: 60%;
+    height: 260px;
     border: 1px solid rgba(25, 186, 139, 0.17);
     margin-bottom: 0.1875rem;
     display: flex;
@@ -257,7 +258,7 @@ h1 {
     border: 1px solid rgba(25, 186, 139, 0.17);
 }
 #middle-bottom{
-    height: 35%;
+    height: 300px;
     margin-top: 5px;
     position: relative;
     border: 1px solid rgba(25, 186, 139, 0.17);
@@ -276,23 +277,25 @@ h1 {
     margin-bottom: 0.1875rem;
     margin-right: 0.1875rem;
     width: 100%;
-    height: 100%;
+    height: 500px;
     flex: 2;
     /* position: relative; */
     display: flex;
     /* // 添加边角 */
 }
 #tem1{
+    margin-top: 40px;
     flex: 1;
     width: 50%;
-    height: 100%;
+    height: 150px;
     /* position: relative; */
 }
 #tem2{
+    margin-top: 40px;
     flex: 1;
     width: 50%;
-    height: 100%;
-    /* position: relative; */
+    height: 150px;
+    /* position:absolute; */
 }
 .screen-right{
     flex: 2;