大屏前端部分修改

assets/js/config.router.js

@@ -191,7 +191,7 @@ app.config(['$authProvider', '$httpProvider', '$stateProvider', '$urlRouterProvi
         // $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
         // For any unmatched url, redirect to /app/dashboard
         // $urlRouterProvider.otherwise("/app/knowledge/forum");
-        $urlRouterProvider.otherwise("/login/signin");
+        $urlRouterProvider.otherwise("/login/charts3");
         //
         // Set up the states
         $stateProvider.state('app', {
@@ -2163,7 +2163,8 @@ app.config(['$authProvider', '$httpProvider', '$stateProvider', '$urlRouterProvi
             }).state('login.charts3', {
                 url: '/charts3',
                 templateUrl: "assets/views/charts3.html",
-                resolve: loadSequence('jquery-sparkline', 'ui.select', 'multi.select.tree', 'angularBootstrapNavTree', 'spin', 'ladda', 'angular-ladda', 'moment', 'charts3Ctrl','heatmap'),
+                // resolve: loadSequence('jquery-sparkline', 'ui.select', 'multi.select.tree', 'angularBootstrapNavTree', 'spin', 'ladda', 'angular-ladda', 'moment', 'charts3Ctrl','heatmap'),
+                resolve: loadSequence('moment', 'charts3Ctrl'),
             }).state('login.charts4', {
                 url: '/charts4',
                 templateUrl: "assets/views/charts4.html",

assets/js/controllers/charts3.js

@@ -935,7 +935,6 @@ app.controller('charts3Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$i
 
     function getAreaMonthListData(time, inter) {
         api_hkreport.incidentreport(time, 'large_screen_areaplace_incident_details').then(function (res) {
-            console.log(res);
             $scope.areaMonthList = res.data;
             setTimeout(() => {
                 $scope.slides('body1', 'box8', 'box9', 'list5', 3, inter);
@@ -1031,6 +1030,8 @@ app.controller('charts3Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$i
     // 来电趋势/微信报修趋势...(页面数据轮播)
     $scope.slideBoxLeft = 0;
     $scope.slideBoxLeft1 = 0;
+    $scope.slideBoxLeft2 = 0;
+    $scope.slideBoxLeft3 = 0; //索引
 
     function move1() {
         if ($scope.slideBoxLeft == 0) {
@@ -1043,9 +1044,37 @@ app.controller('charts3Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$i
             $scope.slideBoxLeft1 = '-100%';
         } else if ($scope.slideBoxLeft1 == '-100%') {
             $scope.slideBoxLeft1 = '-200%';
+        } else if ($scope.slideBoxLeft1 == '-200%') {
+            $scope.slideBoxLeft1 = '-300%';
+        } else if ($scope.slideBoxLeft1 == '-300%') {
+            $scope.slideBoxLeft1 = '-400%';
+        } else if ($scope.slideBoxLeft1 == '-400%') {
+            $scope.slideBoxLeft1 = '-500%';
         } else {
             $scope.slideBoxLeft1 = 0;
         }
+
+        if ($scope.slideBoxLeft2 == 0) {
+            $scope.slideBoxLeft2 = '-100%';
+        } else if ($scope.slideBoxLeft2 == '-100%') {
+            $scope.slideBoxLeft2 = '-200%';
+        } else {
+            $scope.slideBoxLeft2 = 0;
+        }
+
+        if ($scope.slideBoxLeft3 >= 0) {
+            $scope.slideBoxLeft3++;
+            if($scope.slideBoxLeft3 == 6){
+                $scope.slideBoxLeft3 = 0;
+            }
+            // console.log($scope.slideBoxLeft3, '$scope.slideBoxLeft3')
+            if($scope.slideBoxLeft3 == 0 || $scope.slideBoxLeft3 == 1 || $scope.slideBoxLeft3 == 2){
+                $scope.cloudMap.goTo(114.41276, 30.51515, 1, 16);//主校区
+            }
+            if($scope.slideBoxLeft3 == 3 || $scope.slideBoxLeft3 == 4 || $scope.slideBoxLeft3 == 5){
+                $scope.cloudMap.goTo(114.254, 30.5855, 3, 16);//同济校区
+            }
+        }
     }
 
 
@@ -1200,6 +1229,150 @@ app.controller('charts3Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$i
     // 切屏
     setInterval(() => {
         move1()
-    }, 5000); //5秒
+    }, 15000); //15秒
+
+    // 获取地图token
+    api_hkreport.incidentreport({}, 'large_screen_incident_total').then(function (res) {
+        //#region 渲染地图--------------------start
+        //arcgis字体文件资质
+        //var arcgisFontUrl = "";
+        var is3d = false;
+        var username = "yunweixt20221207";
+        var addressToken =
+        "TGYnE2lw7X0RuR4cpJmCulyoRZnVgVW2XVfcQ08yHA-7x3SLMM1ByO6s12LUf63mliF8E6BRZvXDjiMq4CwpA5O0yp7ngbRAnoeZ1i3b2jhmPEMUchaHmmf4DCztMB6AHO5hA3mRHRSjJw8l7WZrPQ.."; //通过api获取
+
+        //点位聚合
+        // var reductionCustom = {
+        //     室内消火栓: {
+        //         clusterRadius: 100,
+        //         clusterMinSize: 28,
+        //         clusterMaxSize: 36,
+        //     },
+        //     图层名称2: {
+        //         clusterRadius: 100,
+        //         clusterMinSize: 28,
+        //         clusterMaxSize: 36,
+        //     },
+        // };
+        var reductionCustom = null;
+        // var layerColor = null;
+        var layerColor = {
+            baseMap: "dark",
+            floorMap: "dark",
+        };
+
+        $scope.$watch('$viewContentLoaded', function() {
+            console.log('viewContentLoaded');
+            $scope.cloudMap = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // $scope.cloudMap2 = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // $scope.cloudMap3 = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // $scope.cloudMap4 = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // $scope.cloudMap5 = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // $scope.cloudMap6 = Object.create(CloudMap); //页面加载完成后，创建map对象
+            // 主校区
+            $scope.cloudMap.initMap(
+                "viewDiv",
+                114.41276,
+                30.51515,
+                1,
+                username,
+                is3d,
+                addressToken,
+                null,
+                reductionCustom,
+                layerColor,
+                mapReady
+            );
+            // $scope.cloudMap2.initMap(
+            //     "viewDiv2",
+            //     114.41276,
+            //     30.51515,
+            //     1,
+            //     username,
+            //     is3d,
+            //     addressToken,
+            //     null,
+            //     reductionCustom,
+            //     layerColor,
+            //     mapReady
+            // );
+            // $scope.cloudMap3.initMap(
+            //     "viewDiv3",
+            //     114.41276,
+            //     30.51515,
+            //     1,
+            //     username,
+            //     is3d,
+            //     addressToken,
+            //     null,
+            //     reductionCustom,
+            //     layerColor,
+            //     mapReady
+            // );
+            // // 同济校区
+            // $scope.cloudMap4.initMap(
+            //     "viewDiv4",
+            //     114.254,
+            //     30.5855,
+            //     3,
+            //     username,
+            //     is3d,
+            //     addressToken,
+            //     null,
+            //     reductionCustom,
+            //     layerColor,
+            //     mapReady
+            // );
+            // $scope.cloudMap5.initMap(
+            //     "viewDiv5",
+            //     114.254,
+            //     30.5855,
+            //     3,
+            //     username,
+            //     is3d,
+            //     addressToken,
+            //     null,
+            //     reductionCustom,
+            //     layerColor,
+            //     mapReady
+            // );
+            // $scope.cloudMap6.initMap(
+            //     "viewDiv6",
+            //     114.254,
+            //     30.5855,
+            //     3,
+            //     username,
+            //     is3d,
+            //     addressToken,
+            //     null,
+            //     reductionCustom,
+            //     layerColor,
+            //     mapReady
+            // );
+        });
+
+        function mapReady() {
+            //cloudMap.changeLayerVisible('建筑物中心点', false);
+            //地图加载成功
+            // cloudMap.initLayerList("top-right"); //显示图层管理模块,位置top-right,top-left,bottom-right,bottom-right
+            // cloudMap.initLegend("top-left"); //显示图例
+            // cloudMap.click(doSomeThing); //绑定点击查询事件,点击空白处返回 “0”，点击具体的点则会返回相应数doSomeThing是回调函数，根据返回的结果
+            //获取全部图层名称
+            // var allLayerTitle = cloudMap.getAllLayerTitle();
+            // console.log(allLayerTitle);
+            //动态添加图层（下拉列表）
+            // allLayerTitle.forEach((element) => {
+            //     //console.log(element);
+            //     document
+            //     .getElementById("txt_layer")
+            //     .options.add(new Option(element, element));
+            //     document
+            //     .getElementById("txt_layer2")
+            //     .options.add(new Option(element, element));
+            // });
+        }
 
+        //#endregion 渲染地图--------------------end
+        //
+    })
 }]);

assets/views/charts3.html

@@ -118,62 +118,113 @@
         </div>
         <div class="right">
             <div class="slidesCenter">
-                <div class="slideBox2" ng-style="{'left':slideBoxLeft1}">
+                <div class="slideBox2">
+                    <!-- 主校区 -->
                     <div class="body_center">
-                        <div class="map_tit">事件实时动态图</div>
+                        <div class="map_tit" ng-switch="slideBoxLeft3">
+                            <span ng-switch-when="0">事件实时动态图</span>
+                            <span ng-switch-when="1">近30天事件分布图</span>
+                            <span ng-switch-when="2">近一年事件分布图</span>
+                            <span ng-switch-when="3">事件实时动态图</span>
+                            <span ng-switch-when="4">近30天事件分布图</span>
+                            <span ng-switch-when="5">近一年事件分布图</span>
+                        </div>
                         <div class="map_pit">
-                            <img class="map" src="assets/images/daping/ditu.png" alt="">
-
-                            <div class='pulse pulseBox activePoint' ng-repeat="item in placeList"
-                                ng-class="{'bgGrayPoint':item.statusid==5||item.statusid==6||item.statusid==7,'bgRedPoint':item.statusid!=5&&item.statusid!=6&&item.statusid!=7}"
-                                ng-style="pointPosition(item.coordinates,item.statusid)">
-                                <!-- <span class="rooms dataHaoRooms"
-                                    data-haorooms="haorooms效果tips-纯css">{{item.name}}</span> -->
-                            </div>
-                            <!-- 字 -->
-                            <div class="tongjixiaoqu">同济校区</div>
-                            <div class="zhuxiaoqu">主校区</div>
-                            <div class="dongxiaoqu">东校区</div>
+                            <div id="viewDiv" style="width: 100%;height:100%;"></div>
                         </div>
-
                     </div>
-                    <div class="body_center">
-                        <div class="map_tit">近30天事件分布图</div>
-                        <div class="map_pit" id="containerMonth">
-                            <img class="map" src="assets/images/daping/ditu.png" alt="">
-                            <div class='pulse1 pulseBox1 activePoint' ng-repeat="item in monthMapDataList"
-                                class="bgYellowPoint"
-                                ng-style="pointPosition(item.coordinates)">
-                                <span class="rooms dataHaoRooms1"
-                                    data-haorooms="haorooms效果tips-纯css">{{item.sum}}</span>
-                            </div>
-                            <!-- 字 -->
-                            <div class="tongjixiaoqu">同济校区</div>
-                            <div class="zhuxiaoqu">主校区</div>
-                            <div class="dongxiaoqu">东校区</div>
+                    <!-- <div class="body_center">
+                        <div class="map_tit">主校区-近30天事件分布图</div>
+                        <div class="map_pit">
+                            <div id="viewDiv2" style="width: 100%;height:100%;"></div>
                         </div>
                     </div>
                     <div class="body_center">
-                        <div class="map_tit">近一年事件分布图</div>
-                        <div class="map_pit" id="container">
-                            <img class="map" src="assets/images/daping/ditu.png" alt="">
-                            <div class='pulse1 pulseBox1 activePoint' ng-repeat="item in yearMapDataList"
-                                class="bgYellowPoint"
-                                ng-style="pointPosition(item.coordinates)">
-                                <span class="rooms dataHaoRooms2"
-                                    data-haorooms="haorooms效果tips-纯css">{{item.sum}}</span>
-                            </div>
-                            <!-- 字 -->
-                            <div class="tongjixiaoqu">同济校区</div>
-                            <div class="zhuxiaoqu">主校区</div>
-                            <div class="dongxiaoqu">东校区</div>
+                        <div class="map_tit">主校区-近一年事件分布图</div>
+                        <div class="map_pit">
+                            <div id="viewDiv3" style="width: 100%;height:100%;"></div>
+                        </div>
+                    </div> -->
+                    <!-- 同济校区 -->
+                    <!-- <div class="body_center">
+                        <div class="map_tit">同济校区-事件实时动态图</div>
+                        <div class="map_pit">
+                            <div id="viewDiv4" style="width: 100%;height:100%;"></div>
                         </div>
 
                     </div>
+                    <div class="body_center">
+                        <div class="map_tit">同济校区-近30天事件分布图</div>
+                        <div class="map_pit">
+                            <div id="viewDiv5" style="width: 100%;height:100%;"></div>
+                        </div>
+                    </div>
+                    <div class="body_center">
+                        <div class="map_tit">同济校区-近一年事件分布图</div>
+                        <div class="map_pit">
+                            <div id="viewDiv6" style="width: 100%;height:100%;"></div>
+                        </div>
+                    </div> -->
                 </div>
             </div>
             <div class="slidesRight">
                 <div class="slideBox3" ng-style="{'left':slideBoxLeft1}">
+                    <!-- 主校区 -->
+                    <div class="workNum">
+                        <div class="list">
+                            <p>实时工单<span class="size12">（件）</span></p>
+                            <p class="orange">{{incident_allData}}</p>
+                        </div>
+                        <div class="list">
+                            <p>及时响应工单<span class="size12">（件）</span></p>
+                            <p class="yellow">{{incident_responseData}}</p>
+                        </div>
+                        <div class="list">
+                            <p>处理中工单<span class="size12">（件）</span></p>
+                            <p class="green">{{incident_solveNowData}}</p>
+                        </div>
+                        <div class="list">
+                            <p>已解决工单<span class="size12">（件）</span></p>
+                            <p class="blue">{{incident_solvedData}}</p>
+                        </div>
+                    </div>
+                    <div class="workNum">
+                        <div class="list">
+                            <p>建单总数<span class="size12">（件）</span></p>
+                            <p class="orange">{{incident_total_month}}</p>
+                        </div>
+                        <div class="list">
+                            <p>事件解决总时长<span class="size12">（小时）</span></p>
+                            <p class="yellow">{{incident_solve_time_month}}</p>
+                        </div>
+                        <div class="list">
+                            <p>已解决工单<span class="size12">（件）</span></p>
+                            <p class="green">{{incident_solve_total_month}}</p>
+                        </div>
+                        <div class="list">
+                            <p>满意度</p>
+                            <p class="blue">{{incident_degree_month}}%</p>
+                        </div>
+                    </div>
+                    <div class="workNum">
+                        <div class="list">
+                            <p>建单总数<span class="size12">（件）</span></p>
+                            <p class="orange">{{incident_total_year}}</p>
+                        </div>
+                        <div class="list">
+                            <p>事件解决总时长<span class="size12">（小时）</span></p>
+                            <p class="yellow">{{incident_solve_time_year}}</p>
+                        </div>
+                        <div class="list">
+                            <p>已解决工单<span class="size12">（件）</span></p>
+                            <p class="green">{{incident_solve_total_year}}</p>
+                        </div>
+                        <div class="list">
+                            <p>满意度</p>
+                            <p class="blue">{{incident_degree_year}}%</p>
+                        </div>
+                    </div>
+                    <!-- 同济校区 -->
                     <div class="workNum">
                         <div class="list">
                             <p>实时工单<span class="size12">（件）</span></p>
@@ -231,7 +282,7 @@
                 </div>
             </div>
             <div class="slidesBottom">
-                <div class="slideBox4" ng-style="{'left':slideBoxLeft1}">
+                <div class="slideBox4" ng-style="{'left':slideBoxLeft2}">
                     <div class="map_list">
                         <div class="title">当天事件详情</div>
                         <div class="map_list_head">
@@ -362,7 +413,6 @@
         </div>
     </div>
 </div>
-</div>
 <style>
     .bgBody {
         width: 1920px;
@@ -510,12 +560,13 @@
         width: 1193px;
         height: 616px;
         overflow: hidden;
+        /* overflow: auto; */
         position: relative;
         margin-left: 23px;
     }
 
     .slideBox2 {
-        width: 300%;
+        width: 600%;
         height: 100%;
         position: relative;
         left: 0;
@@ -532,7 +583,7 @@
     }
 
     .slideBox3 {
-        width: 300%;
+        width: 600%;
         height: 100%;
         position: relative;
         left: 0;
@@ -574,7 +625,7 @@
 
     .charts_body .body_center {
         /* margin-left: 7px; */
-        width: 33.33% !important;
+        width: 16.6666% !important;
         float: left;
         position: relative;
     }
@@ -909,6 +960,7 @@
         position: relative;
         /* background: url(assets/images/daping/ditu.png) no-repeat; */
         /* background-size: cover; */
+        /* background-color: #f1f1f5; */
     }
 
     .map_pit img {
@@ -1256,7 +1308,7 @@
     }
     /* 各数据数量 */
     .workNum {
-        width: 33.33333%;
+        width: 16.6666%;
         float: left;
         overflow: hidden;
         position: relative;
@@ -1396,4 +1448,7 @@
             /* box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6; */
         }
     }
+    .esri-ui-corner .esri-component{
+        display: none;
+    }
 </style>

index.html

@@ -147,15 +147,16 @@
     <!-- Baidu map Apis -->
     <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gd0GyxGUxSCoAbmdyQBhyhrZ"></script> -->
 
-    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
+    <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
-    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
-   
+    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> -->
+   <!-- 华科地图 -->
+   <script src="https://map.hust.edu.cn/CloudMapJS/5.0/mainmap.js"></script>
 </body>
 
 </html>