地图 热力图 设备 视频 详情页 图标

liuyg

2021-04-28 4ac408e9a9c9c24ef0ea3e12004a500238956103

地图 热力图  设备 视频 详情页 图标

 public/map/images/1.psd

Binary files differ

 public/map/images/Yz.png

 public/map/images/selfbaojin.gif

 public/map/images/selfbaojin2.gif

 public/map/popup/html/FlareClusterLayer_v3 copy.html

@@ -160,7 +160,7 @@
    <div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
        <!-- 从layui传值给iframe 的占位input -->
        <!-- <div class="aaa bbb">13223456745</div> -->
        <input type="text" id="sidIput" ref="sidIput" style="display:none">
        <input type="text" id="sidIput" ref="sidIput" style="display: none;">
        <div class="flare-liu-top">
            <div class="f-l-t-heard">{{name}}</div>
            <div class="f-l-t-center">{{machineCode}}</div>
@@ -169,13 +169,17 @@
                <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
            </div>
        </div>
        <div class="flare-liu-body">
        <div class="flare-liu-body" v-if="'start'">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <div class="r-b-top">
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">设备名称</span>
                            <span class="r-b-t-right">{{ name }}</span>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">使用方</span>
                            <span class="r-b-t-right">{{ deptname }}</span>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">设备联系人</span>
@@ -201,8 +205,7 @@
                                <div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
                                    <!-- <el-image style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
                                        v-show="value != 'no'"> -->
                                        <el-image style="width: 68px; height: 68px" :src="value" 
                                        v-show="value != 'no'">
                                    <el-image style="width: 68px; height: 68px" :src="value" v-show="value != 'no'">
                                    </el-image>
                                    <div v-show="value == 'no'" style="
                                        width: 68px;
@@ -221,6 +224,14 @@
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="现场视频" name="second">
                    <!-- {{aoud}} -->
                    <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="aoud" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
            </el-tabs>
        </div>
@@ -237,10 +248,13 @@
                num: '',
                name: '',
                statesss: '',
                // start:false,
                //详细信息data
                ourData: '',
                // names: '',
                contacts: '',
                deptname: '',//使用方
                aoud: '',//视频
                calls: '',
                imgsl: [],
                deploymentTime: '',
@@ -331,6 +345,53 @@
                        }
                    }
                },
                getUser(dat) {
                    var xhr = null
                        , my = this
                        , url = '/api/blade-jfpts/equipment/equipment/detail?id=' + dat;
                    if (XMLHttpRequest) { //http请求
                        xhr = new XMLHttpRequest();
                    } else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");

                    }
                    xhr.open("get", url, true);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var data = JSON.parse(xhr.responseText);// JSON转js
                                var ourd = data.data,
                                    cl = ourd.channelNumber,
                                    deviceCode = ourd.serialNumber;
                                my.deptname = ourd.deptName;
                                // console.log(data,1111111111111)
                                var xhr2 = null//视频请求
                                    , url = 'https://web.byisf.com:18000/GetPlayUrl?deviceCode='+ deviceCode +'&chl=' + cl;
                                if (XMLHttpRequest) { //http请求
                                    xhr2 = new XMLHttpRequest();
                                } else {
                                    xhr2 = new ActiveXObject("Microsoft.XMLHTTP");

                                }
                                xhr2.open("get", url, true);
                                xhr2.send();
                                xhr2.onreadystatechange = function () {
                                    if (xhr2.readyState === 4) {
                                        if (xhr2.status === 200) {
                                            // 判断isJson是否传进来了
                                            var data2 = JSON.parse(xhr2.responseText);// JSON转js
                                            my.aoud = data2.data.m3u8;
                                            // console.log(data2,222222222222)

                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                }
@@ -338,10 +399,12 @@
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                    clearTimeout(this.oldtime);
                    // console.log(this.$refs.sidIput.value)
                    this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    this.getUser(this.ourData.id);
                    // console.log(this.ourData);
                    this.getdatas(this.ourData);
                }, 20);
                },100);


            }

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -251,103 +251,103 @@
              });
              that.layuiLayer.close(that.layuiLayer.index);
              //两个弹窗
              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: false,
                shade: false,
                skin: 'demo-class',
                // id: 'onelyOne',
                maxmin: false, //开启最大化最小化按钮
                area: ['200px', '70px'],
                // area: 'auto',
                offset: posi,
                skin: 'flares',
                closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
                content: [url, 'no'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) {//成功后添加全局点击关闭
                  // console.log(evt.graphic.attributes);
                  $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
                  // console.log(layero, index);
                  that.indexs = index;
              // that.layuiLayer.open({
              //   title: '',
              //   type: 2,
              //   shadeClose: false,
              //   shade: false,
              //   skin: 'demo-class',
              //   // id: 'onelyOne',
              //   maxmin: false, //开启最大化最小化按钮
              //   area: ['200px', '70px'],
              //   // area: 'auto',
              //   offset: posi,
              //   skin: 'flares',
              //   closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
              //   content: [url, 'no'],
              //   resize: false,
              //   scrollbar: false,
              //   // tipsMore: true, //允许多个tipe
              //   // content: num,
              //   success: function (layero, index) {//成功后添加全局点击关闭
              //     // console.log(evt.graphic.attributes);
              //     $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
              //     // console.log(layero, index);
              //     that.indexs = index;

                  var isclickD = true
                    , endx = null
                    , endy = null;
                  layero[0].style.position = 'absolute';
              //     var isclickD = true
              //       , endx = null
              //       , endy = null;
              //     layero[0].style.position = 'absolute';

                  downs = document.onmousedown = () => { //鼠标按下事件
                    // console.log('down');//start
                    // downs = document.onmousedown = null;
                    var mx = window.event.clientX//鼠标初始位置
                      , my = window.event.clientY
                      , cx = this.offset[1].replace("px", "")//初始位置
                      , cy = this.offset[0].replace("px", "");
              //     downs = document.onmousedown = () => { //鼠标按下事件
              //       // console.log('down');//start
              //       // downs = document.onmousedown = null;
              //       var mx = window.event.clientX//鼠标初始位置
              //         , my = window.event.clientY
              //         , cx = this.offset[1].replace("px", "")//初始位置
              //         , cy = this.offset[0].replace("px", "");

                    //判断鼠标是否在地图上
                    // console.log(mx,'+',my);
                    if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
                      // console.log('on map')
                      if (endx != null && endy != null) {
                        cx = endx;
                        cy = endy;
                      }
                      moves = document.onmousemove = () => {//鼠标移动事件
                        // console.log('move');//move
                        // console.log(this.offset)
                        var ux = window.event.clientX//记录实时位置
                          , uy = window.event.clientY;
                        endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
                        endy = +cy + (uy - my);
                        layero[0].style.left = endx + 'px';
                        layero[0].style.top = endy + 'px';
                        // console.log(+cx, +cy,'初始位置');
                        // console.log(mx, my,'鼠标初始位置');
                        // console.log(ux, uy,'记录实时位置');
                        // console.log(ux, uy,'最后位置');
                        isclickD = false;
                        ups = document.onmouseup = () => {//鼠标抬起事件
                          // console.log('up');//end
                          // downs = document.onmousedown = null;
                          moves = document.onmousemove = null;
                          ups = document.onmouseup = null;
                          var timess = setTimeout(() => {
                            clearTimeout(timess);
                            timess = null;
                            isclickD = true;
                          }, 1);
                        }
                      }
                    }
                  }
                  clickD = document.onclick = () => {
                    if (isclickD) {
                      parent[0].layer.close(index);
                      // parent[0].layer.close(+index + 1);
                      // parent[0].layer.closeAll();
                      // console.log(111111111111)
                      clickD = document.onclick = null;
                    }
                  }
              //       //判断鼠标是否在地图上
              //       // console.log(mx,'+',my);
              //       if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
              //         // console.log('on map')
              //         if (endx != null && endy != null) {
              //           cx = endx;
              //           cy = endy;
              //         }
              //         moves = document.onmousemove = () => {//鼠标移动事件
              //           // console.log('move');//move
              //           // console.log(this.offset)
              //           var ux = window.event.clientX//记录实时位置
              //             , uy = window.event.clientY;
              //           endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
              //           endy = +cy + (uy - my);
              //           layero[0].style.left = endx + 'px';
              //           layero[0].style.top = endy + 'px';
              //           // console.log(+cx, +cy,'初始位置');
              //           // console.log(mx, my,'鼠标初始位置');
              //           // console.log(ux, uy,'记录实时位置');
              //           // console.log(ux, uy,'最后位置');
              //           isclickD = false;
              //           ups = document.onmouseup = () => {//鼠标抬起事件
              //             // console.log('up');//end
              //             // downs = document.onmousedown = null;
              //             moves = document.onmousemove = null;
              //             ups = document.onmouseup = null;
              //             var timess = setTimeout(() => {
              //               clearTimeout(timess);
              //               timess = null;
              //               isclickD = true;
              //             }, 1);
              //           }
              //         }
              //       }
              //     }
              //     clickD = document.onclick = () => {
              //       if (isclickD) {
              //         parent[0].layer.close(index);
              //         // parent[0].layer.close(+index + 1);
              //         // parent[0].layer.closeAll();
              //         // console.log(111111111111)
              //         clickD = document.onclick = null;
              //       }
              //     }

                  var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
                  //鼠标滚轮事件
                  function myMouseWheelHandler(event) {
                    // console.log("Mouse wheel value = " + event.value);
                    parent[0].layer.close(index);
                    // parent[0].layer.close(+index + 1);
                    mouseWheel.remove();
                  }
              //     var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
              //     //鼠标滚轮事件
              //     function myMouseWheelHandler(event) {
              //       // console.log("Mouse wheel value = " + event.value);
              //       parent[0].layer.close(index);
              //       // parent[0].layer.close(+index + 1);
              //       mouseWheel.remove();
              //     }

                },
                end: function () { //关闭事件
              //   },
              //   end: function () { //关闭事件

                }
              });
              //   }
              // });
              that.layuiLayer.open({ //第二个iframe
                title: '',
                type: 2,
@@ -992,24 +992,29 @@
      }
    },

    _createSingle: function (single) {
    _createSingle: function (single) {//加载图标样式
      this.singles.push(single);
      delete single.graphic;
      var symbol;
      // console.log(single.state);
      if (single.state != '') {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
      } else {
        if (single.jtype == 1) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
      console.log();
      if(single.tenant_id == undefined){//如果不是业主
        if (single.state != '') {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
        } else {
          if (single.onlineStatus == 1) {
            symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
          if (single.jtype == 1) {
            symbol = new esri.symbol.PictureMarkerSymbol("./images/selfbaojin2.gif", 80, 80);
          } else {
            symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
            if (single.onlineStatus == 1) {
              symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
            } else {
              symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
            }
          }
        }
      }else{//是业主
        symbol = new esri.symbol.PictureMarkerSymbol("./images/Yz.png", 40, 40);
      }
      


      var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -160,10 +160,16 @@
    onceTime: 300,
    // 警情缓存
    Pdata: null,
    // 警情图标缓存
    Pdatas: null,
    //业主缓存
    Ydata: null,
    // 业主图标缓存
    Ydatas: null,
    //设备缓存
    Sdata: null,
    // 设备图标缓存
    Sdatas: null,

    constructor: function (options, srcRefNode) {
      this._map = options.map;
@@ -276,6 +282,27 @@
        // if ($(this).index() == 1) { return };
        // if ($(this).index() == 2) { return };

        //解决打开热力图 切换top获取不了数据问题 警情
        if ($('#policeHeatMap').prop('checked') == true) {
          // console.log($('#policeHeatMap').prop('checked') == true)
          $('#policeHeatMap').prop('checked', false);
          that.checkBoxSelect($('#policeHeatMap'));
        }else
        //解决打开热力图 切换top获取不了数据问题 业主
        if ($('#ownerHeatMap').prop('checked') == true) {
          // console.log($('#ownerHeatMap').prop('checked') == true)
          $('#ownerHeatMap').prop('checked', false);
          that.checkBoxSelect($('#ownerHeatMap'));
        }else
        //解决打开热力图 切换top获取不了数据问题 设备
        if ($('#equipmentHeatMap').prop('checked') == true) {
          // console.log($('#equipmentHeatMap').prop('checked') == true)
          $('#equipmentHeatMap').prop('checked', false);
          that.checkBoxSelect($('#equipmentHeatMap'));
        }


        // console.log($('#policeHeatMap').prop('checked') == true)
        if (that.entitysData.length > 0) {
          that.analysisAddEntitys.clear();
          that.entitysData = [];
@@ -286,6 +313,7 @@
          that.heatmapfeatureLayer.setRenderer();
          $('.analysis-category input').prop('checked', false);
        }



        $(this).addClass('on').siblings().removeClass('on');
@@ -704,7 +732,7 @@
      $('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
        // console.log(event.currentTarget.innerHTML,'innerhtml')
        var text = $(this).text().trim();
        // console.log(text,'text()')
        // console.log(this,text,'text()')
        // console.log(that.tabIndex,'tabIndex')

        $(this).parent().parent().prev().html(text + '<i></i>');
@@ -730,17 +758,7 @@


        } else if (that.tabIndex == 2) {
          var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
          var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();

          var parentId = $(this).parent().parent().parent().attr('id');
          if (parentId == 'ownerCategory') {
            that.getOwnerDj($('#ownerLevel'), categoryText);
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
          } else {
            that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
          }

          that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), text == '全部' ? '' : text);
        } else if (that.tabIndex == 0) {
          that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
        }
@@ -798,7 +816,9 @@
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/police-situation.png');
            }, result[i].jd, result[i].wd,
              //  './images/police-situation.png'
            );

            t = result[i].alarmTime.substr(0, 10);
            e = result[i].alarmTime.substr(11);
@@ -850,6 +870,7 @@
            $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(result);//图标渲染
          that.Pdatas = result;
          that.clusterLayer._setUserState('警情');//切换聚合图标点击事件

          for (var i = 0; i < 1000; i++) {
@@ -892,7 +913,7 @@
      // })
    },
    // 获取业主信息列表
    getOwnerTable: function (dom, type, dj) {
    getOwnerTable: function (dom, deviceType) {
      dom.empty();
      var that = this;
      $.ajax({
@@ -904,9 +925,37 @@
        success: function (data) {
          // var result = data.data;
          var oldData = data.data;
          // console.log(oldData)
          var result = oldData;
          // console.log(deviceType)
          var result = [];
          that.Ydata = oldData;

          if (deviceType == '') {
            result = oldData;
          } else if (deviceType == '医院') {
            for (var key in oldData) {
              // console.log(oldData[key]);
              if (oldData[key].type == '0') {
                result.push(oldData[key]);
              }
            }
          } else if (deviceType == '学校') {
            for (var key in oldData) {
              // console.log(oldData[key]);
              if (oldData[key].type == '1') {
                result.push(oldData[key]);
              }
            }
          } else if (deviceType == '小区') {
            for (var key in oldData) {
              // console.log(oldData[key]);
              if (oldData[key].type == '2') {
                result.push(oldData[key]);
              }
            }
          }



          that.clearLayer();//图标清除
          that.entityData = [];
          for (var i = 0; i < result.length; i++) {
@@ -923,7 +972,9 @@
            that.heatmapfeatureLayer.setRenderer();
            $('.analysis-category input').prop('checked', false);
          };

          that.flareClusterLayer(result);//图标渲染
          that.Ydatas = result;
          that.clusterLayer._setUserState('业主');//切换聚合图标点击事件


@@ -947,7 +998,9 @@
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/owner.png');
            }, result[i].jd, result[i].wd,
              // './images/业主.png'
            );

            a = Number(i) + 1;
            if (result[i].type === "0") {
@@ -1051,13 +1104,16 @@
            that.clusterLayer._setUserState('设备');//切换聚合图标点击事件

          }
          that.Sdatas = result;

          for (var a, i = 0; i < result.length; i++) {
            that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
              lgtd: result[i].jd,
              lttd: result[i].wd,
              id: result[i].id
            }, result[i].jd, result[i].wd, './images/ceshi.png');
            }, result[i].jd, result[i].wd,
              // './images/ceshi.png'
            );
            var stares = '';

            a = Number(i) + 1;
@@ -1139,9 +1195,12 @@
    checkBoxSelect: function (self) {//选择热力图
      var that = this;
      var heatmapRenderer = null;
      // console.log(self);
      // // return
      // 选中
      if ($(self).prop('checked') == true) {
        that.clearLayer();//图标清除
        // console.log($(self).attr('id'), 1);
        // if (1) {
        heatmapRenderer = new HeatmapRenderer({
          colorStops: [
@@ -1163,6 +1222,56 @@
          this.heatmapfeatureLayer.add(new esri.Graphic(point));
        }
      } else {
        // console.log(self, 2);
        if ($(self).attr('class') == 'p') {
          that.entityData = [];
          for (var i = 0; i < this.Pdatas.length; i++) {
            this.Pdatas[i].x = Number(this.Pdatas[i].jd);
            this.Pdatas[i].y = Number(this.Pdatas[i].wd);
            that.entityData.push({
              lgtd: Number(this.Pdatas[i].jd),
              lttd: Number(this.Pdatas[i].wd)
            })
          }
          if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
            that.heatmapfeatureLayer.clear();
            that.heatmapfeatureLayer.setRenderer();
            // $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(this.Pdatas);//图标渲染
        } else if ($(self).attr('class') == 'Y') {
          that.entityData = [];
          for (var i = 0; i < this.Ydatas.length; i++) {
            this.Ydatas[i].x = Number(this.Ydatas[i].jd);
            this.Ydatas[i].y = Number(this.Ydatas[i].wd);
            that.entityData.push({
              lgtd: Number(this.Ydatas[i].jd),
              lttd: Number(this.Ydatas[i].wd)
            })
          }
          if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
            that.heatmapfeatureLayer.clear();
            that.heatmapfeatureLayer.setRenderer();
            // $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(this.Ydatas);//图标渲染
        } else if ($(self).attr('class') == 'S') {
          that.entityData = [];
          for (var i = 0; i < this.Sdatas.length; i++) {
            this.Sdatas[i].x = Number(this.Sdatas[i].jd);
            this.Sdatas[i].y = Number(this.Sdatas[i].wd);
            that.entityData.push({
              lgtd: Number(this.Sdatas[i].jd),
              lttd: Number(this.Sdatas[i].wd)
            })
          }
          if (that.heatmapfeatureLayer.graphics.length > 0) {//热力图数据映射
            that.heatmapfeatureLayer.clear();
            that.heatmapfeatureLayer.setRenderer();
            // $('.analysis-category input').prop('checked', false);
          };
          that.flareClusterLayer(this.Sdatas);//图标渲染
        }
        this.heatmapfeatureLayer.clear();
        this.heatmapfeatureLayer.setRenderer();
      }
@@ -1279,7 +1388,7 @@
      });

      //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
      var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
      var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 1);
      var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
      var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
      var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));

 public/map/widgets/supervisoryMap/template.html

@@ -30,7 +30,7 @@
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='equipmentHeatMap'> 热力图
                        <input type="checkbox" class="S" id='equipmentHeatMap'> 热力图
                    </li>
                </ul>
            </div>
@@ -91,12 +91,13 @@
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='policeHeatMap'> 热力图
                        <input type="checkbox" class="p" id='policeHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class='analysis-selection-criteria'>
                <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
                <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text"
                    id='analysis_select_time_end' readonly>
                <input type="button" value='查询' id='policeSelectTime'>
            </div>
            <div class='analysis-table-content'>
@@ -129,24 +130,24 @@
                    <li id='ownerCategory'>
                        类型：
                        <div>
                            全部

                            <i>

                            </i>
                            <i>全部</i>
                            <i>医院</i>
                            <i>学校</i>
                            <i>小区</i>
                        </div>
                        <div class='select-list'>
                            <ul>
                           

                            </ul>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" id='ownerHeatMap'> 热力图
                        <input type="checkbox" class="Y" id='ownerHeatMap'> 热力图
                    </li>
                </ul>
            </div>
            <div class="analysis-level">
            <!-- <div class="analysis-level">
                <ul>
                    <li id='ownerLevel'>
                        等级：
@@ -164,10 +165,10 @@
                        </div>
                    </li>
                    <li>
                        <!-- 级别 -->
                        级别
                    </li>
                </ul>
            </div>
            </div> -->

            <div class='analysis-table-content'>
                <div class="table">

 src/api/dataL/axiosL.js

@@ -38,4 +38,14 @@
      ...dataImg
    }
  })
}

export const getVideo = (deviceCode) => { 
  return request({
    url: 'https://web.byisf.com:18000/GetPlayUrl',
    method: 'get',
    params: {
      ...deviceCode
    }
  })
}

 src/views/clientManagement/clientManagement.vue

@@ -1025,6 +1025,7 @@
          }
        });
        this.$store.state.tags.tagList = arr;
        console.log(arr)
        this.$router.push({
          path: `/real/video/`, query: row
        });

 src/views/dataL/dataL.vue

@@ -2,26 +2,14 @@
  <div id="Lour" style="height: 100%">
    <div class="left" style="height: 101%">
      <div class="top">
        <div class="top-l">
          <div class="left-top">
        <div class="top-t">
          <div class="t-t-title">
            <p style="font-size: 24px; font-weight: 100">
              {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
              {{ name }}
            </p>
            <div class="l-t-state">
              <!-- dataState: ["掉线", "在线", "故障", "预警"], 
                if (s != "") {
                    states = "故障";
                  } else {
                    if (j != 1) {
                      if (o == 1) {
                        states = "在线";
                      } else {
                        states = "掉线";
                      }
                    } else {
                      states = "预警";
                    }
                  }-->
          </div>
          <div class="t-t-title2">
            <div class="t-t-state">
              <span
                :class="{
                  'l-t-s-grey': state == dataState[0],
@@ -30,20 +18,17 @@
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span>
              ></span
              >&nbsp
              <span>{{ state }}</span>
            </div>

            <!-- <p>{{evaluate}}</p> -->
          </div>
          <div class="left-bot">
            <p>{{ machineCode }}</p>
            <!-- <p>{{smoke}}</p> -->
            <!-- <p>{{proportion}}</p> -->
            <div class="t-t-time">
              <p>{{ ReportTime }}</p>
            </div>
          </div>
        </div>
        <div class="top-r">
          <p>{{ ReportTime }}</p>
        <div class="top-b">
          {{ machineCode }}
        </div>
      </div>
      <div class="l-main">
@@ -294,9 +279,9 @@
            <el-tab-pane label="设备详情" name="second">
              <div class="l-main-3">
                <div class="l-m-3-heard">
                  <h2>
                  <!-- <h2>
                    {{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
                  </h2>
                  </h2> -->
                  <div>设备数据详情</div>
                </div>
                <el-divider content-position="left"
@@ -419,7 +404,7 @@
                            </el-form-item>
                          </el-col>
                          <el-col span="12">
                            <el-form-item label="街道">
                            <el-form-item label="地址">
                              <el-input
                                disabled="true"
                                v-model="detailsData.street"
@@ -471,6 +456,26 @@
                      </el-row>
                    </el-form>
                  </el-row>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="现场视频" name="third">
              <div class="l-main-3">
                <!-- <div class="l-m-3-heard">222</div> -->
                <div class="l-m-3-heard">
                  <div>设备现场视频</div>
                </div>
                <!-- <el-divider content-position="left"></el-divider> -->
                <el-divider content-position="left"
                  ><i class="el-icon-mobile-phone"></i
                ></el-divider>
                <div class="l-m-3-main">
                  <!-- {{ videoUrl }} -->
                  <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                </div>
              </div>
            </el-tab-pane>
@@ -573,7 +578,13 @@
</template>
<script>
import { Loading } from "element-ui";
import { getdataL, getGalarm, getnum, getImg } from "../../api/dataL/axiosL";
import {
  getdataL,
  getGalarm,
  getnum,
  getImg,
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
@@ -584,7 +595,7 @@
      // timeL: "",
      a: "",
      myDeviceNumber: "",

      videoUrl: "",
      //折线图
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
@@ -608,6 +619,7 @@

      activeName: "first",
      // activeName: 'second',
      // activeName: "third",
      isRecord: true,
      screens: false,
      //复选框
@@ -953,6 +965,7 @@
    getdata() {
      // const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}&current=1&size=10&pid=`
      // axios.get(url)
      var that = this;
      var data = {
        deviceName: this.myDeviceNumber,
        current: "1",
@@ -965,7 +978,7 @@
        var data = res.data.data.records[0];
        var setimgl = null;
        //插入图片api获取图片
        // this.stetDetails(data);
        this.stetDetails(data);
        getImg(imgdadta, "post").then((res) => {
          // console.log(res.data.data.length != 0)
          var imgdatas = [];
@@ -985,7 +998,41 @@
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        // console.log(data);
        var videoData = {
          deviceCode: that.a.serialNumber,
          chl: that.a.channelNumber,
        };
        // console.log(videoData);
        // getVideo(videoData).then((res) => {
        //   that.videoUrl = res

        //   console.log(res)

        // });
        var xhr2 = null, //视频请求
          url =
            "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
            videoData.deviceCode +
            "&chl=" +
            videoData.chl;
        if (XMLHttpRequest) {
          //http请求
          xhr2 = new XMLHttpRequest();
        } else {
          xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr2.open("get", url, true);
        xhr2.send();
        xhr2.onreadystatechange = function () {
          if (xhr2.readyState === 4) {
            if (xhr2.status === 200) {
              // 判断isJson是否传进来了
              var data2 = JSON.parse(xhr2.responseText); // JSON转js
              that.videoUrl = data2.data.m3u8;
              // console.log(videoUrl);
            }
          }
        };
      });
    },
    stetDetails(d, imgdata) {
@@ -1028,7 +1075,7 @@
      // console.log(j, 1000);

      // console.log(states, 1000);
      this.state =  states;
      this.state = states;

      this.evaluate = "空气质量";
      this.machineCode = "无数据" && this.a.deviceNumber;
@@ -1180,7 +1227,8 @@
      //   _iframe1.contentWindow.location.reload(true);
      location.reload();
    },
    handleCurrentChange(val) {//行点击事件
    handleCurrentChange(val) {
      //行点击事件
      // console.log(val.i);
    },
  },
@@ -1249,79 +1297,131 @@
      width: 98%;
      height: 150px;
      // border: 1px solid rgb(21, 18, 204);
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      .top-l {
        position: relative;
        top: 40px;
        width: 500px;
        // border: 1px solid rgb(24, 207, 48);
        div {
          display: flex;
          align-items: center;
          justify-content: space-around;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: PingFangSC-Regular;
      .top-t,
      .top-b {
        width: 95%;
        // padding-left: 50px;
      }
      .top-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // border: 1px solid rgb(204, 161, 18);
        .t-t-title {
          font-size: 14px;
          // border: 1px solid rgb(24, 207, 48);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          // border: 1px solid rgb(18, 204, 80);
        }
        .left-top {
          p {
            width: 356px;
            // border: 1px solid rgb(37, 37, 37);
          }
          padding-left: 15px;
          // border: 1px solid rgb(24, 207, 48);
          .l-t-state {
            // border: 1px solid rgb(24, 207, 48);
            position: relative;
            top: 5px;
            left: 10px;
            width: 55px;
        .t-t-title2 {
          position: relative;
          top: 25px;
          .t-t-state {
            .l-t-s-yuan {
              display: block;
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 5px;
              border: 1px solid transparent;
            }
            .l-t-s-grey {
              background-color: #CDCDCD;
              background-color: #cdcdcd;
            }
            .l-t-s-green {
              background-color: #32C1A2;
              background-color: #32c1a2;
            }
            .l-t-s-yewllo {
              background-color: #F49966;
              background-color: #f49966;
            }
            .l-t-s-red {
              background-color: #F35B5B;
              background-color: #f35b5b;
            }
          }
        }
      }
      .left-bot,
      .top-r {
        font-size: 14px;
        font-weight: 400;
        color: #c4c4c4;
        // border: 1px solid rgb(24, 207, 48);
      .top-b,
      .t-t-time {
        // width: 100%;
        font-weight: 600;
        color: rgba($color: #6b6b6b, $alpha: 0.5);
        // border: 1px solid rgb(18, 204, 148);
      }
      .left-bot {
        position: relative;
        left: -68px;
        p {
          width: 295px;
          // border: 1px solid rgb(37, 37, 37);
        }
      }
      .top-r {
        width: 250px;
        // border: 1px solid rgb(24, 207, 48);
        float: right;
        position: relative;
        top: -50px;
      }
      // border-bottom:1px solid #000;
      // .top-l {
      //   position: relative;
      //   top: 40px;
      //   width: 500px;
      //   border: 1px solid rgb(24, 207, 48);
      //   div {
      //     display: flex;
      //     align-items: center;
      //     justify-content: space-around;
      //     font-size: 14px;
      //     // border: 1px solid rgb(24, 207, 48);
      //   }
      //   .left-top {
      //     p {
      //       width: 356px;
      //       // border: 1px solid rgb(37, 37, 37);
      //     }
      //     padding-left: 15px;
      //     // border: 1px solid rgb(24, 207, 48);
      //     .l-t-state {
      //       // border: 1px solid rgb(24, 207, 48);
      //       position: relative;
      //       top: 5px;
      //       left: 50px;
      //       width: 55px;
      //       .l-t-s-yuan {
      //         display: block;
      //         width: 10px;
      //         height: 10px;
      //         border-radius: 5px;
      //         border: 1px solid transparent;
      //       }
      //       .l-t-s-grey {
      //         background-color: #cdcdcd;
      //       }
      //       .l-t-s-green {
      //         background-color: #32c1a2;
      //       }
      //       .l-t-s-yewllo {
      //         background-color: #f49966;
      //       }
      //       .l-t-s-red {
      //         background-color: #f35b5b;
      //       }
      //     }
      //   }
      // }
      // .left-bot,
      // .top-r {
      //   font-size: 14px;
      //   font-weight: 400;
      //   color: #c4c4c4;
      //   // border: 1px solid rgb(24, 207, 48);
      // }
      // .left-bot {
      //   position: relative;
      //   left: -68px;
      //   p {
      //     width: 295px;
      //     // border: 1px solid rgb(37, 37, 37);
      //   }
      // }
      // .top-r {
      //   width: 250px;
      //   // border: 1px solid rgb(24, 207, 48);
      //   float: right;
      //   position: relative;
      //   top: -50px;
      // }
      // // border-bottom:1px solid #000;
    }
    .l-main {
      width: 98%;
@@ -1497,7 +1597,7 @@
      font-weight: normal;
      font-size: 14px;
      .r-b-top {
        height: 200px;
        height: 380px;
        display: flex;
        // border: 1px solid rgb(23, 201, 62);
        display: flex;
@@ -1540,13 +1640,13 @@
        }
      }
      .r-b-map {
        height: 500px;
        height: 350px;
        // border: 1px solid rgba(109, 109, 109, 0.2);
        #detailMap {
          position: relative;
          top: 25px;
          width: 100%;
          height: 500px;
          height: 350px;
        }
      }
    }

 src/views/system/cs.vue

@@ -103,10 +103,9 @@
      <div class="r-o-our">
        <avue-crud
          :option="options"
          :data="datas"
          :table-loading="loadings"
          :page="pages"
          @on-load="onLoads"
          :data="datas"
          :page="pages"
          @search-change="searchChanges"
          @search-reset="searchResets"
          @row-click="rowClicks"
@@ -120,7 +119,7 @@
</template>

<script>
import { getAll, getListliu, getListliuc } from "@/api/client/client";
import { getListliu, getListliuc } from "@/api/client/client";
import {
  getList,
  getDetail,
@@ -159,7 +158,7 @@
      datasourceBox: false,
      dialogVisible: false, //右侧弹窗
      onceData: {}, //数据
      datas: "", //cc
      datas: [], //cc
      loadings: true, //等待
      querys: {}, //搜索
      pages: {
@@ -173,6 +172,7 @@
        height: "auto",
        indexLabel: "序号",
        index: true,
        card:true,
        menu: false,
        header: false,
        searchShow: true,
@@ -207,7 +207,7 @@
          {
            label: "设备编号",
            prop: "deviceNumber",
            width: 110,
            width: 110,  
          },
          {
            label: "使用方",
@@ -762,7 +762,7 @@
      return this.selectionList[0].tenantId;
    },
  },
  methods: {
  methods: {  
    rowSave(row, done, loading) {
      add(row).then(
        () => {
@@ -1169,6 +1169,11 @@
          });
        }
      }
      // this.users.push([
      //   {

      //   }
      // ])
      this.options.column[2].dicData = this.users;
    },
    searchResets() {
@@ -1196,14 +1201,20 @@
    onLoads(pages, params = {}) {
      // this.$message.success("分页信息:" + JSON.stringify(pages));
      // this.pages.total = 40;
      console.log(1)
      this.loadings = true;
     console.log(2)
      let values = {
        ...params,
      };
        console.log(3)
      // getListliu(1, 10, {}, val.id).then((res) => {
      var useId = this.onceData.deptId;
        var useId = this.onceData.deptId;
          console.log(4)
      getListliu(pages.currentPage, pages.pageSize, values, useId).then(
        (res) => {
            console.log(5)
          console.log(pages.currentPage, pages.pageSize, values, useId,332332)
          // console.log(this.datas);
          // getListliu('1', '10', {}, '1353972967828533249').then((res) => {
          //拿到数据
@@ -1219,6 +1230,7 @@
          this.loadings = false;
        }
      );
      
    },
  },
  mounted() {},