tsg-app/pages/briefList/index.vue

<template>
  <view
    :style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }"
  >
    <u-status-bar></u-status-bar>
    <u-navbar
      title="汛情简报"
      :autoBack="true"
      :titleStyle="{
        fontSize: '18px',
      }"
      :height="44"
      :safeAreaInsetTop="true"
      leftIconSize="20"
      leftIconColor="rgb(153, 153, 153)"
    >
    </u-navbar>
    <view
      class=""
      style="
        margin-top: 44px;
        background-color: #f0f0f0;
        border-top: 1px solid #f0f0f0;
      "
    >
      <view style="padding:0 10px,backgroundColor:#fff">
        <view
          class="time-ranger"
          style="padding: 10px; margin-bottom: 0; background-color: #fff"
        >
          <view class="start-time">
            <text>开始时间</text>
            <text
              @click="showTime = true"
              style="margin-left: 10%; color: #3399ef"
              >{{ startTime }}</text
            >
          </view>
          <view class="end-time">
            <text>结束时间</text>
            <text
              @click="showTime1 = true"
              style="margin: 0 10%; color: #3399ef"
              >{{ endTime }}</text
            >
            <view class="search-btn" @click="searchTm"> 搜索 </view>
          </view>
        </view>
      </view>
      <view
        style="height: calc(100vh - 180px); overflow-y: auto"
        v-if="list.length !== 0"
      >
        <view
          class=""
          v-for="(item, index) in list"
          :key="index"
          style="margin: 10px; background-color: #fff; padding: 10px"
          @click="toDetail(item)"
        >
          <view class="item">
            <view class="align-center">
              <view class="title">
                {{ getTitleDate(item.date) }}
              </view>
            </view>
          </view>
          <view class="contentItem">
            <view class="itemC">
              <span style="margin-left: 30px">{{
                getBriefTime(item.date)
              }}</span
              >8时，过去24小时最大累计降雨量
              <span class="xqjb-redColor">{{ item.drp24Sum }}mm</span>(<span
                class="xqjb-redColor"
                >{{ item.sumStnm }}</span
              >)，最大点雨量
              <span class="xqjb-redColor">{{ item.drp24Max }}mm/h</span>（...
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          height: calc(100vh - 150px);
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
        "
        v-else
      >
        <image src="../../static/empty.png" mode=""></image>
      </view>
    </view>
    <u-datetime-picker
      :show="showTime"
      v-model="stm"
      mode="datetime"
      @confirm="showTime = false"
      @cancel="showTime = false"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="showTime1"
      v-model="etm"
      mode="datetime"
      @confirm="showTime1 = false"
      @cancel="showTime1 = false"
    ></u-datetime-picker>
  </view>
</template>

<script>
import moment from "moment";
const startData = moment().subtract(7, "days").format("YYYY-MM-DD");
const endData = moment().format("YYYY-MM-DD");
export default {
  data() {
    return {
      minDate: moment().startOf("year").valueOf(),
      maxDate: moment().valueOf(),
      show: false,
      showTime: false,
      showTime1: false,
      start: startData,
      end: endData,
      stm: startData,
      etm: endData,
      userList: uni.getStorageSync("value").data,
      list: [],
    };
  },
  onShow(options) {
    this.getList();
  },

  computed: {
    startTime: function () {
      return this.stm ? moment(this.stm).format("YYYY-MM-DD") : this.start;
    },
    endTime: function () {
      return this.etm ? moment(this.etm).format("YYYY-MM-DD") : this.end;
    },
  },
  methods: {
    getTitleDate(date) {
      return date ? moment(date).subtract(1, "days").format("YYYY-MM-DD") : "";
    },
    getBriefTime(date) {
      return date ? moment(date).format("YYYY年M月D日") : "";
    },
    searchTm() {
      this.getList();
    },
    getList() {
      const startDate1 = moment(this.stm).format("YYYY-MM-DD");
      const endDate1 = moment(this.etm).format("YYYY-MM-DD");
      uni.$http
        .get(
          `/gunshiApp/tsg/resBrief/getResBriefList?startDate=${startDate1}&endDate=${endDate1}`
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        });
    },
    confirm(e) {
      console.log(e);
      this.model.start = e[0];
      this.model.end = e[1];
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    toDetail(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/briefList/detail/index?item=" + JSON.stringify(item),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-input-placeholder {
  text-align: center;
}

.myTitleStyle {
  font-size: 30px;
  background-color: red;
  height: 200px;
}

.tabsClass {
  margin-top: 44px;
  height: 44px;
  padding: 0 40px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.item {
  // border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .blueTiao {
    background-color: #2a7efa;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .title {
    border-width: 0px;
    font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    color: #666666;
  }

  .titleRight {
    display: flex;

    .border {
      border-width: 0px;
      background-color: rgba(236, 245, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(187, 220, 255, 1);
      border-radius: 5px;
      box-shadow: none;
      width: 58px;
      height: 25px;
      color: #689fff;
      text-align: center;
    }
  }
}

.contentItem {
  .itemC {
    color: #666666;
    padding: 10px;
  }
  .xqjb-redColor {
    color: #db001b;
  }
}
</style>