ykzz-app/pages/yj/index.vue

<template>
  <view :style="{ height: '100vh', overflow: 'hidden' }">
    <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; border-top: 1px solid #f0f0f0">
      <view
        class="align-center"
        style="
          height: 44px;
          background-color: #f0f0f0;
          font-size: 12px;
          padding: 0 10px;
        "
      >
        预(报)警时间：{{ model.start }} 至 {{ model.end }}
      </view>
      <view class="itemYj">
        <view class="itemYjCont" v-for="(value, key) of list" :key="key">
          <view class="item" @click="todetail(key, value)">
            <view
              :style="`color:${!getValue(value) ? '#D9001B' : '#04D919'} ;`"
              class="num"
            >
              {{ getValue(value) }}
            </view>
            <view class="title">
              {{ mapType[key] }}
            </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: {
        start: moment().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
        end: moment().format("YYYY-MM-DD HH:mm:ss"),
      },
      mapType: {
        zhll: "闸后流量告警",
        zqsw: "闸前水位告警",
        zhsw: "闸后水位告警",
        spwy: "水平位移告警",
        jgfkd: "结构缝开度告警",
        sljc: "渗流监测告警",
      },
      list: {
        zhll: [],
        zqsw: [],
        zhsw: [],
        spwy: [],
        jgfkd: [],
		sljc:[]
      },
    };
  },

  methods: {
    getValue(value) {
      if (Array.isArray(value)) {
        return value.length;
      } else {
        return value;
      }
    },
    confirm(e) {
      console.log(e);
      this.model.stm = e[0];
      this.model.etm = e[1];
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    todetail(key, e) {
      let arr = encodeURIComponent(JSON.stringify(e));
      if (!e.length) {
        return;
      }
	    uni.navigateTo({
          url: "/pages/yj/detail/wyyj?list=" + arr,
        });
    //   if (key == "qxWarn") {
    //     uni.navigateTo({
    //       url: "/pages/yj/detail/qxyj?list=" + arr,
    //     });
    //   }
    //   if (key == "zhll") {
    //     uni.navigateTo({
    //       url: "/pages/yj/detail/wyyj?list=" + arr,
    //     });
    //   }
    //   if (key == "flowWarn") {
    //     uni.navigateTo({
    //       url: "/pages/yj/detail/wyyj?list=" + arr,
    //     });
    //   }
    //   if (key == "pressWarn") {
    //     uni.navigateTo({
    //       url: "/pages/yj/detail/wyyj?list=" + arr,
    //     });
    //   }
    //   if (key == "aiWarnCount") {
    //     uni.navigateTo({
    //       url: "/pages/yj/detail/aiyj?list=" + arr,
    //     });
    //   }
    },
    getList() {
      uni.$http
        .post("/gunshiApp/tsg/stQxWarnR/home/warn", this.model)
        .then((res) => {
          this.list = res.data.data;
        });
    },
	// 闸前
    getZqList() {
    return  uni.$http
        .post("/gunshiApp/ykz/warnRecord/page", {
          pageSo: {
            pageSize: 999,
            pageNumber: 1,
          },
		  dateTimeRangeSo:{
			...this.model
		  }
        })
        
    },
	// 安全类型
	  getAqList() {
    return  uni.$http
        .post("/gunshiApp/ykz/osmoticWarnRecord/page", {
          pageSo: {
            pageSize: 999,
            pageNumber: 1,
          },
		   dateTimeRangeSo:{
			...this.model
		  }
        })
    },

	getAllList(){
		Promise.all([this.getZqList(),this.getAqList()]).then(res => {
			const result  = res.map(item => item.data?.data?.records).flat();
			const foldData = {
				zhll:result.filter(item => item.typeName == '闸后流量'), //闸后流量
				zqsw:result.filter(item => item.typeName == '闸前水位'), //闸前水位
				zhsw:result.filter(item => item.typeName == '闸后水位'),//闸后水位
				spwy:result.filter(item => item.typeName == '水平位移'),
				jgfkd:result.filter(item => item.typeName == '结构缝开度'),
				sljc:result.filter(item => item.typeName == '渗流监测'),
			}
			this.list = {...foldData}
		})
	}
  },
    onLoad() {
    // this.getList();
	this.getAllList();
  },
};
</script>

<style lang="scss" scoped>
.itemYj {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  .itemYjCont {
    border-width: 0px;
    width: 112px;
    height: 85px;
    background: inherit;
    background-color: rgba(234, 244, 254, 1);
    border: none;
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    .item {
      text-align: center;
    }
    .normal {
      color: #04d919;
    }
    .bj {
      color: #d9001b;
    }
    // width: 30%;
    // margin: 5px;
  }
}
</style>