qdtlui/src/views/safe/index.vue

<template>
<div style="width:100%;height:100%;position:relative">
  <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
  <div style="display:fix;">
  <div style="width:25%;height:100%;display: inline-flex;">
       <div style="width:100%">
       <div class="divtitle" style="margin-top:0.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>
        <!-- <br/> -->
        <div>
           <div class="yjcontent1" style="padding-left:2rem;padding-top:1.5rem">
               <div>
                  <div style="font-size: 1.4rem;
                              font-family: Adobe Heiti Std;
                              font-weight: normal;
                              color: #FFFFFF;
                              ">预警总数</div>
                  <div style='font-size: 2rem;
                            font-family: Myriad Pro;
                            font-weight: 400;
                            color: #21F5F2;'>394</div>
               </div>
           </div>
           <div class="yjcontent2" style="padding-left:2rem;padding-top:1.5rem">
               <div>
                  <div style="font-size: 1.4rem;
                              font-family: Adobe Heiti Std;
                              font-weight: normal;
                              color: #FFFFFF;">未处理预警</div>
                  <div  style='font-size: 2rem;
                            font-family: Myriad Pro;
                            font-weight: 400;
                            color: #23B9FF;'>226</div>
           </div>
            </div>
        </div>

         <div id='yjchart' style="width:45rem;height:30rem"></div>
         <div class="divtitle" style="margin-top:0.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 class="zdyjcontrnt"></div>
         <div id='zdyjchart' style="width:45rem;height:27rem"></div>
       </div>


  </div>
  <div style="width:50%;height:95%;position:absolute;display: inline-flex;">
      <mapdiv ref="mapdiv" style=""></mapdiv>
  </div>
  <div style="width:25%;height:100%;margin-left:96rem;display: inline-flex;">
        <div style="width:100%;padding-left:1rem">
        <div class="divtitle" 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 style="display: inline-flex;margin-top:3rem">
              <div style="display: inline-flex;margin-left:5rem">
                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
                    </div>
                    <div style="margin-top:1.5rem;margin-left:1rem">
                        <div class='countClass'>32531</div>
                        <div class='deptClass'>部门一</div>
                    </div>
              </div>
             <div style="display: inline-flex;margin-left:3rem">
                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
                    </div>
                    <div style="margin-top:1.5rem;margin-left:1rem">
                        <div class='countClass'>13325</div>
                        <div class='deptClass'>部门三</div>
                    </div>
              </div>
        </div>

          <div style="display: inline-flex;">
              <div style="display: inline-flex;margin-left:5rem">
                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
                    </div>
                    <div style="margin-top:1.5rem;margin-left:1rem">
                        <div class='countClass'>62255</div>
                        <div class='deptClass'>部门二</div>
                    </div>
              </div>
             <div style="display: inline-flex;margin-left:3rem">
                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
                    </div>
                    <div style="margin-top:1.5rem;margin-left:1rem">
                        <div class='countClass'>72123</div>
                        <div class='deptClass'>其它合作单位</div>
                    </div>
              </div>
        </div>
        
        <div class='pieChart' style='margin-top:5rem'></div>
         <!-- <div id='lcChart' style="width:45rem;height:25rem"></div> -->

        <div class="divtitle" 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 class='gdChart' style='margin-top:5rem'></div> -->
          <div id='gdChart' style="width:45rem;height:37rem"></div>

        </div>
  </div>
 </div>

    <div class="bottombg">
      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</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 headerdiv from '@/components/HeaderDiv/index.vue'
import { httpRequest } from "@/api/data/http";
import { getLineData,getResource,getgovern } from "@/api/qdtl/data";

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

export default {
    name: "big",
    data() {
        return {
              userList:[],
              tdxjCount:111,
              tdcsCount:152,
              currentindexNew:4,
              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"}'
              },
        };
    },
    components:{
      mapdiv,
      headerdiv,
      videodiv,
    },
    mounted() {
        console.log(111)
        this.initchart();
        this.getResource();
        this.getvideoList();
        // this.getGovern();
        this.inityjchart();
        this.getGdChart();
    },
    methods:{
        getGdChart(){
             var myChart = this.$echarts.init(document.getElementById('gdChart'));
             var option = {
                            xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                 axisLabel: {
                                            show: true,
                                            textStyle: {
                                            color: '#ACB6B9'   //这里用参数代替了
                                        }
                                },
                            },
                            yAxis: {
                                 axisLabel: {
                                            show: true,
                                            textStyle: {
                                            color: '#ACB6B9'   //这里用参数代替了
                                        }
                                },
                                type: 'value'
                            },
                            color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 1, color: '#2275E4'},                   //柱图渐变色
                                        {offset: 0, color: '#56CCF2'},                   //柱图渐变色
                                    ]
                           ),
                            series: [
                                {
                                        barWidth:15,
                                        data: [120, 200, 150, 80, 70, 110, 130],
                                        type: 'bar'
                                }
                            ]
                };
             myChart.setOption(option);
        },
        tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row"; 
                } else {
                    return "success-row";
                }
        },
        changeMapTab(index){
            this.$refs.mapdiv.iconSelect = index
        },
        getGovern(){
                getgovern().then(data =>{
                       console.log(data);
                       this.userList  = data.data.checkStatic;
                       console.log(this.userList);
                       this.tdxjCount = data.data.xunTotalDistance;
                       this.tdcsCount = data.data.checkPointLogNum;
                })  
        },
        initchart(){
              var myChart = this.$echarts.init(document.getElementById('yjchart'));
              var option = {
                            color: ['#3DFCCD', '#23B9FF'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow'
                                }
                            },
                            legend: {
                                   x:'left',
                                   textStyle:{
                                            fontSize: 12,//字体大小
                                            color: '"#fft'//字体颜色
                                    },
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01],
                                axisLabel: {
                                                        show: true,
                                                        textStyle: {
                                                        color: '#ACB6B9'   //这里用参数代替了
                                                   }
                                            },
                            },
                            yAxis: {
                                type: 'category',
                                data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇','东宇镇','近海镇'],
                                axisLabel: {
                                                        show: true,
                                                        textStyle: {
                                                        color: '#ACB6B9'   //这里用参数代替了
                                                   }
                                            },
                            },
                            series: [
                                {
                                name: '已处理预警',
                                type: 'bar',
                                data: [573, 289, 357, 405, 501, 286,471,421]
                                },
                                {
                                name: '预警总数',
                                type: 'bar',
                                data: [582, 366, 391, 498, 577, 337, 483, 492]
                                }
                            ]
                            };
                myChart.setOption(option);
        },
        inityjchart(){
            var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
            var option = {
                            series: [
                                {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [20, 100],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                 label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b} ({d}%)'
                                    }
                                },
                                data: [
                                    { value: 40, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
                                    { value: 38, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
                                    { value: 32, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
                                    { value: 30, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
                                    { value: 28, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
                                    { value: 26, name: '其它' ,  itemStyle: { color: '#1C3F83' },},
                                    { value: 22, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
                                ]
                                }
                            ]
                        }; 
                        myChart.setOption(option);
               
        },
          getResource(){
               getResource({date:'2022-03-12'}).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');
               })
         },
         getvideoList(){
                  httpRequest(this.videoParams).then(data =>{
                        var json = JSON.parse(data.data);
                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
                  });
              
         }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
 .divtitle{
          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;
       }
.yjcontent1{
          background: url("~@/assets/images/safe/bg2.png") no-repeat;
          background-size: 100% 100%;
          width:18.7rem;
          height:8.3rem;
          margin-left:3.5rem;
          margin-top:1rem;
          display: inline-flex;
          // display: inline-flex;
}
.yjcontent2{
          background: url("~@/assets/images/safe/bg1.png") no-repeat;
          background-size: 100% 100%;
          width:18.7rem;
          height:8.3rem;
          margin-left:3.5rem;
          margin-top:1rem;
          display: inline-flex;
          // display: inline-flex;
}
.zdyjcontrnt{
          background: url("~@/assets/images/safe/组 15@2x.png") no-repeat;
          background-size: 100% 100%;
          width:42.7rem;
          height:12rem;
          margin-left:1.5rem;
          margin-top:1rem;
          display: inline-flex;
}

.bgcontent{
          background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
          background-size: 100% 100%;
          width:6.9rem;
          height:6.9rem;
          margin-left:1.5rem;
          margin-top:1rem;
          display: inline-flex;
}

.pieChart{
          background: url("~@/assets/images/safe/piechart.png") no-repeat;
          background-size: 100% 100%;
          width:38.8rem;
          height:17.5rem;
          margin-left:4rem;
          margin-top:1rem;
          display: inline-flex;
}

.countClass{
    font-size: 2.4rem;
    font-family: AlibabaSans;
    font-weight: 500;
    color: #30FDFF;
}

.deptClass{
    font-size: 1.4rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #BAC3C4;
}

.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;
}


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

</style>