<template>
	<div class="common-page device-manage">
		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->
				<label class="el-form-item-label" style="font-weight: 500;">设备识别码</label>
				<el-input v-model="query.code" clearable size="small" placeholder="请输入设备识别码" style="width:180px;" @clear="clearLimit"/>
				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
			</div>
		</div>
		<div class="panel-bottom page-row">
			<h3>设备管理列表</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="toolbar">
							<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
						</div>
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<el-table-column prop="id" label="设备ID" align="center"></el-table-column>
								<el-table-column prop="code" label="设备识别码" align="center"></el-table-column>
								<el-table-column prop="name" label="设备名称" align="center"></el-table-column>
								<el-table-column prop="alarmWindspeed" label="风速报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmTemperature" label="温度报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmHumidity" label="湿度报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmCo2" label="二氧化碳报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmMlux" label="光照报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmPh" label="酸碱度报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmWaterTemperature" label="水温报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmElectricalConductance" label="电导率报警阈值" align="center"></el-table-column>
								<el-table-column prop="alarmWaterDepth" label="液位报警阈值" align="center"></el-table-column>
								<el-table-column prop="createTime" label="设备激活时间" align="center"></el-table-column>
								<el-table-column prop="addTime" label="最后采集时间" align="center"></el-table-column>
								<el-table-column prop="projectId" label="所属项目" align="center" :formatter="formatter"></el-table-column>
								<el-table-column label="操作" min-width="180px" align="center" fixed="right">
									<template slot-scope="scope">
										<el-button size="mini" type="success" icon="el-icon-view" @click="toSeeMore(scope.row)"></el-button>
										<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
										<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
										<!-- <div class="btn-groub2">
											<el-button size="mini" type="warning" icon="el-icon-set-up" @click="toInstructionSet(scope.row)"></el-button>
											<el-button size="mini" type="info" icon="el-icon-tickets" @click="toInstructionLog(scope.row)"></el-button>
										</div> -->
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单渲染 -->
		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
			<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="150px">
				<el-form-item label="选择项目" prop="projectId" >
					<el-select v-model="form.item.projectId" placeholder="请选择项目" size="small">
						<el-option v-for="(obj,index) in form.selectList" :label="obj.name" :value="obj.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="设备ID" prop="id">
					<el-input v-model="form.item.id" style="width:280px;" placeholder="请输入设备编号" :disabled="form.reqType==='edit'"/>
				</el-form-item> -->
				<el-form-item label="设备识别码" prop="code">
					<el-input v-model="form.item.code" style="width:260px;" placeholder="请输入设备识别码" :disabled="form.reqType==='edit'"/>
				</el-form-item>
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="form.item.name" style="width:260px;" placeholder="请输入设备名称"/>
				</el-form-item>
				<el-form-item label="风速报警阈值" prop="alarmWindspeed" >
					<el-input v-model="form.item.alarmWindspeed" style="width:160px;" placeholder="请输入风速报警阈值"/>
				</el-form-item>
				<el-form-item label="温度报警阈值" prop="alarmTemperature" >
					<el-input v-model="form.item.alarmTemperature" style="width:160px;" placeholder="请输入温度报警阈值"/>
				</el-form-item>
				<el-form-item label="湿度报警阈值" prop="alarmHumidity" >
					<el-input v-model="form.item.alarmHumidity" style="width:160px;" placeholder="请输入湿度报警阈值"/>
				</el-form-item>
				<el-form-item label="二氧化碳报警阈值" prop="alarmCo2" >
					<el-input v-model="form.item.alarmCo2" style="width:160px;" placeholder="请输入二氧化碳报警阈值"/>
				</el-form-item>
				<el-form-item label="光照报警阈值" prop="alarmMlux" >
					<el-input v-model="form.item.alarmMlux" style="width:160px;" placeholder="请输入光照报警阈值"/>
				</el-form-item>
				<el-form-item label="酸碱度报警阈值" prop="alarmPh" >
					<el-input v-model="form.item.alarmPh" style="width:160px;" placeholder="请输入酸碱度报警阈值"/>
				</el-form-item>
				<el-form-item label="水温报警阈值" prop="alarmWaterTemperature" >
					<el-input v-model="form.item.alarmWaterTemperature" style="width:160px;" placeholder="请输入水温报警阈值"/>
				</el-form-item>
				<el-form-item label="电导率报警阈值" prop="alarmElectricalConductance" >
					<el-input v-model="form.item.alarmElectricalConductance" style="width:160px;" placeholder="请输入电导率报警阈值"/>
				</el-form-item>
				<el-form-item label="液位报警阈值" prop="alarmWaterDepth" >
					<el-input v-model="form.item.alarmWaterDepth" style="width:160px;" placeholder="请输入液位报警阈值"/>
				</el-form-item>
				<el-form-item label="上传设备位置" prop="position">
					<el-input v-model="picFileName" style="width:160px;" placeholder="请上传设备位置" disabled />
					<input type="file" name="image" @change="excelImport($event)" />
				</el-form-item>
				<div style="margin:0px 0px 10px 55px;font-size:16px;font-weight:bold;">摄像头参数配置</div>
				<el-form-item label="摄像头ID" prop="camera">
					<el-input v-model="form.item.camera" style="width:160px;" placeholder="请输入摄像头ID"/>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="cancelForm">取消</el-button>
				<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
			</div>
		</el-dialog>

		<!-- 查看更多 -->
		<el-dialog title="查看设备" :visible.sync="form.seeMoreDialog" width="800px">
			<el-form :model="seeMoreData" style="margin-top:20px;">
				<el-form-item label="摄像头位置图片" label-width="150px">
					<el-image :src="seeMoreImgUrl" style="width:300px;"></el-image>
				</el-form-item>
				<el-form-item label="摄像头图像" label-width="150px">
					<div id="video-container" style="width:550px;height:350px"></div>
				</el-form-item>
				<el-form-item label="摄像头ID" label-width="150px">
					<el-input v-model="seeMoreData.camera" style="width:200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="form.seeMoreDialog = false">关闭</el-button>
			</div>
		</el-dialog>

		<!-- 历史图表 -->
		<el-dialog class="ecahrt1-dialog" append-to-body :close-on-click-modal="false" :before-close="cancelForm2" :visible.sync="form.historyDialog">
			<el-form :rules="rules" ref="form1" :inline="true" size="small" label-width="80px">
				<!-- <el-form-item prop="eprogramid" >
					<el-select v-model="form.item2.value" placeholder="请选择月份">
						<el-option v-for="obj in form.monthSelectList" :label="obj.name" :value="obj.value"></el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item prop="eprogramid" >
					<date-range-picker v-model="query.timeSpace" class="date-item" />
				</el-form-item>
				<el-form-item >
					<el-button type="primary" @click="findHistory">查询</el-button>
				</el-form-item>
				<el-form-item prop="content" style="display:block;" >
					<div class="form-body">
						<div id="ecahrtA"></div>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 指令下发 -->
		<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm3" :visible.sync="form2.visible" :title="form2.title" width="600px">
			<el-form :model="form2.item" :rules="rules" ref="form2" :inline="true" size="small" label-width="100px">
				<el-form-item label="设备ID" prop="ecode">
					<el-input v-model="form2.item.ecode" style="width:280px;" placeholder="请输入设备编号" :disabled="form2.reqType==='edit'"/>
				</el-form-item>
				<el-form-item label="设备识别码" prop="subcode">
					<el-input v-model="form2.item.subcode" style="width:260px;" placeholder="请输入设备识别码" :disabled="form2.reqType==='edit'"/>
				</el-form-item>
				<el-form-item label="是否启动校正" prop="ilAdjust" style="width:240px;">
					<el-select v-model="form2.item.ilAdjust" placeholder="请选择" size="small" style="width:120px;">
						<el-option v-for="obj in form2.adjustList" :label="obj.name" :key="obj.value" :value="obj.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否存储裂缝" prop="ilSave" style="width:240px;">
					<el-select v-model="form2.item.ilSave" placeholder="请选择" size="small" style="width:120px;">
						<el-option v-for="(obj,index) in form2.saveList" :label="obj.name" :value="obj.value" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="裂缝阈值" prop="ilThreshed" >
					<el-input v-model="form2.item.ilThreshed" style="width:160px;" placeholder="请输入裂缝阈值"/>
					<span style="color:#aaa;">1~255</span>
				</el-form-item>
				<el-form-item label="唤醒周期" prop="timekey" >
					<el-select v-model="form2.item.timekey" placeholder="请选择时间" size="small" style="width:120px;">
						<el-option v-for="(obj,index) in form2.timeList" :label="obj.name" :value="obj.value" :key="index"></el-option>
					</el-select>
					<el-input v-model="form2.item.time" style="width:160px;" placeholder="请输入时长"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="cancelForm3">取消</el-button>
				<el-button :loading="form2.status.cu === 2" type="primary" @click="reqSetInstruction('form2', form2.item)">确认</el-button>
			</div>
		</el-dialog>

		<!-- 指令日志 -->
		<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm4" :visible.sync="form2.logVisible" :title="form2.title" width="65%">
			<div class="content">
				<el-table :data="form2.formData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
					<el-table-column prop="subcode" label="设备识别码" min-width="135px"></el-table-column>
					<el-table-column prop="ilThreshed" label="裂缝阈值"></el-table-column>
					<el-table-column prop="ilAdjust" label="校正功能"></el-table-column>
					<el-table-column prop="ilSave" label="存储裂缝" ></el-table-column>
					<el-table-column prop="ilSendTime" label="唤醒时间">
						<template slot-scope="scope">
							{{scope.row.time + '('+scope.row.timeUnit+')'}}
						</template>
					</el-table-column>
					<el-table-column prop="ilSendSuccess" label="下发状态" ></el-table-column>
					<el-table-column prop="ilSendTime" label="下发时间" min-width="145px"></el-table-column>
				</el-table>
				<!--分页组件-->
				<el-pagination :total="form2.total" :current-page="form2.page" style="margin-top:8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange2" @current-change="pageChange2" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
import echarts from 'echarts';
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
import cuAmap from '@/components/AMap';
import Axios from 'axios'
import EZUIKit from "ezuikit-js";

export default {
	name: 'Dashboard',
	components: {
		DateRangePicker, cuAmap
	},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			picFileName:'',
			tableData: [],
			seeMoreData:{},
			seeMoreImgUrl:"",
			form: {
				title:'添加设备', visible:false, reqType:'add', historyDialog:false,seeMoreDialog:false,
				status:{cu:0},
				selectList:[],
				item:{},
				monthSelectList:[
					{name:'一月', value:'01'},
					{name:'二月', value:'02'},
					{name:'三月', value:'03'},
					{name:'四月', value:'04'},
					{name:'五月', value:'05'},
					{name:'六月', value:'06'},
					{name:'七月', value:'07'},
					{name:'八月', value:'08'},
					{name:'九月', value:'09'},
					{name:'十月', value:'10'},
					{name:'十一月', value:'11'},
					{name:'十二月', value:'12'},
				],
				item2:{
					value:''
				},
			},
			rules: {
				projectId: [
					{required: true, message: '请选择项目', trigger: 'blur' }
				],
				id: [
					{required: true, message: '请输入设备ID', trigger: 'blur' }
				],
				code: [
					{required: true, message: '请输入设备识别码', trigger: 'blur' }
				],
				name: [
					{required: true, message: '请输入设备名称', trigger: 'blur' }
				],
			},
			form2:{
				title:'指令下发', visible:false, logDialog:false, logVisible:false,
				query:{},
				page: 1,
				size: 10,
				total: 0,
				status:{cu:0},
				item:{
					ecode: "",
					ename:'',
					ilAdjust:0,
					ilSave:0,
					time:'',
					ilThreshed:0,
					timekey:'ilTimHour',
				},
				adjustList:[
					{name:'启动', value:1},
					{name:'不启动', value:0},
				],
				saveList:[
					{name:'存储', value:1},
					{name:'不存储', value:0},
				],
				timeList:[
					{name:'时', value:'ilTimHour'},
					{name:'分', value:'ilTimMins'},
					{name:'秒', value:'ilTimSec'},
				],
				formData:[],
			},
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		loadData() {
			var that = this;
			var sort = 'addTime,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;

			//请求项目列表
			this.reqProjectsSimple().then((list) => {
				this.form.selectList = list;
			});
			
			this.$nextTick(()=>{
				HttpReq.plantFactory.getDeviceManageList(param).then((res) => {
					//console.log(res);
					this.loading = false;
					this.tableData = res.content;
					this.total = res.totalElements;
				})
			})

		},
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		// 点击搜索
		toSearch() {
			this.page = 1
			this.loadData()
		},
		clearLimit(){		// 清除限制
			this.loadData()
		},
		cancelForm(a, b, c){
			this.form.visible = false;
		},
		cancelForm2(){
			this.form.historyDialog = false;
		},
		toAdd() {
			// 请除表单验证
			this.$refs['form1'] && this.$refs['form1'].clearValidate();
			this.form.title = '添加设备';
			this.form.status.cu = 0;
			this.form.visible = true;
			this.form.reqType = 'add';
			this.form.item = {};
			this.picFileName = '';
			//请求项目列表
			this.reqProjectsSimple().then((list) => {
				this.form.selectList = list
			});
		},
		toEdit(item) {
			// 请除表单验证
			this.$refs['form1'] && this.$refs['form1'].clearValidate();
			this.form.title = '编辑设备';
			this.form.status.cu = 0;
			this.form.visible = true;
			this.form.item = item;
			this.form.reqType = 'edit';
			this.picFileName = this.form.item.position;
			//请求项目列表
			this.reqProjectsSimple().then((list) => {
				this.form.selectList = list
			});
		},
		toDelete(item) {
			var id = item.id;
			this.$confirm('确认删除该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				this.reqRemoveProject([id])
			}).catch((e) => {
			})
		},
		//查看图片以及其他信息
		toSeeMore(row){
			//console.log(row);
			this.seeMoreData = row;
			this.seeMoreImgUrl = process.env.VUE_APP_LOCAL_API2 + "/avatar/" + row.position;
			this.form.seeMoreDialog = true;
			this.$nextTick(()=>{
				let videoContainer = document.querySelector('#video-container');
				videoContainer.innerHTML = '';
				var player =  new EZUIKit.EZUIKitPlayer({
					autoplay: true,
					id: 'video-container',
					accessToken:'at.4qo66bb35a19h07a0d9pbmtj5v4g0o78-4jmzdu3k24-0866je6-qkz1xuwmf',
					url: 'ezopen://open.ys7.com/J16440511/1.live',
					template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
					width: 530,
					height: 320
				});
			})
		},
		toHistoryLog(item){
			this.form.historyDialog = true;
			this.form.item2.value = Dates.format('MM');
			this.form.item2.code = item.ecode;
			this.$nextTick(() => {
				var ecahrtEl = document.getElementById("ecahrtA");

				this.ecahrtA = this.ecahrtA || this.createPanelEcharts(ecahrtEl);

				this.reqHistoryList(this.form.item2);
			});
		},
		cancelForm3(a, b, c){
			this.form2.visible = false;
		},
		cancelForm4(a, b, c){
			this.form2.logVisible = false;
		},
		// 指令下发
		toInstructionSet(item){
			var form2 = this.form2;
			// 请除表单验证
			//this.$refs['form1'] && this.$refs['form1'].clearValidate();
			form2.title = '指令下发';
			form2.status.cu = 0;
			form2.visible = true;
			form2.reqType = 'edit';
			form2.item = {
				ecode:item.ecode,
				subcode:item.subcode,
				ilAdjust:form2.item.ilAdjust,
				ilSave:form2.item.ilSave,
				timekey:form2.item.timekey,
				time:'',
			};
		},
		// 指令日志
		toInstructionLog(item){
			var form2 = this.form2;
			// 请除表单验证
			//this.$refs['form1'] && this.$refs['form1'].clearValidate();
			form2.title = '下发日志';
			form2.logVisible = true;
			form2.item = item;

			var param = form2.query;
			param.page = form2.page - 1;
			param.size = form2.size;
			param.sort = 'addTime,desc';
			param.deviceId = item.ecode;
			HttpReq.equipment.getInstructionLog(param).then((res) => {
				if(res){
					form2.total = res.totalElements;
					var formData = res.content || [], 
						timeKeys = {'ilTimHour':'小时','ilTimMins':'分钟','ilTimSec':'秒'};
					for(var fitem of formData){
						fitem.subcode = item.subcode;
						for(var key in timeKeys){
							if(fitem[key] || fitem[key] === 0){
								fitem['time'] = fitem[key];
								fitem.timeUnit = timeKeys[key];
							}else{
								delete fitem[key]
							}
						};
						fitem.ilAdjust = ['不启动', '启动'][fitem.ilAdjust || 0];
						fitem.ilSave = ['不存储', '存储'][fitem.ilSave || 0];
						fitem.ilSendSuccess = ['下发失败', '下发成功'][fitem.ilSendSuccess || 0];
					};
					form2.formData = formData;
				};
			}).catch(function(error) {
				console.log('error ________________ ', error);
			});
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		pageChange2(e) {
			this.form2.page = e
			this.reqInstructionLog(this.form2.item)
		},
		sizeChange2(e) {
			this.form2.page = 1;
			this.form2.size = e;
			this.reqInstructionLog(this.form2.item);
		},
		submitForm(validateName, item){
			if(!this.form.status.cu){
				this.form.status.cu = 2;
				this.$refs[validateName].validate(valid => {
					if(valid){
						if(this.form.reqType === 'add'){
							this.reqAddItem(this.form, item)
						}else{
							this.reqUpdateItem(this.form, item)
						}
					}else{
						this.form.status.cu = 0
					}
				});
			};
		},

		findHistory(){
			this.reqHistoryList(this.form.item2);
		},
		//请求项目列表
		reqProjectsSimple(){
			return HttpReq.project.getProject().then((res) => {
				if(res.code == 200){
					return res.data.content;
				}else{
					return []
				}
			})
		},
		//添加设备
		reqAddItem(form, item){
			let lastData = item;
			lastData.position = this.picFileName;
			HttpReq.plantFactory.addDeviceManageList(lastData).then((res) => {
				form.visible = false;
				if(res == 1){
					this.$notify({
						title: '项目添加成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				}else{
					this.$notify({
						title: res.head.message,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) {
				form.status.cu = 0
			});
		},
		//修改设备
		reqUpdateItem(form, item){
			let lastData = item;
			lastData.position = this.picFileName;
			HttpReq.plantFactory.upDateDeviceManageList(lastData).then((res) => {
				form.visible = false;
				if(res.status == 400){
					this.$notify({
						title: res.head.message,
						type: 'error',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '修改成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				}
			}).catch(function(error) {
				form.status.cu = 0
			});
		},
		//删除设备
		reqRemoveProject(item){
			HttpReq.plantFactory.removeDeviceManageList(item).then((res) => {
				if(res.status == 400){
					this.$notify({
						title: res.head.message,
						type: 'error',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '删除成功！',
						type: 'success',
						duration: 2500
					});
				}
				this.loadData();
			})
		},
		reqHistoryList(item){
			var timeSpace = this.query.timeSpace;
			var startTime = timeSpace ? timeSpace[0].split(' ')[0] : '';
			var endTime = timeSpace ? timeSpace[1].split(' ')[0] : '';
			HttpReq.historys.getItemBycode({codes:item.code, startTime:startTime, endTime:endTime}).then((res) => {
				if(res.head.code === '0000'){
					var body = res.body || {};
					var list = body.list || [];
					var xAxisData = [];
					var helement = [];
					var htemperature = [];
					var hlenght1 = [], hlenght2 = [], hlenght3 = [];
					for(var item of list){
						xAxisData.push(item.createTime);
						helement.push(item.helement);
						htemperature.push(item.htemperature);
						hlenght1.push(item.hlenght1);
						hlenght2.push(item.hlenght2);
						hlenght3.push(item.hlenght3);
					};
					this.ecahrtA.setData({
						xAxis: [
							{
								type: 'category',
								data: xAxisData,
							},
						],
						series: [
							{
								name: '电压',
								data: helement,
							},
							{
								name: '温度',
								data: htemperature,
							},
							{
								name: '裂缝1',
								data: hlenght1,
							},
							{
								name: '裂缝2',
								data: hlenght2,
							},
							{
								name: '裂缝3',
								data: hlenght3,
							}
						]
					})
				};
			}).catch(function(error) {
				console.log('catch __ ', error);
			})
		},
		createPanelEcharts(el){
			var myChart = echarts.init(el),
				lineColor = 'green';
			var option = {
				title: {
					text: '',
					subtext: '设备值'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['电压', '温度', '裂缝1', '裂缝2', '裂缝3'],
					textStyle: {
						color: "#000"
					},
				},
				textStyle: {
					color: "#333"
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: [],
					}
				],
				yAxis: [
					{
						type: 'value',
					}
				],
				grid:{
					top:40,
					right:10,
					bottom:20,
					left:45,
				},
				series: [
					{
						name: '电压',
						type: 'line',
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						//itemStyle: {normal: {areaStyle: {type: 'default', color:'#00e5ff'}, color:'#00e5ff'}, color:'green'},
					},
					{
						name: '温度',
						type: 'line',
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						name: '裂缝1',
						type: 'line',
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
						//itemStyle: {normal: {areaStyle: {type:'default', color:'red'}, color:'#1849fe'}, color:'red'},
					},
					{
						name: '裂缝2',
						type: 'line',
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						name: '裂缝3',
						type: 'line',
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
					}
				]
			};

			myChart.setOption(option);

			var setData = function(option){
				myChart.hideLoading();
				myChart.setOption(option)
			};
			return {setData:setData, myChart:myChart}
		},
		reqSetInstruction(form, item){
			var param = {
				deviceId:item.ecode,
				ilAdjust:item.ilAdjust,
				ilSave:item.ilSave,
				ilThreshed:item.ilThreshed || 0,
				[item.timekey]:item.time || 0,
			};
			HttpReq.equipment.setInstruction(param).then((res) => {
				this.form2.visible = false;
				this.$notify({
					title: '修改成功！',
					type: 'success',
					duration: 2500
				});
				this.loadData()
			}).catch(function(error) {
				this.form2.status.cu = 0;
				this.$notify({
					title: error,
					type: 'error',
					duration: 2500
				})
			});
		},
		reqInstructionLog(item){
			var form2 = this.form2;
			var param = form2.query;
			param.page = form2.page - 1;
			param.size = form2.size;
			param.sort = 'addTime,desc';
			param.deviceId = item.ecode;
			HttpReq.equipment.getInstructionLog(param).then((res) => {
				if(res){
					form2.total = res.totalElements;
					var formData = res.content || [], 
						timeKeys = {'ilTimHour':'小时','ilTimMins':'分钟','ilTimSec':'秒'};
					for(var fitem of formData){
						fitem.subcode = item.subcode;
						for(var key in timeKeys){
							if(fitem[key]){
								fitem['time'] = fitem[key];
								fitem.timeUnit = timeKeys[key];
							}else{
								delete fitem[key]
							}
						};
						fitem.ilAdjust = ['不启动', '启动'][fitem.ilAdjust || 0];
						fitem.ilSave = ['不存储', '存储'][fitem.ilSave || 0];
						fitem.ilSendSuccess = ['下发失败', '下发成功'][fitem.ilSendSuccess || 0];
					};
					form2.formData = formData;
				};
			}).catch(function(error) {
				console.log('error ________________ ', error);
			});
		},
		//图片上传
		excelImport(event) {
			let that = this;
			let file = event.target.files[0];
			let formData1 = new FormData();
			formData1.append("avatar", file);
			Axios({
				url: process.env.VUE_APP_LOCAL_API2 + '/api/Area/updateAvatar',
				method: "post",
				data: formData1,
			}).then(
				response => {
					if (response.status == 200) {
						this.$message.success("上传成功");
						that.picFileName = response.data.avatar;
					} else {
						this.$message.error("上传失败");
					}
				},
			)
			.catch(error => {
				console.log(error);
			});
		},
		//项目名称展示
		formatter(row){
			let proName = "";
			this.form.selectList.forEach(function(item){
				if(row.projectId == item.id){
					proName = item.name;
				}
			})
			return proName
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}
	
	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
