PC_FiveFollowing/src/views/home/index.vue

<template>
  <div>
    <section class="mainbox">
      <!-- topBox start -->
      <div class="topBox">
        <div class="column statisSec">
          <statis-top
            :falarmCount="alarmCount"
            :fpersonalCount="personalCount"
            :fsiteCount="siteCount"
          ></statis-top>
          <statis-bottom :fhtAnalogData="htAnalogData" ></statis-bottom>
        </div>
        <div class="column mapBox">
          <div
            class="map panel"
            id="mapF"
            style="height: 100%; z-index: 999; width: 100%"
          >
            <map-static-top :fsiteCount="siteCount"></map-static-top>
            <div id="pickerBox">
              <input id="pickerInput" placeholder="输入关键字选取地点" />
              <i class="el-icon-search"></i>
              <div id="poiInfo"></div>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel deviceSum">
            <div class="filterSec" style="top: 0.7rem">
              <el-date-picker
                v-model="dDefaultTime"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                 @change="deviceTypeCount_api()"
              >
              </el-date-picker>
            </div>
            <pie-chart
              :fdeviceTypeCount="deviceTypeCount"
              v-if="this.deviceTypeCount"
            ></pie-chart>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line1 operStatus">
            <triangle-chart
              :frtAnalogData="rtAnalogData"
              v-if="this.rtAnalogData.heavyLoad"
            ></triangle-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <!-- topBox end -->

      <!-- bottomBox start -->
      <div class="bottomBox">
        <div class="column">
          <div class="panel currentUsage" style="height: 100%">
            <div class="filterSec">
              <select name="" id="" v-model="dayType" >
                <option value="0">当日用量趋势</option>
                <option value="1">当月用量趋势</option>
              </select>
            </div>
            <bar-chart :feptrendIco="eptrendIco"   v-if=" this.eptrendIco[0]"></bar-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel currentUsage" style="height: 100%">
            <div class="filterSec">
              <el-date-picker
                v-model="fDefaultTime"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="trendIcoCount_api()"
              >
              </el-date-picker>
            </div>
            <line-chart
              :ftrendIcoCount="trendIcoCount"
              v-if="this.trendIcoCount[0]"
            ></line-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <!-- bottomBox end -->
    </section>
  </div>
</template>
<script>
import statisTop from "./components/statisTop";
import statisBottom from "./components/statisBottom";
import pieChart from "./components/pieChart";
import barChart from "./components/barChart";
import lineChart from "./components/lineChart";
import mapStaticTop from "./components/mapStaticTop";
import triangleChart from "./components/triangleChart";

// 地图
import AMap from "AMap";
import AMapUI from "AMapUI";

import api from "../../api/home/home.js";

export default {
  name: "index",
  components: {
    statisTop,
    statisBottom,
    pieChart,
    barChart,
    lineChart,
    mapStaticTop,
    triangleChart,
  },
  data() {
    return {
      fDefaultTime: [
        new Date("2021-6-12 00:00:00"),
        new Date("2021-7-12 00:00:00"),
      ],
      dDefaultTime: [
         new Date("2021-6-12 00:00:00"),
        new Date("2021-6-13 00:00:00"),
      ],
      map: null,
      alarmCount: {},
      personalCount: {},
      siteCount: {},
      deviceTypeCount: {},
      trendIcoCount: [],
      rtAnalogData: {},

      htAnalogData:{},
      dayType:0,
      eptrendIco:{}
    };
  },
  created() {},
  mounted() {
    this.alarmCount_api();
    this.personalCount_api();
    this.siteCount_api();
    this.deviceTypeCount_api();
    this.trendIcoCount_api();
    this.rtAnalogData_api();
    this.siteList_api();
    this.htAnalogData_api();
    this.eptrendIco_api()

  },
  methods: {
    //告警总数数据对接
    alarmCount_api() {
      api.alarmCount_api().then((requset) => {
        this.alarmCount = requset.data;
      });
    },
    //运维人员
    personalCount_api() {
      api.personalCount_api().then((requset) => {
        this.personalCount = requset.data;
      });
    },
    //站点总数
    siteCount_api() {
      api.siteCount_api().then((requset) => {
        this.siteCount = requset.data;
      });
    },

    //设备数量echarts饼图
    deviceTypeCount_api() {
       var _this = this;
      _this.$store.commit("TimeAll_function", this.dDefaultTime);
      var time = _this.$store.state.Time_Data;

      api
        .deviceTypeCount_api({
          startTime:time[0],
          endTime: time[1],
        })
        .then((requset) => {
          this.deviceTypeCount = requset.data;
        });
    },
    //故障抢修echarts折线图
    trendIcoCount_api() {
      var _this = this;
      _this.$store.commit("TimeAll_function", this.fDefaultTime);
      var time = _this.$store.state.Time_Data;

      api
        .trendIco_api({
          startTime: time[0],
          endTime: time[1],
        })
        .then((requset) => {
          this.$store.state.trendIcoCount = requset.data
          this.trendIcoCount = requset.data;
        });
    },
    //重载运行echarts锥形图
    rtAnalogData_api() {
      api.rtAnalogData_api().then((requset) => {
        this.rtAnalogData = requset.data;
        // console.log(this.rtAnalogData)
      });
    },
    //地图撒点
    siteList_api() {
      api.siteList_api().then((requset) => {
        this.siteList = requset.data;
        this.initMap();
      });
    },


    // 日月年用电量
    htAnalogData_api() {
      api.htAnalogData_api().then((requset) => {
        this.htAnalogData = requset.data;
      });
    },

    // 今日昨日用电量趋势
    eptrendIco_api() {
      api.eptrendIco_api().then((requset) => {
        this.eptrendIco = requset.data;
        console.log( 'this.eptrendIco')
         console.log( this.eptrendIco[0].name)
      });
    },





    Overview() {
      // this.$router.push({ path: "/Overview" }); //, query: { title: title }
    },
    async initMap() {
      this.map = await new AMap.Map("mapF", {
        mapStyle: "amap://styles/blue", //设置地图的显示样式
        resizeEnable: true,
        zoom: 13,
        zooms: [3, 16],
        // features: [] //清空背景道路等
      });
      this.initMapUi();

      var con = `<div class="siteModelBox" style="transform:scale(.85);height:3.6rem" >
                  <h2>
                    {siteName}
                  </h2>
                  <div >
                   <div class="siteDetailInfo" >
                    <div class="infoLine">
                      <span>站点状态：</span>
                      <p>在线</p >
                    </div>
                    <div class="infoLine">
                      <span>设备总数：</span>
                      <p>2</p >
                    </div>
                    <div class="infoLine">
                      <span>告警数：</span>
                      <p>0</p >
                    </div>
                    <div class="infoLine">
                      <span>监控类型：</span>
                      <p>电力、视频</p >
                    </div>
                    <div class="infoLine">
                      <span>电话：</span>
                      <p>{phone}</p >
                    </div>
                    <div class="infoLine">
                      <span>地址：</span>
                      <p>{siteAddress}</p >
                    </div>
                  </div>
                  </div>
                 
                </div>`;
      var dataList = this.siteList;

      dataList.forEach(function (item) {
        let conNew = con;
        // console.log(item.siteAddress);
        conNew = conNew.replace(/{siteAddress}/g, item.siteAddress);
        conNew = conNew.replace(/{phone}/g, item.phone);
        conNew = conNew.replace(/{siteName}/g, item.siteName);
        item.content = conNew;
      });

      this.addMarker(dataList, "water");
    },

    addMarker(lnglats) {
      // 创建标点和点击事件
      let markers = lnglats.map((val, ind) => {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(val.longitude, val.latitude),
          zIndex: 9,
          extData: {
            id: ind + 1,
          },
        });
        marker.on("click", async () => {
          // console.log([val.latitude, val.longitude], null, val);
          await this.addMarkerInfo(
            [val.longitude, val.latitude],
            val.content,
            val
          );
        });
        return marker;
      });
      this.map.add(new AMap.OverlayGroup(markers));
      this.map.setFitView(); // 根据所有点自适应
    },

    // 添加标点
    addMarkerInfo(position, content, value = "") {
      // this.map.getIsOpen();
      console.log("value");
      console.log(value);
      this.map.clearInfoWindow();
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        closeWhenClickMap: true,
        content: content,
        offset: new AMap.Pixel(16, -30),
      });
      infoWindow.open(this.map, position);
    },

    poiPickerReady(poiPicker) {
      // console.log(poiPicker);
      var marker = new AMap.Marker();

      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20),
      });

      //选取了某个POI
      poiPicker.on("poiPicked", (poiResult) => {
        var source = poiResult.source,
          poi = poiResult.item,
          info = {
            source: source,
            id: poi.id,
            name: poi.name,
            location: poi.location.toString(),
            address: poi.address,
          };

        marker.setMap(this.map);
        infoWindow.setMap(this.map);

        marker.setPosition(poi.location);
        infoWindow.setPosition(poi.location);

        infoWindow.setContent(
          "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
        );
        // infoWindow.open(this.map, marker.getPosition());

        this.map.setCenter(marker.getPosition());
      });

      poiPicker.onCityReady(() => {
        // poiPicker.suggest("美食");
      });
    },
    initMapUi() {
      AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
        // console.log(PoiPicker);
        let poiPickers = new PoiPicker({
          input: "pickerInput",
        });
        this.poiPickerReady(poiPickers);
      });
    },
  },
};
</script>

<style lang="scss">
#pickerBox {
  opacity:0;
  position: absolute;
  z-index: 9;
  top: 0.15rem;
  right: 0.15rem;
  width: 3rem;
  height: 0.425rem;
  font-size: 0.15rem;
}
.el-icon-search {
  position: absolute;
  right: 0.1375rem;
  top: 0.1rem;
  font-size: 0.2125rem;
  color: #00f4fd;
}

#pickerInput {
  width: 3rem;
  line-height: 0.425rem;
  padding: 0 0.125rem;
  outline: none;
  border: 1px solid #00f4fd;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0);
  color: #fff;
}

#poiInfo {
  background: #fff;
}

// 时间选择器样式
.filterSec .el-input__inner {
  // width: 5.25rem !important;
  width: 90%;
  height: 0.375rem !important;
  line-height: 0.375rem !important;
  background-color: rgba(3, 107, 119, 0.5);
  border: 1px solid rgba(3, 107, 119, 1);
  z-index: 199;
}
.filterSec .el-range-input {
  background-color: transparent;
  color: #fff;
}
.filterSec .el-range-separator {
  line-height: 0.25rem;
  color: #fff;
}
 .el-time-panel{
  left:-0.3rem!important
}
</style>