qdtlui/src/views/public/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:25%;height:100%;">
                <div>
                <div class="publicTitle" 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 style="margin-top:2rem">
                        <div class="dayCount" style="margin-left:5.5rem;padding-top:1rem;float:left">6002</div>
                        <div class="wordCount" style="margin-left:6rem;padding-top:1rem;float:left">30</div>
                </div>

                <div style="margin-top:16rem;margin-left:3.8rem">
                        <div class="dayClass" style="float:left;">日访问量</div>
                        <div class="wordClass"style="float:left;margin-left:9.5rem">发文数量</div>
                </div>
                </div>
                 
                <div>
                <div class="publicTitle" style="margin-top:2.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>

                <div id='gzhchart' style="width:45rem;height:25rem"></div>

                <div class="publicTitle" 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 style="height:25rem;width:100%;margin-top:1rem">
                        <el-table :data="messageList" stripe
                            class="my_table"
                            max-height=300
                            :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="content">
                                            <template slot-scope="scope">
                                                         <span style="color:#28A0FF">{{scope.row.content}}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="内容" align="center" prop="label">
                                            <template slot-scope="scope">
                                                         <span style="color:#FFC029">{{scope.row.label}}</span>
                                            </template>
                                    </el-table-column>
                        </el-table>
                </div>
  </div>
  <div style="width:50%;height:95vh;">
      <mapdiv ref="mapdiv" style=""></mapdiv>
  </div>
  <div style="width:25%;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 id='pieChart' style="width:45rem;height:25rem"></div>
         <!-- <div id='lcChart' style="width:45rem;height:25rem"></div> -->

        <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 id='tsChart' style="width:45rem;height:25rem"></div>
        
         <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 id='lastChart' style="width:45rem;height:25rem"></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>

    <!-- <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:5,
              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"}'
              },
              messageList:[
                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
                  {content:'关于某某站点施工通知',label:'待处理',tag:'公司'},
                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
              ],
              staticCount:0,
              dynamicCount:0,
              areaCount:0
        };
    },
    components:{
      mapdiv,
      headerdiv,
      videodiv,
    },
    mounted() {
        this.initchart();
        this.getResource();
        this.getvideoList();
        this.getServicePieChart();
        this.getTsChart();
        this.getLastChart();
        // this.getGovern();
        // this.inityjchart();
    },
    methods:{
        getLastChart(){
               var myChart = this.$echarts.init(document.getElementById('lastChart'));
               var option = {
                            grid:{
                                top:"15%",
                                left:"10%",
                                right:"7%",
                                bottom:"10%"
                                },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019'],
                                axisLabel: {
                                show: true,
                                textStyle: {
                                    color: 'white', //x轴data 的颜色
                                    fontSize:12
                                }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#435886'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle:{
                                        color: ['#435886'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                    }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: 'white' //x轴data 的颜色
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#435886'
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle:{
                                        color: ['#435886'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                    }
                            },
                            series: [{
                                smooth: true,
                                data: [75, 85, 95, 117, 129, 143, 166,178,195],
                                type: 'line',
                                lineStyle:{
                                color:'#00D98B'
                                },
                                label:{
                                    show:true,
                                    color:'white'
                                },
                                areaStyle: {color:{
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#00D98B' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#122a61' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }},
                                itemStyle: {
                                    borderColor: "white"
                                    }
                            }]
                        };
                        myChart.setOption(option);
        },
        getTsChart(){
               var myChart = this.$echarts.init(document.getElementById('tsChart'));
               var option = {
                        xAxis: {
                            data: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六'],
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {
                                            show: true,
                                            textStyle: {
                                            color: '#ACB6B9'   //这里用参数代替了
                                        }
                                },
                        },
                        yAxis: {
                             name:"条",
                             nameTextStyle:{
                                    color:"white",
                                    fontSize:16,
                                    //padding: [0, 0, 0, 1050]
                                },
                             axisLabel: {
                                            show: true,
                                            textStyle: {
                                            color: '#ACB6B9'   //这里用参数代替了
                                        }
                                        },
                        },
                        color: new this.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 1, color: '#2275E4'},                   //柱图渐变色
                                {offset: 0, color: '#56CCF2'},                   //柱图渐变色
                            ]
                        ),
                        series: [{
                            name: 'hill',
                            type: 'pictorialBar',
                            barCategoryGap: '40%',
                            symbol: 'triangle',
                            itemStyle: {
                                normal: {
                                    opacity: 0.5
                                },
                                emphasis: {
                                    opacity: 1
                                }
                            },
                            data: [123, 60, 125, 128, 122, 122],
                            z: 10

                        }, {
                            name: 'glyph',
                            type: 'pictorialBar',
                            barGap: '-100%',
                            symbolPosition: 'end',
                            symbolSize: 50,
                            symbolOffset: [0, '-120%'],
                        }]
                    };
                     myChart.setOption(option);
        },
        getServicePieChart(){
               var myChart = this.$echarts.init(document.getElementById('pieChart'));
               var option = {
                            series: [
                                {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['60%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                               label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b} ({d}%)'
                                    }
                                },
                                emphasis: {
                                    label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                    }
                                },
                                data: [
                                    { value: 1048, name: '不满意',itemStyle: { color: '#FFC012' }, },
                                    { value: 735, name: '非常满意',itemStyle: { color: '#00FF30' }, },
                                    { value: 580, name: '满意',itemStyle: { color: '#37DE9E' }, },
                                    { value: 484, name: '基本满意',itemStyle: { color: '#31C1FA' }, },
                                ]
                                }
                            ]
                };
                myChart.setOption(option);
        },
        filterTag(value, row) {
               return row.status === value;
        },
        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('gzhchart'));
              var option = {
                            // color: ['#3BFFE8', '#3DB7FF','#EEA500','#ACB6B9','#ACB6B9','#ACB6B9'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                top: '5%',
                                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',
                                        barWidth:10,
                                        data: [10, 9, 8, 7, 5, 6],
                                        itemStyle: {
                                                normal: {
                                                      color: ['#3BFFE8', '#3DB7FF','#EEA500','#ACB6B9','#ACB6B9','#ACB6B9'],
                                                }
                                        }
                                },
                            ]
                            };
                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');
                       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');
                  });

         }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
 .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;
       }
.dayCount{
          background: url("~@/assets/images/public/dayCount.png") no-repeat;
          background-size: 100% 100%;
          width:14.6rem;
          height:11.3rem;
          margin-left:3.5rem;
          margin-top:1rem;
        //   display: inline-flex;
          font-size: 2.8rem;
          font-family: Myriad Pro;
          font-weight: bold;
          color: #1AFF62;
          text-align: center
          // display: inline-flex;
}
.wordCount{
          background: url("~@/assets/images/public/wordCount.png") no-repeat;
          background-size: 100% 100%;
          width:14.6rem;
          height:11.3rem;
          margin-left:1.5rem;
          margin-top:1rem;
        //   display: inline-flex;
          font-size: 2.8rem;
          font-family: Myriad Pro;
          font-weight: bold;
          color: #1AFCFF;
          text-align: center
}
.dayClass{
          background: url("~@/assets/images/public/dayClass@2x.png") no-repeat;
          background-size: 100% 100%;
          width:10.8rem;
          height:3.2rem;
          margin-left:3.5rem;
          margin-top:1rem;
          font-size: 14px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #DFEEF3;
          line-height: 3.2rem;
          text-align: center
}
.wordClass{
          background: url("~@/assets/images/public/wordClass@2x.png") no-repeat;
          background-size: 100% 100%;
          width:10.8rem;
          height:3.2rem;
          margin-left:3.5rem;
          margin-top:1rem;
          font-size: 14px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #DFEEF3;
          line-height: 3.2rem;
          text-align: center
}
.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>