<template>
	<div class="ScreenFX">
    <header>
    		<h1>桥梁健康监测</h1>
    </header>
    <div>
      <div class="tab-content">
      	<div v-show="activeTab === 0">
      		<!-- 变形监测 -->
          <div class="box-show">
            <div class="box-left">
            	<div>
            		<div class="left-title">
                  <span>沉降监测</span>
                </div>
            		<div class='cjchart' id='cjchart'></div>
            	</div>
            	<div>
            		<div class="left-title">倾斜度监测</div>
            		<div class='qxdchart' id='qxdchart'></div>
            	</div>
            </div>
          </div>
          <div class="box-showr">
            <div class="box-right">
            	<div class="right-div">
            		<div class="left-title">监测设备告警</div>
            		<div id="bjchart" class="bjchart"></div>
            	</div>
            	<div class="right-div">
            		<div class="left-title">裂缝监测</div>
            		<div class='lfchart' id='lfchart'></div>
            	</div>
            	<div class="right-div">
            		<div class="left-title">
                  <span>挠度监测</span>
                </div>
            		<div class='ndchart' id='ndchart'></div>
            	</div>
            </div>

          </div>
      	</div>
      	<div v-show="activeTab === 1" >
      		<!-- 振动监测 -->
      		<div  class="box-show">
      			<div class="box-left">
      				<div>
      					<div class="left-title">振动监测</div>
      					<div class='zdonechart' id='zdonechart'></div>
      				</div>
      				<div>
      					<div class="left-title">振动监测</div>
      					<div class='zdtwochart' id='zdtwochart'></div>
      				</div>
      			</div>
      		</div>
          <div class="box-showr">
            <div class="box-right1">
            	<div>
            		<div class="left-title">振动监测</div>
            		<div class='zdthreechart' id='zdthreechart'></div>
            	</div>
            	<div>
            		<div class="left-title">振动监测</div>
            		<div class='zdfourchart' id='zdfourchart'></div>
            	</div>
            </div>
          </div>
      	</div>
      	<div v-show="activeTab === 2" >
      		<!-- 应力应变 -->
      		<div class="box-show">
      			<div class="box-left">
      				<div class="left-div">
      					<div class="left-title">混凝土表面应变</div>
      					<div class='hntonechart' id='hntonechart'></div>
      				</div>
      				<div class="left-div">
      					<div class="left-title">混凝土表面应变</div>
      					<div class='hnttwochart' id='hnttwochart'></div>
      				</div>
      			</div>
      		</div>
          <div class="box-showr">
            <div class="box-right1">
            	<div>
            		<div class="left-title">索力监测</div>
            		<div class='slonechart' id='slonechart'></div>
            	</div>
            	<div>
            		<div class="left-title">索力监测</div>
            		<div class='sltwochart' id='sltwochart'></div>
            	</div>
            </div>
          </div>
      	</div>
      	<div v-show="activeTab === 3" >
      		<!-- 环境监测 -->
      		<div class="box-show">
      			<div class="box-left">
      				<div class="left-div">
      					<div class="left-title">环境温湿度监测</div>
      					<div class='wsdchart' id='wsdchart'></div>
      				</div>
      				<div class="left-div">
      					<div class="left-title">风速监测</div>
      					<div class='fschart' id='fschart'></div>
      				</div>
      			</div>
      		</div>
          <div class="box-showr">
            <div class="box-right1">
            	<div class="right-div">
            		<div class="left-title">结构温度监测</div>
            		<div class='jgwdchart' id='jgwdchart'></div>
            	</div>
            	<div class="right-div">
            		<div class="left-title">腐蚀度监测</div>
            		<div class='fsdchart' id='fsdchart'></div>
            	</div>
            </div>
          </div>
      	</div>
      	<div v-show="activeTab === 4"  >
      		<!-- 视频监控 -->
      		<div class="box-show">
      			<div class="box-left1">
      				<div class="left-div">
      					<video-player
      						class="video-player vjs-custom-skin"
      						ref="videoPlayer"
      						:playsinline="true"
      						:options="playerOptions"/>
      					<video-player
      						class="video-player vjs-custom-skin"
      						ref="videoPlayer"
      						:playsinline="true"
      						:options="playerOptions"/>
      				</div>
      			</div>
      		</div>
          <div class="box-showr">
            <div class="box-right2">
            	<div class="right-div">
            		<video-player
            			class="video-player vjs-custom-skin"
            			ref="videoPlayer"
            			:playsinline="true"
            			:options="playerOptions"/>

            		<video-player
            			class="video-player vjs-custom-skin"
            			ref="videoPlayer"
            			:playsinline="true"
            			:options="playerOptions"/>
            	</div>
            </div>
          </div>
      	</div>
      </div>
    </div>
    <iframe src="http://192.168.3.60:12022" id="target-iframe" scrolling="no"></iframe>
    <div class="tab-nav">
      <ul></ul>
      <ul class="onlyclass">
        <li v-for="(item, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="handleClick(index,item)">
          <span class="equname">{{ item.name }}</span>
        </li>
      </ul>
      <ul></ul>
    </div>
	</div>
</template>

<script>
import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);
import * as echarts from "echarts";
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import {hoursChart,qxdhoursChart,ndhoursChart,lfhoursChart,wsdhoursChart,fshoursChart,
jgwdhoursChart,fsdhoursChart,zdhoursChart,zdtwohoursChart,hnthoursChart,slhoursChart,bjhoursChart} from "@/api/monitor/cache";
export default {
	components: {
	   videoPlayer
	 },
	data() {
		return {
			tabs: [
            {
              name: '变形监测',
              value: 0
            },
            {
              name: '振动监测',
              value: 1
            },
            {
              name: '应力应变',
              value: 2
            },
            {
              name: '环境监测',
              value: 3
            },
            {
              name: '实时监控',
              value: 4
            },
			    ],
			activeTab: '',
			chartData:[],
			playerOptions: {
				playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
				autoplay: false, // 如果为true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 是否视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [{
				 type: "video/mp4", // 类型
				 src: 'http://vjs.zencdn.net/v/oceans.mp4' // url地址
				}],
				notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, // 当前时间和持续时间的分隔符
					durationDisplay: true, // 显示持续时间
					remainingTimeDisplay: false, // 是否显示剩余时间功能
					fullscreenToggle: true // 是否显示全屏按钮
				}
			},
      //温湿度
      envtime:[],

		}
	},
	methods: {
		handleClick(index,item) {
			this.activeTab = index;
      var targetIframe = document.getElementById('target-iframe');
      targetIframe.contentWindow.postMessage(item.name+"|", '*');

			if(this.activeTab === 0){
				this.cjChart();
				this.qxdChart();
				this.ndChart();
				this.lfChart();
				this.alarmChart()
			}else if(this.activeTab === 1){
				this.zdoneChart();
				setTimeout(()=>{
					this.zdtwoChart();
				},2000)
				setTimeout(()=>{
					this.zdthreeChart();
				},4000)
				setTimeout(()=>{
					this.zdfourChart();
				},6000)
			}else if(this.activeTab === 2){
				this.hntoneChart();
				setTimeout(()=>{
					this.hnttwoChart();
				},2000)
				this.sloneChart()
				setTimeout(()=>{
					this.sltwoChart()
				},2000)
			}else if(this.activeTab === 3){
				this.wsdChart();
				this.fxChart();
				this.jgwdChart();
				this.fsdChart()
			}
		},
		//沉降监测
		cjChart(){
			hoursChart().then((res) => {
				var color=['#21fdf4','#00ff00','#f9921c'];
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
					this.chartData = body[i]||[];
					var item = body[i]||[];
          serises.push({
            name: item.equipmentName,
            type: "line",
            smooth: true, // 平滑曲线
            symbol: 'none', // 去掉折线图上的转折点

            lineStyle: {
              color:color[i]
            },
            itemStyle: {
              color:color[i] // 自定义图标颜色
            },
            data:this.chartData.value||[],
          });
				};
				this.drawChart(serises)
			});
		},
		//沉降监测图表
		drawChart(serises) {
			let chart = this.$echarts.init(document.getElementById('cjchart'))
			window.addEventListener('resize', function (){chart.resize()})
        chart.setOption({
          grid: {
          x: 30, // 左间距
          y: 40, // 上间距
          x2: 30, // 右间距
          y2: 40, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
          },
				// dataZoom 组件 用于区域缩放
				dataZoom: [
					{
						type: 'inside',
						xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
						// 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
						start: 0,
						end: 80
					}
		       ],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'line'
					},
					textStyle: {
						color: '#d5dbff' // 文字颜色
					},
					formatter: function (params) {
						let unit = serises.map(item => item.unit)
						let relVal = '';
						for (let i = 0; i < params.length; i++) {
							relVal += '时间:'+ params[0].name+"&nbsp"+params[i].seriesName +":" +params[i].value +(unit[i]||'')+'<br/>';
						}
						return relVal;
					}
				},
				legend: {
					formatter: function (name) {
						return name;
					},
					top: 13,
					right: 10,
					textStyle: {
						fontSize: 14,
						fontWeight:400,
						color: '#fff'
					}
				},
		     xAxis: [
		       {
		         type: 'category',
		         // 坐标轴轴线
		         axisLine: {
		           show: false, // 是否显示坐标轴轴线 默认显示
		           lineStyle: {
		             type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		             width: 1, // 坐标轴线线宽, 不设置默认值为 1
		             color: '#cccccc' // 坐标轴线线的颜色
		           }
		         },
		         // 分隔线
		       splitLine: {
		         show: false, // 是否显示分隔线 默认数值轴显示

		       },
		         // 坐标轴刻度
            axisTick: {
		     		show: false,
		     		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		     		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		         },
		        axisLabel: {
		            interval: 'auto', // 只显示最大和最小坐标
		        	textStyle: {
		        		show: true,
		        		color: "#fff",
		        		fontSize: "12",
		        	}

		          },
		         // 类目名称
		         data: this.chartData.times||[]
		       }
		     ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
				series:serises || [],
			})
		},
		//倾斜度
		qxdChart(){
			qxdhoursChart().then((res) => {
				var color=['#1b8ffc','#ffa500'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
            serises.push({
             name: item.equipmentName,
             type: "line",
             smooth: true, // 平滑曲线
             symbol: 'none', // 去掉折线图上的转折点

             lineStyle: {
               color:color[i]
             },
             itemStyle: {
               color:color[i] // 自定义图标颜色
             },
             data:this.chartData.value||[],
            });
					};
					this.inclinaChart(serises)
				});
			},
		//倾斜度监测图表
		inclinaChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('qxdchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
				grid: {
					x: 30, // 左间距
					y: 40, // 上间距
					x2: 30, // 右间距
					y2: 20, // 下间距
					containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
				},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#cccccc' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		         splitLine: {
		           show: false, // 是否显示分隔线 默认数值轴显示

		         },
		           // 坐标轴刻度
		       axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		          axisLabel: {
		              interval: 'auto', // 只显示最大和最小坐标
		          	textStyle: {
		          		show: true,
		          		color: "#fff",
		          		fontSize: "12",
		          	}

		            },
		           // 类目名称
		           data: this.chartData.times||[]
		         }
		       ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//挠度监测
		ndChart(){
			ndhoursChart().then((res) => {
				var color=['#0000ff','#00f5ff'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
					     type: 'line', // 系列类型
					     name: item.equipmentName, // 系列名称, 用于tooltip的显示, legend 的图例筛选
					     symbol: 'circle', // 标记的图形
					     symbolSize: 8, // 标记的大小
					     // 图形的样式
					     itemStyle: {
					       color: color[i],
					     },
					     // 线的样式, 修改 lineStyle 中的颜色不会影响图例颜色, 一般不设置线的样式
					     lineStyle: {
					       type: 'solid', // 线的类型 'solid', 'dashed', 'dotted'
					       color: color[i]
					     },
					     // 区域填充样式
					     areaStyle: {
					       color: {  // 填充的颜色
					         type: 'linear', // linear 线性渐变 radial 径向渐变
					         x: 0,
					         y: 0,
					         x2: 0,
					         y2: 1,
					         colorStops: [{
					           offset: 0,
					           color: color[i] // 0% 处的颜色
					         }, {
					           offset: 1,
					           color: color[i] // 100% 处的颜色
					         }]
					       }
					     },
					     // 系列中的数据内容数组
					     data: this.chartData.value||[]
						});
					};
					this.deflectionChart(serises)
				});
			},
		//挠度监测
		deflectionChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('ndchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
				grid: {
				  x: 30, // 左间距
				  y: 40, // 上间距
				  x2: 30, // 右间距
				  y2: 20, // 下间距
				  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
				},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},
		//裂缝监测
		lfChart(){
			lfhoursChart().then((res) => {
				var body = res.data||[];
				var serises = [];
        var color=['#00ee00','#ff00ff','#ffff00','#4169e1'];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
             name: '裂缝监测',
             type: "line",
             smooth: true, // 平滑曲线
             symbol: 'none', // 去掉折线图上的转折点
             lineStyle: {
               color:color[i]
             },
             itemStyle: {
               color:color[i] // 自定义图标颜色
             },
             data:this.chartData.value||[],
						});
					};
					this.crackChart(serises)
				});
			},
		//挠度监测
		crackChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('lfchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
				grid: {
				  x: 30, // 左间距
				  y: 40, // 上间距
				  x2: 30, // 右间距
				  y2: 20, // 下间距
				  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
				},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//温湿度监测
		wsdChart(){
			wsdhoursChart().then((res) => {
				var body = res.data||[];
        for(var i= 0;i<body.length;i++){
          	this.tempChart(body)
        }

				});
			},
		//温湿度监测
		tempChart(item) {
      console.log(item,"item")
      	  // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('wsdchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
          grid: {
            x: 30, // 左间距
            y: 40, // 上间距
            x2: 30, // 右间距
            y2: 20, // 下间距
            containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
          },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
               let relVal = '';
               var name = ['环境温度','环境湿度']
               for (let i = 0; i < params.length; i++) {
                   relVal +=
                       '时间:'+
                        params[0].name+
                       "&nbsp"+  "&nbsp"+  "&nbsp"+
                       name[i] +
                        ":  " +
                       params[i].value +'<br/>';
               }
               return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#cccccc' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		         splitLine: {
		           show: false, // 是否显示分隔线 默认数值轴显示

		         },
		           // 坐标轴刻度
		       axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		          axisLabel: {
		              interval: 'auto', // 只显示最大和最小坐标
		          	textStyle: {
		          		show: true,
		          		color: "#fff",
		          		fontSize: "12",
		          	}

		            },

		           data:item[0].times,
		         }
		       ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
          series: [
           {
             name: item[0].equipmentName,
             data: item[0].wendu,
             type: 'line',
             showSymbol: false,
             smooth: true,
             itemStyle: {
               normal: {
                 lineStyle: {
                   color: '#ffe000' //改变折线颜色
                 },
                 areaStyle: { type: 'default' },
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#ffe000' },
                   { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                   { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
                 ])
               }
             }
           },
           {
           name: item[0].equipmentName,
           data: item[0].shidu,
             type: 'line',
             showSymbol: false,
             smooth: true,
             itemStyle: {
               normal: {
                 lineStyle: {
                   color: '#13e850' //改变折线颜色
                 },
                 areaStyle: { type: 'default' },
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#13e850' },
                   { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                   { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
                 ])
               }
             }
           },
         ]

			})
		},
		//风向监测
		fxChart(){
			fshoursChart().then((res) => {
				var color=['#0462f1','#9932cc'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
					 name: item.equipmentName,
					 type: "line",
					 symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
					 showAllSymbol: true,
					 symbolSize: 0,
					 smooth: true,
					 lineStyle: {
					   normal: {
					     color: color[i], // 线条颜色
					   },
					   borderColor: color[i],
					 },
					 itemStyle: {
					   color: color[i],
					   borderColor: color[i],

					 },
					 tooltip: {
					   show: true,
					 },
					 areaStyle: {
					   //区域填充样式
					   normal: {
					     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					     color: new this.$echarts.graphic.LinearGradient(
					       0,
					       0,
					       0,
					       1,
					       [
					         {
					           offset: 0,
					           color: color[i],
					         },
					         {
					           offset: 1,
					           color: color[i],
					         },
					       ],
					       false
					     ),
					     shadowColor: color[i], //阴影颜色
					   },
					 },
					 data:item.value||[],
						});
					};
					this.windChart(serises)
				});
			},
		//风向监测
		windChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('fschart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({

		      grid: {
		      	x: 30, // 左间距
		      	y: 40, // 上间距
		      	x2: 30, // 右间距
		      	y2: 20, // 下间距
		      	containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
		      },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},
		//结构温度监测
		jgwdChart(){
			jgwdhoursChart().then((res) => {
				var body = res.data||[]
        for(var i= 0;i<body.length;i++){
              this.structureChart(body)
        }
				});
			},
		//结构温度监测
		structureChart (item) {
      console.log(item,'——————————————————')
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('jgwdchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
			grid: {
				x: 30, // 左间距
				y: 40, // 上间距
				x2: 30, // 右间距
				y2: 20, // 下间距
				containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
			},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		       formatter: function (params) {  //  只粘贴formatter了
		           let relVal = '';
		           var name = ['表面温度','中部温度','底部温度']
		           for (let i = 0; i < params.length; i++) {
		               relVal +=
		                   '时间:'+
		                    params[0].name+
		                   "&nbsp"+  "&nbsp"+  "&nbsp"+
		                   name[i] +
		                    ":  " +
		                   params[i].value +'<br/>';
		           }
		           return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#cccccc' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		         splitLine: {
		           show: false, // 是否显示分隔线 默认数值轴显示

		         },
		           // 坐标轴刻度
		       axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		          axisLabel: {
		              interval: 'auto', // 只显示最大和最小坐标
		          	textStyle: {
		          		show: true,
		          		color: "#fff",
		          		fontSize: "12",
		          	}

		            },
		           // 类目名称
		           data:item[0].times||[]
		         }
		       ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		       series: [
		         {
		           name: item[0].equipmentName,
		           data: item[0].biaomianwendu,
		           type: 'line',
		           showSymbol: false,
		           smooth: true,
		           itemStyle: {
		             normal: {
		               lineStyle: {
		                 color: '#ff7f00' //改变折线颜色
		               },
		               areaStyle: { type: 'default' },
		               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		                 { offset: 0, color: '#ff7f00' },
		                 { offset: 0.5, color: '#ffa500' },
		                 { offset: 1, color: '#ffdab9' }
		               ])
		             }
		           }
		         },
		         {
		         name: item[0].equipmentName,
		         data: item[0].dibuwendu,
		           type: 'line',
		           showSymbol: false,
		           smooth: true,
		           itemStyle: {
		             normal: {
		               lineStyle: {
		                 color: '#13e850' //改变折线颜色
		               },
		               areaStyle: { type: 'default' },
		               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
		                 { offset: 0, color: '#13e850' },
		                 { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
		                 { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
		               ])
		             }
		           }
		         },
             {
             name: item[0].equipmentName,
             data: item[0].zhongbuwendu,
               type: 'line',
               showSymbol: false,
               smooth: true,
               itemStyle: {
                 normal: {
                   lineStyle: {
                     color: '#00e5ee' //改变折线颜色
                   },
                   areaStyle: { type: 'default' },
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#00e5ee' },
                     { offset: 0.5, color: '#00ffff' },
                     { offset: 1, color: '#87ceff' }
                   ])
                 }
               }
             },
		       ]
			})
		},
		//腐蚀度
		fsdChart(){
			fsdhoursChart().then((res) => {
					var color=['#01efd6','#068cec'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
						type: 'bar',
						name:item.equipmentName,

						// 图形形状
						itemStyle: {
						    color: new echarts.graphic.LinearGradient(
						        0, 0, 0, 1,
						        [
						            // 柱子0%的颜色
						            {offset: 0, color: color[i]},
						            //柱子50%的颜色
						            {offset: 0.5, color: color[i]},
						            //柱子100%的颜色
						            {offset: 1, color: color[i]}
						        ]
						    )
						},
						//鼠标放到柱子上的样式
						emphasis: {
						    itemStyle: {
						        color: new echarts.graphic.LinearGradient(
						            0, 0, 0, 1,
						            [

						                {offset: 0, color: color[i]},
						                {offset: 0.7, color:color[i]},
						                {offset: 1, color: color[i]}
						            ]
						        )
						    }
						},
						barWidth:'20', //调节柱子的宽度
						barCategoryGap:'30%',   //调节柱子之间的距离
						data: this.chartData.value||[]
						});
					};
					this.CorrosivityChart(serises)
				});
			},
		//结构温度监测
		CorrosivityChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('fsdchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({

		       // 设置图表的位置
		     grid: {
		     	x: 30, // 左间距
		     	y: 40, // 上间距
		     	x2: 30, // 右间距
		     	y2: 20, // 下间距
		     	containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
		     },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},
		//振动监测设备1
		zdoneChart(){
			var params={
				equipmentName:'振动传感器1'
			}
			zdhoursChart(params).then((res) => {
				var color=['#47b6ff','#8deeee'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
					  name: item.equipmentName,
            type: 'bar',
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                        color: '#F68300',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7
                },
                normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#3977E6'},
                            {offset: 1, color: '#37BBF8'}

                        ]
                    )
                }
            },
						data: this.chartData.value||[]
						});
					};
					this.vibrateoneChart(serises)
				});
			},
		//振动1监测
		vibrateoneChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('zdonechart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
				grid: {
					x: 30, // 左间距
					y: 40, // 上间距
					x2: 30, // 右间距
					y2: 50, // 下间距
					containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
				},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		     xAxis: [
		       {
		         type: 'category',
		         // 坐标轴轴线
		         axisLine: {
		           show: false, // 是否显示坐标轴轴线 默认显示
		           lineStyle: {
		             type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		             width: 1, // 坐标轴线线宽, 不设置默认值为 1
		             color: '#cccccc' // 坐标轴线线的颜色
		           }
		         },
		         // 分隔线
		       splitLine: {
		         show: false, // 是否显示分隔线 默认数值轴显示

		       },
		         // 坐标轴刻度
		     axisTick: {
		     		show: false,
		     		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		     		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		         },
		        axisLabel: {
		            interval: 'auto', // 只显示最大和最小坐标
		        	textStyle: {
		        		show: true,
		        		color: "#fff",
		        		fontSize: "12",
		        	}

		          },
		         // 类目名称
		         data: this.chartData.times||[]
		       }
		     ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},
		//振动监测设备2
		zdtwoChart(){
			var params={
				equipmentName:'振动传感器2'
			}
			zdhoursChart(params).then((res) => {
				var color=['#47b6ff','#8deeee'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
					name: item.equipmentName,
					type: "line",
					symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
					showAllSymbol: true,
					symbolSize: 0,
					smooth: true,
					lineStyle: {
					  normal: {
					    color: "rgba(24,187,157,1)", // 线条颜色
					  },
					  borderColor: "rgba(0,0,0,.4)",
					},
					itemStyle: {
					  color: "rgba(24,187,157,1)",
					  borderColor: "#646ace",

					},
					tooltip: {
					  show: true,
					},
					areaStyle: {
					  //区域填充样式
					  normal: {
					    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					    color: new this.$echarts.graphic.LinearGradient(
					      0,
					      0,
					      0,
					      1,
					      [
					        {
					          offset: 0,
					          color: "rgba(24,187,157,.3)",
					        },
					        {
					          offset: 1,
					          color: "rgba(24,187,157, 0)",
					        },
					      ],
					      false
					    ),
					    shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
					  },
					},
					data:this.chartData.value||[],
						});
					};
					this.vibratetwoChart(serises)
				});
			},
		//振动2监测
		vibratetwoChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('zdtwochart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({

		       // 设置图表的位置
		       grid: {
		       x: 30, // 左间距
		       y: 40, // 上间距
		       x2: 30, // 右间距
		       y2: 50, // 下间距
		         containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
		       },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           show: true, // 不设置默认值为 true
		           // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: true, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#565e8f' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		           splitLine: {
		             show: false
		           },
		           // 坐标轴刻度
		           axisTick: {
		             show: false
		           },
		           // 坐标轴刻度标签
		           axisLabel: {
		             show: true, // 是否显示刻度标签 默认显示
		             color: '#fff', // 刻度标签文字的颜色
		             fontSize: 12, // 文字的字体大小
		             //rotate: 30, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
		             margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		             // 使用字符串模板，模板变量为刻度默认标签 {value}
		             formatter: '{value}'
		           },
		           // 类目名称
		           data: this.chartData.times||[]
		         }
		       ],
			   xAxis: [
			     {
			       type: 'category',
			       // 坐标轴轴线
			       axisLine: {
			         show: false, // 是否显示坐标轴轴线 默认显示
			         lineStyle: {
			           type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
			           width: 1, // 坐标轴线线宽, 不设置默认值为 1
			           color: '#cccccc' // 坐标轴线线的颜色
			         }
			       },
			       // 分隔线
			     splitLine: {
			       show: false, // 是否显示分隔线 默认数值轴显示

			     },
			       // 坐标轴刻度
			   axisTick: {
			   		show: false,
			   		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
			   		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
			       },
			      axisLabel: {
			          interval: 'auto', // 只显示最大和最小坐标
			      	textStyle: {
			      		show: true,
			      		color: "#fff",
			      		fontSize: "12",
			      	}

			        },
			       // 类目名称
			       data: this.chartData.times||[]
			     }
			   ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//振动监测设备3
		zdthreeChart(){
			var params={
				equipmentName:'振动传感器3'
			}
			zdhoursChart(params).then((res) => {
				var color=['#47b6ff','#8deeee'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
							name:item.equipmentName,
							type:'line',
							itemStyle: {
							 normal: {
								 color: '#98f5ff',
								 lineStyle: {        // 系列级个性化折线样式
									 width: 2,
									 type: 'solid',
									 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										 offset: 0,
										 color: '#6495ed'
									 }, {
										 offset: 1,
										 color: '#98f5ff'
									 }]),//线条渐变色
								 }
							 },
							 emphasis: {
								 color: '#98f5ff',
								 lineStyle: {        // 系列级个性化折线样式
									 width: 2,
									 type: 'dotted',
									 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										 offset: 0,
										 color: '#6495ed'
									 }, {
										 offset: 1,
										 color: '#98f5ff'
									 }])
								 }
							 }
						},//线条样式
						data:this.chartData.value||[]
						});
					};
					this.vibratethreeChart(serises)
				});
			},
		//振动3监测
		vibratethreeChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('zdthreechart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
			grid: {
			x: 30, // 左间距
			y: 40, // 上间距
			x2: 30, // 右间距
			y2: 50, // 下间距
			  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
			},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},

		//振动监测设备4
		zdfourChart(){
			var params={
				equipmentName:'振动传感器4'
			}
			zdhoursChart(params).then((res) => {
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
							name:item.equipmentName,
             type: "line",
             symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
             showAllSymbol: true,
             symbolSize: 0,
             smooth: true,
             lineStyle: {
               normal: {
                 color: "rgba(28, 134, 238)", // 线条颜色
               },
               borderColor: "rgba(28, 134, 238)",
             },
             itemStyle: {
               color: "rgba(28, 134, 238)",
               borderColor: "#646ace",

             },
             tooltip: {
               show: true,
             },
             areaStyle: {
               //区域填充样式
               normal: {
                 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                 color: new this.$echarts.graphic.LinearGradient(
                   0,
                   0,
                   0,
                   1,
                   [
                     {
                       offset: 0,
                       color: "rgba(28, 134, 238)",
                     },
                     {
                       offset: 1,
                       color: "rgba(0, 229, 238)",
                     },
                   ],
                   false
                 ),
                 shadowColor: "rgba(0, 229, 238)", //阴影颜色
               },
             },
							data: this.chartData.value||[]
						});
					};
					this.vibratefourChart(serises)
				});
			},
		//振动4监测
		vibratefourChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('zdfourchart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
		       // 设置图表的位置
		      grid: {
		        x: 30, // 左间距
		        y: 40, // 上间距
		        x2: 30, // 右间距
		        y2: 40, // 下间距
		        containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
		      },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#cccccc' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		         splitLine: {
		           show: false, // 是否显示分隔线 默认数值轴显示

		         },
		           // 坐标轴刻度
		       axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		          axisLabel: {
		              interval: 'auto', // 只显示最大和最小坐标
		          	textStyle: {
		          		show: true,
		          		color: "#fff",
		          		fontSize: "12",
		          	}

		            },
		           // 类目名称
		           data: this.chartData.times||[]
		         }
		       ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},

		//混凝土1
		hntoneChart(){
			var params={
				equipmentName:'表面式应变计1'
			}
			hnthoursChart(params).then((res) => {
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
							name:item.equipmentName,
							type: "line",
							symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
							showAllSymbol: true,
							symbolSize: 0,
							smooth: true,
							lineStyle: {
							  normal: {
							    color: "#1e90ff", // 线条颜色
							  },
							  borderColor: "#b0e2ff",
							},
							itemStyle: {
							  color: "#1e90ff",
							  borderColor: "#b0e2ff",

							},
							tooltip: {
							  show: true,
							},
							areaStyle: {
							  //区域填充样式
							  normal: {
							    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
							    color: new this.$echarts.graphic.LinearGradient(
							      0,
							      0,
							      0,
							      1,
							      [
							        {
							          offset: 0,
							          color: "rgba(24,187,157,.3)",
							        },
							        {
							          offset: 1,
							          color: "rgba(24,187,157, 0)",
							        },
							      ],
							      false
							    ),
							    shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
							  },
							},
							data:this.chartData.value||[],
						});
					};
					this.coagulationChart(serises)
				});
			},
		//混凝土1
		coagulationChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('hntonechart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
				grid: {
				  x: 30, // 左间距
				  y: 40, // 上间距
				  x2: 30, // 右间距
				  y2: 40, // 下间距
				  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
				},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//混凝土2
		hnttwoChart(){
			var params={
				equipmentName:'表面式应变计2'
			}
			hnthoursChart(params).then((res) => {
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
						name:item.equipmentName,
					type: "line",
					symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
					showAllSymbol: true,
					symbolSize: 0,
					smooth: true,
					lineStyle: {
					  normal: {
					    color: "rgba(72, 118, 255)", // 线条颜色
					  },
					  borderColor: "rgba(0,0,0,.4)",
					},
					itemStyle: {
					  color: "rgba(72, 118, 255)",
					  borderColor: "#646ace",
						            
					},
					tooltip: {
					  show: true,
					},
					areaStyle: {
					  //区域填充样式
					  normal: {
					    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					    color: new this.$echarts.graphic.LinearGradient(
					      0,
					      0,
					      0,
					      1,
					      [
					        {
					          offset: 0,
					          color: "rgba(72, 118, 255)",
					        },
					        {
					          offset: 1,
					          color: "rgba(24,187,157, 0)",
					        },
					      ],
					      false
					    ),
					    shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
					  },
					},
							data:this.chartData.value||[],
						});
					};
					this.coagulationtwoChart(serises)
				});
			},
		//混凝土2
		coagulationtwoChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('hnttwochart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
		      grid: {
		        x: 30, // 左间距
		        y: 40, // 上间距
		        x2: 30, // 右间距
		        y2: 40, // 下间距
		        containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
		      },
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		      yAxis: [
		        // 左侧Y轴
		        {
		          type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		          // 坐标轴在图表区域中的分隔线
		         splitLine: {
		           lineStyle: {
		             // 设置背景横线
		             color: '#081f52'
		           }
		         },
		          // 坐标轴刻度
		          axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		          // 坐标轴轴线。
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		          },
		          axisLabel: {
		           show: true, // 是否显示刻度标签 默认显示
		           color: '#fff', // 刻度标签文字的颜色
		           fontSize: 12, // 文字的字体大小
		           margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		          formatter: '{value}'
		          }
		        }
		      ],
		        series:serises || [],
			})
		},
		//索力1
		sloneChart(){
			var params={
				equipmentName:'锚索应力计1'
			}
			slhoursChart(params).then((res) => {
				var color=['#47b6ff','#8deeee'];
				var type =['bar','line']
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
							name:item.equipmentName,
							type:'line',
							itemStyle: {
													 normal: {
														 color: '#98f5ff',
														 lineStyle: {        // 系列级个性化折线样式
															 width: 2,
															 type: 'solid',
															 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
																 offset: 0,
																 color: '#6495ed'
															 }, {
																 offset: 1,
																 color: '#98f5ff'
															 }]),//线条渐变色
														 }
													 },
													 emphasis: {
														 color: '#98f5ff',
														 lineStyle: {        // 系列级个性化折线样式
															 width: 2,
															 type: 'dotted',
															 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
																 offset: 0,
																 color: '#6495ed'
															 }, {
																 offset: 1,
																 color: '#98f5ff'
															 }])
														 }
													 }
							},//线条样式
							data:this.chartData.value||[]
						});
					};
					this.cableforceoneChart(serises)
				});
			},
		//索力1
		cableforceoneChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('slonechart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
			grid: {
			  x: 30, // 左间距
			  y: 40, // 上间距
			  x2: 30, // 右间距
			  y2: 40, // 下间距
			  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
			},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		      xAxis: [
		        {
		          type: 'category',
		          // 坐标轴轴线
		          axisLine: {
		            show: false, // 是否显示坐标轴轴线 默认显示
		            lineStyle: {
		              type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		              width: 1, // 坐标轴线线宽, 不设置默认值为 1
		              color: '#cccccc' // 坐标轴线线的颜色
		            }
		          },
		          // 分隔线
		        splitLine: {
		          show: false, // 是否显示分隔线 默认数值轴显示

		        },
		          // 坐标轴刻度
		      axisTick: {
		      		show: false,
		      		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		      		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		          },
		         axisLabel: {
		             interval: 'auto', // 只显示最大和最小坐标
		         	textStyle: {
		         		show: true,
		         		color: "#fff",
		         		fontSize: "12",
		         	}

		           },
		          // 类目名称
		          data: this.chartData.times||[]
		        }
		      ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//索力2
		sltwoChart(){
			var params={
				equipmentName:'锚索应力计2'
			}
			slhoursChart(params).then((res) => {
				var body = res.data||[];
				var serises = [];
				for(var i = 0; i < body.length;i++){
				    this.chartData = body[i]||[];
				  	var item = body[i];
					serises.push({
          name:item.equipmentName,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 3,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(255, 5, 192)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 5, 192, 0.1)',
                  },
                ],
                false
              ),
            },
          },
          itemStyle: {
            normal: {
              color: 'rgb(255, 5, 192)',
            },
          },
						data:this.chartData.value||[]
						});
					};
					this.cableforcetwoChart(serises)
				});
			},
		//索力1
		cableforcetwoChart (serises) {
		     // 基于准备好的dom，初始化echarts实例
		     let chart = this.$echarts.init(document.getElementById('sltwochart'))
		     // 监听屏幕变化自动缩放图表
		     window.addEventListener('resize', function () {  chart.resize() })
		     chart.setOption({
			grid: {
			  x: 30, // 左间距
			  y: 40, // 上间距
			  x2: 30, // 右间距
			  y2: 40, // 下间距
			  containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
			},
		       // dataZoom 组件 用于区域缩放
		       dataZoom: [
		         {
		           type: 'inside',
		           xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
		           // 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
		           start: 0,
		           end: 80
		         }
		       ],
		       // 提示框组件
		       tooltip: {
		         trigger: 'axis', // 触发类型, axis: 坐标轴触发
		         axisPointer: {
		           type: 'line' // 指示器类型
		         },
		         textStyle: {
		           color: '#d5dbff' // 文字颜色
		         },
		        formatter: function (params) {  //  只粘贴formatter了
		                let unit = serises.map(item => item.unit)
		                 let relVal = '';
		                 for (let i = 0; i < params.length; i++) {
		                     relVal +=
		                         '时间:'+
		                        params[0].name+
		                         "&nbsp"+  "&nbsp"+  "&nbsp"+
		                         params[i].seriesName +
		                          ":  " +
		                         params[i].value +(unit[i]||'')+'<br/>';
		                 }
		                 return relVal;
		         }
		       },
		       // 图例组件
		       legend: {
		        formatter: function (name) {
		          return name;
		        },
		         top: 13, // 定位
		         right: 10,
		         textStyle: {  // 文本样式
		           fontSize: 14,
				   fontWeight:400,
		           color: '#fff'
		         }
		       },
		       // X轴
		       xAxis: [
		         {
		           type: 'category',
		           // 坐标轴轴线
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		             lineStyle: {
		               type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
		               width: 1, // 坐标轴线线宽, 不设置默认值为 1
		               color: '#cccccc' // 坐标轴线线的颜色
		             }
		           },
		           // 分隔线
		         splitLine: {
		           show: false, // 是否显示分隔线 默认数值轴显示

		         },
		           // 坐标轴刻度
		       axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		          axisLabel: {
		              interval: 'auto', // 只显示最大和最小坐标
		          	textStyle: {
		          		show: true,
		          		color: "#fff",
		          		fontSize: "12",
		          	}

		            },
		           // 类目名称
		           data: this.chartData.times||[]
		         }
		       ],
		       yAxis: [
		         // 左侧Y轴
		         {
		           type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
		           // 坐标轴在图表区域中的分隔线
		          splitLine: {
		            lineStyle: {
		              // 设置背景横线
		              color: '#081f52'
		            }
		          },
		           // 坐标轴刻度
		           axisTick: {
		       		show: false,
		       		interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
		       		inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
		           },
		           // 坐标轴轴线。
		           axisLine: {
		             show: false, // 是否显示坐标轴轴线 默认显示
		           },
		           axisLabel: {
		            show: true, // 是否显示刻度标签 默认显示
		            color: '#fff', // 刻度标签文字的颜色
		            fontSize: 12, // 文字的字体大小
		            margin: 10, // 刻度标签与轴线之间的距离 默认值 8
		           formatter: '{value}'
		           }
		         }
		       ],
		        series:serises || [],
			})
		},
		//报警监测
		alarmChart(){
			bjhoursChart().then((res) => {
				var body = res.data || [];
				this.pieData = body;
				this.bjChart(this.pieData)
			});
		},
		//报警监测图表
		bjChart(evevt) {
			console.log(evevt)
			let chart = this.$echarts.init(document.getElementById('bjchart'))
			window.addEventListener('resize', function (){chart.resize()})
		     chart.setOption({
				tooltip: {
				   trigger: 'item'
				 },
				 legend: {
				   top: '5%',
				   left: 'center',
					textStyle:{
						color:'#fff'
					}
				 },
				 series: [
				   {
				     name: '设备名称',
				     type: 'pie',
				     radius: ['40%', '60%'],
				     avoidLabelOverlap: false,
				     label: {
				       show: false,
				       position: 'center'
				     },
				     emphasis: {
				       label: {
				         show: true,
				         fontSize: 40,
				         fontWeight: 'bold'
				       }
				     },
				     labelLine: {
				       show: false
				     },
				   data:this.pieData,
				   itemStyle: {
					   normal: {
						 color: function (colors) {
						   var colorList = [
							'#00ee00','#ff00ff','#ffff00','#1e90ff'
						   ];
						   return colorList[colors.dataIndex];
						 }
					   },
					 }
				   }
				 ]
			})
		},
	}

}
</script>

<style lang="scss" scope>
  html, body, #app {
    height: 0px!important;
    margin: 0px!important;
    padding: 0px;
  }
	@font-face {
		font-family:"diget year";
		src: url("../../assets/fonts/font.ttf");
	};

  .ScreenFX{
    width: 100%;
    height:100%;
  }
	.font_digit{font-family:diget year;}
			header{
				height:6rem;width:100%;display:flex;justify-content:center;
					h1{
						width:100%;
					  height: 100%;
						user-select:none;
						font-size:1.8rem;
						line-height:10;
						text-align:center;
            line-height:2.5rem;
						letter-spacing: 6px;
						text-shadow: 3px 3px 1px #575757;
						color:#fff;
						font-weight: bolder;
            background:no-repeat center center url('../../assets/images/newtop.png');
            background-size:100% 100%;
            margin-block-start: 0em!important;
            margin-block-end: 0em!important;
					}

			}
      .tab-nav{
        width: 100%;
        height: 7.625rem;
        display: flex;
        align-items: center;
        background-image:  url('../../assets/images/newbottom1.png');
        background-size:100% 100%;
        position: fixed;
        bottom: 0px;
      }
      .tab-nav > ul:nth-child(1){
        width: 25%;
        height: 100%;
      }
      .tab-nav > ul:nth-child(2){
        width: 50%;
        height: 100%;
      }
      .tab-nav > ul:nth-child(3) {
        width: 25%;
        height: 100%;
      }
      .tab-nav ul {
         display: flex;
         justify-content: space-between;
         align-items: center;

      }
      .onlyclass li {
        width:10%;
        height: 5.625rem;
        color: #fff;
        font-weight: bolder;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .onlyclass > li:nth-child(1){
        background: url("../../assets/images/bx.png");
        background-size: 100% 100%;
         margin-bottom: 80px;
      }
      .onlyclass> li:nth-child(2){
        background-image: url("../../assets/images/zd.png");
        background-size: 100% 100%;
         margin-bottom: 105px;
      }
      .onlyclass > li:nth-child(3){
        background: url("../../assets/images/yl.png");
        background-size: 100% 100%;
         margin-bottom: 120px;
      }
      .onlyclass> li:nth-child(4){
        background-image: url("../../assets/images/hj.png");
        background-size: 100% 100%;
         margin-bottom: 105px;
      }
      .onlyclass> li:nth-child(5){
        background-image: url("../../assets/images/shjk.png");
        background-size: 100% 100%;
         margin-bottom: 80px;
      }
      .onlyclass li:nth-child(1).active {
        background: url("../../assets/images/bxactive.png");
        background-size: 100% 100%;
        margin-bottom: 80px;

      }
      .onlyclass li:nth-child(2).active {
        background-image: url("../../assets/images/zdactive.png");
        background-size: 100% 100%;
        margin-bottom: 105px;
      }
      .onlyclass li:nth-child(3).active {
         background: url("../../assets/images/ylactive.png");
        background-size: 100% 100%;
        margin-bottom: 120px;
      }
      .onlyclass li:nth-child(4).active {
        background-image: url("../../assets/images/hjactive.png");
        background-size: 100% 100%;
        margin-bottom: 105px;
      }
      .onlyclass li:nth-child(5).active {
       background-image: url("../../assets/images/shjkactive.png");
        background-size: 100% 100%;
        margin-bottom: 80px;
      }
      .equname{
        padding-top: 8.125rem;
        font-family:diget year;
        font-size: 1.3rem;
        letter-spacing: 2px;

      }
	//变形监测
	.box-show{
    width: 23%;
    height:100%;
    float:left;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0.9375rem;
  }
	.box-left{
		width: 100%;
		height: 50rem;
		display: flex;
		flex-direction: column;
	}
	.box-left >div{
		width:100%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
    background-color:#0a1c35;
    opacity: 0.88;
    margin-bottom: 1.25rem;
		.left-title{
      background-image: url("../../assets/images/newtitle.png");
      background-size: 100% 100%;
			width: 100%;
			height: 15%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #fff !important;
			padding-left:65px;
			font-size: 1.5rem;
       font-family: diget year;
			letter-spacing: 0.3125rem;
		}
		.cjchart{
			width: 100%;
			height:80%;
		}
		.qxdchart{
			width: 100%;
			height:80%;
		}
		.qsycchart{
			width: 100%;
			height:80%;
		}
		.wsdchart{
			width: 100%;
			height:80%;
		}
		.fschart{
		width: 100%;
		height:80%;
		}
		.zdonechart{
		width: 100%;
		height:80%;
		}
		.zdtwochart{
		width: 100%;
		height:80%;
		}
		.hntonechart{
		width: 100%;
		height:80%;
		}
		.hnttwochart{
			width: 100%;
			height:80%;
		}
	}
  .box-showr{
    width: 23%;
    height:100%;
    float:right;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0.9375rem;
  }
	.box-right{
		width: 100%;
		height: 50rem;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.box-right >div{
		width:100%;
		height: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
    background-color:#0a1c35;
    opacity: 0.88;
    margin-bottom: 1.25rem;
		.left-title{
     background-image: url("../../assets/images/newtitle.png");
     background-size: 100% 100%;
      width: 100%;
      height: 20%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color:#fff;
       font-family: diget year;
			padding-left:65px;
			font-size: 1.5rem;
			letter-spacing: 0.3125rem;
		}

		.ndchart{
			width: 100%;
			height:80%;
		}
		.lfchart{
			width: 100%;
			height:80%;
		}
		.bjchart{
			width: 100%;
			height:80%;
		}
		.jgwdchart{
			width: 100%;
			height:80%;
		}
	}
	.box-right1{
		width: 100%;
		height: 50rem;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

	}
	.box-right1 >div{
		width:100%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color:#0a1c35;
		opacity: 0.88;
		margin-bottom: 1.25rem;
		.left-title{
      background-image: url("../../assets/images/newtitle.png");
      background-size: 100% 100%;
      width: 100%;
      height: 15%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color:#fff;
       font-family: diget year;
			padding-left:65px;
			font-size: 1.5rem;
			letter-spacing: 0.3125rem;

		}

		.jgwdchart{
			width: 100%;
			height:80%;
		}
		.fsdchart{
			width: 100%;
			height:80%;
		}
		.zdthreechart{
			width: 100%;
			height:80%;
		}
		.zdfourchart{
			width: 100%;
			height:80%;
		}
		.slonechart{
			width: 100%;
			height:80%;
		}
		.sltwochart{
			width: 100%;
			height:80%;
		}
	}
	.box-left1{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.box-left1 >div{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box-right2{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.box-right2 >div{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.left-title{
      background-image: url("../../assets/images/newtitle.png");
      background-size: 100% 100%;
      width: 100%;
      height: 15%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: diget year;
      span{
        color:#fff;
        padding-left:65px;
        font-size: 2rem;
        letter-spacing: 0.3125rem;
      }
		}


	}
	.video-player{
		width: 98%!important;
		height: 98%!important;
		margin-top: 5rem;
	}
	.vjs-paused .vjs-big-play-button,
	.vjs-paused.vjs-has-started .vjs-big-play-button {
		display: block;
	}
	.video-js .vjs-big-play-button {
		font-size: 1.5rem;
		line-height: 3.5rem;
		height: 3.5rem;
		width: 3.5rem;
		border-radius: 2.5rem;
		background-color: #73859f;
		background-color: rgba(115, 133, 159, .5);
		border-width: 0.15rem;
		margin-top: 25%;
		margin-left: 40%;
	}

	/* 中间的播放箭头 */
	.vjs-big-play-button .vjs-icon-placeholder {
		font-size: 3rem;
	}

	/* 加载圆圈 */
	.vjs-loading-spinner {
		font-size: 2.5em;
		width: 2em;
		height: 2em;
		border-radius: 1em;
		margin-top: -1em;
		margin-left: -1.5em;
	}
  iframe{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border: none!important;
  }
</style>
