yyky_web/src/views/datav/index.vue

<template>
  <div class="app-container">
    <div id="data-view">
      <div class="main-header">
        <div class="mh-middle">数字健康社区定位系统</div>
        <div class="mh-right">
          <div>{{ dateTime }}</div>
          <div>
            <img
              src="./img/quanping.png"
              alt=""
              @click="toggleFullscreen"
              v-if="!isFullscreen"
            />
            <img
              src="./img/tuichuquanping.png"
              alt=""
              @click="toggleFullscreen"
              v-if="isFullscreen"
            />
          </div>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <div class="left-top">
            <div class="top-left"><Left-Chart-Top /></div>
            <div class="top-right">
              <equ-map
                v-loading="mapLoading"
                @callback="initMap"
                height="100%"
              />
            </div>
          </div>
          <div class="left-under">
            <div class="under-title"><b>告警处理完成</b></div>
            <dv-border-box-8 class="under-box" v-if="flag">
              <Left-Chart-Bottom
                title="SOS报警处理"
                :value="percentData.alarmSOS"
              ></Left-Chart-Bottom>
              <Left-Chart-Bottom
                title="电子围栏报警"
                :value="percentData.alarmRail"
              ></Left-Chart-Bottom>
              <Left-Chart-Bottom
                title="跌倒报警"
                :value="percentData.alarmFall"
              ></Left-Chart-Bottom>
              <Left-Chart-Bottom
                title="设备在线率"
                :value="percentData.alarmStauts"
              ></Left-Chart-Bottom>
              <Left-Chart-Bottom
                title="全部报警"
                :value="percentData.alarmAll"
              ></Left-Chart-Bottom>
            </dv-border-box-8>
          </div>
        </div>
        <div class="right">
          <Left-Chart-Right ref="updateData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftChartTop from "./LeftChartTop";
import LeftChartRight from "./LeftChartRight";
import LeftChartBottom from "./LeftChartBottom";

import equMap from "./Map.vue";

import { percent, alarmList } from "@/api/system/datav";

export default {
  name: "DataView",
  components: {
    LeftChartTop,
    LeftChartRight,
    LeftChartBottom,
    equMap,
  },
  data() {
    return {
      mapLoading: false,
      percentData: {},
      flag: false,
      isFullscreen: false, // 初始状态为非全屏
      dateTime: "",
    };
  },
  mounted() {
    this.initData();
    this.currentTime();
  },
  methods: {
    currentTime() {
      setInterval(this.getTime, 500);
    },
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
          let hh =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.dateTime =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },

    toggleFullscreen() {
      if (this.isFullscreen) {
        // 退出全屏模式
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        this.isFullscreen = false;
      } else {
        // 进入全屏模式
        const content = document.querySelector("#data-view");
        // console.log(content,888);
        // return
        if (content.requestFullscreen) {
          content.requestFullscreen();
        } else if (content.mozRequestFullScreen) {
          content.mozRequestFullScreen();
        } else if (content.webkitRequestFullscreen) {
          content.webkitRequestFullscreen();
        }
        this.isFullscreen = true;
      }
    },
    initData() {
      percent().then((res) => {
        this.percentData = res.data;
        this.flag = true;
        console.log("我刚执行");
      });
      this.$refs.updateData.initData();
    },
    initMap(AMap) {
      console.log("进来了");
      this.AMap = AMap;
      this.map = new AMap.Map("map", {
        // 设置地图容器id
        // viewMode: "3D", // 是否为3D地图模式
        zoom: 5, // 初始化地图级别
        center: [105.602725, 37.076636], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue", //地图样式
      });
      this.clickMarker = new this.AMap.Marker();
      alarmList().then((res) => {
        const data = res.data;
        // console.log(data, 777);
        this.addMapMarkers(this.AMap, data);
      });
      // 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);
      // });
    },
    getCalss(type) {
      console.log(type, "111");
      let icon = "";
      switch (type) {
        case 16:
          icon = require(`./img/sos.png`);
          break;
        case 25:
          // 围栏
          icon = require(`./img/weilan.png`);
          break;
      }
      return icon;
    },
    // 地图覆盖物
    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 = [];
      let icon = "";
      data.forEach((item) => {
        // icon=this.getCalss(item.alarm_type);

        switch (item.alarm_type) {
          case 16:
            icon = require(`./img/sos.png`);
            break;
          case 17:
            icon = require(`./img/didian.png`);
            break;
          case 20:
            icon = require(`./img/shebei.png`);
            break;
          case 21:
            icon = require(`./img/diedao.png`);
            break;
          case 22:
            icon = require(`./img/xinlv.png`);
            break;
          case 25:
            icon = require(`./img/weilan.png`);
            break;
          default:
            return null
        }
        // console.log("执行了");
        console.log("icon", icon);
        const marker = new AMap.Marker({
          position: new AMap.LngLat(item.gps_long, item.gps_lat),
          offset: new AMap.Pixel(-13, -30),
          // icon: require(`./img/${item.alarm_type}-${
          //   item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
          //   }.png`),
          icon: icon,
          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);
      });
      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", () => {
          data.forEach((item) => {
            console.log(item, "item");
            const infoWindow = new AMap.InfoWindow({
              content: `<div class="equ-info-box">
                    <p class="equ-info-item"><span class="label-type">【${
                      item.alarm_msg
                    }】</span></p>
                    <p class="equ-info-item"><span class="label">姓名</span><span class="value tag">${
                      item.name ? item.name : ""
                    }</span></p>
                    <p class="equ-info-item"><span class="label">手机号</span><span class="value">${
                      item.telno ? item.telno : ""
                    }</span></p>
                    <p class="equ-info-item"><span class="label">所在位置</span><span class="value">${
                      item.address ? item.address : ""
                    }</span></p>
                    <p class="equ-info-item"><span class="label">告警时间</span><span class="value">${
                      item.createtime ? item.createtime : ""
                    }</span></p>
                    </div>`,
              anchor: "top-center",
            });
            infoWindow.open(this.map, overlay.getPosition());
          });

          // 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;

          // });
        });
      });

      // // 地图的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="scss" scoped>
::v-deep .amap-maps{
  border:1px solid #235fa7 !important;
}
#data-view {
  color: #fff;
  width: 100%;
  // height: 100%;
  min-height: calc(100vh - 84px);
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;

  // #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;
  //   position: static;
  // }
  .main {
    display: flex;
    width: 100%;
    height: 90%;
    min-height: calc(100vh - 84px);
    padding-right: 10px;
    .left {
      width: 70%;
      .left-top {
        display: flex;
        height: 70%;
        .top-left {
          width: 30%;
        }
        .top-right {
          width: 70%;
        }
      }
      .left-under {
        width: 100%;
        height: 30%;
        .under-title {
          flex: 1;
          height: 10%;
          font-size: 14px;
          margin: 10px 0;

          background: url(../../assets/image/title_bg.png) no-repeat;
          // background: url(./img/title-bg.png) no-repeat;
          b {
            font-size: 20px;
            color: #fff;
            font-style: italic;
            margin-left: 25px;
            line-height: 30px;
          }
        }
        .under-box {
          height: 81%;
          display: flex;
        }
      }
    }
    .right {
      // border: 1px solid pink;
      width: 30%;
    }
  }

  .main-header {
    height: 8%;
    width: 100%;
    display: flex;
    // justify-content: center;
    // align-items: flex-start;

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

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

    .mh-middle {
      color: #1ae1e6;
      font-size: 24px;
      flex: 1;
      margin-left: 44%;
      margin-top:0.5%;
    }
    .mh-right {
      width: 25%;
      margin-top: 2%;
      padding-right:30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
     font-size: 24px;
     color:#00e1e1;
      img {
        width: 30px;
        height: 30px;
      }
    }

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

  ::v-deep.top-center {
    // background-color: pink;
  }
  ::v-deep.amap-info-content {
    // background-color: #1ae1e6;
  }
  ::v-deep.amap-info-sharp {
    // background-color: #1ae1e6;
  }
  ::v-deep.equ-info-box {
    padding: 6px 0 6px 8px;
    .equ-info-item {
      margin: 0;
      .label-type {
        color: #f00404;
      }
      &.flex {
        display: flex;
        .value {
          &:not(.copy) {
            width: 200px;
          }
        }
      }
      .label {
        display: inline-block;
        width: 60px;
        font-size: 13px;
        color: #999;
      }
      .value {
        color: #505050;
        &.link {
          color: #409eff;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
            user-select: none;
          }
        }
        &.copy {
          padding: 0 15px;
          color: #409eff;
          cursor: pointer;
        }
      }
    }
  }

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

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

  // .left-chart-container {
  //   width: 22%;
  //   height: 65%;
  //   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>