| | |
|---|
| | | <list default="true" id="6a923843-d66d-4ccb-892a-72e969a7cbe1" name="Default Changelist" comment="export cityRankWord"> |
|---|
| | | <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> |
|---|
| | | <change beforePath="$PROJECT_DIR$/cmsdist/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/index.html" 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/components/Wind/realTimeLocal/airChangeTrend.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Wind/realTimeLocal/airChangeTrend.vue" afterDir="false" /> |
|---|
| | | <change beforePath="$PROJECT_DIR$/src/utils/exportLUImage.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/exportLUImage.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/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/deviceDetail/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/deviceDetail/index.vue" afterDir="false" /> |
|---|
| | | <change beforePath="$PROJECT_DIR$/src/views/main/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/main/index.vue" afterDir="false" /> |
|---|
| | | </list> |
|---|
| | | <option name="SHOW_DIALOG" value="false" /> |
|---|
| | | <option name="HIGHLIGHT_CONFLICTS" value="true" /> |
|---|
| | |
|---|
| | | <workItem from="1680243193398" duration="162000" /> |
|---|
| | | <workItem from="1680502666801" duration="6000" /> |
|---|
| | | <workItem from="1683791620023" duration="3000" /> |
|---|
| | | <workItem from="1684375250492" duration="344000" /> |
|---|
| | | <workItem from="1684375692389" duration="49000" /> |
|---|
| | | </task> |
|---|
| | | <task id="LOCAL-00001" summary="处理详情页侧面菜单不消失"> |
|---|
| | | <created>1627269084478</created> |
|---|
| | |
|---|
| | | |
|---|
| | | 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.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],d[a]&&o.push(d[a][0]),d[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return t.push.apply(t,f||[]),n()}function n(){for(var e,c=0;c<t.length;c++){for(var n=t[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==d[h]&&(u=!1)}u&&(t.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},d={runtime:0},t=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"d3e4571b","chunk-1a6a9fc9":"64f25646","chunk-201c0396":"f3e63fed","chunk-2c6cd7be":"26fa5bec","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"6b338551","chunk-8960d1b6":"a80ee1fd","chunk-2d0b9293":"c84b8980","chunk-4adb9048":"e8609968","chunk-5d23b120":"3abeafa7","chunk-85a2e2d8":"9b079fdf","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"c224fb40","chunk-5db5f624":"b668735f","chunk-08d7cab3":"4bec4dad","chunk-291c8555":"8265323a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"b5b3f0c5","chunk-515db732":"b4aa04c5","chunk-ec6a3d1c":"8a40b817","chunk-c9c77a48":"bb1c3f1c","chunk-commons":"6a605666","chunk-0e0b280e":"dc4627d7","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"32e46461","chunk-44900a0d":"312aa2a2","chunk-9342d0cc":"4b0ba6c3","chunk-ec8fa258":"2ac4806f","chunk-4a79fb70":"b7f6ecb7","chunk-4ae0200c":"32c14596","chunk-7a25313a":"0b02e54c","chunk-d89e6198":"3150f980","chunk-d38dc67e":"ab84683a","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"4f55dfc7","chunk-0a0d3ad6":"33ea41b5","chunk-fea4eb42":"191ab795"}[e]+".js"}function r(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,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-1a6a9fc9":1,"chunk-201c0396":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-8960d1b6":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-9342d0cc":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":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-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-1a6a9fc9":"7bb32fe7","chunk-201c0396":"3bec9bdf","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-8960d1b6":"d43cc52a","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-9342d0cc":"a1df41ec","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",d=r.p+u,t=document.getElementsByTagName("link"),h=0;h<t.length;h++){var f=t[h],k=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(k===u||k===d))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u||k===d)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||d,t=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");t.code="CSS_CHUNK_LOAD_FAILED",t.request=u,delete a[e],b.parentNode.removeChild(b),n(t)},b.href=d;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=d[e];if(0!==u)if(u)c.push(u[2]);else{var t=new Promise((function(c,n){u=d[e]=[c,n]}));c.push(u[2]=t);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=d[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,t=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");t.type=u,t.request=a,n[1](t)}d[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.b485e140.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.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],d[a]&&o.push(d[a][0]),d[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return t.push.apply(t,f||[]),n()}function n(){for(var e,c=0;c<t.length;c++){for(var n=t[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==d[h]&&(u=!1)}u&&(t.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},d={runtime:0},t=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"47e72585","chunk-201c0396":"f027770e","chunk-2c6cd7be":"37eea172","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"b3841e89","chunk-66790974":"9e0acbcd","chunk-2d0b9293":"ddbdeaa7","chunk-4adb9048":"99e328d7","chunk-5d23b120":"2bd47d92","chunk-731d2009":"dc342bb7","chunk-85a2e2d8":"3ef015b4","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"89d895c8","chunk-5db5f624":"b668735f","chunk-08d7cab3":"67462cf7","chunk-291c8555":"0713cf0b","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"e68ccdfb","chunk-515db732":"49c7b21b","chunk-ec6a3d1c":"a0209d85","chunk-c9c77a48":"ebca4f08","chunk-commons":"896af803","chunk-0e0b280e":"af5547ba","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"ec649d86","chunk-44900a0d":"4b27ecd6","chunk-9342d0cc":"d8c1ce83","chunk-ec8fa258":"b9734f70","chunk-4a79fb70":"83bce843","chunk-4ae0200c":"f4fb0b06","chunk-7a25313a":"4e131e88","chunk-d89e6198":"28b05800","chunk-d38dc67e":"87023734","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"0af33adb","chunk-0a0d3ad6":"0eb20865","chunk-fea4eb42":"f2c277d6"}[e]+".js"}function r(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,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-201c0396":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-66790974":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-731d2009":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-9342d0cc":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":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-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-66790974":"3ac97f29","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-731d2009":"4dfcf080","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-9342d0cc":"a1df41ec","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",d=r.p+u,t=document.getElementsByTagName("link"),h=0;h<t.length;h++){var f=t[h],k=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(k===u||k===d))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u||k===d)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||d,t=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");t.code="CSS_CHUNK_LOAD_FAILED",t.request=u,delete a[e],b.parentNode.removeChild(b),n(t)},b.href=d;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=d[e];if(0!==u)if(u)c.push(u[2]);else{var t=new Promise((function(c,n){u=d[e]=[c,n]}));c.push(u[2]=t);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=d[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,t=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");t.type=u,t.request=a,n[1](t)}d[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.30caf440.js></script></body><script>var docEl = document.documentElement, |
|---|
| | | //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， |
|---|
| | | //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 |
|---|
| | | //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值 |
|---|
| | |
|---|
| | | <script src="http://api.map.baidu.com/api?v=3.0&ak=U2SoSp52BoVW6bAEMsxQ7Zfe0tuB6VDp"></script> |
|---|
| | | <script src="https://mapv.baidu.com/build/mapv.min.js"></script> |
|---|
| | | <script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script> |
|---|
| | | <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script> |
|---|
| | | <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script> --> |
|---|
| | | <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.97/dist/mapvgl.min.js"></script> |
|---|
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --> |
|---|
| | | <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script> --> |
|---|
| | |
|---|
| | | type="monthrange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始月份" |
|---|
| | | value-format="yyyy-MM-dd" |
|---|
| | | value-format="yyyy-MM-dd HH" |
|---|
| | | end-placeholder="结束月份"> |
|---|
| | | </el-date-picker> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | <template>
|
|---|
| | | <div class="main_body">
|
|---|
| | | <el-container
|
|---|
| | | style="height: 100%"
|
|---|
| | | >
|
|---|
| | | <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-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="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="结束日期">
|
|---|
| | | 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-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">
|
|---|
| | | v-for="(item, index) in defaultData"
|
|---|
| | | :key="index"
|
|---|
| | | :label="item.name"
|
|---|
| | | :value="item.mac"
|
|---|
| | | >
|
|---|
| | | </el-option>
|
|---|
| | | </el-select>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | var GPS = {
|
|---|
| | | PI: 3.14159265358979324,
|
|---|
| | | x_pi: (3.14159265358979324 * 3000.0) / 180.0,
|
|---|
| | | delta: function(lat, lon) {
|
|---|
| | | delta: function (lat, lon) {
|
|---|
| | | var a = 6378245.0 // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
|
|---|
| | | var ee = 0.00669342162296594323 // ee: 椭球的偏心率。
|
|---|
| | | var dLat = this.transformLat(lon - 105.0, lat - 35.0)
|
|---|
| | |
|---|
| | | },
|
|---|
| | |
|
|---|
| | | // WGS-84 to GCJ-02
|
|---|
| | | gcj_encrypt: function(wgsLat, wgsLon) {
|
|---|
| | | gcj_encrypt: function (wgsLat, wgsLon) {
|
|---|
| | | if (this.outOfChina(wgsLat, wgsLon)) {
|
|---|
| | | return { lat: wgsLat, lon: wgsLon }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }
|
|---|
| | | },
|
|---|
| | | // GCJ-02 to WGS-84
|
|---|
| | | gcj_decrypt: function(gcjLat, gcjLon) {
|
|---|
| | | gcj_decrypt: function (gcjLat, gcjLon) {
|
|---|
| | | if (this.outOfChina(gcjLat, gcjLon)) {
|
|---|
| | | return { lat: gcjLat, lon: gcjLon }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }
|
|---|
| | | },
|
|---|
| | | // GCJ-02 to WGS-84 exactly
|
|---|
| | | gcj_decrypt_exact: function(gcjLat, gcjLon) {
|
|---|
| | | gcj_decrypt_exact: function (gcjLat, gcjLon) {
|
|---|
| | | var initDelta = 0.01
|
|---|
| | | var threshold = 0.000000001
|
|---|
| | | var dLat = initDelta
|
|---|
| | |
|---|
| | | return { lat: wgsLat, lon: wgsLon }
|
|---|
| | | },
|
|---|
| | | // GCJ-02 to BD-09
|
|---|
| | | bd_encrypt: function(gcjLat, gcjLon) {
|
|---|
| | | 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)
|
|---|
| | |
|---|
| | | return { lat: this.bdLat, lon: this.bdLon }
|
|---|
| | | },
|
|---|
| | | // BD-09 to GCJ-02
|
|---|
| | | bd_decrypt: function(bdLat, bdLon) {
|
|---|
| | | 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)
|
|---|
| | |
|---|
| | | },
|
|---|
| | | // WGS-84 to Web mercator
|
|---|
| | | // mercatorLat -> y mercatorLon -> x
|
|---|
| | | mercator_encrypt: function(wgsLat, wgsLon) {
|
|---|
| | | 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)
|
|---|
| | | 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) {
|
|---|
| | | 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)
|
|---|
| | | (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) {
|
|---|
| | | 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)
|
|---|
| | | 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)
|
|---|
| | | 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 distance = alpha * earthR
|
|---|
| | | return distance
|
|---|
| | | },
|
|---|
| | | outOfChina: function(lat, lon) {
|
|---|
| | | outOfChina: function (lat, lon) {
|
|---|
| | | if (lon < 72.004 || lon > 137.8347) {
|
|---|
| | | return true
|
|---|
| | | }
|
|---|
| | |
|---|
| | | }
|
|---|
| | | return false
|
|---|
| | | },
|
|---|
| | | transformLat: function(x, y) {
|
|---|
| | | 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))
|
|---|
| | | -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
|
|---|
| | | ((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
|
|---|
| | | ((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
|
|---|
| | | ((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) {
|
|---|
| | | 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))
|
|---|
| | | 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
|
|---|
| | | ((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
|
|---|
| | | ((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
|
|---|
| | | ((150.0 * Math.sin((x / 12.0) * this.PI) +
|
|---|
| | | 300.0 * Math.sin((x / 30.0) * this.PI)) *
|
|---|
| | | 2.0) /
|
|---|
| | | 3.0
|
|---|
| | | return ret
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | |
|---|
| | | dataType: 'history',
|
|---|
| | | responseJSON: null,
|
|---|
| | | radio1: null,
|
|---|
| | | viewOptions: [
|
|---|
| | | '平铺',
|
|---|
| | | '立体'
|
|---|
| | | ],
|
|---|
| | | viewOptions: ['平铺', '立体'],
|
|---|
| | | dateValue: [],
|
|---|
| | | pickerOptions: {
|
|---|
| | | disabledDate(time) {
|
|---|
| | |
|---|
| | | webSocketView: false,
|
|---|
| | | isDataList: [],
|
|---|
| | | shapeLayer: null,
|
|---|
| | | carData: null,
|
|---|
| | | carData: [],
|
|---|
| | | timeDuan: 0,
|
|---|
| | | isDisTime: false,
|
|---|
| | | startTime: '',
|
|---|
| | |
|---|
| | | sensorTime: [],
|
|---|
| | | timeValue: [
|
|---|
| | | new Date(2020, 1, 1, 0, 0, 0),
|
|---|
| | | new Date(2022, 12, 31, 23, 59, 59)
|
|---|
| | | new Date(2022, 12, 31, 23, 59, 59),
|
|---|
| | | ],
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | |
|---|
| | | // console.log(n)
|
|---|
| | | },
|
|---|
| | | deep: true,
|
|---|
| | | immediate: true
|
|---|
| | | immediate: true,
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.getStart()
|
|---|
| | |
|---|
| | | // 时间处理函数
|
|---|
| | | newTime2(timeArr) {
|
|---|
| | | var arr = []
|
|---|
| | | timeArr.map(v => {
|
|---|
| | | timeArr.map((v) => {
|
|---|
| | | var date = new Date(v)
|
|---|
| | | var y = date.getFullYear()
|
|---|
| | | var m = date.getMonth() + 1
|
|---|
| | |
|---|
| | | 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)
|
|---|
| | | method: 'get',
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | this.defaultData = res.data
|
|---|
| | | this.carMac = res.data[0].mac
|
|---|
| | | })
|
|---|
| | | .catch((err) => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 进行经纬度转换为距离的计算
|
|---|
| | | Rad(d) {
|
|---|
| | |
|---|
| | | 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)))
|
|---|
| | | 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);
|
|---|
| | |
|---|
| | | newDate() {
|
|---|
| | | var aData = new Date()
|
|---|
| | | var month =
|
|---|
| | | aData.getMonth() < 9
|
|---|
| | | ? '0' + (aData.getMonth() + 1)
|
|---|
| | | : aData.getMonth() + 1
|
|---|
| | | 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
|
|---|
| | | },
|
|---|
| | |
|---|
| | | 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
|
|---|
| | | (str2[0] - 0 + 8) % 24 < 9
|
|---|
| | | ? '0' + ((str2[0] - 0 + 8) % 24)
|
|---|
| | | : (str2[0] - 0 + 8) % 24
|
|---|
| | | str = str2.join(':')
|
|---|
| | | this.sensorTime.push(str)
|
|---|
| | | })
|
|---|
| | |
|---|
| | | this.map.clearOverlays()
|
|---|
| | | }
|
|---|
| | | this.$request({
|
|---|
| | | url: '/cruiser/cruiserTrajectory',
|
|---|
| | | // url: '/cruiser/cruiserTrajectory',
|
|---|
| | | url: '/uav/queryDataByBatch',
|
|---|
| | | method: 'get',
|
|---|
| | | // params: {
|
|---|
| | | // mac: this.carMac,
|
|---|
| | | // time1: this.sensorDate[0],
|
|---|
| | | // time2: this.sensorDate[1],
|
|---|
| | | // },
|
|---|
| | | params: {
|
|---|
| | | mac: this.carMac,
|
|---|
| | | time1: this.sensorDate[0],
|
|---|
| | | time2: this.sensorDate[1]
|
|---|
| | | }
|
|---|
| | | }).then(res => {
|
|---|
| | | if (!res.data.length) {
|
|---|
| | | batch: '2023-05-15 14:39:05',
|
|---|
| | | },
|
|---|
| | | }).then((res) => {
|
|---|
| | | if (!res.data.vos.length) {
|
|---|
| | | this.noneData = true
|
|---|
| | | this.loading = false
|
|---|
| | | }
|
|---|
| | | if (res.data.length) {
|
|---|
| | | this.carData = res
|
|---|
| | | if (res.data.vos.length) {
|
|---|
| | | console.log(12)
|
|---|
| | | // this.carData = res
|
|---|
| | | // console.log(JSON.parse(this.carData), 'JSON.parse(this.carData)')
|
|---|
| | | // this.initStart(JSON.parse(this.carData))
|
|---|
| | | for (var i = 0; i < res.data.vos.length; i++) {
|
|---|
| | | console.log(res.data.vos[i].value)
|
|---|
| | | this.carData.push(JSON.parse(res.data.vos[i].value))
|
|---|
| | | }
|
|---|
| | | this.initStart(this.carData)
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 执行数据生成逻辑
|
|---|
| | | initStart(res) {
|
|---|
| | | console.log(res, 'res')
|
|---|
| | | this.abc += 1
|
|---|
| | | const that = this
|
|---|
| | | if (!res) {
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | if (this.dataType === 'history') {
|
|---|
| | | this.responseJSON = res.data
|
|---|
| | | this.responseJSON = res
|
|---|
| | | } else {
|
|---|
| | | this.responseJSON = res
|
|---|
| | | }
|
|---|
| | |
|---|
| | | 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')) {
|
|---|
| | | if (
|
|---|
| | | value.dustld - 0 !== 0 &&
|
|---|
| | | value.dustld - 0 < 100 &&
|
|---|
| | | (that.carMac === 'p5dnd7a0243622' ||
|
|---|
| | | that.carMac === 'p5dnd7a0243625')
|
|---|
| | | ) {
|
|---|
| | | point.dustld = 100
|
|---|
| | | } else {
|
|---|
| | | point.dustld = value.dustld - 0
|
|---|
| | |
|---|
| | | })
|
|---|
| | | that.sensor = this.sensorKey
|
|---|
| | | that.viewType = this.viewKey
|
|---|
| | | that.size = 70
|
|---|
| | | that.size = 5
|
|---|
| | | that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4)
|
|---|
| | | // 已有地图，避免再次请求
|
|---|
| | | if (!that.showPoints) {
|
|---|
| | |
|---|
| | | // drawStartAndEnd() // 起点和终点标注
|
|---|
| | | function draw(sensor, type, carMac) {
|
|---|
| | | var levels = getGrading(sensor, type, carMac)
|
|---|
| | | $.each(levels, function(index, value) {
|
|---|
| | | $.each(levels, function (index, value) {
|
|---|
| | | var color = value.color
|
|---|
| | | var data = value.data
|
|---|
| | | if (data.length > 0) {
|
|---|
| | |
|---|
| | | })
|
|---|
| | | that.map.setDefaultCursor('default')
|
|---|
| | | if (type === '2D') {
|
|---|
| | | $.each(that.showPoints, function(item, point) {
|
|---|
| | | $.each(that.showPoints, function (item, point) {
|
|---|
| | | setLabelStyle(point[sensor], point)
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | |
|---|
| | |
|
|---|
| | | // 画方块，上色，添加文字
|
|---|
| | | function drawPolygon(sensor) {
|
|---|
| | | $.each(that.showPoints, function(item, point) {
|
|---|
| | | $.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]
|
|---|
| | |
|---|
| | | new BMapGL.Point(ne.lng, ne.lat), // 右上角
|
|---|
| | | new BMapGL.Point(sw.lng, ne.lat), // 右下角
|
|---|
| | | ],
|
|---|
| | | { strokeWeight: 0.5, strokeOpacity: 0.0, fillColor: color, fillOpacity: 1 }
|
|---|
| | | {
|
|---|
| | | strokeWeight: 0.5,
|
|---|
| | | strokeOpacity: 0.0,
|
|---|
| | | fillColor: color,
|
|---|
| | | fillOpacity: 1,
|
|---|
| | | }
|
|---|
| | | )
|
|---|
| | | that.map.addOverlay(polygon)
|
|---|
| | | // 方块内添加label文本
|
|---|
| | |
|---|
| | | function drawLine() {
|
|---|
| | | var data = []
|
|---|
| | | var points = []
|
|---|
| | | $.each(trackPoints, function(index, value) {
|
|---|
| | | $.each(trackPoints, function (index, value) {
|
|---|
| | | var point = []
|
|---|
| | | point.push(value['lng'], value['lat'])
|
|---|
| | | points.push(point)
|
|---|
| | |
|---|
| | | }
|
|---|
| | | if (flag) {
|
|---|
| | | points.push(point1)
|
|---|
| | | console.log(points, 'points')
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | return points
|
|---|
| | |
|---|
| | | 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轴正半轴的夹角大小
|
|---|
| | | 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)
|
|---|
| | | Math.cos(lat) * Math.sin(ra) * Math.cos(angle)
|
|---|
| | | )
|
|---|
| | | // 转为正常的10进制经纬度
|
|---|
| | | lng = (lng * 180) / Math.PI
|
|---|
| | |
|---|
| | | level5.color = '#99004c'
|
|---|
| | | level6.color = '#7e0023'
|
|---|
| | |
|
|---|
| | | $.each(that.showPoints, function(index, value) {
|
|---|
| | | $.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 = []
|
|---|
| | |
|---|
| | |
|
|---|
| | | // point上添加label文本
|
|---|
| | | function setLabelStyle(content, point) {
|
|---|
| | | var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容
|
|---|
| | | var label = new BMapGL.Label(
|
|---|
| | | "<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容
|
|---|
| | | {
|
|---|
| | | offset: new BMapGL.Size(-8, -10), // label的偏移量，为了让label的中心显示在点上
|
|---|
| | | position: point
|
|---|
| | | position: point,
|
|---|
| | | } // label的位置
|
|---|
| | | )
|
|---|
| | | var offsetSize = new BMapGL.Size(0, 0)
|
|---|
| | |
|---|
| | | // 无数据时,缩放至该中心
|
|---|
| | | function showNoPoints() {
|
|---|
| | | that.map.centerAndZoom('苏州市', 17)
|
|---|
| | | setTimeout(function() {
|
|---|
| | | setTimeout(function () {
|
|---|
| | | document.getElementById('cpm').style.display = 'block'
|
|---|
| | | document.getElementById('data').style.display = 'none'
|
|---|
| | | }, 250)
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // 地图缩放级别监控
|
|---|
| | | that.map.addEventListener('zoomend', function() {
|
|---|
| | | 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)
|
|---|
| | | $('span.my-maptip')
|
|---|
| | | .parent()
|
|---|
| | | .css('font-size', 30 - zoom)
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | // var that = this
|
|---|
| | |
|---|
| | | margin: 0;
|
|---|
| | | z-index: 0;
|
|---|
| | | font-size: 14px;
|
|---|
| | | font-family: "微软雅黑";
|
|---|
| | | font-family: '微软雅黑';
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .main_body {
|
|---|
| | |
|---|
| | | margin-top: -50px;
|
|---|
| | | z-index: 11;
|
|---|
| | | color: #000000;
|
|---|
| | | border: 2px solid #FF7F50;
|
|---|
| | | border: 2px solid #ff7f50;
|
|---|
| | | font-size: 28px;
|
|---|
| | | line-height: 100px;
|
|---|
| | | text-align: center;
|
|---|
| | |
|---|
| | | border-right: 1px solid #aaa;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .carTop{
|
|---|
| | | &>.left:nth-child(1){
|
|---|
| | | .carTop {
|
|---|
| | | & > .left:nth-child(1) {
|
|---|
| | | border-radius: 5px 0 0 5px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | class="left"
|
|---|
| | | :class="{ click: changeColor === index }"
|
|---|
| | | @click="change(index)"
|
|---|
| | | >{{ item }}</span>
|
|---|
| | | >{{ 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">
|
|---|
| | | <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">
|
|---|
| | | <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
|
|---|
| | | </span>
|
|---|
| | | </div>
|
|---|
| | | <div class="topDate" style="height: 60px">
|
|---|
| | |
|---|
| | | <li></li>
|
|---|
| | | <li>00</li>
|
|---|
| | | </ul>
|
|---|
| | | <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">
|
|---|
| | | <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="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>
|
|---|
| | | <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" />
|
|---|
| | | <div
|
|---|
| | | :style="{ background: 'url(' + bg + ') no-repeat' }"
|
|---|
| | | class="buttom-left"
|
|---|
| | | />
|
|---|
| | | <el-dialog
|
|---|
| | | title="污染报警查询"
|
|---|
| | | :visible.sync="alarmTableVisible"
|
|---|
| | |
|---|
| | | <div>
|
|---|
| | | <el-date-picker
|
|---|
| | | v-model="dateValue"
|
|---|
| | | style="width:400px"
|
|---|
| | | style="width: 400px"
|
|---|
| | | type="daterange"
|
|---|
| | | range-separator="至"
|
|---|
| | | start-placeholder="开始日期"
|
|---|
| | |
|---|
| | | :value="item.value"
|
|---|
| | | />
|
|---|
| | | </el-select>
|
|---|
| | | <el-button type="primary" @click="alertData(PageSize, currentPage)">查询</el-button>
|
|---|
| | | <el-button type="primary" @click="alertData(PageSize, currentPage)"
|
|---|
| | | >查询</el-button
|
|---|
| | | >
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <el-table
|
|---|
| | | :data="gridData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
|
|---|
| | | :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="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-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"
|
|---|
| | |
|---|
| | | @current-change="handleCurrentChange"
|
|---|
| | | />
|
|---|
| | | <div slot="footer" class="dialog-footer">
|
|---|
| | | <el-button size="mini" @click="alarmTableVisible = false">关 闭</el-button>
|
|---|
| | | <el-button size="mini" @click="alarmTableVisible = false"
|
|---|
| | | >关 闭</el-button
|
|---|
| | | >
|
|---|
| | | </div>
|
|---|
| | | </el-dialog>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | weidu: Number,
|
|---|
| | | jingdu: Number,
|
|---|
| | | monitorPointId: Number,
|
|---|
| | | monitorPointIds: Array
|
|---|
| | | monitorPointIds: Array,
|
|---|
| | | },
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | |
|---|
| | | code: [],
|
|---|
| | | latlng: [],
|
|---|
| | | noneData: false,
|
|---|
| | | params: [
|
|---|
| | | 'PM10',
|
|---|
| | | 'PM2.5',
|
|---|
| | | 'SO2',
|
|---|
| | | 'NO2',
|
|---|
| | | 'CO',
|
|---|
| | | 'O3',
|
|---|
| | | 'TVOC'
|
|---|
| | | ],
|
|---|
| | | params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
|
|---|
| | | changeColor: 0,
|
|---|
| | | times: 1,
|
|---|
| | | sensorKey: 'a34002',
|
|---|
| | |
|---|
| | | factorOptions: [
|
|---|
| | | {
|
|---|
| | | label: '全部因子',
|
|---|
| | | value: 'all'
|
|---|
| | | value: 'all',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'PM10',
|
|---|
| | | value: 'PM10'
|
|---|
| | | value: 'PM10',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'PM2.5',
|
|---|
| | | value: 'PM2.5'
|
|---|
| | | value: 'PM2.5',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'SO2',
|
|---|
| | | value: 'SO2'
|
|---|
| | | value: 'SO2',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'NO2',
|
|---|
| | | value: 'NO2'
|
|---|
| | | value: 'NO2',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'CO',
|
|---|
| | | value: 'CO'
|
|---|
| | | value: 'CO',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: 'O3',
|
|---|
| | | value: 'O3'
|
|---|
| | | }
|
|---|
| | | value: 'O3',
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | alertOptions: [
|
|---|
| | | {
|
|---|
| | | label: '全部报警类型',
|
|---|
| | | value: 'all'
|
|---|
| | | value: 'all',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超限',
|
|---|
| | | value: 'overrun'
|
|---|
| | | value: 'overrun',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '突然高',
|
|---|
| | | value: 'sudden'
|
|---|
| | | value: 'sudden',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过国控站点100%',
|
|---|
| | | value: 'state100'
|
|---|
| | | value: 'state100',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过国控站点150%',
|
|---|
| | | value: 'state150'
|
|---|
| | | value: 'state150',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过国控站点250%',
|
|---|
| | | value: 'state250'
|
|---|
| | | value: 'state250',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过市区均值100%',
|
|---|
| | | value: 'city100'
|
|---|
| | | value: 'city100',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过市区均值150%',
|
|---|
| | | value: 'city150'
|
|---|
| | | value: 'city150',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: '超过市区均值250%',
|
|---|
| | | value: 'city250'
|
|---|
| | | }
|
|---|
| | | value: 'city250',
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | currentDate: '',
|
|---|
| | | turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
|
|---|
| | |
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapGetters(['regionCode'])
|
|---|
| | | ...mapGetters(['regionCode']),
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | dateValue(n, o) {
|
|---|
| | |
|---|
| | | },
|
|---|
| | | regionCode(newCode, oldCode) {
|
|---|
| | | this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.currentHour()
|
|---|
| | | this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)
|
|---|
| | | this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))
|
|---|
| | | // 初始化地图容器
|
|---|
| | | this.initMap()
|
|---|
| | |
|
|---|
| | |
|---|
| | | if (day === 'today') {
|
|---|
| | | rq = this.newData(0)
|
|---|
| | | } else if (day === 'yesterday') {
|
|---|
| | | days = ((days + 7) - 1) % 7
|
|---|
| | | days = (days + 7 - 1) % 7
|
|---|
| | | rq = this.newData(-1) // 昨天日期
|
|---|
| | | } else if (day === 'beforeYea') {
|
|---|
| | | days = ((days + 7) - 2) % 7
|
|---|
| | | days = (days + 7 - 2) % 7
|
|---|
| | | rq = this.newData(-2) // 前天日期
|
|---|
| | | }
|
|---|
| | | switch (days) {
|
|---|
| | |
|---|
| | | lis[i].style.backgroundColor = 'green'
|
|---|
| | | if (lis[i] === target) {
|
|---|
| | | // mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
|---|
| | | mouseDiv2.style.left = (1.36986 * (i + 1)) + '%'
|
|---|
| | | mouseDiv2.style.left = 1.36986 * (i + 1) + '%'
|
|---|
| | | mouseDiv2.style.transform = 'translateX(-50%)'
|
|---|
| | | mouseDiv2.style.display = 'block'
|
|---|
| | | var times = (i - 0 + 1) % 24
|
|---|
| | |
|---|
| | | that.getParamsData()
|
|---|
| | | }
|
|---|
| | | // timeUl绑定点击事件
|
|---|
| | | timeUl.onclick = e => {
|
|---|
| | | timeUl.onclick = (e) => {
|
|---|
| | | // 给所有的li颜色设为初始值
|
|---|
| | | var target = e.target
|
|---|
| | | if (target.tagName.toLowerCase() === 'li') {
|
|---|
| | |
|---|
| | | if (timeLis[i] === target) {
|
|---|
| | | greenInfo = i
|
|---|
| | | // mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
|---|
| | | mouseDiv2.style.left = (1.36986 * i) + '%'
|
|---|
| | | mouseDiv2.style.left = 1.36986 * i + '%'
|
|---|
| | | mouseDiv2.style.transform = 'translateX(-50%)'
|
|---|
| | | mouseDiv2.style.display = 'block'
|
|---|
| | | var times = i % 24
|
|---|
| | |
|---|
| | | }
|
|---|
| | | // 鼠标移入移出事件
|
|---|
| | | for (let i = 0; i < lis.length; i++) {
|
|---|
| | | lis[i].onmouseenter = function() {
|
|---|
| | | lis[i].onmouseenter = function () {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
|---|
| | | mouseDiv.style.transform = 'translateX(-50%)'
|
|---|
| | | mouseDiv.style.left = (1.36986 * (i + 1)) + '%'
|
|---|
| | | mouseDiv.style.left = 1.36986 * (i + 1) + '%'
|
|---|
| | | 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() {
|
|---|
| | | lis[i].onmouseleave = function () {
|
|---|
| | | mouseDiv.style.display = 'none'
|
|---|
| | | // console.log('移出事件', i)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | for (let i = 0; i < timeLis.length; i++) {
|
|---|
| | | timeLis[i].onmouseenter = function() {
|
|---|
| | | timeLis[i].onmouseenter = function () {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
|---|
| | | mouseDiv.style.left = (1.36986 * i) + '%'
|
|---|
| | | mouseDiv.style.left = 1.36986 * i + '%'
|
|---|
| | | mouseDiv.style.transform = 'translateX(-50%)'
|
|---|
| | | mouseDiv.style.display = 'block'
|
|---|
| | | var times = i % 24
|
|---|
| | |
|---|
| | | inText.innerHTML = times + ':00'
|
|---|
| | | // console.log(mouseDiv)
|
|---|
| | | }
|
|---|
| | | timeLis[i].onmouseleave = function() {
|
|---|
| | | timeLis[i].onmouseleave = function () {
|
|---|
| | | mouseDiv.style.display = 'none'
|
|---|
| | | // console.log('移出事件', i)
|
|---|
| | | }
|
|---|
| | |
|---|
| | | // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
|---|
| | | // this.dateFormat = currentDate.toString()
|
|---|
| | | const aData = new Date()
|
|---|
| | | const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
|---|
| | | const date = aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
|
|---|
| | | const hour = aData.getHours() |
|---|
| | | const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
|---|
| | | const month =
|
|---|
| | | aData.getMonth() < 9
|
|---|
| | | ? '0' + (aData.getMonth() + 1)
|
|---|
| | | : aData.getMonth() + 1
|
|---|
| | | const date =
|
|---|
| | | aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
|
|---|
| | | const hour = aData.getHours()
|
|---|
| | | 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 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)
|
|---|
| | |
|---|
| | | 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()
|
|---|
| | | },
|
|---|
| | | // 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心跳开启')
|
|---|
| | | // 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)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 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_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)
|
|---|
| | |
|---|
| | | deviceMaker() {
|
|---|
| | | // 遍历所有图层
|
|---|
| | | if (this.map) {
|
|---|
| | | this.map.eachLayer(function(layer) {
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | |
|---|
| | | organizationId: this.$store.state.orgId,
|
|---|
| | | regionCode: this.$store.state.regionCode,
|
|---|
| | | chooseTime: this.chooseTime,
|
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | time: this.nyr,
|
|---|
| | | },
|
|---|
| | | }).then((data) => {
|
|---|
| | | // console.log('五分钟设备数据')
|
|---|
| | | // console.log(data)
|
|---|
| | | console.log(data,'tata')
|
|---|
| | | that.loading = false
|
|---|
| | | this.markDeviceSite(data)
|
|---|
| | | })
|
|---|
| | |
|---|
| | | // }
|
|---|
| | | }
|
|---|
| | | // console.log(this.keys)
|
|---|
| | | // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)
|
|---|
| | | // var lat = newL[0]
|
|---|
| | | // this.lats[i] = newL[0]
|
|---|
| | | // var lng = newL[1]
|
|---|
| | | // this.lngs[i] = newL[1]
|
|---|
| | | var lat = keyData[i].latitude
|
|---|
| | | this.lats[i] = keyData[i].latitude
|
|---|
| | | var lng = keyData[i].longitude
|
|---|
| | |
|---|
| | | if (keyData[i].a34002) {
|
|---|
| | | var data = Math.floor(JSON.parse(keyData[i].a34002))
|
|---|
| | | switch (true) {
|
|---|
| | | case (data < 0): {
|
|---|
| | | case data < 0: {
|
|---|
| | | colorNum = 7
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data === 0): {
|
|---|
| | | case data === 0: {
|
|---|
| | | colorNum = 0
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data <= 50): {
|
|---|
| | | case data <= 50: {
|
|---|
| | | colorNum = 1
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data <= 150): {
|
|---|
| | | case data <= 150: {
|
|---|
| | | colorNum = 2
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data <= 250): {
|
|---|
| | | case data <= 250: {
|
|---|
| | | colorNum = 3
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data <= 350): {
|
|---|
| | | case data <= 350: {
|
|---|
| | | colorNum = 4
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data <= 420): {
|
|---|
| | | case data <= 420: {
|
|---|
| | | colorNum = 5
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case (data > 420): {
|
|---|
| | | case data > 420: {
|
|---|
| | | colorNum = 6
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | |
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | } else if (keyData[i].a21004) {
|
|---|
| | | var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
|
|---|
| | | var data = Math.floor(
|
|---|
| | | Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
|
|---|
| | | )
|
|---|
| | | switch (true) {
|
|---|
| | | case data < 0: {
|
|---|
| | | colorNum = 7
|
|---|
| | |
|---|
| | | colorNum = 6
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | // default:
|
|---|
| | | // break
|
|---|
| | | // default:
|
|---|
| | | // break
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | |
|---|
| | | // iconUrl: require('@/assets/icon/ico2.png'),
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [13, 21],
|
|---|
| | | className: 'my-device'
|
|---|
| | | className: 'my-device',
|
|---|
| | | })
|
|---|
| | | // 添加标记到地图
|
|---|
| | | L.marker([lat, lng], {
|
|---|
| | | icon: blueIcon
|
|---|
| | | 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
|
|---|
| | | iconSize: 30,
|
|---|
| | | })
|
|---|
| | | var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
|
|---|
| | | // 给标记添加鼠标移入事件，mouseover事件会冒泡
|
|---|
| | | var _this = this
|
|---|
| | | marker.on('mouseover', function(e) {
|
|---|
| | | marker.on('mouseover', function (e) {
|
|---|
| | | this.noneData = false
|
|---|
| | | // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (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,
|
|---|
| | | chooseTime: _this.chooseTime,
|
|---|
| | | time: _this.nyr
|
|---|
| | | }
|
|---|
| | | }).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]
|
|---|
| | | _this
|
|---|
| | | .$request({
|
|---|
| | | url: '/historyFiveMinutely/queryPopDataByMac',
|
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | mac: keyData[i].mac,
|
|---|
| | | chooseTime: _this.chooseTime,
|
|---|
| | | time: _this.nyr,
|
|---|
| | | },
|
|---|
| | | })
|
|---|
| | | .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 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)
|
|---|
| | | })
|
|---|
| | | 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) {
|
|---|
| | | marker.on('mouseout', function (e) {
|
|---|
| | | this.noneData = false
|
|---|
| | | this.bindPopup().closePopup()
|
|---|
| | | })
|
|---|
| | |
|---|
| | | 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)
|
|---|
| | | 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() {
|
|---|
| | |
|---|
| | | // const that = this
|
|---|
| | | // 遍历所有图层
|
|---|
| | | if (this.map) {
|
|---|
| | | this.map.eachLayer(function(layer) {
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | |
|---|
| | | this.deviceMaker()
|
|---|
| | | // 执行ws方法
|
|---|
| | | // this.wsStart()
|
|---|
| | | this.initWebpack()
|
|---|
| | | // this.initWebpack()
|
|---|
| | | // console.log('这是ws需要的三个参数')
|
|---|
| | | // console.log(this.accountId, this.orgId, this.regionCode)
|
|---|
| | | // this.timer2 = setInterval(() => {
|
|---|
| | |
|---|
| | | // 请求更新风场数据
|
|---|
| | | 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('跳转成功')
|
|---|
| | | })
|
|---|
| | | $.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()
|
|---|
| | |
|---|
| | | getParamsData() {
|
|---|
| | | clearInterval(this.timer)
|
|---|
| | | this.timer = setInterval(() => {
|
|---|
| | | this.currentHour()
|
|---|
| | | this.times--
|
|---|
| | | if (this.times === 0) {
|
|---|
| | | // 时间点选择标记消失
|
|---|
| | |
|---|
| | | zoom: 14,
|
|---|
| | | zoomControl: false, // 缩放组件
|
|---|
| | | attributionControl: false, // 去掉右下角logol
|
|---|
| | | crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
|
|---|
| | | 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(
|
|---|
| | | '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.changeColor = index
|
|---|
| | | var pr = ''
|
|---|
| | | switch (index) {
|
|---|
| | | case 0: pr = 'a34002'
|
|---|
| | | case 0:
|
|---|
| | | pr = 'a34002'
|
|---|
| | | this.bg = require('@/assets/images/tl_PM10.png')
|
|---|
| | | break
|
|---|
| | | case 1: pr = 'a34004'
|
|---|
| | | case 1:
|
|---|
| | | pr = 'a34004'
|
|---|
| | | this.bg = require('@/assets/images/tl_PM2.5.png')
|
|---|
| | | break
|
|---|
| | | case 2: pr = 'a21026'
|
|---|
| | | case 2:
|
|---|
| | | pr = 'a21026'
|
|---|
| | | this.bg = require('@/assets/images/tl_SO2.png')
|
|---|
| | | break
|
|---|
| | | case 3: pr = 'a21004'
|
|---|
| | | case 3:
|
|---|
| | | pr = 'a21004'
|
|---|
| | | this.bg = require('@/assets/images/tl_NO2.png')
|
|---|
| | | break
|
|---|
| | | case 4: pr = 'a21005'
|
|---|
| | | case 4:
|
|---|
| | | pr = 'a21005'
|
|---|
| | | this.bg = require('@/assets/images/tl_CO.png')
|
|---|
| | | break
|
|---|
| | | case 5: pr = 'a05024'
|
|---|
| | | case 5:
|
|---|
| | | pr = 'a05024'
|
|---|
| | | this.bg = require('@/assets/images/tl_O3.png')
|
|---|
| | | break
|
|---|
| | | case 6: pr = 'a99054'
|
|---|
| | | case 6:
|
|---|
| | | pr = 'a99054'
|
|---|
| | | this.bg = require('@/assets/images/tl_TVOCNew.png')
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | |
|---|
| | | // console.log(this.monitorPointId)
|
|---|
| | | // 遍历所有图层
|
|---|
| | | if (this.map) {
|
|---|
| | | this.map.eachLayer(function(layer) {
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | |
|---|
| | | params: {
|
|---|
| | | monitorPointIds: this.monitorPointIds.toString(),
|
|---|
| | | chooseTime: this.chooseTime,
|
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | }).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)
|
|---|
| | | time: this.nyr,
|
|---|
| | | },
|
|---|
| | | })
|
|---|
| | | .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) {
|
|---|
| | |
|---|
| | | startTime: this.dateValue[0],
|
|---|
| | | endTime: this.dateValue[1],
|
|---|
| | | index: this.factorValue,
|
|---|
| | | alarmType: this.alartValue
|
|---|
| | | 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
|
|---|
| | | })
|
|---|
| | | .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
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 分页
|
|---|
| | | // 每页显示的条数
|
|---|
| | |
|---|
| | | // console.log(row[key])
|
|---|
| | | if (row[key] === 0 || row[key] === '' || row[key] === null) {
|
|---|
| | | return ''
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) {
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {
|
|---|
| | | return 'yellow'
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) {
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {
|
|---|
| | | return 'orange'
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) {
|
|---|
| | | } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {
|
|---|
| | | return 'red'
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | },
|
|---|
| | | closeAlarmTableVisible() {
|
|---|
| | | this.$store.state.alarmTableVisible = false
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | |
|---|
| | | box-shadow: 1px 1px 5px #666;
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | .mouseDiv, .mouseDiv2{
|
|---|
| | | .mouseDiv,
|
|---|
| | | .mouseDiv2 {
|
|---|
| | | position: absolute;
|
|---|
| | | left: 0;
|
|---|
| | | background-color: #009845;
|
|---|
| | |
|---|
| | | padding: 1px;
|
|---|
| | | color: white;
|
|---|
| | | }
|
|---|
| | | .sjDiv, .sjDiv2{
|
|---|
| | | .sjDiv,
|
|---|
| | | .sjDiv2 {
|
|---|
| | | width: 0px;
|
|---|
| | | height: 0px;
|
|---|
| | | border: 10px solid transparent;
|
|---|
| | |
|---|
| | | top: 100%;
|
|---|
| | | z-index: -1;
|
|---|
| | | }
|
|---|
| | | .mouseDiv2{
|
|---|
| | | .mouseDiv2 {
|
|---|
| | | background-color: #2b2b2b;
|
|---|
| | | }
|
|---|
| | | .sjDiv2{
|
|---|
| | | .sjDiv2 {
|
|---|
| | | border-top-color: #2b2b2b;
|
|---|
| | | }
|
|---|
| | | .jdt{
|
|---|
| | | .jdt {
|
|---|
| | | height: 5px;
|
|---|
| | | width: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | position: relative;
|
|---|
| | | }
|
|---|
| | | .timeDiv{
|
|---|
| | | .timeDiv {
|
|---|
| | | width: 100%;
|
|---|
| | | float: left;
|
|---|
| | | }
|
|---|
| | | .topDate .timeDiv:nth-child(3){
|
|---|
| | | .topDate .timeDiv:nth-child(3) {
|
|---|
| | | border-left: 1px solid white;
|
|---|
| | | border-right: 1px solid white;
|
|---|
| | | }
|
|---|
| | | .topDate ul{
|
|---|
| | | .topDate ul {
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | list-style: none;
|
|---|
| | | display: flex;
|
|---|
| | | }
|
|---|
| | | .topDate li{
|
|---|
| | | .topDate li {
|
|---|
| | | width: 1.36986%;
|
|---|
| | | //padding: 0 2%;
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | //transform: translateX(50%);
|
|---|
| | | }
|
|---|
| | | .topDate p{
|
|---|
| | | .topDate p {
|
|---|
| | | text-align: center;
|
|---|
| | | font-size: 16px;
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | }
|
|---|
| | | .jdt li{
|
|---|
| | | .jdt li {
|
|---|
| | | //box-sizing: border-box;
|
|---|
| | | border-left: 1px solid white;
|
|---|
| | | background-color: rgba(0,0,0,0.3);
|
|---|
| | | background-color: rgba(0, 0, 0, 0.3);
|
|---|
| | | height: 100%;
|
|---|
| | | width: 1.36986%;
|
|---|
| | | list-style: none;
|
|---|
| | |
|---|
| | | left: 0;
|
|---|
| | | top: 0;
|
|---|
| | | }
|
|---|
| | | .dayDiv p{
|
|---|
| | | .dayDiv p {
|
|---|
| | | width: 32.87664%;
|
|---|
| | | text-align: center;
|
|---|
| | | }
|
|---|
| | |
|---|
| | | position: fixed;
|
|---|
| | | right: 0;
|
|---|
| | | top: 50px;
|
|---|
| | | background-color: rgba(15, 69, 103, 0.8);
|
|---|
| | | background-color: rgba(15, 69, 103, 0.8);
|
|---|
| | | }
|
|---|
| | | .dropDown > .drop-icon {
|
|---|
| | | vertical-align: middle;
|
|---|
| | |
|---|
| | | -webkit-transform-origin-x: 0;
|
|---|
| | | margin-left: 20px;
|
|---|
| | | }
|
|---|
| | | .el-dialog__body{
|
|---|
| | | .el-dialog__body {
|
|---|
| | | padding: 10px 20px;
|
|---|
| | | }
|
|---|
| | | .el-dialog__footer{
|
|---|
| | | .el-dialog__footer {
|
|---|
| | | padding: 0px 20px 15px;
|
|---|
| | | }
|
|---|
| | | .yellow{
|
|---|
| | | background-color: #ffff00!important;
|
|---|
| | | color: #868600!important;
|
|---|
| | | .yellow {
|
|---|
| | | background-color: #ffff00 !important;
|
|---|
| | | color: #868600 !important;
|
|---|
| | | }
|
|---|
| | | .orange{
|
|---|
| | | background-color: #ff7e00!important;
|
|---|
| | | color: #844100!important;
|
|---|
| | | .orange {
|
|---|
| | | background-color: #ff7e00 !important;
|
|---|
| | | color: #844100 !important;
|
|---|
| | | }
|
|---|
| | | .red{
|
|---|
| | | background-color: #ff0000!important;
|
|---|
| | | color: #790000!important;
|
|---|
| | | .red {
|
|---|
| | | background-color: #ff0000 !important;
|
|---|
| | | color: #790000 !important;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|---|
| | | regionCode: this.$store.state.regionCode |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | // console.log(res,'getRankData'); |
|---|
| | | if (res.code === 0) { |
|---|
| | | // console.log(res.data) |
|---|
| | | this.time = res.data.time |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="air_trend"> |
|---|
| | | <div class="air_top header_air"> |
|---|
| | | <img class="air_img" :src="require('@/assets/images/regionalOverview/histogram.png')" alt=""> |
|---|
| | | <img |
|---|
| | | class="air_img" |
|---|
| | | :src="require('@/assets/images/regionalOverview/histogram.png')" |
|---|
| | | alt="" |
|---|
| | | /> |
|---|
| | | <span class="air_text">最近24小时空气变化趋势</span> |
|---|
| | | </div> |
|---|
| | | <div v-if="this.dataAxis.length > 0" class="air_histogram"> |
|---|
| | | <div id="myChart" :style="{width: '100%', height: '200px'}" /> |
|---|
| | | <div v-show="this.dataAxis.length > 0" class="air_histogram"> |
|---|
| | | <div id="myChart" :style="{width: '350px', height: '200px'}"/> |
|---|
| | | </div> |
|---|
| | | <div v-else style="width: 100%"> |
|---|
| | | <el-empty style="width: 100%" :image-size="60" description="无空气变化数据" /> |
|---|
| | | <div v-show="this.dataAxis.length <= 0" style="width: 100%"> |
|---|
| | | <el-empty |
|---|
| | | style="width: 100%" |
|---|
| | | :image-size="60" |
|---|
| | | description="无空气变化数据" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | return { |
|---|
| | | dataAxis: [], |
|---|
| | | dataValue: [], |
|---|
| | | timer: null |
|---|
| | | timer: null, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.query24HoursAQI() |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // console.log(this.timer) |
|---|
| | | if (this.timer !== null) { |
|---|
| | | clearInterval(this.timer) |
|---|
| | | this.timer = null |
|---|
| | |
|---|
| | | url: '/aqi/query24HoursAQI', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | regionCode: this.$store.state.regionCode |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | regionCode: this.$store.state.regionCode, |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.code === 0) { |
|---|
| | | const arr = [] |
|---|
| | | const arr1 = [] |
|---|
| | |
|---|
| | | } |
|---|
| | | this.dataAxis = arr |
|---|
| | | this.dataValue = arr1 |
|---|
| | | this.initChats() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | |
|---|
| | | const myChart = echarts.init(chartDom) |
|---|
| | | // 'aqi': [50, 100, 150, 200, 300] |
|---|
| | | let option |
|---|
| | | const dataObj = this.dataValue.map(value => { |
|---|
| | | const dataObj = this.dataValue.map((value) => { |
|---|
| | | const obj = {} |
|---|
| | | obj.value = value |
|---|
| | | const itemStyle = { |
|---|
| | | color: value < 50 ? '#00e400' : value < 100 ? '#ffff00' : value < 150 ? '#ff7e00' : value < 200 ? '#ff0000' : value < 300 ? '#99004c' : '#7e0023' |
|---|
| | | color: |
|---|
| | | value < 50 |
|---|
| | | ? '#00e400' |
|---|
| | | : value < 100 |
|---|
| | | ? '#ffff00' |
|---|
| | | : value < 150 |
|---|
| | | ? '#ff7e00' |
|---|
| | | : value < 200 |
|---|
| | | ? '#ff0000' |
|---|
| | | : value < 300 |
|---|
| | | ? '#99004c' |
|---|
| | | : '#7e0023', |
|---|
| | | } |
|---|
| | | obj.itemStyle = itemStyle |
|---|
| | | return obj |
|---|
| | |
|---|
| | | borderWidth: '1', |
|---|
| | | borderColor: '#d9d9d9', |
|---|
| | | textStyle: { |
|---|
| | | color: '#808080' |
|---|
| | | color: '#808080', |
|---|
| | | }, |
|---|
| | | axisPointer: { |
|---|
| | | type: 'none', |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(128, 128, 128, .6)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | color: 'rgba(128, 128, 128, .6)', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: this.dataAxis, |
|---|
| | | axisTick: { |
|---|
| | | alignWithLabel: true |
|---|
| | | alignWithLabel: true, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | inside: false, |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | formatter: function(value) { |
|---|
| | | formatter: function (value) { |
|---|
| | | return echarts.format.formatTime('hh:mm', new Date(value)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(153, 153, 153, 0.4)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | color: 'rgba(153, 153, 153, 0.4)', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | yAxis: { |
|---|
| | | // 定义网格线条的颜色 |
|---|
| | |
|---|
| | | lineStyle: { |
|---|
| | | color: 'rgba(153, 153, 153, 0.1)', |
|---|
| | | width: 1, |
|---|
| | | type: 'solid' |
|---|
| | | } |
|---|
| | | type: 'solid', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: '#999' |
|---|
| | | } |
|---|
| | | color: '#999', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'AQI', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '60%', |
|---|
| | | data: dataObj |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | data: dataObj, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | myChart.setOption(option) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less"> |
|---|
| | | .air_trend { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 6px; |
|---|
| | | background-color: #fff; |
|---|
| | | //box-shadow: 0 0 5px 1px #999; |
|---|
| | | padding: 0; |
|---|
| | | border: solid 1px #d9d9d9; |
|---|
| | | border-radius: 3px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | .air_trend { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 6px; |
|---|
| | | background-color: #fff; |
|---|
| | | //box-shadow: 0 0 5px 1px #999; |
|---|
| | | padding: 0; |
|---|
| | | border: solid 1px #d9d9d9; |
|---|
| | | border-radius: 3px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .air_trend > .air_top { |
|---|
| | | display: inline-block; |
|---|
| | | outline: none; |
|---|
| | | width: 100%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | .header_air { |
|---|
| | | position: relative; |
|---|
| | | height: 40px; |
|---|
| | | background-color: #f8f7f7; |
|---|
| | | .air_img { |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 16px; |
|---|
| | | width: 20px; |
|---|
| | | } |
|---|
| | | .air_trend > .air_top { |
|---|
| | | display: inline-block; |
|---|
| | | outline: none; |
|---|
| | | width: 100%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | .header_air { |
|---|
| | | position: relative; |
|---|
| | | .air_text { |
|---|
| | | position: absolute; |
|---|
| | | height: 40px; |
|---|
| | | background-color: #F8F7F7; |
|---|
| | | .air_img { |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 16px; |
|---|
| | | width: 20px; |
|---|
| | | } |
|---|
| | | .air_text { |
|---|
| | | position: absolute; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 40px; |
|---|
| | | left: 40px; |
|---|
| | | font-size: 15px; |
|---|
| | | color: #808080; |
|---|
| | | } |
|---|
| | | line-height: 40px; |
|---|
| | | left: 40px; |
|---|
| | | font-size: 15px; |
|---|
| | | color: #808080; |
|---|
| | | } |
|---|
| | | .air_histogram { |
|---|
| | | width: 100%; |
|---|
| | | height: 200px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .air_histogram { |
|---|
| | | width: 100%; |
|---|
| | | height: 200px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="excellent_proportion"> |
|---|
| | | <div class="excellent_top header_excellent"> |
|---|
| | | <img class="pie_img" :src="require('@/assets/images/regionalOverview/pieChart.png')" alt=""> |
|---|
| | | <span class="proportion_title"><span v-if="timeArea">优良天数占比({{ timeArea }})</span><span v-else>优良天数占比</span></span> |
|---|
| | | <img class="open" :src="require('@/assets/images/regionalOverview/open.png')" alt="" style="cursor:pointer" @click="jumpLevelStatistic"> |
|---|
| | | <img |
|---|
| | | class="pie_img" |
|---|
| | | :src="require('@/assets/images/regionalOverview/pieChart.png')" |
|---|
| | | alt="" |
|---|
| | | /> |
|---|
| | | <span class="proportion_title" |
|---|
| | | ><span v-if="timeArea">优良天数占比({{ timeArea }})</span |
|---|
| | | ><span v-else>优良天数占比</span></span |
|---|
| | | > |
|---|
| | | <img |
|---|
| | | class="open" |
|---|
| | | :src="require('@/assets/images/regionalOverview/open.png')" |
|---|
| | | alt="" |
|---|
| | | style="cursor: pointer" |
|---|
| | | @click="jumpLevelStatistic" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="proportion_pie" v-if="this.timeArea"> |
|---|
| | | <pie-chart-new :datas="data" :save="false" /> |
|---|
| | | </div> |
|---|
| | | <div v-else style="width: 100%"> |
|---|
| | | <el-empty style="width: 100%" :image-size="60" description="无统计数据"></el-empty> |
|---|
| | | <el-empty |
|---|
| | | style="width: 100%" |
|---|
| | | :image-size="60" |
|---|
| | | description="无统计数据" |
|---|
| | | ></el-empty> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | timeArea: '', |
|---|
| | | data: [] |
|---|
| | | data: [], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.queryPieChartOfPollutionLevel() |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | methods: { |
|---|
| | | // 获取天气污染等级比例饼状图数据 |
|---|
| | | queryPieChartOfPollutionLevel() { |
|---|
| | |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | regionCode: this.$store.state.regionCode, |
|---|
| | | year: new Date().getFullYear() |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | year: new Date().getFullYear(), |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.code === 0) { |
|---|
| | | this.timeArea = res.data.time |
|---|
| | | this.data = res.data.values.map((item) => { |
|---|
| | |
|---|
| | | const levelIndex = item.pollution |
|---|
| | | let level = '' |
|---|
| | | switch (levelIndex) { |
|---|
| | | case '0': level = '优' |
|---|
| | | case '0': |
|---|
| | | level = '优' |
|---|
| | | break |
|---|
| | | case '1': level = '良' |
|---|
| | | case '1': |
|---|
| | | level = '良' |
|---|
| | | break |
|---|
| | | case '2': level = '轻度污染' |
|---|
| | | case '2': |
|---|
| | | level = '轻度污染' |
|---|
| | | break |
|---|
| | | case '3': level = '中度污染' |
|---|
| | | case '3': |
|---|
| | | level = '中度污染' |
|---|
| | | break |
|---|
| | | case '4': level = '重度污染' |
|---|
| | | case '4': |
|---|
| | | level = '重度污染' |
|---|
| | | break |
|---|
| | | case '5': level = '严重污染' |
|---|
| | | case '5': |
|---|
| | | level = '严重污染' |
|---|
| | | } |
|---|
| | | newMap.name = level + ': ' + item.proportion |
|---|
| | | return newMap |
|---|
| | |
|---|
| | | // 跳转页面 |
|---|
| | | jumpLevelStatistic() { |
|---|
| | | this.$router.push({ path: '/analyse/analyse/levelStatistic' }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | |
|---|
| | | .header_excellent { |
|---|
| | | position: relative; |
|---|
| | | height: 40px; |
|---|
| | | background-color: #F8F7F7; |
|---|
| | | background-color: #f8f7f7; |
|---|
| | | .pie_img { |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | |
|---|
| | | meta: { title: '列表数据导出', icon: 'example' } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const Equipment = { |
|---|
| | | path: 'report/Equipment', |
|---|
| | | name: 'Equipment', |
|---|
| | | component: () => import('@/views/Equipment/index'), |
|---|
| | | meta: { title: '设备数据', icon: 'example' } |
|---|
| | | } |
|---|
| | | const Equidata = { |
|---|
| | | path: 'report/Equidata', |
|---|
| | | name: 'Equipment', |
|---|
| | | component: () => import('@/views/Equidata/index'), |
|---|
| | | meta: { title: '设备数据导出', icon: 'example' } |
|---|
| | | } |
|---|
| | | // const Equipment = { |
|---|
| | | // path: 'report/Equipment', |
|---|
| | | // name: 'Equipment', |
|---|
| | | // component: () => import('@/views/Equipment/index'), |
|---|
| | | // meta: { title: '设备数据', icon: 'example' } |
|---|
| | | // } |
|---|
| | | // const Equidata = { |
|---|
| | | // path: 'report/Equidata', |
|---|
| | | // name: 'Equidata', |
|---|
| | | // component: () => import('@/views/Equidata/index'), |
|---|
| | | // meta: { title: '设备数据导出', icon: 'example' } |
|---|
| | | // } |
|---|
| | | // 综合分析 |
|---|
| | | // 城市空气质量排行 |
|---|
| | | const cityAirRank = { |
|---|
| | |
|---|
| | | air, |
|---|
| | | airQualityReportDisplay, |
|---|
| | | Monitoringstation, |
|---|
| | | Equipment, |
|---|
| | | // Equipment, |
|---|
| | | dailyreport, |
|---|
| | | sectionReport, |
|---|
| | | Listdata, |
|---|
| | | Equidata |
|---|
| | | // Equidata |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 网络请求，第一次登陆只有4个路由，所以要添加路由，页面刷新的时候，判断大于4个路由，就不会重新添加。 |
|---|
| | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | p.then(res => { |
|---|
| | | opts.getImage = function(image) { |
|---|
| | | opts.getImage = function (image) { |
|---|
| | | return base64DataURLToArrayBuffer(image) |
|---|
| | | } |
|---|
| | | opts.getSize = function() { |
|---|
| | | opts.getSize = function () { |
|---|
| | | return [480, 300] |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | var image = new Image() |
|---|
| | | image.crossOrigin = '' |
|---|
| | | image.src = url |
|---|
| | | image.onload = function() { |
|---|
| | | image.onload = function () { |
|---|
| | | base64Img = imageToBase64(image) |
|---|
| | | cb && cb(base64Img) |
|---|
| | | } |
|---|
| | |
|---|
| | | // const baseUrl = 'http://192.168.0.42:8081/' // lzj |
|---|
| | | // const baseUrl = 'http://192.168.0.33:8081/' // yy |
|---|
| | | // const baseUrl = 'http://192.168.0.25:8081' // jj |
|---|
| | | // const baseUrl = 'http://192.168.0.11:8085/'// swb |
|---|
| | | // const baseUrl = 'http://192.168.0.28:8081/'// cjl |
|---|
| | | // const baseUrl = 'http://192.168.0.11:8081/' // new swb |
|---|
| | | // const baseUrl = 'http://121.43.179.139:8080' |
|---|
| | | // const baseUrl = 'http://192.168.0.33:8085/' |
|---|
| | |
|---|
| | | style="width: 21rem" |
|---|
| | | /> |
|---|
| | | <!-- <div> --> |
|---|
| | | <el-select |
|---|
| | | <!-- <el-select |
|---|
| | | v-model="value" |
|---|
| | | placeholder="选择因子" |
|---|
| | | style="margin-left: 20px" |
|---|
| | |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="timevalue" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | value-format="yyyy-MM-dd HH" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | style="margin-left: 1rem" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </el-select> --> |
|---|
| | | <div style="margin-left: 1.5rem"> |
|---|
| | | <el-cascader |
|---|
| | | v-model="value" |
|---|
| | | :options="newSensor" |
|---|
| | | :props="props" |
|---|
| | | collapse-tags |
|---|
| | | clearable |
|---|
| | | ></el-cascader> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <el-select |
|---|
| | | v-model="select1" |
|---|
| | | placeholder="请选择" |
|---|
| | | style="margin-left: 1.5rem; width: 15rem" |
|---|
| | | > |
|---|
| | | <el-option |
|---|
| | | v-for="item in options1" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | > |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </div> |
|---|
| | | <component |
|---|
| | | :is="dataType" |
|---|
| | | style="padding-left: 0; margin-left: 20px; width: 160px" |
|---|
| | | @sendPickerChild="showPickerChild" |
|---|
| | | class="select11" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <el-button type="primary" @click="toExcel()" style="margin-left: 20px" |
|---|
| | | >导出</el-button |
|---|
| | |
|---|
| | | import FileSaver from 'file-saver' |
|---|
| | | import XLSX2 from 'xlsx-style' |
|---|
| | | import XLSX from 'xlsx' |
|---|
| | | import DatePicker from '@/components/Form/DatePicker' |
|---|
| | | import MouthPicker from '@/components/Form/MouthPicker' |
|---|
| | | import HourPicker from '@/components/Form/HourPicker' |
|---|
| | | import HourPicker1 from '@/components/Form/HourPicker1' |
|---|
| | | import CustomPicker from '@/components/Form/CustomPicker' |
|---|
| | | import CustomPicker1 from '@/components/Form/CustomPicker1' |
|---|
| | | import TimePicker1 from '@/components/Form/TimePicker1' |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | DatePicker, |
|---|
| | | MouthPicker, |
|---|
| | | HourPicker, |
|---|
| | | CustomPicker, |
|---|
| | | CustomPicker1, |
|---|
| | | TimePicker1, |
|---|
| | | HourPicker1, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | // 这里存放数据 |
|---|
| | | return { |
|---|
| | |
|---|
| | | columnList: [], //表头的数组 |
|---|
| | | dateList: [], |
|---|
| | | timevalue: [], |
|---|
| | | select1: '日报', |
|---|
| | | dataType: 'HourPicker', |
|---|
| | | unit: 'day', |
|---|
| | | options1: [ |
|---|
| | | { |
|---|
| | | label: '小时报', |
|---|
| | | value: '小时报', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '日报', |
|---|
| | | value: '日报', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '月报', |
|---|
| | | value: '月报', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | pickerOptions: { |
|---|
| | | disabledDate: (time) => { |
|---|
| | | return time.getTime() > new Date() |
|---|
| | |
|---|
| | | computed: {}, |
|---|
| | | // 监控data中的数据变化 |
|---|
| | | watch: { |
|---|
| | | select1(nv, ov) { |
|---|
| | | if (nv === '日报') { |
|---|
| | | this.dataType = 'HourPicker' |
|---|
| | | this.unit = 'day' |
|---|
| | | } else if (nv === '月报') { |
|---|
| | | this.dataType = 'DatePicker' |
|---|
| | | this.unit = 'month' |
|---|
| | | } else if (nv === '年报') { |
|---|
| | | this.dataType = 'MouthPicker' |
|---|
| | | this.unit = 'month' |
|---|
| | | } else if (nv === '小时报') { |
|---|
| | | this.dataType = 'HourPicker1' |
|---|
| | | this.unit = 'hours' |
|---|
| | | } else { |
|---|
| | | this.dataType = 'CustomPicker' |
|---|
| | | this.unit = 'hours' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 监听设备的数据更新 |
|---|
| | | newMac(newVal, oldval) { |
|---|
| | | this.newMac1 = [] |
|---|
| | |
|---|
| | | // 生命周期 - 创建完成（可以访问当前 this 实例） |
|---|
| | | created() { |
|---|
| | | this.getData() |
|---|
| | | // for (let key in this.timess[0]) { |
|---|
| | | // this.columnList.push(key) |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | // 生命周期 - 挂载完成（可以访问 DOM 元素） |
|---|
| | | // mounted() { |
|---|
| | |
|---|
| | | activated() {}, |
|---|
| | | // 方法集合 |
|---|
| | | methods: { |
|---|
| | | showPickerChild(data) { |
|---|
| | | this.newData = data |
|---|
| | | }, |
|---|
| | | getData() { |
|---|
| | | this.$request({ |
|---|
| | | url: '/monitorPoint/queryMonitorPoints', |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 通过设备号获得因子数据 |
|---|
| | | getSensor() { |
|---|
| | | this.newSensor = [] |
|---|
| | | this.$request({ |
|---|
| | | url: '/deviceInfo/getMacSensors', |
|---|
| | | method: 'post', |
|---|
| | |
|---|
| | | this.$message.warning('请选择因子') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.dateList = [] |
|---|
| | | this.columnList = [] |
|---|
| | | this.$request({ |
|---|
| | |
|---|
| | | data: { |
|---|
| | | macs: this.newMac1, |
|---|
| | | sensors: this.value.toString(), |
|---|
| | | startTime: this.timevalue[0], |
|---|
| | | endTime: this.timevalue[1], |
|---|
| | | // startTime: this.timevalue[0], |
|---|
| | | // endTime: this.timevalue[1], |
|---|
| | | type: this.unit, |
|---|
| | | times: this.newData instanceof Array ? this.newData : [this.newData], |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res, 11) |
|---|
| | | this.tableData = res.data |
|---|
| | | console.log(this.tableData, 'this.tableData') |
|---|
| | | // console.log(this.tableData, 'this.tableData') |
|---|
| | | for (let key in this.tableData[0]) { |
|---|
| | | this.columnList.push(key) |
|---|
| | | } |
|---|
| | |
|---|
| | | startvalue: '', |
|---|
| | | endvalue: '', |
|---|
| | | options: [], |
|---|
| | | valueww: '', |
|---|
| | | columnList: [], //表头的数组 |
|---|
| | | dateList: [], |
|---|
| | | newMac1: [], |
|---|
| | | Monfactors: [], |
|---|
| | | tableData: [], |
|---|
| | | tableFields: {}, |
|---|
| | | ddlist: [ |
|---|
| | | { |
|---|
| | | 'PM2.5': '11', |
|---|
| | | PM10: 155, |
|---|
| | | 时间: '2023-6-05', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 'PM2.5': '110', |
|---|
| | | PM10: 155, |
|---|
| | | 时间: '2023-6-05', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 'PM2.5': '110', |
|---|
| | | PM10: 159, |
|---|
| | | 时间: '2023-6-05', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | json_meta: [ |
|---|
| | | [ |
|---|
| | | { |
|---|
| | |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | exportMon() { |
|---|
| | | console.log(this.valueww, '123') |
|---|
| | | if (this.value === '') { |
|---|
| | | this.$message.warning('请选择检查设备') |
|---|
| | | return |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div style="width:100%; height: 100%; overflow-y: scroll"> |
|---|
| | | <div style="width: 100%; height: 100%; overflow-y: scroll"> |
|---|
| | | <div class="topSelect"> |
|---|
| | | <!-- <Region style="width:unset" @regionCode="ctfRegion" />--> |
|---|
| | | <!-- <Region style="width:unset" @regionCode="ctfRegion" />--> |
|---|
| | | <div> |
|---|
| | | <el-radio-group v-model="radio1" style="margin-left:20px; margin-right:20px" size="small"> |
|---|
| | | <el-radio-group |
|---|
| | | v-model="radio1" |
|---|
| | | style="margin-left: 20px; margin-right: 20px" |
|---|
| | | size="small" |
|---|
| | | > |
|---|
| | | <el-radio-button label="昨天" /> |
|---|
| | | <el-radio-button label="今天" /> |
|---|
| | | <el-radio-button label="明天" /> |
|---|
| | | </el-radio-group> |
|---|
| | | <!-- <TimePicker v-model="selectData" type="date" style="padding-left:0;margin-left:20px"/>--> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="selectData" |
|---|
| | | type="date" |
|---|
| | | placeholder="选择日期" |
|---|
| | | style="width: 160px;" |
|---|
| | | size="small" |
|---|
| | | v-model="selectData" |
|---|
| | | type="date" |
|---|
| | | placeholder="选择日期" |
|---|
| | | style="width: 160px" |
|---|
| | | size="small" |
|---|
| | | /> |
|---|
| | | <!-- <el-date-picker |
|---|
| | | v-model="value2" |
|---|
| | |
|---|
| | | value-format="yyyy-MM-dd" |
|---|
| | | />--> |
|---|
| | | <!--查询按钮--> |
|---|
| | | <!-- <el-button @click="selectDataBtn" class="btn1" size="small">查询</el-button>--> |
|---|
| | | <!-- <el-button @click="selectDataBtn" class="btn1" size="small">查询</el-button>--> |
|---|
| | | </div> |
|---|
| | | <div class="cityDiv" style="width: 20%; font-size: 15px"> |
|---|
| | | <div style="margin-bottom: 4%" class="spanDiv"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | <div style="display: flex; align-items: center"> |
|---|
| | | <div>城市：</div> |
|---|
| | | <el-input placeholder="请输入内容" v-model="inputCity" size="small" style="width: 55%; margin-right: 2%"> |
|---|
| | | <el-input |
|---|
| | | placeholder="请输入内容" |
|---|
| | | v-model="inputCity" |
|---|
| | | size="small" |
|---|
| | | style="width: 55%; margin-right: 2%" |
|---|
| | | > |
|---|
| | | <i slot="prefix" class="el-input__icon el-icon-search"></i> |
|---|
| | | </el-input> |
|---|
| | | <el-button type="primary" size="small" @click="selectDataBtn">查询</el-button> |
|---|
| | | <el-button type="primary" size="small" @click="selectDataBtn" |
|---|
| | | >查询</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="text-align: right; margin: 0px 30px 15px 0px; color: #666666" v-if="isShow"><span style="font-weight: bold;">保良值:</span><span v-for="(item,index) in goodValue" :key="index"> 后{{ index+1 }}小时(<span style="color:DarkOrange">{{ item }}</span>) </span></div> |
|---|
| | | <LineChart :chart-data="lineChartData" :width="echartsWidth" :height="echartsHeight" :interval="interval" style="margin: auto;margin-bottom: 5%"/> |
|---|
| | | <!-- <O3Echarts :chart-data="lineChartData" style="width: 70%; height: 300px; margin: auto;margin-bottom: 5%"/>--> |
|---|
| | | <LineChart :chart-data="lineChartData2" :width="echartsWidth" :height="echartsHeight" :interval="interval" style="margin: auto"/> |
|---|
| | | <div |
|---|
| | | style="text-align: right; margin: 0px 30px 15px 0px; color: #666666" |
|---|
| | | v-if="isShow" |
|---|
| | | > |
|---|
| | | <span style="font-weight: bold">保良值:</span |
|---|
| | | ><span v-for="(item, index) in goodValue" :key="index"> |
|---|
| | | 后{{ index + 1 }}小时(<span style="color: DarkOrange">{{ item }}</span |
|---|
| | | >) |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | <LineChart |
|---|
| | | :chart-data="lineChartData" |
|---|
| | | :width="echartsWidth" |
|---|
| | | :height="echartsHeight" |
|---|
| | | :interval="interval" |
|---|
| | | style="margin: auto; margin-bottom: 5%" |
|---|
| | | /> |
|---|
| | | <!-- <O3Echarts :chart-data="lineChartData" style="width: 70%; height: 300px; margin: auto;margin-bottom: 5%"/>--> |
|---|
| | | <LineChart |
|---|
| | | :chart-data="lineChartData2" |
|---|
| | | :width="echartsWidth" |
|---|
| | | :height="echartsHeight" |
|---|
| | | :interval="interval" |
|---|
| | | style="margin: auto" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | const lineChartData = { |
|---|
| | | newVisitis: { |
|---|
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145], |
|---|
| | | }, |
|---|
| | | messages: { |
|---|
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130], |
|---|
| | | }, |
|---|
| | | purchases: { |
|---|
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130], |
|---|
| | | }, |
|---|
| | | shoppings: { |
|---|
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
|---|
| | | } |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130], |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | const lineChartData2 = { |
|---|
| | | newVisitis: { |
|---|
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145], |
|---|
| | | }, |
|---|
| | | messages: { |
|---|
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130], |
|---|
| | | }, |
|---|
| | | purchases: { |
|---|
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130], |
|---|
| | | }, |
|---|
| | | shoppings: { |
|---|
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
|---|
| | | } |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130], |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | const axios1 = axios.create({ |
|---|
| | | baseURL: 'http://121.43.179.139:8080', |
|---|
| | | timeout: 5000 |
|---|
| | | timeout: 5000, |
|---|
| | | }) |
|---|
| | | export default { |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | components: { |
|---|
| | | LineChart, |
|---|
| | | Region, |
|---|
| | | // TimePicker |
|---|
| | | }, |
|---|
| | | filters: { |
|---|
| | | sensorFilter: function(value) { |
|---|
| | | sensorFilter: function (value) { |
|---|
| | | if (!value) return '' |
|---|
| | | return json[value] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | // defaultData: Array |
|---|
| | |
|---|
| | | newLineChartData: { |
|---|
| | | series: [], |
|---|
| | | xAxis: [], |
|---|
| | | title: [] |
|---|
| | | title: [], |
|---|
| | | }, |
|---|
| | | newLineChartData2: { |
|---|
| | | series: [], |
|---|
| | | xAxis: [], |
|---|
| | | title: [] |
|---|
| | | title: [], |
|---|
| | | }, |
|---|
| | | newData: '', |
|---|
| | | defaultData: [], |
|---|
| | |
|---|
| | | pickerOptions: { |
|---|
| | | disabledDate(time) { |
|---|
| | | return time.getTime() > Date.now() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // shortcuts: [{ |
|---|
| | | // text: '昨天', |
|---|
| | | // onClick(picker) { |
|---|
| | |
|---|
| | | twoHour: '', |
|---|
| | | threeHour: '', |
|---|
| | | fourHours: '', |
|---|
| | | dataArr: [] |
|---|
| | | dataArr: [], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 计算属性 类似于data概念 |
|---|
| | |
|---|
| | | } |
|---|
| | | this.selectData = newData |
|---|
| | | this.selectDataBtn() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // value2(a, b) { |
|---|
| | | // // console.log(a) |
|---|
| | | // // var d = new Date(a) |
|---|
| | |
|---|
| | | created() { |
|---|
| | | // console.log(this.defaultData) |
|---|
| | | this.selectDataBtn() |
|---|
| | | this.searchDate() |
|---|
| | | }, |
|---|
| | | // 方法集合 |
|---|
| | | methods: { |
|---|
| | |
|---|
| | | this.o38hDataYuce = [] |
|---|
| | | this.o38hDataShice = [] |
|---|
| | | this.goodValue = [] |
|---|
| | | axios1({ // this.$request |
|---|
| | | axios1({ |
|---|
| | | // this.$request |
|---|
| | | url: '/screen_api_v2/screen/weatherData', |
|---|
| | | // url: 'test/weatherData', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | city: this.inputCity, |
|---|
| | | time: this.selectData |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | if (res.data.data.length === 0) { |
|---|
| | | this.$message('当前没有数据') |
|---|
| | | this.isShow = false |
|---|
| | | } else { |
|---|
| | | this.isShow = true |
|---|
| | | } |
|---|
| | | var resData = res.data.data |
|---|
| | | this.newLineChartData.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | this.newLineChartData.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | this.newLineChartData2.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | this.newLineChartData2.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | var timeArray = [] |
|---|
| | | this.o38hDataShice = [] |
|---|
| | | for (let i = 0; i < resData.length; i++) { |
|---|
| | | // this.o38hxAxis.push(res.data[i].time) |
|---|
| | | if (resData[i].type === '预测') { |
|---|
| | | this.o31hDataYuce.push(resData[i].O3C) |
|---|
| | | this.o38hDataYuce.push(resData[i].O3C_8H) |
|---|
| | | var time = resData[i].time.split(' ')[1] |
|---|
| | | if (time === '00:00') { |
|---|
| | | time = '次日00:00' |
|---|
| | | } |
|---|
| | | timeArray.push(time) |
|---|
| | | } else { |
|---|
| | | if (resData[i].O3C) { |
|---|
| | | this.o31hDataShice.push(resData[i].O3C) |
|---|
| | | this.dataArr.push(resData[i].O3C) |
|---|
| | | } else { |
|---|
| | | this.dataArr.push(0) |
|---|
| | | } |
|---|
| | | if (resData[i].O3C_8H) { |
|---|
| | | this.o38hDataShice.push(resData[i].O3C_8H) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (resData[i].goodValue) { |
|---|
| | | this.goodValue.push(resData[i].goodValue) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // O3-1H |
|---|
| | | this.newLineChartData.series[0].data = this.o31hDataYuce |
|---|
| | | this.newLineChartData.series[1].data = this.o31hDataShice |
|---|
| | | this.newLineChartData.series[0].name = '预测' |
|---|
| | | this.newLineChartData.series[1].name = '实测' |
|---|
| | | this.newLineChartData.title[0] = '预测' |
|---|
| | | this.newLineChartData.title[1] = '实测' |
|---|
| | | this.newLineChartData.xAxis = timeArray |
|---|
| | | this.newLineChartData.text = `O3-1H ${this.newTime(this.selectData)}` |
|---|
| | | this.lineChartData = this.newLineChartData |
|---|
| | | // O3-8H |
|---|
| | | this.newLineChartData2.series[0].data = this.o38hDataYuce |
|---|
| | | this.newLineChartData2.series[1].data = this.o38hDataShice |
|---|
| | | this.newLineChartData2.series[0].name = '预测' |
|---|
| | | this.newLineChartData2.series[1].name = '实测' |
|---|
| | | this.newLineChartData2.title[0] = '预测' |
|---|
| | | this.newLineChartData2.title[1] = '实测' |
|---|
| | | this.newLineChartData2.xAxis = timeArray |
|---|
| | | this.newLineChartData2.text = `O3-8H ${this.newTime(this.selectData)}` |
|---|
| | | this.lineChartData2 = this.newLineChartData2 |
|---|
| | | }).catch((error) => { |
|---|
| | | console.log(error) |
|---|
| | | time: this.selectData, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | if (res.data.data.length === 0) { |
|---|
| | | this.$message('当前没有数据') |
|---|
| | | this.isShow = false |
|---|
| | | } else { |
|---|
| | | this.isShow = true |
|---|
| | | } |
|---|
| | | var resData = res.data.data |
|---|
| | | this.newLineChartData.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | this.newLineChartData.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | this.newLineChartData2.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | this.newLineChartData2.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | var timeArray = [] |
|---|
| | | this.o38hDataShice = [] |
|---|
| | | for (let i = 0; i < resData.length; i++) { |
|---|
| | | // this.o38hxAxis.push(res.data[i].time) |
|---|
| | | if (resData[i].type === '预测') { |
|---|
| | | this.o31hDataYuce.push(resData[i].O3C) |
|---|
| | | this.o38hDataYuce.push(resData[i].O3C_8H) |
|---|
| | | var time = resData[i].time.split(' ')[1] |
|---|
| | | if (time === '00:00') { |
|---|
| | | time = '次日00:00' |
|---|
| | | } |
|---|
| | | timeArray.push(time) |
|---|
| | | } else { |
|---|
| | | if (resData[i].O3C) { |
|---|
| | | this.o31hDataShice.push(resData[i].O3C) |
|---|
| | | this.dataArr.push(resData[i].O3C) |
|---|
| | | } else { |
|---|
| | | this.dataArr.push(0) |
|---|
| | | } |
|---|
| | | if (resData[i].O3C_8H) { |
|---|
| | | this.o38hDataShice.push(resData[i].O3C_8H) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (resData[i].goodValue) { |
|---|
| | | this.goodValue.push(resData[i].goodValue) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // O3-1H |
|---|
| | | this.newLineChartData.series[0].data = this.o31hDataYuce |
|---|
| | | this.newLineChartData.series[1].data = this.o31hDataShice |
|---|
| | | this.newLineChartData.series[0].name = '预测' |
|---|
| | | this.newLineChartData.series[1].name = '实测' |
|---|
| | | this.newLineChartData.title[0] = '预测' |
|---|
| | | this.newLineChartData.title[1] = '实测' |
|---|
| | | this.newLineChartData.xAxis = timeArray |
|---|
| | | this.newLineChartData.text = `O3-1H ${this.newTime(this.selectData)}` |
|---|
| | | this.lineChartData = this.newLineChartData |
|---|
| | | // O3-8H |
|---|
| | | this.newLineChartData2.series[0].data = this.o38hDataYuce |
|---|
| | | this.newLineChartData2.series[1].data = this.o38hDataShice |
|---|
| | | this.newLineChartData2.series[0].name = '预测' |
|---|
| | | this.newLineChartData2.series[1].name = '实测' |
|---|
| | | this.newLineChartData2.title[0] = '预测' |
|---|
| | | this.newLineChartData2.title[1] = '实测' |
|---|
| | | this.newLineChartData2.xAxis = timeArray |
|---|
| | | this.newLineChartData2.text = `O3-8H ${this.newTime(this.selectData)}` |
|---|
| | | this.lineChartData2 = this.newLineChartData2 |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 时间处理函数 |
|---|
| | | newTime(timeArr) { |
|---|
| | |
|---|
| | | getYesterday1() { |
|---|
| | | var day1 = new Date() |
|---|
| | | day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) |
|---|
| | | var month = day1.getMonth() < 9 ? '0' + (day1.getMonth() + 1) : day1.getMonth() + 1 |
|---|
| | | var month = |
|---|
| | | day1.getMonth() < 9 ? '0' + (day1.getMonth() + 1) : day1.getMonth() + 1 |
|---|
| | | var date = day1.getDate() <= 9 ? '0' + day1.getDate() : day1.getDate() |
|---|
| | | var s1 = day1.getFullYear() + '-' + month + '-' + date |
|---|
| | | return s1 |
|---|
| | |
|---|
| | | var day2 = new Date() |
|---|
| | | // day2.setTime(day2.getTime()) |
|---|
| | | // var s2 = day2.getFullYear() + '-' + (day2.getMonth() + 1) + '-' + day2.getDate() |
|---|
| | | var month = day2.getMonth() < 9 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1 |
|---|
| | | var month = |
|---|
| | | day2.getMonth() < 9 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1 |
|---|
| | | var date = day2.getDate() <= 9 ? '0' + day2.getDate() : day2.getDate() |
|---|
| | | var s2 = day2.getFullYear() + '-' + month + '-' + date |
|---|
| | | return s2 |
|---|
| | |
|---|
| | | getTomorrow1() { |
|---|
| | | var day3 = new Date() |
|---|
| | | day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000) |
|---|
| | | var month = day3.getMonth() < 9 ? '0' + (day3.getMonth() + 1) : day3.getMonth() + 1 |
|---|
| | | var month = |
|---|
| | | day3.getMonth() < 9 ? '0' + (day3.getMonth() + 1) : day3.getMonth() + 1 |
|---|
| | | var date = day3.getDate() <= 9 ? '0' + day3.getDate() : day3.getDate() |
|---|
| | | var s3 = day3.getFullYear() + '-' + month + '-' + date |
|---|
| | | return s3 |
|---|
| | | }, |
|---|
| | | searchDate(city) { |
|---|
| | | // this.o31hDataYuce = [] |
|---|
| | | // this.o31hDataShice = [] |
|---|
| | | // this.o38hDataYuce = [] |
|---|
| | | // this.o38hDataShice = [] |
|---|
| | | // this.goodValue = [] |
|---|
| | | this.o31hDataYuce = [] |
|---|
| | | this.o31hDataShice = [] |
|---|
| | | this.o38hDataYuce = [] |
|---|
| | | this.o38hDataShice = [] |
|---|
| | | this.goodValue = [] |
|---|
| | | this.city = city |
|---|
| | | // this.$request({ |
|---|
| | | // url: '/aqi/compareO3', |
|---|
| | | // method: 'get', |
|---|
| | | // params: { |
|---|
| | | // regionCode: this.city, |
|---|
| | | // time: this.selectData |
|---|
| | | // } |
|---|
| | | // }).then((res) => { |
|---|
| | | // // console.log(res.data) |
|---|
| | | // if (res.data.length === 0) { |
|---|
| | | // this.warning() |
|---|
| | | // } |
|---|
| | | // var resData = res.data |
|---|
| | | // this.newLineChartData.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | // this.newLineChartData.series.push({ data: [], name: '', type: 'line', label: { normal: { show: true }}}) |
|---|
| | | // var timeArray = [] |
|---|
| | | // for (let i = 0; i < resData.length; i++) { |
|---|
| | | // // this.o38hxAxis.push(res.data[i].time) |
|---|
| | | // if (resData[i].type === '预测') { |
|---|
| | | // this.o31hDataYuce.push(resData[i].O3) |
|---|
| | | // this.o38hDataYuce.push(resData[i].O3_8H) |
|---|
| | | // timeArray.push(resData[i].time) |
|---|
| | | // } else { |
|---|
| | | // this.o31hDataShice.push(resData[i].O3) |
|---|
| | | // this.o38hDataShice.push(resData[i].O3_8H) |
|---|
| | | // } |
|---|
| | | // if (resData[i].goodValue) { |
|---|
| | | // this.goodValue.push(resData[i].goodValue) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // this.newLineChartData.series[0].data = this.o31hDataYuce |
|---|
| | | // this.newLineChartData.series[1].data = this.o31hDataShice |
|---|
| | | // this.newLineChartData.series[0].name = '预测' |
|---|
| | | // this.newLineChartData.series[1].name = '实测' |
|---|
| | | // this.newLineChartData.title[0] = '预测' |
|---|
| | | // this.newLineChartData.title[1] = '实测' |
|---|
| | | // this.newLineChartData.xAxis = timeArray |
|---|
| | | // this.lineChartData = this.newLineChartData |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // console.log(error) |
|---|
| | | // }) |
|---|
| | | this.$request({ |
|---|
| | | url: '/aqi/compareO3', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | regionCode: '320583', |
|---|
| | | time: '2023-06-17 ', |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log(res.data) |
|---|
| | | if (res.data.length === 0) { |
|---|
| | | this.warning() |
|---|
| | | } |
|---|
| | | var resData = res.data |
|---|
| | | this.newLineChartData.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | this.newLineChartData.series.push({ |
|---|
| | | data: [], |
|---|
| | | name: '', |
|---|
| | | type: 'line', |
|---|
| | | label: { normal: { show: true } }, |
|---|
| | | }) |
|---|
| | | var timeArray = [] |
|---|
| | | for (let i = 0; i < resData.length; i++) { |
|---|
| | | // this.o38hxAxis.push(res.data[i].time) |
|---|
| | | if (resData[i].type === '预测') { |
|---|
| | | this.o31hDataYuce.push(resData[i].O3) |
|---|
| | | this.o38hDataYuce.push(resData[i].O3_8H) |
|---|
| | | timeArray.push(resData[i].time) |
|---|
| | | } else { |
|---|
| | | this.o31hDataShice.push(resData[i].O3) |
|---|
| | | this.o38hDataShice.push(resData[i].O3_8H) |
|---|
| | | } |
|---|
| | | if (resData[i].goodValue) { |
|---|
| | | this.goodValue.push(resData[i].goodValue) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.newLineChartData.series[0].data = this.o31hDataYuce |
|---|
| | | this.newLineChartData.series[1].data = this.o31hDataShice |
|---|
| | | this.newLineChartData.series[0].name = '预测' |
|---|
| | | this.newLineChartData.series[1].name = '实测' |
|---|
| | | this.newLineChartData.title[0] = '预测' |
|---|
| | | this.newLineChartData.title[1] = '实测' |
|---|
| | | this.newLineChartData.xAxis = timeArray |
|---|
| | | this.lineChartData = this.newLineChartData |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | ctfRegion(v) { |
|---|
| | | this.city = v |
|---|
| | | this.searchDate(this.city) |
|---|
| | | } |
|---|
| | | } // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | }, |
|---|
| | | }, // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .topSelect{ |
|---|
| | | display: flex; |
|---|
| | | .topSelect { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | // justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | //span:first-child{ |
|---|
| | | // flex: 1; |
|---|
| | | //} |
|---|
| | | // div:last-child{ |
|---|
| | | // width: 300px; |
|---|
| | | // line-height: 40px; |
|---|
| | | // padding-left: 6px; |
|---|
| | | // } |
|---|
| | | // justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | //span:first-child{ |
|---|
| | | // flex: 1; |
|---|
| | | //} |
|---|
| | | // div:last-child{ |
|---|
| | | // width: 300px; |
|---|
| | | // line-height: 40px; |
|---|
| | | // padding-left: 6px; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | .topTitle{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | .topTitle { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | } |
|---|
| | | .btn1{ |
|---|
| | | .btn1 { |
|---|
| | | margin-left: 1%; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .spanDiv>span+span{ |
|---|
| | | color: #2d8cf0 |
|---|
| | | .spanDiv > span + span { |
|---|
| | | color: #2d8cf0; |
|---|
| | | } |
|---|
| | | .spanDiv>span+span:hover{ |
|---|
| | | cursor:pointer; |
|---|
| | | .spanDiv > span + span:hover { |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .orangeColor{ |
|---|
| | | .orangeColor { |
|---|
| | | color: darkorange; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="main_body"> |
|---|
| | | <el-container style="height: 100%"> |
|---|
| | | <el-aside width="300px" style="background-color: rgb(238, 241, 246); overflow-y: hidden"> |
|---|
| | | <el-card class="box-card" style="width: 274px;margin: 13px auto"> |
|---|
| | | <el-aside |
|---|
| | | width="300px" |
|---|
| | | style="background-color: rgb(238, 241, 246); overflow-y: hidden" |
|---|
| | | > |
|---|
| | | <el-card class="box-card" style="width: 274px; margin: 13px auto"> |
|---|
| | | <div slot="header" class="clearfix"> |
|---|
| | | <div> |
|---|
| | | <img style="float: left;width: 20px;margin: 15px 0 0 18px" src="../../assets/images/uav/calendar.png" alt=""> |
|---|
| | | <span style="display:inline-block;float: left;font-size: 16px;margin-left: 10px">无人机飞行日期</span> |
|---|
| | | <img |
|---|
| | | style="float: left; width: 20px; margin: 15px 0 0 18px" |
|---|
| | | src="../../assets/images/uav/calendar.png" |
|---|
| | | alt="" |
|---|
| | | /> |
|---|
| | | <span |
|---|
| | | style=" |
|---|
| | | display: inline-block; |
|---|
| | | float: left; |
|---|
| | | font-size: 16px; |
|---|
| | | margin-left: 10px; |
|---|
| | | " |
|---|
| | | >无人机飞行日期</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-scrollbar v-if="asideData.dates.length > 0" style="height: 200px;overflow-x: hidden;" class="text item"> |
|---|
| | | <div v-for="(item, index) in asideData.dates" class="per-date" :class="{active: asideData.activeKey === index}" @click="getTimeAreaData(item, index)" :key="index"> |
|---|
| | | <img style="float: left;width: 14px;margin: 18px 0 0 0" src="../../assets/images/uav/calendar.png" alt=""> |
|---|
| | | <span style="display:inline-block;float: left;font-size: 14px;margin-left: 15px">{{ item }}</span> |
|---|
| | | <el-scrollbar |
|---|
| | | v-if="asideData.dates.length > 0" |
|---|
| | | style="height: 200px; overflow-x: hidden" |
|---|
| | | class="text item" |
|---|
| | | > |
|---|
| | | <div |
|---|
| | | v-for="(item, index) in asideData.dates" |
|---|
| | | class="per-date" |
|---|
| | | :class="{ active: asideData.activeKey === index }" |
|---|
| | | @click="getTimeAreaData(item, index)" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <img |
|---|
| | | style="float: left; width: 14px; margin: 18px 0 0 0" |
|---|
| | | src="../../assets/images/uav/calendar.png" |
|---|
| | | alt="" |
|---|
| | | /> |
|---|
| | | <span |
|---|
| | | style=" |
|---|
| | | display: inline-block; |
|---|
| | | float: left; |
|---|
| | | font-size: 14px; |
|---|
| | | margin-left: 15px; |
|---|
| | | " |
|---|
| | | >{{ item }}</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </el-scrollbar> |
|---|
| | | <div v-else style="height: 180px;width: 274px;overflow-x: hidden;"> |
|---|
| | | <div style="width: 272px;text-align: center;height: 180px;line-height: 140px;font-size: 14px;color: #5a5c60"> |
|---|
| | | <div v-else style="height: 180px; width: 274px; overflow-x: hidden"> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | width: 272px; |
|---|
| | | text-align: center; |
|---|
| | | height: 180px; |
|---|
| | | line-height: 140px; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #5a5c60; |
|---|
| | | " |
|---|
| | | > |
|---|
| | | 无飞行记录 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-card> |
|---|
| | | <div style="width: 274px;margin: 13px auto;border-radius: 8px"><!--accordion 手风琴模式--> |
|---|
| | | <el-collapse v-model="asideData.activeNames" accordion style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);" @change="handleChange"> |
|---|
| | | <el-collapse-item v-for="(item1, index) in asideData.uavTimeFly" :key="index" :name="index" style="text-indent: 2em;"> |
|---|
| | | <template slot="title"> <img style="position: relative;left: 18px" src="../../assets/images/uav/uav.png"> |
|---|
| | | <div style="width: 274px; margin: 13px auto; border-radius: 8px"> |
|---|
| | | <!--accordion 手风琴模式--> |
|---|
| | | <el-collapse |
|---|
| | | v-model="asideData.activeNames" |
|---|
| | | accordion |
|---|
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
|---|
| | | @change="handleChange" |
|---|
| | | > |
|---|
| | | <el-collapse-item |
|---|
| | | v-for="(item1, index) in asideData.uavTimeFly" |
|---|
| | | :key="index" |
|---|
| | | :name="index" |
|---|
| | | style="text-indent: 2em; position: relative" |
|---|
| | | > |
|---|
| | | <template slot="title"> |
|---|
| | | <img |
|---|
| | | style="position: absolute; left: 18px" |
|---|
| | | src="../../assets/images/uav/uav.png" |
|---|
| | | /> |
|---|
| | | <span |
|---|
| | | style="display: inline-block; position: relative;left: 6px" |
|---|
| | | > {{ item1.name }}</span> |
|---|
| | | style="display: inline-block; position: absolute; left: 20px" |
|---|
| | | > |
|---|
| | | {{ item1.name }}</span |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | <el-scrollbar style="height: 200px;overflow-x: hidden;"> |
|---|
| | | <el-scrollbar style="height: 200px; overflow-x: hidden"> |
|---|
| | | <div |
|---|
| | | v-for="(item, index) in item1.timeSlot" |
|---|
| | | :key="index" |
|---|
| | | class="per-date_area" |
|---|
| | | :class="{activeArea: asideData.activeAreaKey === index}" |
|---|
| | | :class="{ activeArea: asideData.activeAreaKey === index }" |
|---|
| | | @click="getFlyData(item, index)" |
|---|
| | | > |
|---|
| | | <div style="width: 100%;margin: 0 auto"> |
|---|
| | | <span style="display: inline-block;">{{ item.startTime.substr(11, item.startTime.length) }}</span> |
|---|
| | | <span style="display: inline-block;">~</span> |
|---|
| | | <span style="display: inline-block;">{{ item.endTime.substr(11, item.startTime.length) }}</span> |
|---|
| | | <div style="width: 100%; margin: 0 auto"> |
|---|
| | | <span>{{ |
|---|
| | | item.startTime.substr(11, item.startTime.length) |
|---|
| | | }}</span> |
|---|
| | | <span>~</span> |
|---|
| | | <span>{{ |
|---|
| | | item.endTime.substr(11, item.startTime.length) |
|---|
| | | }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-scrollbar> |
|---|
| | | </el-collapse-item> |
|---|
| | | </el-collapse> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </el-aside> |
|---|
| | | <el-main> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | position: fixed; |
|---|
| | | z-index: 20; |
|---|
| | | padding-left: 20px; |
|---|
| | | height: 75px; |
|---|
| | | line-height: 80px; |
|---|
| | | width: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | background-color: rgba( 192,192,192, 0.4);" |
|---|
| | | position: fixed; |
|---|
| | | z-index: 20; |
|---|
| | | padding-left: 20px; |
|---|
| | | height: 75px; |
|---|
| | | line-height: 80px; |
|---|
| | | width: 100%; |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | background-color: rgba(192, 192, 192, 0.4); |
|---|
| | | " |
|---|
| | | > |
|---|
| | | <el-radio-group v-model="defautRadio.name" size="medium" @change="selectRedio"> |
|---|
| | | <el-radio-button v-for="(item, key) in radio" :key="key" :label="item.name" /> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | <div id="container" style="width:100%; height:100%;resize:both;z-index: 0" /> |
|---|
| | | <div v-if="textShowFlag" id="text" class="textShow"> |
|---|
| | | <div style="height: 32px; padding: .45rem 1.25rem;"> |
|---|
| | | <span style="display: inline-block;border: 2px solid #1890ff;width:4px;height: 16px;position:relative;top:2px;border-radius: 10px" /> |
|---|
| | | <span style="display:inline-block;height: 32px;line-height:32px;font-weight: 400;font-size: 16px;color: #808080;margin-left: 4px">详细数据</span> |
|---|
| | | <span style="float: right;display: inline-block;height: 32px;line-height: 32px;cursor: pointer" @click="textClose"> |
|---|
| | | <img class="uav" src="../../assets/images/uav/close.png"> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | <hr class="hr"> |
|---|
| | | <div v-for="(item, key, index) in keys" :key="index" class="per-text-data"> |
|---|
| | | <span style="display:inline-block;font-size:14px;height: 27px;line-height: 27px;color: #808080">{{ item | sensorFilter }}:</span> |
|---|
| | | <span style="display:inline-block;margin-left:3px;color:#1890ff;height: 27px;line-height: 27px;font-size: 14px">{{ perPointData[item] }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="noData" v-if="isDisplay != ''">{{isDisplay}}</div> |
|---|
| | | <div v-if="noneData" class="noneData">当前时间没有飞行数据</div> |
|---|
| | | <div id="map_container" v-loading="loading" /> |
|---|
| | | </el-main> |
|---|
| | | </el-container> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | import json from '@/assets/json/sensor.json' |
|---|
| | | import $ from 'jquery' |
|---|
| | | import '@/assets/icon/iconfont.css' |
|---|
| | | |
|---|
| | | 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 { |
|---|
| | | filters: { |
|---|
| | | sensorFilter: function(value) { |
|---|
| | | sensorFilter: function (value) { |
|---|
| | | if (!value) return '' |
|---|
| | | return json[value] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | |
|---|
| | | activeNames: [0], |
|---|
| | | uavTimeFly: [], // 存放无人机信息以及飞行时间区间 |
|---|
| | | activeKey: 0, |
|---|
| | | activeAreaKey: 0 |
|---|
| | | activeAreaKey: 0, |
|---|
| | | }, |
|---|
| | | load: 1, |
|---|
| | | value: [], |
|---|
| | |
|---|
| | | { code: 'a21004', name: 'NO2' }, |
|---|
| | | { code: 'a21005', name: 'CO' }, |
|---|
| | | { code: 'a05024', name: 'O3' }, |
|---|
| | | { code: 'a99054', name: 'TVOC' } |
|---|
| | | { code: 'a99054', name: 'TVOC' }, |
|---|
| | | ], |
|---|
| | | defautRadio: { code: 'a34004', name: 'PM2.5' }, |
|---|
| | | Layler: null, // 存放图层 |
|---|
| | |
|---|
| | | perPointData: null, // 存放每个点的数据 |
|---|
| | | keys: [], // 存放每个点的key值因子code |
|---|
| | | textShowFlag: false, |
|---|
| | | isDisplay: '' |
|---|
| | | isDisplay: '', |
|---|
| | | carMacItem: null, |
|---|
| | | radioSeven: 'PM2.5', |
|---|
| | | 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: [], |
|---|
| | | 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), |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getDate() |
|---|
| | | this.initMap() |
|---|
| | | // this.getDate() |
|---|
| | | // this.flyData() |
|---|
| | | }, |
|---|
| | | 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, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.newTime(this.timeValue) |
|---|
| | | this.newDate() |
|---|
| | | this.getDate() |
|---|
| | | // 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() |
|---|
| | | }, |
|---|
| | | // 请求走航车列表数据 |
|---|
| | | // 进行经纬度转换为距离的计算 |
|---|
| | | 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() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 获取无人机以及时间区间 |
|---|
| | | getTimeAreaData(item, index) { |
|---|
| | | this.asideData.activeAreaKey = -1 |
|---|
| | |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.$store.state.orgId, |
|---|
| | | date: item |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.code === 0) { |
|---|
| | | date: item, |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res.data.vos.length, 'res.data.vos') |
|---|
| | | if(res.data.vos.length==0){ |
|---|
| | | this.noneData = true |
|---|
| | | this.loading = false |
|---|
| | | return false |
|---|
| | | }else{ |
|---|
| | | this.asideData.uavTimeFly = res.data.vos |
|---|
| | | } |
|---|
| | | // if (res.code === 0) { |
|---|
| | | // this.asideData.uavTimeFly = res.data.vos |
|---|
| | | // } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 折叠面板监听 |
|---|
| | |
|---|
| | | // console.log(val, 222) |
|---|
| | | }, |
|---|
| | | // 经纬度转换为三维坐标系下的 XY 坐标 map.lngLatToGeodeticCoord |
|---|
| | | lnglatToG20(lnglat) { |
|---|
| | | lnglat = this.map.lngLatToGeodeticCoord(lnglat) |
|---|
| | | lnglat.x = AMap.Util.format(lnglat.x, 3) |
|---|
| | | lnglat.y = AMap.Util.format(lnglat.y, 3) |
|---|
| | | return lnglat |
|---|
| | | }, |
|---|
| | | // 选中radio |
|---|
| | | selectRedio(item) { |
|---|
| | | this.map.remove(this.textMarkers.markers) |
|---|
| | |
|---|
| | | this.addLayers(item) |
|---|
| | | }, |
|---|
| | | // 初始化地图 |
|---|
| | | initMap() { |
|---|
| | | var map = new AMap.Map('container', { |
|---|
| | | resizeEnable: true, // 是否监控地图容器尺寸变化 |
|---|
| | | rotateEnable: true, |
|---|
| | | pitchEnable: true, |
|---|
| | | zoom: 20, |
|---|
| | | // pitch: 80, // 地图俯仰角度 |
|---|
| | | pitch: 80, // 地图俯仰角度 |
|---|
| | | // rotation: -15, |
|---|
| | | rotation: 0, |
|---|
| | | viewMode: '3D', // 开启3D视图,默认为关闭 |
|---|
| | | buildingAnimation: true, // 楼块出现是否带动画 |
|---|
| | | expandZoomRange: true, |
|---|
| | | zooms: [3, 20], // 设置地图级别范围 |
|---|
| | | center: [120.9781494, 31.4265156] |
|---|
| | | }) |
|---|
| | | this.map = map |
|---|
| | | }, |
|---|
| | | getFlyData(item, index) { |
|---|
| | | this.textShowFlag = false |
|---|
| | | if (this.Layler !== null) { |
|---|
| | | this.map.remove(this.Layler) |
|---|
| | | console.log(index, 'index') |
|---|
| | | console.log(item.batch) |
|---|
| | | this.noneData = false |
|---|
| | | if (this.view) { |
|---|
| | | this.view.removeAllLayers() |
|---|
| | | this.map.clearOverlays() |
|---|
| | | } |
|---|
| | | if (this.textMarkers.markers.length > 0) { |
|---|
| | | this.map.remove(this.textMarkers.markers) |
|---|
| | | } |
|---|
| | | this.asideData.activeAreaKey = index |
|---|
| | | this.$request({ |
|---|
| | | url: '/uav/queryDataByBatch', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | batch: item.batch |
|---|
| | | batch: item.batch, |
|---|
| | | // batch: '2023-06-16 16:21:21', |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | this.carData = [] |
|---|
| | | if (res.data === 'null') { |
|---|
| | | this.noneData = true |
|---|
| | | this.loading = false |
|---|
| | | return |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | if (res.code === 0) { |
|---|
| | | this.isDisplay = '' |
|---|
| | | this.value = [] |
|---|
| | | for (let i = 0; i < res.data.vos.length; i++) { |
|---|
| | | this.value.push(JSON.parse(res.data.vos[i].value)) |
|---|
| | | if (res.data.vos.length) { |
|---|
| | | for (var i = 0; i < res.data.vos.length; i++) { |
|---|
| | | this.carData.push(JSON.parse(res.data.vos[i].value)) |
|---|
| | | } |
|---|
| | | this.addLayers('PM2.5') |
|---|
| | | } else if (res.code === -37) { |
|---|
| | | this.isDisplay = res.message |
|---|
| | | } else { |
|---|
| | | this.$message({ |
|---|
| | | showClose: true, |
|---|
| | | message: res.message, |
|---|
| | | type: 'error' |
|---|
| | | }) |
|---|
| | | this.initStart(this.carData) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 添加图层 |
|---|
| | | addLayers(name) { |
|---|
| | | this.textMarkers.markers = [] |
|---|
| | | let code = '' |
|---|
| | | for (let i = 0; i < this.radio.length; i++) { |
|---|
| | | if (name === this.radio[i].name) { |
|---|
| | | code = this.radio[i].code |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (code === 'a34004') { |
|---|
| | | this.levelSensor = [35, 75, 115, 150, 250] |
|---|
| | | } else if (code === 'a34002') { |
|---|
| | | this.levelSensor = [50, 150, 250, 350, 420] |
|---|
| | | } else if (code === 'a21026') { |
|---|
| | | this.levelSensor = [150, 500, 650, 800, 1600] |
|---|
| | | } else if (code === 'a21004') { |
|---|
| | | this.levelSensor = [100, 200, 700, 1200, 2340] |
|---|
| | | } else if (code === 'a21005') { |
|---|
| | | this.levelSensor = [5, 10, 35, 60, 90] |
|---|
| | | } else if (code === 'a05024') { |
|---|
| | | this.levelSensor = [160, 200, 300, 400, 800] |
|---|
| | | } else if (code === 'a99054') { |
|---|
| | | this.levelSensor = [1.5, 3, 5] |
|---|
| | | } |
|---|
| | | // 添加Object3DLayer |
|---|
| | | var object3Dlayer = new AMap.Object3DLayer({ zIndex: 110, opacity: 1 }) |
|---|
| | | var points3D = new AMap.Object3D.RoundPoints({ |
|---|
| | | eventSupport: true |
|---|
| | | }) |
|---|
| | | points3D.transparent = true |
|---|
| | | |
|---|
| | | var lines = new AMap.Object3D.Line() |
|---|
| | | var lineGeo = lines.geometry |
|---|
| | | var geometry = points3D.geometry |
|---|
| | | for (let i = 0; i < this.value.length; i++) { |
|---|
| | | const obj = (this.value[i]) |
|---|
| | | if (!(obj.flylon === undefined)) { |
|---|
| | | var center = this.lnglatToG20([parseFloat(obj.flylon), parseFloat(obj.flylat)]) |
|---|
| | | if (i < this.value.length - 1) { |
|---|
| | | const obj1 = (this.value[i + 1]) |
|---|
| | | if (!(obj1.flylon === undefined)) { |
|---|
| | | var center1 = this.lnglatToG20([parseFloat(obj1.flylon), parseFloat(obj1.flylat)]) |
|---|
| | | // 连线 |
|---|
| | | lineGeo.vertices.push(center.x, center.y, -(parseFloat(obj.flyhig) * 10)) |
|---|
| | | lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1) |
|---|
| | | lineGeo.vertices.push(center1.x, center1.y, -(parseFloat(obj1.flyhig) * 10)) |
|---|
| | | lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1) |
|---|
| | | // // 气球 |
|---|
| | | // lineGeo.vertices.push(center.x, center.y, 0) |
|---|
| | | // lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1) |
|---|
| | | // lineGeo.vertices.push(center.x, center.y, -(parseFloat(obj.flyhig) * 10)) |
|---|
| | | // lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 随机高度。Z 轴正方向指向地下，因此这里设置高度要添加负号指向反方向 |
|---|
| | | if (obj[code]) { |
|---|
| | | if (parseFloat(obj[code]) < this.levelSensor[0] && this.levelSensor[0] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(0, 0.8941, 0, 0.6) |
|---|
| | | } else if (parseFloat(obj[code]) < this.levelSensor[1] && this.levelSensor[1] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(1, 1, 0, 0.8) |
|---|
| | | } else if (parseFloat(obj[code]) < this.levelSensor[2] && this.levelSensor[2] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(1, 0.4941, 0, 0.8) |
|---|
| | | } else if (parseFloat(obj[code]) < this.levelSensor[3] && this.levelSensor[3] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(1, 0, 0, 0.8) |
|---|
| | | } else if (parseFloat(obj[code]) < this.levelSensor[4] && this.levelSensor[4] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(0.6000, 0, 0.2980, 0.8) |
|---|
| | | } else { |
|---|
| | | if (this.levelSensor[5] !== undefined) { |
|---|
| | | geometry.vertices.push(center.x, center.y, -parseFloat(obj.flyhig) * 10) |
|---|
| | | geometry.pointSizes.push(40) |
|---|
| | | geometry.vertexColors.push(0.4941, 0.4941, 0.1373, 0.8) |
|---|
| | | } else { |
|---|
| | | continue |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 高度统一 |
|---|
| | | } |
|---|
| | | // 绘制文本 |
|---|
| | | var A = new AMap.Text({ |
|---|
| | | text: code === 'a21005' || code === 'a99054' ? parseInt(parseFloat(obj[code]) * 100) / 100 === 0 ? '0' : parseInt(parseFloat(obj[code]) * 100) / 100 : parseInt(obj[code]) === 0 ? '0' : parseInt(obj[code]), |
|---|
| | | position: [parseFloat(obj.flylon), parseFloat(obj.flylat)], |
|---|
| | | height: parseFloat(obj.flyhig) * 10, |
|---|
| | | verticalAlign: 'center', |
|---|
| | | map: this.map, |
|---|
| | | style: { |
|---|
| | | 'background-color': 'rgba(0,0,0,0)', |
|---|
| | | 'position': 'relative', |
|---|
| | | 'top': '-18px', |
|---|
| | | 'width': '32px', |
|---|
| | | 'height': '32px', |
|---|
| | | 'font-size': '12px', |
|---|
| | | 'line-height': '32px', |
|---|
| | | 'border-radius': '100%', |
|---|
| | | 'border': 'none', |
|---|
| | | 'text-align': 'center' |
|---|
| | | } |
|---|
| | | // 'border': 'none', |
|---|
| | | }) |
|---|
| | | A.on('click', () => { |
|---|
| | | const keys = Object.keys(obj) |
|---|
| | | const newKeys = [] |
|---|
| | | for (let j = 0; j < keys.length; j++) { |
|---|
| | | if (keys[j] === 'a34004') { |
|---|
| | | newKeys[0] = 'a34004' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a34002') { |
|---|
| | | newKeys[1] = 'a34002' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a21004') { |
|---|
| | | newKeys[3] = 'a21004' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a21026') { |
|---|
| | | newKeys[2] = 'a21026' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a21005') { |
|---|
| | | newKeys[4] = 'a21005' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a05024') { |
|---|
| | | newKeys[5] = 'a05024' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'a99054') { |
|---|
| | | newKeys[6] = 'a99054' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'flyhig') { |
|---|
| | | newKeys[7] = 'flyhig' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'flylon') { |
|---|
| | | newKeys[8] = 'flylon' |
|---|
| | | } |
|---|
| | | if (keys[j] === 'flylat') { |
|---|
| | | newKeys[9] = 'flylat' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // Array.from 将类数组对象转换为真正数组 |
|---|
| | | const array = Array.from(new Set(newKeys.concat(keys))) // [1,2,3,4,5] |
|---|
| | | this.keys = array |
|---|
| | | this.textShowFlag = true |
|---|
| | | this.perPointData = obj |
|---|
| | | }) |
|---|
| | | this.textMarkers.code = obj |
|---|
| | | this.textMarkers.markers.push(A) |
|---|
| | | } |
|---|
| | | // geometry.pointAreas.push(0.3,0,0.7,0.5); |
|---|
| | | } |
|---|
| | | points3D.borderWeight = 3 |
|---|
| | | object3Dlayer.add(lines) |
|---|
| | | object3Dlayer.add(points3D) |
|---|
| | | this.map.add(object3Dlayer) |
|---|
| | | this.Layler = object3Dlayer |
|---|
| | | }, |
|---|
| | | // 关闭文本 |
|---|
| | | textClose() { |
|---|
| | | this.textShowFlag = false |
|---|
| | | this.perPointData = null |
|---|
| | | }, |
|---|
| | | // 获取组织下存在飞行记录的日期 |
|---|
| | | getDate() { |
|---|
| | |
|---|
| | | url: '/uav/queryDate', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.$store.state.orgId |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | organizationId: this.$store.state.orgId, |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | this.asideData.dates = JSON.parse(JSON.stringify(res.data.datesStr)) |
|---|
| | | if (this.asideData.dates.length > 0) { |
|---|
| | | this.getTimeAreaData(this.asideData.dates[0], 0) |
|---|
| | | setTimeout(() => { |
|---|
| | | if (this.asideData.uavTimeFly[0].timeSlot) { |
|---|
| | | // console.log( |
|---|
| | | // this.asideData.uavTimeFly[0].timeSlot, |
|---|
| | | // 'this.asideData.uavTimeFly[0].timeSlot[0]' |
|---|
| | | // ) |
|---|
| | | this.getFlyData(this.asideData.uavTimeFly[0].timeSlot[0], 0) |
|---|
| | | } |
|---|
| | | }, 500) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | initStart(res) { |
|---|
| | | // console.log(res,'res'); |
|---|
| | | this.abc += 1 |
|---|
| | | const that = this |
|---|
| | | if (!res) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (this.dataType === 'history') { |
|---|
| | | this.responseJSON = res |
|---|
| | | } 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 = 10 |
|---|
| | | 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)) |
|---|
| | | console.log(eval(that.showPoints), 'eval(that.showPoints)') // 此方法仅返回视野信息(中心点坐标，缩放）,不会将新的中心点和级别做用到当前地图上 |
|---|
| | | that.mapZoom = that.viewport.zoom |
|---|
| | | console.log(that.mapZoom, 'that.mapZoom') |
|---|
| | | that.centerPoint = that.viewport.center |
|---|
| | | if (that.firstPlayFlag) { |
|---|
| | | console.log(that.mapZoom, that.centerPoint, '1') |
|---|
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
|---|
| | | that.view = new mapvgl.View({ |
|---|
| | | map: that.map, |
|---|
| | | }) |
|---|
| | | that.firstPlayFlag = false |
|---|
| | | } else { |
|---|
| | | console.log(that.mapZoom, that.centerPoint, '2') |
|---|
| | | this.view.removeAllLayers() |
|---|
| | | this.map.clearOverlays() |
|---|
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
|---|
| | | that.view = new mapvgl.View({ |
|---|
| | | map: that.map, |
|---|
| | | }) |
|---|
| | | // 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) |
|---|
| | | console.log(points,'points'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | 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="scss" scoped> |
|---|
| | | /deep/.BMap_cpyCtrl { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | /deep/.anchorBL img { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | .main_body { |
|---|
| | | border: 0; |
|---|
| | | margin: 0; |
|---|
| | |
|---|
| | | height: 100%; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .el-header, .el-footer { |
|---|
| | | background-color: #B3C0D1; |
|---|
| | | .el-header, |
|---|
| | | .el-footer { |
|---|
| | | background-color: #b3c0d1; |
|---|
| | | color: #333; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 60px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-aside { |
|---|
| | | background-color: #D3DCE6; |
|---|
| | | background-color: #d3dce6; |
|---|
| | | color: #333; |
|---|
| | | text-align: left; |
|---|
| | | line-height: 52px; |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .el-input__inner { |
|---|
| | | height:40px; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | | /deep/ .el-picker-panel__body { |
|---|
| | | width: 280px; |
|---|
| | |
|---|
| | | width: 80px; |
|---|
| | | } |
|---|
| | | .per-date { |
|---|
| | | height: 50px;line-height: 50px; border-bottom: 1px solid gainsboro; |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | border-bottom: 1px solid gainsboro; |
|---|
| | | color: #5a5c60; |
|---|
| | | padding-left: 20px; |
|---|
| | | } |
|---|
| | | .per-date:nth-last-child(1){ |
|---|
| | | .per-date:nth-last-child(1) { |
|---|
| | | border-bottom: none; |
|---|
| | | } |
|---|
| | | .per-date:hover { |
|---|
| | | cursor:pointer; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .per-date_area{ |
|---|
| | | .per-date_area { |
|---|
| | | height: 50px; |
|---|
| | | line-height: 50px; |
|---|
| | | border-bottom: 1px solid gainsboro; |
|---|
| | | color: #5a5c60; |
|---|
| | | } |
|---|
| | | .per-date_area:hover { |
|---|
| | | cursor:pointer; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .per-date_area:nth-child(1){ |
|---|
| | | border-top: 1px solid #EBEEF5; |
|---|
| | | .per-date_area:nth-child(1) { |
|---|
| | | border-top: 1px solid #ebeef5; |
|---|
| | | } |
|---|
| | | .per-date_area:nth-last-child(1){ |
|---|
| | | .per-date_area:nth-last-child(1) { |
|---|
| | | border-bottom: none; |
|---|
| | | } |
|---|
| | | .uav { |
|---|
| | |
|---|
| | | .textShow { |
|---|
| | | //padding: .75rem 1.25rem; |
|---|
| | | margin-bottom: 1rem; |
|---|
| | | border-radius: .25rem; |
|---|
| | | border-radius: 0.25rem; |
|---|
| | | position: fixed; |
|---|
| | | top: 11rem; |
|---|
| | | background-color: rgba(255,255,255,.8); |
|---|
| | | background-color: rgba(255, 255, 255, 0.8); |
|---|
| | | width: auto; |
|---|
| | | //height: 360px; |
|---|
| | | min-width: 22rem; |
|---|
| | | border-width: 0; |
|---|
| | | right: 1rem; |
|---|
| | | box-shadow: 0 2px 6px 0 rgba(34,24,21,.08); |
|---|
| | | box-shadow: 0 2px 6px 0 rgba(34, 24, 21, 0.08); |
|---|
| | | //box_shadow: -1px 2px 8px 1px rgba(34,24,21,.08) !important |
|---|
| | | } |
|---|
| | | .hr { |
|---|
| | | position: relative; |
|---|
| | | top:2px |
|---|
| | | top: 2px; |
|---|
| | | } |
|---|
| | | .per-text-data { |
|---|
| | | padding: 0 2.25rem; |
|---|
| | |
|---|
| | | padding: 2px 0; |
|---|
| | | } |
|---|
| | | /deep/.amap-logo { |
|---|
| | | display: none!important; |
|---|
| | | display: none !important; |
|---|
| | | } |
|---|
| | | /deep/.amap-copyright{ |
|---|
| | | display: none!important; |
|---|
| | | /deep/.amap-copyright { |
|---|
| | | display: none !important; |
|---|
| | | } |
|---|
| | | .noData{ |
|---|
| | | width: 280px; |
|---|
| | | height: 100px; |
|---|
| | | border: 3px solid red; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 30px; |
|---|
| | | |
|---|
| | | .noneData { |
|---|
| | | position: absolute; |
|---|
| | | color: #000; |
|---|
| | | background: #fff; |
|---|
| | | z-index: 999; |
|---|
| | | left: 50%; |
|---|
| | | top: 26%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(-50%); |
|---|
| | | padding: 20px 50px; |
|---|
| | | font-size: 28px; |
|---|
| | | border: 2px solid #ff7f50; |
|---|
| | | } |
|---|
| | | #map_container { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | margin: 0; |
|---|
| | | z-index: 0; |
|---|
| | | font-size: 14px; |
|---|
| | | font-family: '微软雅黑'; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | id: obj.id |
|---|
| | | } |
|---|
| | | }).then(res => { |
|---|
| | | console.log(res,'xia'); |
|---|
| | | var getData = {} |
|---|
| | | getData = res.data |
|---|
| | | // 苏州市区放最后 |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div style="width:100%"> |
|---|
| | | <div style="width: 100%"> |
|---|
| | | <div class="topSelect"> |
|---|
| | | <el-cascader |
|---|
| | | v-model="newMac" |
|---|
| | | :options="options" |
|---|
| | | clearable |
|---|
| | | placeholder="选择设备" |
|---|
| | | style="width: 354px;" |
|---|
| | | style="width: 354px" |
|---|
| | | /> |
|---|
| | | <el-select v-model="value" placeholder="选择因子" style="margin-left:20px"> |
|---|
| | | <el-select |
|---|
| | | v-model="value" |
|---|
| | | placeholder="选择因子" |
|---|
| | | style="margin-left: 20px" |
|---|
| | | > |
|---|
| | | <el-option |
|---|
| | | v-for="item in newSensor" |
|---|
| | | :key="item.value" |
|---|
| | |
|---|
| | | <el-radio-button label="日报" /> |
|---|
| | | <el-radio-button label="月报" /> |
|---|
| | | </el-radio-group> --> |
|---|
| | | <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" /> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="timevalue" |
|---|
| | | type="datetimerange" |
|---|
| | | range-separator="至" |
|---|
| | | value-format="yyyy-MM-dd HH" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | :picker-options="pickerOptions" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | style="margin-left: 1rem" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | <!--查询按钮--> |
|---|
| | | <el-button @click="selectData" class="btn1">查询</el-button> |
|---|
| | | </div> |
|---|
| | | <div class="topTitle"> |
|---|
| | | <div style="position: absolute">{{ selectyz }}</div> |
|---|
| | | <!-- <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div> --> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="topTitle"> |
|---|
| | | <div style="position:absolute">(单位:ug/m³)</div> |
|---|
| | | <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div> |
|---|
| | | </div> --> |
|---|
| | | <LineChart :chart-data="lineChartData" /> |
|---|
| | | <LineChart :chart-data="lineChartData" style="height: 30rem" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | // 例如：import《组件名称》from'《组件路径》'; |
|---|
| | | |
|---|
| | | // import LineChart from '@/components/Echarts/LineChartSpe' |
|---|
| | | import LineChart from '@/components/Echarts/LineChart' |
|---|
| | | import LineChart from '@/components/Echarts/LineChart2' |
|---|
| | | import DatePicker from '@/components/Form/DatePicker' |
|---|
| | | import MouthPicker from '@/components/Form/MouthPicker' |
|---|
| | | import HourPicker from '@/components/Form/HourPicker' |
|---|
| | | import HourPicker2 from '@/components/Form/HourPicker2' |
|---|
| | | |
|---|
| | | import CustomPicker from '@/components/Form/CustomPicker' |
|---|
| | | import json from '@/assets/json/sensor.json' |
|---|
| | | |
|---|
| | | const lineChartData = { |
|---|
| | | newVisitis: { |
|---|
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145], |
|---|
| | | }, |
|---|
| | | messages: { |
|---|
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130], |
|---|
| | | }, |
|---|
| | | purchases: { |
|---|
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130], |
|---|
| | | }, |
|---|
| | | shoppings: { |
|---|
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
|---|
| | | } |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130], |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export default { |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | components: { |
|---|
| | | LineChart, |
|---|
| | | DatePicker, |
|---|
| | |
|---|
| | | CustomPicker, |
|---|
| | | }, |
|---|
| | | filters: { |
|---|
| | | sensorFilter: function(value) { |
|---|
| | | sensorFilter: function (value) { |
|---|
| | | if (!value) return '' |
|---|
| | | return json[value] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | props: { |
|---|
| | | // defaultData: Array |
|---|
| | |
|---|
| | | radio1: '日报', |
|---|
| | | unit: 0, |
|---|
| | | type: 'select', |
|---|
| | | selectyz: '(单位:ug/m³)', |
|---|
| | | timevalue: [], |
|---|
| | | newLineChartData: { |
|---|
| | | series: [], |
|---|
| | | xAxis: [], |
|---|
| | | title: '' |
|---|
| | | title: '', |
|---|
| | | }, |
|---|
| | | newData: '', |
|---|
| | | defaultData: [], |
|---|
| | | newListData: [], |
|---|
| | | chartSensorName: '', |
|---|
| | | middleData: [], |
|---|
| | | seriesName: ['平均值', '最小值', '最大值'] |
|---|
| | | seriesName: ['平均值', '最小值', '最大值'], |
|---|
| | | pickerOptions: { |
|---|
| | | disabledDate: (time) => { |
|---|
| | | return time.getTime() > new Date() |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 计算属性 类似于data概念 |
|---|
| | |
|---|
| | | this.dataType = 'MouthPicker2' |
|---|
| | | this.unit = 3 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | value(one, two) { |
|---|
| | | if ( |
|---|
| | | one === 'a34004' || |
|---|
| | | one === 'a34002' || |
|---|
| | | one === 'a21004' || |
|---|
| | | one === 'a21026' || |
|---|
| | | one === 'a05024' || |
|---|
| | | one === 'a21001' |
|---|
| | | ) { |
|---|
| | | this.selectyz = '(单位:ug/m³)' |
|---|
| | | } else if ( |
|---|
| | | one === 'a21005' || |
|---|
| | | one === 'a99054' || |
|---|
| | | one === 'a31001' || |
|---|
| | | one === 'a24088' |
|---|
| | | ) { |
|---|
| | | this.selectyz = '(单位:mg/m³)' |
|---|
| | | } else if (one === 'a01001') { |
|---|
| | | this.selectyz = '(单位:℃)' |
|---|
| | | } else if (one === 'a01002') { |
|---|
| | | this.selectyz = '(单位:%)' |
|---|
| | | } else if (one === 'a01007') { |
|---|
| | | this.selectyz = '(单位:m/s)' |
|---|
| | | } else if (one === 'a01008') { |
|---|
| | | this.selectyz = '(单位:。)' |
|---|
| | | } else if (one === 'a01006') { |
|---|
| | | this.selectyz = '(单位:hpa)' |
|---|
| | | } else if (one === 'a00e12') { |
|---|
| | | this.selectyz = '(单位:lux)' |
|---|
| | | } else if (one === 'a19002') { |
|---|
| | | this.selectyz = '(单位:无)' |
|---|
| | | } else if (one === 'a00e03' || one === 'a00e04') { |
|---|
| | | this.selectyz = '(单位:pcs/0.1L)' |
|---|
| | | } else if (one === 'a00e13') { |
|---|
| | | this.selectyz = '(单位:db)' |
|---|
| | | } else if (one === 'a21028') { |
|---|
| | | this.selectyz = '(单位:ppm)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // 生命周期 - 创建完成（可以访问当前 this 实例） |
|---|
| | | created() { |
|---|
| | | this.getData() |
|---|
| | | }, |
|---|
| | | // 生命周期 - 挂载完成（可以访问 DOM 元素） |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | beforeCreate() {}, // 生命周期 - 创建之前 |
|---|
| | | beforeMount() {}, // 生命周期 - 挂载之前 |
|---|
| | | beforeUpdate() {}, // 生命周期 - 更新之前 |
|---|
| | |
|---|
| | | url: '/monitorPoint/queryMonitorPoints', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.$store.state.orgId |
|---|
| | | } |
|---|
| | | organizationId: this.$store.state.orgId, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log('这是index页面左侧设备数据') |
|---|
| | | // console.log(res) |
|---|
| | | this.defaultData = res.data.monitorPoints |
|---|
| | | for (let i = 0; i < this.defaultData.length; i++) { |
|---|
| | | this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name }) |
|---|
| | | this.options.push({ |
|---|
| | | value: this.defaultData[i].name, |
|---|
| | | label: this.defaultData[i].name, |
|---|
| | | }) |
|---|
| | | this.options[i].children = [] |
|---|
| | | if (this.defaultData[i].devices) { |
|---|
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
|---|
| | | this.options[i].children.push({ value: [this.defaultData[i].devices[j].name, this.defaultData[i].devices[j].mac], label: this.defaultData[i].devices[j].name }) |
|---|
| | | this.options[i].children.push({ |
|---|
| | | value: [ |
|---|
| | | this.defaultData[i].devices[j].name, |
|---|
| | | this.defaultData[i].devices[j].mac, |
|---|
| | | ], |
|---|
| | | label: this.defaultData[i].devices[j].name, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | url: '/deviceInfo/getMacSensors', |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | macs: this.newMac1 |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | // console.log(res) |
|---|
| | | this.newSensor = [] |
|---|
| | | var sensor = res.data |
|---|
| | | for (var i in sensor) { |
|---|
| | | this.newSensor.push({ value: i, label: sensor[i] }) |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | macs: this.newMac1, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log(res) |
|---|
| | | this.newSensor = [] |
|---|
| | | var sensor = res.data |
|---|
| | | for (var i in sensor) { |
|---|
| | | this.newSensor.push({ value: i, label: sensor[i] }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 查询 |
|---|
| | | selectData() { |
|---|
| | | var newLineChartData = { |
|---|
| | | series: [], |
|---|
| | | xAxis: [], |
|---|
| | | title: [] |
|---|
| | | title: [], |
|---|
| | | } |
|---|
| | | this.newXData = [] |
|---|
| | | this.$request({ |
|---|
| | |
|---|
| | | params: { |
|---|
| | | mac: this.newMac1[0], |
|---|
| | | sensor_code: this.value, |
|---|
| | | date: this.newData |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | // console.log('获得时间对应因子数据') |
|---|
| | | // console.log(res) |
|---|
| | | const data = res.data |
|---|
| | | const lockLength = 0 |
|---|
| | | // for (let i = 0; i < data.length; i++) { |
|---|
| | | // for (let j = 0; j < data[i].values.length; j++) { |
|---|
| | | // if (lockLength < data[i].values.length) { |
|---|
| | | // newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
|---|
| | | // newLineChartData.series[j].name = data[i].values[j].name |
|---|
| | | // newLineChartData.title.push(data[i].values[j].name) |
|---|
| | | // } |
|---|
| | | // lockLength++ |
|---|
| | | // newLineChartData.series[j].data.push(data[i].values[j].sensorValue) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | for (let i = 0; i < 3; i++) { |
|---|
| | | newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
|---|
| | | for (let j = 0; j < data.length; j++) { |
|---|
| | | newLineChartData.series[i].data.push(data[j].values[i]) |
|---|
| | | newLineChartData.series[i].name = this.seriesName[i] |
|---|
| | | newLineChartData.xAxis.push(data[j].time) |
|---|
| | | } |
|---|
| | | newLineChartData.title = this.seriesName |
|---|
| | | } |
|---|
| | | this.lineChartData = newLineChartData |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err); |
|---|
| | | startTime: this.timevalue[0], |
|---|
| | | endTime: this.timevalue[1], |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log('获得时间对应因子数据') |
|---|
| | | // console.log(res) |
|---|
| | | const data = res.data |
|---|
| | | const lockLength = 0 |
|---|
| | | // for (let i = 0; i < data.length; i++) { |
|---|
| | | // for (let j = 0; j < data[i].values.length; j++) { |
|---|
| | | // if (lockLength < data[i].values.length) { |
|---|
| | | // newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
|---|
| | | // newLineChartData.series[j].name = data[i].values[j].name |
|---|
| | | // newLineChartData.title.push(data[i].values[j].name) |
|---|
| | | // } |
|---|
| | | // lockLength++ |
|---|
| | | // newLineChartData.series[j].data.push(data[i].values[j].sensorValue) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | for (let i = 0; i < 3; i++) { |
|---|
| | | newLineChartData.series.push({ data: [], name: '', type: 'line' }) |
|---|
| | | for (let j = 0; j < data.length; j++) { |
|---|
| | | newLineChartData.series[i].data.push(data[j].values[i]) |
|---|
| | | newLineChartData.series[i].name = this.seriesName[i] |
|---|
| | | } |
|---|
| | | newLineChartData.title = this.seriesName |
|---|
| | | } |
|---|
| | | for (let y = 0; y < data.length; y++) { |
|---|
| | | newLineChartData.xAxis.push(data[y].time) |
|---|
| | | } |
|---|
| | | this.lineChartData = newLineChartData |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 获得子组件时间选择器传递的数据 |
|---|
| | | showPickerChild(data) { |
|---|
| | |
|---|
| | | return value2 - value1 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // 过滤图表因子名称 |
|---|
| | | filterSensorName() { |
|---|
| | | this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode) |
|---|
| | | } |
|---|
| | | } // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | this.chartSensorName = this.$options.filters.sensorFilter( |
|---|
| | | this.chartSensorKey[0].sensorCode |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | }, // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .topSelect{ |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | span:first-child{ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | div:last-child{ |
|---|
| | | width: 300px; |
|---|
| | | line-height: 40px; |
|---|
| | | padding-left: 6px; |
|---|
| | | } |
|---|
| | | .topSelect { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | span:first-child { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | div:last-child { |
|---|
| | | width: 300px; |
|---|
| | | line-height: 40px; |
|---|
| | | padding-left: 6px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .topTitle{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | .topTitle { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | } |
|---|
| | | .btn1{ |
|---|
| | | .btn1 { |
|---|
| | | margin-left: 1%; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | |
|---|
| | | @click="insertL" |
|---|
| | | >添加</el-button |
|---|
| | | > |
|---|
| | | <el-input |
|---|
| | | placeholder="请输入内容" |
|---|
| | | v-model="inputnum" |
|---|
| | | class="inputNum" |
|---|
| | | clearable |
|---|
| | | > |
|---|
| | | </el-input> |
|---|
| | | |
|---|
| | | <div class="insLu"> |
|---|
| | | <el-upload |
|---|
| | | class="upload-demo" |
|---|
| | |
|---|
| | | components: { index }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | inputnum: 0, |
|---|
| | | tableData: [], |
|---|
| | | fileList: [], |
|---|
| | | file: '', |
|---|
| | |
|---|
| | | }, |
|---|
| | | query: { |
|---|
| | | monitorPointInfo: JSON.stringify(item), |
|---|
| | | device: items, |
|---|
| | | device: JSON.stringify(items), |
|---|
| | | macName: mac, |
|---|
| | | indexs: indexs, |
|---|
| | | items: [items.latitude, items.longitude], |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | this.$request({ |
|---|
| | | url: '/cruiser/cruiserTrajectory', |
|---|
| | | // url: '/cruiser/cruiserTrajectory', |
|---|
| | | url: '/cruiser/carTrajectoryNewAvg', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | mac: this.carMac, |
|---|
| | | time1: this.sensorDate[0], |
|---|
| | | time2: this.sensorDate[1], |
|---|
| | | type: this.sensorKey, |
|---|
| | | range: this.inputnum, |
|---|
| | | }, |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | // console.log(res) |
|---|
| | | if (!res.data.length) { |
|---|
| | | this.noneData = true |
|---|
| | | this.loading = false |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 执行数据生成逻辑 |
|---|
| | | initStart(res) { |
|---|
| | | // console.log(res.data, 'res.data') |
|---|
| | | this.abc += 1 |
|---|
| | | const that = this |
|---|
| | | if (!res) { |
|---|
| | |
|---|
| | | if (this.responseJSON.length > 0) { |
|---|
| | | this.noneData = false |
|---|
| | | $.each(this.responseJSON, (item, value) => { |
|---|
| | | // console.log(value, 'value') |
|---|
| | | if (typeof value.flylon === 'undefined') { |
|---|
| | | showNoPoints() |
|---|
| | | } else { |
|---|
| | | // console.log(value.flylon.toString().length, 'value.flylon.length') |
|---|
| | | var lng = parseFloat( |
|---|
| | | value.flylon.substr(0, value.flylon.length - 1) |
|---|
| | | value.flylon |
|---|
| | | .toString() |
|---|
| | | .substr(0, value.flylon.toString().length - 1) |
|---|
| | | ) |
|---|
| | | var lat = parseFloat( |
|---|
| | | value.flylat.substr(0, value.flylat.length - 1) |
|---|
| | | value.flylat |
|---|
| | | .toString() |
|---|
| | | .substr(0, value.flylat.toString().length - 1) |
|---|
| | | ) |
|---|
| | | if (lng < 70 || lng > 150 || lat > 60 || lat < 20) { |
|---|
| | | return true |
|---|
| | |
|---|
| | | 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 < 150 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 200 |
|---|
| | | // } else if ( |
|---|
| | | // value.dustld - 0 !== 0 && |
|---|
| | | // value.dustld - 0 >= 150 && |
|---|
| | | // value.dustld - 0 <= 180 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 220 |
|---|
| | | // } else if ( |
|---|
| | | // value.dustld - 0 !== 0 && |
|---|
| | | // value.dustld - 0 > 180 && |
|---|
| | | // value.dustld - 0 <= 200 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 230 |
|---|
| | | // } else { |
|---|
| | | // point.dustld = value.dustld - 0 |
|---|
| | | // } |
|---|
| | | // if ( |
|---|
| | | // value.dustld - 0 !== 0 && |
|---|
| | | // value.dustld - 0 < 150 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 200 |
|---|
| | | // } else if ( |
|---|
| | | // value.dustld - 0 !== 0 && |
|---|
| | | // value.dustld - 0 >= 150 && |
|---|
| | | // value.dustld - 0 <= 180 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 220 |
|---|
| | | // } else if ( |
|---|
| | | // value.dustld - 0 !== 0 && |
|---|
| | | // value.dustld - 0 > 180 && |
|---|
| | | // value.dustld - 0 <= 200 && |
|---|
| | | // (that.carMac === 'p5dnd7a0243622' || |
|---|
| | | // that.carMac === 'p5dnd7a0243625') |
|---|
| | | // ) { |
|---|
| | | // point.dustld = 230 |
|---|
| | | // } else { |
|---|
| | | // point.dustld = value.dustld - 0 |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | point.dustld = value.dustld - 0 |
|---|
| | | point.times = value.time |
|---|
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // for (var j = 0; j < points.length; j++) { |
|---|
| | | // var point2 = points[j] |
|---|
| | | // var dis = that.map.getDistance(point1, point2) // 返回两点之间的直线距离，单位是米 |
|---|
| | | // if (dis < size) { |
|---|
| | | // flag = false |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // points.push(point1) |
|---|
| | | // console.log(points,'num'); |
|---|
| | | // if (flag) { |
|---|
| | | points.push(point1) |
|---|
| | | console.log(points,'num'); |
|---|
| | | if (flag) { |
|---|
| | | points.push(point1) |
|---|
| | | // console.log(points,'num'); |
|---|
| | | } |
|---|
| | | // console.log(points, 'num') |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return points |
|---|
| | |
|---|
| | | // this.bg = require('@/assets/images/tl_TVOCNew.png') |
|---|
| | | break |
|---|
| | | } |
|---|
| | | this.initStart(this.carData) |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.getStart() |
|---|
| | | }) |
|---|
| | | this.initStart(); |
|---|
| | | }, |
|---|
| | | changeCode1(index) { |
|---|
| | | this.changeColor1 = index |
|---|
| | |
|---|
| | | .insLu div { |
|---|
| | | margin-top: 0.8rem; |
|---|
| | | } |
|---|
| | | /deep/.inputNum { |
|---|
| | | width: 5% !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | one === 'a34002' || |
|---|
| | | one === 'a21004' || |
|---|
| | | one === 'a21026' || |
|---|
| | | one === 'a05024' || |
|---|
| | | one === 'a21001' |
|---|
| | | one === 'a05024' |
|---|
| | | ) { |
|---|
| | | this.selectyz = '(单位:ug/m³)' |
|---|
| | | } else if ( |
|---|
| | |
|---|
| | | this.selectyz = '(单位:pcs/0.1L)' |
|---|
| | | } else if (one === 'a00e13') { |
|---|
| | | this.selectyz = '(单位:db)' |
|---|
| | | } else if (one === 'a21028') { |
|---|
| | | } else if ( |
|---|
| | | one === 'a21028' || |
|---|
| | | one === 'a25002' || |
|---|
| | | one === 'a21001' || |
|---|
| | | one === 'a25005' || |
|---|
| | | one === 'a25003' |
|---|
| | | ) { |
|---|
| | | this.selectyz = '(单位:ppm)' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | |
|---|
| | | methods: { |
|---|
| | | // 查询数据 |
|---|
| | | selectData() { |
|---|
| | | console.log(this.newData) |
|---|
| | | var newLineChartData = { |
|---|
| | | series: [], |
|---|
| | | xAxis: [], |
|---|
| | |
|---|
| | | newLineChartData.series[j].data.push( |
|---|
| | | data[i].deviceData[j].sensorValue |
|---|
| | | ) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | newLineChartData.xAxis.push(data[i].time) |
|---|
| | | } |
|---|
| | |
|---|
| | | v-for="(val, key, i) in defaultMonitorItems" |
|---|
| | | :key="i" |
|---|
| | | style="flex: 1; display: flex" |
|---|
| | | |
|---|
| | | > |
|---|
| | | <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{ |
|---|
| | | val.sensorCode | sensorFilter |
|---|
| | |
|---|
| | | // this.macLng = this.$route.query.items |
|---|
| | | // this.monitorPointInfo = this.$route.params.monitorPointInfo |
|---|
| | | this.monitorPointInfo = JSON.parse(this.$route.query.monitorPointInfo) |
|---|
| | | this.deviceName = this.$route.query.device.name |
|---|
| | | var obj = JSON.parse(this.$route.query.device) |
|---|
| | | this.deviceName = obj.name |
|---|
| | | this.regionCode = this.$store.state.regionCode |
|---|
| | | // this.regionCode = this.$store.state.regionCode |
|---|
| | | this.sensorLayout() |
|---|
| | |
|---|
| | | 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 |
|---|
| | | // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName |
|---|
| | | } else { |
|---|
| | | socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName |
|---|
| | | // socketUrl = 'http://192.168.0.4:8081/singleDevice/' + this.macName |
|---|
| | | // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName |
|---|
| | | } |
|---|
| | | // 替换http为WS |
|---|
| | | socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws') |
|---|
| | |
|---|
| | | // console.log(1); |
|---|
| | | // if (JSON.parse(msg.data).名称) { |
|---|
| | | that.wsData2 = JSON.parse(msg.data) |
|---|
| | | // console.log(msg.data, 'data2') |
|---|
| | | console.log(that.wsData2, 'that.wsData2') |
|---|
| | | // that.wsData2.on('click',function (params) { |
|---|
| | | // console.log(params); |
|---|
| | | // }) |
|---|
| | |
|---|
| | | // 判断PM2.5的超标预警 |
|---|
| | | if (e1Data > 250) { |
|---|
| | | that.e1Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | that.coreMonitorItems[0].bg=5 |
|---|
| | | that.coreMonitorItems[0].bg = 5 |
|---|
| | | } else if (e1Data > 150) { |
|---|
| | | that.coreMonitorItems[0].bg=4 |
|---|
| | | that.coreMonitorItems[0].bg = 4 |
|---|
| | | that.e1Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e1Data > 115) { |
|---|
| | | that.coreMonitorItems[0].bg=3 |
|---|
| | | that.coreMonitorItems[0].bg = 3 |
|---|
| | | that.e1Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e1Data > 75) { |
|---|
| | | that.coreMonitorItems[0].bg=2 |
|---|
| | | that.coreMonitorItems[0].bg = 2 |
|---|
| | | that.e1Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e1Data > 35) { |
|---|
| | | that.coreMonitorItems[0].bg=1 |
|---|
| | | that.coreMonitorItems[0].bg = 1 |
|---|
| | | that.e1Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | // console.log(that.coreMonitorItems[0].bg,'bg'); |
|---|
| | |
|---|
| | | } |
|---|
| | | // 判断PM10的超标预警 |
|---|
| | | if (e2Data > 420) { |
|---|
| | | that.coreMonitorItems[1].bg=5 |
|---|
| | | that.coreMonitorItems[1].bg = 5 |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | } else if (e2Data > 350) { |
|---|
| | | that.coreMonitorItems[1].bg=4 |
|---|
| | | that.coreMonitorItems[1].bg = 4 |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e2Data > 250) { |
|---|
| | | that.coreMonitorItems[1].bg=3 |
|---|
| | | that.coreMonitorItems[1].bg = 3 |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e2Data > 150) { |
|---|
| | | that.coreMonitorItems[1].bg=2 |
|---|
| | | that.coreMonitorItems[1].bg = 2 |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e2Data > 50) { |
|---|
| | | that.coreMonitorItems[1].bg=1 |
|---|
| | | that.coreMonitorItems[1].bg = 1 |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | that.e2Bg = require('@/assets/images/level0_circle0.gif') |
|---|
| | | } |
|---|
| | | // 判断CO的超标预警 |
|---|
| | | if (e10Data > 90) { |
|---|
| | | that.coreMonitorItems[4].bg=5 |
|---|
| | | that.coreMonitorItems[4].bg = 5 |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | } else if (e10Data > 60) { |
|---|
| | | that.coreMonitorItems[4].bg=4 |
|---|
| | | that.coreMonitorItems[4].bg = 4 |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e10Data > 35) { |
|---|
| | | that.coreMonitorItems[4].bg=3 |
|---|
| | | that.coreMonitorItems[4].bg = 3 |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e10Data > 10) { |
|---|
| | | that.coreMonitorItems[4].bg=2 |
|---|
| | | that.coreMonitorItems[4].bg = 2 |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e10Data > 5) { |
|---|
| | | that.coreMonitorItems[4].bg=1 |
|---|
| | | that.coreMonitorItems[4].bg = 1 |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | that.e10Bg = require('@/assets/images/level0_circle0.gif') |
|---|
| | | } |
|---|
| | | // 判断SO2的超标预警 |
|---|
| | | if (e11Data > 1600) { |
|---|
| | | that.coreMonitorItems[3].bg=5 |
|---|
| | | that.coreMonitorItems[3].bg = 5 |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | } else if (e11Data > 800) { |
|---|
| | | that.coreMonitorItems[3].bg=4 |
|---|
| | | that.coreMonitorItems[3].bg = 4 |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e11Data > 650) { |
|---|
| | | that.coreMonitorItems[3].bg=3 |
|---|
| | | that.coreMonitorItems[3].bg = 3 |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e11Data > 500) { |
|---|
| | | that.coreMonitorItems[3].bg=2 |
|---|
| | | that.coreMonitorItems[3].bg = 2 |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e11Data > 150) { |
|---|
| | | that.coreMonitorItems[3].bg=1 |
|---|
| | | that.coreMonitorItems[3].bg = 1 |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | that.e11Bg = require('@/assets/images/level0_circle0.gif') |
|---|
| | | } |
|---|
| | | // 判断O3的超标预警 |
|---|
| | | if (e15Data > 800) { |
|---|
| | | that.coreMonitorItems[5].bg=5 |
|---|
| | | that.coreMonitorItems[5].bg = 5 |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | } else if (e15Data > 400) { |
|---|
| | | that.coreMonitorItems[5].bg=4 |
|---|
| | | that.coreMonitorItems[5].bg = 4 |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e15Data > 300) { |
|---|
| | | that.coreMonitorItems[5].bg=3 |
|---|
| | | that.coreMonitorItems[5].bg = 3 |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e15Data > 200) { |
|---|
| | | that.coreMonitorItems[5].bg=2 |
|---|
| | | that.coreMonitorItems[5].bg = 2 |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e15Data > 160) { |
|---|
| | | that.coreMonitorItems[5].bg=1 |
|---|
| | | that.coreMonitorItems[5].bg = 1 |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | that.e15Bg = require('@/assets/images/level0_circle0.gif') |
|---|
| | | } |
|---|
| | | // 判断NO2的超标预警 |
|---|
| | | if (e16Data > 2340) { |
|---|
| | | that.coreMonitorItems[2].bg=5 |
|---|
| | | that.coreMonitorItems[2].bg = 5 |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle5.gif') |
|---|
| | | } else if (e16Data > 1200) { |
|---|
| | | that.coreMonitorItems[2].bg=4 |
|---|
| | | that.coreMonitorItems[2].bg = 4 |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle4.gif') |
|---|
| | | } else if (e16Data > 700) { |
|---|
| | | that.coreMonitorItems[2].bg=3 |
|---|
| | | that.coreMonitorItems[2].bg = 3 |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle3.gif') |
|---|
| | | } else if (e16Data > 200) { |
|---|
| | | that.coreMonitorItems[2].bg=2 |
|---|
| | | that.coreMonitorItems[2].bg = 2 |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle2.gif') |
|---|
| | | } else if (e16Data > 100) { |
|---|
| | | that.coreMonitorItems[2].bg=1 |
|---|
| | | that.coreMonitorItems[2].bg = 1 |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle1.gif') |
|---|
| | | } else { |
|---|
| | | that.e16Bg = require('@/assets/images/level0_circle0.gif') |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="dashboard-container" style="height:100%"> |
|---|
| | | <div class="dashboard-container" style="height: 100%"> |
|---|
| | | <el-container style="height: 100%; border: 1px solid #eee"> |
|---|
| | | <el-aside |
|---|
| | | v-if="this.$store.state.aside" |
|---|
| | |
|---|
| | | style="background-color: rgb(238, 241, 246)" |
|---|
| | | > |
|---|
| | | <!-- 切换城市框，改成模糊查询框 --> |
|---|
| | | <div style="display:flex;margin-bottom:5px"> |
|---|
| | | <div style="display: flex; margin-bottom: 5px"> |
|---|
| | | <el-cascader |
|---|
| | | v-model="newRegion" |
|---|
| | | placeholder="选择省/市/区" |
|---|
| | |
|---|
| | | :props="{ checkStrictly: true }" |
|---|
| | | clearable |
|---|
| | | change-on-select |
|---|
| | | style="flex:1" |
|---|
| | | style="flex: 1" |
|---|
| | | /> |
|---|
| | | <div style="width: 20%;line-height: 30px;text-align: center;background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;" @click="getRegionApi">查询</div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | width: 20%; |
|---|
| | | line-height: 30px; |
|---|
| | | text-align: center; |
|---|
| | | background: #409eff; |
|---|
| | | color: #fff; |
|---|
| | | margin: 5px; |
|---|
| | | border-radius: 5px; |
|---|
| | | cursor: pointer; |
|---|
| | | font-size: 14px; |
|---|
| | | " |
|---|
| | | @click="getRegionApi" |
|---|
| | | > |
|---|
| | | 查询 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="display:flex;margin-bottom:5px"> |
|---|
| | | <el-input v-model="searchText" placeholder="快速查询" clearable prefix-icon="el-icon-search" /> |
|---|
| | | <div style="display: flex; margin-bottom: 5px"> |
|---|
| | | <el-input |
|---|
| | | v-model="searchText" |
|---|
| | | placeholder="快速查询" |
|---|
| | | clearable |
|---|
| | | prefix-icon="el-icon-search" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <el-menu |
|---|
| | | :default-openeds="openeds" |
|---|
| | | class="elwidth" |
|---|
| | | > |
|---|
| | | <el-menu :default-openeds="openeds" class="elwidth"> |
|---|
| | | <el-submenu |
|---|
| | | v-for="(item,index) in defaultData" |
|---|
| | | v-for="(item, index) in defaultData" |
|---|
| | | :key="index" |
|---|
| | | :index="(index+1).toString()" |
|---|
| | | style="border-bottom:1px solid #eee;padding-left: 15px;" |
|---|
| | | :index="(index + 1).toString()" |
|---|
| | | style="border-bottom: 1px solid #eee; padding-left: 15px" |
|---|
| | | class="abc" |
|---|
| | | > |
|---|
| | | <template |
|---|
| | | slot="title" |
|---|
| | | class="title" |
|---|
| | | style="padding-left:20px!important" |
|---|
| | | style="padding-left: 20px !important" |
|---|
| | | > |
|---|
| | | <!-- <i |
|---|
| | | style="vertical-align: -2px;font-size: 20px;margin-right:5px" |
|---|
| | |
|---|
| | | /> --> |
|---|
| | | |
|---|
| | | <span |
|---|
| | | style="height:12px;display: inline-block;" |
|---|
| | | style="height: 12px; display: inline-block" |
|---|
| | | class="circle" |
|---|
| | | :class="{'circle-0':item.state == 0,'circle-1':item.state == 1,'circle-2':item.state == 2,'circle-3':item.state == 3,'circle-4':item.state == 4,'circle-5':item.state == 5,'circle-6':item.state == 6}" |
|---|
| | | :class="{ |
|---|
| | | 'circle-0': item.state == 0, |
|---|
| | | 'circle-1': item.state == 1, |
|---|
| | | 'circle-2': item.state == 2, |
|---|
| | | 'circle-3': item.state == 3, |
|---|
| | | 'circle-4': item.state == 4, |
|---|
| | | 'circle-5': item.state == 5, |
|---|
| | | 'circle-6': item.state == 6, |
|---|
| | | }" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <!-- <el-button type="primary" circle /> --> |
|---|
| | | {{ item.name }} |
|---|
| | | </template> |
|---|
| | | <el-menu-item |
|---|
| | | v-for="(items,indexitem) in item.devices" |
|---|
| | | v-for="(items, indexitem) in item.devices" |
|---|
| | | :key="indexitem" |
|---|
| | | style="display: flex;align-items: center;padding-right: 0;padding-left:35px" |
|---|
| | | :index="(index+1 + '-' + indexitem + 1).toString()" |
|---|
| | | style=" |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | padding-right: 0; |
|---|
| | | padding-left: 35px; |
|---|
| | | " |
|---|
| | | :index="(index + 1 + '-' + indexitem + 1).toString()" |
|---|
| | | @click="jump(items)" |
|---|
| | | > |
|---|
| | | <!-- <div> --> |
|---|
| | | <!-- <el-button type="primary" circle /> --> |
|---|
| | | <span |
|---|
| | | class="circle" |
|---|
| | | :class="{'circle-0':items.state == 0,'circle-1':items.state == 1,'circle-2':items.state == 2,'circle-3':items.state == 3,'circle-4':items.state == 4,'circle-5':items.state == 5,'circle-6':items.state == 6}" |
|---|
| | | :class="{ |
|---|
| | | 'circle-0': items.state == 0, |
|---|
| | | 'circle-1': items.state == 1, |
|---|
| | | 'circle-2': items.state == 2, |
|---|
| | | 'circle-3': items.state == 3, |
|---|
| | | 'circle-4': items.state == 4, |
|---|
| | | 'circle-5': items.state == 5, |
|---|
| | | 'circle-6': items.state == 6, |
|---|
| | | }" |
|---|
| | | /> |
|---|
| | | <span>{{ items.name }}</span> |
|---|
| | | <i |
|---|
| | | style="vertical-align: -2.5px;font-size: 20px;margin-left:5px" |
|---|
| | | style=" |
|---|
| | | vertical-align: -2.5px; |
|---|
| | | font-size: 20px; |
|---|
| | | margin-left: 5px; |
|---|
| | | " |
|---|
| | | class="iconfont iconfaxianzuobiao" |
|---|
| | | @click="deviceDetail(items.mac,item,items,indexitem)" |
|---|
| | | @click="deviceDetail(items.mac, item, items, indexitem)" |
|---|
| | | /> |
|---|
| | | <!-- </div> --> |
|---|
| | | </el-menu-item> |
|---|
| | |
|---|
| | | <!-- <Map :mpid="monitorPointId" :rc="regionCode" /> --> |
|---|
| | | <compoment |
|---|
| | | :is="this.$store.state.type" |
|---|
| | | v-if="weidu&&jingdu" |
|---|
| | | v-if="weidu && jingdu" |
|---|
| | | ref="child" |
|---|
| | | :weidu="weidu" |
|---|
| | | :jingdu="jingdu" |
|---|
| | |
|---|
| | | const lineChartData = { |
|---|
| | | newVisitis: { |
|---|
| | | expectedData: [100, 120, 161, 134, 105, 160, 165], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145] |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 145], |
|---|
| | | }, |
|---|
| | | messages: { |
|---|
| | | expectedData: [200, 192, 120, 144, 160, 130, 140], |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130] |
|---|
| | | actualData: [180, 160, 151, 106, 145, 150, 130], |
|---|
| | | }, |
|---|
| | | purchases: { |
|---|
| | | expectedData: [80, 100, 121, 104, 105, 90, 100], |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130] |
|---|
| | | actualData: [120, 90, 100, 138, 142, 130, 130], |
|---|
| | | }, |
|---|
| | | shoppings: { |
|---|
| | | expectedData: [130, 140, 141, 142, 145, 150, 160], |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130] |
|---|
| | | } |
|---|
| | | actualData: [120, 82, 91, 154, 162, 140, 130], |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Map, |
|---|
| | | LineChart, |
|---|
| | | Charts, |
|---|
| | | ReportForm |
|---|
| | | ReportForm, |
|---|
| | | // vLineChart |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | |
|---|
| | | jingdu: 0, |
|---|
| | | weidu: 0, |
|---|
| | | options: [], |
|---|
| | | newRegion: [] |
|---|
| | | newRegion: [], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | changeCity() { |
|---|
| | | return this.$store.state.regionCode |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | searchText(newVal, oldVal) { |
|---|
| | |
|---|
| | | const newDefaultData = [ |
|---|
| | | { |
|---|
| | | name: '', |
|---|
| | | devices: [] |
|---|
| | | } |
|---|
| | | devices: [], |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | let ke = 1 |
|---|
| | | this.defaultData.forEach((v, k, a) => { |
|---|
| | |
|---|
| | | // this.newRegion = newVal |
|---|
| | | this.getRegionApi() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | beforeCreate() { |
|---|
| | | // this.$store.state.regionCode = this.$route.params.cName |
|---|
| | |
|---|
| | | }, |
|---|
| | | // 父组件点击站点列表子组件跳转地图方法 |
|---|
| | | jump(items) { |
|---|
| | | console.log(items) |
|---|
| | | this.jumpData = [] |
|---|
| | | // const newLL = this.bd09togcj02(items.longitude, items.latitude) |
|---|
| | | const newLL = [items.latitude, items.longitude] |
|---|
| | | this.jumpData.push(newLL[0]) |
|---|
| | | this.jumpData.push(newLL[1]) |
|---|
| | | // console.log(this.jumpData) |
|---|
| | | console.log(this.jumpData) |
|---|
| | | this.$refs.child.jumpMap(this.jumpData) |
|---|
| | | }, |
|---|
| | | // 跳转设备详情页 |
|---|
| | |
|---|
| | | device: items, |
|---|
| | | macName: mac, |
|---|
| | | indexs: indexs, |
|---|
| | | items: [items.latitude, items.longitude] |
|---|
| | | items: [items.latitude, items.longitude], |
|---|
| | | }, |
|---|
| | | query: { |
|---|
| | | monitorPointInfo: JSON.stringify(item), |
|---|
| | | device: items, |
|---|
| | | device: JSON.stringify(items), |
|---|
| | | macName: mac, |
|---|
| | | indexs: indexs, |
|---|
| | | items: [items.latitude, items.longitude] |
|---|
| | | } |
|---|
| | | items: [items.latitude, items.longitude], |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 改变regionCode触发子组件重新请求五分钟接口功能 |
|---|
| | |
|---|
| | | this.getData() |
|---|
| | | this.$refs.child.getRegionApiRequest() |
|---|
| | | this.jump({ latitude: this.weidu, longitude: this.jingdu }) |
|---|
| | | console.log(this.weidu, '纬度') |
|---|
| | | console.log(this.jingdu, '经度') |
|---|
| | | }, |
|---|
| | | // 请求左侧设备数据 |
|---|
| | | getData() { |
|---|
| | |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.organizationId, |
|---|
| | | regionCode: this.$store.state.regionCode |
|---|
| | | } |
|---|
| | | regionCode: this.$store.state.regionCode, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then(res => { |
|---|
| | | // console.log(res) |
|---|
| | | .then((res) => { |
|---|
| | | console.log(res, '123') |
|---|
| | | this.monitorPointIds = [] |
|---|
| | | // console.log(this.monitorPointIds) |
|---|
| | | this.weidu = res.data.monitorPoints[0].devices[0].latitude |
|---|
| | |
|---|
| | | let devisesLength = 0 |
|---|
| | | if (this.defaultData[i].devices) { |
|---|
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
|---|
| | | if (this.defaultData[i].devices.length > 1 && this.defaultData[i].devices[j].state === '0') { |
|---|
| | | if ( |
|---|
| | | this.defaultData[i].devices.length > 1 && |
|---|
| | | this.defaultData[i].devices[j].state === '0' |
|---|
| | | ) { |
|---|
| | | devisesLength++ |
|---|
| | | // continue |
|---|
| | | if (devisesLength === this.defaultData[i].devices.length) { |
|---|
| | |
|---|
| | | this.$store.state.monitorPointName = res.data.monitorPoints[0].name |
|---|
| | | Bus.$emit('monitorPointIds', this.monitorPointIds) // 中央数据总线传递monitorPointIds |
|---|
| | | }) |
|---|
| | | .catch(error => { |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error) |
|---|
| | | // console.log('失败') |
|---|
| | | this.defaultData = [] |
|---|
| | |
|---|
| | | url: '/organization/getMapPath', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.$store.state.orgId |
|---|
| | | } |
|---|
| | | organizationId: this.$store.state.orgId, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then(res => { |
|---|
| | | .then((res) => { |
|---|
| | | // console.log('请求主页getMapPath成功') |
|---|
| | | // console.log(res.data) |
|---|
| | | // console.log(res) |
|---|
| | |
|---|
| | | for (let i = 0; i < data.length; i++) { |
|---|
| | | this.options.push({ |
|---|
| | | value: data[i].provinceCode, |
|---|
| | | label: data[i].provinceName |
|---|
| | | label: data[i].provinceName, |
|---|
| | | }) |
|---|
| | | this.options[i].children = [] |
|---|
| | | for (let j = 0; j < data[i].cities.length; j++) { |
|---|
| | | this.options[i].children.push({ |
|---|
| | | value: data[i].cities[j].cityCode, |
|---|
| | | label: data[i].cities[j].cityName |
|---|
| | | label: data[i].cities[j].cityName, |
|---|
| | | }) |
|---|
| | | this.options[i].children[j].children = [] |
|---|
| | | for (let k = 0; k < data[i].cities[j].areas.length; k++) { |
|---|
| | | this.options[i].children[j].children.push({ |
|---|
| | | value: data[i].cities[j].areas[k].areaCode, |
|---|
| | | label: data[i].cities[j].areas[k].areaName |
|---|
| | | label: data[i].cities[j].areas[k].areaName, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(err => { |
|---|
| | | .catch((err) => { |
|---|
| | | // console.log('请求Region失败') |
|---|
| | | console.log(err) |
|---|
| | | }) |
|---|
| | | // console.log('请求Region结束') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 请求地图数据 |
|---|
| | | // getMap() { |
|---|
| | | // axios.get('http://47.99.64.149:8080/screen_api_v2/screen/newMap-page?areaCode=130900&accountId=223') |
|---|
| | |
|---|
| | | // console.log('失败') |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | |
|---|
| | | .title { |
|---|
| | | padding: 0 20px; |
|---|
| | | } |
|---|
| | | .elwidth{ |
|---|
| | | .elwidth { |
|---|
| | | width: 400px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div style="width:100%"> |
|---|
| | | <div class="topSelect"> |
|---|
| | | <div> |
|---|
| | | <el-select v-model="value" placeholder="选择站点" style="width: 300px;"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | <el-radio-group v-model="radio1" style="margin-left:20px"> |
|---|
| | | <el-radio-button label="时报" /> |
|---|
| | | <el-radio-button label="日报" /> |
|---|
| | | <el-radio-button label="周报" /> |
|---|
| | | <el-radio-button label="月报" /> |
|---|
| | | <el-radio-button label="自定义" /> |
|---|
| | | </el-radio-group> |
|---|
| | | <div style="width: 100%"> |
|---|
| | | <div> |
|---|
| | | <div class="topSelect"> |
|---|
| | | <el-cascader |
|---|
| | | v-model="newMac" |
|---|
| | | :options="options" |
|---|
| | | :props="props" |
|---|
| | | collapse-tags |
|---|
| | | clearable |
|---|
| | | placeholder="选择设备" |
|---|
| | | style="width: 21rem" |
|---|
| | | /> |
|---|
| | | <div> |
|---|
| | | <el-radio-group v-model="select1" style="margin-left: 20px"> |
|---|
| | | <el-radio-button label="小时报" /> |
|---|
| | | <el-radio-button label="日报" /> |
|---|
| | | <el-radio-button label="周报" /> |
|---|
| | | <el-radio-button label="月报" /> |
|---|
| | | <el-radio-button label="自定义" /> |
|---|
| | | </el-radio-group> |
|---|
| | | </div> |
|---|
| | | <component |
|---|
| | | :is="dataType" |
|---|
| | | style="padding-left: 0; margin-left: 30px" |
|---|
| | | @sendPickerChild="showPickerChild" |
|---|
| | | class="select11" |
|---|
| | | /> |
|---|
| | | <el-date-picker |
|---|
| | | v-if="dateDisplay" |
|---|
| | | v-model="value1" |
|---|
| | | style="width:400px" |
|---|
| | | v-model="newData" |
|---|
| | | style="width: 400px; margin-left: 10px" |
|---|
| | | type="daterange" |
|---|
| | | range-separator="至" |
|---|
| | | start-placeholder="开始日期" |
|---|
| | | end-placeholder="结束日期" |
|---|
| | | value-format="yyyy-MM-dd" |
|---|
| | | value-format="yyyy-MM-dd HH" |
|---|
| | | /> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | @click="getReportForm()" |
|---|
| | | style="margin-left: 10px" |
|---|
| | | >查询</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" @click="exportExcel()">报表导出</el-button> |
|---|
| | | </div> |
|---|
| | | <el-button type="primary" @click="exportExcel()">报表导出</el-button> |
|---|
| | | </div> |
|---|
| | | <div class="topTitle"> |
|---|
| | | <el-table |
|---|
| | | id="exportTab" |
|---|
| | | :default-sort="{prop: 'rank', order: 'ascending'}" |
|---|
| | | :default-sort="{ prop: 'rank', order: 'ascending' }" |
|---|
| | | :data="tableData" |
|---|
| | | border |
|---|
| | | style="width: 100%" |
|---|
| | | max-height="800" |
|---|
| | | :stripe="true" |
|---|
| | | @sort-change="changeTableSort" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | prop="rank" |
|---|
| | | label="排名" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="deviceName" |
|---|
| | | label="设备" |
|---|
| | | width="180" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="responsibleUnit" |
|---|
| | | label="责任单位" |
|---|
| | | width="180" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="time" |
|---|
| | | label="时间" |
|---|
| | | width="180" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="aqi" |
|---|
| | | label="AQI" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column prop="rank" label="排名" /> |
|---|
| | | <el-table-column prop="deviceName" label="设备" width="180" /> |
|---|
| | | <el-table-column prop="responsibleUnit" label="责任单位" width="180" /> |
|---|
| | | <el-table-column prop="time" label="时间" width="180" /> |
|---|
| | | <el-table-column prop="aqi" label="AQI" sortable /> |
|---|
| | | <el-table-column |
|---|
| | | prop="comIndex" |
|---|
| | | label="综合指数" |
|---|
| | | width="130" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a34004" |
|---|
| | | label="PM2.5" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a34002" |
|---|
| | | label="PM10" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a21026" |
|---|
| | | label="SO2" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a21004" |
|---|
| | | label="NO2" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a21005" |
|---|
| | | label="CO" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | prop="a05024" |
|---|
| | | label="O3_8H" |
|---|
| | | sortable |
|---|
| | | /> |
|---|
| | | <el-table-column prop="a34004" label="PM2.5" sortable /> |
|---|
| | | <el-table-column prop="a34002" label="PM10" sortable /> |
|---|
| | | <el-table-column prop="a21026" label="SO2" sortable /> |
|---|
| | | <el-table-column prop="a21004" label="NO2" sortable /> |
|---|
| | | <el-table-column prop="a21005" label="CO" sortable /> |
|---|
| | | <el-table-column prop="a05024" label="O3_8H" sortable /> |
|---|
| | | <el-table-column prop="a99054" label="TVOC" sortable /> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | // 例如：import《组件名称》from'《组件路径》'; |
|---|
| | | import FileSaver from 'file-saver' |
|---|
| | | import XLSX from 'xlsx' |
|---|
| | | import DatePicker from '@/components/Form/DatePicker' |
|---|
| | | import MouthPicker from '@/components/Form/MouthPicker' |
|---|
| | | import HourPicker from '@/components/Form/HourPicker' |
|---|
| | | import HourPicker1 from '@/components/Form/HourPicker1' |
|---|
| | | import CustomPicker from '@/components/Form/CustomPicker' |
|---|
| | | import CustomPicker1 from '@/components/Form/CustomPicker1' |
|---|
| | | import TimePicker1 from '@/components/Form/TimePicker1' |
|---|
| | | import weekPicker from '@/components/Form/weekPicker' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | components: {}, |
|---|
| | | // import 引入的组件需要注入到对象中才能使用 |
|---|
| | | components: { |
|---|
| | | DatePicker, |
|---|
| | | MouthPicker, |
|---|
| | | HourPicker, |
|---|
| | | CustomPicker, |
|---|
| | | CustomPicker1, |
|---|
| | | TimePicker1, |
|---|
| | | HourPicker1, |
|---|
| | | weekPicker, |
|---|
| | | }, |
|---|
| | | props: {}, |
|---|
| | | data() { |
|---|
| | | // 这里存放数据 |
|---|
| | | return { |
|---|
| | | newData: [], |
|---|
| | | props: { multiple: true }, |
|---|
| | | newMac: '', |
|---|
| | | newMac1: [], |
|---|
| | | options: [], |
|---|
| | | select1: '小时报', |
|---|
| | | dataType: 'HourPicker1', |
|---|
| | | unit: '0', |
|---|
| | | radio1: '', |
|---|
| | | value: '', |
|---|
| | | value1: '', |
|---|
| | |
|---|
| | | tableData: [], |
|---|
| | | dateDisplay: false, |
|---|
| | | newKey: 0, |
|---|
| | | timearr: null |
|---|
| | | timearr: null, |
|---|
| | | // pickerOptions1: { |
|---|
| | | // disabledDate(time) { |
|---|
| | | // console.log(time) |
|---|
| | |
|---|
| | | computed: {}, |
|---|
| | | // 监控data中的数据变化 |
|---|
| | | watch: { |
|---|
| | | value(n, o) { |
|---|
| | | this.monitorPointId = n |
|---|
| | | }, |
|---|
| | | value1(n, o) { |
|---|
| | | var timearr = this.getAll(n[0], n[1]) |
|---|
| | | if (timearr.length <= 7) { |
|---|
| | | this.getReportForm(this.newKey) |
|---|
| | | } else { |
|---|
| | | this.$message({ |
|---|
| | | message: '日期天数不能大于7天', |
|---|
| | | type: 'warning' |
|---|
| | | }) |
|---|
| | | select1(nv, ov) { |
|---|
| | | if (nv === '日报') { |
|---|
| | | this.dataType = 'HourPicker' |
|---|
| | | this.unit = 1 |
|---|
| | | } else if (nv === '月报') { |
|---|
| | | this.dataType = 'DatePicker' |
|---|
| | | this.unit = 3 |
|---|
| | | } else if (nv === '周报') { |
|---|
| | | this.dataType = 'weekPicker' |
|---|
| | | this.unit = 2 |
|---|
| | | } else if (nv === '小时报') { |
|---|
| | | this.dataType = 'HourPicker1' |
|---|
| | | this.unit = 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | radio1(n, o) { |
|---|
| | | // var newKey |
|---|
| | | switch (n) { |
|---|
| | | case '时报': |
|---|
| | | this.newKey = 0 |
|---|
| | | break |
|---|
| | | case '日报': |
|---|
| | | this.newKey = 1 |
|---|
| | | break |
|---|
| | | case '周报': |
|---|
| | | this.newKey = 2 |
|---|
| | | break |
|---|
| | | case '月报': |
|---|
| | | this.newKey = 3 |
|---|
| | | break |
|---|
| | | case '自定义': |
|---|
| | | this.newKey = 4 |
|---|
| | | break |
|---|
| | | default: |
|---|
| | | this.newKey = 4 |
|---|
| | | break |
|---|
| | | } |
|---|
| | | if (this.newKey === 4) { |
|---|
| | | if (nv === '自定义') { |
|---|
| | | this.newData = [] |
|---|
| | | this.dateDisplay = true |
|---|
| | | this.unit = null |
|---|
| | | this.dataType = '' |
|---|
| | | } else { |
|---|
| | | this.dateDisplay = false |
|---|
| | | } |
|---|
| | | // if (!this.newKey === 'custom') { |
|---|
| | | this.getReportForm(this.newKey) |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | newMac(newVal, oldval) { |
|---|
| | | this.newMac1 = [] |
|---|
| | | for (let i = 0; i < newVal.length; i++) { |
|---|
| | | // console.log(newVal[i], 111) |
|---|
| | | this.newMac1.push(newVal[i][1][1]) |
|---|
| | | } |
|---|
| | | // 设备更新后，重新获取因子数据 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // 生命周期 - 创建完成（可以访问当前 this 实例） |
|---|
| | | created() { |
|---|
| | | this.getMonitorPointId() |
|---|
| | | this.getData() |
|---|
| | | }, |
|---|
| | | // 生命周期 - 挂载完成（可以访问 DOM 元素） |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | beforeCreate() {}, // 生命周期 - 创建之前 |
|---|
| | | beforeMount() {}, // 生命周期 - 挂载之前 |
|---|
| | | beforeUpdate() {}, // 生命周期 - 更新之前 |
|---|
| | |
|---|
| | | activated() {}, |
|---|
| | | // 方法集合 |
|---|
| | | methods: { |
|---|
| | | showPickerChild(data) { |
|---|
| | | this.newData = data |
|---|
| | | }, |
|---|
| | | // 重新添加rank排名(当表格的排序条件发生变化的时候会触发该事件) |
|---|
| | | changeTableSort() { |
|---|
| | | var sortTableData = this.$refs.mytable.tableData |
|---|
| | |
|---|
| | | sortTableData[i].rank = i + 1 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // changeTableSort({ column, prop, order }) { |
|---|
| | | // var sortTableData = this.$refs.mytable.tableData |
|---|
| | | // for (let i = 0; i < sortTableData.length; i++) { |
|---|
| | | // sortTableData[i].rank = i + 1 |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // 计算自定义天数 |
|---|
| | | // 计算续住的总日期列表 |
|---|
| | | getAll(begin, end) { |
|---|
| | | const arr1 = begin.split('-') // 这里可以换成/ 就2020/01/1 这种 |
|---|
| | | const arr2 = end.split('-') |
|---|
| | | const arr1_ = new Date() |
|---|
| | | const arrTime = [] |
|---|
| | | // console.log(arr1, arr2, arr1_) |
|---|
| | | arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]) |
|---|
| | | const arr2_ = new Date() |
|---|
| | | arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]) |
|---|
| | | const unixDb = arr1_.getTime() |
|---|
| | | const unixDe = arr2_.getTime() |
|---|
| | | for (let k = unixDb; k <= unixDe;) { |
|---|
| | | arrTime.push(this.datetimeparse(k, 'YY-MM-DD')) |
|---|
| | | k = k + 24 * 60 * 60 * 1000 |
|---|
| | | } |
|---|
| | | return arrTime |
|---|
| | | }, |
|---|
| | | // 时间格式处理 |
|---|
| | | datetimeparse(timestamp, format, prefix) { |
|---|
| | | if (typeof timestamp === 'string') { |
|---|
| | | timestamp = Number(timestamp) |
|---|
| | | } |
|---|
| | | // 转换时区 |
|---|
| | | const currentZoneTime = new Date(timestamp) |
|---|
| | | let currentTimestamp = currentZoneTime.getTime() |
|---|
| | | const offsetZone = currentZoneTime.getTimezoneOffset() / 60 // 如果offsetZone>0是西区，西区晚 |
|---|
| | | let offset = null |
|---|
| | | // 客户端时间与服务器时间保持一致，固定北京时间东八区。 |
|---|
| | | offset = offsetZone + 8 |
|---|
| | | currentTimestamp = currentTimestamp + offset * 3600 * 1000 |
|---|
| | | |
|---|
| | | let newtimestamp = null |
|---|
| | | if (currentTimestamp) { |
|---|
| | | if (currentTimestamp.toString().length === 13) { |
|---|
| | | newtimestamp = currentTimestamp.toString() |
|---|
| | | } else if (currentTimestamp.toString().length === 10) { |
|---|
| | | newtimestamp = currentTimestamp + '000' |
|---|
| | | } else { |
|---|
| | | newtimestamp = null |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | newtimestamp = null |
|---|
| | | } |
|---|
| | | const dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date() |
|---|
| | | const YYYY = dateobj.getFullYear() |
|---|
| | | const MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1) |
|---|
| | | const DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate() |
|---|
| | | const HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours() |
|---|
| | | const mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes() |
|---|
| | | const ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds() |
|---|
| | | let output = '' |
|---|
| | | let separator = '/' |
|---|
| | | if (format) { |
|---|
| | | separator = format.match(/-/) ? '-' : '/' |
|---|
| | | output += format.match(/yy/i) ? YYYY : '' |
|---|
| | | output += format.match(/MM/) ? (output.length ? separator : '') + MM : '' |
|---|
| | | output += format.match(/dd/i) ? (output.length ? separator : '') + DD : '' |
|---|
| | | output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : '' |
|---|
| | | output += format.match(/mm/) ? (output.length ? ':' : '') + mm : '' |
|---|
| | | output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : '' |
|---|
| | | } else { |
|---|
| | | output += YYYY + separator + MM + separator + DD |
|---|
| | | } |
|---|
| | | output = prefix ? (prefix + output) : output |
|---|
| | | |
|---|
| | | return newtimestamp ? output : '' |
|---|
| | | }, |
|---|
| | | getTime() { |
|---|
| | | if (this.form.beginTime && this.form.endTime) { |
|---|
| | | var beginTime = this.formatTime(this.form.beginTime, 1) |
|---|
| | | var endTime = this.formatTime(this.form.endTime, 1) |
|---|
| | | var dateBegin = new Date(beginTime) |
|---|
| | | var dateEnd = new Date(endTime) |
|---|
| | | if (dateBegin.getTime() > dateEnd.getTime()) { |
|---|
| | | this.form.beginTime = null |
|---|
| | | this.form.endTime = null |
|---|
| | | alert('开始时间不能大于结束时间！') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.difference(dateBegin, dateEnd) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | difference(dateBegin, dateEnd) { |
|---|
| | | var dateDiff = dateEnd.getTime() - dateBegin.getTime()// 时间差的毫秒数 |
|---|
| | | var dayDiff = Math.ceil(dateDiff / (24 * 3600 * 1000))// 计算出相差天数 |
|---|
| | | this.form.alltime = dayDiff |
|---|
| | | }, |
|---|
| | | // 导出报表 |
|---|
| | | exportExcel() { |
|---|
| | | /* generate workbook object from table */ |
|---|
| | | var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换 |
|---|
| | | var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam) |
|---|
| | | var wb = XLSX.utils.table_to_book( |
|---|
| | | document.querySelector('#exportTab'), |
|---|
| | | xlsxParam |
|---|
| | | ) |
|---|
| | | |
|---|
| | | /* get binary string as output */ |
|---|
| | | var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) |
|---|
| | | var wbout = XLSX.write(wb, { |
|---|
| | | bookType: 'xlsx', |
|---|
| | | bookSST: true, |
|---|
| | | type: 'array', |
|---|
| | | }) |
|---|
| | | try { |
|---|
| | | FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '站点数据表.xlsx') |
|---|
| | | FileSaver.saveAs( |
|---|
| | | new Blob([wbout], { type: 'application/octet-stream' }), |
|---|
| | | '站点数据表.xlsx' |
|---|
| | | ) |
|---|
| | | } catch (e) { |
|---|
| | | if (typeof console !== 'undefined') { |
|---|
| | | console.log(e, wbout) |
|---|
| | |
|---|
| | | return wbout |
|---|
| | | }, |
|---|
| | | // 请求站点信息 |
|---|
| | | getMonitorPointId() { |
|---|
| | | getData() { |
|---|
| | | this.$request({ |
|---|
| | | url: '/monitorPoint/queryAllMonitorPoints', |
|---|
| | | url: '/monitorPoint/queryMonitorPoints', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | organizationId: this.$store.state.orgId |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | // console.log('请求站点的信息') |
|---|
| | | // console.log(res) |
|---|
| | | for (let i = 0; i < res.data.length; i++) { |
|---|
| | | this.options.push({ value: res.data[i].id, label: res.data[i].name }) |
|---|
| | | } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | organizationId: this.$store.state.orgId, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log('这是index页面左侧设备数据') |
|---|
| | | // console.log(res) |
|---|
| | | this.defaultData = res.data.monitorPoints |
|---|
| | | for (let i = 0; i < this.defaultData.length; i++) { |
|---|
| | | this.options.push({ |
|---|
| | | value: this.defaultData[i].name, |
|---|
| | | label: this.defaultData[i].name, |
|---|
| | | }) |
|---|
| | | this.options[i].children = [] |
|---|
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
|---|
| | | this.options[i].children.push({ |
|---|
| | | value: [ |
|---|
| | | this.defaultData[i].devices[j].name, |
|---|
| | | this.defaultData[i].devices[j].mac, |
|---|
| | | ], |
|---|
| | | label: this.defaultData[i].devices[j].name, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 请求报表数据 |
|---|
| | | getReportForm(key) { |
|---|
| | | getReportForm() { |
|---|
| | | this.$request({ |
|---|
| | | url: '/dataDisplay/monitorPointDataDisplay', |
|---|
| | | method: 'get', |
|---|
| | | params: { |
|---|
| | | monitorPointId: this.monitorPointId, |
|---|
| | | reportType: key === 4 ? null : key, |
|---|
| | | startTime: key === 4 ? this.value1[0] : null, |
|---|
| | | endTime: key === 4 ? this.value1[1] : null |
|---|
| | | } |
|---|
| | | }).then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | if (res.code !== 0) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | var tempData = res.data |
|---|
| | | for (let i = 0; i < tempData.length; i++) { |
|---|
| | | tempData[i].rank = i + 1 |
|---|
| | | } |
|---|
| | | this.tableData = tempData |
|---|
| | | // for (let i = 0; i < res.data.data.length; i++) { |
|---|
| | | // this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 }) |
|---|
| | | // } |
|---|
| | | }).catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | method: 'post', |
|---|
| | | data: { |
|---|
| | | macs: this.newMac1, |
|---|
| | | reportType: this.unit, |
|---|
| | | // monitorPointId: this.monitorPointId, |
|---|
| | | // reportType: key === 4 ? null : key, |
|---|
| | | startTime: this.unit === 2 ? this.newData : this.newData[0], |
|---|
| | | endTime: this.unit === 2 ? null : this.newData[1], |
|---|
| | | // times: this.newData instanceof Array ? this.newData : [this.newData], |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | .then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | if (res.code !== 0) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | var tempData = res.data |
|---|
| | | for (let i = 0; i < tempData.length; i++) { |
|---|
| | | tempData[i].rank = i + 1 |
|---|
| | | } |
|---|
| | | this.tableData = tempData |
|---|
| | | // for (let i = 0; i < res.data.data.length; i++) { |
|---|
| | | // this.tableData.push({ ranking: this.defaultData[i].rank, name: this.defaultData[i].name, responsibleUnit: this.defaultData[i].responsibleUnit, time: this.defaultData[i].time, AQI: this.defaultData[i].AQI, compositeIndex: this.defaultData[i].compositeIndex, PM2_5: this.defaultData[i].PM2_5, PM10: this.defaultData[i].PM10, SO2: this.defaultData[i].SO2, NO2: this.defaultData[i].NO2, CO: this.defaultData[i].CO, O3: this.defaultData[i].O3 }) |
|---|
| | | // } |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | }, // 如果页面有keep-alive缓存功能，这个函数会触发 |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped lang="scss"> |
|---|
| | | .topSelect{ |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | span:first-child{ |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | // div:last-child{ |
|---|
| | | // width: 300px; |
|---|
| | | // line-height: 40px; |
|---|
| | | // padding-left: 6px; |
|---|
| | | // } |
|---|
| | | .topSelect { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 20px 15px 0 15px; |
|---|
| | | // display: flex; |
|---|
| | | // justify-content: space-between; |
|---|
| | | // span:first-child { |
|---|
| | | // flex: 1; |
|---|
| | | // } |
|---|
| | | // div:last-child{ |
|---|
| | | // width: 300px; |
|---|
| | | // line-height: 40px; |
|---|
| | | // padding-left: 6px; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | .topTitle{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | .topTitle { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | padding: 0 15px; |
|---|
| | | } |
|---|
| | | .select11 { |
|---|
| | | width: 20% !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
