<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-cascader
                                clearable
                                filterable
                                size="mini"
                                :options="basAdNames"
                                v-model="queryParam.params.addvcd"
                                :props="setKesLabel"
                                @change="onhouChange"
                            >
                                <template slot-scope="{node, data}">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"
                                        >({{
                                            data.children === []
                                                ? ''
                                                : data.children.length
                                        }})</span
                                    >
                                </template>
                            </el-cascader>
                        </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 label="时段">
                            <el-select
                                size="mini"
                                filterable
                                v-model="queryParam.params.timeFrame"
                                clearable
                                placeholder="请选择时段"
                            >
                                <el-option
                                    v-for="item in timeFrameList"
                                    :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>
                            <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.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
                                    style="width: 100%"
                                    size="mini"
                                    v-model="queryParam.params.warnGrade"
                                    clearable
                                    placeholder="请选择报警等级"
                                >
                                    <el-option
                                        v-for="item in yjdjs"
                                        :key="item.id"
                                        :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
                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'}"
                :row-class-name="rowStyle"
            >
                <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="150"
                    sortable
                    prop="tm"
                    label="上报时间"
                    show-overflow-tooltip
                >
                </el-table-column>
                <!-- <el-table-column
          min-width="140"
          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="140"
                    sortable
                    prop="drp"
                    label="当前降雨量(mm)"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="110"
                    sortable
                    prop="dangerThreshold"
                    label="危险阈值"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    min-width="110"
                    sortable
                    prop="warnThreshold"
                    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="110"
                    sortable
                    prop="usfl"
                    label="在线状态"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span
                            :style="{
                                color:
                                    scope.row.usfl === 1 ||
                                    scope.row.usfl === '1'
                                        ? '#09ef09'
                                        : 'red',
                            }"
                            v-if="
                                scope.row.usfl === 1 || scope.row.usfl === '1'
                            "
                            >在线</span
                        >
                        <span
                            :style="{
                                color:
                                    scope.row.usfl === 0 ||
                                    scope.row.usfl === '0'
                                        ? 'red'
                                        : '#09ef09',
                            }"
                            v-if="
                                scope.row.usfl === 0 || scope.row.usfl === '0'
                            "
                            >不在线</span
                        >
                        <!-- <span v-if="scope.row.usfl === 0 || scope.row.usfl === '0'"
              >不在线</span
            >-->
                        <!-- <span v-if="{color:scope.row.usfl === 0 || scope.row.usfl === '0'?'red':'green'}"
              >不在线</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>
        </div>
        <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"
                    v-model="times"
                    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>
                <span style="margin-left: 20px">时段：</span>
                <el-select v-model="timeValue" placeholder="请选择">
                    <el-option
                        size="mini"
                        v-for="item in options"
                        :key="item.label"
                        :label="item.name"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>
                <el-button
                    style="margin-left: 10px"
                    type="primary"
                    @click="changeChart"
                    >搜索</el-button
                >
            </div>
            <div style="width: 100%; height: 500px; display: flex">
                <el-table
                    style="width: 40%"
                    :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="drp"
                        align="center"
                        show-overflow-tooltip
                    >
                        <template v-slot="{row}">
                            <span>{{ row[timeValue] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div
                    id="echartsBox"
                    style="width: 60%; height: 500px"
                    ref="box"
                ></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">退 出</el-button>
            </span>
        </el-dialog>
        <TimeSelection
            ref="Time"
            :appType="queryParam.params.appType"
        ></TimeSelection>
    </div>
</template>
<script>
import ylStQuery from '@/api/monitor/resMonitor/ylStQuery.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import TimeSelection from './components/TimeSelection.vue'
import * as echarts from 'echarts'
import {TableMixin} from '@/mixins/tableMixin'
import req from '@/request.js'
export default {
    name: 'displacement',
    components: {
        TimeSelection,
    },
    mixins: [TableMixin],
    data() {
        return {
            warnSds: [
                {
                    value: 'pn10',
                    warnSdMsg: '10分钟时段降水量',
                },
                {
                    value: 'pn30',
                    warnSdMsg: '30分钟时段降水量',
                },
                {
                    value: 'p1',
                    warnSdMsg: '1小时时段降水量',
                },
                {
                    value: 'p3',
                    warnSdMsg: '3小时时段降水量',
                },
                {
                    value: 'p6',
                    warnSdMsg: '6小时时段降水量',
                },
                {
                    value: 'p12',
                    warnSdMsg: '12小时时段降水量',
                },
                {
                    value: 'pd',
                    warnSdMsg: '24小时时段降水量',
                },
            ],
            total: 0,
            showFormDias: false,
            tableData: [],
            loading: false,
            basAdNames: [], //行政区
            yjdjs: [],
            title: '',
            statuss: [
                {
                    name: '在线',
                    value: '1',
                },
                {
                    name: '不在线',
                    value: '0',
                },
            ],
            czyyfl: [],
            times: [],
            timeValue: 'drp',
            multipleSelection: [], // 复选框
            stnms: [], //测站下拉
            setKesLabel: {
                value: 'code',
                label: 'name',
                children: 'children',
            },
            queryParam: {
                pageBean: {
                    pageSize: 20,
                    page: 1,
                },
                params: {
                    appType: '',
                    warnGrade: null,
                    stcd: null,
                    addvcd: null,
                    usfl: null,
                    timeFrame: 'yjz',
                },
            },
            query: {
                stcd: '60749857',
                stnm: null,
                startTime: null,
                endTime: null,
            },
            timeFrameList: [
                {
                    name: '1小时',
                    value: 'yjz',
                },
                {
                    name: '3小时',
                    value: 'shhjz',
                },
                {
                    name: '6小时',
                    value: 'lhjz',
                },
                {
                    name: '12小时',
                    value: 'sejz',
                },
                {
                    name: '24小时',
                    value: 'esjz',
                },
            ],
            options: [
                {
                    label: 'drp',
                    name: '默认',
                },
                {
                    label: 'pn10',
                    name: '10分',
                },
                {
                    label: 'pn30',
                    name: '30分',
                },
                {
                    label: 'p1',
                    name: '1小时',
                },
                {
                    label: 'p3',
                    name: '3小时',
                },
                {
                    label: 'p6',
                    name: '6小时',
                },
                {
                    label: 'p12',
                    name: '12小时',
                },
                {
                    label: 'pd',
                    name: '24小时',
                },
                {
                    label: 'dyp',
                    name: '日降雨量',
                },
            ],
            echartLiat: [],
            loadingChartData: false,
            StationId: '',
            refreshData: null,
        }
    },
    created() {
        this.StationId = window.sessionStorage.getItem('StationId')
        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
        this.getSysDict()
        if (
            this.StationId != '' &&
            this.StationId != null &&
            this.StationId != undefined
        ) {
            this.queryParam.params.stcd = this.StationId
            this.queryParam.pageBean.page = 1
            this.getDateList()
            window.sessionStorage.removeItem('StationId')
        }
    },
    mounted() {
        //自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
        this.refreshData = setInterval(() => {
            this.getSysDict()
        }, 1000 * 60 * 10)
    },
    //生命周期若已设置定时器，需清空定时器beforeDestroy()
    beforeDestroy() {
        this.refreshData = null
    },
    methods: {
        // 导出表格弹窗显示
        updateExcl() {
            this.$refs.Time.openShare()
        },
        openMore() {
            this.showMore = !this.showMore
        },
        onhouChange(val) {
            if (val) {
                this.queryParam.params.addvcd = val[val.length - 1]
            } else {
                this.queryParam.params.addvcd = null
            }
        },
        getDateList() {
            this.loading = true
            this.tableData = []
            ylStQuery.ListGet(this.queryParam, (res) => {
                this.total = res.value.total
                this.tableData = JSON.parse(JSON.stringify(res.value.rows))
                this.tableData.forEach((e) => {
                    this.warnSds.forEach((w) => {
                        if (e.warnSd == w.value) {
                            e.warnSd = w.warnSdMsg
                        }
                    })
                    this.yjdjs.forEach((c) => {
                        if (e.warnGrade == c.value) {
                            e.level = c.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()
        },

        rowStyle({row, rowIndex}) {
            if (row.warnGrade == '2') {
                return 'orange_class'
            } else if (row.warnGrade == '1') {
                return 'error_class'
            } else if (row.warnGrade == 3) {
                return 'success_class'
            }
            return ''
        },
        handleCurrentChange(val) {
            this.queryParam.pageBean.page = val
            this.getDateList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map((item) => {
                return item.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.yjdjs = response.data.yjdj
                        ylStQuery.getbasAdName({}, (res) => {
                            this.basAdNames = res.value
                        })
                        ylStQuery.getStnms({}, (res) => {
                            this.stnms = res.value
                        })
                        this.getDateList()
                    },
                    (error) => {
                        reject(error)
                    }
                )
            })
        },
        // // 点击查询
        onClickSearch() {
            this.queryParam.pageBean.page = 1
            this.getDateList()
        },
        // 重置
        resetQuery() {
            this.queryParam.params = {}
            this.onClickSearch()
        },
        openDate(val) {
            this.echartLiat = []
            this.loadingChartData = true
            console.log(val)
            this.title = val.stnm
            this.timeValue = 'drp'
            this.query.startTime = null //每次打开弹窗时清空上次手动选择的时间
            this.query.endTime = null //每次打开弹窗时清空上次手动选择的时间
            this.times = [] //每次打开弹窗时清空上次手动选择的时间
            this.query.stcd = val.stcd //点击打开曲线图时赋值
            this.query.stnm = val.stnm //点击打开曲线图时赋值
            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: '',
                    stcd: val.stcd,
                    startTime: startTime,
                    endTime: endTime,
                    sttp: val.sttp,
                },
                // {
                // 	endTime: "2022-05-20 15:17:33",
                // 	startTime: "2022-05-19 15:00:33",
                // 	stcd: "60749857",
                // }
            }
            ylStQuery.pptnList(data.query, (res) => {
                this.echartLiat = res.value
                if (res.value.length > 0) {
                    this.dates = this.echartLiat.map((item) => {
                        return item.tm
                    })
                    this.dangerzs = this.echartLiat.map((item) => {
                        if (this.timeValue == 'drp') {
                            return item.drp
                        }
                    })
                    this.dangerjz = this.echartLiat.map((item) => {
                        if (this.timeValue == 'p1') {
                            return item.jj1
                        } else if (this.timeValue == 'p3') {
                            return item.jj3
                        } else if (this.timeValue == 'p6') {
                            return item.jj6
                        } else if (this.timeValue == 'p12') {
                            return item.jj12
                        } else if (this.timeValue == 'pd') {
                            return item.jj24
                        }
                    })
                    this.dangerdz = this.echartLiat.map((item) => {
                        if (this.timeValue == 'p1') {
                            return item.wx1
                        } else if (this.timeValue == 'p3') {
                            return item.wx3
                        } else if (this.timeValue == 'p6') {
                            return item.wx6
                        } else if (this.timeValue == 'p12') {
                            return item.wx12
                        } else if (this.timeValue == 'pd') {
                            return item.wx24
                        }
                    })
                    this.$nextTick(() => {
                        this.getCharts()
                    })
                } else {
                    this.dangerdz = []
                    this.dates = []
                    this.dangerjz = []
                    this.dangerQ = []
                    this.dangerzs = []
                    this.$nextTick(() => {
                        this.getCharts()
                    })
                }
                this.loadingChartData = false
            })
        },
        handleClose() {
            this.echartLiat = []
            this.showFormDias = false
        },
        changeChart() {
            this.echartLiat = []
            this.loadingChartData = true
            if (this.times && this.times.length > 0) {
                this.query.startTime = this.times[0]
                this.query.endTime = this.times[1]
                this.dangerdz = []
                this.dates = []
                this.dangerjz = []
                this.dangerzs = []
                this.dangerQ = []
                ylStQuery.pptnList(this.query, (res) => {
                    console.log(res.value.length)
                    if (res.value.length > 0) {
                        this.echartLiat = res.value
                        this.dates = this.echartLiat.map((item) => {
                            return item.tm
                        })
                        this.dangerzs = this.echartLiat.map((item) => {
                            if (this.timeValue == 'drp') {
                                return item.drp
                            } else if (this.timeValue == 'pn10') {
                                return item.pn10
                            } else if (this.timeValue == 'pn30') {
                                return item.pn30
                            } else if (this.timeValue == 'p1') {
                                return item.p1
                            } else if (this.timeValue == 'p3') {
                                return item.p3
                            } else if (this.timeValue == 'p6') {
                                return item.p6
                            } else if (this.timeValue == 'p12') {
                                return item.p12
                            } else if (this.timeValue == 'pd') {
                                return item.pd
                            } else if (this.timeValue == 'dyp') {
                                return item.dyp
                            }
                        })
                        this.dangerjz = this.echartLiat.map((item) => {
                            if (this.timeValue == 'p1') {
                                return item.jj1
                            } else if (this.timeValue == 'p3') {
                                return item.jj3
                            } else if (this.timeValue == 'p6') {
                                return item.jj6
                            } else if (this.timeValue == 'p12') {
                                return item.jj12
                            } else if (this.timeValue == 'pd') {
                                return item.jj24
                            }
                        })
                        this.dangerdz = this.echartLiat.map((item) => {
                            if (this.timeValue == 'p1') {
                                return item.wx1
                            } else if (this.timeValue == 'p3') {
                                return item.wx3
                            } else if (this.timeValue == 'p6') {
                                return item.wx6
                            } else if (this.timeValue == 'p12') {
                                return item.wx12
                            } else if (this.timeValue == 'pd') {
                                return item.wx24
                            }
                        })
                        console.log(this.dangerzs)
                        this.$nextTick(() => {
                            this.getCharts()
                        })
                    } else {
                        this.dangerdz = []
                        this.dates = []
                        this.$nextTick(() => {
                            this.getCharts()
                        })
                    }
                    this.loadingChartData = false
                })
            } else {
                this.$message.warning('请选择查询时间范围！')
                this.loadingChartData = false
                this.query.startTime = ''
                this.query.endTime = ''
                this.times = []
                this.dangerdz = []
                this.dates = []
                this.dangerjz = []
                this.dangerzs = []
                this.dangerQ = []
                this.$nextTick(() => {
                    console.log(this.dangerzs, 777)
                    this.getCharts()
                })
                return
                ylStQuery.pptnList(this.query, (res) => {
                    return
                    if (res.value.length > 0) {
                        this.echartLiat = res.value
                        this.dates = this.echartLiat.map((item) => {
                            return item.tm
                        })
                        this.dangerzs = this.echartLiat.map((item) => {
                            if (this.timeValue == 'drp') {
                                return item.drp
                            } else if (this.timeValue == 'pn10') {
                                return item.pn10
                            } else if (this.timeValue == 'pn30') {
                                return item.pn30
                            } else if (this.timeValue == 'p1') {
                                return item.p1
                            } else if (this.timeValue == 'p3') {
                                return item.p3
                            } else if (this.timeValue == 'p6') {
                                return item.p6
                            } else if (this.timeValue == 'p12') {
                                return item.p12
                            } else if (this.timeValue == 'pd') {
                                return item.pd
                            } else if (this.timeValue == 'dyp') {
                                return item.dyp
                            }
                        })
                        this.dangerjz = this.echartLiat.map((item) => {
                            if (this.timeValue == 'p1') {
                                return item.jj1
                            } else if (this.timeValue == 'p3') {
                                return item.jj3
                            } else if (this.timeValue == 'p6') {
                                return item.jj6
                            } else if (this.timeValue == 'p12') {
                                return item.jj12
                            } else if (this.timeValue == 'pd') {
                                return item.jj24
                            }
                        })
                        this.dangerdz = this.echartLiat.map((item) => {
                            if (this.timeValue == 'p1') {
                                return item.wx1
                            } else if (this.timeValue == 'p3') {
                                return item.wx3
                            } else if (this.timeValue == 'p6') {
                                return item.wx6
                            } else if (this.timeValue == 'p12') {
                                return item.wx12
                            } else if (this.timeValue == 'pd') {
                                return item.wx24
                            }
                        })
                        this.$nextTick(() => {
                            console.log(this.dangerzs, 777)
                            this.getCharts()
                        })
                    }
                })
            }
        },
        getCharts() {
            let chartDom = document.getElementById('echartsBox')
            let myChart = echarts.init(chartDom)
            let option = {
                title: {
                    text: '',
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['危险', '警戒', '降雨量(m)'],
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true,
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.dates,
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                },
                series: [
                    {
                        name: '危险',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: 'red',
                                lineStyle: {
                                    color: 'red',
                                },
                            },
                        },
                        data: this.dangerdz, // [120, 132, 101, 134, 90, 230, 210],
                    },
                    {
                        name: '警戒',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#FAC858',
                                lineStyle: {
                                    color: '#FAC858',
                                },
                            },
                        },
                        data: this.dangerjz, //[220, 182, 191, 234, 290, 330, 310],
                    },
                    {
                        name: '降雨量(m)',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#5470C6',
                                lineStyle: {
                                    color: '#5470C6',
                                },
                            },
                        },
                        data: this.dangerzs, // [150, 232, 201, 154, 190, 330, 410],
                    },
                ],
            }
            option && myChart.setOption(option)
        },
    },
}
</script>
<style lang="scss">
.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;
}

.success_class {
  td {
    div {
      color: red !important;
    }
  }
}

.orange_class {
  td {
    div {
      color: #FFAE00 !important;
    }
  }
}

.error_class {
  td {
    div {
      color: rgb(185, 185, 0) !important;
    }
  }
}
</style>
