qdtlui/src/views/electri/index.vue

<template>
<div style="width:100%;height:100%;position:relative">
  <headerdiv ref="headerDiv" :currentindexP = currentindexNew ></headerdiv>
  <div style="display: inline-flex;width:100%">
  <div style="width:15%;height:100%;">
       <div style="width:100%">
              <div class='droneleftTree'>
            <!-- <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText"
                style="margin-top:1rem">
            </el-input> -->
             <div style="height:83vh;margin-top:2rem">
                  <!-- <el-scrollbar style="height:110%;"> -->
                        <el-tree
                            icon-class='iconClass'
                            :data="treeData"
                            lazy
                            :expand-on-click-node="false"
                            node-key="id"
                            :props="defaultProps"
                            :default-expand-all= isExpand
                            ref="tree"
                            @node-click = 'treeChange'
                            style="background-color:#04283C;color:#C5D0D4"
                            >
                        </el-tree>
               <!-- </el-scrollbar> -->
            </div>
          </div>

        </div>
  </div>

  <div style="width:50%;height:95vh">
      <mapdiv ref="mapdiv" style=""></mapdiv>
  </div>

  <div style="width:35%;height:100%;">
        <div style="width:100%;padding-left:1rem">
        <div class="publicTitle" style="margin-top:1.5rem">
           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡逻记录</div>
        </div>

        <div>
               <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="4.5rem">
                  <el-form-item label="时间" prop="time"  style="margin-top:0.1rem">
              <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 24rem"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                  </el-form-item>

                    <el-form-item>
                      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                       <el-button type="primary" icon="el-icon-search" size="mini" @click="exportQuery">导出</el-button>
                    </el-form-item>

                       <el-form-item label="区域" prop="areaName">
                       <el-select v-model="queryParams.areaName" placeholder="请选择区域" clearable size="small" style="width:16rem">
                                        <!-- <el-option
                                          key="0"
                                          label="全部"
                                          value="0"
                                        /> -->
                                        <el-option
                                          v-for="dict in dict.type.tl_xun_area"
                                          :key="dict.value"
                                          :label="dict.label"
                                          :value="dict.label"
                                        />
                                      </el-select>
                    </el-form-item>

                         <el-form-item label="巡逻车" prop="imei" label-width="6rem">
                       <el-select v-model="queryParams.imei" placeholder="请选择巡逻车" clearable size="small" style="width:16rem">
                                        <!-- <el-option
                                          key="0"
                                          label="全部"
                                          value="0"
                                        /> -->
                                        <el-option
                                          v-for="obj in treeData"
                                          :key="obj.imei"
                                          :label="obj.deviceName"
                                          :value="obj.imei"
                                        />
                                      </el-select>
                    </el-form-item>
              </el-form>

        </div>

        <div style='height:38rem'>
               <el-table :data="carRecordList" stripe
                class="my_table"
                max-height=350
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <el-table-column label="编号" align="center" prop="imei" />
                        <el-table-column label="时间" align="center" prop="gpsTime" />
                        <el-table-column label="设备名称" align="center" prop="deviceName" />
                        <el-table-column label="累计里程数（KM）" align="center" prop="mileage" />
                        <el-table-column label="当天里程数（KM）" align="center" prop="dayMileage" />
              </el-table>
        </div>

        <div class="publicTitle" style="margin-top:1rem">
           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡逻车统计</div>
        </div>

         <div style="height:25rem;width:100%;margin-top:0.5rem">
              <el-table :data="carList" stripe
                class="my_table"
                max-height=400
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <el-table-column label="地点" align="center" prop="areaName" />
                        <el-table-column label="巡逻车总数" align="center" prop="totalCar" />
                        <el-table-column label="使用中" align="center" prop="onlineCar" />
              </el-table>
          </div>
        </div>
  </div>
 </div>

    <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>
.
    <div class="topbg">
          <div style='display: flex;
                      flex-direction: row;
                      margin-left:3rem'>
                    <div style="">
                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/巡逻车.png'  /></div>
                    </div>
                    <div style='margin-left:1.5rem'>
                          <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #D6DEE7;">巡逻车总数</div>
                          <div style="width: 134px;
                                      height: 38px;
                                      background: rgba(9,36,45,0.4000);
                                      border: 1px solid #30FFE7;
                                      margin-top:1rem">
                          <div style="padding-top:0.1rem;
                                      padding-left:0.8rem;
                                      font-size: 2.4rem;
                                      font-family: Myriad Pro;
                                      font-weight: 400;
                                      color: #44D5FF;">
                                   {{carStaticCount.totalCar}}
                          </div>
                          </div>
                    </div>
          </div>

           <div style='display: flex;
                      flex-direction: row;
                       margin-left:10rem'>
                    <div style="">
                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/卡口在线率.png'  /></div>
                    </div>
                    <div style='margin-left:1.5rem'>
                          <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #D6DEE7;">巡逻车在线率</div>
                          <div style="width: 134px;
                                      height: 38px;
                                      background: rgba(9,36,45,0.4000);
                                      border: 1px solid #30FFE7;
                                      margin-top:1rem">
                          <div style="padding-top:0.1rem;
                                      padding-left:0.8rem;
                                      font-size: 2.4rem;
                                      font-family: Myriad Pro;
                                      font-weight: 400;
                                      color: #38FFC6;">
                                    {{carStaticCount.onlinePercent}}
                          </div>
                          </div>
                    </div>
          </div>

           <!-- <div style='display: flex;
                      flex-direction: row;
                      margin-left:10rem'>
                    <div style="">
                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/故障状态 (1).png'  /></div>
                    </div>
                    <div style='margin-left:1.5rem'>
                          <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #D6DEE7;">巡逻车故障</div>
                          <div style="width: 134px;
                                      height: 38px;
                                      background: rgba(9,36,45,0.4000);
                                      border: 1px solid #30FFE7;
                                      margin-top:1rem">
                          <div style="padding-top:0.1rem;
                                      padding-left:0.8rem;
                                      font-size: 2.4rem;
                                      font-family: Myriad Pro;
                                      font-weight: 400;
                                      color: #44D5FF;">
                                   {{}}
                          </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 headerdiv from '@/components/HeaderDiv/index.vue'
import { httpRequest } from "@/api/data/http";
import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
import { queryAllList,queryCarStaticByArea,queryLocationRecord,getAllElectricDetail } from "@/api/qdtl/electri";

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

export default {
    dicts: ['tl_area_type','tl_device_type','tl_xun_area'],
    name: "big",
    data() {
        return {
              isExpand:true,
              userList:[],
              areaList:[],
              tdxjCount:111,
              tdcsCount:152,
              currentindexNew:12,
              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"}'
              },
              lcChartData:{},
              videoChartDate:{},
              staticCount:0,
              dynamicCount:2,
              areaCount:0,
              menuNameNew:'设置监测',
              lcData:{
                   weeks:[],
                   counts:[]   
              },
              treeData:[],
              carStaticCount:{},
              carList:[],
              dateRange:'',
              queryParams:{},
              carRecordList:[],
              defaultProps: {
                children: 'children',
                label: 'label'
              },
              carArryData:[],
        };
    },
    components:{
      mapdiv,
      headerdiv,
      videodiv,
    },
    mounted() {
        console.log(111)
        this.getResource();
        this.getvideoList();
        // this.getGovern();
        this.queryAllList();
        this.queryCarStaticByArea();
        this.getAllElectricDetail();
        this.getDateRange();
        // this.queryLocationRecord()();
    },
    methods:{
        exportQuery(){
                this.download('/qdtl/electricLocation/export', {
                  ...this.queryParams
                }, `巡逻车_${new Date().getTime()}.xlsx`)
        },
        getAllElectricDetail(){
            getAllElectricDetail().then(response =>{
                     this.carStaticCount.totalCar = response.data.totalCar
                     this.carStaticCount.onlinePercent = response.data.onlinePercent
                     var carArry = response.data.detail;
                     for(var index in carArry){
                        carArry[index].fence = carArry[index].lng +","+carArry[index].lat
                     }
                     this.carArryData = carArry
                     this.$refs.mapdiv.addPoints(carArry,'police.png',0.6,'car');
                     })
             
        },
        queryLocationRecord(){
             queryLocationRecord(this.queryParams).then(response =>{
                     console.log(response);
                     this.carRecordList = response.data
;            })
        },
        queryCarStaticByArea(){
            queryCarStaticByArea().then(response =>{
                     this.carList = response.data
;            })
        },
        queryAllList(){
            queryAllList().then(response=>{
                  console.log(response);
                  for(var index in response.data){
                                    var obj = response.data[index]
                                    // obj.id = obj.indexCode;

                                    obj.label = obj.deviceName;
                                    obj.data = obj;
                                    // console.log(obj);
                                    this.treeData.push(obj);
                    }
              })
               console.log(this.treeData);
        },
        tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
        },
        changeMapTab(index){
            this.$refs.mapdiv.iconSelect = index
        },
      
          getResource(){
               getResource().then(response =>{
                     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(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);
                         this.staticCount += json.data.list.length
                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
                  });

         },
         treeChange(data, node){
             var view = this.$refs.mapdiv.map.getView();
             console.log(view.getCenter());
             for(var index in this.carArryData){
                    if(this.carArryData[index].deviceName == data.deviceName){
                          console.log(this.carArryData[index].fence);
                          // var lngArry = [];
                          // lngArry.push();
                          // lngArry.push();
                          view.setCenter(this.carArryData[index].fence.split(','));
                          this.$refs.mapdiv.clickObj = this.carArryData[index]
                          this.$refs.mapdiv.isShowCar = true
                          this.$refs.mapdiv.carStyle = 'left:80rem;top:35rem'
                    }
             }
         },
         handleQuery(){
                console.log(this.queryParams);
                // console.log(this.dateRange);
                this.queryParams.startDate = this.dateRange[0]
                this.queryParams.endDate = this.dateRange[1]
                queryLocationRecord(this.queryParams).then(response =>{
                     console.log(response);
                     this.carRecordList = response.data
                     for(var index in this.carRecordList){
                            var obj = this.carRecordList[index]
                            // console.log(obj.mileage);
                            if(obj.mileage != null){
                                  obj.mileage = (obj.mileage/1000).toFixed(2)
                                  //  console.log(obj.mileage);
                            }
                             if(obj.dayMileage != null){
                                  obj.dayMileage = (obj.dayMileage/1000).toFixed(2)
                            }

                     }
                })             
         },
         resetQuery(){
                  this.queryParams = [];
         },
         getDateRange(){
                  var endDate = new Date().toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
                  var startDaate = new Date(new Date().getTime()-3600*24*1000)
                  var startDate = startDaate.toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
                  this.dateRange = [];
                  this.dateRange.push(startDate);
                  this.dateRange.push(endDate);
                  this.handleQuery();
         },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 .publicTitle{
          background: url("~@/assets/images/title@2x.png") no-repeat;
          background-size: 100% 100%;
          width:95%;
          height:3.9rem;
          padding-left:1.5rem;
          padding-top:0.7rem;
          display: inline-flex;
       }
.prcentClass{
          background: url("~@/assets/images/goverce/prcent.png") no-repeat;
          background-size: 100% 100%;
          width:95%;
          height:28rem;
          padding-left:25rem
}
.tdgove{
          background: url("~@/assets/images/goverce/态势1@2x.png") no-repeat;
          background-size: 100% 100%;
          width:32rem;
          height:9.6rem;
          margin-left:3.5rem;
          margin-top:1rem;
          display: inline-flex;
          // display: inline-flex;
}

.tdgove2{
          background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
          background-size: 100% 100%;
          width:37.2rem;
          height:9.9rem;
          margin-left:3.5rem;
          display: inline-flex;
          // display: inline-flex;
}
.fontClass{
        font-size: 1.5rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 2.6rem;
}

.EngClass{
        font-size: 1.2rem;
        font-family: AlibabaSans;
        font-weight: 400;
        color: #B7D0FA;
        line-height: 1.1rem;
        opacity: 0.4;
}

.countClass{
        font-size: 2.1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #25FFDE;
        line-height: 2rem;
}

.countClass2{
        font-size: 1.5rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 2.6rem;
}

.isTop{
        margin-top:1.5rem
}

.droneleftTree{
          /* float:left; */
          width:100%;
          background-color:#04283C;
          padding: 1rem;
          padding-top:0 ;
          min-height: 95vh;
          z-index:1001;
     }


.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: 40%;
  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;
  }
}

.topbg{
      position: absolute;
      background-size: 100% 100%;
      z-index: 1;
      width: 50%;
      height: 16.3rem;
      top:8rem;
      left: 15%;
      background-color: rgba(0, 0, 0, 0.47);
      // transform: translate(-50%,-0%);
      display: flex;
      flex-direction: row;
      // align-items: center;
      color:#fff;
      font-size:1.6rem;
      padding-top:2rem
}

.iconClass{
    display: none
}
</style>