Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

Administrator

2021-04-23 8f3062cd6729850839b02b4dc0a4a76c4322f1c4

Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue

 public/img/ydlogo.png

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

@@ -31,7 +31,7 @@
            height: 484px;
            border-radius: 10px;
            margin: 16px 15px 16px 15px;

            overflow: hidden;
            /* border: springgreen solid 0.5px; */
        }

@@ -63,11 +63,19 @@
            justify-content: space-around;
        }

        .f-l-t-center {
            width: auto;
            position: relative;
            left: -103px;
            top: 5px;
        }

        .f-l-t-r-msg {
            width: 200px;
            height: 28px;
            position: relative;
            top: 23px;
            top: 10px;
            left: -5px;
        }

        .f-l-t-r-but {
@@ -155,6 +163,7 @@
        <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>
            <div class="f-l-t-right">
                <div class="f-l-t-r-msg">{{statesss}}</div>
                <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
@@ -235,13 +244,14 @@
                deploymentTime: '',
                oldtime: '',
                newtime: '',
                machineCode: '',

                a: true,
                activeName: 'first'
            },
            methods: {
                looks(){
                   window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`;
                looks() {
                    window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=${this.ourData.state}&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`;
                },
                getdatas(dat) {

@@ -261,10 +271,18 @@
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var imgD = JSON.parse(xhr.responseText);// JSON转js
                                my.imgsl = imgD.data.length == 0? ['no'] : imgD.data;
                                // console.log(imgD)
                                var imgdatas = [];
                                if (imgD.data.length != 0) {
                                    imgdatas = imgD.data[0].paddress.split(',');
                                } else {

                                }
                                // var imgdatas = imgD.data[0].paddress.split(',');
                                my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
                                // my.imgsl = [ //最多3张照片 
                                //     "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
                                

                                //     "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
                                //     "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
                                // ]
@@ -272,7 +290,7 @@
                            }
                        }
                    }
                    this.name = dat.deviceName;
                    this.name = dat.deviceName.length >= 15 ? dat.deviceName.substring(0, 15) + '···' : dat.deviceName;
                    me.num = dat.deviceNumber;
                    this.evaluate = "空气质量";
                    this.machineCode = "无数据" && dat.deviceNumber;
@@ -289,16 +307,26 @@
                    var ct = document.getElementsByClassName('flare-liu-top')[0];
                    var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色

                    if (dat.onlineStatus == 1) {//el-tabs__active-bar
                        ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
                        this.statesss = '在线';

                    if (dat.state != '') {
                        ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
                        this.statesss = '故障';
                    } else {
                        ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
                        this.statesss = '离线';

                        if (dat.jtype != 1) {
                            if (dat.onlineStatus == 1) {//el-tabs__active-bar
                                ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
                                this.statesss = '在线';
                            } else {
                                ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                                this.statesss = '离线';
                            }
                        } else {
                            ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                            this.statesss = '警报';
                        }
                    }
                },
                handleClick(tab, event) {//标签tab点击事件

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -230,7 +230,7 @@
        //   return value;
        // }
        // );
        

        var as = evt.graphic.attributes;
        for (let key in as) {
          if (typeof as[key] == 'object') {
@@ -251,7 +251,7 @@

        // console.log(cache);
        cache = null;
        var fCard = (posi, setdata) => { // 弹窗函数
        var fCard = (posi, setdata, winSize) => { // 弹窗函数
          var that = this,
            url = './popup/html/FlareClusterLayer_v3.html',
            clickD = null,
@@ -266,103 +266,134 @@
            });
            that.layuiLayer.close(that.layuiLayer.index);
            // layer.alert('layer 新皮肤');
            that.layuiLayer.open({
              title: '',
              type: 2,
              shadeClose: false,
              shade: false,
              skin: 'demo-class',
              // id: 'onelyOne',
              maxmin: false, //开启最大化最小化按钮
              area: ['200px', '75px'],
              // area: 'auto',
              offset: posi,
              skin: 'flare',
              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', '75px'],
            //     // area: 'auto',
            //     offset: posi,
            //     skin: 'flare',
            //     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);
            //       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();
                }
            //       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,
            //   shadeClose: true,
            //   shade: false,
            //   skin: 'demo-class',
            //   id: 'onelyTwo',
            //   maxmin: false, //开启最大化最小化按钮
            //   area: ['360px', '484px'],
            //   // area: 'auto',
            //   offset: 'r',
            //   skin: 'flare',
            //   isOutAnim: false,
            //   closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
            //   content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
            //   resize: false,
            //   scrollbar: false,
            //   // tipsMore: true, //允许多个tipe
            //   // content: num,
            //   success: function (layero, index) { //成功后添加全局点击关闭
            //     // var z = document.onclick = ()=>{
            //     //   parent[0].layer.close(index);
            //     // //   // parent[0].layer.close(+index + 1);
            //     //   z = null;
            //     // }
            //     //尝试传值
            //     //js对象转json对象
            //     // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
            //     $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
            //   },
            // })
            that.layuiLayer.open({ //第二个iframe
              title: '',
              type: 2,
@@ -373,10 +404,10 @@
              maxmin: false, //开启最大化最小化按钮
              area: ['360px', '484px'],
              // area: 'auto',
              offset: 'r',
              offset: winSize,
              skin: 'flare',
              isOutAnim: false,
              closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
              closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
              resize: false,
              scrollbar: false,
@@ -392,6 +423,7 @@
                //js对象转json对象
                // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
                $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

              },
            })
          })
@@ -399,15 +431,13 @@
        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
          // console.log(evt.screenY);
          fCard(offsetMy, setdata);
          var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
          // console.log(winSize,4454645634536);
          fCard(offsetMy, setdata, winSize);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {};




        } else { };

      } else {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 
@@ -754,8 +784,9 @@
    },

    _clusterData: function () {

      //此函数当前仅适用于不使用预聚集数据的情况
      //this function currently only applies if not using preclustered data
      // console.log('改变111111111111111')
      if (this.preClustered) {
        return;
      }
@@ -841,9 +872,10 @@
          cl.singles.push(obj);
        }
      }

      for (i = 0, len = this.gridClusters.length; i < len; i++) {
        if (this.gridClusters[i].clusterCount === 1) {
// console.log(this.gridClusters)

          this._createSingle(this.gridClusters[i].singles[0]);
        } else if (this.gridClusters[i].clusterCount > 0) {
          this._createCluster(this.gridClusters[i]);
@@ -899,15 +931,21 @@
      this.singles.push(single);
      delete single.graphic;
      var symbol;
      if (single.jtype == 1) {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/yj-jingbao.png", 40, 40);
      // console.log(single.state);
      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/yj-jingbao.png", 40, 40);
        } 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);
          }
        }
      }


      var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
      var attributes = lang.clone(single);
@@ -1001,11 +1039,11 @@
      //add a text element for the label to display the count and add to the group
      var shapeCenter = this._getShapeCenter(cluster.graphicShape);
      var textShape = groupShape.createText({
          x: shapeCenter.x,
          y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
          text: cluster.clusterCount,
          align: 'middle'
        })
        x: shapeCenter.x,
        y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
        text: cluster.clusterCount,
        align: 'middle'
      })
        .setFont({
          size: this.textSymbol.font.size,
          family: this.textSymbol.font.family,
@@ -1129,10 +1167,10 @@
      //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
      var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
      var containerCircle = groupShape.createCircle({
          cx: center.x,
          cy: center.y,
          r: conCircleRadius
        })
        cx: center.x,
        cy: center.y,
        r: conCircleRadius
      })
        //.setStroke({ width: 1, color: "000" })
        .setFill(new Color([0, 0, 0, 0]));
      containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1433,11 +1471,11 @@
      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
        var textShape = tooltipGroup.createText({
            x: xPos,
            y: yPos + (i * 10),
            text: lines[i],
            align: 'middle'
          })
          x: xPos,
          y: yPos + (i * 10),
          text: lines[i],
          align: 'middle'
        })
          .setFill("#000")
          .setFont({
            size: 8,
@@ -1451,12 +1489,12 @@
      var rectPadding = 2;
      var textBox = tooltipGroup.getBoundingBox();
      var rectShape = tooltipGroup.createRect({
          x: textBox.x - rectPadding,
          y: textBox.y - rectPadding,
          width: textBox.width + (rectPadding * 2),
          height: textBox.height + (rectPadding * 2),
          r: 0
        })
        x: textBox.x - rectPadding,
        y: textBox.y - rectPadding,
        width: textBox.width + (rectPadding * 2),
        height: textBox.height + (rectPadding * 2),
        r: 0
      })
        .setFill(new Color([255, 255, 255, 0.9]))
        .setStroke({
          color: "#000",
@@ -1592,11 +1630,11 @@
      //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
      if (this.shape.flareText) {
        var flareText = this.shape.createText({
            x: this.shape.flareText.location.x,
            y: this.shape.flareText.location.y,
            text: this.shape.flareText.text,
            align: 'middle'
          })
          x: this.shape.flareText.location.x,
          y: this.shape.flareText.location.y,
          text: this.shape.flareText.text,
          align: 'middle'
        })
          .setFill(layer.textSymbol.color)
          .setFont({
            size: this.shape.flareText.textSize,

 public/map/widgets/supervisoryMap/SupervisoryMap.css

@@ -352,7 +352,7 @@
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #377DFF;
    /* background: #377DFF; */
    border: none;
    border-radius: 5px;
    cursor: pointer;
@@ -361,7 +361,7 @@

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(2),
.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(2) {
    width: 68px;
    width: 138px;
}

.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(4),

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -260,6 +260,7 @@
      var mySelf = this;
      objThis._map.addLayer(objThis._siteLayer);
      var that = this;
      // console.log(mySelf.clusterLayer)
      that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), '');
      // 顶部tab得切换事件
      $('.analysis-and-judgment-tab li').click(function () {
@@ -462,13 +463,13 @@

        // console.log(that.clusterLayer, that._map, 6)
        // console.log(id, 'id');
        // console.log(that.clusterLayer.indexs);
        // console.log(that.clusterLayer);
        var Tattributes = null
          , ds = that.clusterLayer.allData;
        for (var key in ds) {
          if (ds[key].id == id){
          if (ds[key].id == id) {
            Tattributes = ds[key];
          } 
          }
        }
        if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var evtdata = {};
@@ -491,47 +492,47 @@
      // $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
      //   event.stopPropagation();
      // })
      $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
        event.stopPropagation();
        var lgtd = Number($(this).attr('lgtd'));
        var lttd = Number($(this).attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
      // $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
      //   event.stopPropagation();
      //   var lgtd = Number($(this).attr('lgtd'));
      //   var lttd = Number($(this).attr('lttd'));
      //   var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
      //   that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大

        var y = +window.innerHeight / 2 + 200;
        var x = (+window.innerWidth - 360) / 2 + 360 + 70;
        // document.elementFromPoint(x, y).click();
        // console.log(x, y)
      //   var y = +window.innerHeight / 2 + 200;
      //   var x = (+window.innerWidth - 360) / 2 + 360 + 70;
      //   // document.elementFromPoint(x, y).click();
      //   // console.log(x, y)

        // var a = document.elementFromPoint(21, 122);
        // console.log(a);
      //   // var a = document.elementFromPoint(21, 122);
      //   // console.log(a);

        // console.log(that.clusterLayer, that._map, 6)
        // console.log(id, 'id');
        // console.log(that.clusterLayer.indexs);
        var Tattributes = null
          , ds = that.clusterLayer.allData;
        for (var key in ds) {
          if (ds[key].id == id){
            Tattributes = ds[key];
          } 
        }
        if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var evtdata = {};
          evtdata = {
            graphic: {
              attributes: Tattributes,
            },
            screenX: x,
            screenY: y,
          }
          that.clusterLayer._clickOpenOnclick(evtdata, '控制端', that.clusterLayer.indexs);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else {
        };
      })
      //   // console.log(that.clusterLayer, that._map, 6)
      //   // console.log(id, 'id');
      //   // console.log(that.clusterLayer.indexs);
      //   var Tattributes = null
      //     , ds = that.clusterLayer.allData;
      //   for (var key in ds) {
      //     if (ds[key].id == id) {
      //       Tattributes = ds[key];
      //     }
      //   }
      //   if (mySelf.onceTimeMethod == null) {//防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
      //     var evtdata = {};
      //     evtdata = {
      //       graphic: {
      //         attributes: Tattributes,
      //       },
      //       screenX: x,
      //       screenY: y,
      //     }
      //     that.clusterLayer._clickOpenOnclick(evtdata, '控制端', that.clusterLayer.indexs);
      //     mySelf.onceTimeMethod = setTimeout(() => {
      //       mySelf.onceTimeMethod = null;
      //     }, mySelf.onceTime);
      //   } else {
      //   };
      // })
      // 警情列表中得热力图是否选中事件
      $('#policeHeatMap').click(function () {
        that.checkBoxSelect(this);
@@ -797,6 +798,7 @@
    getEquipmentTable: function (dom, deviceType) {
      dom.empty();
      var that = this;
      // console.log(that.clusterLayer)
      // console.log(dom, deviceType);
      // dom.append(deviceType);
      // var str = "<td class='locationb'> <input type='button' value='定位'" + ' lgtd=' + 114.9285 + ' lttd=' + 25.850693 + "></td>"
@@ -810,35 +812,89 @@
      // dom.append(str)

      $.ajax({
        url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
        url: '/api/blade-jfpts/equipment/equipment/listAll?deviceType=' + deviceType,
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
          var result = data.data;
          // console.log(data)
          var oldData = data.data
          var result = [];
          // console.log(result)
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();


          if(deviceType == ''){
            result = oldData;
          }else if(deviceType == '在线'){
            for (var key in oldData){
              // console.log(oldData[key]);
              if(oldData[key].state == '' && oldData[key].jtype != 1 && oldData[key].onlineStatus == 1){
                result.push(oldData[key]);
              }
            }
          }else if(deviceType == '离线'){
            for (var key in oldData){
              // console.log(oldData[key]);
              if(oldData[key].state == '' && oldData[key].jtype != 1 && oldData[key].onlineStatus != 1){
                result.push(oldData[key]);
              }
            }
          }else if(deviceType == '警报'){
            for (var key in oldData){
              // console.log(oldData[key]);
              if(oldData[key].state == '' && oldData[key].jtype == 1){
                result.push(oldData[key]);
              }
            }
          }else if(deviceType == '故障'){
            for (var key in oldData){
              // console.log(oldData[key]);
              if(oldData[key].state != ''){
                result.push(oldData[key]);
              }
            }
          }


          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');
            var stares = '';

            a = Number(i) + 1;
            str += "<tr term-listid=" + result[i].id + ">";
            str += '<td>' + a + '</td>';
            str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
            str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
            // str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
            str += '<td>' + result[i].deviceNumber + '</td>';
            str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            // console.log(result[i].state);

            
            if (result[i].state != '') {
              stares = '故障';
              str += "<td class='location'> <input style='background-image:linear-gradient(to right, #F49966 , #F49966' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
            } else {
              if (result[i].jtype != 1) {
                if (result[i].onlineStatus == 1) {//el-tabs__active-bar
                  stares = '在线';
                  str += "<td class='location'> <input style='background-image:linear-gradient(to right, #32C1A2 , #32C1A2' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
                } else {
                  stares = '离线';
                  str += "<td class='location'> <input style='background-image:linear-gradient(to right, #CDCDCD , #CDCDCD' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
                }
              } else {
                stares = '警报';
                str += "<td class='location'> <input style='background-image:linear-gradient(to right, #F35B5B , #F35B5B' type='button' value=" + stares + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
              }
            }
            str += '</tr>';
            dom.append(str);
            str = '';
          }


        }
      })
    },

 public/map/widgets/supervisoryMap/template.html

@@ -22,11 +22,10 @@
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                                <li>在线</li>
                                <li>警报</li>
                                <li>故障</li>
                                <li>离线</li>
                            </ul>
                        </div>
                    </li>
@@ -43,9 +42,8 @@
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                    <th>设备状态</th>
                                </tr>
                            </thead>
                        </table>

 src/page/crumbsL/crumbsL.vue

@@ -4,16 +4,29 @@
      <div class="titles">您的位置：</div>
      <!-- <button @click="cc">cccc</button> -->
      <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置：</el-breadcrumb-item> -->
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> -->
      <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> -->
      <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="item.path"
          v-for="item of breadListLast"
          :key="item.path"
        style="border: hotpink 1px solid"
        >
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      </el-breadcrumb> -->
      <div
        class="ourCrumbsl"
        v-for="(item, index) of breadListLast"
        :key="item.path"
      >
      <div class="aaa" v-show="breadListLast.length != index + 1">
        <a href="javascript:;" @click="$router.push({ path: item.path})">{{ item.name }}</a>&nbsp/&nbsp
      </div>
      <div class="bbb" v-show="breadListLast.length == index + 1">
        <div>{{ item.name }}</div>
      </div>
      </div>
    </div>
    <!-- <router-view></router-view> -->
  </div>
@@ -64,9 +77,11 @@
  methods: {
    loadChange(states) {
      //导航栏进就是一级路由，其他页面push
      if (this.isrf) {//刷新读取localStorage
      if (this.isrf) {
        //刷新读取localStorage
        this.breadListLast = JSON.parse(localStorage.getItem("crumbsl"));
      } else {//关闭重写
      } else {
        //关闭重写
        var path = this.$route.path,
          p = path.split("/").pop(),
          n = this.$route.name,
@@ -92,8 +107,8 @@
          //判断是否有重复项，有则删除其后路由↓
          var ourP = this.breadListLast;
          for (var os in ourP) {
            if(n == '首页'){
              n = '数据模式'
            if (n == "首页") {
              n = "数据模式";
            }
            if (ourP[os].name == n && os != ourP.length - 1) {
              this.breadListLast.splice(
@@ -104,11 +119,11 @@
            }
          }
          // console.log(p, n, "写入多级面包屑");
         
        }
        this.sOld = s;
        // window.localStorage.crumbsl = this.breadListLast;
        localStorage.setItem("crumbsl", JSON.stringify(this.breadListLast));

      }
    },
    loadChange2(states) {
@@ -285,8 +300,15 @@
      console.log("首次被加载");
      window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值
    } else if (window.name == "isReload") {
      this.isrf = true;
      console.log("页面被刷新");
      var abb = localStorage.getItem("crumbsl");
      if (abb) {
        this.isrf = true;
         console.log("页面被刷新");
      } else {
        this.isrf = false;
         console.log("页面被刷新,但后台没有数据");
      }
     
    }
    this.loadChange("moun");
  },
@@ -305,8 +327,19 @@
    background: #fff;
    .titles {
      position: absolute;
      top: 17px;
      top: 17.15px;
      left: 5px;
      font-weight: 400;
    }
    .ourCrumbsl {
      // border: hotpink 1px solid;
      float: left;
      font-weight: 400;
      position: relative;
      top: -3px;
      a{
        font-weight: 400;
      }
    }
  }
}

 src/page/index/top/index.vue

@@ -22,7 +22,7 @@
    </div>
    <div class="top-bar__right">
      <img
        src="/img/ydlg.png"
        src="/img/ydlogo.png"
        style="height: 44px; vertical-align: middle"
        alt=""
      />
@@ -97,6 +97,7 @@
          ></i>
        </div>
      </el-tooltip>
      <!-- 顶部导航用户图片位置 -->
      <img class="top-bar__img" :src="userInfo.avatar" />
      <el-dropdown>
        <span class="el-dropdown-link">

 src/store/modules/common.js

@@ -4,7 +4,7 @@
 * @Author: song
 * @Date: 2021-01-26 08:56:33
 * @LastEditors: song
 * @LastEditTime: 2021-03-19 11:59:23
 * @LastEditTime: 2021-04-23 13:45:26
 */
import {
  setStore,
@@ -33,7 +33,7 @@
    showMenu: true,
    showColor: true,
    colorName: getStore({name: 'colorName'}) || '#409EFF',
    themeName: getStore({name: 'themeName'}) || 'theme-vip',
    themeName: getStore({name: 'themeName'}) || 'theme-white',
    lockPasswd: getStore({name: 'lockPasswd'}) || '',
    website: website,
    //判断是否是导航栏点击的路由，是则↓属性自加

 src/store/modules/user.js

@@ -103,11 +103,12 @@
      })
    },
    //获取用户信息
    GetUserInfo({commit}) {
    GetUserInfo({commit}) {//获取用户信息liu++
      return new Promise((resolve, reject) => {
        getUserInfo().then((res) => {
          const data = res.data.data;
          commit('SET_ROLES', data.roles);
          console.log(data);
          resolve(data);
        }).catch(err => {
          reject(err);

 src/views/clientManagement/clientManagement.vue

@@ -570,7 +570,7 @@
      "form.map": {
        // form是表单或者表格绑定的数据集，v-model='form'
        handler(val) {
          debugger
          
          if (val) {
            this.form.wd = val.latitude;
            this.form.jd = val.longitude;

 src/views/dataL/dataL.vue

@@ -8,11 +8,25 @@
              {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
            </p>
            <div class="l-t-state">
              <!-- dataState: ["掉线", "在线", "故障", "预警"], 
                if (s != "") {
                    states = "故障";
                  } else {
                    if (j != 1) {
                      if (o == 1) {
                        states = "在线";
                      } else {
                        states = "掉线";
                      }
                    } else {
                      states = "预警";
                    }
                  }-->
              <span
                :class="{
                  'l-t-s-grey': state == dataState[0],
                  'l-t-s-green': state == dataState[1],
                  'l-t-s-yewllo': state == dataState[3],
                  'l-t-s-yewllo': state == dataState[2],
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
@@ -468,7 +482,7 @@
      <div class="r-one">
        <div class="r-heard">
          <div class="r-heard-top">部署信息</div>
          <button @click="modifyl" class="r-but-top">修改</button>
          <!-- <button @click="modifyl" class="r-but-top">修改</button> -->
        </div>
        <div class="r-body">
          <div class="r-b-top">
@@ -945,25 +959,30 @@
        size: "10",
      };
      var imgdadta = {
        deviceName: this.myDeviceNumber,
        deviceNumber: this.myDeviceNumber,
      };
      getdataL(data).then((res) => {
        var data = res.data.data.records[0];
        var setimgl = null;
        //插入图片api获取图片
// this.stetDetails(data);
        getImg(imgdadta,'post').then((res) => {
          var imgdatas = res.data.data;
          // console.log(res);
      //     imgdatas = [ //最多5张照片 
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
      //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
        // this.stetDetails(data);
        getImg(imgdadta, "post").then((res) => {
          // console.log(res.data.data.length != 0)
          var imgdatas = [];
          if (res.data.data.length != 0) {
            imgdatas = res.data.data[0].paddress.split(",");
          } else {
          }
          // console.log(imgdatas);
          // imgdatas = [ //最多5张照片
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
          //   "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

      //   "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
      //   "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
      // ];
          setimgl =  imgdatas.length == 0? ['no'] : imgdatas;
          //   "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
          // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG",
          // ];
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        // console.log(data);
@@ -982,16 +1001,34 @@
        o = this.a.onlineStatus,
        s = this.a.state,
        j = this.a.jtype;
      if (o == 0) {
        states = "掉线";
      } else if (o == 1) {
        states = "在线";
      } else if (s != "") {
      // if (o == 0) {
      //   states = "掉线";
      // } else if (o == 1) {
      //   states = "在线";
      // } else if (s != "") {
      //   states = "故障";
      // } else if (j != 2) {
      //   states = "预警";
      // }
      if (s != "") {
        states = "故障";
      } else if (j != 2) {
        states = "预警";
      } else {
        if (j != 1) {
          if (o == 1) {
            states = "在线";
          } else {
            states = "掉线";
          }
        } else {
          states = "预警";
        }
      }
      this.state = "无数据" && states;
      // console.log(o, 1000);
      // console.log(s, 1000);
      // console.log(j, 1000);

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

      this.evaluate = "空气质量";
      this.machineCode = "无数据" && this.a.deviceNumber;
@@ -1248,16 +1285,16 @@
              border: 1px solid transparent;
            }
            .l-t-s-grey {
              background-color: rgb(187, 187, 187);
              background-color: #CDCDCD;
            }
            .l-t-s-green {
              background-color: rgb(41, 202, 135);
              background-color: #32C1A2;
            }
            .l-t-s-yewllo {
              background-color: rgb(240, 181, 20);
              background-color: #F49966;
            }
            .l-t-s-red {
              background-color: rgba(247, 28, 28, 0.877);
              background-color: #F35B5B;
            }
          }
        }

 src/views/policeTracking/policeTracking.vue

@@ -22,148 +22,149 @@
            </div>
          </div>

          <el-form
            :model="form"
            label-position="right"
            size="mini"
            class="policeForm"
            label-width="100px"
            style="
              background: #fff;
              margin-top: 20px;
              margin-left: 10px;
              margin-right: 10px;
              height: calc(100% - 40px);
              width: calc(100% - 20px);
            "
          >
            <el-row>
              <el-col span="12">
                <el-form-item label="报警人">
                  <el-input
                    disabled="true"
                    v-model="form.galarmPeople"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="报警人电话">
                  <el-input
                    disabled="true"
                    v-model="form.phoneNumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="负责人">
                  <el-input
                    disabled="true"
                    v-model="form.oneContacts"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="负责人电话">
                  <el-input
                    disabled="true"
                    v-model="form.onePhone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="省份" class="cityClassParams">
                  <avue-form :option="itemOption" v-model="form"></avue-form>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="事发地址">
                  <el-input
                    disabled="true"
                    v-model="form.place"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="警情类型">
                  <el-input
                    disabled="true"
                    v-model="form.waringType"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="设备编号">
                  <el-input
                    disabled="true"
                    v-model="form.deviceNumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="接警人">
                  <el-input
                    disabled="true"
                    v-model="form.alarmPeople"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="报警内容">
                  <el-input
                    disabled="true"
                    v-model="form.content"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="报警时间">
                  <el-input
                    disabled="true"
                    v-model="form.alarmTime"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="历史视频">
                  <el-button type="primary" @click.stop="oldVideoSatart = true"
                    >视频播放
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col span="12">
                <el-form-item label="备注">
                  <el-input
                    disabled="true"
                    v-model="form.bz"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-card>
            <el-form
              :model="form"
              label-position="right"
              size="mini"
              class="policeForm"
              label-width="100px"
              style="
                background: #fff;
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
            >
              <el-row>
                <el-col span="12">
                  <el-form-item label="报警人">
                    <el-input
                      disabled="true"
                      v-model="form.galarmPeople"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="报警人电话">
                    <el-input
                      disabled="true"
                      v-model="form.phoneNumber"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="负责人">
                    <el-input
                      disabled="true"
                      v-model="form.oneContacts"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="负责人电话">
                    <el-input
                      disabled="true"
                      v-model="form.onePhone"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="省份" class="cityClassParams">
                    <avue-form :option="itemOption" v-model="form"></avue-form>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="事发地址">
                    <el-input
                      disabled="true"
                      v-model="form.place"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="警情类型">
                    <el-input
                      disabled="true"
                      v-model="form.waringType"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="设备编号">
                    <el-input
                      disabled="true"
                      v-model="form.deviceNumber"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="接警人">
                    <el-input
                      disabled="true"
                      v-model="form.alarmPeople"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="报警内容">
                    <el-input
                      disabled="true"
                      v-model="form.content"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="报警时间">
                    <el-input
                      disabled="true"
                      v-model="form.alarmTime"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="历史视频">
                    <el-button type="primary" @click.stop="oldOpenVideo"
                      >视频播放
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="备注">
                    <el-input
                      disabled="true"
                      v-model="form.bz"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div
            v-if="form.jtype != 2"
@@ -185,7 +186,9 @@
                <i class="el-icon-document avue-group__icon"></i>
                <h1 class="avue-group__title">人员信息</h1>
                <el-button
                  @click="onSubmit('通知' + ensureNames, 1), (flag = false)"
                  @click="
                    onSubmit('通知' + ensureNames, 1, ensureId), (flag = false)
                  "
                  size="small"
                  style="position: absolute; right: 0"
                  :disabled="!flag"
@@ -329,147 +332,141 @@
            </div>
          </div>

          <el-form
            :model="security"
            label-position="right"
            size="mini"
            label-width="100px"
            style="
              background: #fff;
              margin-top: 20px;
              margin-left: 10px;
              margin-right: 10px;
              height: calc(100% - 40px);
              width: calc(100% - 20px);
            "
          >
            <el-row>
              <el-col span="12">
                <el-form-item label="人员编号">
                  <el-input
                    disabled="true"
                    v-model="security.snumber"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="人员名称">
                  <el-input
                    disabled="true"
                    v-model="security.sname"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="联系电话">
                  <el-input
                    disabled="true"
                    v-model="security.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>

          <div class="demo-image__placeholder">
            <div
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
          <el-card>
            <el-form
              :model="security"
              label-position="right"
              size="mini"
              label-width="100px"
              style="
                background: #fff;
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-order avue-group__icon"></i>
                  <h1 class="avue-group__title">警情反馈</h1>
                </div>
              <el-row>
                <el-col span="12">
                  <el-form-item label="人员编号">
                    <el-input
                      disabled="true"
                      v-model="security.snumber"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="人员名称">
                    <el-input
                      disabled="true"
                      v-model="security.sname"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="12">
                  <el-form-item label="联系电话">
                    <el-input
                      disabled="true"
                      v-model="security.phone"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-s-order avue-group__icon"></i>
                <h1 class="avue-group__title">警情反馈</h1>
              </div>
            </div>
          </div>

          <el-card>
            <el-input
              disabled="true"
              type="textarea"
              v-model="security.describe"
              autocomplete="off"
            ></el-input>
          </el-card>

            <div class="block">
              <div
                style="margin-top: 20px"
                role="tab"
                aria-expanded="true"
                aria-controls="el-collapse-content-823"
                aria-describedby="el-collapse-content-823"
              >
                <div
                  role="button"
                  tabindex="0"
                  class="el-collapse-item__header focusing is-active"
                >
                  <div class="avue-group__header avue-group">
                    <i class="el-icon-camera-solid avue-group__icon"></i>
                    <h1 class="avue-group__title">现场图片</h1>
                  </div>
                </div>
              </div>
              <el-card class="scene-image-box">
                <el-image
                  v-for="(item, index) in imgSrc"
                  :key="index"
                  :src="item"
                  :preview-src-list="srcList"
                  v-show="imgSrc.length > 0"
                ></el-image>
                <span v-show="imgSrc.length == 0">暂无现场图片</span>
              </el-card>
            </div>
            <div class="block">
              <div
                style="margin-top: 20px"
                role="tab"
                aria-expanded="true"
                aria-controls="el-collapse-content-823"
                aria-describedby="el-collapse-content-823"
              >
                <div
                  role="button"
                  tabindex="0"
                  class="el-collapse-item__header focusing is-active"
                >
                  <div class="avue-group__header avue-group">
                    <i class="el-icon-video-camera-solid avue-group__icon"></i>
                    <h1 class="avue-group__title">现场视频</h1>
                  </div>
                </div>
              </div>
              <div>
                <video
                  :src="feedbackVideo"
                  style="width: 100%; height: 100%; object-fit: fill"
                  controls
                  v-show="feedbackVideo != ''"
                ></video>
                <span v-show="feedbackVideo == ''">暂无现场视频</span>
          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-camera-solid avue-group__icon"></i>
                <h1 class="avue-group__title">现场图片</h1>
              </div>
            </div>
          </div>

          <el-card class="scene-image-box">
            <el-image
              v-for="(item, index) in imgSrc"
              :key="index"
              :src="item"
              :preview-src-list="srcList"
              v-show="imgSrc.length > 0"
            ></el-image>
            <span v-show="imgSrc.length == 0">暂无现场图片</span>
          </el-card>

          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-video-camera-solid avue-group__icon"></i>
                <h1 class="avue-group__title">现场视频</h1>
              </div>
            </div>
          </div>

          <el-card>
            <video
              :src="feedbackVideo"
              style="width: 100%; height: 100%; object-fit: fill"
              controls
              v-show="feedbackVideo != ''"
            ></video>
            <span v-show="feedbackVideo == ''">暂无现场视频</span>
          </el-card>

          <el-row :align="center" style="margin-top: 40px">
            <el-col :offset="10">
@@ -502,7 +499,6 @@
        :visible.sync="oldVideoSatart"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @opened="oldOpenVideo"
        @close="vaddress = ''"
        append-to-body
      >
@@ -590,6 +586,7 @@
      tableData: [],
      multipleSelection: [],
      ensureNames: "",
      ensureId: "",
      baseUrl: "",
      oldVideoSatart: false,
      vaddress: null,
@@ -621,7 +618,10 @@
        arr.push(item);
      }
    });
    this.toggleSelection(arr);

    if (this.form.jtype != 2) {
      this.toggleSelection(arr);
    }
  },
  methods: {
    getDate() {
@@ -732,23 +732,27 @@
          currenS,
      };
    },
    onSubmit(zc, jtype) {
    onSubmit(zc, jtype, ensureId) {
      var that = this;
      var subData = {
        jid: this.form.id,
        jtype: jtype,
        rid: this.form.alarmId,
        bz: this.form.bz,
        snumber: this.form.alarmId,
        sname: this.form.alarmPeople,
        zc: zc,
        zctime: this.getDate().current,
      };
      if (ensureId && ensureId != "") {
        subData.securityArr = ensureId;
      }
      axios
        .post(
          "/api/blade-jfpts/alarm/alarm/updateJtype",
          {},
          {
            params: {
              jid: this.form.id,
              jtype: jtype,
              rid: this.form.alarmId,
              bz: this.form.bz,
              snumber: this.form.alarmId,
              sname: this.form.alarmPeople,
              zc: zc,
              zctime: this.getDate().current,
            },
            params: subData,
          }
        )
        .then(function (res) {
@@ -816,8 +820,12 @@
    },

    handleSelectionChange(val) {
      console.log(val, 9898);
      this.ensureNames = "";
      this.ensureId = "";
      val.forEach((item, index) => {
        this.ensureId += item.id;
        this.ensureId += ",";
        if (index == val.length - 1) {
          this.ensureNames += item.name;
          this.ensureNames += "。";
@@ -848,7 +856,8 @@
          jid: this.form.id,
        },
      }).then((resdata) => {
        this.audios = resdata.data.data.records;
        if (resdata.data.data.records.length > 0)
          this.audios = resdata.data.data.records;
      });
    },

@@ -860,22 +869,28 @@
          jid: this.form.id,
        },
      }).then((resdata) => {
        console.log(resdata.data.data[0], 56569);
        this.security = resdata.data.data[0].List[0];
        this.imgSrc = resdata.data.data[0].tp;
        this.srcList = resdata.data.data[0].tp;
        this.feedbackVideo = resdata.data.data[0].sp[0];
        if (resdata.data.data.length > 0) {
          if (resdata.data.data[0].List.length > 0)
            this.security = resdata.data.data[0].List[0];
          if (resdata.data.data[0].tp.length > 0) {
            this.imgSrc = resdata.data.data[0].tp;
            this.srcList = resdata.data.data[0].tp;
          }
          if (resdata.data.data[0].sp.length > 0) {
            this.feedbackVideo = resdata.data.data[0].sp[0];
          }
        }
      });
    },

    oldOpenVideo() {
      getclient(this.form.id).then((res) => {
        if (res.data.data.vaddress != "") {
           this.vaddress = res.data.data.vaddress;
          this.vaddress = res.data.data.vaddress;
        }
        this.oldVideoSatart = true;
      });
    }

    },
  },
};
</script>

 src/views/supervisoryConsole/card.vue

@@ -52,7 +52,7 @@
            "
          >
            <div>{{ item.deviceName }}</div>
            <div style="width: 80%;">{{ item.street }}</div>
            <div style="width: 80%">{{ item.street }}</div>

            <div class="cet">
              {{
@@ -129,7 +129,7 @@
        this.loading = false;
      }, 2000);
    },
    

    inputSearchBtn() {
      this.getEquipmentLists();
    },
@@ -161,11 +161,7 @@
          });
        } else if (this.radio == "仅显示设备掉线") {
          res.data.data.forEach((item) => {
            if (item.jtype == 1 && item.onlineStatus != 1) {
              f.push(item);
            } else {
              if (item.onlineStatus != 1) b.push(item);
            }
            if (item.onlineStatus != 1) b.push(item);
          });
        } else if (this.radio == "仅显示设备故障") {
          res.data.data.forEach((item) => {

 src/views/supervisoryConsole/data.vue

@@ -78,7 +78,7 @@
            class="info-content-table"
            :data="tableData"
            stripe
            style="width: 100%; margin: 10px"
            style="width: 100%; margin: 0 10px"
            max-height="380px"
            :resizable="false"
          >

 vue.config.js

@@ -7,42 +7,44 @@
 * @LastEditTime: 2021-01-29 15:58:39
 */
module.exports = {
    //路径前缀
    publicPath: "./",
    lintOnSave: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        //忽略的打包文件
        config.externals({
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
        });
        const entry = config.entry('app');
        entry.add('babel-polyfill').end();
        entry.add('classlist-polyfill').end();
        entry.add('@/mock').end();
    },
    css: {
        extract: { ignoreOrder: true }
    },
    //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
    devServer: {
        port: 1888,
        proxy: {
            '/api': {
                //本地服务接口地址
              // target: 'http://localhost:82/',
              target: 'https://web.byisf.com/api/',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',
                ws: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
  //路径前缀
  publicPath: "./",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
  css: {
    extract: {
      ignoreOrder: true
    }
  },
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 1888,
    proxy: {
      '/api': {
        //本地服务接口地址
        // target: 'http://192.168.0.109:82/',
        target: 'https://web.byisf.com/api/',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
};