地图 和详情 视频和 top 热力图细节

liuyg

2021-04-28 53184b0ce284a6784356e1d1a2b57d86f6a9d5c1

地图  和详情  视频和 top  热力图细节

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

@@ -12,7 +12,10 @@
    <!-- element ui -->
    <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script>

    <!-- axios -->
    <script src='../../lib/axios.js'></script>
    <!-- 视频 -->
    <script src='../../../realVideo/hls.js'></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
@@ -225,12 +228,8 @@
                    </div>
                </el-tab-pane>
                <el-tab-pane label="现场视频" name="second">
                    <!-- {{aoud}} -->
                    <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="aoud" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                    <video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src="">
                    </video>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
            </el-tabs>
@@ -254,7 +253,7 @@
                // names: '',
                contacts: '',
                deptname: '',//使用方
                aoud: '',//视频
                ourd: '',//视频data
                calls: '',
                imgsl: [],
                deploymentTime: '',
@@ -362,39 +361,91 @@
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var data = JSON.parse(xhr.responseText);// JSON转js
                                var ourd = data.data,
                                    cl = ourd.channelNumber,
                                    deviceCode = ourd.serialNumber;
                                my.deptname = ourd.deptName;
                                // console.log(data,1111111111111)
                                var xhr2 = null//视频请求
                                    , url = 'https://web.byisf.com:18000/GetPlayUrl?deviceCode='+ deviceCode +'&chl=' + cl;
                                if (XMLHttpRequest) { //http请求
                                    xhr2 = new XMLHttpRequest();
                                } else {
                                    xhr2 = new ActiveXObject("Microsoft.XMLHTTP");

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

                                        }
                                    }
                                }
                                my.ourd = data.data;
                                my.deptname = my.ourd.deptName;
                            }
                        }
                    }
                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                },
                openRealVideoBox(serialNumber, channelNumber) {
                    var that = this;
                    var newAxios = axios.create({
                        baseURL: "https://web.byisf.com:18000",
                        withCredentials: false,
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded",
                        },
                    });

                    //this.form.serialNumber
                    newAxios
                        .post(
                            "/api_control",
                            {},
                            {
                                params: {
                                    param: JSON.stringify({ PktType: "GetAccessToken" }),
                                },
                            }
                        )
                        .then((res) => {
                            newAxios
                                .get(
                                    `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
                                )
                                .then((result) => {
                                    that.videoSource = result.data.data.m3u8;
                                    if (Hls.isSupported()) {
                                        var dom = document.getElementById("real_video_conversation");
                                        that.hls = new Hls();
                                        var m3u8Url = decodeURIComponent(that.videoSource);
                                        that.hls.loadSource(m3u8Url);
                                        that.hls.attachMedia(dom);
                                        that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                                            dom.play();
                                        });
                                        that.hls.on(Hls.Events.ERROR, function (event, data) {
                                            console.log(data, 4566824159, "视频播放有问题！！！");
                                            if (data.fatal) {
                                                switch (data.type) {
                                                    case Hls.ErrorTypes.NETWORK_ERROR:
                                                        // try to recover network error
                                                        console.log(
                                                            "fatal network error encountered, try to recover"
                                                        );
                                                        that.hls.startLoad();
                                                        break;
                                                    case Hls.ErrorTypes.MEDIA_ERROR:
                                                        console.log(
                                                            "fatal media error encountered, try to recover"
                                                        );
                                                        that.hls.recoverMediaError();
                                                        break;
                                                }
                                            }
                                        })
                                    }
                                })
                        })
                }
            },
            watch: {
                activeName() {
                    if (this.activeName == "second") {
                        this.i++;
                        this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber);
                    } else {
                        var dom = document.getElementById("real_video_conversation");
                        if (dom.getAttribute("src") != "") {
                            dom.pause();
                            dom.setAttribute("src", "");
                            this.hls.destroy();
                        }
                    }
                },
            },
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
@@ -404,7 +455,7 @@
                    this.getUser(this.ourData.id);
                    // console.log(this.ourData);
                    this.getdatas(this.ourData);
                },100);
                }, 50);


            }

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -73,12 +73,15 @@
      this.maxFlareCount = options.maxFlareCount || 8;
      this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
      this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
      var defaultTextSymbol = new TextSymbol()
      var defaultTextSymbol = new TextSymbol()//聚合字体
        .setColor(new Color([255, 255, 255]))
        .setAlign(Font.ALIGN_START)
        .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        .setFont(new Font("15pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        .setVerticalAlignment("middle");
      defaultTextSymbol.font.size = 30;
      defaultTextSymbol.yoffset=100;
      // defaultTextSymbol.line.algin = 30;
      console.log(defaultTextSymbol,2123445453)
      this.textSymbol = options.textSymbol || defaultTextSymbol;
      this.flareShowMode = options.flareShowMode || "mouse";

@@ -1539,7 +1542,7 @@
      tooltipGroup.rawNode.setAttribute("class", "tooltip-text");

      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
      for (var i = 0, len = lines.length; i < len; i++) {//聚合字体
        var textShape = tooltipGroup.createText({
          x: xPos,
          y: yPos + (i * 10),
@@ -1548,7 +1551,7 @@
        })
          .setFill("#000")
          .setFont({
            size: 8,
            size: 8,//聚合字体大小
            family: this.textSymbol.font.family,
            weight: this.textSymbol.font.weight
          });

 public/map/widgets/supervisoryMap/SupervisoryMap.js

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


        // console.log($('#policeHeatMap').prop('checked') == true)
@@ -735,6 +735,33 @@
        // console.log(this,text,'text()')
        // console.log(that.tabIndex,'tabIndex')


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


        $(this).parent().parent().prev().html(text + '<i></i>');
        $(this).parent().parent().stop().slideUp(0);


 src/router/views/index.js

@@ -352,6 +352,7 @@
},{//路由占位
    path: '/dataL',
    redirect: '/dataL/hFive',
    component: Layout,
    children: [{
        path: 'hFive',
        name: '提交激活路口',
@@ -365,6 +366,7 @@
{
    path: '/patrolManagement',
    redirect: '/policeInformationDistribution/patrolManagement',
    component: Layout,
    children: [{
        path: 'patrolManagement',
        name: '巡逻管理',
@@ -377,6 +379,7 @@
},{
    path: '/policeInformationDistribution',
    redirect: '/policeInformationDistribution/policeManagementTeam',
    component: Layout,
    children: [{
        path: 'policeManagementTeam',
        name: '处警队伍管理',
@@ -389,6 +392,7 @@
},{
    path: '/report',
    redirect: '/report/reportConfiguration',
    component: Layout,
    children: [{
        path: 'reportConfiguration',
        name: '报表配置',
@@ -401,6 +405,7 @@
},{
    path: '/report',
    redirect: '/report/announcementReport',
    component: Layout,
    children: [{
        path: 'announcementReport',
        name: '公告报表',

 src/views/clientManagement/clientManagement.vue

@@ -1038,15 +1038,19 @@
        });

      }, handleStart(row) {

        console.log(row,11111111111);
        row = this.selectRow;
        console.log(row,22222222222);
        var arr = [];
        console.log(this.$store.state.tags.tagList,3333333);
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
            arr.push(item);
          }
        });
        this.$store.state.tags.tagList = arr;
        console.log(arr)
        console.log(arr,444444444444);
        this.$router.push({
          path: `/real/video/`, query: row
        });

 src/views/dataL/dataL.vue

@@ -18,8 +18,8 @@
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span
              >&nbsp
              ></span>
              &nbsp
              <span>{{ state }}</span>
            </div>
            <div class="t-t-time">
@@ -472,10 +472,13 @@
                <div class="l-m-3-main">
                  <!-- {{ videoUrl }} -->
                  <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                    <video
                      style="height: 550px; width: 100%"
                      controls="controls"
                      id="real_video_conversationDataL"
                      src=""
                    ></video>
                  </div>
                </div>
              </div>
            </el-tab-pane>
@@ -586,6 +589,7 @@
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
@@ -998,41 +1002,6 @@
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        var videoData = {
          deviceCode: that.a.serialNumber,
          chl: that.a.channelNumber,
        };
        // console.log(videoData);
        // getVideo(videoData).then((res) => {
        //   that.videoUrl = res

        //   console.log(res)

        // });
        var xhr2 = null, //视频请求
          url =
            "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
            videoData.deviceCode +
            "&chl=" +
            videoData.chl;
        if (XMLHttpRequest) {
          //http请求
          xhr2 = new XMLHttpRequest();
        } else {
          xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr2.open("get", url, true);
        xhr2.send();
        xhr2.onreadystatechange = function () {
          if (xhr2.readyState === 4) {
            if (xhr2.status === 200) {
              // 判断isJson是否传进来了
              var data2 = JSON.parse(xhr2.responseText); // JSON转js
              that.videoUrl = data2.data.m3u8;
              // console.log(videoUrl);
            }
          }
        };
      });
    },
    stetDetails(d, imgdata) {
@@ -1231,6 +1200,68 @@
      //行点击事件
      // console.log(val.i);
    },
    //获取视频
    openRealVideoBox(serialNumber, channelNumber) {
      var that = this;
      var newAxios = axios.create({
        baseURL: "https://web.byisf.com:18000",
        withCredentials: false,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
        },
      });
      newAxios
        .post(
          "/api_control",
          {},
          {
            params: {
              param: JSON.stringify({ PktType: "GetAccessToken" }),
            },
          }
        )
        .then((res) => {
          newAxios
            .get(
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
            )
            .then((result) => {
              that.videoSource = result.data.data.m3u8;
              if (Hls.isSupported()) {
                var dom = document.getElementById(
                  "real_video_conversationDataL"
                );
                that.hls = new Hls();
                var m3u8Url = decodeURIComponent(that.videoSource);
                that.hls.loadSource(m3u8Url);
                that.hls.attachMedia(dom);
                that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  dom.play();
                });
                that.hls.on(Hls.Events.ERROR, function (event, data) {
                  console.log(data, 4566824159, "视频播放有问题！！！");
                  if (data.fatal) {
                    switch (data.type) {
                      case Hls.ErrorTypes.NETWORK_ERROR:
                        // try to recover network error
                        console.log(
                          "fatal network error encountered, try to recover"
                        );
                        that.hls.startLoad();
                        break;
                      case Hls.ErrorTypes.MEDIA_ERROR:
                        console.log(
                          "fatal media error encountered, try to recover"
                        );
                        that.hls.recoverMediaError();
                        break;
                    }
                  }
                });
              }
            });
        });
    },
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
@@ -1263,6 +1294,21 @@
      }
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "third") {
        this.i++;
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber);
      }else{
        var dom = document.getElementById("real_video_conversationDataL");
        if (dom.getAttribute("src") != "") {
        dom.pause();
        dom.setAttribute("src", "");
        this.hls.destroy();
      }
      }
    },
  },
};
</script>
<style lang="scss" >

 src/views/system/cs.vue

@@ -1159,7 +1159,7 @@
    },
    getUser(dat) {
      //建立使用方搜索关键词
      console.log(dat);
      // console.log(dat);
      if (dat.length > 0) {
        this.users = [];
        for (var key in dat) {
@@ -1201,20 +1201,20 @@
    onLoads(pages, params = {}) {
      // this.$message.success("分页信息:" + JSON.stringify(pages));
      // this.pages.total = 40;
      console.log(1)
      // console.log(1)
      this.loadings = true;
     console.log(2)
    //  console.log(2)
      let values = {
        ...params,
      };
        console.log(3)
        // console.log(3)
      // getListliu(1, 10, {}, val.id).then((res) => {
        var useId = this.onceData.deptId;
          console.log(4)
          // console.log(4)
      getListliu(pages.currentPage, pages.pageSize, values, useId).then(
        (res) => {
            console.log(5)
          console.log(pages.currentPage, pages.pageSize, values, useId,332332)
            // console.log(5)
          // console.log(pages.currentPage, pages.pageSize, values, useId,332332)
          // console.log(this.datas);
          // getListliu('1', '10', {}, '1353972967828533249').then((res) => {
          //拿到数据