<template>
    <div class="bbsl-common-page" @click="commonPageClick">
        <div class="bbsl-table-search">
            <el-form v-model="queryParam" :inline="true">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="上报时间">
                            <el-date-picker
                                @change="changeDate"
                                v-model="scopeTime"
                                style="width: 230px"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                clearable
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="水库名称">
                            <el-select
                                size="mini"
                                filterable
                                v-model="queryParam.params.rscd"
                                clearable
                                placeholder="请选择水库名称"
                            >
                                <el-option
                                    v-for="item in rsnms"
                                    :key="item.id"
                                    :label="item.rsnm"
                                    :value="item.rscd"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="测点名称">
                            <el-input
                                size="mini"
                                clearable
                                placeholder="请输入测点名称"
                                v-model="queryParam.params.stnm"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="onClickSearch"
                                >搜索
                            </el-button>
                            <el-button
                                icon="el-icon-refresh"
                                size="mini"
                                @click="resetQuery"
                                >重置</el-button
                            >
                            <el-button
                                size="mini"
                                icon="el-icon-download"
                                type="warning"
                                @click="updateExcl"
                                >导出
                            </el-button>
                            <el-button type="text" @click.stop="openMore">
                                更多
                                <i
                                    :class="
                                        showMore
                                            ? 'el-icon-arrow-up'
                                            : 'el-icon-arrow-down'
                                    "
                                ></i>
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div
                    class="bbsl-search-more"
                    style="width: 1200px"
                    v-if="showMore"
                >
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="在线状态">
                                <el-select
                                    size="mini"
                                    v-model="queryParam.params.usfl"
                                    clearable
                                    placeholder="请选择在线状态"
                                >
                                    <el-option
                                        v-for="item in statuss"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="水势">
                                <el-select
                                    size="mini"
                                    v-model="queryParam.params.rwptn"
                                    clearable
                                    placeholder="请选择在线状态"
                                >
                                    <el-option
                                        v-for="item in rwptns"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="应用分类">
                                <el-select
                                    size="mini"
                                    v-model="queryParam.params.appType"
                                    clearable
                                    placeholder="请选择应用分类"
                                >
                                    <el-option
                                        v-for="item in czyyfl"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="测点">
                                <el-select
                                    size="mini"
                                    filterable
                                    v-model="queryParam.params.stcd"
                                    clearable
                                    placeholder="请选择测点"
                                >
                                    <el-option
                                        v-for="item in stnms"
                                        :key="item.id"
                                        :label="item.stnm"
                                        :value="item.stcd"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <div class="bbsl-table-content" ref="contentPanel">
            <div class="bbsl-btn-content" ref="btnPanel">
                <!-- <el-button
          :disabled="!multipleSelection.length"
          size="mini"
          icon="el-icon-delete"
          type="danger"
          @click="deleteSelect"
          >删除</el-button
        >-->
            </div>
            <!-- 
        @selection-change="handleSelectionChange" 
      :row-key="getRowKey"-->
            <el-table
                stripe
                size="mini"
                :height="tableMaxHeight"
                :style="{width: '100%'}"
                ref="multipleSelection"
                v-loading="loading"
                border
                :data="tableData"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
            >
                <el-table-column
                    fixed
                    type="index"
                    width="55"
                    label="序号"
                ></el-table-column>
                <el-table-column
                    fixed
                    min-width="100"
                    sortable
                    prop="stcd"
                    label="测站代码"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="130"
                    fixed
                    sortable
                    prop="stnm"
                    label="测站名称"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="180"
                    sortable
                    fixed
                    prop="currentLevelTime"
                    label="上报时间"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    min-width="140"
                    sortable
                    prop="rsnm"
                    label="所属水库"
                    show-overflow-tooltip
                >
                </el-table-column>
                <!-- <el-table-column min-width="160"
                         sortable
                         prop="stlc"
                         label="测站地址"
                         show-overflow-tooltip></el-table-column> -->
                <!-- <el-table-column
          min-width="180"
          sortable
          prop="areaName"
          label="行政区划"
          show-overflow-tooltip
        ></el-table-column>-->

                <el-table-column
                    min-width="150"
                    sortable
                    prop="currentLevel"
                    label="库水位"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="rstpc"
                    label="库容"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="transfinite"
                    label="超限"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="nrstlv"
                    label="正常蓄水位"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="dsfllv"
                    label="设计洪水位"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="chfllv"
                    label="校核洪水位"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="inq"
                    label="入库流量"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="rwptn"
                    label="水势"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="150"
                    sortable
                    prop="flsscnwl"
                    label="防洪限制水位"
                    show-overflow-tooltip
                >
                </el-table-column>
                <!-- <el-table-column
		  min-width="150"
		  sortable
		  prop="rz"
		  label="库水位"
		  show-overflow-tooltip
		></el-table-column> -->

                <el-table-column
                    min-width="110"
                    sortable
                    prop="appTypeName"
                    label="应用分类"
                    show-overflow-tooltip
                >
                </el-table-column>
                <!-- <el-table-column
          min-width="150"
          sortable
          prop="usfl"
          label="在线状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.usfl === 1 || scope.row.usfl === '1'">在线</span>
            <span v-if="scope.row.usfl === 0 || scope.row.usfl === '0'">不在线</span>
            <span v-else>----</span>
          </template>
        </el-table-column>-->
                <el-table-column
                    fixed="right"
                    min-width="150"
                    sortable
                    label="操作"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            plain
                            @click="openDate(scope.row)"
                            >水位曲线图</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                ref="paginationPanel"
                align="right"
                class="bbsl-pagination"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageBean.page"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="queryParam.pageBean.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
            <el-dialog
                :title="this.title + '曲线图'"
                width="80%"
                top="8vh"
                :before-close="handleClose"
                :visible.sync="showFormDias"
            >
                <div class="serchBlock" style="margin: 0 0 10px 0">
                    <span>选择日期：</span>
                    <el-date-picker
                        style="width: 350px"
                        @change="changeChart"
                        v-model="times"
                        size="mini"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :clearable="false"
                    >
                    </el-date-picker>
                </div>
                <div style="width: 100%; height: 500px; display: flex">
                    <el-table
                        style="width: 50%"
                        :data="echartLiat"
                        v-loading="loadingChartData"
                        stripe
                        height="500"
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            align="center"
                        />
                        <el-table-column
                            label="时间"
                            prop="tm"
                            align="center"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="水位"
                            prop="zz"
                            align="center"
                            show-overflow-tooltip
                        >
                        </el-table-column>
                    </el-table>
                    <!-- <div id="echartsBox" style="width: 60%; height: 500px" ref="box"></div> -->
                    <div style="width: 60%; height: 100%">
                        <div
                            id="echartsBox"
                            style="width: 100%; height: 50%"
                            ref="box"
                        ></div>
                        <div
                            id="echartsBox1"
                            style="width: 100%; height: 50%"
                            ref="box1"
                        ></div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleClose"
                        >退 出</el-button
                    >
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import resWaterHistory from '@/api/monitor/resMonitor/resWaterHistory.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import {TableMixin} from '@/mixins/tableMixin'
import req from '@/request.js'
import * as echarts from 'echarts'
export default {
    name: 'resWaterHistory',
    components: {
        // FormDialog,
    },
    mixins: [TableMixin],
    data() {
        return {
            title: '',
            loading: false,
            statuss: [
                {
                    name: '在线',
                    value: '1',
                },
                {
                    name: '不在线',
                    value: '0',
                },
            ],
            multipleSelection: [], // 复选框
            rsnms: [], //水库下拉，
            stnms: [], //测站下拉
            setKesLabel: {
                value: 'code',
                label: 'name',
                children: 'children',
            },
            scopeTime: '',
            queryParam: {
                pageBean: {
                    pageSize: 20,
                    page: 1,
                },
                params: {
                    rscd: null,
                    stcd: null,
                    usfl: null,
                    startTime: null,
                    endTime: null,
                    rwptn: null,
                },
            },
            rwptns: [], //水势
            tableData: [],
            pId: '',
            total: 0,
            showFormDias: false,
            dates: [],
            dangerdz: [],
            dangerjz: [],
            dangerzs: [], //水位
            dangerQ: [], //流量
            echartLiat: [],
            times: [], //选择时间
            czyyfl: [],
            query: {
                stcd: null,
                stnm: null,
                startTime: null,
                endTime: null,
                rscd: null,
            },
            timeList: [],
            zzList: [],
            nrstlvList: [],
            dsfllvList: [],
            rstpcList: [],
            chfllvList: [],
            loadingChartData: false,
        }
    },
    created() {
        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
        this.getCurrentMonthLast()
        this.getSysDict()
    },
    methods: {
        //导出excl
        updateExcl() {
            const loading = this.$loading({
                lock: true,
                text: '导出中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            let param = {
                groupRelation: 'AND',
                groupTree: {},
                pageBean: {
                    page: 1,
                    pageSize: -1,
                    showTotal: true,
                },
                params: {
                    startTime: this.queryParam.params.startTime,
                    endTime: this.queryParam.params.endTime,
                    stnm: this.queryParam.params.stnm,
                    rscd: this.queryParam.params.rscd,
                    stcd: this.queryParam.params.stcd,
                    usfl: this.queryParam.params.usfl,
                    appType: this.queryParam.params.appType,
                    wptn: this.queryParam.params.wptn,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: '',
                        relation: 'AND',
                        value: {},
                    },
                ],
                sorter: [
                    {
                        direction: 'ASC',
                        property: '',
                    },
                ],
            }
            resWaterHistory.rsvrHistoryExport(param, (res) => {
                loading.close()
                if (res.state == false) {
                    this.$message.error(res.message)
                } else {
                    this.$message.success('导出成功')
                }
            })
        },
        getCurrentMonthLast() {
            var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
            let endTime = moment().format('YYYY-MM-DD') //当前年月日
            let startTime = moment().subtract(1, 'days').format('YYYY-MM-DD')
            this.scopeTime = [startTime, endTime]
            let time = moment().format('LTS') //当前时分秒
            this.queryParam.params.startTime =
                this.scopeTime[0] + ' ' + '00:00:00'
            this.queryParam.params.endTime = this.scopeTime[1] + ' ' + time
        },
        openMore() {
            this.showMore = !this.showMore
        },

        openDate(val) {
            this.echartLiat = []
            this.loadingChartData = true
            this.title = val.stnm
            this.query.startTime = null //每次打开弹窗时清空上次手动选择的时间
            this.query.endTime = null //每次打开弹窗时清空上次手动选择的时间
            this.times = [] //每次打开弹窗时清空上次手动选择的时间
            this.query.stcd = val.stcd //点击打开曲线图时赋值
            this.query.stnm = val.stnm //点击打开曲线图时赋值
            this.query.rscd = val.rscd //点击打开曲线图时赋值
            var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
            var _today = moment()
            this.showFormDias = true
            let endTime = moment().format('L') //当前年月日
            let time = moment().format('LTS') //当前时分秒
            endTime = endTime.replace(/\//g, '-')
            endTime = endTime + ' ' + time
            let startTime = _today
                .subtract(1, 'days')
                .format('YYYY-MM-DD') /*前一天的时间*/
            startTime = startTime + ' ' + time
            this.query.startTime = startTime
            this.query.endTime = endTime
            this.times = [startTime, endTime]
            let data = {
                query: {
                    stnm: val.stnm,
                    stcd: val.stcd,
                    startTime: startTime,
                    endTime: endTime,
                    sttp: val.sttp,
                    rscd: val.rscd,
                },
            }
            this.timeList = []
            this.zzList = []
            this.nrstlvList = []
            this.dsfllvList = []
            this.chfllvList = []
            this.rstpcList = []
            resWaterHistory.getRESChartsList(data.query, (res) => {
                this.echartLiat = res.value
                if (res.value.length) {
                    this.echartLiat.forEach((e) => {
                        this.timeList.push(e.tm)
                        this.zzList.push(e.zz)
                        this.nrstlvList.push(e.nrstlv)
                        this.dsfllvList.push(e.dsfllv)
                        this.chfllvList.push(e.chfllv)
                        this.rstpcList.push(e.rstpc)
                    })
                    // this.dates = this.echartLiat.map(item => {
                    //   return item.tm
                    // })
                    // this.dangerdz = this.echartLiat.map(item => {
                    //   return item.dz
                    // })
                    // this.dangerjz = this.echartLiat.map(item => {
                    //   return item.jz
                    // })
                    // this.dangerzs = this.echartLiat.map(item => {
                    //   return item.zz
                    // })
                    // this.dangerQ = this.echartLiat.map(item => {
                    //   return item.q
                    // })
                    this.$nextTick(() => {
                        this.getCharts()
                        this.getCharts1()
                    })
                } else {
                    this.timeList = []
                    this.zzList = []
                    this.nrstlvList = []
                    this.dsfllvList = []
                    this.chfllvList = []
                    this.rstpcList = []
                    this.$nextTick(() => {
                        this.getCharts()
                        this.getCharts1()
                    })
                }
                this.loadingChartData = false
            })
        },
        changeChart(val) {
            this.echartLiat = []
            this.loadingChartData = true
            if (val) {
                this.query.startTime = val[0]
                this.query.endTime = val[1]
                this.timeList = []
                this.zzList = []
                this.nrstlvList = []
                this.dsfllvList = []
                this.chfllvList = []
                this.rstpcList = []
                resWaterHistory.getRESChartsList(this.query, (res) => {
                    if (res.value.length) {
                        this.echartLiat = res.value
                        this.echartLiat.forEach((e) => {
                            this.timeList.push(e.tm)
                            this.zzList.push(e.zz)
                            this.nrstlvList.push(e.nrstlv)
                            this.dsfllvList.push(e.dsfllv)
                            this.chfllvList.push(e.chfllv)
                            this.rstpcList.push(e.rstpc)
                        })
                        // this.dates = this.echartLiat.map(item => {
                        //   return item.tm
                        // })
                        // this.dangerdz = this.echartLiat.map(item => {
                        //   return item.dz
                        // })
                        // this.dangerjz = this.echartLiat.map(item => {
                        //   return item.jz
                        // })
                        // this.dangerzs = this.echartLiat.map(item => {
                        //   return item.zz
                        // })
                        // this.dangerQ = this.echartLiat.map(item => {
                        //   return item.q
                        // })
                    }
                    this.$nextTick(() => {
                        console.log(this.dangerzs, 666)
                        this.getCharts()
                        this.getCharts1()
                    })
                    this.loadingChartData = false
                })
            } else {
                this.$message.warning('请选择查询时间范围！')
                this.query.startTime = ''
                this.query.endTime = ''
                this.times = []
                this.timeList = []
                this.zzList = []
                this.nrstlvList = []
                this.dsfllvList = []
                this.rstpcList = []
                this.chfllvList = []
                this.$nextTick(() => {
                    this.getCharts()
                    this.getCharts1()
                })
                return
                resWaterHistory.getRESChartsList(this.query, (res) => {
                    if (res.value.length) {
                        this.echartLiat = res.value
                        this.echartLiat.forEach((e) => {
                            this.timeList.push(e.tm)
                            this.zzList.push(e.zz)
                            this.nrstlvList.push(e.nrstlv)
                            this.dsfllvList.push(e.dsfllv)
                            this.chfllvList.push(e.chfllv)
                            this.rstpcList.push(e.rstpc)
                        })
                        // this.dates = this.echartLiat.map(item => {
                        //   return item.tm
                        // })
                        // this.dangerdz = this.echartLiat.map(item => {
                        //   return item.dz
                        // })
                        // this.dangerjz = this.echartLiat.map(item => {
                        //   return item.jz
                        // })
                        // this.dangerzs = this.echartLiat.map(item => {
                        //   return item.zz
                        // })
                        // this.dangerQ = this.echartLiat.map(item => {
                        //   return item.q
                        // })
                        this.$nextTick(() => {
                            console.log(this.dangerzs, 777)
                            this.getCharts()
                            this.getCharts1()
                        })
                    }
                })
            }
        },
        getCharts1() {
            let echartList = this.echartLiat
            let chartDom = document.getElementById('echartsBox1')
            let myChart = echarts.init(chartDom)
            let option = {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        // params 是一个包含详细信息的对象
                        // 可以根据 params 中的数据自定义 tooltip 的展示
                        let html = ''
                        for (let i = 0; i < params.length; i++) {
                            let color = params[i].color
                            let name = params[i].seriesName
                            let value = params[i].data ? params[i].data : '-'
                            let dataIndex = params[i].dataIndex
                            let marker =
                                '<span style="display: inline-block; width: 8px; height: 8px; border-radius: 4px;background-color:' +
                                color +
                                ';margin-right: 5px;"></span>'

                            let label =
                                '<span style="display: inline-block; width: 70px; text-align: justify; text-justify: inter-ideograph;vertical-align: top">' +
                                name +
                                '</span>'
                            let valueLabel = ''
                            let yue = name == '库容' ? '约' : ''
                            if (echartList[dataIndex].isMatched == 'f') {
                                valueLabel =
                                    '<span style="display: inline-block;width: 60px;text-align: right;text-justify: inter-ideograph;font-weight: bold;">' +
                                    yue +
                                    value +
                                    '</span>'
                            } else {
                                valueLabel =
                                    '<span style="display: inline-block;width: 60px;text-align: right;text-justify: inter-ideograph;font-weight: bold;">' +
                                    value +
                                    '</span>'
                            }

                            html += marker + label + valueLabel + '<br>'
                        }
                        return html
                    },
                },
                legend: {
                    // data: ['当前水位', '库容'],
                    data: ['库容'],
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.timeList,
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                },
                series: [
                    // {
                    // 	name: '当前水位',
                    // 	type: 'line',
                    // 	emphasis: {
                    // 		focus: 'series',
                    // 	},
                    // 	data: this.zzList,
                    // 	itemStyle: {
                    // 		color: '#0091ff',
                    // 	},
                    // },
                    {
                        name: '库容',
                        type: 'line',
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.rstpcList,
                        itemStyle: {
                            normal: {
                                color: 'green',
                                lineStyle: {
                                    color: 'green',
                                },
                            },
                        },
                    },
                ],
            }
            option && myChart.setOption(option)
        },

        getCharts() {
            let chartDom = document.getElementById('echartsBox')
            let myChart = echarts.init(chartDom)
            let option = {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['警戒水位', '设计洪水位', '校核洪水位', '当前水位'],
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.timeList,
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                },
                series: [
                    {
                        name: '警戒水位',
                        type: 'line',
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.nrstlvList,
                        itemStyle: {
                            normal: {
                                color: 'yellow',
                                lineStyle: {
                                    color: 'yellow',
                                },
                            },
                        },
                    },
                    {
                        name: '设计洪水位',
                        type: 'line',
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.dsfllvList,
                        itemStyle: {
                            normal: {
                                color: '#ff6347',
                                lineStyle: {
                                    color: '#ff6347',
                                },
                            },
                        },
                    },
                    {
                        name: '校核洪水位',
                        type: 'line',
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.chfllvList,
                        itemStyle: {
                            normal: {
                                color: '#b22222',
                                lineStyle: {
                                    color: '#b22222',
                                },
                            },
                        },
                    },
                    {
                        name: '当前水位',
                        type: 'line',
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.zzList,
                        itemStyle: {
                            color: '#0091ff',
                        },
                    },
                ],
            }
            option && myChart.setOption(option)
        },
        handleClose() {
            this.echartLiat = []
            this.showFormDias = false
        },
        floatSub(arg1, arg2) {
            var r1, r2, m, n
            try {
                r1 = arg1.toString().split('.')[1].length
            } catch (e) {
                r1 = 0
            }
            try {
                r2 = arg2.toString().split('.')[1].length
            } catch (e) {
                r2 = 0
            }
            m = Math.pow(10, Math.max(r1, r2))
            console.log(m)
            //动态控制精度长度
            n = r1 >= r2 ? r1 : r2
            return ((arg1 * m - arg2 * m) / m).toFixed(n)
        },
        getDateList() {
            this.loading = true
            this.tableData = []
            resWaterHistory.ListGet(this.queryParam, (res) => {
                this.total = res.value.total
                this.tableData = JSON.parse(JSON.stringify(res.value.rows))
                this.tableData.forEach((e) => {
                    if (e.rz > e.nrstlv) {
                        e.transfinite = this.floatSub(e.rz, e.nrstlv)
                    } else {
                        e.transfinite = '--'
                    }
                    this.rwptns.forEach((w) => {
                        if (e.rwptn == w.value) {
                            e.rwptn = w.name
                        }
                    })
                    this.czyyfl.forEach((c) => {
                        if (e.appType == c.value) {
                            e.appTypeName = c.name
                        }
                    })
                })
                this.$set(this.tableData)
                this.loading = false
            })
        },
        handleSizeChange(val) {
            this.queryParam.pageBean.pageSize = val
            this.getDateList()
        },
        handleCurrentChange(val) {
            this.queryParam.pageBean.page = val
            this.getDateList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map((item) => {
                return item.id
            })
        },
        // // 指定一个key标识这一行的数据
        // getRowKey(row) {
        //   return row.id
        // },
        //获取字典数据
        getSysDict() {
            let portal = window.context.portal
            return new Promise((resolve, reject) => {
                req.post(
                    portal + '/sys/sysDictionary/v1/queryAllDictItems'
                ).then(
                    (response) => {
                        resolve(response.data)
                        this.rwptns = response.data.ss //水势
                        resWaterHistory.getRsnm({}, (res) => {
                            this.rsnms = res.value
                        })
                        resWaterHistory.getStnms({}, (res) => {
                            this.stnms = res.value
                        })
                        this.getDateList()
                    },
                    (error) => {
                        reject(error)
                    }
                )
            })
        },
        changeDate(val) {
            if (val) {
                var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
                let time = moment().format('LTS') //当前时分秒
                this.queryParam.params.startTime = val[0] + ' ' + '00:00:00'
                this.queryParam.params.endTime = val[1] + ' ' + time
            } else {
                this.queryParam.params.startTime = ''
                this.queryParam.params.endTime = ''
            }
        },
        // // 点击查询
        onClickSearch() {
            this.queryParam.pageBean.page = 1
            this.getDateList()
        },
        // 重置
        resetQuery() {
            this.queryParam.params = {}
            this.scopeTime = ''
            this.onClickSearch()
        },
    },
}
</script>
<style lang="scss" scoped>
	.btn-content {
		display: flex;
	}

	.el-select-dropdown__item span {
		color: rgb(51, 51, 51) !important;
	}

	.el-select-dropdown__item {
		color: #9a9a9a !important;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background: #f5f7fa;
	}

	.btn-content :first-child {
		margin: 0 0 0 0 !important;
	}

	.el-switch__label--left {
		position: relative;
		left: 45px;
		color: #fff;
		z-index: -1111;
	}

	.el-switch__core {
		width: 50px !important;
	}

	.el-switch__label--right {
		position: relative;
		right: 46px;
		color: #fff;
		z-index: -1111;
	}

	.el-switch__label--right.is-active {
		z-index: 1111;
		color: #fff !important;
	}

	.el-switch__label--left.is-active {
		z-index: 1111;
		color: #9c9c9c !important;
	}

	.sampling {
		::v-deep .el-dialog__body {
			padding: 30px 20px 0 20px;
		}
	}

	::-webkit-scrollbar {
		background: #fff !important;
	}

	.bbsl-pagination {
		bottom: 10px !important;
	}
</style>
