water_affairs/pages/index/modules/home.vue

<template>
  <view>
    <cu-custom
      ref="Dustom"
      bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
    >
      <view slot="head" class="head" :style="{ height: headHeight }">
        <view class="content">
          <navigator
            url="/pages/login/selectSite"
            class="sitename u-line-1"
            :style="{ width: usePort == 'wechat' ? '65vw' : '96vw' }"
          >
            {{ sitename }}
          </navigator>
          <view class="location u-line-1" @click.stop="setLocation">
            <text class="iconfont icon-didian" />{{
              place.formatted_address || "重新获取所在位置"
            }}
          </view>
          <view class="weather-forecast">
            <view class="tag">天气预报</view>
            <view class="text">{{ weather }}</view>
          </view>
        </view>
      </view>
    </cu-custom>

    <!-- 滚动通知 -->
    <notice ref="notice" />
    <!-- 工作台 -->
    <workbench />
    <!-- 数据看板 -->
    <spectaculars ref="spectaculars" />
    <!-- 巡检计划 -->
    <patrolScheme ref="patrolScheme" />
    <workorder ref="workroder" v-if="showWorkrder" :isHome="true" />
    <view style="height: calc(16.533vw + env(safe-area-inset-bottom) / 2)" />
  </view>
</template>

<script>
import workbench from "./workbench.vue";
import notice from "./notice.vue";
import spectaculars from "./spectaculars.vue";
import patrolScheme from "./patrolScheme.vue";
import { getWeek, getYMD } from "../../../utils/getTime";
import workorder from "./workorderList";

export default {
  name: "Home",
  components: {
    workbench,
    notice,
    spectaculars,
    patrolScheme,
    workorder,
  },
  data() {
    return {
      uninitialized: false,
      usePort: this.usePort,
      sitename: "",
      place: {},
      headHeight: 0,
      weather: "",
      showWorkrder: false,
    };
  },
  created() {
    let userMsg = uni.getStorageSync("userMsg");
    this.sitename = `${userMsg.sitename} - ${userMsg.name}`;
    try {
      this.showWorkrder =
        uni.getStorageSync("authList")["工单"]["工单"].name == "workorder";
    } catch (error) {
      this.showWorkrder = false;
    }
  },
  mounted() {
    this.getWeather();
    this.getLocation().then((s) => {
      this.__proto__.location = s;
      this.getPlace();
    });
  },
  methods: {
    renderData() {
      this.$refs.notice.getList(true);
      this.$refs.spectaculars.getDetail();
      this.$refs.patrolScheme.getDetail();
      if (this.showWorkrder) this.$refs.workroder.getlist(true);
    },
    getWeather() {
      this.$Http
        .basic({
          id: "20231012093701",
          content: {},
        })
        .then((res) => {
          console.log("获取天气信息", res);
          if (this.cutoff(res.msg)) {
            this.setCustomBar(0);
          } else {
            this.setCustomBar(66);
            let detail = res.data.predict.detail[0];
            this.weather = `${getWeek()} ${getYMD().split("年")[1]} | ${
              detail.day.weather.temperature == "9999"
                ? detail.night.weather.temperature
                : detail.night.weather.temperature +
                  "~" +
                  detail.day.weather.temperature
            }℃ ${res.data.real.weather.info}`;
          }
        });
    },
    async setLocation() {
      let that = this;
      uni.getSetting({
        success({ authSetting }) {
          if (authSetting["scope.userLocation"]) {
            that.getLocation().then((s) => {
              that.__proto__.location = s;
              that.getPlace();
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "您未开启地理位置授权",
              cancelText: "下次再说",
              confirmText: "前去授权",
              success: ({ confirm }) => {
                if (confirm)
                  uni.openSetting({
                    success(res) {
                      if (res.authSetting["scope.userLocation"])
                        that.setLocation();
                    },
                  });
              },
            });
          }
        },
      });
    },
    async getPlace() {
      const { tianditu } = require("../../../utils/tianditu");
      const api = new tianditu();
      let res = this.location || (await this.getLocation());
      this.__proto__.location = res;
      api.getPlace(res.longitude, res.latitude).then((s) => {
        console.log("天地图逆解析", s);
        this.place = s.result;
      });
    },
    setCustomBar(num) {
      const Dustom = this.$refs.Dustom;
      Dustom.CustomBar = Dustom.CustomBar + num;
      this.headHeight = Dustom.getHeight();
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 10000;

  .content {
    position: absolute;
    width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
    left: 0;
    bottom: 0;

    .sitename {
      line-height: 22px;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }

    .location {
      line-height: 17px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 10px;

      .iconfont {
        margin-right: 5px;
        font-size: 12px;
      }
    }

    .weather-forecast {
      width: 100%;
      display: flex;
      align-items: center;
      height: 18px;
      margin-top: 22px;
      margin-bottom: 12px;

      .tag {
        width: 48px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: #f29c37;
        border-radius: 2px;
        font-size: 10px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin-right: 6px;
      }

      .text {
        height: 17px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>