cbsl-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.data">{{ userList.data.userName }}</div>
          <div v-if="userList.data">
            {{ userList.data.orgList[0].orgName || "" }}
          </div>
        </div>
      </div>
      <div class="right">
        <div>{{ monthDay }}</div>
        <div>{{ dataType[dayOfWeek] }}</div>
      </div>
    </view>
    <!-- nav -->
    <view class="navBar">
      <div class="navList" v-for="(item, index) in getNavList" :key="index">
        <div @click="myNavigateTo(item.url, item.value)">
          <div class="navIcon">
            <image
              style="width: 100%; height: 100%"
              :src="item.icon"
              mode="aspectFit"
            ></image>
            <div
              class="readStatus"
              v-show="
                (readStatus && item.key == 3) ||
                (dispatchStatus && item.key == 5 && limit == 0) ||
                (limit == 1 && readYjStatus && item.key == 5)
              "
            ></div>
          </div>
          <div class="navTxt">{{ item.value }}</div>
        </div>
      </div>
    </view>
    <view class="warn" v-if="warnings.length > 0">
      <warn-swiper :warnings="warnings" ></warn-swiper>
    </view>
    <view class="warn">
      <image
        style="
          width: 18rpx;
          height: 22rpx;
          margin-right: 16rpx;
          vertical-align: middle;
        "
        src="../../static/tabs/ld.png"
        mode="aspectFit"
      ></image
      ><span style="color: #000">当前防汛应急响应：</span>
      <span style="color: #59a7ff">{{
        !level || !yjStatus ? "无" : level
      }}</span>
    </view>

    <!-- 24小时综述 -->
    <view v-show="limit == 1">
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">24小时综述</span>
          </p>
          <div class="time">{{ ydate }}至{{ date }}</div>
        </div>
        <div class="info_con" v-if="list.data">
          <span class="g1">{{ list.data.yesterday }}</span
          >至<span class="g1">{{ list.data.today }}</span
          >24小时中共有<span class="ye">{{ list.data.stationNum }}</span
          >个降雨测站(山洪测站<span class="ye">{{
            list.data.shStationNum
          }}</span
          >个)，其中最大降雨测站为<span class="ye">{{
            list.data.maxRain ? list.data.maxRain.stnm : "-"
          }}</span
          >，降雨量<span class="ye">{{
            list.data.maxRain ? list.data.maxRain.drp : "-"
          }}</span
          >mm，
          <template v-if="list.data.cntDrp10 != 0"
            ><span class="b1">10mm</span>以下测站数为<span class="ye">{{
              list.data.cntDrp10
            }}</span
            >个。</template
          ><template v-if="list.data.cntDrp25 != 0"
            ><span class="b1">10mm至25mm</span>测站数为<span class="ye">{{
              list.data.cntDrp25
            }}</span
            >个。</template
          >
          <template v-if="list.data.cntDrp50 != 0">
            <span class="b1">25mm至50mm</span>测站数为<span class="ye">{{
              list.data.cntDrp50
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrp100 != 0">
            <span class="b1">50mm至100mm</span>测站数为<span class="ye">{{
              list.data.cntDrp100
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrp250 != 0">
            <span class="b1">100mm至250mm</span>测站数为<span class="ye">{{
              list.data.cntDrp250
            }}</span
            >个。
          </template>
          <template v-if="list.data.cntDrpg250 != 0"
            ><span class="b1">250mm以上</span>测站数为<span class="ye">{{
              list.data.cntDrpg250
            }}</span
            >个。</template
          >
        </div>
      </view>
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">24小时天气预报</span>
          </p>
          <div>
            <!-- <span class="time">{{ imgData[0] }}至{{ imgData[1] }}</span> -->
            <!-- <image
              style="width: 16px; height: 16px; vertical-align: middle"
              src="../../static/tabs/panelTitle.png"
              mode="aspectFit"
              @click="changeTable"
            ></image> -->
          </div>
        </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 v-if="changeBool" class="table_h">
            <div
              class="leftTab"
              :class="{ activetextTypeTab: showTextTypeTab == 1 }"
              @click="tabChange(1)"
            >
              水库降雨
            </div>
            <div
              class="rightTab"
              :class="{ activetextTypeTab: showTextTypeTab == 2 }"
              @click="tabChange(2)"
            >
              区域降雨
            </div>
          </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 class="table_div">
              <div class="table_cur">
                <table style="width: 100%; margin-top: -10%">
                  <tr>
                    <th style="width: 50px; color: #59a7ff">序号</th>

                    <th
                      v-if="showTextTypeTab == 1"
                      style="width: 70%; color: #59a7ff"
                    >
                      水库
                    </th>
                    <th v-else style="width: 70%; color: #59a7ff">区域</th>

                    <th style="width: 50%; color: #59a7ff">降雨量(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>

                  <!-- <tr>
                    <td style="width: 62px">1</td>
                    <td style="width: 70%">水库水库</td>
                    <td style="width: 50%">11</td>
                  </tr> -->
                </table>
              </div>
            </div>
          </div>
        </div>
      </view>
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">短时天气预报</span>
          </p>
          <!-- <div class="time" v-if="imgHourstm.length > 0">
            {{ imgHourstm[0] }}至{{ imgHourstm[1] }}
          </div> -->
        </div>
        <div class="imgs" style="height: 100%; text-align: center">
          <image
            v-if="imgHoursList.url != ''"
            :src="imgHoursList.url"
            mode="aspectFit"
            @click="previewImage(imgHoursList.url)"
          ></image>
          <image
            v-if="imgHoursList.url == ''"
            class="noData"
            src="../../static/tabs//noData1.png"
            mode="aspectFit"
          ></image>
        </div>
      </view>
    </view>
    <view v-show="limit == 0">
      <view class="info_24">
        <div class="heart">
          <p class="title">
            <span class="line"></span><span class="h4">雨情</span>
          </p>
          <div class="time" style="width: 50%; color: #000" v-if="timeList">
            <uni-data-select
              v-model="value1"
              :localdata="timeList"
              @change="changeTime"
              :clear="false"
            >
            </uni-data-select>
          </div>
        </div>
        <div
          class="info_icon"
          style="height: 260px; width: 100%"
          v-if="chartData.chartData"
        >
          <qiun-data-charts
            :chartData="chartData.chartData"
            :echartsApp="true"
            :eopts="chartData.eopts"
          />
        </div>
      </view>
      <view class="info_24">
        <div class="heart" style="margin-bottom: 10px">
          <p class="title">
            <span class="line"></span><span class="h4">水情</span>
          </p>
          <div class="time" style="width: 50%; color: #000">
            <u-subsection
              :list="subList"
              :current="current"
              @change="subChange"
              mode="subsection"
            ></u-subsection>
          </div>
        </div>
        <div class="info_icon" v-if="current == 0">
          <div
            v-for="(item, i) in hdList"
            :key="i"
            @click="jumpHdDetail(item)"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
            "
          >
            <div>
              <div style="font-size: 32rpx">{{ item.stnm }}</div>
              <div style="font-size: 24rpx">实时水位：{{ item.z }}m</div>
            </div>
            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
          </div>
          <div v-if="!hdList.length" style="text-align: center">暂无内容</div>
        </div>
        <div class="info_icon" v-else>
          <div
            v-for="(item, i) in skList"
            :key="i"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
            "
            @click="jumpSkDetail(item)"
          >
            <div>
              <div style="font-size: 32rpx">{{ item.stnm }}</div>
              <div style="font-size: 24rpx">
                实时水位：{{ item.normWatLev }}m
              </div>
            </div>
            <div style="color: #91939b">监测时间：{{ item.tm }}</div>
          </div>
          <div v-if="!skList.length" style="text-align: center">暂无内容</div>
        </div>
      </view>
    </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>
const dataType = {
  Monday: "星期一",
  Tuesday: "星期二",
  Wednesday: "星期三",
  Thursday: "星期四",
  Friday: "星期五",
  Saturday: "星期六",
  Sunday: "星期天",
};

import moment from "moment";
import { level } from "../../pages/utils/dicType";
import { disType } from "../utils/dicType.js";
import drpOption from "./chartOption.js";
import { restm } from "../utils/tool";
import WarnSwiper from "./warnSwiper";

export default {
  components: {
    WarnSwiper,
  },
  data() {
    return {
      monthDay: "",
      dayOfWeek: "",
      dataType,
      userList: {},
      changeBool: false,
      tableData: [],
      loading: false,
      list: {},
      date: "",
      ydate: "",
      showTextTypeTab: 1,
      tableData: {},
      tm: "",
      level: "",
      yjStatus: 0,
      warnings: [
      ],
      limit: disType(uni.getStorageSync("value").adcd),
      timeList: [
        { text: "昨天08:00~当前时间", value: 1 },
        { text: "今天08:00~当前时间", value: 2 },
        { text: "昨天08:00~今天08:00", value: 3 },
        { text: "最近1小时", value: 4 },
        { text: "最近3小时", value: 5 },
        { text: "最近6小时", value: 6 },
        { text: "最近12小时", value: 7 },
        { text: "最近24小时", value: 8 },
      ],
      value1: 3,
      rainChartData: [],
      formData: {
        stm: moment()
          .subtract(1, "days")
          .startOf("day")
          .set({ hour: 8, minute: 0 }),
        etm: moment().startOf("day").set({ hour: 8, minute: 0 }),
      },
      rainChartData: [],
      chartData: {},
      subList: ["河道水情", "水库水情"],
      current: 0,
      hdList: [],
      skList: [],
      readStatus: false, //工灾情状态
      readYjStatus: false, //预警状态
      dispatchStatus: false, //调令状态
      default_src: uni.getStorageSync("avatar"),
      imgList: {},
      imgtm: moment().format("YYYYMMDD"),
      imgData: [],
      imgHours: "",
      imgHourstm: [],
      imgHoursList: { url: "" },
      interval: null,
      numPic: 0,
      allStatus: false,
      warnStm:Number(moment(new Date()).add(-1,'days')),
			warnEtm:Number(new Date()),
    };
  },
  onPullDownRefresh() {
    this.getSwiperList();
    this.getOverview();
    this.getDataTime();
    this.getResponseLevel();
    this.getDispatchStatus();
    this.getReadStatus();
    this.shWarnList();
    if (this.limit == 1) {
      this.getYjRead();
      // this.getInterval()
      this.getImgs();
      this.getHoursImg();
    }
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  computed: {
    getNavList() {
      const adcd = uni.getStorageSync("value").adcd;
      let lever = 0;
      if (adcd.endsWith("000000000")) {
        //县
        return [
          {
            value: "雨情",
            key: 1,
            icon: "../../static/tabs/xingzhuang2.png",
            url: "/pages/rain/rain",
          },
          {
            value: "水情",
            key: 2,
            icon: "../../static/tabs/water2.png",
            url: "/pages/water/water",
          },
          {
            value: "工情灾情",
            key: 3,
            icon: "../../static/tabs/gongqing2.png",
            url: "/pages/gqzq/index",
          },
          {
            value: "信息上报",
            key: 4,
            icon: "../../static/tabs/xinxi_icon@2x2.png",
            url: "/pages/xxsb/index",
          },
          {
            value: "预警",
            key: 5,
            icon: "../../static/tabs/yujing_icon@2x2.png",
            url: "/pages/forewarning/forewarning",
          },
        ];
      } else {
        //乡镇
        return [
          {
            value: "雨情",
            key: 1,
            icon: "../../static/tabs/xingzhuang2.png",
            url: "/pages/rain/rain",
          },
          {
            value: "水情",
            key: 2,
            icon: "../../static/tabs/water2.png",
            url: "/pages/water/water",
          },
          // {
          //   value: '工情灾情',
          //   key: 3,
          //   icon: '../../static/tabs/gongqing2.png',
          //   url: '/pages/gqzq/index'
          // },
          {
            value: "调令反馈",
            key: 5,
            icon: "../../static/tabs/yujing_icon@2x2.png",
            url: "/pages/orderFeedback/orderFeedback",
          },
          {
            value: "信息上报",
            key: 4,
            icon: "../../static/tabs/xinxi_icon@2x2.png",
            url: "/pages/xxsb/index",
          },
        ];
      }
    },
  },
  watch: {
    rainChartData(newValue) {
      this.chartData = { ...drpOption(newValue) };
    },
    limit: {
      handler(newValue) {
        if (!newValue) {
          this.getRainList();
        }
      },
      immediate: true,
    },
    current: {
      handler(newValue) {
        if (newValue == 0) {
          this.getHdList();
        } else {
          this.getSkList();
        }
      },
      immediate: true,
    },
    allStatus: {
      handler(newValue) {
        const newArr = this.getNavList();
      },
      immediate: true,
    },
  },
  methods: {
    // 山洪预警走马灯
   async shWarnList(){
    try{
					const params = {
						stm:moment(this.warnStm).format('YYYY-MM-DD HH:mm:ss'),
						etm:moment(this.warnEtm).format('YYYY-MM-DD HH:mm:ss'),
						warnstatusids:['0','30'],
						warngradeids:['6','5']
					}
					const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/flood/warn',params)
					 if(res.data?.data?.length > 0){
            this.warnings = res.data.data.map(item => ({
            ...item,
            id:item.warnid,
            content:item.warnnm + "(" + item.warnstm + ")"
          }))
           }
				}catch(e){
          console.log(e);
        }
   },
    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);
          },
        },
      });
    },
    async getImgs() {
      let h = moment().format("HH");
      let m = moment().format("mm");
      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) => {
                console.log(res.data.data);
                this.imgList = res.data.data;

                // let inx = restm(h)

                // this.imgHours = res.data.data.imgHours[inx]

                let tm = moment().add(1, "days").format("MM月DD日");
                let tm2 = moment().format("MM月DD日");
                this.imgData = [`${tm2}08时`, `${tm}08时`];
                // this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
              },
            });
          }
        },
      });
    },
    getTmData() {
      let hn = this.numPic > 0 ? this.numPic : 1;
      let h = moment().subtract(hn, "hours").format();
      let m = moment().format("mm");
      console.log("hhh--", h, m, this.numPic);
      let tms = null,
        mm = null;
      let h1 = Number(h) - 1;
      if (h1 < 9) {
        h1 = Number(h) - this.numPic;
      }
      if (h1 < 10) {
        h1 = `0${h1}`;
      }
      if (m > 30) {
        h1 = Number(h) - 1;
        let m1 = h > 10 ? h : `0${h}`;
        tms = `${this.imgtm}${m1}30`;
        mm = "30";
      } else if (m < 10) {
        tms = `${this.imgtm}${h1}`;
        mm = "00";
      } else {
        tms = `${this.imgtm}${h1}30`;
        mm = "30";
      }
    },
    async getHoursImg() {
      let h = moment().format("HH");
      let m = moment().format("mm");
      console.log("hhh--", h, m, this.numPic);
      let tms = null,
        mm = null;
      let h1 = Number(h) - 1;

      if (h1 < 10) {
        let t = Number(h1) - Number(this.numPic);
        h1 = `0${t}`;
      }
      if (m > 30) {
        h1 = Number(h) - 1;
        let t3 = Number(h) - this.numPic;
        if (this.numPic <= 0) {
          let m3 = h1 > 10 ? h1 : `0${h1}`;
          tms = `${this.imgtm}${m3}30`;
        } else {
          t3 = t3 < 10 ? `0${t3}` : t3;
          tms = `${this.imgtm}${t3}30`;
        }
        mm = "30";
      } else if (m < 10) {
        tms = `${this.imgtm}${h1}00`;
        mm = "00";
      } else {
        tms = `${this.imgtm}${h1}30`;
        mm = "30";
      }

      console.log("小时", h1);
      console.log("需要参数", tms);

      uni.request({
        url: "http://223.75.53.124:8005/radar/latest",
        success: (res) => {
          let tm = moment(res.data.data.tm);
          let subfix = "?rainFile=" + res.data.data.rainFile;
          let url = `http://shqxjs.cloudowr.cn/yj_folder/rain/radar/${tm.format(
            "YYYYMM"
          )}/${tm.format("DD")}/${tm.format(
            "YYYYMMDDHHmm"
          )}+00.02.jpg${subfix}`;
          console.log(222222222227, url);

          console.log("pic---", tms, res.data.data);
          this.imgHoursList = { url: url };
          let m = moment().format("MM月DD日");

          console.log("am222", this.imgHoursList);
          let m1 = Number(h1) + 2;
          this.imgHourstm = [`${m}${h1}时${mm}分`, `${m}${m1}时${mm}分`];

          if (url == null) {
            this.numPic++;
            setTimeout(() => {
              this.getHoursImg();
            }, 10 * 1000);
          } else {
            this.numPic = 0;
            return;
          }
        },
      });
    },

    // async getInterval () {
    //   this.interval = setInterval(() => {
    //     this.getHoursImg()
    //   }, 60 * 1000)
    // },
    async getYjRead() {
      try {
        const { data } = await uni.$http.get(
          "/gunshiApp/xfflood/current/situation/flag"
        );
        if (data.code == 200) {
          this.readYjStatus = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    async getReadStatus() {
      try {
        const { data } = await uni.$http.get(
          "/gunshiApp/xfflood/xfProjectRun/has/read"
        );
        if (data.code == 200) {
          this.readStatus = Object.values(data.data).some(
            (item) => item == true
          );
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    async getDispatchStatus() {
      try {
        const res = await uni.$http.post(
          "/gunshiApp/xfflood/xfEmerDispatchR/app/list",
          { status: 1, dispatchTypeList: ["0", "1"] }
        );
        if (res.data.code == 200) {
          this.dispatchStatus = res.data.data.length > 0 ? true : false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async setInsert(menu2) {
      try {
        const params = {
          createId: uni.getStorageSync("value").userId,
          loginType: 1,
          menu1: "首页",
          menu2: menu2 || "首页",
        };

        const { data } = await uni.$http.post(
          "/gunshiApp/xfflood/visitMenuLog/insert",
          params
        );
        console.log("用户行为", params, data);
      } catch (error) {}
    },
    jumpHdDetail(params) {
      uni.navigateTo({
        url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`,
      });
    },
    jumpSkDetail(params) {
      uni.navigateTo({
        url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`,
      });
    },
    async getSkList() {
      try {
        const { data } = await uni.$http.post(
          "/gunshiApp/xfflood/reservoir/water/list",
          {
            sources: ["SW", "SK"],
            adcd: uni.getStorageSync("value").adcd,
          }
        );
        if (data.code == 200) {
          this.skList = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    async getHdList() {
      try {
        const { data } = await uni.$http.post(
          "/gunshiApp/xfflood/river/water/list",
          {
            sources: ["SH", "SW"],
            adcd: uni.getStorageSync("value").adcd,
          }
        );
        if (data.code == 200) {
          this.hdList = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    subChange(e) {
      this.current = e;
    },
    async getRainList() {
      try {
        const { data } = await uni.$http.post(
          "/gunshiApp/xfflood/real/rain/home/list",
          {
            start: this.formData.stm.format("YYYY-MM-DD HH:mm:ss"),
            end: this.formData.etm.format("YYYY-MM-DD HH:00:00"),
          }
        );
        if (data.code == 200) {
          console.log("rainChartData0,", data);
          this.rainChartData = data.data;
        }
      } catch (error) {
        uni.$showMsg();
      }
    },
    changeTime(params) {
      let tmValue = [];
      if (params === 1) {
        tmValue = [
          moment()
            .subtract(1, "days")
            .startOf("day")
            .set({ hour: 8, minute: 0 }),
          moment(),
        ];
      } else if (params === 2) {
        tmValue = [
          moment().startOf("day").set({ hour: 8, minute: 0 }),
          moment(),
        ];
      } else if (params === 3) {
        tmValue = [
          moment()
            .subtract(1, "days")
            .startOf("day")
            .set({ hour: 8, minute: 0 }),
          moment().startOf("day").set({ hour: 8, minute: 0 }),
        ];
      } else if (params === 4) {
        tmValue = [moment().subtract(1, "hours"), moment()];
      } else if (params === 5) {
        tmValue = [moment().subtract(3, "hours"), moment()];
      } else if (params === 6) {
        tmValue = [moment().subtract(6, "hours"), moment()];
      } else if (params === 7) {
        tmValue = [moment().subtract(12, "hours"), moment()];
      } else if (params === 8) {
        tmValue = [moment().subtract(24, "hours"), moment()];
      }
      this.formData.stm = tmValue[0];
      this.formData.etm = tmValue[1];
      this.getRainList();
    },
    todetail(val) {
      console.log("val", val);
      if (val == 1) {
        uni.navigateTo({
          url: "/pages/rain/index",
        });
      }
      if (val == 3) {
        uni.navigateTo({
          url: "/pages/gqzq/index",
        });
      }
    },
    tabChange(val) {
      this.showTextTypeTab = val;
      if (val == 1) {
        this.getWeather();
      } else {
        this.getWeatherArea();
      }
    },
    changeTable(val) {
      this.changeBool = !this.changeBool;
      if (val) {
        this.getWeather();
      }
      console.log("this.changeBool", this.changeBool);
    },
    // 区域 /weather/area
    async getWeatherArea() {
      try {
        const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", {
          tm: this.tm,
        });
        console.log("--44-", res);
        this.tableData = res;
        // this.userList = res.data

        // console.log('--333-', this.tableData)
      } catch (e) {
        uni.$showMsg();
      }
    },
    // 水库 /weather/res
    async getWeather() {
      try {
        const res = await uni.$http.post("/gunshiApp/xfflood/weather/res", {
          tm: this.tm,
        });
        console.log("--3-", res);
        this.tableData = res;
        // this.userList = res.data

        console.log("--333-", this.tableData);
      } catch (e) {
        uni.$showMsg();
      }
    },
    async getSwiperList() {
      try {
        const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
        console.log("--1-", res.data);
        this.userList = res.data;

        console.log("--1-", this.userList);
      } catch (e) {
        uni.$showMsg();
      }
    },
    async getOverview() {
      try {
        let res = await uni.$http.get("/gunshiApp/xfflood/real/rain/overview");
        console.log("--2-", res);
        this.list = res.data;

        console.log("--2-", res);
      } catch (e) {
        uni.$showMsg();
      }
    },

    getDataTime() {
      this.monthDay = moment().format("MM月DD日");
      this.dayOfWeek = moment().format("dddd");
      this.date = moment().format("MM月DD日HH时");
      this.ydate = moment().subtract(1, "days").format("MM月DD日HH时");
      console.log("moment11", this.date, this.ydate);
      let d1 = moment().format("YYYYMMDD");
      let h1 = moment().format("HH") >= 20 ? "20" : "08";

      this.tm = d1 + h1;
    },
    async getResponseLevel() {
      try {
        const { data } = await uni.$http.post(
          "/gunshiApp/xfflood/xfEmerRespR/page",
          {
            pageSo: { pageSize: 10, pageNumber: 1 },
            year: moment().format("YYYY"),
          }
        );
        if (data.code == 200) {
          if (data.data.records.length > 0) {
            console.log("1111111data", data);
            this.level = level(data.data.records[0].level);
            this.yjStatus = data.data.records[0].status;
          } else {
            this.level = "无";
          }
        }
      } catch (e) {
        uni.$showMsg();
      }
    },
    myNavigateTo(url, menu2) {
      uni.navigateTo({
        url: url, // 跳转到对应路径的页面
      });
      this.setInsert(menu2);
    },
    // 响应级别
  },
  onLoad() {
    this.getSwiperList();
    this.getOverview();
    this.getDataTime();
    this.getResponseLevel();
  },

  onShow() {
    this.getReadStatus();
    this.shWarnList();
    this.getResponseLevel();
    this.getDispatchStatus();
    this.setInsert();
    if (this.limit == 1) {
      this.getYjRead();
      // this.getInterval()
      this.getImgs();
      this.getHoursImg();
    }
  },
  // onUnload () {
  //   clearInterval(this.interval)
  //   this.interval = null
  // }
};
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  line-height: 24px;
  background-color: #f3f5f8;
}
.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 {
  height: 100%;
  background-color: #fff;
  margin-bottom: 12rpx;
  /* background-color: pink; */
}
.navBar {
  padding: 20px;
  /* text-align: center; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navList {
  text-align: center;
}
.navIcon {
  position: relative;
  width: 50px;
  height: 50px;
  /* border-radius: 10px;
    background-color: #007afd; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.readStatus {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #de2433;
}
.warn {
  background-color: #fff;
  color: #de2433;
  padding: 18rpx 20rpx;
  text-align: left;
  margin-bottom: 12rpx;
}

/* 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 */
.info_24 {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 12rpx;
}
.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>