<template>
	<div class="app-container">
		<div class="box-card">
			<div class="top-title">
				<span class="line"></span >
				<span class="title-text">历史记录</span>
			</div>
			<el-form
				:model="queryParams"
				size="small"
				:inline="true"
				label-width="80px"
				class="searchform"
			>
				<el-form-item label="设备名称:" prop="equipmentName">
					<el-select
					  v-model="queryParams.equipmentName"
					  clearable
					  placeholder="请选择设备"
					>
					  <el-option
					    v-for="item in selectList"
					    :key="item.value"
					    :label="item.name"
					    :value="item.value"
					  >
					  </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间:" prop="time">
					<el-date-picker
						:default-time="['00:00:00', '23:59:59']"
						style="width: 350px !important;"
						v-model="queryParams.time"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						clearable
						value-format="yyyy-MM-dd HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="toSearch"
						style="margin-left: 20px;"
					>搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button
						type="info"
						icon="el-icon-setting"
						@click="resetTable"
						style="margin-left: 20px;"
					>重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="dmList"  height="255">
				<el-table-column label="序号" align="center"  width="60" type="index"/>
				<el-table-column label="设备名称" align="center" prop="equipmentName" />
				<el-table-column label="监测点位" align="center" prop="monitoringPoint" />
				<el-table-column label="腐蚀率(钢)(mm/a)" align="center" prop="value" />
        <el-table-column label="腐蚀率(锌)(mm/a)" align="center" prop="zinc"/>
        <el-table-column label="腐蚀率(铜)(mm/a)" align="center" prop="copper"/>
				<el-table-column label="监测时间" align="center" prop="jctime" />
				<el-table-column align="center" prop="ifbj" label="报警状态">
					<template slot-scope="scope">
						<span v-if="scope.row.ifbj==='正常'" style="color:#02d808;">
							<i class="el-icon-message-solid icolor" style="color:#02d808"></i>
							{{scope.row.ifbj}}
						</span>
						<span v-else style="color: #f21616;">
							<i class="el-icon-message-solid icolor" style="color:#f21616"></i>
							{{scope.row.ifbj}}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				style="padding:10px 1px 10px 0px;margin-left:20px;"
				:page-sizes="[10, 20, 30, 40]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				@pagination="allData"
			/>
		</div>
		<div class="box-chart">
			<div class="top-title">
				<span class="line"></span >
				<span class="title-text">腐蚀率图表</span>
			</div>
			<el-form
				:model="querychart"
				size="small"
				:inline="true"
				label-width="80px"
				class="searchform"
			>
				<el-form-item label="设备名称:" prop="equipmentName">
					<el-select
					  v-model="querychart.equipmentName"
					  clearable
					  placeholder="请选择设备"
					>
					  <el-option
					    v-for="item in selectList"
					    :key="item.value"
					    :label="item.name"
					    :value="item.value"
					  >
					  </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间:" prop="time">
					<el-date-picker
						:default-time="['00:00:00', '23:59:59']"
						style="width: 350px !important;"
						v-model="querychart.time"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						clearable
						value-format="yyyy-MM-dd HH:mm:ss"
						:picker-options="{shortcuts: shortcuts}"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="searchChart($event)"
						style="margin-left: 20px;"
					>搜索</el-button>
				</el-form-item>
			</el-form>
			<div class='chart' id='chart'></div>
		</div>
	</div>
</template>

<script>
import {tableList,searchSb,reqChart} from "@/api/historyData/waterMeter";
import * as echarts from "echarts";
import { parseTime } from "../../utils/index.js";
export default {
  data() {
    return {
      // 总条数
      total: 0,
      dmList: [],
	  selectList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询表格参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: null,
		time:null
      },
	  querychart: {
	    equipmentName: null,
	  	time:null
	  },
	 chartData:{}
    };
  },
  mounted(){
	const now = new Date();
	const oneMonthBefore = new Date(now - 30 * 24 * 60 * 60 * 1000);
	this.querychart.time = [oneMonthBefore, now]; // 设置日期范围为最近一个月
	this.searchEqu();
	this.allData();
	this.drawChart();
  this.$watermark.set(" ",this.$refs.content)
  },
  beforeDestroy() {
    this.$watermark.set("",this.$refs.content);
  },
  computed: {
    shortcuts() {
      const now = new Date();
      let yesterday = new Date();
      const oneMonthBefore = new Date(now - 30 * 24 * 60 * 60 * 1000);
      yesterday.setDate(yesterday.getDate() - 1);
    }
  },
  methods: {
	//设备名称下拉
	searchEqu() {
		var param ={
			equipmentType:'腐蚀度监测'
		}
		searchSb(param).then((res) => {
			var body = res.data||[];
			this.selectList = body;
			this.querychart.equipmentName = this.selectList[0].value;
			this.searchChart({target:{value:this.querychart.equipmentName}})
		});
	},
	//表格
	allData() {
		var param ={
			pageNum:this.queryParams.pageNum,
			pageSize: this.queryParams.pageSize
		}
		tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
		});
	},
	  handleSizeChange(val) {
		this.queryParams.pageSize =val;
		this.toSearch()
	  },
	  handleCurrentChange(val) {
		this.queryParams.pageNum = val;
		this.toSearch()
	  },
	  toSearch() {
		var param = this.queryParams;
		if (this.queryParams.time instanceof Array) {
			param.startTime = parseTime(new Date(this.queryParams.time[0]));
			param.endTime = parseTime(new Date(this.queryParams.time[1]));
		}
		tableList(param).then((res) => {
			var body = res.rows || [];
			this.dmList = body;
			this.total = res.total;
		});
	},
	//表格重置
	resetTable(){
		this.queryParams={}
		this.allData()

	},
	//图表
	searchChart(event){
		var params ={
			equipmentName:this.querychart.equipmentName
		}
		if (this.querychart.time instanceof Array) {
		  params.startTime = parseTime(new Date(this.querychart.time[0]));
		  params.endTime = parseTime(new Date(this.querychart.time[1]));
		}
		reqChart(params).then((res) => {
			var body = res.data||[];
			this.chartData = body[0]||{}
			this.drawChart()
		});
	},
	 drawChart () {
	       // 基于准备好的dom，初始化echarts实例
	       let chart = this.$echarts.init(document.getElementById('chart'))
	       // 监听屏幕变化自动缩放图表
	       window.addEventListener('resize', function () {  chart.resize() })
	       chart.setOption({
	 		  // 设置图表的位置
	 			grid: {
	 			  x: 60, // 左间距
	 			  y: 40, // 上间距
	 			  x2: 30, // 右间距
	 			  y2: 60, // 下间距
	 			  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' // 文字颜色
	 			  },
	 			  // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
	 			  // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
	 			  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+ 'mm/a' +'<br/>';
	 			      }
	 			      return relVal;
	 			    }

	 			},
	 			legend: {
	 			    // 图例的数据数组
	 			    data: [
	 					{
	 						name: '腐蚀率(钢)'
	 					},
	 					{
	 						name: '腐蚀率(锌)'
	 					},
	 					{
	 						name:'腐蚀率(铜)'
	 					}
	 			    ],
	 			    top: 13, // 定位
	 			    right: 10,
	 			    textStyle: {  // 文本样式
	 				fontSize: 14,
	 				fontWeight:400,
	 				color: '#030303'
	 			    }
	 			  },
	 			xAxis: [
	 			  {
	 			    type: 'category',
	 			    // 坐标轴轴线
	 			    axisLine: {
	 			      show: true, // 是否显示坐标轴轴线 默认显示
	 			      lineStyle: {
	 			        type: 'dotted', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
	 			        width: 1, // 坐标轴线线宽, 不设置默认值为 1
	 			        color: '#cccccc' // 坐标轴线线的颜色
	 			      }
	 			    },
	 			    // 分隔线
	 			  splitLine: {
	 			    show: true, // 是否显示分隔线 默认数值轴显示
	 			    lineStyle: {
	 			  	  type:'dashed',// 分隔线颜色，可以设置成单个颜色。
	 			  	  color: '#d9d9d9'
	 			    }
	 			  },
	 			    // 坐标轴刻度
	 			axisTick: {
	 					show: false,
	 					interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
	 					inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
	 			    },
	 			   axisLabel: {
	 			       interval: 'auto', // 只显示最大和最小坐标
	 			   	textStyle: {
	 			   		show: true,
	 			   		color: "#000000",
	 			   		fontSize: "12",
	 			   	}

	 			     },
	 			    // 类目名称
	 			    data: this.chartData.times||[]
	 			  }
	 			],
	 			yAxis: [
	 			  // 左侧Y轴
	 			  {
	 			    type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
	 			     name:"单位(mm/a)",
	 			    splitLine: {
	 			      show: true, // 是否显示分隔线 默认数值轴显示
	 			      lineStyle: {
	 					  type:'dashed',// 分隔线颜色，可以设置成单个颜色。
	 					  color: '#d9d9d9'
	 			      }
	 			    },
	 			    // 坐标轴刻度
	 			    axisTick: {
	 					show: false,
	 					interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
	 					inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
	 			    },
	 			    // 坐标轴轴线。
	 			    axisLine: {
	 			      show: true, // 是否显示坐标轴轴线 默认显示
	 			      lineStyle: {
	 			        type: 'dotted', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
	 			        width: 1, // 坐标轴线线宽, 不设置默认值为 1
	 			        color: '#555555' // 坐标轴线线的颜色
	 			      }
	 			    },
	 			    axisLabel: {
	 			     show: true, // 是否显示刻度标签 默认显示
	 			     color: '#555555', // 刻度标签文字的颜色
	 			     fontSize: 12, // 文字的字体大小
	 			     margin: 10, // 刻度标签与轴线之间的距离 默认值 8
	 			    formatter: '{value}'
	 			    }
	 			  }
	 			],
	 			series: [  //每条折线图的数据，折线图的颜色，文字大小，颜色
	 				{
	 					name: '腐蚀率(钢)',
	 					type: 'line',
	 					symbolSize: 8,
	 					color: '#4876ff', //点颜色
	 					data: this.chartData.gang||[],
	 					itemStyle: {
	 						normal: {
	 						   lineStyle: {
	 							   color: '#4876ff' //线颜色
	 						   }
	 						}
	 					}
	 				},
	 				{
	 					name: '腐蚀率(锌)',
	 					type: 'line',
	 					stack: '总量',
	 					symbolSize: 8,
	 					color: '#018f81', //点颜色
	 					data: this.chartData.xin||[],
	 					itemStyle: {
	 						normal: {
	 						   lineStyle: {
	 							   color: '#018f81' //线颜色
	 						   }
	 						}
	 					}
	 				},
	 				{
	 					name:'腐蚀率(铜)',
	 					type: 'line',
	 					stack: '总量',
	 					symbolSize: 8,
	 					color: '#8a2be2', //点颜色
	 					data: this.chartData.tong||[],
	 					itemStyle: {
	 						normal: {
	 						   lineStyle: {
	 							   color: '#8a2be2' //线颜色
	 						   }
	 						}
	 					}
	 				}
	 			]
	 		})
	     }
	 }
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
	.searchform{
		width: 100%;
		height: 40px;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30px;
		margin-bottom: 0.9375rem;
		.el-form-item{
			margin-bottom: 0px!important;
		}
	}
	.resetting{
		margin:20px 20px 20px 0px;
	}
	.el-table--scrollable-y .el-table__body-wrappe{
		overflow-y: scroll!important;
	}
	.tableline{
		width:50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.box-card {
	  width: 100%;
    height: 25rem;
	  background-color: #fff;
	  .top-title {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: flex-start;
		align-items:center;
		padding-left: 20px;
	    .line {
	      width: 6px;
	      height: 22px;
	      background: #0d85f4;
	    }
		.title-text{
			font-size: 18px;
			font-weight:bold;
			color: #333333;
			line-height: 30px;
			padding-left: 10px;
		}
	  }
	}
	.box-chart{
		width: 100%;
	height: 25rem;
		background-color: #fff;
		margin-top: 20px;
		.top-title {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: flex-start;
			align-items:center;
			padding-left: 20px;
			  .line {
				width: 6px;
				height: 22px;
				background: #0d85f4;
			  }
			.title-text{
				font-size: 18px;
				font-weight:bold;
				color: #333333;
				line-height: 30px;
				padding-left: 10px;
			}
		}
		.chart{
			width: 100%;
			height: 85%!important;
		}

	}

</style>