cqscreen-ui/src/views/newHome/index.vue

<template>
  <div class="screen-container">
    <div class="data-v-container" :key="key">
       <div class="title-bg"> 
         <div class="btn-content">
          <el-button
            size="medium"
            type="primary"
            @click="
              () => {
                $router.go(-1)
              }
            "
            >返回</el-button
          >
          <el-button size="medium" type="primary" @click="goBackstage"
            >后台管理</el-button
          >
        </div> 

        <!-- 获取天气 -->
        <div class="weather">
          <div class="weather_box">
            <div><img alt="" src="../../assets/img/myImage//time.png" /></div>
            <div class="dateTimeString">{{ dateTimeString }}</div>
          </div>
        </div>
       </div> 
      <NewMap @openDrawer="openDrawer" />
      <div class="screen-left">
        <LeftOne />
        <LeftTwo />
        <LeftFour />
        <!-- <dv-border-box-11 class="left-container">
          
        </dv-border-box-11> -->
        <!-- <div class="left-container">
          <LeftTwo />
        </div>

        <div class="left-container">
          <LeftThree />
        </div> -->
      </div>
      <div class="screen-center">
        <!-- <CenterFold /> -->
        <CenterBottom />
        <div class="tip-container">
          <dv-border-box-8>
            <img src="../../assets/img/project-icon.png" alt="" />
            <span>工程位置</span>
            <img
              src="../../assets/img/location-icon.png"
              alt=""
              style="margin-left: 12px"
            />
            <span>定位设备位置</span>
          </dv-border-box-8>
        </div>
      </div>
      <div class="screen-right">
        <RightOne />
        <rightTwo />
        <rightThree />
        <LeftThree></LeftThree>
        <!-- <div class="right-container">
          <RightOne />
        </div> -->
        <!-- <div class="right-container">
         
        </div>
        <div class="right-container">
          <RightThree />
        </div>
        <div class="right-container">
          <CenterBottom />
        </div> -->
      </div>
      <!-- <div class="screen-left">
        <div class="left-container">
          <LeftOne />
        </div>
        <div class="left-container">
          <LeftTwo />
        </div>

        <div class="left-container">
          <LeftThree />
        </div>
      </div>
      <div class="screen-content"></div>
      <div class="screen-right">
        <div class="right-container">
          <RightOne />
        </div>
        <div class="right-container">
          <RightTwo />
        </div>
        <div class="right-container">
          <RightThree />
        </div>
        <div class="right-container">
          <CenterBottom />
        </div>
      </div> -->
    </div>

    <!-- <div class="new-map-container">
      <NewMap />
    </div> -->


    <!-- <el-drawer
      :visible.sync="drawer"
      v-if="drawer"
      :with-header="false"
      :direction="direction"
      size="80%"
    >
      <DrawerProject :queryParams="queryParams" v-if="drawerType == 1" />
      <DrawerDevice :queryParams="queryParams" v-else />
      <img
        @click="
          () => {
            drawer = false
          }
        "
        class="closeIcon"
        src="../../assets/img/close.png"
      />
    </el-drawer> -->
  </div>
</template>

<script>
import CenterFold from '../../components/home/centerFold.vue'
import CountryMap from '../../components/home/countryMap.vue'
import LeftOne from '../../components/home/leftOne.vue'
import LeftTwo from '../../components/home/leftTwo.vue'
import LeftThree from '../../components/home/leftThree.vue'
import LeftFour from '../../components/home/leftFour.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 NewMap from '../../components/home/new-map.vue'
// import DrawerProject from './components/drawer-project.vue'
// import DrawerDevice from './components/drawer-device.vue'
export default {
  components: {
    CenterFold,
    CountryMap,
    LeftOne,
    LeftTwo,
    LeftThree,
    LeftFour,
    RightOne,
    rightTwo,
    rightThree,
    RightFour,
    NewMap,
    CenterBottom,
    // DrawerProject,
    // DrawerDevice,
  },
  data() {
    return {
      key: 0,
      drawer: false,
      direction: 'ltr',
      drawerType: null,
      maType: 1,
      // 地图点击时的查询参数
      queryParams: null,
      dateTimeString: '',
    }
  },
  mounted() {},
  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: {
    openDrawer(query) {
      this.queryParams = query
      // console.log(query, 'c参数')
      this.drawerType = query.type
      this.drawer = true
    },
    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
    },

    goBackstage() {
      location.href = 'http://192.168.0.14:21624/index'
    },
  },
}
</script>

<style scoped lang="less">
.screen-container {
  width: 1920px;
  height: 1080px;
  background: url(../../assets/img/myImage/screenBg.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  position: relative;

}

.new-map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // opacity: 0.6;
}

.data-v-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  .screen-left,
  .screen-right {
    width: 25%;
    margin-top: 87px;
    height: calc(100% - 87px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 9;
  }

  .title-bg {
    height: 87px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: skyblue;
    background: url('../..//assets/img/myImage/screenBg.png') no-repeat;
    background-size: 100%, 100%;
    z-index: 8;

    .btn-content {
      position: absolute;
      right: 45px;
      bottom: 8px;
    }

    .weather {
      position: absolute;
      bottom: 10px;
      right: 15%;

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

  .screen-left {
    position: absolute;
    left: 0;
    top: 0;

    // background: linear-gradient(to right, #182151, #d2d6e3);
    background: linear-gradient(
      90deg,
      rgba(11, 20, 71, 1) 0%,
      rgba(11, 20, 71, 0.9) 32%,
      rgba(11, 20, 70, 0.5) 70%,
      rgba(11, 20, 71, 0.1) 100%
    );
  }

  .screen-right {
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(
      -90deg,
      rgba(11, 20, 71, 1) 0%,
      rgba(11, 20, 71, 0.9) 32%,
      rgba(11, 20, 70, 0.5) 70%,
      rgba(11, 20, 71, 0.3) 100%
    );
  }

  .screen-center {
    width: 50%;
    height: 30%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      0deg,
      rgba(11, 20, 71, 1) 0%,
      rgba(11, 20, 71, 0.9) 32%,
      rgba(11, 20, 70, 0.5) 70%,
      rgba(11, 20, 71, 0.1) 100%
    );
    z-index: 9;

    .tip-container {
      position: absolute;
      height: 60px;
      right: 30px;
      width: 260px;
      top: -90px;

      /deep/ .dv-border-box-8 .border-box-content {
        width: 100%;
        padding: 0 15px;
        display: flex;
        align-items: center;
        font-size: 14px;

        img {
          width: 27px;
          height: 32px;
          margin-right: 5px;
        }
      }
    }
  }

  .left-container {
    flex: 1;
  }
}

/deep/.el-drawer {
  overflow: visible;
  background: transparent;
}

.closeIcon {
  width: 27px;
  height: 72px;
  position: absolute;
  right: -27px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>