术语表 掘进系统前端

src/components/tunneling/current_time.vue

@@ -0,0 +1,52 @@
+<template>
+<div id="nowTime">{{time}}</div>
+
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+    time:''
+   }
+  },
+
+  mounted() {
+    this.currentTime();
+  },
+  methods: {
+    //   时间
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      let yy = new Date().getFullYear();
+      let mm = new Date().getMonth() + 1;
+      let dd = new Date().getDate();
+      let hh = new Date().getHours();
+      let mf =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      let ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      this.time =
+        yy + "年" + mm + "月" + dd + "日 " + hh + ":" + mf + ":" + ss;
+    }
+  }
+};
+</script>
+
+<style>
+#nowTime{
+    background-color: blue;
+    text-align: center;
+    margin: 0%;
+    padding: 0%;
+    width: 100%;
+    height: 100%;
+    font-size: 1.75rem;
+}
+</style>

src/components/tunneling/dashBoard.vue

@@ -0,0 +1,153 @@
+<template>
+<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()
+            })
+        },
+
+        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
+
+            // 每1个元素显示一页
+            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].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)
+        },
+        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

@@ -0,0 +1,258 @@
+<template>
+<div id="hard" :style="{width: '100%', height: '100%'}"></div>
+</template>
+ 
+<script >
+    var showValue = new Array()
+const colors = ['#5470C6', '#91CC75', '#EE6666'];
+    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)
+
+
+    },
+    methods:{
+        initChart(){
+            this.chartInstance = this.$echarts.init(document.getElementById('hard'))
+             //对图表对象进行鼠标事件监听
+            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')
+            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()
+
+            // // 启动定时器， 每隔三秒改变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 testData = [7,-6,7,6,7,-6,7,6,7,-6,7,6]
+           var option = {
+            color: colors,
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'cross'
+                }
+            },
+            grid: {
+                right: '10%',
+                show:'false'
+                // color:'red'
+            },
+
+            xAxis: [
+                {
+                    // offset:0,
+                    type: 'category',
+                    axisLine:{
+                    show:true
+                    },
+                        axisLabel:{
+                    show:false
+                    },
+                    axisTick:{
+                    show:false
+                    },
+                    // prettier-ignore
+                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+                },
+                // {
+                // offset: -100,
+                // axisLine:{
+                //     show:true,
+                //     lineStyle:{
+                //     color:'red',
+                //     type:'dashed'
+                //     }
+                // },
+                // },
+                // {
+                // offset: -80,
+                // axisLine:{
+                //     show:true,
+                //     lineStyle:{
+                //     color:'red',
+                //     type:'dashed'
+                //     }
+                // }
+                // }
+                
+            ],
+            yAxis: [
+                {
+                type: 'value',
+                min: -10,
+                max: 10,
+                position: 'right',
+                offset:0,
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                    color:'blue',
+                    }
+                },
+                    axisLabel:{
+                    show:false
+                },
+                axisTick:{
+                    show:false
+                },
+                },
+            
+                {
+                type: 'value',
+                min: -10,
+                max: 10,
+                position: 'left',
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                    color:'blue',
+                    }
+                },
+                    axisLabel:{
+                    show:false
+                },
+                axisTick:{
+                    show:false
+                },
+                },
+                    {
+                type: 'value',
+                name: '1',
+                min: 0,
+                max: 25,
+                offset:-200,
+                position: 'left',
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                    color:'blue',
+                    }
+                },
+                    axisLabel:{
+                    show:false
+                },
+                axisTick:{
+                    show:false
+                },
+                },
+                    {
+                type: 'value',
+                name: '2',
+                min: 0,
+                max: 25,
+                offset:-200,
+                position: 'right',
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                    color:'blue',
+                    }
+                },
+                    axisLabel:{
+                    show:false
+                },
+                axisTick:{
+                    show:false
+                },
+                }
+            ],
+            series: [
+                {
+                type: 'line',
+                data: showValue,
+                symbol: 'triangle',
+                symbolSize: 20,
+                lineStyle: {
+                    color: '#5470C6',
+                    width: 4,
+                    type: 'dashed'
+                },
+                itemStyle: {
+                    borderWidth: 3,
+                    borderColor: '#EE6666',
+                    color: 'yellow'
+                },
+                areaStyle:{}
+                }
+            ]
+            };
+        this.chartInstance.setOption(option)
+
+            // 启动定时器， 每隔三秒改变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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/lbottom.vue

@@ -0,0 +1,124 @@
+<template>
+<div id="lbottom">
+    <ul>
+        <li >
+            <span id="l_title">除尘风机</span>
+        </li>
+
+        <li>
+            风  量 :<span id="l_one">{{one}}</span> m^3/min 
+        </li>
+
+
+        <li>
+            风  压 :<span id="l_two">{{two}}</span> m^3/min
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            one:'',
+            two:'',
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+  },
+  methods: {
+    async getData(){
+        // 请求数据 allData
+        const { data: ret } = await this.$http.get('hbase/getJSON')
+        const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode6')
+        this.allData = ret
+        // 每1个元素显示一页
+        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        // 获取完数据， 更新图标
+        this.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+
+        const start = (this.currentPage - 1) * 1
+        const end = this.currentPage * 1
+        const showData = this.allData.slice(start, end)    
+        this.one = showData[0].chuchenfengjifengliang
+        this.two = showData[0].chuchenfengjifengya
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            if(this.currentPage > this.totalPage){
+                this.currentPage = 1
+            }
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    /* flex-direction: column; */
+    margin-top: 1.25rem;
+    margin-right:.75rem;
+    font-size: 1.625rem;
+    text-align:center
+
+
+}
+#l_one{
+    width: 5rem;
+    height: 2rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+#l_two{
+    width: 5rem;
+    height: 2rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+#l_title{
+    width: 8.75rem;
+    height: 1.875rem;
+    background-color: rgb(30, 3, 66);
+    color: pink;
+    text-align: center;
+}
+</style>

src/components/tunneling/lmid.vue

@@ -0,0 +1,121 @@
+<template>
+<div id="lmid">
+    <ul>
+        <li >
+            <span id="l_title">压入式风机</span>
+        </li>
+
+        <li>
+            风  量 :<span id="l_one">{{one}}</span> m^3/min 
+        </li>
+
+
+        <li>
+            风  压 :<span id="l_two">{{two}}</span> m^3/min
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            one:'',
+            two:'',
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+  },
+  methods: {
+    async getData(){
+        // 请求数据 allData
+        const { data: ret } = await this.$http.get('hbase/getJSON')
+        this.allData = ret
+        // 每1个元素显示一页
+        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        // 获取完数据， 更新图标
+        this.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+
+        const start = (this.currentPage - 1) * 1
+        const end = this.currentPage * 1
+        const showData = this.allData.slice(start, end)    
+        this.one = showData[0].yarushifengjifengliang
+        this.two = showData[0].yarushifengjifengya
+
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            if(this.currentPage > this.totalPage){
+                this.currentPage = 1
+            }
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    /* flex-direction: column; */
+    margin-top: 3rem;
+    margin-right:.75rem;
+    font-size: 1.625rem;
+    text-align:center
+
+
+}
+#l_one{
+    width: 5rem;
+    height: 2rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+#l_two{
+    width: 5rem;
+    height: 2rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+#l_title{
+    width: 8.75rem;
+    height: 1.875rem;
+    background-color: rgb(30, 3, 66);
+    color: pink;
+    text-align: center;
+}
+</style>

src/components/tunneling/log.vue

@@ -0,0 +1,119 @@
+<template>
+<div id="log">
+    <ul>
+        <li >
+            <span id="r_title">日志:</span>
+        </li>
+
+        <li>
+            <span id="l_one">{{one}}</span>
+            <!-- <textarea name="myLog" id="log" cols="30" rows="10"></textarea> -->
+        </li>
+
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            one:'进入设备     ',
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+    // window.addEventListener('resize', this.screenAdapter)
+    // 在页面加载完成的时候, 主动进行屏幕的适配
+    // this.screenAdapter()
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+   // 在组件销毁的时候, 需要将监听器取消掉
+    // window.removeEventListener('resize', this.screenAdapter)
+  },
+  methods: {
+    async getData(){
+        // 请求数据 allData
+        // const { data: ret } = await this.$http.get('hbase/getJSON')
+        const { data:ret  } = await this.$http.get('engine/start/?mode=all')
+        this.allData = ret
+        // this.allData = ["连接断开","连接成功"]
+        // 每1个元素显示一页
+        // this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        // 获取完数据， 更新图标
+        this.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+
+        // const start = (this.currentPage - 1) * 1
+        // const end = this.currentPage * 1
+        // const showData = this.allData.slice(start, end) 
+        for(var i = 0; i<=this.allData.length-1; i++){
+            this.one = this.allData[i] + this.one
+        }   
+
+        // this.one.join("\n")
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            // if(this.currentPage > this.totalPage){
+            //     this.currentPage = 1
+            // }
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    /* flex-direction: column; */
+    /* margin-top: 1.25rem; */
+    /* margin-right:.75rem; */
+    font-size: 1.625rem;
+    text-align:center
+
+
+}
+#l_one{
+    width: 12.5rem;
+    height: 15rem;
+    background-color: #161522;
+    /* margin: 0 .325rem .25rem;  */
+    text-align: center;
+}
+
+#r_title{
+    width: 8.75rem;
+    height: 1.875rem;
+    background-color: rgb(30, 3, 66);
+    color: pink;
+    text-align: center;
+}
+</style>

src/components/tunneling/mbl2.vue

@@ -0,0 +1,122 @@
+<template>
+<div id="mbl2">
+    <ul>
+        <li>
+            油泵 :<span>{{showValue}}</span>
+            <!-- 油泵<span>{{showValue}}</span> -->
+            截低 :<span>{{showValue}}</span>
+            截高 :<span>{{showValue}}</span>
+        </li>
+        <li>
+            二运 :<span>{{showValue}}</span>
+            风机 :<span>{{showValue}}</span>
+            水泵 :<span>{{showValue}}</span>
+        </li>
+        <li>
+            电铃 :<span>{{showValue}}</span>
+            左轮 :<span>{{showValue}}</span>
+            右轮 :<span>{{showValue}}</span>
+        </li>
+        <li>
+            一运 :<span>{{showValue}}</span>
+            隔离 :<span>{{showValue}}</span>
+            铲板 :<span>{{showValue}}</span>
+        </li>
+        <li>
+            后支 :<span>{{showValue}}</span>
+            润滑 :<span>{{showValue}}</span>
+            伸缩 :<span>{{showValue}}</span>
+        </li>
+        
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            showValue:'停止',
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+  },
+  methods: {
+    getData(){
+        // 请求数据 allData
+        this.allData = ['停止','正常']
+        // 对数据排序
+        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.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+
+        const start = (this.currentPage - 1) * 1
+        const end = this.currentPage * 1
+        const showData = this.allData.slice(start, end)    
+        this.showValue = showData[0]
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            if(this.currentPage > this.totalPage){
+                this.currentPage = 1
+            }
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+ul{
+    width: 100%;
+    height: 100%;
+}
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    font-size: 1rem;
+    text-align: center;
+}
+span{
+    width: 2.5rem;
+    height: 2.25rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    
+}
+</style>

src/components/tunneling/rtone.vue

@@ -0,0 +1,123 @@
+<template>
+<div id="rtone">
+    <ul>
+        <li>
+            累计完成进尺 :<span>{{one}}</span>m
+        </li>
+        <li>
+            月 完 成 进尺 :<span>{{two}}</span> m
+        </li>
+        <li>
+            日 平 均 进尺 :<span>{{three}}</span> m 
+        </li>
+        <li>
+            班 最 高 进尺 :<span>{{four}}</span> m  
+        </li>
+        <li>
+            日 最 高 进尺 :<span>{{five}}</span> m
+        </li>
+        <li>
+            当 前___人  员 :<span id="six">{{six}}</span>
+        </li>
+        
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            // showValue:'',
+            one:'',
+            two:'',
+            three:'',
+            four:'',
+            five:'',
+            six:'',
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+  },
+  methods: {
+    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 //从小到大排序
+        }})
+        // 每1个元素显示一页
+        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        // 获取完数据， 更新图标
+        this.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+
+        const start = (this.currentPage - 1) * 1
+        const end = this.currentPage * 1
+        const showData = this.allData.slice(start, end)    
+        this.one = showData[0].leijiwanchengjinchi
+        this.two = showData[0].benyuewanchengjinchi
+        this.three = showData[0].ripingjunjinchi
+        this.four = showData[0].banzuigaojinchi
+        this.five = showData[0].rizuigaojinchi
+        this.six = showData[0].dangqianrenyuan
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            if(this.currentPage > this.totalPage){
+                this.currentPage = 1
+            }
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    /* flex-direction: column; */
+    font-size: 1.25rem;
+    position: relative;
+}
+span{
+    width: 7.5rem;
+    height: 1.625rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+</style>

src/components/tunneling/rtop.vue

@@ -0,0 +1,140 @@
+<template>
+<div id="rtop">
+    <ul>
+        <li>
+            瓦斯涌出量:<span>{{one}}</span>m^3/min
+            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger1, green1:save1}"></span>
+        </li>
+        <li>
+            粉 尘 浓 度 :<span>{{two}}</span>g/m^3
+            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger2, green1:save2}"></span>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+            one:'',
+            two:'',
+            danger1:"",
+            danger2:"",
+            save1:"",
+            save2:"",
+
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null,      //定时器
+   }
+  },
+
+  mounted() {
+    this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+  },
+  destroyed(){
+    clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+  },
+  methods: {
+   async getData(){
+        // 请求数据 allData
+        const { data: ret } = await this.$http.get('hbase/getJSON')
+        const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode4')
+        this.allData = ret
+        // 每1个元素显示一页
+        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+
+        // 获取完数据， 更新图标
+        this.updateData()
+
+        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+        this.startInterval()
+    },
+    updateData() {
+        this.danger1 = ""
+        this.danger2 = ""
+        this.save1 = ""
+        this.save2 = ""
+        const start = (this.currentPage - 1) * 1
+        const end = this.currentPage * 1
+        const showData = this.allData.slice(start, end)    
+        this.one = showData[0].wasiyongchuliang
+        this.two = showData[0].fenchennongdu
+        if(this.one>3){
+            this.danger1 = true
+        }else{
+            this.save1 = true
+        }
+
+        if(this.two>14){
+            this.danger2 = true
+        }else{
+            this.save2 = true
+        }
+    
+    },
+    startInterval () {
+        // 每个3秒执行一次
+        setInterval(() => { 
+            // 保险操作
+            if(this.timeId){
+                clearInterval(this.timerId)
+            }
+                this.currentPage++
+            //  当页数超过总页数是， 从头开始
+            if(this.currentPage > this.totalPage){
+                this.currentPage = 1
+            }
+
+            this.updateData()
+        },3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#rtop{
+    text-align: center;
+}
+li{
+    width: 100%;
+    height: 100%;
+    color: royalblue;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+    margin-right:.75rem;
+    font-size: 1.25rem;
+    text-align:end
+
+
+}
+span{
+    width: 1.875rem;
+    height: 1.625rem;
+    background-color: rgb(133, 158, 231);
+    margin: 0 .325rem .25rem; 
+    text-align: center;
+}
+.red1{
+    background-color: red;
+}
+.red2{
+    background-color: red;
+}
+.green1{
+    background-color: green;
+}
+.green2{
+    background-color: green;
+}
+</style>

src/components/tunneling/ruler.vue

@@ -0,0 +1,201 @@
+<template>
+  <div id="rulerChart" style="width: 100%;height: 100%;"></div>
+</template>
+
+<script>
+    var TP_value = 20.3;
+    var kd = [];
+    var kd2 = []
+    var Gradient = [];
+    var leftColor = '';
+    var showValue = '';
+    var boxPosition = [65, 0];
+    var TP_txt = ''
+    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+    for (let i = 0, len = 60; i <= len; i += 1) {
+        if (i < 10) {
+            kd.push('');
+        } else if ((i - 10) % 10 === 0) {
+            kd.push('-3');
+        } else {
+            kd.push('-1');
+        }
+    }
+
+        for (let i = 0, len = 60; i <= len; i += 1) {
+        if (i < 10) {
+            kd2.push('');
+        } else if ((i - 10) % 10 === 0) {
+            kd2.push('3');
+        } else {
+            kd2.push('1');
+        }
+    }
+    //    leftColor = Gradient[Gradient.length - 1].color;
+    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+export default {
+data () {
+        return {
+            chartInstance: null,
+           
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null      //定时器
+        }
+    },
+    mounted () {
+        this.initChart()
+
+        this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+
+
+    },
+    destroyed () {
+      clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+
+
+    },
+    methods: {
+        //初始化echarts实例对象
+
+
+        initChart () {
+            this.chartInstance = this.$echarts.init(document.getElementById('rulerChart'))
+    
+             //对图表对象进行鼠标事件监听
+            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=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 colors = ['#5470c6','#91cc75'] 
+            const option = {
+                grid:{
+                    right:'30%',
+                    left :'20%',
+                    bottom:'5%'
+                },
+                title: {
+                    text: '行走状态',
+                    color:'pink',
+                    show: true
+                },
+                yAxis: [{
+                    type:'value',
+                    name:'left',
+                    show: true,
+                    // data: [],
+                    min: -100,
+                    max: 100,
+                    splitNumber:20,     //坐标轴分段个数
+
+                    nameTextStyle:{
+                        borderWidth:50
+                    },
+                    nameLocation:'end',
+                    axisLine: {
+                        show: true,
+                        lineStyle:{
+                            color:colors[0],
+                            width:5     //刻度线宽度
+                        }
+                    }
+                }, {
+                    type:'value',
+                    name:'right',
+                    show: true,
+                    // data: [],
+                    min: -100,
+                    max: 100,
+                    splitNumber:20,     //坐标轴分段个数
+                    nameLocation:'end',
+                    axisLine: {
+                        show: true,
+                        lineStyle:{
+                            color:colors[1],
+                            width:5     //刻度线宽度
+                        }
+                    }
+                }],
+                xAxis: [{
+                    type:'category',
+                    show:false,
+
+                }],
+                   
+                series: [{
+                    name: 'left',
+                    type: 'scatter',
+                    // 对应上面XAxis的第一个对象配置
+                    yAxisIndex :0,
+                    // data: arrayData[1],
+                    data:[{
+                        value:showValue
+                    }],
+                    // z: 2
+                    },
+                    
+                ]}
+            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>
+
+</style>

src/components/tunneling/six/five.vue

@@ -0,0 +1,160 @@
+<template>
+<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)
+
+
+    },
+    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(){
+            // 每一页显示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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/six/four.vue

@@ -0,0 +1,160 @@
+<template>
+<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)
+
+
+    },
+    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(){
+            // 每一页显示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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/six/one.vue

@@ -0,0 +1,157 @@
+<template>
+<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)
+
+
+    },
+    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(){
+            // 每一页显示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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/six/three.vue

@@ -0,0 +1,160 @@
+<template>
+<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)
+
+
+    },
+    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(){
+            // 每一页显示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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/six/two.vue

@@ -0,0 +1,160 @@
+<template>
+<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)
+
+
+    },
+    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(){
+            // 每一页显示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)
+        }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/tunneling/temporature-two.vue

@@ -0,0 +1,352 @@
+<template>
+  <div id="tempChart2" style="width: 100%;height: 90%;"></div>
+</template>
+
+<script>
+    var TP_value = 20.3;
+    var kd = [];
+    var Gradient = [];
+    var leftColor = '';
+    var showValue = '';
+    var boxPosition = [65, 0];
+    var TP_txt = ''
+    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+    for (let i = 0, len = 100; i <= len; i += 1) {
+        if (i < 10) {
+            kd.push('');
+        } else if ((i - 10) % 10 === 0) {
+            kd.push('-3');
+        } else {
+            kd.push('-1');
+        }
+    }
+    //中间线的渐变色和文本内容
+    if(TP_value > 24) {
+        TP_txt = '温度偏高';
+        Gradient.push({
+            offset: 0,
+            color: '#93FE94'
+        }, {
+            offset: 0.5,
+            color: '#E4D225'
+        }, {
+            offset: 1,
+            color: '#E01F28'
+        })
+    } else if(TP_value >= 14) {
+        TP_txt = '温度正常';
+        Gradient.push({
+            offset: 0,
+            color: '#93FE94'
+        }, {
+            offset: 1,
+            color: '#E4D225'
+        })
+    } else {
+        TP_txt = '温度偏低';
+        Gradient.push({
+            offset: 1,
+            color: '#93FE94'
+        })
+    }
+    if(TP_value > 100) {
+        showValue = 100
+    } else {
+        if(TP_value < 0) {
+            showValue = 0
+        } else {
+            showValue = TP_value + 10
+        }
+    }
+    if(TP_value < 0) {
+        boxPosition = [65, -120]
+    }
+    leftColor = Gradient[Gradient.length - 1].color;
+    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+
+export default {
+    data () {
+        return {
+            chartInstance: null,
+           
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null      //定时器
+        }
+    },
+    mounted () {
+        this.initChart()
+
+        this.getData()
+    //  对窗口大小变化的事件进行监听
+        // window.addEventListener('resize', this.screenAdapter)
+
+
+    },
+    destroyed () {
+      clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        // window.removeEventListener('resize', this.screenAdapter)
+
+
+    },
+    methods: {
+        //初始化echarts实例对象
+
+
+        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 
+
+            // 获取完数据， 更新图标
+            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].youwei-5
+            // const showValue = showData[0]
+
+            const option = {
+                grid:{
+                    x: 30,   //左侧与y轴的距离
+                    y: 0,   //top部与x轴的距离
+                    x2: -120,   //右侧与y轴的距离
+                    y2: 20    //bottom部与x轴的距离
+                },
+                // backgroundColor: '#0C2F6F',
+                title: {
+                    text: '油位',
+                    show: true,
+                    textStyle:{
+                        color:'pink'
+                    }
+                },
+                yAxis: [{
+                    show: false,
+                    data: [],
+                    min: 0,
+                    max: 120,
+                    axisLine: {
+                        show: false
+                    }
+                }, {
+                    show: false,
+                    min: 0,
+                    max: 105,
+                }],
+                xAxis: [{
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -5,
+                    max: 80,
+                    // data: []    // ?
+                }],
+                series: [{
+                    name: '条',
+                    type: 'bar',
+                    // 对应上面XAxis的第一个对象配置
+                    xAxisIndex: 0,
+                    data:[{
+                        value:showValue
+                    }],
+                    barWidth: 8,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
+                            // color:'blue'
+                        }
+                    },
+                    z: 2
+                    }, {
+                        name: '白框',
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        barGap: '-100%',
+                        data: [100],
+                        barWidth: 14,
+                        itemStyle: {
+                            normal: {
+                                color: '#0C2E6D',
+                                barBorderRadius: 50,
+                            }
+                        },
+                        z: 1
+                    }, {
+                        name: '外框',
+                        type: 'bar',
+                        xAxisIndex: 2,
+                        barGap: '-100%',
+                        data: [101],
+                        barWidth: 24,
+                        itemStyle: {
+                            normal: {
+                                color: '#4577BA',
+                                barBorderRadius: 50,
+                            }
+                        },
+                        z: 0
+                    }, {
+                        name: '圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 0,
+                        symbolSize: 20,
+                        itemStyle: {
+                            normal: {
+                                color: '#93FE94',
+                                opacity: 1,
+                            }
+                        },
+                        series:{
+                            data:[{
+                                value:showValue,
+                            }]
+                        },
+                        z: 2
+                    }, {
+                        name: '白圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 1,
+                        symbolSize: 24,
+                        itemStyle: {
+                            normal: {
+                                color: '#0C2E6D',
+                                opacity: 1,
+                            }
+                        },
+                        series:{
+                            data:[{
+                                value:showValue,
+                            }]
+                        },
+                        
+                        z: 1
+                    }, {
+                        name: '外圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 2,
+                        symbolSize: 30,
+                        itemStyle: {
+                            normal: {
+                                color: '#4577BA',
+                                opacity: 1,
+                            }
+                        },
+                        series:{
+                            data:[{
+                                value:showValue
+                            }]
+                        },
+                        z: 0
+                    }, {
+                        name: '刻度',
+                        type: 'bar',
+                        yAxisIndex: 0,
+                        xAxisIndex: 3,
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'left',
+                                distance: 10,
+                                color: 'white',
+                                fontSize: 14,
+                                formatter: function(params) {
+                                    if (params.dataIndex > 100 || params.dataIndex < 10) {
+                                        return '';
+                                    } else {
+                                        if ((params.dataIndex - 10) % 10 === 0) {
+                                            return params.dataIndex - 10;
+                                        } else {
+                                            return '';
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        barGap: '-100%',
+                        data: kd,
+                        barWidth: 1,
+                        itemStyle: {
+                            normal: {
+                                color: 'white',
+                                barBorderRadius: 120,
+                            }
+                        },
+                        z: 0
+        }]
+            }
+            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/temporature.vue

@@ -0,0 +1,343 @@
+<template>
+  <div id="tempChart" style="width: 100%;height: 90%;"></div>
+</template>
+
+<script>
+    var TP_value = 20.3;
+    var kd = [];
+    var Gradient = [];
+    var leftColor = '';
+    var showValue = '';
+    var boxPosition = [65, 0];
+    var TP_txt = ''
+    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+    for (let i = 0, len = 80; i <= len; i += 1) {
+        if (i < 10) {
+            kd.push('');
+        } else if ((i - 10) % 10 === 0) {
+            kd.push('-3');
+        } else {
+            kd.push('-1');
+        }
+    }
+    //中间线的渐变色和文本内容
+    if(TP_value > 24) {
+        TP_txt = '温度偏高';
+        Gradient.push({
+            offset: 0,
+            color: '#93FE94'
+        }, {
+            offset: 0.5,
+            color: '#E4D225'
+        }, {
+            offset: 1,
+            color: '#E01F28'
+        })
+    } else if(TP_value >= 14) {
+        TP_txt = '温度正常';
+        Gradient.push({
+            offset: 0,
+            color: '#93FE94'
+        }, {
+            offset: 1,
+            color: '#E4D225'
+        })
+    } else {
+        TP_txt = '温度偏低';
+        Gradient.push({
+            offset: 1,
+            color: '#93FE94'
+        })
+    }
+    if(TP_value > 80) {
+        showValue = 80
+    } else {
+        if(TP_value < 0) {
+            showValue = 0
+        } else {
+            showValue = TP_value + 10
+        }
+    }
+    if(TP_value < 0) {
+        boxPosition = [65, -120];
+    }
+    leftColor = Gradient[Gradient.length - 1].color;
+    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+
+export default {
+    data () {
+        return {
+            chartInstance: null,
+           
+            allData:null,    // 服务器返回的数据
+ 
+            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+
+            totalPage: 0,    //一共多少也
+            timerId:null      //定时器
+        }
+    },
+    mounted () {
+        this.initChart()
+
+        this.getData()
+    //  对窗口大小变化的事件进行监听
+        window.addEventListener('resize', this.screenAdapter)
+
+
+    },
+    destroyed () {
+      clearInterval(this.timerId)
+        // 在组件销毁的时候, 需要将监听器取消掉
+        window.removeEventListener('resize', this.screenAdapter)
+
+
+    },
+    methods: {
+        //初始化echarts实例对象
+
+
+        initChart () {
+            this.chartInstance = this.$echarts.init(document.getElementById('tempChart'))
+    
+             //对图表对象进行鼠标事件监听
+            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')
+            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 arrayData = this.showData.map((item) =>{
+            //     return item.value
+            // }) 
+            // showValue = arrayData
+            const option = {
+                grid:{
+                    x: 60,   //左侧与y轴的距离
+                    y: -50,   //top部与x轴的距离
+                    x2: -120,   //右侧与y轴的距离
+                    y2: 20    //bottom部与x轴的距离
+                },
+                // backgroundColor: '#0C2F6F',
+                title: {
+                    text: '油缸温度',
+                    show: true,
+                    textStyle:{
+                        color :'pink'
+                    }
+                },
+                yAxis: [{
+                    show: false,
+                    data: [],
+                    min: 0,
+                    max: 120,
+                    axisLine: {
+                        show: false
+                    }
+                }, {
+                    show: false,
+                    min: 0,
+                    max: 90,
+                }],
+                xAxis: [{
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -10,
+                    max: 80,
+                    data: []
+                }, {
+                    show: false,
+                    min: -5,
+                    max: 80,
+
+                }],
+                series: [{
+                    name: '条',
+                    type: 'bar',
+                    // 对应上面XAxis的第一个对象配置
+                    xAxisIndex: 0,
+                    // data: arrayData[1],
+                    data:[{
+                        value:showValue
+                    }],
+                    barWidth: 8,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
+                        }
+                    },
+                    z: 2
+                    }, {
+                        name: '白框',
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        barGap: '-100%',
+                        data: [80],
+                        barWidth: 14,
+                        itemStyle: {
+                            normal: {
+                                color: '#0C2E6D',
+                                barBorderRadius: 50,
+                            }
+                        },
+                        z: 1
+                    }, {
+                        name: '外框',
+                        type: 'bar',
+                        xAxisIndex: 2,
+                        barGap: '-100%',
+                        data: [81],
+                        barWidth: 24,
+                        itemStyle: {
+                            normal: {
+                                color: '#4577BA',
+                                barBorderRadius: 50,
+                            }
+                        },
+                        z: 0
+                    }, {
+                        name: '圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 0,
+                        symbolSize: 20,
+                        itemStyle: {
+                            normal: {
+                                color: '#93FE94',
+                                opacity: 1,
+                            }
+                        },
+                        series:{
+                            data:[{
+                                value:showValue
+                            }]
+                        },
+                        z: 2
+                    }, {
+                        name: '白圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 1,
+                        symbolSize: 24,
+                        itemStyle: {
+                            normal: {
+                                color: '#0C2E6D',
+                                opacity: 1,
+                            }
+                        },
+                        
+                        z: 1
+                    }, {
+                        name: '外圆',
+                        type: 'scatter',
+                        hoverAnimation: false,
+                        data: [0],
+                        xAxisIndex: 2,
+                        symbolSize: 30,
+                        itemStyle: {
+                            normal: {
+                                color: '#4577BA',
+                                opacity: 1,
+                            }
+                        },
+                        z: 0
+                    }, {
+                        name: '刻度',
+                        type: 'bar',
+                        yAxisIndex: 0,
+                        xAxisIndex: 3,
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'left',
+                                distance: 10,
+                                color: 'white',
+                                fontSize: 14,
+                                formatter: function(params) {
+                                    if (params.dataIndex > 80 || params.dataIndex < 10) {
+                                        return '';
+                                    } else {
+                                        if ((params.dataIndex - 10) % 10 === 0) {
+                                            return params.dataIndex - 10;
+                                        } else {
+                                            return '';
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        barGap: '-100%',
+                        data: kd,
+                        barWidth: 1,
+                        itemStyle: {
+                            normal: {
+                                color: 'white',
+                                barBorderRadius: 120,
+                            }
+                        },
+                        z: 0
+        }]
+            }
+            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/main.js

@@ -9,6 +9,11 @@ import VueCookie from 'vue-cookie'
 import axios from "axios";
 import VueAxios from 'vue-axios'
 
+
+
+
+
+
 import {postRequest} from "./utils/api";
 import {putRequest} from "./utils/api";
 import {deleteRequest} from "./utils/api";
@@ -25,6 +30,7 @@ Vue.prototype.deleteRequest = deleteRequest;
 Vue.prototype.getRequest = getRequest;
 Vue.prototype.postKeyValueRequest = postKeyValueRequest;
 
+
 Vue.prototype.$echarts = window.echarts
 Vue.config.productionTip = false
 // Vue.prototype.$http = httpRequest // ajax请求方法

src/router.js

@@ -473,6 +473,14 @@ export default new Router({
                 component: () =>
                 import ('./views/personnel_location/dataStandard/dataQualityMeasurePoint.vue'),
             },
+            {
+                id: 112,
+                name: '术语表',
+                path: '/term',
+                hidden: false,
+                component: () =>
+                import ('./views/term/term.vue'),
+            },
         ]
     }, {
         path: '/',

src/utils/api.js

@@ -4,7 +4,9 @@ import router from '@/router'
 import Vue from 'vue'
 
 axios.interceptors.request.use(config => {
-    config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
+    if (Vue.cookie.get('token')) {
+        config.headers['token'] = Vue.cookie.get('token')// 请求头带上token
+    }
     return config
 }, error => {
     return Promise.reject(error)

src/views/Home.vue

@@ -87,6 +87,7 @@
                     '109': require('@/assets/img/109.png'),
                     '110': require('@/assets/img/110.png'),
                     '111': require('@/assets/img/111.png'),
+                    '112': require('@/assets/img/112.png'),
                 },
                 imgApp: {
                     '200': require('@/assets/img/200.png'),

src/views/mining/mining.vue

@@ -30,6 +30,7 @@
         console.log(tab, event);
       }
     },
+    
     components: {
       dataStandard,
       systemData

src/views/term/term.vue

@@ -0,0 +1,161 @@
+<template>
+    <el-container style="border: 1px solid #eee">
+        <el-aside width="300px">
+            <el-input v-model="filterText" placeholder="搜索术语"></el-input>
+            <div class="warpper">
+                <el-tree class="filter-tree" node-key="id" :data="treeData" :props="defaultProps"
+                    :filter-node-method="filterNode" @node-click="getTermDetail" ref="tree" highlight-current="true">
+                </el-tree>
+            </div>
+        </el-aside>
+
+        <el-container>
+            <el-main>
+                <el-table :data="tableData" style="width: 100%">
+                    <el-table-column prop="name" label="名字"> </el-table-column>
+                    <el-table-column prop="owner" label="拥有者"> </el-table-column>
+                    <el-table-column prop="description" label="描述"> </el-table-column>
+                    <el-table-column prop="typeName" label="类型"> </el-table-column>
+                    <el-table-column prop="classificationNames" label="分类">
+                    </el-table-column>
+                </el-table>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+    import axios from "axios";
+    import qs from "qs";
+
+    export default {
+        watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
+        },
+        data() {
+            return {
+                filterText: "",
+                tableData: [],
+                treeData: [],
+                defaultProps: {
+                    children: "children",
+                    label: "label",
+                },
+            };
+        },
+        created() {
+            const instance = axios.create();
+            instance({
+                url: "/metadata/j_spring_security_check",
+                method: "post",
+                withCredentials: true,
+                headers: {
+                    "Accept": "*/*",
+                    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
+                },
+                data: qs.stringify({
+                    j_username: "admin",
+                    j_password: "admin",
+                }),
+            });
+        },
+        mounted() {
+            const instance = axios.create();
+            instance({
+                url: "/metadata/api/atlas/v2/glossary",
+                method: "get",
+                withCredentials: true,
+                headers: {
+                    "Accept": "*/*"
+                },
+            }).then(({ data }) => {
+                data.forEach((element) => {
+                    // console.log(element);
+                    var node = {};
+                    var children = [];
+                    node["id"] = element.guid;
+                    node["label"] = element.name;
+
+                    element.terms.forEach((item) => {
+                        var childrenNode = {};
+                        childrenNode["id"] = item.termGuid;
+                        childrenNode["label"] = item.displayText;
+                        children.push(childrenNode);
+                    });
+                    node["children"] = children;
+                    this.treeData.push(node);
+                    // console.log(this.treeData);
+                });
+            });
+        },
+        methods: {
+            // 过滤
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
+            // 获取术语具体信息
+            getTermDetail(data, node) {
+                this.$refs.tree.setCurrentKey(data.id);
+                if (!data.children) {
+                    const termName = data.label + "@" + node.parent.data.label;
+                    const instance = axios.create();
+                    instance({
+                        url: "/metadata/api/atlas/v2/search/basic",
+                        method: "post",
+                        withCredentials: true,
+                        headers: {
+                            "Accept": "*/*",
+                            "Content-Type": "application/json",
+                        },
+                        data: JSON.stringify({
+                            excludeDeletedEntities: true,
+                            includeClassificationAttributes: true,
+                            includeSubClassifications: true,
+                            includeSubTypes: true,
+                            termName,
+                        }),
+                    }).then(({ data }) => {
+                        console.log("res", data);
+                        this.tableData = [];
+                        if (data.entities) {
+                            data.entities.forEach((item) => {
+                                var node = {};
+                                node["name"] = item.attributes.name;
+                                node["owner"] = item.attributes.owner;
+                                node["typeName"] = item.typeName;
+                                node["classificationNames"] = item.classificationNames.toString();
+                                node["description"] = "";
+                                this.tableData.push(node);
+                            });
+                        }
+                    });
+                }
+            },
+        },
+    };
+</script>
+
+<style>
+    .el-header {
+        background-color: #b3c0d1;
+        color: #333;
+        line-height: 60px;
+    }
+
+    .el-aside {
+        line-height: 100px;
+        color: #333;
+        height: 900px;
+    }
+
+    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+        background-color: #38bb9b !important;
+    }
+
+    .el-tree-node:focus>.el-tree-node__content {
+        background-color: rgb(158, 213, 250) !important;
+    }
+</style>

src/views/tunnelling/systemData.vue

@@ -14,7 +14,7 @@
       <span style="font-size: 20px;">掘进工作面：</span>
       <div class="coalblock" v-for="item in options" :key="item.title">
         <span style="font-size: 12px; color:#9196a1 ;">{{item.title}}</span>
-        </br>
+        <!-- </br> -->
         <span style="font-size: 24px;">{{item.num}}</span>
       </div>
 
@@ -36,10 +36,120 @@
         </el-pagination>
       </el-card>
     </el-main>
+
+    
+	<div class="tunneling" >
+      <!-- <header class="screen-header">
+       
+          <h1 >掘进机远程智能控制系统</h1>
+      </header> -->
+      <div class="screen-body">
+          <section class="screen-left">
+              <div id="left-top">
+                  <div id="left-top-left">
+                      <!-- 行走状态 -->
+                      <!-- <footState></footState> -->
+                      <ruler></ruler>
+                  </div>
+                  <div id="left-top-right">
+                      <!-- 割接轨迹 -->
+                      <hard></hard>
+                  </div>
+              </div>
+              <div id="left-mid">
+                     <!-- 压入式风机 -->
+                     <lmid></lmid>
+              </div>
+              <div id="left-bottom">
+                  <!-- 除尘风机 -->
+                  <lbottom></lbottom>
+              </div>
+          </section>
+          <section class="screen-middle">
+              <div id="middle-top">
+                <!-- 6个仪表盘 -->
+                <div id="line_1">
+                    <div id="top_1">
+                        <dashBoard></dashBoard>
+                    </div>
+                    <div id="top_2">
+                        <one></one>
+                    </div>
+                    <div id="top_3">
+                        <two></two>
+                    </div>
+                </div>
+                <div id="line_2">
+                    <div id="bottom_1">
+                        <three></three>
+                    </div>
+                    <div id="bottom_2">
+                        <four></four>
+                    </div>
+                    <div id="bottom_3">
+                        <five></five>                        
+                    </div>
+                </div>
+              </div>
+              <div id="middle-bottom">
+                  <div id="middle-bottom-left">
+                      <!-- 掘进机工作状态 -->
+                      <mbl2></mbl2>
+                  </div>
+                  <div id="middle-bottom-right">
+                      <div id="tem1">
+                        <!-- 油缸温度 -->
+                        <tempChart></tempChart>
+                      </div>
+                     <div id="tem2">
+                        <!-- 油位 -->
+                        <tempChart2></tempChart2>
+                      </div> 
+                  </div>
+              </div>
+          </section>
+          <section class="screen-right">
+              <div id="right-top">
+                  <!-- 掘进机控制系统 -->
+                  <rtop></rtop>
+              </div>
+              <div id="right-mid-one">
+                  <!-- 时间 ************************************************-->
+                  <current_time></current_time>
+              </div>
+              <div id="right-mid-two">
+                  <!-- 远控模式 -->
+                  <rtone></rtone>
+              </div>
+              <div id="right-bottom">
+                  <!-- 日志 -->
+                  <log></log>
+              </div>
+          </section>
+      </div>
+    </div>
+
   </el-container>
 </template>
 
 <script>
+import current_time from '@/components/tunneling/current_time.vue'
+import dashBoard from '@/components/tunneling/dashBoard.vue'
+import one from '@/components/tunneling/six/one.vue'
+import two from '@/components/tunneling/six/two.vue'
+import three from '@/components/tunneling/six/three.vue'
+import four from '@/components/tunneling/six/four.vue'
+import five from '@/components/tunneling/six/five.vue'
+import tempChart from '@/components/tunneling/temporature.vue'
+import ruler from '@/components/tunneling/ruler.vue'
+import tempChart2 from '@/components/tunneling/temporature-two.vue'
+import rtop from '@/components/tunneling/rtop.vue'
+import mbl2 from '@/components/tunneling/mbl2.vue'
+import rtone from '@/components/tunneling/rtone.vue'
+import lmid from '@/components/tunneling/lmid.vue'
+import lbottom from '@/components/tunneling/lbottom.vue'
+import log from '@/components/tunneling/log.vue'
+import hard from '@/components/tunneling/hard.vue'
     export default {
         name: "systemData",
         data() {
@@ -110,7 +220,26 @@
             handleCurrentChange(newPage) {
                 // console.log(newPage)
             }
-        }
+        },
+         components: {
+            current_time,
+            dashBoard,
+            tempChart,
+            tempChart2,
+            one,
+            two,
+            three,
+            four,
+            five,
+            ruler,
+            mbl2,
+            rtop,
+            rtone,
+            lmid,
+            lbottom,
+            log,
+            hard
+        },
     }
 </script>
 
@@ -124,4 +253,206 @@
         text-align: center;
         display: inline-block;
     }
+/* header{
+    border-bottom: 1px solid red;
+    color: red;
+    position: relative;
+    margin-bottom: 0%;
+    padding: 0 0 0;
+} */
+  /* 声明字体 */
+/* @font-face {
+    font-family: electronicFont;
+    src: url(@/assets/font/DS-DIGIT.TTF);
+} */
+.fullscreen {
+    position: relative!important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    /* z-index: 100; */
+}
+.home{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    background-color: #161522;
+    color: #fff;
+    box-sizing: border-box;
+    position: relative;
+}
+.screen-container {
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    background-color: #161522;
+    color: #fff;
+    box-sizing: border-box;
+}
+.screen-header {
+    width: 100%;
+    height: 64px;
+    font-size: 20px;
+    position: relative;
+}
+h1 {
+    color: blue;
+    text-align: center;
+    margin: 0%;
+    height: 100%;
+
+}
+.screen-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    margin-top: 10px;
+}
+.screen-left{
+    height: 100%;
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+}
+#left-top{
+    height: 33%;
+    display: flex;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-left{
+    flex: 3;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-right{
+    flex: 4;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+        
+#left-mid{
+    height: 33%;
+    margin-top: 10px;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-bottom{
+    height: 33%;
+    margin-top: 10px;
+    position: relative;  
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+.screen-middle{
+    height: 100%;
+    width: 41.5%;
+    margin-left: 1.6%;
+    margin-right: 1.6%;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-top{
+    height: 60%;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    display: flex;
+    flex-direction: column;
+}
+#line_1{    
+    flex: 1;
+    display: flex;
+}
+#top_1{     
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_2{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_3{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#line_2{    
+    flex: 1;
+    display: flex;
+}
+#bottom_1{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_2{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_3{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-bottom{
+    height: 35%;
+    margin-top: 5px;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    display: flex;
+}
+#middle-bottom-left{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    margin-right: 0.1875rem;
+    flex:3;
+    position: relative; 
+    /* // 添加边角 */
+}
+#middle-bottom-right{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    margin-right: 0.1875rem;
+    width: 100%;
+    height: 100%;
+    flex: 2;
+    /* position: relative; */
+    display: flex;
+    /* // 添加边角 */
+}
+#tem1{
+    flex: 1;
+    width: 50%;
+    height: 100%;
+    /* position: relative; */
+}
+#tem2{
+    flex: 1;
+    width: 50%;
+    height: 100%;
+    /* position: relative; */
+}
+.screen-right{
+    flex: 2;
+    display: flex;
+    flex-direction: column ;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#right-top{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex:2
+}
+#right-mid-one{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 1;
+}
+#right-mid-two{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 2;
+}
+#right-bottom{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 5;
+} 
 </style>

vue.config.js

@@ -1,22 +1,25 @@
-let proxyObj = {};
-
-
-proxyObj['/'] = {
-    ws: false,
-    // target: ' http://192.168.1.124:8081',
-    target: 'http://localhost:8081',
-    // target: 'http://192.168.1.103:8081',
-    changeOrigin: true,
-    pathRewrite: {
-        '^/': ''
-    }
-};
-
-/*这部分将请求转发到后端，前端端口是8080，后端端口是8081*/
 module.exports = {
     devServer: {
         host: 'localhost',
         port: 8082,
-        proxy: proxyObj
+        proxy: {
+            '/metadata': {
+                target: 'http://10.168.57.10:21000',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/metadata': ''
+                },
+            },
+            // '/': {
+            //     // target: ' http://192.168.1.124:8081',
+            //     target: 'http://localhost:8082',
+            //     // target: 'http://192.168.1.103:8081',
+            //     changeOrigin: true,
+            //     ws: false,
+            //     pathRewrite: {
+            //         '^/': ''
+            //     },
+            // },
+        },
     }
 }