tsg-app/pages/homeIndex/index.vue

<template>
  <view class="container">
    <!-- 个人信息 -->
    <view class="info">
      <div class="left">
        <div class="icon">
          <image
            style="width: 100%; height: 100%; border-radius: 50%"
            :src="default_src"
            mode="aspectFill"
          >
          </image>
        </div>
        <div class="info_name">
          <div v-if="userList.userName">{{ userList.nickName }}</div>
          <div v-if="userList.dept">
            {{ userList.dept.deptName || "" }}
          </div>
        </div>
      </div>
      <div class="right">
        <u-icon
          name="bell-fill"
          size="30"
          color="#fff"
          @click="todetailmessgae()"
        >
        </u-icon>
        <u-badge
        v-if="messagelist"
          bgColor=" #de2433"
          :offset="[25, 20]"
          :value="messagelist.length"
          :absolute="true"
        ></u-badge>
      </div>
    </view>
    <!-- nav -->
    <view class="navBar" style="display: flex; flex-wrap: wrap">
      <div class="navList" v-for="(item, index) in getNavList" :key="index">
        <div
          @click="myNavigateTo(item.url, item.value)"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div class="navIcon">
            <image
              style="width: 100%; height: 100%"
              :src="item.icon"
              mode="aspectFit"
            ></image>
            <div
              class="readStatus"
              v-show="
                (warnStatus && item.key == 2) ||
                (handleStatus && item.key == 6) ||
                (xcStatus && item.key == 5)
              "
            ></div>
          </div>
          <div class="navTxt">{{ item.value }}</div>
        </div>
      </div>
    </view>
    <view class="warn" @click="todetailBriefmessgae()">
      <view style="display: flex; align-items: center;justify-content: space-between;">
        <view class="xqjb-title-left">
          <view
            style="
              width: 8rpx;
              height: 30rpx;
              margin-right: 16rpx;
              vertical-align: middle;
              background-color: #0297d7;
            "
          ></view
          ><span style="color: #000">汛情简报</span>
        </view>
        <view >{{startDate}}</view>
      </view>
      <view class="textContent">
				<span style="margin-left: 30px;">{{briefTime}}</span>8时，过去24小时最大累计降雨量
				<span class="xqjb-redColor" >{{resBriefObj.drp24Sum}}mm</span>(<span class="xqjb-redColor">{{resBriefObj.sumStnm}}</span>)，最大点雨量
				<span class="xqjb-redColor">{{resBriefObj.drp24Max}}mm</span>(<span class="xqjb-redColor">{{resBriefObj.maxStnm}}，{{raimTime}}</span>)。当前水库水位
				<span class="xqjb-redColor">{{resBriefObj.rz8}}m</span>，汛限水位(<span>{{resBriefObj.flLowLimLev}}m</span>)，较昨日
				<span class="xqjb-redColor">{{increaseWater}}m</span>，库容达
				<span class="xqjb-redColor">{{resBriefObj.w}}万m³</span>。--
				<span>{{endDataString}}</span>
			</view>
    </view>
    <view class="warn">
      <sk-info />
    </view>
    <view class="warn1" v-for="item in Ylzlist" :key="item.stnm">
      <ylz-list :item="item" />
    </view>
    <view class="warn1" v-for="item in swzList" :key="item.stcd">
      <SwzList :item="item" />
    </view>
    <view
      class="info_24"
      :style="{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '5px 0',
        margin: '0',
      }"
    >
      <image
        :style="{ width: '20px', height: '20px', marginRight: '10px' }"
        src="../../static/logoc.png"
      ></image>
      <div>技术支持: 湖北鲧石物联科技有限公司</div>
    </view>
  </view>
</template>

<script>
import moment from "moment";
const warnStm = moment().subtract(1, "days").format("YYYY-MM-DD HH:mm:ss");
const warnetm = moment().format("YYYY-MM-DD HH:mm:ss");
const stm = moment().startOf("year").format("YYYY-MM-DD HH:mm:ss");
const etm = moment().format("YYYY-MM-DD HH:mm:ss");
const startDate = moment().subtract(1,'days').format("YYYY-MM-DD");
const endDate = moment().format("YYYY-MM-DD");
import SkInfo from "../skInfo/index.vue";
import YlzList from "../ylzList/index.vue";
import SwzList from "../sws/index.vue";
let timer = null;
export default {
  components: {
    SkInfo,
    YlzList,
    SwzList,
  },
  data() {
    return {
      Ylzlist: [],
      userList: uni.getStorageSync("value"),
      default_src: uni.getStorageSync("avatar"),
      messagelist: [],
      xcStatus: false,
      ylzList: [],
      swzList: [],
			resBriefObj:{},
			startDate,
			endDate,
      warnStatus: false, //预警
      handleStatus: false, //问题处理
    };
  },
  onPullDownRefresh() {
		this.getresBriefList();
    this.getYjData();
    this.getXcrwData();
    this.getHandleData();
    uni.$showMsg("刷新成功");
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  computed: {
    getNavList() {
      return [
        {
          value: "综合监视",
          key: 1,
          icon: "../../static/tabs/zhjs.png",
          url: "/pages/zhjs/index",
        },
        {
          value: "预警",
          key: 2,
          icon: "../../static/tabs/yujing_icon@2x2.png",
          url: "/pages/yj/index",
        },
        {
          value: "视频监控",
          key: 3,
          icon: "../../static/tabs/spjk.png",
          url: "/pages/spjk/index",
        },
        {
          value: "安全监测",
          key: 4,
          icon: "../../static/tabs/aqjc.png",
          url: "/pages/newAqjc/index",
        },
        {
          value: "巡查任务",
          key: 5,
          icon: "../../static/tabs/xcrw.png",
          url: "/pages/xcrw/index",
        },
        {
          value: "问题处理",
          key: 6,
          icon: "../../static/tabs/wtcl.png",
          url: "/pages/wtcl/index",
        },
      ];
    },
		briefTime(){
			return this.resBriefObj.date ? moment(this.resBriefObj.date).format('YYYY年M月D日') :''
		},
		raimTime(){
			return this.resBriefObj.maxTm ? moment(this.resBriefObj.maxTm).format('D日H时') :''
		},
		increaseWater(){
			const {rz8,rzYesterday8} = this.resBriefObj
			let values = ''
			if(rz8 && rzYesterday8){
        let dob = Math.abs((rz8-rzYesterday8).toFixed(2))
				values = dob > 0? `上涨${Math.abs(dob)}`:`下降${Math.abs(dob)}`
			}
			return values
		},
		endDataString(){
			return moment(this.endDate).format('YYYY-MM-DD 08:00');
		}
  },
  methods: {
    getYlzList() {
      uni.$http.post("/gunshiApp/tsg/stPptnRReal/list").then((res) => {
        if (res.data.code == 200) {
          this.Ylzlist = res.data.data;
        }
      });
    },
		// 获取汛情简报数据
		  getresBriefList() {
      uni.$http.get(`/gunshiApp/tsg/resBrief/getResBriefList?startDate=${startDate}&endDate=${endDate}`).then((res) => {
        if (res.data.code == 200) {
					  this.resBriefObj = res.data.data[0];
        }
      });
    },
    getList() {
      uni.$http
        .post("/gunshiApp/tsg/messageCenter/list", {
          start: "",
          end: "",
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.messagelist = res.data.data;
          }
        });
    },
    getSwList() {
      uni.$http
        .post("/gunshiApp/tsg/reservoir/water/listV2", {
          sources: ["SW", "SK"],
        })
        .then((res) => {
          this.swzList = res.data.data;
        });
    },
    todetailmessgae() {
      uni.navigateTo({
        url: "/pages/messageList/index",
      });
    },
 todetailBriefmessgae() {
      uni.navigateTo({
        url: "/pages/briefList/index",
      });
    },
    async setInsert(menu2) {
      try {
        const params = {
          createId: uni.getStorageSync("value").userId,
          loginType: 1,
          menu1: "首页",
          menu2: menu2 || "首页",
        };
        const { data } = await uni.$http.post(
          "/gunshiApp/tsg/visitMenuLog/insert",
          params
        );
      } catch (error) {}
    },
    myNavigateTo(url, menu2) {
      uni.navigateTo({
        url: url, // 跳转到对应路径的页面
      });
      this.setInsert(menu2);
    },

    // 问题处理
    async getHandleData() {
      let params = {
        pageSo: {
          pageSize: 10,
          pageNumber: 1,
        },
        dateTimeRangeSo: {
          start: stm,
          end: etm,
        },
        isHandle: 0,
        inspectUserId: uni.getStorageSync("value").userId,
      };
      try {
        const res = await uni.$http.post(
          "/gunshiApp/tsg/inspect/detail/page",
          params
        );
        if (res.data.data.records?.length > 0) {
          this.handleStatus = true;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    // 预警
    async getYjData() {
      const params = {
        start: warnStm,
        end: warnetm,
      };
      try {
        const res = await uni.$http.post(
          "/gunshiApp/tsg/stQxWarnR/home/warn",
          params
        );
        const { flowWarn, pressWarn, qxWarn, shiftWarn } = res.data.data;
        const arr = [...flowWarn, ...pressWarn, ...qxWarn, ...shiftWarn];
        if (arr?.length > 0) {
          this.warnStatus = true;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    // 巡查任务
    async getXcrwData() {
      const userId = uni.getStorageSync("value").userId;
      const params = {
        dateRangeSo: {
          start: stm,
          end: etm,
        },
        inspectUserId: userId,
        statusList: [0, 1],
      };
      try {
        const res = await uni.$http.post(
          "/gunshiApp/tsg/inspect/task/list",
          params
        );
        if (res.data.data?.length > 0) {
          this.xcStatus = true;
        } else {
          this.xcStatus = false;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
  },

  onLoad() {
    this.getYlzList();
		this.getresBriefList();
  },

  onShow() {
    var that = this;
    that.getList();
    this.getXcrwData();
    timer = setInterval(function () {
      that.getList();
    }, 10000);
    this.getHandleData();
    this.setInsert();
    this.getYjData();
    this.getSwList();
		this.getresBriefList();
  },
  onHide() {
    clearInterval(timer);
    timer = null;
  },
};
</script>

<style lang="scss" scoped>

.xqjb-redColor{
	color:#db001b
}
.xqjb-title-left{
	display: flex;
	align-items: center;
}
.container {
  position: relative;
  font-size: 14px;
  line-height: 24px;
  background-color: #f3f5f8;
  height: 100%;
  overflow: auto;
}

.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 {
  padding: 13px;
  padding-bottom: 0;
  /* text-align: center; */
  display: flex;
  background-color: #fff;
  // justify-content: center;
  margin-bottom: 10px;
}

.navList {
  text-align: center;
  margin-right: 0px;
  margin-bottom: 10px;
}

.navIcon {
  position: relative;
  width: 82px;
  height: 50px;
}

.readStatus {
  position: absolute;
  top: 0;
  right: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #de2433;
}

.warn {
  padding: 18rpx 20rpx;
  text-align: left;
  margin-bottom: 12rpx;
  background: #fff;
}

.warn1 {
  padding: 18rpx 20rpx;
  text-align: left;
  margin-bottom: 5px;
  background: #fff;
}

.info_24 {
  width: 100%;
  // position: fixed;
  // padding: 15px;
  background-color: #fff;
  // margin-bottom: 12rpx;
  height: 100px;
}

.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>