地图修改 详情图片获取

liuyg

2021-04-23 e060b5724d307c1a3bc8015bf8d8a815c2aaca52

地图修改 详情图片获取

 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=&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,19 @@
                            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 +291,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 +308,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

@@ -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 {
        // var taxLotExtent = evt.graphic.geometry.getExtent(); 

 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,12 +812,12 @@
      // 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)
          console.log(result)
          var str = '';
          that.entitysData = [];
          that.analysisAddEntitys.clear();
@@ -825,20 +827,38 @@
              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,9 @@
                        <div class='select-list'>
                            <ul>
                                <li>全部</li>
                                <li>一体化摄像头</li>
                                <li>普通枪式摄像头</li>
                                <li>红外夜视防水型摄像头</li>
                                <li>球型摄像头</li>
                                <li>高速球</li>
                                <li>在线</li>
                                <li>警报</li>
                                <li>离线</li>
                            </ul>
                        </div>
                    </li>
@@ -43,9 +41,8 @@
                                <tr>
                                    <th>序号</th>
                                    <th>设备名称</th>
                                    <th>设备类型</th>
                                    <th>设备编码</th>
                                    <th>操作</th>
                                    <th>设备状态</th>
                                </tr>
                            </thead>
                        </table>

 src/views/dataL/dataL.vue

@@ -945,7 +945,7 @@
        size: "10",
      };
      var imgdadta = {
        deviceName: this.myDeviceNumber,
        deviceNumber: this.myDeviceNumber,
      };
      getdataL(data).then((res) => {
        var data = res.data.data.records[0];
@@ -953,15 +953,21 @@
        //插入图片api获取图片
// this.stetDetails(data);
        getImg(imgdadta,'post').then((res) => {
          var imgdatas = res.data.data;
          // console.log(res);
      //     imgdatas = [ //最多5张照片 
          // 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",
        // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG",
      // ];
          setimgl =  imgdatas.length == 0? ['no'] : imgdatas;
          this.stetDetails(data, setimgl);