<template>
	<el-dialog :visible.sync="dialogTableVisible" width="70%" top="5vh">
		<el-tabs v-model="activeName" @tab-click="tabClick">
			<el-tab-pane label="人员定位" name="rydw" v-if="curShowItemIndex === 0">
				<div class="func_comm">
					开始时间
					<el-date-picker v-model="query.startTime" @change="onChangeStart" type="datetime" placeholder="选择日期" style="width:200px;margin-bottom:5px;"></el-date-picker>

					结束时间
					<el-date-picker v-model="query.endTime" @change="onChangeStop" type="datetime" placeholder="选择日期" style="width:200px;margin-bottom:5px;"></el-date-picker>

					<el-input placeholder="请输入姓名" prefix-icon="el-icon-search" v-model="query.personnelName" style="width:120px;margin-bottom:5px;"></el-input>
					
					位置
					<el-select v-model="query.currentBaseStation" placeholder="请选择" style="width:120px;margin-bottom:5px;" clearable>
						<el-option v-for="item in personSelects" :key="item.key" :label="item.value" :value="item.value"></el-option>
					</el-select>

					类型
					<el-select v-model="query.dataType" placeholder="请选择" style="width:120px;margin-bottom:5px;" clearable >
						<el-option v-for="item in rydw_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>

					<!-- <el-select v-model="query.rydw_value" placeholder="请选择" style="width:120px;margin-bottom:5px;">
						<el-option v-for="item in rydw_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
				</div>

				<el-table :data="rydw_tableList" height="58vh">
					<el-table-column property="personnelName" label="姓名"></el-table-column>
					<el-table-column property="dataType" label="类型">
						<template slot-scope="scope">
							<span v-if="scope.row.dataType == 0"> 井口 </span>
							<span v-if="scope.row.dataType == 1"> 井下 </span>
							<span v-if="scope.row.dataType == 2"> 井内 </span>
							<span v-if="scope.row.dataType == 3"> 出井 </span>
						</template>
					</el-table-column>
					<el-table-column property="currentBaseStation" label="位置"></el-table-column>
					<el-table-column property="acquisitionTime" label="更新时间"></el-table-column>
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="人员定位统计" name="rydwtj" v-if="curShowItemIndex === 0">
				<el-table :data="rydwtj_tableList" height="58vh">
					<el-table-column property="position" label="位置"></el-table-column>
					<el-table-column property="num" label="人数"></el-table-column>
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="降雨量" name="jyl" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<!-- <el-input v-model="monitorStation" placeholder="请输入监测站" style="width: 230px"></el-input> -->
					<el-select v-model="curSelectJYLSensor" placeholder="请选择监测站">
						<el-option
							v-for="item in jylSensorNames"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="jyl_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in jyl_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableJYL">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('jyl')">可视化</el-button> -->
				</div>

				<el-table :data="jyl_tableList" height="58vh" v-show="!switchTableJYL">
					<el-table-column property="wkk_name" label="尾矿库名称">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="监测站"></el-table-column>
					<el-table-column property="rainfallValue" label="监测值">
						<template slot-scope="scope">
							{{ scope.row.rainfallValue + ' ' + (itemUnit['降雨量'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableJYL"  style="width: 100%;height: 58vh;" class="renderToTable1" ></div>
			</el-tab-pane>

			<el-tab-pane label="浸润线" name="jrx" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<!-- <el-input v-model="monitorStation" placeholder="请输入监测站" style="width: 230px"></el-input> -->
					<el-select v-model="curSelectJRXSensor" placeholder="请选择浸润线">
						<el-option
							v-for="item in jrxSensorNames"
							:key="item"
							:value="item"
							:label="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="jrx_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in jrx_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableJRX">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('jrx')">可视化</el-button> -->
				</div>

				<el-table :data="jrx_tableList" height="58vh" v-show="!switchTableJRX">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="监测站"></el-table-column>
					<el-table-column property="groundwaterLevelValue" label="监测值">
						<template slot-scope="scope">
							{{ scope.row.groundwaterLevelValue + ' ' + (itemUnit['浸润线'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableJRX" style="width: 100%;height: 58vh;" class="renderToTable2"></div>
			</el-tab-pane>

			<el-tab-pane label="库水位" name="ksw" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>
			
					<strong>监测站</strong>
					<el-select
						v-model="curSelectKSWSensor"
						placeholder="请选择监测站"
					>
						<el-option
							v-for="item in kswSensorNames"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="ksw_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in ksw_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableKSW">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('ksw')">可视化</el-button> -->
				</div>

				<el-table :data="ksw_tableList" height="58vh" v-show="!switchTableKSW">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="监测站"></el-table-column>
					<el-table-column property="waterLevelValue" label="监测值">
						<template slot-scope="scope">
							{{ scope.row.waterLevelValue + ' ' + (itemUnit['库水位'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableKSW" style="width: 100%;height: 58vh;" class="renderToTable3"></div>
			</el-tab-pane>

			<el-tab-pane label="干滩" name="gt" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<el-select v-model="curSelectGTSensor" placeholder="请选择监测站">
						<el-option
							v-for="item in gtSensorNames"
							:key="item"
							:value="item"
							:label="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="gt_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in gt_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableGT">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('gt')">可视化</el-button> -->
				</div>

				<el-table :data="gt_tableList" height="58vh" v-show="!switchTableGT">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="监测站"></el-table-column>
					<el-table-column property="beachLengthValue" label="监测值">
						<template slot-scope="scope">
							{{ scope.row.beachLengthValue + ' ' + (itemUnit['干滩'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableGT" style="width: 100%;height: 58vh;" class="renderToTable4"></div>
			</el-tab-pane>

			<el-tab-pane label="表面位移" name="bmwy" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<el-select
						v-model="curSelectBMWYSensor"
						placeholder="请选择监测站"
					>
						<el-option
							v-for="item in bmwySensorNames"
							:label="item"
							:value="item"
							:key="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="bmwy_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in bmwy_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableBMWY">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('bmwy')">可视化</el-button> -->
				</div>

				<el-table :data="bmwy_tableList" height="58vh" v-show="!switchTableBMWY">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="监测站"></el-table-column>
					<el-table-column property="valueX" label="水平位移">
						<template slot-scope="scope">
							{{ scope.row.valueX + ' ' + (itemUnit['表面位移'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="valueY" label="沉降位移">
						<template slot-scope="scope">
							{{ scope.row.valueY + ' ' + (itemUnit['表面位移'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="valueZ" label="竖向位移">
						<template slot-scope="scope">
							{{ scope.row.valueZ + ' ' + (itemUnit['表面位移'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableBMWY" style="width: 100%;height: 58vh;" class="renderToTable5"></div>
			</el-tab-pane>

			<el-tab-pane label="内部位移沉降" name="nbwy" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<el-select
						v-model="curSelectNBWYCJSensor"
						placeholder="请输入监测站"
					>
						<el-option
							v-for="item in nbwycjSensorNames"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="bmwy_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in bmwy_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableNBWYCJ">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('bmwy')">可视化</el-button> -->
				</div>

				<el-table :data="nbwy_tableList" height="58vh" v-show="!switchTableNBWYCJ">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="传感器名称"></el-table-column>
					<el-table-column property="sedimentationValue" label="沉降值">
						<template slot-scope="scope">
							{{ scope.row.sedimentationValue + ' ' + (itemUnit['内部位移沉降'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableNBWYCJ" style="width: 100%;height: 58vh;" class="renderToTable6"></div>
			</el-tab-pane>

			<el-tab-pane label="内部位移倾斜" name="nbwyqx" v-if="hidePartBaseInfo && curShowItemIndex === 1">
				<div class="func_comm">
					<strong>开始时间</strong>
					<el-date-picker v-model="start_time" @change="onChangeStart" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>结束时间</strong>
					<el-date-picker v-model="stop_time" @change="onChangeStop" type="datetime" placeholder="选择日期"></el-date-picker>

					<strong>监测站</strong>
					<el-select
						v-model="curSelectNBWYQXSensor"
						placeholder="请输入监测站"
					>
						<el-option
							v-for="item in nbwyqxSensorNames"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
					<!-- <strong>监测站</strong>
					<el-select v-model="bmwy_value" placeholder="请选择" @change="changeSelect">
						<el-option v-for="item in bmwy_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select> -->

					<el-button type="primary" @click="onClickSelect">查询</el-button>
					<el-button style="margin-left: 100px" type="primary" @click="switchToTableNBWYQX">切换</el-button>
					<!-- <el-button type="primary" @click="onvisi('bmwy')">可视化</el-button> -->
				</div>

				<el-table :data="nbwyqx_tableList" height="58vh" v-show="!switchTableNBWYQX">
					<el-table-column property="wkk_name" label="尾矿库">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="sensorName" label="传感器名称"></el-table-column>
					<el-table-column property="inclineValue" label="倾斜值">
						<template slot-scope="scope">
							{{ scope.row.inclineValue + ' ' + (itemUnit['内部位移倾斜'] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="acquisitionTime" label="时间"></el-table-column>
				</el-table>
				<div v-show="switchTableNBWYQX" style="width: 100%;height: 58vh;" class="renderToTable7"></div>
			</el-tab-pane>

			<!-- <el-tab-pane label="预警值" name="yjz">
				<el-table :data="yjz_tableList" height="60vh">
					<el-table-column label="企业名称">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="yiz_type" label="监测类型"></el-table-column>
					<el-table-column property="yiz_one" label="红色预警">
						<template slot-scope="scope">
							{{ scope.row.yiz_one + ' ' + (itemUnit[scope.row.yiz_type] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="yiz_two" label="橙色预警">
						<template slot-scope="scope">
							{{ scope.row.yiz_two + ' ' + (itemUnit[scope.row.yiz_type] || '')}}
						</template>
					</el-table-column>
					<el-table-column property="yiz_three" label="黄色预警">
						<template slot-scope="scope">
							{{ scope.row.yiz_three + ' ' + (itemUnit[scope.row.yiz_type] || '')}}
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane> -->

			<el-tab-pane label="报警记录" name="bjjl" v-if="curShowItemIndex === 2">
				<el-table :data="temp_bjjl_tableList" height="60vh">
					<el-table-column label="企业名称">
						<template>
							{{ wkk_name }}
						</template>
					</el-table-column>
					<el-table-column property="monitorStation" label="检测站"></el-table-column>
					<el-table-column property="sensorId" label="设备标识"></el-table-column>
					<el-table-column property="item" label="报警信息"></el-table-column>
					<el-table-column property="level" label="报警等级"> </el-table-column>
					<el-table-column property="alarmTime" label="预警时间"></el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<el-pagination layout="prev, pager, next" background :total="comm_total || 0" @current-change="currentChange" v-if="VisiblePagination"></el-pagination>
	</el-dialog>
</template>

<script>
import { wkk, getRYDWData } from '@/api'
import 
	{ 
		jiangYuLiang, 
		jinRunXian, 
		ganTan, 
		kuShuiWei, 
		biaoMianWeiYi, 
		wkkAlarm, 
		findPersonnelReal, 
		neiBuWeiYiQingXie, 
		wkkNeiBuWeiYiChenJiang, 
		personSelectList, 
		findPersonLocationStatistic, 
		getAllSensorNamesINJYL, 
		analyzeTrendINJYL,
		getAllSensorNamesINJRX,
		analyzeTrendINJRX,
		getAllSensorNamesINKSW,
		analyzeTrendINKSW,
		getAllSeonsorNamesINGT,
		analyzeTrendINGT,
		getAllSensorNamesINBMWY,
		analyzeTrendINBMWY,
		getAllSensorNamesINNBWYCJ,
		analyzeTrendINNBWYCJ,
		getAllSensorNamesINNBWYQX,
		analyzeTrendINNBWYQX
	} from '@/api/weikuangku'
import { mapState } from 'vuex'
import eventBus from '@/utils/eventbus'
import { timeParse, randNum, getValueUnit, getCompanyCodes } from '@/utils'
import { ExcelExport } from 'pikaz-excel-js'
export default {
	components: {
		ExcelExport,
	},

	data() {
		return {
			dialogTableVisible: false,
			wkk_name: '山金阿尔哈达', // 名称

			query:{
				startTime: '',
				endTime: '',
				personnelName:'',
				dataType:'',
				currentBaseStation:'',
			},

			start_time: '',
			stop_time: '',
			monitorStation: '',
			switchTable: false,

			activeName: 'jyl',
			VisiblePagination: true,

			ksw_value: '',
			ksw_sheet: '',
			ksw_options: '',
			ksw_cur_page: 1,
			ksw_tableList: [],

			gt_value: '',
			gt_sheet: '',
			gt_options: '',
			gt_cur_page: 1,
			gt_tableList: [],

			//
			jrx_value: '',
			jrx_sheet: '',
			jrx_options: '',
			jrx_cur_page: 0,
			jrx_tableList: [],

			// 降雨量
			jyl_value: '',
			jyl_sheet: '',
			jyl_options: '',
			jyl_cur_page: 0,
			jyl_tableList: [],

			bmwy_value: '',
			bmwy_sheet: '',
			bmwy_options: '',
			bmwy_cur_page: 1,
			bmwy_tableList: [],

			// 内部位移沉降
			nbwy_value: '',
			nbwy_sheet: '',
			nbwy_options: '',
			nbwy_cur_page: 1,
			nbwy_tableList: [],

			// 内部位移倾斜
			nbwyqx_value: '',
			nbwyqx_sheet: '',
			nbwyqx_options: '',
			nbwyqx_cur_page: 1,
			nbwyqx_tableList: [],

			yjz_tableList: [],

			// 报警记录
			bjjl_cur_page: 0,
			bjjl_tableList: [],
			temp_bjjl_tableList: [],

			// 人员定位
			rydw_tableList: [],
			rydw_cur_page: 0,
			rydw_value: '',
			rydw_options: [
				{
					value: '0',
					label: '井口',
				},
				{
					value: '1',
					label: '井下',
				},
				{
					value: '2',
					label: '井内',
				},
				{
					value: '3',
					label: '出井',
				},
			],
			personSelects:[],		// 人员定位-位置信息

				
			// 人员定位统计
			rydwtj_tableList:[],
			rydwtj_cur_page: 0,


			comm_total: 0,

			companycode: '',

			hidePartBaseInfo:true,

			itemUnit:getValueUnit(),

			// 三个index 0 1 2 控制显示的 pane
			curShowItemIndex: 0,
			jylSensorNames: [],
			jrxSensorNames: [],
			kswSensorNames: [],
			gtSensorNames: [],
			bmwySensorNames: [],
			nbwycjSensorNames: [],
			nbwyqxSensorNames: [],
			curSelectJYLSensor: '',
			curSelectJRXSensor: '',
			curSelectKSWSensor: '',
			curSelectGTSensor: '',
			curSelectBMWYSensor: '',
			curSelectNBWYCJSensor: '',
			curSelectNBWYQXSensor: '',
			switchTableJYL: false,
			switchTableJRX: false,
			switchTableKSW: false,
			switchTableGT: false,
			switchTableBMWY: false,
			switchTableNBWYCJ: false,
			switchTableNBWYQX: false,

		}
	},

	mounted() {
		eventBus.$on('dialog_show', data => {
			// 隐藏部分菜单
			this.hidePartBaseInfo = data.isShow;
			this.yjz_tableList = [
				{yiz_type:'降雨量', yiz_one:40, yiz_two:50, yiz_three:60},
				{yiz_type:'浸润线', yiz_one:9, yiz_two:8, yiz_three:7},
				{yiz_type:'库水位', yiz_one:873.788, yiz_two:874.788, yiz_three:875.788},
				{yiz_type:'干滩', yiz_one:90, yiz_two:80, yiz_three:70},
				{yiz_type:'表面位移', yiz_one:30, yiz_two:40, yiz_three:50},
				{yiz_type:'内部位移沉降', yiz_one:30, yiz_two:40, yiz_three:50},
				{yiz_type:'内部位移倾斜', yiz_one:30, yiz_two:40, yiz_three:50},
			];
			this.curShowItemIndex = 1
			if (data.index === 0) {
				this.curShowItemIndex = 0
			}
			if (data.index === 6) {
				this.curShowItemIndex = 2
			}

			/* for (let i of arrName) {
				this.yjz_tableList.push({
					yiz_type: i,
					yiz_one: randNum(50, 70, 1),
					yiz_two: randNum(40, 50, 1),
					yiz_three: randNum(30, 20, 1),
				})
			} */
			// index
			this.activeName = data.activeName
			this.dialogTableVisible = true
			this.wkk_name = data.dataObj.name
			this.companycode = data.dataObj.companycode
			

			let day = 3 * 1 * 86400 * 1000
			let dateCur = Date.parse(new Date())
			this.start_time = timeParse(dateCur - day) // 开始时间
			this.stop_time = timeParse() // 结束时间

			this.jrx_value = ''

			this.jyl_value = ''

			this.gt_value = ''

			this.ksw_value = ''

			this.bmwy_value = ''

			this.onClickSelect()
		})
	},

	methods: {
		// 测试
		onvisi(name) {
			const obj = {
				number: randNum(12, 100, 1),
				name,
			}
			this.$store.commit('setShowItemCharts', obj)
		},

		// 初始化
		reset() {
			this.ksw_cur_page = 0
			this.jrx_cur_page = 0
			this.gt_cur_page = 0
			this.jyl_cur_page = 0
			this.rydw_cur_page = 0
			this.bmwy_cur_page = 0
			this.nbwy_cur_page = 0
			this.nbwyqx_cur_page = 0;
			this.bjjl_cur_page = 0;
			
			this.VisiblePagination = false
			this.comm_total = 0
			setTimeout(() => {
				this.VisiblePagination = true
			}, 300);


			// get
			this.reqPersonSelectList();
		},
		
		// 获取企业编码
		getCompanyCode(){
			var companyCodes = getCompanyCodes();
			return companyCodes[this.wkk_name]
		},

		// 选择站点
		changeSelect(e) {
			this.reset()

			if (this.activeName == 'jyl') {
				this.jyl_value = e
				this.jylData()
			}

			if (this.activeName == 'jrx') {
				this.jrx_value = e
				this.jrxData()
			}

			if (this.activeName == 'gt') {
				this.gt_value = e
				this.gtData()
			}

			if (this.activeName == 'ksw') {
				this.ksw_value = e
				this.kswData()
			}

			if (this.activeName == 'bmwy') {
				this.bmwy_value = e
				this.bmwyData()
			}

			if (this.activeName == 'nbwy') {
				this.nbwy_value = e
				this.nbwyData()
			}

			if (this.activeName == 'nbwyqx') {
				this.nbwyqx_value = e
				this.nbwyqxData()
			}
		},

		// 点击查询
		onClickSelect() {
			this.reset()

			if (this.activeName == 'rydw') {
				this.onGetRYDWData()
			}

			if (this.activeName == 'rydwtj') {
				this.onGetRYDWTJData()
			}

			if (this.activeName == 'jyl') {
				this.jylData()
				getAllSensorNamesINJYL(this.$store.state.compony_info.companycode).then(res => {
					console.log(res, 'getAllSensorNamesINJYL getAllSen')
					this.jylSensorNames = [...res]
				})
			}

			if (this.activeName == 'jrx') {
				this.jrxData()
				getAllSensorNamesINJRX(this.$store.state.compony_info.companycode).then(res => {
					this.jrxSensorNames = [...res]
				})
			}

			if (this.activeName == 'gt') {
				this.gtData()
				getAllSeonsorNamesINGT(this.$store.state.compony_info.companycode).then(res => {
					this.gtSensorNames = [...res]
				})
			}

			if (this.activeName == 'ksw') {
				this.kswData()
				getAllSensorNamesINKSW(this.$store.state.compony_info.companycode).then(res => {
					this.kswSensorNames = [...res]
				})
			}

			if (this.activeName == 'bmwy') {
				this.bmwyData()
				getAllSensorNamesINBMWY(this.$store.state.compony_info.companycode).then(res => {
					this.bmwySensorNames = [...res]
				})
			}

			if (this.activeName == 'nbwy') {
				this.nbwyData()
				getAllSensorNamesINNBWYCJ(this.$store.state.compony_info.companycode).then(res => {
					this.nbwycjSensorNames = [...res]
				})
			}

			if (this.activeName == 'nbwyqx') {
				this.nbwyqxData()
				getAllSensorNamesINNBWYQX(this.$store.state.compony_info.companycode).then(res => {
					this.nbwyqxSensorNames = [...res]
				})
			};

			if (this.activeName == 'bjjl') {
				this.reqAlarmRecord()
			}
		},

		// 开始时间
		onChangeStart(e) {
			this.start_time = timeParse(e, 'yyyy-MM-dd HH:mm:ss') // 开始时间
		},

		// 结束时间
		onChangeStop(e) {
			this.stop_time = timeParse(e, 'yyyy-MM-dd HH:mm:ss') // 开始时间
		},

		tabClick(e) {
			this.reset()

			if (e.name == 'rydw') {
				this.onGetRYDWData()
			}

			if (this.activeName == 'rydwtj') {
				this.onGetRYDWTJData()
			}

			if (e.name == 'jyl') {
				this.jylData()
				getAllSensorNamesINJYL(this.$store.state.compony_info.companycode).then(res => {
					console.log(res, 'getAllSensorNamesINJYL getAllSen')
					this.jylSensorNames = [...res]
				})
			}

			if (e.name == 'jrx') {
				this.jrxData()
				getAllSensorNamesINJRX(this.$store.state.compony_info.companycode).then(res => {
					this.jrxSensorNames = [...res]
				})
			}

			if (e.name == 'gt') {
				this.gtData()
				getAllSeonsorNamesINGT(this.$store.state.compony_info.companycode).then(res => {
					this.gtSensorNames = [...res]
				})
			}

			if (e.name == 'ksw') {
				this.kswData()
				getAllSensorNamesINKSW(this.$store.state.compony_info.companycode).then(res => {
					this.kswSensorNames = [...res]
				})
			}

			if (e.name == 'bmwy') {
				this.bmwyData()
				getAllSensorNamesINBMWY(this.$store.state.compony_info.companycode).then(res => {
					this.bmwySensorNames = [...res]
				})
			}

			if (e.name == 'nbwy') {
				this.nbwyData()
				getAllSensorNamesINNBWYCJ(this.$store.state.compony_info.companycode).then(res => {
					this.nbwycjSensorNames = [...res]
				})
			}

			if (e.name == 'nbwyqx') {
				this.nbwyqxData()
				getAllSensorNamesINNBWYQX(this.$store.state.compony_info.companycode).then(res => {
					this.nbwyqxSensorNames = [...res]
				})
			}

			if (e.name == 'bjjl') {
				this.reqAlarmRecord()
			}
		},

		// 人员定位
		onGetRYDWData() {
			var MiningAreaId = this.getCompanyCode();
			var query = this.query;
			findPersonnelReal({
				companycode: MiningAreaId,
				page: this.rydw_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: query.startTime,
				endTime: query.endTime,
				dataType: query.dataType,
				personnelName: query.personnelName,
				currentBaseStation: query.currentBaseStation,
			}).then(res => {
				this.rydw_tableList = res.content
				this.comm_total = res.totalElements
			})
		},


		// 人员定位统计
		onGetRYDWTJData() {
			var MiningAreaId = this.getCompanyCode();
			var query = this.query;
			findPersonLocationStatistic({
				companycode: MiningAreaId,
				page: this.rydwtj_cur_page,
				size: 10,
				sort: 'id,desc',
			}).then(res => {
				var json = res, list = [];
				for(var key in json){
					list.push({
						position:key,
						num:json[key]
					})
				};
				this.rydwtj_tableList = list
			})
		},

		// 降雨量
		jylData() {
			let params = {
				page: this.jyl_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectJYLSensor
			}

			jiangYuLiang(params).then(res => {
				this.jyl_tableList = []
				if (res.content.length > 0) {
					this.jyl_tableList = res.content
					this.comm_total = res.totalElements
					this.jyl_sheet = [
						{
							tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
							table: this.jyl_tableList,
							keys: ['wkk_name', 'sensor_name', 'rainfall_value', 'insert_time'],
						},
					]
				}
			})
		},

		// 浸润线
		jrxData() {
			let params = {
				page: this.jrx_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectJRXSensor
			}

			jinRunXian(params).then(res => {
				this.jrx_tableList = []
				if (res.content.length > 0) {
					this.jrx_tableList = res.content
					this.comm_total = res.totalElements
					this.jrx_sheet = [
						{
							tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
							table: this.jrx_tableList,
							keys: ['wkk_name', 'sensor_name', 'groundwater_level_value', 'insert_time'],
						},
					]
				}
			})
		},

		// 干滩
		gtData() {
			let params = {
				page: this.gt_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectGTSensor
			}
			ganTan(params).then(res => {
				this.gt_tableList = []
				if (res.content.length > 0) {
					this.gt_tableList = res.content
					this.comm_total = res.totalElements
					this.jrx_sheet = [
						{
							tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
							table: this.gt_tableList,
							keys: ['wkk_name', 'sensor_name', 'groundwater_level_value', 'insert_time'],
						},
					]
				}
			})
		},

		// 库水位
		kswData() {
			let params = {
				page: this.ksw_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectKSWSensor
			}

			kuShuiWei(params).then(res => {
				this.ksw_tableList = []
				if (res.content.length > 0) {
					this.ksw_tableList = res.content
					this.comm_total = res.totalElements
					this.ksw_sheet = [
						{
							tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
							table: this.ksw_tableList,
							keys: ['wkk_name', 'sensor_name', 'water_level_value', 'insert_time'],
						},
					]
				}
			})
		},

		// 表面位移
		bmwyData() {
			let params = {
				page: this.bmwy_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectBMWYSensor
			}

			biaoMianWeiYi(params).then(res => {
				this.bmwy_tableList = []
				if (res.content.length > 0) {
					this.bmwy_tableList = res.content
					this.comm_total = res.totalElements
					this.ksw_sheet = [
						{
							tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
							table: this.bmwy_tableList,
							keys: ['wkk_name', 'sensor_name', 'water_level_value', 'insert_time'],
						},
					]
				}
			})
		},

		// 内部位移沉降
		nbwyData() {
			this.nbwy_tableList = []

			let params = {
				page: this.nbwy_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectNBWYCJSensor
			}

			wkkNeiBuWeiYiChenJiang(params).then(res => {
				this.nbwy_tableList = res.content
				this.comm_total = res.totalElements
				this.ksw_sheet = [
					{
						tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
						table: this.nbwy_tableList,
						keys: ['wkk_name', 'sensor_name', 'water_level_value', 'insert_time'],
					},
				]
			})
		},

		// 内部位移倾斜
		nbwyqxData() {
			this.nbwyqx_tableList = []

			let params = {
				page: this.nbwyqx_cur_page,
				size: 10,
				sort: 'id,desc',
				startTime: this.start_time,
				endTime: this.stop_time,
				companycode: this.companycode,
				sensorName: this.curSelectNBWYQXSensor
			}

			neiBuWeiYiQingXie(params).then(res => {
				this.nbwyqx_tableList = res.content
				this.comm_total = res.totalElements
				this.ksw_sheet = [
					{
						tHeader: ['尾矿库名称', '监测站', '监测值', '时间'],
						table: this.nbwy_tableList,
						keys: ['wkk_name', 'sensor_name', 'water_level_value', 'insert_time'],
					},
				]
			})
		},

		// 换页
		currentChange(e) {
			var e = e - 1
			if (this.activeName == 'rydw') {
				this.rydw_cur_page = e
				this.onGetRYDWData()
			}

			if (this.activeName == 'rydwtj') {
				this.rydwtj_cur_page = e
				this.onGetRYDWTJData()
			}

			if (this.activeName == 'jyl') {
				this.jyl_cur_page = e
				this.jylData()
				
			}

			if (this.activeName == 'jrx') {
				this.jrx_cur_page = e
				this.jrxData()
			}

			if (this.activeName == 'gt') {
				this.gt_cur_page = e
				this.gtData()
			}

			if (this.activeName == 'ksw') {
				this.ksw_cur_page = e
				this.kswData()
			}

			if (this.activeName == 'bmwy') {
				this.bmwy_cur_page = e
				this.bmwyData()
			}

			if (this.activeName == 'nbwy') {
				this.nbwy_cur_page = e
				this.nbwyData()
			}

			if (this.activeName == 'nbwyqx') {
				this.nbwyqx_cur_page = e
				this.nbwyqxData()
			}

			if (this.activeName == 'bjjl') {
				this.bjjl_cur_page = e
				this.reqAlarmRecord()
			}
		},

		
		// 获取人员选择列表
		reqPersonSelectList(){
			var companycode = this.getCompanyCode();
			personSelectList({companycode:companycode}).then(res => {
				var list = res, len = list.length;
				var selects = [];
				for(var i=0; i<len; i++){
					selects.push({key:i, value:list[i]});
				};
				this.personSelects = selects;
			})
		},

		// 报警记录
		reqAlarmRecord() {
			this.bjjl_tableList = [];
			wkkAlarm({
				page: this.bjjl_cur_page,
				size: 10,
				sort: 'id,desc',
				companycode: this.companycode,
			}).then(res => {
				this.bjjl_tableList = res.content;
				this.comm_total = res.totalElements

				/* this.bjjl_tableList = res.content.map(item => {
					item.level = item.level + '级'
					// 操作时间
					let index1 = item.alarmTime.indexOf('T')
					let str1 = item.alarmTime.substr(0, index1)
					let str2 = ' ' + item.alarmTime.slice(index1 + 1, -1)
					item.alarmTime = str1.concat(str2)
					return item
				}) */
			})
		},

		// switchToTable
		switchToTable() {
			/**
			 * jyl
			 * jrx
			 * gt
			 * ksw
			 * bmwy
			 * nbwy
			 * nbwyqx
			 */
			if ((this.activeName === 'jyl' && !this.curSelectJYLSensor) ||
				(this.activeName === 'jrx' && !this.curSelectJRXSensor) ||
				(this.activeName === 'gt' && !this.curSelectGTSensor) ||
				(this.activeName === 'ksw' && !this.curSelectKSWSensor) ||
				(this.activeName === 'bmwy' && !this.curSelectBMWYSensor) ||
				(this.activeName === 'nbwy' && !this.curSelectNBWYCJSensor) ||
				(this.activeName === 'nbwyqx' && !this.curSelectNBWYQXSensor)
			) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTable = !this.switchTable
			if (this.switchTable === true) {
				this.$nextTick(() => {
					let myChart = null;
					let index = 8;
					switch(this.activeName) {
						case 'jyl':
							--index;
						case 'jrx':
							--index
						case 'ksw':
							--index
						case 'gt':
							--index
						case 'bmwy':
							--index
						case 'nbwy':
							--index
						case 'nbwyqx':
							--index
							myChart = echarts.init(document.querySelector('.renderToTable' + index))
					}
					myChart.clear()
										const option = {
								xAxis: {
									type: 'category',
									data: ['19:17', '20:20', '20:40', '21:30', '21:45', '21:50', '21:55', '22:00', '22:11']
								},
								yAxis: {
									type: 'value'
								},
								series: [
									{
										data: [150, 230, 224, 118, 110, 55, 280, 360, 780],
										type: 'line'
									}
								]
							}
					myChart.setOption(option)
				})
			}
			
		},
		switchToTableJYL() {
			if (this.switchTableJYL === false && !this.curSelectJYLSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTableJYL = !this.switchTableJYL
			if (this.switchTableJYL === true) {
				analyzeTrendINJYL(this.$store.state.compony_info.companycode, this.curSelectJYLSensor).then(res => {
					// console.log(res, 'analyzeTrendINJYL   analyzeTrendINJYL')
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable1'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}

		},
		switchToTableJRX() {
			if (this.switchTableJRX === false && !this.curSelectJRXSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTableJRX = !this.switchTableJRX
			if (this.switchTableJRX === true) {
				analyzeTrendINJRX(this.$store.state.compony_info.companycode, this.curSelectJRXSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable2'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		},
		switchToTableKSW() {
			if (this.switchTableKSW === false && !this.curSelectKSWSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTableKSW = !this.switchTableKSW
			if (this.switchTableKSW === true) {
				analyzeTrendINKSW(this.$store.state.compony_info.companycode, this.curSelectKSWSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable3'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		},
		switchToTableGT() {
			if (this.switchTableGT === false && !this.curSelectGTSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTableGT = !this.switchTableGT
			if (this.switchTableGT === true) {
				analyzeTrendINGT(this.$store.state.compony_info.companycode, this.curSelectGTSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable4'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		},
		switchToTableBMWY() {
			if (this.switchTableBMWY === false && !this.curSelectBMWYSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchTableBMWY = !this.switchTableBMWY
			if (this.switchTableBMWY === true) {
				analyzeTrendINBMWY(this.$store.state.compony_info.companycode, this.curSelectBMWYSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable5'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		},
		switchToTableNBWYCJ() {
			if (this.switchToTableNBWYCJ === false && !this.curSelectNBWYCJSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchToTableNBWYCJ = !this.switchToTableNBWYCJ
			if (this.switchToTableNBWYCJ === true) {
				analyzeTrendINNBWYCJ(this.$store.state.compony_info.companycode, this.curSelectNBWYCJSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable6'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		},
		switchToTableNBWYQX() {
			if (this.switchToTableNBWYQX === false && !this.curSelectNBWYQXSensor) {
				this.$message.error("请选择监测站")
				return
			}
			this.switchToTableNBWYQX = !this.switchToTableNBWYQX
			if (this.switchToTableNBWYQX === true) {
				analyzeTrendINNBWYQX(this.$store.state.compony_info.companycode, this.curSelectNBWYQXSensor).then(res => {
					const xData = res.map(item => item.acquisitionDate)
					const yData = res.map(item => item.value)
					this.$nextTick(() => {
						const myChart = echarts.init(document.querySelector('.renderToTable7'))
						myChart.clear()
						const option = {
							xAxis: {
								type: 'category',
								data: xData
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{
									data: yData,
									type: 'line'
								}
							]
						}
						myChart.setOption(option)
					})
				})
			}
		}
	},

	watch: {
		dialogTableVisible(e) {
			this.reset()
			this.VisiblePagination = e
		},
	},
}
</script>

<style lang="scss">
.el-dialog {
	border-radius: 0.3vw;
	// 弹框体
	.el-dialog__body {
		padding-top: 0;

		.func_comm {
			margin-bottom: 1vh;

			strong {
				margin-right: 0.5vw;
			}

			.el-button {
				padding: 0;
				width: 5vw;
				height: 40px;
			}
		}

		.el-select {
			margin-right: 1vw;
		}

		.el-pagination {
			text-align: right;
			margin-top: 2vh;
		}

		.el-input {
			margin-right: 15px;
		}

		.el-table thead th {
			background-color: #f4f4f4;
			color: #333;
		}

		.el-table::before {
			height: 0;
		}
	}
}
</style>
