admin-fiveFollowing/src/views/index2/index.vue

<template>
  <div class="app-container SiteDistribution" style="padding:0">
    <div class="top">
      <div class="statistics" v-if="mode == 1">
        <div class="item" v-for="(item, index) in statistics" :key="index">
          <img :src="item.img" alt="">
          <div class="text">
            <span :style="{ color: item.color }">{{ item.num }}</span>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="query" v-if="mode == 2">
        <a-tree-select
            v-model:value="city"
            :tree-data="cityArray"
            placeholder="请选择城市"
            tree-default-expand-all
            class="citySelect"
            style="width:120px;margin-right:10px;"
          >
        </a-tree-select>
        <a-select
          v-model:value="siteSlect"
          placeholder=""
          :options="siteArray"
          @change="handleChange"
          class="state"
        >
        </a-select>
        <a-input-search
          v-model:value="siteName"
          placeholder="站点名称"
          enter-button
          @search="onSearch"
          class="siteName"
        />
      </div>
      <div class="modeSwitching">
        <div @click="switchMode(1)" :class="{ active: mode == 1 }">
          <img src="@/assets/svg/map.svg" alt="">
        </div>
        <div @click="switchMode(2)" :class="{ active: mode == 2 }">
          <img src="@/assets/svg/menu.svg" alt="">
        </div>
      </div>
      <div class="city">

      </div>
    </div>
    <div class="middle">
      <div  id="map" ref="map" style="width:100%;height:100%;" v-if="mode == 1"></div>
      <div class="table" v-if="mode == 2">
        <el-table :data="tableData" border stripe :header-cell-style="headClass" height="71vh" style="overflow-y: auto;">
          <el-table-column
            fixed
            prop="platformAreaName"
            label="站点名称"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="分组名称"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="实时负荷"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="站点状态"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="设备总数"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="告警数"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="电话"
            width=""
          ></el-table-column>
          <el-table-column
            fixed
            prop="platformAreaName"
            label="地址"
            width=""
          ></el-table-column>
        </el-table>
        <div class="paginationBlock">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[15, 20, 25, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="mode == 1">
      <div class="itemWrap">
        <div class="item" @click="site(4)" :class="{ active: siteState.includes(4) }" v-if="siteState.includes(1)">
          <img src="@/assets/svg/name.svg" alt="">
          <p>名称</p>
        </div>
        <div class="item" @click="site(3)" :class="{ active: siteState.includes(3) }" v-if="siteState.includes(1)">
          <img src="@/assets/svg/wifi.svg" alt="">
          <p>在线</p>
        </div>
        <div class="item" @click="site(2)" :class="{ active: siteState.includes(2) }" v-if="siteState.includes(1)">
          <img src="@/assets/svg/alerm.svg" alt="">
          <p>告警</p>
        </div>
      </div>
      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }">
         <img src="@/assets/svg/site.svg" alt="">
         <p>站点</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// import alarmTotal from './alarmTotal'
// import { useStore } from 'vuex'
// import { computed, defineComponent, onMounted, ref } from 'vue'
// import * as api from '@/api/alarmManage/index'
// import { ElMessage } from 'element-plus'
// import { useRouter } from 'vue-router'
import zhanDian from "@/assets/images/zhanDian.png";
import liXian from "@/assets/images/liXian.png";
import weiChuLi from "@/assets/images/weiChuLi.png";
import sheBei from "@/assets/images/sheBei.png";
import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
import { ref,onMounted } from "vue";
onMounted(() => {
  init()
})
const mode = ref(1)//1:列表模式 2:地图模式
const siteState = ref([]) //true:站点显示 false:站点隐藏
const statistics = ref([
  { num:1, img:zhanDian, text:'站点总数', color:'#2ACDDA'},
  { num:2, img:liXian, text:'离线站总数', color:'#AAA' }, 
  { num:3, img:weiChuLi, text:'未处理告警数', color:'#FFB00A' },
  { num:4, img:sheBei, text:'设备数', color:'#2FA6FF' }
])
const  markerArray = ref([
    { longitude:121.486647, latitude:31.220165, name:"公司名称",state:0,tatal:100,alert:4,tel:"13120222222",address:"公司地址"},
    { longitude:121.486647, latitude:31.010165, name:"公司名称2",state:1,tatal:10,alert:2,tel:"13120222222",address:"公司地址"},
    { longitude:121.486647, latitude:30.010165, name:"公司名称3",state:0,tatal:1,alert:0,tel:"13120222222",address:"公司地址"}
]) //点标记集
const dian = ref([])

// 表格数据
const cityArray = ref([
  { 
    value: '1',
    label: '上海',
    children: [
      {
        value: '11',
        label: '青浦',
      },
      {
        value: '12',
        label: '松江',
      },
    ]
  },
  { 
    value: '2',
    label: '全部',
  },
  
])
const city = ref(1)
const siteSlect = ref("")
const siteArray = ref([
  { value:"", label:"全部" },
  { value:"1", label:"在线" },
  { value:"0", label:"离线" },
])
const siteName = ref("")



const total = ref(100)
const pageSize = ref(15)
const currentPage = ref(1)
const tableData = ref([
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
  // { platformAreaName: "名称"},
])

//初始化
function init(){
  initMap()
  site(1)
}
/**
 * 切换模式
 * @param {Number} val 1:列表模式 2:地图模式
 */
function switchMode(val) {
  mode.value = val
  if(val == 1){
    setTimeout(() => {
      init()
      site(1)
    })
  }
}

/**
 * 站点隐、显控制
*/
function site(val){
  //站点隐现其他项
  siteState.value = siteState.value.includes(val) ? siteState.value.filter(item => item!== val) : [...siteState.value, val]
  if(val == 1 || val == 2 || val == 3) {
    //站点隐现（全部/在线/告警）
    if(siteState.value.includes(1)){
      dian.value = []
      //站点在线并告警 / 所有站点
      if(siteState.value.includes(2) && siteState.value.includes(3) || !siteState.value.includes(2) && !siteState.value.includes(3)){
        markers(markerArray.value)
      }
      //告警设备隐现(离线)
      if(siteState.value.includes(2) && !siteState.value.includes(3)){
        for(let i=0;i<markerArray.value.length;i++){
          if(!markerArray.value[i].state){
            dian.value.push(markerArray.value[i])
          }
        }
        markers(dian.value)
      }
      //在线设备隐现
      if(!siteState.value.includes(2) && siteState.value.includes(3)){
        for(let i=0;i<markerArray.value.length;i++){
          if(markerArray.value[i].state){
            dian.value.push(markerArray.value[i])
          }
        }
        markers(dian.value)
      }
    }
    if(!siteState.value.includes(1)){
      markers()
    }
  }
  //文本标注隐现4
  if(siteState.value.includes(4)){
    if(siteState.value.includes(1)){
      labelState(dian.value.length == 0 ? markerArray.value : dian.value)
    }else{
      labelState()
    }
  }else{
    labelState()
  }
}
</script>
<style lang="scss" scoped>
.SiteDistribution{
  position: relative;
  overflow: hidden;
  .top{
    .statistics{
      position: absolute;
      z-index: 1;
      top:20px;
      left:20px;
      width:40%;
      height:78px;
      display: flex;
      flex-direction: row;
      
      .item{
        width:100%;
        height:100%;
        background: #fff;
        padding:14px 0 3% 3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        img{
          vertical-align: middle;
          margin-right:10px;
          width:50px;
          height:50px;
        }
        >div{
          display: flex;
          flex-direction: column;
          color:#333;
          font-size: 14px;
          margin-top:2px;
          span:nth-child(1){
            font-weight: bold;
            font-size: 16px;
            margin-bottom:10px;
          }
        }
      }
    }
    .modeSwitching{
      position: absolute;
      z-index: 1;
      top:20px;
      right:20px;
      width: 68px;
      height: 32px;
      display: flex;
      border-radius: 2px;
      background: #fff;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
      >div{
        width:50%;
        height:100%;
        line-height: 130%;;
        display: inline-block;
        background: none;
        text-align: center;
        img{
          width:16px;
          transform: translateX(80px);
          filter: drop-shadow(#333 -80px 1px 0px);
        }
      }
      .active{
        background: #48A4FF;
        img{
          width:16px;
          transform: translateX(80px);
          filter: drop-shadow(#fff -80px 1px 0px);
        }
      }
    }
    .query{
      position: absolute;
      right:100px;
      top:20px;
      z-index: 1;
      >div{
        display: inline-block;
        margin-right:10px;
      }
      .state{
        width:80px;
      }
      .siteName{
        width:200px;
      }
    }
  }
  .middle{
    width:100%;
    height:100%;
    position: absolute;
    z-index: 0;
    .table{
      padding:20px;
      margin-top:40px;
    }
  }
  .bottom{
    position: absolute;
    z-index: 1;
    bottom:20px;
    right:20px;
    .item{
      padding:4px 8px 2px;
      text-align: center;
      border-bottom:1px solid #eee;
      background: #fff;
      cursor: pointer;
      img{
        font-size: 14px;
        transform: translateX(80px);
        filter: drop-shadow(#333 -80px 1px 0px);
      }
      >p{
        font-size: 12px;
        color:#333;
        margin:6px 0 0px;
      }
    }
    .item:last-child(1){
      border-bottom:none;
    }
    .active{
        background: #48A4FF;
        img{
          transform: translateX(80px);
          filter: drop-shadow(#fff -80px 1px 0px);
        }
        p{
          color:#fff;
        }
      }
  }
}

</style>
<style>

.BMap_copCtrl,.anchorBL{
  display: none;
  
}

</style>
<style lang="scss">
.BMap_bubble_pop{
  width:270px !important;
  padding:0 !important;
  border-radius: 4px !important;
  box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.07);
  margin-top:35px;
  margin-left:-26px;
  // background: linear-gradient(to bottom right, #fff, #fff);
  .BMap_bubble_center,.BMap_bubble_content,.boxs{
      width:270px !important;
  }
  .BMap_bubble_center{
    margin-top:-30px;
    .boxs{
      .title{
        font-size: 16px;
        line-height: 40px;
        padding-left:20px;
      }
      .content{
        padding:0 20px 4px;
        border-top: 1px solid #E9E9F3;
        >div{
          border-top: 1px solid #E9E9F3;
          height:40px;
          line-height: 40px;
          display: flex;
          justify-content: space-between;
        }
        >div:nth-child(1){
          border-top:none;
        }
      }
    }
  }
  .BMap_bubble_center:after{
    content: ""; /* 伪元素不包含内容 */
    position: absolute; /* 绝对定位相对于.arrow-down */
    top: 100%; /* 向下定位 */
    left: 50%; /* 水平居中定位 */
    width: 0; /* 必须设置为0，因为我们不显示宽度 */
    height: 0; /* 必须设置为0，因为我们不显示高度 */
    margin-left: -15px; /* 根据需要调整，这里是让箭头中心对齐 */
    border-left: 15px solid transparent; /* 左边框透明 */
    border-right: 15px solid transparent; /* 右边框透明 */
    border-top: 15px solid #fff; /* 上边框是三角形的颜色 */
  }
 
  .BMap_bubble_buttons{
    top:4px !important;
    >div:nth-child(2){
      >div{
        font-size: 26px !important;
      }
    }
  }
  >img{
    display: none;
  }
}
.shadow{
  display: none;
}

    
.BMap_bubble_buttons{
  /* >div:nth-child(2){
    width:100px;
  } */
}
.el-table__header-wrapper { position: sticky; width: 100%; top:0px; z-index: 2;color:#333 }
</style>