  <template>
  <div id="home">
    <!-- 显示隐藏左右侧全部内容 -->
    <div
      class="is-show"
      @click="isShowAll"
      :class="{ hidden: isShow === false }"
    ></div>
    <!-- <Notice /> -->
    <div class="home-left" v-show="isShow" v-loading="pageLoading1">
      <HomePanel title="天气情况" class="top1">
        <div class="weather-box" v-if="!weatherLoading">
          <div class="day today">
            <!-- <div class="icon icon1"></div> -->
            <div class="icon">
              <img :src="weatherData1.weather_code_url" />
            </div>
            <p class="p1">
              {{ weatherData1.temperature_min }} ~
              {{ weatherData1.temperature_max }}℃
            </p>
            <p class="p2">{{ weatherData1.weather_condition }}</p>
            <p class="p3">{{ weatherData1.forecast_date }}</p>
          </div>
          <div class="line"></div>
          <div class="day">
            <!-- <div class="icon icon1"></div> -->
            <div class="icon">
              <img :src="weatherData2.weather_code_url" />
            </div>
            <p class="p1">
              {{ weatherData2.temperature_min }} ~
              {{ weatherData2.temperature_max }}℃
            </p>
            <p class="p2">{{ weatherData2.weather_condition }}</p>
            <p class="p3">{{ weatherData2.forecast_date }}</p>
          </div>
          <div class="line"></div>
          <div class="day">
            <!-- <div class="icon icon1"></div> -->
            <div class="icon">
              <img :src="weatherData3.weather_code_url" />
            </div>
            <p class="p1">
              {{ weatherData3.temperature_min }} ~
              {{ weatherData3.temperature_max }}℃
            </p>
            <p class="p2">{{ weatherData3.weather_condition }}</p>
            <p class="p3">{{ weatherData3.forecast_date }}</p>
          </div>
        </div>
        <div
          class="weather-box-loading"
          v-if="weatherLoading"
          v-loading="weatherLoading"
        ></div>
      </HomePanel>
      <HomePanel title="今日值班" class="top2">
        <div class="list-scroll-box">
          <vue-seamless-scroll
            class="seamless-scroll-column"
            :data="workPeople"
            :class-option="listScrollOption"
            ref="seamlessScrollColumn"
          >
            <div class="row" v-for="(item, index) in workPeople" :key="index">
              <div class="column column1">
                <div class="row-icon"></div>
                {{ item.name }}
              </div>
              <div class="column column2">{{ item.department_name }}</div>
              <div class="column column3">{{ item.mobile }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </HomePanel>
      <HomePanel title="水库运行状态" class="top3">
        <div class="box">
          <div class="icon icon1"></div>
          <div class="txt">
            <span>当</span><span>前</span><span>水</span><span>质</span
            ><span>状</span><span>态</span>
          </div>
          <p>
            {{ $store.state.reservoirRealData.waterquality_value }}
          </p>
        </div>
        <div class="box">
          <div class="icon icon2"></div>
          <div class="txt">
            <span>大</span><span>坝</span><span>安</span><span>全</span
            ><span>类</span><span>别</span>
          </div>
          <p>
            {{ formateAQLB($store.state.reservoirBaseData.main_dam_level) }}
          </p>
        </div>
        <div class="box">
          <div class="icon icon3"></div>
          <div class="txt">
            <span>应</span><span>急</span><span>响</span><span>应</span
            ><span>状</span><span>态</span>
          </div>
          <p>{{ $store.state.reservoirBaseData.emergency_response }}</p>
        </div>
        <div class="box">
          <div class="icon icon4"></div>
          <div class="txt">24h平均降雨量</div>
          <p>
            {{
              Number($store.state.rainfall_value) === 0
                ? 0
                : Number($store.state.rainfall_value).toFixed(2)
            }}
            mm
          </p>
        </div>
        <div class="box">
          <div class="icon icon5"></div>
          <div class="txt">
            <span>纳</span><span>蓄</span><span>能</span><span>力</span>
          </div>
          <p>
            {{ Number($store.state.reservoirRealData.naXuStorage).toFixed(2) }}
            mm
          </p>
        </div>
        <div class="box">
          <div class="icon icon6"></div>
          <div class="txt">
            <span>水</span><span>库</span><span>可</span><span>用</span
            ><span>水</span><span>量</span>
          </div>
          <p>
            {{
              Number($store.state.reservoirRealData.available_water).toFixed(2)
            }}
            万m³
          </p>
        </div>
      </HomePanel>
      <HomePanel title="视频监控" class="top4">
        <el-carousel>
          <el-carousel-item v-for="item in videoArr" :key="item.id">
            <div class="video" @click="openVideo(item)">
              <img :src="item.realtime_pic" />
              <div class="icon" v-show="!videoShow" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </HomePanel>
    </div>
    <div class="home-right" v-show="isShow" v-loading="pageLoading2">
      <HomePanel title="水位分析" class="top1">
        <div
          class="txt"
          :class="{
            warm:
              $store.state.reservoirRealData.water_level_value >
                Number($store.state.reservoirRealData.nowLimitWaterLevel) &&
              $store.state.reservoirRealData.water_level_value ===
                Number($store.state.reservoirRealData.nowLimitWaterLevel),
          }"
        >
          <p>
            当前水位
            {{
              Number($store.state.reservoirRealData.water_level_value).toFixed(
                2
              )
            }}
            m
          </p>
          <p>
            距汛限水位
            {{
              (161 - $store.state.reservoirRealData.water_level_value).toFixed(
                2
              )
            }}
            m
          </p>
        </div>
        <div id="rt1-chart"></div>
        <div class="shan"></div>
        <div
          class="sd"
          :class="{
            warm:
              $store.state.reservoirRealData.water_level_value >
                Number($store.state.reservoirRealData.nowLimitWaterLevel) &&
              $store.state.reservoirRealData.water_level_value ===
                Number($store.state.reservoirRealData.nowLimitWaterLevel),
          }"
        ></div>
        <div
          class="red"
          :class="{
            meixun:
              Number($store.state.reservoirRealData.nowLimitWaterLevel) === 164,
            warm:
              $store.state.reservoirRealData.water_level_value >
                Number($store.state.reservoirRealData.nowLimitWaterLevel) &&
              $store.state.reservoirRealData.water_level_value ===
                Number($store.state.reservoirRealData.nowLimitWaterLevel),
          }"
        >
          <p>
            {{
              $store.state.reservoirRealData.nowLimitWaterLevelTypeStr
            }}限水位：<span>{{
              Number($store.state.reservoirRealData.nowLimitWaterLevel).toFixed(
                2
              )
            }}</span>
            m
          </p>
        </div>
      </HomePanel>
      <HomePanel title="安全态势研判" class="top2">
        <div class="three-box">
          <div
            class="box"
            @click="go(1)"
            :class="{
              yellow: aqts[1].drought === '轻度' || aqts[1].drought === '中度',
              warm: aqts[1].drought === '重度',
            }"
          >
            <span>坝</span>
            <p>【大坝安全】</p>
          </div>
          <div
            class="box"
            @click="go(2)"
            :class="{
              yellow: aqts[2].drought === '轻度' || aqts[2].drought === '中度',
              warm: aqts[2].drought === '重度',
            }"
          >
            <span>汛</span>
            <p>【防洪安全】</p>
          </div>
          <div
            class="box"
            @click="go(3)"
            :class="{
              yellow: aqts[3].drought === '轻度' || aqts[3].drought === '中度',
              warm: aqts[3].drought === '重度',
            }"
          >
            <span>旱</span>
            <p>【{{ aqts[3].dispatch }}】</p>
          </div>
        </div>
        <!-- 安全态势总体异常 / 安全态势总体正常 -->
        <!-- <div class="txt" :class="{ warm: false }">安全态势总体正常</div> -->
      </HomePanel>
      <HomePanel title="雨量水位形势" class="top3">
        <!-- <div class="legend">
          <div class="icon-txt">
            <div class="icon icon1"></div>
            <span style="color: #60fff6">实时水位</span>
          </div>
          <div class="icon-txt">
            <div class="icon icon2"></div>
            <span style="color: #ff5757">预报水位</span>
          </div>
          <div class="icon-txt">
            <div class="icon icon3"></div>
            <span style="color: #73ff36">实时雨量</span>
          </div>
          <div class="icon-txt">
            <div class="icon icon4"></div>
            <span style="color: #ffc936">预报雨量</span>
          </div>
        </div> -->
        <!-- 分割线 -->
        <!-- <div class="line"></div> -->
        <template #titleSelect>
          <div class="is-big" @click="openBigChart"></div>
          <el-select
            @change="rTop3SelectChange"
            v-model="rTop3SelectValue"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in rTop3Options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <div id="rt3-chart-1"></div>
      </HomePanel>
      <HomePanel title="水资源配置" class="top4">
        <div class="box ru">
          <div class="icon-txt">
            <div class="icon icon1"></div>
            <span>入库流量</span>
          </div>
          <p>
            <span>{{ $store.state.reservoirRealData.inflow }}</span
            >&nbsp;m³/s
          </p>
        </div>
        <div class="box chu">
          <div class="icon-txt">
            <div class="icon icon2"></div>
            <span>出库流量</span>
          </div>
          <p>
            <span>{{ $store.state.reservoirRealData.outflow }}</span
            >&nbsp;m³/s
          </p>
        </div>
        <div class="mess">
          <div class="mess-box">
            <span>东阳供水</span>
            <p>
              <span>{{ $store.state.reservoirRealData.water_supply }}</span
              >&nbsp;m³/s
            </p>
          </div>
          <div class="mess-box">
            <span>义乌供水</span>
            <p>
              <span>{{ $store.state.reservoirRealData.irrigation }}</span
              >&nbsp;m³/s
            </p>
          </div>
          <div class="mess-box">
            <span>灌溉</span>
            <p>
              <span>{{ $store.state.reservoirRealData.electricity }}</span
              >&nbsp;m³/s
            </p>
          </div>
          <div class="mess-box">
            <span>生态流量</span>
            <p>
              <span>{{ $store.state.reservoirRealData.ecological }}</span
              >&nbsp;m³/s
            </p>
          </div>
        </div>
      </HomePanel>
    </div>
    <!-- <iframe
      src="https://datav.aliyuncs.com/share/dd5dfdfc6841c3d4dd7998c14a2af57a"
      frameborder="0"
    ></iframe> -->
    <!-- <el-button
      :loading="downloadLoading"
      type="primary"
      size="default"
      @click="exportData"
      >导出Excel</el-button
    > -->
    <BigChart
      :show="videoShow"
      @close-dialog="videoClose"
      title="视频监控"
      class="videoDialog"
    >
      <iframe :src="url" frameborder="0" id="video-f" :key="videoKey"></iframe>
    </BigChart>
    <BigChart
      class="big-chart1"
      :title="bigChartTitle"
      @close-dialog="bigChartClose"
      :show="bigChartShow"
    >
      <div id="big-chart"></div>
    </BigChart>
    <BigChart
      class="big-chart1"
      :title="bigChartTitle"
      @close-dialog="bigChartClose"
      :show="bigChartShow2"
    >
      <el-date-picker
        v-model="dateSelectValue"
        type="date"
        @change="dateChange"
        placeholder="请选择历史日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <div id="big-chart2"></div>
    </BigChart>
  </div>
</template>

<script>
import { encrypt } from '@/utils/crypto'
import HomePanel from './components/home-panel.vue'
// import Notice from '@/components/notice.vue'
import { getVideoApi, getWeatherApi, getRainWaterlevelApi, getWorkPeopleApi, getFutureRainApi } from '@/api/home.js'
import { getDroughtApi } from '@/api/operate.js'
import { getFutureFlowInApi } from '@/api/flood.js'
export default {
  name: 'Home',
  components: {
    HomePanel
    // Notice
  },
  created () {
    this.pageLoading1 = true
    this.pageLoading2 = true
    this.weatherLoading = true
  },
  async mounted () {
    try {
      // 天气
      this.getWeatherData()
      // 视频
      this.getVideoData()
      // 今日值班
      // this.getWorkPeopleData()
      // 安全态势研判
      this.getThreeStatusData()
      // 水库三个信息
      await this.$store.dispatch('getReservoirAction')
      // 雨量水位形势
      await this.getRainWaterlevelData()
      this.pageLoading1 = false
      this.pageLoading2 = false
      // 显示首页的51图标
      this.$eventBus.$emit('homeicon')
      // 拿完以上三个再渲染首页两个图表
      this.initChart()
      window.addEventListener('resize', this.resizeChart)
    } catch (error) {
      this.pageLoading1 = false
      this.pageLoading2 = false
      this.weatherLoading = false
    }
  },
  destroyed () {
    this.disposeChart()
    window.removeEventListener('resize', this.resizeChart)
  },
  data () {
    return {
      isShow: true,
      weatherLoading: false,
      // loading
      pageLoading1: false,
      pageLoading2: false,
      // 图表变量
      // 水位分析
      rt1Chart: null,
      // 雨量水位形势
      rt3Chart: null,
      bigChart: null,
      bigChart2: null,
      // 天气
      weatherData1: {},
      weatherData2: {},
      weatherData3: {},
      // 今日值班
      // workPeople: [],
      workPeople: [{
        name: '张永泰',
        department_name: '管理人员',
        mobile: 13575687590
      }, {
        name: '陈方军',
        department_name: '工作人员',
        mobile: 13605723355
      }],
      listScrollData: [{
        name: '张永泰',
        workName: '管理人员',
        phone: 13575687590
      }, {
        name: '陈方军',
        workName: '工作人员',
        phone: 13605723355
      }],
      listScrollOption: {
        step: 0.35, // 数值越大滚动速度越快
        limitMoveNum: 3, // 开启无缝滚动的数据量
        hoverStop: true, // 是否启用鼠标 hover 控制
        direction: 1, // 方向:  0-往下  1-往上  2-向左  3-向右
        singleHeight: 42 // 单步运动停止的高度(默认值 0 是无缝不停止的滚动),direction 为 0|1 时生效
        // waitTime: 1000, // 单步停止等待时间(默认值 1000ms)
      },
      // 24小时平均降雨量
      rainfall_value: '',
      // 视频监控
      videoArr: [],
      videoShow: false,
      url: '',
      videoKey: 0,
      // 安全态势研判
      aqts: {
        1: {},
        2: {},
        3: {}
      },
      // 雨量水位形势
      bigChartShow: false,
      bigChartShow2: false,
      hisVal: 0,
      bigChartTitle: '雨量水位形势',
      // 数据
      futureTime: '',
      rainWaterlevelZiData: {},
      rainWaterlevelData: {},
      // 时间选择器
      dateSelectValue: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6 // 只能选择今天及今天之前的日期
          // return time.getTime() > Date.now() - 8.64e7; //只能选择今天之前的日期，连今天的日期也不能选
        }
      },
      rTop3SelectValue: 0,
      rTop3Options: [{
        value: 0,
        label: '一周'
      }, {
        value: 1,
        label: '一月'
      }, {
        value: 2,
        label: '一季'
      }, {
        value: 3,
        label: '自定义'
      }]
    }
  },
  methods: {
    // 隐藏显示全部
    isShowAll () {
      this.isShow = !this.isShow
    },
    initChart () {
      this.initRt1Chart_1()
      this.initRt3Chart(this.rainWaterlevelData.week)
    },
    resizeChart () {
      if (this.bigChartShow2) {
        this.rt1Chart.resize()
        this.rt3Chart.resize()
      } else {
        this.rt1Chart.resize()
        this.rt3Chart.resize()
        this.bigChart.resize()
      }
    },
    disposeChart () {
      this.rt1Chart.dispose()
      this.rt3Chart.dispose()
    },
    // 天气
    async getWeatherData () {
      const res = await getWeatherApi()
      console.log('查看天气', res)
      if (res !== null) {
        this.weatherData1 = res[0]
        this.weatherData2 = res[1]
        this.weatherData3 = res[2]
        this.weatherLoading = false
      }
    },
    // 今日值班
    async getWorkPeopleData () {
      const res = await getWorkPeopleApi()
      // console.log('上班人员', res)
      this.workPeople = res.data
    },
    // 水库运行状态
    formateAQLB (num) {
      if (num === 1) {
        return 'Ⅰ类坝'
      } else if (num === 2) {
        return 'Ⅱ类坝'
      } else if (num === 3) {
        return 'Ⅲ类坝'
      }
    },
    // 视频数据
    async getVideoData () {
      const res = await getVideoApi()
      // console.log('视频监控', res)
      let videoNumArr = new Set()
      while (true) {
        if (Array.from(videoNumArr).length === 6) break
        videoNumArr.add(Math.floor(Math.random() * (Number(res.data.length))))
      }
      videoNumArr = Array.from(videoNumArr)
      // console.log('查看拿到不重复的视频数组', videoNumArr)
      videoNumArr.forEach(item => {
        this.videoArr.push(res.data[item])
      })
      // console.log('查看所有拿到的视频', this.videoArr)
    },
    openVideo (item) {
      // 视频token + 视频地址
      const token = encodeURIComponent(encrypt())
      console.log('拿到视频token', token)
      console.log(item.index_url)
      this.url = `${item.index_url}?auth=` + token
      this.videoShow = true
      this.$nextTick(() => {
        this.videoKey = Date.now()
      })
    },
    videoClose () {
      this.videoShow = false
    },
    // 解决rainfall_value问题
    initRt1Chart_1 () {
      this.$nextTick(() => {
        if (this.$store.state.reservoirRealData.water_level_value > Number(this.$store.state.reservoirRealData.nowLimitWaterLevel) && this.$store.state.reservoirRealData.water_level_value === Number(this.$store.state.reservoirRealData.nowLimitWaterLevel)) {
          this.initRt1Chart(this.$store.state.reservoirRealData.water_level_value, 'rgba(255, 105, 105, 0.35)')
        } else {
          this.initRt1Chart(this.$store.state.reservoirRealData.water_level_value, 'rgba(125, 251, 237, 0.35)')
        }
      })
    },
    // 安全态势旱情
    async getThreeStatusData () {
      const [res3] = await Promise.all([getDroughtApi()])
      // console.log('安全态势旱情', res3)
      this.aqts[3] = res3
    },
    // 安全态势研判跳转
    go (i) {
      if (i === 1) {
        this.$router.replace('/engineering')
        this.$store.commit('changeHNI', 1)
      } else if (i === 2) {
        this.$router.replace('/flood/now')
        this.$store.commit('changeHNI', 2)
      } else if (i === 3) {
        this.$router.replace('/operate')
        this.$store.commit('changeHNI', 3)
      }
    },
    // 雨量水位形势
    async dateChange (val) {
      if (val === null) {
        this.bigChart2.clear()
      } else {
        const obj = {
          allDate: [],
          now: {
            date: [],
            water_level: [],
            rain: []
          },
          future: {
            date: [],
            water_level: [],
            rain: []
          }
        }
        const res = await getRainWaterlevelApi({
          start_date: this.dayjs(val).format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 100000
        })
        console.log('查看历史', res)
        console.log('查看未来', this.futureTime)
        res.data.forEach(item => {
          obj.now.water_level.push(item.eight_water_level)
          obj.now.rain.push(item.rainfall_sum)
          obj.now.date.push(item.record_date)
        })
        this.futureTime.forEach(item => {
          obj.future.water_level.push(Number(item.level).toFixed(2))
          obj.future.date.push(item.date.substring(0, 10))
          obj.future.rain.push('')
        })
        console.log('先查看一下结果', obj)
        obj.allDate = [...obj.now.date, ...obj.future.date]
        obj.future.water_level.unshift(Number(obj.now.water_level[obj.now.water_level.length - 1]).toFixed(2))
        obj.future.date.forEach(item => {
          obj.now.water_level.push('')
          obj.now.rain.push('')
        })
        obj.now.date.forEach(item => {
          obj.future.water_level.unshift('')
          obj.future.rain.unshift('')
        })
        obj.future.water_level.shift()
        obj.now.rain.forEach((item, index) => {
          if (Number(item) === 0) {
            obj.now.rain[index] = '0'
          }
        })
        console.log('查看Obj', obj)
        for (let i = 1; i <= 7; i++) {
          obj.future.rain.pop()
        }
        const arr1 = this.futureRainArr
        obj.future.rain.push(...arr1)
        this.rainWaterlevelZiData = obj
        this.initRt3ChartCopy2(this.rainWaterlevelZiData)
      }
    },
    openBigChart () {
      this.bigChartShow = true
      this.$nextTick(() => {
        if (this.rTop3SelectValue === 0) {
          this.initRt3ChartCopy(this.rainWaterlevelData.week)
        } else if (this.rTop3SelectValue === 1) {
          this.initRt3ChartCopy(this.rainWaterlevelData.month)
        } else if (this.rTop3SelectValue === 2) {
          this.initRt3ChartCopy(this.rainWaterlevelData.season)
        }
      })
    },
    bigChartClose () {
      if (this.rTop3SelectValue === 3) {
        this.rTop3SelectValue = this.hisVal
      }
      this.dateSelectValue = ''
      this.bigChartShow = false
      this.bigChartShow2 = false
      this.bigChart.clear()
      this.bigChart2.clear()
    },
    rTop3SelectChange (value) {
      if (value === 0) {
        this.initRt3Chart(this.rainWaterlevelData.week)
      } else if (value === 1) {
        this.initRt3Chart(this.rainWaterlevelData.month)
      } else if (value === 2) {
        this.initRt3Chart(this.rainWaterlevelData.season)
      } else if (value === 3) {
        this.bigChartShow2 = true
      }
    },
    // 雨量水位形势历史数据
    async getRainWaterlevelData () {
      const Data = {
        week: {
          allDate: [],
          now: {
            date: [],
            water_level: [],
            rain: []
          },
          future: {
            date: [],
            water_level: [],
            rain: []
          }
        },
        month: {
          allDate: [],
          now: {
            date: [],
            water_level: [],
            rain: []
          },
          future: {
            date: [],
            water_level: [],
            rain: []
          }
        },
        season: {
          allDate: [],
          now: {
            date: [],
            water_level: [],
            rain: []
          },
          future: {
            date: [],
            water_level: [],
            rain: []
          }
        }
      }
      const futureTime = []
      const [res1, res2, res3] = await Promise.all([
        getRainWaterlevelApi({
          start_date: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 10000
        }),
        getRainWaterlevelApi({
          start_date: this.dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 10000
        }),
        getRainWaterlevelApi({
          start_date: this.dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
          // end_date: this.dayjs().add(5, 'day').format('YYYY-MM-DD'),
          limit: 10000
        })
      ])
      const res4 = await getFutureFlowInApi(this.$store.state.reservoirRealData.water_level_value)
      // console.log('雨量水位形势历史数据7', res1.data)
      // console.log('雨量水位形势历史数据30', res2.data)
      // console.log('雨量水位形势历史数据90', res3.data)
      // console.log('雨量水位形势未来数据', res4[7])
      // 周
      res1.data.forEach(item => {
        Data.week.now.water_level.push(item.eight_water_level)
        Data.week.now.rain.push(item.rainfall_sum)
        Data.week.now.date.push(item.record_date)
      })
      // 月
      res2.data.forEach(item => {
        Data.month.now.water_level.push(item.eight_water_level)
        Data.month.now.rain.push(item.rainfall_sum)
        Data.month.now.date.push(item.record_date)
      })
      // 季
      res3.data.forEach(item => {
        Data.season.now.water_level.push(item.eight_water_level)
        Data.season.now.rain.push(item.rainfall_sum)
        Data.season.now.date.push(item.record_date)
      })
      //
      console.log('查看res4', res4)
      res4[7].forEach((item, index) => {
        if (item.date.includes('08:00:00')) {
          futureTime.push(res4[7][index])
        }
      })
      this.futureTime = futureTime
      // 把未来的数据保存到三个地方
      futureTime.forEach(item => {
        // 放到周里
        Data.week.future.water_level.push(Number(item.level).toFixed(2))
        Data.week.future.date.push(item.date.substring(0, 10))
        Data.week.future.rain.push('')
        // 放到月里
        Data.month.future.water_level.push(Number(item.level).toFixed(2))
        Data.month.future.date.push(item.date.substring(0, 10))
        Data.month.future.rain.push('')
        // 放到季里
        Data.season.future.water_level.push(Number(item.level).toFixed(2))
        Data.season.future.date.push(item.date.substring(0, 10))
        Data.season.future.rain.push('')
      })
      // 先在未来的数组开头新增 历史的最后一个,图表衔接用
      Data.week.future.water_level.unshift(Number(Data.week.now.water_level[Data.week.now.water_level.length - 1]).toFixed(2))
      Data.month.future.water_level.unshift(Number(Data.month.now.water_level[Data.month.now.water_level.length - 1]).toFixed(2))
      Data.season.future.water_level.unshift(Number(Data.season.now.water_level[Data.season.now.water_level.length - 1]).toFixed(2))

      // console.log('查看未来七天的八点', futureTime)
      // 合并时间
      Data.week.allDate = [...Data.week.now.date, ...Data.week.future.date]
      Data.month.allDate = [...Data.month.now.date, ...Data.month.future.date]
      Data.season.allDate = [...Data.season.now.date, ...Data.season.future.date]

      // 在实际的里面加上未来的
      Data.week.future.date.forEach(item => {
        Data.week.now.water_level.push('')
        Data.week.now.rain.push('')
        Data.month.now.water_level.push('')
        Data.month.now.rain.push('')
        Data.season.now.water_level.push('')
        Data.season.now.rain.push('')
      })
      // 在未来里加上实际
      Data.week.now.date.forEach(item => {
        Data.week.future.water_level.unshift('')
        Data.week.future.rain.unshift('')
      })
      Data.month.now.date.forEach(item => {
        Data.month.future.water_level.unshift('')
        Data.month.future.rain.unshift('')
      })
      Data.season.now.date.forEach(item => {
        Data.season.future.water_level.unshift('')
        Data.season.future.rain.unshift('')
      })
      //
      Data.week.future.water_level.shift()
      Data.month.future.water_level.shift()
      Data.season.future.water_level.shift()
      // console.log('查看Data', Data)
      for (let i = 1; i <= 7; i++) {
        Data.week.future.rain.pop()
        Data.month.future.rain.pop()
        Data.season.future.rain.pop()
      }
      const futureRainRes = await getFutureRainApi({
        start_date: this.dayjs().add(1, 'day').format('YYYY-MM-DD'),
        end_date: this.dayjs().add(8, 'day').format('YYYY-MM-DD')
      })
      // console.log('查看一下未来雨量', futureRainRes)

      const futureRainArr = []
      futureRainRes.forEach(item => {
        futureRainArr.push(item.value)
      })
      this.futureRainArr = futureRainArr
      Data.week.future.rain.push(...this.futureRainArr)
      Data.month.future.rain.push(...this.futureRainArr)
      Data.season.future.rain.push(...this.futureRainArr)
      this.rainWaterlevelData = Data
      // console.log('查看提取出来的未来雨量数组', this.futureRainArr)
    },

    // 水位分析
    initRt1Chart (value, color) {
      if (!this.rt1Chart) this.rt1Chart = this.echarts.init(document.getElementById('rt1-chart'))
      const option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        tooltip: {
          show: true,
          trigger: 'item',
          axisPointer: {
            show: false
          }
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['水位', 'kong'],
          axisTick: {
            show: true,
            alignWithLabel: false
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          min: 117,
          max: 175.70
        },
        color,
        series: [
          {
            data: [Number(value).toFixed(2), 0],
            type: 'bar',
            barWidth: '155%',
            tooltip: {
              valueFormatter: (value) => value + ' m'
            }
          }
        ]
      }
      this.rt1Chart.clear()
      this.rt1Chart.setOption(option)
    },
    // 雨量水位形势
    initRt3Chart (obj) {
      const yArr = []
      const waterAll = [...obj.now.water_level, ...obj.future.water_level]
      waterAll.forEach(item => {
        if (item !== '') yArr.push(item)
      })
      let waterLevelYMin = Math.floor((Math.min(...yArr) - 3))
      const waterLevelYMax = Math.floor((Math.max(...yArr) + 3))
      if (waterLevelYMin < 0) waterLevelYMin = 0
      const rainMax = Math.floor(Math.max(...obj.now.rain, ...obj.future.rain) + 10)
      // console.log(waterLevelYMin, waterLevelYMax, rainMax)
      if (!this.rt3Chart) this.rt3Chart = this.echarts.init(document.getElementById('rt3-chart-1'))
      const option = {
        grid: {
          show: true,
          left: 0,
          right: 15,
          top: 50,
          bottom: 10,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 2,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        legend: {
          top: 5,
          data: ['实时水位', '实时雨量', '预报水位', '预报雨量'],
          itemWidth: 25,
          itemHeight: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: obj.allDate,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'shadow', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'bottom'
            },
            min: waterLevelYMin,
            max: waterLevelYMax,
            nameGap: 10,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '雨量\nmm',
            nameGap: 8,
            inverse: true,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 0, 10]
              // lineHeight: -40,
              // verticalAlign: 'bottom'
            },
            max: rainMax,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '实时水位',
            data: obj.now.water_level,
            type: 'line',
            label: {
              show: false
            },
            itemStyle: {
              color: '#60FFF6'
            },
            lineStyle: {
              color: '#60FFF6'
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          },
          {
            name: '实时雨量',
            yAxisIndex: 1,
            data: obj.now.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return Number(value).toFixed(0) + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#73FF36'
            },
            barGap: '-100%'
          },
          {
            name: '预报水位',
            data: obj.future.water_level,
            type: 'line',
            label: {
              show: false
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            },
            lineStyle: {
              color: '#fff',
              type: 'dashed'
            },
            itemStyle: {
              color: '#fff'
            }
          },
          {
            name: '预报雨量',
            yAxisIndex: 1,
            data: obj.future.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return value + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#FFC936'
            },
            barGap: '-100%'
          }

        ]
      }
      this.rt3Chart.clear()
      this.rt3Chart.setOption(option)
    },
    initRt3ChartCopy (obj) {
      const yArr = []
      const waterAll = [...obj.now.water_level, ...obj.future.water_level]
      waterAll.forEach(item => {
        if (item !== '') yArr.push(item)
      })
      let waterLevelYMin = Math.floor((Math.min(...yArr) - 3))
      const waterLevelYMax = Math.floor((Math.max(...yArr) + 3))
      if (waterLevelYMin < 0) waterLevelYMin = 0
      const rainMax = Math.floor(Math.max(...obj.now.rain, ...obj.future.rain) + 10)
      console.log(waterLevelYMin, waterLevelYMax, rainMax)
      if (!this.bigChart) this.bigChart = this.echarts.init(document.getElementById('big-chart'))
      const option = {
        grid: {
          show: true,
          left: 0,
          right: 15,
          top: 50,
          bottom: 10,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 2,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        legend: {
          top: 5,
          data: ['实时水位', '实时雨量', '预报水位', '预报雨量'],
          itemWidth: 25,
          itemHeight: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: obj.allDate,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'shadow', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'bottom'
            },
            min: waterLevelYMin,
            max: waterLevelYMax,
            nameGap: 10,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '雨量\nmm',
            nameGap: 8,
            inverse: true,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 0, 10]
              // lineHeight: -40,
              // verticalAlign: 'bottom'
            },
            max: rainMax,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '实时水位',
            data: obj.now.water_level,
            type: 'line',
            label: {
              show: false
            },
            itemStyle: {
              color: '#60FFF6'
            },
            lineStyle: {
              color: '#60FFF6'
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          },
          {
            name: '实时雨量',
            yAxisIndex: 1,
            data: obj.now.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return Number(value).toFixed(0) + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#73FF36'
            },
            barGap: '-100%'
          },
          {
            name: '预报水位',
            data: obj.future.water_level,
            type: 'line',
            label: {
              show: false
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            },
            lineStyle: {
              color: '#fff',
              type: 'dashed'
            },
            itemStyle: {
              color: '#fff'
            }
          },
          {
            name: '预报雨量',
            yAxisIndex: 1,
            data: obj.future.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return value + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#FFC936'
            },
            barGap: '-100%'
          }

        ]
      }
      this.bigChart.clear()
      this.bigChart.setOption(option)
    },
    initRt3ChartCopy2 (obj) {
      const yArr = []
      const waterAll = [...obj.now.water_level, ...obj.future.water_level]
      waterAll.forEach(item => {
        if (item !== '') yArr.push(item)
      })
      let waterLevelYMin = Math.floor((Math.min(...yArr) - 3))
      const waterLevelYMax = Math.floor((Math.max(...yArr) + 3))
      if (waterLevelYMin < 0) waterLevelYMin = 0
      const rainMax = Math.floor(Math.max(...obj.now.rain, ...obj.future.rain) + 10)
      console.log(waterLevelYMin, waterLevelYMax, rainMax)
      if (!this.bigChart2) this.bigChart2 = this.echarts.init(document.getElementById('big-chart2'))
      const option = {
        grid: {
          show: true,
          left: 0,
          right: 15,
          top: 50,
          bottom: 10,
          width: 'auto',
          height: 'auto',
          containLabel: true,
          backgroundColor: 'transparent',
          borderWidth: 2,
          borderColor: 'rgba(238, 238, 238, 0.5)'
        },
        legend: {
          top: 5,
          data: ['实时水位', '实时雨量', '预报水位', '预报雨量'],
          itemWidth: 25,
          itemHeight: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: obj.allDate,
          axisLabel: {
            show: true,
            color: '#CACACA',
            fontSize: 12
          },
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisPointer: {
            show: true,
            type: 'shadow', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: [
          {
            show: true,
            type: 'value',
            name: '水位：m',
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'center',
              verticalAlign: 'bottom'
            },
            min: waterLevelYMin,
            max: waterLevelYMax,
            nameGap: 10,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          },
          {
            show: true,
            type: 'value',
            name: '雨量\nmm',
            nameGap: 8,
            inverse: true,
            nameTextStyle: {
              color: '#CACACA',
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 0, 10]
              // lineHeight: -40,
              // verticalAlign: 'bottom'
            },
            max: rainMax,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#CACACA',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '实时水位',
            data: obj.now.water_level,
            type: 'line',
            label: {
              show: false
            },
            itemStyle: {
              color: '#60FFF6'
            },
            lineStyle: {
              color: '#60FFF6'
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            }
          },
          {
            name: '实时雨量',
            yAxisIndex: 1,
            data: obj.now.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return Number(value).toFixed(0) + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#73FF36'
            },
            barGap: '-100%'
          },
          {
            name: '预报水位',
            data: obj.future.water_level,
            type: 'line',
            label: {
              show: false
            },
            symbolSize: 0,
            smooth: true,
            tooltip: {
              valueFormatter: (value) => {
                if (value !== '') {
                  return Number(value).toFixed(2) + ' m'
                }
              }
            },
            lineStyle: {
              color: '#fff',
              type: 'dashed'
            },
            itemStyle: {
              color: '#fff'
            }
          },
          {
            name: '预报雨量',
            yAxisIndex: 1,
            data: obj.future.rain,
            type: 'bar',
            label: {
              show: false
            },
            tooltip: {
              valueFormatter: (value) => {
                if (value === '') {
                  return ''
                } else if (Number(value) === 0) {
                  return value + ' mm'
                } else {
                  return Number(value).toFixed(2) + ' mm'
                }
              }
            },
            itemStyle: {
              color: '#FFC936'
            },
            barGap: '-100%'
          }

        ]
      }
      this.bigChart2.clear()
      this.bigChart2.setOption(option)
    }
  },
  watch: {
    // 记忆功能
    rTop3SelectValue (newVal, oldVal) {
      if (newVal === 3) {
        this.hisVal = oldVal
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$warm: rgba(255, 105, 105, 0.35);
#home {
  position: absolute;
  left: 0;
  top: 0;
  .home-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 10px;
    width: 400px;
    height: 956px;
    .top1 {
      margin-bottom: 10px;
      .weather-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 326px;
        height: 138px;
        margin-top: 15px;
        .day {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #e8eff6;
          font-size: 14px;
          &.today {
            color: #60fff6;
          }
          .icon {
            width: 54px;
            height: 54px;
            margin-bottom: 12px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .icon1 {
            background: url("~@/assets/images/weather/W0.png") no-repeat center /
              100% 100%;
          }
          .icon2 {
            background: url("~@/assets/images/weather/W1.png") no-repeat center /
              100% 100%;
          }
          .icon3 {
            background: url("~@/assets/images/weather/W2.png") no-repeat center /
              100% 100%;
          }
          .icon4 {
            background: url("~@/assets/images/weather/W4.png") no-repeat center /
              100% 100%;
          }
          .p1 {
            margin-bottom: 12px;
          }
          .p2 {
            margin-bottom: 12px;
          }
        }
        .line {
          width: 1px;
          height: 138px;
          background-color: #73839a;
        }
      }
      .weather-box-loading ::v-deep {
        width: 360px;
        height: 153px;
        .el-loading-mask {
          background-color: transparent;
        }
      }
    }
    .top2 {
      margin-bottom: 10px;
      .list-scroll-box {
        position: relative;
        width: 100%;
        height: 42px * 2 - 2px;
        margin-top: 15px;
        .seamless-scroll-column {
          width: 100%;
          height: 100%;
          overflow: hidden;
          .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: rgba(96, 255, 246, 0.1);
            margin-bottom: 2px;
            padding-left: 13px;
            padding-right: 20px;
            .row-icon {
              width: 6px;
              height: 6px;
              margin-right: 8px;
              background-color: #ffba00;
            }
            .column {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 40px;
              font-size: 14px;
              text-align: center;
              color: #e8eff6;
            }
            .column1 {
              justify-content: flex-start;
              width: 80px;
            }
            .column2 {
              letter-spacing: 2px;
              width: 80px;
              margin-right: 40px;
            }
          }
        }
      }
      // .people {
      //   display: flex;
      //   align-items: center;
      //   width: 100%;
      //   height: 40px;
      //   padding-left: 13px;
      //   background-color: rgba(96, 255, 246, 0.1);
      //   .icon {
      //     width: 6px;
      //     height: 6px;
      //     margin-right: 8px;
      //     background-color: #ffba00;
      //   }
      // }
      // .people:first-child {
      //   margin-top: 15px;
      //   margin-bottom: 2px;
      // }
    }
    .top3 {
      margin-bottom: 10px;
      .box {
        display: flex;
        align-items: center;
        width: 100%;
        height: 38px;
        padding-left: 10px;
        margin-bottom: 2px;
        background: rgba(96, 255, 246, 0.1);
        color: #e8eff6;
        font-size: 14px;
        .icon {
          width: 38px;
          height: 38px;
          margin-right: 24px;
          &.icon1 {
            background: url("~@/assets/images/home/ltop2icon1.png") no-repeat
              center / 100% 100%;
          }
          &.icon2 {
            background: url("~@/assets/images/home/ltop2icon2.png") no-repeat
              center / 100% 100%;
          }
          &.icon3 {
            background: url("~@/assets/images/home/ltop2icon3.png") no-repeat
              center / 100% 100%;
          }
          &.icon4 {
            background: url("~@/assets/images/home/ltop2icon4.png") no-repeat
              center / 100% 100%;
          }
          &.icon5 {
            background: url("~@/assets/images/home/ltop2icon5.png") no-repeat
              center / 100% 100%;
          }
          &.icon6 {
            background: url("~@/assets/images/home/ltop2icon6.png") no-repeat
              center / 100% 100%;
          }
        }
        .txt {
          display: flex;
          justify-content: space-between;
          width: 98px;
          margin-right: 57px;
        }
        p {
          color: #60fff6;
        }
      }
      .box:last-child {
        margin-bottom: 0;
      }
    }
    .top4::v-deep {
      width: 100%;
      flex: 1;
      .el-carousel {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        .el-carousel__container {
          height: 100%;
          .el-carousel__item {
            height: 100%;
            .video {
              position: relative;
              width: 100%;
              height: 100%;
              cursor: pointer;
              img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
              .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 2;
                transform: translate(-50%, -50%);
                width: 50px;
                height: 50px;
                background: url("~@/assets/images/home/play.png") no-repeat
                  center / 100% 100%;
              }
            }
          }
        }
        ul {
          display: flex;
        }
        .el-carousel__item:nth-child(even) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(odd) {
          background-color: #d3dce6;
        }
      }
    }
  }
  .home-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 1510px;
    width: 400px;
    height: 956px;
    .top1 ::v-deep {
      height: 180px;
      margin-bottom: 10px;
      .home-main {
        flex-direction: row;
        align-items: start;
        padding-top: 15px;
        border-bottom: 9px solid #5c4735;
        overflow: hidden;
        .txt {
          position: absolute;
          z-index: 2;
          top: 57px;
          left: 18px;
          border-radius: 4px;
          padding: 10px;
          background-color: rgba(96, 255, 246, 0.5);
          &.warm {
            background-color: rgba(255, 105, 105, 0.5) !important;
          }
          p {
            color: #fff;
            font-size: 12px;
          }
          p:first-child {
            margin-bottom: 4px;
          }
        }
        #rt1-chart {
          width: 100%;
          height: 100%;
        }
        .shan {
          position: absolute;
          right: 60px;
          bottom: 0;
          z-index: 2;
          width: 115px;
          height: 101px;
          background: url("~@/assets/images/home/shan.png") no-repeat top center /
            100% 100%;
        }
        // 外面
        .sd {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 120px;
          height: 20px;
          background-color: rgba(125, 251, 237, 0.35);
          &.warm {
            background-color: $warm !important;
          }
        }
        .red {
          position: absolute;
          top: 36px;
          left: 0;
          width: 232px;
          height: 1px;
          background-color: #c44f4f;
          &.meixun {
            top: 34px;
          }
          &.warm {
            background-color: #fff;
            p {
              color: #fff !important;
            }
          }
          p {
            position: absolute;
            bottom: 4px;
            left: 10px;
            color: #ff6969;
            font-size: 12px;
          }
        }
      }
    }
    .top2 {
      margin-bottom: 10px;
      // height: 245px;
      .three-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 136px;
        margin-top: 10px;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 114px;
          height: 100%;
          background: url("~@/assets/images/home/btn_bg1.png") no-repeat top
            center / 100% 100%;
          color: #e8eff6;
          cursor: pointer;

          &.yellow {
            background: url("~@/assets/images/home/btn_bg2.png") no-repeat top
              center / 100% 100%;
          }
          &.warm {
            background: url("~@/assets/images/home/btn_bg3.png") no-repeat top
              center / 100% 100%;
          }
          span {
            margin-top: 24px;
            margin-bottom: 60px;
            font-size: 22px;
          }
          p {
            font-size: 14px;
          }
        }
      }
      .txt {
        width: 100%;
        height: 34px;
        background-color: rgba(96, 255, 246, 0.2);
        text-align: center;
        line-height: 34px;
        color: #fff;
        &.warm {
          background-color: rgba(255, 186, 0, 0.2);
        }
      }
    }
    .top3 {
      height: 314px;
      margin-bottom: 10px;

      .el-select ::v-deep {
        position: absolute;
        right: 40px;
        top: 10px;
        width: 100px;
        height: 20px;
        // 输入框
        .el-input {
          // input输入框
          input {
            width: 100px;
            height: 20px;
            padding: 0 15px 0 15px;
            background-color: rgba(96, 255, 246, 0.3);
            border-color: rgba(96, 255, 246, 0.3);
            color: #fff;
            font-size: 14px;
            &::placeholder {
              font-size: 14px;
            }
          }
          .el-input__suffix {
            display: flex;
            align-items: center;
          }
        }
        & .el-input.is-focus input {
          border-color: #01fff5;
        }
        // 选择框的下拉弹出框
        .el-select-dropdown {
          background-color: #1f6681;
          border-color: #1f6681;
          // 弹出框的数据列表
          .el-select-dropdown__list {
            // 弹出框的单条数据
            .el-select-dropdown__item {
              display: flex;
              align-items: center;
              height: 24px;
            }
          }
          // 经过选项时选项的背景色
          .el-select-dropdown__item.hover {
            background-color: #39a0bb;
          }
          // 弹出框三角形
          .popper__arrow {
            left: 30px !important;
            &::after {
              top: 0;
              border-bottom-color: #1f6681;
            }
          }
          // 选项文字
          span {
            color: #fff;
            font-size: 14px;
          }
          // 已选中的选项
          &.is-multiple .el-select-dropdown__item.selected {
            background-color: #39a0bb;
            color: #fff;
          }
        }
      }
      #rt3-chart-1 {
        width: 100%;
        height: 100%;
      }
      .line {
        position: absolute;
        z-index: 2;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 145px;
        background-color: #c0c9d6;
      }
      .legend {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        padding: 0 25px;
        .icon-txt {
          display: flex;
          align-items: center;
          .icon {
            width: 8px;
            height: 8px;
            margin-right: 8px;
            border-radius: 50%;
            &.icon1 {
              background-color: #60fff6;
            }
            &.icon2 {
              background-color: #ff5757;
            }
            &.icon3 {
              background-color: #73ff36;
            }
            &.icon4 {
              background-color: #ffc936;
            }
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
    .top4 {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        background-color: rgba(96, 255, 246, 0.1);
        padding: 0 20px 0 10px;
        margin-bottom: 4px;
        .icon-txt {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .icon {
            width: 40px;
            height: 40px;
            margin-right: 6px;
            &.icon1 {
              background: url("~@/assets/images/home/rt4_icon1.png") no-repeat
                center / 100% 100%;
            }
            &.icon2 {
              background: url("~@/assets/images/home/rt4_icon2.png") no-repeat
                center / 100% 100%;
            }
          }
          span {
            color: #fff;
            font-size: 16px;
          }
        }
        p {
          color: #fff;
          font-size: 12px;
          span {
            color: #60fff6;
            font-size: 16px;
          }
        }
      }
      .ru {
        margin-top: 10px;
      }
      .chu {
        margin-bottom: 0;
      }
      .mess {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
        background-color: rgba(96, 255, 246, 0.1);
        border-top: 1px solid rgba(115, 131, 154, 0.6);
        .mess-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 25%;
          height: 60px;
          border-right: 1px solid rgba(115, 131, 154, 0.6);
          font-size: 14px;
          span {
            margin-top: 9px;
            margin-bottom: 16px;
            color: #60fff6;
          }
          p {
            color: #fff;
            span {
              color: #fff;
            }
          }
        }
        .mess-box:last-child {
          border-right: 0;
        }
      }
    }
  }
}
.videoDialog {
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
