xytSk-App/pages/index/index.vue

<template>
  <view class="container">
    <!-- 个人信息 -->
    <view class="info">
      <div class="left">
        <div class="icon">
          <image
            style="width: 100%; height: 100%"
            src="../../static/tabs/user.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].positionName }}
          </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 class="navIcon">
          <image
            style="width: 50%; height: 50%"
            :src="item.icon"
            mode="aspectFit"
          ></image>
        </div>
        <div class="navTxt">{{ item.value }}</div>
      </div>
    </view>
    <view class="warn">
      <image
        style="width: 16px; height: 16px; vertical-align: middle"
        src="../../static/tabs/orangewarn.png"
        mode="aspectFit"
      ></image
      ><span>当前防汛应急响应：IV级</span>
    </view>

    <!-- 24小时综述 -->
    <view class="info_24">
      <div class="heart">
        <h4>24小时综述</h4>
        <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">
        <h4>24h天气预报</h4>
        <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="imgs"
        style="height: 300px; background-color: pink; text-align: center"
      >
        <!--  24h天气预报图像-->
        <image
          v-if="!changeBool"
          src="../../static/tabs/bigImg.png"
          mode="aspectFit"
        ></image>
        <!-- 表格-->
        <div v-else class="tableBox">
          <div class="table_h">
            <div
              class="leftTab"
              :class="{ activetextTypeTab: showTextTypeTab == 1 }"
            >
              水库降雨
            </div>
            <div
              class="rightTab"
              :class="{ activetextTypeTab: showTextTypeTab == 2 }"
            >
              区域降雨
            </div>
          </div>
        </div>
      </div>
    </view>

    <view class="info_24">
      <div class="heart">
        <h4>短时天气预报</h4>
        <div class="time">04月25日08时 至 04月25日10时</div>
      </div>
      <div
        class="imgs"
        style="height: 300px; background-color: pink; 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/ysgzq.png'
  },
  {
    value: '水情',
    key: 2,
    icon: '../../static/tabs/ysgzq.png'
  },
  {
    value: '工情灾情',
    key: 3,
    icon: '../../static/tabs/ysgzq.png'
  },
  {
    value: '信息上报',
    key: 4,
    icon: '../../static/tabs/ysgzq.png'
  },
  {
    value: '预警',
    key: 5,
    icon: '../../static/tabs/ysgzq.png'
  }
]

import moment from 'moment'

export default {
  data () {
    return {
      monthDay: '',
      dayOfWeek: '',
      dataType,
      navList,
      userList: {},
      changeBool: false,
      tableData: [],
      loading: false,
      list: {},
      date: '',
      ydate: '',
      showTextTypeTab: 1
    }
  },
  methods: {
    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?_=1717039224475'
        )
        console.log('--2-', res)
        this.list = res.data

        console.log('--2-', res)
      } catch (e) {
        uni.$showMsg()
      }
    },
    changeTable (val) {
      this.changeBool = !this.changeBool
      console.log('this.changeBool', this.changeBool)
    },
    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)
    }
  },
  onLoad () {
    this.getSwiperList()
    this.getOverview()
    this.getDataTime()
  }
}
</script>

<style scoped>
.container {
  font-size: 14px;
  line-height: 24px;
}
.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: 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: #f8dbaf;
  color: #de2433;
  padding: 10px;
  text-align: center;
}

/* info_24 */
.info_24 {
  padding: 20px;
}
.heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time {
  color: #ccc;
  font-size: 12px;
}

.g1 {
  color: #18d310;
}
.ye {
  color: #f9c36f;
  /* font-weight: 600; */
}
.b1 {
  color: #00cdee;
  padding: 0 2px;
}

.uni-group {
  display: flex;
  align-items: center;
}
/* 表格 */
.tableBox {
  position: relative;
}
.tableBox .table_h {
  display: flex;
  text-align: center;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
}
.leftTab {
  width: 80px;
  border: 1px solid #ccc;
  border-radius: 3px 0 0 3px;
  /* border-right: 0; */
}
.rightTab {
  width: 80px;
  border: 1px solid #ccc;
  border-radius: 0 3px 3px 0;
  border-left: 0;
}
.activetextTypeTab {
  background-color: #007afd;
}
</style>