监控覆盖

bns/html/supplement/monitoring_coverage.html

@@ -37,20 +37,20 @@
             <div id="center-box2">
                 <div class="multiselect layout">
                     <div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-1-check.png">
-                        <p checkedName="" style="color: #fff;">全选(<span id="allNum">0</span>)</p>
+                        <p checkedName="" style="color: #fff;">全选</p>
                     </div>
                     <div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-2-check.png">
-                        <p checkedName="2" style="color: #DD690B;">二级风险球机(<span id="twoNum">0</span>)</p>
+                        <p checkedName="2" style="color: #DD690B;">二级风险球机</p>
                     </div>
                     <div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-3-check.png">
-                        <p checkedName="3" style="color: #FFE91F;">三级风险球机(<span id="threeNum">0</span>)</p>
+                        <p checkedName="3" style="color: #FFE91F;">三级风险球机</p>
                     </div>
                     <div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-4-check.png"
                             style="">
-                        <p checkedName="4" style="color: #2aa998;">四级风险球机(<span id="fourNum">0</span>)</p>
+                        <p checkedName="4" style="color: #2aa998;">四级风险球机</p>
                     </div>
                     <div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-5-check.png">
-                        <p checkedName="5" style="color: #70e180;">五级风险球机(<span id="fiveNum">0</span>)</p>
+                        <p checkedName="5" style="color: #70e180;">五级风险球机</p>
                     </div>
                 </div>
             </div>
@@ -61,32 +61,32 @@
             </div>
             <div id="center-bottom" class="layout">
                 <div class="error-box layout">
-                    <p style="color: #3ed6ff;">1</p>
+                    <p style="color: #3ed6ff;" id="num1">0</p>
                     <img src="../../img/supplement/video_img.png">
                     <p style="color: #3ed6ff;">球机正常</p>
                 </div>
                 <div class="error-box layout">
-                    <p style="color: #e53b5a;">2</p>
+                    <p style="color: #e53b5a;" id="num2">0</p>
                     <img src="../../img/supplement/video_img2.png">
                     <p style="color: #e53b5a;">异常掉线</p>
                 </div>
                 <div class="error-box layout">
-                    <p style="color: #c280ff;">3</p>
+                    <p style="color: #c280ff;" id="num3">0</p>
                     <img src="../../img/supplement/video_img3.png">
                     <p style="color: #c280ff;">画面不清晰</p>
                 </div>
                 <div class="error-box layout">
-                    <p style="color: #8080ff;">4</p>
+                    <p style="color: #8080ff;" id="num4">0</p>
                     <img src="../../img/supplement/video_img4.png">
                     <p style="color: #8080ff;">不流畅</p>
                 </div>
                 <div class="error-box layout">
-                    <p style="color: #facd91;">1</p>
+                    <p style="color: #facd91;" id="num5">0</p>
                     <img src="../../img/supplement/video_img5.png">
                     <p style="color: #facd91;">信号弱</p>
                 </div>
                 <div class="error-box layout">
-                    <p style="color: #f59a23;">1</p>
+                    <p style="color: #f59a23;" id="num6">0</p>
                     <img src="../../img/supplement/video_img6.png">
                     <p style="color: #f59a23;">人为遮挡</p>
                 </div>
@@ -111,11 +111,11 @@
                 </div>
                 <div id="right-bottom-box2" class="layout">
                     <div class="right-bottom-child-box2 layout">
-                        <p>1</p>
+                        <p id="normalNum">0</p>
                         <p>视频设备视频速率正常</p>
                     </div>
                     <div class="right-bottom-child-box2 layout">
-                        <p>1</p>
+                        <p id="errorNum">0</p>
                         <p>视频设备视频速率异常</p>
                     </div>
                 </div>>

bns/js/supplement/monitoring_coverage.js

@@ -0,0 +1,143 @@
+let form, layer, table, laydate, tableIns, user = getUser();
+let mapPointList = [],mainMapPointList = [];
+layui.use(['form', 'layer', 'table', 'laydate'], function () {
+    form = layui.form;
+    layer = layui.layer;
+    table = layui.table;
+    laydate = layui.laydate;
+    initData();
+})
+
+/* 数据初始化 */
+function initData(){
+    getHyd();
+    getFgd();
+    getMap();
+    getErrorNum();
+    getWatchNum();
+    getCoverRate();
+    getSpeedNum();
+}
+
+/* 获取监控活跃度分析 */
+function getHyd(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getHyd";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            initEchartsOne(result.data);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 获取监控覆盖度分析 */
+function getFgd(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getFgd";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            initEchartsTwo(result.data);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 获取地图球机 */
+function getMap(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getMap";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            let dataList = [];
+            $.each(result.data,function(index,item){
+                item.coordinate = [parseFloat(item.lon), parseFloat(item.lat)]
+                dataList.push(item);
+            })
+            mainMapPointList = dataList;
+            loadMap(dataList);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 获取球机异常类型 */
+function getErrorNum(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getErrorNum";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            $.each(result.data,function(index,item){
+                $('#num' + item.name).html(item.num);
+            })
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 下行观看分析 */
+function getWatchNum(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getWatchNum";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        console.error(result);
+        if (result.code === 200) {
+            initEchartsThree(result.data);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 风险球机覆盖度 */
+function getCoverRate(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getCoverRate";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        console.error(result);
+        if (result.code === 200) {
+            initEchartsFour(result.data);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}
+
+/* 球机速率正常/异常数量 */
+function getSpeedNum(){
+    let params = {};
+    let url = dataUrl + "proteam/pot/monitoringCoverage/getSpeedNum";
+    ajaxRequest(url, "GET", params, true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            $('#normalNum').html(result.data[0].normalNum);
+            $('#errorNum').html(result.data[0].errorNum);
+        } else if (result.code === 500) {
+            layer.alert(result.msg, { icon: 2 })
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+}

bns/js/supplement/monitoring_coverage_echarts.js

@@ -6,14 +6,13 @@ let myChart4 = echarts.init(document.getElementById('echarts-four'));
 let uploadedDataURL2 = "../../js/compreDisplay/anhui/anhui.json";
 let myChart5 = echarts.init(document.getElementById('echarts-map2'));
 
-initEchartsOne();
-initEchartsTwo();
-initEchartsThree();
-initEchartsFour();
-loadMap([]);
 function initEchartsOne(list) {
-    let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
+    let dataX = []; //名称
-    let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
+    let dataY = []; //数据
+    $.each(list, function (index, item) {
+        dataX.push(item.num);
+        dataY.push(item.timeValue);
+    })
     let option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -21,13 +20,33 @@ function initEchartsOne(list) {
             axisPointer: {
                 type: 'shadow',
             },
+            formatter: function (params) {
+                console.error(params);
+                let result = '';
+                $.each(list, function (index, item) {
+                    if (parseInt(params[0].name) === item.num) {
+                        result += params[0].marker + '球机编号：' + item.name + '<br>' + '时长：' + item.time + '<br>'
+                    }
+                })
+                return result;
+            },
         },
         grid: {
             top: '10%',
             right: '10%',
-            left: '10%',
+            left: '15%',
             bottom: '10%',
         },
+        dataZoom: [
+            {
+                type: "inside",
+                zoomOnMouseWheel: false,
+                moveOnMouseMove: true,
+                moveOnMouseWheel: true,
+                startValue: 0,
+                endValue: 9,
+            },
+        ],
         xAxis: [
             {
                 type: 'category',
@@ -106,7 +125,7 @@ function initEchartsOne(list) {
                 },
                 label: {
                     normal: {
-                        show: true,
+                        show: false,
                         lineHeight: 10,
                         formatter: '{c}',
                         position: 'top',
@@ -127,8 +146,14 @@ function initEchartsOne(list) {
 }
 
 function initEchartsTwo(list) {
-    let nameList = ['合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥', '合肥'];
+    let nameList = [];
-    let dataList = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
+    let dataList = []
+    $.each(list, function (index, item) {
+        nameList.push(item.name);
+        dataList.push(item.num);
+    })
+    nameList = nameList.reverse();
+    dataList = dataList.reverse();
     option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -138,7 +163,7 @@ function initEchartsTwo(list) {
             },
         },
         grid: {
-            left: '12%',
+            left: '18%',
             right: '10%',
             bottom: '8%',
             top: '5%',
@@ -249,8 +274,12 @@ function initEchartsTwo(list) {
 }
 
 function initEchartsThree(list) {
-    let dataX = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; //名称
+    let dataX = []; //名称
-    let dataY = [20, 50, 15, 35, 50, 30, 40, 50, 60, 20]; //数据
+    let dataY = []; //数据
+    $.each(list, function (index, item) {
+        dataX.push(item.num);
+        dataY.push(item.watchTime);
+    })
     let option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -258,6 +287,16 @@ function initEchartsThree(list) {
             axisPointer: {
                 type: 'shadow',
             },
+            formatter: function (params) {
+                console.error(params);
+                let result = '';
+                $.each(list, function (index, item) {
+                    if (parseInt(params[0].name) === item.num) {
+                        result += params[0].marker + '球机编号：' + item.name + '<br>' + '观看次数：' + item.watchTime + '<br>'
+                    }
+                })
+                return result;
+            },
         },
         grid: {
             top: '10%',
@@ -265,6 +304,16 @@ function initEchartsThree(list) {
             left: '10%',
             bottom: '10%',
         },
+        dataZoom: [
+            {
+                type: "inside",
+                zoomOnMouseWheel: false,
+                moveOnMouseMove: true,
+                moveOnMouseWheel: true,
+                startValue: 0,
+                endValue: 9,
+            },
+        ],
         xAxis: [
             {
                 type: 'category',
@@ -360,19 +409,19 @@ function initEchartsThree(list) {
     };
     function getColor(value) {
         let endColor = '#2066ad';
-        if (value <= 10) {
+        if (value <= 2) {
             endColor = '#3f67a7';
-        } else if (value > 10 && value <= 15) {
+        } else if (value > 2 && value <= 4) {
             endColor = '#5e6296';
-        } else if (value > 15 && value <= 20) {
+        } else if (value > 4 && value <= 6) {
             endColor = '#7f618a';
-        } else if (value > 20 && value <= 25) {
+        } else if (value > 6 && value <= 8) {
             endColor = '#a55a77';
-        } else if (value > 25 && value <= 30) {
+        } else if (value > 8 && value <= 10) {
             endColor = '#c95665';
-        } else if (value > 30 && value <= 35) {
+        } else if (value > 10 && value <= 12) {
             endColor = '#e45256';
-        } else if (value > 35 && value <= 50) {
+        } else if (value > 12 && value <= 14) {
             endColor = '#ef5050';
         } else {
             endColor = '#f33';
@@ -389,19 +438,19 @@ function initEchartsFour(list) {
     var data = [
         {
             name: "二级风险",
-            value: 54,
+            value: list[0].twoRate,
         },
         {
             name: "三级风险",
-            value: 44,
+            value: list[0].threeRate,
         },
         {
             name: "四级风险",
-            value: 35,
+            value: list[0].fourRate,
         },
         {
             name: "五级风险",
-            value: 30,
+            value: list[0].fiveRate,
         },
     ];
     var titleArr = [],
@@ -457,7 +506,7 @@ function initEchartsFour(list) {
                             position: "center",
                             show: true,
                             textStyle: {
-                                fontSize: "20",
+                                fontSize: "15",
                                 fontWeight: "bold",
                                 color: colors[index][0],
                             },
@@ -519,13 +568,7 @@ $(".check-risk").click(function (e) {
         $(this).attr("isCheck", '1')
         $(this).find('img').eq(0).attr("src", setRiskIcon(checkedName, 2))
     }
-    // 加载地图数据
+    mapSearch();
-    /* let dataList = mapPointList.filter(item => {
-        if (item.buildCode === clickCityCode) {
-            return item
-        }
-    })
-    loadMap(dataList); */
     // 设置风险等级选中样式
     function setRiskIcon(value, type) {
         if (value && type === 1) {
@@ -540,6 +583,31 @@ $(".check-risk").click(function (e) {
     }
 });
 
+/*地图关键字搜索、风险等级选中*/
+function mapSearch() {
+    let selRiskList = [];
+    mapPointList.splice(0, mapPointList.length);
+    $('.check-risk').each(function () {
+        if ($(this).attr("isCheck") === '1') {
+            if ($(this).find('p').eq(0).attr("checkedName")) {
+                selRiskList.push($(this).find('p').eq(0).attr("checkedName"))
+            }
+        }
+    })
+    if (selRiskList.length) {
+        $.each(selRiskList, function (index, item) {
+            let dataList = mainMapPointList.filter(item2 => {
+                return item2.riskLevel === item
+            })
+            $.each(dataList, function (index3, item3) {
+                mapPointList.push(item3)
+            })
+        })
+    }
+    console.error(mapPointList);
+    loadMap(mapPointList);
+}
+
 function loadMap(dataMap) {
     $.getJSON(uploadedDataURL2, function (geoJson) {
         echarts.registerMap('anhui', geoJson);
@@ -555,14 +623,11 @@ function loadMap(dataMap) {
                 let geoCoord = data[i].coordinate;
                 if (geoCoord) {
                     res.push({
-                        proName: data[i].proName,
+                        name: data[i].name,
-                        num: data[i].num,
+                        address: data[i].address,
-                        riskLevel: data[i].riskType,
+                        riskLevel: data[i].riskLevel,
-                        workContent: dealEmptyString(data[i].workContent),
-                        isOnline: isOnline(data[i].ballStatus),
-                        workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
-                        value: geoCoord.concat(data[i].value, data[i].proName, data[i].num),
                         coordinate: data[i].coordinate,
+                        value: geoCoord.concat(data[i].name, data[i].riskLevel),
                     });
                 }
             }
@@ -593,12 +658,9 @@ function loadMap(dataMap) {
                 formatter: function (params) {
                     if (params.data)
                         return (
-                            '<p class="map-p">' + params.data.proName + '</p>' +
+                            '<p class="map-p">球机编号:' + params.data.name + '</p>' +
-                            '<p class="map-p">风险等级：' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
+                            '<p class="map-p">风险等级:' + setRiskLevelColor(params.data.riskLevel) + '</p>' +
-                            '<p class="map-p" title="' + params.data.workContent + '">作业内容：' + sliceStr(params.data.workContent) + '</p>' +
+                            '<p class="map-p">地址:' + params.data.address + '</p>'
-                            '<p class="map-p">班组长：' + params.data.workManager + '</p>' +
-                            '<p class="map-p">预警数量：' + params.data.num + '</p>' +
-                            '<p class="map-p">球机：' + params.data.isOnline + '</p>'
                         )
                 },
                 // extraCssText: "background:url('../../img/tc.png') 100% 100% repeat;",
@@ -655,9 +717,18 @@ function loadMap(dataMap) {
                     return 20;
                 },
                 symbol: function (val) {
-                    console.log(val)
+                    switch (val[3]) {
-                    var num = Number(val[4]) + 1;
+                        case '2':
-                    return getEchartsImage(val[2], num, val[3]);
+                            return 'image://../../img/compreDisplay/two-risk.png';
+                        case '3':
+                            return 'image://../../img/compreDisplay/three-risk.png';
+                        case '4':
+                            return 'image://../../img/compreDisplay/four-risk.png';
+                        case '5':
+                            return 'image://../../img/compreDisplay/five-risk.png';
+                        default:
+                            break;
+                    }
                 },
                 label: {
                     normal: {