|
|
@@ -1,530 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="main">
|
|
|
- <div class="com-container">
|
|
|
- <div class="com-chart">
|
|
|
- <div class="first" ref="seller_ref1"></div>
|
|
|
- <div class="second" ref="seller_ref2"></div>
|
|
|
- <div class="third" ref="seller_ref3"></div>
|
|
|
- <div class="fourth" ref="seller_ref4"></div>
|
|
|
- <div class="bgc">
|
|
|
- <div id="bgc_left" class="untoken"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <div class="bottom_chart five" ref="myChart"></div>
|
|
|
- <div class="bottom_chart six" ref="myChart2"></div>
|
|
|
- <div class="bottom_chart seven" ref="seller_ref7"></div>
|
|
|
- <div class="bottom_chart eight" ref="seller_ref8">
|
|
|
- <div class="warning_info">报警日志</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="line2"></div>
|
|
|
- <div class="line3"></div>
|
|
|
- <MsgInfo></MsgInfo>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import MsgInfo from "./MsgInfo.vue"
|
|
|
-export default {
|
|
|
- name: 'TablePage',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- position:0,
|
|
|
- arr1:[],
|
|
|
- arr2:[],
|
|
|
- arr3:[]
|
|
|
- }
|
|
|
- },
|
|
|
- components:{
|
|
|
- MsgInfo
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initChart()
|
|
|
- this.takeColor()
|
|
|
- this.initWebSocket()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- takeColor(){
|
|
|
- let left = document.getElementById("bgc_left")
|
|
|
- let num = (this.position/50)*55
|
|
|
- if(num==0){
|
|
|
- left.style.width ="27px"
|
|
|
- }else if(this.position/50>=1&&this.position/50<=4){
|
|
|
- left.style.width =(num+30)+"px"
|
|
|
- }else{
|
|
|
- left.style.width =(num)+"px"
|
|
|
- }
|
|
|
- },
|
|
|
- initChart() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- this.chartInstance1 = this.$echarts.init(this.$refs.seller_ref1, 'chalk');
|
|
|
- this.chartInstance2 = this.$echarts.init(this.$refs.seller_ref2, 'chalk');
|
|
|
- this.chartInstance3 = this.$echarts.init(this.$refs.seller_ref3, 'chalk');
|
|
|
- this.chartInstance4 = this.$echarts.init(this.$refs.seller_ref4, 'chalk');
|
|
|
- this.myChart = this.$echarts.init(this.$refs.myChart, 'chalk');
|
|
|
- this.myChart2 = this.$echarts.init(this.$refs.myChart2, 'chalk');
|
|
|
- this.chartInstance7 = this.$echarts.init(this.$refs.seller_ref7, 'chalk');
|
|
|
- // this.chartInstance8 = this.$echarts.init(this.$refs.seller_ref8, 'chalk');
|
|
|
- // 绘制图表
|
|
|
- var data = []
|
|
|
- for(let i = 0 ; i <=1300;i+=50){
|
|
|
- let str = i + "m"
|
|
|
- data.push(str)
|
|
|
- }
|
|
|
- let data2 = []
|
|
|
- for(let i =0; i<26;i++){
|
|
|
- let newArr = [`${i*50}m`, '锚索应力']
|
|
|
- let newArr2 = [`${i*50}m`, '顶板离层']
|
|
|
- data2.push(newArr)
|
|
|
- data2.push(newArr2)
|
|
|
- }
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- data:data,
|
|
|
- // show: false,
|
|
|
- nameTextStyle:{
|
|
|
- height:10,
|
|
|
-
|
|
|
- },
|
|
|
- axisLabel:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- axisTick:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- data: ['锚索应力', '顶板离层'],
|
|
|
- axisTick:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- symbolSize: 5,
|
|
|
- data: data2,
|
|
|
- type: 'scatter'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- var option3 = {
|
|
|
- animation:false,
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data,
|
|
|
- axisLabel:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- axisTick:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- data:["1"],
|
|
|
- type: 'value',
|
|
|
- axisLine:{
|
|
|
- lineStyle:{
|
|
|
- width:1,
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel:{
|
|
|
- show:false
|
|
|
- },
|
|
|
- splitLine:{
|
|
|
- show:false
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [
|
|
|
- ['1200m', '1'],
|
|
|
- ],
|
|
|
- type: 'bar',
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- //导入positon
|
|
|
- this.position = parseInt(option3.series[0].data[0][0])
|
|
|
- var zhexian ={
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['1', '2', '3', '4', '5', '6', '7']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- var paixu = {
|
|
|
- xAxis: {
|
|
|
- max: 'dataMax'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['A', 'B', 'C', 'D', 'E'],
|
|
|
- inverse: true,
|
|
|
- animationDuration: 300,
|
|
|
- animationDurationUpdate: 300,
|
|
|
- max: 2 // only the largest 3 bars will be displayed
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- realtimeSort: true,
|
|
|
- name: '锚索应力（列表排名）',
|
|
|
- type: 'bar',
|
|
|
- data: [],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- valueAnimation: true
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- legend: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- animationDuration: 0,
|
|
|
- animationDurationUpdate: 3000,
|
|
|
- animationEasing: 'linear',
|
|
|
- animationEasingUpdate: 'linear'
|
|
|
- };
|
|
|
- var paixu2 = {
|
|
|
- xAxis: {
|
|
|
- max: 'dataMax'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['A', 'B', 'C', 'D', 'E'],
|
|
|
- inverse: true,
|
|
|
- animationDuration: 300,
|
|
|
- animationDurationUpdate: 300,
|
|
|
- max: 2 // only the largest 3 bars will be displayed
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- realtimeSort: true,
|
|
|
- name: '顶板离层（排名）',
|
|
|
- type: 'bar',
|
|
|
- data: [],
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- valueAnimation: true
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- legend: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- animationDuration: 0,
|
|
|
- animationDurationUpdate: 3000,
|
|
|
- animationEasing: 'linear',
|
|
|
- animationEasingUpdate: 'linear'
|
|
|
- };
|
|
|
- this.chartInstance1.setOption(option);
|
|
|
- this.chartInstance2.setOption(option);
|
|
|
- this.chartInstance3.setOption(option3);
|
|
|
- this.chartInstance4.setOption(option);
|
|
|
- this.myChart.setOption(paixu);
|
|
|
- this.myChart2.setOption(paixu2);
|
|
|
- this.chartInstance7.setOption(zhexian);
|
|
|
- // this.chartInstance8.setOption(option);
|
|
|
- },
|
|
|
-
|
|
|
- initWebSocket(){
|
|
|
- // var websocket = null;
|
|
|
- //判断当前浏览器是否支持WebSocket
|
|
|
- if ('WebSocket' in window) {
|
|
|
- var serviceIp ="localhost:8080";
|
|
|
- this.websocket = new WebSocket("ws://"+serviceIp+"/Work");
|
|
|
- }else if ('MozWebSocket' in window) {
|
|
|
- var serviceIp ="localhost:8080";
|
|
|
- this.websocket = new WebSocket("ws://"+serviceIp+"/Work");
|
|
|
- }
|
|
|
- else {
|
|
|
- console.log('当前浏览器 Not support websocket');
|
|
|
- let that = this;
|
|
|
- this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
|
|
|
- that.forgeWebSocket();
|
|
|
- },30000);
|
|
|
- }
|
|
|
- let that = this;
|
|
|
- this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
|
|
|
- if(that.websocket!=null){
|
|
|
- that.websocket.send("HeartBeat");
|
|
|
- console.log("发送心跳包:HeartBeat");
|
|
|
- }
|
|
|
- },30000);
|
|
|
-
|
|
|
- //连接发生错误的回调方法
|
|
|
- this.websocket.onerror = function (ev) {
|
|
|
- console.log("WebSocket连接发生错误");
|
|
|
- };
|
|
|
-
|
|
|
- //连接成功建立的回调方法
|
|
|
- this.websocket.onopen = function (ev) {
|
|
|
- console.log("WebSocket连接成功");
|
|
|
- this.send("addsocket");
|
|
|
- }
|
|
|
-
|
|
|
- //接收到消息的回调方法
|
|
|
- let _this = this
|
|
|
- this.websocket.onmessage = function (event) {
|
|
|
- // console.log(event.data);
|
|
|
- let data = JSON.parse(event.data)
|
|
|
- console.log(data)
|
|
|
- _this.arr1.push(data.d1)
|
|
|
- _this.arr2.push(data.d2)
|
|
|
- _this.arr3.push(data.d1)
|
|
|
- _this.arr3.push(data.d2)
|
|
|
- let newArr1 = []
|
|
|
- let newArr2 = []
|
|
|
- let newArr3 = []
|
|
|
-
|
|
|
-
|
|
|
- if(_this.arr1.length<5){
|
|
|
- newArr1 = _this.arr1
|
|
|
- }else{
|
|
|
- newArr1 = _this.arr1.slice(_this.arr1.length-5)
|
|
|
- }
|
|
|
-
|
|
|
- if(_this.arr2.length<5){
|
|
|
- newArr2 = _this.arr2
|
|
|
- }else{
|
|
|
- newArr2 = _this.arr2.slice(_this.arr2.length-5)
|
|
|
- }
|
|
|
-
|
|
|
- if(_this.arr3.length<8){
|
|
|
- newArr3 = _this.arr3
|
|
|
- }else{
|
|
|
- newArr3 = _this.arr3.slice(_this.arr3.length-7)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- function run(myChart) {
|
|
|
- //获取数据
|
|
|
- _this.myChart.setOption({
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data:newArr1
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
- _this.myChart2.setOption({
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data:newArr2
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
- }
|
|
|
- setTimeout(()=>{
|
|
|
- run(_this.myChart);
|
|
|
- run(_this.myChart2);
|
|
|
- }, 0);
|
|
|
- // setInterval(function () {
|
|
|
- // run(_this.myChart);
|
|
|
- // run(_this.myChart2);
|
|
|
- // }, 3000);
|
|
|
- var option = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- data:[data.id],
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- var option1 = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- data:newArr3,
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- _this.chartInstance3.setOption(option);
|
|
|
- _this.chartInstance7.setOption(option1)
|
|
|
- // _this.myChart.setOption(option1);
|
|
|
- // _this.myChart2.setOption(option2);
|
|
|
- _this.position = parseInt(data.id[0])
|
|
|
- _this.takeColor()
|
|
|
- }
|
|
|
-
|
|
|
- //连接关闭的回调方法
|
|
|
- this.websocket.onclose = function (ev) {
|
|
|
- console.log("WebSocket连接关闭");
|
|
|
- this.websocket=null;
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-#main {
|
|
|
- font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
- text-align: center;
|
|
|
- height: 850px;
|
|
|
- color: #4ADEFE;
|
|
|
- padding-top: 60px;
|
|
|
- position: relative;
|
|
|
-// background-image: linear-gradient(
|
|
|
-// to right,
|
|
|
-// rgb(6, 19, 60) 0%,
|
|
|
-// rgb(1, 22, 105) 50%,
|
|
|
-// rgb(6, 19, 60) 100%
|
|
|
-// );
|
|
|
- // z-index: 2;
|
|
|
-}
|
|
|
-
|
|
|
-.com-container{
|
|
|
- margin: 0 auto;
|
|
|
- width: 1800px;
|
|
|
- height: 500px;
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
-}
|
|
|
-.com-chart{
|
|
|
- position: relative;
|
|
|
- height: 550px;
|
|
|
- div {
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-}
|
|
|
-.first{
|
|
|
- width: 1800px;
|
|
|
- height: 200px;
|
|
|
- top: -100px;
|
|
|
-}
|
|
|
-.second{
|
|
|
- width: 1800px;
|
|
|
- height: 200px;
|
|
|
- top: -30px;
|
|
|
-}
|
|
|
-.third{
|
|
|
- width: 1800px;
|
|
|
- height: 500px;
|
|
|
- top: 40px;
|
|
|
- z-index: 10;
|
|
|
-}
|
|
|
-.fourth{
|
|
|
- width: 1800px;
|
|
|
- height: 200px;
|
|
|
- top: 410px;
|
|
|
-}
|
|
|
-.bottom{
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.bottom_chart{
|
|
|
- width: 450px;
|
|
|
- height: 300px;
|
|
|
- outline: 1px solid #000;
|
|
|
-}
|
|
|
-.five{
|
|
|
- top: 0;
|
|
|
- left: 0px;
|
|
|
- width: 450px;
|
|
|
-
|
|
|
-}
|
|
|
-.six{
|
|
|
- top: 0;
|
|
|
- left: 600px;
|
|
|
- width: 450px;
|
|
|
-
|
|
|
-}
|
|
|
-.seven{
|
|
|
- top: 0;
|
|
|
- left: 900px;
|
|
|
-
|
|
|
- width: 450px;
|
|
|
-}
|
|
|
-.eight{
|
|
|
- top: 0;
|
|
|
- left: 1300px;
|
|
|
- width: 450px;
|
|
|
- overflow: hidden;
|
|
|
-// background-image: url('./assets/1.webp');
|
|
|
- // background-repeat: no-repeat;
|
|
|
- background-position: -40px 10px;
|
|
|
-}
|
|
|
-.line{
|
|
|
- height: 1px;
|
|
|
- width: 1440px;
|
|
|
- position: absolute;
|
|
|
- left: 180px;
|
|
|
- top: -40px;
|
|
|
- background-color: rgb(110,112,121);
|
|
|
-}
|
|
|
-.line2{
|
|
|
- height: 580px;
|
|
|
- width: 1px;
|
|
|
- position: absolute;
|
|
|
- left: 1620px;
|
|
|
- top: -40px;
|
|
|
- background-color: rgb(110,112,121);
|
|
|
-}
|
|
|
-.line3{
|
|
|
- height: 580px;
|
|
|
- width: 1px;
|
|
|
- position: absolute;
|
|
|
- left: 180px;
|
|
|
- top: -40px;
|
|
|
- background-color: rgb(110,112,121);
|
|
|
-}
|
|
|
-.charts{
|
|
|
- margin: 100px auto;
|
|
|
- width: 1440px;
|
|
|
- height: 500px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- div{
|
|
|
- outline: 1px solid #000;
|
|
|
- }
|
|
|
- .maosuoyingli{
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
- .dingbanliceng{
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
- .shujuquxian{
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
- .baojingrizhi{
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
-}
|
|
|
-.warning_info{
|
|
|
- border-bottom: 1px solid #000;
|
|
|
-}
|
|
|
-.bgc{
|
|
|
- transform: translate(-50%);
|
|
|
- height: 369px;
|
|
|
- width: 1440px;
|
|
|
- top: 101px;
|
|
|
- left: 50%;
|
|
|
- z-index: 8;
|
|
|
- background-color: rgb(228, 214, 214);
|
|
|
- .untoken{
|
|
|
- height: 100%;
|
|
|
- background-color: rgb(75, 71, 71);
|
|
|
- z-index: 9;
|
|
|
- transition: .5s;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
