yyky_web/src/views/equBigData/index.vue

<template>
  <div id="data-view">
    <top-header />
    <div class="main">
      <div class="left">
        <div class="left-top">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览1"> <aaa /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-content">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览2"><middleLeftChart /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-under">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览3"><Left-Chart-3 /></Border-Item>
          </dv-border-box-13>
        </div>
      </div>
      <div class="content">
        <!-- 22 -->
        <div>
          <equ-map v-loading="mapLoading" @callback="initMap" height="400px" />
        </div>
        <div class="left-under">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览4"><Left-Chart-4 /></Border-Item>
          </dv-border-box-13>
        </div>
      </div>
      <div class="right">
        <div class="left-top">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览5"> <aaa /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-content">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览6"><Left-Chart-2 /></Border-Item>
          </dv-border-box-13>
        </div>
        <div class="left-under">
          <dv-border-box-13 class="left-border">
            <Border-Item title="设备总览7"
              ><dv-scroll-board :config="config" />></Border-Item
            >
          </dv-border-box-13>
        </div>
      </div>
    </div>
    <!-- <dv-border-box-3 class="left-chart-container">

      </dv-border-box-3> -->

    <!-- <div class="right-main-container">
        <div class="rmc-top-container">
          <dv-border-box-3 class="rmctc-left-container">
            <Center-Cmp />
          </dv-border-box-3>

          <div class="rmctc-right-container">
            <dv-border-box-3 class="rmctc-chart-1">
              <Right-Chart-1 />
            </dv-border-box-3>

            <dv-border-box-4 class="rmctc-chart-2" :reverse="true">
              <Right-Chart-2 />
            </dv-border-box-4>
          </div>
        </div>

        <dv-border-box-4 class="rmc-bottom-container">
          <Bottom-Charts />
        </dv-border-box-4>
      </div> -->
  </div>
</template>

<script>
import topHeader from "./topHeader";
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import LeftChart3 from "./LeftChart3";
import LeftChart4 from "./LeftChart4";
import middleLeftChart from "./middleLeftChart.vue";
import aaa from "./aaa";
import equMap from "./Maps";
import CenterCmp from "./CenterCmp";

import RightChart1 from "./RightChart1";
import RightChart2 from "./RightChart2";

import BottomCharts from "./BottomCharts";
import BorderItem from "./BottomCharts";

export default {
  name: "DataView",
  components: {
    topHeader,
    LeftChart1,
    LeftChart2,
    LeftChart3,
    LeftChart4,
    CenterCmp,
    RightChart1,
    RightChart2,
    BottomCharts,
    BorderItem,
    equMap,
    aaa,
    middleLeftChart,
  },
  data() {
    return {
      mapLoading: false,
      config: {
       
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
        index: true,
        rowNum: 3, // 表行数
        columnWidth: [50],
        align: ["center"],
      },
    };
  },
  methods: {
    initMap(AMap) {
      this.AMap = AMap;
      this.map = new AMap.Map("map", {
        // 设置地图容器id
        // viewMode: "3D", // 是否为3D地图模式
        zoom: 3, // 初始化地图级别
        center: [105.602725, 37.076636], // 初始化地图中心点位置
      });
      this.clickMarker = new this.AMap.Marker();
      this.addMapMarkers(this.AMap, {
        equList: [
          { lng: 105.602725, lat: 37.076636 },
          { lng: 113.8098755478859, lat: 34.75219686835205 },
        ],
      });
      // this.getEquMap();
      // 暂时放这里
      this.map.on("click", (e) => {
        console.log(e, "e");
        this.regeoCode(e.lnglat);
      });
    },
    // 地图覆盖物
    addMapMarkers(AMap, data) {
      // console.log(data,'data');
      // // 项目中心点
      // const centerMarker = new AMap.Marker({
      //   position: new AMap.LngLat(data.projectLng, data.projectLat),
      //   offset: new AMap.Pixel(-20, -20),
      //   icon: require(`@/assets/map-icon/center.png`),
      // });
      // 设备分布点
      this.markers = [];
      data.equList.forEach((item) => {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(item.lng, item.lat),
          offset: new AMap.Pixel(-13, -30),
          // icon: require(`@/assets/map-icon/${item.classifyCode}-${
          //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
          //   }.png`),
          icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          anchor: "bottom-center",
          extData: {
            id: item.id,
            equNo: item.equNo,
            netCode: data.netCode,
            classifyCode: item.classifyCode,
            flag: item.flag,
            online: item.online,
          },
        });
        this.markers.push(marker);
        this.map.add(marker);
      });
      // console.log('this.markers',this.markers);
      // const overlayGroups = new AMap.OverlayGroup(this.markers);
      // // 比例尺
      // // const scale = new AMap.Scale();

      // this.map.add(overlayGroups);
      // this.map.add(centerMarker);
      // this.map.addControl(scale);

      // // 鼠标点击marker弹出自定义的信息窗体
      // overlayGroups.eachOverlay((overlay, index, collections) => {
      //   const extData = overlay.getExtData();
      //   overlay.on("click", () => {
      //     const params = {
      //       netCode: extData.netCode,
      //       equNo: extData.equNo,
      //     };
      //     getEquInfo(params).then((res) => {
      //       const info = res.data;
      //       const id = extData.id;
      //       const currentMarker = this.markers.find(
      //         (item) => item._opts.extData.id === id
      //       );
      //       currentMarker.setIcon(
      //         require(`@/assets/map-icon/${extData.classifyCode}-${
      //           info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
      //         }.png`)
      //       );
      //       const onlineEnum = {
      //         0: "离线",
      //         1: "在线",
      //       };
      //       info.projectName = data.projectName;
      //       const infoWindow = new AMap.InfoWindow({
      //         content: `<div class="equ-info-box">
      //               <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
      //                 info.equNo
      //               }</span></p>
      //               <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
      //                 onlineEnum[info.online]
      //               }</span></p>
      //               <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
      //                 info.equNo
      //               }" data-name="${info.projectName}">${
      //           info.alarmTotal
      //         }</span></p>
      //               <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
      //                 info.positionTime
      //               }</span></p>
      //               <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
      //                 info.brand
      //               }</span></p>
      //               <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
      //                 info.gpsId
      //               }</span></p>
      //               </div>`,
      //         anchor: "top-center",
      //       });
      //       infoWindow.open(this.map, overlay.getPosition());
      //     });
      //   });
      // });

      // // 地图的3km圆
      // const circle = new AMap.Circle({
      //   center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
      //   radius: data.radius * 1000, // 半径
      //   strokeColor: "#367EF5", // 线颜色
      //   strokeOpacity: 0.8, // 线透明度
      //   strokeWeight: 1, // 线粗细度
      //   fillColor: "#18FFFC", // 填充颜色
      //   fillOpacity: 0.1, // 填充透明度
      // });
      // this.map.add(circle);
      // this.map.setFitView();
      /* this.map.on("click", (e) => {
        this.regeoCode(e.lnglat);
      }); */
    },
  },
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  overflow: hidden;
  background-image: url("./img/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;

  // #dv-full-screen-container {
  //   background-image: url("./img/bg.png");
  //   background-size: 100% 100%;
  //   box-shadow: 0 0 3px blue;
  //   display: flex;
  //   flex-direction: column;
  // }
  .main {
    display: flex;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    .left {
      width: 30%;
      // box-sizing: border-box;
      .left-top {
        margin-top: 10px;

        .left-border {
          height: 200px;
        }
      }
      .left-content {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
      .left-under {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
    }

    // .content {
    //   flex: 1;
    // }
    .content {
      // width: 30%;
      flex: 1;

      // box-sizing: border-box;
      .left-top {
        margin-top: 10px;

        .left-border {
          height: 200px;
        }
      }
      .left-content {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
      .left-under {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
    }
    .right {
      width: 30%;
      // box-sizing: border-box;
      .left-top {
        margin-top: 10px;

        .left-border {
          height: 200px;
        }
      }
      .left-content {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
      .left-under {
        margin-top: 10px;
        .left-border {
          height: 200px;
        }
      }
      .datav-cell {

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}
    }
  }
  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 65%;
    display: flex;
  }

  .rmctc-left-container {
    width: 65%;
  }

  .rmctc-right-container {
    width: 35%;
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1,
  .rmctc-chart-2 {
    height: 50%;
  }
}
</style>