<template>
  <div class="water-dispatch">
    <div class="btn-box">
      <button
        class="xlfa"
        @click="xlfaOpen"
        v-show="isShow"
        :disabled="this.pageLoading1"
        :style="{ cursor: this.pageLoading1 ? 'not-allowed' : 'pointer' }"
      >
        兴利调度方案
      </button>
      <button
        class="hqyjcz"
        @click="hqyjczOpen"
        v-show="isShow"
        :disabled="this.pageLoading1"
        :style="{ cursor: this.pageLoading1 ? 'not-allowed' : 'pointer' }"
      >
        旱情预警处置
      </button>
      <button
        class="ggsltj"
        @click="ggsltjOpen"
        v-show="isShow"
        :disabled="this.pageLoading1"
        :style="{ cursor: this.pageLoading1 ? 'not-allowed' : 'pointer' }"
      >
        灌溉水量统计
      </button>
    </div>

    <div
      class="is-show"
      @click="isShowBtn"
      :class="{ hidden: isShow === false }"
    ></div>
    <div class="dispatch-left" v-show="isShow" v-loading="pageLoading1">
      <BigPanel title="水库干旱预警" class="top1">
        <el-popover placement="bottom" title="正常" trigger="hover">
          <el-button
            slot="reference"
            :class="{ active1: droughtObj.drought === '正常' }"
            >正常</el-button
          >
          <div class="txt">一切正常</div>
        </el-popover>
        <el-popover placement="bottom" title="轻度干旱" trigger="hover">
          <el-button
            slot="reference"
            :class="{ active2: droughtObj.drought === '轻度' }"
            >轻度</el-button
          >
          <div class="txt">
            水库水位回落到轻度干旱预警线后，保证城镇生活、农业灌溉等用水，逐步限制环保生态等用水，下游环保生态用水量由水库水电运行中心提出调度建议，报东阳市水务局审批，水库运行中心按审批意见执行。
          </div>
        </el-popover>
        <el-popover placement="bottom" title="中度干旱" trigger="hover">
          <el-button
            slot="reference"
            :class="{ active3: droughtObj.drought === '中度' }"
            >中度</el-button
          >
          <div class="txt">
            水库水位回落到中度干旱预警线，保证城镇生活用水，逐步限制农业灌溉用水，停止环保生态用水，灌溉期间，加强灌溉用水管理，节约用水。
          </div>
        </el-popover>
        <el-popover placement="bottom" title="重度干旱" trigger="hover">
          <el-button
            slot="reference"
            :class="{ active4: droughtObj.drought === '重度' }"
            >重度</el-button
          >
          <div class="txt">
            水库水位回落到重度干旱预警线，保证城镇生活用水，停止农业、环保生态等其他用水，若水位继续回落到136.4m以下，由市政府协调，向上游八达、游鱼、夏城、磐安的雷滚口等水库调水，补充水源，保证城镇生活用水。
          </div>
        </el-popover>
      </BigPanel>
      <BigPanel title="城镇供水计划" class="top2">
        <template #title>
          <div class="is-big" @click="openChart('城镇供水计划')"></div>
        </template>
        <div id="left-chart1"></div>
      </BigPanel>
      <BigPanel title="灌溉供水计划" class="top3">
        <template #title>
          <div class="is-big" @click="openChart('灌溉供水计划')"></div>
        </template>
        <div id="left-chart2"></div>
      </BigPanel>
      <BigPanel title="入库流量过程" class="top4">
        <template #title>
          <button class="his" @click="hisBtn('入库流量过程')">历史记录</button>
          <div
            class="is-big"
            @click="openChart('入库流量过程', lTop3Arr, lTop3Index)"
          ></div>
        </template>
        <div class="big-panel-btn-box">
          <button
            v-for="(item, index) in lTop3Arr"
            :key="index"
            @click="lTop3Btn(index)"
            :class="{ btnActive: lTop3Index === index }"
          >
            {{ item }}
          </button>
        </div>
        <div id="left-chart3"></div>
      </BigPanel>
    </div>
    <div class="dispatch-right" v-show="isShow" v-loading="pageLoading2">
      <BigPanel title="水位-库容过程线" class="top1">
        <template #title>
          <button class="his" @click="hisBtn('水位-库容过程线')">
            历史记录
          </button>
          <div
            class="is-big"
            @click="openChart('水位-库容过程线', lTop3Arr, rTop1Index)"
          ></div>
        </template>
        <div class="big-panel-btn-box">
          <button
            v-for="(item, index) in lTop3Arr"
            :key="index"
            @click="rTop1Btn(index)"
            :class="{ btnActive: rTop1Index === index }"
          >
            {{ item }}
          </button>
        </div>
        <div id="right-chart1"></div>
      </BigPanel>
      <BigPanel title="水资源调度" class="top2">
        <!-- <template #title>
          <button class="his" @click="waterBtn">详情</button>
          <el-select
            v-model="selectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template> -->
        <div class="box">
          <span>可取用水量</span>
          <p>
            <span>{{ watersupplyData.available_water }}</span
            >万m³
          </p>
        </div>
        <div class="box">
          <span>日取用水量</span>
          <p>
            <span>{{ watersupplyData.sum }}</span
            >万m³
          </p>
        </div>
      </BigPanel>
      <!-- 第一个备用 -->
      <BigPanel title="兴利状态与调度图" class="top3">
        <template #title>
          <!-- 这个先隐藏 -->
          <div
            class="is-big"
            @click="openChart('兴利状态与调度图')"
            style="display: none"
          ></div>
          <button class="his" @click="ruleBtn">兴利调度规则</button>
          <div class="is-big" @click="ruleBtn2"></div>
        </template>
        <div class="box">
          <span>水库水位</span>
          <p>
            <span>{{ Number(droughtObj.level).toFixed(2) }}</span
            >m
          </p>
        </div>
        <div class="box">
          <span>调度状态</span>
          <p>
            <span>{{ droughtObj.dispatch }}</span>
          </p>
        </div>
        <div class="chart-box">
          <div class="c c1">
            <div class="icon"></div>
            正常蓄水位 164m
          </div>
          <div class="c c2">
            <div class="icon"></div>
            台汛限制水位 161m
          </div>
          <div class="c c3">
            <div class="icon"></div>
            防破坏线
          </div>
          <div class="c c4">
            <div class="icon"></div>
            限制供水线
          </div>
          <div class="c c5">
            <div class="icon"></div>
            保证水位线
          </div>
          <!-- <div class="c c11">
            <div class="icon"></div>
            当前水位
          </div> -->
          <div class="c c6">
            <div class="icon"></div>
            130.0m 兴利下限水位
          </div>
          <div class="c c7 left">
            <div class="icon"></div>
            加大供水
          </div>
          <!-- <div class="c c7 right">
            <div class="icon"></div>
            加大供水
          </div> -->
          <div class="c c8">
            <div class="icon"></div>
            正常供水区
          </div>
          <div class="c c9-left">
            <div class="icon"></div>
            限制供水区
          </div>
          <div class="c c9-right">
            <div class="icon"></div>
            限制供水区
          </div>
          <div class="c c10">
            <div class="icon"></div>
            城镇生活供水区
          </div>
          <!-- <div class="eye" @click="eye = !eye">
            调度过程线
            <div class="icon" :class="{ cloEye: !eye }"></div>
          </div> -->
          <div id="rightChart2"></div>
        </div>
      </BigPanel>
      <BigPanel title="兴利状态与调度图" class="top3" v-if="false">
        <template #title>
          <!-- 这个先隐藏 -->
          <div
            class="is-big"
            @click="openChart('兴利状态与调度图')"
            style="display: none"
          ></div>
          <button class="his" @click="ruleBtn">兴利调度规则</button>
          <div class="is-big" @click="ruleBtn2"></div>
        </template>
        <div class="box">
          <span>水库水位</span>
          <p>
            <span>{{ Number(droughtObj.level).toFixed(2) }}</span
            >m
          </p>
        </div>
        <div class="box">
          <span>调度状态</span>
          <p>
            <span>{{ droughtObj.dispatch }}</span>
          </p>
        </div>
        <div class="chart-box">
          <el-select
            class="big-panel-select xldd"
            v-model="year"
            placeholder="请选择"
            multiple
            collapse-tags
            :multiple-limit="5"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="(item, index) in yearOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div id="rightChart2"></div>
          <div id="rightChart3"></div>
        </div>
      </BigPanel>
    </div>
    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div id="big-chart"></div>
    </BigChart>
    <BigChart :show="chartShow2" @close-dialog="closeChart" :title="chartTitle">
      <div class="big-chart-btn-box">
        <button
          v-for="(item, index) in bigChartBtnArr"
          :key="index"
          :class="{ active: bigChartBtnIndex === index }"
          @click="bigChartBtn(index)"
        >
          {{ typeof item === "object" ? item.label : item }}
        </button>
      </div>
      <div id="big-chart2"></div>
    </BigChart>
    <BigChart
      :show="hisShow"
      @close-dialog="closeChartHis"
      :title="chartTitle"
      class="his-dialog"
    >
      <!-- 表单 -->
      <el-form :model="formData" ref="form">
        <el-form-item label="时间选择：">
          <el-date-picker
            v-model="formData.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :editable="false"
            popper-class="el-picker-panel1"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <button @click.prevent="daochu" class="daochu">导出</button>
        </el-form-item>
      </el-form>
      <div class="list" v-loading="hisLoading">
        <div class="title">
          <p>监测时间</p>
          <p>水位/m</p>
          <p>库容/m³</p>
          <p>入库流量 m³/s</p>
          <p>出库流量 m³/s</p>
          <p>设备状态</p>
        </div>
        <div class="content webkit-scroll-line">
          <div class="box" v-for="(item, index) in paginationData" :key="index">
            <p>{{ item.record_date }}</p>
            <p>{{ item.water_level_value }}</p>
            <p>{{ item.storage_capacity }}</p>
            <p>{{ item.inflow }}</p>
            <p>{{ item.outflow }}</p>
            <p>正常</p>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="paginationObj.limit"
        :total="paginationObj.total"
        :pager-count="7"
        :current-page="paginationObj.page"
        layout="prev, pager, next, jumper, ->, slot"
        prev-text="上一页"
        next-text="下一页"
        @current-change="changePage"
      >
        <span class="record"
          >本页&nbsp;{{ paginationData.length }}&nbsp;条，共&nbsp;{{
            paginationObj.total
          }}&nbsp;条记录</span
        >
      </el-pagination>
    </BigChart>
    <!-- 水资源调度详情 -->
    <BigChart
      :show="waterShow"
      @close-dialog="closeWaterD"
      title="水资源调度"
      class="chart-show2"
    >
      <!-- 表单 -->
      <el-form :model="formData" ref="form">
        <el-form-item label="时间选择：">
          <el-date-picker
            v-model="formData.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            :editable="false"
            popper-class="el-picker-panel1"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <button
            @click.prevent="waterSmallBtn(0)"
            class="chart-icon"
            :class="{ active: waterBtnIndex === 0 }"
          ></button>
          <button
            @click.prevent="waterSmallBtn(1)"
            class="mess-list"
            :class="{ active: waterBtnIndex === 1 }"
          ></button>
        </el-form-item>
      </el-form>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" @tab-click="elTabBtn">
        <template #title></template>
        <el-tab-pane label="当前" name="now">
          <div class="list-box webkit-scroll-line" v-show="waterBtnIndex === 1">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
            <div class="box">
              <span>供水</span>
              <p><span>200</span>万m³</p>
            </div>
            <div class="box">
              <span>灌溉</span>
              <p><span>100</span>万m³</p>
            </div>
            <div class="box">
              <span>生态</span>
              <p><span>200</span>万m³</p>
            </div>
            <div class="box">
              <span>发电</span>
              <p><span>300</span>万m³</p>
            </div>
            <div class="box">
              <span>蒸发</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div class="mess-box" v-show="waterBtnIndex === 0">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div
            class="chart"
            id="waterChart1"
            v-show="waterBtnIndex === 0"
          ></div>
        </el-tab-pane>
        <el-tab-pane label="历史" name="his">
          <div class="mess-box">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div class="chart" id="waterChart2"></div>
        </el-tab-pane>
        <el-tab-pane label="未来 1 天" name="future1">
          <div class="mess-box">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div class="chart" id="waterChart3"></div>
        </el-tab-pane>
        <el-tab-pane label="未来 2 天" name="future2">
          <div class="mess-box">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div class="chart" id="waterChart4"></div>
        </el-tab-pane>
        <el-tab-pane label="未来 3 天" name="future3">
          <div class="mess-box">
            <div class="box">
              <span>可取用水量</span>
              <p><span>1000</span>万m³</p>
            </div>
            <div class="box">
              <span>日取用水量</span>
              <p><span>100</span>万m³</p>
            </div>
          </div>
          <div class="chart" id="waterChart5"></div>
        </el-tab-pane>
      </el-tabs>
    </BigChart>
    <!-- 兴利调度规则 -->
    <BigChart
      v-if="ruleShow"
      :show="ruleShow"
      @close-dialog="closeRules"
      title="兴利调度规则"
      class="chart-show-rules"
    >
      <div class="title">
        <p>时间</p>
        <p>防破坏线</p>
        <p>轻度干旱情况<br />限制供水线</p>
        <p>中度干旱预警<br />限制供水与生活供水保证的均值</p>
        <p>重度干旱预警<br />城镇生活供水保证线</p>
      </div>
      <div class="content webkit-scroll-line">
        <div class="box" v-for="(item, index) in xingLiData" :key="index">
          <p>{{ transDate(item.plan_date) }}</p>
          <p>{{ Number(item.vandalism_line).toFixed(2) }}</p>
          <p>{{ Number(item.water_supply_line).toFixed(2) }}</p>
          <p>{{ Number(item.mean_value_line).toFixed(2) }}</p>
          <p>{{ Number(item.guarantee_line).toFixed(2) }}</p>
        </div>
      </div>
    </BigChart>
    <!-- 兴利调度规则 图表放大 -->
    <!-- 第一个隐藏备用 -->
    <BigChart
      :show="ruleChartShow"
      @close-dialog="closeRuleChart"
      title="兴利状态与调度图"
      class="chart-show3"
    >
      <div class="mess-box" v-show="waterBtnIndex === 0">
        <div class="box">
          <span>水库水位</span>
          <p>
            <span>{{ Number(droughtObj.level).toFixed(2) }}</span
            >&nbsp;m
          </p>
        </div>
        <div class="box">
          <span>调度状态</span>
          <p>
            <span>{{ droughtObj.dispatch }}</span>
          </p>
        </div>
      </div>
      <div class="rightChart2-box">
        <div class="c c1">
          <div class="icon"></div>
          正常蓄水位 164m
        </div>
        <div class="c c2">
          <div class="icon"></div>
          台汛限制水位 161m
        </div>
        <div class="c c3">
          <div class="icon"></div>
          防破坏线
        </div>
        <div class="c c4">
          <div class="icon"></div>
          限制供水线
        </div>
        <div class="c c5">
          <div class="icon"></div>
          保证水位线
        </div>
        <div class="c c6">
          <div class="icon"></div>
          130.0m 兴利下限水位
        </div>
        <div class="c c7 left">
          <div class="icon"></div>
          加大供水
        </div>
        <div class="c c7 right">
          <div class="icon"></div>
          加大供水
        </div>
        <div class="c c8">
          <div class="icon"></div>
          正常供水区
        </div>
        <div class="c c9-left">
          <div class="icon"></div>
          限制供水区
        </div>
        <div class="c c9-right">
          <div class="icon"></div>
          限制供水区
        </div>
        <div class="c c10">
          <div class="icon"></div>
          城镇生活供水区
        </div>
        <!-- <div class="eye" @click="eye = !eye">
          调度过程线
          <div class="icon" :class="{ cloEye: !eye }"></div>
        </div> -->
        <div id="rightChart2-copy"></div>
      </div>
    </BigChart>
    <BigChart
      :show="ruleChartShow"
      @close-dialog="closeRuleChart"
      title="兴利状态与调度图"
      class="chart-show3"
      v-if="false"
    >
      <div class="mess-box" v-show="waterBtnIndex === 0">
        <div class="box">
          <span>水库水位</span>
          <p>
            <span>{{ Number(droughtObj.level).toFixed(2) }}</span
            >&nbsp;m
          </p>
        </div>
        <div class="box">
          <span>调度状态</span>
          <p>
            <span>{{ droughtObj.dispatch }}</span>
          </p>
        </div>
      </div>
      <div class="rightChart2-box">
        <el-select
          class="big-panel-select xldd"
          v-model="year2"
          placeholder="请选择"
          multiple
          collapse-tags
          :multiple-limit="5"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, index) in yearOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div id="rightChart2-copy"></div>
        <div id="rightChart3-copy"></div>
      </div>
    </BigChart>
    <!-- 兴利调度方案 -->
    <BigChart
      class="xlfa-dialog"
      :show="xlfaShow"
      @close-dialog="xlfaClose"
      title="兴利调度方案"
    >
      <div class="box1">
        <div class="box">
          <div class="title">现状水位</div>
          <p class="txt">
            {{
              Number($store.state.reservoirRealData.water_level_value).toFixed(
                2
              )
            }}<span>&nbsp;m</span>
          </p>
        </div>
        <div class="box">
          <div class="title">可用水量</div>
          <p class="txt">
            {{ Number(watersupplyData.available_water).toFixed(2)
            }}<span>&nbsp;万m³</span>
          </p>
        </div>
        <div class="box">
          <div class="title">未来15天来水量</div>
          <p class="txt">
            {{ Number(watersupplyData.forecast_flowin_water).toFixed(2)
            }}<span>&nbsp;万m³</span>
          </p>
        </div>
      </div>
      <div class="table">
        <div class="title">
          <div class="column">兴利工况</div>
          <div class="column teshu">
            <span>东阳供水</span><span>（万m³）</span>
          </div>
          <div class="column teshu">
            <span>义乌供水</span><span>（万m³）</span>
          </div>
          <div class="column teshu">
            <span>灌溉供水</span><span>（万m³）</span>
          </div>
          <div class="column teshu">
            <span>生态流量</span><span>（万m³）</span>
          </div>
          <div class="column">可供水天数</div>
          <div class="column">操作/建议</div>
        </div>
        <div class="list">
          <div class="row">
            <div class="column">控运计划</div>
            <div class="column">
              {{ Number(xingLiFa1.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa1.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa1.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa1.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa1.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa1.tips ? xingLiFa1.tips : "无" }}
            </div>
          </div>
          <!-- <div class="row">
            <div class="column">二十年一遇旱情</div>
            <div class="column">
              {{ Number(xingLiFa1.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa1.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa1.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa1.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa1.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa1.tips ? xingLiFa1.tips : "无" }}
            </div>
          </div>
          <div class="row">
            <div class="column">五十年一遇旱情</div>
            <div class="column">
              {{ Number(xingLiFa1.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa1.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa1.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa1.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa1.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa1.tips ? xingLiFa1.tips : "无" }}
            </div>
          </div>
          <div class="row">
            <div class="column">一百年一遇旱情</div>
            <div class="column">
              {{ Number(xingLiFa1.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa1.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa1.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa1.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa1.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa1.tips ? xingLiFa1.tips : "无" }}
            </div>
          </div>
          <div class="row">
            <div class="column">最低年限</div>
            <div class="column">
              {{ Number(xingLiFa1.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa1.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa1.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa1.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa1.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa1.tips ? xingLiFa1.tips : "无" }}
            </div>
          </div> -->
          <div class="row tjfz" @click.stop="openDetail(1)">
            <div class="column">推荐方案</div>
            <div class="column">
              {{ Number(xingLiFa2.dongYang).toFixed(2) }}
            </div>
            <div class="column">{{ Number(xingLiFa2.yiWu).toFixed(2) }}</div>
            <div class="column">{{ Number(xingLiFa2.guanGai).toFixed(2) }}</div>
            <div class="column">
              {{ Number(xingLiFa2.shengTai).toFixed(2) }}
            </div>
            <div class="column">
              {{ Number(xingLiFa2.totalDay).toFixed(0) }}
            </div>
            <div class="column tip">
              {{ xingLiFa2.tips ? xingLiFa2.tips : "无" }}
            </div>
          </div>
          <div class="row tjfz" @click.stop="openDetail(2)">
            <el-form :model="xLformData" :rules="xLformRules" ref="xLform">
              <el-form-item>自定义方案</el-form-item>
              <el-form-item prop="dongYang">
                <el-input
                  @input="xlInput(1, xLformData.dongYang)"
                  v-model="xLformData.dongYang"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="yiWu">
                <el-input
                  @input="xlInput(2, xLformData.yiWu)"
                  v-model="xLformData.yiWu"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="guanGai">
                <el-input
                  @input="xlInput(3, xLformData.guanGai)"
                  v-model="xLformData.guanGai"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="shengTai">
                <el-input
                  @input="xlInput(4, xLformData.shengTai)"
                  v-model="xLformData.shengTai"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="level">{{
                waterDay !== "" ? waterDay : "请点击计算"
              }}</el-form-item>
              <el-form-item>
                <el-button
                  class="calc"
                  :loading="formDataCalcLoading"
                  @click.stop="formDataCalc"
                >
                  计算
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </BigChart>
    <Process2 :hqyjczShow="hqyjczShow" @hqyjcz-close="hqyjczClose" />
    <BigChart
      class="detail-dialog"
      :show="lookShow"
      @close-dialog="closeLookShow"
      title="详情"
    >
      <div class="content">
        <div class="row">
          <div class="left">日均义乌供水</div>
          <div class="right">
            <h4>{{ detailData.yw }}</h4>
            <span>万m³</span>
          </div>
        </div>
        <div class="row">
          <div class="left">日均东阳供水</div>
          <div class="right">
            <h4>{{ detailData.dy }}</h4>
            <span>万m³</span>
          </div>
        </div>
        <div class="row">
          <div class="left">灌溉用水影响区域</div>
          <div class="right">
            {{ detailData.gg }}
          </div>
        </div>
        <div class="row">
          <div class="left">生态用水影响区域</div>
          <div class="right">
            {{ detailData.st }}
          </div>
        </div>
        <div class="row">
          <div class="left">相关网络员</div>
          <div class="right">
            {{ detailData.wgy }}
          </div>
        </div>
      </div>
    </BigChart>
    <!-- 灌溉水量统计 -->
    <BigChart
      :show="ggsltjShow"
      @close-dialog="ggsltjClose"
      title="灌溉水量统计"
      class="ggsl-dialog"
    >
      <table class="ggsl-table" border>
        <caption>
          2022年横锦灌区灌溉水量统计
        </caption>
        <thead>
          <tr>
            <th class="column">次序</th>
            <th class="column">日期</th>
            <th class="column">持续天数</th>
            <th class="column">
              <p>水量（万方）</p>
              <p>
                <span>南干渠</span>
                <span>北干渠</span>
                <span>合计</span>
              </p>
            </th>
            <th class="column">月份</th>
            <th class="column">按月统计</th>
            <th class="column">调度令</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableList" :key="index">
            <td class="column">第{{ item.lun }}轮次</td>
            <td class="column">{{ item.date }}</td>
            <td class="column">{{ item.day }}</td>
            <td class="column">
              <div class="span-box">
                <span>{{ item.water_all.south }}</span>
                <span>{{ item.water_all.north }}</span>
                <span>{{ item.water_all.count }}</span>
              </div>
            </td>
            <td class="column">{{ item.month }}</td>
            <td class="column">{{ item.month_all }}</td>
            <td
              class="column"
              :class="{ bg: item.ddl }"
              :style="{ cursor: item.ddl ? 'pointer' : 'default' }"
              @click="ddlDetail(item.ddl, index)"
            >
              {{ item.ddl ? "调度令详情" : "" }}
            </td>
          </tr>
          <tr>
            <td class="column">合计</td>
            <td class="column"></td>
            <td class="column">{{ tableObj.day_calc }}</td>
            <td class="column">
              <div class="span-box">
                <span>{{ tableObj.water_calc.south }}</span>
                <span>{{ tableObj.water_calc.north }}</span>
                <span>{{ tableObj.water_calc.count }}</span>
              </div>
            </td>
            <td class="column"></td>
            <td class="column">{{ tableObj.month_all_calc }}</td>
            <td class="column"></td>
          </tr>
        </tbody>
      </table>
    </BigChart>
    <BigChart
      :show="ddlPdfShow"
      @close-dialog="ddlPdfClose"
      title="调度令详情"
      class="ddl-dialog"
      :key="pdfUrl"
    >
      <div class="img-box">
        <img :src="pdfUrl" />
      </div>
    </BigChart>
  </div>
</template>

<script>
import { getDroughtApi, getXingLiApi, getCityWaterApi, getRealGgWaterApi, getPlanGgWaterApi, getHisFlowInApi, getWatersupplyApi, getXingLiFa1Api, getXingLiFa2Api, getXingLiFa3Api, getYearlistApi } from '@/api/operate.js'
import { getFutureFlowInApi } from '@/api/flood.js'
import { getReservoirRealApi } from '@/api/reservoir.js'
import Process2 from './process2.vue'
import pdfUrl2 from '@/assets/pdf_img/2.png'
import pdfUrl3 from '@/assets/pdf_img/3.png'
import pdfUrl4 from '@/assets/pdf_img/4.png'
import pdfUrl5 from '@/assets/pdf_img/5.png'
import pdfUrl6 from '@/assets/pdf_img/6.png'
import pdfUrl7 from '@/assets/pdf_img/7.png'
import pdfUrl8 from '@/assets/pdf_img/8.png'
import pdfUrl9 from '@/assets/pdf_img/9.png'
export default {
  name: 'WaterDispatch',
  components: {
    Process2
  },
  created () {
    const fn = () => {
      this.tableList.forEach(item => {
        this.tableObj.day_calc += item.day
        this.tableObj.water_calc.south += Number(item.water_all.south)
        this.tableObj.water_calc.north += Number(item.water_all.north)
        this.tableObj.water_calc.count += Number(item.water_all.count)
        this.tableObj.month_all_calc += Number(item.month_all)
      })
      this.tableObj.day_calc = this.tableObj.day_calc.toFixed(0)
      this.tableObj.water_calc.south = this.tableObj.water_calc.south.toFixed(1)
      this.tableObj.water_calc.north = this.tableObj.water_calc.north.toFixed(1)
      this.tableObj.water_calc.count = this.tableObj.water_calc.count.toFixed(1)
      this.tableObj.month_all_calc = this.tableObj.month_all_calc.toFixed(1)
    }
    fn()
    console.log(this.tableObj)
    this.pageLoading1 = true
    this.pageLoading2 = true
    window.addEventListener('resize', this.resizeChart)
  },
  async mounted () {
    await this.http1()
    this.pageLoading1 = false
    this.pageLoading2 = false
    this.initChart()
  },
  destroyed () {
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  },
  data () {
    const inputNumber = (rule, value, callback) => {
      if (Number(value) !== 0 && !Number(value)) {
        callback(new Error('请输入纯数字'))
      } else if (Number(value) < 0) {
        callback(new Error('请输入>= 0 的数字'))
      } else {
        callback()
      }
    }
    return {
      ddlPdfShow: false,
      pdfUrl: '',
      pdf_img_obj: [
        pdfUrl2,
        pdfUrl3,
        pdfUrl4,
        pdfUrl5,
        pdfUrl6,
        pdfUrl7,
        pdfUrl8,
        pdfUrl9
      ],
      tableObj: {
        day_calc: 0,
        water_calc: {
          south: 0,
          north: 0,
          count: 0
        },
        month_all_calc: 0
      },
      tableList: [
        //   {
        //   date: '02月14日',
        //   day: 2,
        //   water_all: {
        //     south: 0,
        //     north: 28,
        //     count: 28
        //   },
        //   month: 2,
        //   month_all: 28,
        //   ddl: false
        // }, {
        //   date: '04月15日',
        //   day: 3,
        //   water_all: {
        //     south: 86,
        //     north: 82.4,
        //     count: 168.4
        //   },
        //   month: 4,
        //   month_all: 168.4,
        //   ddl: true
        // }, {
        //   date: '05月07日',
        //   day: 3,
        //   water_all: {
        //     south: 104,
        //     north: 91.7,
        //     count: 195.7
        //   },
        //   month: 5,
        //   month_all: 195.7,
        //   ddl: true
        // }, {
        //   date: '07月01日',
        //   day: 4,
        //   water_all: {
        //     south: 135,
        //     north: 113.6,
        //     count: 248.6
        //   },
        //   month: 7,
        //   month_all: '',
        //   ddl: true
        // }, {
        //   date: '07月11日',
        //   day: 5,
        //   water_all: {
        //     south: 210.1,
        //     north: 182.6,
        //     count: 392.7
        //   },
        //   month: 7,
        //   month_all: '',
        //   ddl: true
        // }, {
        //   date: '07月25日',
        //   day: 4,
        //   water_all: {
        //     south: 155.3,
        //     north: 163.8,
        //     count: 319.1
        //   },
        //   month: 7,
        //   month_all: 960.4,
        //   ddl: true
        // },
        {
          lun: 7,
          date: '08月08日',
          day: 4,
          water_all: {
            south: 177.4,
            north: 207.2,
            count: 384.6
          },
          month: 8,
          month_all: '',
          ddl: true
        }, {
          lun: 8,
          date: '08月23日',
          day: 3,
          water_all: {
            south: 142.4,
            north: 125.8,
            count: 268.2
          },
          month: 8,
          month_all: 652.8,
          ddl: true
        }, {
          lun: 9,
          date: '09月28日',
          day: 3,
          water_all: {
            south: 102,
            north: 95,
            count: 197
          },
          month: 8,
          month_all: 197,
          ddl: true
        }],
      detailData: {
        yw: 22,
        dy: 16,
        gg: '东阳江镇、歌山镇',
        st: '东阳江镇',
        wgy: '茜畴村（叶放新）、上陈村（冯先锋）、林头村（何爱珍）、尚侃村（金长法）'
      },
      // 图表
      leftChart1: null,
      leftChart2: null,
      leftChart3: null,
      rightChart1: null,
      rightChart2: null,
      rightChart3: null,
      rightChart2Copy: null,
      rightChart3Copy: null,
      bigChart: null,
      bigChart2: null,
      // 灌溉水量统计
      ggsltjShow: false,
      // 兴利状态与调度图
      year: [],
      year2: [],
      yearObj: {},
      // 第二弹窗
      lookShow: false,
      // 下拉选择
      yearOptions: [],
      // 旱情预警处置
      hqyjczShow: false,
      formDataCalcLoading: false,
      waterDay: '',
      xLformData: {
        level: '',
        dongYang: '',
        yiWu: '',
        guanGai: '',
        shengTai: ''
      },
      xLformRules: {
        dongYang: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: inputNumber, trigger: 'blur' }
        ],
        yiWu: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: inputNumber, trigger: 'blur' }
        ],
        guanGai: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: inputNumber, trigger: 'blur' }
        ],
        shengTai: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: inputNumber, trigger: 'blur' }
        ]
      },
      // 实时水位
      reservoirRealData: {},
      // 兴利三个方案
      xingLiFa1: {},
      xingLiFa2: {},
      // 水资源调度
      watersupplyData: {},
      // 水位库容过程线
      waterCapacity: {
        waterLevel: [],
        capacity: []
      },
      hisLoading: false,
      // 入库流量历史记录和水位-库容过程线的弹窗
      paginationObj: {
        limit: 12, // 每页显示多少条
        total: 0, // 总数据量
        page: 1, // 当前在第几页,
        start_date: '',
        end_date: ''
      },
      paginationData: [],
      // 入库流量过程
      flowInData: {},
      // 水位-库容过程线
      waterKuData: {},
      // 灌溉供水
      ggWaterData: {},
      // 城市供水计划
      cityWaterData: [],
      // loading
      pageLoading1: false,
      pageLoading2: false,
      // 旱情预警
      droughtIndex: 0,
      droughtObj: {},
      // 兴利调度规则
      ruleChartShow: false,
      xlfaShow: false,
      ruleShow: false,
      xingLiData: [],
      xingLiObj: {
        vandalism_line: [],
        water_supply_line: [],
        mean_value_line: [],
        guarantee_line: [],
        plan_date: [],
        real_data: []
      },
      // 水资源调度弹窗
      activeName: 'now',
      waterShow: false,
      waterBtnIndex: 0,
      // 表单
      formData: {
        date: []
      },
      // formRules: {
      //   date: [
      //     { required: true, message: '请选择日期', trigger: 'blur' }
      //   ]
      // },
      // 历史记录弹层
      hisShow: false,
      // lt1content1: '水库水位回落到轻度干旱预警线后，保证城镇生活、农业灌溉等用水，逐步限制环保生态等用水，下游环保生态用水量由水库水电运行中心提出调度建议，报东阳市水务局审批，水库运行中心按审批意见执行。',
      // 弹层
      reset: true,
      chartTitle: '图表',
      chartShow: false,
      chartShow2: false,
      bigChartBtnArr: [],
      bigChartBtnIndex: 0,
      c: 0,
      // 入库流量过程
      lTop3Index: 2,
      lTop3Arr: ['历史', '未来7天', '未来15天'],
      // 水位-库容过程线
      rTop1Index: 2,
      //
      eye: true,
      isShow: true,
      selectValue: '1',
      options1: [{
        value: '1',
        label: '监测点 1'
      }, {
        value: '2',
        label: '监测点 2'
      }, {
        value: '3',
        label: '监测点 3'
      }],
      options2: [{
        value: '1',
        label: '未来1天'
      }, {
        value: '2',
        label: '未来3天'
      }, {
        value: '3',
        label: '未来5天'
      }, {
        value: '4',
        label: '未来7天'
      }],
      //
      lineIcon: 1,
      lTop4Index: 0,
      leftTop2Arr1: ['I 类', 'II 类', 'III 类'],
      leftTop2Arr2: [
        {
          title: 'pH',
          content: '9.09'
        },
        {
          title: '浊度(NTU)',
          content: '2'
        },
        {
          title: '温度(℃)',
          content: '25'
        },
        {
          title: '溶解氧(mg/L)',
          content: '6.42'
        },
        {
          title: '高锰酸钾指数',
          content: '1.36'
        },
        {
          title: '氨氮(ug/L)',
          content: '6'
        },
        {
          title: '总磷(ug/L)',
          content: '7.09'
        },
        {
          title: '总氮(mg/L)',
          content: '7.09'
        }
      ]
    }
  },
  methods: {
    closeLookShow () {
      this.lookShow = false
    },
    openDetail (num) {
      if (num === 1) {
        this.detailData = {
          yw: 22,
          dy: 16,
          gg: '东阳江镇、歌山镇',
          st: '东阳江镇',
          wgy: '茜畴村（叶放新）、上陈村（冯先锋）、林头村（何爱珍）、尚侃村（金长法）'
        }
        this.lookShow = true
      } else if (num === 2) {
        // if (this.waterDay === '') {
        //   this.$message('请先点击计算')
        //   return
        // }
        // this.lookShow = true
      }
    },
    initChart () {
      this.initLeftChart1(this.cityWaterData)
      this.initLeftChart2(this.ggWaterData)
      this.initLeftChart3(this.lTop3Index)
      this.initRightChart1(this.waterKuData.x[2], this.waterKuData.y[2])
      this.initRightChart2(this.xingLiObj)
      this.yearChartChange()
    },
    resizeChart () {
      if (this.leftChart1) this.leftChart1.resize()
      if (this.leftChart2) this.leftChart2.resize()
      if (this.leftChart3) this.leftChart3.resize()
      if (this.rightChart1) this.rightChart1.resize()
      if (this.rightChart2) this.rightChart2.resize()
      if (this.rightChart3) this.rightChart3.resize()
      if (this.chartShow) this.bigChart.resize()
      if (this.chartShow2) this.bigChart2.resize()
    },
    disposeChart () {
      if (this.leftChart1) this.leftChart1.dispose()
      if (this.leftChart2) this.leftChart2.dispose()
      if (this.leftChart3) this.leftChart3.dispose()
      if (this.rightChart1) this.rightChart1.dispose()
      if (this.rightChart2) this.rightChart2.dispose()
      if (this.rightChart3) this.rightChart3.dispose()
      if (this.bigChart) this.bigChart.dispose()
      if (this.bigChart2) this.bigChart2.dispose()
    },
    async http1 () {
      await this.$store.dispatch('getReservoirRealAction')
      try {
        if (this.$store.state.yearObj[1989]) {
          const [res1, res2, res3, res4, res5, res6, res7, res8] = await Promise.all([
            // 旱情预警 兴利状态与调度图
            getDroughtApi(),
            // 兴利状态与调度图
            getXingLiApi(),
            // 城镇供水计划
            getCityWaterApi(),
            // 实际灌溉供水
            getRealGgWaterApi(),
            getPlanGgWaterApi(),
            // 水库入库流量 入库流量过程
            getHisFlowInApi({
              limit: 10000
            }),
            getFutureFlowInApi(this.$store.state.reservoirRealData.water_level_value),
            getWatersupplyApi()
          ])
          // 旱情预警 兴利状态与调度图
          console.log('旱情预警', res1)
          this.droughtObj = res1
          // 兴利状态与调度图
          this.getXingLiData(res2)
          // 城镇供水计划
          console.log('城镇供水计划', res3)
          this.cityWaterData = res3
          // 实际灌溉供水
          this.getGgWaterData(res4, res5)
          //  入库流量过程
          this.getFlowInData(res6, res7)
          // 水资源调度
          this.getWatersupplyData(res8)
          // 兴利状态与调度图
          console.log('兴利状态与调度图', this.$store.state.yearObj)
          this.yearObj = this.$store.state.yearObj
          this.getYearList(this.yearObj)
        } else {
          const [res1, res2, res3, res4, res5, res6, res7, res8, res9] = await Promise.all([
            // 旱情预警 兴利状态与调度图
            getDroughtApi(),
            // 兴利状态与调度图
            getXingLiApi(),
            // 城镇供水计划
            getCityWaterApi(),
            // 实际灌溉供水
            getRealGgWaterApi(),
            getPlanGgWaterApi(),
            // 水库入库流量 入库流量过程
            getHisFlowInApi({
              limit: 10000
            }),
            getFutureFlowInApi(this.$store.state.reservoirRealData.water_level_value),
            getWatersupplyApi(),
            getYearlistApi({
              start_date: '1989-01-01',
              end_date: this.dayjs().format('YYYY-MM-DD')
            })
          ])
          // 旱情预警 兴利状态与调度图
          console.log('旱情预警', res1)
          this.droughtObj = res1
          // 兴利状态与调度图
          this.getXingLiData(res2)
          // 城镇供水计划
          console.log('城镇供水计划', res3)
          this.cityWaterData = res3
          // 实际灌溉供水
          this.getGgWaterData(res4, res5)
          //  入库流量过程
          this.getFlowInData(res6, res7)
          // 水资源调度
          this.getWatersupplyData(res8)
          // 兴利状态与调度图
          console.log('兴利状态与调度图', res9)
          this.$store.commit('setYearObj', res9.yearList)
          this.yearObj = this.$store.state.yearObj
          this.getYearList(this.yearObj)
        }
      } catch (error) {
        console.log(error)
        this.pageLoading1 = false
        this.pageLoading2 = false
      }
    },
    // 兴利调度方案自定义输入
    xlInput (flag, value) {
      if (Number(value)) {
        const reg = /^\d*\.{0,1}\d{0,2}$/
        if (!reg.test(value)) {
          if (flag === 1) {
            this.xLformData.dongYang = Number(this.xLformData.dongYang).toFixed(2)
          } else if (flag === 2) {
            this.xLformData.yiWu = Number(this.xLformData.yiWu).toFixed(2)
          } else if (flag === 3) {
            this.xLformData.guanGai = Number(this.xLformData.guanGai).toFixed(2)
          } else if (flag === 4) {
            this.xLformData.shengTai = Number(this.xLformData.shengTai).toFixed(2)
          }
        }
      }
    },
    // initChart () {
    //   this.initLineChartDemo1()
    // },
    // resizeChart () {
    //   if (this.lineChartDemo1) this.lineChartDemo1.resize()
    // },
    // disposeChart () {
    //   if (this.lineChartDemo1) this.lineChartDemo1.dispose()
    // },

    // 兴利状态与调度图 年份
    yearChartChange () {
      // console.log(this.year)
      // console.log(this.yearObj)

      if (this.ruleChartShow) {
        const obj = {
          lengthArr: this.year2,
          seriesArr: [],
          xArr: this.yearObj.xArr
        }
        // const color = ['#7030a0', '#1da3b3', '#1b17b9', '#b218b8', '#868947']
        this.year2.forEach((item1, index1) => {
          const i = this.yearObj.lengthArr.findIndex(item2 => item2 === item1)
          // obj.seriesArr.push(this.yearObj.seriesArr[i])
          obj.seriesArr.push({
            name: item1,
            data: this.yearObj.seriesArr[i],
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: color[index1],
              type: item1 === this.dayjs().format('YYYY') ? 'solid' : 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          })
        })
        console.log('查看echarts兴利调度', obj)
        this.initRightChart3Copy(obj)
      } else {
        const obj = {
          lengthArr: this.year,
          seriesArr: [],
          xArr: this.yearObj.xArr
        }
        // const color = ['#7030a0', '#1da3b3', '#1b17b9', '#b218b8', '#868947']
        this.year.forEach((item1, index1) => {
          const i = this.yearObj.lengthArr.findIndex(item2 => item2 === item1)
          // obj.seriesArr.push(this.yearObj.seriesArr[i])
          obj.seriesArr.push({
            name: item1,
            data: this.yearObj.seriesArr[i],
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              // color: color[index1],
              type: item1 === this.dayjs().format('YYYY') ? 'solid' : 'dashed'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          })
        })
        console.log('查看echarts兴利调度', obj)
        this.initRightChart3(obj)
      }
    },
    getYearList (res) {
      // 处理源数据,去掉2月29日
      for (const key in res) {
        if (res[key].length > 365) {
          res[key].splice(59, 1)
        }
      }
      const lengthArr = Object.keys(res)
      console.log('查看图例', lengthArr)
      const xArr = []
      for (let i = 0; i < 365; i++) {
        xArr.push(this.dayjs('2022-01-01').add(i, 'day').format('MM-DD'))
      }
      console.log('查看x轴', xArr)
      const obj = {
        lengthArr,
        xArr,
        seriesArr: []
      }
      let num = 0
      for (const key in res) {
        obj.seriesArr[num] = []
        res[key].forEach(item => {
          obj.seriesArr[num].push(Number(item.level).toFixed(2))
        })
        num++
      }
      this.yearObj = obj
      // 放入下拉列表
      this.year = [
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 1],
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 2]
      ]
      this.year2 = [
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 1],
        this.yearObj.lengthArr[this.yearObj.lengthArr.length - 2]
      ]
      this.yearObj.lengthArr.reverse()
      this.yearObj.seriesArr.reverse()

      this.yearObj.lengthArr.forEach(item => {
        this.yearOptions.push({
          value: item,
          label: item
        })
      })
      console.log('查看所有年汇集的Obj', this.yearObj)
      // this.yearOptions.reverse()
      // this.yearOptions[0].disabled = true
    },
    // 关闭旱情预警处置弹窗
    hqyjczClose () {
      this.hqyjczShow = false
    },
    async formDataCalc () {
      console.log(this.xLformData)
      this.xLformData.level = Number(this.$store.state.reservoirRealData.water_level_value)
      this.formDataCalcLoading = true
      try {
        await this.$refs.xLform.validate()
        console.log('校验通过')
        const res = await getXingLiFa3Api(this.xLformData)
        console.log('兴利调度方案自定义结果', res)
        this.waterDay = res
      } catch (error) {
        console.log(error)
      }
      this.formDataCalcLoading = false
    },
    async getReservoirRealData () {
      const res1 = await getReservoirRealApi()
      console.log('实时水位', res1)
      this.reservoirRealData = res1
    },
    async getXingLiFaData () {
      const res2 = await Promise.all([getXingLiFa1Api(Number(this.$store.state.reservoirRealData.water_level_value)), getXingLiFa2Api(Number(this.$store.state.reservoirRealData.water_level_value))])
      console.log('两个方案', res2)
      this.xingLiFa1 = res2[0]
      this.xingLiFa2 = res2[1]
      this.xLformData = {
        level: '',
        dongYang: Number(this.xingLiFa2.dongYang).toFixed(2),
        yiWu: Number(this.xingLiFa2.yiWu).toFixed(2),
        guanGai: Number(this.xingLiFa2.guanGai).toFixed(2),
        shengTai: Number(this.xingLiFa2.shengTai).toFixed(2)
      }
    },
    // 水资源调度
    async getWatersupplyData (res) {
      console.log('水资源调度', res)
      res.available_water = Number(res.available_water).toFixed(2)
      this.watersupplyData = res
    },
    // 未来入库流量转化
    transFlowInEcharts (obj) {
      const x = []
      const y = []
      const resArr = Object.values(obj)
      resArr.forEach((item, index) => {
        const xArr = []
        const yArr = []
        item.forEach(item2 => {
          xArr.push(item2.date)
          yArr.push(item2.flowIn)
        })
        x.push(xArr)
        y.push(yArr)
      })
      return { x, y }
    },
    // 未来水位-库容转化
    transWaterKuEcharts (obj) {
      const x = []
      const y = []
      const resArr = Object.values(obj)
      resArr.forEach((item, index) => {
        const xArr = []
        const yObj = {
          water: [],
          ku: []
        }
        item.forEach(item2 => {
          xArr.push(item2.date)
          yObj.water.push(item2.level)
          yObj.ku.push(item2.storage)
        })
        x.push(xArr)
        y.push(yObj)
      })
      return { x, y }
    },
    // 入库流量过程
    async getFlowInData (res1, res2) {
      console.log('历史入库流量过程', res1)
      console.log('未来入库流量', res2)
      // 入库流量过程数据处理
      const hisObj = {
        date: [],
        val: []
      }
      const hisObj2 = {
        date: [],
        water: [],
        capacity: []
      }
      res1.data.forEach(item => {
        hisObj.date.push(item.create_time)
        hisObj.val.push(item.inflow)
        hisObj2.date.push(item.create_time)
        hisObj2.water.push(item.eight_water_level)
        hisObj2.capacity.push(item.storage_capacity)
      })
      console.log('查看水位库容历史', hisObj2)
      const res3 = this.transFlowInEcharts(res2)
      res3.x.unshift(hisObj.date)
      res3.y.unshift(hisObj.val)
      res3.x.splice(1, 3)
      res3.y.splice(1, 3)
      console.log('入库流量过程', res3)
      this.flowInData = res3
      // 生成水位库容数据对象
      const res4 = this.transWaterKuEcharts(res2)
      res4.x.splice(0, 3)
      res4.y.splice(0, 3)
      res4.x.unshift(hisObj2.date)
      res4.y.unshift({
        water: hisObj2.water,
        ku: hisObj2.capacity
      })
      this.waterKuData = res4
      console.log('查看水位库容未来', this.waterKuData)
    },
    // 实际灌溉供水
    async getGgWaterData (res1, res2) {
      console.log('实际灌溉供水', res1)
      console.log('灌溉供水计划', res2)
      const obj = {
        real: [],
        50: [],
        75: [],
        95: []
      }
      res1.data.forEach(item => {
        obj.real.push(item.value)
      })
      obj.real.reverse()
      obj[50] = res2[0].formatArr.value
      obj[75] = res2[1].formatArr.value
      obj[95] = res2[2].formatArr.value
      this.ggWaterData = obj
      console.log('灌溉供水', obj)
    },
    ruleBtn2 () {
      this.ruleChartShow = true
      this.year2 = this.year
      this.$nextTick(() => {
        this.initRightChart2Copy(this.xingLiObj)
        this.yearChartChange()
        // this.initRightChart3Copy(this.xingLiObj2)
      })
    },
    closeRuleChart () {
      this.ruleChartShow = false
    },
    // 转换兴利调度规则时间
    transDate (time) {
      const val = time.substring(5, 7)
      if (val.substring(0, 1) !== '0') {
        return val + '月'
      } else {
        return val.substring(1, 2) + '月'
      }
    },
    // 旱情预警
    async getDroughtData () {
      const res = await getDroughtApi()
      console.log('旱情预警', res)
      this.droughtObj = res
    },
    async getXingLiData (res) {
      console.log('查看兴利调度源数据', res)
      const newArr = res.slice(0, 2)
      res.splice(0, 2)
      this.xingLiData = [...res, ...newArr]
      console.log('处理完毕后', this.xingLiData)
      this.xingLiData.forEach(item => {
        this.xingLiObj.vandalism_line.push(item.vandalism_line)
        this.xingLiObj.water_supply_line.push(item.water_supply_line)
        this.xingLiObj.mean_value_line.push(item.mean_value_line)
        this.xingLiObj.guarantee_line.push(item.guarantee_line)
        this.xingLiObj.plan_date.push(this.dayjs(item.plan_date).format('M') + '月')
        this.xingLiObj.real_data.push(this.$store.state.reservoirRealData.water_level_value)
      })
      console.log('兴利调度状态echarts', this.xingLiObj)
      let month = Number((new Date().getMonth()) + 1)
      if (month === 1) {
        month = 11
      } else if (month === 2) {
        month = 12
      }
      month = month - 3
      console.log(month)
      this.xingLiObj.real_data.forEach((item, index) => {
        if (index !== month) this.xingLiObj.real_data[index] = ''
      })
      console.log('最终传入图表的数据', this.xingLiObj)
    },
    // 兴利调度方案
    async xlfaOpen () {
      await this.getXingLiFaData()
      this.xlfaShow = true
    },
    // 旱情预警处置
    hqyjczOpen () {
      this.hqyjczShow = true
    },
    ggsltjOpen () {
      this.ggsltjShow = true
    },
    ggsltjClose () {
      this.ggsltjShow = false
    },
    ddlPdfOpen () {
      this.ddlPdfShow = true
    },
    ddlPdfClose () {
      this.ddlPdfShow = false
    },
    ddlDetail (flag, index) {
      if (flag) {
        this.pdfUrl = this.pdf_img_obj[index - 1]
        this.ddlPdfShow = true
      }
    },
    xlfaClose () {
      this.xlfaShow = false
      this.$refs.xLform.resetFields()
      this.waterDay = ''
      this.xLformData = {
        level: '',
        dongYang: '',
        yiWu: '',
        guanGai: '',
        shengTai: ''
      }
    },
    // 兴利调度规则
    closeRules () {
      this.ruleShow = false
    },
    ruleBtn () {
      this.ruleShow = true
    },
    // 水资源调度
    // initWaterChart () {
    //   this.initWaterChart1()
    //   this.initWaterChart2()
    //   this.initWaterChart3()
    //   this.initWaterChart4()
    //   this.initWaterChart5()
    // },
    initWaterChart1 () {
      const myChart = this.echarts.init(document.getElementById('waterChart1'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 25,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['供水', '灌溉', '生态', '发电', '蒸发'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '单位：m³',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: '25%',
            data: ['33.5', '32.5', '53.5', '44.5', '36.0', '19.0'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initWaterChart2 () {
      const myChart = this.echarts.init(document.getElementById('waterChart2'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 25,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['供水', '灌溉', '生态', '发电', '蒸发'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: '25%',
            data: ['33.5', '32.5', '53.5', '44.5', '36.0', '19.0'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initWaterChart3 () {
      const myChart = this.echarts.init(document.getElementById('waterChart3'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 25,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['供水', '灌溉', '生态', '发电', '蒸发'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: '25%',
            data: ['33.5', '32.5', '53.5', '44.5', '36.0', '19.0'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initWaterChart4 () {
      const myChart = this.echarts.init(document.getElementById('waterChart4'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 25,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['供水', '灌溉', '生态', '发电', '蒸发'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: '25%',
            data: ['33.5', '32.5', '53.5', '44.5', '36.0', '19.0'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initWaterChart5 () {
      const myChart = this.echarts.init(document.getElementById('waterChart5'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 25,
          bottom: 0,
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#19FFDC'
            }, {
              offset: 1, color: '#FFF600'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['供水', '灌溉', '生态', '发电', '蒸发'],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          name: '雨量：mm',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['transparent', 'rgba(96, 255, 246, 0.1)']
            }
          }
        },
        series: [
          {
            name: '雨量',
            barWidth: '25%',
            data: ['33.5', '32.5', '53.5', '44.5', '36.0', '19.0'],
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            tooltip: {
              valueFormatter: (value) => value + ' mm'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 标签页
    elTabBtn (tab, event) {
      console.log(tab, event)
    },
    waterSmallBtn (i) {
      this.waterBtnIndex = i
    },
    // 水资源调度弹窗
    waterBtn (i) {
      this.waterShow = true
      this.$nextTick(() => {
        this.initWaterChart1()
      })
    },
    closeWaterD () {
      this.waterShow = false
      this.activeName = 'now'
    },
    // 分页
    async changePage (currPage) {
      this.paginationObj.page = currPage
      console.log('查看一下传入的obj', this.paginationObj)
      const res = await getHisFlowInApi(this.paginationObj)
      console.log('更新分页数后的数据', res)
      this.paginationData = res.data
      this.paginationObj.page = res.current_page
      this.paginationObj.total = res.total
    },
    daochu () {
      console.log('导出')
    },
    // 日期选择器
    async dateChange (arr) {
      if (arr === null) {
        console.log('现在时间', arr)
        console.log(this.paginationObj)
        const obj = {
          limit: 12, // 每页显示多少条
          total: null, // 总数据量
          page: 1, // 当前在第几页,
          start_date: '',
          end_date: ''
        }
        const res = await getHisFlowInApi(obj)
        console.log('查看重置后的数据', res)
        this.paginationData = res.data
        this.paginationObj.page = res.current_page
        this.paginationObj.total = res.total
        this.paginationObj.start_date = ''
        this.paginationObj.end_date = ''
      } else {
        console.log('时间改变事件触发', arr)
        this.paginationObj.start_date = this.dayjs(+new Date(arr[0])).format('YYYY-MM-DD')
        this.paginationObj.end_date = this.dayjs(+new Date(arr[1])).format('YYYY-MM-DD')
        this.paginationObj.page = 1
        console.log('查看一下时间选择后传入的分页对象', this.paginationObj)
        const res = await getHisFlowInApi(this.paginationObj)
        console.log('时间选择后更新分页数后的数据', res)
        this.paginationData = res.data
        this.paginationObj.page = res.current_page
        this.paginationObj.total = res.total
      }
    },
    // 历史记录弹层
    async hisBtn (title) {
      this.hisShow = true
      this.hisLoading = true
      const res = await getHisFlowInApi(this.paginationObj)
      this.hisLoading = false
      console.log('打开弹层后分页数据', res)
      this.paginationData = res.data
      this.paginationObj.total = res.total
      this.paginationObj.page = res.current_page
      this.chartTitle = title
    },
    closeChartHis () {
      this.hisShow = false
      this.paginationObj = {
        limit: 12, // 每页显示多少条
        total: 0, // 总数据量
        page: 1, // 当前在第几页,
        start_date: '',
        end_date: ''
      }
      this.paginationData = []
      this.formData.date = []
    },
    // 弹层
    bigChartBtn (i) {
      if (this.chartTitle === '入库流量过程') {
        this.lTop3Btn(i)
      } else if (this.chartTitle === '水位-库容过程线') {
        this.rTop1Btn(i)
      } else if (this.chartTitle === '断面水位过程') {
        // console.log('没有数据')
      }
    },
    lTop3Btn (i) {
      if (this.chartShow2) {
        this.bigChartBtnIndex = i
        this.initLeftChart3Copy(this.bigChartBtnIndex)
      } else {
        this.lTop3Index = i
        this.rTop1Index = i
        this.initLeftChart3(this.lTop3Index)
        this.initRightChart1(this.waterKuData.x[i], this.waterKuData.y[i])
      }
    },
    rTop1Btn (i) {
      if (this.chartShow2) {
        this.bigChartBtnIndex = i
        this.initRightChart1Copy(this.waterKuData.x[i], this.waterKuData.y[i])
      } else {
        this.rTop1Index = i
        this.lTop3Index = i
        this.initRightChart1(this.waterKuData.x[i], this.waterKuData.y[i])
        this.initLeftChart3(this.lTop3Index)
      }
    },
    isShowBtn () {
      this.isShow = !this.isShow
      // if (this.isShow === true) {
      //   this.$nextTick(() => {
      //     this.initLeftChart1()
      //     this.initLeftChart2()
      //     this.initLeftChart3()
      //     this.initRightChart1()
      //     // this.initRightChart2()
      //   })
      // }
    },
    openChart (title, arr, i) {
      this.reset = true
      this.chartTitle = title
      if (title === '城镇供水计划') {
        this.chartShow = true
        this.$nextTick(() => this.initLeftChart1Copy(this.cityWaterData))
      } else if (title === '灌溉供水计划') {
        this.chartShow = true
        this.$nextTick(() => this.initLeftChart2Copy(this.ggWaterData))
      } else if (title === '入库流量过程') {
        this.chartShow2 = true
        this.bigChartBtnIndex = i
        this.bigChartBtnArr = arr
        this.$nextTick(() => this.initLeftChart3Copy(this.bigChartBtnIndex))
      } else if (title === '水位-库容过程线') {
        this.chartShow2 = true
        this.bigChartBtnIndex = i
        this.bigChartBtnArr = arr
        this.$nextTick(() => this.initRightChart1Copy(this.waterKuData.x[this.bigChartBtnIndex], this.waterKuData.y[this.bigChartBtnIndex]))
      } else if (title === '兴利状态与调度图') {
        this.$nextTick(() => this.initRightChart2Copy())
      }
    },
    closeChart (flag) {
      this.chartShow = flag
      this.chartShow2 = flag
      this.reset = false
      this.bigChartBtnArr = []
      this.bigChartBtnIndex = 0
    },
    initLeftChart1 (arr) {
      if (!this.leftChart1) this.leftChart1 = this.echarts.init(document.getElementById('left-chart1'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 10,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}月'
            }
          }
        },
        legend: {
          data: ['东阳市', '义乌市'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 132, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 132, 0, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(154, 178, 255, 0.4)'
            }, {
              offset: 1, color: 'rgba(154, 178, 255, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '东阳市',
            barWidth: '10%',
            data: arr[1].formatArr.value,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#FF6C00 '
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => Number(value) + ' 万m³'
            }
          }, {
            name: '义乌市',
            barWidth: '10%',
            data: arr[0].formatArr.value,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            areaStyle: {},
            lineStyle: {
              color: '#B6C7FF'
            },
            tooltip: {
              valueFormatter: (value) => Number(value) + ' 万m³'
            }
          }
        ]
      }
      this.leftChart1.clear()
      this.leftChart1.setOption(option)
    },
    initLeftChart1Copy (arr) {
      if (!this.bigChart) this.bigChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 10,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}月'
            }
          }
        },
        legend: {
          data: ['东阳市', '义乌市'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 132, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 132, 0, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(154, 178, 255, 0.4)'
            }, {
              offset: 1, color: 'rgba(154, 178, 255, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '东阳市',
            barWidth: '10%',
            data: arr[1].formatArr.value,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#FF6C00 '
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => value + ' 万m³'
            }
          }, {
            name: '义乌市',
            barWidth: '10%',
            data: arr[0].formatArr.value,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            areaStyle: {},
            lineStyle: {
              color: '#B6C7FF'
            },
            tooltip: {
              valueFormatter: (value) => value + ' 万m³'
            }
          }
        ]
      }
      this.bigChart.clear()
      this.bigChart.setOption(option)
    },
    initLeftChart2 (obj) {
      if (!this.leftChart2) this.leftChart2 = this.echarts.init(document.getElementById('left-chart2'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 10,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}月'
            }
          }
        },
        legend: {
          data: ['实际', '50%', '75%', '95%'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          'red',
          //  {
          //   type: 'linear',
          //   x: 0,
          //   y: 0,
          //   x2: 0,
          //   y2: 1,
          //   colorStops: [{
          //     offset: 0, color: 'rgba(255, 132, 0, 0.4)'
          //   }, {
          //     offset: 1, color: 'rgba(255, 132, 0, 0)'
          //   }],
          //   global: false
          // },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 132, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 132, 0, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(182, 199, 255, 0.4)'
            }, {
              offset: 1, color: 'rgba(182, 199, 255, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(102, 255, 98, 0.4)'
            }, {
              offset: 1, color: 'rgba(102, 255, 98, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '实际',
            data: obj.real,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            // areaStyle: {},
            lineStyle: {
              color: 'red'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '50%',
            data: obj[50],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            areaStyle: {},
            lineStyle: {
              color: '#FF6C00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '75%',
            data: obj[75],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#B6C7FF'
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '95%',
            data: obj[95],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#66FF62'
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }
        ]
      }
      this.leftChart2.clear()
      this.leftChart2.setOption(option)
    },
    initLeftChart2Copy (obj) {
      if (!this.bigChart) this.bigChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 10,
          top: 40,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}月'
            }
          }
        },
        legend: {
          data: ['实际', '50%', '75%', '95%'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          top: 8
        },
        color: [
          'red',
          //  {
          //   type: 'linear',
          //   x: 0,
          //   y: 0,
          //   x2: 0,
          //   y2: 1,
          //   colorStops: [{
          //     offset: 0, color: 'rgba(255, 132, 0, 0.4)'
          //   }, {
          //     offset: 1, color: 'rgba(255, 132, 0, 0)'
          //   }],
          //   global: false
          // },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 132, 0, 0.4)'
            }, {
              offset: 1, color: 'rgba(255, 132, 0, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(182, 199, 255, 0.4)'
            }, {
              offset: 1, color: 'rgba(182, 199, 255, 0)'
            }],
            global: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(102, 255, 98, 0.4)'
            }, {
              offset: 1, color: 'rgba(102, 255, 98, 0)'
            }],
            global: false
          }
        ],
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          boundaryGap: false,
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            }
          },
          axisTick: { show: false }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '万m³',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: false,
            type: 'line'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '实际',
            data: obj.real,
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            // areaStyle: {},
            lineStyle: {
              color: 'red'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '50%',
            data: obj[50],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            areaStyle: {},
            lineStyle: {
              color: '#FF6C00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '75%',
            data: obj[75],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#B6C7FF'
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }, {
            name: '95%',
            data: obj[95],
            type: 'line',
            symbolSize: 0,
            label: {
              show: false
            },
            lineStyle: {
              color: '#66FF62'
            },
            areaStyle: {},
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }
        ]
      }
      this.bigChart.clear()
      this.bigChart.setOption(option)
    },
    initLeftChart3 (i) {
      if (!this.leftChart3) this.leftChart3 = this.echarts.init(document.getElementById('left-chart3'))
      const option = {
        grid: {
          show: false,
          left: 0,
          right: 20,
          top: 30,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: this.flowInData.x[i],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '单位：m³/s',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '流量',
            barWidth: 15,
            data: this.flowInData.y[i],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      this.leftChart3.clear()
      this.leftChart3.setOption(option)
    },
    initLeftChart3Copy (i) {
      if (!this.bigChart2) this.bigChart2 = this.echarts.init(document.getElementById('big-chart2'))
      const option = {
        grid: {
          show: false,
          left: 45,
          right: 65,
          top: 30,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(1, 244, 168, 0.4)' },
            { offset: 1, color: 'rgba(1, 244, 168, 0)' }
          ]
        )],
        xAxis: {
          type: 'category',
          data: this.flowInData.x[i],
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '单位：m³/s',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12,
            align: 'left',
            verticalAlign: 'middle'
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisPointer: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '流量',
            barWidth: 15,
            data: this.flowInData.y[i],
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      this.bigChart2.clear()
      this.bigChart2.setOption(option)
    },
    initRightChart1 (x, y) {
      let waterYMin = Math.floor((Math.min(...y.water) - 5))
      let kuYMin = Math.floor((Math.min(...y.ku) - 2000))
      if (waterYMin < 0) waterYMin = 0
      if (kuYMin < 0) kuYMin = 0
      if (!this.rightChart1) this.rightChart1 = this.echarts.init(document.getElementById('right-chart1'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 0,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        legend: {
          data: ['水位', '库容'],
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 132, 0, 0.7)' },
            { offset: 1, color: 'rgba(255, 132, 0, 0)' }
          ]
        ), '#00FFFF'],
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'middle'
            },
            min: waterYMin,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '库容：万m³',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 36, 0, 0]
            },
            min: kuYMin,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '水位',
            data: y.water,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '库容',
            yAxisIndex: 1,
            data: y.ku,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFFF'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }
        ]
      }
      this.rightChart1.clear()
      this.rightChart1.setOption(option)
    },
    initRightChart1Copy (x, y) {
      let waterYMin = Math.floor((Math.min(...y.water) - 5))
      let kuYMin = Math.floor((Math.min(...y.ku) - 2000))
      if (waterYMin < 0) waterYMin = 0
      if (kuYMin < 0) kuYMin = 0
      if (!this.bigChart2) this.bigChart2 = this.echarts.init(document.getElementById('big-chart2'))
      const option = {
        grid: {
          show: false,
          top: 30,
          bottom: 0,
          left: 40,
          right: 25,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'red'
        },
        legend: {
          data: ['水位', '库容'],
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              formatter: '{value}:00'
            }
          }
        },
        color: [new this.echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(255, 132, 0, 0.7)' },
            { offset: 1, color: 'rgba(255, 132, 0, 0)' }
          ]
        ), '#00FFFF'],
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: 'rgba(238, 238, 238, 0.5)'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              verticalAlign: 'middle'
            },
            min: waterYMin,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '库容：万m³',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'middle',
              padding: [0, 36, 0, 0]
            },
            min: kuYMin,
            axisLine: {
              show: true,
              symbol: ['none', 'arrow'], // 轴线两边的箭头
              symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
              lineStyle: {
                color: 'rgba(238, 238, 238, 0.5)'
              }
            },
            axisPointer: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: '水位',
            data: y.water,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '库容',
            yAxisIndex: 1,
            data: y.ku,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
              color: '#00FFFF'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' 万m³'
            }
          }
        ]
      }
      this.bigChart2.clear()
      this.bigChart2.setOption(option)
    },
    initRightChart2 (obj) {
      if (!this.rightChart2) this.rightChart2 = this.echarts.init(document.getElementById('rightChart2'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['当前水位'],
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: [
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
              { offset: 0.6, color: 'rgba(96, 255, 246, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(66, 255, 0, 0.4)' },
              { offset: 0.6, color: 'rgba(66, 255, 0, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(154, 178, 255, 0.7)' },
              { offset: 0.8, color: 'rgba(154, 178, 255, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(255, 132, 0, 0.5)' },
              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
            ]
          ),
          '#FFC600',
          '#ff4f4f'
        ],
        xAxis: {
          show: true,
          type: 'category',
          data: obj.plan_date,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '水库水位',
            data: [164, 164, 164, 164, 160, 160, 160, 160, 160, 164, 164, 164],
            type: 'line',
            areaStyle: {},
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '防破坏线',
            data: obj.vandalism_line,
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#42FF00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '限制供水线',
            // symbol: 'circle',
            data: obj.water_supply_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: 'rgba(255,255,255,0.7)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '保证水位线',
            // symbol: 'circle',
            data: obj.guarantee_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '兴利下限水位',
            // symbol: 'circle',
            data: [130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
            type: 'line',
            symbolSize: 0,
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '当前水位',
            // symbol: 'circle',
            data: obj.real_data,
            type: 'line',
            // areaStyle: {},
            symbolSize: 15,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#ff4f4f', // 图形的描边颜色
              borderWidth: 1, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          }
        ]
      }
      this.rightChart2.clear()
      this.rightChart2.setOption(option)
    },
    initRightChart2Copy (obj) {
      if (!this.rightChart2Copy) this.rightChart2Copy = this.echarts.init(document.getElementById('rightChart2-copy'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['当前水位'],
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: [
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(96, 255, 246, 0.4)' },
              { offset: 0.6, color: 'rgba(96, 255, 246, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(66, 255, 0, 0.4)' },
              { offset: 0.6, color: 'rgba(66, 255, 0, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(154, 178, 255, 0.7)' },
              { offset: 0.8, color: 'rgba(154, 178, 255, 0)' }
            ]
          ),
          new this.echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(255, 132, 0, 0.5)' },
              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
            ]
          ),
          '#FFC600',
          '#ff4f4f'
        ],
        xAxis: {
          show: true,
          type: 'category',
          data: obj.plan_date,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12,
            interval: 0
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: false,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '水库水位',
            data: [164, 164, 164, 164, 160, 160, 160, 160, 160, 164, 164, 164],
            type: 'line',
            areaStyle: {},
            // symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              color: '#60FFF6'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '防破坏线',
            data: obj.vandalism_line,
            type: 'line',
            // symbol: 'circle',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#42FF00'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '限制供水线',
            // symbol: 'circle',
            data: obj.water_supply_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: 'rgba(255,255,255,0.7)'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '保证水位线',
            // symbol: 'circle',
            data: obj.guarantee_line,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            lineStyle: {
              color: '#FF8400'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '兴利下限水位',
            // symbol: 'circle',
            data: [130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
            type: 'line',
            symbolSize: 0,
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m'
            }
          },
          {
            name: '当前水位',
            // symbol: 'circle',
            data: obj.real_data,
            type: 'line',
            // areaStyle: {},
            symbolSize: 15,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#ff4f4f', // 图形的描边颜色
              borderWidth: 1, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          }
        ]
      }
      this.rightChart2Copy.clear()
      this.rightChart2Copy.setOption(option)
    },
    initRightChart3 (obj) {
      if (!this.rightChart3) this.rightChart3 = this.echarts.init(document.getElementById('rightChart3'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: obj.lengthArr,
          top: 20,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 10
          } // 样式
        },
        color: ['#13bd9b', '#1da3b3', '#1b17b9', '#b218b8', '#868947'],
        xAxis: {
          show: true,
          type: 'category',
          data: obj.xArr,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: obj.seriesArr
      }
      this.rightChart3.clear()
      this.rightChart3.setOption(option)
    },
    initRightChart3Copy (obj) {
      if (!this.rightChart3Copy) this.rightChart3Copy = this.echarts.init(document.getElementById('rightChart3-copy'))
      const option = {
        grid: {
          show: false,
          top: 50,
          right: 12,
          bottom: 0,
          left: 0,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 3,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: obj.lengthArr,
          top: 20,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 20,
          itemHeight: 12,
          itemStyle: {
            fontSize: 10
          } // 样式
        },
        color: ['#13bd9b', '#1da3b3', '#1b17b9', '#b218b8', '#868947'],
        xAxis: {
          show: true,
          type: 'category',
          data: obj.xArr,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          axisPointer: {
            show: true,
            type: 'line',
            label: {
              show: false
            },
            lineStyle: {}
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          axisTick: { show: false },
          boundaryGap: false
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头,另一种箭头:['none', 'path://M250 150 L150 350 L350 350 Z']
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              width: 2,
              color: '#76848d'
            }
          },
          // name: '水位：m',
          nameTextStyle: {
            color: '#CACACA',
            fontSize: 12
          }, // 样式
          axisPointer: {
            show: false
          },
          interval: 5,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          min: 130,
          max: 165,
          splitLine: {
            show: false
          }
        },
        series: obj.seriesArr
      }
      this.rightChart3Copy.clear()
      this.rightChart3Copy.setOption(option)
    }
  },
  watch: {
    year: {
      immediate: false, // 页面加载时立即执行一次监听回调函数
      deep: true, // 开启深度监听,监听复杂类型内变化
      handler (newVal, oldVal) { // 形参可选
        this.yearChartChange()
      }
    },
    year2: {
      immediate: false, // 页面加载时立即执行一次监听回调函数
      deep: true, // 开启深度监听,监听复杂类型内变化
      handler (newVal, oldVal) { // 形参可选
        this.yearChartChange()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)
#big-chart2 {
  width: 100%;
  height: 100%;
}
.xldd ::v-deep {
  .el-scrollbar {
    .el-scrollbar__wrap {
      padding: 10px;
      height: 180px !important;
      .el-select-dropdown__list {
        padding: 0;
      }
    }
  }
}
.is-show {
  position: absolute;
  left: 1460px;
  top: 0;
  width: 40px;
  height: 40px;
  background: url("~@/assets/images/flood/is_show.png") no-repeat center / 100%
    100%;
  cursor: pointer;
  &.hidden {
    left: 1870px;
  }
}
.his {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 20px;
  padding: 0 8px;
  font-size: 14px;
  background-color: rgba(96, 255, 246, 0.3);
  text-align: center;
  line-height: 20px;
  color: #fff;
}
.big-panel-select ::v-deep {
  top: -30px;
  right: 0;
  width: 150px !important;
  height: 30px !important;
  .el-input__inner {
    width: 150px !important;
    height: 30px !important;
  }
  .el-select__tags {
    span {
      .el-tag {
        background-color: #2b809e;
        border-color: $pry;
        color: #fff;
      }
    }
  }
}
.water-dispatch {
  position: absolute;
  top: 0;
  left: 0;
  .dispatch-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      margin-bottom: 10px;
      padding: 40px 15px 15px;
      .panel-title {
        span {
          position: absolute;
          right: 10px;
          top: 11px;
          color: #fff;
          font-size: 18px;
        }
      }
      .panel-main {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        .el-popover__reference-wrapper {
          button {
            width: 80px;
            height: 60px;
            line-height: 60px;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            background: url("~@/assets/images/operate/page2_icon.png") no-repeat
              top center / 100% 100%;
            border: 0;
            padding: 0;
            &.active1 {
              background: url("~@/assets/images/operate/page2_icon1.png")
                no-repeat top center / 100% 100%;
            }
            &.active2 {
              background: url("~@/assets/images/operate/page2_icon2.png")
                no-repeat top center / 100% 100%;
            }
            &.active3 {
              background: url("~@/assets/images/operate/page2_icon3.png")
                no-repeat top center / 100% 100%;
            }
            &.active4 {
              background: url("~@/assets/images/operate/page2_icon4.png")
                no-repeat top center / 100% 100%;
            }
          }
        }
      }
    }
    .top2 ::v-deep {
      height: 260px;
      margin-bottom: 10px;
      .btn-box {
        margin: 10px 0;
      }
      #left-chart1 {
        width: 100%;
        flex: 1;
      }
    }
    .top3 ::v-deep {
      height: 260px;
      margin-bottom: 10px;
      .btn-box {
        margin: 10px 0;
      }
      #left-chart2 {
        width: 100%;
        height: 210px;
      }
    }
    .top4 ::v-deep {
      width: 100%;
      flex: 1;
      .his {
        right: 40px;
      }
      .btn-box {
        margin: 10px 0;
      }
      .big-panel-btn-box {
        margin-bottom: 10px;
      }
      #left-chart3 {
        width: 100%;
        flex: 1;
      }
    }
  }
  .dispatch-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      height: 316px;
      margin-bottom: 10px;
      .his {
        right: 40px;
      }
      .btn-box {
        margin: 10px 0;
      }
      .big-panel-btn-box {
        margin-bottom: 10px;
      }
      #right-chart1 {
        width: 100%;
        flex: 1;
      }
    }
    .top2 {
      margin-bottom: 10px;
      .el-select {
        right: 60px;
      }
      .box {
        display: flex;
        align-items: center;
        padding-left: 35px;
        width: 100%;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: url("~@/assets/images/operate/icon4.png") no-repeat top
          center / 100% 100%;
        margin-top: 10px;
        span {
          margin-right: 54px;
          font-weight: 700;
        }
        p {
          span {
            color: #ff6060;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
      .box:nth-child(2) p span {
        color: #ffbb38;
      }
    }
    .top3 ::v-deep {
      width: 1005;
      flex: 1;
      .his {
        margin-right: 30px;
      }
      .box {
        display: flex;
        align-items: center;
        padding-left: 42px;
        width: 100%;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: url("~@/assets/images/operate/icon4.png") no-repeat top
          center / 100% 100%;
        margin-top: 10px;
        span {
          margin-right: 60px;
        }
        p {
          span {
            color: #60fff6;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
      .box:nth-child(2) p span {
        font-size: 16px;
      }
      .chart-box {
        position: relative;
        width: 100%;
        flex: 1;
        margin-top: 10px;
        .eye {
          display: flex;
          align-items: center;
          position: absolute;
          z-index: 6;
          right: 0;
          top: 0;
          width: 110px;
          height: 20px;
          padding-left: 6px;
          background-color: rgba(96, 255, 246, 0.3);
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          .icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            background: url("~@/assets/images/common/eye2.png") no-repeat center /
              100% 100%;
          }
          .cloEye {
            background: url("~@/assets/images/common/eye1.png") no-repeat center /
              100% 100%;
          }
        }
        #rightChart2 {
          width: 100%;
          height: 100%;
          // background: url("~@/assets/images/operate/small_chart_bg.png")
          //   no-repeat 29px 36px / 339px 255px;
        }
        #rightChart3 {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // background-color: red;
          // background: url("~@/assets/images/operate/small_chart_bg.png")
          //   no-repeat 29px 36px / 339px 255px;
        }
      }

      .c {
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 5;
        font-size: 12px;
        .icon {
          width: 14px;
          height: 10px;
          margin-right: 5px;
          margin-top: 5px;
        }
      }
      .c1 {
        top: 16px;
        left: 50px;
        color: #60fff6;
        .icon {
          background: url("~@/assets/images/operate/icon5.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c2 {
        top: 46px;
        left: 152px;
        color: #60fff6;
        .icon {
          background: url("~@/assets/images/operate/icon5.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c3 {
        top: 65px;
        left: 249px;
        color: #42ff00;
        .icon {
          background: url("~@/assets/images/operate/icon9.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c4 {
        top: 79px;
        left: 190px;
        color: #fff;
        .icon {
          background: url("~@/assets/images/operate/icon6.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c11 {
        top: 84px;
        left: 35px;
        color: #ff4f4f;
        .icon {
          background: url("~@/assets/images/operate/icon11.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c5 {
        top: 125px;
        left: 120px;
        color: #ff8400;
        .icon {
          background: url("~@/assets/images/operate/icon7.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c6 {
        top: 272px;
        left: 150px;
        color: #ffc600;
        .icon {
          background: url("~@/assets/images/operate/icon8.png") no-repeat top
            center / 100% 100%;
        }
      }
      .c7 {
        display: flex;
        align-items: center;
        color: #fff;
        .icon {
          width: 8px;
          height: 8px;
          margin: 0;
          margin-right: 7px;
          border-radius: 50%;
          background-color: rgba(96, 255, 246, 1);
          box-shadow: 0 0 1px 3px rgba(96, 255, 246, 0.6);
        }
        &.left {
          top: 55px;
          left: 40px;
        }
        &.right {
          top: 70px;
          left: 286px;
        }
      }
      .c8 {
        display: flex;
        align-items: center;
        left: 110px;
        top: 80px;
        color: #42ff00;
        .icon {
          width: 8px;
          height: 8px;
          margin: 0;
          margin-right: 7px;
          border-radius: 50%;
          background-color: #42ff00;
          box-shadow: 0 0 1px 3px rgba(66, 255, 0, 0.6);
        }
      }
      .c9-left {
        display: flex;
        align-items: center;
        left: 45px;
        top: 165px;
        color: #fff;
        .icon {
          width: 8px;
          height: 8px;
          margin: 0;
          margin-right: 7px;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
        }
      }
      .c9-right {
        display: flex;
        align-items: center;
        left: 255px;
        top: 165px;
        color: #fff;
        .icon {
          width: 8px;
          height: 8px;
          margin: 0;
          margin-right: 7px;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
        }
      }
      .c10 {
        display: flex;
        align-items: center;
        left: 120px;
        top: 200px;
        color: #ff8400;
        .icon {
          width: 8px;
          height: 8px;
          margin: 0;
          margin-right: 7px;
          border-radius: 50%;
          background-color: rgba(255, 132, 0, 1);
          box-shadow: 0 0 1px 3px rgba(255, 132, 0, 0.6);
        }
      }
    }
  }
  .flood-panel ::v-deep .panel-title {
    background: url("~@/assets/images/operate/title_bg.png") no-repeat left top /
      100% 100%;
  }
}
.his-dialog ::v-deep {
  /* 表单 */
  .el-form {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: rgba(96, 255, 246, 0.05);
    // 表单项
    .el-form-item {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      margin-right: 10px;
      // 表单项label标签
      .el-form-item__label {
        width: 110px;
        color: $pry;
        font-size: 16px;
        text-align: right;
      }
      // 表单项内容
      .el-form-item__content {
        flex: 1;
        .daochu {
          width: 70px;
          height: 24px;
          margin-left: 20px;
          border-radius: 4px;
          background-color: #37ccc4;
          color: #fff;
          text-align: center;
          line-height: 24px;
        }
      }
      // 表单校验错误输入框边框颜色
      &.is-error .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
  /* 日期选择器 */
  // 日期选择器选择框
  .el-date-editor {
    justify-content: space-between;
    width: 270px;
    height: 30px;
    padding: 3px 10px;
    background-color: #0b3268;
    border: 1px solid #2e6d8d;
    .el-icon-date {
      display: flex;
      align-items: center;
      margin: 0;
      &::before {
        color: $pry;
      }
    }
    .el-range__close-icon {
      display: flex;
      align-items: center;
      &::before {
        color: $pry;
      }
    }
    span {
      display: flex;
      align-items: center;
      width: 14px;
      padding: 0;
      color: #fff;
    }
    input {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: transparent;
      color: $pry;
      border-radius: 5px;
    }
  }
  .el-range-editor.is-active:hover {
    border-color: $pry;
  }
  .list {
    width: 100%;
    margin-top: 20px;
    flex: 1;
    margin-bottom: 2px;
    .title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      background-color: rgba(96, 255, 246, 0.2);
      p {
        text-align: center;
        line-height: 50px;
      }
      p:nth-child(1) {
        width: 220px;
      }
      p:nth-child(2) {
        width: 120px;
      }
      p:nth-child(3) {
        width: 120px;
      }
      p:nth-child(4) {
        width: 120px;
      }
      p:nth-child(5) {
        width: 120px;
      }
      p:nth-child(6) {
        width: 220px;
      }
    }
    .content {
      width: 100%;
      height: 478px;
      overflow: auto;
      background-color: rgba(96, 255, 246, 0.05);
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        margin-top: 1px;
        p {
          text-align: center;
          line-height: 50px;
        }

        p:nth-child(1) {
          width: 220px;
        }
        p:nth-child(2) {
          width: 120px;
        }
        p:nth-child(3) {
          width: 120px;
        }
        p:nth-child(4) {
          width: 120px;
        }
        p:nth-child(5) {
          width: 120px;
        }
        p:nth-child(6) {
          width: 220px;
        }
      }
      .box:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
      .box:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
    }
  }
  // 分页
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: rgba(96, 255, 246, 0.05);
    .page12 {
      margin-left: 100px;
    }
    // 默认插槽
    .el-pagination__rightwrapper {
      position: absolute;
      left: 20px;
      top: 11px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
    }
    // 显示条数选择器
    // .el-pagination__sizes {
    // }
    // 上一页, 下一页
    .btn-prev,
    .btn-next {
      width: 70px;
      height: 30px;
      background-color: $pry2;
      color: #fff;
      &[disabled] {
        color: #606266;
      }
    }
    .el-pager li {
      background-color: rgba(39, 146, 160, 0.2);
      color: #fff;
      &:hover {
        color: rgba(0, 255, 255, 0.6) !important;
      }
      &.active {
        background-color: $pry2 !important;
        color: #fff !important;
      }
    }
    .el-pagination__jump {
      color: #fff;
      .el-input {
        width: 70px;
        height: 30px;
        input {
          background-color: rgba(39, 146, 160, 0.2);
          border-color: $pry2;
          color: #fff;
          &:focus {
            border-color: rgba(0, 255, 255, 0.7);
          }
        }
      }
    }
  }
}
.chart-show2 ::v-deep {
  .el-dialog__body {
    padding: 0 20px 20px !important;
  }
  /* 标签页 */
  .el-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // 头部
    .el-tabs__header {
      background-color: rgba(96, 255, 246, 0.05);
      margin-top: 10px;
      margin-bottom: 10px;
      .el-tabs__nav-wrap {
        &::after {
          background-color: rgba(96, 255, 246, 0.05);
        }
        .el-tabs__nav-scroll {
          padding: 0 20px;
          .el-tabs__nav {
            display: flex;
            .el-tabs__item {
              display: flex;
              align-items: center;
              height: 50px;
              padding: 0 20px;
              color: #fff;
              font-size: 16px;
              text-align: center;
              &:hover {
                color: $pry;
              }
              &.is-active {
                color: $pry;
              }
            }
            .el-tabs__active-bar {
              background-color: $pry;
            }
          }
        }
      }
    }
    // 主体
    .el-tabs__content {
      flex: 1;
      .el-tab-pane {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        .list-box {
          width: 100%;
          flex: 1;
          padding-top: 10px;
          overflow: auto;
          .box {
            display: flex;
            align-items: center;
            width: 100%;
            height: 50px;
            margin-bottom: 10px;
            color: #fff;
            font-size: 14px;
            background: url("~@/assets/images/operate/icon4.png") no-repeat top
              center / 100% 100%;
            span {
              width: 270px;
              height: 100%;
              margin-right: 30px;
              text-align: center;
              line-height: 50px;
              font-weight: 700;
            }
            p {
              flex: 1;
              span {
                color: #ff6060;
                font-size: 20px;
                margin-right: 5px;
              }
            }
          }
          .box:last-child {
            margin-bottom: 0;
          }
        }
        .mess-box {
          display: flex;
          width: 100%;
          height: 50px;
          margin-bottom: 10px;
          .box {
            display: flex;
            align-items: center;
            padding-left: 70px;
            width: 100%;
            height: 50px;
            color: #fff;
            font-size: 14px;
            background: url("~@/assets/images/operate/icon4.png") no-repeat top
              center / 100% 100%;
            span {
              margin-right: 100px;
              font-weight: 700;
            }
            p {
              span {
                color: #ff6060;
                font-size: 20px;
                margin-right: 5px;
              }
            }
          }
          .box:nth-child(1) {
            margin-right: 20px;
          }
          .box:nth-child(2) p span {
            color: #ffbb38;
          }
        }
        .chart {
          width: 100%;
          flex: 1;
        }
      }
    }
  }
  /* 表单 */
  .el-form {
    display: flex;
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 64px;
    width: 500px;
    height: 40px;
    background-color: transparent;
    // 表单项
    .el-form-item {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      margin-right: 10px;
      // 表单项label标签
      .el-form-item__label {
        width: 110px;
        color: $pry;
        font-size: 16px;
        text-align: right;
      }
      // 表单项内容
      .el-form-item__content {
        display: flex;
        align-items: center;
        flex: 1;
        .daochu {
          width: 70px;
          height: 24px;
          margin-left: 20px;
          border-radius: 4px;
          background-color: #37ccc4;
          color: #fff;
          text-align: center;
          line-height: 24px;
        }
        .chart-icon,
        .mess-list {
          width: 30px;
          height: 30px;
          margin-left: 10px;
          border-radius: 4px;
        }
        .chart-icon {
          background: rgba(96, 255, 246, 0.1)
            url("~@/assets/images/operate/chart_icon2.png") no-repeat center /
            20px 20px;
          &.active {
            background: rgba(96, 255, 246, 0.1)
              url("~@/assets/images/operate/chart_icon.png") no-repeat center /
              20px 20px !important;
          }
        }
        .mess-list {
          background: rgba(96, 255, 246, 0.1)
            url("~@/assets/images/operate/mess_list.png") no-repeat center /
            20px 20px;
          &.active {
            background: rgba(96, 255, 246, 0.1)
              url("~@/assets/images/operate/mess_list2.png") no-repeat center /
              20px 20px !important;
          }
        }
      }
      // 表单校验错误输入框边框颜色
      &.is-error .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
  /* 下拉选择 */
  .el-select {
    // 输入框
    .el-input {
      // 输入框选中时
      &.is-focus .el-input__inner {
        border-color: $pry;
      }
      .el-input__inner {
        width: 300px;
        height: 30px;
        background-color: #1b4878;
        border-color: #2e6d8d;
        color: #fff;
        font-size: 14px;
        &::placeholder {
          font-size: 14px;
        }
      }
      // 输入框箭头颜色
      .el-input__suffix {
        display: flex;
        align-items: center;
        .el-input__suffix-inner {
          i {
            color: $pry;
          }
        }
      }
    }
    // 显示的选中项
    .el-select__tags {
      span {
        .el-tag {
          background-color: #2b809e;
          border-color: $pry;
          color: #fff;
        }
      }
    }
    // 选择框的下拉弹出框
    .el-select-dropdown {
      background-color: #226697;
      border-color: #226697;
      // 弹出框的数据列表
      .el-select-dropdown__list {
        padding: 10px;
        // 弹出框的单条数据
        .el-select-dropdown__item {
          display: flex;
          align-items: center;
          height: 40px;
          margin-bottom: 4px;
          border-radius: 4px;
          color: #fff;
          font-size: 14px;
        }
      }
      // 经过选项时选项的背景色
      .el-select-dropdown__item.hover {
        background-color: #39a0bb;
      }
      // 已选中的选项
      &.is-multiple .el-select-dropdown__item.selected {
        background-color: #39a0bb;
        color: #fff;
      }
      // 弹出框三角形
      .popper__arrow {
        left: 30px !important;
        &::after {
          border-bottom-color: #226697;
          border-top-color: #226697;
        }
      }
    }
  }
  /* 日期选择器 */
  // 日期选择器选择框
  .el-date-editor {
    justify-content: space-between;
    width: 270px;
    height: 30px;
    padding: 3px 10px;
    background-color: #0b3268;
    border: 1px solid #2e6d8d;
    .el-icon-date {
      display: flex;
      align-items: center;
      margin: 0;
      &::before {
        color: $pry;
      }
    }
    .el-range__close-icon {
      display: flex;
      align-items: center;
      &::before {
        color: $pry;
      }
    }
    span {
      display: flex;
      align-items: center;
      width: 14px;
      padding: 0;
      color: #fff;
    }
    input {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: transparent;
      color: $pry;
      border-radius: 5px;
    }
  }
  .el-range-editor.is-active:hover {
    border-color: $pry;
  }
  // 分页
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: rgba(96, 255, 246, 0.05);
    // 默认插槽
    .el-pagination__rightwrapper {
      position: absolute;
      left: 20px;
      top: 11px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
    }
    // 总条数
    .el-pagination__total {
      position: absolute;
      left: 104px;
      top: 11px;
      color: #fff;
    }
    // 显示条数选择器
    // .el-pagination__sizes {
    // }
    // 上一页, 下一页
    .btn-prev,
    .btn-next {
      width: 70px;
      height: 30px;
      background-color: $pry2;
      color: #fff;
      &[disabled] {
        color: #606266;
      }
    }
    .el-pager li {
      background-color: rgba(39, 146, 160, 0.2);
      color: #fff;
      &:hover {
        color: rgba(0, 255, 255, 0.6) !important;
      }
      &.active {
        background-color: $pry2 !important;
        color: #fff !important;
      }
    }
    .el-pagination__jump {
      color: #fff;
      .el-input {
        width: 70px;
        height: 30px;
        input {
          background-color: rgba(39, 146, 160, 0.2);
          border-color: $pry2;
          color: #fff;
          &:focus {
            border-color: rgba(0, 255, 255, 0.7);
          }
        }
      }
    }
  }
}
.chart-show-rules ::v-deep {
  .el-dialog {
    height: 770px;
    font-size: 14px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 70px;
      padding: 0 70px 0 50px;
      margin-bottom: 1px;
      background-color: rgba(96, 255, 246, 0.2);
      p {
        line-height: 24px;
        color: #7dfbfd;
        text-align: center;
      }
      p:nth-child(1) {
        width: 128px;
      }
      p:nth-child(2) {
        width: 158px;
      }
      p:nth-child(3) {
        width: 100px;
      }
      p:nth-child(4) {
        width: 200px;
      }
      p:nth-child(5) {
        width: 130px;
      }
    }
    .content {
      width: 100%;
      height: 610px;
      overflow: auto;
      .box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        padding: 0 70px 0 50px;
        margin-bottom: 1px;
        p {
          color: #fff;
          text-align: center;
          line-height: 50px;
        }
        p:nth-child(1) {
          width: 128px;
        }
        p:nth-child(2) {
          width: 158px;
        }
        p:nth-child(3) {
          width: 100px;
        }
        p:nth-child(4) {
          width: 200px;
        }
        p:nth-child(5) {
          width: 130px;
        }
      }
      .box:last-child {
        margin-bottom: 0;
      }
      .box:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .box:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
  }
}
.btn-box {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 430px;
  top: 0;
  button {
    width: 140px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    background: url("~@/assets/images/flood/process1/button.png") no-repeat
      center / 100% 100%;
    &:hover {
      background: url("~@/assets/images/flood/process1/button_hover.png")
        no-repeat center / 100% 100%;
    }
  }
  button:not(:last-child) {
    margin-bottom: 20px;
  }
}
.ggsl-dialog ::v-deep {
  .el-dialog {
    min-height: 600px !important;
    table {
      width: 100%;
      height: 100%;
      border-color: rgba(96, 255, 246, 0.5);
      background-color: rgba(96, 255, 246, 0.05);
      .bg:hover {
        background-color: rgba(96, 255, 246, 0.4) !important;
      }
      caption {
        margin-bottom: 20px;
        font-size: 24px;
      }
      thead {
        background-color: rgba(96, 255, 246, 0.2);
        tr {
          height: 60px;
          th {
            color: #60fff6;
            font-size: 18px;
          }
          th:nth-child(4) {
            p {
              height: 30px;
              line-height: 30px;
            }
            p:nth-child(1) {
              border-bottom: 1px solid rgba(96, 255, 246, 0.5);
            }
            p:nth-child(2) {
              display: flex;
              span {
                flex: 1;
                text-align: center;
                line-height: 30px;
                border-right: 1px solid rgba(96, 255, 246, 0.5);
              }
              span:last-child {
                border-right: 0;
              }
            }
          }
        }
      }
      td {
        background-color: transparent;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
      }
      tbody {
        tr {
          height: 50px;
        }
        tr:nth-child(odd) {
          background-color: rgba(96, 255, 246, 0.05);
        }
        tr:nth-child(even) {
          background-color: rgba(96, 255, 246, 0.1);
        }
        td:nth-child(4) {
          .span-box {
            display: flex;
            width: 100%;
            height: 100%;
            span {
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 1;
              text-align: center;
              border-right: 1px solid rgba(96, 255, 246, 0.5);
            }
            span:last-child {
              border-right: 0;
            }
          }
        }
        tr:last-child {
          td {
            color: #60fff6;
            font-weight: 700;
          }
        }
      }
      tr {
        .column:nth-child(1),
        .column:nth-child(2),
        .column:nth-child(3),
        .column:nth-child(5),
        .column:nth-child(6),
        .column:nth-child(7) {
          width: 130px;
        }
        .column:nth-child(4) {
          width: auto;
        }
      }
    }
  }
}
.ddl-dialog {
  .img-box {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    img {
      height: 640px;
    }
  }
}
.xlfa-dialog {
  .box1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    .box {
      width: 376px;
      text-align: center;
      .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: rgba(96, 255, 246, 0.2);
      }
      .txt {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: rgba(96, 255, 246, 0.1);
        color: #ffba00;
        font-size: 20px;
        span {
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
  .table {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    .tip {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 5px;
      line-height: 18px !important;
    }
    button {
      width: 70px;
      height: 30px;
      background-color: #8d6327;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 30px;
      border-radius: 4px;
    }
    .title {
      background-color: rgba(96, 255, 246, 0.3);
      .column:nth-child(2),
      .column:nth-child(3),
      .column:nth-child(4),
      .column:nth-child(5) {
        padding-left: 13px;
      }
    }
    .list {
      flex: 1;
      background-color: rgba(96, 255, 246, 0.05);
      .row:last-child {
        .el-form ::v-deep {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
          .calc {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          // 表单项
          .el-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            // 表单项label标签
            .el-form-item__label {
              width: 100px;
              color: $pry;
              font-size: 14px;
              text-align: right;
            }
            // 表单项内容
            .el-form-item__content {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              flex: 1;
              .el-form-item__error {
                width: 110px;
                text-align: left;
                padding-left: 25px;
              }
            }
            // 表单校验错误输入框边框颜色
            &.is-error .el-input__inner {
              border-color: #f56c6c;
            }
          }
          .el-form-item:nth-child(1) {
            width: 200px;
          }
          .el-form-item:nth-child(2) {
            width: 130px;
            padding: 0 20px;
          }
          .el-form-item:nth-child(3) {
            width: 130px;
            padding: 0 20px;
          }
          .el-form-item:nth-child(4) {
            width: 130px;
            padding: 0 20px;
          }
          .el-form-item:nth-child(5) {
            width: 130px;
            padding: 0 20px;
          }
          .el-form-item:nth-child(6) {
            width: 130px;
          }
          .el-form-item:nth-child(7) {
            width: 240px;
          }
        }
        /* 输入框 */
        .el-input ::v-deep {
          .el-input__inner {
            width: 100%;
            height: 40px;
            background-color: #10375a;
            border-color: #2e6d8d;
            color: #fff;
            font-size: 14px;
            text-align: center;
            &:hover {
              border-color: $pry2;
            }
            &:focus {
              border-color: $pry;
            }
            &::placeholder {
              font-size: 14px;
            }
          }
          .el-input__suffix {
            display: flex;
            margin-right: 5px;
            align-items: center !important;
          }
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
    .title,
    .list .row {
      display: flex;
      justify-content: space-between;
      height: 51px;
      text-align: center;
      line-height: 50px;
      border-bottom: 1px solid#0C3061;

      .column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        input {
          width: 100px;
          height: 40px;
          background-color: rgba(0, 0, 0, 0.2);
          border: 0;
          border-radius: 4px;
          color: #fff;
          text-align: center;
        }
      }
      .column:nth-child(1) {
        width: 200px;
      }
      .column:nth-child(2) {
        width: 130px;
      }
      .column:nth-child(3) {
        width: 130px;
      }
      .column:nth-child(4) {
        width: 130px;
      }
      .column:nth-child(5) {
        width: 130px;
      }
      .column:nth-child(6) {
        width: 130px;
      }
      .column:nth-child(7) {
        width: 240px;
      }
    }
  }
}
.chart-show3 {
  .mess-box {
    display: flex;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    .box {
      display: flex;
      align-items: center;
      padding-left: 70px;
      width: 100%;
      height: 50px;
      color: #fff;
      font-size: 14px;
      background: url("~@/assets/images/operate/icon4.png") no-repeat top center /
        100% 100%;
      span {
        margin-right: 120px;
        font-weight: 700;
      }
      p {
        span {
          color: #60fff6;
          font-size: 20px;
          margin-right: 5px;
          font-weight: normal;
        }
      }
    }
    .box:nth-child(1) {
      margin-right: 20px;
      span {
        font-weight: 700;
      }
    }
  }
  .rightChart2-box {
    position: relative;
    flex: 1;
    width: 100%;
    .c {
      display: flex;
      align-items: center;
      position: absolute;
      z-index: 5;
      font-size: 12px;
      .icon {
        width: 14px;
        height: 10px;
        margin-right: 5px;
        margin-top: 5px;
      }
    }
    .c1 {
      top: 22px;
      left: 130px;
      color: #60fff6;
      .icon {
        background: url("~@/assets/images/operate/icon5.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c2 {
      top: 82px;
      left: 576px;
      color: #60fff6;
      .icon {
        background: url("~@/assets/images/operate/icon5.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c3 {
      top: 118px;
      left: 780px;
      color: #42ff00;
      .icon {
        background: url("~@/assets/images/operate/icon9.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c4 {
      top: 150px;
      left: 660px;
      color: #fff;
      .icon {
        background: url("~@/assets/images/operate/icon6.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c11 {
      top: 84px;
      left: 35px;
      color: #ff4f4f;
      .icon {
        background: url("~@/assets/images/operate/icon11.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c5 {
      top: 242px;
      left: 345px;
      color: #ff8400;
      .icon {
        background: url("~@/assets/images/operate/icon7.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c6 {
      top: 538px;
      left: 550px;
      color: #ffc600;
      .icon {
        background: url("~@/assets/images/operate/icon8.png") no-repeat top
          center / 100% 100%;
      }
    }
    .c7 {
      display: flex;
      align-items: center;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: rgba(96, 255, 246, 1);
        box-shadow: 0 0 1px 3px rgba(96, 255, 246, 0.6);
      }
      &.left {
        top: 83px;
        left: 138px;
      }
      &.right {
        top: 83px;
        left: 970px;
      }
    }
    .c8 {
      display: flex;
      align-items: center;
      left: 500px;
      top: 132px;
      color: #42ff00;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #42ff00;
        box-shadow: 0 0 1px 3px rgba(66, 255, 0, 0.6);
      }
    }
    .c9-left {
      display: flex;
      align-items: center;
      left: 108px;
      top: 320px;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
      }
    }
    .c9-right {
      display: flex;
      align-items: center;
      right: 200px;
      top: 320px;
      color: #fff;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.6);
      }
    }
    .c10 {
      display: flex;
      align-items: center;
      left: 370px;
      top: 350px;
      color: #ff8400;
      .icon {
        width: 8px;
        height: 8px;
        margin: 0;
        margin-right: 7px;
        border-radius: 50%;
        background-color: rgba(255, 132, 0, 1);
        box-shadow: 0 0 1px 3px rgba(255, 132, 0, 0.6);
      }
    }
  }
  #rightChart2-copy {
    width: 100%;
    height: 100%;
    // background: url("~@/assets/images/operate/big_chart_bg.png") no-repeat 30px
    //   44px / 1118px 517px;
  }
  #rightChart3-copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: url("~@/assets/images/operate/big_chart_bg.png") no-repeat 30px
    //   44px / 1118px 517px;
  }
}
.xlfa-dialog ::v-deep {
  .table
    .list
    .row:last-child
    .el-form[data-v-7e8e4bd8]
    .el-form-item
    .el-form-item__content
    .el-form-item__error {
    padding-left: 10px !important;
  }
}
.tjfz:hover {
  cursor: pointer;
  background-color: rgba(0, 255, 255, 0.3) !important;
}
.detail-dialog ::v-deep {
  .el-dialog {
    width: 1200px;
    height: 780px;
    .content {
      width: 100%;
      height: 690px;
      overflow: auto;
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 6px !important; // 竖向滚动条宽度
        height: 0 !important; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc !important;
        border-radius: 2px !important;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: transparent !important;
      }
      .row {
        display: flex;
        width: 100%;
        min-height: 130px;
        margin-bottom: 10px;
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 270px;
          background-color: rgba(96, 255, 246, 0.2);
          font-size: 20px;
        }
        .right {
          display: flex;
          align-items: center;
          padding: 12px 35px 12px 35px;
          background-color: rgba(96, 255, 246, 0.1);
          flex: 1;
          line-height: 28px;
          font-size: 20px;
          h4 {
            margin-right: 15px;
            color: #00ffff;
            font-size: 24px;
          }
          span {
            margin-top: 2px;
            color: #fff;
            font-size: 20px;
          }
        }
      }
      .row:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.teshu {
  display: flex;
  flex-direction: column;
  span:nth-child(1) {
    margin-bottom: 3px;
  }
}
</style>
