devicesmgt/sgzb-screen/src/views/Home/index.vue

<template>
  <div class="homePage">
    <!-- <div class="homePage_title" @click="routerClick">
      <div>智慧仓储管理平台</div>
    </div> -->
    <div class="container">
      <!-- 左侧数据模块列表 -->
      <div class="leftModuleBox">
        <LeftOne></LeftOne>
        <LeftTwo></LeftTwo>
        <LeftThree></LeftThree>
      </div>

      <!-- 中间3D效果展示 -->
      <div class="centerModuleBox">
        <div class="homePage-fold" @click="handleClick">
          <CenterFold ref="centerFold"></CenterFold>
        </div>
        <div class="center-top">
          <CountryMap></CountryMap>
        </div>
        <div class="center-bottom">
          <CenterBottom></CenterBottom>
        </div>
        <div class="buttom-box">
          <div class="buttonTop">
            <div
              :class="maType == 1 ? 'on' : ''"
              class="buttom1"
              @click="getMapSelect(1)"
            >
              施工机具
            </div>
            <div
              :class="maType == 2 ? 'on' : ''"
              class="buttom1"
              @click="getMapSelect(2)"
            >
              工器具
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧数据模块列表 -->
      <div class="rightModuleBox">
        <RightOne></RightOne>
        <rightTwo></rightTwo>
        <rightThree></rightThree>
        <RightFour></RightFour>
      </div>
    </div>
    <!-- 获取天气 -->
    <div class="weather">
      <div class="weather_box">
        <div><img alt="" src="../../assets/img/myImage//time.png" /></div>
        <div class="dateTimeString">{{ dateTimeString }}</div>
        <!-- <div class="weatherData">
          <img class="weatherUrl" :src="weatherUrl" alt="" /><span
            class="weather_title"
            >{{ weatherData.weather }}</span
          ><span>{{ weatherData.temperature }}℃</span>
        </div> -->
      </div>
    </div>
    <div class="sound">
      <img src="../../assets/img/myImage/sound.png" alt="" />
    </div>
    <div class="wrap">
      <div id="inner">
        <span id="first" v-for="(item, index) of transformList" :key="index">{{
          '检修预警提示：' +
          item.machineName +
          '下次检修日期：' +
          item.nextCheckTime +
          '，请注意查收！'
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import LeftOne from '../../components/home/leftOne.vue'
import LeftTwo from '../../components/home/leftTwo.vue'
import LeftThree from '../../components/home/leftThree.vue'
import RightOne from '../../components/home/rightOne.vue'
import rightTwo from '../../components/home/rightTwo.vue'
import rightThree from '../../components/home/rightThree.vue'
import RightFour from '../../components/home/rightFour.vue'
import CenterBottom from '../../components/home/centerBottom.vue'
import CenterTop from '../../components/home/centerTop.vue'
import CountryMap from '../../components/home/countryMap.vue'
import CenterFold from '../../components/home/centerFold.vue'
import { getMaintenanceWarningApi } from "../../api/screen";
export default {
  components: {
    LeftOne,
    LeftTwo,
    LeftThree,
    RightOne,
    rightTwo,
    rightThree,
    RightFour,
    CenterBottom,
    CenterTop,
    CountryMap,
    CenterFold
  },
  name: 'Home',
  data() {
    return {
      dateTimeString: '',
      weatherData: {},
      weatherUrl: '',
      maType: 1,
      // 您有一条检修预警提示，请注意查收！
      transformList: []
    }
  },
  created() {
    // const map = new BMap.Map('map-container')
    // this.map = map
  },

  mounted() {
    this.getCurrentDateTime()
    setInterval(this.getCurrentDateTime, 1000)
    // let that = this
    // AMap.plugin('AMap.CitySearch', function () {
    //   var citySearch = new AMap.CitySearch()
    //   citySearch.getLocalCity(function (status, result) {
    //     if (status === 'complete' && result.info === 'OK') {
    //       AMap.plugin('AMap.Weather', function () {
    //         var weather = new AMap.Weather();
    //         weather.getLive('宁夏回族自治区', function (err, data) {
    //           // console.log(err, data);
    //           that.weatherData = data
    //           that.weatherUrl = data.weather == '晴' ? ONE : data.weather == '多云' ? TWO : data.weather == '中雪' ? THREE : ''
    //         });
    //       })
    //     }
    //   })
    // })
    // this.getWeather()
    this.getMapSelect(this.maType)
    getMaintenanceWarningApi().then(res => {
      this.transformList = res.data
    })

  },
  methods: {
    routerClick() {
      this.$router.go()
    },
    getMapSelect(type) {
      if (type == 1) {
        this.maType = 1
        this.$nextTick(() => {
          this.$eventBus.$emit('maType', this.maType)
        })
      } else {
        this.maType = 2
        this.$nextTick(() => {
          this.$eventBus.$emit('maType', this.maType)
        })
      }
    },
    async getWeather() {
      try {
        const res = await axios.get(
          'https://api.map.baidu.com/weather/v1/?district_id=110000&data_type=all&ak=YOUR_AK'
        )
        // 处理返回结果
      } catch (error) {
        console.error(error)
      }
    },
    getCurrentDateTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const weekday = weekdays[date.getDay()]
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      const seconds = date.getSeconds().toString().padStart(2, '0')
      const dateTimeString = `${year}/${month}/${day} ${weekday} ${hours}:${minutes}:${seconds}`
      this.dateTimeString = dateTimeString
    },
    handleClick() {
      this.$refs.centerFold.handleClick({maType: this.maType})
    }

  }
}
</script>

<style lang='less' scoped>
.homePage {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/img/myImage/screenBg.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  position: relative;
  // .homePage_title {
  //   position: absolute;
  //   left: 40.3%;
  //   // top: 27%;
  //   div {
  //     width: 410px;
  //     height: 55px;
  //     font-size: 40px;
  //     font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  //     font-weight: 800;
  //     line-height: 60px;
  //     letter-spacing: 8px;
  //     text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  //     background-image: linear-gradient(
  //       to bottom,
  //       #f6fcff 50%,
  //       #a5deff 75%; #69c9ff 100%
  //     );
  //     color: transparent;
  //     background-clip: text;
  //   }
  // }

  .weather {
    position: absolute;
    left: 72%;
    top: 5%;

    .weather_box {
      display: flex;
      justify-content: flex-start;
      align-content: center;
      flex-wrap: nowrap;

      .dateTimeString {
        font-size: 14px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        letter-spacing: 0.1em;
        margin-left: 5px;
      }

      .weatherData {
        line-height: 19px;
        margin-left: 10px;
        display: flex;
        align-items: center;

        .weatherUrl {
          width: 16px;
          height: 16px;
        }

        .weather_title {
          display: inline-block;
          margin: 0 15px 0 10px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  .sound {
    position: absolute;
    left: 2%;
    top: 6%;
    width: 32px;
    height: 32px;
    background: #183b79;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .wrap {
    position: absolute;
    left: 3.6%;
    top: 6%;
    width: 380px;
    height: 32px;
    white-space: nowrap;
    background: linear-gradient(
      to right,
      #183b79 0%,
      #669cd8 50%,
      #183b79 100%
    );
    overflow: hidden;

    #inner {
      position: absolute;
      left: 4%;
      top: 6%;
      padding-left: 40px;
      animation: slide 15s linear infinite;
      overflow: hidden;
    }

    #first {
      display: inline-block;
      padding-left: 40px;
      font-size: 18px;
      line-height: 28px;
      letter-spacing: 2px;
      font-family: Alibaba PuHuiTi, AlibabaPuHuiTi;
      color: #f8503a;
    }

    @keyframes slide {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
  }

  .container {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 85px);
    margin-top: 104px;

    .leftModuleBox {
      flex: 1;
      padding-left: 26px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

    .centerModuleBox {
      flex: 1;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin: 0 15px;
      position: relative;

      .homePage-fold {
        position: absolute;
        left: 45%;
        top: -2%;
        width: 949px;
        z-index: 2000;
      }

      .buttom-box {
        position: absolute;
        left: 72%;
        top: 59%;

        .buttonTop {
          display: flex;
          justify-content: flex-start;
          :first-child {
            margin-right: 10px;
          }
        }

        .buttom1 {
          width: 129px;
          height: 56px;
          background: url(../../assets/img/myImage/no_active.png) no-repeat
            center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 56px;
          border-radius: 4px;
          font-size: 16px;
          color: #979bb2;
          cursor: pointer;
        }

        .buttom1.on {
          width: 129px;
          height: 56px;
          background: url(../../assets/img/myImage/active.png) no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 56px;
          border-radius: 4px;
          font-size: 16px;
          color: #fff;
          cursor: pointer;
        }
      }
    }

    .center-top {
      height: 655px;
    }

    .center-bottom {
      min-height: calc(100vh - 85px - 655px);
    }

    .rightModuleBox {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding-right: 26px;
    }

    .item {
      margin-bottom: 12px;
    }
  }
}
</style>