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%"
            src="../../static/tabs/头像_icon@2x.png"
            mode="aspectFit"
          ></image>
        </div>
        <div class="info_name">
          <div v-if="userList.data">{{ userList.data.userName }}</div>
          <div v-if="userList.data">
            {{ userList.data.orgList[0].positionList[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 navList" :key="index">
		  <div @click="myNavigateTo(item.url)">
			<div class="navIcon">
			  <image
				style="width: 100%; height: 100%"
				:src="item.icon"
				mode="aspectFit"
			  ></image>
			</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/铃铛@2x.png"
        mode="aspectFit"
      ></image
      ><span>当前防汛应急响应：IV级</span>
    </view>

    <!-- 24小时综述 -->
    <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.stnm || '-'
        }}</span
        >，降雨量<span class="ye">{{ list.data.maxRain.drp || '-' }}</span
        >mm，
        <template v-if="list.data.cntDrp10 != 0"
          ><span class="b1">10mm</span>以下测站数为<apan class="ye">{{
            list.data.cntDrp10
          }}</apan
          >个。</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">{{ ydate }}至{{ date }}</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"
          src="../../static/tabs/bigImg.png"
          mode="aspectFit"
        ></image>
        <!-- 表格-->
        <div v-else class="tableBox">
          <div class="table_div">
            <div class="table_cur">
              <table>
                <tr>
                  <th style="width: 50px">序号</th>

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

                  <th style="width: 50%">降雨量(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">04月25日08时 至 04月25日10时</div>
      </div>
      <div class="imgs" style="height: 100%; text-align: center">
        <image src="../../static/tabs/bigImg.png" mode="aspectFit"></image>
      </div>
    </view>
  </view>
</template>

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

const navList = [
  {
    value: '雨情',
    key: 1,
    icon: '../../static/tabs/形状 1@2x.png',
	url:"/pages/rain/rain"
  },
  {
    value: '水情',
    key: 2,
    icon: '../../static/tabs/water (1) 拷贝@2x.png',
	url:"/pages/water/water"
  },
  {
    value: '工情灾情',
    key: 3,
    icon: '../../static/tabs/工情——icon@2x.png',
	url:''
  },
  {
    value: '信息上报',
    key: 4,
    icon: '../../static/tabs/xinxi_icon@2x.png',
	url:''
  },
  {
    value: '预警',
    key: 5,
    icon: '../../static/tabs/yujing_icon@2x.png',
	url:'/pages/forewarning/forewarning'
  },
  {
    value: '调令反馈',
    key: 5,
    icon: '../../static/tabs/yujing_icon@2x.png',
  	url:'/pages/orderFeedback/orderFeedback'
  }
]

import moment from 'moment'

export default {
  data () {
    return {
      monthDay: '',
      dayOfWeek: '',
      dataType,
      navList,
      userList: {},
      changeBool: false,
      tableData: [],
      loading: false,
      list: {},
      date: '',
      ydate: '',
      showTextTypeTab: 1,
      tableData: {},
      tm: ''
    }
  },
  methods: {
    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
    },
	
	myNavigateTo (url) {
		uni.navigateTo({
		  url: url // 跳转到对应路径的页面
		});
	}
  },
  onLoad () {
    this.getSwiperList()
    this.getOverview()
    this.getDataTime()
  }
}
</script>

<style 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 {
  width: 50px;
  height: 50px;
  /* border-radius: 10px;
    background-color: #007afd; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.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: 20px;
  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 {
  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 {
  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 #d8ddeb;
  font-size: 14px;
  color: #2f4056;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center !important;
}
/*table样式 end*/
</style>