1、尘负荷走航路段报告

yichenxi

2022-12-12 936633659148e800a8d09322a9f1e646104010a7

1、尘负荷走航路段报告

 .idea/workspace.xml

@@ -2,73 +2,28 @@
<project version="4">
  <component name="ChangeListManager">
    <list default="true" id="6a923843-d66d-4ccb-892a-72e969a7cbe1" name="Default Changelist" comment="export cityRankWord">
      <change afterPath="$PROJECT_DIR$/src/components/Echarts/LineChart2.vue" afterDir="false" />
      <change afterPath="$PROJECT_DIR$/src/components/PlanMap/Map.vue" afterDir="false" />
      <change afterPath="$PROJECT_DIR$/public/UAVReport.docx" afterDir="false" />
      <change afterPath="$PROJECT_DIR$/src/utils/exportUAVImage.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/airQuality.docx" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/airQuality.docx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/index.html" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-0069cb2f.6c805bdf.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-078c3eb6.4780c7e1.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-0c5fd33a.678c4ba8.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-0c6a790c.6bb42f86.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-15843232.3225998f.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-2cff1740.6e6b0b74.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-2dc9af1c.4e306435.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-3a1e216d.0b6f9d10.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-3d58fc86.b620cf35.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-400afc0a.6fb16897.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-4260e5ce.a98c6e39.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-46d6b12c.530ff032.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-4b82a168.73781d59.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-4d722c66.c452ee63.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-6e74dc9f.147f9c99.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-c8c074fe.e8239d58.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-c9c77a48.a37cd815.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/css/chunk-d8936f2c.423b9be8.css" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/img/tl_O3.eeeb3b83.png" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/app.717686ec.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-0069cb2f.8bab575d.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-04dff74e.a8822185.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-078c3eb6.f75204ae.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-0c5fd33a.7b0b7082.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-0c6a790c.a8c6ef0a.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-15843232.535ddfaa.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-1774a3c1.bdd55310.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-201c0396.553819ed.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-2c6cd7be.becfd878.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-2cff1740.66dab7e5.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-2dc9af1c.e3c7ad56.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-3a1e216d.9e9d6842.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-3d58fc86.a0796f8d.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-400afc0a.81103d23.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-4260e5ce.95c0fd29.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-46d6b12c.0e45fcf2.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-4b82a168.c5cccf6a.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-4d722c66.f45c8cfe.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-5d23b120.29f60546.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-60cd7b5b.be4068ac.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-6e74dc9f.7eb31cdf.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-85a2e2d8.a9719790.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-9db3fd1e.22f23845.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-c8c074fe.778fdd12.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-c9c77a48.91888171.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-commons.d73d8c8b.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-d8936f2c.a1987245.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-libs.79509af0.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/~$demo.docx" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/~$hunnan.docx" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/public/airQuality.docx" beforeDir="false" afterPath="$PROJECT_DIR$/public/airQuality.docx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/public/sailingReport.docx" beforeDir="false" afterPath="$PROJECT_DIR$/public/sailingReport.docx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/assets/images/tl_O3.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/images/tl_O3.png" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Echarts/LineChart.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Echarts/LineChart.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Echarts/LineChart2.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Echarts/LineChart2.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Echarts/LineChartSpe.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Echarts/LineChartSpe.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Form/HourPicker1.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Form/HourPicker1.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/PlanMap/Map.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/PlanMap/Map.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Wind/Map.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Wind/Map.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/router/dynamicRouter.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/dynamicRouter.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/utils/request.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/request.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/O3/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/O3/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/air/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/air/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/car/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/car/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/charts/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/charts/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/contrast/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/contrast/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/dailyreport/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/dailyreport/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/deviceDetail/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/deviceDetail/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/heatmap/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/heatmap/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/personnel/role.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/personnel/role.vue" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -78,8 +33,8 @@
  <component name="FileTemplateManagerImpl">
    <option name="RECENT_TEMPLATES">
      <list>
        <option value="JavaScript File" />
        <option value="Vue Single File Component" />
        <option value="JavaScript File" />
      </list>
    </option>
  </component>
@@ -110,7 +65,7 @@
    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
    <property name="WebServerToolWindowFactoryState" value="false" />
    <property name="js.linters.configure.manually.selectedeslint" value="true" />
    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/assets/images" />
    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/components/Wind" />
    <property name="node.js.detected.package.eslint" value="true" />
    <property name="node.js.detected.package.standard" value="true" />
    <property name="node.js.path.for.package.eslint" value="node" />
@@ -124,11 +79,11 @@
  </component>
  <component name="RecentsManager">
    <key name="CopyFile.RECENT_KEYS">
      <recent name="C:\Users\Administrator\Desktop\laqu\moral_fronted\src\components\Wind" />
      <recent name="C:\Users\Administrator\Desktop\laqu\moral_fronted\public" />
      <recent name="C:\Users\Administrator\Desktop\laqu\moral_fronted\src\assets\images" />
      <recent name="C:\Users\Administrator\Desktop\laqu\moral_fronted\src\components\Echarts" />
      <recent name="C:\Users\Administrator\Desktop\mo_fronted\moral_fronted\public" />
      <recent name="C:\Users\Administrator\Desktop\mo_fronted\moral_fronted\src\views" />
      <recent name="C:\Users\Administrator\Desktop\mo_fronted\moral_fronted\src\assets\images" />
    </key>
    <key name="MoveFile.RECENT_KEYS">
      <recent name="C:\Users\Administrator\Desktop\mo_fronted\moral_fronted\src\assets\icon" />
@@ -390,7 +345,35 @@
      <workItem from="1667348851084" duration="21196000" />
      <workItem from="1667434824619" duration="25048000" />
      <workItem from="1667521493460" duration="22813000" />
      <workItem from="1667782363495" duration="16141000" />
      <workItem from="1667782363495" duration="17725000" />
      <workItem from="1667810233665" duration="524000" />
      <workItem from="1667810789566" duration="776000" />
      <workItem from="1667811591902" duration="2063000" />
      <workItem from="1667866588098" duration="25443000" />
      <workItem from="1667952956454" duration="21844000" />
      <workItem from="1668039608605" duration="20539000" />
      <workItem from="1668126839636" duration="20870000" />
      <workItem from="1668385162184" duration="24564000" />
      <workItem from="1668471425397" duration="22001000" />
      <workItem from="1668557729041" duration="13886000" />
      <workItem from="1668644235840" duration="3413000" />
      <workItem from="1668730551371" duration="14020000" />
      <workItem from="1668990110995" duration="26452000" />
      <workItem from="1669076383735" duration="23194000" />
      <workItem from="1669162805604" duration="24024000" />
      <workItem from="1669248999401" duration="13606000" />
      <workItem from="1669335593961" duration="15352000" />
      <workItem from="1669594903413" duration="20725000" />
      <workItem from="1669682110426" duration="8039000" />
      <workItem from="1669767686351" duration="9536000" />
      <workItem from="1669854066362" duration="10083000" />
      <workItem from="1669940457129" duration="13237000" />
      <workItem from="1670200568329" duration="15981000" />
      <workItem from="1670285653958" duration="13150000" />
      <workItem from="1670372721792" duration="17712000" />
      <workItem from="1670458590350" duration="21492000" />
      <workItem from="1670545584810" duration="18335000" />
      <workItem from="1670804880293" duration="11690000" />
    </task>
    <task id="LOCAL-00001" summary="处理详情页侧面菜单不消失">
      <created>1627269084478</created>
@@ -564,7 +547,7 @@
        </line-breakpoint>
        <line-breakpoint enabled="true" type="javascript">
          <url>file://$PROJECT_DIR$/src/views/car/index.vue</url>
          <line>819</line>
          <line>1054</line>
          <option name="timeStamp" value="44" />
        </line-breakpoint>
      </breakpoints>

 cmsdist/airQuality.docx

Binary files differ

 cmsdist/index.html

@@ -6,7 +6,7 @@

    html {
      overflow-y: hidden;
    }</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技 不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.b9b51696.js></script><script>(function(e){function c(c){for(var u,a,r=c[0],h=c[1],f=c[2],b=0,o=[];b<r.length;b++)a=r[b],t[a]&&o.push(t[a][0]),t[a]=0;for(u in h)Object.prototype.hasOwnProperty.call(h,u)&&(e[u]=h[u]);k&&k(c);while(o.length)o.shift()();return d.push.apply(d,f||[]),n()}function n(){for(var e,c=0;c<d.length;c++){for(var n=d[c],u=!0,a=1;a<n.length;a++){var r=n[a];0!==t[r]&&(u=!1)}u&&(d.splice(c--,1),e=h(h.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},d=[];function r(e){return h.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"dbe1340e","chunk-e48dd19a":"421499f9","chunk-60cd7b5b":"a429afc7","chunk-201c0396":"e0973614","chunk-2c6cd7be":"e570f775","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"1cb9d266","chunk-364bf46d":"acab51e3","chunk-2d0b9293":"75291ca3","chunk-4adb9048":"880dca0f","chunk-4de1c2b6":"e51e09e7","chunk-5d23b120":"d84e40ff","chunk-67deb4ec":"bb9ee95e","chunk-752ad500":"ef4eeb25","chunk-85a2e2d8":"77323a94","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"e0b7ddb2","chunk-5db5f624":"b668735f","chunk-164237ce":"7ee67b8a","chunk-e6c00ab8":"efa42862","chunk-0fa040b5":"86b5c995","chunk-515db732":"39e96745","chunk-commons":"fbf5e782","chunk-0e0b280e":"1a822fd8","chunk-28b755ca":"b97188f8","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"62b14b01","chunk-57d155b2":"50d638b2","chunk-607ca2de":"0fc714f8","chunk-ecce8bc2":"13bfe2f5","chunk-4a79fb70":"04314571","chunk-4ae0200c":"70472151","chunk-7a25313a":"3fe5b2c1","chunk-7ad495bf":"75747fd9","chunk-0a0d3ad6":"83ba6665","chunk-8de1ac90":"8c771965"}[e]+".js"}function h(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,h),n.l=!0,n.exports}h.e=function(e){var c=[],n={"chunk-60cd7b5b":1,"chunk-201c0396":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-364bf46d":1,"chunk-4adb9048":1,"chunk-4de1c2b6":1,"chunk-5d23b120":1,"chunk-67deb4ec":1,"chunk-752ad500":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-164237ce":1,"chunk-0fa040b5":1,"chunk-515db732":1,"chunk-0e0b280e":1,"chunk-28b755ca":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-57d155b2":1,"chunk-607ca2de":1,"chunk-ecce8bc2":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-0a0d3ad6":1,"chunk-8de1ac90":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-e48dd19a":"31d6cfe0","chunk-60cd7b5b":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-364bf46d":"d886d300","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-4de1c2b6":"a37cd815","chunk-5d23b120":"0b74763b","chunk-67deb4ec":"a88e88f2","chunk-752ad500":"fa06d5b7","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-164237ce":"697c47c4","chunk-e6c00ab8":"31d6cfe0","chunk-0fa040b5":"a600af2e","chunk-515db732":"ccf69b0e","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-28b755ca":"51198f32","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-57d155b2":"73781d59","chunk-607ca2de":"826bdee2","chunk-ecce8bc2":"6e212841","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-7ad495bf":"31d6cfe0","chunk-0a0d3ad6":"6c805bdf","chunk-8de1ac90":"a28b9274"}[e]+".css",t=h.p+u,d=document.getElementsByTagName("link"),r=0;r<d.length;r++){var f=d[r],b=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(b===u||b===t))return c()}var o=document.getElementsByTagName("style");for(r=0;r<o.length;r++){f=o[r],b=f.getAttribute("data-href");if(b===u||b===t)return c()}var k=document.createElement("link");k.rel="stylesheet",k.type="text/css",k.onload=c,k.onerror=function(c){var u=c&&c.target&&c.target.src||t,d=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");d.code="CSS_CHUNK_LOAD_FAILED",d.request=u,delete a[e],k.parentNode.removeChild(k),n(d)},k.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(k)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var d=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=d);var f,b=document.createElement("script");b.charset="utf-8",b.timeout=120,h.nc&&b.setAttribute("nonce",h.nc),b.src=r(e),f=function(c){b.onerror=b.onload=null,clearTimeout(o);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,d=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");d.type=u,d.request=a,n[1](d)}t[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:b})}),12e4);b.onerror=b.onload=f,document.head.appendChild(b)}return Promise.all(c)},h.m=e,h.c=u,h.d=function(e,c,n){h.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},h.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},h.t=function(e,c){if(1&c&&(e=h(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(h.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)h.d(n,u,function(c){return e[c]}.bind(null,u));return n},h.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return h.d(c,"a",c),c},h.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},h.p="/",h.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],b=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var k=b;n()})([]);</script><script src=/static/js/app.4a92f50d.js></script></body><script>var docEl = document.documentElement,
    }</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技 不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.b9b51696.js></script><script>(function(e){function c(c){for(var u,a,d=c[0],h=c[1],f=c[2],o=0,k=[];o<d.length;o++)a=d[o],t[a]&&k.push(t[a][0]),t[a]=0;for(u in h)Object.prototype.hasOwnProperty.call(h,u)&&(e[u]=h[u]);b&&b(c);while(k.length)k.shift()();return r.push.apply(r,f||[]),n()}function n(){for(var e,c=0;c<r.length;c++){for(var n=r[c],u=!0,a=1;a<n.length;a++){var d=n[a];0!==t[d]&&(u=!1)}u&&(r.splice(c--,1),e=h(h.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},r=[];function d(e){return h.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"dbe1340e","chunk-e48dd19a":"421499f9","chunk-60cd7b5b":"a429afc7","chunk-201c0396":"e0973614","chunk-26aa192a":"e6457b0f","chunk-2c6cd7be":"e570f775","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"1cb9d266","chunk-21d959ed":"08070f2c","chunk-2d0b9293":"7c7bfbf9","chunk-4adb9048":"880dca0f","chunk-5d23b120":"d84e40ff","chunk-85a2e2d8":"77323a94","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"e0b7ddb2","chunk-5db5f624":"b668735f","chunk-164237ce":"7ee67b8a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"3ccb33c1","chunk-515db732":"39e96745","chunk-c9c77a48":"a4085eb5","chunk-commons":"3c0526cd","chunk-0e0b280e":"1a822fd8","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"62b14b01","chunk-44900a0d":"01a48cc2","chunk-5f6c750c":"35bc3d06","chunk-64670b04":"81e51d2c","chunk-6d2f3510":"5b0a2294","chunk-4a79fb70":"04314571","chunk-4ae0200c":"70472151","chunk-7a25313a":"3fe5b2c1","chunk-d38dc67e":"5d490a2c","chunk-7ad495bf":"75747fd9","chunk-0a0d3ad6":"83ba6665","chunk-79222f63":"326f4cef"}[e]+".js"}function h(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,h),n.l=!0,n.exports}h.e=function(e){var c=[],n={"chunk-60cd7b5b":1,"chunk-201c0396":1,"chunk-26aa192a":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-21d959ed":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-164237ce":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-5f6c750c":1,"chunk-64670b04":1,"chunk-6d2f3510":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d38dc67e":1,"chunk-0a0d3ad6":1,"chunk-79222f63":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-e48dd19a":"31d6cfe0","chunk-60cd7b5b":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-26aa192a":"2af0888d","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-21d959ed":"2a9cd5c5","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-164237ce":"697c47c4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-5f6c750c":"fa473a40","chunk-64670b04":"94095f03","chunk-6d2f3510":"ece4e828","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-0a0d3ad6":"6c805bdf","chunk-79222f63":"4778eccb"}[e]+".css",t=h.p+u,r=document.getElementsByTagName("link"),d=0;d<r.length;d++){var f=r[d],o=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(o===u||o===t))return c()}var k=document.getElementsByTagName("style");for(d=0;d<k.length;d++){f=k[d],o=f.getAttribute("data-href");if(o===u||o===t)return c()}var b=document.createElement("link");b.rel="stylesheet",b.type="text/css",b.onload=c,b.onerror=function(c){var u=c&&c.target&&c.target.src||t,r=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=u,delete a[e],b.parentNode.removeChild(b),n(r)},b.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var r=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=r);var f,o=document.createElement("script");o.charset="utf-8",o.timeout=120,h.nc&&o.setAttribute("nonce",h.nc),o.src=d(e),f=function(c){o.onerror=o.onload=null,clearTimeout(k);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,r=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");r.type=u,r.request=a,n[1](r)}t[e]=void 0}};var k=setTimeout((function(){f({type:"timeout",target:o})}),12e4);o.onerror=o.onload=f,document.head.appendChild(o)}return Promise.all(c)},h.m=e,h.c=u,h.d=function(e,c,n){h.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},h.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},h.t=function(e,c){if(1&c&&(e=h(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(h.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)h.d(n,u,function(c){return e[c]}.bind(null,u));return n},h.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return h.d(c,"a",c),c},h.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},h.p="/",h.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],o=f.push.bind(f);f.push=c,f=f.slice();for(var k=0;k<f.length;k++)c(f[k]);var b=o;n()})([]);</script><script src=/static/js/app.7a80dbbd.js></script></body><script>var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值

 public/UAVReport.docx

Binary files differ

 public/airQuality.docx

Binary files differ

 public/sailingReport.docx

Binary files differ

 src/components/Echarts/LineChart2.vue

@@ -92,8 +92,6 @@
      }

      // console.log('组件设置的数据')

      console.log(val, 'eee')
      this.chart.setOption(
        {
          title: {
@@ -146,7 +144,7 @@
              fontSize: fontSize(0.117), // 字体大小
            },
          },
         

          yAxis: {
            axisTick: {
              show: false, // 轴线刻度

 src/components/Echarts/LineChartSpe.vue

@@ -45,13 +45,12 @@
  },
  watch: {
    chartData: {
      

      handler(val) {
        console.log(val,'wath');
        this.setOptions(val)
      },
      deep: true,
      

    },
  },
  mounted() {
@@ -72,7 +71,6 @@
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      console.log(val.series,'123');
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
@@ -119,7 +117,6 @@
            position: function (pt) {
              return [pt[0], '10%']
            },
            //params[i].axisValue+'<br/>'+
            // formatter(params) {
            //   console.log(params,'ssss');
            //   let data=[]
@@ -129,7 +126,7 @@
            // return data
            // },
          },
         

          yAxis: {
            axisLabel: {
              show: false,
@@ -155,7 +152,7 @@
              top:fontSize(4),
              height: fontSize(0.4),
            },
            

          ],
          series: val.series,
          // [{

 src/components/Form/HourPicker1.vue

@@ -40,11 +40,12 @@
          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
          // // 如何你选择了两个日期了，就把那个变量置空
           if (maxDate) this.timeOne = ''

        },
        disabledDate: time => {
          if (this.timeOne) {
            const WEEK = 7 * 24 * 3600 * 1000 -1 // 这里乘以6相当于 限制7天以内
            const minTime = this.timeOne  // 七天之前
            const WEEK = 7 * 24 * 3600 * 1000 - 1 // 这里乘以6相当于 限制7天以内
            const minTime = this.timeOne // 七天之前
            const maxTime = this.timeOne + WEEK // 七天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {

 src/components/PlanMap/Map.vue

@@ -1,69 +1,1462 @@
<template>

<div class="Map">

  <div style="margin-bottom: 20px">

    <el-radio-group v-model="radioSeven" size="medium">

      <el-radio-button label="PM2.5" ></el-radio-button>

      <el-radio-button label="PM10"></el-radio-button>

      <el-radio-button label="SO2"></el-radio-button>

      <el-radio-button label="NO2"></el-radio-button>

      <el-radio-button label="CO"></el-radio-button>

      <el-radio-button label="03"></el-radio-button>

      <el-radio-button label="TVOC"></el-radio-button>

    </el-radio-group>

  <div class="main_body">

    <el-container

        style="height: 100%"

    >

      <el-container style="position: relative">

        <div class="carTop">

          <el-radio-group v-model="radioSeven" size="medium" @change="changeCode">

            <el-radio-button label="PM2.5" ></el-radio-button>

            <el-radio-button label="PM10"></el-radio-button>

            <el-radio-button label="SO2"></el-radio-button>

            <el-radio-button label="NO2"></el-radio-button>

            <el-radio-button label="CO"></el-radio-button>

            <el-radio-button label="03"></el-radio-button>

            <el-radio-button label="TVOC"></el-radio-button>

          </el-radio-group>

          <el-date-picker

              style="float:right;margin-right:10px;"

              @change="dateChange"

              v-model="dateValue"

              type="datetimerange"

              :picker-options="threeOptions"

              range-separator="至"

              start-placeholder="开始日期"

              end-placeholder="结束日期">

          </el-date-picker>

          <el-select v-model="carMacItem" clearable placeholder="请选择无人机" style="width: 180px;display: inline-block" @change="changeCarData">

            <el-option

                v-for="(item, index) in defaultData"

                :key="index"

                :label="item.name"

                :value="item.mac">

            </el-option>

          </el-select>

        </div>

        <div v-if="noneData" class="noneData">当前时间没有飞行数据</div>

        <div id="map_container" v-loading="loading" />

        <!-- 百度地图 -->

      </el-container>

    </el-container>

  </div>

  <div style="height: 90%;border: 1px solid;">

    <div id="map_container" style="width:100%; height:100%;" />

  </div>

</div>

</template>



<script>

import $ from 'jquery'

import '@/assets/icon/iconfont.css'

import requestObj from '@/utils/request'

var GPS = {

  PI: 3.14159265358979324,

  x_pi: (3.14159265358979324 * 3000.0) / 180.0,

  delta: function(lat, lon) {

    var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。

    var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。

    var dLat = this.transformLat(lon - 105.0, lat - 35.0)

    var dLon = this.transformLon(lon - 105.0, lat - 35.0)

    var radLat = (lat / 180.0) * this.PI

    var magic = Math.sin(radLat)

    magic = 1 - ee * magic * magic

    var sqrtMagic = Math.sqrt(magic)

    dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * this.PI)

    dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * this.PI)

    return { lat: dLat, lon: dLon }

  },



  // WGS-84 to GCJ-02

  gcj_encrypt: function(wgsLat, wgsLon) {

    if (this.outOfChina(wgsLat, wgsLon)) {

      return { lat: wgsLat, lon: wgsLon }

    }



    var d = this.delta(wgsLat, wgsLon)

    return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }

  },

  // GCJ-02 to WGS-84

  gcj_decrypt: function(gcjLat, gcjLon) {

    if (this.outOfChina(gcjLat, gcjLon)) {

      return { lat: gcjLat, lon: gcjLon }

    }



    var d = this.delta(gcjLat, gcjLon)

    return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }

  },

  // GCJ-02 to WGS-84 exactly

  gcj_decrypt_exact: function(gcjLat, gcjLon) {

    var initDelta = 0.01

    var threshold = 0.000000001

    var dLat = initDelta

    var dLon = initDelta

    var mLat = gcjLat - dLat

    var mLon = gcjLon - dLon

    var pLat = gcjLat + dLat

    var pLon = gcjLon + dLon

    var wgsLat

    var wgsLon

    var i = 0

    while (1) {

      wgsLat = (mLat + pLat) / 2

      wgsLon = (mLon + pLon) / 2

      var tmp = this.gcj_encrypt(wgsLat, wgsLon)

      dLat = tmp.lat - gcjLat

      dLon = tmp.lon - gcjLon

      if (Math.abs(dLat) < threshold && Math.abs(dLon) < threshold) {

        break

      }



      if (dLat > 0) pLat = wgsLat

      else mLat = wgsLat

      if (dLon > 0) pLon = wgsLon

      else mLon = wgsLon



      if (++i > 10000) break

    }

    return { lat: wgsLat, lon: wgsLon }

  },

  // GCJ-02 to BD-09

  bd_encrypt: function(gcjLat, gcjLon) {

    var x = gcjLon

    var y = gcjLat

    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)

    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi)

    this.bdLon = z * Math.cos(theta) + 0.0065

    this.bdLat = z * Math.sin(theta) + 0.006

    return { lat: this.bdLat, lon: this.bdLon }

  },

  // BD-09 to GCJ-02

  bd_decrypt: function(bdLat, bdLon) {

    var x = bdLon - 0.0065

    var y = bdLat - 0.006

    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)

    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)

    var gcjLon = z * Math.cos(theta)

    var gcjLat = z * Math.sin(theta)

    return { lat: gcjLat, lon: gcjLon }

  },

  // WGS-84 to Web mercator

  // mercatorLat -> y mercatorLon -> x

  mercator_encrypt: function(wgsLat, wgsLon) {

    var x = (wgsLon * 20037508.34) / 180.0

    var y =

        Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /

        (this.PI / 180.0)

    y = (y * 20037508.34) / 180.0

    return { lat: y, lon: x }

  },

  // Web mercator to WGS-84

  // mercatorLat -> y mercatorLon -> x

  mercator_decrypt: function(mercatorLat, mercatorLon) {

    var x = (mercatorLon / 20037508.34) * 180.0

    var y = (mercatorLat / 20037508.34) * 180.0

    y =

        (180 / this.PI) *

        (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)

    return { lat: y, lon: x }

  },

  // two point's distance

  distance: function(latA, lonA, latB, lonB) {

    var earthR = 6371000.0

    var x =

        Math.cos((latA * this.PI) / 180.0) *

        Math.cos((latB * this.PI) / 180.0) *

        Math.cos(((lonA - lonB) * this.PI) / 180)

    var y =

        Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)

    var s = x + y

    if (s > 1) s = 1

    if (s < -1) s = -1

    var alpha = Math.acos(s)

    var distance = alpha * earthR

    return distance

  },

  outOfChina: function(lat, lon) {

    if (lon < 72.004 || lon > 137.8347) {

      return true

    }

    if (lat < 0.8293 || lat > 55.8271) {

      return true

    }

    return false

  },

  transformLat: function(x, y) {

    var ret =

        -100.0 +

        2.0 * x +

        3.0 * y +

        0.2 * y * y +

        0.1 * x * y +

        0.2 * Math.sqrt(Math.abs(x))

    ret +=

        ((20.0 * Math.sin(6.0 * x * this.PI) +

            20.0 * Math.sin(2.0 * x * this.PI)) *

            2.0) /

        3.0

    ret +=

        ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *

            2.0) /

        3.0

    ret +=

        ((160.0 * Math.sin((y / 12.0) * this.PI) +

            320 * Math.sin((y * this.PI) / 30.0)) *

            2.0) /

        3.0

    return ret

  },

  transformLon: function(x, y) {

    var ret =

        300.0 +

        x +

        2.0 * y +

        0.1 * x * x +

        0.1 * x * y +

        0.1 * Math.sqrt(Math.abs(x))

    ret +=

        ((20.0 * Math.sin(6.0 * x * this.PI) +

            20.0 * Math.sin(2.0 * x * this.PI)) *

            2.0) /

        3.0

    ret +=

        ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *

            2.0) /

        3.0

    ret +=

        ((150.0 * Math.sin((x / 12.0) * this.PI) +

            300.0 * Math.sin((x / 30.0) * this.PI)) *

            2.0) /

        3.0

    return ret

  },

}

export default {

  name: 'Map',

  data() {

    return {

      carMacItem: null,

      radioSeven: 'PM2.5',

      mapCenterlon: 0,

      mapCenterlat: 0,

      planData: [], // 飞行数据

      map: null

      bdLon: null,

      bdLat: null,

      loading: true,

      snesorParams: [

        'PM2.5',

        'PM10',

        'SO2',

        'NO2',

        'CO',

        'O3',

        'TVOC',

        '尘负荷',

      ],

      changeColor: 0,

      changeColor1: 0,

      sensorKey: 'a34004',

      viewKey: '2D',

      dataType: 'history',

      responseJSON: null,

      radio1: null,

      viewOptions: [

        '平铺',

        '立体'

      ],

      dateValue: [],

      pickerOptions: {

        disabledDate(time) {

          return time.getTime() > Date.now()

        },

        shortcuts: [

          {

            text: '今天',

            onClick(picker) {

              picker.$emit('pick', new Date())

            },

          },

          {

            text: '昨天',

            onClick(picker) {

              const date = new Date()

              date.setTime(date.getTime() - 3600 * 1000 * 24)

              picker.$emit('pick', date)

            },

          },

          {

            text: '一周前',

            onClick(picker) {

              const date = new Date()

              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)

              picker.$emit('pick', date)

            },

          },

        ],

      },

      timeOne: '',

      threeOptions: {

        onPick: ({ maxDate, minDate }) => {

          // 最大时间 最小时间

          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期

          // 如何你选择了两个日期了，就把那个变量置空

          if (maxDate) this.timeOne = ''

        },

        disabledDate: (time) => {

          if (this.timeOne) {

            const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内

            const minTime = this.timeOne // 三天之前

            const maxTime = this.timeOne + WEEK // 三天之后

            return (

              time.getTime() < minTime ||

              time.getTime() > maxTime ||

              time.getTime() > new Date()

            )

          } else {

            return time.getTime() > new Date()

          }

        },

      },

      sensorDate: null,

      noneData: false,

      defaultData: [],

      carMac: null,

      dialogFormVisible: false,

      sensorTableData: [

        {

          sensorName: 'PM2.5',

          unit: 'ug/m³',

          tab1: '35',

          tab2: '75',

          tab3: '115',

          tab4: '150',

          tab5: '250',

          tab6: '350',

        },

        {

          sensorName: 'PM10',

          unit: 'ug/m³',

          tab1: '50',

          tab2: '150',

          tab3: '250',

          tab4: '350',

          tab5: '420',

          tab6: '500',

        },

        {

          sensorName: 'SO2',

          unit: 'ug/m³',

          tab1: '50',

          tab2: '150',

          tab3: '475',

          tab4: '800',

          tab5: '1600',

          tab6: '2100',

        },

        {

          sensorName: 'NO2',

          unit: 'ug/m³',

          tab1: '40',

          tab2: '80',

          tab3: '180',

          tab4: '280',

          tab5: '565',

          tab6: '750',

        },

        {

          sensorName: 'CO',

          unit: 'mg/m³',

          tab1: '2',

          tab2: '4',

          tab3: '14',

          tab4: '24',

          tab5: '36',

          tab6: '48',

        },

        {

          sensorName: 'O3',

          unit: 'ug/m³',

          tab1: '160',

          tab2: '200',

          tab3: '300',

          tab4: '400',

          tab5: '800',

          tab6: '1000',

        },

        {

          sensorName: 'TVOC',

          unit: 'mg/m³',

          tab1: '0.1',

          tab2: '0.3',

          tab3: '0.5',

          tab4: '0.7',

          tab5: '0.9',

          tab6: '1',

        },

        {

          sensorName: '尘负荷',

          unit: 'ug/m³',

          tab1: '300',

          tab2: '500',

          tab3: '1000',

          tab4: '10000',

          tab5: '20000',

          tab6: '50000',

        },

      ],

      carWs: null,

      map: null,

      sensor: null,

      viewType: null,

      size: null,

      distance: null,

      showPoints: null,

      viewport: null,

      mapZoom: null,

      centerPoint: null,

      view: null,

      abc: 0,

      firstPlayFlag: true,

      firstWsFlag: true,

      msgTemp: [],

      dataTypeList: [

        {

          value: 'history',

          label: '历史数据',

        },

        {

          value: 'webSocket',

          label: '实时数据',

        },

      ],

      dataTypeValue: 'history',

      historyView: true,

      webSocketView: false,

      isDataList: [],

      shapeLayer: null,

      carData: null,

      timeDuan: 0,

      isDisTime: false,

      startTime: '',

      endTime: '',

      dataDate: '',

      sensorTime: [],

      timeValue: [

        new Date(2020, 1, 1, 0, 0, 0),

        new Date(2022, 12, 31, 23, 59, 59)

      ],

    }

  },

  watch: {

    dataTypeValue(n, o) {

      if (this.dataTypeValue === 'webSocket') {

        this.dateValue = []

        this.historyView = false

        this.webSocketView = true

      } else {

        this.dateValue = []

        this.historyView = true

        this.webSocketView = false

      }

    },

    dateValue(n, o) {

      if (n === null) {

        this.dateValue = []

      }

    },

    viewKey(n, o) {

      // console.log(n)

    },

    deep: true,

    immediate: true

  },

  mounted() {

    this.getData() // 无人机轨迹数据

    this.getStart()

  },

  beforeDestroy() {},

  created() {

    this.newTime(this.timeValue)

    this.newDate()

    this.getCarData()

    // this.$watch('carMac', () => {

    // })

  },

  methods: {

    // 时间处理函数

    newTime2(timeArr) {

      var arr = []

      timeArr.map(v => {

        var date = new Date(v)

        var y = date.getFullYear()

        var m = date.getMonth() + 1

        m = m < 10 ? '0' + m : m

        var d = date.getDate()

        d = d < 10 ? '0' + d : d

        var h = date.getHours()

        h = h < 10 ? '0' + h : h

        var minute = date.getMinutes()

        minute = minute < 10 ? '0' + minute : minute

        var s = date.getSeconds()

        s = s < 10 ? '0' + s : s

        arr.push(y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s)

      })

      return arr

    },

    // 点击列表切换走航车数据

    changeCarData(e) {

      this.carMac = e

      this.getStart()

    },

    // 请求走航车列表数据

    getCarData() {

      this.$request({

        url: '/cruiser/selectCruisers',

        method: 'get'

      }).then(res => {

        this.defaultData = res.data

        this.carMac = res.data[0].mac

      }).catch(err => {

        console.log(err)

      })

    },

    // 进行经纬度转换为距离的计算

    Rad(d) {

      return (d * Math.PI) / 180.0 // 经纬度转换成三角函数中度分表形式。

    },

    // 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度

    GetDistance(lat1, lng1, lat2, lng2) {

      var radLat1 = this.Rad(lat1)

      var radLat2 = this.Rad(lat2)

      var a = radLat1 - radLat2

      var b = this.Rad(lng1) - this.Rad(lng2)

      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +

          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))

      s = s * 6378.137 // EARTH_RADIUS;

      s = Math.round(s * 10000) / 10000 // 输出为公里

      // s=s.toFixed(4);

      return s

    },

    // 日期格式化

    newDate() {

      var aData = new Date()

      var month =

          aData.getMonth() < 9

            ? '0' + (aData.getMonth() + 1)

            : aData.getMonth() + 1

      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      this.sensorDate = aData.getFullYear() + '-' + month + '-' + date

    },

    // 时间格式化

    newTime(timeArr) {

      let str = ''

      let str2 = ''

      this.sensorTime = []

      timeArr.map((v) => {

        v = JSON.stringify(v)

        str2 = v.substr(12, 8).split(':')

        str2[0] =

            (str2[0] - 0 + 8) % 24 < 9

              ? '0' + ((str2[0] - 0 + 8) % 24)

              : (str2[0] - 0 + 8) % 24

        str = str2.join(':')

        this.sensorTime.push(str)

      })

    },

    // 修改时间

    dateChange(e) {

      if (e === null) {

        this.sensorDate = []

      } else {

        this.sensorDate = this.newTime2(e)

        if (this.view) {

          this.view.removeAllLayers()

          this.map.clearOverlays()

          // console.log('清除图层')

        }

        this.dataType = 'history'

        // this.map = null

        this.getStart()

      }

    },

    // 走航车轨迹数据

    async getData() {

    getStart() {

      this.noneData = false

      if (this.ws) {

        this.ws.close()

      }

      if (this.view) {

        this.view.removeAllLayers()

        this.map.clearOverlays()

      }

      this.$request({

        url: '/cruiser/cruiserTrajectory',

        method: 'get',

        params: {

          mac: 'p5dnd7a0243622',

          time1: '2022-11-01 00:00:00',

          time2: '2022-11-02 00:00:00'

          mac: this.carMac,

          time1: this.sensorDate[0],

          time2: this.sensorDate[1]

        }

      }).then(res => {

        // console.log(res)

        this.planData = res.data

        this.mapCenterlon = res.data[0].flylon

        this.mapCenterlat = res.data[0].flylat

        // console.log(this.mapCenterlon, this.mapCenterlat)

        this.map = new window.BMapGL.Map('map_container')

        this.map.centerAndZoom(new BMapGL.Point(this.mapCenterlon, this.mapCenterlat), 19) // 初始化地图，设置中心点坐标和地图级别

        this.map.enableScrollWheelZoom() // 开启鼠标滚轮缩放

        // 地球模式

        this.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式

        this.map.setTilt(0) // 设置地图的倾斜角度

        if (!res.data.length) {

          this.noneData = true

          this.loading = false

        }

        if (res.data.length) {

          this.carData = res

          this.initStart(this.carData)

        }

      })

    },

    // 执行数据生成逻辑

    initStart(res) {

      this.abc += 1

      const that = this

      if (!res) {

        return

      }

      if (this.dataType === 'history') {

        this.responseJSON = res.data

      } else {

        this.responseJSON = res

      }

      // var sensorInfo = this.responseJSON

      // console.log('这是snesor获取得值')

      // console.log(this.responseJSON)

      var trackPoints = []

      this.loading = false

      if (this.responseJSON.length > 0) {

        this.noneData = false

        $.each(this.responseJSON, (item, value) => {

          if (typeof value.flylon === 'undefined') {

            showNoPoints()

          } else {

            var lng = parseFloat(

              value.flylon.substr(0, value.flylon.length - 1)

            )

            var lat = parseFloat(

              value.flylat.substr(0, value.flylat.length - 1)

            )

            if (lng < 70 || lng > 150 || lat > 60 || lat < 20) {

              return true

            }

            lng = GPS.gcj_encrypt(lat, lng).lon

            lat = GPS.gcj_encrypt(lat, lng).lat

            lng = GPS.bd_encrypt(lat, lng).lon

            lat = GPS.bd_encrypt(lat, lng).lat

            var point = new BMapGL.Point(lng, lat)

            point.a34004 = parseInt(value.a34004)

            point.a34002 = parseInt(value.a34002)

            point.a21026 = parseInt(value.a21026)

            point.a21004 = parseInt(value.a21004)

            point.a21005 = parseFloat(value.a21005).toFixed(3)

            point.a05024 = parseInt(value.a05024)

            point.a99054 = parseFloat(value.a99054).toFixed(3)

            if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {

              point.dustld = 100

            } else {

              point.dustld = value.dustld - 0

            }

            // point.dustld = value.dustld - 0

            trackPoints.push(point)

          }

        })

        that.sensor = this.sensorKey

        that.viewType = this.viewKey

        that.size = 70

        that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4)

        // 已有地图，避免再次请求

        if (!that.showPoints) {

          that.map = new BMapGL.Map('map_container')

        }

        that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮，地图可以进行放大、缩小

        that.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式

        that.map.setDisplayOptions({

          street: false, // 是否显示路网（只对卫星图和地球模式有效）

        })

        that.map.setHeading(20) // 设置旋转角度

        if (that.viewKey === '2D') {

          that.map.setTilt(0) // 地图倾斜

        } else {

          that.map.setTilt(52)

        }

        // that.map.setDisplayOptions({

        //   // 设置天空颜色

        //   skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)'], // 天空颜色

        //   building: false, // 不显示建筑物

        //   poiText: true, // 显示poi文字

        // })

        // that.map.addControl(new BMapGL.NavigationControl3D()) // 添加3d控件

        if (this.responseJSON.length === 0) {

          showNoPoints()

        }

        that.showPoints = getShowPoints(that.size)

        that.viewport = that.map.getViewport(eval(that.showPoints)) // 此方法仅返回视野信息(中心点坐标，缩放）,不会将新的中心点和级别做用到当前地图上

        that.mapZoom = that.viewport.zoom

        that.centerPoint = that.viewport.center

        if (that.firstPlayFlag) {

          that.map.centerAndZoom(that.centerPoint, that.mapZoom)

          that.view = new mapvgl.View({

            map: that.map,

          })

          that.firstPlayFlag = false

        } else {

          this.view.removeAllLayers()

          this.map.clearOverlays()

          // that.map.centerAndZoom(that.centerPoint, 18)

        }

      }

      drawPolygon(that.sensor) // 绘制多边形。

      // draw(that.sensor, that.viewType, that.carMac)

      // drawLine()// 轨迹(绘制带折线箭头)

      // drawStartAndEnd() // 起点和终点标注

      function draw(sensor, type, carMac) {

        var levels = getGrading(sensor, type, carMac)

        $.each(levels, function(index, value) {

          var color = value.color

          var data = value.data

          if (data.length > 0) {

            // 创建MapVGL图层管理器,需要使用插件mapvgl

            that.shapeLayer = new mapvgl.ShapeLayer({

              color: color, // 柱状图颜色

              enablePicked: true, // 是否可以拾取

              selectedIndex: -1, // 选中项

              selectedColor: '#ee1111', // 选中项颜色

              autoSelect: true, // 根据鼠标位置来自动设置选中项

              riseTime: 1800, // 楼块初始化升起时间

            })

            that.shapeLayer.setData(data)

            that.view.addLayer(that.shapeLayer)

          }

        })

        that.map.setDefaultCursor('default')

        if (type === '2D') {

          $.each(that.showPoints, function(item, point) {

            setLabelStyle(point[sensor], point)

          })

        }

      }



      // 画方块，上色，添加文字

      function drawPolygon(sensor) {

        $.each(that.showPoints, function(item, point) {

          var sw = getPoint(225, point.lng, point.lat, that.distance)

          var ne = getPoint(45, point.lng, point.lat, that.distance)

          var data = point[sensor]

          // 根据因子浓度变换方块颜色

          var color = getColorAndLevel(sensor, data).color

          var polygon = new BMapGL.Polygon(

            [

              new BMapGL.Point(sw.lng, sw.lat), // 左下角

              new BMapGL.Point(ne.lng, sw.lat), // 左上角

              new BMapGL.Point(ne.lng, ne.lat), // 右上角

              new BMapGL.Point(sw.lng, ne.lat), // 右下角

            ],

            { strokeWeight: 0.5, strokeOpacity: 0.0, fillColor: color, fillOpacity: 1 }

          )

          that.map.addOverlay(polygon)

          // 方块内添加label文本

          setLabelStyle(data, point)

        })

      }



      // 起点和终点标注

      function drawStartAndEnd() {

        var startIcon = new BMapGL.Icon(

          require('@/assets/images/start.png'),

          new BMapGL.Size(48, 48)

        )

        var startMark = new BMapGL.Marker(that.showPoints[0], {

          icon: startIcon,

          offset: new BMapGL.Size(0, -20),

        })

        that.map.addOverlay(startMark)

        var endIcon = new BMapGL.Icon(

          require('@/assets/images/end.png'),

          new BMapGL.Size(48, 48)

        )

        var endMark = new BMapGL.Marker(

          that.showPoints[that.showPoints.length - 1],

          {

            icon: endIcon,

            offset: new BMapGL.Size(0, -20),

          }

        )

        that.map.addOverlay(endMark)

      }



      // 绘制带箭头折线

      function drawLine() {

        var data = []

        var points = []

        $.each(trackPoints, function(index, value) {

          var point = []

          point.push(value['lng'], value['lat'])

          points.push(point)

        })

        data.push({

          geometry: {

            type: '"LineString"',

            coordinates: [points],

          },

        })

        var lineLayer = new mapvgl.LineLayer({

          color: 'red',

          width: 3,

          animation: true,

          duration: 10, // 循环时间2s

          trailLength: 0.1, // 拖尾长度占间隔的0.4

          interval: 0.3, // 粒子长度占线整体长度的0.2

        })

        that.view.addLayer(lineLayer)

        lineLayer.setData(data)

      }



      // 格子间隔>=size的放进points

      function getShowPoints(size) {

        var points = []

        points.push(trackPoints[0])

        for (var i = 1; i < trackPoints.length; i++) {

          var flag = true

          var point1 = trackPoints[i]

          for (var j = 0; j < points.length; j++) {

            var point2 = points[j]

            var dis = that.map.getDistance(point1, point2) // 返回两点之间的直线距离，单位是米

            if (dis < size) {

              flag = false

            }

          }

          if (flag) {

            points.push(point1)

          }

        }

        return points

      }



      // 根据中心，角度，距离，找点

      function getPoint(angle, lng, lat, distance) {

        var EARTH_RADIUS = 6378137 // 地球的半径，m

        // 将距离转换成经度的计算公式

        var ra = distance / EARTH_RADIUS

        // 转换为radian，否则结果会不正确

        angle = (angle / 180) * Math.PI

        lng = (lng / 180) * Math.PI

        lat = (lat / 180) * Math.PI

        lng =

            lng +

            Math.atan2(

              Math.sin(angle) * Math.sin(ra) * Math.cos(lat),

              Math.cos(ra) - Math.sin(lat) * Math.sin(lat)

            ) // Math.atan2()方法计算二维坐标系中任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小

        lat = Math.asin(

          Math.sin(lat) * Math.cos(ra) +

          Math.cos(lat) * Math.sin(ra) * Math.cos(angle)

        )

        // 转为正常的10进制经纬度

        lng = (lng * 180) / Math.PI

        lat = (lat * 180) / Math.PI

        // console.log(lng, lat)

        return new BMapGL.Point(lng, lat)

      }



      function getGrading(sensor, type, carMac) {

        var levels = []

        var level0 = {}

        var level1 = {}

        var level2 = {}

        var level3 = {}

        var level4 = {}

        var level5 = {}

        var level6 = {}



        var data0 = []

        var data1 = []

        var data2 = []

        var data3 = []

        var data4 = []

        var data5 = []

        var data6 = []



        level0.color = '#38D9D3'

        level1.color = '#00e400'

        level2.color = '#ffff00'

        level3.color = '#ff7e00'

        level4.color = '#ff0000'

        level5.color = '#99004c'

        level6.color = '#7e0023'



        $.each(that.showPoints, function(index, value) {

          var sw = getPoint(225, value.lng, value.lat, that.distance)

          var ne = getPoint(45, value.lng, value.lat, that.distance)

          var polygon = []

          var point1 = []

          var point2 = []

          var point3 = []

          var point4 = []

          point1.push(sw.lng, sw.lat)

          point2.push(ne.lng, sw.lat)

          point3.push(ne.lng, ne.lat)

          point4.push(sw.lng, ne.lat)

          polygon.push(point1)

          polygon.push(point2)

          polygon.push(point3)

          polygon.push(point4)

          var valueElement = value[sensor]

          var colorAndLevel = getColorAndLevel(sensor, value[sensor])

          var level = colorAndLevel['level']

          var height

          if (type === '2D') {

            height = 0

          } else {

            height = value[sensor]

            // if (sensor === 'a99054') {

            //   height = value[sensor] * 500

            // }

            // console.log(carMac, 'carMac')

            // if (sensor === 'dustld' && (value[sensor] - 0) < 100 && (value[sensor] - 0) !== 0 && carMac === 'p5dnd7a0243622') {

            //   height = 100 * 10

            // }

          }

          switch (level) {

            case 0:

              data0.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 1:

              data1.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 2:

              data2.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 3:

              data3.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 4:

              data4.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 5:

              data5.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 6:

              data6.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

          }

        })

        level0.data = data0

        level1.data = data1

        level2.data = data2

        level3.data = data3

        level4.data = data4

        level5.data = data5

        level6.data = data6

        levels.push(level0, level1, level2, level3, level4, level5, level6)

        return levels

      }

      function getColorAndLevel(senosor, data) {

        var levelData = that.sensorTableData

        var colorAndLevel = {}

        var color

        var level

        switch (that.sensor) {

          case 'a34004':

            if (data < levelData[0].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[0].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[0].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[0].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[0].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a34002':

            if (data < levelData[1].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[1].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[1].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[1].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[1].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21026':

            if (data < levelData[2].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[2].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[2].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[2].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[2].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21004':

            if (data < levelData[3].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[3].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[3].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[3].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[3].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21005':

            if (data < levelData[4].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[4].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[4].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[4].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[4].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a05024':

            if (data < levelData[5].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[5].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[5].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[5].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[5].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a99054':

            if (data < levelData[6].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[6].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[6].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[6].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[6].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'dustld':

            if (data < levelData[7].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[7].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[7].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[7].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[7].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

        }

        colorAndLevel['color'] = color

        colorAndLevel['level'] = level

        return colorAndLevel

      }



      // point上添加label文本

      function setLabelStyle(content, point) {

        var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容

          {

            offset: new BMapGL.Size(-8, -10), // label的偏移量，为了让label的中心显示在点上

            position: point

          } // label的位置

        )

        var offsetSize = new BMapGL.Size(0, 0)

        var size = '10px'

        if (that.map.getZoom() <= 15.5) {

          size = '0px'

        }

        var labelStyle = {

          border: '0',

          fontSize: size,

          height: '20px',

          lineHeight: '20px',

          fontFamily: '微软雅黑',

          backgroundColor: '0.05',

          fontWeight: 'bold',

        }

        label.setStyle(labelStyle)

        that.map.addOverlay(label)

      }



      // 无数据时,缩放至该中心

      function showNoPoints() {

        that.map.centerAndZoom('苏州市', 17)

        setTimeout(function() {

          document.getElementById('cpm').style.display = 'block'

          document.getElementById('data').style.display = 'none'

        }, 250)

      }



      // 地图缩放级别监控

      that.map.addEventListener('zoomend', function() {

        // 这里根据缩放显示和隐藏文本

        var zoom = that.map.getZoom()

        $('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']()

        $('span.my-maptip').parent().css('font-size', 30 - zoom)

      })



      // var that = this

      function clickChange() {

        $('.carTop').on('click', () => {

          // console.log('点击了')

          that.view.removeAllLayers()

          that.map.clearOverlays()

          that.sensor = that.sensorKey

          that.viewType = that.viewKey

          // draw(that.sensor, that.viewType)

          drawPolygon(that.sensor)

          if (that.viewType === '2D') {

            that.map.setTilt(0)

            // drawLine()

            // drawStartAndEnd()

            $('.sensorLevel').attr('src', '/img/pollutionlevel.png')

          } else if (that.viewType === '3D') {

            that.map.setTilt(52)

            if (that.sensor === 'a34004') {

              $('.sensorLevel').attr('src', '/img/pm25.png')

            } else if (that.sensor === 'a34002') {

              $('.sensorLevel').attr('src', '/img/pm10.png')

            } else if (that.sensor === 'a99054') {

              $('.sensorLevel').attr('src', '/img/tvoc.png')

            }

          }

        })

      }

      if (that.firstPlayFlag) {

        clickChange()

      }

    },

    changeCode(value) {

      switch (value) {

        case 'PM2.5':

          this.sensorKey = 'a34004'

          break

        case 'PM10':

          this.sensorKey = 'a34002'

          break

        case 'SO2':

          this.sensorKey = 'a21026'

          break

        case 'NO2':

          this.sensorKey = 'a21004'

          break

        case 'CO':

          this.sensorKey = 'a21005'

          break

        case '03':

          this.sensorKey = 'a05024'

          break

        case 'TVOC':

          this.sensorKey = 'a99054'

          break

        case 'dustld':

          this.sensorKey = 'dustld'

          break

      }

      this.initStart(this.carData)

    },

    changeCode1(index) {

      this.changeColor1 = index

      if (index === 0) {

        this.viewKey = '2D'

      } else {

        this.viewKey = '3D'

      }

      this.getStart()

    },

  },

}

</script>

<style lang="less" scoped>

body,

html,

#map_container {

  width: 100%;

  height: 100%;

  overflow: hidden;

  margin: 0;

  z-index: 0;

  font-size: 14px;

  font-family: "微软雅黑";

}



.main_body {

  border: 0;

  margin: 0;

  width: 100%;

  height: 100%;

  position: relative;

}



#cpm {

  width: 300px;

  height: 100px;

  position: absolute;

  background-color: #ffffff;

  display: none;

  left: 50%;

  top: 50%;

  margin-left: -150px;

  margin-top: -50px;

  z-index: 11;

  color: #000000;

  border: 2px solid #FF7F50;

  font-size: 28px;

  line-height: 100px;

  text-align: center;

}



.BMap_pop > img {

  top: 42px !important;

  margin-left: -10px;

}



.BMap_pop div:nth-child(1) div {

  display: none;

}



.BMap_pop div:nth-child(3) {

  display: none;

}



.BMap_pop div:nth-child(5) {

  display: none;

}



.BMap_pop div:nth-child(7) {

  display: none;

}



.BMap_pop div:nth-child(9) {

  top: 35px !important;

  border-radius: 5px;

}



#selectSenor {

  position: absolute;

  z-index: 1;

  left: 30px;

  top: 20px;

  font-size: 20px;

  background: lightgrey;

}



#type {

  position: absolute;

  z-index: 1;

  left: 30px;

  top: 50px;

  font-size: 20px;

  background: lightgrey;

}



button {

  font-size: 15px;

}



.sensorLevel {

  position: absolute;

  z-index: 1;

  bottom: 50px;

  left: 10px;

  width: 100px;

  height: 200px;

}

.carTop {

  position: absolute;

  top: 0;

  width: 100%;

  padding: 5px 10px;

  z-index: 999;

  background: rgba(204, 204, 204, 0.5);

  box-shadow: 1px 1px 5px #666;

}

.carTop > .left,

.right {

  padding: 5px 10px;

  border: 1px solid #aaa;

  border-right: none;

  background: #fff;

  cursor: pointer;

  font-size: 16px;

  float: left;

  margin-top: 4px;

  -webkit-transform-origin-x: 0;

}

.carTop .left:nth-child(1),

.carTop .right:nth-child(1) {

  border-radius: 5px 0 0 5px;

}

.carTop .left:nth-last-child(2),

.carTop .right:nth-child(2) {

  border-radius: 0 5px 5px 0;

  border-right: 1px solid #aaa;

}



.carTop{

  &>.left:nth-child(1){

    border-radius: 5px 0 0 5px;

  }

}

.carTop {

  .left {

    &:nth-last-child(2) {

      margin-left: -12px !important;

    }

  }

}

</script>



<style scoped>

.Map{

  width: 100%;

  height: 100%;

.carTop > .left:hover,

.right:hover {

  background: rgb(64, 158, 255);

  color: #fff;

}

.carTop > .right {

  float: right;

}

.click {

  color: #fff;

  background-color: rgb(64, 158, 255) !important;

}

.noneData {

  position: absolute;

  color: #000;

  background: #fff;

  z-index: 999;

  left: 50%;

  top: 50%;

  transform: translate(-50%);

  padding: 20px 50px;

  font-size: 28px;

  border: 2px solid #ff7f50;

}

.main_body .el-date-editor .el-range-input {

  width: 30%;

}

.main_body /deep/ .el-date-editor .el-range-separator {

  width: 15%;

}

</style>


 src/components/Wind/Map.vue

@@ -1,1869 +1,1931 @@
<template>
  <div
    id="mapContent"
    v-loading="loading"
    element-loading-text="请稍等"
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <div v-if="noneData" class="noneData">当前区域设备没有风场</div>
    <div class="top">
      <span
        v-for="(item, index) in params"
        :key="index"
        class="left"
        :class="{ click: changeColor === index }"
        @click="change(index)"
      >{{ item }}</span>
      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
      <span class="right">{{ times }}秒</span>
      <span class="dropDown">
        <img class="realTime_top" :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState">
        <span class="text_Time">{{ dateFormat }}</span>
        <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
      </span>
    </div>
    <div class="topDate" style="height: 60px">
      <div class="jdt" id="eventPro">
        <div class="mouseDiv">
          <span class="inText"></span>
          <div class="sjDiv"></div>
        </div>
        <div class="mouseDiv2">
          <span class="inText2"></span>
          <div class="sjDiv2"></div>
        </div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </div>
      <div class="timeDiv" style="position: relative">
        <ul id="timeUl">
          <li style="width: 0.83%"></li>
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
          <li></li>
          <!--          -->
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
          <li></li>
          <!--          -->
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
        </ul>
        <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">
          <p class="p1"></p>
          <p style="position: relative">
            <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
            <span class="p2"></span>
            <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
          </p>
          <p class="p3"></p>
        </div>
      </div>
    </div>
    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
    <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" />
    <el-dialog
      title="污染报警查询"
      :visible.sync="alarmTableVisible"
      width="80%"
      @mouseover.native="mouseOver"
      @mouseleave.native="mouseLeave"
    >
      <div class="topSelect">
        <div>
          <el-date-picker
            v-model="dateValue"
            style="width:400px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
          <el-select v-model="factorValue" placeholder="选择因子">
            <el-option
              v-for="item in factorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="alartValue" placeholder="选择报警类型">
            <el-option
              v-for="item in alertOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="alertData(PageSize, currentPage)">查询</el-button>
        </div>
      </div>
      <el-table
        :data="gridData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
        border
        stripe
        :cell-class-name="tableCellClassName"
        height="400"
      >
        <el-table-column property="alarmInfoId" label="序号" width="50" align="center" />
        <el-table-column property="alarm_time" label="报警时间" width="150" />
        <el-table-column property="deviceName" label="站点名称" width="200" />
        <el-table-column property="index" label="因子" width="80" align="center" />
        <el-table-column property="alarm_type" label="报警类型" width="200" align="center" />
        <el-table-column property="alarm_information" label="报警信息" align="center" />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="alarmTableVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import 'leaflet-velocity/dist/leaflet-velocity.css'
import L from 'leaflet'
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
import 'leaflet-velocity/dist/leaflet-velocity'
import $ from 'jquery'
import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件
import { mapGetters } from 'vuex'
export default {
  components: { RegionalOverview },
  props: {
    jumpData: Array,
    weidu: Number,
    jingdu: Number,
    monitorPointId: Number,
    monitorPointIds: Array
  },
  data() {
    return {
      timerKey: '', // 用于重新渲染子组件
      map: null,
      code: [],
      latlng: [],
      noneData: false,
      params: [
        'PM10',
        'PM2.5',
        'SO2',
        'NO2',
        'CO',
        'O3',
        'TVOC'
      ],
      changeColor: 0,
      times: 1,
      sensorKey: 'a34002',
      keys: [],
      bg: require('@/assets/images/tl_PM10.png'),
      windState: 1,
      windStateText: '风场图',
      keyData: [],
      lats: [],
      lngs: [],
      accountId: this.$store.state.accountId,
      orgId: this.$store.state.orgId,
      coordinates: [],
      markerObject: [],
      loading: true,
      ws: null,
      lockReconnect: false, // 是否真正建立连接
      timeout: 58 * 1000, // 30秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时,
      jingduNew: this.jingdu,
      weiduNew: this.weidu,
      alartValue: 'all',
      dateValue: '',
      factorValue: 'all',
      // 总数据
      gridData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 0,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 40],
      // 默认每页显示的条数（可修改）
      PageSize: 20,
      factorOptions: [
        {
          label: '全部因子',
          value: 'all'
        },
        {
          label: 'PM10',
          value: 'PM10'
        },
        {
          label: 'PM2.5',
          value: 'PM2.5'
        },
        {
          label: 'SO2',
          value: 'SO2'
        },
        {
          label: 'NO2',
          value: 'NO2'
        },
        {
          label: 'CO',
          value: 'CO'
        },
        {
          label: 'O3',
          value: 'O3'
        }
      ],
      alertOptions: [
        {
          label: '全部报警类型',
          value: 'all'
        },
        {
          label: '超限',
          value: 'overrun'
        },
        {
          label: '突然高',
          value: 'sudden'
        },
        {
          label: '超过国控站点100%',
          value: 'state100'
        },
        {
          label: '超过国控站点150%',
          value: 'state150'
        },
        {
          label: '超过国控站点250%',
          value: 'state250'
        },
        {
          label: '超过市区均值100%',
          value: 'city100'
        },
        {
          label: '超过市区均值150%',
          value: 'city150'
        },
        {
          label: '超过市区均值250%',
          value: 'city250'
        }
      ],
      currentDate: '',
      turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
      showOrHidden: true,
      dateFormat: '',
      alarmTableVisible: false,
      chooseTimeInfo: false, // 是否选择了时间点
      dateInfo: '', // 选择的日期
      timeInfo: '' // 选择的时间
    }
  },
  computed: {
    ...mapGetters(['regionCode'])
  },
  watch: {
    dateValue(n, o) {
      // console.log(n)
      // this.newDate()
    },
    regionCode(newCode, oldCode) {
      this.timerKey = newCode // 用于监听code变化重新渲染子组件
    }
  },
  mounted() {
    this.currentHour()
    this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)
    // 初始化地图容器
    this.initMap()

    // 事件代理
    this.eventProxy()
  },
  created() {
    const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
    this.jingduNew = newLL[1]
    this.weiduNew = newLL[0]
    // 初始化风场数据
    this.windData()
    this.change(0)
    this.getParamsData()
    this.windDir()
    this.newDate()
    this.alertData(this.PageSize, this.currentPage)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      // console.log('timer定时器销毁成功')
    }
    if (this.timer2) {
      // console.log(this.timer2)
      clearInterval(this.timer2)
      // console.log('timer2定时器销毁成功')
    }
    // 离开页面时关闭websocket
    if (this.ws) {
      // console.log('WS关闭')
      this.ws.close()
    }
  },
  methods: {
    // 拿到某天的日期和星期
    getDayXQ(day) {
      var days = new Date().getDay() // 星期
      var rq = '' // 日期
      if (day === 'today') {
        rq = this.newData(0)
      } else if (day === 'yesterday') {
        days = ((days + 7) - 1) % 7
        rq = this.newData(-1) // 昨天日期
      } else if (day === 'beforeYea') {
        days = ((days + 7) - 2) % 7
        rq = this.newData(-2) // 前天日期
      }
      switch (days) {
        case 1:
          days = '周一'
          break
        case 2:
          days = '周二'
          break
        case 3:
          days = '周三'
          break
        case 4:
          days = '周四'
          break
        case 5:
          days = '周五'
          break
        case 6:
          days = '周六'
          break
        case 0:
          days = '周日'
          break
      }
      return `${rq}(${days})`
    },
    // 计算当前天之前或者之后的日期
    newData(day) {
      var today = new Date()
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds)
      var tMonth = today.getMonth() + 1
      tMonth = tMonth < 10 ? '0' + tMonth : tMonth
      var tDate = today.getDate()
      tDate = tDate < 10 ? '0' + tDate : tDate
      return tMonth + '/' + tDate
    },
    // 事件代理
    eventProxy() {
      // 拿到今天的日期和星期
      var ul = document.querySelector('#eventPro')
      var lis = document.querySelectorAll('#eventPro>li')
      var timeUl = document.querySelector('#timeUl')
      var timeLis = document.querySelectorAll('#timeUl>li')
      var mouseDiv = document.querySelector('.mouseDiv')
      var mouseDiv2 = document.querySelector('.mouseDiv2')
      var inText = document.querySelector('.inText')
      var inText2 = document.querySelector('.inText2')
      var p1 = document.querySelector('.p1')
      var p2 = document.querySelector('.p2')
      var p3 = document.querySelector('.p3')
      p3.innerHTML = this.getDayXQ('today')
      p2.innerHTML = this.getDayXQ('yesterday')
      p1.innerHTML = this.getDayXQ('beforeYea')
      var greenInfo = 0
      ul.onclick = (e) => {
        // 给所有的li颜色设为初始值
        for (let i = 0; i < lis.length; i++) {
          lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
        }
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
          // var li = this.querySelectorAll('li')
          // var index = Array.prototype.indexOf.call(li, target)
          for (let i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'green'
            if (lis[i] === target) {
              mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
              mouseDiv2.style.display = 'block'
              var times = (i - 0 + 1) % 24
              times = times > 9 ? times : '0' + times
              inText2.innerHTML = times + ':00'
              this.chooseTimeInfo = true // 选择时间点
              if (i / 24 < 1) {
                console.log(111)
              } else if (i / 24 <= 2 && i / 24 > 1) {
                console.log(222)
              } else {
                console.log(333)
              }
              break
            }
          }
        }
      }
      // timeUl绑定点击事件
      timeUl.onclick = e => {
        // 给所有的li颜色设为初始值
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
          for (let i = 0; i < timeLis.length; i++) {
            if (timeLis[i] === target) {
              greenInfo = i
              mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
              mouseDiv2.style.display = 'block'
              var times = i % 24
              times = times > 9 ? times : '0' + times
              inText2.innerHTML = times + ':00'
              break
            }
          }
          if (greenInfo !== 0) {
            for (let i = 0; i < lis.length; i++) {
              if (i < greenInfo) {
                lis[i].style.backgroundColor = 'green'
              } else {
                lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
              }
            }
          }
          // console.log('下边点击进来了', greenInfo, 'index')
        }
      }
      // 鼠标移入移出事件
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseenter = function() {
          // console.log('mouseenter', i)
          mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
          mouseDiv.style.display = 'block'
          var times = (i - 0 + 1) % 24
          times = times > 9 ? times : '0' + times
          inText.innerHTML = times + ':00'
          // console.log(mouseDiv)
        }
        lis[i].onmouseleave = function() {
          mouseDiv.style.display = 'none'
          // console.log('移出事件', i)
        }
      }
      for (let i = 0; i < timeLis.length; i++) {
        timeLis[i].onmouseenter = function() {
          // console.log('mouseenter', i)
          mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
          mouseDiv.style.display = 'block'
          var times = i % 24
          times = times > 9 ? times : '0' + times
          inText.innerHTML = times + ':00'
          // console.log(mouseDiv)
        }
        timeLis[i].onmouseleave = function() {
          mouseDiv.style.display = 'none'
          // console.log('移出事件', i)
        }
      }
    },
    // 当前小时默认值
    currentHour() {
      const aData = new Date()
      const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
      const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
      const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
      const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
      this.dateFormat = currentDate.toString()
    },
    // 日期格式化
    newDate() {
      var aData = new Date()
      var month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
      this.currentDate = aData.getFullYear() + '-' + month + '-' + date
      // console.log(this.currentDate)
      this.dateValue = [this.currentDate, this.currentDate]
    },
    // 报警弹窗移入
    mouseOver() {
      this.map.scrollWheelZoom.disable()
    },
    // 报警弹窗移出
    mouseLeave() {
      this.map.scrollWheelZoom.enable()
    },
    initWebpack() {
      // 拼写参数
      var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
      // 拼写URL
      var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
      this.ws = new WebSocket(socketUrl)
      this.ws.onopen = this.onopen
      this.ws.onmessage = this.onmessage
      this.ws.onclose = this.onclose
      this.ws.onerror = this.onerror
    },
    reconnect() { // 重新连接
      var that = this
      if (that.lockReconnect) {
        return
      }
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum)
      that.timeoutnum = setTimeout(function() {
        // 新连接
        that.initWebpack()
        that.lockReconnect = false
      }, 5000)
    },
    reset() { // 重置心跳
      var that = this
      // 清除时间
      clearTimeout(that.timeoutObj)
      clearTimeout(that.serverTimeoutObj)
      // 重启心跳
      that.start()
    },
    start() { // 开启心跳
      // console.log('开启心跳')
      var self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      self.timeoutObj = setTimeout(function() {
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.ws.readyState === 1) { // 如果连接正常
          self.ws.send('heartCheck')
        } else { // 否则重连
          self.reconnect()
        }
        self.serverTimeoutObj = setTimeout(function() {
          // 超时关闭
          self.ws.close()
        }, self.timeout)
      }, self.timeout)
    },
    onopen() {
      // console.log('连接开启')
      // 开启心跳
      this.start()
    },
    onmessage(msg) {
      var that = this
      if (JSON.parse(msg.data).名称) {
        that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
      } else {
        that.wsData1 = msg.data
        if (that.windState === 2) {
          for (let i = 0; i < that.keyData.length; i++) {
            // 更新风向标
            // 遍历出(通过mac匹配)要更新的风向标
            if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
              var blueIcon1 = L.icon({ // 设置图标样式
                iconUrl: require('@/assets/images/icoWind03.png'),
                iconSize: [30, 30],
                iconAnchor: [15, 25],
                className: 'iconWind'
              })
              // L.marker用来在地图中放置注记
              that.marker = L.marker([that.lats[i], that.lngs[i]], {
                icon: blueIcon1,
                rotationAngle: Number(JSON.parse(that.wsData1).风向)
              })
              if (i === 0) {
                that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
                that.map.addLayer(that.marker)
              } else {
                that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
                for (let j = 0; j < that.markerObject.length; j++) {
                  if (that.coordinates[0] === that.markerObject[j].mac1) {
                    that.map.removeLayer(that.markerObject[j].marker)
                    that.map.addLayer(that.marker)
                  } else if (that.coordinates[i] === that.markerObject[j].mac1) {
                    that.map.removeLayer(that.markerObject[j].marker)
                    that.map.addLayer(that.marker)
                  }
                }
              }
            }
          }
        }
      }
      // 收到服务器信息，心跳重置
      this.reset()
    },
    onclose(e) {
      // console.log('连接关闭')
      // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
      // 重连
      this.reconnect()
    },
    onerror(e) {
      console.log('出现错误')
      // 重连
      this.reconnect()
    },
    // ws方法
    wsStart() {
      var that = this
      // 拼写参数
      var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
      // 拼写URL
      var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
      // 替换http为WS
      //   console.log(socketUrl)
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
      this.ws = new WebSocket(socketUrl)
      // if (this.ws) {
      //   this.ws.close()
      //   console.log('ws心跳关闭')
      // }
      // this.ws = new WebSocket(socketUrl)
      // console.log('ws心跳开启')

      this.ws.onopen = function() {
        // console.log('websocket开启成功')
      }
      // 获得消息事件
      this.ws.onmessage = function(msg) {
        if (JSON.parse(msg.data).名称) {
          that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
          //   console.log(that.wsData2)
        } else {
          that.wsData1 = msg.data
          //   console.log(that.wsData1)
          if (that.windState === 2) {
            for (let i = 0; i < that.keyData.length; i++) {
              // 更新风向标
              // 遍历出(通过mac匹配)要更新的风向标
              if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
                var blueIcon1 = L.icon({
                  iconUrl: require('@/assets/images/icoWind03.png'),
                  iconSize: [30, 30],
                  iconAnchor: [15, 25],
                  className: 'iconWind'
                })
                that.marker = L.marker([that.lats[i], that.lngs[i]], {
                  icon: blueIcon1,
                  rotationAngle: Number(JSON.parse(that.wsData1).风向)
                })
                if (i === 0) {
                  that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
                  that.map.addLayer(that.marker)
                } else {
                  that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
                  for (let j = 0; j < that.markerObject.length; j++) {
                    if (that.coordinates[0] === that.markerObject[j].mac1) {
                      that.map.removeLayer(that.markerObject[j].marker)
                      that.map.addLayer(that.marker)
                    } else if (that.coordinates[i] === that.markerObject[j].mac1) {
                      that.map.removeLayer(that.markerObject[j].marker)
                      that.map.addLayer(that.marker)
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    // 百度经纬度转高德经纬度
    bd09togcj02(bd_lon, bd_lat) {
      var x_pi = 3.14159265358979324 * 3000.0 / 180.0
      var x = bd_lon - 0.0065
      var y = bd_lat - 0.006
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
      var gg_lng = z * Math.cos(theta)
      var gg_lat = z * Math.sin(theta)
      return [gg_lat, gg_lng]
    },
    // 请求设备坐标,当前的
    deviceMaker() {
      // 遍历所有图层
      if (this.map) {
        this.map.eachLayer(function(layer) {
          // 卸载之前的风场图层
          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
            layer.remove()
          }
        })
      }
      const that = this
      this.$request({
        url: '/historyFiveMinutely/queryDeviceAndData',
        method: 'get',
        params: {
          sensorCode: this.sensorKey,
          organizationId: this.$store.state.orgId,
          regionCode: this.$store.state.regionCode
        }
      }).then((data) => {
        // console.log('五分钟设备数据')
        // console.log(data)
        that.loading = false
        this.markDeviceSite(data)
      })
    },
    // 标记设备点
    markDeviceSite(data) {
      var keyData = data.data.devices
      this.keyData = data.data.devices
      // 遍历国控站位置
      this.stateControlStation()
      var group = L.layerGroup().addTo(this.map)
      this.keys = []
      for (let i = 0; i < keyData.length; i++) {
        if (keyData[i].a34002) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
        } else if (keyData[i].a34004) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
        } else if (keyData[i].a21026) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
        } else if (keyData[i].a21004) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
        } else if (keyData[i].a21005) {
          this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
        } else if (keyData[i].a05024) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
        } else if (keyData[i].a99054) {
          this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
        } else {
          // for (let j = 0; j < keyData.length; j++) {
          this.keys.push(JSON.parse('null'))
          // }
        }
        // console.log(this.keys)
        var lat = keyData[i].latitude
        this.lats[i] = keyData[i].latitude
        var lng = keyData[i].longitude
        this.lngs[i] = keyData[i].longitude
        // 对比各个key中的标准数据，标记展示不同的颜色
        var colorNum = 7
        if (keyData[i].a34002) {
          var data = Math.floor(JSON.parse(keyData[i].a34002))
          switch (true) {
            case (data < 0): {
              colorNum = 7
              break
            }
            case (data === 0): {
              colorNum = 0
              break
            }
            case (data <= 50): {
              colorNum = 1
              break
            }
            case (data <= 150): {
              colorNum = 2
              break
            }
            case (data <= 250): {
              colorNum = 3
              break
            }
            case (data <= 350): {
              colorNum = 4
              break
            }
            case (data <= 420): {
              colorNum = 5
              break
            }
            case (data > 420): {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a34004) {
          var data = Math.floor(JSON.parse(keyData[i].a34004))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 35: {
              colorNum = 1
              break
            }
            case data <= 75: {
              colorNum = 2
              break
            }
            case data <= 115: {
              colorNum = 3
              break
            }
            case data <= 150: {
              colorNum = 4
              break
            }
            case data <= 250: {
              colorNum = 5
              break
            }
            case data > 250: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21026) {
          var data = Math.floor(JSON.parse(keyData[i].a21026))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 50: {
              colorNum = 1
              break
            }
            case data <= 150: {
              colorNum = 2
              break
            }
            case data <= 475: {
              colorNum = 3
              break
            }
            case data <= 800: {
              colorNum = 4
              break
            }
            case data <= 1600: {
              colorNum = 5
              break
            }
            case data > 1600: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21004) {
          var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 40: {
              colorNum = 1
              break
            }
            case data <= 80: {
              colorNum = 2
              break
            }
            case data <= 180: {
              colorNum = 3
              break
            }
            case data <= 280: {
              colorNum = 4
              break
            }
            case data <= 565: {
              colorNum = 5
              break
            }
            case data > 565: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21005) {
          var data = JSON.parse(keyData[i].a21005).toFixed(3)
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 2: {
              colorNum = 1
              break
            }
            case data <= 4: {
              colorNum = 2
              break
            }
            case data <= 14: {
              colorNum = 3
              break
            }
            case data <= 24: {
              colorNum = 4
              break
            }
            case data <= 36: {
              colorNum = 5
              break
            }
            case data > 36: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a05024) {
          var data = Math.floor(JSON.parse(keyData[i].a05024))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 160: {
              colorNum = 1
              break
            }
            case data <= 200: {
              colorNum = 2
              break
            }
            case data <= 300: {
              colorNum = 3
              break
            }
            case data <= 400: {
              colorNum = 4
              break
            }
            case data <= 800: {
              colorNum = 5
              break
            }
            case data > 800: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a99054) {
          var data = JSON.parse(keyData[i].a99054).toFixed(3)
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 0.5: {
              colorNum = 1
              break
            }
            case data <= 1: {
              colorNum = 2
              break
            }
            case data <= 1.5: {
              colorNum = 3
              break
            }
            case data <= 2: {
              colorNum = 4
              break
            }
            case data <= 3: {
              colorNum = 5
              break
            }
            case data > 3: {
              colorNum = 6
              break
            }
              // default:
              //   break
          }
        }

        var blueIcon = L.icon({
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
          // iconUrl: require('@/assets/icon/ico2.png'),
          iconSize: [60, 60],
          iconAnchor: [13, 21],
          className: 'my-device'
        })
        // 添加标记到地图
        L.marker([lat, lng], {
          icon: blueIcon
        }).addTo(group)
        // console.log(JSON.parse(this.keys[i]))
        var myIcon = L.divIcon({
          html: this.keys[i],
          className: 'my-div-icon',
          iconSize: 30
        })
        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
        // 给标记添加鼠标移入事件，mouseover事件会冒泡
        var _this = this
        marker.on('mouseover', function(e) {
          this.noneData = false
          // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {
          //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
          //   // console.log(data)
          //   this.bindPopup(data).openPopup()
          // })
          _this.$request({
            url: '/historyFiveMinutely/queryPopDataByMac',
            method: 'get',
            params: {
              mac: keyData[i].mac
            }
          }).then((res) => {
            for (const key in res.data) {
              var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
              if (key !== '名称' && key !== '时间') {
                if (Number(tempDecimal) === 0) {
                  res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
                } else {
                  res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
                }
                // var num = res.data[key].split(' ')[0]
                // res.data[key] = (num - 0).toFixed(3)
              }
            }
            var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
            this.bindPopup(data).openPopup()
          }).catch((err) => {
            console.log(err)
          })
        })
        // 给标记点添加鼠标移出事件
        marker.on('mouseout', function(e) {
          this.noneData = false
          this.bindPopup().closePopup()
        })
      }
    },
    // 给标记点添加移入移出事件
    // moveInAndOut() {
    //
    // },
    // 国控站经纬度
    stateControlStation() {
      // this.$axios.get('monitorPoint/queryStateControlStation', {
      this.$request({
        url: '/govMonitorPoint/queryStateControlStation',
        method: 'get',
        params: {
          regionCode: 130900,
          sensorCode: 'a34002'
        }
      }).then(res => {
        // console.log('国控站信息')
        // console.log(res)
        var gkData = res.data
        var group = L.layerGroup().addTo(this.map)
        for (let i = 0; i < gkData.length; i++) {
          var glat = gkData[i].latitude
          var glng = gkData[i].longitude
          var gIcon = L.icon({
            iconUrl: require('@/assets/icon/gk.png'),
            // iconUrl:require('@/assets/images/tl_PM10.png'),
            iconSize: [55, 55],
            iconAnchor: [13, 21],
            className: 'my-device'
          })
          // 添加标记到地图
          L.marker([glat, glng], {
            icon: gIcon
          }).addTo(group)
          var myIcon = L.divIcon({
            html: gkData[i].data,
            className: 'my-div-icon-g',
            iconSize: 30
          })
          L.marker([glat, glng], {
            icon: myIcon
          }).addTo(group)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 切换风场风向状态
    toggleWindState() {
      if (this.ws) {
        this.ws.close()
      }
      if (this.windState === 2) {
        this.windState = 1
        this.windStateText = '风场图'
        this.initData()
        // console.log(this.windState)
      } else if (this.windState === 1) {
        this.windState = 2
        this.windStateText = '风向标'
        this.windDir()
        // console.log(this.windState)
      }
    },
    // 请求风向标
    windDir() {
      // console.log('加载风向')
      //   console.log('风向标ws请求开始')
      // const that = this
      // 遍历所有图层
      if (this.map) {
        this.map.eachLayer(function(layer) {
          // 卸载之前的风场图层
          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
            layer.remove()
          }
        })
      }
      // 执行生成设备点方法
      this.deviceMaker()
      // 执行ws方法
      // this.wsStart()
      this.initWebpack()
      // console.log('这是ws需要的三个参数')
      // console.log(this.accountId, this.orgId, this.regionCode)
      // this.timer2 = setInterval(() => {
      //   if (this.ws) {
      //     this.ws.close()
      //     console.log('ws心跳关闭')
      //   }
      //   // 执行ws方法
      //   this.wsStart()
      //   console.log('ws心跳开启')
      // }, 60000)
    },
    // 获得父组件改变regionCode子组件请求api功能
    getRegionApiRequest() {
      // console.log(this.$store.state.regionCode)
      // this.ws.close()
      // console.log('ws关闭')
      // 请求更新风场数据
      this.getParamsData()
      setTimeout(() => {
        $.getJSON('http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea', { 'monitorPointId': this.$store.state.monitorPointId }, (data) => {
          // 遍历所有图层
          //   console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
          //   console.log(data)
          // this.map.eachLayer(function(layer) {
          // // 卸载之前的风场图层
          //   if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
          //     layer.remove()
          //   }
          // })
          this.map.setView([data[2], data[1]], 12)
          //   console.log('跳转成功')
        })
      }, 1000)
      if (this.windState === 1) {
        // this.ws.close()
        this.initData()
        // console.log('请求风场图')
      } else if (this.windState === 2) {
        this.windDir()
        // console.log('请求风向标')
      }
      // 请求设备坐标
      // this.deviceMaker()
      // this.getParamsData()
    },
    // 子组件地图的跳转中心点方法
    jumpMap(LngLat) {
      // console.log('我是子组件方法')
      // console.log(this.jumpData)
      // console.log(LngLat)
      this.map.setView(LngLat, 18)
    },
    // 请求更新风场数据
    getParamsData() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          // 时间点选择标记消失
          var mouseDiv2 = document.querySelector('.mouseDiv2')
          mouseDiv2.style.display = 'none'
          // clearInterval(this.timer)
          if (this.windState === 1) {
            // this.ws.close()
            this.initData()
            // console.log('请求风场图')
          } else if (this.windState === 2) {
            this.windDir()
            // console.log('请求风向标')
          }
          setTimeout(() => {
            this.change(this.changeColor)
            this.times = 300
          }, 100)
        }
      }, 1000)
    },
    // 初始化地图容器
    initMap() {
      //   console.log('这是index传到map的经纬度')
      //   console.log(this.weidu)
      //   console.log(this.jingdu)
      var map = L.map('mapContent', {
        minZoom: 2,
        maxZoom: 18,
        center: [this.weiduNew, this.jingduNew],
        zoom: 14,
        zoomControl: false, // 缩放组件
        attributionControl: false, // 去掉右下角logol
        crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
      })
      // 定义图层样式
      L.tileLayer('https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)
      // L.tileLayer(
      //   'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
      // ).addTo(map)
      this.map = map // data上需要挂载
      window.map = map
    },
    // 更改不同的值区间
    change(index) {
      this.changeColor = index
      var pr = ''
      switch (index) {
        case 0: pr = 'a34002'
          this.bg = require('@/assets/images/tl_PM10.png')
          break
        case 1: pr = 'a34004'
          this.bg = require('@/assets/images/tl_PM2.5.png')
          break
        case 2: pr = 'a21026'
          this.bg = require('@/assets/images/tl_SO2.png')
          break
        case 3: pr = 'a21004'
          this.bg = require('@/assets/images/tl_NO2.png')
          break
        case 4: pr = 'a21005'
          this.bg = require('@/assets/images/tl_CO.png')
          break
        case 5: pr = 'a05024'
          this.bg = require('@/assets/images/tl_O3.png')
          break
        case 6: pr = 'a99054'
          this.bg = require('@/assets/images/tl_TVOCNew.png')
          break
      }
      this.sensorKey = pr
      // 请求设备坐标
      // this.toggleWindState()
      if (this.windState === 1) {
        this.initData()
      } else if (this.windState === 2) {
        this.windDir()
      }
    },
    // 请求风场图接口
    initData() {
      // console.log('加载风场')
      // const that = this
      // 请求更新风场数据
      //   console.log(this.monitorPointId)
      // 遍历所有图层
      if (this.map) {
        this.map.eachLayer(function(layer) {
          // 卸载之前的风场图层
          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
            layer.remove()
          }
        })
      }
      this.deviceMaker()
      //   console.log('请求风场之前')
      // $.ajaxSettings.async = false
      // for (let i = 0; i < this.monitorPointIds.length; i++) {
      this.windData()
      // }
    },
    // 风场图数据
    windData() {
      this.$request({
        url: '/monitorPoint/getWindData',
        method: 'get',
        params: {
          monitorPointIds: JSON.stringify(this.monitorPointIds[0])
        }
      }).then(res => {
        // console.log('新风场数据')
        // console.log(res)
        // if (res.data[0][0].data.length === 0) {
        //   this.noneData = true
        // }
        // 生成风场实例
        var velocityLayer = L.velocityLayer({
          displayValues: false, // 是否显示当前鼠标移动位置，风场信息
          displayOptions: {// 显示信息配置
            velocityType: 'Global Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No wind data'
          },
          data: res.data[0], // 数据  格式可参照
          // 以下为控制参数，后面为默认值
          minVelocity: 0, // 粒子最小速度（ m/s ）
          maxVelocity: 8, // 粒子最大速度（ m/s ）
          velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
          particleAge: 90, // 粒子在再生之前绘制的最大帧数
          lineWidth: 1.5, // 绘制粒子的线宽
          particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
          frameRate: 15, // 每秒所需的帧数
          colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
        })
        velocityLayer.addTo(this.map)// 添加到图上
        // console.log('风场数据')
        // console.log(res.data[0])
      }).catch(err => {
        console.log(err)
      })
    },
    // 将页码，及每页显示的条数以参数传递提交给后台
    alertData(n1, n2) {
      // 这里使用axios，使用时请提前引入
      this.$request({
        url: '/alarmInfo/getDataByConditionWithoutPage',
        method: 'get',
        params: {
          organization_id: this.$store.state.orgId,
          // 每页显示的条数
          // size: n1,
          // 显示第几页
          // current: n2,
          startTime: this.dateValue[0],
          endTime: this.dateValue[1],
          index: this.factorValue,
          alarmType: this.alartValue
        }
      })
        .then(res => {
          // console.log('分页数据')
          // console.log(res)
          var tempData = res.data
          // console.log(tempData)
          for (let i = 0; i < tempData.alarmInfos.length; i++) {
            tempData.alarmInfos[i].alarmInfoId = i + 1
          }
          // 将数据赋值给tableData
          this.gridData = tempData.alarmInfos
          // 将数据的长度赋值给totalCount
          this.totalCount = tempData.alarmInfos.length
        })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      // console.log(val)
    },
    // 单元格样式
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      for (const key in row) {
        if (key === column.property) {
          const code = column.property
          if (code === 'alarm_type') {
            // console.log(row[key])
            if (row[key] === 0 || row[key] === '' || row[key] === null) {
              return ''
            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) {
              return 'yellow'
            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) {
              return 'orange'
            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) {
              return 'red'
            }
          }
        }
      }
      return ''
    },
    turnState() {
      // console.log(this.showOrHidden)
      if (this.showOrHidden === true) {
        this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
      } else {
        this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
      }
      this.showOrHidden = !this.showOrHidden
    },
    closeAlarmTableVisible() {
      this.$store.state.alarmTableVisible = false
    }

  }
}
</script>

<style lang="scss">
html,
body,
#mapContent {
  width: 100%;
  height: 100%;
}
// .topSelect{
//     display: flex;
//     margin-bottom: 20px;
//     padding: 20px 15px 0 15px;
//     display: flex;
//     justify-content: space-between;
//     span:first-child{
//         flex: 1;
//     }
// }
.noneData {
  position: absolute;
  color: #000;
  background: #fff;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  padding: 20px 50px;
  /* opacity: 0.5; */
  font-size: 28px;
  /* border-radius: 10px; */
  border: 2px solid #ff7f50;
}
.topDate {
  position: absolute;
  top: 50px;
  width: 100%;
  padding: 15px 10px 3px 10px;
  z-index: 999;
  //background: #ccc;
  background: rgba(204, 204, 204, 0.8);
  box-shadow: 1px 1px 5px #666;
  cursor: pointer;
}
.mouseDiv, .mouseDiv2{
  position: absolute;
  left: 0;
  background-color: #009845;
  width: 36px;
  height: 22px;
  border-radius: 5px;
  top: -34px;
  display: none;
  text-align: center;
  line-height: 22px;
  padding: 1px;
  color: white;
}
.sjDiv, .sjDiv2{
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: #009845;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 100%;
  z-index: -1;
}
.mouseDiv2{
  background-color: #2b2b2b;
}
.sjDiv2{
  border-top-color: #2b2b2b;
}
.jdt{
  height: 5px;
  width: 73%;
  display: flex;
  position: relative;
}
.timeDiv{
  width: 73%;
  float: left;
}
.topDate .timeDiv:nth-child(3){
  border-left: 1px solid white;
  border-right: 1px solid white;
}
.topDate ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.topDate li{
  width: 1.36986%;
  //padding: 0 2%;
  box-sizing: border-box;
  //transform: translateX(50%);
}
.topDate p{
  text-align: center;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.jdt li{
  //box-sizing: border-box;
  border-left: 1px solid white;
  background-color: rgba(0,0,0,0.3);
  height: 100%;
  width: 1.36986%;
  list-style: none;
}
.dayDiv p{
  width: 32.87664%;
  text-align: center;
}
.top {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 5px 10px;
  z-index: 999;
  /* background: #ccc; */
  background: rgba(204, 204, 204, 0.5);
  //box-shadow: 1px 1px 5px #666;
}
.top > .left {
  padding: 5px 10px;
  border: 1px solid #aaa;
  border-right: none;
  background: #fff;
  /* border-radius: 3px; */
  cursor: pointer;
  font-size: 16px;
  float: left;
  margin-top: 4px;
  -webkit-transform-origin-x: 0;
  /* -webkit-transform: scale(0.90); */
}
.top > .left:nth-child(1) {
  border-radius: 5px 0 0 5px;
}
.top > .left:nth-last-child(2) {
  border-radius: 0 5px 5px 0;
  border-right: 1px solid #aaa;
}
.top > .left:hover {
  background: #666;
  color: #fff;
}
.click {
  color: #fff;
  background-color: #666 !important;
}
.top > .right {
  position: fixed;
  right: 410px;
  top: 55px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: green;
  color: #fff;
  float: right;
  line-height: 40px;
  text-align: center;
  border: 1px solid #333;
  opacity: 0.7;
}

.top > .dropDown {
  width: 400px;
  height: 51px;
  line-height: 51px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  position: fixed;
  right: 0;
  top: 50px;
  background-color:  rgba(15, 69, 103, 0.8);
}
.dropDown > .drop-icon {
  vertical-align: middle;
  width: 24px;
  position: relative;
  left: 14px;
  top: -2px;
}
.realTime_top {
  width: 120px;
  float: left;
  margin-top: 9px;
  margin-left: 10px;
}

.text_Time {
  float: left;
  margin-left: 37px;
}
.my-div-icon {
  font-size: 14px;
  text-align: center;
  padding-left: 20px;
  padding-top: 6px;
  font-family: '微软雅黑';
  z-index: 10003;
  /* -webkit-transform-origin-x: 0; */
  /* -webkit-transform: scale(0.90); */
}
.my-div-icon-g {
  font-size: 14px;
  text-align: center;
  padding-left: 20px;
  padding-top: 11px;
  font-family: '微软雅黑';
  z-index: 10003;
  /* -webkit-transform-origin-x: 0; */
  /* -webkit-transform: scale(0.90); */
}
.iconWind {
  z-index: 10002;
}
.my-device {
  z-index: 999;
}
.windDir-icon {
  z-index: 10001;
  margin-top: 20px;
  /* padding-left: 10px; */
  /* padding-top: 30px; */
}
.leaflet-popup-content {
  width: 235px !important;
  font-size: 12px;
  -webkit-transform-origin-x: 0;
  z-index: 1000;
  /* -webkit-transform: scale(0.90); */
  /* font-family: ui-serif; */
}
.buttom-left {
  /* background-image: url("@/assets/images/tl_PM10.png"); */
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 435px;
  height: 36px;
  z-index: 999;
  border-radius: 3px;
}
.middle {
  padding: 5px 10px;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  float: left;
  margin-top: 4px;
  -webkit-transform-origin-x: 0;
  margin-left: 20px;
}
.el-dialog__body{
  padding: 10px 20px;
}
.el-dialog__footer{
  padding: 0px 20px 15px;
}
.yellow{
  background-color: #ffff00!important;
  color: #868600!important;
}
.orange{
  background-color: #ff7e00!important;
  color: #844100!important;
}
.red{
  background-color: #ff0000!important;
  color: #790000!important;
}
</style>
<template>

  <div

    id="mapContent"

    v-loading="loading"

    element-loading-text="请稍等"

    element-loading-background="rgba(0, 0, 0, 0.6)"

  >

    <div v-if="noneData" class="noneData">当前区域设备没有风场</div>

    <div class="top">

      <span

        v-for="(item, index) in params"

        :key="index"

        class="left"

        :class="{ click: changeColor === index }"

        @click="change(index)"

      >{{ item }}</span>

      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->

      <span class="right">{{ times }}秒</span>

      <span class="dropDown">

        <img class="realTime_top" :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState">

        <span class="text_Time">{{ dateFormat }}</span>

        <img class="drop-icon" :src="turnImg" alt="" @click="turnState">

      </span>

    </div>

    <div class="topDate" style="height: 60px">

      <div class="jdt" id="eventPro">

        <div class="mouseDiv">

          <span class="inText"></span>

          <div class="sjDiv"></div>

        </div>

        <div class="mouseDiv2">

          <span class="inText2"></span>

          <div class="sjDiv2"></div>

        </div>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

      </div>

      <div class="timeDiv" style="position: relative">

        <ul id="timeUl">

          <li style="width: 0.83%"></li>

          <li></li>

          <li></li>

          <li>03</li>

          <li></li>

          <li></li>

          <li>06</li>

          <li></li>

          <li></li>

          <li>09</li>

          <li></li>

          <li></li>

          <li>12</li>

          <li></li>

          <li></li>

          <li>15</li>

          <li></li>

          <li></li>

          <li>18</li>

          <li></li>

          <li></li>

          <li>21</li>

          <li></li>

          <li></li>

          <li></li>

          <!--          -->

          <li></li>

          <li></li>

          <li>03</li>

          <li></li>

          <li></li>

          <li>06</li>

          <li></li>

          <li></li>

          <li>09</li>

          <li></li>

          <li></li>

          <li>12</li>

          <li></li>

          <li></li>

          <li>15</li>

          <li></li>

          <li></li>

          <li>18</li>

          <li></li>

          <li></li>

          <li>21</li>

          <li></li>

          <li></li>

          <li></li>

          <!--          -->

          <li></li>

          <li></li>

          <li>03</li>

          <li></li>

          <li></li>

          <li>06</li>

          <li></li>

          <li></li>

          <li>09</li>

          <li></li>

          <li></li>

          <li>12</li>

          <li></li>

          <li></li>

          <li>15</li>

          <li></li>

          <li></li>

          <li>18</li>

          <li></li>

          <li></li>

          <li>21</li>

          <li></li>

          <li></li>

        </ul>

        <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">

          <p class="p1"></p>

          <p style="position: relative">

            <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>

            <span class="p2"></span>

            <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>

          </p>

          <p class="p3"></p>

        </div>

      </div>

    </div>

    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />

    <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" />

    <el-dialog

      title="污染报警查询"

      :visible.sync="alarmTableVisible"

      width="80%"

      @mouseover.native="mouseOver"

      @mouseleave.native="mouseLeave"

    >

      <div class="topSelect">

        <div>

          <el-date-picker

            v-model="dateValue"

            style="width:400px"

            type="daterange"

            range-separator="至"

            start-placeholder="开始日期"

            end-placeholder="结束日期"

            value-format="yyyy-MM-dd"

          />

          <el-select v-model="factorValue" placeholder="选择因子">

            <el-option

              v-for="item in factorOptions"

              :key="item.value"

              :label="item.label"

              :value="item.value"

            />

          </el-select>

          <el-select v-model="alartValue" placeholder="选择报警类型">

            <el-option

              v-for="item in alertOptions"

              :key="item.value"

              :label="item.label"

              :value="item.value"

            />

          </el-select>

          <el-button type="primary" @click="alertData(PageSize, currentPage)">查询</el-button>

        </div>

      </div>

      <el-table

        :data="gridData.slice((currentPage-1)*PageSize,currentPage*PageSize)"

        border

        stripe

        :cell-class-name="tableCellClassName"

        height="400"

      >

        <el-table-column property="alarmInfoId" label="序号" width="50" align="center" />

        <el-table-column property="alarm_time" label="报警时间" width="150" />

        <el-table-column property="deviceName" label="站点名称" width="200" />

        <el-table-column property="index" label="因子" width="80" align="center" />

        <el-table-column property="alarm_type" label="报警类型" width="200" align="center" />

        <el-table-column property="alarm_information" label="报警信息" align="center" />

      </el-table>

      <el-pagination

        :current-page="currentPage"

        :page-sizes="pageSizes"

        :page-size="PageSize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="totalCount"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

      />

      <div slot="footer" class="dialog-footer">

        <el-button size="mini" @click="alarmTableVisible = false">关 闭</el-button>

      </div>

    </el-dialog>

  </div>

</template>



<script>

import 'leaflet/dist/leaflet.css'

import 'leaflet-velocity/dist/leaflet-velocity.css'

import L from 'leaflet'

import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'

import 'leaflet-velocity/dist/leaflet-velocity'

import $ from 'jquery'

import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件

import { mapGetters } from 'vuex'

import { gcj02towgs84 } from '@/assets/json/transform'

export default {

  components: { RegionalOverview },

  props: {

    jumpData: Array,

    weidu: Number,

    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array

  },

  data() {

    return {

      timerKey: '', // 用于重新渲染子组件

      map: null,

      code: [],

      latlng: [],

      noneData: false,

      params: [

        'PM10',

        'PM2.5',

        'SO2',

        'NO2',

        'CO',

        'O3',

        'TVOC'

      ],

      changeColor: 0,

      times: 1,

      sensorKey: 'a34002',

      keys: [],

      bg: require('@/assets/images/tl_PM10.png'),

      windState: 1,

      windStateText: '风场图',

      keyData: [],

      lats: [],

      lngs: [],

      accountId: this.$store.state.accountId,

      orgId: this.$store.state.orgId,

      coordinates: [],

      markerObject: [],

      loading: true,

      ws: null,

      lockReconnect: false, // 是否真正建立连接

      timeout: 58 * 1000, // 30秒一次心跳

      timeoutObj: null, // 心跳心跳倒计时

      serverTimeoutObj: null, // 心跳倒计时

      timeoutnum: null, // 断开 重连倒计时,

      jingduNew: this.jingdu,

      weiduNew: this.weidu,

      alartValue: 'all',

      dateValue: '',

      factorValue: 'all',

      // 总数据

      gridData: [],

      // 默认显示第几页

      currentPage: 1,

      // 总条数，根据接口获取数据长度(注意：这里不能为空)

      totalCount: 0,

      // 个数选择器（可修改）

      pageSizes: [10, 20, 30, 40],

      // 默认每页显示的条数（可修改）

      PageSize: 20,

      factorOptions: [

        {

          label: '全部因子',

          value: 'all'

        },

        {

          label: 'PM10',

          value: 'PM10'

        },

        {

          label: 'PM2.5',

          value: 'PM2.5'

        },

        {

          label: 'SO2',

          value: 'SO2'

        },

        {

          label: 'NO2',

          value: 'NO2'

        },

        {

          label: 'CO',

          value: 'CO'

        },

        {

          label: 'O3',

          value: 'O3'

        }

      ],

      alertOptions: [

        {

          label: '全部报警类型',

          value: 'all'

        },

        {

          label: '超限',

          value: 'overrun'

        },

        {

          label: '突然高',

          value: 'sudden'

        },

        {

          label: '超过国控站点100%',

          value: 'state100'

        },

        {

          label: '超过国控站点150%',

          value: 'state150'

        },

        {

          label: '超过国控站点250%',

          value: 'state250'

        },

        {

          label: '超过市区均值100%',

          value: 'city100'

        },

        {

          label: '超过市区均值150%',

          value: 'city150'

        },

        {

          label: '超过市区均值250%',

          value: 'city250'

        }

      ],

      currentDate: '',

      turnImg: require('@/assets/images/regionalOverview/dropDown.png'),

      showOrHidden: true,

      dateFormat: '',

      alarmTableVisible: false,

      chooseTimeInfo: false, // 是否选择了时间点

      dateInfo: '', // 选择的日期

      timeInfo: '' // 选择的时间

    }

  },

  computed: {

    ...mapGetters(['regionCode'])

  },

  watch: {

    dateValue(n, o) {

      // console.log(n)

      // this.newDate()

    },

    regionCode(newCode, oldCode) {

      this.timerKey = newCode // 用于监听code变化重新渲染子组件

    }

  },

  mounted() {

    this.currentHour()

    this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)

    // 初始化地图容器

    this.initMap()



    // 事件代理

    this.eventProxy()

  },

  created() {

    const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度

    this.jingduNew = newLL[1]

    this.weiduNew = newLL[0]

    // 初始化风场数据

    this.windData()

    this.change(0)

    this.getParamsData()

    this.windDir()

    this.newDate()

    this.alertData(this.PageSize, this.currentPage)

  },

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer)

      // console.log('timer定时器销毁成功')

    }

    if (this.timer2) {

      // console.log(this.timer2)

      clearInterval(this.timer2)

      // console.log('timer2定时器销毁成功')

    }

    // 离开页面时关闭websocket

    if (this.ws) {

      // console.log('WS关闭')

      this.ws.close()

    }

  },

  methods: {

    // 拿到某天的日期和星期

    getDayXQ(day) {

      var days = new Date().getDay() // 星期

      var rq = '' // 日期

      if (day === 'today') {

        rq = this.newData(0)

      } else if (day === 'yesterday') {

        days = ((days + 7) - 1) % 7

        rq = this.newData(-1) // 昨天日期

      } else if (day === 'beforeYea') {

        days = ((days + 7) - 2) % 7

        rq = this.newData(-2) // 前天日期

      }

      switch (days) {

        case 1:

          days = '周一'

          break

        case 2:

          days = '周二'

          break

        case 3:

          days = '周三'

          break

        case 4:

          days = '周四'

          break

        case 5:

          days = '周五'

          break

        case 6:

          days = '周六'

          break

        case 0:

          days = '周日'

          break

      }

      return `${rq}(${days})`

    },

    // 计算当前天之前或者之后的日期

    newData(day) {

      var today = new Date()

      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

      today.setTime(targetday_milliseconds)

      var tMonth = today.getMonth() + 1

      tMonth = tMonth < 10 ? '0' + tMonth : tMonth

      var tDate = today.getDate()

      tDate = tDate < 10 ? '0' + tDate : tDate

      return tMonth + '/' + tDate

    },

    // 事件代理

    eventProxy() {

      // 拿到今天的日期和星期

      var ul = document.querySelector('#eventPro')

      var lis = document.querySelectorAll('#eventPro>li')

      var timeUl = document.querySelector('#timeUl')

      var timeLis = document.querySelectorAll('#timeUl>li')

      var mouseDiv = document.querySelector('.mouseDiv')

      var mouseDiv2 = document.querySelector('.mouseDiv2')

      var inText = document.querySelector('.inText')

      var inText2 = document.querySelector('.inText2')

      var p1 = document.querySelector('.p1')

      var p2 = document.querySelector('.p2')

      var p3 = document.querySelector('.p3')

      p3.innerHTML = this.getDayXQ('today')

      p2.innerHTML = this.getDayXQ('yesterday')

      p1.innerHTML = this.getDayXQ('beforeYea')

      var greenInfo = 0

      ul.onclick = (e) => {

        // 给所有的li颜色设为初始值

        for (let i = 0; i < lis.length; i++) {

          lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'

        }

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

          // var li = this.querySelectorAll('li')

          // var index = Array.prototype.indexOf.call(li, target)

          for (let i = 0; i < lis.length; i++) {

            lis[i].style.backgroundColor = 'green'

            if (lis[i] === target) {

              mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'

              mouseDiv2.style.display = 'block'

              var times = (i - 0 + 1) % 24

              times = times > 9 ? times : '0' + times

              inText2.innerHTML = times + ':00'

              this.chooseTimeInfo = true // 选择时间点

              if (i / 24 < 1) {

                console.log(111)

              } else if (i / 24 <= 2 && i / 24 > 1) {

                console.log(222)

              } else {

                console.log(333)

              }

              break

            }

          }

        }

      }

      // timeUl绑定点击事件

      timeUl.onclick = e => {

        // 给所有的li颜色设为初始值

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

          for (let i = 0; i < timeLis.length; i++) {

            if (timeLis[i] === target) {

              greenInfo = i

              mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'

              mouseDiv2.style.display = 'block'

              var times = i % 24

              times = times > 9 ? times : '0' + times

              inText2.innerHTML = times + ':00'

              break

            }

          }

          if (greenInfo !== 0) {

            for (let i = 0; i < lis.length; i++) {

              if (i < greenInfo) {

                lis[i].style.backgroundColor = 'green'

              } else {

                lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'

              }

            }

          }

          // console.log('下边点击进来了', greenInfo, 'index')

        }

      }

      // 鼠标移入移出事件

      for (let i = 0; i < lis.length; i++) {

        lis[i].onmouseenter = function() {

          // console.log('mouseenter', i)

          mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'

          mouseDiv.style.display = 'block'

          var times = (i - 0 + 1) % 24

          times = times > 9 ? times : '0' + times

          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        lis[i].onmouseleave = function() {

          mouseDiv.style.display = 'none'

          // console.log('移出事件', i)

        }

      }

      for (let i = 0; i < timeLis.length; i++) {

        timeLis[i].onmouseenter = function() {

          // console.log('mouseenter', i)

          mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'

          mouseDiv.style.display = 'block'

          var times = i % 24

          times = times > 9 ? times : '0' + times

          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        timeLis[i].onmouseleave = function() {

          mouseDiv.style.display = 'none'

          // console.log('移出事件', i)

        }

      }

    },

    // 当前小时默认值

    currentHour() {

      const aData = new Date()

      const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1

      const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1

      const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'

      this.dateFormat = currentDate.toString()

    },

    // 日期格式化

    newDate() {

      var aData = new Date()

      var month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1

      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      this.currentDate = aData.getFullYear() + '-' + month + '-' + date

      // console.log(this.currentDate)

      this.dateValue = [this.currentDate, this.currentDate]

    },

    // 报警弹窗移入

    mouseOver() {

      this.map.scrollWheelZoom.disable()

    },

    // 报警弹窗移出

    mouseLeave() {

      this.map.scrollWheelZoom.enable()

    },

    initWebpack() {

      // 拼写参数

      var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

      // 拼写URL

      var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

      this.ws = new WebSocket(socketUrl)

      this.ws.onopen = this.onopen

      this.ws.onmessage = this.onmessage

      this.ws.onclose = this.onclose

      this.ws.onerror = this.onerror

    },

    reconnect() { // 重新连接

      var that = this

      if (that.lockReconnect) {

        return

      }

      that.lockReconnect = true

      // 没连接上会一直重连，设置延迟避免请求过多

      that.timeoutnum && clearTimeout(that.timeoutnum)

      that.timeoutnum = setTimeout(function() {

        // 新连接

        that.initWebpack()

        that.lockReconnect = false

      }, 5000)

    },

    reset() { // 重置心跳

      var that = this

      // 清除时间

      clearTimeout(that.timeoutObj)

      clearTimeout(that.serverTimeoutObj)

      // 重启心跳

      that.start()

    },

    start() { // 开启心跳

      // console.log('开启心跳')

      var self = this

      self.timeoutObj && clearTimeout(self.timeoutObj)

      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)

      self.timeoutObj = setTimeout(function() {

        // 这里发送一个心跳，后端收到后，返回一个心跳消息，

        if (self.ws.readyState === 1) { // 如果连接正常

          self.ws.send('heartCheck')

        } else { // 否则重连

          self.reconnect()

        }

        self.serverTimeoutObj = setTimeout(function() {

          // 超时关闭

          self.ws.close()

        }, self.timeout)

      }, self.timeout)

    },

    onopen() {

      // console.log('连接开启')

      // 开启心跳

      this.start()

    },

    onmessage(msg) {

      var that = this

      if (JSON.parse(msg.data).名称) {

        that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

      } else {

        that.wsData1 = msg.data

        if (that.windState === 2) {

          for (let i = 0; i < that.keyData.length; i++) {

            // 更新风向标

            // 遍历出(通过mac匹配)要更新的风向标

            if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

              var blueIcon1 = L.icon({ // 设置图标样式

                iconUrl: require('@/assets/images/icoWind03.png'),

                iconSize: [30, 30],

                iconAnchor: [15, 25],

                className: 'iconWind'

              })

              // L.marker用来在地图中放置注记

              that.marker = L.marker([that.lats[i], that.lngs[i]], {

                icon: blueIcon1,

                rotationAngle: Number(JSON.parse(that.wsData1).风向)

              })

              if (i === 0) {

                that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

                that.map.addLayer(that.marker)

              } else {

                that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

                for (let j = 0; j < that.markerObject.length; j++) {

                  if (that.coordinates[0] === that.markerObject[j].mac1) {

                    that.map.removeLayer(that.markerObject[j].marker)

                    that.map.addLayer(that.marker)

                  } else if (that.coordinates[i] === that.markerObject[j].mac1) {

                    that.map.removeLayer(that.markerObject[j].marker)

                    that.map.addLayer(that.marker)

                  }

                }

              }

            }

          }

        }

      }

      // 收到服务器信息，心跳重置

      this.reset()

    },

    onclose(e) {

      // console.log('连接关闭')

      // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)

      // 重连

      this.reconnect()

    },

    onerror(e) {

      console.log('出现错误')

      // 重连

      this.reconnect()

    },

    // ws方法

    wsStart() {

      var that = this

      // 拼写参数

      var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

      // 拼写URL

      var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

      // 替换http为WS

      //   console.log(socketUrl)

      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

      this.ws = new WebSocket(socketUrl)

      // if (this.ws) {

      //   this.ws.close()

      //   console.log('ws心跳关闭')

      // }

      // this.ws = new WebSocket(socketUrl)

      // console.log('ws心跳开启')



      this.ws.onopen = function() {

        // console.log('websocket开启成功')

      }

      // 获得消息事件

      this.ws.onmessage = function(msg) {

        if (JSON.parse(msg.data).名称) {

          that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

          //   console.log(that.wsData2)

        } else {

          that.wsData1 = msg.data

          //   console.log(that.wsData1)

          if (that.windState === 2) {

            for (let i = 0; i < that.keyData.length; i++) {

              // 更新风向标

              // 遍历出(通过mac匹配)要更新的风向标

              if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

                var blueIcon1 = L.icon({

                  iconUrl: require('@/assets/images/icoWind03.png'),

                  iconSize: [30, 30],

                  iconAnchor: [15, 25],

                  className: 'iconWind'

                })

                that.marker = L.marker([that.lats[i], that.lngs[i]], {

                  icon: blueIcon1,

                  rotationAngle: Number(JSON.parse(that.wsData1).风向)

                })

                if (i === 0) {

                  that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

                  that.map.addLayer(that.marker)

                } else {

                  that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

                  for (let j = 0; j < that.markerObject.length; j++) {

                    if (that.coordinates[0] === that.markerObject[j].mac1) {

                      that.map.removeLayer(that.markerObject[j].marker)

                      that.map.addLayer(that.marker)

                    } else if (that.coordinates[i] === that.markerObject[j].mac1) {

                      that.map.removeLayer(that.markerObject[j].marker)

                      that.map.addLayer(that.marker)

                    }

                  }

                }

              }

            }

          }

        }

      }

    },

    // 百度经纬度转高德经纬度

    bd09togcj02(bd_lon, bd_lat) {

      var x_pi = 3.14159265358979324 * 3000.0 / 180.0

      var x = bd_lon - 0.0065

      var y = bd_lat - 0.006

      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)

      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)

      var gg_lng = z * Math.cos(theta)

      var gg_lat = z * Math.sin(theta)

      return [gg_lat, gg_lng]

    },

    // /**

    //  * GCJ02 转换为 WGS84

    //  * @param lng

    //  * @param lat

    //  * @returns {*[]}

    //  */

    // gcj02towgs84(lng, lat) {

    //   if (this.out_of_china(lng, lat)) {

    //     return [lat,lng]

    //   } else {

    //     var dlat = this.transformlat(lng - 105.0, lat - 35.0);

    //     var dlng = this.transformlng(lng - 105.0, lat - 35.0);

    //     var radlat = lat / 180.0 * PI;

    //     var magic = Math.sin(radlat);

    //     magic = 1 - ee * magic * magic;

    //     var sqrtmagic = Math.sqrt(magic);

    //     dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

    //     dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

    //     var mglat = lat + dlat;

    //     var mglng = lng + dlng;

    //     return [ lat * 2 - mglat,lng * 2 - mglng]

    //   }

    // },

    //

    // transformlat(lng, lat) {

    //   var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;

    //   return ret

    // },

    // transformlng(lng, lat) {

    //   var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;

    //   return ret

    // },

    // /**

    //  * 判断是否在国内，不在国内则不做偏移

    //  * @param lng

    //  * @param lat

    //  * @returns {boolean}

    //  */

    // out_of_china(lng, lat) {

    //   return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);

    // },

    // 请求设备坐标,当前的

    deviceMaker() {

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

            layer.remove()

          }

        })

      }

      const that = this

      this.$request({

        url: '/historyFiveMinutely/queryDeviceAndData',

        method: 'get',

        params: {

          sensorCode: this.sensorKey,

          organizationId: this.$store.state.orgId,

          regionCode: this.$store.state.regionCode

        }

      }).then((data) => {

        // console.log('五分钟设备数据')

        // console.log(data)

        that.loading = false

        this.markDeviceSite(data)

      })

    },

    // 标记设备点

    markDeviceSite(data) {

      // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]

      // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]

      var keyData = data.data.devices

      this.keyData = data.data.devices

      // 遍历国控站位置

      this.stateControlStation()

      var group = L.layerGroup().addTo(this.map)

      this.keys = []

      for (let i = 0; i < keyData.length; i++) {

        if (keyData[i].a34002) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))

        } else if (keyData[i].a34004) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))

        } else if (keyData[i].a21026) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))

        } else if (keyData[i].a21004) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))

        } else if (keyData[i].a21005) {

          this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))

        } else if (keyData[i].a05024) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))

        } else if (keyData[i].a99054) {

          this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))

        } else {

          // for (let j = 0; j < keyData.length; j++) {

          this.keys.push(JSON.parse('null'))

          // }

        }

        // console.log(this.keys)

        var lat = keyData[i].latitude

        this.lats[i] = keyData[i].latitude

        var lng = keyData[i].longitude

        this.lngs[i] = keyData[i].longitude

        // 对比各个key中的标准数据，标记展示不同的颜色

        var colorNum = 7

        if (keyData[i].a34002) {

          var data = Math.floor(JSON.parse(keyData[i].a34002))

          switch (true) {

            case (data < 0): {

              colorNum = 7

              break

            }

            case (data === 0): {

              colorNum = 0

              break

            }

            case (data <= 50): {

              colorNum = 1

              break

            }

            case (data <= 150): {

              colorNum = 2

              break

            }

            case (data <= 250): {

              colorNum = 3

              break

            }

            case (data <= 350): {

              colorNum = 4

              break

            }

            case (data <= 420): {

              colorNum = 5

              break

            }

            case (data > 420): {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a34004) {

          var data = Math.floor(JSON.parse(keyData[i].a34004))

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 35: {

              colorNum = 1

              break

            }

            case data <= 75: {

              colorNum = 2

              break

            }

            case data <= 115: {

              colorNum = 3

              break

            }

            case data <= 150: {

              colorNum = 4

              break

            }

            case data <= 250: {

              colorNum = 5

              break

            }

            case data > 250: {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a21026) {

          var data = Math.floor(JSON.parse(keyData[i].a21026))

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 50: {

              colorNum = 1

              break

            }

            case data <= 150: {

              colorNum = 2

              break

            }

            case data <= 475: {

              colorNum = 3

              break

            }

            case data <= 800: {

              colorNum = 4

              break

            }

            case data <= 1600: {

              colorNum = 5

              break

            }

            case data > 1600: {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a21004) {

          var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 40: {

              colorNum = 1

              break

            }

            case data <= 80: {

              colorNum = 2

              break

            }

            case data <= 180: {

              colorNum = 3

              break

            }

            case data <= 280: {

              colorNum = 4

              break

            }

            case data <= 565: {

              colorNum = 5

              break

            }

            case data > 565: {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a21005) {

          var data = JSON.parse(keyData[i].a21005).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 2: {

              colorNum = 1

              break

            }

            case data <= 4: {

              colorNum = 2

              break

            }

            case data <= 14: {

              colorNum = 3

              break

            }

            case data <= 24: {

              colorNum = 4

              break

            }

            case data <= 36: {

              colorNum = 5

              break

            }

            case data > 36: {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a05024) {

          var data = Math.floor(JSON.parse(keyData[i].a05024))

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 160: {

              colorNum = 1

              break

            }

            case data <= 200: {

              colorNum = 2

              break

            }

            case data <= 300: {

              colorNum = 3

              break

            }

            case data <= 400: {

              colorNum = 4

              break

            }

            case data <= 800: {

              colorNum = 5

              break

            }

            case data > 800: {

              colorNum = 6

              break

            }

            default:

              break

          }

        } else if (keyData[i].a99054) {

          var data = JSON.parse(keyData[i].a99054).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

              break

            }

            case data === 0: {

              colorNum = 0

              break

            }

            case data <= 0.5: {

              colorNum = 1

              break

            }

            case data <= 1: {

              colorNum = 2

              break

            }

            case data <= 1.5: {

              colorNum = 3

              break

            }

            case data <= 2: {

              colorNum = 4

              break

            }

            case data <= 3: {

              colorNum = 5

              break

            }

            case data > 3: {

              colorNum = 6

              break

            }

              // default:

              //   break

          }

        }



        var blueIcon = L.icon({

          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

          // iconUrl: require('@/assets/icon/ico2.png'),

          iconSize: [60, 60],

          iconAnchor: [13, 21],

          className: 'my-device'

        })

        // 添加标记到地图

        L.marker([lat, lng], {

          icon: blueIcon

        }).addTo(group)

        // console.log(JSON.parse(this.keys[i]))

        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: 30

        })

        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)

        // 给标记添加鼠标移入事件，mouseover事件会冒泡

        var _this = this

        marker.on('mouseover', function(e) {

          this.noneData = false

          // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {

          //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')

          //   // console.log(data)

          //   this.bindPopup(data).openPopup()

          // })

          _this.$request({

            url: '/historyFiveMinutely/queryPopDataByMac',

            method: 'get',

            params: {

              mac: keyData[i].mac

            }

          }).then((res) => {

            for (const key in res.data) {

              var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]

              if (key !== '名称' && key !== '时间') {

                if (Number(tempDecimal) === 0) {

                  res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]

                } else {

                  res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]

                }

                // var num = res.data[key].split(' ')[0]

                // res.data[key] = (num - 0).toFixed(3)

              }

            }

            var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')

            this.bindPopup(data).openPopup()

          }).catch((err) => {

            console.log(err)

          })

        })

        // 给标记点添加鼠标移出事件

        marker.on('mouseout', function(e) {

          this.noneData = false

          this.bindPopup().closePopup()

        })

      }

    },

    // 给标记点添加移入移出事件

    // moveInAndOut() {

    //

    // },

    // 国控站经纬度

    stateControlStation() {

      // this.$axios.get('monitorPoint/queryStateControlStation', {

      this.$request({

        url: '/govMonitorPoint/queryStateControlStation',

        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

        }

      }).then(res => {

        // console.log('国控站信息')

        // console.log(res)

        var gkData = res.data

        var group = L.layerGroup().addTo(this.map)

        for (let i = 0; i < gkData.length; i++) {

          var glat = gkData[i].latitude

          var glng = gkData[i].longitude

          var gIcon = L.icon({

            iconUrl: require('@/assets/icon/gk.png'),

            // iconUrl:require('@/assets/images/tl_PM10.png'),

            iconSize: [55, 55],

            iconAnchor: [13, 21],

            className: 'my-device'

          })

          // 添加标记到地图

          L.marker([glat, glng], {

            icon: gIcon

          }).addTo(group)

          var myIcon = L.divIcon({

            html: gkData[i].data,

            className: 'my-div-icon-g',

            iconSize: 30

          })

          L.marker([glat, glng], {

            icon: myIcon

          }).addTo(group)

        }

      }).catch(err => {

        console.log(err)

      })

    },

    // 切换风场风向状态

    toggleWindState() {

      if (this.ws) {

        this.ws.close()

      }

      if (this.windState === 2) {

        this.windState = 1

        this.windStateText = '风场图'

        this.initData()

        // console.log(this.windState)

      } else if (this.windState === 1) {

        this.windState = 2

        this.windStateText = '风向标'

        this.windDir()

        // console.log(this.windState)

      }

    },

    // 请求风向标

    windDir() {

      // console.log('加载风向')

      //   console.log('风向标ws请求开始')

      // const that = this

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

            layer.remove()

          }

        })

      }

      // 执行生成设备点方法

      this.deviceMaker()

      // 执行ws方法

      // this.wsStart()

      this.initWebpack()

      // console.log('这是ws需要的三个参数')

      // console.log(this.accountId, this.orgId, this.regionCode)

      // this.timer2 = setInterval(() => {

      //   if (this.ws) {

      //     this.ws.close()

      //     console.log('ws心跳关闭')

      //   }

      //   // 执行ws方法

      //   this.wsStart()

      //   console.log('ws心跳开启')

      // }, 60000)

    },

    // 获得父组件改变regionCode子组件请求api功能

    getRegionApiRequest() {

      // console.log(this.$store.state.regionCode)

      // this.ws.close()

      // console.log('ws关闭')

      // 请求更新风场数据

      this.getParamsData()

      setTimeout(() => {

        $.getJSON('http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea', { 'monitorPointId': this.$store.state.monitorPointId }, (data) => {

          // 遍历所有图层

          //   console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')

          //   console.log(data)

          // this.map.eachLayer(function(layer) {

          // // 卸载之前的风场图层

          //   if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

          //     layer.remove()

          //   }

          // })

          this.map.setView([data[2], data[1]], 12)

          //   console.log('跳转成功')

        })

      }, 1000)

      if (this.windState === 1) {

        // this.ws.close()

        this.initData()

        // console.log('请求风场图')

      } else if (this.windState === 2) {

        this.windDir()

        // console.log('请求风向标')

      }

      // 请求设备坐标

      // this.deviceMaker()

      // this.getParamsData()

    },

    // 子组件地图的跳转中心点方法

    jumpMap(LngLat) {

      // console.log('我是子组件方法')

      // console.log(this.jumpData)

      // console.log(LngLat)

      this.map.setView(LngLat, 18)

    },

    // 请求更新风场数据

    getParamsData() {

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.times--

        if (this.times === 0) {

          // 时间点选择标记消失

          var mouseDiv2 = document.querySelector('.mouseDiv2')

          mouseDiv2.style.display = 'none'

          // clearInterval(this.timer)

          if (this.windState === 1) {

            // this.ws.close()

            this.initData()

            // console.log('请求风场图')

          } else if (this.windState === 2) {

            this.windDir()

            // console.log('请求风向标')

          }

          setTimeout(() => {

            this.change(this.changeColor)

            this.times = 300

          }, 100)

        }

      }, 1000)

    },

    // 初始化地图容器

    initMap() {

      //   console.log('这是index传到map的经纬度')

      //   console.log(this.weidu)

      //   console.log(this.jingdu)

      var map = L.map('mapContent', {

        minZoom: 2,

        maxZoom: 18,

        center: [this.weiduNew, this.jingduNew],

        zoom: 14,

        zoomControl: false, // 缩放组件

        attributionControl: false, // 去掉右下角logol

        crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

      })

      // 定义图层样式

      L.tileLayer('https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)

      // L.tileLayer(

      //   'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'

      // ).addTo(map)

      this.map = map // data上需要挂载

      window.map = map

    },

    // 更改不同的值区间

    change(index) {

      this.changeColor = index

      var pr = ''

      switch (index) {

        case 0: pr = 'a34002'

          this.bg = require('@/assets/images/tl_PM10.png')

          break

        case 1: pr = 'a34004'

          this.bg = require('@/assets/images/tl_PM2.5.png')

          break

        case 2: pr = 'a21026'

          this.bg = require('@/assets/images/tl_SO2.png')

          break

        case 3: pr = 'a21004'

          this.bg = require('@/assets/images/tl_NO2.png')

          break

        case 4: pr = 'a21005'

          this.bg = require('@/assets/images/tl_CO.png')

          break

        case 5: pr = 'a05024'

          this.bg = require('@/assets/images/tl_O3.png')

          break

        case 6: pr = 'a99054'

          this.bg = require('@/assets/images/tl_TVOCNew.png')

          break

      }

      this.sensorKey = pr

      // 请求设备坐标

      // this.toggleWindState()

      if (this.windState === 1) {

        this.initData()

      } else if (this.windState === 2) {

        this.windDir()

      }

    },

    // 请求风场图接口

    initData() {

      // console.log('加载风场')

      // const that = this

      // 请求更新风场数据

      //   console.log(this.monitorPointId)

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

            layer.remove()

          }

        })

      }

      this.deviceMaker()

      //   console.log('请求风场之前')

      // $.ajaxSettings.async = false

      // for (let i = 0; i < this.monitorPointIds.length; i++) {

      this.windData()

      // }

    },

    // 风场图数据

    windData() {

      this.$request({

        url: '/monitorPoint/getWindData',

        method: 'get',

        params: {

          monitorPointIds: JSON.stringify(this.monitorPointIds[0])

        }

      }).then(res => {

        // console.log('新风场数据')

        // console.log(res)

        // if (res.data[0][0].data.length === 0) {

        //   this.noneData = true

        // }

        // 生成风场实例

        // var data2 = res.data[0]

        // data2[1].header.parameterNumberName = 'northward_wind'

        // data2[0].header.parameterUnit = 'm.s-1'

        // data2[1].header.parameterUnit = 'm.s-1'

        // data2[0].header.dx = 0.00234842479

        // data2[1].header.dx = 0.00234842479

        // data2[0].header.dy = 0.0018464922

        // data2[1].header.dy = 0.0018464922

        // console.log(data2, 'data2')

        var velocityLayer = L.velocityLayer({

          displayValues: false, // 是否显示当前鼠标移动位置，风场信息

          displayOptions: {// 显示信息配置

            // velocityType: 'Global Wind',

            velocityType: 'GBR Wind',

            displayPosition: 'bottomleft',

            displayEmptyString: 'No wind data'

          },

          data: res.data[0], // 数据  格式可参照

          // data: data2,

          // 以下为控制参数，后面为默认值

          minVelocity: 0, // 粒子最小速度（ m/s ）

          maxVelocity: 8, // 粒子最大速度（ m/s ）

          velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )

          particleAge: 90, // 粒子在再生之前绘制的最大帧数

          lineWidth: 1.5, // 绘制粒子的线宽

          particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）

          frameRate: 15, // 每秒所需的帧数

          colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']

          // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

        })

        velocityLayer.addTo(this.map)// 添加到图上

        // console.log('风场数据')

        // console.log(res.data[0])

      }).catch(err => {

        console.log(err)

      })

    },

    // 将页码，及每页显示的条数以参数传递提交给后台

    alertData(n1, n2) {

      // 这里使用axios，使用时请提前引入

      this.$request({

        url: '/alarmInfo/getDataByConditionWithoutPage',

        method: 'get',

        params: {

          organization_id: this.$store.state.orgId,

          // 每页显示的条数

          // size: n1,

          // 显示第几页

          // current: n2,

          startTime: this.dateValue[0],

          endTime: this.dateValue[1],

          index: this.factorValue,

          alarmType: this.alartValue

        }

      })

        .then(res => {

          // console.log('分页数据')

          // console.log(res)

          var tempData = res.data

          // console.log(tempData)

          for (let i = 0; i < tempData.alarmInfos.length; i++) {

            tempData.alarmInfos[i].alarmInfoId = i + 1

          }

          // 将数据赋值给tableData

          this.gridData = tempData.alarmInfos

          // 将数据的长度赋值给totalCount

          this.totalCount = tempData.alarmInfos.length

        })

    },

    // 分页

    // 每页显示的条数

    handleSizeChange(val) {

      // 改变每页显示的条数

      this.PageSize = val

      // 注意：在改变每页显示的条数时，要将页码显示到第一页

      this.currentPage = 1

    },

    // 显示第几页

    handleCurrentChange(val) {

      // 改变默认的页数

      this.currentPage = val

      // console.log(val)

    },

    // 单元格样式

    tableCellClassName({ row, column, rowIndex, columnIndex }) {

      for (const key in row) {

        if (key === column.property) {

          const code = column.property

          if (code === 'alarm_type') {

            // console.log(row[key])

            if (row[key] === 0 || row[key] === '' || row[key] === null) {

              return ''

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) {

              return 'yellow'

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) {

              return 'orange'

            } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) {

              return 'red'

            }

          }

        }

      }

      return ''

    },

    turnState() {

      // console.log(this.showOrHidden)

      if (this.showOrHidden === true) {

        this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')

      } else {

        this.turnImg = require('@/assets/images/regionalOverview/putAway.png')

      }

      this.showOrHidden = !this.showOrHidden

    },

    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    }



  }

}

</script>



<style lang="scss">

html,

body,

#mapContent {

  width: 100%;

  height: 100%;

}

// .topSelect{

//     display: flex;

//     margin-bottom: 20px;

//     padding: 20px 15px 0 15px;

//     display: flex;

//     justify-content: space-between;

//     span:first-child{

//         flex: 1;

//     }

// }

.noneData {

  position: absolute;

  color: #000;

  background: #fff;

  z-index: 999;

  left: 50%;

  top: 50%;

  transform: translate(-50%);

  padding: 20px 50px;

  /* opacity: 0.5; */

  font-size: 28px;

  /* border-radius: 10px; */

  border: 2px solid #ff7f50;

}

.topDate {

  position: absolute;

  top: 50px;

  width: 100%;

  padding: 15px 10px 3px 10px;

  z-index: 999;

  //background: #ccc;

  background: rgba(204, 204, 204, 0.8);

  box-shadow: 1px 1px 5px #666;

  cursor: pointer;

}

.mouseDiv, .mouseDiv2{

  position: absolute;

  left: 0;

  background-color: #009845;

  width: 36px;

  height: 22px;

  border-radius: 5px;

  top: -34px;

  display: none;

  text-align: center;

  line-height: 22px;

  padding: 1px;

  color: white;

}

.sjDiv, .sjDiv2{

  width: 0px;

  height: 0px;

  border: 10px solid transparent;

  border-top-color: #009845;

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

  top: 100%;

  z-index: -1;

}

.mouseDiv2{

  background-color: #2b2b2b;

}

.sjDiv2{

  border-top-color: #2b2b2b;

}

.jdt{

  height: 5px;

  width: 73%;

  display: flex;

  position: relative;

}

.timeDiv{

  width: 73%;

  float: left;

}

.topDate .timeDiv:nth-child(3){

  border-left: 1px solid white;

  border-right: 1px solid white;

}

.topDate ul{

  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;

}

.topDate li{

  width: 1.36986%;

  //padding: 0 2%;

  box-sizing: border-box;

  //transform: translateX(50%);

}

.topDate p{

  text-align: center;

  font-size: 16px;

  margin: 0;

  padding: 0;

}

.jdt li{

  //box-sizing: border-box;

  border-left: 1px solid white;

  background-color: rgba(0,0,0,0.3);

  height: 100%;

  width: 1.36986%;

  list-style: none;

}

.dayDiv p{

  width: 32.87664%;

  text-align: center;

}

.top {

  position: absolute;

  top: 0px;

  width: 100%;

  padding: 5px 10px;

  z-index: 999;

  /* background: #ccc; */

  background: rgba(204, 204, 204, 0.5);

  //box-shadow: 1px 1px 5px #666;

}

.top > .left {

  padding: 5px 10px;

  border: 1px solid #aaa;

  border-right: none;

  background: #fff;

  /* border-radius: 3px; */

  cursor: pointer;

  font-size: 16px;

  float: left;

  margin-top: 4px;

  -webkit-transform-origin-x: 0;

  /* -webkit-transform: scale(0.90); */

}

.top > .left:nth-child(1) {

  border-radius: 5px 0 0 5px;

}

.top > .left:nth-last-child(2) {

  border-radius: 0 5px 5px 0;

  border-right: 1px solid #aaa;

}

.top > .left:hover {

  background: #666;

  color: #fff;

}

.click {

  color: #fff;

  background-color: #666 !important;

}

.top > .right {

  position: fixed;

  right: 410px;

  top: 55px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: green;

  color: #fff;

  float: right;

  line-height: 40px;

  text-align: center;

  border: 1px solid #333;

  opacity: 0.7;

}



.top > .dropDown {

  width: 400px;

  height: 51px;

  line-height: 51px;

  text-align: center;

  color: #fff;

  font-size: 18px;

  position: fixed;

  right: 0;

  top: 50px;

  background-color:  rgba(15, 69, 103, 0.8);

}

.dropDown > .drop-icon {

  vertical-align: middle;

  width: 24px;

  position: relative;

  left: 14px;

  top: -2px;

}

.realTime_top {

  width: 120px;

  float: left;

  margin-top: 9px;

  margin-left: 10px;

}



.text_Time {

  float: left;

  margin-left: 37px;

}

.my-div-icon {

  font-size: 14px;

  text-align: center;

  padding-left: 20px;

  padding-top: 6px;

  font-family: '微软雅黑';

  z-index: 10003;

  /* -webkit-transform-origin-x: 0; */

  /* -webkit-transform: scale(0.90); */

}

.my-div-icon-g {

  font-size: 14px;

  text-align: center;

  padding-left: 20px;

  padding-top: 11px;

  font-family: '微软雅黑';

  z-index: 10003;

  /* -webkit-transform-origin-x: 0; */

  /* -webkit-transform: scale(0.90); */

}

.iconWind {

  z-index: 10002;

}

.my-device {

  z-index: 999;

}

.windDir-icon {

  z-index: 10001;

  margin-top: 20px;

  /* padding-left: 10px; */

  /* padding-top: 30px; */

}

.leaflet-popup-content {

  width: 235px !important;

  font-size: 12px;

  -webkit-transform-origin-x: 0;

  z-index: 1000;

  /* -webkit-transform: scale(0.90); */

  /* font-family: ui-serif; */

}

.buttom-left {

  /* background-image: url("@/assets/images/tl_PM10.png"); */

  position: absolute;

  bottom: 10px;

  left: 10px;

  width: 435px;

  height: 36px;

  z-index: 999;

  border-radius: 3px;

}

.middle {

  padding: 5px 10px;

  border: 1px solid #aaa;

  background: #fff;

  border-radius: 3px;

  cursor: pointer;

  font-size: 16px;

  float: left;

  margin-top: 4px;

  -webkit-transform-origin-x: 0;

  margin-left: 20px;

}

.el-dialog__body{

  padding: 10px 20px;

}

.el-dialog__footer{

  padding: 0px 20px 15px;

}

.yellow{

  background-color: #ffff00!important;

  color: #868600!important;

}

.orange{

  background-color: #ff7e00!important;

  color: #844100!important;

}

.red{

  background-color: #ff0000!important;

  color: #790000!important;

}

</style>


 src/router/dynamicRouter.js

@@ -62,7 +62,7 @@
const averageContrast = {
  path: 'charts/averageContrast',
  name: 'averageContrast',
  component: () => import('@/views/averageContrast/index'), 
  component: () => import('@/views/averageContrast/index'),
  meta: { title: '监测因子均值对比', icon: 'example' }
}

@@ -115,7 +115,7 @@
}
// 综合分析
// 城市空气质量排行
const cityAirRank = { 
const cityAirRank = {
  path: 'analyse/cityAirRank',
  name: 'cityAirRank',
  component: () => import('@/views/cityAirRank/index'),
@@ -176,7 +176,6 @@
  component: () => import('@/views/dailyreport/index'),
  meta: { title: '走航监测日报', icon: 'example' }
}



// 映射路由，存入对象

 src/utils/exportUAVImage.js

New file
@@ -0,0 +1,151 @@
// exportUAVImage.js

import Docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import JSZipUtils from 'jszip-utils'

import { saveAs } from 'file-saver'

import { imageToBase64 } from '@/utils/imageExchange'



let base64Img = ''

export const exportUAVImage = (tempDocxPath, data, fileName) => {

  const ImageModule = require('docxtemplater-image-module-free')

  // 读取并获得模板文件的二进制内容

  JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {

    if (error) {

      throw error

    }

    // 图片处理

    const opts = {}

    opts.centered = true // 图片居中，在word模板中定义方式为{%%image}

    opts.fileType = 'docx'



    const p = new Promise(resolve => {

      // const images1 = []

      const images1 = {

        fileListOne: [],

        fileListTwo: [],

        fileListThree: [],

        o3Map: [],

        o3Sence: [],

        pm10Map: [],

        pm10Sence: [],

        so2Map: [],

        so2Sence: [],

        no2Map: [],

        no2Sence: [],

        coMap: [],

        coSence: [],

        tvocMap: [],

        tvocSence: [],

        pm25Map: [],

        pm25Sence: [],

      }

      if (data.index !== 0) {

        var num = 0

        for (let j = 0; j < data.fileLists.length; j++) {

          if (data.fileLists[j]) {

            data.fileLists[j].forEach(image => {

              main(image, (base64) => {

                // var src = `src${j + 1}`

                // images1.push({ [src]: base64 })

                if (j === 0) {

                  images1.fileListOne.push({ src: base64 })

                } else if (j === 1) {

                  images1.fileListTwo.push({ src: base64 })

                } else if (j === 2) {

                  images1.fileListThree.push({ src: base64 })

                } else if (j === 3) {

                  images1.o3Map.push({ src: base64 })

                } else if (j === 4) {

                  images1.o3Sence.push({ src: base64 })

                } else if (j === 5) {

                  images1.pm10Map.push({ src: base64 })

                } else if (j === 6) {

                  images1.pm10Sence.push({ src: base64 })

                } else if (j === 7) {

                  images1.so2Map.push({ src: base64 })

                } else if (j === 8) {

                  images1.so2Sence.push({ src: base64 })

                }

                num = num + 1

                if (num === data.index) {

                  resolve(images1)

                }

              })

            })

          }

        }

      } else {

        resolve(images1)

      }

    })

    p.then(res => {

      opts.getImage = function(image) {

        return base64DataURLToArrayBuffer(image)

      }

      opts.getSize = function() {

        return [480, 300]

      }



      const imageModule = new ImageModule(opts)



      const zip = new PizZip(content)

      const doc = new Docxtemplater().loadZip(zip)

      doc.attachModule(imageModule)

      const obj = { ...data, ...res }

      console.log(obj)

      doc.setData({ ...obj })

      try {

        // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)

        doc.render()

      } catch (error) {

        const e = {

          message: error.message,

          name: error.name,

          stack: error.stack,

          properties: error.properties

        }

        console.log({

          error: e

        })

        // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).

        throw error

      }

      const out = doc.getZip().generate({

        type: 'blob',

        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

      }) // Output the document using Data-URI

      saveAs(out, fileName)

    })

  })

}



function base64DataURLToArrayBuffer(dataURL) {

  const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/

  if (!base64Regex.test(dataURL)) {

    return false

  }

  const stringBase64 = dataURL.replace(base64Regex, '')

  let binaryString

  if (typeof window !== 'undefined') {

    binaryString = window.atob(stringBase64)

  } else {

    binaryString = new Buffer(stringBase64, 'base64').toString('binary')

  }

  const len = binaryString.length

  const bytes = new Uint8Array(len)

  for (let i = 0; i < len; i++) {

    const ascii = binaryString.charCodeAt(i)

    bytes[i] = ascii

  }

  return bytes.buffer

}



function main(url, cb) {

  var image = new Image()

  image.crossOrigin = ''

  image.src = url

  image.onload = function() {

    base64Img = imageToBase64(image)

    cb && cb(base64Img)

  }

}


 src/utils/request.js

@@ -7,6 +7,7 @@
// const baseUrl = 'http://192.168.0.33:8081/' // yy
// const baseUrl = 'http://192.168.0.25:8081' // jj
// const baseUrl = 'http://192.168.0.33:8085/'// swb
// const baseUrl = 'http://192.168.0.33:8081/' // new swb
// const baseUrl = 'http://121.43.179.139:8080'
// const baseUrl = 'http://192.168.0.33:8085/'
// const baseUrl = 'http://192.168.0.33:8081/'

 src/views/O3/index.vue

@@ -263,8 +263,9 @@
      this.o38hDataYuce = []
      this.o38hDataShice = []
      this.goodValue = []
      axios1({
      axios1({ // this.$request
        url: '/screen_api_v2/screen/weatherData',
        // url: 'test/weatherData',
        method: 'get',
        params: {
          city: this.inputCity,

 src/views/air/index.vue

@@ -155,9 +155,8 @@
        <div slot="tip" class="el-upload__tip">上传数据</div>
      </el-upload>-->
<!--      <div style="position: absolute; bottom: 2%; right: 20%">-->
      <div style="position: absolute; right: 20%">
      <div style="position: absolute; right: 20%;padding-top: 20px;">
        <el-button v-if="value==='gx'" type="success" @click="submitUpload" size="small">提交文件</el-button>
<!--        <el-button type="primary" @click="exportReport" size="small">下载报告</el-button>-->
      </div>
    </div>
    <div class="exDown">
@@ -357,7 +356,7 @@
    // 上传
    handleChange(file, fileList) {
      if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        this.$refs.upload.handleRemove(file)
        this.$refs.upload1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
@@ -487,7 +486,7 @@
          if (res.code === 0) {
            var reportInfo = res.data
            this.value2 = [this.value3, this.value3]
            reportInfo.name = '高新区空气质量分析报告' + reportInfo.time.split('-').join('')
            reportInfo.name = '高新区空气质量研判总结报告' + reportInfo.time.split('-').join('')
            this.tableData = [reportInfo]
          }
        }).catch(err => {
@@ -644,9 +643,9 @@
        // 苏州市区放最后
        getData.list1 = this.cityLast(getData.list1)
        getData.list5 = this.cityLast(getData.list5)
        // 高新区放最前边
        getData.list2 = this.cityFirst(getData.list2)
        getData.list3 = this.cityFirst(getData.list3)
        // 高新区/国控站放最前边
        getData.list2 = this.cityFirst2(getData.list2)
        getData.list3 = this.cityFirst2(getData.list3)
        getData.list4 = this.cityFirst(getData.list4)
        this.airData = getData
        var monthZero = res.data.time.split('月')[0]
@@ -698,7 +697,9 @@
          list.splice(i, 1)
        }
      })
      list.push(obj)
      if (obj.place) {
        list.push(obj)
      }
      return list
    },
    // 高新区放最前边
@@ -710,7 +711,27 @@
          list.splice(i, 1)
        }
      })
      list.unshift(obj)
      if (obj.place) {
        list.unshift(obj)
      }
      return list
    },
    // 第二个和第三个表格是国控站/高新区
    cityFirst2(list) {
      var obj = {}
      list.map((v, i) => {
        if (v.place === '国控站') {
          obj = v
          list.splice(i, 1)
        }
        if (v.place === '高新区') {
          obj = v
          list.splice(i, 1)
        }
      })
      if (obj.place) {
        list.unshift(obj)
      }
      return list
    },
    // 浑南区报告下载
@@ -759,7 +780,7 @@
        var code2 = res.data.code2.substr(0, 2) + '\n' + res.data.code2.substr(2)
        var code4 = res.data.code4.substr(0, 2) + '\n' + res.data.code4.substr(2)
        var table1Data = [['', '目标值', '进度', '进度', '同比'], ['', '', '', '', ''], ['优良天', '300', res.data.code1, '', code2], ['', '', '', '', ''], ['PM2.5', '41', res.data.code3, '', code4], ['', '', '', '', '']]
        var table3Data = [['', '目标值', '目标值', '进度', '进度'], ['', '目标值', '目标值', '进度', '进度'], ['优良天', '80', '80', res.data.code5, ''], ['', '', '', '', ''], ['PM2.5', '23', '23', res.data.code6, ''], ['', '', '', '', '']]
        var table3Data = [['', '目标值', '目标值', '进度', '进度'], ['', '目标值', '目标值', '进度', '进度'], ['优良天', '69', '69', res.data.code5, ''], ['', '', '', '', ''], ['PM2.5', '40', '40', res.data.code6, ''], ['', '', '', '', '']]
        var table2Data = [
          res.data.list.sy1,
          res.data.list.sy2,
@@ -777,160 +798,6 @@
      }).catch(err => {
        console.log(err)
      })
    },
    // 导出报告
    exportReport() {
      // 导出excel报告
      // table1的数据：
      /* var table1Data = [['', '目标值', '进度', '进度', '同比'], ['', '', '', '', ''], ['优良天', '300', '215', '', '增加\n11天'], ['', '', '', '', ''], ['PM2.5', '41', '33', '33', '改善\n20.7%'], ['', '', '', '', '']]
      var table3Data = [['', '目标值', '目标值', '进度', '进度'], ['', '目标值', '目标值', '进度', '进度'], ['优良天', '80', '80', '61', '61'], ['', '', '', '', ''], ['PM2.5', '23', '23', '18', '18'], ['', '', '', '', '']]
      var table2Data = [
        ['优良天数', '21', '25', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '增加9天'],
        ['PM2.5浓度微克/立方', '11', '30', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '改善17.9%'],
        ['优良天数', '21', '25', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '增加9天'],
        ['PM2.5浓度微克/立方', '22', '25', '23', '37', '34', '36', '38', '18', '5', '', '', '', '215', '改善17.9%'],
        ['优良天数', '21', '25', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '增加9天'],
        ['PM2.5浓度微克/立方', '28', '69', '39', '27', '24', '26', '28', '18', '5', '', '', '', '215', '改善17.9%'],
        ['优良天数', '21', '25', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '增加9天'],
        ['PM2.5浓度微克/立方', '32', '20', '29', '27', '24', '26', '28', '18', '5', '', '', '', '215', '改善17.9%']
      ]
      var data = new Date()
      var currentYearData = data.getFullYear()
      var jd = '四'
      ExportHunnanExcel('蓝天计划挂图作战', table1Data, table3Data, table2Data, currentYearData, jd)*/

      // 导出word报告
      // 时间
      /* var arr = this.newTimeNotZero(this.value3).split('-')
      var currentTime = arr[0] + ' 年' + arr[1] + ' 月' + arr[2] + ' 日'
      var currentYear = arr[0]
      this.hunNanAirData.currentTime = currentTime
      this.hunNanAirData.currentYear = currentYear
      // 以下是后端传来数据
      var yearDate = '09月26日'
      var list1 = {
        sy: {
          AQI: 127,
          PM25: 38,
          PM10: 75,
          CO: 1.1,
          O38H: 21,
          SO2: 189,
          NO2: 20,
          ZH: 32,
          PaiM: '-'
        },
        hnd: {
          AQI: 71,
          PM25: 38,
          PM10: 75,
          CO: 1.1,
          O38H: 21,
          SO2: 189,
          NO2: 20,
          ZH: 32,
          PaiM: '-'
        },
        xxj: {
          AQI: 72,
          PM25: 38,
          PM10: 75,
          CO: 1.1,
          O38H: 21,
          SO2: 189,
          NO2: 20,
          ZH: 32,
          PaiM: '-'
        }
      }
      var hnd = {
        hnd1: {
          nd: '2022',
          yl: '226',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        },
        hnd2: {
          nd: '2021',
          yl: '222',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        },
        hnd3: {
          nd: '变化幅度',
          yl: '4',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        }
      }
      var xxj = {
        xxj1: {
          nd: '2022',
          yl: '226',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        },
        xxj2: {
          nd: '2021',
          yl: '222',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        },
        xxj3: {
          nd: '变化幅度',
          yl: '4',
          excellent: '92',
          good: '134',
          slightPol: '36',
          moderatePol: '6',
          heavyPol: '1',
          seriousPol: '0'
        }
      }
      var datafor = {
        so2: '23%',
        no2: '25%',
        co: '-23'
      }
      // var airQua = '二级良'
      var airQua = '一级优'
      this.hunNanAirData.list1 = list1
      this.hunNanAirData.hnd = hnd
      this.hunNanAirData.xxj = xxj
      this.hunNanAirData.airQua = airQua
      // 对后端传来的9月26日进行分割
      var month = yearDate.split('月')[0]
      if (month.substr(0, 1) === '0') {
        month = month.substr(1)
      }
      this.hunNanAirData.month = month
      var day = yearDate.split('月')[1].split('日')[0]
      if (day.substr(0, 1) === '0') {
        day = day.substr(1)
      }
      this.hunNanAirData.day = day
      this.hunNanAirData.datafor = datafor
      ExportBriefDataDocx('/HunnanReport.docx', this.hunNanAirData, `浑南区${month}月${day}日环境空气质量报告.docx`)*/
    },
    // 查询报告
    selectReport(val) {

 src/views/car/index.vue

@@ -541,6 +541,7 @@
          }
        },
      },
<<<<<<< HEAD
      timeOne: '',
      threeOptions: {
        onPick: ({ maxDate, minDate }) => {
@@ -564,6 +565,8 @@
          }
        },
      },
=======
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
      sensorDate: null,
      noneData: false,
      defaultData: [],
@@ -623,12 +626,12 @@
        {
          sensorName: 'O3',
          unit: 'ug/m³',
          tab1: '100',
          tab2: '160',
          tab3: '215',
          tab4: '265',
          tab1: '160',
          tab2: '200',
          tab3: '300',
          tab4: '400',
          tab5: '800',
          tab6: '800',
          tab6: '1000',
        },
        {
          sensorName: 'TVOC',
@@ -1145,6 +1148,7 @@
              timeArrSub[i] = v.split(' ')[0]
              if (i === 1) timeArrSub[2] = v.split(' ')[1]
            })
<<<<<<< HEAD
            if (
              that.carMac === 'p5dnd7a0243626' &&
              timeArrSub[0] === '2022-12-11' &&
@@ -1152,25 +1156,36 @@
                (timeArrSub[1] === '2022-12-12' &&
                  timeArrSub[2] === '00:00:00'))
            ) {
=======
            if (that.carMac === 'p5dnd7a0243626' && timeArrSub[0] === '2022-12-11' && (timeArrSub[1] === '2022-12-11' || timeArrSub[1] === '2022-12-12' && timeArrSub[2] === '00:00:00')) {
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
              if (value.a34004) point.a34004 = parseInt(value.a34004 * 2.7)
              if (value.a34002) point.a34002 = parseInt(value.a34002 * 2.2)
              if (value.a21026) point.a21026 = parseInt(value.a21026 - 0 + 5)
              if (value.a21004) point.a21004 = parseInt(value.a21004 - 20)
              // point.a21004 = parseInt(value.a21004)
<<<<<<< HEAD
              if (value.a21005)
                point.a21005 = parseFloat(value.a21005 - 0 + 0.85).toFixed(3)
=======
              if (value.a21005) point.a21005 = parseFloat(value.a21005 - 0 + 0.85).toFixed(3)
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
              if (value.a05024 < 15) {
                point.a05024 = parseInt(value.a05024 + 3)
              } else if (value.a05024 > 18) {
                point.a05024 = parseInt(value.a05024 - 3)
              } else point.a05024 = parseInt(value.a05024)
              point.a99054 = parseFloat(value.a99054).toFixed(3)
<<<<<<< HEAD
              if (
                value.dustld - 0 !== 0 &&
                value.dustld - 0 < 100 &&
                (that.carMac === 'p5dnd7a0243622' ||
                  that.carMac === 'p5dnd7a0243625')
              ) {
=======
              if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
                point.dustld = 100
              } else {
                point.dustld = value.dustld - 0
@@ -1183,17 +1198,37 @@
              point.a21005 = parseFloat(value.a21005).toFixed(3)
              point.a05024 = parseInt(value.a05024)
              point.a99054 = parseFloat(value.a99054).toFixed(3)
<<<<<<< HEAD
              if (
                value.dustld - 0 !== 0 &&
                value.dustld - 0 < 100 &&
                (that.carMac === 'p5dnd7a0243622' ||
                  that.carMac === 'p5dnd7a0243625')
              ) {
=======
              if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
                point.dustld = 100
              } else {
                point.dustld = value.dustld - 0
              }
            }
<<<<<<< HEAD
=======
            // point.a34004 = parseInt(value.a34004)
            // point.a34002 = parseInt(value.a34002)
            // point.a21026 = parseInt(value.a21026)
            // point.a21004 = parseInt(value.a21004)
            // point.a21005 = parseFloat(value.a21005).toFixed(3)
            // point.a05024 = parseInt(value.a05024)
            // point.a99054 = parseFloat(value.a99054).toFixed(3)
            // if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
            //   point.dustld = 100
            // } else {
            //   point.dustld = value.dustld - 0
            // }
            // point.dustld = value.dustld - 0
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
            trackPoints.push(point)
          }
        })
@@ -1256,7 +1291,13 @@
              selectedColor: '#ee1111', // 选中项颜色
              autoSelect: true, // 根据鼠标位置来自动设置选中项
              riseTime: 1800, // 楼块初始化升起时间
<<<<<<< HEAD
              onClick: (e) => {},
=======
              onClick: (e) => {
                // console.log(e)
              },
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
            })
            that.shapeLayer.setData(data)
            that.view.addLayer(that.shapeLayer)
@@ -1389,7 +1430,11 @@
        // 转为正常的10进制经纬度
        lng = (lng * 180) / Math.PI
        lat = (lat * 180) / Math.PI
<<<<<<< HEAD
        // console.log(lng, lat,123)
=======
        // console.log(lng, lat)
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
        return new BMapGL.Point(lng, lat)
      }

@@ -1747,6 +1792,7 @@
          backgroundColor: '0.05',
          fontWeight: 'bold',
        }
<<<<<<< HEAD
        label.addEventListener('click', (e) => {
          console.log(e)
          // var ps = e.target.latLng.lat
@@ -1762,6 +1808,8 @@
            that.endL = times
          }
        })
=======
>>>>>>> 5bbcdadbb201985f7bafcc60bd679d9e6f0e4229
        label.setStyle(labelStyle)
        that.map.addOverlay(label)
      }
@@ -2063,4 +2111,3 @@
  margin-top: 0.8rem;
}
</style>
  

 src/views/charts/index.vue

@@ -168,7 +168,6 @@
      }
      // 设备更新后，重新获取因子数据
      this.getSensor()
      console.log(this.newMac1)
    },
    // 监听dataType的数据更新
    select1(nv, ov) {
@@ -267,13 +266,23 @@
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          console.log(res)
          const data = res.data
          let lockLength = 0
          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].deviceData.length; j++) {
              // console.log(data[i].deviceData);
              if (res.data[0].deviceData.length == 1) {
              if (res.data[0].deviceData.length === 1) {
                if (lockLength < data[i].deviceData.length) {
                  newLineChartData.series.push({
                    data: [],
                    name: '',
                    type: 'line',
                    label: {
                      show: true,
                      position: 'top',
                    },
                  })
                }
              } else if (lockLength < data[i].deviceData.length) {
                newLineChartData.series.push({
                  data: [],
                  name: '',
@@ -295,6 +304,9 @@
              newLineChartData.series[j].data.push(
                data[i].deviceData[j].sensorValue
              )



            }
            newLineChartData.xAxis.push(data[i].time)
          }

 src/views/contrast/index.vue

@@ -289,7 +289,6 @@
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          console.log(res, 111)
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            data[i].name = this.$options.filters.sensorFilter(
@@ -303,7 +302,6 @@
             newLineChartData.series.push({ data: [], name: '', type: 'line' })
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name);
            console.log(newLineChartData.series[i].name);
            for (var j = 0; j < data[i].timeValueList.length; j++) {
             newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
            }

 src/views/dailyreport/index.vue

@@ -28,7 +28,15 @@
            end-placeholder="结束日期"
            :picker-options="pickerOptions1">
        </el-date-picker>
        <el-select v-model="carInput" clearable placeholder="请选择走航车" style="width: 180px;display: inline-block">
        <el-select v-if="equipChoose1==='car'" v-model="carInput" clearable placeholder="请选择走航车" style="width: 180px;display: inline-block">
          <el-option
              v-for="(item,index) in carMac"
              :key="index"
              :label="item.name"
              :value="item.mac">
          </el-option>
        </el-select>
        <el-select v-else v-model="planSelect" clearable placeholder="请选择无人机" style="width: 180px;display: inline-block">
          <el-option
              v-for="(item,index) in carMac"
              :key="index"
@@ -38,6 +46,7 @@
        </el-select>
        <el-button type="primary" @click="selectExport" style="margin-right: 10px;">查询</el-button>
        <el-button type="primary" @click="upImgBtn" style="margin-left: 0">上传</el-button>
<!--        <el-button type="primary" @click="exportDom">下载demo</el-button>-->
      </div>
      <div class="dailyDown" style="overflow-y: auto">
        <el-card class="boxCard">
@@ -61,7 +70,8 @@
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="expReport(scope.row)">下载</el-button>
                <el-button v-if="equipChoose1==='car'" type="text" size="medium" @click="expReport(scope.row)">下载</el-button>
                <el-button v-else type="text" size="medium" @click="exUAVReport(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -105,7 +115,7 @@
        <el-input v-if="equipChoose2==='car'" v-model="areaInput3" placeholder="请输入走航区域" clearable style="width: 180px;display: inline-block"></el-input>
        <el-input v-else v-model="planInput2" placeholder="请输入飞行区域" clearable style="width: 180px;display: inline-block"></el-input>
        <el-button v-if="equipChoose2!=='car'" type="primary" @click="innerVisible = true">飞行监测</el-button>
        <div class="dateTimeBox">
        <div class="dateTimeBox" v-if="equipChoose2==='car'">
          <div>
            <el-date-picker
                v-model="value2"
@@ -141,6 +151,13 @@
                @change="value4Change">
            </el-date-picker>
          </div>
        </div>
        <div v-else>
          <el-date-picker
              v-model="planUpTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div v-if="equipChoose2==='car'" class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between">
@@ -271,13 +288,125 @@
          <div slot="tip" class="el-upload__tip">请上传小结图片</div>
        </el-upload>
      </div>
      <div v-else class="uploadDiv" style="width:90%;overflow: auto;display: flex;flex-wrap: wrap;justify-content: space-between">
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan1"
            :on-change="handleChangePlan1"
            :on-remove="handleRemovePlan1"
            :file-list="fileListPlan1"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传国控点位置及航拍图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan2"
            :on-change="handleChangePlan2"
            :on-remove="handleRemovePlan2"
            :file-list="fileListPlan2"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传国控点实时数值图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan3"
            :on-change="handleChangePlan3"
            :on-remove="handleRemovePlan3"
            :file-list="fileListPlan3"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传高值区域与国控点相对位置图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan4"
            :on-change="handleChangePlan4"
            :on-remove="handleRemovePlan4"
            :file-list="fileListPlan4"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传O3实时监测高值区域图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan5"
            :on-change="handleChangePlan5"
            :on-remove="handleRemovePlan5"
            :file-list="fileListPlan5"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传O3高值区现场航拍图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan6"
            :on-change="handleChangePlan6"
            :on-remove="handleRemovePlan6"
            :file-list="fileListPlan6"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传PM10实时监测高值区域图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan7"
            :on-change="handleChangePlan7"
            :on-remove="handleRemovePlan7"
            :file-list="fileListPlan7"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传PM10高值区现场航拍图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan8"
            :on-change="handleChangePlan8"
            :on-remove="handleRemovePlan8"
            :file-list="fileListPlan8"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传SO2实时监测高值区域图</div>
        </el-upload>
        <el-upload
            class="upload-demo"
            action=""
            ref="uploadPlan9"
            :on-change="handleChangePlan9"
            :on-remove="handleRemovePlan9"
            :file-list="fileListPlan9"
            multiple
            :auto-upload="false">
          <el-button slot="trigger" type="primary" size="small">选取图片</el-button>
          <div slot="tip" class="el-upload__tip">请上传SO2高值区现场航拍图</div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openBox = false">取 消</el-button>
        <el-button type="primary" @click="submitImgs" :disabled ="isDisplay">保 存</el-button>
      </div>
      <el-dialog
          class="innerDialog"
          width="60%"
          width="70%"
          height="90%"
          margin-top="7vh"
          title="内层 Dialog"
          :visible.sync="innerVisible"
          append-to-body>
@@ -289,6 +418,7 @@

<script>
import { exportDocx } from '@/utils/exportImageFile'
import { exportUAVImage } from '@/utils/exportUAVImage'
import requestObj from '@/utils/request'
import Map from '@/components/PlanMap/Map'
export default {
@@ -300,16 +430,25 @@
      cityOptions: [{
        value: 'gx',
        label: '高新区'
      }, {
        value: 'hn',
        label: '浑南区'
      }],
      cityOptions2: [{
        value: 'gx',
        label: '高新区'
      }, {
        value: 'hn',
        label: '浑南区'
      }],
      equipChoose1: 'car',
      equipChoose2: 'car',
      equipOptions1: [{
        value: 'car',
        label: '走航车'
      }, {
        value: 'plan',
        label: '无人机'
      }],
      equipOptions2: [{
        value: 'car',
@@ -326,6 +465,7 @@
      value2: [new Date(), new Date()], // 上传时间1
      value3: [], // 上传时间2
      value4: [], // 上传时间3
      planUpTime: new Date(), // 无人机上传时间
      pickerOptions1: {
        shortcuts: [{
          text: '最近一周',
@@ -480,7 +620,28 @@
      planInput: '', // 无人机飞行区域查询
      planInput2: '', // 无人机飞行区域上传
      innerVisible: false, // 内部地图是否打开
      radioSeven: 'PM2.5'
      radioSeven: 'PM2.5',
      fileListPlan1: [],
      fileListPlan2: [],
      fileListPlan3: [],
      fileListPlan4: [],
      fileListPlan5: [],
      fileListPlan6: [],
      fileListPlan7: [],
      fileListPlan8: [],
      fileListPlan9: [],
      fileBase64Plan1: [],
      fileBase64Plan2: [],
      fileBase64Plan3: [],
      fileBase64Plan4: [],
      fileBase64Plan5: [],
      fileBase64Plan6: [],
      fileBase64Plan7: [],
      fileBase64Plan8: [],
      fileBase64Plan9: [],
      UAVReport: {
        fileLists: [],
      }, // 无人机报告
    }
  },
  watch: {
@@ -503,23 +664,87 @@
      if (n === null) {
        this.value4 = []
      }
    }
    },
    equipChoose1(n, o) {
      if (n !== o) {
        this.tableData = []
      }
    },
    cityChoose(n, o) {
      if (n !== o) {
        this.tableData = []
      }
    },
    deep: true,
    immediate: true
  },
  created() {
    // 走航车数组
    this.$request({
      url: 'cruiser/selectCruisers',
      method: 'get'
    }).then(res => {
      this.carMac = res.data
      this.planMac = res.data // 无人机数组，暂用走航数据
    }).catch(err => {
      console.log(err)
    })
    // 无人机数组
    // this.$request({
    //   url: 'uav/getUavDaily',
    //   method: 'get'
    // }).then(res => {
    //   this.planMac = res.data
    // }).catch(err => {
    //   console.log(err)
    // })
  },
  methods: {
    // 模拟下载
    exportDom() {
      // const url1 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
      // const url2 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
      // const url3 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
      // const url4 = `http://47.99.64.149:8081//static/img/7f633687-8321-4f89-bffc-9a52f94cfb77.jpg`
      // this.UAVReport.fileLists[1] = [url1, url2]
      // this.UAVReport.fileLists[3] = [url3, url4, url3]
      const baseUrl = `${requestObj.baseUrl}/static/img/`
      var images = [['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'], [], [], ['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'], [], [], [], []]
      var info = 0
      var num = 0
      for (let i = 0; i < images.length; i++) {
        if (!this.UAVReport.fileLists[i]) this.UAVReport.fileLists[i] = []
        if (images[i].length) {
          num++
          info += images[i].length
          if (i === 0) this.UAVReport.num1 = images[i].length
          else if (i === 1) this.UAVReport.num2 = images[i].length
          else if (i === 2) this.UAVReport.num3 = images[i].length
          else if (i === 3) this.UAVReport.num4 = images[i].length
          else if (i === 4) this.UAVReport.num5 = images[i].length
          else if (i === 5) this.UAVReport.num6 = images[i].length
          else if (i === 6) this.UAVReport.num7 = images[i].length
          for (let j = 0; j < images[i].length; j++) {
            this.UAVReport.fileLists[i].push(baseUrl + images[i][j])
          }
        }
      }
      this.UAVReport.index = info
      this.UAVReport.num = num
      console.log(this.UAVReport, 'this.UAVReport')
      exportUAVImage('/UAVReport.docx', this.UAVReport, `模拟无人机报告.docx`)
    },
    // 查询走行车报告
    selectExport() {
      this.selectTime = this.newTime(this.value1)
      if (this.cityChoose && this.equipChoose1 && this.selectTime[1]) {
        // 判断无人机or走航车
        var mac = ''
        if (this.equipChoose1 === 'car') {
          mac = this.carInput
        } else {
          mac = this.planSelect
        }
        this.$request({
          url: '/cruiser/selectDaily',
          method: 'get',
@@ -528,7 +753,7 @@
            type: this.equipChoose1,
            startTime: this.selectTime[0],
            endTime: this.selectTime[1],
            mac: this.carInput
            mac: mac
          }
        }).then(res => {
          this.carInput2 = this.carInput
@@ -540,7 +765,11 @@
          }
          info.map(v => {
            var time = v.time.split('-').join('')
            v.name = `高新区走航监测报告${time}`
            if (this.cityChoose === 'gx') {
              v.name = `高新区走航监测报告${time}`
            } else {
              v.name = `浑南区走航监测报告${time}`
            }
          })
          info.sort((a, b) => { return b.time.split('-').join('') - a.time.split('-').join('') })
          this.tableData = info
@@ -553,7 +782,7 @@
    },
    // 上传图片
    submitImgs() {
      if(this.equipChoose2 === 'car') {
      if (this.equipChoose2 === 'car') { // 上传走航车图片
        this.tableData = []
        this.isDisplay = true
        this.numList = [this.fileLists[0].length, this.fileLists[1].length, this.fileLists[2].length, this.fileLists[3].length, this.fileLists[4].length, this.fileLists[5].length, this.fileLists[6].length, this.fileLists[7].length, this.fileLists[8].length]
@@ -563,7 +792,7 @@
            num++
          }
        })
        if (this.cityOptions2 && this.value2.length === 2 && this.equipChoose2 && this.carInput2 && this.areaInput3 && this.isDisplay && (num === 0 || num === this.fileLists.length)) {
        if (this.cityChoose2 && this.value2.length === 2 && this.equipChoose2 && this.carInput2 && this.areaInput3 && this.isDisplay && (num === 0 || num === this.fileLists.length)) {
          this.upTime = this.newTime(this.value2, 'submit')
          const formData = new FormData()
          formData.append(`code`, this.cityChoose2)
@@ -601,8 +830,14 @@
              var s = new Date(res.data.time) // 标准时间转中国标准时间
              this.value1 = [s, s]
              this.carInput = this.carInput2
              this.equipChoose1 = this.equipChoose2
              this.cityChoose = this.cityChoose2
              var reportInfo = res.data
              reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
              if (this.cityChoose2 === 'gx') {
                reportInfo.name = '高新区走航监测报告' + reportInfo.time.split('-').join('')
              } else {
                reportInfo.name = '浑南区走航监测报告' + reportInfo.time.split('-').join('')
              }
              this.tableData = [reportInfo]
            } else if (res.code === -47) {
              this.$message(res.message)
@@ -617,6 +852,74 @@
          this.isDisplay = false
          this.$message('缺失参数！')
        }
      } else { // 上传无人机图片
        this.UAVUpImage()
      }
    },
    // 上传无人机图片
    async UAVUpImage() {
      var upObj = {}
      console.log('uav上传')
      this.tableData = []
      this.isDisplay = true
      if (this.cityChoose2 && this.equipChoose2 && this.planSelect2 && this.planInput2 && this.isDisplay) {
        this.upTime = this.OneDayNew(this.planUpTime)
        // 所有图片转base64
        await this.UAVAllImageToBase64()
        upObj.fileList1 = this.fileBase64Plan1
        upObj.fileList2 = this.fileBase64Plan2
        upObj.fileList3 = this.fileBase64Plan3
        upObj.fileList4 = this.fileBase64Plan4
        upObj.fileList5 = this.fileBase64Plan5
        upObj.fileList6 = this.fileBase64Plan6
        upObj.fileList7 = this.fileBase64Plan7
        upObj.fileList8 = this.fileBase64Plan8
        upObj.fileList9 = this.fileBase64Plan9
        upObj.code = this.cityChoose2
        upObj.type = this.equipChoose2
        upObj.mac = this.planSelect2
        upObj.area = this.planInput2
        upObj.time = this.upTime
        var objJson = JSON.stringify(upObj)
        console.log(objJson, 'objJson')
        // 弹框隐藏
        this.openBox = false
        this.$request({
          url: 'uav/getUavDaily',
          data: { objJson: objJson },
          method: 'post'
        }).then(res => {
          this.isDisplay = false
          if (res.code === 0) {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
            // console.log(res)
            // var s = new Date(res.data.time) // 标准时间转中国标准时间
            // this.value1 = [s, s]
            this.planSelect = this.planSelect2
            this.equipChoose1 = this.equipChoose2
            this.cityChoose = this.cityChoose2
            var reportInfo = res.data
            if (this.cityChoose === 'gx') {
              reportInfo.name = '高新区飞行监测报告' + reportInfo.time.split('-').join('')
            } else {
              reportInfo.name = '浑南区飞行监测报告' + reportInfo.time.split('-').join('')
            }
            this.tableData = [reportInfo]
          } else if (res.code === -47) {
            this.$message(res.message)
          } else {
            this.$message.error('提交失败！')
          }
        }).catch(err => {
          console.log(err)
          this.isDisplay = false
        })
      } else {
        this.isDisplay = false
        this.$message('缺失参数！')
      }
    },
    // 提交文件后台接口
@@ -628,7 +931,7 @@
        data
      })
    },
    // 下载报告
    // 下载走航车报告
    expReport(obj) {
      this.$request({
        url: '/cruiser/loadDaily',
@@ -661,7 +964,78 @@
          this.sailingReport.time1 = time[1]
          this.sailingReport.time2 = time[2]
        }
        if (this.cityChoose === 'gx') {
          this.sailingReport.city = '高新区'
        } else {
          this.sailingReport.city = '浑南区'
        }
        exportDocx('/sailingReport.docx', this.sailingReport, `${obj.name}.docx`)
      }).catch(err => {
        console.log(err)
      })
    },
    // 下载无人机报告
    exUAVReport(obj) {
      this.$request({
        url: '',
        method: 'get',
        params: {
          id: obj.id
        }
      }).then(res => {
        const baseUrl = `${requestObj.baseUrl}/static/img/`
        var images = [['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'], [], [], ['7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg', '7f633687-8321-4f89-bffc-9a52f94cfb77.jpg'], [], [], [], [], [], [], [], [], [], [], [], [], []]
        var info = 0
        var num = 0
        for (let i = 0; i < images.length; i++) {
          if (!this.UAVReport.fileLists[i]) this.UAVReport.fileLists[i] = []
          if (images[i].length) {
            num++
            info += images[i].length
            if (i === 0) this.UAVReport.num1 = images[i].length
            else if (i === 1) this.UAVReport.num2 = images[i].length
            else if (i === 2) this.UAVReport.num3 = images[i].length
            else if (i === 3) this.UAVReport.num4 = images[i].length
            else if (i === 4) this.UAVReport.num5 = images[i].length
            else if (i === 5) this.UAVReport.num6 = images[i].length
            else if (i === 6) this.UAVReport.num7 = images[i].length
            else if (i === 7) this.UAVReport.num8 = images[i].length
            else if (i === 8) this.UAVReport.num9 = images[i].length
            else if (i === 9) this.UAVReport.num10 = images[i].length
            else if (i === 10) this.UAVReport.num11 = images[i].length
            else if (i === 11) this.UAVReport.num12 = images[i].length
            else if (i === 12) this.UAVReport.num13 = images[i].length
            else if (i === 13) this.UAVReport.num14 = images[i].length
            else if (i === 14) this.UAVReport.num15 = images[i].length
            else if (i === 15) this.UAVReport.num16 = images[i].length
            else if (i === 16) this.UAVReport.num17 = images[i].length
            for (let j = 0; j < images[i].length; j++) {
              this.UAVReport.fileLists[i].push(baseUrl + images[i][j])
            }
          }
        }
        this.UAVReport.index = info
        this.UAVReport.num = num
        var data2 = obj.date.split('-')
        this.UAVReport.date2 = data2[0] + '年' + data2[1] + '月' + data2[2] + '日'
        var time = []
        for (let i = 0; i < res.data.code.time.length; i++) {
          time.push(res.data.code.time[i])
        }
        this.UAVReport.time0 = time[0]
        if (time.length === 2) {
          this.UAVReport.time1 = time[1]
        }
        if (time.length === 3) {
          this.UAVReport.time1 = time[1]
          this.UAVReport.time2 = time[2]
        }
        if (this.cityChoose === 'gx') {
          this.UAVReport.city = '高新区'
        } else {
          this.UAVReport.city = '浑南区'
        }
        exportUAVImage('/UAVReport.docx', this.UAVReport, `${obj.name}.docx`)
      }).catch(err => {
        console.log(err)
      })
@@ -812,8 +1186,95 @@
        return arr
      }
    },
    // 时间处理函数，日期是单个
    OneDayNew(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    // 无人机所有图片转base64
    async UAVAllImageToBase64() {
      if (this.fileListPlan1.length > 0) {
        for (let i = 0; i < this.fileListPlan1.length; i++) {
          var p = this.getBase64(this.fileListPlan1[i].raw)
          await p.then(res => {
            this.fileBase64Plan1[i] = res
          })
        }
        // this.fileListPlan1 = fileListPlan1
      }
      if (this.fileListPlan2.length > 0) {
        for (let i = 0; i < this.fileListPlan2.length; i++) {
          var p = this.getBase64(this.fileListPlan2[i].raw)
          await p.then(res => {
            this.fileBase64Plan2[i] = res
          })
        }
      }
      if (this.fileListPlan3.length > 0) {
        for (let i = 0; i < this.fileListPlan3.length; i++) {
          var p = this.getBase64(this.fileListPlan3[i].raw)
          await p.then(res => {
            this.fileBase64Plan3[i] = res
          })
        }
      }
      if (this.fileListPlan4.length > 0) {
        for (let i = 0; i < this.fileListPlan4.length; i++) {
          var p = this.getBase64(this.fileListPlan4[i].raw)
          await p.then(res => {
            this.fileBase64Plan4[i] = res
          })
        }
      }
      if (this.fileListPlan5.length > 0) {
        for (let i = 0; i < this.fileListPlan5.length; i++) {
          var p = this.getBase64(this.fileListPlan5[i].raw)
          await p.then(res => {
            this.fileBase64Plan5[i] = res
          })
        }
      }
      if (this.fileListPlan6.length > 0) {
        for (let i = 0; i < this.fileListPlan6.length; i++) {
          var p = this.getBase64(this.fileListPlan6[i].raw)
          await p.then(res => {
            this.fileBase64Plan6[i] = res
          })
        }
      }
      if (this.fileListPlan7.length > 0) {
        for (let i = 0; i < this.fileListPlan7.length; i++) {
          var p = this.getBase64(this.fileListPlan7[i].raw)
          await p.then(res => {
            this.fileBase64Plan7[i] = res
          })
        }
      }
      if (this.fileListPlan8.length > 0) {
        for (let i = 0; i < this.fileListPlan8.length; i++) {
          var p = this.getBase64(this.fileListPlan8[i].raw)
          await p.then(res => {
            this.fileBase64Plan8[i] = res
          })
        }
      }
      if (this.fileListPlan9.length > 0) {
        for (let i = 0; i < this.fileListPlan9.length; i++) {
          var p = this.getBase64(this.fileListPlan9[i].raw)
          await p.then(res => {
            this.fileBase64Plan9[i] = res
          })
        }
      }
    },
    // 图片转base64函数
    getBase64(file) {
      // console.log(file)
      return new Promise(function(resolve, reject) {
        var reader = new FileReader()
        let imgResult = ''
@@ -829,18 +1290,116 @@
        }
      })
    },
    // 无人机图片上传
    handleChangePlan1(file, fileList) {
      // console.log(file, fileList)
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan1 = fileList
    },
    handleRemovePlan1(file, fileList) {
      this.fileListPlan1 = fileList
    },
    handleChangePlan2(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan2 = fileList
    },
    handleRemovePlan2(file, fileList) {
      this.fileListPlan2 = fileList
    },
    handleChangePlan3(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan3 = fileList
    },
    handleRemovePlan3(file, fileList) {
      this.fileListPlan3 = fileList
    },
    handleChangePlan4(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan4 = fileList
    },
    handleRemovePlan4(file, fileList) {
      this.fileListPlan4 = fileList
    },
    handleChangePlan5(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan5 = fileList
    },
    handleRemovePlan5(file, fileList) {
      this.fileListPlan5 = fileList
    },
    handleChangePlan6(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan6 = fileList
    },
    handleRemovePlan6(file, fileList) {
      this.fileListPlan6 = fileList
    },
    handleChangePlan7(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan7 = fileList
    },
    handleRemovePlan7(file, fileList) {
      this.fileListPlan7 = fileList
    },
    handleChangePlan8(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan8 = fileList
    },
    handleRemovePlan8(file, fileList) {
      this.fileListPlan8 = fileList
    },
    handleChangePlan9(file, fileList) {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$refs.uploadPlan1.handleRemove(file)
        this.$message.warning(`上传文件格式不符合`)
        return
      }
      this.fileListPlan9 = fileList
    },
    handleRemovePlan9(file, fileList) {
      this.fileListPlan9 = fileList
    },
    // 限制一天
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 上传文件到upload
    // 走航车上传文件到upload
    handleChange1(file, fileList) {
      // console.log(file, '123')
      this.fileList1 = fileList
      this.fileLists[0] = fileList
      // this.getBase64(file.raw).then(res => {
      //   console.log(res)
      // })
    },
    handleRemove1(file, fileList) {
      this.fileList1 = fileList

 src/views/deviceDetail/index.vue

@@ -123,7 +123,7 @@
            <li>NO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 40 ]</li>
            <li>SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 50 ]</li>
            <li>CO: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 2 ]</li>
            <li>O3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 100 ]</li>
            <li>O3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 160 ]</li>
          </ul>
        </div>
      </el-main>
@@ -183,6 +183,29 @@
      alarmLevels: null,
      // 报警等级
      alarmLevel: null,
      alarmLevelDome: {
        a00e12: '[10000, 15000, 20000]',
        a00e13: '[60, 90, 120]',
        a00e34: null,
        a35e21: null,
        a01001: '[25, 30, 60]',
        a01002: '[60, 100, 160]',
        a01006: null,
        a01007: '[5, 6, 8]',
        a01008: null,
        a05024: '[160, 200, 300, 400, 800]',
        a06001: null,
        a19002: null,
        a21004: '[100, 200, 700, 1200, 2340]',
        a21005: '[5, 10, 35, 60, 90]',
        a21026: '[150, 500, 650, 800, 1600]',
        a34002: '[50, 150, 250, 350, 420]',
        a34004: '[35, 75, 115, 150, 250]',
        a99054: '[1.5, 3, 5]',
        dustld: null,
        flylat: null,
        flylon: null
      }, // 假设报警等级
      // 报警进度条
      alarmProgress: {},
      // 报警颜色
@@ -463,6 +486,7 @@
      var socketUrl
      if (this.equipment === 'car') {
        socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName
        // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
      }
@@ -479,6 +503,9 @@
      this.ws.onmessage = function(msg) {
        // if (JSON.parse(msg.data).名称) {
        that.wsData2 = JSON.parse(msg.data)
        if (that.wsData2.dustld) {
          that.wsData2.dustld = that.wsData2.dustld.replace(/g/, 'ug')
        }
        // console.log('以下是websocket返回数据')
        // console.log(that.wsData2)
        // 风向算法
@@ -843,7 +870,20 @@
      }).then((res) => {
        // console.log('以下是queryAlarmByMac请求的返回')
        this.alarmLevel = res.data.alarmLevel
        // console.log(this.alarmLevel)
        // var levelList = res.data.alarmLevel
        // var info = false
        // for (let key in levelList) {
        //   if (levelList[key] !== null) {
        //     info = true
        //     break
        //   }
        // }
        // if (info) {
        //   this.alarmLevel = res.data.alarmLevel
        // } else {
        //   this.alarmLevel = this.alarmLevelDome
        // }
        // console.log(this.alarmLevel, 'this.alarmLevel')
      }).catch((err) => {
        console.log(err)
      })

 src/views/personnel/role.vue

@@ -151,7 +151,8 @@
        children: 'children',
        label: 'label'
      },
      visibleDel: false
      visibleDel: false,
      parentIds: []
    }
  },
  // 计算属性 类似于data概念
@@ -269,6 +270,12 @@
        // console.log('当前组织下的菜单列表')
        // console.log(res)
        this.menuData = res.data.menus
        // 拿到所有的父id
        this.parentIds = []
        res.data.menus.map(v => {
          this.parentIds.push(v.id)
        })
        this.parentIds = JSON.parse(JSON.stringify(this.parentIds))
      }).catch(err => {
        console.log(err)
      })
@@ -287,8 +294,16 @@
      }).then(res => {
        // console.log('当前角色的菜单列表')
        // console.log(res)
        this.checkedData = res.data
        console.log(this.checkedData)
        var allIds = res.data
        // 过滤父id
        for (let i = 0; i < allIds.length; i++) {
          for (let j = 0; j < this.parentIds.length; j++) {
            if (allIds[i] === this.parentIds[j]) {
              allIds.splice(i, 1)
            }
          }
        }
        this.checkedData = allIds
      }).catch(err => {
        console.log(err)
      })
@@ -300,10 +315,10 @@
        method: 'post',
        data: {
          groupId: this.currentGroupId,
          menuIds:this.$refs.tree.getCheckedKeys()
          menuIds: this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
          // menuIds: this.$refs.tree.getCheckedKeys()
        }
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message({
            message: '保存成功',