使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

最新推荐文章于 2024-05-30 08:53:30 发布

w844916072

最新推荐文章于 2024-05-30 08:53:30 发布

阅读量2.9k

点赞数

分类专栏： three.js

原文链接：https://www.cnblogs.com/yeyunfei/p/11579334.html

版权

three.js 专栏收录该内容

13 篇文章 43 订阅

订阅专栏

<!DOCTYPE html>
<html style="padding:0px;margin:0px;">
<head>
    <style>
        body {
            /*background: linear-gradient(to top right, #000000 0%, #001925 60%, #003a73 100%);*/
            padding: 0px;
            margin: 0px;
            background: url(../img/bg2.jpg) center center/100% 100% no-repeat fixed;
            background-size: 100% 100%;
        }

        #toolbar {
            display: none;
        }

        .canvas_frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            overflow: hidden;
        }

        .toolbar {
            display: block;
            position: absolute;
            left: 10px;
            top: 75px;
            width: 32px;
            height: auto;
            background: rgba(73, 178, 195, 0.34902);
            border-radius: 5px;
            padding: 5px;
        }

            .toolbar img {
                float: left;
                margin: 5px;
                width: 24px;
                height: 24px;
                pointer-events: auto;
                cursor: pointer;
            }

        .Stats_output {
            display: block;
            position: absolute;
            border-radius: 5px;
            padding: 5px;
        }

        #canvas-frame > canvas {
            border-top-left-radius: 7px;
            border-bottom-right-radius: 7px;
            border-top-right-radius: 7px;
            border-bottom-left-radius: 7px;
        }

        .WT3dShowBoxClass {
            box-shadow: inset 0px 0px 18px rgb(204, 234, 255) !important;
            background: rgba(3, 62, 84, 0.75) !important;
            -moz-border-radius: 5px !important;
            -webkit-border-radius: 5px !important;
            border: 1px solid #fff !important;
            color: white !important;
        }

            .WT3dShowBoxClass .layui-layer-title {
                background: rgba(255, 255, 255, 0) !important;
                border-bottom: 1px solid rgba(238, 238, 238, 0.12) !important;
                color: white !important;
            }

            .WT3dShowBoxClass .layui-layer-setwin .layui-layer-ico.layui-layer-close.layui-layer-close1 {
                background: url(/css/layer/skin/default/close_16.png) no-repeat !important;
            }

        .table {
            width: 100%;
        }

            .table th {
                text-align: center;
                background-color: rgba(0,0,0,0.1);
                line-height: 30px;
                font-size: 18px;
            }

            .table td {
                text-align: center;
                line-height: 32px;
                font-size: 18px;
            }

        .layui-layer {
            background: rgba(16, 40, 104, 0.9) !important;
            box-shadow: none !important;
        }

        .cabDetail {
            color: #00edfb;
        }

        .layui-layer-title {
            padding: 0 80px 0 20px;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #0096ff !important;
            font-size: 22px !important;
            color: #acfaff !important;
            overflow: hidden;
            background-color: rgba(17, 79, 152, 0.6) !important;
            border-radius: 2px 2px 0 0;
        }
        .layui-layer-content {
        color:white;
        }
    </style>
    <title></title>
    <meta charset="utf-8" />

    <link href="/css/iconfont.css" rel="stylesheet" />
    <link href="../plugs/layer/layui/css/layui.css" rel="stylesheet" />
    <link href="../css/animate.css" rel="stylesheet" />
    <link href="../css/stylesnew.css" rel="stylesheet" />
    <link href="../plugs/jquery.mCustomScrollbar.css" rel="stylesheet" />
    <script src="../plugs/jquery-2.2.2.js"></script>
    <script src="../plugs/jquery.mCustomScrollbar.js"></script>
    <script src="../plugs/layer/layer.js"></script>
    <script src="../plugs/layer/laydate/laydate.js"></script>
    <script src="../plugs/layer/layui/layui.js"></script>
    <script src="../js/commonFunction.js"></script>
    <script src="../js/h5Player/h5Video.js"></script>
    <script src="../plugs/three/Three.min.js"></script>
    <script src="../plugs/three/html2canvas.min.js"></script>
    <script src="../plugs/three/Detector.js"></script>
    <script src="../plugs/three/OrbitControls.js"></script>
    <script src="../plugs/three/TransformControls.js"></script>
    <script src="../plugs/three/stats.min.js"></script>
    <script src="../js/indexnew.js"></script>
    <script src="../js/models/build.js"></script>
    <script src="../js/modelBusiness.js"></script>
    <script src="../js/initPage.js"></script>
    <script src="../plugs/jquery.singalr.js"></script>
    <script src="../plugs/echarts.min.js"></script>
</head>


<body id="mainBody" onload="threeStart(0);" style="padding:0px;margin:0px;">
    <script>
        if (!Detector.webgl) {
            layer.alert("您的浏览器不支持3D功能,请使用支持WebGL的浏览器（例如：chrome浏览器、ie11以上浏览器等）");
        }
    </script>

    <div class="headerbg">
        <h2 id="indexHead" style="text-align:center;width:600px;height:70px ;margin: auto;
    position: absolute;
    top: 0;
    left: 0;letter-spacing: 8px;
    bottom: 0;line-height: 70px;
    right: 0;cursor:pointer;">
            园区三维综合展示平台
        </h2>
        <div class="datebox">
            <img src="../img/icon-time.png" class="icontime" />
            <p class="timeP" id="timeP">2019.03.26 14:30</p>
        </div>
        <div class="dutylist">
            <img src="../img/icon-person.png" class="iconperson" title="点击换肤" alt="点击换肤" style="cursor:pointer;" id="personClick"/>
            <span>登录用户名：</span>
            <ul id="list_scroll" class="list_scroll">
                <li>admin&nbsp;&nbsp;&nbsp;&nbsp;退出</li>
            </ul>
        </div>
    </div>

    
    <div id="dataCanvasList" style="position:absolute;z-index:-1;display:none;width:5px;height:5px;overflow:auto;"><div style="width:10px;height:10px;float:left;position:relative;"></div></div>
    <div id="canvas-frame" class="canvas_frame"></div>
    <div class="staticDivBg" style="left:10px;top:80px;">
        <div class="staticContent" style="width:400px;height:260px;margin:12px;margin-left:20px;margin-right:20px; ">
            <div class="staticTitle">
                智慧园区-基础信息
            </div>
            <div id="infoData01" class="staticDataContent" style="height:220px;">

            </div>
        </div>
    </div>
    <div class="staticDivBg" style="left:10px;top:400px;">
        <div class="staticContent" style="width:400px;height:260px;margin:12px;margin-left:20px;margin-right:20px; ">
            <div class="staticTitle">
                智慧安防-远程监控
            </div>
            <div id="infoData02" class="staticDataContent" style="height:200px;">
            </div>
        </div>
    </div>

    <div class="staticDivBg" style="left:10px;bottom:40px;">
        <div class="staticContent" style="width:700px;height:200px;margin:12px;margin-left:30px;margin-right:22px; ">
            <div class="staticTitle" style="width:40%;margin-left:6%;">
                智慧供电-能耗统计
            </div>
            <div id="infoData03" class="staticDataContent" style="float:left;height:180px;width:70%">

            </div>
            <div id="infoData03_1" class="staticDataContent" style="float:left;height:180px;width:29%">
                非法闯入告警
            </div>
        </div>
    </div>
    <div class="staticDivBg" style="right:10px;bottom:10px;">
        <div class="staticContent" style="width:800px;height:240px;margin:12px;margin-left:40px;margin-right:30px; ">
            <div class="staticTitle" style="width:30%;margin-left:8%;">
                智慧安防-人员抓拍
            </div>
            <div class="subTitle" >
                识别抓拍
                <span>0</span>
                <span>0</span>
                <span>8</span>
                <span>1</span>
                个
            </div>
            <div id="infoData06" class="staticDataContent" style="height:180px;width:70%">
                <table>
                    <tr><td style="width:220px;padding:10px;">
                        <img src="../img/data/zp1.png" style="width:175px;height:150px;" /></td>
                        <td style="width:220px;padding:10px;"><img src="../img/data/zp2.png" style="width:175px;height:150px;" /></td>
                        <td style="width:220px;padding:10px;"><img src="../img/data/zp3.png" style="width:175px;height:150px;" /></td>
                        <td  style="width:220px;padding:10px;"><img src="../img/data/zp4.gif" style="width:175px;height:150px;" /></td>
                      </tr>
                    <tr><td style="text-align:center;color:#ff9128;font-size:16px;">1128抓拍-可疑人物</td>
                        <td  style="text-align:center;color:#ff9128;font-size:16px;">0856抓拍-可疑人物</td>
                        <td  style="text-align:center;color:#ff9128;font-size:16px;">2442抓拍-可疑人物</td>
                        <td style="text-align:center;color:#ff3300;font-size:16px;">0453抓拍-可疑尾随</td></tr>
                </table>
            </div>
        </div>
    </div>
    <div class="staticDivBg" style="right:10px;top:80px;">
        <div class="staticContent" style="width:400px;height:560px;margin:25px;margin-left:20px;margin-right:20px; ">
            <div class="staticTitle">
                智能设备-设备运维
            </div>
            <div id="infoData05" class="staticDataContent" style="height:520px;">
                <div>
                </div>
            </div>
        </div>
    </div>


    <div id="dengganTitle" class='devInfo dleft'>
        </br>1</br>号</br>楼
    </div>

    <div id="video1" class='devInfo dleft'>
        <video autoplay loop style="width:290px;height:190px;margin:5px;background:black;">
            <source src="../img/video/v2.mp4" type="video/mp4" />
        </video>
       
    </div>

    <div id="wbjcy" class='devInfo dleft'>
        <table>
            <tr><td colspan="4" class="title">微波检测仪</td></tr>
            <tr><td class="tdKey" style="width:80px;">状态:</td><td class="tdvalue">在线</td>
                <td class="tdKey" style="width:80px;">工作状态:</td><td class="tdvalue">运行中</td></tr>
            <tr><td class="tdKey">信号强度:</td><td class="tdvalue">强</td><td class="tdKey">供电电压:</td><td class="tdvalue">在线</td></tr>
            <tr><td class="tdKey">运行电流:</td><td class="tdvalue">在线</td><td class="tdKey">车道占用率</td><td class="tdvalue">57%</td></tr>
            <tr><td class="tdKey">交通流量:</td><td class="tdvalue">158</td><td class="tdKey">平均车速</td><td class="tdvalue">46KM/h</td></tr>
        </table>
    </div>
    <div id="daping" class='devInfo dleft'>
        <table>
            <tr><td colspan="4" class="title">大屏设备</td></tr>
            <tr><td class="tdKey">状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">播放中</td></tr>
            <tr><td class="tdKey">温度:</td><td class="tdvalue">37℃</td><td class="tdKey">供电电压:</td><td class="tdvalue">220V</td></tr>
            <tr><td class="tdKey">运行电流:</td><td class="tdvalue">2.5A</td><td class="tdKey">状态:</td><td class="tdvalue">在线</td></tr>
            <tr><td class="tdKey">运行时间:</td><td class="tdvalue">56分钟</td><td class="tdKey">运行状态:</td><td class="tdvalue">正常</td></tr>
        </table>
    </div>

    <div id="yjbj" class='devInfo dleft'>
        <table>
            <tr><td colspan="4" class="title">一键报警</td></tr>
            <tr><td class="tdKey">设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">待机</td></tr>
            <tr><td class="tdKey">信号强度:</td><td class="tdvalue">强</td><td class="tdKey">供电电压:</td><td class="tdvalue">12V</td></tr>
            <tr><td class="tdKey">运行电流:</td><td class="tdvalue">1.5A</td><td class="tdKey">使用次数:</td><td class="tdvalue">0</td></tr>
            <tr><td class="tdKey">链路公安:</td><td class="tdvalue" colspan="3">南山西丽二分局报警系统</td></tr>
       </table>
    </div>

    <div id="wifi" class='devInfo'>
        <table>
            <tr><td colspan="4" class="title">5G基站&WIFI</td></tr>
            <tr><td class="tdKey" >设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">运行中</td></tr>
            <tr><td class="tdKey">上行:</td><td class="tdvalue">848KB</td><td class="tdKey">下行:</td><td class="tdvalue">1546MB</td></tr>
            <tr><td class="tdKey">人均带宽:</td><td class="tdvalue">128MB</td><td class="tdKey"></td><td class="tdvalue"></td></tr>
        </table>
    </div>
    <div id="hj" class='devInfo'>
        <table>
            <tr><td colspan="4" class="title">环境设备</td></tr>
            <tr><td class="tdKey" style="width:60px;">状态:</td><td class="tdvalue">在线</td>
                <td class="tdKey" style="width:60px;">工作状态:</td><td class="tdvalue">采集中</td></tr>
            <tr><td class="tdKey">空气质量:</td><td class="tdvalue">优</td><td class="tdKey">噪音:</td><td class="tdvalue">68分贝</td></tr>
            <tr><td class="tdKey">温湿度:</td><td class="tdvalue">26℃/75%</td><td class="tdKey">风向风速:</td><td class="tdvalue">东南三级</td></tr>
            <tr><td class="tdKey">PM2.5:</td><td class="tdvalue">34</td><td class="tdKey">扬尘:</td><td class="tdvalue">无</td></tr>
        </table>
    </div>
    <div id="video2" class='devInfo'>
        <video autoplay loop style="width:290px;height:190px;margin:5px;background:black;">
            <source src="../img/video/v1.mp4" type="video/mp4" />
        </video>
    </div>
    <div id="cdz" class='devInfo'>
        <table>
            <tr><td colspan="4" class="title">充电桩</td></tr>
            <tr><td class="tdKey">设备状态:</td><td class="tdvalue">在线</td><td class="tdKey">工作状态:</td><td class="tdvalue">闲置</td></tr>
            <tr><td class="tdKey">供电电压:</td><td class="tdvalue">220V</td><td class="tdKey"> 运行电流:</td><td class="tdvalue">1.5A</td></tr>
        </table>
    </div>
    <div id="fsu" class='devInfo'>
        <table>
            <tr><td colspan="6" class="title">网关设备</td></tr>
            <tr><td class="tdKey" >状态:</td><td class="tdvalue">在线</td>
                <td class="tdKey">通讯方式:</td><td class="tdvalue">TCP/IP</td>
                <td class="tdKey"></td><td class="tdvalue"></td></tr>
            <tr>
                <td class="tdKey">CPU:</td>
                <td class="tdvalue">46.5%</td>
                <td class="tdKey">CPU温度:</td>
                <td class="tdvalue">59.3℃</td>
                <td class="tdKey">内存:</td>
                <td class="tdvalue">51%</td>
            </tr>
            <tr>
                <td class="tdKey">输入电压:</td>
                <td class="tdvalue">220V</td>
                <td class="tdKey">功率:</td>
                <td class="tdvalue">26KW</td>
                <td class="tdKey">厂家:</td>
                <td class="tdvalue">麦斯杰</td>
            </tr>
            <tr><td colspan="6" class="title">&nbsp;</td></tr>
            <tr><td colspan="6" class="title">智慧照明</td></tr>
            <tr>
                <td class="tdKey">电压:</td>
                <td class="tdvalue">380V</td>
                <td class="tdKey">电流:</td>
                <td class="tdvalue">2.5A</td>
                <td class="tdKey">故障率:</td>
                <td class="tdvalue">0.01%</td>
            </tr>
        </table>
    </div>
   <script>
        $(document).ready(function () {
            showLoading(getBuildData().length, null, function () {
           
            });
        });
    </script>
</body>


</html>

主页面数据逻辑代码

$(function () {
    var scroll_area = $('#list_scroll');
    function scrolllist() {
        var timespan = 3000,
            timer;
        scroll_area.hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(function () {
                var moveline = scroll_area.find('li:first');
                var lineheight = 44;
                moveline.animate({
                    marginTop: -lineheight + 'px'
                }, 600, function () {
                    moveline.css('marginTop', 0).appendTo(scroll_area);
                });
            }, timespan);
        }).trigger('mouseleave');
    }
    if (scroll_area.find('li').length > 1) {
        scrolllist();
    }

    //系统时间
    var otimeP = document.getElementById('timeP');
    setInterval(fnTime, 1000);
    fnTime();
    function fnTime() {
        var myTime = new Date();
        var iYear = myTime.getFullYear();
        var iMonth = myTime.getMonth() + 1;
        var iDate = myTime.getDate();
        var iHours = myTime.getHours();
        var iMin = myTime.getMinutes();
        var iSec = myTime.getSeconds();
        var str = '';
        str = iYear + '.' + toTwo(iMonth) + '.' + toTwo(iDate) + ' ' + toTwo(iHours) + ' : ' + toTwo(iMin) + ' : ' + toTwo(iSec);
        otimeP.innerHTML = str;
    }
    function toTwo(n) {
        return n < 10 ? '0' + n : '' + n;
    }
    indexPage = new IndexPage();
    indexPage.init();
    for (var i = 1; i <= 6; i++) {
        if (window["System0" + i]) {
            window["system0" + i] = new window["System0" + i]();
            window["system0" + i].init();
        }
    }
});
function IndexPage() {
    this.init();
};
IndexPage.prototype.init = function () {
    this.info01();
    this.info02();
    this.info03();
    this.info0301();
    this.infoRight05();
}
//事件绑定
IndexPage.prototype.bindEvents = function () {



}
//显示统计信息
IndexPage.prototype.showStaticInfos = function () {
    
}
//左上
IndexPage.prototype.info01 = function () {
    var myChart = echarts.init(document.getElementById("infoData01"));
    var option = {
        "normal": {
            "top": 200,
            "left": 300,
            "width": 500,
            "height": 400,
            "zIndex": 6,
            "backgroundColor": ""
        },
        "color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        "tooltip": {
            "show": true,
            "trigger": "item"
        },
        "legend": {
            "show": true,
            "icon": "circle",
            "left": "43%",
            "top": "90%",
            "orient": "horizontal",
            "textStyle": {
                "fontSize": 12,
                "color": "#fff"
            },
            "data": ["正常指标", "实际指标"]
        },
        "radar": {
            "center": ["50%", "45%"],
            "radius": "70%",
            "startAngle": 90,
            "splitNumber": 4,
            "shape": "polygon",
            name: {
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: '#0d6dba',
                    opacity: 0.1
                }
            },
            "axisLabel": {
                "show": false,
                "fontSize": 12,
                "color": "#fff",
                "fontWeight": "normal"
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#4f8bbe',
                    opacity: 1
                }
            },
            splitLine: {

                lineStyle: {
                    color: '#4f8bbe',
                    opacity: 0.5
                }
            },
            "indicator": [{
                "name": "CO",
                "max": 88
            }, {
                "name": "CO₂",
                "max": 88
            }, {
                "name": "NO",
                "max": 88
            }, {
                "name": "H₂S",
                "max": 88
            }, {
                "name": "O₄",
                "max": 88
            }, {
                "name": "SF6",
                "max": 88
            }, {
                "name": "CH",
                "max": 88
            }]
        },
        "series": [{
            "name": "正常指标",
            "type": "radar",
            "symbol": "circle",
            "symbolSize": 10,
            "areaStyle": {
                "normal": {
                    "color": "rgba(245, 166, 35, 0.4)"
                }
            },
            itemStyle: {
                color: 'rgba(245, 166, 35, 1)',
                borderColor: 'rgba(245, 166, 35, 0.3)',
                borderWidth: 10,
            },
            "lineStyle": {
                "normal": {
                    "type": "dashed",

                    "color": "rgba(245, 166, 35, 1)",
                    "width": 2
                }
            },
            "data": [
                [80, 50, 55, 80, 50, 80, 48]
            ]
        }, {
            "name": "实际指标",
            "type": "radar",
            "symbol": "circle",
            "symbolSize": 10,
            "itemStyle": {
                "normal": {
                    color: 'rgba(19, 173, 255, 1)',
                    "borderColor": "rgba(19, 173, 255, 0.4)",
                    "borderWidth": 10
                }
            },
            "areaStyle": {
                "normal": {
                    "color": "rgba(19, 173, 255, 0.5)"
                }
            },
            "lineStyle": {
                "normal": {
                    "color": "rgba(19, 173, 255, 1)",
                    "width": 2,
                    "type": "dashed"
                }
            },
            "data": [
                [60, 60, 65, 60, 70, 40, 80]
            ]
        }]
    };
    myChart.setOption(option);
}
//左中
IndexPage.prototype.info02=function(){
    var myChart = echarts.init(document.getElementById("infoData02"));
    var option = option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '2%',
            containLabel: true
        },
        yAxis: [{
            type: 'value',
            axisLabel: {
                interval: 0,
                color: '#d3e0fa'
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['一键报警', '事故', '违章', '其它'],
            axisLabel: {
                interval: 0,
                color: '#d3e0fa',
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitArea: {
                show: false,
                //  areaStyle: {
                //      color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                //  }
            }
        }],
        series: [{
            type: 'pictorialBar',
            symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
            data: [320, 341, 374, 390],
            barWidth: '50%',
            // barGap: 1, //柱子之间间距
            symbolOffset: [0, -15],
            //                    xAxisIndex: 0,
            //                    yAxisIndex: 0,
            z: 99,
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 24,
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(51,189,216,0.3)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(51,189,216,0.3)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(51,189,216,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(51,189,216,1)'
                    }]),
                    opacity: 1,
                }
            }
        },
            {
                name: '年报上报率2',
                type: 'pictorialBar',
                symbol: 'diamond',
                barWidth: '50%',
                symbolSize: ['100%', 30],
                // symbolOffset: [0, 13],
                //                    xAxisIndex: 0,
                //                    yAxisIndex: 0,
                z: 99,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
                            offset: 0,
                            color: 'rgba(51,189,216,0.8)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(51,189,216,0.8)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(51,189,216,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(51,189,216,1)'
                        }]),
                        opacity: 1,
                    }
                },
                data: [320, 302,  374, 390],
            }
        ]
    };;
    myChart.setOption(option);
}
//左下
IndexPage.prototype.info03 = function () {
    var myChart = echarts.init(document.getElementById("infoData03"));
    var fontColor = '#30eee9';
    option = {
        grid: {
            left: '5%',
            right: '10%',
            top: '20%',
            bottom: '15%',
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'item'
        },
        legend: {
            show: true,
            x: 'center',
            y: '35',
            icon: 'stack',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: '#1bb4f6'
            },
            data: ['充电', '安防', '照明']
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: fontColor
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#397cbc'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '万Kw.h',
                min: 0,
                max: 1000,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#2ad1d2'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#27b4c2'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#11366e'
                    }
                }
            },
             
        ],
        series: [
            {
                name: '充电',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#0092f6',
                        lineStyle: {
                            color: "#0092f6",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,146,246,0.9)'
                            }]),
                        }
                    }
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210, 182, 191]
            },
            {
                name: '安防',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,

                itemStyle: {
                    normal: {
                        color: '#00d4c7',
                        lineStyle: {
                            color: "#00d4c7",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,212,199,0.9)'
                            }]),
                        }
                    }
                },
                data: [220, 182, 191, 234, 290, 330, 310, 201, 154]
            },
            {
                name: '照明',
                type: 'line',
                stack: '总量',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color: '#aecb56',
                        lineStyle: {
                            color: "#aecb56",
                            width: 1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(114,144,89,0.9)'
                            }]),
                        }
                    }
                },
                data: [150, 232, 201, 154, 190, 330, 410, 150, 232,]
            }
        ]
    };
    myChart.setOption(option);

}
//左下
IndexPage.prototype.info0301 = function () {
    var myChart = echarts.init(document.getElementById("infoData03_1"));
    var fontColor = '#30eee9';
    var option = {


        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '能耗统计',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [{
                value: 285,
                name: '安防'
            },
                {
                    value: 410,
                    name: '照明'
                },
                {
                    value: 274,
                    name: '充电'
                },
                {
                    value: 235,
                    name: '其它'
                }
            ].sort(function (a, b) {
                return a.value - b.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: 'rgb(241,246,104)',
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 12,
                            height: 40
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowBlur: 50,
                }
            }
        }]
    };
    myChart.setOption(option);

}

//右上
IndexPage.prototype.infoRight05 = function () {
    var myChart = echarts.init(document.getElementById("infoData05"));
    var option = {
        title: {
            text: '设备总数',
            textStyle: {
                color: "#fff",
                fontSize: 16
            },
            top: "20%",
            left: "center"
        },
        textStyle: {
            fontSize: 12
        },
        series: [{
            name: '辅助饼图最外层',
            type: 'pie',
            radius: '70%',
            z: -1,
            center: ["50%", "32%"],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: "rgba(0,0,0,0.35)"
                }
            },
            data: [{
                value: 1,
                name: '辅助饼图最外层'
            }]
        },
        {
            name: '辅助饼图黑色',
            type: 'pie',
            radius: '8%',
            center: ["50%", "32%"],
            z: 3,
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'radial',
                        x: 0.1,
                        y: -0.1,
                        r: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#DDDDDD' // 0% 处的颜色
                        }, {
                            offset: 0.7,
                            color: '#1B1811' // 50% 处的颜色
                        }, {
                            offset: 0.71,
                            color: '#1B1811' // 51% 处的颜色
                        }, {
                            offset: 1,
                            color: '#1B1811' // 100% 处的颜色
                        }],
                        globalCoord: true // 缺省为 false
                    }
                }
            },
            data: [{
                value: 1,
                name: '辅助饼图黑色'
            }],
        },
        {
            name: '辅助饼图红色',
            type: 'pie',
            radius: '4%',
            z: 4,
            center: ["50%", "32%"],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: "#E50505"
                }
            },
            data: [{
                value: 1,
                name: '辅助饼图红色'
            }],
        },
        {
            name: '', //大仪表盘左侧
            type: 'gauge',
            min: 0,
            max: 1000,
            z: 2,
            radius: '65%',
            center: ["50%", "32%"],
            startAngle: 130,
            endAngle: 230,
            splitNumber: 5,
            clockwise: false,
            animation: false,
            detail: {
                show: false
            },
            data: [{
                value: 0,
                name: ''
            }],
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [1, 'red']
                    ],
                    width: 0
                }
            },
            splitLine: {
                length: 15,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                lineStyle: {
                    color: 'red',
                    width: 2
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
                formatter: function (e) {
                    return e.toFixed(0);
                }
            },
            itemStyle: {
                normal: {
                    color: '#E50505'
                }
            },
            pointer: {
                width: 0
            }
        },
        {
            name: '', //大仪表盘右侧
            type: 'gauge',
            min: 1800,
            max: 2800,
            z: 2,
            radius: '65%',
            center: ["50%", "32%"],
            startAngle: -50,
            endAngle: 50,
            splitNumber: 5,
            clockwise: false,
            animation: false,
            detail: {
                show: false
            },
            data: [{
                value: 0,
                name: ''
            }],
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [1, 'red']
                    ],
                    width: 0
                }
            },
            splitLine: {
                length: 15,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                lineStyle: {
                    color: 'red',
                    width: 2
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#fff",
                },
                formatter: function (e) {
                    return e.toFixed(0);
                }
            },
            itemStyle: {
                normal: {
                    color: '#E50505'
                }
            },
            pointer: {
                width: 0
            }
        },
        {
            name: '异常设备', //大仪表盘(控制指针指向)
            type: 'gauge',
            min: 0,
            max: 2800,
            z: 2,
            radius: '70%',
            center: ["50%", "32%"],
            startAngle: -50,
            endAngle: 230,
            splitNumber: 8,
            clockwise: false,
            animation: false,
            detail: {
                textStyle: {
                    fontSize: 24,
                    color: '#f00'
                },
                // backgroundColor: "rgba(0,0,0,0.35)",
                offsetCenter: [0, '60%'],
                borderRadius: 1,
                formatter: function (e) {
                    let eStr = e + '';
                    let eArr = eStr.split('');
                    let len = eArr.length;
                    let str = '';
                    for (let i = 0; i < len - 1; i++) {
                        str += '{per|' + eArr[i] + '} ';
                    }
                    return str + '{per|' + eArr[len - 1] + '}';
                },
                rich: {
                    per: {
                        color: '#fff',
                        backgroundColor: '#f00',
                        padding: [3, 3, 3, 3],
                        borderRadius: 5,
                        //borderColor: '#aaa',
                        borderWidth: 1,
                        fontSize: 24,
                        fontStyle: 'bold'
                    }
                }
            },
            data: [{
                value: 1988,
                name: ''
            }],
            axisLine: {
                show: false,
                lineStyle: {
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ],
                    width: 0
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: '#E50505'
                }
            },
            pointer: {
                width: 2
            } //大仪表盘指针
        }, {
            name: '小仪表盘辅助饼图最外层',
            type: 'pie',
            radius: '50%',
            z: -2,
            startAngle: 30,
            center: ["50%", "70%"],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: { //设置半月形饼图
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: -0.16,
                        r: 1.13,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0,0,0,0)' // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: 'rgba(0,0,0,0)' // 60% 处的颜色
                        }, {
                            offset: 0.61,
                            color: 'rgba(0,0,0,0.35)' // 61% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(0,0,0,0.35)' // 100% 处的颜色
                        }],
                        globalCoord: true // 缺省为 false
                    }
                }
            },
            data: [{
                value: 1,
                name: '小仪表盘辅助饼图最外层'
            }],
        }, {
            name: '', //小仪表盘最外层显示刻度标签
            type: 'gauge',
            min: 0,
            max: 100,
            z: 2,
            radius: '55%',
            center: ["50%", "70%"],
            startAngle: 0,
            endAngle: -180,
            splitNumber: 5,
            clockwise: false,
            animation: false,
            detail: {
                textStyle: {
                    fontSize: 20,
                    color: '#fff'
                },
                // backgroundColor: "rgba(0,0,0,0.35)",
                offsetCenter: [0, '-30%'],
                borderRadius: 1,
                formatter: function (e) {
                    return '异常设备';
                }
            },
            data: [{
                value: 27,
                name: ''
            }],
            axisLine: {
                lineStyle: {
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ],
                    width: 0
                }
            },
            splitLine: {
                length: 15,
                lineStyle: {
                    color: 'rgba(0,0,0,0)',
                    width: 2
                }
            },
            axisTick: {
                lineStyle: {
                    color: 'rgba(0,0,0,0)',
                    width: 2
                }
            },
            axisLabel: {
                textStyle: {
                    color: "#fff",
                },
                formatter: function (e) {
                    return e;
                }
            },
            pointer: {
                width: 0
            }
        }, {
            name: '', //小仪表盘显示轴线及刻度
            type: 'gauge',
            min: 0,
            max: 100,
            z: 2,
            radius: '40%',
            center: ["50%", "70%"],
            startAngle: 0,
            endAngle: -180,
            splitNumber: 5,
            clockwise: false,
            animation: false,
            detail: {
                textStyle: {
                    fontSize: 24,
                },
                backgroundColor: "#f00",
                offsetCenter: [0, '10%'],
                borderRadius: 10,
                formatter: function (e) {
                    return e + "%";
                }
            },
            data: [{
                value: 27,
                name: ''
            }],
            axisLine: {
                lineStyle: {
                    color: [
                        [1, '#fff']
                    ],
                    width: 0
                }
            },
            splitLine: {
                length: 15,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                lineStyle: {
                    color: 'red',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: '#E50505'
                }
            },
            pointer: {
                width: 3
            }
        }]
    };
    myChart.setOption(option);
}
//右下
IndexPage.prototype.infoRight06 = function () {
   //infoData06

}
IndexPage.prototype.showDevInfo = function () {

    this.hideStaticDiv();
    $(".devInfo").show(1000);
    setTimeout(function () {
        indexPage.showVideo1();
        indexPage.showVideo2();
        indexPage.wifi();
        indexPage.hj();
        indexPage.wbjcy();
        indexPage.dp();
        indexPage.yjbj();
        indexPage.cdz();
        indexPage.FSU();
    }, 1000);
   
}

IndexPage.prototype.hideDevInfo = function () {
    $(".devInfo").hide(1000);

}

//显示视频
IndexPage.prototype.showVideo1 = function () {
    
    var wsPlayer = new WSPlayer("videoPlayer_1", {
        modules: [
            {
                client: RTSPClient,
                transport: {
                    constructor: WebsocketTransport,
                    options: {
                        socket: "ws://39.108.139.152:2555/ws/rtsp"
                    }
                }
            }
        ]
    });
    wsPlayer.setSource("rtsp://39.108.139.152:2554/stream/live/205967/10001?token=ZGV2R0JJRDozNDAyMDAwMDAwMTMyMDAwMTE3MA0Kb2JqSWQ6MjA1OTY3DQp1cmw6TVNDUDovLzIwNTk2Ny9zdHJlYW0/c3ViVHlwZT1HQl9UMjgxODE=");
}
IndexPage.prototype.showVideo2 = function () {


    var wsPlayer = new WSPlayer("videoPlayer_2", {
        modules: [
            {
                client: RTSPClient,
                transport: {
                    constructor: WebsocketTransport,
                    options: {
                        socket: "ws://39.108.139.152:2555/ws/rtsp"
                    }
                }
            }
        ]
    });
    wsPlayer.setSource("rtsp://39.108.139.152:2554/stream/live/205428/10001?token=ZGV2R0JJRDozNDAyMDAwMDAwMTMyMDAwMDk5MQ0Kb2JqSWQ6MjA1NDI4DQp1cmw6TVNDUDovLzIwNTQyOC9zdHJlYW0/c3ViVHlwZT1HQl9UMjgxODE=", "rtsp");
}
//wifi
IndexPage.prototype.wifi = function () {
    
}
//环境
IndexPage.prototype.hj = function () {

}
//微波检测仪
IndexPage.prototype.wbjcy = function () {

}
//大屏
IndexPage.prototype.dp = function () {

}
//一键报警
IndexPage.prototype.yjbj = function () {
}
//充电桩
IndexPage.prototype.cdz = function () {
}
//FSU
IndexPage.prototype.FSU = function () {
}

//隐藏所有统计信息
IndexPage.prototype.hideStaticDiv = function () {
    $(".staticDivBg").hide(1000);

}
IndexPage.prototype.showStaticDiv = function () {
    $(".staticDivBg").show(1000);
}

var indexPage = null;

由于篇幅原因，这一课先介绍到这里

后面我将继续讲解用webgl 建立 3D隧道、3D桥梁、webgl实现三维隧道桥梁、three.js实现三维隧道桥梁、桥梁隧道三维应用炫酷效果等等

需要交流可邮件：844916072#qq.com

w844916072

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

<!DOCTYPE html><html style="padding:0px;margin:0px;"><head> <style> body { /*background: linear-gradient(to top right, #000000 0%, #001925 60%, #003a...
复制链接

扫一扫