xytSk-App/pages/homeIndex/index.vue

<template>
  <view class="container">
    <!-- 个人信息 -->
    <view class="info">
      <div class="left">
        <div class="icon">
          <image
            style="width: 100%; height: 100%; border-radius: 50%"
            :src="default_src"
            mode="aspectFill"
          ></image>
        </div>
        <div class="info_name">
          <div v-if="userList.data">{{ userList.data.userName }}</div>
          <div v-if="userList.data">
            {{ userList.data.orgList[0].orgName || '' }}
          </div>
        </div>
      </div>
      <div class="right">
        <div>{{ monthDay }}</div>
        <div>{{ dataType[dayOfWeek] }}</div>
      </div>
    </view>
    <!-- nav -->
    <view class="navBar">
      <div class="navList" v-for="(item, index) in getNavList" :key="index">
        <div @click="myNavigateTo(item.url)">
          <div class="navIcon">
            <image
              style="width: 100%; height: 100%"
              :src="item.icon"
              mode="aspectFit"
            ></image>
            <div
              class="readStatus"
              v-show="
                (readStatus && item.key == 3) ||
                (limit == 1 && readYjStatus && item.key == 5)
              "
            ></div>
          </div>
          <div class="navTxt">{{ item.value }}</div>
        </div>
      </div>
    </view>
    <view class="warn">
      <image
        style="
          width: 18rpx;
          height: 22rpx;
          margin-right: 16rpx;
          vertical-align: middle;
        "
        src="../../static/tabs/ld.png"
        mode="aspectFit"
      ></image
      ><span style="color: #000">当前防汛应急响应：</span>
      <span style="color: #59a7ff">{{ level }}</span>
    </view>

    <!-- 24小时综述 -->
    <view v-show="limit == 1">
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">24小时综述</span>
          </p>
          <div class="time">{{ ydate }}至{{ date }}</div>
        </div>
        <div class="info_con" v-if="list.data">
          <span class="g1">{{ list.data.yesterday }}</span
          >至<span class="g1">{{ list.data.today }}</span
          >24小时中共有<span class="ye">{{ list.data.stationNum }}</span
          >个降雨测站(山洪测站<span class="ye">{{
            list.data.shStationNum
          }}</span
          >个)，其中最大降雨测站为<span class="ye">{{
            list.data.maxRain ? list.data.maxRain.stnm : '-'
          }}</span
          >，降雨量<span class="ye">{{
            list.data.maxRain ? list.data.maxRain.drp : '-'
          }}</span
          >mm，
          <template v-if="list.data.cntDrp10 != 0"
            ><span class="b1">10mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp10
            }}</span
            >个。</template
          ><template v-if="list.data.cntDrp25 != 0"
            ><span class="b1">10mm至25mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp25
            }}</span
            >个。</template
          >
          <template v-if="list.data.cntDrp50 != 0">
            <span class="b1">25mm至50mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp50
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrp100 != 0">
            <span class="b1">50mm至100mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp100
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrp250 != 0">
            <span class="b1">100mm至250mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp250
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrpg250 != 0"
            ><span class="b1">250mm以上</span>以下测站数为<span class="ye">{{
              list.data.cntDrpg250
            }}</span
            >个。</template
          >
        </div>
      </view>
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">24小时天气预报</span>
          </p>
          <div>
            <span class="time">{{ imgData[0] }}至{{ imgData[1] }}</span>
            <!-- <image
              style="width: 16px; height: 16px; vertical-align: middle"
              src="../../static/tabs/panelTitle.png"
              mode="aspectFit"
              @click="changeTable"
            ></image> -->
          </div>
        </div>

        <div class="chartChange fl">
          <div class="chart_tit" @click="changeTable">
            <image
              style="vertical-align: middle"
              src="../../static/tabs/chartcolumn@2x.png"
              mode="aspectFit"
            ></image>
            <span>图表</span>
          </div>
          <div v-if="changeBool" class="table_h">
            <div
              class="leftTab"
              :class="{ activetextTypeTab: showTextTypeTab == 1 }"
              @click="tabChange(1)"
            >
              水库降雨
            </div>
            <div
              class="rightTab"
              :class="{ activetextTypeTab: showTextTypeTab == 2 }"
              @click="tabChange(2)"
            >
              区域降雨
            </div>
          </div>
        </div>

        <div class="imgs" style="height: 100%; text-align: center">
          <!--  24h天气预报图像-->
          <image
            v-if="!changeBool && imgList.img24h"
            :src="imgList.img24h.url"
            mode="aspectFit"
          ></image>
          <!-- 表格-->
          <div v-else class="tableBox">
            <div class="table_div">
              <div class="table_cur">
                <table style="width: 100%; margin-top: -10%">
                  <tr>
                    <th style="width: 50px; color: #59a7ff">序号</th>

                    <th
                      v-if="showTextTypeTab == 1"
                      style="width: 70%; color: #59a7ff"
                    >
                      水库
                    </th>
                    <th v-else style="width: 70%; color: #59a7ff">区域</th>

                    <th style="width: 50%; color: #59a7ff">降雨量(mm)</th>
                  </tr>
                  <div style="max-height: 260px; overflow-y: auto">
                    <tr
                      v-for="(item, index) in tableData.data.data"
                      :key="index"
                    >
                      <td style="width: 62px">{{ index + 1 }}</td>
                      <td style="width: 70%">
                        {{ item.name }}
                      </td>
                      <td style="width: 50%">{{ item.drp }}</td>
                    </tr>
                  </div>

                  <!-- <tr>
                    <td style="width: 62px">1</td>
                    <td style="width: 70%">水库水库</td>
                    <td style="width: 50%">11</td>
                  </tr> -->
                </table>
              </div>
            </div>
          </div>
        </div>
      </view>
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">短时天气预报</span>
          </p>
          <div class="time">{{ imgHourstm[0] }} 至 {{ imgHourstm[1] }}</div>
        </div>
        <div class="imgs" style="height: 100%; text-align: center">
          <image :src="imgHours.url" mode="aspectFit"></image>
        </div>
      </view>
    </view>
    <view v-show="limit != 1">
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">雨情</span>
          </p>
          <div class="time" style="width: 50%; color: #000">
            <uni-data-select
              v-model="value1"
              :localdata="timeList"
              @change="changeTime"
              :clear="false"
            >
            </uni-data-select>
          </div>
        </div>
        <div class="info_icon" style="height: 260px; width: 100%">
          <qiun-data-charts
            :chartData="chartData.chartData"
            :echartsApp="true"
            :eopts="chartData.eopts"
          />
        </div>
      </view>
      <view class="info_24">
        <div class="heart" style="margin-bottom: 10px">
          <p class="title">
            <span class="line"></span><span class="h4">水情</span>
          </p>
          <div class="time" style="width: 50%; color: #000">
            <u-subsection
              :list="subList"
              :current="current"
              @change="subChange"
              mode="subsection"
            ></u-subsection>
          </div>
        </div>
        <div class="info_icon" v-if="current == 0">
          <div
            v-for="(item, i) in hdList"
            :key="i"
            @click="jumpHdDetail(item)"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
            "
          >
            <div>
              <div style="font-size: 32rpx">{{ item.stnm }}</div>
              <div style="font-size: 24rpx">实时水位：{{ item.z }}m</div>
            </div>
            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
          </div>
        </div>
        <div class="info_icon" v-else>
          <div
            v-for="(item, i) in skList"
            :key="i"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
            "
            @click="jumpSkDetail(item)"
          >
            <div>
              <div style="font-size: 32rpx">{{ item.stnm }}</div>
              <div style="font-size: 24rpx">
                实时水位：{{ item.normWatLev }}m
              </div>
            </div>
            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
          </div>
        </div>
      </view>
    </view>
  </view>
</template>

<script>
const dataType = {
  Monday: '星期一',
  Tuesday: '星期二',
  Wednesday: '星期三',
  Thursday: '星期四',
  Thursday: '星期五',
  Saturday: '星期六',
  Sunday: '星期天'
}

import moment from 'moment'
import { level } from '../../pages/utils/dicType'
import { disType } from '../utils/dicType.js'
import drpOption from './chartOption.js'
import { restm } from '../utils/tool'

export default {
  data () {
    return {
      monthDay: '',
      dayOfWeek: '',
      dataType,
      userList: {},
      changeBool: false,
      tableData: [],
      loading: false,
      list: {},
      date: '',
      ydate: '',
      showTextTypeTab: 1,
      tableData: {},
      tm: '',
      level: '',
      limit: disType(uni.getStorageSync('value').adcd),
      timeList: [
        { text: '昨天08:00~当前时间', value: 1 },
        { text: '今天08:00~当前时间', value: 2 },
        { text: '昨天08:00~今天08:00', value: 3 },
        { text: '最近1小时', value: 4 },
        { text: '最近3小时', value: 5 },
        { text: '最近6小时', value: 6 },
        { text: '最近12小时', value: 7 },
        { text: '最近24小时', value: 8 }
      ],
      value1: 3,
      rainChartData: [],
      formData: {
        stm: moment()
          .subtract(1, 'days')
          .startOf('day')
          .set({ hour: 8, minute: 0 }),
        etm: moment().startOf('day').set({ hour: 8, minute: 0 })
      },
      rainChartData: [],
      chartData: {},
      subList: ['河道水情', '水库水情'],
      current: 0,
      hdList: [],
      skList: [],
      readStatus: false,
      readYjStatus: false,
      default_src: uni.getStorageSync('avatar'),
      imgList: {},
      imgtm: moment().format('YYYYMMDD'),
      imgData: [],
      imgHours: '',
      imgHourstm: []
    }
  },
  computed: {
    getNavList () {
      const adcd = uni.getStorageSync('value').adcd
      let lever = 0
      if (adcd.endsWith('000000000')) {
        //县
        return [
          {
            value: '雨情',
            key: 1,
            icon: '../../static/tabs/xingzhuang2.png',
            url: '/pages/rain/rain'
          },
          {
            value: '水情',
            key: 2,
            icon: '../../static/tabs/water2.png',
            url: '/pages/water/water'
          },
          {
            value: '工情灾情',
            key: 3,
            icon: '../../static/tabs/gongqing2.png',
            url: '/pages/gqzq/index'
          },
          {
            value: '信息上报',
            key: 4,
            icon: '../../static/tabs/xinxi_icon@2x2.png',
            url: '/pages/xxsb/index'
          },
          {
            value: '预警',
            key: 5,
            icon: '../../static/tabs/yujing_icon@2x2.png',
            url: '/pages/forewarning/forewarning'
          }
        ]
      } else {
        //乡镇
        return [
          {
            value: '雨情',
            key: 1,
            icon: '../../static/tabs/xingzhuang2.png',
            url: '/pages/rain/rain'
          },
          {
            value: '水情',
            key: 2,
            icon: '../../static/tabs/water2.png',
            url: '/pages/water/water'
          },
          {
            value: '工情灾情',
            key: 3,
            icon: '../../static/tabs/gongqing2.png',
            url: '/pages/gqzq/index'
          },
          {
            value: '调令反馈',
            key: 5,
            icon: '../../static/tabs/yujing_icon@2x2.png',
            url: '/pages/orderFeedback/orderFeedback'
          },
          {
            value: '信息上报',
            key: 4,
            icon: '../../static/tabs/xinxi_icon@2x2.png',
            url: '/pages/xxsb/index'
          }
        ]
      }
    }
  },
  watch: {
    rainChartData (newValue) {
      this.chartData = { ...drpOption(newValue) }
    },
    limit: {
      handler (newValue) {
        if (!newValue) {
          this.getRainList()
        }
      },
      immediate: true
    },
    current: {
      handler (newValue) {
        if (newValue == 0) {
          this.getHdList()
        } else {
          this.getSkList()
        }
      },
      immediate: true
    }
  },
  methods: {
    async getImgs () {
      uni.request({
        url: 'http://223.75.53.124:8005/grb/rainimglist',
        data: {
          tm: `${this.imgtm}08`
        },
        success: res => {
          console.log(res.data.data)
          this.imgList = res.data.data
          let h = moment().format('HH') - 1
          let inx = restm(h)

          this.imgHours = res.data.data.imgHours[inx]

          let tm = moment().subtract(1, 'days').format('MM月DD日')
          let tm2 = moment().format('MM月DD日')
          this.imgData = [`${tm}08时`, `${tm2}08时`]
          this.imgHourstm = [`${tm2}${h}时`, `${tm2}${h + 1}时`]
        }
      })
    },
    async getYjRead () {
      try {
        const { data } = await uni.$http.get(
          '/gunshiApp/xfflood/current/situation/flag'
        )
        if (data.code == 200) {
          this.readYjStatus = data.data
        }
      } catch (error) {
        uni.$showMsg()
      }
    },
    async getReadStatus () {
      try {
        const { data } = await uni.$http.get(
          '/gunshiApp/xfflood/xfProjectRun/has/read'
        )
        if (data.code == 200) {
          this.readStatus = Object.values(data.data).some(item => item == true)
        }
      } catch (error) {
        uni.$showMsg()
      }
    },
    jumpHdDetail (params) {
      uni.navigateTo({
        url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`
      })
    },
    jumpSkDetail (params) {
      uni.navigateTo({
        url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`
      })
    },
    async getSkList () {
      try {
        const { data } = await uni.$http.post(
          '/gunshiApp/xfflood/reservoir/water/list',
          {
            sources: ['SW', 'SK'],
            adcd: uni.getStorageSync('value').adcd
          }
        )
        if (data.code == 200) {
          this.skList = data.data
        }
      } catch (error) {
        uni.$showMsg()
      }
    },
    async getHdList () {
      try {
        const { data } = await uni.$http.post(
          '/gunshiApp/xfflood/river/water/list',
          {
            sources: ['SH', 'SW'],
            adcd: uni.getStorageSync('value').adcd
          }
        )
        if (data.code == 200) {
          this.hdList = data.data
        }
      } catch (error) {
        uni.$showMsg()
      }
    },
    subChange (e) {
      this.current = e
    },
    async getRainList () {
      try {
        const { data } = await uni.$http.post(
          '/gunshiApp/xfflood/real/rain/home/list',
          {
            start: this.formData.stm.format('YYYY-MM-DD HH:mm:ss'),
            end: this.formData.etm.format('YYYY-MM-DD HH:mm:ss')
          }
        )
        if (data.code == 200) {
          this.rainChartData = data.data
        }
      } catch (error) {
        uni.$showMsg()
      }
    },
    changeTime (params) {
      let tmValue = []
      if (params === 1) {
        tmValue = [
          moment()
            .subtract(1, 'days')
            .startOf('day')
            .set({ hour: 8, minute: 0 }),
          moment()
        ]
      } else if (params === 2) {
        tmValue = [
          moment().startOf('day').set({ hour: 8, minute: 0 }),
          moment()
        ]
      } else if (params === 3) {
        tmValue = [
          moment()
            .subtract(1, 'days')
            .startOf('day')
            .set({ hour: 8, minute: 0 }),
          moment().startOf('day').set({ hour: 8, minute: 0 })
        ]
      } else if (params === 4) {
        tmValue = [moment().subtract(1, 'hours'), moment()]
      } else if (params === 5) {
        tmValue = [moment().subtract(3, 'hours'), moment()]
      } else if (params === 6) {
        tmValue = [moment().subtract(6, 'hours'), moment()]
      } else if (params === 7) {
        tmValue = [moment().subtract(12, 'hours'), moment()]
      } else if (params === 8) {
        tmValue = [moment().subtract(24, 'hours'), moment()]
      }
      this.formData.stm = tmValue[0]
      this.formData.etm = tmValue[1]
      this.getRainList()
    },
    todetail (val) {
      console.log('val', val)
      if (val == 1) {
        uni.navigateTo({
          url: '/pages/rain/index'
        })
      }
      if (val == 3) {
        uni.navigateTo({
          url: '/pages/gqzq/index'
        })
      }
    },
    tabChange (val) {
      this.showTextTypeTab = val
      if (val == 1) {
        this.getWeather()
      } else {
        this.getWeatherArea()
      }
    },
    changeTable (val) {
      this.changeBool = !this.changeBool
      if (val) {
        this.getWeather()
      }
      console.log('this.changeBool', this.changeBool)
    },
    // 区域 /weather/area
    async getWeatherArea () {
      try {
        const res = await uni.$http.post('/gunshiApp/xfflood/weather/area', {
          tm: this.tm
        })
        console.log('--44-', res)
        this.tableData = res
        // this.userList = res.data

        // console.log('--333-', this.tableData)
      } catch (e) {
        uni.$showMsg()
      }
    },
    // 水库 /weather/res
    async getWeather () {
      try {
        const res = await uni.$http.post('/gunshiApp/xfflood/weather/res', {
          tm: this.tm
        })
        console.log('--3-', res)
        this.tableData = res
        // this.userList = res.data

        console.log('--333-', this.tableData)
      } catch (e) {
        uni.$showMsg()
      }
    },
    async getSwiperList () {
      try {
        const res = await uni.$http.get('/gunshiApp/xfflood/getLoginInfo')
        console.log('--1-', res.data)
        this.userList = res.data

        console.log('--1-', this.userList)
      } catch (e) {
        uni.$showMsg()
      }
    },
    async getOverview () {
      try {
        let res = await uni.$http.get('/gunshiApp/xfflood/real/rain/overview')
        console.log('--2-', res)
        this.list = res.data

        console.log('--2-', res)
      } catch (e) {
        uni.$showMsg()
      }
    },

    getDataTime () {
      this.monthDay = moment().format('MM月DD日')
      this.dayOfWeek = moment().format('dddd')
      this.date = moment().format('MM月DD日HH时')
      this.ydate = moment().subtract(1, 'days').format('MM月DD日HH时')
      console.log('moment11', this.date, this.ydate)
      let d1 = moment().format('YYYYMMDD')
      let h1 = moment().format('HH') >= 20 ? '20' : '08'

      this.tm = d1 + h1
    },
    async getResponseLevel () {
      try {
        const { data } = await uni.$http.post(
          '/gunshiApp/xfflood/xfEmerRespR/page',
          {
            pageSo: { pageSize: 10, pageNumber: 1 },
            year: moment().format('YYYY')
          }
        )
        if (data.code == 200) {
          if (data.data.records.length > 0) {
            this.level = level(data.data.records[0].level)
          } else {
            this.level = '无'
          }
        }
      } catch (e) {
        uni.$showMsg()
      }
    },
    myNavigateTo (url) {
      uni.navigateTo({
        url: url // 跳转到对应路径的页面
      })
    }
    // 响应级别
  },
  onLoad () {
    this.getSwiperList()
    this.getOverview()
    this.getDataTime()
    this.getResponseLevel()
    this.getImgs()
  },
  onShow () {
    this.getReadStatus()
    if (this.limit == 1) {
      this.getYjRead()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  line-height: 24px;
  background-color: #f3f5f8;
}
.info {
  height: 100rpx;
  background-color: #007afd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
}
.left {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  color: #007afd;
  line-height: 50px;
}
.info_name {
  margin-left: 16rpx;
}
.right {
  text-align: center;
}
.navBar {
  height: 100%;
  background-color: #fff;
  margin-bottom: 12rpx;
  /* background-color: pink; */
}
.navBar {
  padding: 20px;
  /* text-align: center; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navList {
  text-align: center;
}
.navIcon {
  position: relative;
  width: 50px;
  height: 50px;
  /* border-radius: 10px;
    background-color: #007afd; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.readStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #de2433;
}
.warn {
  background-color: #fff;
  color: #de2433;
  padding: 18rpx 20rpx;
  text-align: left;
  margin-bottom: 12rpx;
}

/* 24小时 */
.chartChange {
  text-align: center;
  margin: 16rpx 0;
}
.chart_tit {
  width: 129rpx;
  height: 43rpx;
  background: #d3e1ff;
  border-radius: 20rpx;
  color: #3380ff;
}

.chart_tit image {
  margin-right: 10rpx;
  width: 36rpx;
  height: 30rpx;
}

.table_h {
  display: flex;
  text-align: center;
  height: 24px;
  /* position: absolute;
    top: 0;
    right: 0; */
}

/* info_24 */
.info_24 {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 12rpx;
}
.heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .line {
  border: 2px solid #3380ff;
  border-radius: 3rpx;
  margin-right: 20rpx;
}
.title .h4 {
  font-weight: 400;
  font-size: 32rpx;
  color: #121b3d;
}
.time {
  font-weight: 400;
  font-size: 24rpx;
  color: #a2a2a2;
}

.g1 {
  color: #545556;
}
.ye {
  color: #ff1717;
  /* font-weight: 600; */
}
.b1 {
  color: #3380ff;
  padding: 0 2px;
}

.uni-group {
  display: flex;
  align-items: center;
}

/* 表格 */
.tableBox {
  width: 100%;
  position: relative;
}

.leftTab {
  width: 80px;
  /* border-bottom: 1px solid #ccc; */
}
.rightTab {
  width: 80px;
  /* border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    border-left: 0; */
}
.activetextTypeTab,
.activetextTypeTab:hover {
  border-bottom: 3rpx solid #2286f6;
  color: #026be0;
}
.table_div {
  widows: 100%;
  height: 100%;
  max-width: calc(100% - 0px);
  max-height: calc(100vh - 24px);
  flex: 1;
  padding-top: 30px;
  overflow-x: scroll;
}
/*table样式*/
.table_cur {
  width: 100%;
  empty-cells: show;
  border-collapse: collapse;
  font-size: 14px;
}
.table_cur tr {
  display: flex;
  line-height: 56rpx;
}
.table_cur th {
  height: 56rpx;
  color: #2f4056;
  background: #f5f6f8;
  font-size: 14px;
  font-weight: bold;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}

.table_cur td {
  height: 56rpx;
  border-bottom: 1px solid #e5e9f2;
  font-size: 14px;
  color: #2f4056;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}
/*table样式 end*/
</style>