qdtlui/src/views/bigscreen/index.vue

<template>
<div style="width:100%;height:100%;position:relative">
  <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
      <mapdiv ref="mapdiv" style=""></mapdiv>
      <!-- <zhgl></zhgl> -->
      <!-- <introduction></introduction> -->
    </div>
   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>

    <div class="bottombg">
      <div class="item item2" @click="changeMapTab(1)"><div class="num">{{staticCount}}</div><div>静态资源</div></div>
      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">{{dynamicCount}}</div><div>动态资源</div></div>
      <div class="item item1 " @click="changeMapTab(3)"><div class="num">{{areaCount}}</div><div>重点区域</div></div>
      <!-- <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div> -->
    </div>

    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->


</div>


</template>

<script>
import moment from "moment";
import mapdiv from "../../components/map/index.vue"
import introduction from './introduction.vue'
import zhgl from "../../components/zhgl/index.vue"
import headerdiv from '@/components/HeaderDiv/index.vue'
import { httpRequest } from "@/api/data/http";
import { getLineData,getResource } from "@/api/qdtl/data";

import videodiv from "../../components/Videoplayer/index.vue"

export default {
    name: "big",
    data() {
        return {
            currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
            currentindexNew:1,
            ccode:"32068166001320000235",
            videoParams:{
              url:'http://2.90.220.252:9017/artemis-web/debug',
              params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
            },
            staticCount:0,
            dynamicCount:0,
            areaCount:0
        };
    },
    components:{
      mapdiv,
      zhgl,
      headerdiv,
      videodiv,
      introduction
    },
    mounted() {
        // this.getTrain();
        this.getResource();
        this.getvideoList();
        // this.$$refs.headerDiv.currentindex = 1;
        setInterval(() => {
            this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
        }, 1000);

    },
    methods:{
        changeMapTab(index){
            this.$refs.mapdiv.iconSelect = index
        },
         getTrain(){
                  this.$refs.mapdiv.addPoint('video.png');
         },
         getResource(){
               getResource({date:'2022-03-12'}).then(response =>{
                     console.log(response.data);
                
                     var trainArry = [];
                     var bridgeArry = [];
                     var railArry = [];
                     var stationLocation = [];
                     var areaList = [];
                     for(var index in response.data.staticLocation){
                          var obj = response.data.staticLocation[index]
                          obj.fence = obj.lnglat
                          obj.name = obj.locationName
                          stationLocation.push(obj)
                     }
                     for(var index in response.data.area){
                         var obj = response.data.area[index]
                         if(obj.areaType == '1'){
                              areaList.push(obj);
                         }else if(obj.areaType == '2'){
                             obj.name = obj.areaName
                             trainArry.push(obj);
                         }else if(obj.areaType == '3'){
                             obj.name = obj.areaName
                             bridgeArry.push(obj);
                         }else if(obj.areaType == '4'){
                             obj.name = obj.areaName
                             railArry.push(obj);
                         }
                     }
                     for(var index in areaList){
                             var json = JSON.parse(areaList[index].fence)
                             this.$refs.mapdiv.addPolygon(json);
                     }
                     for(var key in response.data.deviceTrail){
                              var jsonStr = '['
                             for(var index in response.data.deviceTrail[key]){
                               var obj = response.data.deviceTrail[key][index]
                               if(index == response.data.deviceTrail[key].length - 1){
                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
                               }else{
                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
                               }
                               jsonStr += location
                              //  deviceArry.push(obj.fence.split(','));
                             }
                              jsonStr += ']'
                             var json = JSON.parse(jsonStr);
                             this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
                             this.$refs.mapdiv.addline(json,'device');
                     }
                       this.$refs.mapdiv.addPoints(response.data.drone,'wrj.png',0.6,'wrj');
                       this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
                       this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
                       this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
                       this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
                       this.areaCount += response.data.area.length
                       this.staticCount += response.data.drone.length + stationLocation.length;
                      //  this.dynamicCount +=  response.data.deviceTrail.length 
                       this.dynamicCount +=  Object.getOwnPropertyNames(response.data.deviceTrail).length
               })
         },
         getvideoList(){
                  httpRequest(this.videoParams).then(data =>{
                        var json = JSON.parse(data.data);
                        // console.log(json.data.list);
                        // console.log(json.data.length)
                         this.staticCount += json.data.list.length
                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
                  });

         }

    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.bottombg{
  background: url("../../assets/images/底部菜单bg@2x.png");
  position: absolute;
  background-size: 100% 100%;
  z-index: 1;
  width: 85.1rem;
  height: 16.3rem;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,-0%);
  display: flex;
  flex-direction: row;
  align-items: center;
  color:#fff;
  font-size:1.6rem;

.item:hover{
  cursor: pointer;
}
  .item{
    width: 33%;
    text-align: center;
    justify-content: center;
    position: relative;
    .num{
      font-size:3rem;
      color:#25f8bd;
    }
  }
   .item1{
    width: 33%;
  }
  .item2::after{
    content: "";
    background: url("../../assets/images/图层\ 2@2x.png");
    background-size: 100% 100%;
    width: 0.2rem;
    height: 7.3rem;
    position: absolute;
    top: 0;
    right: 0;
  }
}
.ol-zoom-in,.ol-zoom-out{
  display: none !important;

}

</style>