zhba/zhba_regulatory.git

parent: a82407f7 | patch | commit | ignore whitespace

Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

liuyg

2021-09-06 0397e2fb15fbccc77d6da16196d30ae54114aa2f

Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

9 files modified

3 files added

	public/carVideo/children.html	17 ●●●●● patch \| view \| raw \| blame \| history
	public/carVideo/children1.html	503 ●●●●● patch \| view \| raw \| blame \| history
	public/carVideo/parent.html	323 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/main.vue	14 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index.scss	49 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index.vue	128 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index_1280_1024.scss	699 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index_1600_900.scss	698 ●●●●● patch \| view \| raw \| blame \| history
	src/views/map/carGps.vue	13 ●●●●● patch \| view \| raw \| blame \| history
	src/views/securityUnitOperation/economicAnalysis.vue	65 ●●●●● patch \| view \| raw \| blame \| history
	src/views/securityUnitOperation/operationAnalysis.vue	345 ●●●●● patch \| view \| raw \| blame \| history
	vue.config.js	6 ●●●●● patch \| view \| raw \| blame \| history

 public/carVideo/children.html

@@ -110,10 +110,10 @@
        <textarea id="initParam" type="text" style="width:260px;height:200px;">
                  {
                    "argument": {
                        "appkey": "26589653",
                        "ip": "61.131.136.18",
                        "port": 10443,
                        "secret": "hSzZW0VHfyHgJziMemOx",
                        "appkey": "26864254",
                        "ip": "47.49.21.159",
                        "port": 443,
                        "secret": "oC2JAzu6PH5OqqcbGQCy",
                        "enableHTTPS": 1,
                        "layout": "1x1",
                        "playMode": 0
@@ -136,7 +136,7 @@
        <textarea id="playParam" type="text" style="width:260px;height:200px;">
                  {
                    "argument": {
                        "cameraIndexCode": "1f792961883543c6868cc8b200291962",
                        "cameraIndexCode": "36015602001310925219",
                        "ezvizDirect": 0,
                        "gpuMode": 0,
                        "streamMode": 0,
@@ -386,7 +386,12 @@
    });
  }

  initPlugin();
  function close() {
    if (oWebControl != null) {
      oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      oWebControl.JS_Disconnect().then(function () { }, function () { });
    }
  }


  // 获取公钥

 public/carVideo/children1.html

New file
@@ -0,0 +1,503 @@
<!doctype html>
<html>

<head>
  <title>预览Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  <meta http-equiv="Expires" content="0" />
</head>
<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }

  .playWnd {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 800px;
    height: 400px;
    color: #fff;
  }

  .cbInfoDiv {
    float: left;
    width: 360px;
    margin-left: 16px;
    border: 1px solid #7F9DB9;
  }

  .cbInfo {
    height: 200px;
    padding: 5px;
    border: 1px solid #7F9DB9;
    word-break: break-all;
    overflow: scroll／auto;
  }

  .operate {
    margin-top: 24px;
    display: none;
  }

  .operate::after {
    content: '';
    display: block;
    clear: both;
  }

  .operate .btns {
    height: 32px;
  }

  .module {
    float: left;
    width: 120px;
    min-height: 290px;
    margin-left: 10px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
  }

  .module .item {
    margin-bottom: 4px;
  }

  .module .label {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    text-align: right;
  }

  .module input[type="text"],
  .module select {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
  }

  .module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 16px;
    margin-left: 158px;
  }
</style>

<body>
  <div id="playWnd" class="playWnd"></div>
  <div id="operate" class="operate">
    <!--初始化、反初始化、设置认证信息接口调用入口。
        1.插件所有接口都需要在调用初始化并返回成功后才能调用
        2.设置认证信息仅适用于对接多平台时的情况，具体参照开发指南
        3.反初始化后，插件资源销毁-->
    <div class="module" style="left:30px;height:30px;width:280px;padding:10;margin:10;">
      <div class="item">
        <label>初始化相关参数：</label>
        <textarea id="initParam" type="text" style="width:260px;height:200px;">
                  {
                    "argument": {
                        "appkey": "26589653",
                        "ip": "61.131.136.18",
                        "port": 10443,
                        "secret": "hSzZW0VHfyHgJziMemOx",
                        "enableHTTPS": 1,
                        "layout": "1x1",
                        "playMode": 0
                    },
                    "funcName": "init"
                }
                </textarea>
      </div>
      <div class="item">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button style="width:10px;padding:0;margin:0;" id="initBtn" class="btn">执行</button>
      </div>
    </div>

    <!--单个点位播放、批量点位播放、批量停止播放、全部停止播放接口调用入口。
        1.authUuid为对接多平台时必须的播放字段，对接单平台时，可不指定-->
    <div class="module" style="height:30;width:280px;padding:10;margin:10;">
      <div class="item">
        <label>播放相关参数：</label>
        <textarea id="playParam" type="text" style="width:260px;height:200px;">
                  {
                    "argument": {
                        "cameraIndexCode": "1f792961883543c6868cc8b200291962",
                        "ezvizDirect": 0,
                        "gpuMode": 0,
                        "streamMode": 0,
                        "transMode": 1,
                        "wndId": -1
                    },
                    "funcName": "startPreview"
                }
        </textarea>
      </div>
      <div class="item">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button style="width:10px;padding:0;margin:0;" id="playBtn" class="btn">执行</button>
      </div>
    </div>
    <div class="module" style="height:50;width:300px;padding:10;margin:10;">
      <legend>返回值信息</legend>
      <div id="cbInfo" class="cbInfo"></div>
      <button style="width:80px;height:24px;padding:30;margin:0;" id="clear">清空</button>
    </div>
  </div>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
<script src="jsWebControl-1.0.0.min.js"></script>

<script type="text/javascript">
  // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
  var oWebControl = null;
  var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
  var pubKey = ''; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
  var initCount = 0; // 异常重启计数
  var iframePos = {}; // iframe相对文档的位置
  var parentTitle = ''; // 父页面标题
  var iframeClientPos = null; // iframe相对视窗的位置
  var iframeParentShowSize = null; // 视窗大小 width height

  // 标签关闭
  $(window).unload(function () {
    if (oWebControl != null) {
      oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      oWebControl.JS_Disconnect().then(function () { }, function () { });
    }
  });

  // 步骤1：监听父页面的消息
  window.addEventListener('message', function (e) {
    if (e && e.data) {
      console.log(e.data.action, 9595);

      switch (e.data.action) {

        case 'sendTitle': // 父页面将其标题发送过来，子页面保存该标题，以便创建插件窗口成功后将标题设置回给父页面
          parentTitle = e.data.info;
          break;
        case 'updatePos': // 更新插件位置：JS_CreateWnd时需要父页面计算滚动条偏移量，初始偏移量叠加该偏移量作为iframe的偏移量，防止插件窗口与DIV窗口初始不贴合情况
          var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量

          console.log(iframePos, scrollValue, iframePos.left + scrollValue.left, iframePos.top + scrollValue.top)

          oWebControl.JS_SetDocOffset({
            top: 240,
            left: 410,
          }); // 更新插件窗口位置

          oWebControl.JS_Resize(800, 400);
          setWndCover();
          break;
        case 'updateInitParam':
          iframePos = e.data.iframeOffset; // iframe与文档的偏移量
          iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
          iframeParentShowSize = e.data.showSize; // 视窗大小
          break;
        case 'resize':
          iframeParentShowSize = e.data.showSize; // 视窗大小
          iframePos = e.data.iframeOffset; // iframe与文档的偏移量
          iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
          setWndCover();
          break;
        case 'scroll':
          iframeParentShowSize = e.data.showSize; // 视窗大小
          iframePos = e.data.iframeOffset; // iframe与文档的偏移量
          iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
          var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
          if (oWebControl) {
            oWebControl.JS_SetDocOffset({
              left: iframePos.left + scrollValue.left,
              top: iframePos.top + scrollValue.top
            }); // 更新插件窗口位置
            oWebControl.JS_Resize(800, 400);
            setWndCover();
          }
          break;
        default:
          break;
      }
    }
  });

  // 顶部：iframe.getBoundingClientRect().top小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().top部分需要剪切
  // 底部：(iframe.getBoundingClientRect().bottom - iframe父窗口可视域高度，为H1)为不可见部分
  //       ($(window).height() - DIV.get(0).getBoundingClientRect().bottom)
  //        为DIV底部与其所在iframe底部之间的距离H2，H1-H2的值大于0则表示DIV有部分在不可见区域
  // 左边：iframe.getBoundingClientRect().left小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().left部分需要剪切
  // 右边：(iframe宽度 - DIV.get(0).getBoundingClientRect().right表示DIV右边与其父iframe右边之间的距离，为W1)
  //       (iframe父窗口可视域宽度-iframe.getBoundingClientRect().left表示iframe左边与iframe父窗口可视域右边之间的距离，为W2)
  //       (iframe宽度 - W2 - W1)如果大于0，则表示DIV右边超出了iframe父窗口可视域，需要剪切超过的部分
  function setWndCover() {
    if (oWebControl) {
      // 准备要用到的一些数据
      var iframeWndHeight = $(window).height(); // iframe窗口高度
      var iframeWndWidth = $(window).width(); // iframe窗口宽度
      var divLeft = $("#playWnd").get(0).getBoundingClientRect().left;
      var divTop = $("#playWnd").get(0).getBoundingClientRect().top;




      var divRight = $("#playWnd").get(0).getBoundingClientRect().right;
      var divBottom = $("#playWnd").get(0).getBoundingClientRect().bottom;


      var divWidth = $("#playWnd").width();
      var divHeight = $("#playWnd").height();

      // divLeft = (divLeft > 800 || divLeft == 0) ? 800 : divLeft;

      // divTop = (divTop > 400 || divTop == 0) ? 400 : divTop;

      // divRight = (divRight > 800 || divRight == 0) ? 800 : divRight;

      // divBottom = (divBottom > 400 || divBottom == 0) ? 400 : divBottom;


      console.log(iframeWndHeight, iframeWndWidth, divLeft, divTop, divRight, divBottom, divWidth, divHeight, 548)

      oWebControl.JS_RepairPartWindow(0, 0, 801, 401); // 多1个像素点防止还原后边界缺失一个像素条

      // 判断剪切矩形的上边距
      if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop) {
        var deltaTop = Math.abs(iframeClientPos.top) - divTop;
        oWebControl.JS_CuttingPartWindow(0, 0, 801, deltaTop + 1);
        //console.log({deltaTop: deltaTop});
      }

      // 判断剪切矩形的左边距
      if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft) {
        var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
        //console.log({deltaLeft: deltaLeft});
        oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, 401); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }

      // 判断剪切矩形的右边距
      var W1 = iframeWndWidth - divRight;
      var W2 = iframeParentShowSize.width - iframeClientPos.left;
      if (W2 < divWidth) {
        var deltaRight = iframeWndWidth - W2 - W1;
        if (deltaRight > 0) {
          oWebControl.JS_CuttingPartWindow(800 - deltaRight, 0, deltaRight + 1, 401);
        }
      }

      // 判断剪切矩形的下边距
      var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
      var H2 = iframeWndHeight - divBottom;
      var deltaBottom = H1 - H2;
      //console.log({deltaBottom: deltaBottom});
      if (deltaBottom > 0) {
        oWebControl.JS_CuttingPartWindow(0, 400 - deltaBottom, 801, deltaBottom + 1);
      }
    }
  }

  // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
  function initPlugin() {
    oWebControl = new WebControl({
      szPluginContainer: "playWnd",
      iServicePortStart: 15900,
      iServicePortEnd: 15909,
      szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
      cbConnectSuccess: function () {
        initCount = 0;
        setCallbacks();
        oWebControl.JS_StartService("window", {
          dllPath: "./VideoPluginConnect.dll"
        }).then(function () {
          // 步骤2：JS_CreateWnd时指定cbSetDocTitle回调，并在回调中向父页面发送更新标题消息，标题为回调出来的uuid
          oWebControl.JS_CreateWnd("playWnd", 800, 400, {
            cbSetDocTitle: function (uuid) {
              oWebControl._pendBg = false;
              window.parent.postMessage({
                action: 'updateTitle',
                msg: '子页面通知父页面修改title',
                info: uuid
              }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
            }
          }).then(function () {
            // 步骤3：JS_CreateWnd成功后通知父页面将其标题修改回去
            console.log("JS_CreateWnd success");
            window.parent.postMessage({
              action: 'updateTitle',
              msg: '子页面通知父页面更新title',
              info: parentTitle
            }, '\*');

            // 步骤4：发消息更新插件窗口位置：这里不直接更新的原因是，父页面默认可能就存在滚动条，此时有滚动量
            window.parent.postMessage({
              action: 'updatePos',
              msg: '更新Pos'
            }, '\*');

            initBtnClicked();

            setTimeout(function () {
              $("#playBtn").trigger('click');
            }, 3000)
          });
        }, function () {
          console.log("JS_CreateWnd fail");
        });
      },
      cbConnectError: function () {
        console.log("cbConnectError");
        oWebControl = null;
        $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
        WebControl.JS_WakeUp("VideoWebPlugin://");
        initCount++;
        if (initCount < 3) {
          setTimeout(function () {
            initPlugin();
          }, 3000)
        } else {
          $("#playWnd").html("插件启动失败，请检查插件是否安装！<a href='./VideoWebPlugin.exe' target='_blank' style='color: var(--mcblue)'>点击下载</a>");
        }
      },
      cbConnectClose: function (bNormalClose) {
        // 异常断开：bNormalClose = false
        // JS_Disconnect正常断开：bNormalClose = true
        if (true == bNormalClose) {
          console.log("cbConnectClose normal");
        } else {
          console.log("cbConnectClose exception");
        }

        oWebControl = null;
      }
    });
  }

  initPlugin();


  // 获取公钥
  function getPubKey(callback) {
    oWebControl.JS_RequestInterface({
      funcName: "getRSAPubKey",
      argument: JSON.stringify({
        keyLength: 1024
      })
    }).then(function (oData) {
      console.log(oData)
      if (oData.responseMsg.data) {
        pubKey = oData.responseMsg.data
        callback()
      }
    })
  }

  // 设置窗口控制回调
  function setCallbacks() {
    oWebControl.JS_SetWindowControlCallback({
      cbIntegrationCallBack: cbIntegrationCallBack
    });
  }

  // 推送消息
  function cbIntegrationCallBack(oData) {
    showCBInfo(JSON.stringify(oData.responseMsg));
  }

  // RSA加密
  function setEncrypt(value) {
    var encrypt = new JSEncrypt();
    encrypt.setPublicKey(pubKey);
    return encrypt.encrypt(value);
  }

  function requestInterface(value) {
    oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
      console.log(oData)
      showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
    });
  }

  // 显示接口返回的消息及插件回调信息
  function showCBInfo(szInfo, type) {
    if (type === 'error') {
      szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo +
        "</div>";
    } else {
      szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
    }
    $("#cbInfo").html(szInfo + $("#cbInfo").html());



  }

  function initBtnClicked() {
    var param = $("#initParam").val();
    //删除字符串中的回车换行
    param = param.replace(/(\s*)/g, "");

    // 执行初始化
    requestInterface(param);
  }

  $("#initBtn").click(function () {
    initBtnClicked();
  })

  // $('#initBtn').trigger("click");

  $("#playBtn").click(function () {
    var param = $("#playParam").val();
    //删除字符串中的回车换行
    param = param.replace(/(\s*)/g, "");

    console.log(param, 232323)

    // 执行预览
    requestInterface(param);
  })

  // 清空
  $("#clear").click(function () {
    $("#cbInfo").html('');
  })

  // 格式化时间
  function dateFormat(oDate, fmt) {
    var o = {
      "M+": oDate.getMonth() + 1, //月份
      "d+": oDate.getDate(), //日
      "h+": oDate.getHours(), //小时
      "m+": oDate.getMinutes(), //分
      "s+": oDate.getSeconds(), //秒
      "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
      "S": oDate.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
          .length)));
      }
    }
    return fmt;
  }
</script>

</html>

 public/carVideo/parent.html

@@ -2,31 +2,30 @@
<html>

<head>
    <title>Window Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
  <title>Window Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  <meta http-equiv="Expires" content="0" />
</head>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
  html,
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }

    .iframe {
        width: 100%;
        height: 100%;
    }
  .iframe {
    width: 100%;
    height: 100%;
  }
</style>

<body>
    <!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
    <iframe id="iframe1" class="iframe" src="children.html" scrolling="no"
        frameborder="0"></iframe>
  <!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
  <iframe id="iframe1" class="iframe" src="children.html" scrolling="no" frameborder="0"></iframe>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
@@ -34,151 +33,159 @@
<!-- <script src="JsonToXml.js"></script>
<script src="jsWebControl-Bridge.js"></script> -->
<script type="text/javascript">
    // 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
    var iframeWin = document.getElementById("iframe1"); {
        iframeWin.onload = function () {
            iframeWin.contentWindow.postMessage({
                action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
                msg: '将标题发给子页面',
                info: document.title
            }, '\*');
            iframeWin.contentWindow.postMessage({
                action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
                msg: '更新子页面一些初始值',
                showSize: { // 浏览器视窗高度与宽度
                    width: 800,
                    height: 400
                },
                iframeOffset: { // iframe偏离文档的位置
                    left: iframeWin.offsetLeft,
                    top: iframeWin.offsetTop
                },
                iframeClientPos: { // iframe相对视窗的位置
                    left: iframeWin.getBoundingClientRect().left,
                    right: iframeWin.getBoundingClientRect().right,
                    top: iframeWin.getBoundingClientRect().top,
                    bottom: iframeWin.getBoundingClientRect().bottom
                }
            }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
  // 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
  var iframeWin = document.getElementById("iframe1"); {
    iframeWin.onload = function () {
      iframeWin.contentWindow.postMessage({
        action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
        msg: '将标题发给子页面',
        info: document.title
      }, '\*');
      iframeWin.contentWindow.postMessage({
        action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
        msg: '更新子页面一些初始值',
        showSize: { // 浏览器视窗高度与宽度
          width: 800,
          height: 400
        },
        iframeOffset: { // iframe偏离文档的位置
          left: iframeWin.offsetLeft,
          top: iframeWin.offsetTop
        },
        iframeClientPos: { // iframe相对视窗的位置
          left: iframeWin.getBoundingClientRect().left,
          right: iframeWin.getBoundingClientRect().right,
          top: iframeWin.getBoundingClientRect().top,
          bottom: iframeWin.getBoundingClientRect().bottom
        }
      }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
    }
  }

    // 步骤3：监听嵌入子页面的事件
    window.addEventListener('message', function (e) {
        console.log(e.data.msg);
        if (e && e.data) {
            switch (e.data.action) {
                case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
                    document.title = e.data.info;
                    break;
                case 'updatePos':
                    var scrollLeftValue = document.documentElement.scrollLeft;
                    var scrollTopValue = document.documentElement.scrollTop;
                    iframeWin.contentWindow.postMessage({
                        action: 'updatePos',
                        msg: '更新Pos',
                        scrollValue: { // 滚动条滚动的偏移量
                            left: -1 * scrollLeftValue,
                            top: -1 * scrollTopValue,
                        }
                    }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
                    break;
                default:
                    break;
            }
        }
    });

    // 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
    var resizeTimer = null;
    var resizeDate;
    $(window).resize(function () {
        resizeDate = new Date();
        if (resizeTimer === null) {
            resizeTimer = setTimeout(checkResizeEndTimer, 100);
        }
    });

    function checkResizeEndTimer() {
        if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
            clearTimeout(resizeTimer);
            resizeTimer = null;
            postResizeEvent();
        } else {
            setTimeout(checkResizeEndTimer, 100);
        }
    }

    function postResizeEvent() {
        iframeWin.contentWindow.postMessage({
            action: 'resize',
            msg: 'resize事件',
            showSize: { // 告诉嵌入的子页面视窗高度与宽度
                width: $(window).width(),
                height: $(window).height()
            },
            iframeClientPos: { // iframe相对视窗的位置
                left: iframeWin.getBoundingClientRect().left,
                right: iframeWin.getBoundingClientRect().right,
                top: iframeWin.getBoundingClientRect().top,
                bottom: iframeWin.getBoundingClientRect().bottom
            },
            iframeOffset: { // iframe偏离文档的位置
                left: iframeWin.offsetLeft,
                top: iframeWin.offsetTop
            }
        }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
    }

    // 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
    // 为性能考虑，可以在定时器中处理
    var scrollTimer = null;
    var scrollDate;
    $(window).scroll(function (event) {
        postScrollEvent();
        scrollDate = new Date();
        if (scrollTimer === null) {
            scrollTimer = setTimeout(checkScrollEndTimer, 100);
        }
    });

    function checkScrollEndTimer() {
        if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
            clearTimeout(scrollTimer);
            scrollTimer = null;
        } else {
            postScrollEvent();
            setTimeout(checkScrollEndTimer, 100);
        }
    }

    function postScrollEvent() {
        // 计算滚动条偏移量
        var scrollLeftValue = document.documentElement.scrollLeft;
        var scrollTopValue = document.documentElement.scrollTop;
        iframeWin.contentWindow.postMessage({
            action: 'scroll',
            msg: 'scroll事件',
  // 步骤3：监听嵌入子页面的事件
  window.addEventListener('message', function (e) {
    console.log(e.data.msg);
    if (e && e.data) {
      switch (e.data.action) {
        case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
          document.title = e.data.info;
          break;
        case 'updatePos':
          var scrollLeftValue = document.documentElement.scrollLeft;
          var scrollTopValue = document.documentElement.scrollTop;
          iframeWin.contentWindow.postMessage({
            action: 'updatePos',
            msg: '更新Pos',
            scrollValue: { // 滚动条滚动的偏移量
                left: -1 * scrollLeftValue,
                top: -1 * scrollTopValue,
            },
            iframeClientPos: { // iframe相对视窗的位置
                left: iframeWin.getBoundingClientRect().left,
                right: iframeWin.getBoundingClientRect().right,
                top: iframeWin.getBoundingClientRect().top,
                bottom: iframeWin.getBoundingClientRect().bottom
            },
            showSize: { // 告诉嵌入的子页面视窗高度与宽度
                width: $(window).width(), // 视窗宽度
                height: $(window).height() // 视窗高度
            },
            iframeOffset: { // iframe偏离文档的位置
                left: iframeWin.offsetLeft,
                top: iframeWin.offsetTop
              left: -1 * scrollLeftValue,
              top: -1 * scrollTopValue,
            }
        }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
          }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
          break;
        default:
          break;
      }
    }
  });

  // 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
  var resizeTimer = null;
  var resizeDate;
  $(window).resize(function () {
    resizeDate = new Date();
    if (resizeTimer === null) {
      resizeTimer = setTimeout(checkResizeEndTimer, 100);
    }
  });

  function closeVideo() {
    document.getElementById('iframe1').contentWindow.close()
  }

  function startVideo() {
    document.getElementById('iframe1').contentWindow.initPlugin()
  }

  function checkResizeEndTimer() {
    if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
      clearTimeout(resizeTimer);
      resizeTimer = null;
      postResizeEvent();
    } else {
      setTimeout(checkResizeEndTimer, 100);
    }
  }

  function postResizeEvent() {
    iframeWin.contentWindow.postMessage({
      action: 'resize',
      msg: 'resize事件',
      showSize: { // 告诉嵌入的子页面视窗高度与宽度
        width: $(window).width(),
        height: $(window).height()
      },
      iframeClientPos: { // iframe相对视窗的位置
        left: iframeWin.getBoundingClientRect().left,
        right: iframeWin.getBoundingClientRect().right,
        top: iframeWin.getBoundingClientRect().top,
        bottom: iframeWin.getBoundingClientRect().bottom
      },
      iframeOffset: { // iframe偏离文档的位置
        left: iframeWin.offsetLeft,
        top: iframeWin.offsetTop
      }
    }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
  }

  // 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
  // 为性能考虑，可以在定时器中处理
  var scrollTimer = null;
  var scrollDate;
  $(window).scroll(function (event) {
    postScrollEvent();
    scrollDate = new Date();
    if (scrollTimer === null) {
      scrollTimer = setTimeout(checkScrollEndTimer, 100);
    }
  });

  function checkScrollEndTimer() {
    if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
      clearTimeout(scrollTimer);
      scrollTimer = null;
    } else {
      postScrollEvent();
      setTimeout(checkScrollEndTimer, 100);
    }
  }

  function postScrollEvent() {
    // 计算滚动条偏移量
    var scrollLeftValue = document.documentElement.scrollLeft;
    var scrollTopValue = document.documentElement.scrollTop;
    iframeWin.contentWindow.postMessage({
      action: 'scroll',
      msg: 'scroll事件',
      scrollValue: { // 滚动条滚动的偏移量
        left: -1 * scrollLeftValue,
        top: -1 * scrollTopValue,
      },
      iframeClientPos: { // iframe相对视窗的位置
        left: iframeWin.getBoundingClientRect().left,
        right: iframeWin.getBoundingClientRect().right,
        top: iframeWin.getBoundingClientRect().top,
        bottom: iframeWin.getBoundingClientRect().bottom
      },
      showSize: { // 告诉嵌入的子页面视窗高度与宽度
        width: $(window).width(), // 视窗宽度
        height: $(window).height() // 视窗高度
      },
      iframeOffset: { // iframe偏离文档的位置
        left: iframeWin.offsetLeft,
        top: iframeWin.offsetTop
      }
    }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
  }
</script>

</html>

 src/components/map/main.vue

@@ -125,6 +125,12 @@
        //     })
        // })







        var projection = getProjection("EPSG:4326");
        var projectionExtent = projection.getExtent();
        var size = getWidth(projectionExtent) / 256;
@@ -174,6 +180,12 @@

            })
        })







        this.parentParameter();

@@ -327,7 +339,7 @@
        },

        parentParameter () {
          this.$emit('childParameter', this.ol2d)
            this.$emit('childParameter', this.ol2d)
        }
    }
}

 src/views/home/index.scss

@@ -1,8 +1,6 @@
.bajgxt-home {
  height: 100%;
  width: 100%;
  // width: 1920px;
  // height: 1080px;
  background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
  background-size: 100% 100%;

@@ -20,16 +18,6 @@
      text-align: center;
      line-height: 77px;
    }
    // span:nth-child(2) {
    //   position: absolute;
    //   margin-top: 22px;
    //   margin-left: 26%;
    //   font-size: 22px;
    //   cursor: pointer;
    //   &:hover {
    //     color: #90cef0;
    //   }
    // }
    img {
      position: absolute;
      margin-top: 22px;
@@ -47,20 +35,15 @@
      color: #90cef0;
    }
  }
  .side {
    width: 27%;
    height: 100%;
  }
  .content {
    margin: 5px 20px 20px 20px;
    // height: calc(100% - 77px);
    // width: 100%;
    height: calc(100% - 102px);
    width: calc(100% - 40px);
    display: flex;
    .left,
    .right {
      @extend .side;
      width: 27%;
      height: 100%;
    }
    .middle {
      width: calc(46% - 50px);
@@ -75,7 +58,7 @@
    width: 100%;
    height: 260px;
  }
  .echartClass {
  .echartClass_1920 {
    // height: 100%;
    width: 100%;
    height: calc(100% - 70px);
@@ -88,7 +71,7 @@
      background-size: 100% 100%;
      position: relative;
      #left1Echart {
        @extend .echartClass;
        @extend .echartClass_1920;
        height: calc(100% - 140px) !important;
        margin-top: 68px;
      }
@@ -101,7 +84,7 @@
      margin-top: 25px;
      position: relative;
      #left2Echart {
        @extend .echartClass;
        @extend .echartClass_1920;
      }
    }
  }
@@ -113,7 +96,7 @@
      height: 28%;
      position: relative;
      #right1Echart {
        @extend .echartClass;
        @extend .echartClass_1920;
      }
    }
    .right2 {
@@ -124,7 +107,7 @@
      margin-top: 30px;
      position: relative;
      #right2Echart {
        @extend .echartClass;
        @extend .echartClass_1920;
      }
    }
    .right3 {
@@ -134,7 +117,7 @@
      background-size: 100% 100%;
      margin-top: 25px;
      #right3Echart {
        @extend .echartClass;
        @extend .echartClass_1920;
      }
    }
  }
@@ -424,7 +407,7 @@
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: 100%;
    height: calc(100% - 50px);
  }
}
.left2-btn {
@@ -628,10 +611,11 @@
  right: 47px;
  margin-top: 76px;
  .block1 {
    width: 30px;
    height: 15px;
    width: 10px;
    height: 10px;
    background: #008dec;
    margin-top: 7px;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;
@@ -650,10 +634,11 @@
  right: 47px;
  margin-top: 135px;
  .block1 {
    width: 30px;
    height: 15px;
    width: 10px;
    height: 10px;
    background: #886eff;
    margin-top: 7px;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;

 src/views/home/index.vue

@@ -699,7 +699,7 @@
  selectJy,
  selectWg,
  punishList,
  lazyTrees,
  lazyTrees
} from "../../api/index/index";

import car from "@/assets/img/car.png";
@@ -728,7 +728,7 @@
        materialNum: 0,
        punishNum: 0,
        wgNum: 0,
        ymwsNum: 0,
        ymwsNum: 0
      },
      carNum: 0,
      peoNum: 0,
@@ -738,7 +738,7 @@
        left1Echart: null,
        left2Echart: null,
        mapEchart: null,
        right3Echart: null,
        right3Echart: null
      },
      left1loading: true,
      left2loading: true,
@@ -755,7 +755,7 @@
        wz: 0,
        kqy: 0,
        nan: 0,
        nv: 0,
        nv: 0
      },
      left2EchartType: 0,
      poorPerformanceType: 3,
@@ -765,29 +765,29 @@
        total: 0,
        current: 1,
        type: "zg",
        title: "资格异常人员清单",
        title: "资格异常人员清单"
      },
      dialogTable: {
        wgTable: [],
        jyTable: [],
        ymTable: [],
        ymTable: []
      },
      props: {
        children: "children",
        label: "title",
        value: "id",
        value: "id"
      },
      node1: {}, //选中的记录
      node2: {},
      node2: {}
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number],
        val: this.textArr[this.number]
      };
    },
    }
  },
  methods: {
    //点击节点
@@ -841,7 +841,7 @@

    // 左侧表的接口返回数据
    initEchart() {
      securityTotal().then((res) => {
      securityTotal().then(res => {
        if (res.data.code == 200) {
          let securityData = res.data.data;
          if (!this.echarts.left1Echart) {
@@ -855,10 +855,10 @@
        }
        this.left1loading = false;
      });
      seCountI({ jurisdiction: "", deptid: "" }).then((res) => {
      seCountI({ jurisdiction: "", deptid: "" }).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          data.forEach((item) => {
          data.forEach(item => {
            if (item.stats === "0") {
              this.leftData.zz = item.num;
            }
@@ -879,7 +879,8 @@
          this.$message.error(res.msg);
        }
      });
      selectFj().then((res) => {
      selectFj().then(res => {
        debugger;
        if (res.data.code === 200) {
          if (!this.echarts.right3Echart) {
            this.echarts.right3Echart = echarts.init(
@@ -903,7 +904,7 @@
        this.echarts.left2Echart.clear();
      }
      if (type === 0) {
        holderNum().then((res) => {
        holderNum().then(res => {
          if (res.data.code === 200) {
            let data = res.data.data;
            this.echarts.left2Echart = echarts.init(
@@ -916,7 +917,7 @@
          this.left2loading = false;
        });
      } else {
        seCountUg({ jurisdiction: "", deptid: "" }).then((res) => {
        seCountUg({ jurisdiction: "", deptid: "" }).then(res => {
          if (res.data.code === 200) {
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
@@ -950,7 +951,7 @@
      this.middleloading = false;
      this.textArr = [];
      if (type === 2) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "押运车辆车牌号" +
            item.carNum +
@@ -965,7 +966,7 @@
          this.textArr.push(obj);
        });
      } else if (type === 1) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "押运人员" +
            item.name +
@@ -978,7 +979,7 @@
          this.textArr.push(obj);
        });
      } else if (type === 3) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "枪支编号" +
            item.number +
@@ -999,21 +1000,21 @@
      let middleData = {
        1: {
          table: [],
          geoData: [],
          geoData: []
        },
        2: {
          table: [],
          geoData: [],
          geoData: []
        },
        3: {
          table: [],
          geoData: [],
        },
          geoData: []
        }
      };
      getLiveLocationVoList({ type: type }).then((res) => {
      getLiveLocationVoList({ type: type }).then(res => {
        if (res.data.code === 200) {
          let allData = res.data.data;
          allData.forEach((m) => {
          allData.forEach(m => {
            let obj = {
              location: m.location,
              name: m.name,
@@ -1021,7 +1022,7 @@
              linkman: m.linkman,
              company: m.company,
              tel: m.tel,
              carNum: m.carNum,
              carNum: m.carNum
            };

            // let geoObj = {
@@ -1030,7 +1031,7 @@
            // };
            middleData[m.type]["geoData"].push([
              Number(m.longitude),
              Number(m.latitude),
              Number(m.latitude)
            ]);
            middleData[m.type]["table"].push(obj);
          });
@@ -1056,36 +1057,38 @@
            zIndex: 4,
            title: "影像",
            source: new XYZ({
              url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
            }),
              url:
                "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
            })
          }),
          new Tile({
            zIndex: 5,
            title: "道路+中文注记",
            source: new XYZ({
              url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
            }),
          }),
              url:
                "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
            })
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [115.892151, 28.676493],
          zoom: 10,
        }),
          zoom: 10
        })
      });
      this.carVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource(),
        source: new VectorSource()
      });

      this.peoVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource(),
        source: new VectorSource()
      });

      this.gunVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource(),
        source: new VectorSource()
      });
      this.map.addLayer(this.carVectorLayer);
      this.map.addLayer(this.peoVectorLayer);
@@ -1095,7 +1098,7 @@
    },
    // 获取辖区列表
    getOfficeData() {
      lazyTrees().then((res) => {
      lazyTrees().then(res => {
        if (res.data.code === 200) {
          this.options1 = res.data.data;
          this.options2 = res.data.data;
@@ -1137,7 +1140,7 @@
      }
    },
    getWgTable() {
      this.dialogTable.wgTable.forEach((item) => {
      this.dialogTable.wgTable.forEach(item => {
        let czl = 0;
        if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) {
          czl =
@@ -1155,7 +1158,7 @@
      this.gridData.total = this.dialogTable.wgTable.length;
    },
    getJyTable() {
      this.dialogTable.jyTable.forEach((item) => {
      this.dialogTable.jyTable.forEach(item => {
        let pql = 0;
        if (Number(item.painum) !== 0 && Number(item.znum) !== 0) {
          pql =
@@ -1183,9 +1186,9 @@
      let params = {
        current: this.gridData.current,
        size: 10,
        jurisdiction: this.value2,
        jurisdiction: this.value2
      };
      punishList(params).then((res) => {
      punishList(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
@@ -1223,9 +1226,9 @@
        current: this.gridData.current,
        size: 10,
        examinationType: 1,
        jurisdiction: this.value1,
        jurisdiction: this.value1
      };
      qualificationPages(params).then((res) => {
      qualificationPages(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
@@ -1246,9 +1249,9 @@
      let params = {
        current: this.gridData.current,
        size: 10,
        jurisdiction: this.value2,
        jurisdiction: this.value2
      };
      punishList(params).then((res) => {
      punishList(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
@@ -1259,7 +1262,7 @@
    },
    // 经营不善
    getMaterial() {
      selectJy({ jurisdiction: this.value2 }).then((res) => {
      selectJy({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.materialNum = res.data.data.count;
          this.dialogTable.jyTable = res.data.data.List;
@@ -1271,7 +1274,7 @@
    },
    // 有名无实
    getselectYs() {
      selectYs({ jurisdiction: this.value2 }).then((res) => {
      selectYs({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.ymwsNum = res.data.data.count;
          this.dialogTable.ymTable = res.data.data.List;
@@ -1283,7 +1286,7 @@
    },
    // 违规经营
    getselectWg() {
      selectWg({ jurisdiction: this.value2 }).then((res) => {
      selectWg({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.wgNum = res.data.data.count;
          this.dialogTable.wgTable = res.data.data.list;
@@ -1313,8 +1316,8 @@
      // this.rightData.qualification = 45;
      selectBx({
        jurisdiction: this.value1,
        type: this.poorPerformanceType,
      }).then((res) => {
        type: this.poorPerformanceType
      }).then(res => {
        if (res.data.code === 200) {
          this.rightData.poorPerformance = res.data.data[0].count;
        } else {
@@ -1324,8 +1327,8 @@
      });
      selectExtype({
        jurisdiction: this.value1,
        type: this.poorPerformanceType,
      }).then((res) => {
        type: this.poorPerformanceType
      }).then(res => {
        if (res.data.code === 200) {
          this.rightData.qualification = res.data.data[0].count;
        } else {
@@ -1364,7 +1367,7 @@
      // this.$router.push({ path: "/register/index" });
      // this.$router.push({ path: "/securityGuardManagement/register" });
      this.$router.push({ path: website.fistPage.value });
    },
    }
  },
  mounted() {
    this.initEchart();
@@ -1375,12 +1378,25 @@
    this.getTableData(0);
    // this.initMapEchart();
    this.getOfficeData();
  },
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
// 适配分辨率1280*1024
@media screen and (max-width: 1280px) {
  @import "./index_1280_1024.scss";
}
// 适配分辨率1600*900
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  @import "./index_1600_900.scss";
}
// 适配分辨率1920*1080
@media screen and (min-width: 1601px) and (max-width: 1920px) {
  @import "./index.scss";
}

// @import "./index.scss";
/deep/ .el-select-dropdown {
  border: 1px solid #9199ab;
  background-color: #022c53;

 src/views/home/index_1280_1024.scss

New file
@@ -0,0 +1,699 @@
.bajgxt-home {
  height: 100%;
  width: 100%;
  background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
  background-size: 100% 100%;

  .head-title {
    background: url("../../../public/img/bajgxt/title2.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 77px;
    text-align: center;
    // position: relative;
    span {
      font-family: "Arial Normal", "Arial", sans-serif;
      font-size: 36px;
      color: #ffffff;
      text-align: center;
      line-height: 77px;
    }
    img {
      position: absolute;
      margin-top: 22px;
      margin-left: 29%;
    }
  }
  .sub-title {
    float: right;
    color: #fff;
    margin-right: 52px;
    font-size: 18px;
    margin-top: -35px;
    cursor: pointer;
    &:hover {
      color: #90cef0;
    }
  }
  .content {
    margin: 5px 20px 20px 20px;
    height: calc(100% - 102px);
    width: calc(100% - 40px);
    display: flex;
    .left,
    .right {
      width: 27%;
      height: 100%;
    }
    .middle {
      width: calc(46% - 50px);
      height: 100%;
      margin: 0px 25px;
      position: relative;
    }
  }
  .leftimg {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 260px;
  }
  .echartClass_1280 {
    // height: 100%;
    width: 100%;
    height: calc(100% - 70px);
  }
  .left {
    .left1 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      height: 60%;
      width: 100%;
      background-size: 100% 100%;
      position: relative;
      #left1Echart {
        @extend .echartClass_1280;
        height: calc(100% - 140px) !important;
        margin-top: 68px;
      }
    }
    .left2 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      position: relative;
      #left2Echart {
        @extend .echartClass_1280;
      }
    }
  }
  .right {
    .right1 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      position: relative;
      #right1Echart {
        @extend .echartClass_1280;
      }
    }
    .right2 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      margin-top: 30px;
      position: relative;
      #right2Echart {
        @extend .echartClass_1280;
      }
    }
    .right3 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      #right3Echart {
        @extend .echartClass_1280;
      }
    }
  }
  .title-pane {
    display: inline-flex;
    height: 55px;
    img {
      width: 25px;
      height: 25px;
      margin: 19px 10px 0px 10px;
    }
    span {
      line-height: 68px;
      color: #fff;
      font-size: 17px;
    }
  }
  .title-pane1 {
    display: inline-flex;
    height: 41px;
    img {
      width: 25px;
      height: 25px;
      margin: 8.5px 10px 0px 10px;
    }
    span {
      line-height: 46px;
      color: #fff;
      font-size: 17px;
    }
  }
  .title-pane2 {
    display: inline-flex;
    height: 53px;
    img {
      width: 25px;
      height: 25px;
      margin: 13.5px 10px 0px 10px;
    }
    span {
      line-height: 59px;
      color: #fff;
      font-size: 17px;
    }
  }

  .middle {
    .mapimg {
      background: url("../../../public/img/bajgxt/u3.png") no-repeat;
      background-size: 100% 100%;
      height: 60%;
      width: 100%;
      #map {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        margin: 0px 20px;
        top: 20px;
        position: relative;
      }
    }

    .table {
      margin-top: 25px;
      height: calc(40% - 25px);
      width: 100%;
      background: url("../../../public/img/bajgxt/table.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .table-title {
        background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 267px;
        margin-top: -13px;
        height: 50px;
        margin-left: calc(50% - 135.5px);
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 54px;
      }
      .lefttop {
        background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: -7px;
        top: -9px;
      }
      .leftbottom {
        background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: -7px;
        bottom: -7px;
      }
      .righttop {
        background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: calc(100% - 37px);
        top: -9px;
      }
      .rightbottom {
        background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: calc(100% - 37px);
        bottom: -7px;
      }
    }
  }
  .middle {
    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 65px);
      margin: 0px 20px 15px;
      top: 50px;
    }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #031d4b !important;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td,
    /deep/ .el-table th,
    .el-table tr {
      background: #03225b !important;
    }
    /deep/ .el-table .cell {
      color: #fff;
      text-align: center;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom-color: transparent;
    }
    /deep/ .el-table__header th {
      border-bottom: 1px solid #031a38 !important;
    }
    /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #b0caf3;
    }
  }

  /deep/ .el-input__inner {
    height: 27px;
    color: #fff !important;
    font-size: 14px;
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 2px;
  }
  /deep/ .el-input {
    width: 138px;
  }
  /deep/ .el-select {
    line-height: 52px;
    position: absolute;
    right: 14px;
  }
  /deep/ .el-input__icon {
    line-height: 53px;
  }
  /deep/ .el-select:hover .el-input__inner,
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: none;
  }
  /deep/ .el-table,
  /deep/ .el-table__expanded-cell,
  /deep/ .el-table--border::after,
  /deep/ .el-table--group::after,
  /deep/ .el-table::before {
    background-color: transparent !important;
  }
  .card-text {
    height: 30px;
    padding: 8px 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    span:nth-child(2) {
      color: red;
      font-size: 21px;
      margin: 0px 10px;
      font-weight: bold;
    }
    span:nth-child(4) {
      margin-left: 15px;
    }
    span:nth-child(5) {
      margin: 0px 10px;
      color: red;
      font-size: 20px;
    }
  }
  .right-content {
    height: calc(100% - 71px);
    width: calc(100% - 30px);
    padding: 15px;
  }
  .card-list {
    margin-top: 10px !important;
    margin: 10px 60px 15px 5px;
    display: flex;
    height: 50px;
    line-height: 50px;
    img:first-child {
      height: 50px;
      z-index: 22;
    }
    img:nth-child(2) {
      position: absolute;
      margin-left: 13px;
      width: 30px;
      height: 30px;
      margin-top: 10px;
      z-index: 22;
    }
    img:nth-child(3) {
      margin-left: -20px;
      height: 50px;
    }
    span:nth-child(4) {
      color: red;
      font-size: 26px;
      display: block;
      width: 71px;
      margin-left: -74px;
      text-align: center;
    }
    span:nth-child(5) {
      color: #7ff3f4;
      font-size: 15px;
      display: block;
      width: 129px;
      margin-left: 22px;
    }
  }
  .mapBtn,
  .mapBtn:nth-child(2),
  .mapBtn:nth-child(3) {
    position: absolute;
    z-index: 99;
    color: #fff;
    background: #014e84;
    margin-top: 38px;
    margin-left: calc(100% - 140px);
    border-radius: 11px;
    height: 43px;
    display: inline-flex;
    width: 107px;
    cursor: pointer;
    img {
      margin: 8px 3px 8px 5px;
      height: 28px;
      width: 30px;
    }
    .text {
      width: 100px;
      text-align: center;
      margin: 3px;
      span:nth-child(1) {
        width: 100%;
        display: block;
        font-size: 10px;
      }
      span:nth-child(2) {
        width: 100%;
        display: block;
        color: red;
        font-size: 17px;
        font-weight: bold;
      }
    }
    &:hover {
      box-shadow: 0px 0px 10px #7ff3f4;
    }
  }
  .mapBtn:nth-child(2) {
    margin-top: 100px;
  }
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 50px);
  }
}
.left2-btn {
  height: 19px;
  width: 60px;
  background-color: #4478d0;
  color: #fff;
  font-size: 0.1rem !important;
  font-weight: 700;

  line-height: 19px !important;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.left2-btn.btn1 {
  right: 78px;
  margin-top: 22px;
}
.left2-btn.btn2 {
  right: 12px;
  margin-top: 22px;
}
.left2-btn.date {
  right: 22px;
  margin-top: 12px;
}
.left2-btn.mounce {
  right: 22px;
  margin-top: 57px;
}
.left2-btn.all {
  right: 22px;
  margin-top: 101px;
}

.rightData {
  position: relative;
  color: #fff;
  background: #010945;
  border-radius: 11px;
  height: 50px;
  display: inline-flex;
  width: 125px;
  cursor: pointer;
  font-weight: 700;
  img {
    margin: 12px;
    height: 20px;
    width: 22px;
  }
  .text {
    width: 100px;
    text-align: center;
    // margin: 3px;
    line-height: 21px;
    span:nth-child(1) {
      width: 100%;
      display: block;
      font-size: 13px;
    }
    span:nth-child(2) {
      width: 100%;
      display: block;
      color: #00ccff;
      font-size: 14px;
    }
  }
}
.rightData1 {
  margin-left: 9px;
  margin-top: 10px;
}
.rightData2 {
  margin-left: 35px;
  margin-top: 10px;
}
.rightData3 {
  margin-top: 17px;
  margin-left: 9px;
}
.rightData4 {
  margin-top: 17px;
  margin-left: 35px;
}
.rightData5 {
  margin-top: 8px;
  margin-left: 42px;
}

.textBox {
  width: 70%;
  height: 58px;
  // margin: 0 auto;
  overflow: hidden;
  position: absolute;
  text-align: left;
  color: #09b560;
  left: 20px;
  top: 20px;
  font-size: 15px;
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
}
.leftEchartTitle {
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 15px;
  position: absolute;
  .block1 {
    width: 17px;
    height: 8px;
    background: #2ec7c9;
    border-radius: 3px;
    margin-top: 11px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 12px;
    margin: 0px 3px 0px 3px;
  }
  span:nth-child(3) {
    color: #2ec7c9;
    font-size: 14px;
    font-weight: 700;
    display: block;
    width: 41px;
    text-align: center;
  }
  span:nth-child(4) {
    font-size: 12px;
    color: #2ec7c9;
  }
}
.leftEchartTitle2 {
  right: 18px;
  .block1 {
    background: #b6a2de;
  }
  span:nth-child(3) {
    color: #b6a2de;
    //   font-size: 15px;
  }
}
.leftEchartTitle3 {
  margin-top: 37px;
  .block1 {
    background: #5ab1ef;
  }
  span:nth-child(3) {
    color: #5ab1ef;
    //   font-size: 15px;
  }
}
.leftEchartTitle4 {
  margin-top: 37px;
  right: 15px;
  .block1 {
    background: #ffb980;
  }
  span:nth-child(2) {
    width: 77px;
  }
  span:nth-child(3) {
    color: #ffb980;
    //   font-size: 15px;
  }
}
.leftEchartTitle5 {
  margin-top: 64px;
  .block1 {
    background: #fc8452;
  }
  span:nth-child(3) {
    color: #fc8452;
    font-size: 15px;
  }
}
.bayHover {
  background-color: #0445b5;
  color: #fff !important;
}
.leftEchartTitle.xbNan {
  right: 20px;
  margin-top: 76px;
  .block1 {
    width: 10px;
    height: 10px;
    background: #008dec;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 12px;
  }
  span:nth-child(3) {
    color: #008dec;
    font-size: 15px;
  }
  span:nth-child(4) {
    font-size: 12px;
    color: #008dec;
  }
}
.leftEchartTitle.xbNv {
  right: 20px;
  margin-top: 135px;
  .block1 {
    width: 10px;
    height: 10px;
    background: #886eff;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 12px;
  }
  span:nth-child(3) {
    color: #886eff;
    font-size: 15px;
  }
  span:nth-child(4) {
    font-size: 12px;
    color: #886eff;
  }
}
.showDialog:hover {
  cursor: pointer;
}
.bajgxt-home {
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;
      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .el-pagination {
      color: #a2a5a5;
    }
    .btn-prev,
    .btn-next {
      background: transparent !important;
    }
    .el-dialog__body {
      padding: 10px 20px;
      height: calc(100% - 60px);
      .el-input {
        width: 50px !important;
        border-bottom: 1px solid #8a7b7b !important;
      }
    }
  }
  /deep/ .el-dialog {
    width: 80% !important;
    height: 77%;
  }
}

 src/views/home/index_1600_900.scss

New file
@@ -0,0 +1,698 @@
.bajgxt-home {
  height: 100%;
  width: 100%;
  background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
  background-size: 100% 100%;

  .head-title {
    background: url("../../../public/img/bajgxt/title2.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 77px;
    text-align: center;
    // position: relative;
    span {
      font-family: "Arial Normal", "Arial", sans-serif;
      font-size: 36px;
      color: #ffffff;
      text-align: center;
      line-height: 77px;
    }
    img {
      position: absolute;
      margin-top: 22px;
      margin-left: 29%;
    }
  }
  .sub-title {
    float: right;
    color: #fff;
    margin-right: 52px;
    font-size: 18px;
    margin-top: -35px;
    cursor: pointer;
    &:hover {
      color: #90cef0;
    }
  }
  .content {
    margin: 5px 20px 20px 20px;
    height: calc(100% - 102px);
    width: calc(100% - 40px);
    display: flex;
    .left,
    .right {
      width: 27%;
      height: 100%;
    }
    .middle {
      width: calc(46% - 50px);
      height: 100%;
      margin: 0px 25px;
      position: relative;
    }
  }
  .leftimg {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: contain;
    width: 100%;
    height: 260px;
  }
  .echartClass_1600_900 {
    // height: 100%;
    width: 100%;
    height: calc(100% - 70px);
  }
  .left {
    .left1 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      height: 60%;
      width: 100%;
      background-size: 100% 100%;
      position: relative;
      #left1Echart {
        @extend .echartClass_1600_900;
        height: calc(100% - 140px) !important;
        margin-top: 68px;
      }
    }
    .left2 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      position: relative;
      #left2Echart {
        @extend .echartClass_1600_900;
      }
    }
  }
  .right {
    .right1 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      position: relative;
      #right1Echart {
        @extend .echartClass_1600_900;
      }
    }
    .right2 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
      margin-top: 30px;
      position: relative;
      #right2Echart {
        @extend .echartClass_1600_900;
      }
    }
    .right3 {
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      #right3Echart {
        @extend .echartClass_1600_900;
      }
    }
  }
  .title-pane {
    display: inline-flex;
    height: 44px;
    img {
      width: 26px;
      height: 26px;
      margin: 12px 10px 0px 10px;
    }
    span {
      line-height: 54px;
      color: #fff;
      font-size: 17px;
    }
  }
  .title-pane1 {
    display: inline-flex;
    height: 33px;
    img {
      width: 26px;
      height: 26px;
      margin: 3.5px 10px 0px 10px;
    }
    span {
      line-height: 33px;
      color: #fff;
      font-size: 17px;
    }
  }
  .title-pane2 {
    display: inline-flex;
    height: 41px;
    img {
      width: 26px;
      height: 26px;
      margin: 8.5px 10px 0px 10px;
    }
    span {
      line-height: 50px;
      color: #fff;
      font-size: 17px;
    }
  }

  .middle {
    .mapimg {
      background: url("../../../public/img/bajgxt/u3.png") no-repeat;
      background-size: 100% 100%;
      height: 60%;
      width: 100%;
      #map {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        margin: 0px 20px;
        top: 20px;
        position: relative;
      }
    }

    .table {
      margin-top: 25px;
      height: calc(40% - 25px);
      width: 100%;
      background: url("../../../public/img/bajgxt/table.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .table-title {
        background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        width: 267px;
        margin-top: -13px;
        height: 50px;
        margin-left: calc(50% - 135.5px);
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 54px;
      }
      .lefttop {
        background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: -7px;
        top: -9px;
      }
      .leftbottom {
        background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: -7px;
        bottom: -7px;
      }
      .righttop {
        background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: calc(100% - 37px);
        top: -9px;
      }
      .rightbottom {
        background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
        background-size: 100% 100%;
        width: 44px;
        height: 56px;
        position: absolute;
        left: calc(100% - 37px);
        bottom: -7px;
      }
    }
  }
  .middle {
    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 65px);
      margin: 0px 20px 15px;
      top: 50px;
    }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #031d4b !important;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td,
    /deep/ .el-table th,
    .el-table tr {
      background: #03225b !important;
    }
    /deep/ .el-table .cell {
      color: #fff;
      text-align: center;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom-color: transparent;
    }
    /deep/ .el-table__header th {
      border-bottom: 1px solid #031a38 !important;
    }
    /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #b0caf3;
    }
  }

  /deep/ .el-input__inner {
    height: 27px;
    color: #fff !important;
    font-size: 14px;
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 2px;
  }
  /deep/ .el-input {
    width: 138px;
  }
  /deep/ .el-select {
    line-height: 42px;
    position: absolute;
    right: 14px;
  }
  /deep/ .el-input__icon {
    line-height: 43px;
  }
  /deep/ .el-select:hover .el-input__inner,
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: none;
  }
  /deep/ .el-table,
  /deep/ .el-table__expanded-cell,
  /deep/ .el-table--border::after,
  /deep/ .el-table--group::after,
  /deep/ .el-table::before {
    background-color: transparent !important;
  }
  .card-text {
    height: 30px;
    padding: 8px 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    span:nth-child(2) {
      color: red;
      font-size: 21px;
      margin: 0px 10px;
      font-weight: bold;
    }
    span:nth-child(4) {
      margin-left: 15px;
    }
    span:nth-child(5) {
      margin: 0px 10px;
      color: red;
      font-size: 20px;
    }
  }
  .right-content {
    height: calc(100% - 71px);
    width: calc(100% - 30px);
    padding: 15px;
  }
  .card-list {
    margin-top: 0px !important;
    margin: 0px 60px 12px 10px;
    display: flex;
    height: 50px;
    line-height: 50px;
    img:first-child {
      height: 50px;
      z-index: 22;
    }
    img:nth-child(2) {
      position: absolute;
      margin-left: 13px;
      width: 30px;
      height: 30px;
      margin-top: 9px;
      z-index: 22;
    }
    img:nth-child(3) {
      margin-left: -20px;
    }
    span:nth-child(4) {
      color: red;
      font-size: 26px;
      display: block;
      width: 71px;
      margin-left: -78px;
      text-align: center;
    }
    span:nth-child(5) {
      color: #7ff3f4;
      font-size: 17px;
      display: block;
      width: 129px;
      margin-left: 16px;
    }
  }
  .mapBtn,
  .mapBtn:nth-child(2),
  .mapBtn:nth-child(3) {
    position: absolute;
    z-index: 99;
    color: #fff;
    background: #014e84;
    margin-top: 38px;
    margin-left: calc(100% - 140px);
    border-radius: 11px;
    height: 43px;
    display: inline-flex;
    width: 107px;
    cursor: pointer;
    img {
      margin: 8px 3px 8px 5px;
      height: 28px;
      width: 30px;
    }
    .text {
      width: 100px;
      text-align: center;
      margin: 3px;
      span:nth-child(1) {
        width: 100%;
        display: block;
        font-size: 10px;
      }
      span:nth-child(2) {
        width: 100%;
        display: block;
        color: red;
        font-size: 17px;
        font-weight: bold;
      }
    }
    &:hover {
      box-shadow: 0px 0px 10px #7ff3f4;
    }
  }
  .mapBtn:nth-child(2) {
    margin-top: 100px;
  }
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 50px);
  }
}
.left2-btn {
  height: 21px;
  width: 69px;
  background-color: #4478d0;
  color: #fff;
  font-size: 13px !important;
  font-weight: 700;

  line-height: 21px !important;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.left2-btn.btn1 {
  right: 106px;
  margin-top: 16px;
}
.left2-btn.btn2 {
  right: 25px;
  margin-top: 16px;
}
.left2-btn.date {
  right: 35px;
  margin-top: 0px;
}
.left2-btn.mounce {
  right: 35px;
  margin-top: 44px;
}
.left2-btn.all {
  right: 35px;
  margin-top: 87px;
}

.rightData {
  position: relative;
  color: #fff;
  background: #010945;
  border-radius: 11px;
  height: 50px;
  display: inline-flex;
  width: 142px;
  cursor: pointer;
  font-weight: 700;
  img {
    margin: 12px;
    height: 25px;
    width: 27px;
  }
  .text {
    width: 100px;
    text-align: center;
    // margin: 3px;
    line-height: 25px;
    span:nth-child(1) {
      width: 100%;
      display: block;
      font-size: 14px;
    }
    span:nth-child(2) {
      width: 100%;
      display: block;
      color: #00ccff;
      font-size: 15px;
    }
  }
}
.rightData1 {
  margin-left: 29px;
  margin-top: 0px;
}
.rightData2 {
  margin-left: 58px;
  margin-top: 0px;
}
.rightData3 {
  margin-top: 10px;
  margin-left: 29px;
}
.rightData4 {
  margin-top: 10px;
  margin-left: 58px;
}
.rightData5 {
  margin-top: 8px;
  margin-left: 42px;
}

.textBox {
  width: 70%;
  height: 58px;
  // margin: 0 auto;
  overflow: hidden;
  position: absolute;
  text-align: left;
  color: #09b560;
  left: 20px;
  top: 20px;
  font-size: 15px;
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
}
.leftEchartTitle {
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 18px;
  position: absolute;
  .block1 {
    width: 18px;
    height: 9px;
    background: #2ec7c9;
    border-radius: 3px;
    margin-top: 11px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
    margin: 0px 10px 0px 3px;
  }
  span:nth-child(3) {
    color: #2ec7c9;
    font-size: 17px;
    font-weight: 700;
    display: block;
    width: 65px;
    text-align: center;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #2ec7c9;
  }
}
.leftEchartTitle2 {
  right: 18px;
  .block1 {
    background: #b6a2de;
  }
  span:nth-child(3) {
    color: #b6a2de;
    font-size: 15px;
  }
}
.leftEchartTitle3 {
  margin-top: 37px;
  .block1 {
    background: #5ab1ef;
  }
  span:nth-child(3) {
    color: #5ab1ef;
    font-size: 15px;
  }
}
.leftEchartTitle4 {
  margin-top: 37px;
  right: 18px;
  .block1 {
    background: #ffb980;
  }
  span:nth-child(2) {
    width: 77px;
  }
  span:nth-child(3) {
    color: #ffb980;
    font-size: 15px;
  }
}
.leftEchartTitle5 {
  margin-top: 64px;
  .block1 {
    background: #fc8452;
  }
  span:nth-child(3) {
    color: #fc8452;
    font-size: 15px;
  }
}
.bayHover {
  background-color: #0445b5;
  color: #fff !important;
}
.leftEchartTitle.xbNan {
  right: 47px;
  margin-top: 76px;
  .block1 {
    width: 10px;
    height: 10px;
    background: #008dec;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #008dec;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #008dec;
  }
}
.leftEchartTitle.xbNv {
  right: 47px;
  margin-top: 135px;
  .block1 {
    width: 10px;
    height: 10px;
    background: #886eff;
    margin-top: 10px;
    border-radius: 100%;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #886eff;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #886eff;
  }
}
.showDialog:hover {
  cursor: pointer;
}
.bajgxt-home {
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;
      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
    .el-pagination {
      color: #a2a5a5;
    }
    .btn-prev,
    .btn-next {
      background: transparent !important;
    }
    .el-dialog__body {
      padding: 10px 20px;
      height: calc(100% - 60px);
      .el-input {
        width: 50px !important;
        border-bottom: 1px solid #8a7b7b !important;
      }
    }
  }
  /deep/ .el-dialog {
    width: 80% !important;
    height: 77%;
  }
}

 src/views/map/carGps.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-08-14 10:57:44
 * @Last Modified time: 2021-09-03 16:20:17
 * menu-name 押运人员定位
 */
<template>
@@ -126,8 +126,10 @@
                       :modal='false'
                       :visible.sync="dialogVisible"
                       :before-close="dialogBeforeClose"
                       :close-on-click-modal='false'
                       class="car-video-box">
                <iframe src="/carVideo/parent.html"
                        ref="videoIframe"
                        frameborder="0"></iframe>
            </el-dialog>
        </el-col>
@@ -303,9 +305,18 @@

                if (cont != undefined) {
                    that.dialogVisible = true

                    that.$refs.videoIframe.contentWindow.startVideo()
                }
            })

        },

        dialogBeforeClose() {
          this.dialogVisible = false

          this.$refs.videoIframe.contentWindow.closeVideo()

        }

    },

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -325,6 +325,57 @@
};
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1280px) {
  .box-card {
    font-size: 15px;
    width: 128px;
    background: #00aaf1;
    height: 117px;
    text-align: center;
    margin-right: 28px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 36px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 31px;
    }
  }
  .col-content {
    margin-top: 39px !important;
  }
}
// 适配分辨率1600*900
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .box-card {
    font-size: 15px;
    width: 128px;
    background: #00aaf1;
    height: 117px;
    text-align: center;
    margin-right: 66px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 36px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 31px;
    }
  }
}
@media screen and(min-width:1601px) and (max-width: 1920px) {
  .box-card {
    width: 150px;
    background: #00aaf1;
    height: 135px;
    text-align: center;
    margin-right: 66px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 40px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 34px;
    }
  }
}
.page1 {
  height: 100%;
  width: 100%;
@@ -362,23 +413,11 @@
    font-weight: 600;
  }
}
.box-card {
  width: 150px;
  background: #00aaf1;
  height: 135px;
  text-align: center;
  margin-right: 66px;
  box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
  line-height: 40px;
}

.box-card span {
  display: block;
  width: 100%;
  color: #fff;
}
.box-card span:nth-child(2) {
  color: #06ffff;
  font-size: 34px;
}
.rowTitle {
  height: 40px;

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -414,6 +414,271 @@
};
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1280px) {
  .box-card {
    font-size: 15px;
    width: 128px;
    background: #00aaf1;
    height: 117px;
    text-align: center;
    margin-right: 28px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 36px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 31px;
    }
  }
  .col-content {
    margin-top: 39px !important;
  }
  .leftEchartTitle.qing {
    right: 10px;
    margin-top: 42px;
    .block1 {
      background: #73c0de;
      margin-top: 11px;
      width: 10px;
      height: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 12px;
      margin: 0px 3px 0px 3px;
    }
    span:nth-child(3) {
      color: #73c0de;
      font-size: 15px;
      width: 45px;
    }
    span:nth-child(4) {
      font-size: 12px;
      color: #73c0de;
    }
  }
  .leftEchartTitle.zhong {
    right: 10px;
    margin-top: 83px;
    .block1 {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #fac858;
      margin-top: 11px;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 12px;
      margin: 0px 3px 0px 3px;
    }
    span:nth-child(3) {
      color: #fac858;
      font-size: 15px;
      width: 45px;
    }
    span:nth-child(4) {
      font-size: 12px;
      color: #fac858;
    }
  }
  .leftEchartTitle.lao {
    right: 10px;
    margin-top: 125px;
    .block1 {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #91cc75;
      margin-top: 11px;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 12px;
      margin: 0px 3px 0px 3px;
    }
    span:nth-child(3) {
      color: #91cc75;
      font-size: 15px;
      width: 45px;
    }
    span:nth-child(4) {
      font-size: 12px;
      color: #91cc75;
    }
  }
}
// 适配分辨率1600*900
@media screen and (min-width: 1281px)and (max-width: 1600px)  {
  .box-card {
    font-size: 15px;
    width: 128px;
    background: #00aaf1;
    height: 117px;
    text-align: center;
    margin-right: 66px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 36px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 31px;
    }
  }
  .leftEchartTitle.qing {
    right: 37px;
    margin-top: 42px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #73c0de;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #73c0de;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #73c0de;
    }
  }
  .leftEchartTitle.zhong {
    right: 37px;
    margin-top: 83px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #fac858;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #fac858;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #fac858;
    }
  }
  .leftEchartTitle.lao {
    right: 37px;
    margin-top: 125px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #91cc75;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #91cc75;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #91cc75;
    }
  }
}
@media screen and (min-width: 1601px)and (max-width: 1920px) {
  .box-card {
    width: 150px;
    background: #00aaf1;
    height: 135px;
    text-align: center;
    margin-right: 66px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 40px;
    span:nth-child(2) {
      color: #06ffff;
      font-size: 34px;
    }
  }
  .leftEchartTitle.qing {
    right: 37px;
    margin-top: 42px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #73c0de;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #73c0de;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #73c0de;
    }
  }
  .leftEchartTitle.zhong {
    right: 37px;
    margin-top: 83px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #fac858;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #fac858;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #fac858;
    }
  }
  .leftEchartTitle.lao {
    right: 37px;
    margin-top: 125px;
    .block1 {
      width: 10px;
      height: 10px;
      background: #91cc75;
      margin-top: 10px;
      border-radius: 100%;
    }
    span:nth-child(2) {
      color: #fff;
      font-size: 13px;
    }
    span:nth-child(3) {
      color: #91cc75;
      font-size: 17px;
    }
    span:nth-child(4) {
      font-size: 13px;
      color: #91cc75;
    }
  }
}

.page1 {
  height: 100%;
  width: 100%;
@@ -452,23 +717,11 @@
    font-weight: 600;
  }
}
.box-card {
  width: 150px;
  background: #00aaf1;
  height: 135px;
  text-align: center;
  margin-right: 66px;
  box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
  line-height: 40px;
}

.box-card span {
  display: block;
  width: 100%;
  color: #fff;
}
.box-card span:nth-child(2) {
  color: #06ffff;
  font-size: 34px;
}
.rowTitle {
  height: 40px;
@@ -540,72 +793,6 @@
  span:nth-child(4) {
    font-size: 13px;
    color: #2ec7c9;
  }
}
.leftEchartTitle.qing {
  right: 37px;
  margin-top: 42px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #73c0de;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #73c0de;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #73c0de;
  }
}
.leftEchartTitle.zhong {
  right: 37px;
  margin-top: 83px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #fac858;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #fac858;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #fac858;
  }
}
.leftEchartTitle.lao {
  right: 37px;
  margin-top: 125px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #91cc75;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #91cc75;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #91cc75;
  }
}
</style>

 vue.config.js

@@ -30,10 +30,10 @@
        // target: 'http://192.168.0.109:1',
        //远程演示服务地址,可用于直接启动项目
        // target: 'http://2h3f861221.wicp.vip:58646',
        // target: 'http://s16s652780.51mypc.cn/api',
        // target: 'http://192.168.0.114:82',
        // target: 'http://192.168.0.109:82',
        target: 'http://s16s652780.51mypc.cn/api',
        // target: 'http://192.168.0.114:82',
        // target: 'http://192.168.0.108:82',
        // target: 'http://s16s652780.51mypc.cn/api',
        // 服务器使用
        // target: 'http://localhost:82',
        ws: true,

			@@ -110,10 +110,10 @@
			<textarea id="initParam" type="text" style="width:260px;height:200px;">
			{
			"argument": {
			"appkey": "26589653",
			"ip": "61.131.136.18",
			"port": 10443,
			"secret": "hSzZW0VHfyHgJziMemOx",
			"appkey": "26864254",
			"ip": "47.49.21.159",
			"port": 443,
			"secret": "oC2JAzu6PH5OqqcbGQCy",
			"enableHTTPS": 1,
			"layout": "1x1",
			"playMode": 0
			@@ -136,7 +136,7 @@
			<textarea id="playParam" type="text" style="width:260px;height:200px;">
			{
			"argument": {
			"cameraIndexCode": "1f792961883543c6868cc8b200291962",
			"cameraIndexCode": "36015602001310925219",
			"ezvizDirect": 0,
			"gpuMode": 0,
			"streamMode": 0,
			@@ -386,7 +386,12 @@
			});
			}

			initPlugin();
			function close() {
			if (oWebControl != null) {
			oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
			oWebControl.JS_Disconnect().then(function () { }, function () { });
			}
			}


			// 获取公钥

New file
			@@ -0,0 +1,503 @@
			<!doctype html>
			<html>

			<head>
			<title>预览Demo</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta http-equiv="Pragma" content="no-cache" />
			<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
			<meta http-equiv="Expires" content="0" />
			</head>
			<style>
			html,
			body {
			padding: 0;
			margin: 0;
			}

			.playWnd {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			width: 800px;
			height: 400px;
			color: #fff;
			}

			.cbInfoDiv {
			float: left;
			width: 360px;
			margin-left: 16px;
			border: 1px solid #7F9DB9;
			}

			.cbInfo {
			height: 200px;
			padding: 5px;
			border: 1px solid #7F9DB9;
			word-break: break-all;
			overflow: scroll／auto;
			}

			.operate {
			margin-top: 24px;
			display: none;
			}

			.operate::after {
			content: '';
			display: block;
			clear: both;
			}

			.operate .btns {
			height: 32px;
			}

			.module {
			float: left;
			width: 120px;
			min-height: 290px;
			margin-left: 10px;
			padding: 16px 8px;
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			}

			.module .item {
			margin-bottom: 4px;
			}

			.module .label {
			width: 150px;
			display: inline-block;
			vertical-align: middle;
			margin-right: 8px;
			text-align: right;
			}

			.module input[type="text"],
			.module select {
			box-sizing: border-box;
			display: inline-block;
			vertical-align: middle;
			margin-left: 0;
			width: 150px;
			min-height: 20px;
			}

			.module .btn {
			min-width: 80px;
			min-height: 24px;
			margin-top: 16px;
			margin-left: 158px;
			}
			</style>

			<body>
			<div id="playWnd" class="playWnd"></div>
			<div id="operate" class="operate">
			<!--初始化、反初始化、设置认证信息接口调用入口。
			1.插件所有接口都需要在调用初始化并返回成功后才能调用
			2.设置认证信息仅适用于对接多平台时的情况，具体参照开发指南
			3.反初始化后，插件资源销毁-->
			<div class="module" style="left:30px;height:30px;width:280px;padding:10;margin:10;">
			<div class="item">
			<label>初始化相关参数：</label>
			<textarea id="initParam" type="text" style="width:260px;height:200px;">
			{
			"argument": {
			"appkey": "26589653",
			"ip": "61.131.136.18",
			"port": 10443,
			"secret": "hSzZW0VHfyHgJziMemOx",
			"enableHTTPS": 1,
			"layout": "1x1",
			"playMode": 0
			},
			"funcName": "init"
			}
			</textarea>
			</div>
			<div class="item">

			<button style="width:10px;padding:0;margin:0;" id="initBtn" class="btn">执行</button>
			</div>
			</div>

			<!--单个点位播放、批量点位播放、批量停止播放、全部停止播放接口调用入口。
			1.authUuid为对接多平台时必须的播放字段，对接单平台时，可不指定-->
			<div class="module" style="height:30;width:280px;padding:10;margin:10;">
			<div class="item">
			<label>播放相关参数：</label>
			<textarea id="playParam" type="text" style="width:260px;height:200px;">
			{
			"argument": {
			"cameraIndexCode": "1f792961883543c6868cc8b200291962",
			"ezvizDirect": 0,
			"gpuMode": 0,
			"streamMode": 0,
			"transMode": 1,
			"wndId": -1
			},
			"funcName": "startPreview"
			}
			</textarea>
			</div>
			<div class="item">

			<button style="width:10px;padding:0;margin:0;" id="playBtn" class="btn">执行</button>
			</div>
			</div>
			<div class="module" style="height:50;width:300px;padding:10;margin:10;">
			<legend>返回值信息</legend>
			<div id="cbInfo" class="cbInfo"></div>
			<button style="width:80px;height:24px;padding:30;margin:0;" id="clear">清空</button>
			</div>
			</div>
			</body>
			<script src="jquery-1.12.4.min.js"></script>
			<script src="jsencrypt.min.js"></script>
			<script src="jsWebControl-1.0.0.min.js"></script>

			<script type="text/javascript">
			// 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
			var oWebControl = null;
			var bIE = (!!window.ActiveXObject \|\| 'ActiveXObject' in window); // 是否为IE浏览器
			var pubKey = ''; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
			var initCount = 0; // 异常重启计数
			var iframePos = {}; // iframe相对文档的位置
			var parentTitle = ''; // 父页面标题
			var iframeClientPos = null; // iframe相对视窗的位置
			var iframeParentShowSize = null; // 视窗大小 width height

			// 标签关闭
			$(window).unload(function () {
			if (oWebControl != null) {
			oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
			oWebControl.JS_Disconnect().then(function () { }, function () { });
			}
			});

			// 步骤1：监听父页面的消息
			window.addEventListener('message', function (e) {
			if (e && e.data) {
			console.log(e.data.action, 9595);

			switch (e.data.action) {

			case 'sendTitle': // 父页面将其标题发送过来，子页面保存该标题，以便创建插件窗口成功后将标题设置回给父页面
			parentTitle = e.data.info;
			break;
			case 'updatePos': // 更新插件位置：JS_CreateWnd时需要父页面计算滚动条偏移量，初始偏移量叠加该偏移量作为iframe的偏移量，防止插件窗口与DIV窗口初始不贴合情况
			var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量

			console.log(iframePos, scrollValue, iframePos.left + scrollValue.left, iframePos.top + scrollValue.top)

			oWebControl.JS_SetDocOffset({
			top: 240,
			left: 410,
			}); // 更新插件窗口位置

			oWebControl.JS_Resize(800, 400);
			setWndCover();
			break;
			case 'updateInitParam':
			iframePos = e.data.iframeOffset; // iframe与文档的偏移量
			iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
			iframeParentShowSize = e.data.showSize; // 视窗大小
			break;
			case 'resize':
			iframeParentShowSize = e.data.showSize; // 视窗大小
			iframePos = e.data.iframeOffset; // iframe与文档的偏移量
			iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
			setWndCover();
			break;
			case 'scroll':
			iframeParentShowSize = e.data.showSize; // 视窗大小
			iframePos = e.data.iframeOffset; // iframe与文档的偏移量
			iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
			var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
			if (oWebControl) {
			oWebControl.JS_SetDocOffset({
			left: iframePos.left + scrollValue.left,
			top: iframePos.top + scrollValue.top
			}); // 更新插件窗口位置
			oWebControl.JS_Resize(800, 400);
			setWndCover();
			}
			break;
			default:
			break;
			}
			}
			});

			// 顶部：iframe.getBoundingClientRect().top小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().top部分需要剪切
			// 底部：(iframe.getBoundingClientRect().bottom - iframe父窗口可视域高度，为H1)为不可见部分
			// ($(window).height() - DIV.get(0).getBoundingClientRect().bottom)
			// 为DIV底部与其所在iframe底部之间的距离H2，H1-H2的值大于0则表示DIV有部分在不可见区域
			// 左边：iframe.getBoundingClientRect().left小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().left部分需要剪切
			// 右边：(iframe宽度 - DIV.get(0).getBoundingClientRect().right表示DIV右边与其父iframe右边之间的距离，为W1)
			// (iframe父窗口可视域宽度-iframe.getBoundingClientRect().left表示iframe左边与iframe父窗口可视域右边之间的距离，为W2)
			// (iframe宽度 - W2 - W1)如果大于0，则表示DIV右边超出了iframe父窗口可视域，需要剪切超过的部分
			function setWndCover() {
			if (oWebControl) {
			// 准备要用到的一些数据
			var iframeWndHeight = $(window).height(); // iframe窗口高度
			var iframeWndWidth = $(window).width(); // iframe窗口宽度
			var divLeft = $("#playWnd").get(0).getBoundingClientRect().left;
			var divTop = $("#playWnd").get(0).getBoundingClientRect().top;




			var divRight = $("#playWnd").get(0).getBoundingClientRect().right;
			var divBottom = $("#playWnd").get(0).getBoundingClientRect().bottom;


			var divWidth = $("#playWnd").width();
			var divHeight = $("#playWnd").height();

			// divLeft = (divLeft > 800 \|\| divLeft == 0) ? 800 : divLeft;

			// divTop = (divTop > 400 \|\| divTop == 0) ? 400 : divTop;

			// divRight = (divRight > 800 \|\| divRight == 0) ? 800 : divRight;

			// divBottom = (divBottom > 400 \|\| divBottom == 0) ? 400 : divBottom;


			console.log(iframeWndHeight, iframeWndWidth, divLeft, divTop, divRight, divBottom, divWidth, divHeight, 548)

			oWebControl.JS_RepairPartWindow(0, 0, 801, 401); // 多1个像素点防止还原后边界缺失一个像素条

			// 判断剪切矩形的上边距
			if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop) {
			var deltaTop = Math.abs(iframeClientPos.top) - divTop;
			oWebControl.JS_CuttingPartWindow(0, 0, 801, deltaTop + 1);
			//console.log({deltaTop: deltaTop});
			}

			// 判断剪切矩形的左边距
			if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft) {
			var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
			//console.log({deltaLeft: deltaLeft});
			oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, 401); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
			}

			// 判断剪切矩形的右边距
			var W1 = iframeWndWidth - divRight;
			var W2 = iframeParentShowSize.width - iframeClientPos.left;
			if (W2 < divWidth) {
			var deltaRight = iframeWndWidth - W2 - W1;
			if (deltaRight > 0) {
			oWebControl.JS_CuttingPartWindow(800 - deltaRight, 0, deltaRight + 1, 401);
			}
			}

			// 判断剪切矩形的下边距
			var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
			var H2 = iframeWndHeight - divBottom;
			var deltaBottom = H1 - H2;
			//console.log({deltaBottom: deltaBottom});
			if (deltaBottom > 0) {
			oWebControl.JS_CuttingPartWindow(0, 400 - deltaBottom, 801, deltaBottom + 1);
			}
			}
			}

			// 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
			function initPlugin() {
			oWebControl = new WebControl({
			szPluginContainer: "playWnd",
			iServicePortStart: 15900,
			iServicePortEnd: 15909,
			szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
			cbConnectSuccess: function () {
			initCount = 0;
			setCallbacks();
			oWebControl.JS_StartService("window", {
			dllPath: "./VideoPluginConnect.dll"
			}).then(function () {
			// 步骤2：JS_CreateWnd时指定cbSetDocTitle回调，并在回调中向父页面发送更新标题消息，标题为回调出来的uuid
			oWebControl.JS_CreateWnd("playWnd", 800, 400, {
			cbSetDocTitle: function (uuid) {
			oWebControl._pendBg = false;
			window.parent.postMessage({
			action: 'updateTitle',
			msg: '子页面通知父页面修改title',
			info: uuid
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}
			}).then(function () {
			// 步骤3：JS_CreateWnd成功后通知父页面将其标题修改回去
			console.log("JS_CreateWnd success");
			window.parent.postMessage({
			action: 'updateTitle',
			msg: '子页面通知父页面更新title',
			info: parentTitle
			}, '\*');

			// 步骤4：发消息更新插件窗口位置：这里不直接更新的原因是，父页面默认可能就存在滚动条，此时有滚动量
			window.parent.postMessage({
			action: 'updatePos',
			msg: '更新Pos'
			}, '\*');

			initBtnClicked();

			setTimeout(function () {
			$("#playBtn").trigger('click');
			}, 3000)
			});
			}, function () {
			console.log("JS_CreateWnd fail");
			});
			},
			cbConnectError: function () {
			console.log("cbConnectError");
			oWebControl = null;
			$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
			WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount++;
			if (initCount < 3) {
			setTimeout(function () {
			initPlugin();
			}, 3000)
			} else {
			$("#playWnd").html("插件启动失败，请检查插件是否安装！<a href='./VideoWebPlugin.exe' target='_blank' style='color: var(--mcblue)'>点击下载</a>");
			}
			},
			cbConnectClose: function (bNormalClose) {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			if (true == bNormalClose) {
			console.log("cbConnectClose normal");
			} else {
			console.log("cbConnectClose exception");
			}

			oWebControl = null;
			}
			});
			}

			initPlugin();


			// 获取公钥
			function getPubKey(callback) {
			oWebControl.JS_RequestInterface({
			funcName: "getRSAPubKey",
			argument: JSON.stringify({
			keyLength: 1024
			})
			}).then(function (oData) {
			console.log(oData)
			if (oData.responseMsg.data) {
			pubKey = oData.responseMsg.data
			callback()
			}
			})
			}

			// 设置窗口控制回调
			function setCallbacks() {
			oWebControl.JS_SetWindowControlCallback({
			cbIntegrationCallBack: cbIntegrationCallBack
			});
			}

			// 推送消息
			function cbIntegrationCallBack(oData) {
			showCBInfo(JSON.stringify(oData.responseMsg));
			}

			// RSA加密
			function setEncrypt(value) {
			var encrypt = new JSEncrypt();
			encrypt.setPublicKey(pubKey);
			return encrypt.encrypt(value);
			}

			function requestInterface(value) {
			oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
			console.log(oData)
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
			});
			}

			// 显示接口返回的消息及插件回调信息
			function showCBInfo(szInfo, type) {
			if (type === 'error') {
			szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo +
			"</div>";
			} else {
			szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
			}
			$("#cbInfo").html(szInfo + $("#cbInfo").html());



			}

			function initBtnClicked() {
			var param = $("#initParam").val();
			//删除字符串中的回车换行
			param = param.replace(/(\s*)/g, "");

			// 执行初始化
			requestInterface(param);
			}

			$("#initBtn").click(function () {
			initBtnClicked();
			})

			// $('#initBtn').trigger("click");

			$("#playBtn").click(function () {
			var param = $("#playParam").val();
			//删除字符串中的回车换行
			param = param.replace(/(\s*)/g, "");

			console.log(param, 232323)

			// 执行预览
			requestInterface(param);
			})

			// 清空
			$("#clear").click(function () {
			$("#cbInfo").html('');
			})

			// 格式化时间
			function dateFormat(oDate, fmt) {
			var o = {
			"M+": oDate.getMonth() + 1, //月份
			"d+": oDate.getDate(), //日
			"h+": oDate.getHours(), //小时
			"m+": oDate.getMinutes(), //分
			"s+": oDate.getSeconds(), //秒
			"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
			"S": oDate.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
			}
			for (var k in o) {
			if (new RegExp("(" + k + ")").test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
			.length)));
			}
			}
			return fmt;
			}
			</script>

			</html>

			@@ -2,31 +2,30 @@
			<html>

			<head>
			<title>Window Demo</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta http-equiv="Pragma" content="no-cache" />
			<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
			<meta http-equiv="Expires" content="0" />
			<title>Window Demo</title>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta http-equiv="Pragma" content="no-cache" />
			<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
			<meta http-equiv="Expires" content="0" />
			</head>
			<style>
			html,
			body {
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			}
			html,
			body {
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			}

			.iframe {
			width: 100%;
			height: 100%;
			}
			.iframe {
			width: 100%;
			height: 100%;
			}
			</style>

			<body>
			<!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
			<iframe id="iframe1" class="iframe" src="children.html" scrolling="no"
			frameborder="0"></iframe>
			<!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
			<iframe id="iframe1" class="iframe" src="children.html" scrolling="no" frameborder="0"></iframe>
			</body>
			<script src="jquery-1.12.4.min.js"></script>
			<script src="jsencrypt.min.js"></script>
			@@ -34,151 +33,159 @@
			<!-- <script src="JsonToXml.js"></script>
			<script src="jsWebControl-Bridge.js"></script> -->
			<script type="text/javascript">
			// 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
			var iframeWin = document.getElementById("iframe1"); {
			iframeWin.onload = function () {
			iframeWin.contentWindow.postMessage({
			action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
			msg: '将标题发给子页面',
			info: document.title
			}, '\*');
			iframeWin.contentWindow.postMessage({
			action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
			msg: '更新子页面一些初始值',
			showSize: { // 浏览器视窗高度与宽度
			width: 800,
			height: 400
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			// 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
			var iframeWin = document.getElementById("iframe1"); {
			iframeWin.onload = function () {
			iframeWin.contentWindow.postMessage({
			action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
			msg: '将标题发给子页面',
			info: document.title
			}, '\*');
			iframeWin.contentWindow.postMessage({
			action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
			msg: '更新子页面一些初始值',
			showSize: { // 浏览器视窗高度与宽度
			width: 800,
			height: 400
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}
			}

			// 步骤3：监听嵌入子页面的事件
			window.addEventListener('message', function (e) {
			console.log(e.data.msg);
			if (e && e.data) {
			switch (e.data.action) {
			case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
			document.title = e.data.info;
			break;
			case 'updatePos':
			var scrollLeftValue = document.documentElement.scrollLeft;
			var scrollTopValue = document.documentElement.scrollTop;
			iframeWin.contentWindow.postMessage({
			action: 'updatePos',
			msg: '更新Pos',
			scrollValue: { // 滚动条滚动的偏移量
			left: -1 * scrollLeftValue,
			top: -1 * scrollTopValue,
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			break;
			default:
			break;
			}
			}
			});

			// 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
			var resizeTimer = null;
			var resizeDate;
			$(window).resize(function () {
			resizeDate = new Date();
			if (resizeTimer === null) {
			resizeTimer = setTimeout(checkResizeEndTimer, 100);
			}
			});

			function checkResizeEndTimer() {
			if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
			clearTimeout(resizeTimer);
			resizeTimer = null;
			postResizeEvent();
			} else {
			setTimeout(checkResizeEndTimer, 100);
			}
			}

			function postResizeEvent() {
			iframeWin.contentWindow.postMessage({
			action: 'resize',
			msg: 'resize事件',
			showSize: { // 告诉嵌入的子页面视窗高度与宽度
			width: $(window).width(),
			height: $(window).height()
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}

			// 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
			// 为性能考虑，可以在定时器中处理
			var scrollTimer = null;
			var scrollDate;
			$(window).scroll(function (event) {
			postScrollEvent();
			scrollDate = new Date();
			if (scrollTimer === null) {
			scrollTimer = setTimeout(checkScrollEndTimer, 100);
			}
			});

			function checkScrollEndTimer() {
			if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
			clearTimeout(scrollTimer);
			scrollTimer = null;
			} else {
			postScrollEvent();
			setTimeout(checkScrollEndTimer, 100);
			}
			}

			function postScrollEvent() {
			// 计算滚动条偏移量
			var scrollLeftValue = document.documentElement.scrollLeft;
			var scrollTopValue = document.documentElement.scrollTop;
			iframeWin.contentWindow.postMessage({
			action: 'scroll',
			msg: 'scroll事件',
			// 步骤3：监听嵌入子页面的事件
			window.addEventListener('message', function (e) {
			console.log(e.data.msg);
			if (e && e.data) {
			switch (e.data.action) {
			case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
			document.title = e.data.info;
			break;
			case 'updatePos':
			var scrollLeftValue = document.documentElement.scrollLeft;
			var scrollTopValue = document.documentElement.scrollTop;
			iframeWin.contentWindow.postMessage({
			action: 'updatePos',
			msg: '更新Pos',
			scrollValue: { // 滚动条滚动的偏移量
			left: -1 * scrollLeftValue,
			top: -1 * scrollTopValue,
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			},
			showSize: { // 告诉嵌入的子页面视窗高度与宽度
			width: $(window).width(), // 视窗宽度
			height: $(window).height() // 视窗高度
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			left: -1 * scrollLeftValue,
			top: -1 * scrollTopValue,
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			break;
			default:
			break;
			}
			}
			});

			// 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
			var resizeTimer = null;
			var resizeDate;
			$(window).resize(function () {
			resizeDate = new Date();
			if (resizeTimer === null) {
			resizeTimer = setTimeout(checkResizeEndTimer, 100);
			}
			});

			function closeVideo() {
			document.getElementById('iframe1').contentWindow.close()
			}

			function startVideo() {
			document.getElementById('iframe1').contentWindow.initPlugin()
			}

			function checkResizeEndTimer() {
			if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
			clearTimeout(resizeTimer);
			resizeTimer = null;
			postResizeEvent();
			} else {
			setTimeout(checkResizeEndTimer, 100);
			}
			}

			function postResizeEvent() {
			iframeWin.contentWindow.postMessage({
			action: 'resize',
			msg: 'resize事件',
			showSize: { // 告诉嵌入的子页面视窗高度与宽度
			width: $(window).width(),
			height: $(window).height()
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}

			// 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
			// 为性能考虑，可以在定时器中处理
			var scrollTimer = null;
			var scrollDate;
			$(window).scroll(function (event) {
			postScrollEvent();
			scrollDate = new Date();
			if (scrollTimer === null) {
			scrollTimer = setTimeout(checkScrollEndTimer, 100);
			}
			});

			function checkScrollEndTimer() {
			if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
			clearTimeout(scrollTimer);
			scrollTimer = null;
			} else {
			postScrollEvent();
			setTimeout(checkScrollEndTimer, 100);
			}
			}

			function postScrollEvent() {
			// 计算滚动条偏移量
			var scrollLeftValue = document.documentElement.scrollLeft;
			var scrollTopValue = document.documentElement.scrollTop;
			iframeWin.contentWindow.postMessage({
			action: 'scroll',
			msg: 'scroll事件',
			scrollValue: { // 滚动条滚动的偏移量
			left: -1 * scrollLeftValue,
			top: -1 * scrollTopValue,
			},
			iframeClientPos: { // iframe相对视窗的位置
			left: iframeWin.getBoundingClientRect().left,
			right: iframeWin.getBoundingClientRect().right,
			top: iframeWin.getBoundingClientRect().top,
			bottom: iframeWin.getBoundingClientRect().bottom
			},
			showSize: { // 告诉嵌入的子页面视窗高度与宽度
			width: $(window).width(), // 视窗宽度
			height: $(window).height() // 视窗高度
			},
			iframeOffset: { // iframe偏离文档的位置
			left: iframeWin.offsetLeft,
			top: iframeWin.offsetTop
			}
			}, '\'); // '\'表示跨域参数，请结合自身业务合理设置
			}
			</script>

			</html>

			@@ -125,6 +125,12 @@
			// })
			// })







			var projection = getProjection("EPSG:4326");
			var projectionExtent = projection.getExtent();
			var size = getWidth(projectionExtent) / 256;
			@@ -174,6 +180,12 @@

			})
			})







			this.parentParameter();

			@@ -327,7 +339,7 @@
			},

			parentParameter () {
			this.$emit('childParameter', this.ol2d)
			this.$emit('childParameter', this.ol2d)
			}
			}
			}

			@@ -1,8 +1,6 @@
			.bajgxt-home {
			height: 100%;
			width: 100%;
			// width: 1920px;
			// height: 1080px;
			background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
			background-size: 100% 100%;

			@@ -20,16 +18,6 @@
			text-align: center;
			line-height: 77px;
			}
			// span:nth-child(2) {
			// position: absolute;
			// margin-top: 22px;
			// margin-left: 26%;
			// font-size: 22px;
			// cursor: pointer;
			// &:hover {
			// color: #90cef0;
			// }
			// }
			img {
			position: absolute;
			margin-top: 22px;
			@@ -47,20 +35,15 @@
			color: #90cef0;
			}
			}
			.side {
			width: 27%;
			height: 100%;
			}
			.content {
			margin: 5px 20px 20px 20px;
			// height: calc(100% - 77px);
			// width: 100%;
			height: calc(100% - 102px);
			width: calc(100% - 40px);
			display: flex;
			.left,
			.right {
			@extend .side;
			width: 27%;
			height: 100%;
			}
			.middle {
			width: calc(46% - 50px);
			@@ -75,7 +58,7 @@
			width: 100%;
			height: 260px;
			}
			.echartClass {
			.echartClass_1920 {
			// height: 100%;
			width: 100%;
			height: calc(100% - 70px);
			@@ -88,7 +71,7 @@
			background-size: 100% 100%;
			position: relative;
			#left1Echart {
			@extend .echartClass;
			@extend .echartClass_1920;
			height: calc(100% - 140px) !important;
			margin-top: 68px;
			}
			@@ -101,7 +84,7 @@
			margin-top: 25px;
			position: relative;
			#left2Echart {
			@extend .echartClass;
			@extend .echartClass_1920;
			}
			}
			}
			@@ -113,7 +96,7 @@
			height: 28%;
			position: relative;
			#right1Echart {
			@extend .echartClass;
			@extend .echartClass_1920;
			}
			}
			.right2 {
			@@ -124,7 +107,7 @@
			margin-top: 30px;
			position: relative;
			#right2Echart {
			@extend .echartClass;
			@extend .echartClass_1920;
			}
			}
			.right3 {
			@@ -134,7 +117,7 @@
			background-size: 100% 100%;
			margin-top: 25px;
			#right3Echart {
			@extend .echartClass;
			@extend .echartClass_1920;
			}
			}
			}
			@@ -424,7 +407,7 @@
			}
			/deep/ .el-table__body-wrapper {
			overflow: auto;
			height: 100%;
			height: calc(100% - 50px);
			}
			}
			.left2-btn {
			@@ -628,10 +611,11 @@
			right: 47px;
			margin-top: 76px;
			.block1 {
			width: 30px;
			height: 15px;
			width: 10px;
			height: 10px;
			background: #008dec;
			margin-top: 7px;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			@@ -650,10 +634,11 @@
			right: 47px;
			margin-top: 135px;
			.block1 {
			width: 30px;
			height: 15px;
			width: 10px;
			height: 10px;
			background: #886eff;
			margin-top: 7px;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;

			@@ -699,7 +699,7 @@
			selectJy,
			selectWg,
			punishList,
			lazyTrees,
			lazyTrees
			} from "../../api/index/index";

			import car from "@/assets/img/car.png";
			@@ -728,7 +728,7 @@
			materialNum: 0,
			punishNum: 0,
			wgNum: 0,
			ymwsNum: 0,
			ymwsNum: 0
			},
			carNum: 0,
			peoNum: 0,
			@@ -738,7 +738,7 @@
			left1Echart: null,
			left2Echart: null,
			mapEchart: null,
			right3Echart: null,
			right3Echart: null
			},
			left1loading: true,
			left2loading: true,
			@@ -755,7 +755,7 @@
			wz: 0,
			kqy: 0,
			nan: 0,
			nv: 0,
			nv: 0
			},
			left2EchartType: 0,
			poorPerformanceType: 3,
			@@ -765,29 +765,29 @@
			total: 0,
			current: 1,
			type: "zg",
			title: "资格异常人员清单",
			title: "资格异常人员清单"
			},
			dialogTable: {
			wgTable: [],
			jyTable: [],
			ymTable: [],
			ymTable: []
			},
			props: {
			children: "children",
			label: "title",
			value: "id",
			value: "id"
			},
			node1: {}, //选中的记录
			node2: {},
			node2: {}
			};
			},
			computed: {
			text() {
			return {
			id: this.number,
			val: this.textArr[this.number],
			val: this.textArr[this.number]
			};
			},
			}
			},
			methods: {
			//点击节点
			@@ -841,7 +841,7 @@

			// 左侧表的接口返回数据
			initEchart() {
			securityTotal().then((res) => {
			securityTotal().then(res => {
			if (res.data.code == 200) {
			let securityData = res.data.data;
			if (!this.echarts.left1Echart) {
			@@ -855,10 +855,10 @@
			}
			this.left1loading = false;
			});
			seCountI({ jurisdiction: "", deptid: "" }).then((res) => {
			seCountI({ jurisdiction: "", deptid: "" }).then(res => {
			if (res.data.code == 200) {
			let data = res.data.data;
			data.forEach((item) => {
			data.forEach(item => {
			if (item.stats === "0") {
			this.leftData.zz = item.num;
			}
			@@ -879,7 +879,8 @@
			this.$message.error(res.msg);
			}
			});
			selectFj().then((res) => {
			selectFj().then(res => {
			debugger;
			if (res.data.code === 200) {
			if (!this.echarts.right3Echart) {
			this.echarts.right3Echart = echarts.init(
			@@ -903,7 +904,7 @@
			this.echarts.left2Echart.clear();
			}
			if (type === 0) {
			holderNum().then((res) => {
			holderNum().then(res => {
			if (res.data.code === 200) {
			let data = res.data.data;
			this.echarts.left2Echart = echarts.init(
			@@ -916,7 +917,7 @@
			this.left2loading = false;
			});
			} else {
			seCountUg({ jurisdiction: "", deptid: "" }).then((res) => {
			seCountUg({ jurisdiction: "", deptid: "" }).then(res => {
			if (res.data.code === 200) {
			this.echarts.left2Echart = echarts.init(
			document.getElementById("left2Echart")
			@@ -950,7 +951,7 @@
			this.middleloading = false;
			this.textArr = [];
			if (type === 2) {
			this.tableData.forEach((item) => {
			this.tableData.forEach(item => {
			let obj =
			"押运车辆车牌号" +
			item.carNum +
			@@ -965,7 +966,7 @@
			this.textArr.push(obj);
			});
			} else if (type === 1) {
			this.tableData.forEach((item) => {
			this.tableData.forEach(item => {
			let obj =
			"押运人员" +
			item.name +
			@@ -978,7 +979,7 @@
			this.textArr.push(obj);
			});
			} else if (type === 3) {
			this.tableData.forEach((item) => {
			this.tableData.forEach(item => {
			let obj =
			"枪支编号" +
			item.number +
			@@ -999,21 +1000,21 @@
			let middleData = {
			1: {
			table: [],
			geoData: [],
			geoData: []
			},
			2: {
			table: [],
			geoData: [],
			geoData: []
			},
			3: {
			table: [],
			geoData: [],
			},
			geoData: []
			}
			};
			getLiveLocationVoList({ type: type }).then((res) => {
			getLiveLocationVoList({ type: type }).then(res => {
			if (res.data.code === 200) {
			let allData = res.data.data;
			allData.forEach((m) => {
			allData.forEach(m => {
			let obj = {
			location: m.location,
			name: m.name,
			@@ -1021,7 +1022,7 @@
			linkman: m.linkman,
			company: m.company,
			tel: m.tel,
			carNum: m.carNum,
			carNum: m.carNum
			};

			// let geoObj = {
			@@ -1030,7 +1031,7 @@
			// };
			middleData[m.type]["geoData"].push([
			Number(m.longitude),
			Number(m.latitude),
			Number(m.latitude)
			]);
			middleData[m.type]["table"].push(obj);
			});
			@@ -1056,36 +1057,38 @@
			zIndex: 4,
			title: "影像",
			source: new XYZ({
			url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
			}),
			url:
			"http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
			})
			}),
			new Tile({
			zIndex: 5,
			title: "道路+中文注记",
			source: new XYZ({
			url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
			}),
			}),
			url:
			"http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
			})
			})
			],
			view: new View({
			projection: "EPSG:4326",
			center: [115.892151, 28.676493],
			zoom: 10,
			}),
			zoom: 10
			})
			});
			this.carVectorLayer = new VectorLayer({
			zIndex: 99,
			source: new VectorSource(),
			source: new VectorSource()
			});

			this.peoVectorLayer = new VectorLayer({
			zIndex: 99,
			source: new VectorSource(),
			source: new VectorSource()
			});

			this.gunVectorLayer = new VectorLayer({
			zIndex: 99,
			source: new VectorSource(),
			source: new VectorSource()
			});
			this.map.addLayer(this.carVectorLayer);
			this.map.addLayer(this.peoVectorLayer);
			@@ -1095,7 +1098,7 @@
			},
			// 获取辖区列表
			getOfficeData() {
			lazyTrees().then((res) => {
			lazyTrees().then(res => {
			if (res.data.code === 200) {
			this.options1 = res.data.data;
			this.options2 = res.data.data;
			@@ -1137,7 +1140,7 @@
			}
			},
			getWgTable() {
			this.dialogTable.wgTable.forEach((item) => {
			this.dialogTable.wgTable.forEach(item => {
			let czl = 0;
			if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) {
			czl =
			@@ -1155,7 +1158,7 @@
			this.gridData.total = this.dialogTable.wgTable.length;
			},
			getJyTable() {
			this.dialogTable.jyTable.forEach((item) => {
			this.dialogTable.jyTable.forEach(item => {
			let pql = 0;
			if (Number(item.painum) !== 0 && Number(item.znum) !== 0) {
			pql =
			@@ -1183,9 +1186,9 @@
			let params = {
			current: this.gridData.current,
			size: 10,
			jurisdiction: this.value2,
			jurisdiction: this.value2
			};
			punishList(params).then((res) => {
			punishList(params).then(res => {
			if (res.data.code === 200) {
			this.gridData.data = res.data.data.records;
			this.gridData.total = res.data.data.total;
			@@ -1223,9 +1226,9 @@
			current: this.gridData.current,
			size: 10,
			examinationType: 1,
			jurisdiction: this.value1,
			jurisdiction: this.value1
			};
			qualificationPages(params).then((res) => {
			qualificationPages(params).then(res => {
			if (res.data.code === 200) {
			this.gridData.data = res.data.data.records;
			this.gridData.total = res.data.data.total;
			@@ -1246,9 +1249,9 @@
			let params = {
			current: this.gridData.current,
			size: 10,
			jurisdiction: this.value2,
			jurisdiction: this.value2
			};
			punishList(params).then((res) => {
			punishList(params).then(res => {
			if (res.data.code === 200) {
			this.gridData.data = res.data.data.records;
			this.gridData.total = res.data.data.total;
			@@ -1259,7 +1262,7 @@
			},
			// 经营不善
			getMaterial() {
			selectJy({ jurisdiction: this.value2 }).then((res) => {
			selectJy({ jurisdiction: this.value2 }).then(res => {
			if (res.data.code === 200) {
			this.rightData.materialNum = res.data.data.count;
			this.dialogTable.jyTable = res.data.data.List;
			@@ -1271,7 +1274,7 @@
			},
			// 有名无实
			getselectYs() {
			selectYs({ jurisdiction: this.value2 }).then((res) => {
			selectYs({ jurisdiction: this.value2 }).then(res => {
			if (res.data.code === 200) {
			this.rightData.ymwsNum = res.data.data.count;
			this.dialogTable.ymTable = res.data.data.List;
			@@ -1283,7 +1286,7 @@
			},
			// 违规经营
			getselectWg() {
			selectWg({ jurisdiction: this.value2 }).then((res) => {
			selectWg({ jurisdiction: this.value2 }).then(res => {
			if (res.data.code === 200) {
			this.rightData.wgNum = res.data.data.count;
			this.dialogTable.wgTable = res.data.data.list;
			@@ -1313,8 +1316,8 @@
			// this.rightData.qualification = 45;
			selectBx({
			jurisdiction: this.value1,
			type: this.poorPerformanceType,
			}).then((res) => {
			type: this.poorPerformanceType
			}).then(res => {
			if (res.data.code === 200) {
			this.rightData.poorPerformance = res.data.data[0].count;
			} else {
			@@ -1324,8 +1327,8 @@
			});
			selectExtype({
			jurisdiction: this.value1,
			type: this.poorPerformanceType,
			}).then((res) => {
			type: this.poorPerformanceType
			}).then(res => {
			if (res.data.code === 200) {
			this.rightData.qualification = res.data.data[0].count;
			} else {
			@@ -1364,7 +1367,7 @@
			// this.$router.push({ path: "/register/index" });
			// this.$router.push({ path: "/securityGuardManagement/register" });
			this.$router.push({ path: website.fistPage.value });
			},
			}
			},
			mounted() {
			this.initEchart();
			@@ -1375,12 +1378,25 @@
			this.getTableData(0);
			// this.initMapEchart();
			this.getOfficeData();
			},
			}
			};
			</script>

			<style lang="scss" scoped>
			@import "./index.scss";
			// 适配分辨率1280*1024
			@media screen and (max-width: 1280px) {
			@import "./index_1280_1024.scss";
			}
			// 适配分辨率1600*900
			@media screen and (min-width: 1281px) and (max-width: 1600px) {
			@import "./index_1600_900.scss";
			}
			// 适配分辨率1920*1080
			@media screen and (min-width: 1601px) and (max-width: 1920px) {
			@import "./index.scss";
			}

			// @import "./index.scss";
			/deep/ .el-select-dropdown {
			border: 1px solid #9199ab;
			background-color: #022c53;

New file
			@@ -0,0 +1,699 @@
			.bajgxt-home {
			height: 100%;
			width: 100%;
			background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
			background-size: 100% 100%;

			.head-title {
			background: url("../../../public/img/bajgxt/title2.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 77px;
			text-align: center;
			// position: relative;
			span {
			font-family: "Arial Normal", "Arial", sans-serif;
			font-size: 36px;
			color: #ffffff;
			text-align: center;
			line-height: 77px;
			}
			img {
			position: absolute;
			margin-top: 22px;
			margin-left: 29%;
			}
			}
			.sub-title {
			float: right;
			color: #fff;
			margin-right: 52px;
			font-size: 18px;
			margin-top: -35px;
			cursor: pointer;
			&:hover {
			color: #90cef0;
			}
			}
			.content {
			margin: 5px 20px 20px 20px;
			height: calc(100% - 102px);
			width: calc(100% - 40px);
			display: flex;
			.left,
			.right {
			width: 27%;
			height: 100%;
			}
			.middle {
			width: calc(46% - 50px);
			height: 100%;
			margin: 0px 25px;
			position: relative;
			}
			}
			.leftimg {
			background: url("../../../public/img/bajgxt/left1.png") no-repeat;
			background-size: contain;
			width: 100%;
			height: 260px;
			}
			.echartClass_1280 {
			// height: 100%;
			width: 100%;
			height: calc(100% - 70px);
			}
			.left {
			.left1 {
			background: url("../../../public/img/bajgxt/left1.png") no-repeat;
			height: 60%;
			width: 100%;
			background-size: 100% 100%;
			position: relative;
			#left1Echart {
			@extend .echartClass_1280;
			height: calc(100% - 140px) !important;
			margin-top: 68px;
			}
			}
			.left2 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			height: calc(40% - 25px);
			width: 100%;
			background-size: 100% 100%;
			margin-top: 25px;
			position: relative;
			#left2Echart {
			@extend .echartClass_1280;
			}
			}
			}
			.right {
			.right1 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 28%;
			position: relative;
			#right1Echart {
			@extend .echartClass_1280;
			}
			}
			.right2 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 28%;
			margin-top: 30px;
			position: relative;
			#right2Echart {
			@extend .echartClass_1280;
			}
			}
			.right3 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			height: calc(40% - 25px);
			width: 100%;
			background-size: 100% 100%;
			margin-top: 25px;
			#right3Echart {
			@extend .echartClass_1280;
			}
			}
			}
			.title-pane {
			display: inline-flex;
			height: 55px;
			img {
			width: 25px;
			height: 25px;
			margin: 19px 10px 0px 10px;
			}
			span {
			line-height: 68px;
			color: #fff;
			font-size: 17px;
			}
			}
			.title-pane1 {
			display: inline-flex;
			height: 41px;
			img {
			width: 25px;
			height: 25px;
			margin: 8.5px 10px 0px 10px;
			}
			span {
			line-height: 46px;
			color: #fff;
			font-size: 17px;
			}
			}
			.title-pane2 {
			display: inline-flex;
			height: 53px;
			img {
			width: 25px;
			height: 25px;
			margin: 13.5px 10px 0px 10px;
			}
			span {
			line-height: 59px;
			color: #fff;
			font-size: 17px;
			}
			}

			.middle {
			.mapimg {
			background: url("../../../public/img/bajgxt/u3.png") no-repeat;
			background-size: 100% 100%;
			height: 60%;
			width: 100%;
			#map {
			width: calc(100% - 40px);
			height: calc(100% - 40px);
			margin: 0px 20px;
			top: 20px;
			position: relative;
			}
			}

			.table {
			margin-top: 25px;
			height: calc(40% - 25px);
			width: 100%;
			background: url("../../../public/img/bajgxt/table.png") no-repeat;
			background-size: 100% 100%;
			position: relative;
			.table-title {
			background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			width: 267px;
			margin-top: -13px;
			height: 50px;
			margin-left: calc(50% - 135.5px);
			color: #fff;
			font-size: 20px;
			text-align: center;
			line-height: 54px;
			}
			.lefttop {
			background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: -7px;
			top: -9px;
			}
			.leftbottom {
			background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: -7px;
			bottom: -7px;
			}
			.righttop {
			background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: calc(100% - 37px);
			top: -9px;
			}
			.rightbottom {
			background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: calc(100% - 37px);
			bottom: -7px;
			}
			}
			}
			.middle {
			.el-table {
			width: calc(100% - 40px);
			height: calc(100% - 65px);
			margin: 0px 20px 15px;
			top: 50px;
			}
			/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
			background: #031d4b !important;
			}
			/deep/ .el-table--enable-row-transition .el-table__body td,
			/deep/ .el-table th,
			.el-table tr {
			background: #03225b !important;
			}
			/deep/ .el-table .cell {
			color: #fff;
			text-align: center;
			}
			/deep/ .el-table td,
			.el-table th.is-leaf {
			border-bottom-color: transparent;
			}
			/deep/ .el-table__header th {
			border-bottom: 1px solid #031a38 !important;
			}
			/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
			background-color: #b0caf3;
			}
			}

			/deep/ .el-input__inner {
			height: 27px;
			color: #fff !important;
			font-size: 14px;
			background-color: transparent !important;
			border-color: transparent !important;
			border-radius: 2px;
			}
			/deep/ .el-input {
			width: 138px;
			}
			/deep/ .el-select {
			line-height: 52px;
			position: absolute;
			right: 14px;
			}
			/deep/ .el-input__icon {
			line-height: 53px;
			}
			/deep/ .el-select:hover .el-input__inner,
			/deep/ .el-select .el-input.is-focus .el-input__inner {
			border: none;
			}
			/deep/ .el-table,
			/deep/ .el-table__expanded-cell,
			/deep/ .el-table--border::after,
			/deep/ .el-table--group::after,
			/deep/ .el-table::before {
			background-color: transparent !important;
			}
			.card-text {
			height: 30px;
			padding: 8px 10px;
			color: #fff;
			font-size: 14px;
			text-align: center;
			span:nth-child(2) {
			color: red;
			font-size: 21px;
			margin: 0px 10px;
			font-weight: bold;
			}
			span:nth-child(4) {
			margin-left: 15px;
			}
			span:nth-child(5) {
			margin: 0px 10px;
			color: red;
			font-size: 20px;
			}
			}
			.right-content {
			height: calc(100% - 71px);
			width: calc(100% - 30px);
			padding: 15px;
			}
			.card-list {
			margin-top: 10px !important;
			margin: 10px 60px 15px 5px;
			display: flex;
			height: 50px;
			line-height: 50px;
			img:first-child {
			height: 50px;
			z-index: 22;
			}
			img:nth-child(2) {
			position: absolute;
			margin-left: 13px;
			width: 30px;
			height: 30px;
			margin-top: 10px;
			z-index: 22;
			}
			img:nth-child(3) {
			margin-left: -20px;
			height: 50px;
			}
			span:nth-child(4) {
			color: red;
			font-size: 26px;
			display: block;
			width: 71px;
			margin-left: -74px;
			text-align: center;
			}
			span:nth-child(5) {
			color: #7ff3f4;
			font-size: 15px;
			display: block;
			width: 129px;
			margin-left: 22px;
			}
			}
			.mapBtn,
			.mapBtn:nth-child(2),
			.mapBtn:nth-child(3) {
			position: absolute;
			z-index: 99;
			color: #fff;
			background: #014e84;
			margin-top: 38px;
			margin-left: calc(100% - 140px);
			border-radius: 11px;
			height: 43px;
			display: inline-flex;
			width: 107px;
			cursor: pointer;
			img {
			margin: 8px 3px 8px 5px;
			height: 28px;
			width: 30px;
			}
			.text {
			width: 100px;
			text-align: center;
			margin: 3px;
			span:nth-child(1) {
			width: 100%;
			display: block;
			font-size: 10px;
			}
			span:nth-child(2) {
			width: 100%;
			display: block;
			color: red;
			font-size: 17px;
			font-weight: bold;
			}
			}
			&:hover {
			box-shadow: 0px 0px 10px #7ff3f4;
			}
			}
			.mapBtn:nth-child(2) {
			margin-top: 100px;
			}
			.mapBtn:nth-child(3) {
			margin-top: 160px;
			}
			/deep/ .el-table__body-wrapper {
			overflow: auto;
			height: calc(100% - 50px);
			}
			}
			.left2-btn {
			height: 19px;
			width: 60px;
			background-color: #4478d0;
			color: #fff;
			font-size: 0.1rem !important;
			font-weight: 700;

			line-height: 19px !important;
			text-align: center;
			position: absolute;
			cursor: pointer;
			}
			.left2-btn.btn1 {
			right: 78px;
			margin-top: 22px;
			}
			.left2-btn.btn2 {
			right: 12px;
			margin-top: 22px;
			}
			.left2-btn.date {
			right: 22px;
			margin-top: 12px;
			}
			.left2-btn.mounce {
			right: 22px;
			margin-top: 57px;
			}
			.left2-btn.all {
			right: 22px;
			margin-top: 101px;
			}

			.rightData {
			position: relative;
			color: #fff;
			background: #010945;
			border-radius: 11px;
			height: 50px;
			display: inline-flex;
			width: 125px;
			cursor: pointer;
			font-weight: 700;
			img {
			margin: 12px;
			height: 20px;
			width: 22px;
			}
			.text {
			width: 100px;
			text-align: center;
			// margin: 3px;
			line-height: 21px;
			span:nth-child(1) {
			width: 100%;
			display: block;
			font-size: 13px;
			}
			span:nth-child(2) {
			width: 100%;
			display: block;
			color: #00ccff;
			font-size: 14px;
			}
			}
			}
			.rightData1 {
			margin-left: 9px;
			margin-top: 10px;
			}
			.rightData2 {
			margin-left: 35px;
			margin-top: 10px;
			}
			.rightData3 {
			margin-top: 17px;
			margin-left: 9px;
			}
			.rightData4 {
			margin-top: 17px;
			margin-left: 35px;
			}
			.rightData5 {
			margin-top: 8px;
			margin-left: 42px;
			}

			.textBox {
			width: 70%;
			height: 58px;
			// margin: 0 auto;
			overflow: hidden;
			position: absolute;
			text-align: left;
			color: #09b560;
			left: 20px;
			top: 20px;
			font-size: 15px;
			.text {
			width: 100%;
			position: absolute;
			bottom: 0;
			}
			.slide-enter-active,
			.slide-leave-active {
			transition: all 0.5s linear;
			}
			.slide-enter {
			transform: translateY(20px) scale(1);
			opacity: 1;
			}
			.slide-leave-to {
			transform: translateY(-20px) scale(0.8);
			opacity: 0;
			}
			}
			.leftEchartTitle {
			height: 30px;
			display: flex;
			line-height: 30px;
			margin-top: 10px;
			margin-left: 15px;
			position: absolute;
			.block1 {
			width: 17px;
			height: 8px;
			background: #2ec7c9;
			border-radius: 3px;
			margin-top: 11px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			margin: 0px 3px 0px 3px;
			}
			span:nth-child(3) {
			color: #2ec7c9;
			font-size: 14px;
			font-weight: 700;
			display: block;
			width: 41px;
			text-align: center;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #2ec7c9;
			}
			}
			.leftEchartTitle2 {
			right: 18px;
			.block1 {
			background: #b6a2de;
			}
			span:nth-child(3) {
			color: #b6a2de;
			// font-size: 15px;
			}
			}
			.leftEchartTitle3 {
			margin-top: 37px;
			.block1 {
			background: #5ab1ef;
			}
			span:nth-child(3) {
			color: #5ab1ef;
			// font-size: 15px;
			}
			}
			.leftEchartTitle4 {
			margin-top: 37px;
			right: 15px;
			.block1 {
			background: #ffb980;
			}
			span:nth-child(2) {
			width: 77px;
			}
			span:nth-child(3) {
			color: #ffb980;
			// font-size: 15px;
			}
			}
			.leftEchartTitle5 {
			margin-top: 64px;
			.block1 {
			background: #fc8452;
			}
			span:nth-child(3) {
			color: #fc8452;
			font-size: 15px;
			}
			}
			.bayHover {
			background-color: #0445b5;
			color: #fff !important;
			}
			.leftEchartTitle.xbNan {
			right: 20px;
			margin-top: 76px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #008dec;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			}
			span:nth-child(3) {
			color: #008dec;
			font-size: 15px;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #008dec;
			}
			}
			.leftEchartTitle.xbNv {
			right: 20px;
			margin-top: 135px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #886eff;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			}
			span:nth-child(3) {
			color: #886eff;
			font-size: 15px;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #886eff;
			}
			}
			.showDialog:hover {
			cursor: pointer;
			}
			.bajgxt-home {
			/deep/.dialog {
			z-index: 10000000 !important;
			.el-table {
			top: 0px !important;
			margin: 0px !important;
			width: 100% !important;
			height: calc(100% - 50px) !important;
			.el-table__header {
			background-color: #2d5cc8 !important;
			}
			.el-table__body-wrapper {
			height: calc(100% - 50px);
			overflow-x: hidden;
			overflow-y: auto;
			}
			}
			.el-pagination {
			color: #a2a5a5;
			}
			.btn-prev,
			.btn-next {
			background: transparent !important;
			}
			.el-dialog__body {
			padding: 10px 20px;
			height: calc(100% - 60px);
			.el-input {
			width: 50px !important;
			border-bottom: 1px solid #8a7b7b !important;
			}
			}
			}
			/deep/ .el-dialog {
			width: 80% !important;
			height: 77%;
			}
			}

New file
			@@ -0,0 +1,698 @@
			.bajgxt-home {
			height: 100%;
			width: 100%;
			background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
			background-size: 100% 100%;

			.head-title {
			background: url("../../../public/img/bajgxt/title2.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 77px;
			text-align: center;
			// position: relative;
			span {
			font-family: "Arial Normal", "Arial", sans-serif;
			font-size: 36px;
			color: #ffffff;
			text-align: center;
			line-height: 77px;
			}
			img {
			position: absolute;
			margin-top: 22px;
			margin-left: 29%;
			}
			}
			.sub-title {
			float: right;
			color: #fff;
			margin-right: 52px;
			font-size: 18px;
			margin-top: -35px;
			cursor: pointer;
			&:hover {
			color: #90cef0;
			}
			}
			.content {
			margin: 5px 20px 20px 20px;
			height: calc(100% - 102px);
			width: calc(100% - 40px);
			display: flex;
			.left,
			.right {
			width: 27%;
			height: 100%;
			}
			.middle {
			width: calc(46% - 50px);
			height: 100%;
			margin: 0px 25px;
			position: relative;
			}
			}
			.leftimg {
			background: url("../../../public/img/bajgxt/left1.png") no-repeat;
			background-size: contain;
			width: 100%;
			height: 260px;
			}
			.echartClass_1600_900 {
			// height: 100%;
			width: 100%;
			height: calc(100% - 70px);
			}
			.left {
			.left1 {
			background: url("../../../public/img/bajgxt/left1.png") no-repeat;
			height: 60%;
			width: 100%;
			background-size: 100% 100%;
			position: relative;
			#left1Echart {
			@extend .echartClass_1600_900;
			height: calc(100% - 140px) !important;
			margin-top: 68px;
			}
			}
			.left2 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			height: calc(40% - 25px);
			width: 100%;
			background-size: 100% 100%;
			margin-top: 25px;
			position: relative;
			#left2Echart {
			@extend .echartClass_1600_900;
			}
			}
			}
			.right {
			.right1 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 28%;
			position: relative;
			#right1Echart {
			@extend .echartClass_1600_900;
			}
			}
			.right2 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 28%;
			margin-top: 30px;
			position: relative;
			#right2Echart {
			@extend .echartClass_1600_900;
			}
			}
			.right3 {
			background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
			height: calc(40% - 25px);
			width: 100%;
			background-size: 100% 100%;
			margin-top: 25px;
			#right3Echart {
			@extend .echartClass_1600_900;
			}
			}
			}
			.title-pane {
			display: inline-flex;
			height: 44px;
			img {
			width: 26px;
			height: 26px;
			margin: 12px 10px 0px 10px;
			}
			span {
			line-height: 54px;
			color: #fff;
			font-size: 17px;
			}
			}
			.title-pane1 {
			display: inline-flex;
			height: 33px;
			img {
			width: 26px;
			height: 26px;
			margin: 3.5px 10px 0px 10px;
			}
			span {
			line-height: 33px;
			color: #fff;
			font-size: 17px;
			}
			}
			.title-pane2 {
			display: inline-flex;
			height: 41px;
			img {
			width: 26px;
			height: 26px;
			margin: 8.5px 10px 0px 10px;
			}
			span {
			line-height: 50px;
			color: #fff;
			font-size: 17px;
			}
			}

			.middle {
			.mapimg {
			background: url("../../../public/img/bajgxt/u3.png") no-repeat;
			background-size: 100% 100%;
			height: 60%;
			width: 100%;
			#map {
			width: calc(100% - 40px);
			height: calc(100% - 40px);
			margin: 0px 20px;
			top: 20px;
			position: relative;
			}
			}

			.table {
			margin-top: 25px;
			height: calc(40% - 25px);
			width: 100%;
			background: url("../../../public/img/bajgxt/table.png") no-repeat;
			background-size: 100% 100%;
			position: relative;
			.table-title {
			background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			width: 267px;
			margin-top: -13px;
			height: 50px;
			margin-left: calc(50% - 135.5px);
			color: #fff;
			font-size: 20px;
			text-align: center;
			line-height: 54px;
			}
			.lefttop {
			background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: -7px;
			top: -9px;
			}
			.leftbottom {
			background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: -7px;
			bottom: -7px;
			}
			.righttop {
			background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: calc(100% - 37px);
			top: -9px;
			}
			.rightbottom {
			background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
			background-size: 100% 100%;
			width: 44px;
			height: 56px;
			position: absolute;
			left: calc(100% - 37px);
			bottom: -7px;
			}
			}
			}
			.middle {
			.el-table {
			width: calc(100% - 40px);
			height: calc(100% - 65px);
			margin: 0px 20px 15px;
			top: 50px;
			}
			/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
			background: #031d4b !important;
			}
			/deep/ .el-table--enable-row-transition .el-table__body td,
			/deep/ .el-table th,
			.el-table tr {
			background: #03225b !important;
			}
			/deep/ .el-table .cell {
			color: #fff;
			text-align: center;
			}
			/deep/ .el-table td,
			.el-table th.is-leaf {
			border-bottom-color: transparent;
			}
			/deep/ .el-table__header th {
			border-bottom: 1px solid #031a38 !important;
			}
			/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
			background-color: #b0caf3;
			}
			}

			/deep/ .el-input__inner {
			height: 27px;
			color: #fff !important;
			font-size: 14px;
			background-color: transparent !important;
			border-color: transparent !important;
			border-radius: 2px;
			}
			/deep/ .el-input {
			width: 138px;
			}
			/deep/ .el-select {
			line-height: 42px;
			position: absolute;
			right: 14px;
			}
			/deep/ .el-input__icon {
			line-height: 43px;
			}
			/deep/ .el-select:hover .el-input__inner,
			/deep/ .el-select .el-input.is-focus .el-input__inner {
			border: none;
			}
			/deep/ .el-table,
			/deep/ .el-table__expanded-cell,
			/deep/ .el-table--border::after,
			/deep/ .el-table--group::after,
			/deep/ .el-table::before {
			background-color: transparent !important;
			}
			.card-text {
			height: 30px;
			padding: 8px 10px;
			color: #fff;
			font-size: 14px;
			text-align: center;
			span:nth-child(2) {
			color: red;
			font-size: 21px;
			margin: 0px 10px;
			font-weight: bold;
			}
			span:nth-child(4) {
			margin-left: 15px;
			}
			span:nth-child(5) {
			margin: 0px 10px;
			color: red;
			font-size: 20px;
			}
			}
			.right-content {
			height: calc(100% - 71px);
			width: calc(100% - 30px);
			padding: 15px;
			}
			.card-list {
			margin-top: 0px !important;
			margin: 0px 60px 12px 10px;
			display: flex;
			height: 50px;
			line-height: 50px;
			img:first-child {
			height: 50px;
			z-index: 22;
			}
			img:nth-child(2) {
			position: absolute;
			margin-left: 13px;
			width: 30px;
			height: 30px;
			margin-top: 9px;
			z-index: 22;
			}
			img:nth-child(3) {
			margin-left: -20px;
			}
			span:nth-child(4) {
			color: red;
			font-size: 26px;
			display: block;
			width: 71px;
			margin-left: -78px;
			text-align: center;
			}
			span:nth-child(5) {
			color: #7ff3f4;
			font-size: 17px;
			display: block;
			width: 129px;
			margin-left: 16px;
			}
			}
			.mapBtn,
			.mapBtn:nth-child(2),
			.mapBtn:nth-child(3) {
			position: absolute;
			z-index: 99;
			color: #fff;
			background: #014e84;
			margin-top: 38px;
			margin-left: calc(100% - 140px);
			border-radius: 11px;
			height: 43px;
			display: inline-flex;
			width: 107px;
			cursor: pointer;
			img {
			margin: 8px 3px 8px 5px;
			height: 28px;
			width: 30px;
			}
			.text {
			width: 100px;
			text-align: center;
			margin: 3px;
			span:nth-child(1) {
			width: 100%;
			display: block;
			font-size: 10px;
			}
			span:nth-child(2) {
			width: 100%;
			display: block;
			color: red;
			font-size: 17px;
			font-weight: bold;
			}
			}
			&:hover {
			box-shadow: 0px 0px 10px #7ff3f4;
			}
			}
			.mapBtn:nth-child(2) {
			margin-top: 100px;
			}
			.mapBtn:nth-child(3) {
			margin-top: 160px;
			}
			/deep/ .el-table__body-wrapper {
			overflow: auto;
			height: calc(100% - 50px);
			}
			}
			.left2-btn {
			height: 21px;
			width: 69px;
			background-color: #4478d0;
			color: #fff;
			font-size: 13px !important;
			font-weight: 700;

			line-height: 21px !important;
			text-align: center;
			position: absolute;
			cursor: pointer;
			}
			.left2-btn.btn1 {
			right: 106px;
			margin-top: 16px;
			}
			.left2-btn.btn2 {
			right: 25px;
			margin-top: 16px;
			}
			.left2-btn.date {
			right: 35px;
			margin-top: 0px;
			}
			.left2-btn.mounce {
			right: 35px;
			margin-top: 44px;
			}
			.left2-btn.all {
			right: 35px;
			margin-top: 87px;
			}

			.rightData {
			position: relative;
			color: #fff;
			background: #010945;
			border-radius: 11px;
			height: 50px;
			display: inline-flex;
			width: 142px;
			cursor: pointer;
			font-weight: 700;
			img {
			margin: 12px;
			height: 25px;
			width: 27px;
			}
			.text {
			width: 100px;
			text-align: center;
			// margin: 3px;
			line-height: 25px;
			span:nth-child(1) {
			width: 100%;
			display: block;
			font-size: 14px;
			}
			span:nth-child(2) {
			width: 100%;
			display: block;
			color: #00ccff;
			font-size: 15px;
			}
			}
			}
			.rightData1 {
			margin-left: 29px;
			margin-top: 0px;
			}
			.rightData2 {
			margin-left: 58px;
			margin-top: 0px;
			}
			.rightData3 {
			margin-top: 10px;
			margin-left: 29px;
			}
			.rightData4 {
			margin-top: 10px;
			margin-left: 58px;
			}
			.rightData5 {
			margin-top: 8px;
			margin-left: 42px;
			}

			.textBox {
			width: 70%;
			height: 58px;
			// margin: 0 auto;
			overflow: hidden;
			position: absolute;
			text-align: left;
			color: #09b560;
			left: 20px;
			top: 20px;
			font-size: 15px;
			.text {
			width: 100%;
			position: absolute;
			bottom: 0;
			}
			.slide-enter-active,
			.slide-leave-active {
			transition: all 0.5s linear;
			}
			.slide-enter {
			transform: translateY(20px) scale(1);
			opacity: 1;
			}
			.slide-leave-to {
			transform: translateY(-20px) scale(0.8);
			opacity: 0;
			}
			}
			.leftEchartTitle {
			height: 30px;
			display: flex;
			line-height: 30px;
			margin-top: 10px;
			margin-left: 18px;
			position: absolute;
			.block1 {
			width: 18px;
			height: 9px;
			background: #2ec7c9;
			border-radius: 3px;
			margin-top: 11px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			margin: 0px 10px 0px 3px;
			}
			span:nth-child(3) {
			color: #2ec7c9;
			font-size: 17px;
			font-weight: 700;
			display: block;
			width: 65px;
			text-align: center;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #2ec7c9;
			}
			}
			.leftEchartTitle2 {
			right: 18px;
			.block1 {
			background: #b6a2de;
			}
			span:nth-child(3) {
			color: #b6a2de;
			font-size: 15px;
			}
			}
			.leftEchartTitle3 {
			margin-top: 37px;
			.block1 {
			background: #5ab1ef;
			}
			span:nth-child(3) {
			color: #5ab1ef;
			font-size: 15px;
			}
			}
			.leftEchartTitle4 {
			margin-top: 37px;
			right: 18px;
			.block1 {
			background: #ffb980;
			}
			span:nth-child(2) {
			width: 77px;
			}
			span:nth-child(3) {
			color: #ffb980;
			font-size: 15px;
			}
			}
			.leftEchartTitle5 {
			margin-top: 64px;
			.block1 {
			background: #fc8452;
			}
			span:nth-child(3) {
			color: #fc8452;
			font-size: 15px;
			}
			}
			.bayHover {
			background-color: #0445b5;
			color: #fff !important;
			}
			.leftEchartTitle.xbNan {
			right: 47px;
			margin-top: 76px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #008dec;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #008dec;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #008dec;
			}
			}
			.leftEchartTitle.xbNv {
			right: 47px;
			margin-top: 135px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #886eff;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #886eff;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #886eff;
			}
			}
			.showDialog:hover {
			cursor: pointer;
			}
			.bajgxt-home {
			/deep/.dialog {
			z-index: 10000000 !important;
			.el-table {
			top: 0px !important;
			margin: 0px !important;
			width: 100% !important;
			height: calc(100% - 50px) !important;
			.el-table__header {
			background-color: #2d5cc8 !important;
			}
			.el-table__body-wrapper {
			height: calc(100% - 50px);
			overflow-x: hidden;
			overflow-y: auto;
			}
			}
			.el-pagination {
			color: #a2a5a5;
			}
			.btn-prev,
			.btn-next {
			background: transparent !important;
			}
			.el-dialog__body {
			padding: 10px 20px;
			height: calc(100% - 60px);
			.el-input {
			width: 50px !important;
			border-bottom: 1px solid #8a7b7b !important;
			}
			}
			}
			/deep/ .el-dialog {
			width: 80% !important;
			height: 77%;
			}
			}

			@@ -2,7 +2,7 @@
			* @Author: Morpheus
			* @Date: 2021-07-05 16:31:54
			* @Last Modified by: Morpheus
			* @Last Modified time: 2021-08-14 10:57:44
			* @Last Modified time: 2021-09-03 16:20:17
			* menu-name 押运人员定位
			*/
			<template>
			@@ -126,8 +126,10 @@
			:modal='false'
			:visible.sync="dialogVisible"
			:before-close="dialogBeforeClose"
			:close-on-click-modal='false'
			class="car-video-box">
			<iframe src="/carVideo/parent.html"
			ref="videoIframe"
			frameborder="0"></iframe>
			</el-dialog>
			</el-col>
			@@ -303,9 +305,18 @@

			if (cont != undefined) {
			that.dialogVisible = true

			that.$refs.videoIframe.contentWindow.startVideo()
			}
			})

			},

			dialogBeforeClose() {
			this.dialogVisible = false

			this.$refs.videoIframe.contentWindow.closeVideo()

			}

			},

			@@ -325,6 +325,57 @@
			};
			</script>
			<style lang="scss" scoped>
			@media screen and (max-width: 1280px) {
			.box-card {
			font-size: 15px;
			width: 128px;
			background: #00aaf1;
			height: 117px;
			text-align: center;
			margin-right: 28px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 36px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 31px;
			}
			}
			.col-content {
			margin-top: 39px !important;
			}
			}
			// 适配分辨率1600*900
			@media screen and (min-width: 1281px) and (max-width: 1600px) {
			.box-card {
			font-size: 15px;
			width: 128px;
			background: #00aaf1;
			height: 117px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 36px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 31px;
			}
			}
			}
			@media screen and(min-width:1601px) and (max-width: 1920px) {
			.box-card {
			width: 150px;
			background: #00aaf1;
			height: 135px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 40px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 34px;
			}
			}
			}
			.page1 {
			height: 100%;
			width: 100%;
			@@ -362,23 +413,11 @@
			font-weight: 600;
			}
			}
			.box-card {
			width: 150px;
			background: #00aaf1;
			height: 135px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 40px;
			}

			.box-card span {
			display: block;
			width: 100%;
			color: #fff;
			}
			.box-card span:nth-child(2) {
			color: #06ffff;
			font-size: 34px;
			}
			.rowTitle {
			height: 40px;

			@@ -414,6 +414,271 @@
			};
			</script>
			<style lang="scss" scoped>
			@media screen and (max-width: 1280px) {
			.box-card {
			font-size: 15px;
			width: 128px;
			background: #00aaf1;
			height: 117px;
			text-align: center;
			margin-right: 28px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 36px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 31px;
			}
			}
			.col-content {
			margin-top: 39px !important;
			}
			.leftEchartTitle.qing {
			right: 10px;
			margin-top: 42px;
			.block1 {
			background: #73c0de;
			margin-top: 11px;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			margin: 0px 3px 0px 3px;
			}
			span:nth-child(3) {
			color: #73c0de;
			font-size: 15px;
			width: 45px;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #73c0de;
			}
			}
			.leftEchartTitle.zhong {
			right: 10px;
			margin-top: 83px;
			.block1 {
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background: #fac858;
			margin-top: 11px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			margin: 0px 3px 0px 3px;
			}
			span:nth-child(3) {
			color: #fac858;
			font-size: 15px;
			width: 45px;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #fac858;
			}
			}
			.leftEchartTitle.lao {
			right: 10px;
			margin-top: 125px;
			.block1 {
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background: #91cc75;
			margin-top: 11px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 12px;
			margin: 0px 3px 0px 3px;
			}
			span:nth-child(3) {
			color: #91cc75;
			font-size: 15px;
			width: 45px;
			}
			span:nth-child(4) {
			font-size: 12px;
			color: #91cc75;
			}
			}
			}
			// 适配分辨率1600*900
			@media screen and (min-width: 1281px)and (max-width: 1600px) {
			.box-card {
			font-size: 15px;
			width: 128px;
			background: #00aaf1;
			height: 117px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 36px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 31px;
			}
			}
			.leftEchartTitle.qing {
			right: 37px;
			margin-top: 42px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #73c0de;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #73c0de;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #73c0de;
			}
			}
			.leftEchartTitle.zhong {
			right: 37px;
			margin-top: 83px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #fac858;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #fac858;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #fac858;
			}
			}
			.leftEchartTitle.lao {
			right: 37px;
			margin-top: 125px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #91cc75;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #91cc75;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #91cc75;
			}
			}
			}
			@media screen and (min-width: 1601px)and (max-width: 1920px) {
			.box-card {
			width: 150px;
			background: #00aaf1;
			height: 135px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 40px;
			span:nth-child(2) {
			color: #06ffff;
			font-size: 34px;
			}
			}
			.leftEchartTitle.qing {
			right: 37px;
			margin-top: 42px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #73c0de;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #73c0de;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #73c0de;
			}
			}
			.leftEchartTitle.zhong {
			right: 37px;
			margin-top: 83px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #fac858;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #fac858;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #fac858;
			}
			}
			.leftEchartTitle.lao {
			right: 37px;
			margin-top: 125px;
			.block1 {
			width: 10px;
			height: 10px;
			background: #91cc75;
			margin-top: 10px;
			border-radius: 100%;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #91cc75;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #91cc75;
			}
			}
			}

			.page1 {
			height: 100%;
			width: 100%;
			@@ -452,23 +717,11 @@
			font-weight: 600;
			}
			}
			.box-card {
			width: 150px;
			background: #00aaf1;
			height: 135px;
			text-align: center;
			margin-right: 66px;
			box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
			line-height: 40px;
			}

			.box-card span {
			display: block;
			width: 100%;
			color: #fff;
			}
			.box-card span:nth-child(2) {
			color: #06ffff;
			font-size: 34px;
			}
			.rowTitle {
			height: 40px;
			@@ -540,72 +793,6 @@
			span:nth-child(4) {
			font-size: 13px;
			color: #2ec7c9;
			}
			}
			.leftEchartTitle.qing {
			right: 37px;
			margin-top: 42px;
			.block1 {
			width: 30px;
			height: 15px;
			background: #73c0de;
			margin-top: 7px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #73c0de;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #73c0de;
			}
			}
			.leftEchartTitle.zhong {
			right: 37px;
			margin-top: 83px;
			.block1 {
			width: 30px;
			height: 15px;
			background: #fac858;
			margin-top: 7px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #fac858;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #fac858;
			}
			}
			.leftEchartTitle.lao {
			right: 37px;
			margin-top: 125px;
			.block1 {
			width: 30px;
			height: 15px;
			background: #91cc75;
			margin-top: 7px;
			}
			span:nth-child(2) {
			color: #fff;
			font-size: 13px;
			}
			span:nth-child(3) {
			color: #91cc75;
			font-size: 17px;
			}
			span:nth-child(4) {
			font-size: 13px;
			color: #91cc75;
			}
			}
			</style>

			@@ -30,10 +30,10 @@
			// target: 'http://192.168.0.109:1',
			//远程演示服务地址,可用于直接启动项目
			// target: 'http://2h3f861221.wicp.vip:58646',
			// target: 'http://s16s652780.51mypc.cn/api',
			// target: 'http://192.168.0.114:82',
			// target: 'http://192.168.0.109:82',
			target: 'http://s16s652780.51mypc.cn/api',
			// target: 'http://192.168.0.114:82',
			// target: 'http://192.168.0.108:82',
			// target: 'http://s16s652780.51mypc.cn/api',
			// 服务器使用
			// target: 'http://localhost:82',
			ws: true,