cbsl-app/pages/homeIndex/forecast24.vue

<template>
    <view class="info_24">
        <div class="heart">
        <p class="title">
            <span class="line"></span><span class="h4">24小时天气预报</span>
        </p>
        </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>

        <div class="imgs" style="height: 100%; text-align: center">
        <!--  24h天气预报图像-->
        <image
            v-if="!changeBool && imgList.img24h"
            :src="imgList.img24h.url"
            mode="aspectFit"
            @click="previewImage(imgList.img24h.url)"
        ></image>
        <!-- 表格-->
        <div v-else class="tableBox">
            <div v-if="!loading" class="table_div">
                <div class="table_cur">
                    <table style="width: 100%">
                        <tr>
                            <th style="width: 50px; color: #59a7ff">序号</th>
                            <th style="width: 70%; color: #59a7ff">水库</th>
                            <th style="width: 50%; color: #59a7ff">24小时降雨量(mm)</th>
                        </tr>
                        <div
                            style="max-height: 260px; overflow-y: auto"
                            v-if="tableData.data"
                        >
                            <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>
                    </table>
                </div>
            </div>
            <div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
        </div>
        </div>
    </view>
</template>

<script>


import moment from "moment";
export default {
    data() {
        return {
            changeBool: false,
            imgList: {},
            tableData: [],
            loading:false,
            tm:null,
        };
    },
    methods: {
        async getWeatherArea(tm) {
            this.loading = true
            try {
                const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
                console.log(res);
                this.tableData = res;
                this.loading = false
            } catch (e) {
                uni.$showMsg();
            }
        },
        async getImgs() {
          uni.request({
            url: "http://223.75.53.124:8005/grb/latest",
            success: (res) => {
              const myTm = res.data.data.tm;
              if (myTm) {
                uni.request({
                  url: "http://223.75.53.124:8005/grb/rainimglist",
                  data: {
                    tm: moment(myTm).format("YYYYMMDDHH"),
                  },
                  success: (res) => {
                    this.imgList = res.data.data;
                    let tm = moment().add(1, "days").format("MM月DD日");
                    let tm2 = moment().format("MM月DD日");
                    this.imgData = [`${tm2}08时`, `${tm}08时`];
                  },
                });
              }
            },
          });
        },
        changeTable(val) {
          this.changeBool = !this.changeBool;
          if (val && this.tm) {
            this.getWeatherArea(this.tm);
          }
        },
        previewImage(item) {
          uni.previewImage({
            urls: [item],
            longPressActions: {
              itemList: ["发送给朋友", "保存图片", "收藏"],
              success: function (data) {
                console.log(
                  "选中了第" +
                    (data.tapIndex + 1) +
                    "个按钮,第" +
                    (data.index + 1) +
                    "张图片"
                );
              },
              fail: function (err) {
                console.log(err.errMsg);
              },
            },
          });
        },
        getDataTime() {
            let d1 = moment().format("YYYYMMDD");
            let h1 = moment().format("HH") >= 20 ? "20" : "08";
            this.tm = d1 + h1;
        },
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
        this.getImgs();
        this.getDataTime();
    },
};
</script>

<style lang="scss" scoped>
/* 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 {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 12rpx;
  box-shadow: 0px 0px 5px #eee;
}
.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*/
.noData {
  width: 100px;
}

</style>