dayun-ui/src/views/index.vue

<template>
  <div class="container">
    <div class="main">
      <div class="nav">
        <div class="nav-one">
          <img src="../assets/images/nav-one.png" alt="" />
          <div>
            <div class="nav-title">设备数量</div>
            <div class="nav-count" @click="goDevice">
              {{ topData.deviceNO }}
            </div>
          </div>
        </div>
        <div class="nav-two">
          <img src="../assets/images/nav-two.png" alt="" />
          <div>
            <div class="nav-title">WIFI数量</div>
            <div class="nav-count" @click="goWIFI">
              <div>
                <span class="eyicount">{{ topData.wifiNO }}</span
                ><span class="text">恶意数</span>
              </div>
              <div>
                <span class="allcount">{{ topData.totalWifiNO }}</span
                ><span class="text">总数</span>
              </div>
            </div>
          </div>
        </div>
        <div class="nav-three">
          <img src="../assets/images/nav-three.png" alt="" />
          <div>
            <div class="nav-title">蓝牙数量</div>
            <div class="nav-count" @click="goBluetooth">
              <div>
                <span class="eyicount">{{ topData.bluetoothNO }}</span
                ><span class="text">恶意数</span>
              </div>
              <div>
                <span class="allcount">{{ topData.totalBluetoothNO }}</span
                ><span class="text">总数</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="nav-four">
          <img src="../assets/images/nav-four.png" alt="" />
          <div>
            <div class="nav-title">场馆数量</div>
            <div class="nav-count" @click="goVenue">{{ topData.venueNO }}</div>
          </div>
        </div> -->
      </div>
      <div class="contbody" id="contbody">
        <!-- <div class="cont-left"> -->
        <!-- <img
            src="../assets/images/ditu.png"
            alt=""
            style="width: 100%; height: 690px"
          /> -->
        <!-- </div> -->
        <!-- <div class="chart-wrapper cont-left">
          <store-chart />
        </div> -->
        <!-- <div class="cont-right">
          <twin-chart :rightData="rightData" :wheight="wheight" />
        </div> -->
        <!-- cener成都市地区字符串,zoom缩放等级 -->
        <!-- ../assets/images/org-icon.png -->
        <!-- mapStyle="mapStyle" 地图样式 anchor="BMAP ANCHOR TOP RIGHT" 比例尺-->
        <baidu-map
          ak="sqxhrmvfnPaA2yS0gmceKfCrL8T3hhIV"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          style="width: 100%; height: 100%"
        >
          <!-- 缩放 -->
          <bm-navigation
            anchor="BMAP_ANCHOR TOP_RIGHT"
            class="suofang"
          ></bm-navigation>
          <!-- 点位 -->
          <bm-marker
            @mouseover="infoWindowOpen(marker)"
            @click="infoWindowOpen(marker)"
            v-for="(marker, index) of topData.info"
            :key="index"
            :position="{ lng: marker.lng, lat: marker.lat }"
            :icon="{
              url: require('@/assets/images/org-icon.png'),
              size: { width: 150, height: 157 },
            }"
            @mouseout="infoWindowClose"
          >
            <!-- 弹框 -->
            <bm-info-window
              :show="selectedMarker == marker || show"
              @close="infoWindowClose"
              @open="infoWindowOpen(marker)"
              @mouseout="infoWindowClose"
            >
              <div class="tankuang">
                <div class="poptop" @click="goBluetooth">
                  <div style="display: flex">
                    <div class="pop-left">
                      <img src="../assets/images/Bluetooth.png" alt="" />
                      <div>蓝牙</div>
                    </div>
                    <div class="vertical-dashed-line"></div>
                  </div>
                  <div class="pop-right">
                    <div>
                      <span>总数</span><span>{{ marker.totalBluetooth }}</span>
                    </div>
                    <div>
                      <span>恶意数</span
                      ><span class="eyi">{{ marker.bluetooth }}</span>
                    </div>
                  </div>
                </div>
                <div class="popbottom" @click="goWIFI">
                  <div style="display: flex">
                    <div class="pop-left">
                      <img src="../assets/images/WifiMedium.png" alt="" />
                      <div>WIFI</div>
                    </div>
                    <div class="vertical-dashed-line"></div>
                  </div>
                  <div class="pop-right">
                    <div>
                      <span>总数</span><span>{{ marker.totalWifi }}</span>
                    </div>
                    <div>
                      <span>恶意数</span
                      ><span class="eyi">{{ marker.wifi }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </bm-info-window>
          </bm-marker>
          <!-- 选择时间 -->
          <el-select
            v-model="selectedValue"
            placeholder="请选择"
            class="choice-time"
            @change="choiceTime"
          >
            <el-option
              v-for="item in dict.type.index_filter"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- 选择自定义时间 -->
          <el-date-picker
            v-model="drillDate"
            class="choice-time choice-mytime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            @change="checkDrillDate"
          />
          <div class="real-signal">
            <div>
              <div class="title">实时信号</div>
              <div
                class="cont"
                @click="lookPosition(items)"
                v-for="(items, indexs) in realTimeData"
                :key="indexs"
              >
                <span class="positions"
                  ><img src="../assets/images/MapPin.png" alt="" /><span
                    >查看位置</span
                  ></span
                >
                <span class="realname">{{ items.type }}</span>
                <span class="illegal">{{ items.state }}</span>
              </div>
            </div>
          </div>
        </baidu-map>
        <!-- <my-popup
          v-if="selectedMarker"
          :marker="selectedMarker"
          @close="selectedMarker = null"
        ></my-popup> -->
      </div>
    </div>
  </div>
</template>

<script>
import { indexTop, indexInfo, realTimeInfo } from "@/api/system/index";
import storeChart from "./dashboard/storeChart";
import twinChart from "./dashboard/twinChart";
import MyPopup from "./components/MyPopup.vue";
import BmMarkers from "vue-baidu-map/components/overlays/Marker.vue";
import { listData } from "@/api/system/dict/data";
export default {
  name: "Dict",
  dicts: ["index_filter"],
  components: {
    storeChart,
    twinChart,
    MyPopup,
    BmMarkers,
  },
  data() {
    return {
      selectedValue: "1",
      drillDate: [], //自定义时间
      realTimeData: [], //实时数据
      show: false,
      //=======地图
      center: { lng: 104.064856, lat: 30.658876 }, // 成都的经纬度
      zoom: 12, // 地图缩放级别
      selectedMarker: null,
      //=======地图
      data: "sdff",
      topData: {},
      rightData: [],
      wheight: 0,
      start: "",
      end: "",
    };
  },
  created() {
    // console.log('first', this.dict.getDictValue())
    this.$nextTick(() => {
      this.wheight = document.getElementById("contbody").clientHeight;
    });
    // this.getList();
    // 头部数据
    this.getInfo();
    //实时信号
    this.realTimeInfo();
    setInterval(() => {
      this.getInfo();
    }, 5 * 60 * 1000);
    setInterval(() => {
      this.realTimeInfo();
    }, 1 * 60 * 1000);
  },
  methods: {
    //实时数据
    realTimeInfo() {
      realTimeInfo().then((res) => {
        this.realTimeData = res;
      });
    },
    lookPosition(items) {
      //查看位置
      this.center = { lng: items.lng, lat: items.lat };
      console.log(items, "22222");
      this.show = true;
    },
    //选择周，天。。。
    choiceTime(selectedValue) {
      if (this.selectedValue == 6 && this.drillDate.length == 0) {
        return this.$modal.msg("请选择自定义时间");
      } else {
        this.getInfo();
      }
    },
    //自定义时间
    checkDrillDate() {
      console.log("drillDate", this.drillDate);
      this.start = this.drillDate?this.drillDate[0]:"";
      this.end = this.drillDate?this.drillDate[1]:"";
      this.selectedValue=this.drillDate?"6":"1"
      this.$forceUpdate()
      this.getInfo();
    },
    //关闭点位
    infoWindowClose() {
      this.selectedMarker = null;
      this.show = false;
      this.$forceUpdate();
    },
    //点击得到点位信息
    infoWindowOpen(marker) {
      this.selectedMarker = marker;
      // this.show = true;

    },
    goDevice() {
      //去设备
      this.$router.push({ path: "/deviceInfo" });
    },
    goWIFI() {
      this.$router.push({ path: "/wifiInfo" });
    },
    goBluetooth() {
      this.$router.push({ path: "/bluetoothINfo" });
    },
    goVenue() {
      this.$router.push({ path: "/venueInfo" });
    },
    getList() {
      indexTop().then((response) => {
        this.rightData = response;
      });
    },
    getInfo() {
      //头部
      indexInfo({
        filter: this.selectedValue,
        start: this.start,
        end: this.end,
      }).then((response) => {
        this.topData = response;
        this.$modal.msgSuccess('加载成功')
        console.log("response", response);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f6f6f6 !important;
  height: 93vh;
  width: 100%;
}
.main {
  display: flex;
  flex-direction: column;
  margin: 0 32px 32px;
  overflow: hidden;
  height: 100%;
}
.nav {
  display: flex;
  justify-content: space-around;
  min-height: 160px;
  margin: 32px 0 24px;
  & > div {
    & > div {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    flex: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-right: 24px;
    & > img {
      margin-right: 28px;
      margin-left: 32px;
      max-width: 80px;
      max-height: 80px;
      border-radius: 24px;
    }
    // @media (max-height: 1600px) {
    //   & > img {
    //     width: 40px;
    //     height: 40px;
    //   }
    // }
    @media (max-width: 1000px) {
      & > img {
        max-width: 60px;
        max-height: 60px;
      }
      & > div {
        height: 60px;
      }
    }
  }
  .nav-one {
    background: #c4eccc;
    color: #347140;
  }
  .nav-two {
    color: #713734;
    background: #fae6bb;
  }
  .nav-three {
    color: #344171;
    background: #d6e0ff;
    margin-right: 0;
  }
  .nav-four {
    color: #344171;
    margin-right: 0;
    background: #ffd6e4;
  }
  .nav-one,
  .nav-two,
  .nav-three,
  .nav-four {
    background-image: url("../assets/images/topImg.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 98px 100px;
  }
  .nav-count {
    cursor: pointer;
    font-size: 32px;
    font-weight: 600;
    color: #000;
    display: flex;
    margin-top: 8px;
    & > div {
      display: flex;
      flex-direction: column;
    }
    & > div:first-child {
      margin-right: 32px;
    }
    .eyicount {
      font-weight: 600;
      font-size: 32px;
      color: #ff3e01;
    }
    .allcount {
      font-weight: 600;
      font-size: 32px;
    }
    .text {
      color: #713734;
      font-size: 14px;
    }
  }
  .nav-title {
    font-size: 18px;
  }
  @media (max-width: 1000px) {
    .nav-count {
      font-size: 16px;
    }
    .nav-title {
      font-size: 14px;
    }
  }
}
.contbody {
  display: flex;
  width: 100%;
  flex-grow: 1;
  border-radius: 16px;
  margin-bottom: 32px;
  position: relative;
  .cont-left,
  .cont-right {
    background: #fff;
    border-radius: 16px;
  }
  .cont-left {
    flex: 1;
    margin-right: 24px;
  }
  .cont-right {
    width: 550px;
  }
}
.tankuang {
  width: 225px;
  height: 160px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  justify-content: space-around;
}
.poptop,
.popbottom {
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  .pop-left {
    color: #72838c;
    img {
      width: 32px;
      height: 32px;
    }

    margin-right: 20px;
  }
  .vertical-dashed-line {
    margin-top: 8px;
    border-left: 2px dashed #72838c;
    height: 40px; /* 虚线的高度 */
  }
  .pop-right {
    font-weight: 600;
    font-size: 14px;
    margin-left: 20px;

    & > div {
      display: flex;
      justify-content: space-around;
      & > span:last-child {
        font-size: 18px;
        margin-left: 20px;
      }
      .eyi {
        font-size: 19px;
        color: #ff3e01;
      }
    }
  }
}
// 弹框样式
::v-deep .BMap_top,
::v-deep .BMap_bottom {
  background: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .BMap_pop {
  > div:nth-child(7),
  > div:nth-child(5),
  > div:nth-child(1),
  > div:nth-child(3),
  > div:nth-child(4) {
    > div {
      background: rgba(255, 255, 255, 0.8) !important;
    }
  }
  > div:nth-child(8) {
    display: none;
  }
}
::v-deep .BMap_pop .BMap_center,
.choice-mytime,
.choice-time,
.real-signal {
  background: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .BMap_shadow,
.BMap_shadow img,
.BMap_shadow div {
  display: none;
}
::v-deep .BMap_stdMpCtrl {
  inset: 24px auto auto 10px !important;
}
//选择时间
.choice-time,
.choice-mytime {
  border: none;
  box-sizing: content-box;
  position: absolute;
  cursor: pointer;
  left: 85px;
  top: 24px;
  z-index: 9;
  ::v-deep .el-input__inner {
    border: none;
    width: 90px;
    height: 38px;
  }
}
.choice-mytime {
  width: 244px;
  left: 184px;
  top: 24px;
  height: 33px !important;
}
::v-deep .el-date-editor .el-range-input,
::v-deep .el-date-editor .el-range__icon {
  color: #459def !important;
}
//实时信号
.real-signal {
  height: 360px;
  overflow-y: auto;
  width: 258px;
  right: 24px;
  top: 24px;
  position: absolute;
  z-index: 9;
  border-radius: 4px 4px 0px 0px;
  & > div {
    font-size: 14px;
    .title {
      position: sticky;
      top: 0;
      background-color: #fff;
      padding: 10px;
      color: #72838c;
      z-index: 99999;
      border-bottom: 1px solid #e5e6eb;
    }
    .cont {
      cursor: pointer;
      margin: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .positions {
        color: #459def;
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
        & > span:last-child {
          margin-left: 3px;
          border-bottom: 1px solid #459def;
        }
      }
      // .realname{

      // }
      .illegal {
        color: #ff3e01;
      }
    }
  }
}
</style>