tsg-app/pages/briefList/detail/index.vue

<template>
  <view
    :style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#f0f0f0' }"
  >
    <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
        class=""
        v-for="item in list"
        style="margin: 10px; background-color: #fff; padding: 10px"
      >
        <view class="contentItem">
          <view class="itemC">
            <text>标题</text>
            <text>{{ getTitleDate(item.date) }}汛情简报</text>
          </view>
          <view class="itemC">
            <text>发布时间</text>
            <text>{{ item.date }}</text>
          </view>
          <view class="itemC">
            <view class="itemNo" style="flex-direction: column">
              <text>消息内容</text>
              <view class="textContent">
                <span style="margin-left: 15px">{{ briefTime(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</span>(<span
                  class="xqjb-redColor"
                  >{{ item.maxStnm }},{{ raimTime(item.maxTm) }}</span
                >)。当前水库水位
                <span class="xqjb-redColor">{{ item.rz8 }}m</span
                >，汛限水位(<span>{{ item.flLowLimLev }}m</span>)，较昨日
                <span class="xqjb-redColor"
                  >{{ increaseWater(item.rz8, item.rzYesterday8) }}m</span>，库容达
                <span class="xqjb-redColor">{{ item.w }}万m³</span>。--
                <span>{{ endDataString(item.date) }}</span>
              </view>
              <!-- <u--textarea
                v-model="item.content"
                placeholder="请输入内容"
                disabled
              ></u--textarea> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-calendar
      :show="show"
      mode="range"
      @confirm="confirm"
      @cancel="cancel"
    ></u-calendar>
  </view>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      show: false,
      model: {
        stm: "",
        etm: "",
      },
      list: [],
    };
  },
  onLoad(options) {
    console.log("JSON.parse(options.item)", JSON.parse(options.item));

    this.list.push(JSON.parse(options.item));
  },
  methods: {
    endDataString(date) {
      return moment(date).subtract(1, "days").format("YYYY-MM-DD 08:00");
    },
    increaseWater(rz8, rzYesterday8) {
      let values = "";
      if (rz8 && rzYesterday8) {
        let dob = (rz8 - rzYesterday8).toFixed(2);
        values = dob > 0 ? `上涨${Math.abs(dob)}` : `下降${Math.abs(dob)}`;
      }
      return values;
    },
    raimTime(maxTm) {
      return maxTm ? moment(maxTm).format("D日H时") : "";
    },
    briefTime(date) {
      return date ? moment(date).format("YYYY年M月D日") : "";
    },
    getTitleDate(date) {
      return date ? moment(date).subtract(1, "days").format("YYYY-MM-DD") : "";
    },
    confirm(e) {
      console.log(e);
      this.model.stm = e[0];
      this.model.etm = e[1];
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.xqjb-redColor {
  color: #db001b;
}
.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 {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  .blueTiao {
    background-color: #007aff;
    width: 5px;
    height: 16px;
    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 {
  margin-top: 15px;
  .itemC {
    display: flex;
    justify-content: space-between;
    display: flex;
    color: #666666;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  .itemNo {
    color: #666666;
    padding: 10px;
  }
}
</style>