From 936633659148e800a8d09322a9f1e646104010a7 Mon Sep 17 00:00:00 2001 From: yichenxi <yichenxi0601@163.com> Date: Mon, 12 Dec 2022 14:14:57 +0800 Subject: [PATCH] 1、尘负荷走航路段报告 --- cmsdist/airQuality.docx | 0 src/components/Echarts/LineChart2.vue | 4 src/views/personnel/role.vue | 25 src/router/dynamicRouter.js | 5 src/components/Wind/Map.vue | 3800 +++++++++++++++++----------------- src/views/car/index.vue | 59 src/views/charts/index.vue | 20 public/UAVReport.docx | 0 public/sailingReport.docx | 0 src/utils/request.js | 1 src/components/Echarts/LineChartSpe.vue | 11 src/components/Form/HourPicker1.vue | 5 src/views/contrast/index.vue | 2 .idea/workspace.xml | 107 src/views/O3/index.vue | 3 src/views/air/index.vue | 195 - src/views/dailyreport/index.vue | 591 +++++ src/views/deviceDetail/index.vue | 44 public/airQuality.docx | 0 cmsdist/index.html | 2 src/components/PlanMap/Map.vue | 1479 +++++++++++++ src/utils/exportUAVImage.js | 151 + 22 files changed, 4,314 insertions(+), 2,190 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 0da9f90..5f482ef 100644 --- a/.idea/workspace.xml +++ b/.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> diff --git a/cmsdist/airQuality.docx b/cmsdist/airQuality.docx index 07b8679..50f490e 100644 --- a/cmsdist/airQuality.docx +++ b/cmsdist/airQuality.docx Binary files differ diff --git a/cmsdist/index.html b/cmsdist/index.html index 7a60143..2cb4a68 100644 --- a/cmsdist/index.html +++ b/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 ��������� //��������������������������������������������������������������������������������������������������� diff --git a/public/UAVReport.docx b/public/UAVReport.docx new file mode 100644 index 0000000..b77e976 --- /dev/null +++ b/public/UAVReport.docx Binary files differ diff --git a/public/airQuality.docx b/public/airQuality.docx index de25dcb..50f490e 100644 --- a/public/airQuality.docx +++ b/public/airQuality.docx Binary files differ diff --git a/public/sailingReport.docx b/public/sailingReport.docx index e899837..d750608 100644 --- a/public/sailingReport.docx +++ b/public/sailingReport.docx Binary files differ diff --git a/src/components/Echarts/LineChart2.vue b/src/components/Echarts/LineChart2.vue index 285cc43..f260441 100644 --- a/src/components/Echarts/LineChart2.vue +++ b/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, // ������������ diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue index 8f89805..df84764 100644 --- a/src/components/Echarts/LineChartSpe.vue +++ b/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, // [{ diff --git a/src/components/Form/HourPicker1.vue b/src/components/Form/HourPicker1.vue index dfa192b..68181c0 100644 --- a/src/components/Form/HourPicker1.vue +++ b/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 { diff --git a/src/components/PlanMap/Map.vue b/src/components/PlanMap/Map.vue index 61d507a..983f3b8 100644 --- a/src/components/PlanMap/Map.vue +++ b/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> diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index efe002a..c4ec3fa 100644 --- a/src/components/Wind/Map.vue +++ b/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> diff --git a/src/router/dynamicRouter.js b/src/router/dynamicRouter.js index 9398320..2e751b3 100644 --- a/src/router/dynamicRouter.js +++ b/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' } } - // ��������������������������� diff --git a/src/utils/exportUAVImage.js b/src/utils/exportUAVImage.js new file mode 100644 index 0000000..8f2e415 --- /dev/null +++ b/src/utils/exportUAVImage.js @@ -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) + } +} diff --git a/src/utils/request.js b/src/utils/request.js index fb25d76..0567b1c 100644 --- a/src/utils/request.js +++ b/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/' diff --git a/src/views/O3/index.vue b/src/views/O3/index.vue index 90b3f34..8e39cac 100644 --- a/src/views/O3/index.vue +++ b/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, diff --git a/src/views/air/index.vue b/src/views/air/index.vue index f844cdc..fa78f32 100644 --- a/src/views/air/index.vue +++ b/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) { diff --git a/src/views/car/index.vue b/src/views/car/index.vue index a423c11..d3ac8e8 100644 --- a/src/views/car/index.vue +++ b/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> - \ No newline at end of file diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue index ecfdd9b..0b9aa32 100644 --- a/src/views/charts/index.vue +++ b/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) } diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue index 85a3e86..731ae64 100644 --- a/src/views/contrast/index.vue +++ b/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) } diff --git a/src/views/dailyreport/index.vue b/src/views/dailyreport/index.vue index 2f34dc4..61a1a40 100644 --- a/src/views/dailyreport/index.vue +++ b/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 diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue index 0532bf1..eff6d6c 100644 --- a/src/views/deviceDetail/index.vue +++ b/src/views/deviceDetail/index.vue @@ -123,7 +123,7 @@ <li>NO2: [ 0, 40 ]</li> <li>SO2: [ 0, 50 ]</li> <li>CO: [ 0, 2 ]</li> - <li>O3: [ 0, 100 ]</li> + <li>O3: [ 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) }) diff --git a/src/views/personnel/role.vue b/src/views/personnel/role.vue index 65fe391..9aef9fc 100644 --- a/src/views/personnel/role.vue +++ b/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: '������������', -- Gitblit v1.8.0