<template>
  <div class="water-analysis">
    <div class="btn-box">
      <button
        class="hqyjcz"
        @click="hqyjczOpen"
        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="analysis-left" v-show="isShow" v-loading="pageLoading1">
      <BigPanel title="水质实时在线" class="top2">
        <template #title>
          <el-select
            v-model="selectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
            class="big-panel-select"
            @change="waterQualityBtn"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div class="p">
          <div class="p-line">
            <div
              class="icon"
              :class="{
                l1: lineIcon === 'Ⅰ类水',
                l2: lineIcon === 'Ⅱ类水',
                l3: lineIcon === 'Ⅲ类水',
                l4:
                  lineIcon !== 'Ⅰ类水' &&
                  lineIcon !== 'Ⅱ类水' &&
                  lineIcon !== 'Ⅲ类水',
              }"
            ></div>
          </div>
          <div class="p-box">
            <span v-for="(item, index) in leftTop2Arr1" :key="index">
              {{ item }}
            </span>
          </div>
        </div>
        <div class="b" :key="bKey">
          <div class="box" v-for="(item, index) in waterQuality" :key="index">
            <p>{{ item.title }}</p>
            <p>
              <animate-number
                class="animate-number"
                from="0"
                :to="item.content"
                duration="1000"
                easing="easeOutQuad"
                :formatter="(num) => num.toFixed(2)"
              />
            </p>
          </div>
        </div>
      </BigPanel>

      <BigPanel title="水质实时在线" class="top3">
        <template #title>
          <div class="is-big" @click="openChart('水质实时在线')"></div>
        </template>
        <div class="big-panel-btn-box">
          <button
            v-for="(item, index) in waterBtnArr"
            :key="index"
            @click="waterChange(index)"
            :class="{ btnActive: waterIndex === index }"
          >
            {{ item }}
          </button>
        </div>
        <div id="left-chart1"></div>
      </BigPanel>
    </div>
    <div class="analysis-right" v-show="isShow" v-loading="pageLoading2">
      <BigPanel title="数据采集" class="top1">
        <div class="content" :key="animateKey">
          <div class="box" v-for="item in 2" :key="item">
            <span>{{ item === 1 ? "采集时间" : "数据量" }}</span>
            <p>
              <animate-number
                v-if="waterStatisticsData.diffHour"
                class="animate-number"
                from="0"
                :to="
                  item === 1
                    ? waterStatisticsData.diffHour
                    : waterStatisticsData.total
                "
                duration="1000"
                easing="easeOutQuad"
                :formatter="(num) => Number(num).toFixed(0)"
              />
              {{ item === 1 ? "小时" : "条" }}
            </p>
          </div>
        </div>
      </BigPanel>
      <BigPanel title="监测记录" class="top2">
        <template #title>
          <button class="rt2Btn" @click="rt2Btn">查看更多</button>
        </template>
        <Scroll6
          :listScrollData="listScrollData"
          :listScrollOption="listScrollOption"
          :num="5"
          :key="scrollKey"
        ></Scroll6>
      </BigPanel>
    </div>

    <BigChart :show="chartShow" @close-dialog="closeChart" :title="chartTitle">
      <div class="big-chart-btn-box" v-if="bigChartBtnArr.length > 0">
        <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-chart" v-if="reset"></div>
    </BigChart>

    <BigChart
      v-if="chartShow2"
      :show="chartShow2"
      @close-dialog="closeDialog"
      title="监测记录"
      class="chart-show2"
    >
      <!-- 标签页 -->
      <el-tabs
        v-model="activeName"
        @tab-click="elTabBtn"
        v-loading="elTabsLoading"
      >
        <el-tab-pane label="数据监测曲线" name="data">
          <!-- 表单 -->
          <el-form :model="formData" :rules="formRules" ref="form">
            <el-form-item label="监测点位：" prop="dian">
              <!-- 下拉选择 -->
              <el-select
                v-model="selectValue1"
                placeholder="请选择"
                filterable
                @change="selectBtn"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间选择：">
              <el-date-picker
                v-model="formData.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :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="chart-list webkit-scroll-line">
            <div
              class="chart-box"
              v-for="(item, key, index) in vForObj.content"
              :key="index"
            >
              <div class="title">{{ item.txt }}</div>
              <div class="chart" :id="`chart-${key}`"></div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 标签页 -->
        <el-tab-pane label="历史记录" name="his">
          <!-- 表单 -->
          <el-form :model="formData" :rules="formRules" ref="form">
            <el-form-item label="监测点位：" prop="dian">
              <!-- 下拉选择 -->
              <el-select
                v-model="selectValue1"
                placeholder="请选择"
                filterable
                @change="selectBtn"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间选择：">
              <el-date-picker
                v-model="formData.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :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="dialog-table">
            <div class="table-title">
              <div class="column column1">监测时间</div>
              <div class="column column2">监测点位置</div>
              <div class="column column3">
                <div class="top" v-text="'温度\n℃'"></div>
                <div class="bottom">人为造成周平均升温≤1.降温≤2</div>
              </div>
              <div class="column column4">
                <div class="top">pH</div>
                <div class="bottom">6-9</div>
              </div>
              <div class="column column5">
                <div class="top">溶解氧 mg/L</div>
                <div class="bottom">
                  <div class="col">Ⅰ类<br />7.5</div>
                  <div class="col">Ⅱ类<br />6</div>
                  <div class="col">Ⅲ类<br />5</div>
                </div>
              </div>
              <div class="column column6">
                <div class="top">高猛酸盐指数≤</div>
                <div class="bottom">
                  <div class="col">Ⅰ类<br />2</div>
                  <div class="col">Ⅱ类<br />4</div>
                  <div class="col">Ⅲ类<br />6</div>
                </div>
              </div>
              <div class="column column7">
                <div class="top">化学需氧量<br />（COD）≤</div>
                <div class="bottom">
                  <div class="col">Ⅰ类<br />15</div>
                  <div class="col">Ⅱ类<br />15</div>
                  <div class="col">Ⅲ类<br />20</div>
                </div>
              </div>
              <div class="column column8">
                <div class="top">五日生化需氧量<br />（BODs）≤</div>
                <div class="bottom">
                  <div class="col">Ⅰ类<br />3</div>
                  <div class="col">Ⅱ类<br />3</div>
                  <div class="col">Ⅲ类<br />4</div>
                </div>
              </div>
              <div class="column column9">
                <div class="top">氨氮≤</div>
                <div class="bottom">
                  <div class="col">Ⅰ类<br />0.15</div>
                  <div class="col">Ⅱ类<br />0.5</div>
                  <div class="col">Ⅲ类<br />1.0</div>
                </div>
              </div>
              <div class="column column10">
                <div class="top">浊度<br />NTU</div>
                <div class="bottom">≤1水源与净水技术条件限制时为3</div>
              </div>
              <div class="column column11">水质<br />类别</div>
            </div>
            <div class="table-content">
              <div class="content" :class="{ p1160: hisData.length < 5 }">
                <div class="row" v-for="(item, index) in hisData" :key="index">
                  <div class="column column1">{{ item.record_date }}</div>
                  <div class="column column2">{{ item.name }}</div>
                  <div class="column column3">{{ item.temperature_value }}</div>
                  <div class="column column4">{{ item.ph_value }}</div>
                  <div class="column column5">{{ item.do_value }}</div>
                  <div class="column column6">
                    {{ item.permanganate_value }}
                  </div>
                  <div class="column column7">{{ item.cod_value }}</div>
                  <div class="column column8">{{ item.bod_five_value }}</div>
                  <div class="column column9">{{ item.nh_n_value }}</div>
                  <div class="column column10">{{ item.ntu_value }}</div>
                  <div class="column column11">
                    {{ item.waterquality_value }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            background
            :page-size="query.pageSize"
            :total="total"
            :pager-count="7"
            :current-page="query.page"
            layout="prev, pager, next, jumper, ->, slot"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          >
            <span class="record">
              本页&nbsp;{{ hisData.length }}&nbsp;条，共&nbsp;{{
                total
              }}&nbsp;条记录
            </span>
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </BigChart>
    <Process2
      dialogTitle="水质"
      :hqyjczShow="hqyjczShow"
      @hqyjcz-close="hqyjczClose"
    />
  </div>
</template>

<script>
import { getWaterQualityListApi, getWaterQualityApi, getWaterQualityDayApi, getWaterStatisticsApi } from '@/api/operate.js'
import { getReservoirRealApi } from '@/api/reservoir.js'
import scroll6Obj from '@/api/constant/scroll6.js'
import Process2 from './process2.vue'
export default {
  name: 'WaterAnalysis',
  components: {
    Process2
  },
  created () {
    this.pageLoading1 = true
    this.pageLoading2 = true
  },
  async mounted () {
    await this.getWaterQuality()
    await this.getWaterStatisticsData()
    this.pageLoading1 = false
    this.pageLoading2 = false
    this.listScrollDataRes5.forEach(item => {
      for (const key in item) {
        if (key === 'name' || key === 'record_date') {
          continue
        } else {
          this.listScrollData.push({
            place: item.name,
            type: scroll6Obj[key],
            time: item.record_date,
            val: item[key]
          })
        }
      }
    })
    this.scrollKey = Date.now()
    this.initLeftChart1(this.waterChartObj.x, this.waterChartObj.y[0])
  },
  destroyed () {
    window.onresize = null
  },
  data () {
    return {
      elTabsLoading: false,
      // 弹窗历史记录分页
      query: {
        point_id: '',
        start_date: '',
        end_date: '',
        pageSize: 10, // 每页显示多少条
        page: 1 // 当前在第几页
      },
      total: 0,
      hisData: [],
      // 旱情预警处置
      hqyjczShow: false,
      // scroll6数据
      listScrollDataRes5: null,
      recordObj2: {
        ku: {},
        flowOut: {},
        kuX: [],
        flowoutX: []
      },
      recordObj: {
        ku: {},
        flowOut: {},
        kuX: [],
        flowoutX: []
      },
      vForObj: {
        x: [],
        content: {}
      },
      scrollKey: 0,
      animateKey: 0,
      // 数据统计
      waterStatisticsData: {},
      waterChartObj: {
        x: [],
        y: {
          0: [],
          1: [],
          2: [],
          3: []
        }
      },
      waterBtnArr: ['浊度', 'pH', '溶解氧', '温度'],
      bigChartBtnArr: [],
      bigChartBtnIndex: 0,
      pageLoading1: false,
      pageLoading2: false,
      bKey: 0,
      // 水质详情信息
      waterQuality: [],
      waterIndex: 0,
      waterL: '',
      //
      chartList: ['浊度', '溶解氧', '总氮', '氨氮', 'pH', '温度'],
      // 选中的标签页
      activeName: 'data',
      // 表单
      formData: {
        date: null
      },
      formRules: {
        dian: [
          { required: true, message: '请选择点位', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ]
      },
      // 下拉选择
      selectOptions: [],
      selectValue1: 25,
      chartShow2: false,
      // 弹层
      reset: true,
      chartShow: false,
      chartTitle: '图表',
      // 显示隐藏全部
      isShow: true,
      // 水质实时在线1
      selectValue: '',
      options: [],
      lineIcon: 'Ⅱ类水',
      leftTop2Arr1: ['Ⅰ 类', 'Ⅱ 类', 'Ⅲ 类', '低于Ⅲ 类'],
      listScrollData: [],
      listScrollOption: {
        step: 0.5, // 数值越大滚动速度越快
        limitMoveNum: 15, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1 // 方向:  0-往下  1-往上  2-向左  3-向右
        // singleHeight: 60 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      }

    }
  },
  methods: {
    // 渲染弹窗图表
    initAllDialigChart () {
      this.$nextTick(() => {
        this.initTemperatureChart(this.vForObj.x, this.vForObj.content.temperature_value.arr)
        this.initCsqChart(this.vForObj.x, this.vForObj.content.csq_value.arr)
        this.initAlgaeChart(this.vForObj.x, this.vForObj.content.algae_value.arr)
        this.initCyanobacteriaChart(this.vForObj.x, this.vForObj.content.cyanobacteria_value.arr)
        this.initDiatomsChart(this.vForObj.x, this.vForObj.content.diatoms_value.arr)
        this.initCryptoalgaeChart(this.vForObj.x, this.vForObj.content.cryptoalgae_value.arr)
        this.initPhChart(this.vForObj.x, this.vForObj.content.ph_value.arr)
        this.initNtuChart(this.vForObj.x, this.vForObj.content.ntu_value.arr)
        this.initChlorophyllChart(this.vForObj.x, this.vForObj.content.chlorophyll_value.arr)
        this.initDoChart(this.vForObj.x, this.vForObj.content.do_value.arr)
        this.initPermanganateChart(this.vForObj.x, this.vForObj.content.permanganate_value.arr)
        this.initNh_nChart(this.vForObj.x, this.vForObj.content.nh_n_value.arr)
        this.initPhosphorusChart(this.vForObj.x, this.vForObj.content.phosphorus_value.arr)
        this.initManganeseChart(this.vForObj.x, this.vForObj.content.manganese_value.arr)
        this.initHumidityChart(this.vForObj.x, this.vForObj.content.humidity_value.arr)
        this.initAirChart(this.vForObj.x, this.vForObj.content.air_value.arr)
        this.initWindspeedChart(this.vForObj.x, this.vForObj.content.windspeed_value.arr)
        this.initWaterqualityChart(this.vForObj.x, this.vForObj.content.waterquality_value.arr)
        this.initCodChart(this.vForObj.x, this.vForObj.content.cod_value.arr)
        this.initBod_fiveChart(this.vForObj.x, this.vForObj.content.bod_five_value.arr)
        this.initCopperChart(this.vForObj.x, this.vForObj.content.copper_value.arr)
        this.initZincChart(this.vForObj.x, this.vForObj.content.zinc_value.arr)
        this.initFluorideChart(this.vForObj.x, this.vForObj.content.fluoride_value.arr)
        this.initArsenicChart(this.vForObj.x, this.vForObj.content.arsenic_value.arr)
        this.initMercuryChart(this.vForObj.x, this.vForObj.content.mercury_value.arr)
        this.initCadmiumChart(this.vForObj.x, this.vForObj.content.cadmium_value.arr)
        this.initChromiumChart(this.vForObj.x, this.vForObj.content.chromium_value.arr)
        this.initCfuChart(this.vForObj.x, this.vForObj.content.cfu_value.arr)
      })
    },
    // 旱情预警处置
    hqyjczOpen () {
      this.hqyjczShow = true
    },
    hqyjczClose () {
      this.hqyjczShow = false
    },
    // dialogBtn
    async selectBtn (val) {
      console.log(val)
      if (this.activeName === 'data') {
        if (this.formData.date === null) {
          if (val === 25) {
            this.vForObj.x = this.recordObj.kuX
            this.vForObj.content = this.recordObj.ku
            this.initAllDialigChart()
          } else if (val === 26) {
            this.vForObj.x = this.recordObj.flowoutX
            this.vForObj.content = this.recordObj.flowOut
            this.initAllDialigChart()
          }
        } else {
          const res = await getWaterQualityDayApi({
            point_id: this.selectValue1,
            start_date: this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD'),
            end_date: this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          })
          console.log('查看筛选时间后', res.data)
          res.data.reverse()
          const obj1 = {
            x: [],
            content: {}
          }
          res.data.forEach(item => {
            obj1.x.push(item.record_date)
            for (const key in item) {
              if (key === 'name' || key === 'record_date') {
                continue
              } else {
                if (!obj1.content[key]) {
                  obj1.content[key] = {
                    txt: '',
                    arr: []
                  }
                  obj1.content[key].txt = scroll6Obj[key]
                  obj1.content[key].arr.push(item[key])
                } else {
                  obj1.content[key].arr.push(item[key])
                }
              }
            }
          })
          this.vForObj = obj1
          console.log('加上时间地点后筛选', this.vForObj)
          this.initAllDialigChart()
        }
      } else if (this.activeName === 'his') {
        let his = null
        if (this.formData.date === null) {
          this.query.point_id = this.selectValue1
          this.query.start_date = ''
          this.query.end_date = ''
          his = await getWaterQualityDayApi(this.query)
        } else {
          this.query.point_id = this.selectValue1
          this.query.start_date = this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD')
          this.query.end_date = this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          his = await getWaterQualityDayApi(this.query)
        }
        his.data.reverse()
        console.log('查看一下结果', his)
        const newHis = his.data.map(item => {
          item.temperature_value = Number(item.temperature_value).toFixed(0)
          return item
        })
        this.hisData = newHis
      }
    },
    // 数据采集
    async getWaterStatisticsData () {
      const res = await getWaterStatisticsApi()
      console.log('数据采集', res)
      this.waterStatisticsData = res
      this.animateKey = Date.now()
    },
    bigChartBtn (i) {
      this.bigChartBtnIndex = i
      this.initLeftChart1Copy(this.waterChartObj.x, this.waterChartObj.y[this.bigChartBtnIndex])
    },
    waterChange (i) {
      this.waterIndex = i
      this.initLeftChart1(this.waterChartObj.x, this.waterChartObj.y[i])
    },
    async waterQualityBtn (value) {
      console.log(value)
      const res2 = await getWaterQualityApi(value)
      console.log('水质实时在线切换后的数据', res2)
      this.waterQuality = [
        {
          title: '水温(℃)',
          content: res2.temperature_value
        },
        {
          title: '浑浊度(NTU)',
          content: res2.ntu_value
        },
        {
          title: 'pH值(无量纲)',
          content: res2.ph_value
        },
        {
          title: '溶解氧(mg/L)',
          content: res2.do_value
        },
        {
          title: '高锰酸钾指数(mg/L)',
          content: res2.permanganate_value
        },
        {
          title: '化学需氧量(mg/L)',
          content: res2.cod_value
        },
        {
          title: '五日生化需氧量(mg/L)',
          content: res2.bod_five_value
        },
        {
          title: '氨氮(mg/L)',
          content: res2.nh_n_value
        }
      ]
      this.bKey = Date.now()
    },
    // 水质实时在线
    async getWaterQuality () {
      const res1 = await getWaterQualityListApi()
      console.log('水质列表', res1)
      res1.forEach(item => {
        this.options.push({
          value: item.id,
          label: item.name
        })
        this.selectOptions.push({
          value: item.id,
          label: item.name
        })
      })
      this.selectValue = res1[0].id
      const res2 = await getWaterQualityApi(this.selectValue)
      console.log('水质详情信息', res2)
      const res3 = await getReservoirRealApi()
      this.waterL = res3.waterquality_value
      console.log('水质等级', this.waterL)
      const res4 = await getWaterQualityDayApi({
        point_id: this.selectValue
      })
      const res5 = await getWaterQualityDayApi()
      console.log('监测记录', res5.data)
      res5.data.reverse()
      this.listScrollDataRes5 = res5.data
      res5.data.forEach(item => {
        if (item.name === '库中心') {
          this.recordObj.kuX.push(item.record_date)
          for (const key in item) {
            if (key === 'name' || key === 'record_date') {
              continue
            } else {
              if (!this.recordObj.ku[key]) {
                this.recordObj.ku[key] = {
                  txt: '',
                  arr: []
                }
                this.recordObj.ku[key].txt = scroll6Obj[key]
                this.recordObj.ku[key].arr.push(item[key])
              } else {
                this.recordObj.ku[key].arr.push(item[key])
              }
            }
          }
        } else if (item.name === '出水口') {
          this.recordObj.flowoutX.push(item.record_date)
          for (const key in item) {
            if (key === 'name' || key === 'record_date') {
              continue
            } else {
              if (!this.recordObj.flowOut[key]) {
                this.recordObj.flowOut[key] = {
                  txt: '',
                  arr: []
                }
                this.recordObj.flowOut[key].txt = scroll6Obj[key]
                this.recordObj.flowOut[key].arr.push(item[key])
              } else {
                this.recordObj.flowOut[key].arr.push(item[key])
              }
            }
          }
        }
      })
      console.log('查看一下最终弹窗', this.recordObj)
      this.vForObj.x = this.recordObj.kuX
      this.vForObj.content = this.recordObj.ku
      console.log('查看监测记录转换后', this.listScrollData)
      res4.data.reverse()
      console.log('水质每天的数据统计图', res4.data)
      res4.data.forEach(item => {
        this.waterChartObj.x.push(item.record_date)
        this.waterChartObj.y[0].push(item.ntu_value)
        this.waterChartObj.y[1].push(item.ph_value)
        this.waterChartObj.y[2].push(item.do_value)
        this.waterChartObj.y[3].push(item.temperature_value)
      })
      console.log('水质事实现在线chart', this.waterChartObj)
      this.waterQuality = [
        {
          title: '水温(℃)',
          content: res2.temperature_value
        },
        {
          title: '浑浊度(NTU)',
          content: res2.ntu_value
        },
        {
          title: 'pH值(无量纲)',
          content: res2.ph_value
        },
        {
          title: '溶解氧(mg/L)',
          content: res2.do_value
        },
        {
          title: '高锰酸钾指数(mg/L)',
          content: res2.permanganate_value
        },
        {
          title: '化学需氧量(mg/L)',
          content: res2.cod_value
        },
        {
          title: '五日生化需氧量(mg/L)',
          content: res2.bod_five_value
        },
        {
          title: '氨氮(mg/L)',
          content: res2.nh_n_value
        }
      ]
    },
    // 温度
    initTemperatureChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-temperature_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-temperature_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：℃',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(0) + ' ℃'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // CSQ值
    initCsqChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-csq_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-csq_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: 'CSQ',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 绿藻
    initAlgaeChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-algae_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-algae_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 蓝藻
    initCyanobacteriaChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-cyanobacteria_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-cyanobacteria_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 硅藻
    initDiatomsChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-diatoms_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-diatoms_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 隐藻
    initCryptoalgaeChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-cryptoalgae_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-cryptoalgae_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // pH值
    initPhChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-ph_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-ph_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: 'pH值',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 浊度
    initNtuChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-ntu_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-ntu_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 叶绿素
    initChlorophyllChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-chlorophyll_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-chlorophyll_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 溶解氧
    initDoChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-do_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-do_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 高锰酸钾指数
    initPermanganateChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-permanganate_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-permanganate_value'))
      const option = {
        grid: {
          show: false,
          left: 25,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 氨氮
    initNh_nChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-nh_n_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-nh_n_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 总磷
    initPhosphorusChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-phosphorus_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-phosphorus_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 锰
    initManganeseChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-manganese_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-manganese_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 湿度
    initHumidityChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-humidity_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-humidity_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 空气
    initAirChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-air_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-air_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 风速
    initWindspeedChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-windspeed_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-windspeed_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 水质
    initWaterqualityChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-waterquality_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-waterquality_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 化学需氧量
    initCodChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-cod_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-cod_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 五日生化需氧量
    initBod_fiveChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-bod_five_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-bod_five_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 铜
    initCopperChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-copper_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-copper_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 锌
    initZincChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-zinc_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-zinc_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 氟化物
    initFluorideChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-fluoride_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-fluoride_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 砷
    initArsenicChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-arsenic_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-arsenic_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 汞
    initMercuryChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-mercury_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-mercury_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 镉
    initCadmiumChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-cadmium_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-cadmium_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 铬
    initChromiumChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-chromium_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-chromium_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 耐热大肠菌群
    initCfuChart (x, y) {
      let myChart = this.echarts.init(document.getElementById('chart-cfu_value'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('chart-cfu_value'))
      const option = {
        grid: {
          show: false,
          left: 20,
          right: 40,
          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: 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: '单位：',
          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: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#01F4A8'
            },
            tooltip: {
              valueFormatter: (value) => Number(value).toFixed(2) + ' m³/s'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 分页
    async changePage (currPage) {
      console.log('切换分页', currPage)
      let his = null
      if (this.formData.date === null) {
        this.query.point_id = this.selectValue1
        this.query.start_date = ''
        this.query.end_date = ''
        this.query.page = currPage
        his = await getWaterQualityDayApi(this.query)
      } else {
        this.query.point_id = this.selectValue1
        this.query.start_date = this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD')
        this.query.end_date = this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
        this.query.page = currPage
        his = await getWaterQualityDayApi(this.query)
      }
      his.data.reverse()
      console.log('查看一下结果', his)
      const newHis = his.data.map(item => {
        item.temperature_value = Number(item.temperature_value).toFixed(0)
        return item
      })
      this.hisData = newHis
    },
    daochu () {
      console.log('导出')
    },
    // 日期选择器
    async dateChange (val) {
      this.elTabsLoading = true
      this.query.page = 1
      console.log('时间改变事件触发', val)
      if (val === null) {
        this.query.start_date = ''
        this.query.end_date = ''
        if (this.activeName === 'data') {
          const res = await getWaterQualityDayApi({
            point_id: this.selectValue1
          })
          console.log('查看筛选时间后', res.data)
          const obj1 = {
            x: [],
            content: {}
          }
          res.data.reverse()
          res.data.forEach(item => {
            obj1.x.push(item.record_date)
            for (const key in item) {
              if (key === 'name' || key === 'record_date') {
                continue
              } else {
                if (!obj1.content[key]) {
                  obj1.content[key] = {
                    txt: '',
                    arr: []
                  }
                  obj1.content[key].txt = scroll6Obj[key]
                  obj1.content[key].arr.push(item[key])
                } else {
                  obj1.content[key].arr.push(item[key])
                }
              }
            }
          })
          this.vForObj = obj1
          console.log('加上时间地点后筛选', this.vForObj)
          this.initAllDialigChart()
        } else if (this.activeName === 'his') {
          let his = null
          this.query.point_id = this.selectValue1
          this.query.start_date = ''
          this.query.end_date = ''
          his = await getWaterQualityDayApi(this.query)

          console.log('查看一下结果', his.data)
          his.data.reverse()
          const newHis = his.data.map(item => {
            item.temperature_value = Number(item.temperature_value).toFixed(0)
            return item
          })
          this.hisData = newHis
        }
      } else {
        if (this.activeName === 'data') {
          const res = await getWaterQualityDayApi({
            point_id: this.selectValue1,
            start_date: this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD'),
            end_date: this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          })
          console.log('查看筛选时间后', res.data)
          const obj1 = {
            x: [],
            content: {}
          }
          res.data.reverse()
          res.data.forEach(item => {
            obj1.x.push(item.record_date)
            for (const key in item) {
              if (key === 'name' || key === 'record_date') {
                continue
              } else {
                if (!obj1.content[key]) {
                  obj1.content[key] = {
                    txt: '',
                    arr: []
                  }
                  obj1.content[key].txt = scroll6Obj[key]
                  obj1.content[key].arr.push(item[key])
                } else {
                  obj1.content[key].arr.push(item[key])
                }
              }
            }
          })
          this.vForObj = obj1
          console.log('加上时间地点后筛选', this.vForObj)
          this.initAllDialigChart()
        } else if (this.activeName === 'his') {
          let his = null
          this.query.point_id = this.selectValue1
          this.query.start_date = this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD')
          this.query.end_date = this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          his = await getWaterQualityDayApi(this.query)
          console.log('查看一下结果', his.data)
          his.data.reverse()
          const newHis = his.data.map(item => {
            item.temperature_value = Number(item.temperature_value).toFixed(0)
            return item
          })
          this.hisData = newHis
        }
      }
      this.elTabsLoading = false
    },
    // 标签页
    async elTabBtn (tab, event) {
      console.log(tab.label, event)
      this.elTabsLoading = true
      if (tab.label === '数据监测曲线') {
        if (this.formData.date === null) {
          if (this.selectValue1 === 25) {
            this.vForObj.x = this.recordObj.kuX
            this.vForObj.content = this.recordObj.ku
            this.initAllDialigChart()
          } else if (this.selectValue1 === 26) {
            this.vForObj.x = this.recordObj.flowoutX
            this.vForObj.content = this.recordObj.flowOut
            this.initAllDialigChart()
          }
        } else {
          this.query.point_id = this.selectValue1
          this.query.start_date = this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD')
          this.query.end_date = this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          const res = await getWaterQualityDayApi(this.query)
          console.log('标签切换回去查看筛选时间后', res.data)
          res.data.reverse()
          const obj1 = {
            x: [],
            content: {}
          }
          res.data.forEach(item => {
            obj1.x.push(item.record_date)
            for (const key in item) {
              if (key === 'name' || key === 'record_date') {
                continue
              } else {
                if (!obj1.content[key]) {
                  obj1.content[key] = {
                    txt: '',
                    arr: []
                  }
                  obj1.content[key].txt = scroll6Obj[key]
                  obj1.content[key].arr.push(item[key])
                } else {
                  obj1.content[key].arr.push(item[key])
                }
              }
            }
          })
          this.vForObj = obj1
          console.log('标签切换回去加上时间地点后筛选', this.vForObj)
          this.initAllDialigChart()
        }
      } else if (tab.label === '历史记录') {
        let his = null
        if (this.formData.date === null) {
          this.query.point_id = this.selectValue1
          this.query.start_date = ''
          this.query.end_date = ''
          his = await getWaterQualityDayApi(this.query)
        } else {
          this.query.point_id = this.selectValue1
          this.query.start_date = this.dayjs(+new Date(this.formData.date[0])).format('YYYY-MM-DD')
          this.query.end_date = this.dayjs(+new Date(this.formData.date[1])).format('YYYY-MM-DD')
          his = await getWaterQualityDayApi(this.query)
        }
        console.log('查看一下结果', his)
        this.total = his.total
        his.data.reverse()
        const newHis = his.data.map(item => {
          item.temperature_value = Number(item.temperature_value).toFixed(0)
          return item
        })
        this.hisData = newHis
      }
      this.elTabsLoading = false
    },
    closeDialog () {
      this.chartShow2 = false
      this.$refs.form.resetFields()
      this.selectValue1 = 25
      this.formData.date = []
      setTimeout(() => {
        this.activeName = 'data'
      }, 300)
    },
    rt2Btn () {
      console.log(this.vForObj)
      this.chartShow2 = true
      this.$nextTick(() => {
        this.initTemperatureChart(this.recordObj.kuX, this.recordObj.ku.temperature_value.arr)
        this.initCsqChart(this.recordObj.kuX, this.recordObj.ku.csq_value.arr)
        this.initAlgaeChart(this.recordObj.kuX, this.recordObj.ku.algae_value.arr)
        this.initCyanobacteriaChart(this.recordObj.kuX, this.recordObj.ku.cyanobacteria_value.arr)
        this.initDiatomsChart(this.recordObj.kuX, this.recordObj.ku.diatoms_value.arr)
        this.initCryptoalgaeChart(this.recordObj.kuX, this.recordObj.ku.cryptoalgae_value.arr)
        this.initPhChart(this.recordObj.kuX, this.recordObj.ku.ph_value.arr)
        this.initNtuChart(this.recordObj.kuX, this.recordObj.ku.ntu_value.arr)
        this.initChlorophyllChart(this.recordObj.kuX, this.recordObj.ku.chlorophyll_value.arr)
        this.initDoChart(this.recordObj.kuX, this.recordObj.ku.do_value.arr)
        this.initPermanganateChart(this.recordObj.kuX, this.recordObj.ku.permanganate_value.arr)
        this.initNh_nChart(this.recordObj.kuX, this.recordObj.ku.nh_n_value.arr)
        this.initPhosphorusChart(this.recordObj.kuX, this.recordObj.ku.phosphorus_value.arr)
        this.initManganeseChart(this.recordObj.kuX, this.recordObj.ku.manganese_value.arr)
        this.initHumidityChart(this.recordObj.kuX, this.recordObj.ku.humidity_value.arr)
        this.initAirChart(this.recordObj.kuX, this.recordObj.ku.air_value.arr)
        this.initWindspeedChart(this.recordObj.kuX, this.recordObj.ku.windspeed_value.arr)
        this.initWaterqualityChart(this.recordObj.kuX, this.recordObj.ku.waterquality_value.arr)
        this.initCodChart(this.recordObj.kuX, this.recordObj.ku.cod_value.arr)
        this.initBod_fiveChart(this.recordObj.kuX, this.recordObj.ku.bod_five_value.arr)
        this.initCopperChart(this.recordObj.kuX, this.recordObj.ku.copper_value.arr)
        this.initZincChart(this.recordObj.kuX, this.recordObj.ku.zinc_value.arr)
        this.initFluorideChart(this.recordObj.kuX, this.recordObj.ku.fluoride_value.arr)
        this.initArsenicChart(this.recordObj.kuX, this.recordObj.ku.arsenic_value.arr)
        this.initMercuryChart(this.recordObj.kuX, this.recordObj.ku.mercury_value.arr)
        this.initCadmiumChart(this.recordObj.kuX, this.recordObj.ku.cadmium_value.arr)
        this.initChromiumChart(this.recordObj.kuX, this.recordObj.ku.chromium_value.arr)
        this.initCfuChart(this.recordObj.kuX, this.recordObj.ku.cfu_value.arr)
      })
    },
    isShowBtn () {
      this.isShow = !this.isShow
    },
    openChart (title) {
      this.chartTitle = title
      this.chartShow = true

      if (title === '水质实时在线') {
        this.bigChartBtnArr = this.waterBtnArr
        this.bigChartBtnIndex = this.waterIndex
        this.$nextTick(() => this.initLeftChart1Copy(this.waterChartObj.x, this.waterChartObj.y[this.bigChartBtnIndex]))
      }
    },
    closeChart (flag) {
      this.chartShow = flag
      this.reset = false
      this.bigChartBtnArr = []
      this.bigChartBtnIndex = 0
    },
    initLeftChart1 (x, y) {
      let myChart = this.echarts.init(document.getElementById('left-chart1'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('left-chart1'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 10,
          bottom: 0,
          left: 20,
          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(255, 198, 0, 1)' },
            { offset: 1, color: 'rgba(255, 198, 0, 0)' }
          ]
        )],
        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: '单位：',
          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: this.waterIndex === 0 ? '浊度' : this.waterIndex === 1 ? 'pH' : this.waterIndex === 2 ? '溶解氧' : '温度',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FFC600'
            },
            tooltip: {
              valueFormatter: (value) => value
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initLeftChart1Copy (x, y) {
      let myChart = this.echarts.init(document.getElementById('big-chart'))
      myChart.dispose()
      myChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: false,
          top: 30,
          right: 10,
          bottom: 0,
          left: 20,
          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(255, 198, 0, 1)' },
            { offset: 1, color: 'rgba(255, 198, 0, 0)' }
          ]
        )],
        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: '单位：',
          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: this.waterIndex === 0 ? '浊度' : this.waterIndex === 1 ? 'pH' : this.waterIndex === 2 ? '溶解氧' : '温度',
            barWidth: 15,
            data: y,
            type: 'line',
            symbolSize: 0,
            areaStyle: {},
            smooth: true,
            lineStyle: {
              color: '#FFC600'
            },
            tooltip: {
              valueFormatter: (value) => value
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 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;
  }
}
.water-analysis {
  position: absolute;
  left: 0;
  top: 0;
  .analysis-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;

    .top2 {
      margin-bottom: 10px;
      .p {
        width: 100%;
        height: 120px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 10px;
        background-color: rgba(96, 255, 246, 0.1);
        .p-line {
          position: relative;
          height: 6px;
          margin: 30px 0;
          background-image: linear-gradient(90deg, #5ab9ff, #ffb515, #ff6d6d);
          border-radius: 3px;
          .icon {
            position: absolute;
            top: -3px;
            left: 16px;
            width: 12px;
            height: 20px;
            background: url("~@/assets/images/operate/tuo.png") no-repeat center /
              216% 120%;
            &.l1 {
              left: 16px;
            }
            &.l2 {
              left: 115px;
            }
            &.l3 {
              left: 211px;
            }
            &.l4 {
              left: 318px;
            }
          }
        }
        .p-box {
          display: flex;
          justify-content: space-between;
          height: 26px;
          margin-bottom: 12px;
          span {
            width: 50px;
            height: 100%;
            line-height: 26px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            font-size: 14px;
          }
          span:nth-child(1) {
            background-color: rgba(58, 137, 226, 0.5);
          }
          span:nth-child(2),
          span:nth-child(3) {
            background-color: rgba(255, 186, 0, 0.5);
          }
          span:nth-child(4) {
            width: 70px;
          }
          span:nth-child(4) {
            background-color: rgba(240, 72, 100, 0.5);
          }
        }
      }
      .b {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 400px;
        .box {
          display: flex;
          align-items: center;
          width: 100%;
          height: 40px;
          margin-bottom: 10px;
          p {
            flex: 1;
            height: 100%;
            line-height: 40px;
          }
          p:nth-child(1) {
            background-color: rgba(96, 255, 246, 0.2);
            color: #fff;
            font-size: 14px;
            text-align: center;
          }
          p:nth-child(2) {
            background-color: rgba(96, 255, 246, 0.1);
            text-align: center;
            span {
              color: #60fff6;
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
        .box:nth-child(5) {
          p:nth-child(2) span {
            color: #ff5d4c;
          }
        }
        .box:nth-child(8) {
          p:nth-child(2) span {
            color: #ffba00;
          }
        }
      }
    }
    .top3 ::v-deep {
      width: 100%;
      flex: 1;
      .btn-box {
        margin: 20px 0 10px;
      }
      #left-chart1 {
        width: 100%;
        flex: 1;
      }
    }
  }
  .analysis-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 {
      margin-bottom: 10px;
      .content {
        display: flex;
        flex: 1;
        width: 100%;
        margin-top: 10px;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          height: 84px;
          background: url("~@/assets/images/operate/icon1.png") no-repeat top
            center / 100% 100%;
          span {
            margin: 10px 0 26px;
            color: #fff;
            font-size: 14px;
          }
          p {
            color: #fff;
            font-size: 12px;
            span {
              margin-right: 5px;
              color: #ff7a4c;
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
        .box:first-child {
          margin-right: 4px;
        }
        .box:nth-child(2) {
          p span {
            color: #ffba00;
          }
        }
      }
    }
    .top2 {
      width: 100%;
      flex: 1;
      .rt2Btn {
        position: absolute;
        width: 72px;
        height: 20px;
        font-size: 14px;
        background-color: rgba(96, 255, 246, 0.3) !important;
        right: 10px;
        top: 10px;
        color: #fff;
      }
    }
  }
  .flood-panel ::v-deep {
    .panel-title {
      background: url("~@/assets/images/operate/title_bg.png") no-repeat left
        top / 100% 100%;
    }
  }
}
.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 {
      margin-bottom: 20px;
      .el-tabs__nav-wrap {
        &::after {
          background-color: rgba(96, 255, 246, 0.05);
        }
        .el-tabs__nav-scroll {
          display: flex;
          justify-content: center;
          .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%;
        .chart-list {
          height: 531px;
          margin-top: 20px;
          overflow: auto;
          .chart-box {
            display: flex;
            flex-direction: column;
            height: 460px;
            background-color: rgba(96, 255, 246, 0.05);
            margin-bottom: 20px;
            .title {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 40px;
            }
            .chart {
              flex: 1;
            }
          }
          .chart-box:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .el-tabs:nth-child(1) {
    .el-tabs__content {
      overflow: visible !important;
    }
  }
  /* 表单 */
  .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-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);
          }
        }
      }
    }
  }
}
.dialog-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 4px 0;
  text-align: center;
  background-color: rgba(96, 255, 246, 0.05);

  .table-title {
    display: flex;
    height: 201px;
    font-size: 14px;
    color: #7dfbfd;
    border-bottom: 1px solid #0c3061;
    background-color: rgba(96, 255, 246, 0.2);
    .column {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      border-right: 1px solid #0c3061;
    }
    .column1 {
      flex: 1;
    }
    .column2 {
      width: 91px;
    }
    .column3 {
      width: 47px;
      .bottom {
        padding: 0 7px;
        line-height: 17px;
      }
    }
    .column4 {
      width: 47px;
    }
    .column5 {
      width: 141px;
    }
    .column6 {
      width: 141px;
    }
    .column7 {
      width: 141px;
    }
    .column8 {
      width: 141px;
    }
    .column9 {
      width: 141px;
    }
    .column10 {
      width: 61px;
      .bottom {
        padding: 0 6px;
        line-height: 20px;
      }
    }
    .column11 {
      width: 61px;
      border: 0;
      line-height: 24px;
    }
    .top {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 51px;
      line-height: 20px;
      border-bottom: 1px solid #0c3061;
    }
    .bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      flex: 1;
      .col {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex: 1;
        line-height: 24px;
      }
      .col:nth-child(1),
      .col:nth-child(2) {
        border-right: 1px solid #0c3061;
      }
    }
  }
  .table-content {
    width: 1160px;
    height: 292px;
    .content {
      width: 1166px;
      height: 100%;
      overflow: auto;
      &.p1160 {
        width: 1160px;
      }
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 6px !important; // 竖向滚动条宽度
        height: 0 !important; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc !important;
        border-radius: 2px !important;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: #10202d !important;
      }
      .row {
        display: flex;
        width: 100%;
        height: 51px;
        border-bottom: 1px solid #0c3061;
        .column {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          border-right: 1px solid #0c3061;
        }
        .column1 {
          flex: 1;
        }
        .column2 {
          width: 91px;
        }
        .column3 {
          width: 47px;
        }
        .column4 {
          width: 47px;
        }
        .column5 {
          width: 141px;
        }
        .column6 {
          width: 141px;
        }
        .column7 {
          width: 141px;
        }
        .column8 {
          width: 141px;
        }
        .column9 {
          width: 141px;
        }
        .column10 {
          width: 61px;
        }
        .column11 {
          width: 61px;
          border: 0;
        }
      }
      .row:nth-child(odd) {
        background-color: rgba(96, 255, 246, 0.05);
      }
      .row:nth-child(even) {
        background-color: rgba(96, 255, 246, 0.1);
      }
    }
  }
}
</style>
